/* ==========================================================================
 * ABF UI Polish (Cosmetic Only)
 * Scope: .abf-ui wrapper added by [acf_best_form]
 * No behavior, gating, VT logic, rules-map, or JS changes.
 * ========================================================================== */

/* Wrapper + form container */
.abf-ui{
  max-width:none;
  margin:0;
  padding:0;
}
.abf-ui,
.abf-ui .acf-form{
  overflow:visible !important; /* prevent Select2 / dropdown clipping */
}
.abf-ui .acf-form{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
}

/* Labels + instructions */
.abf-ui .acf-label label{
  font-weight:700;
  font-size:14px;
  line-height:1.3;
  color:#ecf2f8;
}
.abf-ui .acf-field .description,
.abf-ui .acf-field .acf-instructions{
  margin-top:6px;
  font-size:12px;
  line-height:1.35;
  color:rgba(236,242,248,.68);
}

/* Inputs */
.abf-ui .acf-input{ margin-top:6px; }
.abf-ui .acf-input input[type="text"],
.abf-ui .acf-input input[type="email"],
.abf-ui .acf-input input[type="url"],
.abf-ui .acf-input input[type="number"],
.abf-ui .acf-input textarea,
.abf-ui .acf-input select{
  width:100%;
  max-width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  padding:12px 14px;
  font-size:14px;
  line-height:1.45;
  background:rgba(255,255,255,.06);
  color:#ecf2f8;
  box-shadow:none;
}
.abf-ui .acf-input textarea{
  min-height:140px;
  resize:vertical;
}

.abf-ui .acf-input input::placeholder,
.abf-ui .acf-input textarea::placeholder{
  color:rgba(236,242,248,.46);
}

/* Field spacing */
.abf-ui .acf-field{
  padding:0 !important;
  border-top:0;
}
.abf-ui .acf-field:first-child{
  padding-top:0 !important;
}

/* Required asterisk */
.abf-ui .acf-required{
  color:#b42318;
  font-weight:700;
}

/* Message fields as section headers */
.abf-ui .acf-field-message{
  padding:18px 0 10px !important;
}
.abf-ui .acf-field-message .acf-label{ display:none; }
.abf-ui .acf-field-message .acf-input{ margin-top:0; }
.abf-ui .acf-field-message .acf-input .acf-message{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.abf-ui .acf-field-message .acf-input .acf-message p{
  margin:0;
  font-weight:700;
  font-size:16px;
  line-height:1.25;
  letter-spacing:.1px;
  color:#ecf2f8;
}

/* Submit */
.abf-ui .acf-form-submit{
  margin-top:16px;
  padding-top:16px;
  border-top:0;
  display:flex;
  gap:10px;
  align-items:center;
}
.abf-ui .acf-form-submit input[type="submit"]{
  border-radius:999px;
  padding:14px 22px;
  font-weight:800;
  border:1px solid transparent;
  background:linear-gradient(135deg, #ff8b2a, #ffbf73);
  color:#0b1118;
}

/* Error blocks */
.abf-ui .acf-error-message{ border-radius:12px; }

/* =========================================================
 * TRUE/FALSE — style ACF native switch (cosmetic only)
 * ======================================================= */
.abf-ui .acf-field-true-false{
  padding:12px 0 !important;
}
.abf-ui .acf-field-true-false .acf-label{
  margin:0 0 8px 0;
}
.abf-ui .acf-field-true-false .acf-input{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
}
.abf-ui .acf-field-true-false .acf-true-false{ margin:0 !important; }
.abf-ui .acf-field-true-false .acf-true-false > label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 !important;
}
/* Hide any leftover Yes/No text nodes */
.abf-ui .acf-field-true-false .acf-true-false > label > span{
  display:none !important;
}
/* Track */
.abf-ui .acf-field-true-false .acf-switch{
  width:46px !important;
  height:26px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.18) !important;
  position:relative !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transform:translateY(1px);
}
/* Hide ACF internal on/off labels (keep accessible) */
.abf-ui .acf-field-true-false .acf-switch .acf-switch-on,
.abf-ui .acf-field-true-false .acf-switch .acf-switch-off{
  position:absolute !important;
  left:-9999px !important;
}
/* Knob */
.abf-ui .acf-field-true-false .acf-switch .acf-switch-slider{
  position:absolute !important;
  top:3px !important;
  left:3px !important;
  width:20px !important;
  height:20px !important;
  border-radius:999px !important;
  background:#fff !important;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:transform .18s ease;
}
/* Checked */
.abf-ui .acf-field-true-false .acf-switch-input:checked + .acf-switch{
  background:rgba(255,139,42,.55) !important;
}
.abf-ui .acf-field-true-false .acf-switch-input:checked + .acf-switch .acf-switch-slider{
  transform:translateX(20px);
}

