/**
 * TRClubConfirmationSection Styles
 *
 * The Club Confirmation screen, reached from a Club Selection result
 * row. 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 CONFERMA --
 * the exact same shared primary-action component/style every other
 * CONTINUA/AUTORIZZA/SÌ, SONO IO already uses, including its own
 * standard --tr-primary-action-gap-above margin above it (no override
 * here -- see .tr-club-confirmation-group below for why no extra gap
 * is added on top of that shared spacing).
 *
 * Club name typography has its OWN dedicated tokens --tr-club-
 * confirmation-name-font-family/-font-size/-letter-spacing (this file,
 * calibrated independently of RISULTATI's own --tr-club-name-* tokens
 * in tr-club-selection.css, which this no longer reads); color remains
 * the shared --tr-club-name-color (lime), still deliberately reused.
 * address/phone/email typography reads its own --tr-club-address-*
 * tokens directly (the
 * same Franklin Gothic Book Condensed family used for RISULTATI
 * addresses), and the address text itself reuses
 * formatAddressForDisplay() from tr-club-selection-section.js
 * (imported, not reimplemented). INDIRIZZO/INFO read INDIETRO's own
 * typography tokens directly (tr-header.css/tokens.css) plus the same
 * independent white --tr-club-section-label-color CERCA/RISULTATI
 * already use -- the exact same section-label system, not a new font
 * treatment. Card padding-left/-right reuse --tr-club-results-content-
 * inset-x (the standard 18px box inset already established) directly.
 * Separators reuse the same solid-white + --tr-club-result-separator-
 * opacity treatment already established for every RISULTATI separator.
 * Everything below the club name is plain block-level, left-aligned
 * content (no align-items/text-align: center on any of it) -- there is
 * no logo/centered layout for the card as a whole, by design, not
 * merely because no logo exists yet. The club name itself is the one
 * deliberate exception: centered (text-align: center + width: 100%,
 * not a transform), unlike RISULTATI's own left-aligned row name --
 * see .tr-club-confirmation-name's own note below.
 *
 * Only the card's own container/layout is genuinely new UI -- see the
 * file-level note in tr-club-confirmation-section.js for the full reuse
 * breakdown and for how each element below gets its own semantic
 * --to-address/--to-info/--address/--info/--phone/--email modifier
 * class, driving the 8 independent vertical-gap tokens below (one
 * relationship each, per this task's own request) -- never a single
 * uniform gap. Every token starts at 12px, a snapshot of the previous
 * uniform --tr-space-sm gap this replaces, so current dimensions are
 * preserved as closely as possible; none of these are visually
 * fine-tuned yet.
 */
