/* Watercolor-style enhancements */
.membership-hero {
    min-height: 280px;
    border-bottom: 1px solid #e0e0e0;
}

.stat-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 140px;
}

    .stat-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 25px rgba(0,122,51,0.1) !important;
    }

.table-hover tbody tr:hover {
    background-color: rgba(0,122,51,0.05);
}

.btn-success {
    background: linear-gradient(135deg, #007a33, #009945);
    border: none;
}

.btn-outline-success {
    border-color: #007a33;
    color: #007a33;
}

    .btn-outline-success:hover {
        background: #007a33;
        color: white;
    }

.badge {
    font-size: 0.8rem;
}

/*====================================================================
  EVENTS PAGE – Search, Filter, Cards + Chess Animations
====================================================================*/

.events-section {
    background-color: var(--surface-color);
}

.search-group .form-control {
    border-radius: 50px 0 0 50px;
    padding-left: 2.5rem;
    background-color: var(--background-color);
    color: var(--default-color);
    border: 1px solid var(--accent-color);
}

.search-group .input-group-text {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: transparent;
    border: none;
    color: var(--accent-color);
}

.search-group button {
    border-radius: 0 50px 50px 0;
}

.filter-select,
.btn-search {
    border-radius: 50px;
    font-weight: 500;
}

.btn-accent {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    border: none;
}

    .btn-accent:hover {
        background-color: color-mix(in srgb, var(--accent-color), #000 15%);
    }

/*.event-card {
    background-color: var(--background-color);
    transition: all 0.3s ease;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

    .event-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        border-color: var(--accent-color);
    }*/

.event-poster {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 95%), color-mix(in srgb, var(--background-color), #fff 10%) );
}

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

/* Chess Animations (from previous) */
.chess-slide-in {
    animation: chess-slide-in 0.8s ease-out forwards;
}

.chess-king {
    animation: crown-pulse 3s ease-in-out infinite;
}


/*====================================================================
  CHESS-THEMED ANIMATIONS – Pure CSS
====================================================================*/

/* 1. Chess Piece Bounce (for stats, cards, icons) */
@keyframes chess-bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

.chess-bounce {
    animation: chess-bounce 2s ease-in-out infinite;
}

/* 2. Chess Piece Slide In (from board edge) */
@keyframes chess-slide-in {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }

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

.chess-slide-in {
    animation: chess-slide-in 0.8s ease-out forwards;
}

/* 3. King Crown Pulse (for titles, headings) */
@keyframes crown-pulse {
    0%, 100% {
        text-shadow: 0 0 8px var(--accent-color);
    }

    50% {
        text-shadow: 0 0 20px var(--accent-color), 0 0 30px color-mix(in srgb, var(--accent-color), #fff 50%);
    }
}

.chess-king {
    animation: crown-pulse 3s ease-in-out infinite;
}

/* 4. Pawn Move (staggered upward march) */
@keyframes pawn-march {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-16px);
    }

    100% {
        transform: translateY(0);
    }
}

.chess-pawn {
    display: inline-block;
    animation: pawn-march 1.5s ease-in-out infinite;
}

    .chess-pawn:nth-child(2) {
        animation-delay: 0.2s;
    }

    .chess-pawn:nth-child(3) {
        animation-delay: 0.4s;
    }

    .chess-pawn:nth-child(4) {
        animation-delay: 0.6s;
    }

/* 5. Checkmate Flash (for CTA buttons) */
@keyframes checkmate-flash {
    0%, 100% {
        background-color: var(--accent-color);
    }

    50% {
        background-color: #ff4444;
        box-shadow: 0 0 20px #ff4444;
    }
}

.btn-checkmate {
    animation: checkmate-flash 2s ease-in-out infinite;
}

/* 6. Board Fade-In (for sections) */
@keyframes board-fade {
    from {
        opacity: 0;
        filter: blur(5px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

.chess-board-fade {
    animation: board-fade 1s ease-out forwards;
}

/* 7. Knight Leap (for images, avatars) */
@keyframes knight-leap {
    0% {
        transform: translateY(0) rotate(0);
    }

    35% {
        transform: translateY(-30px) rotate(-15deg);
    }

    70% {
        transform: translateY(-10px) rotate(10deg);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

/*.chess-knight {
    animation: knight-leap 2.5s ease-in-out infinite;
}
*/
/*====================================================================
  REGISTRATION SECTION – Beautiful, Responsive, Dark-Mode Safe
====================================================================*/

/* Overall Section */
.registration-section {
    background: linear-gradient(135deg, var(--surface-color) 0%, color-mix(in srgb, var(--background-color), var(--accent-color) 10%) 100%);
    position: relative;
    overflow: hidden;
}

/* Form Card */
.reg-form-card {
    background-color: var(--background-color);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

    .reg-form-card:hover {
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }

    .reg-form-card .card-header {
        background-color: var(--accent-color);
        color: var(--contrast-color)!important;
        border-radius: 1rem 1rem 0 0;
        padding: 1.5rem;
    }

/* Sidebar Card (Fees + Dates) */
.reg-sidebar-card {
    background-color: var(--background-color);
    border-left: 6px solid var(--accent-color);
    border-radius: 1rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    transition: transform 0.3s ease;
}

    .reg-sidebar-card:hover {
        transform: translateY(-5px);
    }

.fees-table th {
    background-color: var(--accent-color);
    color: var(--contrast-color);
}

.fees-table td, .fees-table th {
    text-align: center;
    vertical-align: middle;
}

.reg-sidebar-card ul li {
    font-size: 0.95rem;
    color: var(--default-color);
    margin-bottom: 0.75rem;
}

/* Poster Image */
.reg-poster {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    transition: transform 0.4s ease;
}

    .reg-poster:hover {
        transform: scale(1.03);
    }

    .reg-poster img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

/* Event Description */
.reg-description {
    background-color: var(--background-color);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    color: var(--default-color);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Venue Map Card */
.reg-map-card {
    height: 350px;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.3s ease;
}

    .reg-map-card:hover {
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }

.google-map {
    height: 100%;
    border: none;
}

/* Responsive Tweaks */
@media (max-width: 992px) {
    .reg-form-card, .reg-sidebar-card {
        margin-bottom: 2rem;
    }

    .reg-map-card {
        height: 250px;
    }
}

@media (max-width: 576px) {
    .fees-table {
        font-size: 0.85rem;
    }
}
/*====================================================================
  ENTRY FEES TABLE – Chess-Themed, Responsive, Dark-Mode Safe
====================================================================*/

.fees-table {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    background-color: var(--background-color);
    transition: all 0.3s ease;
}

    .fees-table thead th {
        background-color: var(--accent-color);
        color: var(--contrast-color);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.9rem;
        letter-spacing: 0.5px;
        padding: 1rem 0.75rem;
        border: none;
    }

    .fees-table tbody td {
        padding: 1rem 0.75rem;
        vertical-align: middle;
        font-size: 1rem;
        color: var(--default-color);
        border-color: color-mix(in srgb, var(--default-color), transparent 85%);
    }

.fee-row:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
    transform: translateX(4px);
    transition: all 0.2s ease;
}

/* Highlight Fees */
.fee-row td:nth-child(3) { /* Member Fee */
    color: #28a745 !important; /* Green */
    font-weight: 600;
}

.fee-row td:nth-child(4) { /* Non-Member Fee */
    color: #ffc107 !important; /* Gold */
    font-weight: 600;
}

/* Chess Pulse Animation on Table */
@keyframes chess-pulse {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    }

    50% {
        box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
    }
}

.fees-table.chess-pulse {
    animation: chess-pulse 3s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 768px) {
    .fees-table {
        font-size: 0.85rem;
    }

        .fees-table th,
        .fees-table td {
            padding: 0.75rem 0.5rem;
        }

    .fee-row:hover {
        transform: none;
    }
}

/*====================================================================
  DARK MODE – Force Table Backgrounds
====================================================================*/

body.dark-theme .fees-table {
    background-color: var(--surface-color) !important; /* Dark card bg */
    color: var(--default-color) !important; /* Light text */
}

    body.dark-theme .fees-table th {
        background-color: var(--accent-color) !important;
        color: var(--contrast-color) !important;
    }

    body.dark-theme .fees-table td
     {
        background-color: transparent !important;
        border-color: color-mix(in srgb, var(--default-color), transparent 80%) !important;
    }

/* Optional: Hover in dark mode */
body.dark-theme .fee-row:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%) !important;
}

/*====================================================================
  PARTICIPANTS INFO TABLE – Dark-Mode Safe, Responsive, Chess-Themed
====================================================================*/

.participants-table {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    background-color: var(--background-color);
    transition: all 0.3s ease;
}

    .participants-table thead th {
        background-color: var(--accent-color);
        color: var(--contrast-color);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 0.5px;
        padding: 1rem 0.75rem;
        border: none;
        text-align: center;
    }

    .participants-table tbody td {
        padding: 0.9rem 0.75rem;
        vertical-align: middle;
        font-size: 0.95rem;
        color: var(--default-color);
        border-color: color-mix(in srgb, var(--default-color), transparent 85%);
    }

/* Row Hover */
.participant-row:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
    transform: translateX(3px);
    transition: all 0.2s ease;
}

/* Delete Button Pulse */
@keyframes chess-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
    }
}

.delete-btn.chess-pulse {
    animation: chess-pulse 2s infinite;
}

/* Empty State */
.participants-table .text-muted {
    font-style: italic;
}

/* Responsive */
@media (max-width: 992px) {
    .participants-table {
        font-size: 0.85rem;
    }

        .participants-table th,
        .participants-table td {
            padding: 0.7rem 0.5rem;
        }

    .participant-row:hover {
        transform: none;
    }
}

/* DARK MODE FIX – Force Background */
body.dark-theme .participants-table {
    background-color: var(--surface-color) !important;
    color: var(--default-color) !important;
}

    body.dark-theme .participants-table th {
        background-color: var(--accent-color) !important;
        color: var(--contrast-color) !important;
    }

    body.dark-theme .participants-table td {
        background-color: transparent !important;
        border-color: color-mix(in srgb, var(--default-color), transparent 75%) !important;
    }

body.dark-theme .participant-row:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 85%) !important;
}
/* ──────────────────────────────
   DARK‑MODE TABLE OVERRIDES
   ────────────────────────────── */
