/* ----------------------------------- */
/* DESIGN TOKENS                         */
/* ----------------------------------- */

:root {
    --bg: #eef1f6;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --field-bg: #f8fafc;

    --accent: #2563eb;
    --accent-dark: #1d4ed8;
    --accent-soft: #eff4ff;

    --success-bg: #dcfce7;
    --success-fg: #15803d;
    --danger-bg: #fee2e2;
    --danger-fg: #b91c1c;

    --radius-lg: 20px;
    --radius-md: 12px;
    --radius-sm: 10px;

    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04),
                   0 12px 32px rgba(15, 23, 42, 0.08);
    --ring: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ----------------------------------- */
/* GLOBAL                                */
/* ----------------------------------- */

* {
    box-sizing: border-box;
}

/* Clamp the page to the viewport so nothing (e.g. a fixed-position widget or a
   wide element) can be panned to sideways on mobile. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    background: radial-gradient(1200px 600px at 50% -10%, #ffffff, var(--bg));
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}


/* ----------------------------------- */
/* LAYOUT                                */
/* ----------------------------------- */

.container {
    max-width: 600px;
    margin: auto;
    padding: 56px 20px 80px;
}

.card {
    background: var(--card);
    padding: 44px 48px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

/* Phones: make the card full-bleed — fill the screen edge to edge with no
   surrounding background gap, so it reads as the page itself rather than a
   floating panel. Larger screens keep the centered card above. */
@media (max-width: 640px) {
    .container {
        max-width: 100%;
        padding: 0;
    }

    .card {
        margin-top: 0;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 24px 20px 48px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

h1 {
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.brand-logo {
    width: 72px;
    height: 72px;
    flex: none;
}

.brand-name {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
}

.subtitle {
    text-align: center;
    margin: 0 auto 28px;
    max-width: 34ch;
    color: var(--muted);
    font-size: 15px;
}


/* ----------------------------------- */
/* FORM ELEMENTS                         */
/* ----------------------------------- */

label {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
}

select,
input {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--field-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

select {
    padding: 13px 44px 13px 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

select:focus,
input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dynamic-selects {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}


/* ----------------------------------- */
/* NODE PICKER (buttons / combobox)      */
/* ----------------------------------- */

.node-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Divide each cascade step from the previous one with a thin grey line, so the
   stacked sections read as distinct steps. */
.dynamic-selects > .node-picker + .node-picker {
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
}

.node-prompt {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

/* Segmented buttons for small option sets */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.option-button {
    width: auto;
    flex: 1 1 auto;
    min-width: 96px;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 600;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

.option-button:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-dark);
}

/* Segmented button carrying a logo (e.g. the golf tours): logo beside the label. */
.option-button.has-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.option-button.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* Single-option pill: shown selected for context, but not clickable
   (there is no alternative to choose). */
.option-button.locked {
    pointer-events: none;
}

/* Multi-select "Done" confirm button (F1 sessions). Centred with clear spacing
   below the options so it reads as the commit action, not another selection. */
.multiselect-add {
    align-self: center;
    width: auto;
    min-width: 140px;
    margin-top: 0.75rem;
    padding: 10px 20px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}

.multiselect-add:hover {
    background: var(--accent-dark);
}

.multiselect-add:disabled {
    background: #cbd5e1;
    color: #f8fafc;
    cursor: not-allowed;
}

/* Searchable combobox */
.node-combobox {
    position: relative;
}

/* Wraps just the input + crest so the crest centres on the input, independent
   of any padding on the outer .node-picker (e.g. the section divider). */
.combobox-field {
    position: relative;
}

.combobox-input {
    width: 100%;
    padding: 13px 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--text);
    background: var(--field-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.combobox-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}

.combobox-selected-badge {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    object-fit: contain;
    background: #e8edf3;
    border-radius: 6px;
    padding: 2px;
    z-index: 1;
    pointer-events: none;
}

.combobox-input.has-badge {
    padding-left: 44px;
}

/* A committed selection reads as a blue "selected" pill, matching an active
   option-button (e.g. the chosen country/league in the cascade). */
.combobox-input.committed {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* Flags are opaque and don't need the grey chip crests use behind them. Render
   them at their true aspect ratio (width auto for a fixed height) so a hairline
   border + rounded corners hug the flag itself: the border sets pale flags (e.g.
   England) off from the background, and the radius softens the square corners. */
.option-badge.is-flag,
.combobox-selected-badge.is-flag {
    background: none;
    padding: 0;
    width: auto;
    height: 20px;
    border: 1px solid rgba(15, 23, 42, 0.2);
    border-radius: 4px;
}

/* Per-badge backdrops (e.g. golf tour logos): "plain" drops the grey chip for
   an opaque logo (PGA); "dark" gives light logos a black backing (DP World, LIV). */
.option-badge.badge-plain,
.combobox-selected-badge.badge-plain,
.summary-badge.badge-plain,
.sport-summary-crest.badge-plain {
    background: none;
}

.option-badge.badge-dark,
.combobox-selected-badge.badge-dark,
.summary-badge.badge-dark,
.sport-summary-crest.badge-dark {
    background: #000;
}

.combobox-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 300px;
    overflow-y: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.combobox-option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.combobox-option:hover {
    background: var(--accent-soft);
}

.option-badge {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
    /* many crests are white-on-transparent; a chip keeps them visible */
    background: #e8edf3;
    border-radius: 6px;
    padding: 2px;
}

.option-text {
    min-width: 0;
}

.option-label {
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.option-hint {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.combobox-empty {
    padding: 12px 10px;
    font-size: 14px;
    color: var(--muted);
}

/* Global "search any team" box */
.global-search {
    margin-bottom: 1.25rem;
}

.global-search .combobox-input {
    background: #fff;
    font-size: 16px;
}


/* ----------------------------------- */
/* BUTTONS                               */
/* ----------------------------------- */

button {
    width: 100%;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--text);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease,
        box-shadow 0.15s ease, opacity 0.15s ease;
}

button:hover {
    background: #1e293b;
}

button:active {
    transform: translateY(1px);
}

button:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.primary-button {
    margin-top: 8px;
    background: var(--accent);
    font-size: 16px;
    padding: 15px 16px;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
}

.primary-button:hover {
    background: var(--accent-dark);
}

/* "Add" style actions: quiet, outlined */
.secondary-button {
    margin-bottom: 8px;
    background: #fff;
    color: var(--accent);
    border: 1px dashed var(--border-strong);
}

.secondary-button:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}

/* Disabled "+ Add Sport" (while a sport is still being chosen). */
.secondary-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.secondary-button:disabled:hover {
    background: #fff;
    border-color: var(--border-strong);
}

/* "Done" — finish with this sport and collapse the card. A clear stopping point,
   especially when only Secretary's Selection is ticked and there's no team pill. */
.done-sport-btn {
    background: var(--accent);
    color: #fff;
}

.done-sport-btn:hover {
    background: var(--accent-dark);
}

/* Disabled until the card has at least one completed selection. */
.done-sport-btn:disabled {
    background: #cbd5e1;
    color: #f8fafc;
    cursor: not-allowed;
}

.done-sport-btn:disabled:hover {
    background: #cbd5e1;
}

/* Quiet destructive / tertiary actions */
.remove-team-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
}

.remove-team-btn:hover {
    background: var(--danger-bg);
    color: var(--danger-fg);
    border-color: transparent;
}

/* Sport picker: keep the prompt row and the sport buttons evenly spaced. */
.sport-picker {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Sport picker prompt row: "Select sport" label with a delete ✕ on the same
   line. The row height tracks the label so the ✕ never inflates it. Slightly
   larger and in the normal text colour (not the faint node-prompt grey) so the
   top-level "Select sport" reads as a clear prompt beside its ✕. */
.sport-picker-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 24px;
    font-size: 15px;
    color: var(--text);
}

/* Quiet ✕ that deletes a not-yet-chosen sport card. Borderless so it stays
   subordinate to the small prompt label; only tints on hover. */
.sport-remove-x {
    width: 24px;
    height: 24px;
    margin: -4px 0;          /* absorb its extra height into the label row */
    padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
}

.sport-remove-x:hover {
    background: var(--danger-bg);
    color: var(--danger-fg);
}

/* The first sport card can't be removed (there must always be one), so it has
   no delete ✕ on its "Select sport" line. */
.sport-group:first-child .sport-remove-x {
    display: none;
}


/* ----------------------------------- */
/* SPORT GROUP                           */
/* ----------------------------------- */

.sport-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fbfcfe;
}

.sport-expanded {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sport-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* selected-sport header: a full-width blue section header spanning the whole
   card (flush to its edges, top corners matching), with the change button
   inside it. Negative margins pull it out of the card's 1.25rem padding. */
.sport-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: -1.25rem -1.25rem 0;
    padding: 12px 12px 12px 20px;
    background: var(--accent);
    border-radius: 16px 16px 0 0;
}

.sport-header-name {
    flex: 1;
    min-width: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

/* change-sport + remove-sport buttons live inside the blue header */
.sport-header .summary-buttons button {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: transparent;
}

.sport-header .summary-buttons button:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
    border-color: transparent;
}

/* collapsed sport card: name + edit/delete */
.sport-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.sport-summary-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sport-summary-name {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sport-summary-sub {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
    font-size: 13px;
    color: var(--muted);
}

.sport-summary-sub:empty {
    display: none;
}

/* one team per line: crest beside the name */
.sport-summary-team {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.sport-summary-team span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sport-summary-crest {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
    background: #e8edf3;
    border-radius: 4px;
    padding: 1px;
}


/* ----------------------------------- */
/* TEAM GROUP                            */
/* ----------------------------------- */

.team-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.selection-group {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.selection-group:hover {
    border-color: var(--border-strong);
}


/* ----------------------------------- */
/* FAN OPTION                            */
/* ----------------------------------- */

.sport-box {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    padding: 0.25rem 1rem;
}

.secretary-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    cursor: pointer;
}

.secretary-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.secretary-text strong {
    font-size: 15px;
    font-weight: 600;
}

.secretary-subtext {
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
}


/* ----------------------------------- */
/* CUSTOM CHECKBOX                       */
/* ----------------------------------- */

.secretary-option input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-strong);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: 0.15s ease;
}

.secretary-option input[type="checkbox"]:hover {
    border-color: var(--accent);
}

.secretary-option input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.secretary-option input[type="checkbox"]:checked::after {
    content: "✓";
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}


/* ----------------------------------- */
/* SUMMARY SECTION (collapsed row)       */
/* ----------------------------------- */

.summary-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.summary-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0; /* allow text to truncate instead of pushing buttons off */
}

.summary-badge {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    background: #e8edf3;
    border-radius: 6px;
    padding: 2px;
}

.summary-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-title {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-sub {
    font-size: 12.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-buttons {
    display: flex;
    flex-direction: row;
    gap: 0.4rem;
    flex-shrink: 0; /* buttons stay put no matter how long the text is */
}

.summary-buttons button {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f1f5f9;
    color: var(--muted);
    border: 1px solid var(--border);
}

.summary-buttons .edit-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: transparent;
}

.summary-buttons .remove-btn:hover {
    background: var(--danger-bg);
    color: var(--danger-fg);
    border-color: transparent;
}


/* ----------------------------------- */
/* COLLAPSED PILL STATE                   */
/* ----------------------------------- */

.selection-group.pill-complete,
.sport-group.pill-complete {
    background: var(--success-bg);
    border-color: #86efac;
}

.selection-group.pill-incomplete,
.sport-group.pill-incomplete {
    background: var(--danger-bg);
    border-color: #fca5a5;
}

/* brief highlight to point at an existing duplicate */
@keyframes pill-flash {
    0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); }
    100% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
}

.selection-group.flash,
.sport-group.flash {
    animation: pill-flash 0.9s ease-out;
}


/* ----------------------------------- */
/* VALIDATION                            */
/* ----------------------------------- */

.validation-message {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    background: var(--danger-bg);
    color: var(--danger-fg);
    font-size: 14px;
    font-weight: 500;
}


/* ----------------------------------- */
/* SUPPORT SECTION                       */
/* ----------------------------------- */

.support-section {
    margin-top: 1.5rem;
}


/* ----------------------------------- */
/* MODAL                                 */
/* ----------------------------------- */

.calendar-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}

.calendar-modal-content {
    width: 100%;
    max-width: 400px;
    padding: 1.75rem;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.calendar-modal-content h2 {
    margin: 0;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}

.calendar-options {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.calendar-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.95rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s ease;
}

.calendar-option:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-dark);
}

.cancel-calendar-button {
    margin-top: 0.25rem;
    padding: 0.9rem;
    border: none;
    border-radius: var(--radius-md);
    background: #f1f5f9;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.cancel-calendar-button:hover {
    background: #e2e8f0;
    color: var(--text);
}

/* Subscribe option — the recommended auto-updating path, tinted to stand out. */
.subscribe-option {
    border-color: var(--accent);
    color: var(--accent-dark);
    background: var(--accent-soft);
    font-weight: 600;
}

.subscribe-option:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.subscribe-panel {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #f8fafc;
}

.subscribe-help {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
}

.subscribe-url-row {
    display: flex;
    gap: 0.5rem;
}

.subscribe-url {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.6rem 0.7rem;
    font-size: 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text);
}

.copy-url-button {
    flex: 0 0 auto;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.copy-url-button:hover {
    background: var(--accent-dark);
}


/* ----------------------------------- */
/* TV LISTINGS                           */
/* ----------------------------------- */

.tv-section {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.5rem 0 1rem;
}

.tv-title {
    font-size: 16px;
    font-weight: 700;
}


/* ----------------------------------- */
/* TOAST                                 */
/* ----------------------------------- */

.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 20px);
    z-index: 2000;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--text);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-card);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}