/* ─────────────────────────────────────────────────────────────────────────
   IPSYSTEM v1.15 — International phone input
   Auto-applied to <input type="tel">, <input class="vphone">, and inputs
   with names matching common phone patterns. Renders flag picker + dial
   code prefix + WhatsApp icon when number is valid.
   ───────────────────────────────────────────────────────────────────────── */
.iphone-wrap{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}
.iphone-country-btn{display:flex;align-items:center;gap:6px;padding:0 10px 0 12px;background:#fff;border:1.5px solid #ced4da;border-right:none;border-radius:6px 0 0 6px;cursor:pointer;color:#495057;font-size:12.5px;font-family:inherit;transition:border .15s,background .15s;flex-shrink:0;outline:none;line-height:1}
.iphone-country-btn:hover{background:#f8f9fa}
.iphone-country-btn .iphone-dial{font-weight:600;color:#495057}
.iphone-country-btn::after{content:"";border:4px solid transparent;border-top-color:#878a99;margin-top:2px;margin-left:2px;transition:transform .2s}
.iphone-wrap.is-open .iphone-country-btn::after{transform:rotate(180deg)}

/* v1.6.30 — Defeat .vinput border-radius:6px (defined later in
   header.php inline <style>, same specificity, source-order winner).
   Without these higher-specificity rules the input shows all 4 corners
   rounded, creating a tiny notch where the input meets the button —
   reading visually as two separate fields rather than one input. The
   `.iphone-wrap > input.iphone-input` selector is specificity 0,0,2,1
   (one element + two classes + child combinator) vs `.vinput`'s 0,0,1,0,
   so we win regardless of load order. We also drop the input's left
   border entirely so there's no faint line at the join — the button's
   border-right is already none, so the seam is just background-to-background.
*/
.iphone-wrap > input.iphone-input{flex:1;border:1.5px solid #ced4da;border-left:0;border-radius:0 6px 6px 0;padding:8.5px 38px 8.5px 12px;font-size:13px;color:#495057;outline:none;font-family:inherit;background:#fff;transition:border .15s,box-shadow .15s;min-width:0}
.iphone-wrap > input.iphone-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(64,81,137,.1)}

/* When the wrap is focus/open/validated, the country button border should
   match what the input is rendering. Same specificity boost. */
.iphone-wrap.is-open > .iphone-country-btn,
.iphone-wrap:focus-within > .iphone-country-btn{border-color:var(--primary)}
.iphone-wrap:focus-within > input.iphone-input{border-color:var(--primary);box-shadow:0 0 0 3px rgba(64,81,137,.1)}

/* WhatsApp icon — appears inside the input on the right when number is valid */
/* Icon sits inside the phone input, vertically centered on the input row.
   Uses a fixed top offset (not 50%) because the .iphone-wrap can grow
   when validation messages or other siblings are appended below — we want
   the icon aligned with the input itself, not the whole wrap. */
.iphone-wa{position:absolute;right:8px;top:6px;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;display:none;align-items:center;justify-content:center;font-size:14px;text-decoration:none;cursor:pointer;box-shadow:0 2px 4px rgba(37,211,102,.4);transition:transform .15s,box-shadow .15s;z-index:2}
.iphone-wa:hover{transform:scale(1.08);box-shadow:0 3px 8px rgba(37,211,102,.5);color:#fff}
.iphone-wrap.is-mobile .iphone-wa{display:flex}
.iphone-wa svg{width:14px;height:14px;fill:currentColor}

/* Live validation states (v1.17) — colored borders + inline message.
   v1.6.30 — Boosted specificity to match the seamless-join rule above. */
.iphone-wrap.is-invalid > input.iphone-input{border-color:#f06548 !important;box-shadow:0 0 0 3px rgba(240,101,72,.10) !important}
.iphone-wrap.is-invalid > .iphone-country-btn{border-color:#f06548 !important}
.iphone-wrap.is-valid > input.iphone-input{border-color:#0ab39c !important;box-shadow:0 0 0 3px rgba(10,179,156,.10) !important}
.iphone-wrap.is-valid > .iphone-country-btn{border-color:#0ab39c !important}
.iphone-msg{width:100%;padding:4px 0 0;font-size:11.5px;line-height:1.4;display:none;align-items:center;gap:5px;flex-basis:100%}
.iphone-msg:not(:empty){display:flex}
.iphone-msg-error{color:#dd4b39}
.iphone-msg-ok{color:#0a8072}
.iphone-msg i{font-size:13px;line-height:1}

/* Dropdown */
.iphone-dropdown{position:absolute;top:calc(100% + 4px);left:0;width:340px;max-width:90vw;background:#fff;border:1px solid #e9ebec;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.14);z-index:1100;display:none;flex-direction:column;max-height:340px}
.iphone-wrap.is-open .iphone-dropdown{display:flex}
.iphone-search-wrap{padding:8px;border-bottom:1px solid #f0f0f0;position:relative;flex-shrink:0}
.iphone-search-icon{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:#878a99;font-size:14px;pointer-events:none}
.iphone-search{width:100%;padding:7px 10px 7px 32px;border:1px solid #ced4da;border-radius:5px;font-size:12.5px;outline:none;background:#fafbfc;font-family:inherit;color:#495057}
.iphone-search:focus{border-color:var(--primary);background:#fff}
.iphone-options{flex:1;overflow-y:auto;max-height:260px}
.iphone-option{display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:13px;cursor:pointer;color:#495057;border-bottom:1px solid #f9f9fb;transition:background .12s}
.iphone-option:last-child{border-bottom:none}
.iphone-option:hover,.iphone-option.is-active{background:#f0f7ff;color:var(--primary)}
.iphone-option.is-selected{background:rgba(10,179,156,.08);color:#0a8072;font-weight:600}
.iphone-option-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iphone-option-dial{color:#878a99;font-size:12px;flex-shrink:0;font-variant-numeric:tabular-nums}
.iphone-option mark{background:#fff3cd;color:#856404;padding:0 1px;font-weight:600;border-radius:2px}
.iphone-empty{padding:18px 14px;text-align:center;color:#adb5bd;font-size:12.5px}