/* =============================================================================
   Allopass — Phone-input + country-select component
   Used by commercial-request.html, support-merchant.html, refund-support.html
   ============================================================================= */

/* Container that puts the dial-code select and the phone input on the same row */
.phone-input-group {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: 8px;
    align-items: stretch;
}

/* Dial-code select itself.
   Inherits .form-group select styling for borders, padding, focus state,
   so it visually matches the regular form selects across the site. */
.phone-input-group .dial-select {
    /* Use ch unit to keep the dropdown narrow but readable. */
    min-width: 0; /* prevent grid blowout */
    font-variant-numeric: tabular-nums;
}

/* Tighten the option line height inside the open dropdown
   (purely cosmetic, only affects the open menu where supported) */
.phone-input-group .dial-select option {
    padding: 2px 4px;
}

/* Phone input fills the remaining column */
.phone-input-group .phone-number {
    width: 100%;
    min-width: 0;
}

/* Helper used by applySiretRule() to toggle the required/optional markers */
.label-optional[hidden],
.label-required[hidden] { display: none !important; }

/* The conditional "(optionnel — France uniquement)" label gets a more visible
   styling than a regular .optional so users notice the transition.
   Sélecteur double-classe pour passer devant `.commercial-form .optional`. */
.optional.label-optional,
.label-optional {
    color: var(--gold, #d4af37) !important;
    font-weight: 600;
    font-size: 0.85em;
    margin-left: 4px;
}

/* On narrow viewports the combo stacks vertically for legibility */
@media (max-width: 640px) {
    .phone-input-group {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}