/**
 * TRPhoneNumberSection Styles
 *
 * The Phone Number screen, reached from Club Confirmation's own FINAL
 * state (its CONFERMA E CONTINUA). Reuses the shared .tr-question-
 * section/.tr-question-content/.tr-question-bottom-action shell (tr-
 * question.css), the shared intro typography, TRButton's own
 * .tr-button--outline variant for INDIETRO, and TROptionButton's own
 * filled .tr-primary-action for CONTINUA -- the exact same shared
 * primary-action component/style every other CONTINUA/AUTORIZZA/
 * CONFERMA already uses, including its own existing :disabled treatment
 * (tr-question.css) for the initial outlined/inactive state -- no
 * separate "inactive" style is declared here.
 *
 * PHONE BOX geometry is NOT a new box style: --tr-phone-box-* below
 * alias Club Selection's own --tr-club-search-* tokens (tr-club-
 * selection.css) directly for every property that is genuinely
 * identical (height, radius, border-width, background, left/right
 * padding, columns gap) -- never re-picked values. Only two things are
 * genuinely new here: the "+39" prefix column (replacing the icon
 * column) and the vertical separator between it and the content
 * column; the content column itself (label + input) reuses the same
 * typography tokens the search box's own CERCA/input already read
 * (INDIETRO's own label typography, --tr-identity-field-value-* for the
 * input) -- still no new typography tokens of this screen's own.
 *
 * Visual calibration (fine spacing/sizing) is intentionally NOT tuned
 * yet -- every value below is either an alias of an existing token or a
 * plain structural default, per this task's own "do not guess fine
 * visual calibration yet" instruction.
 */
:root {
    /* The "+39" prefix column's own width -- the one genuinely new
       geometry control this box needs (the old icon column's width,
       --tr-club-search-icon-column-width, doesn't apply here: "+39" is
       text, not a fixed-size icon glyph). Text itself reuses the phone
       label's own typography (see .tr-phone-prefix-column below). */
    --tr-phone-prefix-column-width: 48px;

    /* The vertical separator between the prefix column and the content
       column -- genuinely new (the search box never had one). Reuses
       the same solid-white treatment every other separator in this app
       (RISULTATI/Club Confirmation) already uses for its own opacity
       token, not a new value. Thickness/color are unaffected by the
       calibration controls below -- see .tr-phone-separator itself. */
    --tr-phone-separator-width: 1px;
    --tr-phone-separator-opacity: var(--tr-club-result-separator-opacity);

    /* ─── Divider calibration (independent of +39/the input) ───
       -divider-height is real layout height (starts as an alias of
       --tr-club-search-height, i.e. the box's own full height -- the
       same span the old align-self: stretch already produced, just now
       an independently adjustable token instead of "always exactly the
       box height"). -offset-x/-y are small optional paint-only nudges
       (transform, same technique as --tr-club-search-icon-offset-x/-y
       elsewhere in this app) applied to the divider element itself --
       a transform on one flex sibling never affects any other sibling's
       own layout, so these can never move +39 or the input content. */
    --tr-phone-divider-height: 60%;
    --tr-phone-divider-offset-x: 0px;
    --tr-phone-divider-offset-y: 0px;

    /* Small optical vertical nudge for "+39" only (positive = down,
       negative = up) -- a transform on top of the prefix column's own
       already-centered flex layout (see .tr-phone-prefix-column below),
       never a replacement for it; horizontal centering is untouched. */
    --tr-phone-prefix-offset-y: 11px;

    /* CONTINUA's own relationship to the phone box above it -- real
       layout margin (not a transform), overriding the shared .tr-
       primary-action rule's own --tr-primary-action-gap-above (28px,
       tr-question.css) for this ONE button only. Same pattern DOB's
       own CONTINUA (.tr-dob-continue) and Club Confirmation's own
       CONFERMA (.tr-club-confirmation-confirm) already use -- see
       .tr-phone-continue below for the override rule itself. */
    --tr-phone-box-to-continue-gap: 12px;
}

.tr-phone-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Overrides the shared .tr-option-button.tr-primary-action rule's own
   margin-top (28px, --tr-primary-action-gap-above) for CONTINUA only,
   with the extra .tr-option-button.tr-primary-action prefix giving it
   just enough specificity to win regardless of file order -- the
   shared rule and its own token are otherwise untouched, so every
   other CONTINUA/AUTORIZZA/CONFERMA elsewhere still renders at 28px. */
