/* CSS Variables & Reset */
:root {
    --primary: #3b82f6;
    /* Neon Blue */
    --primary-glow: rgba(59, 130, 246, 0.5);
    --secondary: #f97316;
    /* SSDC Orange */
    --bg-dark: #0f172a;
    --bg-card: rgba(30, 41, 59, 0.7);
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border-color: rgba(255, 255, 255, 0.1);
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
    padding-bottom: 80px;
    /* Space for fixed footer */
}

/* Typography */
h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Utilities */
.hidden {
    display: none !important;
}

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

/* Glassmorphism Card */
.glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Inputs */
.input-group {
    margin-bottom: 16px;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.input-field {
    width: 100%;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    color: white;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.3s ease;
    appearance: none;
    /* Ensure standard appearance is off for selects */
    -webkit-appearance: none;
}

/* Target only selects for the arrow */
select.input-field {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 40px;
}

.input-field:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Radio Card Group */
.radio-card-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-card {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    color: var(--text-main);
}

/* Selected State Support */
/* Using :has if supported, fallback logic via JS not strictly needed if supported by modern browsers on mobile, 
   but simplistic distinct styling for checked radio itself is also good. 
   Most modern mobile browsers support :has. */
.radio-card:has(input:checked) {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 0 1px var(--primary);
}

.radio-card input {
    margin-right: 12px;
    accent-color: var(--primary);
    width: 20px;
    height: 20px;
}

/* Buttons */
.btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s active 0.1s;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 4px 15px var(--primary-glow);
}

.btn-action {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    padding: 8px 16px;
    font-size: 0.85rem;
    border-radius: 8px;
    margin-right: 8px;
    width: auto;
}

/* App Header */
header {
    padding: 20px;
    text-align: center;
}