body.dark-theme .table {
    --bs-table-bg: var(--surface-color); /* card‑like bg */
    --bs-table-color: var(--default-color); /* light text */
    --bs-table-striped-bg: rgba(255,255,255,.04); /* subtle stripe */
    --bs-table-hover-bg: rgba(255,255,255,.08); /* hover */
    background-color: var(--bs-table-bg);
    color: var(--bs-table-color);
}

    /* Header */
    body.dark-theme .table th {
        background-color: var(--accent-color);
        color: var(--contrast-color);
    }

    /* Cells – keep borders light */
    body.dark-theme .table td,
    body.dark-theme .table th {
        border-color: color-mix(in srgb, var(--default-color), transparent 80%);
    }

/* Striped rows – force light text */
body.dark-theme .table-striped > tbody > tr:nth-of-type(odd) > td,
body.dark-theme .table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: var(--bs-table-striped-bg);
    color: var(--bs-table-color); /* <-- this is the fix */
}

/* Hover rows (optional but nice) */
body.dark-theme .table-hover > tbody > tr:hover > * {
    background-color: var(--bs-table-hover-bg);
    color: var(--bs-table-color);
}
.terms-content {
    max-width: 860px;
}

    .terms-content h1, .terms-content h2 {
        color: var(--accent-color);
    }

    .terms-content h2 {
        margin-top: 3rem;
        border-bottom: 2px solid var(--accent-color);
        padding-bottom: .5rem;
        font-size: 1.5rem;
    }

.contact-info a {
    color: var(--accent-color);
    
    text-decoration: none;
}

    .contact-info a:hover {
        text-decoration: underline;
    }