/* ==========================================================================
   Tripaure — Tom Select & intl-tel-input adjustments
   Loaded on both the admin panel and the public site. Keeps the third-party
   widgets sitting correctly inside each side's form controls.
   ========================================================================== */

/* §  TOM SELECT — shared */

.ts-wrapper.ts-rtl .ts-control,
.ts-wrapper.ts-rtl .ts-dropdown {
    direction: rtl;
    text-align: right;
}

.ts-dropdown {
    z-index: 1060; /* above Bootstrap modals (1055) and Leaflet panes */
}

/* §  TOM SELECT — admin (Bootstrap 5 form-control parity) */

.ts-wrapper.form-select,
.ts-wrapper.form-control {
    padding: 0;
    height: auto;
    border: 0;
    background: none;
}

.ts-wrapper.form-select .ts-control,
.ts-wrapper.form-control .ts-control {
    min-height: calc(1.5em + .75rem + 2px);
    padding: .375rem 2.25rem .375rem .75rem;
    border: 1px solid var(--border, #ced4da);
    border-radius: .375rem;
    font-size: .875rem;
    background: #fff;
    background-image: none;
    box-shadow: none;
}

.ts-wrapper.form-select .ts-control:after,
.ts-wrapper.form-control .ts-control:after {
    border-top-color: var(--text-muted, grey);
}

.ts-wrapper.is-invalid .ts-control {
    border-color: #dc3545;
}

.ts-wrapper.form-select.focus .ts-control,
.ts-wrapper.form-control.focus .ts-control {
    border-color: var(--primary, #86b7fe);
    box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb, 13, 110, 253), .18);
}

/* Admin dropdown panel — flat card look instead of Tom Select's stock theme. */
.ts-wrapper.form-select .ts-dropdown,
.ts-wrapper.form-control .ts-dropdown {
    margin-top: .25rem;
    border: 1px solid var(--border, #ced4da);
    border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
}

.ts-wrapper.form-select .ts-dropdown .active,
.ts-wrapper.form-control .ts-dropdown .active {
    background-color: var(--primary-light, #f5fafd);
}

/* §  TOM SELECT — public (inherits the tp-input look) */

/* Wrapper inherits .tp-select's box; only the inner control should draw it. */
.tp-select.ts-wrapper {
    padding: 0;
    border: 0;
    background: none;
}

.tp-input.ts-wrapper .ts-control,
.tp-select.ts-wrapper .ts-control {
    padding: .7rem .9rem;
    font-size: .95rem;
    background: #fff;
    border: 1px solid var(--tp-border, rgba(13, 27, 42, .16));
    border-radius: var(--tp-radius-btn, 10px);
}

.tp-select.ts-wrapper.focus .ts-control {
    border-color: var(--tp-accent, #38bdf8);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .15);
}

.tp-select.ts-wrapper .ts-dropdown {
    border-radius: var(--tp-radius-btn, 10px);
    border-color: var(--tp-border, rgba(13, 27, 42, .16));
}

/* §  INTL-TEL-INPUT */

/* The plugin wraps the input in a div; make that wrapper fill the field slot. */
.iti {
    width: 100%;
    display: block;
}

/* Public side: the widget's own input inherits tp-input via the markup, but
   the injected country button needs the same height and border radius. */
.iti .tp-input,
.iti .form-control {
    width: 100%;
}

.iti__dropdown-content {
    z-index: 1061;
}

/* Separate dial code sits in a pill to the start of the field. */
.iti--separate-dial-code .iti__selected-dial-code {
    font-size: .9rem;
}