:root {
    --ssr-teal: #57b9c4;
    --ssr-dark: #0a0a0a;
    --ssr-gray: #1a1a1a;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--ssr-dark);
    color: white;
    scroll-behavior: smooth;
}

.font-racing { font-family: 'Archivo Black', sans-serif; }

.ssr-teal { color: var(--ssr-teal); }
.bg-ssr-teal { background-color: var(--ssr-teal); }
.border-ssr-teal { border-color: var(--ssr-teal); }

/* Skewed elements for racing feel */
.skew-box {
    transform: skewX(-12deg);
}
.unskew {
    transform: skewX(12deg);
}

.hero-overlay {
    background: linear-gradient(0deg, var(--ssr-dark) 0%, rgba(10,10,10,0.6) 50%, rgba(10,10,10,0.2) 100%);
}

.checkered-bg {
    background-image:
            linear-gradient(45deg, #111 25%, transparent 25%),
            linear-gradient(-45deg, #111 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, #111 75%),
            linear-gradient(-45deg, transparent 75%, #111 75%);
    background-size: 40px 40px;
    background-position: 0 0, 0 20px, 20px 20px, 20px 0;
}

.glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-speed {
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}
.btn-speed:hover {
    box-shadow: 0 0 20px var(--ssr-teal);
    transform: translateY(-2px);
}
#primary-logo {
    position: relative;
    max-height: 105px;
    margin-bottom: -45px;
}
#footer-logo{
    position: relative;
    max-height: 75px;
}

.event-date-chip.is-selected {
    background: rgba(87, 185, 196, 0.14);
    border-color: #57b9c4;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(87, 185, 196, 0.35);
}

/* Container sizing and polish */
#map-container {
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}

/* Default Spot State */
.pit-spot-ui {
    fill: rgba(87, 185, 196, 0.15);
    stroke: #57b9c4;
    stroke-width: 1.5;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Hover State */
.pit-spot-ui:not(.taken):not(.too-small):hover {
    fill: rgba(87, 185, 196, 0.5);
    stroke-width: 2;
}

/* Selected State */
.pit-spot-ui.selected {
    fill: #57b9c4 !important;
    stroke: #ffffff;
    stroke-width: 3;
    filter: drop-shadow(0 0 5px rgba(87, 185, 196, 0.8));
}

/* Taken/Reserved State */
.pit-spot-ui.taken {
    fill: rgba(239, 68, 68, 0.25);
    stroke: #ef4444;
    cursor: not-allowed;
}
/* Taken/Reserved State */
.pit-spot-ui.too-small,.too-small {
    fill: rgba(119, 119, 119, 0.25);
    stroke: rgba(145, 128, 2, 0.89);
    cursor: not-allowed;
}

/* Auto-generated Labels */
.spot-label {
    font-size: 11px;
    fill: rgba(255, 255, 255, 0.9);
    pointer-events: none;
    text-anchor: middle;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    text-transform: uppercase;
}

.hidden-modal{
    display: none;
}


/* Modal For Registration */
/* ============================================================================
   MODAL OVERLAY & CONTENT (Updated for Dark Theme)
   ============================================================================ */

#modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* Darker overlay */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

#modal-content {
    background: #111; /* Racing Dark */
    color: #fff;
    width: 95%;
    max-width: 500px; /* Constrained for sign-up */
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 20px;
    border: 1px solid rgba(87, 185, 196, 0.2);
    position: relative;
    padding: 0; /* Remove default padding for internal layout control */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 20px rgba(87, 185, 196, 0.1);
}

#modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 32px;
    line-height: 1;
    color: #555;
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s;
}

#modal-close:hover {
    color: var(--ssr-teal);
}

#image-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.95);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

#image-lightbox img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
    cursor: default;
}

#lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 38px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    z-index: 10001;
    transition: color 0.2s;
    user-select: none;
}

#lightbox-close:hover {
    color: #fff;
}

/* Signup Specific UI Polishing */
.ssr-modal-inner {
    padding: 40px;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.benefit-icon {
    background: rgba(255,255,255,0.05);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 20px;
    flex-shrink: 0;
}

.benefit-text strong {
    color: #fff;
    font-size: 15px;
    display: block;
}

.benefit-text span {
    color: #888;
    font-size: 13px;
    line-height: 1.4;
    display: block;
}

.ssr-field-group input,
#signup_code {
    background: #000;
    border: 1px solid #333;
    padding: 16px;
    border-radius: 12px;
    color: #fff;
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
}

.ssr-field-group input:focus,
#signup_code:focus {
    border-color: var(--ssr-teal);
}

/* Verification Code specific styling */
.reg-modal-text {
    background: #000;
    border: 1px solid #333;
    padding: 16px;
    border-radius: 12px;
    color: #fff;
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    font-size: 14px;
    margin-bottom: 12px;
}

.reg-modal-text:focus {
    border-color: var(--ssr-teal);
}

/* Code input gets extra letter-spacing treatment */
#signup_code.reg-modal-text {
    text-align: center;
    letter-spacing: 6px;
    font-weight: 900;
    font-size: 20px;
}

/* Finish Registration Button Style */
input[type="button"]#finish_registration_btn,
.ssr-finish-btn {
    width: 100%;
    background-color: var(--ssr-teal);
    color: #000;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

input[type="button"]#finish_registration_btn:hover {
    background-color: #fff;
    transform: scale(1.02);
}

input[type="button"]#finish_registration_btn:active {
    transform: scale(0.98);
}


 /*********************************\
/********* ACCOUNT SETTINGS ********\
\***********************************/
/* Tab Buttons */
.tab-btn {
    padding-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 2px solid transparent;
    color: #71717a; /* zinc-500 */
    transition: all 0.3s ease;
    white-space: nowrap;
}

.tab-btn.active {
    color: #2dd4bf; /* ssr-teal */
    border-color: #2dd4bf;
}

/* Tab Panels */
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}

/* Status Pills */
.status-pill {
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-pill.active {
    background: rgba(45, 212, 191, 0.1);
    color: #2dd4bf;
    border: 1px solid rgba(45, 212, 191, 0.3);
}

.status-pill.redeemed {
    background: rgba(255, 255, 255, 0.05);
    color: #71717a;
}

/* Form Styling */
.label-sm {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #71717a;
    margin-bottom: 0.5rem;
}

.input-field {
    width: 100%;
    background: #18181b; /* zinc-900 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    color: white;
    transition: border 0.3s;
}

.input-field:focus {
    outline: none;
    border-color: #2dd4bf;
}

/* Utility */
.hidden { display: none; }