/**
 * Swim School Core — pole telefonu z prefiksem +48 zablokowanym.
 *
 * FIX-CHAT #10A hotfix4 (#2.3.55): wspólny styl używany przez 2 formularze:
 *   • /zapisy-grupowe/ (tor A, ssc-group-trial-public-calendar.js)
 *   • /indywidualne/ (tor C, ssc-individual-public-calendar.js)
 *
 * Cel UX: klient widzi że +48 jest stałe, wpisuje TYLKO 9 cyfr krajowych.
 * Bez tego pole przyjmowało dowolny format → backend wymuszał normalizację
 * post-hoc (SSC_SMS_Admin_Page::normalize_phone) → niespójność UX.
 *
 * FIX-CHAT T1-α #2.3.61: dopasowanie do baseline .ssc-gt-field input
 * (tor A linie 489-499 ssc-group-trial-public-calendar.css) ≡ .ssc-ipc-field
 * input (tor C linie 454-464 ssc-individual-public-calendar.css) — IDENTYCZNE
 * baseline w obu torach. Poprzednie wartości (border #ccc, border-radius 4px,
 * focus #2271b1 niebieski WP, font-size 14px) wystawały wizualnie z formularza
 * w którym sąsiednie inputy (Imię/Nazwisko/E-mail) używają border #E2E8F0,
 * border-radius 8px, focus #1E40DD cyjan SSC brand, font-size 13px.
 *
 * Discovery odrzucił `inherit` z briefu sekcji 3 (border/border-radius/padding/
 * font-size NIE są inherited domyślnie w CSS — wartości nie spływają z rodzica
 * `<label class="ssc-gt-field">`, który ma `display: flex` ale nie border).
 * Plan: hardcode konkretnych wartości matching baseline.
 */

.ssc-phone-input-wrapper {
    display: flex;
    align-items: stretch;
    /* FIX-CHAT T1-α #2.3.61: border + border-radius matching .ssc-*-field input baseline. */
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s ease-in-out;
}

.ssc-phone-input-wrapper:focus-within {
    /* FIX-CHAT T1-α #2.3.61: focus ring cyjan SSC brand (było niebieski WP #2271b1). */
    border-color: #1E40DD;
    box-shadow: 0 0 0 3px rgba(30, 64, 221,.12);
}

.ssc-phone-prefix {
    /* FIX-CHAT T1-α #2.3.61: padding 9px 12px (było 8px 12px) sync sąsiednich,
       background #F8FAFC sync z readonly state sąsiada (było #f5f5f5),
       color #475569 sync z label sąsiada (było #666), font-size 13px sync
       z input sąsiada (było brak → dziedziczył 14px z .ssc-phone-input),
       border-right #E2E8F0 sync z border wrappera (było #ccc). */
    padding: 9px 12px;
    background: #F8FAFC;
    color: #475569;
    font-weight: 500;
    font-size: 13px;
    border-right: 1px solid #E2E8F0;
    user-select: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.ssc-phone-input-wrapper input.ssc-phone-input {
    /* !important border/box-shadow none zostają — chronią przed override
       z .ssc-gt-field input baseline (które WBR ma border + box-shadow:focus).
       Border-rendering robi wrapper, nie sam input. */
    border: none !important;
    box-shadow: none !important;
    flex: 1;
    /* FIX-CHAT T1-α #2.3.61: padding/font-size/color sync z .ssc-*-field input baseline. */
    padding: 9px 12px;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: #0F172A;
    min-width: 0; /* żeby flex shrink działał na małych ekranach */
}

.ssc-phone-input-wrapper input.ssc-phone-input:focus {
    background: #f9f9ff;
    border: none !important;
    box-shadow: none !important;
}

.ssc-phone-input-wrapper input.ssc-phone-input[readonly] {
    /* FIX-CHAT T1-α #2.3.61: readonly bg/color sync z .ssc-*-field input[readonly]. */
    background: #F8FAFC;
    cursor: not-allowed;
    color: #64748b;
}

.ssc-phone-input-wrapper.ssc-phone-input-invalid {
    border-color: #d63638;
}

.ssc-phone-input-wrapper.ssc-phone-input-invalid:focus-within {
    /* FIX-CHAT T1-α #2.3.61: invalid focus ring gruby pierścień (sync z normalnym focus
       ringiem, tylko czerwony). Było cienki box-shadow 0 0 0 1px. */
    box-shadow: 0 0 0 3px rgba(214,54,56,.12);
}

.ssc-phone-input-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #d63638;
}