/* ==========================================================================
   Select2 theme — makes the widget indistinguishable from this site's inputs.

   Select2 ships its own opinionated look (grey gradients, 28px rows, a blue
   highlight). Everything below overrides that to match .ct-input on the dark
   home page and the Tailwind-styled input on /ecommerce.

   Scoped to .ct-select2 / .ct-select2-drop, which select2-init.js sets via
   containerCssClass / dropdownCssClass, so nothing here can leak into a future
   Select2 elsewhere on the site.
   ========================================================================== */

/* ---------- Shared shape -------------------------------------------------- */
.select2-container.ct-select2 { width: 100% !important; }

.ct-select2 .select2-selection--single {
    display: flex;
    align-items: center;
    height: auto;
    padding: .85rem 2.6rem .85rem 1.05rem;
    border-radius: var(--ct-r-sm, 10px);
    background-image: none;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ct-select2 .select2-selection--single .select2-selection__rendered {
    padding: 0;
    /* Matches the line-height a browser gives .ct-input, so the widget ends up
       exactly as tall as the text inputs beside it. */
    line-height: 1.55;
    font-family: inherit;
    font-size: .93rem;
}
.ct-select2 .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: 1rem;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    transform-origin: center;
    transition: transform .2s ease;
}
/* Replace the stock CSS triangle with a chevron.
   Select2 draws its arrow as borders on the inner <b>, and its open-state rule
   (.select2-container--default.select2-container--open …) is specific enough to
   win any border override written here. So the <b> is hidden outright and the
   chevron is drawn on the arrow box instead, where nothing competes. */
.ct-select2 .select2-selection--single .select2-selection__arrow b {
    display: none;
}
.ct-select2 .select2-selection--single .select2-selection__arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    margin: -5px 0 0 -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-radius: 1px;
    transform: rotate(45deg);
    opacity: .5;
}
.select2-container--open.ct-select2 .select2-selection--single .select2-selection__arrow {
    transform: rotate(180deg);
}

/* The theme class is set on .select2-dropdown itself (see select2-init.js),
   so these are compound selectors, not descendant ones. The doubled class also
   outranks Select2's own .select2-container--default rules, which would
   otherwise tie on specificity and be decided by stylesheet order alone. */
.select2-dropdown.ct-select2-drop {
    border-radius: var(--ct-r-sm, 10px);
    overflow: hidden;
    box-shadow: 0 22px 48px -18px rgba(8, 10, 30, .55);
}
/* Select2 caps the results list at 200px, which clips the fifth option. */
.select2-dropdown.ct-select2-drop .select2-results__options {
    max-height: 320px;
}
.select2-dropdown.ct-select2-drop .select2-results__option {
    padding: .7rem 1.05rem;
    font-size: .92rem;
    line-height: 1.4;
    transition: background .15s ease, color .15s ease;
}
/* Select2 marks the keyboard/hover row --highlighted and the chosen row
   aria-selected; both need to read as "this one". */
.select2-dropdown.ct-select2-drop .select2-results__option--highlighted[aria-selected] {
    background: rgba(99, 102, 241, .16);
}
.select2-dropdown.ct-select2-drop .select2-results__option[aria-selected="true"] {
    font-weight: 600;
}

/* ---------- Dark: the home page contact card ------------------------------ */
/* These mirror `.ct-section--dark .ct-input` in home.css, which overrides the
   light defaults with explicit values rather than through the design tokens —
   --ct-surface stays #ffffff on this page, so reading the tokens here would
   paint a white control on a dark card. */
.ct-select2--dark .select2-selection--single {
    border: 1px solid var(--ct-d-line-strong, rgba(255, 255, 255, .18));
    background-color: rgba(255, 255, 255, .05);
    color: #fff;
}
.ct-select2--dark .select2-selection--single .select2-selection__rendered {
    color: #fff;
}
.select2-container.ct-select2--dark .select2-selection--single .select2-selection__placeholder {
    color: rgba(255, 255, 255, .38);
}
.ct-select2--dark .select2-selection--single:hover {
    border-color: rgba(129, 140, 248, .75);
}
.select2-container--open.ct-select2--dark .select2-selection--single,
.ct-select2--dark .select2-selection--single:focus {
    border-color: var(--ct-indigo, #6366f1);
    background-color: rgba(99, 102, 241, .12);
}

/* The panel matches `.ct-section--dark .ct-input option`, which is what the
   native select's list uses on this card. */
.select2-dropdown.ct-select2--dark {
    border: 1px solid var(--ct-d-line-strong, rgba(255, 255, 255, .18));
    background: var(--ct-ink-2, #100d33);
}
.select2-dropdown.ct-select2--dark .select2-results__option { color: #fff; }
.select2-dropdown.ct-select2--dark .select2-results__option--highlighted[aria-selected] {
    background: rgba(99, 102, 241, .28);
    color: #fff;
}
.select2-dropdown.ct-select2--dark .select2-results__option[aria-selected="true"] {
    color: #c7d2fe;
}

/* ---------- Light: the /ecommerce contact card ---------------------------- */
/* That page's inputs are Tailwind `px-4 py-3` at the base 16px type, not the
   .93rem the home form uses, so the box metrics are restated here to land on
   exactly the same height as the fields above and below it. */
.ct-select2--light .select2-selection--single {
    padding: .75rem 2.6rem .75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #fff;
    color: #111827;
}
.ct-select2--light .select2-selection--single .select2-selection__rendered {
    font-size: 1rem;
    line-height: 1.5;
    color: #111827;
}
.select2-container.ct-select2--light .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af;
}
.ct-select2--light .select2-selection--single:hover { border-color: #6366f1; }
.select2-container--open.ct-select2--light .select2-selection--single {
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .14);
}
.select2-dropdown.ct-select2--light {
    border-radius: 12px;
    border: 1px solid #d1d5db;
    background: #fff;
}
.select2-dropdown.ct-select2--light .select2-results__option { color: #111827; }
.select2-dropdown.ct-select2--light .select2-results__option--highlighted[aria-selected] { color: #4f46e5; }

/* Keyboard focus must stay visible — Select2 moves focus to its own element. */
.ct-select2 .select2-selection--single:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* Select2 hides the original <select> itself, with .select2-hidden-accessible —
   it stays in the DOM, clipped, so the form still posts and screen readers can
   still reach the field. Nothing to do here. */