/* =========================================
   DASHBOARD WRAPPER & TYPOGRAPHY
========================================= */
.dashboard-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(7.5rem, 12vw, 10rem) 1.5rem 4rem 1.5rem;
    align-items: start;
}
.dashboard-wrapper .cs-text {
    padding: 0 1rem 2rem 1rem;
    max-width: 100%;
}
.cs-topper {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    display: block;
    margin-bottom: 0.5rem;
}
.cs-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 900;
    color: var(--headerColor);
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
}

/* =========================================
   WIDGETS
========================================= */
.sidebar-widget {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}
.tutorial-widget {
    background: linear-gradient(145deg, #ffffff, #fffdfa);
    border: 1px solid #ffe3d1;
    margin-bottom: 1.5rem;
}
.tut-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}
.tut-header h3 { margin: 0; font-size: 1.1rem; }
.tut-toggle {
    border: none;
    background: #1f2937;
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: 0.2s ease;
}
.tut-toggle:hover { background: #374151; transform: translateY(-1px); }
.tutorial-steps { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.tutorial-steps.hidden { display: none; }
.t-step { display: flex; gap: 0.75rem; align-items: flex-start; }
.step-num {
    background-color: var(--primary);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.2rem;
}
.t-step p { font-size: 0.85rem; line-height: 1.4; color: var(--text-muted); margin: 0; }
.link-group { display: flex; flex-direction: column; gap: .2rem; margin-top: 10px; padding-bottom: .25rem; }
.youtube-link { display: inline-block; margin-top: 10px; color: #cc0000; text-decoration: none; font-weight: bold; font-size: 14px; }
.youtube-link:hover { text-decoration: underline; }

/* =========================================
   NAVIGATION TABS
========================================= */
.dashboard-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
    position: sticky;
    top: var(--actual-nav-height);
    z-index: 100;
    background-color: rgba(255,255,255,1);
    padding-top: 1rem;
    box-shadow: 0 -2px 0 0 var(--bg-color);
}
.tab-btn {
    background: none;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}
.tab-btn:hover { color: var(--text-main); }
.tab-btn.active { color: var(--primary); }
.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -0.6rem;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary);
    border-radius: 2px;
}
.tab-pane { display: none; animation: fadeIn 0.3s ease; }
.tab-pane.active { display: block; }

/* Anchor target for the mobile auto-scroll-to-bonuses behavior (filter.js) —
   keeps the sticky header from covering the top of the tab on jump/scroll. */
#tab-daily { scroll-margin-top: var(--actual-nav-height, 80px); }

/* --- Daily Rewards toolbar (intro text + "Add Custom Site") --- */
.daily-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.daily-toolbar__add {
    flex-shrink: 0;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .daily-toolbar { flex-direction: column; align-items: stretch; }
    .daily-toolbar__add { width: 100%; }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   FILTERS & SEARCH
========================================= */
.filter-bar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    background-color: var(--surface-color);
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.search-box { position: relative; width: 100%; flex: 1 1 100%; min-width: 250px; }
.search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-main);
    background-color: var(--bg-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234e4b66'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.85rem center;
    background-size: 1.1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15); }
