/* ==========================================================================
   Dashboard Layout
   ========================================================================== */

.r-dashboard-shell {
    padding: var(--wa-space-m);
}

.r-dashboard-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* ==========================================================================
   Quiz Indicator
   ========================================================================== */

.r-quiz-indicator {
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--wa-space-m);
    margin: 0 auto var(--wa-space-xl) auto;
}

.r-quiz-indicator-title {
    color: var(--wa-color-blue-20);
    margin: 0;
    font-size: clamp(var(--wa-font-size-l), 3vw, var(--wa-font-size-2xl));
    line-height: var(--wa-line-height-condensed);
    text-transform: uppercase;
}

.r-quiz-indicator-icon {
    width: clamp(22px, 6vw, 32px);
    height: auto;
}

/* ==========================================================================
   Quiz Grid
   ========================================================================== */

.r-quiz-card-grid {
    --min-column-size: 280px;
}

/* ==========================================================================
   Quiz Cards
   ========================================================================== */

wa-card.r-quiz-card {
    --wa-card-padding: var(--wa-space-xl);
    --wa-card-border-radius: var(--wa-border-radius-m);
    --class-color: var(--wa-color-brand-60);
    background: linear-gradient(145deg, #ffffff, #f7f9fc);
    box-shadow: 0 10px 30px rgba(41, 58, 86, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    text-align: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    border: 1px solid var(--wa-color-blue-80);
    color: var(--wa-color-blue-20);
}

wa-card.r-quiz-card.r-quiz-card--v0 { --class-color: var(--wa-color-brand-60); }
wa-card.r-quiz-card.r-quiz-card--v1 { --class-color: var(--wa-color-success-60); }
wa-card.r-quiz-card.r-quiz-card--v2 { --class-color: var(--wa-color-warning-60); }
wa-card.r-quiz-card.r-quiz-card--v3 { --class-color: var(--wa-color-danger-60); }

wa-card.r-quiz-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 22px 45px rgba(41, 58, 86, 0.15);
    border-color: rgba(118, 152, 255, 0.3);
}

wa-card.r-quiz-card.r-quiz-card--disabled {
    background: #f8f9fa;
    box-shadow: none;
    transform: none;
    border-color: transparent;
}

wa-card.r-quiz-card.r-quiz-card--disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

/* ==========================================================================
   Card Content
   ========================================================================== */

wa-card.r-quiz-card [slot="header"] {
    display: none;
}

wa-card.r-quiz-card .r-quiz-card-body {
    grid-row: 1;
}

wa-card.r-quiz-card .r-quiz-card-body .r-quiz-card-badge {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--wa-font-size-m);
}


@media (max-width: 1000px) {
    wa-card.r-quiz-card .r-quiz-card-body .r-quiz-card-badge {
        font-size: var(--wa-font-size-l);
    }
}

wa-card.r-quiz-card .r-card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--wa-space-l) 0;
    gap: var(--wa-space-m);
}

wa-card.r-quiz-card .r-card-content h5 {
    font-size: var(--wa-font-size-xl);
    font-weight: var(--wa-font-weight-bold);
    color: var(--wa-color-blue-20);
    margin: 0;
}

wa-card.r-quiz-card.r-quiz-card--disabled h5 {
    color: #6c757d;
}

/* ==========================================================================
   Card Footer & Button
   ========================================================================== */

wa-card.r-quiz-card [slot="footer"] {
    padding-top: var(--wa-space-l);
    grid-row: 2;
    border-top: none;
    box-shadow: none;
}

wa-card.r-quiz-card wa-button {
    width: 100%;
    --wa-button-font-size: var(--wa-font-size-m);
    --wa-button-font-weight: var(--wa-font-weight-semibold);
    --wa-button-border-radius: var(--wa-border-radius-m);
    transition: background-color 0.2s ease-out;
}

wa-card.r-quiz-card wa-button[variant="brand"][appearance="filled-outlined"]:hover::part(base) {
    background-color: var(--wa-color-blue-60);
    border-color: var(--wa-color-blue-60);
    color: var(--wa-color-surface-default);
}


wa-card.r-quiz-card wa-button span::after {
    content: ' →';
    transition: transform 0.2s ease-out;
    display: inline-block;
    opacity: 0;
    transform: translateX(-5px);
}

wa-card.r-quiz-card wa-button:hover span::after {
    opacity: 1;
    transform: translateX(5px);
}