:root {
    /* ─── Logo (conditional -- see tr-club-confirmation-section.js's
       own note on clubConfirmation.logoSrc) ───
       The logo now sits inside a white box wrapper (see
       .tr-club-confirmation-logo-box below) -- box size and logo size
       are two independent controls:
       -logo-box-width/-logo-box-height size the white box itself (real
       width/height, not derived from the logo). -logo-box-radius is its
       corner radius. -logo-box-margin-top is real layout margin on top
       of the card's own existing padding-top (--tr-space-lg, untouched)
       -- the box's own top position, same "stacks on top of padding-top"
       pattern -name-margin-top below already uses (this replaces the
       old -logo-margin-top, which controlled the same concern directly
       on the <img> before the box existed).
       -logo-width controls ONLY the logo <img>'s own displayed width
       inside the box; height is always auto (the <img> keeps its own
       real aspect ratio, never stretched or cropped) -- never hardcoded
       to the box's own size.
       -logo-to-name-gap is the space between the bottom of the box and
       the club name -- ONLY relevant when a logo is present; it
       replaces -name-margin-top entirely for that render (see
       .tr-club-confirmation-card--has-logo below), the two are never
       both applied together. No absolute positioning or transforms
       anywhere here -- real box-model layout throughout. */
    --tr-club-confirmation-logo-box-width: 176px;
    --tr-club-confirmation-logo-box-height: 124px;
    --tr-club-confirmation-logo-box-radius: var(--tr-radius-sm);
    --tr-club-confirmation-logo-box-margin-top: 0px;
    --tr-club-confirmation-logo-width: 128px;
    --tr-club-confirmation-logo-to-name-gap: 21px;

    /* NO-LOGO layout only (see .tr-club-confirmation-card--has-logo
       below for the with-logo equivalent, which is untouched by this
       token). The club name is no longer top-margined, nor given a
       fixed-height centered region -- the region
       (.tr-club-confirmation-name-region below) is auto/content-height:
       padding-top, then the name (1, 2, 3+ lines, whatever it needs),
       then the same padding-bottom, then the separator immediately
       follows. This means the SAME top/bottom breathing space around
       the text always holds exactly, for any name length -- a short
       name gives a smaller region, a long wrapped name gives a taller
       one, with no fixed/minimum height and no height calculated from
       line count. */
    --tr-club-confirmation-name-region-padding-y: 18px;

    /* club name -> first separator (always right after the name,
       regardless of whether that separator precedes INDIRIZZO or --
       only when INDIRIZZO is absent -- INFO). */
    --tr-club-confirmation-name-to-separator-gap: 8px;
    /* separator -> INDIRIZZO */
    --tr-club-confirmation-separator-to-indirizzo-gap: 8px;
    /* INDIRIZZO -> address */
    --tr-club-confirmation-indirizzo-to-address-gap: 8px;
    /* address -> (second) separator, right before INFO */
    --tr-club-confirmation-address-to-separator-gap: 12px;
    /* separator -> INFO */
    --tr-club-confirmation-separator-to-info-gap: 8px;
    /* INFO -> first info line (phone, when present) */
    --tr-club-confirmation-info-to-phone-gap: 8px;
    /* last content line -> the card's own bottom edge (its own
       padding-bottom, below) */
    --tr-club-confirmation-bottom-gap: 12px;

    /* Shared vertical rhythm for BOTH two-line text groups: ADDRESS
       (street, / city (province)) and INFO (phone / email) -- ONE token,
       applied identically to every line in both groups (see
       .tr-club-confirmation-value-line below), never two separate
       line-height values. A unitless ratio (not px) so it keeps working
       correctly if --tr-club-confirmation-value's own font-size is ever
       recalibrated. This fully replaces the old --tr-club-confirmation-
       phone-to-email-gap margin token, which is no longer needed now
       that phone/email are one group instead of two separately-margined
       lines. */
    --tr-club-confirmation-value-line-height: 1.3;

    /* CONFERMA's own relationship to the card 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 tr-dob-
       section.js's own CONTINUA already uses via .tr-dob-continue --
       see .tr-club-confirmation-confirm below for the override rule
       itself. */
    --tr-club-confirmation-card-to-confirm-gap: 12px;

    /* Own typography controls for the confirmation club title --
       independent from RISULTATI's own --tr-club-name-* tokens
       (tr-club-selection.css), which this no longer reads. Values below
       are a snapshot of that typography's current appearance (same
       Franklin Gothic Demi Condensed family, same size/tracking), so
       switching to these dedicated tokens changes nothing visually yet
       -- calibrate here without ever touching the RISULTATI tokens.
       Color/centering/uppercase are unchanged and still shared (see
       .tr-club-confirmation-name below). */
    --tr-club-confirmation-name-font-family: var(--tr-font-franklin-book);
    /* Registration-responsive-pass: was an independent flat 21px --
       aliases the shared --tr-identity-field-value-font-size directly
       (tr-identity.css) instead, the exact same reference size, now
       also responsive, shared with every other consumer of that token
       rather than a second copy of the same number. */
    --tr-club-confirmation-name-font-size: var(--tr-identity-field-value-font-size);
    --tr-club-confirmation-name-letter-spacing: 0.5px;
}

/* min-height: 0 (responsive pass) lets this group shrink below its
   natural content height when the screen is short, passing that
   constraint down to .tr-club-confirmation-card below (same pass-
   through pattern .tr-question-section/.tr-question-content and Club
   Selection's own .tr-club-group already use). */
.tr-club-confirmation-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}

/* Overrides the shared .tr-option-button.tr-primary-action rule's own
   margin-top (28px, --tr-primary-action-gap-above) for CONFERMA 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 SÌ, SONO
   IO / CONTINUA / AUTORIZZA elsewhere still render at 28px. Real
   margin, not a transform -- moves CONFERMA relative to the card only;
   card height/content, CONFERMA's own height/style, INDIETRO and
   everything above the card are unaffected. */
.tr-option-button.tr-primary-action.tr-club-confirmation-confirm {
    margin-top: var(--tr-club-confirmation-card-to-confirm-gap);
    /* Responsive pass: never compressed by the flex-shrink cascade that
       now lets the card above it shrink+scroll on a short screen. */
    flex-shrink: 0;
}

/* No gap here -- every vertical relationship inside the card is now
   its own explicit margin-top (see below), not a uniform flex gap.
   padding-left/-right are the standard 18px inset; padding-top is the
   existing --tr-space-lg primitive (untouched, not one of the 8
   requested relationships); padding-bottom is the last-line-to-bottom
   token instead. */