.elite-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    background-color: var(--surface-color);
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-bottom: 2rem;
    box-sizing: border-box;
}
.select-wrapper { position: relative; flex: 1 1 calc(50% - 0.5rem); min-width: 140px; }
.select-wrapper select {
    width: 100%;
    padding: 0.75rem 2.25rem 0.75rem 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    background-color: var(--bg-color);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234e4b66'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 0.85rem) center;
    background-size: 0.9rem;
    transition: border-color 0.2s, color 0.2s;
    box-sizing: border-box;
}
.select-wrapper select:focus { outline: none; border-color: var(--primary); color: var(--text-main); }
.filter-icon::before { content: "⚙️"; position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.sort-icon::before { content: "⇅"; position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.location-icon::before, .age-icon::before, .register-icon::before, .platform-icon::before {
    content: ""; position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
    pointer-events: none; width: 1rem; height: 1rem; background-color: currentColor;
    -webkit-mask-size: contain; mask-size: contain;
}
.location-icon::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M541.9 139.5C546.4 127.7 543.6 114.3 534.7 105.4C525.8 96.5 512.4 93.6 500.6 98.2L84.6 258.2C71.9 263 63.7 275.2 64 288.7C64.3 302.2 73.1 314.1 85.9 318.3L262.7 377.2L321.6 554C325.9 566.8 337.7 575.6 351.2 575.9C364.7 576.2 376.9 568 381.8 555.4L541.8 139.4z'/%3E%3C/svg%3E") no-repeat center; }
.age-icon::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M216 64C229.3 64 240 74.7 240 88L240 128L400 128L400 88C400 74.7 410.7 64 424 64C437.3 64 448 74.7 448 88L448 128L480 128C515.3 128 544 156.7 544 192L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 192C96 156.7 124.7 128 160 128L192 128L192 88C192 74.7 202.7 64 216 64zM216 176L160 176C151.2 176 144 183.2 144 192L144 240L496 240L496 192C496 183.2 488.8 176 480 176L216 176zM144 288L144 480C144 488.8 151.2 496 160 496L480 496C488.8 496 496 488.8 496 480L496 288L144 288z'/%3E%3C/svg%3E") no-repeat center; }
.register-icon::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 112C434.9 112 528 205.1 528 320C528 434.9 434.9 528 320 528C205.1 528 112 434.9 112 320C112 205.1 205.1 112 320 112zM320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM264 208C250.7 208 240 218.7 240 232L240 408C240 421.3 250.7 432 264 432C277.3 432 288 421.3 288 408L288 352L322.4 352L363.4 420.3C370.2 431.7 385 435.3 396.3 428.5C407.6 421.7 411.3 406.9 404.5 395.6L374.3 345.3C398.9 333.8 415.9 308.9 415.9 280C415.9 240.2 383.7 208 343.9 208L263.9 208zM336 304L288 304L288 256L344 256C357.3 256 368 266.7 368 280C368 293.3 357.3 304 344 304L336 304z'/%3E%3C/svg%3E") no-repeat center; }
/* NEW: phone/monitor icon for the Website vs App platform filter */
.platform-icon::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-5v2h2a1 1 0 1 1 0 2H7a1 1 0 1 1 0-2h2v-2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 2v9h16V6H4z'/%3E%3C/svg%3E") no-repeat center; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-5v2h2a1 1 0 1 1 0 2H7a1 1 0 1 1 0-2h2v-2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 2v9h16V6H4z'/%3E%3C/svg%3E") no-repeat center; }
.select-wrapper optgroup { font-weight: 700; color: var(--primary); background-color: var(--surface-color); font-style: normal; }
.select-wrapper option { color: var(--text-main); font-weight: normal; background-color: var(--surface-color); }
@media (min-width: 768px) {
    .filter-bar { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; }
    .search-box { max-width: 300px; }
    .elite-filters { flex-direction: row; justify-content: flex-end; width: auto; flex-grow: 1; align-items: center; }
    .select-wrapper { width: auto; min-width: 160px; flex: 1 1 auto; }
    .select-wrapper.sort-icon { min-width: 220px; }
}
@media (min-width: 992px) { .search-box { flex: 2 1 auto; } }

/* =========================================
   BONUS CARDS
========================================= */
.bonus-list { display: flex; flex-direction: column; gap: 1.25rem; }
.bonus-list-empty__register {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}
/* Update the base bonus card to always be a column so the dropdown stays at the bottom */
.bonus-card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    /* Cards below the fold skip layout AND paint until they're scrolled near.
       On a long tracked list that's most of the work of the first render.
       The `auto` keyword on contain-intrinsic-size makes the browser remember
       each card's real height once it has been rendered, so the scroll height
       stops being a guess after first paint — that's what keeps this from
       trading LCP for layout shift. The placeholder height below is the
       STACKED (<600px) card; the row layout at >=600px is overridden in that
       media query. Getting this roughly right matters — a badly wrong estimate
       is how content-visibility ends up causing the layout shift it should
       avoid. */
    content-visibility: auto;
    contain-intrinsic-size: auto 260px;
    gap: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.2s ease;
}
/* NEW: The header wrapper controls the row/column layout previously handled by the main card */
.bonus-card__header {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

@media (min-width: 600px) {
    /* Header goes side-by-side here, so a card is roughly a third shorter than
       the stacked mobile layout the base contain-intrinsic-size assumes. */
    .bonus-card {
        contain-intrinsic-size: auto 180px;
    }

    .bonus-card__header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* .bonus-card__header has width:100%, so at this breakpoint (.bonus-card
       becomes a flex row) the header's flex-basis is 100% of the card and it
       absorbs virtually all of the shrink needed to fit its sibling
       (.bonus-card__instructions) alongside it. That means the header's
       actual rendered width — and therefore where the pin/claim/menu button
       cluster lands — depends on how wide the instructions column's own text
       is. AMOE's "How to submit" is two characters shorter than everyone
       else's "How to collect", so AMOE cards' action buttons were landing a
       few pixels further right than standard/custom cards. Pinning the
       instructions column to one fixed width (regardless of label wording)
       makes every card's header shrink by the same amount, so the action
       cluster lands at the same x position everywhere. */
    .bonus-card__instructions {
        flex: 0 0 8.5rem;
    }
}

/* -------------------------------------
   Lightweight Instructions Accordion 
-------------------------------------- */
.bonus-card__instructions {
    border-top: 1px dashed var(--border-color);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
}

.bonus-card__instructions summary {
    list-style: none; /* Removes default triangle */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    user-select: none;
    transition: color 0.2s ease;
}

.bonus-card__instructions summary::-webkit-details-marker {
    display: none; /* Safari fix */
}

.bonus-card__instructions summary:hover {
    color: var(--primary);
}

.bonus-card__instructions summary .chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

/* Rotate Chevron on Open */
.bonus-card__instructions[open] summary .chevron {
    transform: rotate(180deg);
}

.bonus-card__instructions .instructions-body {
    padding-top: 0.75rem;
}

.bonus-card__instructions .instructions-body p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--bodyTextColor);
}

/* --- Dark Mode Additions --- */
body.dark-mode .bonus-card__instructions {
    border-top-color: var(--accent);
}
body.dark-mode .bonus-card__instructions .instructions-body p {
    color: #d1d5db;
}
body.dark-mode .bonus-card__instructions summary:hover {
    color: var(--primaryLight);
}

