/*
  intl-tel-input (upstream) — Typography/Alignment overrides
  ----------------------------------------------------------
  Goal: Make the dial-code area (+34) look like a seamless part of the same input:
  - same font-size / weight / color
  - same line-height
  - consistent vertical alignment (no "dial code lower" effect)

  IMPORTANT:
  This file must be loaded AFTER vendor intlTelInput.css.
*/

/* Base typography for the whole control (so the selected dial code can inherit). */

/* Public configurator (/form/) */
body.cfg-page .cfg-inputLike .iti{
  width: 100%;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  color: inherit;
}

/* Admin (order/new_order edit panels). Match .admin-input color. */
body.admin .admin-page[data-page="order"] .iti{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: inherit;
  line-height: 20px;
  font-weight: inherit;
  color: #1f2937; /* same as .admin-input */
}

/* 2.1. Make dial code typography match the input */
.iti .iti__selected-dial-code,
.iti .iti__country-name,
.iti .iti__dial-code{
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
  opacity: 1 !important;
}

/* 2.2. Selected-country must inherit the same typography */
.iti .iti__selected-country,
.iti .iti__selected-country-primary{
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}

/* 2.3. Align flag left edge with input text (match .input padding-left: 16px) */
body.cfg-page .iti .iti__selected-country-primary{
  padding-left: 15px;
}

/* 2.4. Vertical alignment: keep everything centered in one row */
.iti .iti__country-container,
.iti .iti__flag-container,
.iti .iti__selected-country,
.iti .iti__selected-country-primary{
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  top: 0 !important;
  bottom: 0 !important;
}

/* 2.4. Remove vertical offsets on dial code —
   Use inline-flex centering with same line-height as input
   so both elements share identical text positioning. */
.iti .iti__selected-dial-code{
  margin: 0 !important;
  padding: 1px 0 0 !important;  /* +1px nudge: <input> renders text ~1px lower than flex centering */
  display: inline-flex !important;
  align-items: center !important;
  height: 48px !important;
  line-height: 20px !important;
  box-sizing: border-box !important;
}

/* 2.5. Ensure phone input inherits the same typography */
.iti input.iti__tel-input{
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}

/* Keep iOS Safari from auto-zooming (font-size must be >=16px on focus).
   Apply ONLY to intl-tel-input.
*/
@media (max-width: 640px){
  body.cfg-page .cfg-inputLike .iti,
  body.cfg-page .cfg-inputLike .iti input.iti__tel-input{
    font-size: 16px !important;
    line-height: 20px !important;
  }
  body.cfg-page .cfg-inputLike .iti .iti__selected-dial-code{
    font-size: 16px !important;
    /* line-height stays at input height (set in §2.4) for vertical centering */
  }
}

@media (max-width: 980px){
  body.admin .admin-page[data-page="order"] .iti,
  body.admin .admin-page[data-page="order"] .iti input.iti__tel-input{
    font-size: 16px !important;
    line-height: 20px !important;
  }
  body.admin .admin-page[data-page="order"] .iti .iti__selected-dial-code{
    font-size: 16px !important;
  }
}

/* iOS Safari: prevent auto-zoom on focus (ensure >=16px) even on wider iPads */
@supports (-webkit-touch-callout: none){
  body.cfg-page .cfg-inputLike .iti,
  body.cfg-page .cfg-inputLike .iti input.iti__tel-input,
  body.admin .admin-page[data-page="order"] .iti,
  body.admin .admin-page[data-page="order"] .iti input.iti__tel-input{
    font-size: 16px !important;
    line-height: 20px !important;
  }
  body.cfg-page .cfg-inputLike .iti .iti__selected-dial-code,
  body.admin .admin-page[data-page="order"] .iti .iti__selected-dial-code{
    font-size: 16px !important;
  }
}