/* ==========================================================================
   Icon Circle
   ========================================================================== */

.r-icon-circle {
    --r-quiz-icon-color: color-mix(in oklab, var(--class-color), black 35%);
    width: 4rem;
    height: 4rem;
    border-radius: var(--wa-border-radius-pill);
    display: grid;
    place-items: center;
    margin-inline: auto;
    margin-bottom: var(--wa-space-s);
    flex-shrink: 0;
    background: color-mix(in oklab, var(--class-color), var(--wa-color-surface-default) 82%);
}

wa-card.r-quiz-card.r-quiz-card--disabled .r-icon-circle {
    background: color-mix(in oklab, var(--class-color), var(--wa-color-surface-default) 92%);
    opacity: 0.75;
    transform: none;
}

.r-quiz-icon-image {
    width: 2.25rem;
    height: 2.25rem;
    background-color: var(--r-quiz-icon-color);
    -webkit-mask-image: var(--r-quiz-icon-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: var(--r-quiz-icon-url);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.r-quiz-icon-image--available-quiz-icon { --r-quiz-icon-url: url('/quiz-icons/available-quiz-icon-34f6e73a135e39aee07823d17dddac96.svg'); }
.r-quiz-icon-image--boat { --r-quiz-icon-url: url('/quiz-icons/boat-02eb1e31616033b91afbe53eee08b279.svg'); }
.r-quiz-icon-image--bus { --r-quiz-icon-url: url('/quiz-icons/bus-9dda9b4d9c76378a63018ef99f2371f9.svg'); }
.r-quiz-icon-image--car { --r-quiz-icon-url: url('/quiz-icons/car-a120a33b837ac723a83cfa4ea3c51deb.svg'); }
.r-quiz-icon-image--hunter { --r-quiz-icon-url: url('/quiz-icons/hunter-2c43eebbee2a69bec1ffdd470bdcb6a7.svg'); }
.r-quiz-icon-image--lgv { --r-quiz-icon-url: url('/quiz-icons/lgv-14c80d8bcf99a69b9243d23537168d6d.svg'); }
.r-quiz-icon-image--magnifying-glass { --r-quiz-icon-url: url('/quiz-icons/magnifying-glass-9bf9bf3a98c6732a47769f613d620a2b.svg'); }
.r-quiz-icon-image--moped { --r-quiz-icon-url: url('/quiz-icons/moped-f350004cc424e8016b43cf7d5b03f429.svg'); }
.r-quiz-icon-image--motorcycle { --r-quiz-icon-url: url('/quiz-icons/motorcycle-b21d91b81a040991a4f1f52d981a279f.svg'); }
.r-quiz-icon-image--pcv { --r-quiz-icon-url: url('/quiz-icons/pcv-bcb916145406d3bdb2c382189787b1bf.svg'); }
.r-quiz-icon-image--snowmobile { --r-quiz-icon-url: url('/quiz-icons/snowmobile-7ac4f77854cdb150ebfbcf11af3b724e.svg'); }
.r-quiz-icon-image--taxi { --r-quiz-icon-url: url('/quiz-icons/taxi-bc1a836d933b2fb6740c64c7a5e269a6.svg'); }
.r-quiz-icon-image--tractor { --r-quiz-icon-url: url('/quiz-icons/tractor-9ae28cae6dc08714518b20a8d66c220d.svg'); }
.r-quiz-icon-image--truck { --r-quiz-icon-url: url('/quiz-icons/truck-a8bffc29447eb3b28e2c20a46069d007.svg'); }
.r-quiz-icon-image--unavailable-quiz-icon { --r-quiz-icon-url: url('/quiz-icons/unavailable-quiz-icon-dd5ffcf950d1ed99e767467544a80f8d.svg'); }
.r-quiz-icon-image--yskfg { --r-quiz-icon-url: url('/quiz-icons/yskfg-4483a04d9b16436fbb96ea02ccdd1304.svg'); }
.r-quiz-icon-image--yskfp { --r-quiz-icon-url: url('/quiz-icons/yskfp-bcb916145406d3bdb2c382189787b1bf.svg'); }
.r-quiz-icon-image--yskug { --r-quiz-icon-url: url('/quiz-icons/yskug-a5835ced374e235f7cd4d57344a650d0.svg'); }
.r-quiz-icon-image--yskup { --r-quiz-icon-url: url('/quiz-icons/yskup-14c80d8bcf99a69b9243d23537168d6d.svg'); }