.bonus-card:hover { transform: translateY(-3px); border-color: var(--primaryLight); }
.bonus-card.claimed {
    opacity: 0; transform: translateY(-10px) scale(.95);
    max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; border: none;
}
@media (min-width: 600px) { .bonus-card { flex-direction: row; align-items: center; justify-content: space-between; } }
.card-brand { display: flex; align-items: center; gap: 1rem; flex: 1; }
.brand-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-color); }
.brand-details h2 { font-size: 1.25rem; margin: 0 0 0.25rem 0; }
.card-actions { display: flex; gap: 0.5rem; }
.btn {
    padding: 0.6rem 1.25rem; border-radius: 6px; font-weight: 600; text-decoration: none;
    cursor: pointer; border: none; transition: background-color 0.2s ease; text-align: center;
}
.btn-primary { background-color: var(--primary); color: white; }
.btn-primary:hover { background-color: var(--primaryLight); }
.btn-secondary { background-color: transparent; border: 1px solid var(--border-color); color: var(--text-main); }
.btn-secondary:hover { background-color: #f3f4f6; }
.badge-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.mini-bonus-card__pill {
    display: inline-flex; align-items: center; width: fit-content; padding: 0.2rem 0.5rem;
    border-radius: 1rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; line-height: 1;
}
.pill--daily { background: #eef2ff; color: #4f46e5; }
/* NEW: platform availability pills */
.pill--platform { background: #ecfdf5; color: #047857; margin-left: 0.35rem; }
body.dark-mode .pill--platform { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }
/* Non-sweepstakes platforms — neutral, not a warning; these are the ones that
   remain available in states restricting sweepstakes real-prize play. */
.pill--alt-model { background: #eef2ff; color: #3730a3; margin-left: 0.35rem; }
body.dark-mode .pill--alt-model { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; }
.hint-icon-link {
    display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    background-color: var(--bg-color); border: 1px solid var(--border-color); color: var(--text-muted);
    border-radius: 6px; text-decoration: none; transition: all 0.2s ease;
}
.hint-icon-link:hover, .hint-icon-link:focus {
    background-color: var(--surface-color); border-color: var(--primary); color: var(--primary);
    transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); outline: none;
}
.hint-icon-link.hint--ev:hover, .hint-icon-link.hint--ev:focus { border-color: #00AC26; color: #00AC26; }
.hint-icon-link.hint--req:hover, .hint-icon-link.hint--req:focus { border-color: #d946ef; color: #d946ef; }
.alert-card {
    border: 2px dashed rgba(255, 106, 62, 0.4);
    background-color: rgba(255, 106, 62, 0.02);
    display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
}
@media (min-width: 600px) { .alert-card { flex-direction: row; align-items: center; justify-content: space-between; } }
.alert-content h2 { font-size: 1.25rem; color: #d946ef; margin: 0 0 0.25rem 0; }
.alert-text { font-size: 0.95rem; color: var(--text-muted); margin: 0; }
.alert-actions { flex-shrink: 0; }

/* =========================================
   CASINO CARDS
========================================= */
.casino-container {
    width: 100%; padding: 2rem 0; display: flex; flex-direction: column; gap: 2rem;
    align-items: center; transition: opacity 0.3s ease, transform 0.3s ease; box-sizing: border-box;
}
.casino-container.hidden { display: none; }
.casino-card {
    width: 100%; background: #fff; border: 1px solid rgba(26, 26, 26, 0.08); border-radius: 1.25rem;
    box-shadow: 0 18px 50px rgba(26, 26, 26, 0.08); padding: 1.25rem; display: flex; flex-direction: column;
    gap: 1.25rem; position: relative; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    box-sizing: border-box;
}
.casino-card:hover {
    transform: translateY(-4px); box-shadow: 0 24px 60px rgba(26, 26, 26, 0.12);
    border-color: rgba(255, 186, 67, 0.32);
}
.casino-card .cs-text {
    max-width: 100%; font-size: var(--bodyFontSize, 1rem); line-height: 1.6em;
    color: var(--bodyTextColor, #4a4a4a); margin: 0;
}
.casino-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem; }
.casino-card__brand { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.casino-card__logo {
    width: 4.5rem; height: 4.5rem; object-fit: contain; border-radius: 1rem; background: #fff;
    border: 1px solid rgba(26, 26, 26, 0.06); box-shadow: 0 8px 20px rgba(26, 26, 26, 0.05); flex-shrink: 0;
}
.casino-card__brand-text { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.casino-card__name { font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.15em; font-weight: 900; color: var(--headerColor, #1a1a1a); margin: 0; }
.casino-card__trustpilot a { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; transition: opacity 0.2s ease; }
.casino-card__trustpilot a:hover { opacity: 0.8; }
.casino-card__trustpilot-stars { color: #00b67a; font-size: 1.1rem; letter-spacing: 1px; line-height: 1; }
.casino-card__trustpilot-stars .half-star { opacity: 0.5; }
.casino-card__trustpilot-score { font-size: 0.8rem; font-weight: 700; color: var(--bodyTextColor, #4a4a4a); }
.casino-card__bonus { text-align: right; flex-shrink: 0; border: 3px solid var(--secondary, #ffba43); padding: 4px 11px; border-radius: 1rem; }
.casino-card__bonus-value { display: block; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1; font-weight: 900; letter-spacing: -0.03em; text-align: center; }
.casino-card__bonus-label { display: block; margin-top: 0.35rem; font-size: 0.75rem; line-height: 1.2em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bodyTextColor, #4a4a4a); text-align: center; }
.casino-card__middle { display: flex; gap: 1.5rem; align-items: flex-start; }
.casino-card__content-left { flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.casino-card__meta-box { background: #fafbfc; border: 1px solid rgba(26, 26, 26, 0.06); border-radius: 1rem; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; min-width: 240px; flex-shrink: 0; }
.casino-card__meta-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid rgba(26, 26, 26, 0.06); padding-bottom: 0.85rem; }
.casino-card__meta-row:last-child { border-bottom: none; padding-bottom: 0; }
.casino-card__meta-label { display: block; font-size: 0.72rem; line-height: 1.3em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bodyTextColor, #4a4a4a); margin: 0; }
.casino-card__meta-value { display: block; font-size: 1.05rem; line-height: 1.2em; font-weight: 900; color: var(--headerColor, #1a1a1a); text-align: right; }
.casino-card__guide-link { font-size: 0.875rem; line-height: 1.5; color: var(--bodyTextColor, #4a4a4a); margin: 0; padding: 0.75rem 0; border-top: 1px dashed rgba(26, 26, 26, 0.15); border-bottom: 1px dashed rgba(26, 26, 26, 0.15); }
.casino-card__guide-link a { color: var(--primary, #0056b3); font-weight: 700; text-decoration: none; transition: color 0.2s ease; }
.casino-card__guide-link a:hover { text-decoration: underline; color: var(--primaryLight, #007bff); }
.casino-card__accordion-group { display: flex; flex-direction: column; gap: 0.75rem; }
.casino-card__details { border: 1px solid rgba(26, 26, 26, 0.08); border-radius: 1rem; background: #fff; overflow: hidden; transition: background-color 0.3s ease; }
.casino-card__details[open] { background: #fafbfc; }
.casino-card__summary { list-style: none; cursor: pointer; padding: 1rem 1.1rem; font-size: 0.95rem; line-height: 1.2em; font-weight: 800; color: var(--headerColor, #1a1a1a); position: relative; }
.casino-card__summary::-webkit-details-marker { display: none; }
.casino-card__summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.1rem; font-weight: 700; color: var(--primary, #0056b3); }
.casino-card__details[open] .casino-card__summary::after { content: "−"; }
.casino-card__details-content { padding: 0 1.1rem 1rem; }
.casino-card__list { margin: 0; padding-left: 1.25rem; font-size: 0.9rem; line-height: 1.6em; color: var(--bodyTextColor, #4a4a4a); }
.casino-card__list li { margin-bottom: 0.5rem; }
.casino-card__list li:last-child { margin-bottom: 0; }
.casino-card__actions { 
    display: flex; 
    gap: 0.75rem; 
    flex-wrap: wrap; 
    margin-top: 0.5rem;
}
.casino-card__cta { 
    min-height: 3rem; 
    padding: 0.875rem 1.25rem; 
    border-radius: 0.875rem; 
    font-size: 0.95rem; 
    line-height: 1.2em; 
    font-weight: 800; 
    text-decoration: none; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; 
}
.casino-card__cta--primary { cursor: pointer;  background: var(--primary, #0056b3); color: var(--bodyTextColorWhite, #fff); border: 1px solid var(--primary, #0056b3); }
.casino-card__cta--primary:hover { transform: translateY(-2px); }
.casino-card__cta--secondary { cursor: pointer; background: #fff; color: var(--headerColor, #1a1a1a); border: 1px solid rgba(26, 26, 26, 0.12); }
.casino-card__cta--secondary:hover { transform: translateY(-2px); border-color: rgba(255, 186, 67, 0.45); }
@media only screen and (max-width: 56rem) { .casino-card__middle { flex-direction: column; align-items: stretch; } }
@media only screen and (max-width: 48rem) {
    .casino-card__top { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; align-items: center; }
    .casino-card__brand { display: contents; }
    .casino-card__logo { grid-column: 1; grid-row: 1 / 3; width: 5.5rem; height: 5.5rem; }
    .casino-card__brand-text { grid-column: 2; grid-row: 1; align-self: flex-end; }
    .casino-card__bonus { grid-column: 2; grid-row: 2; align-self: flex-start; text-align: left; width: fit-content; padding: 4px 12px; }
    .casino-card__bonus-value { font-size: 1.5rem; text-align: left; }
    .casino-card__bonus-label { text-align: left; }
    .casino-card__actions { flex-direction: column; }
    .casino-card__cta { width: 100%; }
}

/* =========================================
   DARK MODE OVERRIDES (Icons & Secondary Text)
========================================= */
body.dark-mode .casino-card__cta--secondary {
    color: var(--bodyTextColorWhite, #ffffff) !important;
    border-color: var(--accent, #334155) !important;
}
body.dark-mode .casino-card__cta--secondary:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Forces the SVG Mask icons inside settings card to go white in dark mode */
body.dark-mode .profile-potential-card__settings .location-icon::before,
body.dark-mode .profile-potential-card__settings .age-icon::before,
body.dark-mode .elite-filters .register-icon::before,
body.dark-mode .elite-filters .age-icon::before,
body.dark-mode .elite-filters .platform-icon::before,
body.dark-mode .elite-filters .location-icon::before {
    background-color: var(--bodyTextColorWhite, #ffffff) !important;
    color: var(--bodyTextColorWhite, #ffffff) !important;
}

/* =========================================
   TOAST NOTIFICATIONS (v2)
   The old rules used ::deep (a Blazor CSS-isolation token) which is invalid
   in a plain stylesheet, so browsers dropped those rules entirely — that's
   why toasts rendered as unstyled text. This block replaces them.
========================================= */
#toast-container {
    position: fixed;
    z-index: 10001; /* above the modal overlay (10000) */
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    pointer-events: none;
    max-width: calc(100vw - 3rem);
}

.notification-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 360px;
    max-width: 100%;
    padding: 0.9rem 1rem;
    background-color: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.08);
    border-left: 4px solid var(--blackjackGreen, #0f6b4f);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(26, 26, 26, 0.16);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.notification-toast.show { opacity: 1; transform: translateY(0); }

.notification-toast__icon {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.1rem;
    color: var(--blackjackGreen, #0f6b4f);
}
.notification-toast__icon svg { width: 100%; height: 100%; display: block; }

.notification-toast__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}
.notification-toast__title {
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--headerColor, #1a1a1a);
}
.notification-toast__message {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--bodyTextColor, #4e4b66);
    overflow-wrap: break-word;
}

.notification-toast__close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.1rem 0.25rem;
    color: var(--bodyTextColor, #4e4b66);
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.notification-toast__close:hover { opacity: 1; }

/* Variants */
.notification-toast--error { border-left-color: #dc2626; }
.notification-toast--error .notification-toast__icon { color: #dc2626; }
.notification-toast--info { border-left-color: #2563eb; }
.notification-toast--info .notification-toast__icon { color: #2563eb; }

/* Dark mode */
body.dark-mode .notification-toast {
    background-color: var(--medium, #282828);
    border-color: var(--accent, #404040);
    border-left-color: #4ade80;
}
body.dark-mode .notification-toast__icon { color: #4ade80; }
body.dark-mode .notification-toast__title { color: var(--bodyTextColorWhite, #fafbfc); }
body.dark-mode .notification-toast__message { color: #d1d5db; }
body.dark-mode .notification-toast__close { color: #d1d5db; }
body.dark-mode .notification-toast--error { border-left-color: #f87171; }
body.dark-mode .notification-toast--error .notification-toast__icon { color: #f87171; }
body.dark-mode .notification-toast--info { border-left-color: #60a5fa; }
body.dark-mode .notification-toast--info .notification-toast__icon { color: #60a5fa; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .notification-toast { transition: opacity 0.2s ease; transform: none; }
    .notification-toast.show { transform: none; }
}

/* Mobile: full-width toasts pinned above the bottom padding */
@media (max-width: 480px) {
    #toast-container { left: 1rem; right: 1rem; align-items: stretch; }
    .notification-toast { width: 100%; }
}

/* =========================================
   DARK MODE OVERRIDES & WARNINGS
========================================= */
body.dark-mode .dashboard-wrapper { background-color: var(--dark); }
body.dark-mode .dashboard-tabs { background-color: var(--dark); border-bottom-color: var(--accent); box-shadow: 0 -2px 0 0 var(--dark); }
body.dark-mode .tab-btn { color: #cbd5e1; }
body.dark-mode .tab-btn:hover, body.dark-mode .tab-btn.active { color: var(--primary); }
body.dark-mode .sidebar-widget, body.dark-mode .tutorial-widget, body.dark-mode .filter-bar, body.dark-mode .elite-filters, body.dark-mode .bonus-card, body.dark-mode .casino-card, body.dark-mode .casino-card__meta-box, body.dark-mode .casino-card__details, body.dark-mode .casino-card__details[open] { background: var(--medium); border-color: var(--accent); color: var(--bodyTextColorWhite); }
body.dark-mode .tutorial-widget { background: linear-gradient(145deg, #1f1f1f, #282828); }
body.dark-mode .t-step p, body.dark-mode .alert-text, body.dark-mode .casino-card .cs-text, body.dark-mode .casino-card__trustpilot-score, body.dark-mode .casino-card__bonus-label, body.dark-mode .casino-card__meta-label, body.dark-mode .casino-card__guide-link, body.dark-mode .casino-card__list { color: #d1d5db; }
body.dark-mode .casino-card__name, body.dark-mode .casino-card__meta-value, body.dark-mode .casino-card__summary, body.dark-mode .brand-details h2, body.dark-mode .tut-header h3 { color: var(--bodyTextColorWhite); }
body.dark-mode .search-input, body.dark-mode .select-wrapper select { background-color: #1f1f1f; border-color: var(--accent); color: var(--bodyTextColorWhite); }
body.dark-mode .search-input::placeholder { color: #9ca3af; }
body.dark-mode .select-wrapper option, body.dark-mode .select-wrapper optgroup { background-color: #1f1f1f; color: var(--bodyTextColorWhite); }
body.dark-mode .btn-secondary, body.dark-mode .casino-card__cta--secondary { background-color: transparent; border-color: var(--accent); color: var(--bodyTextColorWhite); }
body.dark-mode .btn-secondary:hover, body.dark-mode .casino-card__cta--secondary:hover { background-color: #333; }
body.dark-mode .hint-icon-link { background-color: #1f1f1f; border-color: var(--accent); color: #d1d5db; }
body.dark-mode .brand-logo, body.dark-mode .casino-card__logo { background-color: #fff; border-color: var(--accent); }
body.dark-mode .casino-card__guide-link { border-top-color: var(--accent); border-bottom-color: var(--accent); }
body.dark-mode .casino-card__meta-row { border-bottom-color: var(--accent); }
body.dark-mode .alert-card { background-color: rgba(255, 106, 62, 0.08); border-color: rgba(255, 106, 62, 0.35); }
body.dark-mode .pill--daily { background: rgba(79, 70, 229, 0.22); color: #c7d2fe; }

.casino-card__warnings:not(:empty) { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.25rem; }
.casino-card__warning-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; line-height: 1.4; border: 1px solid; }
.casino-card__warning-item svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 0.05rem; }
.casino-card__warning-item--warning { background-color: #fff4f4; border-color: #ffdbdb; color: #c92a2a; }
.casino-card__warning-item--warning strong { color: #a61b1b; }
.casino-card__warning-item--note { background-color: #fffdf2; border-color: #fce588; color: #856404; }
.casino-card__warning-item--note strong { color: #664d03; }
body.dark-mode .casino-card__warning-item--warning { background-color: rgba(201, 42, 42, 0.14); border-color: rgba(255, 219, 219, 0.22); color: #fecaca; }
body.dark-mode .casino-card__warning-item--warning strong { color: #fca5a5; }
body.dark-mode .casino-card__warning-item--note { background-color: rgba(253, 224, 71, 0.1); border-color: rgba(253, 224, 71, 0.2); color: #fde68a; }
body.dark-mode .casino-card__warning-item--note strong { color: #fef08a; }
/* =========================================
   CONFIRMATION MODAL
========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    /* visibility (not just opacity) is what takes the modal's inputs and
       buttons OUT of the tab order and out of the accessibility tree. With
       opacity alone, every control in all five modals stayed keyboard-
       focusable and screen-reader-readable while the modal was closed.
       It's in the transition so the fade-out still plays: visibility flips
       discretely at the END of the 0.3s, and immediately on open. */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10000;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.modal-content {
    background-color: var(--surface-color, #ffffff);
    padding: 2rem;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-content h3 {
    margin-top: 0;
    font-size: 1.5rem;
    color: var(--headerColor, #1a1a1a);
}

.modal-content p {
    color: var(--text-muted, #4a4a4a);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn.alert-btn {
    background-color: #dc2626;
    border-color: #dc2626;
    color: white;
}

.btn.alert-btn:hover {
    background-color: #b91c1c;
}

/* Dark mode for the modal (was previously unstyled — white flash in dark UI) */
body.dark-mode .modal-content {
    background-color: var(--medium, #282828);
}
body.dark-mode .modal-content h3 { color: var(--bodyTextColorWhite, #fafbfc); }
body.dark-mode .modal-content p { color: #d1d5db; }

/* =========================================
   RESTRICTED-STATE NOTICE
========================================= */
/* Appears above the tabs when the active state filter restricts sweepstakes
   real-prize play. Muted red — this is context, not an error. */
.restricted-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    border-left: 4px solid #dc2626;
    background: #fef2f2;
    color: #7f1d1d;
    font-size: 0.875rem;
    line-height: 1.55;
}

/* `hidden` alone loses to `display:flex`, so restate it. */
.restricted-notice[hidden] { display: none; }

.restricted-notice__icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
}

.restricted-notice__body { display: block; }
.restricted-notice__body strong { display: block; margin-bottom: 0.15rem; }

.restricted-notice__link {
    display: inline-block;
    margin-top: 0.4rem;
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.dark-mode .restricted-notice {
    background: rgba(220, 38, 38, 0.12);
    color: #fca5a5;
}

body.dark-mode .restricted-notice__link { color: inherit; }

/* =========================================
   WARNING GATE MODAL (before joining a flagged site)
========================================= */
#warning-modal .modal-content { max-width: 30rem; text-align: left; }
#warning-modal h3 { text-align: center; }

.warn-modal__lead { margin-bottom: 0.75rem; }
#warn-modal-site { font-weight: 700; color: var(--headerColor, #1a1a1a); }

.warn-modal__list {
    margin: 0 0 1.25rem;
    padding: 0.875rem 1rem 0.875rem 2.25rem;
    border-left: 4px solid #dc2626;
    border-radius: 0.375rem;
    background: #fef2f2;
    color: #7f1d1d;
    font-weight: 600;
    line-height: 1.5;
}
.warn-modal__list li + li { margin-top: 0.5rem; }

.warn-modal__note {
    font-size: 0.8125rem;
    line-height: 1.5;
    opacity: 0.85;
}

body.dark-mode #warn-modal-site { color: var(--bodyTextColorWhite, #fafbfc); }
body.dark-mode .warn-modal__list {
    background: rgba(220, 38, 38, 0.12);
    border-left-color: #f87171;
    color: #fca5a5;
}

/* =========================================
   PROFILE POTENTIAL CARD
========================================= */
.profile-potential-card {
    background: var(--surface-color, #ffffff);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.profile-potential-card__settings {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 280px;
}

.profile-potential-card__summary {
    flex: 2;
    min-width: 300px;
}

.profile-potential-card__summary p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--bodyTextColor);
}

.profile-potential-card__summary strong {
    font-size: 1.15rem;
    font-weight: 900;
}

.text-primary {
    color: var(--primary);
}

/* =========================================
   OPPORTUNITIES TAB CARDS
========================================= */
.opportunities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.opportunity-card {
    background: var(--surface-color, #ffffff);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.opportunity-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
    border-color: var(--primaryLight);
}

.opportunity-card__content h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: var(--headerColor);
}

.opportunity-card__content p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.opportunity-card__actions {
    display: flex;
    gap: 0.75rem;
}

/* =========================================
   DARK MODE OVERRIDES (Profile & Opps)
========================================= */
body.dark-mode .profile-potential-card,
body.dark-mode .opportunity-card {
    background: var(--medium);
    border-color: var(--accent);
}

body.dark-mode .profile-potential-card__summary p,
body.dark-mode .opportunity-card__content p {
    color: #d1d5db;
}

body.dark-mode .profile-potential-card__summary strong,
body.dark-mode .opportunity-card__content h3 {
    color: var(--bodyTextColorWhite);
}

body.dark-mode .text-primary {
    color: #60a5fa; 
}
/* ============================================================
   Section previously appended from the inline <style> block
   ============================================================ */

/* --- Earnings hype banner (was inline in Dashboard.cshtml) --- */
.earnings-hype-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    width: 100%;
}

.hype-box {
    flex: 1;
    min-width: 240px; /* Stacks nicely on mobile */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    background-color: var(--blackjackSoft, #fff8ec);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}

.hype-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
}

.hype-box.total { border-bottom: 4px solid var(--primary); }
.hype-box.claimed { border-bottom: 4px solid var(--blackjackGreen); }
.hype-box.unclaimed { border-bottom: 4px solid var(--primaryLight); }

.hype-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bodyTextColor);
    font-weight: 700;
}

.hype-value {
    margin: 0.5rem 0 0 0;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.hype-box.total .hype-value > span:first-child { color: var(--primary); font-size: 2.5rem; font-weight: 900; }
.hype-box.claimed .hype-value > span:first-child { color: var(--blackjackGreen); font-size: 2.5rem; font-weight: 900; }
.hype-box.unclaimed .hype-value > span:first-child { color: var(--primaryLight); font-size: 2.5rem; font-weight: 900; }

/* --- Dark Mode Overrides --- */
body.dark-mode .hype-box {
    background-color: var(--medium);
    border-color: var(--accent);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

body.dark-mode .hype-box:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode .hype-label {
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
}

body.dark-mode .hype-box.claimed .hype-value > span:first-child {
    color: #4ade80;
}

/* --- Utility classes replacing inline style="" attributes --- */
.potential-disclaimer { color: var(--text-muted); }

.filter-description {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-muted);
}

.cs-title--sub { font-size: 1.8rem; }

.cs-text--flush {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

.bonus-card__est-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 0.5rem;
}

/* --- Rendering-cost optimization ---
   content-visibility lets the browser skip layout/paint for cards that are
   off-screen; contain-intrinsic-size reserves approximate space so the
   scrollbar doesn't jump. Tune the pixel values to your average card height. */
.casino-card,
.bonus-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
}
.casino-card__appstore a,
.casino-card__appstore {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.casino-card__appstore:hover { opacity: 0.8; }

.casino-card__appstore-stars {
    color: #0a84ff;            /* Apple's system blue */
    font-size: 1.1rem;
    letter-spacing: 1px;
    line-height: 1;
}

.casino-card__appstore-score {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bodyTextColor, #4a4a4a);
}
.casino-card__appstore-score svg { flex-shrink: 0; opacity: 0.85; }

body.dark-mode .casino-card__appstore-stars { color: #4da3ff; }
body.dark-mode .casino-card__appstore-score { color: #d1d5db; }

/* Capped-at-1SC pill */
.pill--capped {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #fef3c7;
    color: #92400e;
    cursor: help;
}
.pill--capped svg { flex-shrink: 0; opacity: 0.8; }
body.dark-mode .pill--capped { background: rgba(251, 191, 36, 0.18); color: #fcd34d; }

/* Streak pill (Daily Bonuses tab) */
.pill--streak { background: #ffe4e6; color: #be123c; }
body.dark-mode .pill--streak { background: rgba(244, 63, 94, 0.18); color: #fda4af; }

/* On the casino card, nudge the capped chip under the bonus box */
.casino-card__capped { margin-top: 0.5rem; align-self: flex-start; }
@media only screen and (max-width: 48rem) {
    /* keep it in the bonus grid cell on mobile */
    .casino-card__capped { grid-column: 2; }
}

/* ---- Hover tooltip (hover + keyboard focus, no mobile tap) ---- */
.info-tip { position: relative; }
.info-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: max-content;
    max-width: 240px;
    padding: 0.5rem 0.65rem;
    background: #1a1a1a;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: none;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 50;
    pointer-events: none;
}
.info-tip::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 3px);
    left: 12px;
    border: 5px solid transparent;
    border-top-color: #1a1a1a;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s;
    z-index: 50;
}
.info-tip:hover::after, .info-tip:focus-visible::after,
.info-tip:hover::before, .info-tip:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.bonus-card:has(.info-tip:hover),
.bonus-card:has(.info-tip:focus-visible),
.casino-card:has(.info-tip:hover),
.casino-card:has(.info-tip:focus-visible) {
    position: relative;
    z-index: 200;
}
.bonus-card:has(.info-tip:hover),
.casino-card:has(.info-tip:hover) {
    content-visibility: visible;
}
/* =========================================
   COMPLIANCE / INFORMATIONAL NOTICE
========================================= */
.compliance-note {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary);
    border-radius: 12px;
    color: var(--bodyTextColor, #4e4b66);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
}
.compliance-note strong {
    color: var(--headerColor, #1a1a1a);
}
body.dark-mode .compliance-note {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--accent, #334155);
    color: #E2E2E2;
}
body.dark-mode .compliance-note strong {
    color: var(--bodyTextColorWhite, #ffffff);
}
/* ============================================================
   APPEND TO THE BOTTOM OF dashboard.css
   Custom sites + per-card customization + SC-cap note fix
   ============================================================ */


/* --- Newbie walkthrough intro (what IS a sweepstakes casino?) --- */
.tut-intro {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--primary, #0056b3);
    background: rgba(0, 86, 179, 0.05);
    border-radius: 0 8px 8px 0;
}
body.dark-mode .tut-intro {
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--primaryLight, #007bff);
}
body.dark-mode .tut-intro strong { color: #f3f4f6; }

/* --- SC Limit Note relocated to the redemption meta box (Sites tab).
       Small, quiet, and no longer shoving the Daily Reward out of the
       top-right corner. Keeps the info-tip tooltip behavior. --- */
.sc-cap-note--meta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: help;
}
.sc-cap-note--meta svg { flex-shrink: 0; }
body.dark-mode .sc-cap-note--meta { color: #9ca3af; }
/* =========================================
   FORM MODALS (customize / custom site)
========================================= */
.modal-content--form {
    max-width: 500px;
    text-align: left;
    max-height: min(88vh, 720px);
    overflow-y: auto;
}
.modal-content--form h3 {
    font-size: 1.3rem;
    margin: 0 0 1.5rem 0;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.15rem;
}
.form-row label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--headerColor, #1a1a1a);
}
.form-row small {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="url"],
.form-row input[type="time"],
.form-row select {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-main);
    background-color: var(--bg-color, #fff);
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-row input:focus,
.form-row select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15);
}

/* Streak checkbox row */
.form-row--inline {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
}
.form-row--inline label {
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.form-row--inline input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--primary);
    cursor: pointer;
}

/* Time + timezone side by side */
.time-tz-row { display: flex; gap: 0.5rem; }
.time-tz-row input[type="time"] { flex: 1 1 45%; }
.time-tz-row select { flex: 1 1 55%; }

/* Footer: destructive action left, save/cancel right */
.modal-actions--split {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}
.modal-actions--split > div {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.danger-btn {
    background: transparent;
    border: 1px solid #dc2626;
    color: #dc2626;
}
.danger-btn:hover { background: #dc2626; color: #fff; }

@media (max-width: 480px) {
    .modal-actions--split,
    .modal-actions--split > div { justify-content: stretch; }
    .modal-actions--split .btn { flex: 1; }
}

/* Dark mode */
body.dark-mode .form-row label { color: var(--bodyTextColorWhite, #fafbfc); }
body.dark-mode .form-row small { color: #9ca3af; }
body.dark-mode .form-row input,
body.dark-mode .form-row select {
    background-color: #1f1f1f;
    border-color: var(--accent);
    color: var(--bodyTextColorWhite);
}
body.dark-mode .modal-actions--split { border-top-color: var(--accent); }
body.dark-mode .danger-btn { border-color: #f87171; color: #f87171; }
body.dark-mode .danger-btn:hover { background: #f87171; color: #1a1a1a; }

/* ============================================================
   APPEND: pin / hide / notes / uniform action buttons / report
   ============================================================ */

/* --- Uniform card actions: claim and timer are the same footprint,
       the timer just reads as clearly inactive. --- */
.btn-action {
    min-width: 138px;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums; /* countdown digits don't jiggle */
}
.btn-timer {
    background: var(--bg-color, #f3f4f6);
    color: var(--text-muted, #6b7280);
    border: 1px dashed var(--border-color, #d1d5db);
    cursor: default;
}
.btn-timer:disabled { opacity: 0.85; }
body.dark-mode .btn-timer {
    background: #1f1f1f;
    border-color: var(--accent, #404040);
    color: #9ca3af;
}

/* --- Pin button --- */
.pin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.pin-btn:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-1px); }
.pin-btn.pinned { color: #b45309; border-color: #f59e0b; background: #fffbeb; }
body.dark-mode .pin-btn { border-color: var(--accent); color: #9ca3af; }
body.dark-mode .pin-btn.pinned { color: #fbbf24; border-color: #b45309; background: rgba(245, 158, 11, 0.12); }

/* Subtle left accent on pinned cards so the ordering explains itself */
.bonus-card[data-pinned="true"] { border-left: 3px solid #f59e0b; }

/* AMOE cards get a light amber tint so they read as "not a normal bonus"
   at a glance, without relying on pills/text alone. */
.bonus-card--amoe { background: #fffbeb; border-color: #f5e3a8; }
body.dark-mode .bonus-card--amoe { background: rgba(245, 158, 11, 0.08); border-color: #b45309; }

/* --- Hidden cards (visible only in the "Hidden Sites" view) --- */
.bonus-card[data-hidden="true"] { opacity: 0.65; }
.pill--hidden { background: #f3f4f6; color: #6b7280; }
body.dark-mode .pill--hidden { background: rgba(255,255,255,0.08); color: #9ca3af; }

/* --- Value pill (replaces the old est-value text line) --- */
.pill--value { background: #eef2ff; color: #4338ca; font-size: 0.7rem; }
body.dark-mode .pill--value { background: rgba(79, 70, 229, 0.22); color: #c7d2fe; }

/* --- Personal note under the site name --- */
.bonus-note {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--text-muted, #6b7280);
    max-width: 52ch;
    overflow-wrap: anywhere;
    white-space: pre-line;
}
body.dark-mode .bonus-note { color: #9ca3af; }

/* --- Compact "How to collect" --- */
.instructions--compact {
    border-top: none;
    padding-top: 0.25rem;
    margin-top: 0;
}
.instructions--compact summary {
    font-size: 0.72rem;
    gap: 0.3rem;
    color: var(--text-muted);
    opacity: 0.85;
}
.instructions--compact summary:hover { opacity: 1; }
.instructions--compact .instructions-body { padding-top: 0.5rem; }

/* --- Modal quick-actions grid --- */
.modal-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0.25rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.modal-quick-actions .btn {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    text-align: center;
}
body.dark-mode .modal-quick-actions { border-top-color: var(--accent); }
@media (max-width: 420px) { .modal-quick-actions { grid-template-columns: 1fr; } }

/* --- Report modal --- */
.report-site-line {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: -0.75rem 0 1.25rem;
    text-align: left;
}
body.dark-mode .report-site-line { color: #9ca3af; }

/* --- Textareas match the existing form inputs --- */
.form-row textarea {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text-main);
    background-color: var(--bg-color, #fff);
    box-sizing: border-box;
    resize: vertical;
    min-height: 2.75rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-row textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15);
}
body.dark-mode .form-row textarea {
    background-color: #1f1f1f;
    border-color: var(--accent);
    color: var(--bodyTextColorWhite);
}
/* Empty-state text inside the "How to collect" accordion */
.instructions-empty {
    font-style: italic;
    opacity: 0.75;
}

/* ============================================================
   APPEND: AMOE digital entries
   ============================================================ */

.pill--amoe { background: #fdf2f8; color: #9d174d; }
body.dark-mode .pill--amoe { background: rgba(219, 39, 119, 0.18); color: #f9a8d4; }


/* Amber-accented variant of the compliance note for the AMOE caution */
.compliance-note--warning { border-left-color: #f59e0b; }
.compliance-note--warning:empty { display: none; } /* hides the empty validation summary */

/* AMOE page layout */
.amoe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.amoe-card__brand { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.amoe-card__brand h3 { margin: 0 0 0.35rem 0; }
.amoe-card__schedule { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); margin: 0 0 0.5rem 0; }
.amoe-card__terms {
    font-size: 0.82rem; font-style: italic; color: var(--text-muted);
    margin: 0 0 0.5rem 0; overflow-wrap: anywhere;
}
.amoe-card__actions { flex-wrap: wrap; }
.amoe-card__settings {
    display: flex; flex-direction: column; gap: 0.5rem;
    border-top: 1px dashed var(--border-color); padding-top: 0.85rem;
}
.amoe-check {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.9rem; font-weight: 600; color: var(--bodyTextColor); cursor: pointer;
}
.amoe-check input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--primary); cursor: pointer; }
.amoe-card__signin { border-top: 1px dashed var(--border-color); padding-top: 0.85rem; font-size: 0.85rem; }
.amoe-footnote { margin-top: 2rem; font-size: 0.82rem; }

/* Admin form */
.amoe-admin-form { max-width: 640px; margin-bottom: 2.5rem; }
.amoe-admin-form .modal-actions { justify-content: flex-end; margin-top: 1rem; }

body.dark-mode .amoe-card__settings,
body.dark-mode .amoe-card__signin { border-top-color: var(--accent); }
body.dark-mode .amoe-card__schedule,
body.dark-mode .amoe-card__terms { color: #9ca3af; }
body.dark-mode .amoe-check { color: #d1d5db; }