/**
 * Agileware Caldera Forms utility CSS.
 *
 * Extra CSS utilities for handling potentially common requirements form caldera forms.
 */

/**
 * Base variable definitions.
 */
:root
{
  /* Default inline checkbox padding is 10px, but only on one side */;
  --aw-cf-margin: 5px;
  --aw-cf-checkbox-margin: var(--aw-cf-margin);

  /* "Inline" checkboxes and radio buttons: minimum column width */;
  --aw-cf-checkbox-column-min: min-content;
  --aw-cf-checkbox-column-max: 14em;

  /* Various control dimensions and visuals. */
  --aw-cf-control-height: 34px;
  --aw-cf-control-padding-v: 6px;
  --aw-cf-control-padding-h: 12px;
  --aw-cf-control-background: #fff;
  --aw-cf-control-border-color: #ccc;
  --aw-cf-control-border-focus-color: #66afe9;
  --aw-cf-control-border-focus-shadow: rgba(102,175,233,.6);
  --aw-cf-control-border: 1px solid var(--aw-cf-control-border-color);
  --aw-cf-control-border-radius: 2px;
  --aw-cf-control-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  --aw-cf-control-font-size: 14px;
  --aw-cf-control-tick-color: rgba(0, 0, 0, 0.4);

  /* Image for the dropdown tick. */
  --aw-cf-dropdown-tick: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxMCA3Ij48cG9seWdvbiBzdHlsZT0iZmlsbDpyZ2JhKDAsMCwwLDAuNCk7IiBwb2ludHM9IjAsMiAxMCwyIDUsNyIvPjwvc3ZnPg==');
}

/** Inline checkboxes and radios **/
.caldera-grid .form-group .inline-checkboxes > div,
.caldera-grid .form-group .inline-radios     > div,
.caldera-grid .form-group .checkbox,
.caldera-grid .form-group .radio
{
  margin: 0 calc(0px - var(--aw-cf-checkbox-margin));
}

@media (min-width: 768px) {
  @supports (grid-auto-columns: repeat(auto-fill, minmax(var(--aw-cf-checkbox-column-min), var(--aw-cf-checkbox-column-max)))) {
    .caldera-grid .inline-checkboxes > div,
    .caldera-grid .inline-radios     > div {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(var(--aw-cf-checkbox-column-min), var(--aw-cf-checkbox-column-max)));
    }
  }
}

.caldera-grid .form-group   .checkbox-inline,
.caldera-grid .form-group   .checkbox-inline + .checkbox-inline,
.caldera-grid .form-group   .radio-inline,
.caldera-grid .form-group   .radio-inline + .radio-inline,
.caldera-grid .checkbox   > label,
.caldera-grid .radio      > label
{
  margin: var(--aw-cf-checkbox-margin);
  
  display: -webkit-inline-box;
  
  display: -ms-inline-flexbox;
  
  display: inline-flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -ms-flex-line-pack: baseline;
      align-content: baseline;
}

.caldera-grid .checkbox-inline input[type=checkbox],
.caldera-grid .radio-inline    input[type=radio],
.caldera-grid .checkbox        input[type=checkbox],
.caldera-grid .radio           input[type=radio]
{
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin-right: var(--aw-cf-margin);
}

.caldera-grid .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.caldera-grid [class*="col-"] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
}

.caldera-grid .form-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
}

.caldera-grid .form-group > label.sr-only + * {
  margin-top: auto;
}

.caldera-grid .ccselect2-container input {
  height: auto;
}

/** Make the alignment of the file upload button less awful **/
.caldera-grid input[type="file"] {
  line-height: 1;
}

.caldera-grid .form-group input[type="date"] {
  line-height: inherit;
}

.caldera-grid .caldera-forms-conditional-field:empty {
  display: none;
}

/** Normalise the height of [CiviCRM] select2 controls, and style the dropdown indicator. **/
.caldera-grid .select2-container .select2-selection--single {
    width: 100%;
    height: var(--aw-cf-control-height);
    padding: var(--aw-cf-control-padding-v) var(--aw-cf-control-padding-h);
    background-color: var(--aw-cf-control-background);
    border: var(--aw-cf-control-border);
    border-color: var(--aw-cf-control-border-color);
    border-radius: var(--aw-cf-control-border-radius);
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !important;
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !important;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.caldera-grid .select2-container.select2-container--open .select2-selection--single,
.caldera-grid .select2-container.select2-container--open .select2-dropdown {
  border-color: var(--aw-cf-control-border-focus-color);
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px var(--aw-cf-control-border-focus-shadow) !important;
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px var(--aw-cf-control-border-focus-shadow) !important;
}

.select2-container--default .select2-dropdown .select2-search {
  padding: 0;
  border: none;
}

.select2-container--default .select2-dropdown .select2-search input {
  border-style: solid none;
}

.caldera-grid .select2-container .select2-selection--single .select2-selection__arrow {
  position: static;
  width: calc(var(--aw-cf-control-height) - 2px);
  margin-left: auto;
  margin-right: calc(0px - var(--aw-cf-control-padding-h));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  background-image: var(--aw-cf-dropdown-tick);
  background-position: center center;
  background-repeat: no-repeat;
  background-size:  calc(var(--aw-cf-control-height) / 3) auto;
}

.caldera-grid .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
  border-left-color: var(--aw-cf-control-border-color);
}