.tr-option-button.tr-primary-action.tr-phone-continue {
    margin-top: var(--tr-phone-box-to-continue-gap);
}

/* Same box architecture as .tr-club-search-box (tr-club-selection.css):
   two plain flex columns, no manual X positioning, align-items left
   unset (defaults to 'stretch') so both columns stretch to the box's
   own full height and center their own content vertically
   independently. Every geometry property aliases the search box's own
   token directly -- never a new value. */
.tr-phone-box {
    display: flex;
    gap: var(--tr-club-search-columns-gap);
    width: 100%;
    height: var(--tr-club-search-height);
    box-sizing: border-box;
    padding-left: var(--tr-club-search-padding-left);
    padding-right: var(--tr-club-search-padding-right);
    border: var(--tr-club-search-border-width) solid #ffffff;
    border-radius: var(--tr-club-search-radius);
    background: var(--tr-club-search-background);
}

/* The "+39" prefix column -- fixed width, stretched to the box's own
   full height, its text centered horizontally AND vertically inside
   itself via flex (mathematical centering, not a manual offset) --
   --tr-phone-prefix-offset-y is a small optional nudge ON TOP of that
   centering, vertical only, never affecting the horizontal centering.
   Typography reuses the EXACT same tokens .tr-phone-input itself uses
   below (--tr-identity-field-value-font-family/-font-size/-letter-
   spacing) -- not a new type style, and not the label's own typography
   anymore. font-weight/line-height are left unset on both, so both
   default to the same browser 'normal' -- already identical, no token
   needed for either. */
.tr-phone-prefix-column {
    flex: 0 0 var(--tr-phone-prefix-column-width);
    width: var(--tr-phone-prefix-column-width);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tr-identity-field-value-font-family);
    font-size: var(--tr-identity-field-value-font-size);
    letter-spacing: var(--tr-identity-field-value-letter-spacing);
    color: var(--tr-club-section-label-color);
    transform: translateY(var(--tr-phone-prefix-offset-y));
}

/* The vertical separator between the prefix column and the content
   column -- height/position now independently controlled (see the
   divider calibration tokens above), thickness (--tr-phone-separator-
   width) and color/opacity unchanged. align-self: center keeps it
   vertically centered in the box regardless of its own height;
   offset-x/-y are transform-only nudges on this element alone, so they
   can never move +39 or the input content next to it. */
.tr-phone-separator {
    flex: 0 0 auto;
    width: var(--tr-phone-separator-width);
    height: var(--tr-phone-divider-height);
    align-self: center;
    background: #ffffff;
    opacity: var(--tr-phone-separator-opacity);
    transform: translate(var(--tr-phone-divider-offset-x), var(--tr-phone-divider-offset-y));
}

/* The label + input, as one group, stretched to the box's own full
   height and vertically centered within it -- same shape as .tr-club-
   search-content. */
.tr-phone-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--tr-club-search-label-input-gap);
}

/* Typography reads INDIETRO's own tokens directly -- the exact same
   ones .tr-club-search-label already reads, not a new type style. */
.tr-phone-label {
    display: block;
    text-align: left;
    font-family: var(--tr-font-franklin-demi);
    font-size: var(--tr-header-button-text-size);
    font-weight: var(--tr-font-weight-bold);
    letter-spacing: var(--tr-header-button-tracking);
    color: var(--tr-club-section-label-color);
}

/* Typography reads --tr-identity-field-value-* directly -- the exact
   same tokens .tr-club-search-input already reads, not a new type
   style. Color/opacity treatment for the placeholder matches it too. */
.tr-phone-input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-family: var(--tr-identity-field-value-font-family);
    font-size: var(--tr-identity-field-value-font-size);
    letter-spacing: var(--tr-identity-field-value-letter-spacing);
    color: var(--tr-color-text-dim);
    -webkit-appearance: none;
    appearance: none;
}

.tr-phone-input:focus {
    outline: none;
    border: none;
    box-shadow: none;
    background: transparent;
}

.tr-phone-input::placeholder {
    color: var(--tr-color-text-dim);
    opacity: 0.20;
}