header h1 {
    font-size: 1.5rem;
    background: linear-gradient(to right, #60a5fa, #a855f7);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Custom Language Selector */
.lang-selector-container {
    margin-top: 10px;
    display: inline-block;
}

#language-selector {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 6px 32px 6px 16px;
    /* Extra padding right for arrow */
    font-size: 0.85rem;
    font-family: var(--font-body);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;

    /* Down Arrow */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

#language-selector:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
}

/* Booking Controls Header */
.booking-controls-header {
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
}

.date-controls {
    display: flex;
    gap: 8px;
}

.glass-select {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 32px 6px 12px;
    /* Extra padding right for arrow */
    font-size: 0.9rem;
    font-family: var(--font-body);
    outline: none;
    appearance: none;
    -webkit-appearance: none;

    /* Down Arrow */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
}

.glass-select:focus {
    border-color: var(--primary);
    background-color: rgba(255, 255, 255, 0.15);
}

/* Booking Grid Structure */
.booking-container {
    width: 100%;
    overflow-x: hidden;
    /* Hide main scroll */
}

.matrix-wrapper {
    display: grid;
    grid-template-columns: 80px 1fr;
    /* Time Column | Slots Scroll Area */
    gap: 0;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.time-column {
    background: rgba(15, 23, 42, 0.9);
    z-index: 10;
    position: sticky;
    left: 0;
    border-right: 1px solid var(--border-color);
}

.time-cell {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

.time-cell.header-spacer {
    height: 50px;
    /* Match date header height */
    background: transparent;
    border-bottom: 1px solid var(--border-color);
}

.slots-grid-scroll {
    overflow-x: auto;
    display: flex;
    /* Horizontal flow */
}

/* The actual grid of checkboxes */
.day-column {
    min-width: 80px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
}

.date-header {
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.8);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 5;
}

.date-header .day {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
}

.date-header .date {
    font-size: 0.9rem;
    font-weight: 700;
}

.slot-cell {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

/* Peak Indicator - Removed */
.slot-cell.peak::after {
    display: none !important;
    content: none !important;
    width: 0;
    height: 0;
}

/* Custom Checkbox */
.slot-checkbox {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.slot-checkbox:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.slot-checkbox:checked::after {
    content: '✓';
    position: absolute;
    color: white;
    font-size: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 800;
}

/* Sticky Footer */
.action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

/* Ticket/Summary View */
.ticket-wrapper {
    background: #000;
    /* Pure black for crisp download */
    padding: 24px;
    border-radius: 0;
    /* We want sharp corners or specific look for the image generation if preferred, 
       but standard ticket look usually involves rounded corners. 
       Let's stick to a clean card look. */
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    color: white;
}

.ticket-header {
    border-bottom: 2px dashed rgba(255, 255, 255, 0.3);
    padding-bottom: 16px;
    margin-bottom: 16px;
    text-align: center;
}

.ticket-user-info {
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.ticket-user-info p {
    margin: 4px 0;
    display: flex;
    justify-content: space-between;
}

.ticket-slots-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.ticket-slot-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.ticket-label {
    color: var(--text-muted);
}

.ticket-val {
    font-weight: 600;
    color: white;
}

.disclaimer {
    margin-top: 20px;
    font-size: 0.7rem;
    color: #666;
    text-align: center;
}

/* Session Colors (Neon/Pastel for Dark Mode) */
.text-s1 {
    color: #22d3ee;
}

/* Cyan */
.text-s2 {
    color: #4ade80;
}

/* Green */
.text-s3 {
    color: #facc15;
}

/* Yellow */
.text-s4 {
    color: #fb923c;
}

/* Orange */
.text-s5 {
    color: #f472b6;
}

/* Pink */
.text-s6 {
    color: #c084fc;
}

/* Purple */
.text-s7 {
    color: #60a5fa;
}

/* Blue */

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-content {
    width: 100%;
    max-width: 400px;
    animation: modalPop 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.modal-details p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
}

.highlight-text {
    color: white;
    font-weight: 600;
}

@keyframes modalPop {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Fade In Animation */
.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Month Specific Header Colors */
/* General text color class helper */
.text-month-0 {
    color: #ef4444;
}

.text-month-1 {
    color: #f97316;
}

.text-month-2 {
    color: #facc15;
}

.text-month-3 {
    color: #4ade80;
}

.text-month-4 {
    color: #14b8a6;
}

.text-month-5 {
    color: #06b6d4;
}

.text-month-6 {
    color: #3b82f6;
}

.text-month-7 {
    color: #6366f1;
}

.text-month-8 {
    color: #a855f7;
}

.text-month-9 {
    color: #d946ef;
}

.text-month-10 {
    color: #f43f5e;
}

.text-month-11 {
    color: #94a3b8;
}

/* Header Borders + Text Color inheritance for children */
/* Jan */
.month-0 {
    border-top: 3px solid #ef4444;
}

.month-0 .date,
.month-0 .day {
    color: #ef4444 !important;
}

/* Feb */
.month-1 {
    border-top: 3px solid #f97316;
}

.month-1 .date,
.month-1 .day {
    color: #f97316 !important;
}

/* Mar */
.month-2 {
    border-top: 3px solid #facc15;
}

.month-2 .date,
.month-2 .day {
    color: #facc15 !important;
}

/* Apr */
.month-3 {
    border-top: 3px solid #4ade80;
}

.month-3 .date,
.month-3 .day {
    color: #4ade80 !important;
}

/* May */
.month-4 {
    border-top: 3px solid #14b8a6;
}

.month-4 .date,
.month-4 .day {
    color: #14b8a6 !important;
}

/* Jun */
.month-5 {
    border-top: 3px solid #06b6d4;
}

.month-5 .date,
.month-5 .day {
    color: #06b6d4 !important;
}

/* Jul */
.month-6 {
    border-top: 3px solid #3b82f6;
}

.month-6 .date,
.month-6 .day {
    color: #3b82f6 !important;
}

/* Aug */
.month-7 {
    border-top: 3px solid #6366f1;
}

.month-7 .date,
.month-7 .day {
    color: #6366f1 !important;
}

/* Sep */
.month-8 {
    border-top: 3px solid #a855f7;
}

.month-8 .date,
.month-8 .day {
    color: #a855f7 !important;
}

/* Oct */
.month-9 {
    border-top: 3px solid #d946ef;
}

.month-9 .date,
.month-9 .day {
    color: #d946ef !important;
}

/* Nov */
.month-10 {
    border-top: 3px solid #f43f5e;
}

.month-10 .date,
.month-10 .day {
    color: #f43f5e !important;
}

/* Dec */
.month-11 {
    border-top: 3px solid #94a3b8;
}

.month-11 .date,
.month-11 .day {
    color: #94a3b8 !important;
}

/* Improve Button Visibility */
.btn-action {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 500;
}

.btn-action:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Password Toggle */
.password-wrapper {
    position: relative;
    width: 100%;
}

.password-wrapper input {
    padding-right: 40px;
    /* Make room for icon */
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #94a3b8;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle:hover {
    color: #e2e8f0;
}

/* Transposed Matrix v40 */
.matrix-transposed {
    width: 100%;
    margin-top: 10px;
    overflow-x: auto;
    /* Allow header sync scroll if needed, but aim for fit */
}

.matrix-header-row {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 20;
    background: #0f172a;
    border-bottom: 2px solid #334155;
    margin-left: 90px;
    /* Offset for Date Column */
}

.header-time-cell {
    flex: 1;
    /* Distribute evenly */
    text-align: center;
    font-size: 0.7rem;
    color: #94a3b8;
    padding: 8px 2px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    white-space: pre-wrap;
    /* Allow wrapping 8:00 am */
    line-height: 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.matrix-body-rows {
    display: flex;
    flex-direction: column;
}

.date-row {
    display: flex;
    align-items: stretch;
    /* Full height cells */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.row-date-label {
    width: 90px;
    min-width: 90px;
    padding: 10px 8px;
    font-size: 0.75rem;
    color: #e2e8f0;
    font-weight: 500;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    background: #0f172a;
    /* Solid bg for sticky */
    position: sticky;
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.row-date-label .d-day {
    display: block;
    font-size: 0.85em;
    opacity: 0.6;
    margin-top: 2px;
}

.slot-cell-t {
    flex: 1;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.01);
}

.slot-cell-t:nth-child(2n) {
    background: rgba(255, 255, 255, 0.02);
}

/* v41 Updates */
.header-time-cell {
    font-size: 0.85rem;
    /* Larger */
    font-weight: 700;
}

.row-date-label {
    font-size: 0.85rem;
    /* Larger */
}

.row-date-label>div:first-child {
    font-size: 0.95rem;
    /* Main date larger */
    font-weight: bold;
}

.row-date-label .d-day {
    font-size: 0.85em;
    /* relative */
    opacity: 0.8;
}

/* Force session colors to override default header color */
.header-time-cell.text-s1 {
    color: #22d3ee !important;
}

.header-time-cell.text-s2 {
    color: #4ade80 !important;
}

.header-time-cell.text-s3 {
    color: #facc15 !important;
}

.header-time-cell.text-s4 {
    color: #fb923c !important;
}

.header-time-cell.text-s5 {
    color: #f472b6 !important;
}

.header-time-cell.text-s6 {
    color: #c084fc !important;
}

.header-time-cell.text-s7 {
    color: #60a5fa !important;
}

/* v42 Header Layout */
.app-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    height: 60px;
}

.header-left,
.header-right {
    width: 90px;
    /* Fixed width for balance */
    display: flex;
    align-items: center;
}

.header-right {
    justify-content: flex-end;
}

.header-center {
    flex: 1;
    text-align: center;
    white-space: normal;
    overflow: visible;
    padding: 0 5px;
}

.page-title {
    font-size: 1.1rem;
    margin: 0;
    color: white;
    /* Title color */
    font-weight: 700;
    line-height: 1.3;
}

#global-back-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #cbd5e1;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    width: auto;
    transition: 0.2s;
}

#global-back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Hide Lang Icon potentially to save space? Keep it for now */
.lang-selector-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* v43 Sticky Header Adjustment */
.matrix-header-row {
    top: 60px;
    /* Stick below the 60px App Header */
}

/* v44 Fixes Aligment & Sticky */
.matrix-transposed {
    overflow-x: visible !important;
    /* Allow page-level horizontal scroll */
}

.matrix-header-row {
    margin-left: 0 !important;
    /* Remove old offset */
    top: 60px;
    z-index: 50;
    width: max-content;
    /* Force wide width to match children */
    min-width: 100%;
    background: #0f172a;
}

.header-corner-cell {
    width: 90px;
    min-width: 90px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    background: #0f172a;
    position: sticky;
    left: 0;
    top: 60px;
    /* Sync with header row */
    z-index: 60;
    /* Topmost in grid */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Corner needs to stick vertically too? 
       Actually if it is child of sticky row, it sticks. 
       But 'left: 0' makes it sticky horiz. */
}

/* Ensure Alignment: Flex distribution */
.date-row {
    width: max-content;
    min-width: 100%;
}

.row-date-label {
    z-index: 40;
    /* Below Header corner */
    background: #0f172a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Match cells */
}

/* v45 Sticky Fixes */
.booking-container {
    overflow: visible !important;
}

.container {
    overflow: visible !important;
}

/* Adjust Z-Index to stay under App Header (100) but above everything else */
.matrix-header-row {
    z-index: 80;
}

.header-corner-cell {
    z-index: 90;
    /* Above date labels and time cells */
}

/* v48 Balance Banner */
.balance-banner {
    background: rgba(234, 179, 8, 0.15);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: #fcd34d;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    /* Center Vertically */
    line-height: 1.4;
}