/* ---------------------------------------------
   BL101 SIGNUP - STYLESHEET
   Fonts: Good Pro + Good Headline Pro
   Colors: #BF272D (red) / #000000 (black) / #FFFFFF
   Breakpoints:
     xs:  < 360px   (small phones)
     sm:  < 480px   (phones)
     md:  < 768px   (tablet portrait)
     lg:  < 1024px  (tablet landscape / small desktop)
     xl:  >= 1024px  (desktop) - base styles
--------------------------------------------- */

/* -- Fonts ------------------------------------- */
@font-face {
    font-family: 'Good Headline Pro';
    src: url('fonts/goodheadlinepro-compultra.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: block;
}

/* Weight 700 falls back to the same ultra file - no separate Bold file available */
@font-face {
    font-family: 'Good Headline Pro';
    src: url('fonts/goodheadlinepro-compultra.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Good Pro';
    src: url('fonts/FFGoodPro-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Good Pro';
    src: url('fonts/FFGoodPro-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Good Pro';
    src: url('fonts/FFGoodPro-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

/* -- Variables --------------------------------- */
:root {
    --red:          #BF272D;
    --red-dark:     #9e1f24;
    --black:        #000000;
    --white:        #FFFFFF;
    --gray-50:      #F7F7F7;
    --gray-100:     #F0F0F0;
    --gray-200:     #E0E0E0;
    --gray-400:     #999999;
    --gray-600:     #555555;
    --text:         #1A1A1A;

    --font-display: 'Good Headline Pro', 'Arial Black', sans-serif;
    --font-body:    'Good Pro', 'Arial', sans-serif;

    --radius:       0;
    --shadow:       0 2px 16px rgba(0,0,0,0.10);
    --transition:   0.18s ease;

    /* Spacing scale */
    --space-xs:  8px;
    --space-sm:  16px;
    --space-md:  24px;
    --space-lg:  40px;
    --space-xl:  64px;
}

/* -- Reset ------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    /* Prevent font size inflation on mobile */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--text);
    background: var(--white);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* -- Header ------------------------------------ */
.site-header {
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-bar {
    background: var(--red);
    height: 4px;
    width: 100%;
}

.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.header-logo img {
    height: 40px;
    display: block;
}

.header-event-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gray-600);
    text-align: right;
    /* Truncate if too long */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 55%;
}

/* -- Main -------------------------------------- */
main {
    flex: 1;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 48px 24px 64px;
}

/* -- Page heading ------------------------------ */
.page-heading {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.75rem, 5vw, 3.25rem);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--black);
    margin-bottom: 12px;
}

.page-heading span { color: var(--red); }

.page-subheading {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--gray-600);
    margin-bottom: 40px;
    line-height: 1.55;
    max-width: 500px;
}

/* -- Alert ------------------------------------- */
.alert {
    padding: 14px 18px;
    border-left: 4px solid var(--red);
    background: #fff5f5;
    color: var(--red-dark);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 28px;
    /* Wrap long error messages */
    word-break: break-word;
}

.alert-success {
    border-color: #2A7D2E;
    background: #f2faf2;
    color: #1e5e21;
}

/* -- Form -------------------------------------- */
.booking-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--black);
}

.form-input {
    font-family: var(--font-body);
    font-size: 1rem;
    /* Larger tap target on mobile */
    padding: 14px 16px;
    border: 2px solid var(--gray-200);
    background: var(--white);
    color: var(--text);
    outline: none;
    transition: border-color var(--transition);
    width: 100%;
    border-radius: var(--radius);
    -webkit-appearance: none;
    appearance: none;
    /* Prevent zoom on focus in iOS (font-size >= 16px) */
    font-size: max(16px, 1rem);
}

.form-input:focus { border-color: var(--black); }

.form-hint {
    font-size: 0.78rem;
    color: var(--gray-400);
    line-height: 1.45;
}

/* -- Slot grid --------------------------------- */
.slots-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--black);
    margin-bottom: 12px;
    display: block;
}

.slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.slot-option { display: none; }

.slot-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
    border: 2px solid var(--gray-200);
    background: var(--white);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
    user-select: none;
    line-height: 1.3;
    /* Ensure minimum tap target */
    min-height: 52px;
}

.slot-label:hover { border-color: var(--black); }

.slot-option:checked + .slot-label {
    border-color: var(--red);
    background: var(--red);
    color: var(--white);
    font-weight: 700;
}

.slot-label.unavailable {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
    text-decoration: line-through;
    pointer-events: none;
}

.slots-empty {
    font-size: 0.95rem;
    color: var(--gray-600);
    padding: 20px 0;
}

/* -- Buttons ----------------------------------- */
.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 18px 36px;
    border: none;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    text-decoration: none;
    text-align: center;
    border-radius: var(--radius);
    -webkit-appearance: none;
    appearance: none;
    min-height: 56px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.btn-primary { background: var(--red); color: var(--white); }
.btn-primary:hover { background: var(--red-dark); }
.btn-primary:active { transform: scale(0.98); }

.btn-outline {
    background: transparent;
    color: var(--black);
    border: 2px solid var(--black);
}
.btn-outline:hover { background: var(--black); color: var(--white); }

.btn-full { width: 100%; }

.btn-sm {
    padding: 10px 20px;
    font-size: 0.75rem;
    min-height: 40px;
}

/* -- Success page ------------------------------ */
.success-icon {
    width: 56px;
    height: 56px;
    background: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}

.success-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
    stroke-width: 3;
    fill: none;
}

.success-details {
    background: var(--gray-50);
    border-left: 4px solid var(--red);
    padding: 20px 24px;
    margin: 28px 0 36px;
}