.caldera-grid .select2-container .select2-selection--single .select2-selection__arrow b {
  display: none;
  position: static;
  margin: 0;
}

.caldera-grid .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: inherit;
  font-size: var(--aw-cf-control-font-size);
  padding: 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 100%;
          flex: 0 1 100%;
}

/** Style select boxes where possible **/
@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
  .caldera-grid select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  /* Dropdown indicator tick and separator */
  .caldera-grid select.form-control {
    background-image: var(--aw-cf-dropdown-tick),
                      -o-linear-gradient(top, var(--aw-cf-control-border-color), var(--aw-cf-control-border-color));
    background-image: var(--aw-cf-dropdown-tick),
                      -webkit-gradient(linear, left top, left bottom, from(var(--aw-cf-control-border-color)), to(var(--aw-cf-control-border-color)));
    background-image: var(--aw-cf-dropdown-tick),
                      linear-gradient(to bottom, var(--aw-cf-control-border-color), var(--aw-cf-control-border-color));
    background-position: calc(100% - var(--aw-cf-control-height) / 3 + 1px) center,
                         calc(100% - var(--aw-cf-control-height) + 3px) center;
    background-repeat: no-repeat;
    background-size:  calc(var(--aw-cf-control-height) / 3) auto,
                      1px 26px;
    text-shadow: 1px 1px 1px var(--aw-cf-control-background), 0 0 4px var(--aw-cf-control-background);
    
    padding-right: 0;
  }
  
  /* Try and avoid the dropdown indicator appearing when the control is too small for it. */
  @media (max-width: 1399px) and (min-width: 768px) {
    .caldera-grid .col-sm-1 select.form-control {
      background-image: none;
    }
  }
  @media (max-width: 1399px)  {
    .caldera-grid .col-xs-1 select.form-control {
      background-image: none;
    }
  }

  @media (max-width: 699px) {
    .caldera-grid .col-xs-2 select.form-control {
      background-image: none;
    }
  }

  @media (max-width: 349px) {
    .caldera-grid .col-xs-3 select.form-control {
      background-image: none;
    }
  }
}

/** Work around Avada / Fusion setting the col-sm widths below the breakpoint. **/
.caldera-grid [class*="col-"]:not([class*="col-xs-"]) {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@supports (display: grid) {
  .caldera-grid form > .row,
  .caldera-grid .caldera-form-page > .row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    
    -webkit-box-align: stretch;
    
        -ms-flex-align: stretch;
    
            align-items: stretch;
    -ms-flex-line-pack: start;
        align-content: start;

    margin: 0;
  }

  .caldera-grid form .row::before {
    display: none;
  }

  .caldera-grid form > span.caldera-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    grid-column: 1 / -1
  }

  .caldera-grid [class*="col-"] {
    width: unset !important;
    grid-column-end: span 12;
    padding: 0 !important;
  }
}

.caldera-grid [class*="col-"] > .form-group[class*="inline-"] .help-block {
  grid-column: 1 / -1
}

/** Align labels and items if we have subgrid **/
@supports (grid-template-columns: subgrid) {
  .caldera-grid form {
    display: grid;
    grid-template-columns: repeat(12, minmax(5%, auto));

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
  }

  .caldera-grid form > .row,
  .caldera-grid form > .caldera-form-page:not([style*="none"]),
  .caldera-grid form > .caldera-form-page > .row {
        
    grid-column: 1 / span 12;
    display: grid !important;
    grid-template-columns: subgrid;

    -webkit-box-align: stretch;

        -ms-flex-align: stretch;

            align-items: stretch;
    -ms-flex-line-pack: baseline;
        align-content: baseline;
  }

  .caldera-grid .row > [class*="col-"] {
    width: unset;
    grid-column-end: span 12;

    display: grid;

    -webkit-box-align: inherit;

        -ms-flex-align: inherit;

            align-items: inherit;
  }
  
  .caldera-grid [class*="col-"] > .form-group[class*="inline-"] > label + div,
  .caldera-grid [class*="col-"] > .form-group.radios            > label + div,
  .caldera-grid [class*="col-"] > .form-group.checkboxes        > label + div {
    grid-row-end: unset;
    grid-template-rows: auto;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
  } 
  
}

