/* ===========================================================================
   THE SPLIT PHONE FIELD

   Chiran, 31 Aug 2026: "the left side is a small portion where it goes as
   country codes and the right side goes as the phone number."

   The grid is the one already proven on the "Plan my trip" form
   (assets/css/plan-my-trip.css:289) — a narrow fixed-ish country column and a
   number box that takes the rest. Repeated here rather than shared because that
   sheet is scoped to .smt-wrap and only loads on that page; this field appears
   inside the parent theme's popup, which loads on every screen of the site.

   Deliberately inherits the surrounding form's look: the popup's own
   .form-control gives the number box its border and radius, so the field
   belongs to whatever form it lands in instead of looking bolted on.
   =========================================================================== */

.sarisara-phone {
    margin: 0;
}

.sarisara-phone__label {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: #5A5A6E;
}

.sarisara-phone__row {
    display: grid;
    /* The country column is sized for "United Kingdom +44" — long enough to
       read the name, never so wide it crowds the number a person is typing. */
    grid-template-columns: minmax(0, 13em) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

/* ───────────────────────── the country control ─────────────────────────
   Chiran, 31 Aug 2026: "this country code drop-down should not be native HTML
   ... we have our own Sarisara Lanka drop-down styles ... do not showcase all
   the country codes as a huge list from top to bottom in the screen, but only a
   window of maximum 10 to 12 country codes at a time ... and place a search
   field on top of the overlay."

   A native <select> painted all 182 countries down the whole viewport in the
   browser's own grey, unstyleable and with nothing to type into. This is a
   button and an overlay instead, in the brand's own colours.
   ───────────────────────────────────────────────────────────────────────── */

.sarisara-phone__country {
    position: relative;
    min-width: 0;
}

.sarisara-phone .sarisara-phone__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
    background: #FFFFFF;
    border: 1px solid #D9D9E3;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: none;
    /* THE THEME'S OWN BUTTON RULES REACH THIS ONE. Left alone it rendered
       "SRI LANKA +94" in the theme's uppercase gold, because a <button> inside
       the account popup inherits its call-to-action styling. Pinned so the
       control reads as a form field, which is what it is. */
    color: #090920 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 400 !important;
    font-family: inherit;
    min-height: 0;
    height: auto;
}

.sarisara-phone .sarisara-phone__trigger:hover,
.sarisara-phone .sarisara-phone__trigger:focus,
.sarisara-phone .sarisara-phone__trigger:active {
    color: #090920 !important;
    background: #FFFFFF !important;
}

.sarisara-phone .sarisara-phone__trigger:hover {
    border-color: #B9B9C6;
}

.sarisara-phone .sarisara-phone__trigger:focus,
.sarisara-phone.is-open .sarisara-phone__trigger {
    outline: none;
    border-color: #7700FF;
    box-shadow: 0 0 0 3px rgba(119, 0, 255, 0.12);
}

.sarisara-phone__trigger-text {
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Drawn rather than an image, so it needs nothing to load and inherits colour. */
.sarisara-phone__chevron {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-bottom: 2px;
    border-right: 1.6px solid #6B6B80;
    border-bottom: 1.6px solid #6B6B80;
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.sarisara-phone.is-open .sarisara-phone__chevron {
    transform: rotate(-135deg);
    margin-bottom: -3px;
    border-color: #7700FF;
}

/* ── the overlay ── */
.sarisara-phone__menu {
    position: absolute;
    z-index: 1080;            /* above a Bootstrap modal, which sits at 1055 */
    top: calc(100% + 6px);
    left: 0;
    width: max(100%, 260px);
    background: #FFFFFF;
    border: 1px solid #E4E4EC;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(9, 9, 32, 0.16);
    overflow: hidden;
}

.sarisara-phone__menu[hidden] { display: none; }

.sarisara-phone__search {
    padding: 10px;
    border-bottom: 1px solid #EFEFF4;
}

.sarisara-phone .sarisara-phone__search-input {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #090920;
    background: #FAFAFC;
    border: 1px solid #E4E4EC;
    border-radius: 8px;
}

.sarisara-phone .sarisara-phone__search-input:focus {
    outline: none;
    background: #FFFFFF;
    border-color: #7700FF;
    box-shadow: 0 0 0 3px rgba(119, 0, 255, 0.10);
}

/* SIX ROWS, THEN SCROLL. Chiran, 1 Sep 2026: "reduce the height ... where it
   only shows five to six countries at a time, so the user can scroll or search
   to find the rest." Eleven rows made the overlay tall enough to cover the rest
   of the sign-up form.
   6 rows x 38px + the 6px padding top and bottom. */
.sarisara-phone__list {
    max-height: 240px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    -webkit-overflow-scrolling: touch;
}

.sarisara-phone__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 38px;
    padding: 0 10px;
    font-size: 14.5px;
    color: #090920;
    border-radius: 8px;
    cursor: pointer;
}

.sarisara-phone__opt:hover,
.sarisara-phone__opt.is-active {
    background: #F4ECFF;      /* the brand violet, at reading strength */
}

.sarisara-phone__opt.is-selected {
    color: #5C00CC;
    font-weight: 600;
}

.sarisara-phone__opt-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sarisara-phone__opt-dial {
    flex: 0 0 auto;
    color: #6B6B80;
    font-variant-numeric: tabular-nums;
}

.sarisara-phone__opt.is-selected .sarisara-phone__opt-dial { color: #7700FF; }

.sarisara-phone__empty {
    padding: 14px 12px;
    color: #6B6B80;
    font-size: 14px;
    text-align: center;
    list-style: none;
}

.sarisara-phone .sarisara-phone__national {
    width: 100%;
    min-width: 0;
    margin: 0;
}

/* A number the country cannot have. Red on the field that is wrong, not on the
   whole form — the country picker beside it is probably fine. */
.sarisara-phone.is-bad .sarisara-phone__national {
    border-color: #FF0A1F;
}

.sarisara-phone__error {
    margin: 6px 2px 0;
    font-size: 13px;
    line-height: 1.45;
    color: #D11020;
}

/* On a phone the two stack. A country name and a number cannot share 320px
   without one of them being unusable, and the number is the one being typed. */
@media (max-width: 520px) {
    .sarisara-phone__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    /* Stacked, the overlay can take the full width — and one row fewer, so the
       search box and the field being filled both stay on screen. */
    .sarisara-phone__menu { width: 100%; }
    .sarisara-phone__list { max-height: 202px; }   /* 5 rows */
}