/* Responsive pass: the card's own outer box can now shrink below its
   natural height on a short screen (flex: 1 1 auto + min-height: 0) and
   scroll its own content internally (overflow-y: auto) rather than
   pushing CONFERMA/INDIETRO off-screen or scrolling the whole page --
   same technique as Player Summary's own card and Club Selection's own
   results box. Applies identically to BOTH confirmation states, since
   .tr-club-confirmation-card--final only ever overrides colors (see
   below), never this structural rule. Every child below gets its own
   flex-shrink: 0 (the lesson from Authorizations: without it, flexbox
   would silently squash the logo/name/separators/labels/values instead
   of leaving them at their real size and letting this overflow handle
   the shortage). */
.tr-club-confirmation-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
    padding-top: var(--tr-space-lg);
    padding-left: var(--tr-club-results-content-inset-x);
    padding-right: var(--tr-club-results-content-inset-x);
    padding-bottom: var(--tr-club-confirmation-bottom-gap);
    border: 1px solid #ffffff;
    border-radius: var(--tr-radius-lg);
    background: var(--tr-club-search-background);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tr-club-confirmation-card::-webkit-scrollbar {
    display: none;
}

/* The white box the logo sits inside: real width/height from its own
   tokens (never derived from the logo's own size), centered
   horizontally via auto left/right margins on a width-constrained
   block element -- real layout, not a transform or absolute
   positioning. margin-top stacks on the card's own existing
   padding-top, same pattern as -name-margin-top. flex centers the logo
   both horizontally and vertically inside it. Only ever present when
   .tr-club-confirmation-card--has-logo is present on the card (see
   tr-club-confirmation-section.js) -- there is no separate "reserve
   space" rule anywhere, so a club without a logo never has this
   element (and so never this space) at all. */
.tr-club-confirmation-logo-box {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tr-club-confirmation-logo-box-width);
    height: var(--tr-club-confirmation-logo-box-height);
    margin: var(--tr-club-confirmation-logo-box-margin-top) auto 0;
    border-radius: var(--tr-club-confirmation-logo-box-radius);
    background: #ffffff;
}

/* The logo itself: width from --tr-club-confirmation-logo-width
   (independent of the box's own size -- never hardcoded to it), height:
   auto (real aspect ratio, never stretched/cropped). Centering is the
   box's own flex rule above, not a property of the logo itself. */
.tr-club-confirmation-logo {
    display: block;
    width: var(--tr-club-confirmation-logo-width);
    height: auto;
}

/* NO-LOGO only: wraps the club name in real padding-top/padding-bottom
   (see --tr-club-confirmation-name-region-padding-y's own note above)
   -- auto/content-driven height, no fixed or calculated height, no
   transform. The name itself still centers horizontally via its own
   text-align: center + width: 100% (unchanged, below). */
.tr-club-confirmation-name-region {
    flex-shrink: 0;
    width: 100%;
    padding-top: var(--tr-club-confirmation-name-region-padding-y);
    padding-bottom: var(--tr-club-confirmation-name-region-padding-y);
}

/* Unlike RISULTATI's own left-aligned, ALL-CAPS row name, this title is
   centered -- text-align: center + width: 100% (a real layout property,
   not a transform) keeps it centered regardless of how long the name
   is -- and reads the club name in normal title-style casing, NOT
   forced uppercase (see tr-club-confirmation-section.js's own
   formatClubNameForDisplay() note for how -- presentation formatting
   only, club.name itself and RISULTATI's own display are both
   untouched). No margin-top here by default: in the NO-LOGO case the
   name sits inside .tr-club-confirmation-name-region above, whose own
   padding-top/padding-bottom (not this element's own margin) space it
   from the region's edges; in the WITH-LOGO case, the override directly
   below applies
   -logo-to-name-gap instead. Typography/color and every element below
   (separators, INDIRIZZO, address, INFO, phone, email, CONFERMA) are
   unaffected by either. */
.tr-club-confirmation-name {
    flex-shrink: 0;
    width: 100%;
    margin: 0;
    text-align: center;
    font-family: var(--tr-club-confirmation-name-font-family);
    font-size: var(--tr-club-confirmation-name-font-size);
    letter-spacing: 0px;
    color: #ffffff;
}

/* WITH a logo: unchanged -- logo box -> -logo-to-name-gap -> name,
   real margin-top on the name itself (no region wrapper in this case,
   see tr-club-confirmation-section.js). */
.tr-club-confirmation-card--has-logo .tr-club-confirmation-name {
    margin-top: var(--tr-club-confirmation-logo-to-name-gap);
}

/* Same solid-white + shared-opacity treatment as every RISULTATI
   separator -- width: 100% of the card's own (already 18px-inset)
   content box, so it naturally terminates on the exact same left/right
   guide as the name/labels/values around it, without a separate inset
   rule of its own. */
.tr-club-confirmation-separator {
    flex: 0 0 auto;
    width: 100%;
    height: 1px;
    background: #ffffff;
    opacity: var(--tr-club-result-separator-opacity);
}