@supports (display: grid) {
  .caldera-grid .row > .col-xs-1  { grid-column-end: span 1;  }
  .caldera-grid .row > .col-xs-2  { grid-column-end: span 2;  }
  .caldera-grid .row > .col-xs-3  { grid-column-end: span 3;  }
  .caldera-grid .row > .col-xs-4  { grid-column-end: span 4;  }
  .caldera-grid .row > .col-xs-5  { grid-column-end: span 5;  }
  .caldera-grid .row > .col-xs-6  { grid-column-end: span 6;  }
  .caldera-grid .row > .col-xs-7  { grid-column-end: span 7;  }
  .caldera-grid .row > .col-xs-8  { grid-column-end: span 8;  }
  .caldera-grid .row > .col-xs-9  { grid-column-end: span 9;  }
  .caldera-grid .row > .col-xs-10 { grid-column-end: span 10; }
  .caldera-grid .row > .col-xs-11 { grid-column-end: span 11; }
  .caldera-grid .row > .col-xs-12 { grid-column-end: span 12; }

  @media (min-width: 768px) {
    .caldera-grid form,
    .caldera-grid .row { gap: 0 calc(var(--aw-cf-margin) * 3); }
    
    .caldera-grid .row > .col-sm-1  { grid-column-end: span 1;  }
    .caldera-grid .row > .col-sm-2  { grid-column-end: span 2;  }
    .caldera-grid .row > .col-sm-3  { grid-column-end: span 3;  }
    .caldera-grid .row > .col-sm-4  { grid-column-end: span 4;  }
    .caldera-grid .row > .col-sm-5  { grid-column-end: span 5;  }
    .caldera-grid .row > .col-sm-6  { grid-column-end: span 6;  }
    .caldera-grid .row > .col-sm-7  { grid-column-end: span 7;  }
    .caldera-grid .row > .col-sm-8  { grid-column-end: span 8;  }
    .caldera-grid .row > .col-sm-9  { grid-column-end: span 9;  }
    .caldera-grid .row > .col-sm-10 { grid-column-end: span 10; }
    .caldera-grid .row > .col-sm-11 { grid-column-end: span 11; }
    .caldera-grid .row > .col-sm-12 { grid-column-end: span 12; }
  }

  @media (min-width: 992px) {
    .caldera-grid .row > .col-md-1  { grid-column-end: span 1;  }
    .caldera-grid .row > .col-md-2  { grid-column-end: span 2;  }
    .caldera-grid .row > .col-md-3  { grid-column-end: span 3;  }
    .caldera-grid .row > .col-md-4  { grid-column-end: span 4;  }
    .caldera-grid .row > .col-md-5  { grid-column-end: span 5;  }
    .caldera-grid .row > .col-md-6  { grid-column-end: span 6;  }
    .caldera-grid .row > .col-md-7  { grid-column-end: span 7;  }
    .caldera-grid .row > .col-md-8  { grid-column-end: span 8;  }
    .caldera-grid .row > .col-md-9  { grid-column-end: span 9;  }
    .caldera-grid .row > .col-md-10 { grid-column-end: span 10; }
    .caldera-grid .row > .col-md-11 { grid-column-end: span 11; }
    .caldera-grid .row > .col-md-12 { grid-column-end: span 12; }
  }

  @media (min-width: 1200px) {
    .caldera-grid .row > .col-lg-1  { grid-column-end: span 1;  }
    .caldera-grid .row > .col-lg-2  { grid-column-end: span 2;  }
    .caldera-grid .row > .col-lg-3  { grid-column-end: span 3;  }
    .caldera-grid .row > .col-lg-4  { grid-column-end: span 4;  }
    .caldera-grid .row > .col-lg-5  { grid-column-end: span 5;  }
    .caldera-grid .row > .col-lg-6  { grid-column-end: span 6;  }
    .caldera-grid .row > .col-lg-7  { grid-column-end: span 7;  }
    .caldera-grid .row > .col-lg-8  { grid-column-end: span 8;  }
    .caldera-grid .row > .col-lg-9  { grid-column-end: span 9;  }
    .caldera-grid .row > .col-lg-10 { grid-column-end: span 10; }
    .caldera-grid .row > .col-lg-11 { grid-column-end: span 11; }
    .caldera-grid .row > .col-lg-12 { grid-column-end: span 12; }
  }
}