/* =========================================================
 * Google Map — compact + consistent
 * ======================================================= */
.abf-ui .acf-field-google-map .acf-google-map{
  height:220px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.abf-ui .acf-field-google-map .acf-google-map .title{ padding:10px; }
.abf-ui .acf-field-google-map .acf-google-map .canvas{ height:170px; }

/* Repeater inline map overrides (ACF often injects 400px inline) */
.abf-ui .acf-field-repeater .acf-field-google-map .acf-google-map{
  height:92px !important;
  min-height:92px !important;
}
.abf-ui .acf-field-repeater .acf-field-google-map .acf-google-map .canvas{
  height:40px !important;
  min-height:40px !important;
}
.abf-ui .acf-field-repeater .acf-field-google-map .acf-google-map .title{
  padding:6px 8px !important;
}
.abf-ui .acf-field-repeater .acf-field-google-map .acf-google-map input.search{
  height:34px !important;
  padding:6px 10px !important;
  border-radius:10px !important;
}
.abf-ui .acf-field-repeater .acf-field-google-map .acf-google-map .acf-actions{
  display:none !important;
}

/* =========================================================
 * Repeater tables — compact, readable, scrollable
 * ======================================================= */
.abf-ui .acf-field-repeater .acf-input{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.abf-ui .acf-field-repeater .acf-table{
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
}
.abf-ui .acf-field-repeater .acf-table th,
.abf-ui .acf-field-repeater .acf-table td{
  vertical-align:top !important;
}
.abf-ui .acf-field-repeater .acf-table thead th{
  text-align:left;
  font-size:12px;
  font-weight:700;
  line-height:1.25;
  color:rgba(236,242,248,.82);
  padding:12px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  vertical-align:bottom !important;
}
.abf-ui .acf-field-repeater .acf-table thead th .description{
  font-weight:500;
  color:rgba(236,242,248,.56);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.abf-ui .acf-field-repeater .acf-table tbody td{
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.abf-ui .acf-field-repeater .acf-table tbody tr:last-child td{
  border-bottom:none;
}
.abf-ui .acf-field-repeater .acf-row-handle{
  width:42px;
  min-width:42px;
  text-align:center;
  color:rgba(0,0,0,.55);
}
.abf-ui .acf-field-repeater .acf-input-wrap{ display:block; }

/* Repeater input sizing */
.abf-ui .acf-field-repeater .acf-input input[type="text"],
.abf-ui .acf-field-repeater .acf-input input[type="number"],
.abf-ui .acf-field-repeater .acf-input input[type="url"],
.abf-ui .acf-field-repeater .acf-input textarea,
.abf-ui .acf-field-repeater .acf-input select{
  width:100%;
  max-width:100%;
  padding:8px 10px;
  border-radius:10px;
}
.abf-ui .acf-field-repeater textarea{ min-height:78px; }
.abf-ui .acf-field-repeater td textarea{ min-height:96px; }
.abf-ui .acf-field-repeater td .acf-input input[type="text"]{ min-height:38px; }
.abf-ui .acf-field-repeater input[type="number"]{ min-width:110px; }

/* Repeater actions */
.abf-ui .acf-field-repeater .acf-actions{ padding-top:12px; }
.abf-ui .acf-field-repeater .acf-actions .button,
.abf-ui .acf-field-repeater .acf-actions .acf-button{
  border-radius:12px;
  padding:8px 14px;
  font-weight:700;
}

/* Kill bullet dots from WP media UI inside repeater cells */
.abf-ui .acf-field-repeater td ul,
.abf-ui .acf-field-repeater td ol{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.abf-ui .acf-field-repeater td li{
  margin:0 !important;
  padding:0 !important;
}

/* =========================================================
 * Image field — compact uploader + preview
 * ======================================================= */
.abf-ui .acf-field-image .acf-image-uploader{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.abf-ui .acf-field-image .image-wrap img{
  max-width:120px;
  height:auto;
  border-radius:10px;
}
.abf-ui .acf-field-image .acf-image-uploader p{
  margin:0;
  color:rgba(0,0,0,.60);
  font-size:12px;
}

.abf-ui .media-modal .media-frame-router .media-router button{ color: rgba(0,0,0,.78) !important; }

/* ---------------------------------------------------------
 * WP Media Modal (front-end via ACF): make router tab text visible
 * Scope: ABF only
 * --------------------------------------------------------- */
.abf-ui .media-modal .media-frame-router .media-router a{
  color: rgba(0,0,0,.78) !important;
}

.abf-ui .media-modal .media-frame-router .media-router a:hover{
  color: rgba(0,0,0,.92) !important;
}

/* Active tab */
.abf-ui .media-modal .media-frame-router .media-router .active a,
.abf-ui .media-modal .media-frame-router .media-router a.active{
  color: rgba(0,0,0,.92) !important;
}

/* Repeater image cell: keep "No image selected" + button on one line */
.abf-ui .acf-field-repeater .acf-field-image .acf-image-uploader .hide-if-value p{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 !important;
  font-size:12px;
  color:rgba(0,0,0,.55);
  white-space:normal !important;
}
.abf-ui .acf-field-repeater .acf-field-image .acf-image-uploader .hide-if-value p a.acf-button.button{
  margin-left:auto;
  padding:8px 12px !important;
  border-radius:10px !important;
  font-weight:700;
  line-height:1;
}
.abf-ui .acf-field-repeater .acf-field-image .image-wrap{
  max-width:140px !important;
}
.abf-ui .acf-field-repeater .acf-field-image .image-wrap img{
  max-height:88px !important;
  border-radius:10px;
}

/* =========================================================
 * Select2 — width + dropdown stacking
 * ======================================================= */
.abf-ui .select2-container{ width:100% !important; }
.abf-ui .select2-container--open .select2-dropdown{ z-index:99999 !important; }
.abf-ui .select2-dropdown.select2-dropdown--above{
  top:100% !important;
  bottom:auto !important;
}

/* WP Media Modal router tabs (ACF front-end) — ensure inactive tab text is visible */
.abf-ui .media-modal .media-frame-router .media-router .media-menu-item{
  color: rgba(0,0,0,.78) !important;
}

.abf-ui .media-modal .media-frame-router .media-router .media-menu-item:hover{
  color: rgba(0,0,0,.92) !important;
}

.abf-ui .media-modal .media-frame-router .media-router .media-menu-item.active,
.abf-ui .media-modal .media-frame-router .media-router .media-menu-item[aria-selected="true"]{
  color: rgba(0,0,0,.92) !important;
}

.abf-ui .media-modal .media-frame-router .media-router .media-menu-item{
  -webkit-text-fill-color: rgba(0,0,0,.78) !important;
  opacity: 1 !important;
}

/* =========================================================
 * Gallery — toolbar bullets + button sizing
 * ======================================================= */
.abf-ui .acf-gallery .acf-hl{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.abf-ui .acf-gallery .acf-hl > li{
  margin:0 !important;
  padding:0 !important;
}
.abf-ui .acf-gallery .acf-gallery-toolbar{ padding:10px 0; }
.abf-ui .acf-gallery .acf-gallery-side .acf-gallery-toolbar .acf-button.button{
  border-radius:10px;
  padding:8px 12px;
  font-weight:700;
}

/* =========================================================
 * Responsive
 * ======================================================= */
@media (max-width:900px){
  .abf-ui .acf-field-repeater .acf-table{ min-width:880px; } /* scroll instead of squish */
}
@media (max-width:720px){
  .abf-ui{ padding:0; }
  .abf-ui .acf-form{
    padding:0;
    border-radius:0;
  }
  .abf-ui .acf-field{ padding:12px 0 !important; }
}

/* -----------------------------------------
 * Group fields: remove ACF “boxed outline” look
 * (ACF adds borders on .acf-fields.-border inside group inputs)
 * Insert near your "Field spacing" section (before/after .abf-ui .acf-field{...})
 * ----------------------------------------- */
.abf-ui .acf-field-group > .acf-input > .acf-fields.-border,
.abf-ui .acf-field-group .acf-input > .acf-fields.-border{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Some themes/ACF skins add an inset outline on the group container itself */
.abf-ui .acf-field-group{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Prevent the nested wrapper from creating extra “frame” spacing */
.abf-ui .acf-field-group > .acf-input > .acf-fields.-top,
.abf-ui .acf-field-group .acf-input > .acf-fields.-top{
  margin: 0 !important;
  padding: 0 !important;
}

/* Select2 */
.abf-ui .select2-container--default .select2-selection--single,
.abf-ui .select2-container--default .select2-selection--multiple{
  min-height:48px;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.06) !important;
  color:#ecf2f8 !important;
}
.abf-ui .select2-container--default .select2-selection--single .select2-selection__rendered,
.abf-ui .select2-container--default .select2-selection--multiple .select2-selection__rendered{
  color:#ecf2f8 !important;
  line-height:46px !important;
}
.abf-ui .select2-dropdown{
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:#13202c !important;
  color:#ecf2f8 !important;
}
.abf-ui .select2-results__option{
  color:#ecf2f8 !important;
}
.abf-ui .select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:rgba(255,139,42,.18) !important;
  color:#fff !important;
}