/* ns-searchable-select.css
 * Styling for the searchable dropdown built by ns-searchable-select.js.
 *
 * The native <select> keeps its own classes (buyer-form-control,
 * form-control, ...) so it still carries validation state; it is only moved
 * out of sight. The trigger below deliberately mirrors the look of those
 * inputs rather than re-deriving it, so a searchable select sits in a form
 * next to a plain input without looking like a different widget.
 */

.ns-ss {
    position: relative;
    width: 100%;
    z-index: 1;
}

/* Lifting the wrapper is kept for the trigger's focus ring only; the panel
   itself escapes to <body>, so this no longer has to beat anything. */
.ns-ss.is-open {
    z-index: 3;
}

/* Native control stays in the DOM and in the form - it is what Livewire
   reads and writes. Hidden visually, never with display:none, so that
   browser validation can still focus it and report on it. */
.ns-ss .ns-ss-native.ns-ss-native {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.ns-ss-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 12px 16px;
    background: #fff;
    border: 1.5px solid #d8e6cf;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #1f3326;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.ns-ss-trigger:hover {
    border-color: #a9cf96;
}

.ns-ss-trigger:focus-visible,
.ns-ss.is-open .ns-ss-trigger {
    outline: none;
    border-color: #6CB545;
    box-shadow: 0 0 0 3px rgba(108, 181, 69, .16);
}

.ns-ss-trigger.is-placeholder .ns-ss-label {
    color: #9aa69d;
    font-weight: 400;
}

.ns-ss-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;        /* buttons centre their text by default */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ns-ss-arrow {
    flex: 0 0 auto;
    color: #5c7a63;
    transition: transform .2s ease;
}

.ns-ss.is-open .ns-ss-arrow {
    transform: rotate(180deg);
}

/* ---------------- panel ---------------- */

.ns-ss-panel {
    display: none;
    position: absolute;
    z-index: 1060;              /* above Bootstrap's sticky/fixed elements */
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e2ece0;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(24, 51, 31, .14);
    overflow: hidden;
}

/* While open the panel is moved to <body> and pinned with position:fixed,
   so it cannot be trapped by any ancestor's stacking context. JS sets
   top/left/width; everything else lives here. */
.ns-ss-panel.is-portaled {
    display: block;
    position: fixed;
    z-index: 2147483000;
    animation: ns-ss-in .16s ease;
}

@keyframes ns-ss-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.ns-ss-searchwrap {
    padding: 10px;
    border-bottom: 1px solid #eef4ec;
    background: #fbfdfa;
}

.ns-ss-search {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #dfeada;
    border-radius: 9px;
    font-size: 14px;
    color: #1f3326;
    background: #fff;
}

.ns-ss-search:focus {
    outline: none;
    border-color: #6CB545;
    box-shadow: 0 0 0 3px rgba(108, 181, 69, .14);
}

.ns-ss-list {
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
}

.ns-ss-opt {
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 14.5px;
    color: #27402e;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ns-ss-opt:hover,
.ns-ss-opt.is-cursor {
    background: #f1f8ed;
}

.ns-ss-opt.is-active {
    background: #6CB545;
    color: #fff;
    font-weight: 600;
}

.ns-ss-opt.is-disabled {
    color: #b3bdb6;
    cursor: not-allowed;
}

.ns-ss-empty {
    padding: 16px 12px;
    text-align: center;
    font-size: 14px;
    color: #8d9b91;
}

/* scrollbar, to match the rest of the dashboard lists */
.ns-ss-list::-webkit-scrollbar { width: 8px; }
.ns-ss-list::-webkit-scrollbar-thumb {
    background: #d6e4d0;
    border-radius: 8px;
}

/* ---------------- phone country picker search ----------------
   The dial-code picker is a pre-existing Alpine dropdown, not a <select>,
   so it gets the same search affordance styled to match its own menu. */
.buyer-country-dropdown-menu .ns-country-searchwrap {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 9px;
    background: #fbfdfa;
    border-bottom: 1px solid #eef4ec;
}

.buyer-country-dropdown-menu .ns-country-search {
    width: 100%;
    padding: 8px 11px;
    border: 1.5px solid #dfeada;
    border-radius: 9px;
    font-size: 13.5px;
    color: #1f3326;
    background: #fff;
}

.buyer-country-dropdown-menu .ns-country-search:focus {
    outline: none;
    border-color: #6CB545;
    box-shadow: 0 0 0 3px rgba(108, 181, 69, .14);
}

.buyer-country-dropdown-menu .ns-country-empty {
    padding: 14px 12px;
    text-align: center;
    font-size: 13.5px;
    color: #8d9b91;
}

/* ---------------- mobile ---------------- */
@media (max-width: 575.98px) {
    .ns-ss-trigger {
        min-height: 48px;
        padding: 10px 13px;
        font-size: 14.5px;
    }
    .ns-ss-list { max-height: 210px; }
}

/* ---------------- dial-code menu: room for country names ----------------
   custom.css sizes this menu at 195px, which fitted "+44 GB" and nothing
   else. The whole point of a search box is finding a country by NAME, so
   the name is now shown next to the code and the menu is widened to suit.
   Loaded after custom.css, so plain class selectors are enough. */
.buyer-country-dropdown-menu {
    width: 290px;
    max-height: 288px;
    padding-top: 0;
}

.buyer-country-option .country-option-code {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: #2f4a36;
}

.buyer-country-option .country-option-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #6b7d70;
    font-size: 12.5px;
}

.buyer-country-option.is-active .country-option-name,
.buyer-country-option.is-active .country-option-code {
    color: inherit;
}

@media (max-width: 575.98px) {
    .buyer-country-dropdown-menu { width: 252px; }
}

/* ---------------- x-cloak ----------------
   The dial-code menu used to carry .ns-s319 (display:none, tripled selector).
   Alpine's x-show reveals an element by clearing its INLINE display, so a
   class forcing display:none at (0,3,0) meant the menu could never open.
   x-cloak does the same job correctly: it only hides until Alpine boots and
   strips the attribute, so x-show is free to control display afterwards. */
[x-cloak] {
    display: none !important;
}

/* ---------------- trigger text alignment ----------------
   Buttons centre their text, and the theme's form rules reach the trigger
   too, so the country name sat centred while every other field's text is
   left-aligned. Stated on both the button and the label to beat either. */
.ns-ss .ns-ss-trigger,
.ns-ss .ns-ss-trigger .ns-ss-label {
    text-align: left !important;
    justify-content: flex-start;
}

.ns-ss .ns-ss-trigger .ns-ss-arrow {
    margin-left: auto;
}

/* ---------------- flags inside the searchable select ----------------
   Used by the phone-code selects, which show "[flag] +92  Pakistan". */
.ns-ss-flag {
    flex: 0 0 auto;
    width: 20px;
    height: 14px;
    margin-right: 8px;
    border-radius: 2px;
    object-fit: cover;
    vertical-align: -2px;
}

.ns-ss-opt {
    display: flex;
    align-items: center;
    gap: 0;
}

.ns-ss-optname {
    margin-left: 8px;
    color: #6b7d70;
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ns-ss-opt.is-active .ns-ss-optname { color: inherit; }

.ns-ss-label {
    display: flex;
    align-items: center;
}