.success-details p {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 4px;
}

.success-details strong {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--black);
    display: block;
}

/* -- Footer ------------------------------------ */
.site-footer {
    background: var(--black);
    padding: 20px 24px;
    text-align: center;
}

.site-footer p {
    font-size: 0.75rem;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ===============================================
   ADMIN
=============================================== */

/* -- Admin login ------------------------------- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black);
    padding: 24px;
}

.login-card {
    background: var(--white);
    padding: 48px 40px;
    width: 100%;
    max-width: 360px;
}

.login-logo {
    margin-bottom: 32px;
    text-align: center;
}

.login-logo img { height: 36px; }

.login-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 24px;
    text-align: center;
}

/* -- Admin layout ------------------------------ */
.admin-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px 64px;
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 16px;
}

.admin-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* -- Stats ------------------------------------- */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}

.stat-card {
    background: var(--gray-50);
    border-top: 3px solid var(--red);
    padding: 18px 20px;
}

.stat-value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 900;
    color: var(--black);
    line-height: 1;
}

.stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-400);
    margin-top: 6px;
}

/* -- Desktop table ----------------------------- */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

thead {
    background: var(--black);
    color: var(--white);
}

thead th {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 12px 14px;
    text-align: left;
    white-space: nowrap;
}

tbody tr {
    border-bottom: 1px solid var(--gray-200);
    transition: background var(--transition);
}

tbody tr:hover { background: var(--gray-50); }

tbody td {
    padding: 12px 14px;
    color: var(--text);
    white-space: nowrap;
}

/* -- Card view (mobile table replacement) ------ */
/*
  On mobile the <table> is hidden and .booking-cards
  (injected by JS or rendered server-side) is shown.
  We use a CSS-only approach: data-label attributes
  + display:block to reformat rows as cards.
*/
.booking-cards { display: none; }

.booking-card {
    border: 1px solid var(--gray-200);
    border-top: 3px solid var(--red);
    margin-bottom: 16px;
    background: var(--white);
}

.booking-card-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--gray-100);
}

.booking-card-row:last-child { border-bottom: none; }

.booking-card-key {
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-400);
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 2px;
}

.booking-card-val {
    font-size: 0.88rem;
    color: var(--text);
    text-align: right;
    word-break: break-word;
}

.booking-card-val strong {
    font-weight: 700;
    color: var(--black);
}

/* -- Badge ------------------------------------- */
.badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 8px;
}

.badge-sent    { background: #e6f4e6; color: #2A7D2E; }
.badge-pending { background: var(--gray-100); color: var(--gray-600); }

/* ===============================================
   RESPONSIVE - lg: tablet landscape (< 1024px)
=============================================== */
@media (max-width: 1024px) {
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===============================================
   RESPONSIVE - md: tablet portrait (< 768px)
=============================================== */
@media (max-width: 768px) {

    /* Header */
    .header-inner { padding: 14px 20px; }
    .header-logo img { height: 34px; }
    .header-event-name { font-size: 0.68rem; }

    /* Main content */
    main { padding: 36px 20px 56px; }

    /* Subheading */
    .page-subheading { margin-bottom: 28px; }

    /* Slot grid: 2 columns on tablet */
    .slots-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Admin */
    .admin-wrap { padding: 28px 20px 48px; }

    .admin-title { font-size: 1.3rem; }

    /* Stats: 2x2 */
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Table: hide on tablet, show cards */
    .table-wrap { display: none; }
    .booking-cards { display: block; }

    /* Login */
    .login-card { padding: 40px 32px; }
}

/* ===============================================
   RESPONSIVE - sm: phones (< 480px)
=============================================== */
@media (max-width: 480px) {

    /* Header */
    .header-inner { padding: 12px 16px; }
    .header-logo img { height: 30px; }
    /* Hide event name on small phones to save space */
    .header-event-name { display: none; }

    /* Main */
    main { padding: 28px 16px 48px; }

    /* Heading */
    .page-subheading {
        font-size: 0.95rem;
        margin-bottom: 24px;
    }

    /* Slot grid: 2 columns */
    .slots-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .slot-label {
        font-size: 0.82rem;
        padding: 12px 8px;
        min-height: 56px;
    }

    /* Buttons */
    .btn { padding: 16px 24px; }

    /* Success */
    .success-details { padding: 16px 18px; }

    /* Admin */
    .admin-wrap { padding: 20px 16px 40px; }

    .admin-header { margin-bottom: 24px; }

    .admin-title { font-size: 1.15rem; }

    /* Stats: 2x2, compact */
    .stats-row { gap: 10px; }

    .stat-card { padding: 14px 16px; }

    .stat-value { font-size: 1.6rem; }

    .stat-label { font-size: 0.65rem; }

    /* Admin actions: full width */
    .admin-actions { width: 100%; }
    .admin-actions .btn { flex: 1; text-align: center; }

    /* Login */
    .login-card { padding: 32px 20px; }

    /* Footer */
    .site-footer { padding: 16px; }
    .site-footer p { font-size: 0.68rem; }
}

/* ===============================================
   RESPONSIVE - xs: very small phones (< 360px)
=============================================== */
@media (max-width: 360px) {

    /* Slot grid: single column so labels never overflow */
    .slots-grid { grid-template-columns: 1fr; }

    /* Stats: stacked */
    .stats-row { grid-template-columns: 1fr 1fr; }

    /* Heading shrinks further */
    .page-heading { font-size: 1.6rem; }

    /* Booking card values wrap better */
    .booking-card-val { font-size: 0.82rem; }
}