/* ============================================================
 * register-country-fix.css
 * BS-paralel country/phone code picker color + typography fix
 * Created: 2026-04-27 by VISUAL_AUDIT agent (country-fix branch)
 *
 * Issue: phone-code-trigger label "Kodu" rendered at 9-10px with
 *        line-height 1 making it barely visible — appears
 *        as "rengi bozulmuş" (color washed out) issue.
 *        Root cause = theme-robinbet-mobile.css v9.5 sets
 *          - .phone-code-trigger .bc-fixed-select__label { font-size: 10px; line-height: 1; }
 *          - .phone-code-trigger .bc-fixed-select__value { font-size: 14px; line-height: 1; }
 *        BS uses floating-label pattern with title font-size 12px,
 *        line-height 14px, position:absolute top:10px.
 *
 * Audit (rule §15 + §19 + §93 + #133 color norm + #149 form precision):
 *  - BS .form-controls-field-bc.country-code (phone code, 2nd instance):
 *      Width 86.7px, Height 52px
 *      bg rgba(255,255,255,0.15)
 *      label color rgba(255,255,255,0.9), fs 14px, lh normal,
 *      padding 20px 30px 4px 15px, border-radius 4px
 *      title (Kodu) absolute, top:10px, fs 12px, color rgba(255,255,255,0.4),
 *        line-height 14px
 *      flag 22x14, bg-image flag sprite
 *  - MR .phone-code-trigger (current):
 *      label "Kodu" computed fs 9px (set 10px), lh 9px (set 1)
 *      → visually invisible / faded color perception
 *
 * Fix scope: only #registerPhoneCodeTrigger (id) + .phone-code-trigger
 *            inside #registerModal. NO global selectors.
 *            register-phone-fix.css UNTOUCHED (rule #30 file ownership).
 *            theme-robinbet-mobile.css UNTOUCHED.
 * File ownership marker: REGISTER-COUNTRY-FIX-AGENT
 * ============================================================ */

/* /===== REGISTER-COUNTRY-FIX-AGENT START =====/ */

/*
 * Override v9.5 phone-code-trigger label sizing to BS-paralel values.
 * Specificity: html.mobile-root body.mobile-site #registerModal
 *              + .phone-code-trigger + .bc-fixed-select__label
 *              (id selector beats v9.5 class chain, !important on top
 *              for cascade safety).
 *
 * BS reference computed:
 *   font-size: 12px
 *   line-height: 14px
 *   color: rgba(255,255,255,0.4)
 *   margin-bottom: 0 (positioned absolute in BS, but column layout
 *                     in MR keeps margin-bottom 0 for compactness)
 */
html.mobile-root body.mobile-site #registerModal .phone-code-trigger .bc-fixed-select__label,
html.mobile-root body.mobile-site .phone-code-trigger .bc-fixed-select__label {
    font-size: 12px !important;
    line-height: 14px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    margin-bottom: 2px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    /* Roboto chain match (rule font-family fallback parity) */
    font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/*
 * Value row (flag + "90"): BS color rgba(255,255,255,0.9),
 * font-size 14px, font-weight 400 (BS) — MR currently 14px/500.
 * BS line-height 14px, MR currently 14px (computed from line-height:1
 * × 14px font-size = 14px, OK).
 */
html.mobile-root body.mobile-site #registerModal .phone-code-trigger .bc-fixed-select__value,
html.mobile-root body.mobile-site .phone-code-trigger .bc-fixed-select__value {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 14px !important;
    font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/*
 * Trigger button container — BS-paralel padding + dimensions.
 * BS field height 52px, MR 49.92px (set 52 in v9.5 but Roboto cascade
 * collapses 0.08px due to box-sizing). Force 52px exactly.
 *
 * BS uses padding 20px 30px 4px 15px (room for floating label top +
 * arrow chevron right). MR currently 0 8px (tight). Match BS padding,
 * but keep flex-column layout since MR doesn't use absolute floating.
 *
 * Width: BS 86.7px (computed), MR 96px (min-width:90 + 8px*2 padding=
 * 106 capped). Reduce min-width to 80 to match BS more closely.
 */
html.mobile-root body.mobile-site #registerModal .phone-code-trigger,
html.mobile-root body.mobile-site .phone-code-trigger {
    /* BS height parity */
    height: 52px !important;
    min-height: 52px !important;
    /* BS-paralel padding (column layout: 6px top, 4px bottom for tighter look) */
    padding: 6px 22px 6px 10px !important;
    /* BS-paralel min-width — 86.7 BS computed, allow 84 for snug fit */
    min-width: 84px !important;
    width: 100% !important;
    /* BS bg + border explicit (override cascade) */
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 0 !important;
    border-radius: 4px !important;
    /* Layout: column with label top, value bottom */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0 !important;
    /* Font-family chain (parity with phone input) */
    font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    /* Color is inherited but explicit for cascade safety */
    color: rgba(255, 255, 255, 0.9) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
    /* Chevron position (rule v10.1 in theme keeps ::after — DO NOT touch) */
    position: relative !important;
}

/*
 * Flag icon — BS 22x14 sprite. MR uses flag-icon (separate
 * SVG file). Keep MR's 20x14 sizing but ensure visibility.
 */
html.mobile-root body.mobile-site #registerModal .phone-code-trigger .flag-icon,
html.mobile-root body.mobile-site .phone-code-trigger .flag-icon {
    width: 20px !important;
    height: 14px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: inline-block !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

/*
 * Hover/focus/active states (rule #130 multi-state) — BS-paralel:
 *   hover:   bg slightly lighter rgba(255,255,255,0.18)
 *   focus:   outline none (BS), keep cursor pointer
 *   active:  bg slightly darker rgba(255,255,255,0.12)
 *   disabled: opacity 0.5
 * Avoids gold (#d4af37) theme leak (rule #117 focus theme bleed).
 */
html.mobile-root body.mobile-site #registerModal .phone-code-trigger:hover,
html.mobile-root body.mobile-site .phone-code-trigger:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
}
html.mobile-root body.mobile-site #registerModal .phone-code-trigger:focus,
html.mobile-root body.mobile-site #registerModal .phone-code-trigger:focus-visible,
html.mobile-root body.mobile-site .phone-code-trigger:focus,
html.mobile-root body.mobile-site .phone-code-trigger:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    /* No gold focus ring — BS uses transparent */
    background-color: rgba(255, 255, 255, 0.18) !important;
}
html.mobile-root body.mobile-site #registerModal .phone-code-trigger:active,
html.mobile-root body.mobile-site .phone-code-trigger:active {
    background-color: rgba(255, 255, 255, 0.12) !important;
}
html.mobile-root body.mobile-site #registerModal .phone-code-trigger[disabled],
html.mobile-root body.mobile-site .phone-code-trigger[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* /===== REGISTER-COUNTRY-FIX-AGENT END =====/ */