/* ── Homepage lead form ── */
/*
  Mobile Safari/Chrome add invisible internal padding to <input> that shifts
  text off the shared baseline. Fix: use align-items:stretch so every child
  is forced to the SAME 48px height, then each child uses its own flexbox
  to vertically center its text. No baseline math — pure geometry.
*/
.lead-form .iti,
.dm-form .iti{
  width: 100%;
  font: 400 16px/1 inherit;  /* 16px prevents mobile auto-zoom; line-height:1 resets */
  color: inherit;
  display: flex !important;
  align-items: stretch;        /* KEY: all children same height */
  justify-content: center;
  height: 48px;
  background: #fff;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px #999;
  transition: box-shadow .2s, background .2s;
  box-sizing: border-box;
}
.lead-form .iti:hover,
.dm-form .iti:hover{
  box-shadow: inset 0 0 0 1px #111;
}
.lead-form .iti:focus-within,
.dm-form .iti:focus-within{
  box-shadow: inset 0 0 0 1px #111;
  background: rgba(81, 172, 179, 0.12);
}
/* Country container: static flow, stretch to full height */
.lead-form .iti .iti__country-container,
.dm-form .iti .iti__country-container{
  position: static !important;
  width: auto !important;
  height: auto !important;       /* stretch from parent */
  flex: 0 0 auto;
  display: flex !important;
  align-items: stretch !important;
}
.lead-form .iti .iti__selected-country,
.dm-form .iti .iti__selected-country{
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  padding: 0 12px 0 14px !important;
  border-right: 1px solid #ccc;
  margin-right: 0 !important;
}
.lead-form .iti .iti__selected-country-primary,
.dm-form .iti .iti__selected-country-primary{
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  padding: 0 !important;
}
.lead-form .iti .iti__selected-dial-code,
.dm-form .iti .iti__selected-dial-code{
  color: var(--text) !important;
  margin-left: 6px !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;  /* center text in stretched box */
  height: auto !important;
  box-sizing: border-box !important;
}
.lead-form .iti .iti__arrow,
.dm-form .iti .iti__arrow,
body.cfg-page .iti .iti__arrow{
  display: none !important;
}
/* Input: strip ALL browser defaults, stretch to same height, flex-center text */
.lead-form .iti input.iti__tel-input,
.dm-form .iti input.iti__tel-input{
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  height: auto !important;        /* stretch from parent */
  min-width: 11ch;
  width: auto;
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 0 14px !important;
  text-align: left !important;
  font-size: 16px !important;
  line-height: 48px !important;   /* fallback centering for input (can't use display:flex) */
}
/* font-size ≥16px set globally — prevents Chrome/Safari mobile auto-zoom */

/* ── Force dropdown below the input, full width (all forms) ── */
.lead-form .iti .iti__country-container,
.dm-form .iti .iti__country-container{
  position: static !important;
}
.lead-form .iti--inline-dropdown .iti__dropdown-content,
.dm-form .iti--inline-dropdown .iti__dropdown-content{
  top: calc(100% + 6px) !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  margin-top: 0;
  width: auto !important;
  min-width: 0;
  box-sizing: border-box;
}

/* cfg-page: make .iti the visual pill (flag + code + input inside) */
body.cfg-page .cfg-inputLike .iti{
  display: flex !important;
  align-items: stretch;
  height: 48px;
  background: #fff;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px #e8e8e8;
  transition: box-shadow .2s;
  box-sizing: border-box;
}
body.cfg-page .cfg-inputLike .iti:hover{
  box-shadow: inset 0 0 0 1.5px #ccc;
}
body.cfg-page .cfg-inputLike .iti:focus-within{
  box-shadow: inset 0 0 0 1.5px var(--text, #111);
}
body.cfg-page .cfg-inputLike .iti .iti__country-container{
  position: static !important;
  height: auto !important;
  flex: 0 0 auto;
}
body.cfg-page .cfg-inputLike .iti .iti__selected-country{
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  padding: 0 0 0 18px !important;
}
body.cfg-page .cfg-inputLike .iti .iti__selected-country-primary{
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  padding: 0 !important;
}
body.cfg-page .cfg-inputLike .iti .iti__selected-dial-code{
  color: #999 !important;
  margin-left: 4px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: auto !important;
}
body.cfg-page .cfg-inputLike .iti input.iti__tel-input{
  flex: 1 1 auto;
  width: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: none !important;
  height: auto !important;
  padding: 0 15px 0 4px !important;
  font-size: 16px !important;
  line-height: 48px !important;
}
body.cfg-page .iti--inline-dropdown .iti__dropdown-content{
  top: calc(100% + 6px) !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  min-width: 0;
  box-sizing: border-box;
}

/* ── Dropdown: match site design ── */
.lead-form .iti__dropdown-content,
.dm-form .iti__dropdown-content,
body.cfg-page .iti__dropdown-content{
  border-radius: 14px;
  border: none;
  box-shadow: 0 8px 32px rgba(0,0,0,.13);
  overflow: hidden;
  font-family: inherit;
}
.lead-form .iti__search-input,
.dm-form .iti__search-input,
body.cfg-page .iti__search-input{
  padding: 10px 10px 10px 34px;
  font-size: 16px;  /* >=16px prevents Chrome/Safari auto-zoom on focus */
  font-family: inherit;
  border-bottom: 1px solid #f0f0f0;
  outline: none;
  background: #fafafa;
}
.lead-form .iti__country,
.dm-form .iti__country,
body.cfg-page .iti__country{
  font-size: 14px;
  font-family: inherit;
  padding: 8px 12px;
}
.lead-form .iti__country:hover,
.dm-form .iti__country:hover,
body.cfg-page .iti__country:hover,
.lead-form .iti__country.iti__highlight,
.dm-form .iti__country.iti__highlight,
body.cfg-page .iti__country.iti__highlight{
  background: rgba(0,0,0,.04);
  border-radius: 8px;
}
.lead-form .iti__dial-code,
.dm-form .iti__dial-code,
body.cfg-page .iti__dial-code{
  color: #999;
}