/* The FIRST separator in the card is always right after the club name
   (see --tr-club-confirmation-name-to-separator-gap's own note above);
   any other separator (only reachable when both INDIRIZZO and INFO
   exist) is the one right after the address. Targeted by an explicit
   --first marker class (set in tr-club-confirmation-section.js) rather
   than :first-of-type -- :first-of-type counts by tag name among ALL
   sibling <div>s, and the no-logo name region (also a <div>) sits
   before this separator in that case, so a tag-based "first" selector
   would not reliably match it. */
.tr-club-confirmation-separator--first {
    margin-top: var(--tr-club-confirmation-name-to-separator-gap);
}

/* NO-LOGO only: the space between the name and this separator is now
   entirely .tr-club-confirmation-name-region's own padding-bottom (see
   its note above), so the generic rule above would double it up --
   zeroed here specifically (higher specificity via the extra
   :not(--has-logo) qualifier). WITH-LOGO is untouched: it still uses
   the generic rule's own --name-to-separator-gap margin. */
.tr-club-confirmation-card:not(.tr-club-confirmation-card--has-logo) .tr-club-confirmation-separator--first {
    margin-top: 0;
}

.tr-club-confirmation-separator:not(.tr-club-confirmation-separator--first) {
    margin-top: var(--tr-club-confirmation-address-to-separator-gap);
}

.tr-club-confirmation-label {
    flex-shrink: 0;
    display: block;
    text-align: center;
    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);
}

.tr-club-confirmation-label--address {
    margin-top: var(--tr-club-confirmation-separator-to-indirizzo-gap);
}

.tr-club-confirmation-label--info {
    margin-top: var(--tr-club-confirmation-separator-to-info-gap);
}

/* Franklin Gothic Book Condensed (the same --tr-club-address-* tokens
   RISULTATI's own address line already uses) for address and info
   alike -- normal case throughout, never uppercased (email included).
   This is now a GROUP container: ADDRESS holds two lines ("<street>,"
   and "<city> (<province>)", see tr-club-confirmation-section.js's own
   buildAddressLines() note); INFO holds one or two lines (phone, email
   -- only the present ones). Each line is its own
   .tr-club-confirmation-value-line child (below); this rule supplies
   the shared typography/color/centering both groups inherit down to
   their lines, plus the group's own top margin (per group, not per
   line -- see --address/--info below). */
.tr-club-confirmation-value {
    flex-shrink: 0;
    margin: 0;
    text-align: center;
    font-family: var(--tr-font-franklin-book);
    /* Registration-responsive-pass: was an independent flat 18px --
       reads the shared compact-value token (tr-identity.css) instead,
       the exact same number Player Summary's own row value already
       hardcoded independently; now one shared, responsive source. */
    font-size: var(--tr-identity-field-value-compact-font-size);
    letter-spacing: 0px;
    color: var(--tr-club-address-color);
}

.tr-club-confirmation-value--address {
    margin-top: var(--tr-club-confirmation-indirizzo-to-address-gap);
}

.tr-club-confirmation-value--info {
    margin-top: var(--tr-club-confirmation-info-to-phone-gap);
}

/* Each line inside a value group (ADDRESS's two lines, INFO's phone/
   email lines): display: block stacks them directly, no <br> and no
   per-line margin -- the SAME shared --tr-club-confirmation-value-
   line-height token (never a separate value per group) sets each
   line's own line-box height, and that alone creates the vertical
   rhythm between adjacent lines. */
.tr-club-confirmation-value-line {
    display: block;
    line-height: var(--tr-club-confirmation-value-line-height);
}

/* ─── FINAL state (--tr-club-confirmation-card--final) ───
   Set by tr-club-confirmation-section.js when clubConfirmation.final is
   true (buildClubConfirmationData()'s own `final` param, mobile.js) --
   a pure CSS modifier on the SAME card, never a second card/component.
   Every override below reuses the existing lime token --tr-color-accent
   (the same lime RISULTATI's own club name already uses via --tr-club-
   name-color) rather than a new color value: card border, both
   separators, and every text element inside the card (name, INDIRIZZO/
   INFO labels, address/phone/email values) all switch to it. Layout,
   spacing, typography, logo, CONFERMA's own relationship to the card
   (--tr-club-confirmation-card-to-confirm-gap) -- everything else --
   are completely untouched by this class. */
.tr-club-confirmation-card--final {
    border-color: var(--tr-color-accent);
}

.tr-club-confirmation-card--final .tr-club-confirmation-separator {
    background: var(--tr-color-accent);
}

.tr-club-confirmation-card--final .tr-club-confirmation-name,
.tr-club-confirmation-card--final .tr-club-confirmation-label,
.tr-club-confirmation-card--final .tr-club-confirmation-value {
    color: var(--tr-color-accent);
}