/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* BODY */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #020b1f;
    color: white;
}

/* NAVBAR */
.navbar {
    width: 100%;
    height: 85px;
    padding: 0 60px;
    background: rgba(10,10,20,0.88);
    backdrop-filter: blur(14px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

.navbar h1 {
    font-weight: 600;
}

.navbar a {
    color: white;
    margin-left: 25px;
    text-decoration: none;
    opacity: 0.8;
}

/* HERO */
.hero {
    min-height: calc(100vh - 85px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    text-align: center;
}
/* TITLE */
.hero h1 {
    font-size: 52px;
    font-weight: 700;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 20px;
}

/* SUBTEXT */
.hero p {
    margin-top: 10px;
    opacity: 0.6;
}

/* BUTTON */
.btn {
    margin-top: 25px;
    padding: 14px 30px;
    border: none;
    background: linear-gradient(45deg, #6366f1, #22c55e); /* 🎨 CHANGE COLOR */
    color: white;
    cursor: pointer;
    border-radius: 10px;
    font-size: 16px;
}
.confirm-proceed-payment-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px !important;
    margin-top: 24px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 16px 24px !important;
    border-radius: 999px !important;

    font-size: 20px !important;
    font-weight: 950 !important;
    text-align: center !important;

    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    color: #ffffff !important;
    border: none !important;

    box-shadow: 0 16px 36px rgba(249, 115, 22, 0.30) !important;
}

/* CARD */
.card {
    background: rgba(255,255,255,0.05);
    padding: 25px;
    border-radius: 15px;
    margin-top: 20px;
}

/* INPUT */
input {
    width: 250px;
    padding: 10px;
    border-radius: 8px;
    border: none;
    outline: none;
}
.dashboard-container {
    padding: 50px;
}

.subtitle {
    opacity: 0.6;
    margin-top: 8px;
    margin-bottom: 30px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    margin-top: 15px;
}

.progress-fill {
    width: 70%; /* 🔥 CHANGE PROGRESS HERE */
    height: 100%;
    background: linear-gradient(45deg, #6366f1, #22c55e);
    border-radius: 20px;
}

/* PHONE SIZE */
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .navbar {
        padding: 20px;
    }

    .dashboard-container {
        padding: 25px;
    }
}
.card:hover {
    transform: translateY(-5px);
    transition: 0.3s;
}

.status-pending {
    color: #facc15;
    font-weight: 600;
    margin-top: 10px;
}

.status-approved {
    color: #22c55e;
    font-weight: 600;
    margin-top: 10px;
}

.status-rejected {
    color: #ef4444;
    font-weight: 600;
    margin-top: 10px;
}

.footer {
    padding: 25px;
    text-align: center;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.6);
    margin-top: 50px;
}

.btn-disabled {
    background: #555;
    color: rgba(255,255,255,0.7);
    border: none;
    padding: 12px 18px;
    border-radius: 10px;
    cursor: not-allowed;
    opacity: 0.8;
    transition: 0.3s;
}

.btn-disabled:hover {
    opacity: 1;
}

.merch-grid {
    display: grid;
    gap: 25px;
}

.merch-grid.small {
    grid-template-columns: repeat(4, 1fr);
}

.merch-grid.medium {
    grid-template-columns: repeat(2, 1fr);
}

.merch-grid.large {
    grid-template-columns: 1fr;
}

.merch-card {
    overflow: hidden;
}

.merch-image-box {
    width: 100%;
    background: rgba(0,0,0,0.25);
    border-radius: 12px;
    margin-bottom: 15px;
    padding: 10px;
}

.merch-image-box img {
    width: 100%;
    height: auto;
    max-height: 720px;
    object-fit: contain;
    display: block;
    border-radius: 10px;
}

.merch-grid.small .merch-image-box img {
    max-height: 260px;
}

.merch-grid.medium .merch-image-box img {
    max-height: 430px;
}

.merch-grid.large .merch-image-box img {
    max-height: 900px;
}

@media (max-width: 900px) {
    .merch-grid.small,
    .merch-grid.medium {
        grid-template-columns: 1fr;
    }
}

.form-container {
    width: 100%;
    max-width: 850px;
    margin: auto;
}

.form-container .card {
    width: 100%;
    padding: 40px;
    box-sizing: border-box;
}

.form-container input,
.form-container select,
.form-container textarea {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: none;
    font-size: 16px;
    box-sizing: border-box;
}

.form-container canvas {
    width: 100%;
    max-width: 320px;
    height: auto;
    display: block;
}

.crop-area {
    width: 100%;
    max-width: 420px;
    margin: 20px auto;
    text-align: center;
}

.crop-preview {
    width: 320px;
    height: 400px;
    border-radius: 16px;
    background: rgba(255,255,255,0.08);
    display: block;
    margin: 20px auto;
}

.crop-area label {
    display: block;
    margin-top: 15px;
    margin-bottom: 6px;
    font-weight: 600;
    opacity: 0.8;
}

.crop-area input[type="range"] {
    width: 100%;
}

html {
    scroll-behavior: smooth;
}

.section {
    padding: 70px 60px;
}

.section-title {
    font-size: 42px;
    margin-bottom: 20px;
}

.section-subtitle {
    opacity: 0.7;
    margin-bottom: 50px;
}

.home-hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
}

.hero-bg-slide.active {
    opacity: 1;
}

.home-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.45), #020b1f),
        rgba(0,0,0,0.45);
    z-index: 1;
}

.home-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 950px;
    padding: 0 25px;
}

.hero-label {
    letter-spacing: 4px;
    font-size: 14px;
    opacity: 0.75;
    margin-bottom: 20px;
}

.home-hero-content h1 {
    font-size: 72px;
    line-height: 1;
    margin-bottom: 20px;
}

.home-hero-content p {
    font-size: 20px;
    opacity: 0.85;
    margin-bottom: 25px;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.featured-card {
    overflow: hidden;
}

.featured-image-box {
    width: 100%;
    aspect-ratio: 4 / 5;
    background: rgba(0,0,0,0.25);
    border-radius: 14px;
    margin-bottom: 18px;
    overflow: hidden;
}

.featured-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.page-top-spacing {
    padding-top: 120px;
}

.event-grid {
    display: grid;
    gap: 25px;
}

.event-grid.small {
    grid-template-columns: repeat(4, 1fr);
}

.event-grid.medium {
    grid-template-columns: repeat(3, 1fr);
}

.event-grid.large {
    grid-template-columns: repeat(2, 1fr);
}

.event-image-box {
    width: 100%;
    aspect-ratio: 4 / 5;
    background: rgba(0,0,0,0.25);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 18px;
}

.event-image-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.event-grid.small .event-image-box {
    max-height: 260px;
}

.event-grid.medium .event-image-box {
    max-height: 420px;
}

.event-grid.large .event-image-box {
    max-height: 620px;
}

@media (max-width: 900px) {
    .event-grid.small,
    .event-grid.medium,
    .event-grid.large {
        grid-template-columns: 1fr;
    }
}

.featured-grid {
    margin-top: 30px;
}

.section-title {
    margin-bottom: 10px;
}

.section-subtitle {
    margin-bottom: 30px;
}

.featured-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.form-card {
    max-width: 1100px;
    margin: 30px auto;
    padding: 35px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
    opacity: 0.9;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border-radius: 12px;
    border: none;
    outline: none;
    font-size: 15px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.95);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

@media (max-width: 800px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

.about-admin-card {
    max-width: 1100px;
    margin: 30px auto;
    padding: 40px;
    background: rgba(255,255,255,0.06);
    border-radius: 18px;
}

.about-field {
    display: block;
    margin-bottom: 25px;
}

.about-field label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
}

.about-field input,
.about-field textarea {
    display: block;
    width: 100% !important;
    padding: 16px !important;
    border-radius: 12px;
    border: none;
    outline: none;
    font-size: 16px;
    box-sizing: border-box;
}

.about-field textarea {
    min-height: 150px;
    resize: vertical;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

@media (max-width: 800px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   FLOATING AI CHATBOT
========================= */

.urrc-chatbot {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 9999;
    font-family: inherit;
}

.chatbot-toggle {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff;
    font-weight: 900;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    transition: 0.25s ease;
}

.chatbot-toggle:hover {
    transform: translateY(-3px) scale(1.04);
}

.chatbot-box {
    position: absolute;
    right: 0;
    bottom: 78px;
    width: 340px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
    display: none;
}

.chatbot-box.active {
    display: block;
}

.chatbot-header {
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chatbot-header h4 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}

.chatbot-header span {
    font-size: 12px;
    opacity: 0.9;
}

.chatbot-header button {
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
}

.chatbot-messages {
    height: 280px;
    padding: 16px;
    overflow-y: auto;
    background: #090d1a;
}

.bot-message,
.user-message {
    max-width: 85%;
    padding: 11px 13px;
    border-radius: 14px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.45;
}

.bot-message {
    background: #1b2133;
    color: #d9def5;
    border-bottom-left-radius: 4px;
}

.user-message {
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.chatbot-input-area {
    display: flex;
    gap: 10px;
    padding: 14px;
    background: #111421;
}

.chatbot-input-area input {
    flex: 1;
    border: none;
    outline: none;
    border-radius: 999px;
    padding: 11px 14px;
    font-size: 14px;
}

.chatbot-input-area button {
    border: none;
    border-radius: 999px;
    padding: 0 16px;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 600px) {
    .urrc-chatbot {
        right: 18px;
        bottom: 18px;
    }

    .chatbot-box {
        width: calc(100vw - 36px);
        right: 0;
    }
}

/* =========================
   CHATBOT TEXT FORMAT POLISH
========================= */

.chatbot-messages {
    height: 280px;
    padding: 16px 18px;
    overflow-y: auto;
    background: #090d1a;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bot-message,
.user-message {
    max-width: 82%;
    width: fit-content;
    padding: 12px 15px;
    border-radius: 15px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.45;
    text-align: left !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.bot-message {
    align-self: flex-start;
    background: #1b2133;
    color: #d9def5;
    border-bottom-left-radius: 5px;
}

.user-message {
    align-self: flex-end;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff;
    border-bottom-right-radius: 5px;
}

.chatbot-input-area {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 16px;
    background: #111421;
}

.chatbot-input-area input {
    flex: 1;
    height: 46px;
    border: none;
    outline: none;
    border-radius: 999px;
    padding: 0 16px;
    font-size: 14px;
    box-sizing: border-box;
}

.chatbot-input-area button {
    height: 46px;
    min-width: 78px;
    border: none;
    border-radius: 999px;
    padding: 0 18px;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

/* =========================
   CHATBOT LINK BUTTON
========================= */

.chatbot-link-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 9px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: 0.25s ease;
}

.chatbot-link-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.bot-message {
    white-space: pre-line;
}

/* =========================
   ADMIN EVENT GALLERY
========================= */

.admin-gallery-page {
    min-height: 100vh;
    padding: 150px 70px 80px;
    background: #050816;
}

.admin-gallery-header h1 {
    color: #ffffff;
    font-size: 46px;
    margin-bottom: 10px;
}

.admin-gallery-header p {
    color: #b8b8c8;
    font-size: 17px;
    margin-bottom: 35px;
}

.admin-gallery-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 28px;
}

.admin-gallery-card {
    background: #111421;
    border-radius: 22px;
    padding: 26px;
}

.admin-gallery-card h2 {
    color: #ffffff;
    margin-bottom: 18px;
}

.past-event-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.past-event-item {
    display: block;
    padding: 16px;
    border-radius: 16px;
    background: #090d1a;
    color: #ffffff;
    text-decoration: none;
    transition: 0.25s ease;
}

.past-event-item strong {
    display: block;
    margin-bottom: 6px;
}

.past-event-item span {
    color: #b8b8c8;
    font-size: 13px;
}

.past-event-item:hover,
.past-event-item.active {
    background: linear-gradient(135deg, #5b6df6, #2bc477);
}

.past-event-item:hover span,
.past-event-item.active span {
    color: #ffffff;
}

.gallery-upload-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gallery-upload-form label {
    color: #ffffff;
    font-weight: 700;
}

.gallery-upload-form input,
.gallery-upload-form select {
    width: 100%;
    padding: 13px 14px;
    border-radius: 12px;
    border: none;
    outline: none;
    box-sizing: border-box;
}

.selected-event-name {
    color: #b8b8c8;
    margin-bottom: 22px;
}

.selected-gallery-event-banner {
    margin: 8px 0 24px;
    padding: 18px 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.18), rgba(251, 146, 60, 0.08));
    border: 1px solid rgba(249, 115, 22, 0.35);
    box-shadow: 0 16px 34px rgba(249, 115, 22, 0.14);
}

.selected-gallery-event-banner span {
    display: block;
    margin-bottom: 6px;
    color: #fed7aa;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.selected-gallery-event-banner strong {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 950;
}

.selected-gallery-event-banner p {
    margin: 0;
    color: #cbd5e1;
    font-size: 14px;
}

.uploaded-gallery-section {
    margin-top: 35px;
}

.uploaded-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.uploaded-gallery-card {
    background: #090d1a;
    border-radius: 18px;
    padding: 14px;
}

.uploaded-gallery-card img,
.uploaded-gallery-card video {
    width: 100%;
    border-radius: 14px;
    display: block;
}

.uploaded-gallery-card p {
    color: #d9def5;
    font-size: 14px;
    margin-top: 10px;
}

.delete-gallery-btn {
    display: inline-block;
    margin-top: 12px;
    color: #ff6b6b;
    font-weight: 800;
    text-decoration: none;
}

.empty-gallery-admin {
    background: #090d1a;
    padding: 36px;
    border-radius: 18px;
    color: #b8b8c8;
    text-align: center;
}

.empty-gallery-admin h3 {
    color: #ffffff;
    margin-bottom: 10px;
}

.empty-text {
    color: #b8b8c8;
}

/* =========================
   PAST EVENT DETAIL PAGE
========================= */

.past-detail-hero {
    min-height: 80vh;
    padding: 150px 70px 80px;
    background: #050816;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
}

.past-detail-content h1 {
    font-size: 54px;
    line-height: 1.05;
    color: #ffffff;
    margin-bottom: 22px;
}

.past-detail-content p {
    color: #b8b8c8;
    font-size: 17px;
    line-height: 1.8;
    max-width: 720px;
}

.back-link {
    display: inline-block;
    color: #b8b8c8;
    text-decoration: none;
    margin-bottom: 28px;
    font-weight: 700;
}

.back-link:hover {
    color: #ffffff;
}

.past-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.past-detail-meta span {
    background: #151824;
    color: #ffffff;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 14px;
}

.past-detail-poster {
    background: #111421;
    border-radius: 24px;
    padding: 24px;
}

.past-detail-poster img {
    width: 100%;
    border-radius: 18px;
    display: block;
}

.no-poster {
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b8b8c8;
    background: #090d1a;
    border-radius: 18px;
}

.past-gallery-section {
    padding: 80px 70px;
    background: #050816;
}

.past-gallery-section h2 {
    color: #ffffff;
    font-size: 42px;
    margin-bottom: 10px;
}

.gallery-subtitle {
    color: #b8b8c8;
    margin-bottom: 36px;
    font-size: 16px;
}

.past-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 26px;
}

.gallery-card {
    background: #111421;
    border-radius: 20px;
    padding: 16px;
    overflow: hidden;
}

.gallery-card img,
.gallery-card video {
    width: 100%;
    border-radius: 15px;
    display: block;
    background: #090d1a;
}

.gallery-card p {
    color: #d9def5;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 12px;
}

.download-btn,
.see-detail-btn {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

@media (max-width: 900px) {
    .admin-gallery-page {
        padding: 130px 24px 60px;
    }

    .admin-gallery-layout {
        grid-template-columns: 1fr;
    }

    .past-detail-hero {
        grid-template-columns: 1fr;
        padding: 130px 24px 60px;
    }

    .past-detail-content h1 {
        font-size: 40px;
    }

    .past-gallery-section {
        padding: 60px 24px;
    }
}

.empty-gallery {
    background: #111421;
    border-radius: 22px;
    padding: 50px 30px;
    text-align: center;
    color: #b8b8c8;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.empty-gallery h3 {
    color: #ffffff;
    font-size: 26px;
    margin-bottom: 12px;
}

.empty-gallery p {
    max-width: 520px;
    margin: 0 auto;
    color: #b8b8c8;
    line-height: 1.7;
}

/* =========================
   PAST EVENT CARD RESTORE
========================= */

.past-event-card {
    background: #111421;
    border-radius: 24px;
    padding: 22px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
     max-width: 420px !important;
    width: 100% !important;
}

.past-event-card .featured-image-box {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #090d1a;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 20px;
}

.past-event-card .featured-image-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.past-event-card .featured-card-content h3 {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 6px;
}

.past-event-card .featured-card-content p {
    color: #b8b8c8;
    font-size: 15px;
    margin-bottom: 12px;
}

.past-event-card .see-detail-btn {
    margin-top: 10px;
}

/* =========================
   EVENT ENDED STATE
========================= */

.event-ended-box {
    margin-top: 20px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.event-ended-label {
    display: inline-block;
    margin-bottom: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #2a2f3f;
    color: #b8b8c8;
    font-size: 13px;
    font-weight: 800;
}

.event-ended-box p {
    color: #b8b8c8;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.event-ended-box .see-detail-btn {
    margin-top: 4px;
}

/* =========================
   EVENTS PAGE SEARCH + FILTER
========================= */

.event-tools-card {
    background: #111421;
    border-radius: 22px;
    padding: 24px;
    margin-bottom: 36px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    gap: 20px;
    align-items: end;
}

.event-tool-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.event-tool-group label {
    color: #ffffff;
    font-weight: 800;
    font-size: 14px;
}

.event-tool-group input,
.event-tool-group select {
    width: 100%;
    padding: 13px 15px;
    border-radius: 14px;
    border: none;
    outline: none;
    background: #090d1a;
    color: #ffffff;
    font-size: 14px;
    box-sizing: border-box;
}

.event-tool-group input::placeholder {
    color: #8f96aa;
}

.event-size-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.event-section-block {
    margin-top: 50px;
}

.event-section-title {
    color: #ffffff;
    font-size: 34px;
    margin-bottom: 8px;
}

.event-section-subtitle {
    color: #b8b8c8;
    margin-bottom: 26px;
}

.event-status-badge {
    display: inline-block;
    width: fit-content;
    margin-top: 14px;
    margin-bottom: 12px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.upcoming-badge {
    background: rgba(46, 204, 113, 0.16);
    color: #2ecc71;
}

.past-badge {
    background: rgba(255, 255, 255, 0.08);
    color: #b8b8c8;
}

.event-card {
    display: flex;
    flex-direction: column;
}

.event-ended-box {
    margin-top: 20px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.event-ended-label {
    display: inline-block;
    margin-bottom: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #2a2f3f;
    color: #b8b8c8;
    font-size: 13px;
    font-weight: 800;
}

.event-ended-box p {
    color: #b8b8c8;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.no-image-box {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b8b8c8;
    background: #090d1a;
}

@media (max-width: 900px) {
    .event-tools-card {
        grid-template-columns: 1fr;
    }

    .event-section-title {
        font-size: 28px;
    }
}

/* =========================
   FORM SELECT DROPDOWN
========================= */

select {
    width: 100%;
    padding: 13px 14px;
    border-radius: 12px;
    border: none;
    outline: none;
    background: #ffffff;
    color: #111111;
    font-size: 15px;
    box-sizing: border-box;
}

select:focus {
    box-shadow: 0 0 0 3px rgba(91, 109, 246, 0.25);
}

/* =========================
   ADMIN EVENT GALLERY POLISH
========================= */

.admin-gallery-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

.past-event-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.past-event-item {
    display: block;
    padding: 20px 22px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(91, 109, 246, 0.88), rgba(43, 196, 119, 0.88));
    color: #ffffff;
    text-decoration: none;
    transition: 0.25s ease;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.past-event-item strong {
    display: block;
    font-size: 18px;
    margin-bottom: 8px;
    color: #ffffff;
}

.past-event-item span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

.past-event-item:hover {
    transform: translateY(-4px);
    filter: brightness(1.12);
    box-shadow: 0 18px 48px rgba(91, 109, 246, 0.28);
}

.past-event-item.active {
    position: relative;
    background: linear-gradient(135deg, #ffffff, #fed7aa) !important;
    color: #7c2d12 !important;
    border: 2px solid #f97316 !important;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.22), 0 20px 50px rgba(249, 115, 22, 0.34) !important;
    transform: translateY(-3px) !important;
}

.past-event-item.active strong,
.past-event-item.active span {
    color: #7c2d12 !important;
}

.past-event-item.active::after {
    content: "SELECTED";
    position: absolute;
    top: 12px;
    right: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f97316, #fb923c);
    color: #ffffff;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.04em;
}
.past-event-item.active:hover {
    filter: brightness(1.16);
    transform: translateY(-4px) scale(1.01);
}

.bulk-upload-note {
    background: rgba(91, 109, 246, 0.12);
    border: 1px solid rgba(91, 109, 246, 0.22);
    padding: 18px 20px;
    border-radius: 18px;
    margin-bottom: 24px;
}

.bulk-upload-note strong {
    display: block;
    color: #ffffff;
    margin-bottom: 6px;
    font-size: 16px;
}

.bulk-upload-note p {
    color: #b8b8c8;
    margin: 0;
    line-height: 1.5;
}

.gallery-upload-form input[type="file"] {
    background: #090d1a;
    color: #ffffff;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    padding: 18px;
    cursor: pointer;
}

.gallery-upload-form input[type="file"]::file-selector-button {
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    margin-right: 14px;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

.uploaded-gallery-card {
    transition: 0.25s ease;
}

.uploaded-gallery-card:hover {
    transform: translateY(-3px);
}

/* =========================
   GALLERY DOWNLOAD ACCESS
========================= */

.locked-download-btn {
    position: relative;
    display: inline-block;
    margin-top: 14px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #2a2f3f;
    color: #8f96aa !important;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: 0.25s ease;
}

.locked-download-btn:hover {
    background: #353b4e;
    color: #cbd2e8 !important;
    transform: translateY(-2px);
}

.locked-download-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%);
    width: max-content;
    max-width: 220px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #ffffff;
    color: #111421;
    font-size: 12px;
    font-weight: 800;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    z-index: 30;
}

.locked-download-btn::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 5px);
    transform: translateX(-50%);
    border-width: 7px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease;
    z-index: 30;
}

.locked-download-btn:hover::after,
.locked-download-btn:hover::before {
    opacity: 1;
    visibility: visible;
}

/* =========================
   FIX CROPPED DOWNLOAD TOOLTIP
========================= */

.gallery-card {
    overflow: visible !important;
    position: relative;
}

.past-gallery-grid {
    overflow: visible !important;
}

/* =========================
   PAST EVENT DETAIL HERO BACKGROUND CAROUSEL
========================= */

.past-detail-hero {
    position: relative;
    min-height: 100vh;
    padding: 150px 70px 80px;
    background: #050816;
    display: grid;
    grid-template-columns: 1.15fr 0.72fr;
    gap: 55px;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}

.past-detail-bg-slider {
    position: absolute;
    inset: 0;
    z-index: -3;
}

.past-detail-bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.2s ease, transform 6s ease;
}

.past-detail-bg-slide.active {
    opacity: 1;
    transform: scale(1);
}

.past-detail-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(
            90deg,
            rgba(5, 8, 22, 0.82) 0%,
            rgba(5, 8, 22, 0.72) 42%,
            rgba(5, 8, 22, 0.48) 68%,
            rgba(5, 8, 22, 0.62) 100%
        ),
        linear-gradient(
            180deg,
            rgba(5, 8, 22, 0.18) 0%,
            rgba(5, 8, 22, 0.72) 100%
        );
}

/* Keep text above carousel */
.past-detail-content,
.past-detail-poster {
    position: relative;
    z-index: 2;
}

/* Slight polish for left side info */
.past-detail-content h1 {
    font-size: 62px;
    line-height: 1.05;
    color: #ffffff;
    margin-bottom: 24px;
}

.past-detail-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 17px;
    line-height: 1.8;
    max-width: 700px;
}

/* Make poster slightly smaller than current */
.past-detail-poster {
    width: 100%;
    max-width: 530px;
    justify-self: end;
    background: rgba(17, 20, 33, 0.88);
    backdrop-filter: blur(8px);
    border-radius: 26px;
    padding: 22px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
}

.past-detail-poster img {
    width: 100%;
    max-height: 720px;
    object-fit: contain;
    border-radius: 18px;
    display: block;
}

/* Existing meta pills stay neat */
.past-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.past-detail-meta span {
    background: rgba(17, 20, 33, 0.82);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 14px;
}

.back-link {
    color: rgba(255, 255, 255, 0.88);
}

.back-link:hover {
    color: #ffffff;
}

@media (max-width: 1000px) {
    .past-detail-hero {
        grid-template-columns: 1fr;
        padding: 135px 24px 65px;
        gap: 35px;
    }

    .past-detail-content h1 {
        font-size: 44px;
    }

    .past-detail-poster {
        max-width: 520px;
        justify-self: start;
    }
}

/* =========================
   ADMIN REGISTRATION TABLE
========================= */

.registration-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.registration-header-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-link {
    text-decoration: none;
}

.excel-btn {
    background: linear-gradient(135deg, #1f9d55, #2bc477);
}

.secondary-btn {
    background: #2a2f3f;
}

.registration-filter-card {
    background: #111421;
    padding: 26px;
    border-radius: 24px;
    margin-bottom: 28px;
}

.registration-filter-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.registration-filter-top h3 {
    color: #ffffff;
    font-size: 24px;
    margin: 0;
}

.registration-filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.registration-event-filter,
.registration-search-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.registration-event-filter label,
.registration-search-box label {
    color: #ffffff;
    font-weight: 800;
    font-size: 14px;
}

.filter-inline {
    display: flex;
    gap: 12px;
}

.filter-inline select,
.registration-search-box input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: none;
    outline: none;
    background: #090d1a;
    color: #ffffff;
    font-size: 15px;
    box-sizing: border-box;
}

.registration-search-box input::placeholder {
    color: #8f96aa;
}

.selected-registration-event {
    background: linear-gradient(135deg, rgba(91, 109, 246, 0.22), rgba(43, 196, 119, 0.18));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 24px;
    margin-bottom: 24px;
}

.selected-event-tag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 7px 13px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
}

.selected-registration-event h3 {
    color: #ffffff;
    font-size: 28px;
    margin-bottom: 8px;
}

.selected-registration-event p {
    color: #d9def5;
    margin: 0;
}

.registration-summary-card {
    display: inline-block;
    min-width: 220px;
    background: #111421;
    border-radius: 20px;
    padding: 20px 24px;
    margin-bottom: 26px;
}

.registration-summary-card h3 {
    color: #b8b8c8;
    font-size: 15px;
    margin-bottom: 8px;
}

.registration-summary-card p {
    color: #ffffff;
    font-size: 40px;
    font-weight: 900;
    margin: 0;
}

.registration-table-card {
    background: #111421;
    border-radius: 26px;
    padding: 24px;
}

.registration-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: 20px;
}

.registration-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
    background: #090d1a;
    overflow: hidden;
}

.registration-table thead {
    background: linear-gradient(135deg, #5b6df6, #2bc477);
}

.registration-table th {
    padding: 18px 16px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
}

.registration-table td {
    padding: 17px 16px;
    color: #d9def5;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    vertical-align: middle;
}

.registration-table tbody tr {
    transition: 0.2s ease;
}

.registration-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.registration-table td strong {
    color: #ffffff;
}

.registration-action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.table-action-btn {
    border: none;
    border-radius: 999px;
    padding: 9px 14px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s ease;
}

.edit-btn {
    background: linear-gradient(135deg, #5b6df6, #4c8bf5);
}

.delete-btn {
    background: linear-gradient(135deg, #e74c3c, #ff6b6b);
}

.table-action-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.empty-registration-table {
    text-align: center;
    padding: 50px 20px;
    background: #090d1a;
    border-radius: 20px;
}

.empty-registration-table h3 {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 10px;
}

.empty-registration-table p {
    color: #b8b8c8;
}

@media (max-width: 900px) {
    .registration-filter-grid {
        grid-template-columns: 1fr;
    }

    .filter-inline {
        flex-direction: column;
    }

    .registration-summary-card {
        width: 100%;
        box-sizing: border-box;
    }
}

/* =========================
   REGISTRATION SEARCH ONLY FILTER
========================= */

.search-only-filter {
    padding: 26px 32px;
}

.full-search-box {
    width: 100%;
    max-width: 100%;
}

.full-search-box input {
    width: 100%;
    padding: 16px 18px;
    border-radius: 16px;
    border: none;
    outline: none;
    background: #090d1a;
    color: #ffffff;
    font-size: 15px;
    box-sizing: border-box;
}

.full-search-box input::placeholder {
    color: #8f96aa;
}

/* =========================
   FOOTER SOCIAL LINKS
========================= */

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 26px 20px;
    text-align: center;
}

.footer p {
    margin: 0;
}

.footer-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.footer-socials a {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    transition: 0.25s ease;
}
.footer-socials a:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #ffffff;
}

/* =========================
   MANAGE ADMINS PAGE
========================= */

.manage-admin-header {
    margin-bottom: 30px;
}

.manage-admin-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.4fr;
    gap: 28px;
    align-items: start;
}

.admin-create-card,
.admin-list-card {
    border-radius: 24px;
}

.admin-form-note {
    color: #b8b8c8;
    margin-bottom: 24px;
}

.admin-create-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-create-form label {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.admin-create-form input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: none;
    outline: none;
    background: #090d1a;
    color: #ffffff;
    font-size: 15px;
    box-sizing: border-box;
}

.admin-create-form input::placeholder {
    color: #8f96aa;
}

.admin-create-form .btn {
    margin-top: 14px;
}

.admin-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: 18px;
}

.admin-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: #090d1a;
}

.admin-table thead {
    background: linear-gradient(135deg, #5b6df6, #2bc477);
}

.admin-table th {
    padding: 16px;
    color: #ffffff;
    text-align: left;
    font-size: 14px;
    font-weight: 900;
}

.admin-table td {
    padding: 16px;
    color: #d9def5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 14px;
}

.admin-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.current-admin-badge {
    display: inline-block;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(46, 204, 113, 0.16);
    color: #2ecc71;
    font-size: 13px;
    font-weight: 900;
}

.empty-admin-list {
    background: #090d1a;
    border-radius: 18px;
    padding: 36px;
    text-align: center;
}

.empty-admin-list h3 {
    color: #ffffff;
    margin-bottom: 8px;
}

.empty-admin-list p {
    color: #b8b8c8;
}

@media (max-width: 1000px) {
    .manage-admin-layout {
        grid-template-columns: 1fr;
    }
}

/* =========================
   GOOGLE MEMBER AUTH
========================= */

.google-auth-section {
    width: 100%;
    margin: 22px 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#googleRegisterButton,
#googleLoginButton {
    display: flex;
    justify-content: center;
    width: 100%;
}

.auth-divider {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    color: #8f96aa;
    font-size: 13px;
    font-weight: 700;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.auth-divider span {
    white-space: nowrap;
}

/* =========================
   MEMBER PROFILE COMPLETION
========================= */

.profile-incomplete-alert {
    margin: 28px 0 34px;
    padding: 26px 28px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(91, 109, 246, 0.22), rgba(43, 196, 119, 0.16));
    border: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.profile-incomplete-alert h3 {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 8px;
}

.profile-incomplete-alert p {
    color: #d9def5;
    margin: 0;
    max-width: 780px;
    line-height: 1.6;
}

.profile-page {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 80px;
    box-sizing: border-box;
}

.profile-header {
    margin-bottom: 30px;
}

.profile-header h2 {
    color: #ffffff;
    font-size: 40px;
    margin-bottom: 10px;
}

.profile-header p {
    color: #b8b8c8;
    font-size: 16px;
    line-height: 1.6;
}

.profile-form-card {
    background: #111421;
    border-radius: 28px;
    padding: 34px;
    box-sizing: border-box;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.profile-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-field.full-width {
    grid-column: 1 / -1;
}

.profile-field label {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.profile-field input,
.profile-field select,
.profile-field textarea {
    width: 100%;
    padding: 15px 16px;
    border-radius: 15px;
    border: none;
    outline: none;
    background: #090d1a;
    color: #ffffff;
    font-size: 15px;
    box-sizing: border-box;
}

.profile-field input::placeholder,
.profile-field textarea::placeholder {
    color: #8f96aa;
}

.profile-field textarea {
    min-height: 120px;
    resize: vertical;
}

.health-consent-box {
    margin-top: 28px;
    padding: 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.health-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: #d9def5;
    line-height: 1.6;
    cursor: pointer;
}

.health-consent-label input {
    margin-top: 5px;
    transform: scale(1.25);
}

.profile-submit-area {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}

.profile-submit-btn {
    min-width: 260px;
    padding: 16px 24px;
    font-size: 16px;
}

@media (max-width: 900px) {
    .profile-page {
        padding-left: 20px;
        padding-right: 20px;
    }

    .profile-header h2 {
        font-size: 32px;
    }

    .profile-form-grid {
        grid-template-columns: 1fr;
    }

    .profile-submit-area {
        justify-content: stretch;
    }

    .profile-submit-btn {
        width: 100%;
    }
}

/* =========================
   COMPLETE MEMBER PROFILE - LAYOUT FIX
========================= */

.profile-page {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 135px 32px 80px !important;
    box-sizing: border-box !important;
}

.profile-header {
    margin-bottom: 32px !important;
}

.profile-header h2 {
    color: #ffffff !important;
    font-size: 42px !important;
    font-weight: 900 !important;
    margin: 0 0 10px !important;
}

.profile-header p {
    color: #b8b8c8 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.profile-form-card {
    width: 100% !important;
    background: #111421 !important;
    border-radius: 28px !important;
    padding: 36px !important;
    box-sizing: border-box !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28) !important;
}

.profile-form-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
}

.profile-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
}

.profile-field.full-width {
    grid-column: span 2!important;
}

.profile-field label {
    display: block !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    margin: 0 !important;
}

.profile-field input,
.profile-field select,
.profile-field textarea {
    display: block !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 15px 16px !important;
    border-radius: 15px !important;
    border: none !important;
    outline: none !important;
    background: #090d1a !important;
    color: #ffffff !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}

.profile-field input::placeholder,
.profile-field textarea::placeholder {
    color: #8f96aa !important;
}

.profile-field textarea {
    min-height: 130px !important;
    resize: vertical !important;
}

.profile-field select {
    appearance: auto !important;
}

.health-consent-box {
    width: 100% !important;
    margin-top: 28px !important;
    padding: 22px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
}

.health-consent-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    color: #d9def5 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.health-consent-label input {
    width: auto !important;
    min-height: auto !important;
    margin-top: 4px !important;
    transform: scale(1.25) !important;
}

.profile-submit-area {
    width: 100% !important;
    margin-top: 32px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.profile-submit-btn {
    min-width: 270px !important;
    padding: 16px 28px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

/* Responsive */
@media (max-width: 900px) {
    .profile-page {
        padding: 125px 20px 60px !important;
    }

    .profile-header h2 {
        font-size: 32px !important;
    }

    .profile-form-card {
        padding: 24px !important;
    }

    .profile-form-grid {
        grid-template-columns: 1fr !important;
    }

    .profile-submit-area {
        justify-content: stretch !important;
    }

    .profile-submit-btn {
        width: 100% !important;
    }
}

/* =========================
   EVENT DETAIL + PAYMENT FLOW
========================= */

.event-detail-page,
.event-payment-page {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 80px;
    box-sizing: border-box;
}

.event-detail-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 34px;
    margin-bottom: 34px;
}

.event-detail-poster-card,
.event-detail-info-card,
.event-registration-flow-card,
.event-payment-card {
    background: #111421;
    border-radius: 28px;
    padding: 28px;
    box-sizing: border-box;
}

.event-detail-poster-card img {
    width: 100%;
    border-radius: 20px;
    display: block;
}

.event-detail-info-card h1 {
    color: #ffffff;
    font-size: 46px;
    line-height: 1.1;
    margin: 18px 0;
}

.event-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.event-detail-meta span {
    padding: 9px 14px;
    border-radius: 999px;
    background: #090d1a;
    color: #ffffff;
    font-size: 14px;
}

.event-detail-description {
    color: #d9def5;
    line-height: 1.8;
    margin-bottom: 22px;
}

.event-fee-box {
    background: rgba(91, 109, 246, 0.14);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 18px;
}

.event-fee-box strong {
    display: block;
    color: #b8b8c8;
    margin-bottom: 6px;
}

.event-fee-box p {
    color: #ffffff;
    font-size: 28px;
    font-weight: 900;
    margin: 0;
}

.event-registration-flow-card h2,
.event-payment-card h1 {
    color: #ffffff;
    margin-bottom: 12px;
}

.event-registration-flow-card p {
    color: #d9def5;
    line-height: 1.7;
}

.participant-confirm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    background: #090d1a;
    border-radius: 18px;
    padding: 22px;
    margin: 22px 0;
    color: #d9def5;
}

.event-confirm-note {
    margin-bottom: 22px;
}

.payment-event-summary,
.payment-qr-box {
    background: #090d1a;
    border-radius: 20px;
    padding: 22px;
    margin: 24px 0;
}

.payment-event-summary h2,
.payment-qr-box h3 {
    color: #ffffff;
    margin-bottom: 12px;
}

.payment-event-summary p {
    color: #d9def5;
}

.payment-qr-box {
    text-align: center;
}

.payment-qr-box img {
    width: 100%;
    max-width: 340px;
    border-radius: 18px;
    margin-top: 12px;
}

.payment-upload-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.payment-upload-form label {
    color: #ffffff;
    font-weight: 800;
}

.payment-upload-form input[type="file"] {
    padding: 18px;
    border-radius: 16px;
    background: #090d1a;
    color: #ffffff;
    border: 1px dashed rgba(255,255,255,0.18);
}

@media (max-width: 900px) {
    .event-detail-page,
    .event-payment-page {
        padding-left: 20px;
        padding-right: 20px;
    }

    .event-detail-grid {
        grid-template-columns: 1fr;
    }

    .participant-confirm-grid {
        grid-template-columns: 1fr;
    }

    .event-detail-info-card h1 {
        font-size: 34px;
    }
}

/* =========================
   EVENT PAYMENT AMOUNT HIGHLIGHT
========================= */

.payment-event-summary h2 {
    font-size: 32px;
    margin-bottom: 22px;
}

.payment-amount-highlight {
    margin: 18px 0 24px;
    padding: 28px 30px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(91, 109, 246, 0.28), rgba(43, 196, 119, 0.24));
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payment-amount-highlight span {
    color: #d9def5;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.payment-amount-highlight strong {
    color: #ffffff;
    font-size: 54px;
    line-height: 1;
    font-weight: 900;
}

.payment-event-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.payment-event-meta p {
    margin: 0;
    font-size: 17px;
    color: #d9def5;
}

@media (max-width: 768px) {
    .payment-amount-highlight strong {
        font-size: 42px;
    }
}

/* =========================
   MEMBER PROFILE VIEW PAGE
========================= */

.member-profile-page {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 80px;
    box-sizing: border-box;
}

.member-profile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.member-profile-header h2 {
    color: #ffffff;
    font-size: 40px;
    margin-bottom: 10px;
}

.member-profile-header p {
    color: #b8b8c8;
    margin: 0;
    font-size: 16px;
}

.member-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.member-profile-card {
    background: #111421;
    border-radius: 28px;
    padding: 30px;
    box-sizing: border-box;
}

.member-profile-card h3 {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 24px;
}

.full-profile-card {
    grid-column: 1 / -1;
}

.profile-info-row {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-info-row:last-child {
    border-bottom: none;
}

.profile-info-row span {
    color: #8f96aa;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile-info-row strong {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.6;
}

.profile-info-text strong {
    max-width: 100%;
}

.profile-consent-status {
    margin-top: 22px;
}

.consent-approved,
.consent-pending {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
}

.consent-approved {
    background: rgba(46, 204, 113, 0.16);
    color: #2ecc71;
}

.consent-pending {
    background: rgba(231, 76, 60, 0.16);
    color: #ff7675;
}

@media (max-width: 900px) {
    .member-profile-page {
        padding-left: 20px;
        padding-right: 20px;
    }

    .member-profile-grid {
        grid-template-columns: 1fr;
    }

    .full-profile-card {
        grid-column: auto;
    }

    .member-profile-header h2 {
        font-size: 32px;
    }
}

/* =========================
   ADMIN DASHBOARD PAYMENT CARD
========================= */

.pending-payment-admin-card {
    background:
        linear-gradient(
            135deg,
            rgba(91, 109, 246, 0.22),
            rgba(43, 196, 119, 0.16)
        ),
        #111421 !important;
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.pending-payment-admin-card h3 {
    color: #ffffff;
}

.pending-payment-admin-card p {
    font-size: 18px;
    font-weight: 700;
}

.admin-insight-card {
    grid-column: span 2;
}

@media (max-width: 900px) {
    .admin-insight-card {
        grid-column: span 1;
    }
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

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

.form-group label {
    margin-bottom: 8px;
    font-weight: 600;
    color: white;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06);
    color: white;
    font-size: 15px;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #5b7fff;
    background: rgba(255,255,255,0.09);
}

.order-timeline {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 25px 0;
    padding: 20px;
    border-radius: 18px;
    background: rgba(255,255,255,0.06);
    position: relative;
}

.timeline-step {
    flex: 1;
    text-align: center;
    position: relative;
    opacity: 0.45;
}

.timeline-step.active {
    opacity: 1;
}

.timeline-dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-weight: 800;
}

.timeline-step.active .timeline-dot {
    background: linear-gradient(135deg, #4caf50, #00c853);
    color: white;
}

.timeline-step p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.order-timeline.rejected .timeline-dot {
    background: #f44336;
    color: white;
}

@media (max-width: 700px) {
    .order-timeline {
        flex-direction: column;
    }

    .timeline-step {
        text-align: left;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .timeline-dot {
        margin: 0;
    }
}

/* =========================
   MEMBER NOTIFICATION BELL
========================= */
/* =========================================================
   FLOATING MEMBER NOTIFICATION BELL
   Aligned with URRC AI Chatbot Button
========================================================= */

.urrc-notification-widget {
    position: fixed;
    right: 28px;
    bottom: 104px;
    z-index: 9999;
}

.notification-toggle {
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #2ecc71);
    color: white;
    font-size: 21px;
    cursor: pointer;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    position: relative;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.notification-toggle:hover {
    transform: translateY(-3px) scale(1.04);
    opacity: 0.96;
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e53935;
    color: white;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #06101f;
}

.notification-panel {
    display: none;
    position: absolute;
    right: 0;
    bottom: 70px;
    width: 420px;

    /* Prevent panel from overflowing above smaller laptop screens */
    max-height: min(570px, calc(100vh - 190px));

    border-radius: 24px;
    overflow: hidden;
    background: #111b30;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.48);
}

.notification-panel.show {
    display: block;
}

.notification-panel-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

.notification-panel-header h4 {
    margin: 0 0 4px;
    font-size: 20px;
}

.notification-panel-header span {
    font-size: 13px;
    opacity: 0.75;
}

.notification-panel-header button {
    border: none;
    background: transparent;
    color: white;
    font-size: 28px;
    cursor: pointer;
}

.notification-actions {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.notification-actions button {
    border: none;
    border-radius: 999px;
    padding: 9px 14px;
    background: rgba(255,255,255,0.10);
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.notification-actions button:hover {
    background: rgba(255,255,255,0.16);
}

.notification-list {
    max-height: min(430px, calc(100vh - 335px));
    overflow-y: auto;
    padding: 14px;
}

.notification-item {
    padding: 16px;
    border-radius: 18px;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.05);
}

.notification-item.unread {
    border-color: rgba(102, 126, 234, 0.55);
    background: rgba(102, 126, 234, 0.14);
}

.notification-item.read {
    opacity: 0.82;
}

.notification-main {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: flex-start;
}

.notification-content h5 {
    margin: 0 0 6px;
    font-size: 15px;
}

.notification-content p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.45;
}

.notification-content small {
    opacity: 0.72;
}

.mark-single-read {
    min-width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(46, 204, 113, 0.24);
    color: #73ffb1;
    cursor: pointer;
    font-weight: 800;
}

.mark-single-read:hover {
    background: rgba(46, 204, 113, 0.36);
}

.notification-link {
    display: inline-block;
    margin-top: 12px;
    color: #8db4ff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}

.notification-link:hover {
    text-decoration: underline;
}

.notification-empty {
    padding: 35px 15px;
    text-align: center;
    opacity: 0.75;
}

@media (max-width: 600px) {
    .urrc-notification-widget {
    right: 22px;
    bottom: 94px;
}

.notification-toggle {
    width: 54px;
    height: 54px;
    font-size: 21px;
}

    .notification-panel {
        width: calc(100vw - 36px);
        right: 0;
        bottom: 78px;
    }
}
/* =========================
   TOP TOAST NOTIFICATION
========================= */

.urrc-toast-notification {
    position: fixed;
    right: 32px;
    width: 430px;
    max-width: calc(100vw - 40px);
    z-index: 10000;

    display: flex;
    gap: 16px;
    align-items: flex-start;

    padding: 20px;
    border-radius: 22px;

    background: linear-gradient(
        135deg,
        rgba(20, 32, 58, 0.97),
        rgba(14, 23, 42, 0.97)
    );

    border: 1px solid rgba(141, 180, 255, 0.35);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);

    opacity: 0;
    transform: translateY(-18px);
    pointer-events: none;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

.urrc-toast-notification.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.urrc-toast-notification.hide {
    opacity: 0;
    transform: translateY(-18px);
    pointer-events: none;
}

.urrc-toast-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
    background: linear-gradient(135deg, #667eea, #2ecc71);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}

.urrc-toast-content {
    flex: 1;
}

.urrc-toast-content h4 {
    margin: 0 0 7px;
    font-size: 17px;
}

.urrc-toast-content p {
    margin: 0;
    line-height: 1.45;
    font-size: 14px;
    opacity: 0.92;
}

.urrc-toast-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.urrc-toast-view,
.urrc-toast-dismiss {
    border: none;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.urrc-toast-view {
    background: linear-gradient(135deg, #667eea, #2ecc71);
    color: white;
}

.urrc-toast-dismiss {
    background: rgba(255,255,255,0.10);
    color: white;
}

.urrc-toast-dismiss:hover {
    background: rgba(255,255,255,0.17);
}

@media (max-width: 600px) {
    .urrc-toast-notification {
        right: 16px;
        left: 16px;
        width: auto;
    }
}

/* =========================
   HOMEPAGE COUNTDOWN BANNER
========================= */

.home-countdown-banner-section {
    width: 100%;
    padding: 55px 6% 25px;
    box-sizing: border-box;
}

.home-countdown-banner-card {
    position: relative;
    width: 100%;
    max-width: 1280px;
    min-height: 480px;
    margin: auto;
    border-radius: 30px;
    overflow: hidden;
    background: #101828;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 24px 65px rgba(0,0,0,0.36);
}

.home-countdown-banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-countdown-banner-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(4, 10, 24, 0.88) 0%, rgba(4, 10, 24, 0.68) 45%, rgba(4, 10, 24, 0.35) 100%),
        linear-gradient(to top, rgba(4, 10, 24, 0.60) 0%, rgba(4, 10, 24, 0.10) 100%);
}

.home-countdown-banner-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    padding: 55px 55px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 480px;
}

.home-countdown-mini-label {
    display: inline-block;
    width: fit-content;
    margin-bottom: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #cdd9ff;
    background: rgba(102, 126, 234, 0.18);
    border: 1px solid rgba(102, 126, 234, 0.42);
}

.home-countdown-banner-content h2 {
    font-size: 48px;
    line-height: 1.12;
    margin: 0 0 14px;
    color: #ffffff;
}

.home-countdown-banner-description {
    max-width: 650px;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 18px;
    color: rgba(255,255,255,0.88);
}

.home-countdown-banner-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

.home-countdown-banner-meta span {
    padding: 11px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.13);
    color: #fff;
    font-weight: 600;
}

.home-countdown-banner-timer {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 16px;
    max-width: 760px;
    margin-bottom: 28px;
}

.countdown-banner-box {
    padding: 18px 14px;
    border-radius: 20px;
    text-align: center;
    background: rgba(255,255,255,0.11);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(4px);
}

.countdown-banner-box strong {
    display: block;
    font-size: 38px;
    line-height: 1;
    margin-bottom: 8px;
    color: #ffffff;
}

.countdown-banner-box span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.84);
}

.home-countdown-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

@media (max-width: 1000px) {
    .home-countdown-banner-card {
        min-height: 530px;
    }

    .home-countdown-banner-content {
        padding: 40px 30px 36px;
        min-height: 530px;
        max-width: 100%;
    }

    .home-countdown-banner-content h2 {
        font-size: 38px;
    }

    .home-countdown-banner-timer {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .home-countdown-banner-section {
        padding: 35px 18px 10px;
    }

    .home-countdown-banner-card {
        min-height: 560px;
        border-radius: 22px;
    }

    .home-countdown-banner-content {
        padding: 26px 20px 24px;
        min-height: 560px;
    }

    .home-countdown-banner-content h2 {
        font-size: 30px;
    }

    .home-countdown-banner-description {
        font-size: 14px;
    }

    .countdown-banner-box strong {
        font-size: 30px;
    }
}

.event-registration-admin-header {
            margin-bottom: 28px;
        }

        .event-info-card {
            margin-top: 20px;
            margin-bottom: 28px;
            padding: 24px;
        }

        .event-info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 16px;
            margin-top: 18px;
        }

        .event-info-item {
            padding: 16px;
            border-radius: 16px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.10);
        }

        .event-info-item strong {
            display: block;
            margin-bottom: 8px;
        }

        .registration-summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 18px;
            margin-bottom: 28px;
        }

        .registration-filter-card {
            margin-bottom: 28px;
        }

        .registration-filter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 18px;
            margin-top: 18px;
        }

        .registration-filter-field {
            display: flex;
            flex-direction: column;
        }

        .registration-filter-field label {
            margin-bottom: 8px;
            font-weight: 600;
        }

        .registration-filter-field input,
        .registration-filter-field select {
            width: 100%;
            padding: 13px 14px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.15);
            background: rgba(255,255,255,0.07);
            color: white;
            box-sizing: border-box;
        }

        .registration-filter-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 22px;
        }

        .registration-admin-table-wrapper {
            overflow-x: auto;
            border-radius: 18px;
            margin-top: 18px;
        }

        .registration-admin-table {
            width: 100%;
            min-width: 1750px;
            border-collapse: collapse;
        }

        .registration-admin-table th,
        .registration-admin-table td {
            padding: 16px 14px;
            border-bottom: 1px solid rgba(255,255,255,0.10);
            text-align: left;
            vertical-align: top;
        }

        .registration-admin-table th {
            background: rgba(255,255,255,0.09);
            white-space: nowrap;
        }

        .registration-admin-table tbody tr:hover {
            background: rgba(255,255,255,0.04);
        }

        .participant-info-block,
        .transport-info-block {
            min-width: 250px;
            line-height: 1.58;
        }

        .status-pill {
            display: inline-block;
            padding: 7px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap;
        }

        .status-approved {
            background: rgba(0, 200, 83, 0.18);
            color: #70ffaf;
            border: 1px solid rgba(0, 200, 83, 0.45);
        }

        .status-pending {
            background: rgba(255, 152, 0, 0.18);
            color: #ffd08a;
            border: 1px solid rgba(255, 152, 0, 0.45);
        }

        .status-rejected {
            background: rgba(244, 67, 54, 0.18);
            color: #ff9f99;
            border: 1px solid rgba(244, 67, 54, 0.45);
        }

        .receipt-link-btn {
            display: inline-block;
            padding: 10px 14px;
            border-radius: 999px;
            text-decoration: none;
            color: white;
            font-weight: 700;
            background: linear-gradient(135deg, #667eea, #2ecc71);
        }

        .small-muted {
            font-size: 13px;
            opacity: 0.72;
        }

        .back-events-btn {
            margin-bottom: 18px;
            display: inline-block;
        }

/* =========================
   ADMIN DASHBOARD ENHANCEMENT
========================= */

.admin-dashboard-top-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 22px;
    margin-bottom: 28px;
}

.admin-hero-overview {
    padding: 30px;
    border-radius: 26px;
    background:
        linear-gradient(135deg, rgba(102,126,234,0.18), rgba(46,204,113,0.12)),
        rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
}

.admin-hero-overview h3 {
    font-size: 28px;
    margin-bottom: 12px;
}

.admin-hero-overview p {
    line-height: 1.6;
    opacity: 0.92;
    max-width: 720px;
}

.admin-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.admin-hero-pill {
    display: inline-block;
    padding: 11px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    font-weight: 700;
}

.admin-action-focus {
    padding: 28px;
    border-radius: 26px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
}

.admin-action-focus h3 {
    margin-bottom: 16px;
}

.pending-total-number {
    font-size: 58px;
    font-weight: 900;
    line-height: 1;
    margin: 12px 0;
}

.pending-total-number.has-pending {
    color: #ffd08a;
}

.pending-total-number.clear {
    color: #70ffaf;
}

.admin-stat-grid {
    margin-bottom: 28px;
}

.admin-stat-card .stat-number {
    font-size: 34px;
    font-weight: 900;
    margin: 10px 0 14px;
}

.admin-top-member-name {
    font-size: 24px !important;
}

.admin-feature-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
    margin-top: 28px;
}

.admin-feature-panel {
    padding: 26px;
    border-radius: 24px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
}

.admin-feature-panel h3 {
    margin-bottom: 14px;
}

.feature-meta {
    line-height: 1.7;
    margin-bottom: 18px;
}

.dashboard-action-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.dashboard-action-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
}

.dashboard-action-item strong {
    display: block;
    margin-bottom: 4px;
}

.mini-count-badge {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    font-weight: 900;
    background: rgba(255,152,0,0.18);
    border: 1px solid rgba(255,152,0,0.42);
    color: #ffd08a;
}

.mini-count-badge.clear {
    background: rgba(0,200,83,0.18);
    border: 1px solid rgba(0,200,83,0.42);
    color: #70ffaf;
}

.admin-insight-card {
    margin-top: 28px;
    padding: 28px;
}

.admin-insight-card p {
    line-height: 1.7;
}

.countdown-status-badge {
    display: inline-block;
    margin-bottom: 12px;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(102,126,234,0.18);
    border: 1px solid rgba(102,126,234,0.42);
    color: #cdd9ff;
    font-size: 13px;
    font-weight: 800;
}

.admin-insight-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

@media (max-width: 1000px) {
    .admin-dashboard-top-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   MEMBER DASHBOARD ENHANCEMENT
========================= */

.merch-rejected-alert,
.event-registration-rejected-alert {
    margin-bottom: 28px;
    padding: 24px;
    border-radius: 20px;
    border: 1px solid rgba(244, 67, 54, 0.55);
    background: rgba(244, 67, 54, 0.10);
}

.merch-rejected-alert h3,
.event-registration-rejected-alert h3 {
    margin-bottom: 12px;
}

.rejected-order-item,
.rejected-event-item {
    padding: 16px;
    margin-top: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
}

.rejected-order-item p,
.rejected-event-item p {
    margin: 6px 0;
}

.dashboard-alert-actions {
    margin-top: 18px;
}

.member-badge-display {
    font-size: 22px;
}

.member-upcoming-events-section,
.member-registered-events-section {
    margin-top: 42px;
}

.member-upcoming-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 22px;
    margin-top: 22px;
}

.member-upcoming-event-card,
.member-registered-event-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.member-upcoming-event-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.member-upcoming-event-header h3 {
    margin: 0;
}

.member-registration-status {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.member-registration-status.approved {
    background: rgba(0, 200, 83, 0.18);
    border: 1px solid rgba(0, 200, 83, 0.45);
    color: #70ffaf;
}

.member-registration-status.pending {
    background: rgba(255, 152, 0, 0.18);
    border: 1px solid rgba(255, 152, 0, 0.45);
    color: #ffd08a;
}

.member-registration-status.rejected {
    background: rgba(244, 67, 54, 0.18);
    border: 1px solid rgba(244, 67, 54, 0.45);
    color: #ff9f99;
}

.member-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.member-event-meta span {
    padding: 10px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    font-size: 14px;
    font-weight: 600;
}

.member-event-countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.member-countdown-box {
    padding: 15px 10px;
    border-radius: 18px;
    text-align: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
}

.member-countdown-box strong {
    display: block;
    font-size: 28px;
    line-height: 1;
    margin-bottom: 7px;
}

.member-countdown-box span {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.82;
}

.member-event-transport-summary {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
}

.member-event-transport-summary p {
    margin: 6px 0;
}

.member-event-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.member-whatsapp-link {
    display: inline-block;
    padding: 13px 17px;
    border-radius: 999px;
    text-decoration: none;
    color: white;
    font-weight: 800;
    background: linear-gradient(135deg, #25D366, #128C7E);
}

.member-whatsapp-spacing {
    margin-top: 8px;
    margin-bottom: 8px;
}

.member-registration-message {
    padding: 16px;
    border-radius: 18px;
    line-height: 1.55;
}

.member-registration-message.pending {
    background: rgba(255, 152, 0, 0.12);
    border: 1px solid rgba(255, 152, 0, 0.35);
}

.member-registration-message.rejected {
    background: rgba(244, 67, 54, 0.12);
    border: 1px solid rgba(244, 67, 54, 0.35);
}

.member-checkin-file {
    margin-top: 15px;
    display: block;
}

.member-checkin-submit {
    margin-top: 16px;
}

@media (max-width: 700px) {
    .member-event-countdown {
        grid-template-columns: repeat(2, 1fr);
    }

    .member-upcoming-event-header {
        flex-direction: column;
    }
}

/* =========================
   CHATBOT SUGGESTIONS + LOADING
========================= */

.chatbot-loading-message {
    opacity: 0.75;
    font-style: italic;
}

.chatbot-suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 12px;
}

.chatbot-suggestion-btn {
    width: 100%;
    text-align: left;
    padding: 10px 13px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    background: rgba(255,255,255,0.07);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.22s ease;
}

.chatbot-suggestion-btn:hover {
    transform: translateY(-2px);
    background: rgba(91, 109, 246, 0.24);
    border-color: rgba(91, 109, 246, 0.48);
}

/* =========================
   CHATBOT DYNAMIC RESULT CARDS
========================= */

.chatbot-result-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}

.chatbot-result-card {
    padding: 13px 14px;
    border-radius: 15px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
}

.chatbot-result-card strong {
    display: block;
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 14px;
}

.chatbot-result-card p {
    margin: 4px 0;
    font-size: 13px;
    line-height: 1.45;
    color: #d9def5;
}

.chatbot-mini-link-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(91,109,246,0.22);
    border: 1px solid rgba(91,109,246,0.42);
    color: #ffffff !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: 0.22s ease;
}

.chatbot-mini-link-btn:hover {
    transform: translateY(-2px);
    background: rgba(91,109,246,0.35);
}

/* =========================
   PWA INSTALL PROMPT
========================= */

.pwa-install-prompt {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 18px;
    z-index: 99999;
    display: none;
}

.pwa-install-prompt.show {
    display: block;
}

/* Light mode */
.pwa-install-card {
    max-width: 520px;
    margin: 0 auto;
    background: rgba(255, 250, 245, 0.98);
    color: #111827;
    border: 1px solid rgba(249, 115, 22, 0.35);
    border-radius: 22px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(14px);
}

.pwa-install-icon img {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    object-fit: cover;
    background: #ffffff;
    border: 1px solid rgba(249, 115, 22, 0.25);
}

.pwa-install-text {
    flex: 1;
}

.pwa-install-text strong {
    display: block;
    font-size: 15px;
    color: #111827;
}

.pwa-install-text p {
    margin: 4px 0 0;
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
}

.pwa-install-actions {
    display: flex;
    gap: 6px;
}

.pwa-install-actions button {
    border: none;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#pwaInstallBtn {
    background: linear-gradient(135deg, #ff7a18, #ea580c);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.28);
}

#pwaDismissBtn {
    background: #e5e7eb;
    color: #334155;
}

/* Dark mode */
body.dark-mode .pwa-install-card,
body.dark-theme .pwa-install-card,
[data-theme="dark"] .pwa-install-card {
    background: #10182d;
    color: #ffffff;
    border: 1px solid rgba(249, 115, 22, 0.45);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

body.dark-mode .pwa-install-text strong,
body.dark-theme .pwa-install-text strong,
[data-theme="dark"] .pwa-install-text strong {
    color: #ffffff;
}

body.dark-mode .pwa-install-text p,
body.dark-theme .pwa-install-text p,
[data-theme="dark"] .pwa-install-text p {
    color: #cbd5e1;
}

body.dark-mode #pwaDismissBtn,
body.dark-theme #pwaDismissBtn,
[data-theme="dark"] #pwaDismissBtn {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

@media (max-width: 480px) {
    .pwa-install-card {
        align-items: flex-start;
    }

    .pwa-install-actions {
        flex-direction: column;
    }
}

/* =========================
   ADMIN EVENT CERTIFICATE SETTINGS
========================= */

.admin-event-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.certificate-settings-page {
    padding-top: 120px;
}

.certificate-back-link {
    display: inline-block;
    margin-bottom: 20px;
}

.certificate-page-header {
    margin-bottom: 24px;
}

.certificate-event-summary {
    margin-bottom: 26px;
}

.certificate-settings-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.certificate-settings-section {
    padding: 28px;
}

.certificate-settings-section h3 {
    margin-bottom: 18px;
}

.certificate-helper-text {
    opacity: 0.78;
    line-height: 1.6;
    margin-top: 10px;
    margin-bottom: 18px;
}

.certificate-enable-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 700;
    cursor: pointer;
}

.certificate-enable-toggle input {
    width: 20px;
    height: 20px;
}

.certificate-current-template {
    margin: 18px 0 24px;
}

.certificate-current-template img {
    width: 100%;
    max-width: 720px;
    border-radius: 18px;
    display: block;
    border: 1px solid rgba(255,255,255,0.12);
}

.certificate-form-label {
    display: block;
    margin-bottom: 9px;
    font-weight: 700;
}

.certificate-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.certificate-form-group.full-width {
    grid-column: 1 / -1;
}

.certificate-form-group input,
.certificate-form-group textarea,
.certificate-settings-section input,
.certificate-settings-section textarea {
    width: 100%;
    box-sizing: border-box;
}

.certificate-position-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}

.certificate-position-card {
    padding: 20px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
}

.certificate-position-card h4 {
    margin-bottom: 16px;
}

.certificate-position-card label,
.certificate-signature-card label {
    display: block;
    margin-top: 12px;
    margin-bottom: 7px;
    font-weight: 600;
}

.certificate-signature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.certificate-signature-card {
    padding: 22px;
    border-radius: 22px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
}

.certificate-signature-card h4 {
    margin-bottom: 16px;
}

.current-signature-preview {
    margin-bottom: 16px;
}

.current-signature-preview img {
    width: 100%;
    max-width: 200px;
    max-height: 100px;
    object-fit: contain;
    display: block;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
}

.certificate-settings-actions {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 30px;
}

@media (max-width: 700px) {
    .certificate-form-grid {
        grid-template-columns: 1fr;
    }

    .certificate-settings-section {
        padding: 20px;
    }
}

/* =========================
   CERTIFICATE LIVE POSITION PREVIEW
========================= */

.certificate-preview-guide {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.certificate-preview-guide span {
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 13px;
    font-weight: 700;
}
.certificate-preview-stage {
    position: relative;
    width: min(100%, 820px);
    margin: 0 auto;
    aspect-ratio: 297 / 210;
    border-radius: 22px;
    overflow: hidden;
    background: #ffffff;
    border: 2px dashed rgba(255,255,255,0.18);
    user-select: none;
    touch-action: none;
}

.certificate-preview-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
    background: #ffffff;
}

.certificate-preview-empty {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    font-weight: 700;
    color: rgba(255,255,255,0.72);
    background: rgba(255,255,255,0.03);
}

.certificate-preview-item {
    position: absolute;
    z-index: 3;
    transform: translateX(-50%);
    cursor: grab;
    border: 1px dashed rgba(102,126,234,0.78);
    background: rgba(23, 35, 74, 0.82);
    color: #ffffff;
    padding: 7px 11px;
    border-radius: 12px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(0,0,0,0.28);
    backdrop-filter: blur(4px);
}

.certificate-preview-item.dragging {
    cursor: grabbing;
    border-color: rgba(46,204,113,0.95);
    background: rgba(46,204,113,0.20);
    z-index: 8;
}

.certificate-preview-item.text-item {
    min-width: 130px;
    text-align: center;
}

.certificate-preview-item.code-item {
    font-size: 11px;
    min-width: 120px;
    text-align: center;
}

.certificate-preview-item.signature-item {
    min-width: 90px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
}

.certificate-preview-item.signature-item img {
    width: 100%;
    height: auto;
    max-height: 64px;
    object-fit: contain;
    display: block;
}

.certificate-preview-item.signature-item span {
    font-size: 12px;
    font-weight: 800;
}

.certificate-preview-note {
    margin-top: 16px;
}

@media (max-width: 700px) {
    .certificate-preview-stage {
        border-radius: 18px;
    }

    .certificate-preview-item {
        padding: 5px 8px;
        font-size: 11px;
    }

    .certificate-preview-item.text-item {
        min-width: 100px;
    }

    .certificate-preview-item.signature-item {
        min-width: 70px;
    }
}

.certificate-preview-item.is-hidden {
    display: none;
}

.certificate-signature-enable-toggle {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px !important;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    cursor: pointer;
}

.certificate-signature-enable-toggle input {
    width: 18px;
    height: 18px;
}

.certificate-signature-enable-toggle span {
    font-weight: 700;
}

.signature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 120px;
    padding: 8px 10px;
}

.signature-preview-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
}

.signature-preview-image-wrap img {
    width: 100%;
    height: auto;
    max-height: 55px;
    object-fit: contain;
    display: block;
}

.signature-preview-image-wrap span {
    font-size: 11px;
    font-weight: 800;
}

.signature-preview-name {
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
}

.signature-preview-position {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.9;
    text-align: center;
    line-height: 1.2;
}

/* =========================
   CERTIFICATE BUILDER V2
========================= */

.certificate-orientation-box {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.certificate-orientation-box p {
    width: 100%;
    margin-bottom: 0;
}

.certificate-orientation-box label {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-weight: 700;
}

.certificate-preview-stage {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    background: #ffffff;
    border-radius: 24px;
    border: 2px dashed rgba(255,255,255,0.18);
    user-select: none;
}

.certificate-preview-stage.landscape-mode {
    width: min(100%, 950px);
    aspect-ratio: 297 / 210;
}

.certificate-preview-stage.portrait-mode {
    width: min(100%, 620px);
    aspect-ratio: 210 / 297;
}

.certificate-preview-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #ffffff;
    display: none;
}

.certificate-preview-empty {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.04);
    font-weight: 800;
}

.certificate-preview-item {
    position: absolute;
    z-index: 5;
    transform: translateX(-50%);
    cursor: grab;
    min-width: 70px;
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(34, 54, 105, 0.86);
    border: 1px dashed rgba(255,255,255,0.35);
    color: #fff;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.24);
}

.certificate-preview-item.dragging {
    cursor: grabbing;
    background: rgba(46, 204, 113, 0.26);
    border-color: rgba(46, 204, 113, 0.9);
}

.certificate-preview-item.is-hidden {
    display: none;
}

.preview-resize-handle {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #2ecc71;
    cursor: nwse-resize;
    padding: 0;
}

.text-item span,
.code-item span {
    display: block;
    white-space: nowrap;
}

.signature-item {
    min-width: 115px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.signature-preview-image-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 22px;
}

.signature-preview-image-wrap img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.signature-preview-name {
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.signature-preview-position {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
}

@media (max-width: 700px) {
    .certificate-preview-stage.landscape-mode {
        width: 100%;
    }

    .certificate-preview-stage.portrait-mode {
        width: min(100%, 460px);
    }

    .certificate-preview-item {
        padding: 6px 9px;
    }
}

/* =========================
   MEMBER MY CERTIFICATES PAGE
========================= */

.my-certificates-page {
    padding-top: 120px;
}

.my-certificates-header {
    margin-bottom: 26px;
}

.certificate-summary-card {
    margin-bottom: 26px;
    padding: 24px;
}

.certificate-summary-card h3 {
    margin-bottom: 8px;
}

.my-certificates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
}

.my-certificate-card {
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.my-certificate-top {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.certificate-ready-badge,
.certificate-orientation-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.certificate-ready-badge {
    background: rgba(46, 204, 113, 0.16);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.42);
}

.certificate-orientation-badge {
    background: rgba(102, 126, 234, 0.16);
    color: #aebcff;
    border: 1px solid rgba(102, 126, 234, 0.42);
}

.my-certificate-card h3 {
    font-size: 24px;
    margin: 0;
}

.my-certificate-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.my-certificate-meta p {
    margin: 0;
    line-height: 1.5;
}

.my-certificate-code {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.my-certificate-code span {
    font-size: 13px;
    opacity: 0.72;
    font-weight: 700;
}

.my-certificate-code strong {
    font-size: 14px;
    word-break: break-word;
}

.my-certificate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
}

.secondary-certificate-btn {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
}

.no-certificates-card {
    padding: 42px 28px;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.no-certificates-icon {
    font-size: 52px;
    margin-bottom: 16px;
}

.no-certificates-card h3 {
    margin-bottom: 12px;
}

.no-certificates-card p {
    opacity: 0.85;
}

.no-certificates-requirements {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 24px 0;
}

.no-certificates-requirements span {
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    font-weight: 700;
    font-size: 14px;
}

@media (max-width: 700px) {
    .my-certificates-grid {
        grid-template-columns: 1fr;
    }

    .my-certificate-actions {
        flex-direction: column;
    }

    .my-certificate-actions a,
    .my-certificate-actions button {
        width: 100%;
    }
}

/* =========================
   PUBLIC NAVBAR EVENT DROPDOWN
========================= */

.navbar-links {
    display: flex;
    align-items: center;
}

.navbar-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 25px;
}

.navbar-dropdown-btn {
    border: none;
    background: transparent;
    color: white;
    font-size: 16px;
    font-family: inherit;
    opacity: 0.8;
    cursor: pointer;
    padding: 0;
}

.navbar-dropdown:hover .navbar-dropdown-btn {
    opacity: 1;
}

.navbar-dropdown-menu {
    position: absolute;
    top: 38px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 205px;
    padding: 10px;
    border-radius: 16px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.22s ease;
    z-index: 9999;
}

.navbar-dropdown:hover .navbar-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.navbar-dropdown-menu a {
    display: block;
    margin-left: 0 !important;
    padding: 12px 14px;
    border-radius: 12px;
    color: #ffffff;
    opacity: 1;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

.navbar-dropdown-menu a:hover {
    background: linear-gradient(135deg, rgba(91, 109, 246, 0.95), rgba(43, 196, 119, 0.95));
}


/* =========================
   HOMEPAGE ABOUT PREVIEW
========================= */

.home-about-preview {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.02),
        rgba(255, 255, 255, 0)
    );
}

.home-about-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.home-about-subtitle {
    max-width: 820px;
    line-height: 1.7;
    margin-bottom: 0 !important;
}

.home-about-view-btn {
    display: inline-block;
    padding: 14px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 900;
    transition: 0.25s ease;
    white-space: nowrap;
}

.home-about-view-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
}

.home-about-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.home-about-mini-card {
    background: #111421;
    border-radius: 24px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.home-about-mini-card span {
    display: inline-block;
    font-size: 32px;
    margin-bottom: 16px;
}

.home-about-mini-card h3 {
    font-size: 24px;
    color: #ffffff;
    margin-bottom: 12px;
}

.home-about-mini-card p {
    color: #b8b8c8;
    line-height: 1.75;
}


/* =========================
   FULL ABOUT US PAGE
========================= */

.about-page {
    padding-left: 70px;
    padding-right: 70px;
    padding-bottom: 80px;
    min-height: 100vh;
    background: #050816;
}

.about-page-hero {
    max-width: 1000px;
    margin: 0 auto 50px;
    text-align: center;
    padding: 40px 25px 10px;
}

.about-page-label {
    color: #9aa5ff;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 18px;
}

.about-page-hero h1 {
    font-size: 58px;
    line-height: 1.08;
    color: #ffffff;
    margin-bottom: 20px;
}

.about-page-intro {
    max-width: 860px;
    margin: 0 auto;
    color: #b8b8c8;
    font-size: 18px;
    line-height: 1.8;
}

.about-page-grid {
    max-width: 1250px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}

.about-detail-card {
    background: #111421;
    border-radius: 28px;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22);
}

.about-detail-icon {
    font-size: 38px;
    margin-bottom: 18px;
}

.about-detail-card h2 {
    color: #ffffff;
    font-size: 28px;
    margin-bottom: 14px;
}

.about-detail-card p {
    color: #d1d7ea;
    font-size: 16px;
    line-height: 1.8;
}

.about-page-actions {
    max-width: 1250px;
    margin: 42px auto 0;
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.about-action-btn {
    display: inline-block;
    padding: 15px 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 900;
    transition: 0.25s ease;
}

.about-action-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
}

.secondary-about-btn {
    background: #2a2f3f;
}


/* =========================
   MOBILE ABOUT + DROPDOWN SAFETY
========================= */

@media (max-width: 1000px) {
    .home-about-mini-grid,
    .about-page-grid {
        grid-template-columns: 1fr;
    }

    .about-page {
        padding-left: 24px;
        padding-right: 24px;
    }

    .about-page-hero h1 {
        font-size: 42px;
    }
}

/* =========================================================
   FIX: HOME SECTION BUTTONS BELOW CARDS
========================================================= */

.home-section-bottom-action {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 34px;
}

.home-section-link-btn,
.home-about-view-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px 28px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #5b6df6, #2bc477) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    border: none !important;
    transition: 0.25s ease !important;
    box-shadow: 0 16px 35px rgba(43, 196, 119, 0.18) !important;
}

.home-section-link-btn:hover,
.home-about-view-btn:hover {
    transform: translateY(-3px) !important;
    filter: brightness(1.08) !important;
}


/* =========================================================
   FIX: ABOUT PREVIEW CARDS WITH BACKGROUND VISUAL
========================================================= */

.home-about-mini-card {
    position: relative !important;
    min-height: 255px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background-color: #111421 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.28) !important;
}

/* Awak boleh tukar gambar ni bila ada gambar pilihan sendiri */
.mission-preview-card {
    background-image:
        linear-gradient(rgba(5, 8, 22, 0.65), rgba(5, 8, 22, 0.92)),
        url('../uploads/about_mission_bg.jpg');
}

.achievement-preview-card {
    background-image:
        linear-gradient(rgba(5, 8, 22, 0.65), rgba(5, 8, 22, 0.92)),
        url('../uploads/about_achievement_bg.jpg');
}

/* Kalau gambar belum upload, gradient gelap tetap cantik */
.home-about-card-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(91, 109, 246, 0.28), transparent 48%),
        linear-gradient(135deg, rgba(91, 109, 246, 0.08), rgba(43, 196, 119, 0.1));
    z-index: 1;
}

.home-about-mini-content {
    position: relative;
    z-index: 2;
    padding: 34px 30px !important;
}

.home-about-mini-content span {
    display: inline-block !important;
    font-size: 36px !important;
    margin-bottom: 16px !important;
}

.home-about-mini-content h3 {
    color: #ffffff !important;
    font-size: 27px !important;
    margin-bottom: 14px !important;
}

.home-about-mini-content p {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
}


/* =========================================================
   FIX: DROPDOWN EVENTS TAK HILANG BILA TURUN MOUSE
========================================================= */

.navbar-dropdown {
    position: relative !important;
}

/* Invisible bridge antara Events button dan dropdown */
.navbar-dropdown::after {
    content: "";
    position: absolute;
    left: -12px;
    right: -12px;
    top: 100%;
    height: 18px;
    background: transparent;
}

.navbar-dropdown-menu {
    top: calc(100% + 12px) !important;
}

.navbar-dropdown:hover .navbar-dropdown-menu,
.navbar-dropdown-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* =========================================================
   PAST EVENTS PAGE - CLEAN LIGHT/DARK DESIGN
========================================================= */

.past-events-page {
    width: 100% !important;
    min-height: 100vh !important;
    padding: 130px 70px 90px !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

/* Dark mode page */
html[data-theme="dark"] body:not(.admin-layout) .past-events-page {
    background: transparent !important;
}

/* Light mode page */
html[data-theme="light"] body:not(.admin-layout) .past-events-page {
    background:
        radial-gradient(circle at top left, rgba(249, 115, 22, 0.12), transparent 34%),
        linear-gradient(180deg, #fff7ed 0%, #ffffff 48%, #fffaf5 100%) !important;
}


/* =========================
   HERO
========================= */

.past-events-hero {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    max-width: 1250px !important;
    min-height: 310px !important;
    margin: 0 auto 50px !important;
    padding: 56px 42px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    border-radius: 34px !important;
    background-size: cover !important;
    background-position: center !important;
    box-sizing: border-box !important;
}

.event-page-hero-sync {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    width: min(1250px, calc(100vw - 140px)) !important;
    max-width: 1250px !important;
    min-height: 310px !important;

    margin: 0 auto 50px !important;
    padding: 56px 42px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    border-radius: 34px !important;
    background-size: cover !important;
    background-position: center !important;
    box-sizing: border-box !important;
}

/* Hero overlay */
.past-events-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    background:
        linear-gradient(
            135deg,
            rgba(3, 7, 18, 0.62),
            rgba(249, 115, 22, 0.34)
        ) !important;
}

/* Hero text always white */
.past-events-label,
.past-events-hero h1,
.past-events-hero p {
    position: relative !important;
    z-index: 2 !important;
    color: #ffffff !important;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55) !important;
}

.past-events-label {
    display: block !important;
    letter-spacing: 0.16em !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    margin-bottom: 14px !important;
    text-transform: uppercase !important;
}

.past-events-hero h1 {
    font-size: clamp(46px, 5vw, 72px) !important;
    line-height: 1.02 !important;
    margin: 0 0 18px !important;
    font-weight: 950 !important;
}

.past-events-hero p {
    max-width: 900px !important;
    margin: 0 auto !important;
    font-size: 20px !important;
    line-height: 1.6 !important;
}


/* =========================
   SEARCH CARD
========================= */

.past-events-filter-card {
    width: min(1450px, calc(100vw - 140px)) !important;
    max-width: 1450px !important;
    margin: 0 auto 54px !important;
    border-radius: 30px !important;
    padding: 34px !important;
    box-sizing: border-box !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-events-filter-card {
    background: #111421 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="light"] body:not(.admin-layout) .past-events-filter-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 22px 65px rgba(15, 23, 42, 0.08) !important;
}

.past-events-search-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 22px !important;
    align-items: end !important;
    width: 100% !important;

    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.past-search-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;

    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.past-search-group label {
    font-size: 18px !important;
    font-weight: 900 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    line-height: 1.2 !important;
margin-bottom: 4px !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-search-group label {
    color: #ffffff !important;
}

html[data-theme="light"] body:not(.admin-layout) .past-search-group label {
    color: #0f172a !important;
}

.past-search-group input {
    width: 100% !important;
    height: 58px !important;
    padding: 0 22px !important;
    border-radius: 18px !important;
    outline: none !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-search-group input {
    background: #090d1a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-search-group input::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] body:not(.admin-layout) .past-search-group input {
    background: #fff7ed !important;
    color: #0f172a !important;
    border: 1px solid rgba(249, 115, 22, 0.18) !important;
}

html[data-theme="light"] body:not(.admin-layout) .past-search-group input::placeholder {
    color: #64748b !important;
}

.past-search-actions {
    display: flex !important;
    align-items: end !important;
    gap: 12px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.past-search-btn {
    height: 58px !important;
    margin: 0 !important;
    padding: 0 34px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    border: none !important;
    box-shadow: 0 14px 35px rgba(249, 115, 22, 0.28) !important;
}

.past-reset-btn {
    height: 58px !important;
    padding: 0 24px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    box-sizing: border-box !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-reset-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="light"] body:not(.admin-layout) .past-reset-btn {
    background: #fff7ed !important;
    color: #9a3412 !important;
    border: 1px solid rgba(249, 115, 22, 0.18) !important;
}

/* =========================
   RESULTS HEADER
========================= */

.past-events-results-header {
    width: min(1450px, calc(100vw - 140px)) !important;
    max-width: 1450px !important;
    margin: 0 auto 28px !important;

    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

.past-events-results-header h2 {
    font-size: 42px !important;
    font-weight: 950 !important;
    margin: 0 !important;
}

.past-events-results-header p,
.past-events-results-header span {
    font-size: 16px !important;
    font-weight: 800 !important;
}

/* Dark */
html[data-theme="dark"] body:not(.admin-layout) .past-events-results-header h2 {
    color: #ffffff !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-events-results-header p,
html[data-theme="dark"] body:not(.admin-layout) .past-events-results-header span {
    color: #b8b8c8 !important;
}

/* Light */
html[data-theme="light"] body:not(.admin-layout) .past-events-results-header h2 {
    color: #0f172a !important;
}

html[data-theme="light"] body:not(.admin-layout) .past-events-results-header p,
html[data-theme="light"] body:not(.admin-layout) .past-events-results-header span {
    color: #475569 !important;
}


/* =========================
   PAST EVENT CARDS
========================= */

.past-events-grid,
.compact-past-results {
    width: min(1540px, calc(100vw - 120px)) !important;
    max-width: 1540px !important;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
    align-items: stretch !important;
}

.past-events-grid > * {
    flex: 0 1 420px !important;
    width: 420px !important;
    max-width: 420px !important;
}

.past-page-card {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 24px !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
}

.compact-past-results > .compact-past-card {
    width: 100% !important;
    max-width: 100% !important;
}

/* Dark card */
html[data-theme="dark"] body:not(.admin-layout) .past-page-card {
    background: #111421 !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.26) !important;
}

/* Light card */
html[data-theme="light"] body:not(.admin-layout) .past-page-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 22px 65px rgba(15, 23, 42, 0.08) !important;
}

.past-page-image-box 
.past-poster-frame{
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    overflow: hidden !important;
    background: #090d1a !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.past-page-image-box img 
.past-poster-frame img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}

.past-page-content {
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex: 1 !important;
}

.past-page-status {
    width: fit-content !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

/* Dark status */
html[data-theme="dark"] body:not(.admin-layout) .past-page-status {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
}

/* Light status */
html[data-theme="light"] body:not(.admin-layout) .past-page-status {
    background: #fff7ed !important;
    color: #9a3412 !important;
    border: 1px solid rgba(249, 115, 22, 0.16) !important;
}

.past-page-title {
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
    margin: 0 !important;
}

.past-page-meta {
    font-size: 15px !important;
    font-weight: 700 !important;
}

.past-page-description {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Dark text */
html[data-theme="dark"] body:not(.admin-layout) .past-page-title {
    color: #ffffff !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-page-meta,
html[data-theme="dark"] body:not(.admin-layout) .past-page-description {
    color: #b8b8c8 !important;
}

/* Light text */
html[data-theme="light"] body:not(.admin-layout) .past-page-title {
    color: #0f172a !important;
}

html[data-theme="light"] body:not(.admin-layout) .past-page-meta,
html[data-theme="light"] body:not(.admin-layout) .past-page-description {
    color: #475569 !important;
}

.past-page-detail-btn,
.past-page-card .see-detail-btn {
    margin-top: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 13px 18px !important;
    border-radius: 999px !important;

    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    color: #ffffff !important;
    text-decoration: none !important;

    font-size: 15px !important;
    font-weight: 900 !important;
    text-align: center !important;

    border: none !important;
    box-shadow: 0 12px 28px rgba(249, 115, 22, 0.28) !important;
}

/* =========================
   EMPTY STATE
========================= */

.past-events-empty-state {
    width: min(1450px, calc(100vw - 140px)) !important;
    max-width: 1450px !important;
    margin: 0 auto !important;
    border-radius: 28px !important;
    padding: 60px 30px !important;
    text-align: center !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-events-empty-state {
    background: #111421 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="light"] body:not(.admin-layout) .past-events-empty-state {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 22px 65px rgba(15, 23, 42, 0.08) !important;
}

.past-events-empty-state h3 {
    font-size: 30px !important;
    margin-bottom: 12px !important;
}

.past-events-empty-state p {
    max-width: 620px !important;
    margin: 0 auto 22px !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-events-empty-state h3 {
    color: #ffffff !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-events-empty-state p {
    color: #b8b8c8 !important;
}

html[data-theme="light"] body:not(.admin-layout) .past-events-empty-state h3 {
    color: #0f172a !important;
}

html[data-theme="light"] body:not(.admin-layout) .past-events-empty-state p {
    color: #475569 !important;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1100px) {
    .past-events-page {
        padding: 125px 28px 70px !important;
    }

    .past-events-filter-card,
    .past-events-results-header,
    .past-events-grid,
    .compact-past-results {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .past-events-empty-state {
        width: 100% !important;
        max-width: 100% !important;
    }

    .past-events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .past-events-page {
        width: 100% !important;
        max-width: 100% !important;
        padding: 90px 0 60px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .past-events-hero {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
        min-height: 250px !important;
        margin: 0 auto 34px !important;
        padding: 34px 20px !important;
        border-radius: 24px !important;
        box-sizing: border-box !important;
    }

    .past-events-hero h1 {
        font-size: 40px !important;
    }

    .past-events-hero p {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .past-events-filter-card {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
        margin: 0 auto 46px !important;
        padding: 18px !important;
        border-radius: 24px !important;
        box-sizing: border-box !important;
    }

    .past-events-search-form {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .past-search-group {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .past-search-group label {
        font-size: 18px !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
        display: block !important;
    }

    .past-search-group input {
        width: 100% !important;
        height: 56px !important;
        font-size: 15px !important;
        padding: 0 18px !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
    }

    .past-search-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .past-search-btn,
    .past-reset-btn {
        width: 100% !important;
        height: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 999px !important;
        font-size: 15px !important;
    }

    .past-events-results-header {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
        margin: 0 auto 24px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .past-events-results-header h2 {
        font-size: 32px !important;
        line-height: 1.1 !important;
    }

    .past-events-results-header p,
    .past-events-results-header span {
        font-size: 15px !important;
    }

    .past-events-grid,
    .compact-past-results {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .past-page-card,
    .compact-past-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 24px !important;
    }

    .past-page-image-box,
    .past-poster-frame {
        width: 100% !important;
        aspect-ratio: 4 / 5 !important;
        height: auto !important;
    }

    .past-page-content {
        padding: 18px !important;
    }

    .event-page-hero-sync {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    min-height: 250px !important;
    margin: 0 auto 34px !important;
    padding: 34px 20px !important;
    border-radius: 24px !important;
}
}
/* =========================================================
   FIX ABOUT PREVIEW BACKGROUND OVERLAY FULL COVER
========================================================= */

.home-about-mini-card {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

/* Background image only */
.mission-preview-card {
    background-image: url('../uploads/about_mission_bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.achievement-preview-card {
    background-image: url('../uploads/about_achievement_bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Main dark layer — full card cover */
.home-about-mini-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(5, 8, 22, 0.72);
}

/* Extra subtle blue/green glow layer */
.home-about-card-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background:
        radial-gradient(circle at top right, rgba(91, 109, 246, 0.28), transparent 52%),
        linear-gradient(135deg, rgba(91, 109, 246, 0.08), rgba(43, 196, 119, 0.08)) !important;
}

/* Content always above overlay */
.home-about-mini-content {
    position: relative !important;
    z-index: 3 !important;
}

/* =========================================================
   FINAL FIX: ABOUT CARD DARK COVER FULL, TAK BOCOR HUJUNG
========================================================= */

.mission-preview-card {
    background-image:
        linear-gradient(
            rgba(5, 8, 22, 0.78),
            rgba(5, 8, 22, 0.78)
        ),
        url('../uploads/about_mission_bg.jpg') !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.achievement-preview-card {
    background-image:
        linear-gradient(
            rgba(5, 8, 22, 0.78),
            rgba(5, 8, 22, 0.78)
        ),
        url('../uploads/about_achievement_bg.jpg') !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Buang dark layer tambahan yang buat kesan tak sekata */
.home-about-mini-card::before {
    display: none !important;
}

/* Tinggalkan glow halus sahaja, tapi jangan kacau dark cover */
.home-about-card-overlay {
    background:
        radial-gradient(circle at top right, rgba(91, 109, 246, 0.16), transparent 55%),
        linear-gradient(135deg, rgba(91, 109, 246, 0.05), rgba(43, 196, 119, 0.05)) !important;
}

/* =========================================================
   FIX: IMAGE BOCOR DEKAT EDGE ATAS / BAWAH ABOUT CARD
========================================================= */

.home-about-mini-card {
    border: none !important;
    overflow: hidden !important;
    background-clip: padding-box !important;
}

/* Buat border guna pseudo layer sendiri supaya gambar tak bocor */
.home-about-mini-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    pointer-events: none;
    z-index: 4;
}

/* =========================================================
   UPCOMING EVENTS PAGE - COMPACT PUBLIC/MEMBER DESIGN
========================================================= */

.events-public-page {
    padding-left: 60px !important;
    padding-right: 60px !important;
    padding-bottom: 80px !important;
}

.events-page-header {
    max-width: 1000px;
    margin: 0 auto 38px;
    text-align: center;
}

.events-page-label {
    color: #9aa5ff;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 14px;
}

.events-page-header h1 {
    color: #ffffff;
    font-size: 58px;
    line-height: 1.06;
    margin-bottom: 18px;
}

.events-page-header p {
    max-width: 780px;
    margin: 0 auto;
    color: #b8b8c8;
    font-size: 17px;
    line-height: 1.75;
}

.events-modern-tools {
    max-width: 1280px;
    margin: 0 auto 42px !important;
}

.event-size-btn-group {
    gap: 10px;
}

.event-size-btn {
    margin-top: 0 !important;
    padding: 13px 18px !important;
    font-size: 14px !important;
}

.upcoming-events-block {
    max-width: 1380px;
    margin: 0 auto;
}

.events-list-header {
    margin-bottom: 26px;
}

.upcoming-compact-grid {
    align-items: stretch;
}

.upcoming-public-event-card {
    position: relative;
    display: flex !important;
    flex-direction: column;
    padding: 18px !important;
    border-radius: 24px !important;
    background: #111421 !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transition: 0.25s ease;
}

.upcoming-public-event-card:hover {
    transform: translateY(-5px);
    border-color: rgba(91, 109, 246, 0.35);
}

.compact-event-image-box {
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    max-height: 360px !important;
    margin-bottom: 18px !important;
    border-radius: 18px !important;
    background: #090d1a !important;
}

.compact-event-image-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

.compact-event-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px !important;
    gap: 10px !important;
}

.event-card-badge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.event-card-badge-row .event-status-badge {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.event-mini-registered-badge {
    display: inline-block;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(46, 204, 113, 0.16);
    color: #2ecc71;
    font-size: 12px;
    font-weight: 900;
}

.compact-event-title {
    color: #ffffff;
    font-size: 21px;
    line-height: 1.2;
    margin-bottom: 2px;
}
.compact-event-meta-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
}

.compact-event-meta-item {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.35 !important;
    padding: 11px 13px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
    font-size: 14px !important;
}



/* category item = item pertama dalam meta grid */
.compact-event-meta-grid .compact-event-meta-item:first-child {
    grid-column: 1 / -1 !important;
    min-height: auto !important;
    width: fit-content !important;
    padding: 6px 11px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    margin-top: -2px !important;
    margin-bottom: 2px !important;
}

/* date = item kedua, time = item ketiga */
.compact-event-meta-grid .compact-event-meta-item:nth-child(2),
.compact-event-meta-grid .compact-event-meta-item:nth-child(3) {
    grid-column: span 1 !important;
}

/* location = item keempat */
.compact-event-meta-grid .compact-event-meta-item:nth-child(4) {
    grid-column: 1 / -1 !important;
}

.compact-event-meta-item span {
    font-size: 14px;
    line-height: 1.35;
}

.compact-event-meta-item p {
    margin: 0 !important;
    color: #d9def5;
    font-size: 13px;
    line-height: 1.45;
    word-break: break-word;
}

.compact-event-extra-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.compact-event-extra-meta span {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #d9def5;
    font-size: 12px;
    font-weight: 900;
}

.compact-event-description {
    color: #b8b8c8;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 2px;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.compact-event-actions {
    margin-top: auto;
}

.compact-event-view-btn {
    width: 100%;
    margin-top: 0 !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
}


/* =========================================================
   REGISTERED EVENT VISUAL INDICATOR
========================================================= */

.member-registered-event-card {
    border: 1px solid rgba(46, 204, 113, 0.42) !important;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(46, 204, 113, 0.08) inset;
}

.member-registered-event-card:hover {
    border-color: rgba(46, 204, 113, 0.72) !important;
}

.event-registered-ribbon {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    padding: 9px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1f9d55, #2bc477);
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 14px 30px rgba(43, 196, 119, 0.24);
}


/* =========================================================
   EVENT GRID SIZE TUNING
========================================================= */

/* Small = default 3 cards per row for upcoming event page */
.event-grid.small.upcoming-compact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
}

.event-grid.small.upcoming-compact-grid .compact-event-image-box {
    max-height: 320px !important;
}

.event-grid.small.upcoming-compact-grid .compact-event-title {
    font-size: 20px !important;
}

.event-grid.small.upcoming-compact-grid .compact-event-meta-grid {
    grid-template-columns: 1fr !important;
}

/* Medium = default balanced */
.event-grid.medium.upcoming-compact-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}

/* Large = bigger but not oversized */
.event-grid.large.upcoming-compact-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
}

.event-grid.large.upcoming-compact-grid .compact-event-image-box {
    max-height: 480px !important;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.events-empty-state-card {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}


/* =========================================================
   RESPONSIVE UPCOMING EVENTS
========================================================= */

@media (max-width: 1200px) {
    .event-grid.small.upcoming-compact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1000px) {
    .events-public-page {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .events-page-header h1 {
        font-size: 44px;
    }

    .event-grid.small.upcoming-compact-grid,
    .event-grid.medium.upcoming-compact-grid,
    .event-grid.large.upcoming-compact-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 700px) {
    .event-grid.small.upcoming-compact-grid,
    .event-grid.medium.upcoming-compact-grid,
    .event-grid.large.upcoming-compact-grid {
        grid-template-columns: 1fr !important;
    }

    .compact-event-meta-grid {
        grid-template-columns: 1fr !important;
    }

    .event-registered-ribbon {
        top: 14px;
        right: 14px;
        font-size: 12px;
    }
}

/* =========================================================
   PAST EVENT DETAIL - CERTIFICATE BOX
========================================================= */

.past-certificate-box {
    margin-top: 30px;
    max-width: 760px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px;
    border-radius: 24px;
    background: rgba(17, 20, 33, 0.82);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28);
}

.past-certificate-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    background: linear-gradient(135deg, rgba(91, 109, 246, 0.28), rgba(43, 196, 119, 0.28));
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.past-certificate-content {
    flex: 1;
}

.past-certificate-content h3 {
    color: #ffffff;
    font-size: 23px;
    margin-bottom: 8px;
}

.past-certificate-content p {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 16px;
}

.past-certificate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    transition: 0.25s ease;
    box-shadow: 0 14px 32px rgba(43, 196, 119, 0.18);
}

.past-certificate-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
}

.past-certificate-locked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.14);
    color: #facc15;
    font-size: 14px;
    font-weight: 900;
}

.rejected-cert-lock {
    background: rgba(239, 68, 68, 0.14);
    color: #ff7d7d;
}

@media (max-width: 768px) {
    .past-certificate-box {
        flex-direction: column;
        padding: 20px;
    }

    .past-certificate-icon {
        width: 54px;
        height: 54px;
        min-width: 54px;
    }
}

/* =========================================================
   CERTIFICATE CARD - DISABLED VIEW BUTTON
========================================================= */

.past-certificate-disabled-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    border-radius: 999px;
    background: #303544;
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    font-weight: 900;
    cursor: not-allowed;
    user-select: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

.rejected-disabled-cert {
    background: rgba(239, 68, 68, 0.12);
    color: rgba(255, 125, 125, 0.65);
    border: 1px solid rgba(239, 68, 68, 0.18);
}

/* =========================================================
   MEMBER DASHBOARD - COMBINED MY EVENTS
========================================================= */

.member-my-events-section {
    margin-top: 70px;
}

.member-my-events-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 30px;
}

.member-unified-event-card {
    display: flex;
    flex-direction: column;
    padding: 28px !important;
    border-radius: 26px !important;
    background: #111421 !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22);
}

.upcoming-unified-event-card {
    border-color: rgba(91, 109, 246, 0.30);
}

.past-unified-event-card {
    border-color: rgba(255, 255, 255, 0.08);
}

.member-unified-event-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.member-event-category-row {
    margin-bottom: 12px;
}

.member-event-timing-badge {
    display: inline-block;
    width: fit-content;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.upcoming-timing-badge {
    background: rgba(91, 109, 246, 0.18);
    color: #b6c0ff;
}

.past-timing-badge {
    background: rgba(255, 255, 255, 0.08);
    color: #b8b8c8;
}

.member-unified-event-header h3 {
    color: #ffffff;
    font-size: 28px;
    line-height: 1.25;
    margin: 0;
}

.member-unified-countdown-wrap {
    margin-top: 20px;
    margin-bottom: 22px;
    padding: 20px;
    border-radius: 22px;
    background: rgba(91, 109, 246, 0.10);
    border: 1px solid rgba(91, 109, 246, 0.16);
}

.member-unified-countdown-title {
    color: #d9def5;
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 14px;
}

.member-unified-transport-box {
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
}

.member-unified-transport-box p {
    margin-bottom: 8px;
}

.member-unified-transport-box p:last-child {
    margin-bottom: 0;
}

.member-unified-event-actions {
    margin-top: 4px;
    margin-bottom: 22px;
}

.member-unified-attendance-area {
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.member-unified-attendance-area .btn-disabled {
    margin-top: 14px;
}

.member-unified-attendance-area form {
    margin-top: 16px;
}

.member-my-events-empty {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 1100px) {
    .member-my-events-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   MEMBER DASHBOARD MY UPCOMING EVENTS - 3 CARDS + ALIGN BUTTON
========================================================= */

/* 3 cards per row */
.member-my-events-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

/* Smaller card */
.member-unified-event-card {
    padding: 22px !important;
    border-radius: 24px !important;
}

/* Smaller title */
.member-unified-event-header h3 {
    font-size: 23px !important;
}

/* Meta chips slightly tighter */
.member-event-meta {
    gap: 9px !important;
}

.member-event-meta span {
    font-size: 13px !important;
    padding: 8px 12px !important;
}

/* Compact countdown area */
.member-unified-countdown-wrap {
    padding: 16px !important;
    margin-top: 16px !important;
    margin-bottom: 18px !important;
}

.member-event-countdown {
    gap: 10px !important;
}

.member-countdown-box {
    padding: 14px 8px !important;
}

.member-countdown-box strong {
    font-size: 24px !important;
}

/* Transport area tighter */
.member-unified-transport-box {
    padding: 15px 16px !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

/* View Event + WhatsApp perfectly aligned */
.member-unified-event-actions,
.member-event-action-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.member-unified-event-actions a,
.member-event-action-row a {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.member-unified-event-actions .btn,
.member-event-action-row .btn {
    margin-top: 0 !important;
    height: 47px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.member-whatsapp-link {
    margin: 0 !important;
    height: 47px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Attendance section tighter */
.member-unified-attendance-area {
    padding-top: 18px !important;
}

/* Responsive */
@media (max-width: 1350px) {
    .member-my-events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 850px) {
    .member-my-events-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   DASHBOARD POINTS GRAPH CARD
========================================================= */

.dashboard-points-graph-card {
    display: flex;
    flex-direction: column;
}

.dashboard-points-graph-card h3 {
    margin-bottom: 18px;
}

.points-graph-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.points-big-number {
    min-width: 105px;
    height: 105px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(91, 109, 246, 0.24), rgba(43, 196, 119, 0.22));
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.points-big-number strong {
    color: #ffffff;
    font-size: 38px;
    line-height: 1;
}

.points-big-number span {
    color: #d9def5;
    font-size: 14px;
    font-weight: 900;
    margin-top: 5px;
}

.points-badge-summary {
    flex: 1;
}

.points-current-badge {
    color: #ffffff;
    font-size: 19px;
    font-weight: 900;
    margin-bottom: 8px;
}

.points-next-badge {
    color: #b8b8c8;
    font-size: 14px;
    line-height: 1.6;
}

.points-progress-chart {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
}

.points-progress-header {
    display: flex;
    justify-content: space-between;
    color: #d9def5;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 12px;
}

.points-progress-track {
    width: 100%;
    height: 18px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.10);
}

.points-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    box-shadow: 0 0 20px rgba(43, 196, 119, 0.20);
}

.points-progress-caption {
    color: #b8b8c8;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 12px;
}


/* =========================================================
   RESPONSIVE LEADERBOARD + POINT GRAPH
========================================================= */

@media (max-width: 1000px) {
    .leaderboard-page-header h1 {
        font-size: 44px;
    }

    .leaderboard-bar-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .leaderboard-bar-points {
        text-align: left;
    }

    .leaderboard-join-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 700px) {
    .leaderboard-chart-card,
    .leaderboard-ranking-card {
        padding: 24px;
    }

    .leaderboard-list-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .points-graph-summary {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   ADMIN DASHBOARD - CLEAN SIMPLIFIED LAYOUT
========================================================= */

.admin-dashboard-clean-page {
    max-width: 1500px;
    margin: 0 auto;
    padding-bottom: 90px !important;
}

.admin-clean-page-header h2 {
    font-size: 42px;
    margin-bottom: 8px;
}

.admin-clean-overview-grid {
    display: grid;
    grid-template-columns: 1.45fr 0.85fr;
    gap: 26px;
    margin-bottom: 44px;
}

.admin-clean-overview-card,
.admin-clean-priority-card {
    border-radius: 30px;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.admin-clean-overview-card {
    background:
        linear-gradient(135deg, rgba(91, 109, 246, 0.18), rgba(43, 196, 119, 0.12)),
        #111421;
}

.admin-clean-priority-card {
    background: #111421;
}

.admin-clean-priority-card.has-pending {
    border-color: rgba(250, 204, 21, 0.26);
}

.admin-clean-priority-card.is-clear {
    border-color: rgba(46, 204, 113, 0.28);
}

.admin-clean-mini-label {
    color: #9aa5ff;
    letter-spacing: 2.5px;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 14px;
}

.admin-clean-overview-card h3,
.admin-clean-priority-card h3 {
    font-size: 32px;
    color: #ffffff;
    margin-bottom: 14px;
}

.admin-clean-overview-card > p,
.admin-clean-priority-card > p {
    color: #d1d7ea;
    font-size: 16px;
    line-height: 1.75;
}

.admin-clean-overview-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.admin-clean-overview-pills span {
    display: inline-block;
    padding: 11px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.admin-priority-number {
    font-size: 72px;
    line-height: 1;
    font-weight: 900;
    margin: 10px 0 12px;
}

.admin-clean-priority-card.has-pending .admin-priority-number {
    color: #facc15;
}

.admin-clean-priority-card.is-clear .admin-priority-number {
    color: #2ecc71;
}


/* =========================================================
   ADMIN CLEAN SECTION
========================================================= */

.admin-clean-section {
    margin-top: 46px;
}

.admin-clean-section-header {
    margin-bottom: 26px;
}

.admin-clean-section-header h2 {
    font-size: 34px;
    color: #ffffff;
    margin-bottom: 8px;
}

.admin-clean-section-header p {
    color: #b8b8c8;
    font-size: 16px;
    line-height: 1.6;
}


/* =========================================================
   ADMIN KPI GRID
========================================================= */

.admin-clean-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.admin-clean-kpi-card {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    padding: 26px;
    border-radius: 26px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.20);
}

.admin-kpi-icon {
    font-size: 30px;
    margin-bottom: 16px;
}

.admin-clean-kpi-card h3 {
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 10px;
}

.admin-clean-kpi-card strong {
    color: #ffffff;
    font-size: 44px;
    line-height: 1;
    margin-bottom: 22px;
}

.admin-clean-kpi-card a {
    margin-top: auto;
    color: #b6c0ff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
}

.admin-clean-kpi-card a:hover {
    color: #ffffff;
}


/* =========================================================
   ADMIN ACTION REVIEW GRID
========================================================= */

.admin-action-review-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.admin-action-review-card {
    display: flex;
    flex-direction: column;
    min-height: 320px;
    padding: 28px;
    border-radius: 28px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22);
}

.admin-action-review-card.needs-action {
    border-color: rgba(250, 204, 21, 0.28);
}

.admin-action-review-card.clear-action {
    border-color: rgba(46, 204, 113, 0.22);
}

.admin-action-review-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.admin-review-icon {
    font-size: 34px;
}

.admin-review-count {
    min-width: 62px;
    height: 62px;
    padding: 0 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    font-size: 28px;
    font-weight: 900;
}

.admin-action-review-card h3 {
    color: #ffffff;
    font-size: 25px;
    margin-bottom: 12px;
}

.admin-action-review-card p {
    color: #b8b8c8;
    line-height: 1.7;
    margin-bottom: 22px;
}

.admin-action-review-card a,
.admin-action-review-card .btn-disabled {
    margin-top: auto;
}

.admin-action-review-card .btn,
.admin-action-review-card .btn-disabled {
    margin-top: 0 !important;
}


/* =========================================================
   ADMIN EVENT OPERATIONS
========================================================= */

.admin-event-operations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.admin-event-operation-card {
    display: flex;
    flex-direction: column;
    min-height: 330px;
    padding: 30px;
    border-radius: 28px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22);
}

.admin-event-operation-card h3 {
    color: #ffffff;
    font-size: 27px;
    margin-bottom: 18px;
}

.admin-event-operation-card > p {
    color: #b8b8c8;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 22px;
}

.admin-event-operation-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.admin-event-operation-meta strong {
    color: #ffffff;
    font-size: 22px;
    line-height: 1.35;
    margin-bottom: 4px;
}

.admin-event-operation-meta span {
    color: #d1d7ea;
    font-size: 15px;
}

.admin-countdown-active-badge {
    width: fit-content;
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(91, 109, 246, 0.18);
    color: #b6c0ff;
    font-size: 13px;
    font-weight: 900;
    border: 1px solid rgba(91, 109, 246, 0.28);
}

.admin-event-operation-card a {
    margin-top: auto;
}

.admin-event-operation-card .btn {
    margin-top: 0 !important;
}


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

.admin-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.admin-shortcut-card {
    display: flex;
    flex-direction: column;
    min-height: 220px;
    padding: 26px;
    border-radius: 26px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.07);
    text-decoration: none;
    transition: 0.25s ease;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.admin-shortcut-card:hover {
    transform: translateY(-5px);
    border-color: rgba(91, 109, 246, 0.36);
}

.admin-shortcut-card span {
    font-size: 32px;
    margin-bottom: 18px;
}

.admin-shortcut-card strong {
    color: #ffffff;
    font-size: 22px;
    margin-bottom: 10px;
}

.admin-shortcut-card p {
    color: #b8b8c8;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   RESPONSIVE ADMIN DASHBOARD
========================================================= */

@media (max-width: 1250px) {
    .admin-clean-kpi-grid,
    .admin-shortcut-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-action-review-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1000px) {
    .admin-clean-overview-grid,
    .admin-event-operations-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .admin-clean-page-header h2 {
        font-size: 34px;
    }

    .admin-clean-kpi-grid,
    .admin-shortcut-grid {
        grid-template-columns: 1fr;
    }

    .admin-clean-overview-card,
    .admin-clean-priority-card,
    .admin-action-review-card,
    .admin-event-operation-card {
        padding: 24px;
    }
}

/* =========================================================
   ADMIN ATTENDANCE - EVENT FILTERED REVIEW PAGE
========================================================= */

.admin-attendance-page {
    max-width: 1550px;
    margin: 0 auto;
    padding-bottom: 90px !important;
}

.admin-attendance-header h2 {
    font-size: 42px;
    margin-bottom: 8px;
}


/* =========================================================
   EVENT FILTER
========================================================= */

.attendance-event-filter-card {
    margin-top: 28px;
    margin-bottom: 30px;
    padding: 28px;
    border-radius: 28px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22);
}

.attendance-event-filter-form {
    display: flex;
    align-items: end;
    gap: 18px;
    flex-wrap: wrap;
}

.attendance-filter-field {
    flex: 1;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.attendance-filter-field label {
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

.attendance-filter-field select {
    width: 100%;
    height: 56px;
    padding: 0 18px;
    border-radius: 16px;
    border: none;
    outline: none;
    background: #090d1a;
    color: #ffffff;
    font-size: 15px;
}

.attendance-reset-filter-btn {
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 16px;
    background: #2a2f3f;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 900;
    transition: 0.25s ease;
}

.attendance-reset-filter-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}


/* =========================================================
   SELECTED EVENT CARD
========================================================= */

.selected-attendance-event-card {
    margin-bottom: 30px;
    padding: 28px 30px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(91, 109, 246, 0.20), rgba(43, 196, 119, 0.14));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.selected-attendance-label {
    display: inline-block;
    margin-bottom: 12px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: #d9def5;
    font-size: 13px;
    font-weight: 900;
}

.selected-attendance-event-card h3 {
    color: #ffffff;
    font-size: 30px;
    margin-bottom: 16px;
}

.selected-attendance-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.selected-attendance-event-meta span {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(17, 20, 33, 0.72);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}


/* =========================================================
   ATTENDANCE SUMMARY
========================================================= */

.attendance-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-bottom: 46px;
}

.attendance-summary-card {
    min-height: 190px;
    padding: 26px;
    border-radius: 26px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.20);
    display: flex;
    flex-direction: column;
}

.attendance-summary-card span {
    font-size: 30px;
    margin-bottom: 18px;
}

.attendance-summary-card h3 {
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 12px;
}

.attendance-summary-card strong {
    color: #ffffff;
    font-size: 44px;
    line-height: 1;
}

.pending-summary-card {
    border-color: rgba(250, 204, 21, 0.22);
}

.approved-summary-card {
    border-color: rgba(46, 204, 113, 0.24);
}

.rejected-summary-card {
    border-color: rgba(239, 68, 68, 0.24);
}


/* =========================================================
   ATTENDANCE REVIEW SECTION
========================================================= */

.attendance-review-section-header {
    margin-bottom: 28px;
}

.attendance-review-section-header h2 {
    color: #ffffff;
    font-size: 35px;
    margin-bottom: 8px;
}

.attendance-review-section-header p {
    color: #b8b8c8;
    font-size: 16px;
}

.attendance-review-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.attendance-review-card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border-radius: 28px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
}

.attendance-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.attendance-card-header h3 {
    color: #ffffff;
    font-size: 27px;
    margin-bottom: 6px;
}

.attendance-card-header p {
    color: #b8b8c8;
    font-size: 15px;
    line-height: 1.5;
}

.attendance-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 15px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.pending-attendance-pill {
    background: rgba(250, 204, 21, 0.14);
    color: #facc15;
}

.approved-attendance-pill {
    background: rgba(46, 204, 113, 0.16);
    color: #2ecc71;
}

.rejected-attendance-pill {
    background: rgba(239, 68, 68, 0.14);
    color: #ff7d7d;
}

.attendance-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.attendance-detail-meta span {
    display: inline-block;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #d9def5;
    font-size: 13px;
    font-weight: 800;
}


/* =========================================================
   EVIDENCE SECTIONS
========================================================= */

.attendance-evidence-section,
.attendance-gps-box,
.attendance-ai-review-box {
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 22px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.attendance-evidence-section h4,
.attendance-gps-box h4,
.attendance-ai-review-box h4 {
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 16px;
}

.attendance-selfie-box {
    width: 100%;
    height: 330px;
    border-radius: 20px;
    overflow: hidden;
    background: #050816;
}

.attendance-selfie-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.attendance-empty-evidence {
    padding: 26px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    color: #b8b8c8;
    text-align: center;
    font-weight: 800;
}

.attendance-gps-box p {
    color: #d1d7ea;
    margin-bottom: 9px;
}

.attendance-location-btn {
    margin-top: 12px !important;
}

.attendance-no-gps {
    color: #facc15 !important;
}

.attendance-ai-review-box p {
    color: #d1d7ea;
    line-height: 1.7;
}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.attendance-admin-action-area {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 10px;
}

.attendance-admin-action-area a {
    text-decoration: none;
}

.attendance-admin-action-area .btn {
    margin-top: 0 !important;
}

.attendance-approve-btn {
    background: linear-gradient(135deg, #1f9d55, #2bc477) !important;
}

.attendance-reject-btn {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
}

.attendance-final-status {
    margin-top: 0 !important;
    font-size: 16px;
    font-weight: 900;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.attendance-empty-state-card {
    grid-column: 1 / -1;
    padding: 60px 30px;
    border-radius: 28px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.attendance-empty-state-card h3 {
    color: #ffffff;
    font-size: 30px;
    margin-bottom: 12px;
}

.attendance-empty-state-card p {
    color: #b8b8c8;
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   RESPONSIVE ATTENDANCE PAGE
========================================================= */

@media (max-width: 1200px) {
    .attendance-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .attendance-review-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .admin-attendance-header h2 {
        font-size: 34px;
    }

    .attendance-filter-field {
        min-width: 100%;
    }

    .attendance-summary-grid {
        grid-template-columns: 1fr;
    }

    .attendance-selfie-box {
        height: 280px;
    }

    .attendance-review-card {
        padding: 22px;
    }
}

/* =========================================================
   ADMIN MANAGE EVENTS - WIDE EVENT CARD LAYOUT
========================================================= */

.admin-manage-events-page {
    max-width: 1550px;
    margin: 0 auto;
    padding-bottom: 90px !important;
}

.admin-events-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 38px;
}

.admin-events-page-header h2 {
    font-size: 42px;
    margin-bottom: 8px;
}

.admin-add-event-link {
    text-decoration: none;
}

.admin-add-event-btn {
    margin-top: 0 !important;
    padding: 16px 28px !important;
    font-weight: 900 !important;
}


/* =========================================================
   EVENT WIDE LIST
========================================================= */

.admin-events-wide-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.admin-event-wide-card {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 28px;
    padding: 26px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
    transition: 0.25s ease;
}

.admin-event-wide-card:hover {
    transform: translateY(-3px);
    border-color: rgba(91, 109, 246, 0.30);
}


/* =========================================================
   POSTER PREVIEW
========================================================= */

.admin-event-poster-preview {
    width: 230px;
    height: 290px;
    border-radius: 24px;
    overflow: hidden;
    background: #090d1a;
    align-self: start;
}

.admin-event-poster-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.admin-event-no-poster {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b8b8c8;
    font-size: 15px;
    font-weight: 900;
}


/* =========================================================
   EVENT DETAILS
========================================================= */

.admin-event-wide-details {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-event-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.admin-event-title-row h3 {
    color: #ffffff;
    font-size: 32px;
    line-height: 1.2;
    margin-top: 12px;
}

.admin-event-status-chip,
.admin-event-type-chip {
    display: inline-block;
    width: fit-content;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.admin-upcoming-chip {
    background: rgba(46, 204, 113, 0.16);
    color: #2ecc71;
}

.admin-past-chip {
    background: rgba(255, 255, 255, 0.08);
    color: #b8b8c8;
}

.admin-event-type-chip {
    background: rgba(91, 109, 246, 0.18);
    color: #c1c8ff;
    margin-top: 2px;
}


/* =========================================================
   EVENT INFO GRID
========================================================= */

.admin-event-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.admin-event-info-item {
    min-height: 92px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
}

.admin-event-info-item > span {
    font-size: 22px;
    line-height: 1.3;
}

.admin-event-info-item strong {
    display: block;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 6px;
}

.admin-event-info-item p {
    color: #d9def5;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.admin-event-description-box {
    margin-bottom: 24px;
    padding: 18px 20px;
    border-radius: 22px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.admin-event-description-box strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 10px;
}

.admin-event-description-box p {
    color: #b8b8c8;
    font-size: 15px;
    line-height: 1.75;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* =========================================================
   ACTION BUTTONS BY FUNCTION
========================================================= */

.admin-event-action-buttons {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-event-action-buttons a {
    text-decoration: none;
}

.admin-event-btn {
    margin-top: 0 !important;
    min-height: 48px;
    padding: 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.registrations-btn {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
}

.certificate-btn {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
}

.edit-event-btn {
    background: linear-gradient(135deg, #f59e0b, #f97316) !important;
}

.delete-event-btn {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.admin-events-empty-state {
    padding: 70px 30px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.admin-events-empty-state h3 {
    color: #ffffff;
    font-size: 32px;
    margin-bottom: 12px;
}

.admin-events-empty-state p {
    color: #b8b8c8;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 20px;
}


/* =========================================================
   RESPONSIVE ADMIN MANAGE EVENTS
========================================================= */

@media (max-width: 1250px) {
    .admin-event-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 950px) {
    .admin-event-wide-card {
        grid-template-columns: 1fr;
    }

    .admin-event-poster-preview {
        width: 100%;
        max-width: 280px;
        height: 350px;
    }
}

@media (max-width: 768px) {
    .admin-events-page-header h2 {
        font-size: 34px;
    }

    .admin-event-title-row h3 {
        font-size: 26px;
    }

    .admin-event-info-grid {
        grid-template-columns: 1fr;
    }

    .admin-event-wide-card {
        padding: 20px;
    }

    .admin-event-btn {
        width: 100%;
    }

    .admin-event-action-buttons a {
        width: 100%;
    }
}

/* =========================================================
   ADMIN MANAGE EVENTS - SEARCH & FILTER
========================================================= */

.admin-event-filter-card {
    margin-bottom: 34px;
    padding: 28px;
    border-radius: 28px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22);
}

.admin-event-filter-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.8fr 0.8fr;
    gap: 20px;
    align-items: end;
}

.admin-event-filter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-event-filter-group label {
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

.admin-event-filter-group input,
.admin-event-filter-group select {
    width: 100%;
    height: 56px;
    padding: 0 18px;
    border-radius: 16px;
    border: none;
    outline: none;
    background: #090d1a;
    color: #ffffff;
    font-size: 15px;
    box-sizing: border-box;
}

.admin-event-filter-group input::placeholder {
    color: #8f96aa;
}

.admin-event-filter-bottom {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.admin-event-filter-bottom p {
    color: #b8b8c8;
    font-size: 15px;
    margin: 0;
}

.admin-event-filter-bottom strong {
    color: #ffffff;
}

.admin-event-reset-filter-btn {
    height: 48px;
    padding: 0 22px;
    border: none;
    border-radius: 999px;
    background: #2a2f3f;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.25s ease;
}

.admin-event-reset-filter-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.admin-filter-empty-state {
    margin-top: 28px;
    padding: 60px 30px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.admin-filter-empty-state h3 {
    color: #ffffff;
    font-size: 30px;
    margin-bottom: 12px;
}

.admin-filter-empty-state p {
    color: #b8b8c8;
    font-size: 16px;
}

@media (max-width: 1100px) {
    .admin-event-filter-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ADMIN MANAGE EVENTS - GALLERY BUTTON
========================================================= */

.gallery-event-btn {
    background: linear-gradient(135deg, #0891b2, #06b6d4) !important;
}

/* =========================================================
   ADMIN REGISTRATIONS - MANUAL OPEN/CLOSE CONTROL
========================================================= */

.registration-control-card {
    margin: 30px 0;
    padding: 28px;
    border-radius: 28px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22);
}

.registration-control-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.registration-control-label {
    color: #9aa5ff;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 10px;
}

.registration-control-card h3 {
    color: #ffffff;
    font-size: 30px;
    margin-bottom: 10px;
}

.registration-control-note {
    color: #d1d7ea;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 18px;
}

.registration-control-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.registration-control-meta span {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.registration-control-actions form {
    margin: 0;
}

.registration-control-actions .btn,
.registration-control-actions .btn-disabled {
    margin-top: 0 !important;
    min-width: 220px;
    min-height: 52px;
    font-weight: 900;
}

.close-registration-btn {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
}

.reopen-registration-btn {
    background: linear-gradient(135deg, #16a34a, #2bc477) !important;
}

.registration-control-warning {
    margin-top: 22px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(250, 204, 21, 0.12);
    border: 1px solid rgba(250, 204, 21, 0.18);
    color: #facc15;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
}

/* Status borders */
.registration-status-open {
    border-color: rgba(46, 204, 113, 0.28);
}

.registration-status-manual-closed {
    border-color: rgba(239, 68, 68, 0.30);
}

.registration-status-deadline {
    border-color: rgba(250, 204, 21, 0.28);
}

.registration-status-full {
    border-color: rgba(249, 115, 22, 0.30);
}

.registration-status-ended {
    border-color: rgba(148, 163, 184, 0.24);
}

@media (max-width: 768px) {
    .registration-control-card {
        padding: 22px;
    }

    .registration-control-card h3 {
        font-size: 25px;
    }

    .registration-control-actions {
        width: 100%;
    }

    .registration-control-actions form,
    .registration-control-actions .btn,
    .registration-control-actions .btn-disabled {
        width: 100%;
    }
}

/* =========================================================
   EDIT EVENT PAGE - WIDE ADMIN FORM LAYOUT
========================================================= */

.edit-event-page {
    width: 100%;
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 60px 100px;
    box-sizing: border-box;
}

.edit-event-page-header {
    margin-bottom: 34px;
}

.edit-event-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    transition: 0.25s ease;
}

.edit-event-back-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #5b6df6, #2bc477);
}

.edit-event-page-header h1 {
    color: #ffffff;
    font-size: 50px;
    line-height: 1.08;
    margin-bottom: 12px;
}

.edit-event-page-header p {
    max-width: 900px;
    color: #b8b8c8;
    font-size: 17px;
    line-height: 1.75;
}


/* =========================================================
   TOP GRID: CURRENT POSTER + REGISTRATION CONTROL
========================================================= */

.edit-event-top-grid {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 28px;
    margin-bottom: 34px;
}

.edit-event-current-poster-card,
.edit-event-registration-control-card {
    padding: 30px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.edit-event-current-poster-card h3,
.edit-event-registration-control-card h3 {
    color: #ffffff;
    font-size: 28px;
    margin-bottom: 18px;
}

.edit-event-current-poster-card p {
    color: #b8b8c8;
    font-size: 15px;
    line-height: 1.7;
    margin-top: 18px;
}

.edit-event-current-poster-box {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    overflow: hidden;
    background: #090d1a;
}

.edit-event-current-poster-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.edit-event-no-poster {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #090d1a;
    color: #b8b8c8;
    font-size: 15px;
    font-weight: 900;
}

.edit-event-card-label {
    color: #9aa5ff;
    letter-spacing: 2.5px;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 12px;
}

.edit-event-registration-status-text {
    color: #ffffff;
    font-size: 17px;
    margin-bottom: 14px;
}

.edit-event-registration-helper {
    max-width: 850px;
    color: #d1d7ea;
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 24px;
}

.registration-open-label {
    color: #70ffaf;
    font-weight: 900;
}

.registration-closed-label {
    color: #ff9f99;
    font-weight: 900;
}

.manual-close-btn {
    margin-top: 0 !important;
    background: linear-gradient(135deg, #ff6b6b, #d7263d) !important;
    font-weight: 900 !important;
}

.manual-reopen-btn {
    margin-top: 0 !important;
    background: linear-gradient(135deg, #3bb78f, #0bab64) !important;
    font-weight: 900 !important;
}


/* =========================================================
   FORM SECTIONS
========================================================= */

.edit-event-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.edit-event-section-card {
    padding: 34px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.20);
}

.edit-event-section-heading {
    margin-bottom: 28px;
}

.edit-event-section-heading h2 {
    color: #ffffff;
    font-size: 32px;
    margin-bottom: 8px;
}

.edit-event-section-heading p {
    color: #b8b8c8;
    font-size: 16px;
    line-height: 1.7;
}

.edit-event-form-grid {
    display: grid;
    gap: 22px;
}

.edit-event-form-grid.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.edit-event-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.edit-event-field label {
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

.edit-event-field input,
.edit-event-field select,
.edit-event-field textarea {
    width: 100%;
    padding: 15px 16px;
    border-radius: 16px;
    border: none;
    outline: none;
    background: #090d1a;
    color: #ffffff;
    font-size: 15px;
    box-sizing: border-box;
}

.edit-event-field input[type="file"] {
    padding: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.20);
    cursor: pointer;
}

.edit-event-field input[type="file"]::file-selector-button {
    margin-right: 14px;
    padding: 10px 16px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
}

.edit-event-field textarea {
    min-height: 150px;
    resize: vertical;
}

.full-width-field {
    margin-top: 22px;
}

.edit-event-helper-note {
    color: #b8b8c8;
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   COUNTDOWN SETTINGS
========================================================= */

.edit-event-countdown-feature-box {
    margin-top: 26px;
    padding: 22px;
    border-radius: 24px;
    background: rgba(91, 109, 246, 0.12);
    border: 1px solid rgba(91, 109, 246, 0.20);
}

.edit-event-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
}

.edit-event-checkbox-label input {
    width: auto;
    margin-top: 4px;
    transform: scale(1.25);
}

.edit-event-checkbox-label span {
    color: #d9def5;
    font-size: 15px;
    line-height: 1.7;
}

.edit-event-checkbox-label strong {
    color: #ffffff;
    font-size: 16px;
}

.edit-event-countdown-banner-box {
    display: none;
    margin-top: 24px;
    padding: 24px;
    border-radius: 24px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.edit-event-current-banner-preview {
    margin-bottom: 18px;
}

.edit-event-current-banner-preview img {
    width: 100%;
    max-width: 560px;
    border-radius: 18px;
    display: block;
}

.edit-event-current-banner-preview p {
    color: #b8b8c8;
    font-size: 14px;
    margin-top: 10px;
}


/* =========================================================
   PAYMENT QR SETTINGS
========================================================= */

.edit-event-payment-qr-box {
    margin-top: 26px;
    padding: 24px;
    border-radius: 24px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.edit-event-current-qr-preview {
    margin-bottom: 24px;
}

.edit-event-current-qr-preview h3 {
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 14px;
}

.edit-event-current-qr-preview img {
    width: 100%;
    max-width: 280px;
    border-radius: 18px;
    display: block;
}


/* =========================================================
   BUS SETTINGS
========================================================= */

.edit-event-bus-settings-box {
    display: none;
    margin-top: 24px;
    padding: 24px;
    border-radius: 24px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.06);
}


/* =========================================================
   IMAGE UPLOAD + CROPPER
========================================================= */

.edit-event-image-upload-layout {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 34px;
    align-items: start;
}

.edit-event-crop-area {
    max-width: 520px !important;
    margin: 0 !important;
}

.edit-event-crop-area .crop-preview {
    width: 360px;
    height: 450px;
    max-width: 100%;
}


/* =========================================================
   SUBMIT AREA
========================================================= */

.edit-event-submit-area {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding-top: 6px;
}

.edit-event-update-btn {
    min-width: 220px;
    margin-top: 0 !important;
    padding: 17px 30px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.edit-event-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 26px;
    border-radius: 14px;
    background: #2a2f3f;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 900;
    transition: 0.25s ease;
}

.edit-event-cancel-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}


/* =========================================================
   RESPONSIVE EDIT EVENT
========================================================= */

@media (max-width: 1150px) {
    .edit-event-top-grid,
    .edit-event-image-upload-layout {
        grid-template-columns: 1fr;
    }

    .edit-event-form-grid.two-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .edit-event-page {
        padding-left: 24px;
        padding-right: 24px;
    }

    .edit-event-page-header h1 {
        font-size: 40px;
    }

    .edit-event-section-card,
    .edit-event-current-poster-card,
    .edit-event-registration-control-card {
        padding: 24px;
    }

    .edit-event-section-heading h2 {
        font-size: 27px;
    }

    .edit-event-submit-area {
        flex-direction: column;
        align-items: stretch;
    }

    .edit-event-update-btn,
    .edit-event-cancel-btn {
        width: 100%;
    }

    .edit-event-crop-area .crop-preview {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
    }
}

/* =========================================================
   ADD EVENT PAGE - WIDE ADMIN FORM LAYOUT
========================================================= */

.add-event-page {
    width: 100%;
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 60px 100px;
    box-sizing: border-box;
}

.add-event-page-header {
    margin-bottom: 34px;
}

.add-event-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    transition: 0.25s ease;
}

.add-event-back-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #5b6df6, #2bc477);
}

.add-event-page-header h1 {
    color: #ffffff;
    font-size: 50px;
    line-height: 1.08;
    margin-bottom: 12px;
}

.add-event-page-header p {
    max-width: 950px;
    color: #b8b8c8;
    font-size: 17px;
    line-height: 1.75;
}

.add-event-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.add-event-section-card {
    padding: 34px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.20);
}

.add-event-section-heading {
    margin-bottom: 28px;
}

.add-event-section-heading h2 {
    color: #ffffff;
    font-size: 32px;
    margin-bottom: 8px;
}

.add-event-section-heading p {
    color: #b8b8c8;
    font-size: 16px;
    line-height: 1.7;
}

.add-event-form-grid {
    display: grid;
    gap: 22px;
}

.add-event-form-grid.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.add-event-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.add-event-field label {
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

.add-event-field input,
.add-event-field select,
.add-event-field textarea {
    width: 100%;
    padding: 15px 16px;
    border-radius: 16px;
    border: none;
    outline: none;
    background: #090d1a;
    color: #ffffff;
    font-size: 15px;
    box-sizing: border-box;
}

.add-event-field input[type="file"] {
    padding: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.20);
    cursor: pointer;
}

.add-event-field input[type="file"]::file-selector-button {
    margin-right: 14px;
    padding: 10px 16px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
}

.add-event-field textarea {
    min-height: 150px;
    resize: vertical;
}

.full-width-field {
    margin-top: 22px;
}

.add-event-helper-note {
    color: #b8b8c8;
    font-size: 14px;
    line-height: 1.6;
}


/* Countdown */
.add-event-countdown-feature-box {
    margin-top: 26px;
    padding: 22px;
    border-radius: 24px;
    background: rgba(91, 109, 246, 0.12);
    border: 1px solid rgba(91, 109, 246, 0.20);
}

.add-event-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
}

.add-event-checkbox-label input {
    width: auto;
    margin-top: 4px;
    transform: scale(1.25);
}

.add-event-checkbox-label span {
    color: #d9def5;
    font-size: 15px;
    line-height: 1.7;
}

.add-event-checkbox-label strong {
    color: #ffffff;
    font-size: 16px;
}

.add-event-countdown-banner-box,
.add-event-paid-fields-box,
.add-event-bus-fields-box {
    display: none;
    margin-top: 24px;
    padding: 24px;
    border-radius: 24px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.06);
}


/* Certificate */
.add-event-certificate-section {
    border-color: rgba(168, 85, 247, 0.26);
}

.add-event-certificate-toggle-box {
    padding: 24px;
    border-radius: 24px;
    background: rgba(168, 85, 247, 0.10);
    border: 1px solid rgba(168, 85, 247, 0.20);
}

.add-event-certificate-note {
    margin-top: 20px;
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(250, 204, 21, 0.10);
    border: 1px solid rgba(250, 204, 21, 0.18);
    color: #facc15;
    font-size: 14px;
    line-height: 1.7;
}


/* Image Cropper */
.add-event-image-upload-layout {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 34px;
    align-items: start;
}

.add-event-crop-area {
    max-width: 520px !important;
    margin: 0 !important;
}

.add-event-crop-area .crop-preview {
    width: 360px;
    height: 450px;
    max-width: 100%;
}


/* Notification */
.add-event-notification-box {
    padding: 24px;
    border-radius: 24px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.add-event-notification-box hr {
    margin: 22px 0;
    opacity: 0.18;
}


/* Submit */
.add-event-submit-area {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding-top: 6px;
}

.add-event-submit-btn {
    min-width: 220px;
    margin-top: 0 !important;
    padding: 17px 30px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.add-event-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 26px;
    border-radius: 14px;
    background: #2a2f3f;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 900;
    transition: 0.25s ease;
}

.add-event-cancel-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}


/* Responsive */
@media (max-width: 1150px) {
    .add-event-form-grid.two-col,
    .add-event-image-upload-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .add-event-page {
        padding-left: 24px;
        padding-right: 24px;
    }

    .add-event-page-header h1 {
        font-size: 40px;
    }

    .add-event-section-card {
        padding: 24px;
    }

    .add-event-section-heading h2 {
        font-size: 27px;
    }

    .add-event-submit-area {
        flex-direction: column;
        align-items: stretch;
    }

    .add-event-submit-btn,
    .add-event-cancel-btn {
        width: 100%;
    }

    .add-event-crop-area .crop-preview {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
    }
}

/* =========================================================
   DELETE EVENT REVIEW PAGE
========================================================= */

.delete-event-review-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 60px 100px;
    box-sizing: border-box;
}

.delete-event-review-header {
    margin-bottom: 34px;
}

.delete-review-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    transition: 0.25s ease;
}

.delete-review-back-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #5b6df6, #2bc477);
}

.delete-event-review-header h1 {
    color: #ffffff;
    font-size: 50px;
    margin-bottom: 12px;
}

.delete-event-review-header p {
    color: #b8b8c8;
    font-size: 17px;
    line-height: 1.75;
}


/* Warning Banner */
.delete-event-warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 30px;
    padding: 28px;
    border-radius: 28px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.28);
}

.delete-warning-icon {
    font-size: 42px;
    line-height: 1;
}

.delete-event-warning-banner h2 {
    color: #ffffff;
    font-size: 28px;
    margin-bottom: 8px;
}

.delete-event-warning-banner p {
    color: #ffd4d4;
    font-size: 16px;
    line-height: 1.7;
}


/* Main Grid */
.delete-event-review-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr;
    gap: 28px;
    margin-bottom: 30px;
}


/* Event Preview */
.delete-event-preview-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 26px;
    padding: 28px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.delete-event-poster-box {
    width: 220px;
    height: 285px;
    border-radius: 24px;
    overflow: hidden;
    background: #090d1a;
}

.delete-event-poster-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.delete-event-no-poster {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b8b8c8;
    font-size: 15px;
    font-weight: 900;
}

.delete-event-preview-content h2 {
    color: #ffffff;
    font-size: 34px;
    line-height: 1.2;
    margin: 14px 0 18px;
}

.delete-event-status-chip {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.delete-upcoming-chip {
    background: rgba(46, 204, 113, 0.16);
    color: #2ecc71;
}

.delete-past-chip {
    background: rgba(255, 255, 255, 0.08);
    color: #b8b8c8;
}

.delete-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.delete-event-meta span {
    display: inline-block;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #d9def5;
    font-size: 14px;
    font-weight: 800;
}

.delete-event-description-box {
    padding: 18px;
    border-radius: 20px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.delete-event-description-box strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 10px;
}

.delete-event-description-box p {
    color: #b8b8c8;
    font-size: 15px;
    line-height: 1.7;
}


/* Impact Card */
.delete-event-impact-card {
    padding: 30px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.delete-event-impact-card h2 {
    color: #ffffff;
    font-size: 30px;
    margin-bottom: 12px;
}

.delete-impact-intro {
    color: #b8b8c8;
    line-height: 1.7;
    margin-bottom: 24px;
}

.delete-impact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

.delete-impact-item {
    padding: 18px;
    border-radius: 22px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.delete-impact-item span {
    display: block;
    font-size: 28px;
    margin-bottom: 10px;
}

.delete-impact-item strong {
    display: block;
    color: #ffffff;
    font-size: 34px;
    line-height: 1;
    margin-bottom: 8px;
}

.delete-impact-item p {
    color: #b8b8c8;
    font-size: 14px;
    line-height: 1.5;
}

.delete-certificate-status-box {
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    margin-bottom: 18px;
}

.delete-cert-enabled,
.delete-cert-disabled {
    display: inline-block;
    margin-left: 10px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.delete-cert-enabled {
    background: rgba(46, 204, 113, 0.16);
    color: #2ecc71;
}

.delete-cert-disabled {
    background: rgba(255, 255, 255, 0.08);
    color: #b8b8c8;
}

.delete-impact-note {
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(250, 204, 21, 0.12);
    border: 1px solid rgba(250, 204, 21, 0.18);
    color: #facc15;
    font-size: 14px;
    line-height: 1.7;
}


/* Final Confirm */
.delete-event-final-card {
    padding: 32px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(239, 68, 68, 0.26);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.delete-event-final-card h2 {
    color: #ffffff;
    font-size: 32px;
    margin-bottom: 12px;
}

.delete-event-final-card p {
    color: #d1d7ea;
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 24px;
}

.delete-event-final-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.delete-event-final-actions form {
    margin: 0;
}

.delete-event-cancel-link {
    min-height: 54px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #2a2f3f;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 900;
}

.delete-event-confirm-btn {
    min-height: 54px;
    padding: 0 28px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.25s ease;
}

.delete-event-confirm-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}


/* Responsive */
@media (max-width: 1150px) {
    .delete-event-review-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .delete-event-preview-card {
        grid-template-columns: 1fr;
    }

    .delete-event-poster-box {
        width: 100%;
        max-width: 280px;
        height: 350px;
    }
}

@media (max-width: 768px) {
    .delete-event-review-page {
        padding-left: 24px;
        padding-right: 24px;
    }

    .delete-event-review-header h1 {
        font-size: 40px;
    }

    .delete-impact-grid {
        grid-template-columns: 1fr;
    }

    .delete-event-final-actions,
    .delete-event-cancel-link,
    .delete-event-final-actions form,
    .delete-event-confirm-btn {
        width: 100%;
    }

    .delete-event-confirm-btn {
        display: block;
    }
}

/* =========================================================
   ADMIN EVENTS - ARCHIVE ACTION
========================================================= */

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

.admin-view-archive-btn {
    margin-top: 0 !important;
    padding: 16px 28px !important;
    background: linear-gradient(135deg, #475569, #64748b) !important;
    font-weight: 900 !important;
}

.archive-event-btn {
    background: linear-gradient(135deg, #475569, #64748b) !important;
}


/* =========================================================
   ARCHIVE EVENT REVIEW PAGE
========================================================= */

.archive-event-review-page,
.archived-events-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 60px 100px;
    box-sizing: border-box;
}

.archive-event-review-header,
.archived-events-header {
    margin-bottom: 34px;
}

.archive-review-back-btn,
.archived-events-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    transition: 0.25s ease;
}

.archive-review-back-btn:hover,
.archived-events-back-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #5b6df6, #2bc477);
}

.archive-event-review-header h1,
.archived-events-header h1 {
    color: #ffffff;
    font-size: 50px;
    margin-bottom: 12px;
}

.archive-event-review-header p,
.archived-events-header p {
    color: #b8b8c8;
    font-size: 17px;
    line-height: 1.75;
}

.archive-event-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 30px;
    padding: 28px;
    border-radius: 28px;
    background: rgba(100, 116, 139, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.24);
}

.archive-info-icon {
    font-size: 42px;
    line-height: 1;
}

.archive-event-info-banner h2 {
    color: #ffffff;
    font-size: 28px;
    margin-bottom: 8px;
}

.archive-event-info-banner p {
    color: #d1d7ea;
    font-size: 16px;
    line-height: 1.7;
}

.archive-event-review-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr;
    gap: 28px;
    margin-bottom: 30px;
}

.archive-event-preview-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 26px;
    padding: 28px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.archive-event-poster-box {
    width: 220px;
    height: 285px;
    border-radius: 24px;
    overflow: hidden;
    background: #090d1a;
}

.archive-event-poster-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.archive-event-no-poster {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b8b8c8;
    font-size: 15px;
    font-weight: 900;
}

.archive-event-preview-content h2 {
    color: #ffffff;
    font-size: 34px;
    line-height: 1.2;
    margin: 14px 0 18px;
}

.archive-event-status-chip,
.archived-event-chip {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.archive-upcoming-chip {
    background: rgba(46, 204, 113, 0.16);
    color: #2ecc71;
}

.archive-past-chip,
.archived-event-chip {
    background: rgba(255, 255, 255, 0.08);
    color: #b8b8c8;
}

.archive-event-meta,
.archived-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.archive-event-meta span,
.archived-event-meta span {
    display: inline-block;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #d9def5;
    font-size: 14px;
    font-weight: 800;
}

.archive-event-description-box {
    padding: 18px;
    border-radius: 20px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.archive-event-description-box strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 10px;
}

.archive-event-description-box p {
    color: #b8b8c8;
    font-size: 15px;
    line-height: 1.7;
}

.archive-event-impact-card {
    padding: 30px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.archive-event-impact-card h2 {
    color: #ffffff;
    font-size: 30px;
    margin-bottom: 12px;
}

.archive-impact-intro {
    color: #b8b8c8;
    line-height: 1.7;
    margin-bottom: 24px;
}

.archive-impact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

.archive-impact-item {
    padding: 18px;
    border-radius: 22px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.archive-impact-item span {
    display: block;
    font-size: 28px;
    margin-bottom: 10px;
}

.archive-impact-item strong {
    display: block;
    color: #ffffff;
    font-size: 34px;
    line-height: 1;
    margin-bottom: 8px;
}

.archive-impact-item p {
    color: #b8b8c8;
    font-size: 14px;
}

.archive-certificate-status-box {
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    margin-bottom: 18px;
}

.archive-cert-enabled,
.archive-cert-disabled {
    display: inline-block;
    margin-left: 10px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.archive-cert-enabled {
    background: rgba(46, 204, 113, 0.16);
    color: #2ecc71;
}

.archive-cert-disabled {
    background: rgba(255, 255, 255, 0.08);
    color: #b8b8c8;
}

.archive-impact-note {
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(91, 109, 246, 0.12);
    border: 1px solid rgba(91, 109, 246, 0.18);
    color: #c1c8ff;
    font-size: 14px;
    line-height: 1.7;
}

.archive-event-final-card {
    padding: 32px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.archive-event-final-card h2 {
    color: #ffffff;
    font-size: 32px;
    margin-bottom: 12px;
}

.archive-event-final-card p {
    color: #d1d7ea;
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 24px;
}

.archive-event-final-actions,
.archived-event-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.archive-event-final-actions form {
    margin: 0;
}

.archive-event-cancel-link {
    min-height: 54px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #2a2f3f;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 900;
}

.archive-event-confirm-btn {
    min-height: 54px;
    padding: 0 28px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #475569, #64748b);
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.25s ease;
}

.archive-event-confirm-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}


/* Archived Events List */
.archived-events-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.archived-event-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    padding: 28px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.archived-event-poster-box {
    width: 220px;
    height: 285px;
    border-radius: 24px;
    overflow: hidden;
    background: #090d1a;
}

.archived-event-poster-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.archived-event-no-poster {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b8b8c8;
    font-weight: 900;
}

.archived-event-details h2 {
    color: #ffffff;
    font-size: 34px;
    margin: 14px 0 18px;
}

.archived-event-date-note {
    color: #b8b8c8;
    margin-bottom: 22px;
}

.archived-view-btn {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
}

.archived-gallery-btn {
    background: linear-gradient(135deg, #0891b2, #06b6d4) !important;
}

.archived-restore-btn {
    background: linear-gradient(135deg, #16a34a, #2bc477) !important;
}

.archived-events-empty-state {
    padding: 70px 30px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.archived-events-empty-state h2 {
    color: #ffffff;
    font-size: 34px;
    margin-bottom: 12px;
}

.archived-events-empty-state p {
    color: #b8b8c8;
    line-height: 1.7;
}


/* Responsive */
@media (max-width: 1150px) {
    .archive-event-review-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .archive-event-preview-card,
    .archived-event-card {
        grid-template-columns: 1fr;
    }

    .archive-event-poster-box,
    .archived-event-poster-box {
        width: 100%;
        max-width: 280px;
        height: 350px;
    }
}

@media (max-width: 768px) {
    .archive-event-review-page,
    .archived-events-page {
        padding-left: 24px;
        padding-right: 24px;
    }

    .archive-event-review-header h1,
    .archived-events-header h1 {
        font-size: 40px;
    }

    .archive-impact-grid {
        grid-template-columns: 1fr;
    }

    .archive-event-final-actions,
    .archive-event-cancel-link,
    .archive-event-final-actions form,
    .archive-event-confirm-btn {
        width: 100%;
    }
}

/* =========================================================
   MANAGE ADMINS - LAST LOGIN + SUMMARY
========================================================= */

.manage-admin-page {
    max-width: 1500px;
    margin: 0 auto;
    padding-bottom: 90px !important;
}

.manage-admin-header h2 {
    font-size: 42px;
    margin-bottom: 8px;
}

.admin-account-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 32px 0 38px;
}

.admin-account-summary-card {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    padding: 26px;
    border-radius: 26px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.20);
}

.admin-account-summary-card span {
    font-size: 30px;
    margin-bottom: 16px;
}

.admin-account-summary-card h3 {
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 12px;
}

.admin-account-summary-card strong {
    color: #ffffff;
    font-size: 44px;
    line-height: 1;
}

.admin-last-login-active {
    color: #d1d7ea;
    font-weight: 800;
    line-height: 1.6;
}

.admin-never-login-badge {
    display: inline-block;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.14);
    color: #facc15;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.current-admin-badge {
    display: inline-block;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(46, 204, 113, 0.16);
    color: #2ecc71;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

@media (max-width: 1000px) {
    .admin-account-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   EDIT MERCHANDISE PAGE
========================================================= */

.edit-merch-page {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 60px 100px;
    box-sizing: border-box;
}

.edit-merch-header {
    margin-bottom: 34px;
}

.edit-merch-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    transition: 0.25s ease;
}

.edit-merch-back-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #5b6df6, #2bc477);
}

.edit-merch-header h1 {
    color: #ffffff;
    font-size: 50px;
    line-height: 1.08;
    margin-bottom: 12px;
}

.edit-merch-header p {
    color: #b8b8c8;
    font-size: 17px;
    line-height: 1.75;
}


/* =========================================================
   PREVIEW GRID
========================================================= */

.edit-merch-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-bottom: 32px;
}

.edit-merch-preview-card {
    padding: 30px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.edit-merch-preview-card h2 {
    color: #ffffff;
    font-size: 28px;
    margin-bottom: 20px;
}

.edit-merch-product-preview {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    overflow: hidden;
    background: #090d1a;
}

.edit-merch-product-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.edit-merch-qr-preview {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    overflow: hidden;
    background: #090d1a;
}

.edit-merch-qr-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.edit-merch-empty-preview {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    background: #090d1a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b8b8c8;
    font-size: 15px;
    font-weight: 900;
}

.qr-empty-preview {
    max-width: 280px;
    aspect-ratio: 1 / 1;
}

.edit-merch-preview-note {
    margin-top: 18px;
    color: #b8b8c8;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   FORM SECTIONS
========================================================= */

.edit-merch-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.edit-merch-section-card {
    padding: 34px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.20);
}

.edit-merch-section-heading {
    margin-bottom: 28px;
}

.edit-merch-section-heading h2 {
    color: #ffffff;
    font-size: 32px;
    margin-bottom: 8px;
}

.edit-merch-section-heading p {
    color: #b8b8c8;
    font-size: 16px;
    line-height: 1.7;
}

.edit-merch-form-grid {
    display: grid;
    gap: 22px;
}

.edit-merch-form-grid.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.edit-merch-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.edit-merch-field label {
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

.edit-merch-field input,
.edit-merch-field textarea {
    width: 100%;
    padding: 15px 16px;
    border-radius: 16px;
    border: none;
    outline: none;
    background: #090d1a;
    color: #ffffff;
    font-size: 15px;
    box-sizing: border-box;
}

.edit-merch-field input[type="file"] {
    padding: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.20);
    cursor: pointer;
}

.edit-merch-field input[type="file"]::file-selector-button {
    margin-right: 14px;
    padding: 10px 16px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
}

.edit-merch-field textarea {
    min-height: 150px;
    resize: vertical;
}

.edit-merch-helper-note {
    color: #b8b8c8;
    font-size: 14px;
    line-height: 1.6;
}

.full-width-field {
    margin-top: 22px;
}


/* =========================================================
   PRODUCT IMAGE CROPPER
========================================================= */

.edit-merch-image-layout {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 34px;
    align-items: start;
}

.edit-merch-crop-area {
    max-width: 520px !important;
    margin: 0 !important;
}

.edit-merch-crop-area .crop-preview {
    width: 360px;
    height: 450px;
    max-width: 100%;
}


/* =========================================================
   QR SECTION
========================================================= */

.edit-merch-qr-section {
    border-color: rgba(91, 109, 246, 0.22);
}

.edit-merch-qr-upload-box {
    padding: 24px;
    border-radius: 24px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.06);
}


/* =========================================================
   SUBMIT AREA
========================================================= */

.edit-merch-submit-area {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding-top: 6px;
}

.edit-merch-update-btn {
    min-width: 240px;
    margin-top: 0 !important;
    padding: 17px 30px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.edit-merch-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 26px;
    border-radius: 14px;
    background: #2a2f3f;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 900;
    transition: 0.25s ease;
}

.edit-merch-cancel-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1150px) {
    .edit-merch-preview-grid,
    .edit-merch-image-layout {
        grid-template-columns: 1fr;
    }

    .edit-merch-form-grid.two-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .edit-merch-page {
        padding-left: 24px;
        padding-right: 24px;
    }

    .edit-merch-header h1 {
        font-size: 40px;
    }

    .edit-merch-section-card,
    .edit-merch-preview-card {
        padding: 24px;
    }

    .edit-merch-section-heading h2 {
        font-size: 27px;
    }

    .edit-merch-submit-area {
        flex-direction: column;
        align-items: stretch;
    }

    .edit-merch-update-btn,
    .edit-merch-cancel-btn {
        width: 100%;
    }

    .edit-merch-crop-area .crop-preview {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
    }
}

/* =========================================================
   CLICKABLE EVENT LOCATION - GOOGLE MAPS
========================================================= */

.event-location-link {
    color: inherit;
    text-decoration: none;
    transition: 0.22s ease;
    cursor: pointer;
}

.event-location-link:hover {
    color: #7dd3fc;
    text-decoration: underline;
}

.event-location-link.inline-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.location-open-map-note {
    font-size: 12px;
    opacity: 0.72;
    margin-left: 5px;
}

/* =========================================================
   SHARE EVENT LINK BUTTON
========================================================= */

.share-event-btn {
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
    margin-top: 14px !important;
    font-weight: 900 !important;
}

.share-admin-event-btn {
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
}

/* =========================================================
   EVENT DETAIL - SHARE EVENT BUTTON
========================================================= */

.event-detail-share-wrap {
    margin-top: 18px;
}

.event-detail-share-btn {
    width: 100%;
    min-height: 58px;
    margin-top: 0 !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 16px 32px rgba(20, 184, 166, 0.18);
}

.event-detail-share-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.full-width-registration-link {
    grid-column: 1 / -1;
}

.registration-not-open-box {
    padding: 24px;
    border-radius: 22px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.28);
}

.registration-not-open-box h2 {
    color: #93c5fd;
    margin-bottom: 10px;
}

.registration-not-open-box p {
    color: #dbeafe;
    line-height: 1.7;
}

  .registration-closed-box,
        .registration-not-open-box,
        .transport-info-box,
        .transport-form-box,
        .whatsapp-approved-box,
        .participant-edit-box {
            margin-top: 22px;
            padding: 22px;
            border-radius: 18px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.12);
        }

        .registration-closed-box {
            border-color: rgba(244,67,54,0.45);
            background: rgba(244,67,54,0.12);
        }

        .registration-not-open-box {
            border-color: rgba(59, 130, 246, 0.45);
            background: rgba(59, 130, 246, 0.12);
        }

        .registration-not-open-box h2 {
            color: #93c5fd;
            margin-bottom: 10px;
        }

        .registration-not-open-box p {
            color: #dbeafe;
            line-height: 1.7;
        }

        .transport-info-box h3,
        .transport-form-box h3,
        .registration-closed-box h3,
        .whatsapp-approved-box h3,
        .participant-edit-box h3 {
            margin-bottom: 12px;
        }

        .transport-stat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 14px;
            margin-top: 15px;
        }

        .transport-stat {
            padding: 14px;
            border-radius: 14px;
            background: rgba(255,255,255,0.05);
        }

        .transport-choice-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 16px;
        }

        .transport-choice-option {
            padding: 16px;
            border-radius: 16px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.12);
            cursor: pointer;
        }

        .transport-choice-option input {
            margin-right: 10px;
        }

        .self-transport-fields {
            margin-top: 18px;
            display: none;
        }

        .self-transport-grid,
        .participant-edit-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 16px;
        }

        .transport-field,
        .participant-field {
            display: flex;
            flex-direction: column;
        }

        .transport-field label,
        .participant-field label {
            margin-bottom: 8px;
            font-weight: 600;
        }

        .transport-field input,
        .transport-field select,
        .participant-field input {
            width: 100%;
            padding: 13px 14px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.15);
            background: rgba(255,255,255,0.07);
            color: white;
            box-sizing: border-box;
        }

        .participant-event-note {
            margin-bottom: 18px;
            padding: 14px 16px;
            border-radius: 14px;
            background: rgba(102, 126, 234, 0.14);
            border: 1px solid rgba(102, 126, 234, 0.35);
            line-height: 1.5;
        }

        .event-registration-submit-area {
            margin-top: 24px;
        }

        .whatsapp-event-btn {
            display: inline-block;
            margin-top: 12px;
            padding: 13px 18px;
            border-radius: 999px;
            text-decoration: none;
            font-weight: 700;
            color: white;
            background: linear-gradient(135deg, #25D366, #128C7E);
        }
        
        
/* =========================================================
   EVENT DETAIL - LONG DESCRIPTION SAFETY
========================================================= */

.event-detail-description {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.75;
}

.event-detail-info-card {
    min-width: 0;
    overflow: hidden;
}

/* Prevent long text from breaking card layouts */
.card p,
.event-detail-info-card p,
.event-registration-flow-card p {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* =========================================================
   ADMIN REGISTRATION DELETE BUTTON
========================================================= */

.delete-registration-btn {
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.25s ease;
    white-space: nowrap;
}

.delete-registration-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}
/* =========================================================
   ADD EVENT - APPAREL SETTINGS
========================================================= */

.add-event-apparel-section {
    border-color: rgba(20, 184, 166, 0.22);
}

.add-event-apparel-toggle-box {
    padding: 24px;
    border-radius: 24px;
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.18);
    margin-bottom: 22px;
}

.add-event-apparel-fields-box {
    display: none;
    padding: 26px;
    border-radius: 26px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.apparel-size-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.apparel-size-checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 15px;
    border-radius: 16px;
    background: #111421;
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: 0.22s ease;
}

.apparel-size-checkbox-grid label:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.45);
}

.apparel-size-checkbox-grid input {
    accent-color: #14b8a6;
}

/* =========================================================
   FORM REQUIRED / VALIDATION UI
========================================================= */

.required-star {
    color: #ef4444;
    font-weight: 900;
    margin-left: 4px;
}

.input-error {
    border: 2px solid #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14) !important;
}

.field-error {
    margin-top: 8px;
    color: #fecaca;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

.add-event-field input:required,
.add-event-field select:required,
.add-event-field textarea:required {
    border-left: 4px solid rgba(239, 68, 68, 0.65);
}

.apparel-size-checkbox-grid.input-error {
    border: 2px solid #ef4444;
    border-radius: 18px;
    padding: 12px;
}

/* =========================================================
   EDIT EVENT - APPAREL SETTINGS
========================================================= */

.edit-event-apparel-section {
    border-color: rgba(20, 184, 166, 0.22);
}

.edit-event-apparel-toggle-box {
    padding: 24px;
    border-radius: 24px;
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.18);
    margin-bottom: 22px;
}

.edit-event-apparel-fields-box {
    display: none;
    padding: 26px;
    border-radius: 26px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.edit-event-current-sizing-chart-preview {
    margin: 12px 0 16px;
    padding: 14px;
    border-radius: 18px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.edit-event-current-sizing-chart-preview img {
    width: 100%;
    max-width: 420px;
    max-height: 280px;
    object-fit: contain;
    border-radius: 14px;
    background: #ffffff;
    display: block;
    margin-bottom: 10px;
}

.edit-event-current-sizing-chart-preview p {
    margin: 0;
    color: #b8b8c8;
    font-size: 13px;
}

/* =========================================================
   EVENT DETAIL - APPAREL SIZE SELECTION
========================================================= */

.event-detail-apparel-info-box {
    margin-top: 18px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(20, 184, 166, 0.10);
    border: 1px solid rgba(20, 184, 166, 0.25);
}

.event-detail-apparel-info-box strong {
    color: #ffffff;
}

.event-detail-apparel-info-box p {
    margin-top: 8px;
    color: #d1d7ea;
    line-height: 1.6;
}

.event-apparel-selection-box {
    margin-top: 22px;
    padding: 24px;
    border-radius: 18px;
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid rgba(20, 184, 166, 0.22);
}

.event-apparel-selection-box h3 {
    margin-bottom: 10px;
    color: #ffffff;
}

.event-apparel-selection-box p {
    color: #d1d7ea;
    line-height: 1.6;
}

.event-apparel-chart-box {
    margin: 18px 0;
    padding: 14px;
    border-radius: 18px;
    background: #ffffff;
    display: inline-block;
    max-width: 100%;
}

.event-apparel-chart-box img {
    width: 100%;
    max-width: 620px;
    max-height: 520px;
    object-fit: contain;
    display: block;
    border-radius: 12px;
}

.event-apparel-note {
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    color: #dbeafe;
    line-height: 1.6;
}

.apparel-size-field {
    margin-top: 18px;
    max-width: 360px;
}

.apparel-size-field select {
    width: 100%;
    padding: 13px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.07);
    color: white;
    box-sizing: border-box;
}

/* =========================================================
   ADMIN REGISTRATIONS - APPAREL SIZE SUMMARY
========================================================= */

.apparel-size-summary-card {
    margin-top: 24px;
    margin-bottom: 24px;
}

.apparel-size-summary-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.apparel-size-summary-header h3 {
    margin-bottom: 6px;
}

.apparel-size-summary-header p {
    color: #b8b8c8;
    line-height: 1.6;
    margin: 0;
}

.apparel-summary-label {
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.14);
    color: #99f6e4;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.apparel-size-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 14px;
}

.apparel-size-summary-item {
    padding: 18px;
    border-radius: 18px;
    background: #090d1a;
    border: 1px solid rgba(255,255,255,0.07);
    text-align: center;
}

.apparel-size-summary-item strong {
    display: block;
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 8px;
}

.apparel-size-summary-item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.18);
    color: #99f6e4;
    font-size: 20px;
    font-weight: 900;
}

.apparel-size-empty {
    padding: 20px;
    border-radius: 16px;
    background: #090d1a;
    color: #b8b8c8;
    text-align: center;
}

.apparel-size-table-pill {
    display: inline-flex;
    margin-top: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.16);
    color: #99f6e4;
    font-size: 12px;
    font-weight: 900;
}

/* =========================================================
   MERCHANDISE SIZE / APPAREL SETTINGS
========================================================= */

.merch-size-toggle-box {
    padding: 20px;
    border-radius: 20px;
    background: rgba(249, 115, 22, 0.08);
    border: 1px solid rgba(249, 115, 22, 0.22);
    margin-bottom: 18px;
}

.merch-size-fields-box {
    display: none;
    padding: 22px;
    border-radius: 22px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 18px;
}

/* Jangan paksa 3 column. Panel ni sempit, jadi 1 column lebih sesuai. */
.merch-size-stock-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.merch-size-stock-row {
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 62px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.merch-size-stock-row label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    color: #fed7aa !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.merch-size-stock-row label input[type="checkbox"],
.merch-size-stock-row input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    accent-color: #f97316 !important;
}

.merch-size-stock-row input[type="number"] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(249, 115, 22, 0.22) !important;
    background: #0f172a !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.merch-size-stock-row input[type="number"]:disabled {
    opacity: 0.42 !important;
    cursor: not-allowed !important;
    background: rgba(15, 23, 42, 0.62) !important;
}

.merch-size-stock-row input[type="number"]:not(:disabled) {
    opacity: 1 !important;
    background: rgba(15, 23, 42, 0.96) !important;
    border-color: rgba(249, 115, 22, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.10) !important;
}
/* =========================================================
   EDIT MERCH - SIZING CHART PREVIEW
========================================================= */

.edit-merch-size-section {
    border-color: rgba(20, 184, 166, 0.22);
}

.edit-merch-sizing-chart-preview {
    margin: 12px 0 16px;
    padding: 14px;
    border-radius: 18px;
    background: #090d1a;
    border: 1px solid rgba(255,255,255,0.08);
}

.edit-merch-sizing-chart-preview img {
    width: 100%;
    max-width: 420px;
    max-height: 280px;
    object-fit: contain;
    border-radius: 14px;
    background: #ffffff;
    display: block;
    margin-bottom: 10px;
}

.edit-merch-sizing-chart-preview p {
    margin: 0;
    color: #b8b8c8;
    font-size: 13px;
}

/* =========================================================
   MERCH DETAIL / CHECKOUT SIZE DISPLAY
========================================================= */

.merch-detail-size-info-box {
    margin: 18px 0;
    padding: 18px;
    border-radius: 18px;
    background: rgba(20, 184, 166, 0.10);
    border: 1px solid rgba(20, 184, 166, 0.24);
}

.merch-detail-size-info-box h3 {
    margin-bottom: 8px;
}

.merch-size-chart-link {
    display: inline-block;
    margin: 10px 0;
    color: #99f6e4;
    font-weight: 900;
    text-decoration: none;
}

.merch-size-chart-link:hover {
    text-decoration: underline;
}

.merch-detail-size-pill-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.merch-detail-size-pill {
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.18);
    color: #99f6e4;
    font-size: 13px;
    font-weight: 900;
}

.checkout-sizing-chart-box {
    margin: 10px 0 14px;
    padding: 12px;
    border-radius: 16px;
    background: #ffffff;
    display: inline-block;
    max-width: 100%;
}

.checkout-sizing-chart-box img {
    max-width: 420px;
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    display: block;
    border-radius: 12px;
}

.checkout-size-helper {
    margin-top: 8px;
    color: #b8b8c8;
    font-size: 13px;
    line-height: 1.5;
}

/* =========================================================
   MERCH SIZE DISPLAY POLISH
========================================================= */

.merch-card-size-info {
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(20, 184, 166, 0.10);
    border: 1px solid rgba(20, 184, 166, 0.22);
}

.merch-card-size-info span {
    display: inline-block;
    color: #99f6e4;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.merch-card-size-info p {
    margin: 0;
    color: #d1d7ea;
    font-size: 13px;
    line-height: 1.5;
}

.merch-selected-size-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.16);
    color: #99f6e4;
    font-size: 13px;
    font-weight: 900;
}

/* =========================================================
   PUBLIC / GUEST EVENT REGISTRATION SETTING
========================================================= */

.add-event-public-registration-box,
.edit-event-public-registration-box {
    padding: 22px;
    border-radius: 22px;
    background: rgba(91, 109, 246, 0.08);
    border: 1px solid rgba(91, 109, 246, 0.22);
    margin-top: 22px;
    margin-bottom: 22px;
}

/* =========================================================
   GUEST EVENT REGISTRATION
========================================================= */

.guest-event-recommend-box {
    margin: 20px 0 24px;
    padding: 22px;
    border-radius: 20px;
    background: rgba(91, 109, 246, 0.10);
    border: 1px solid rgba(91, 109, 246, 0.24);
}

.guest-event-recommend-box h3 {
    margin-bottom: 8px;
}

.guest-event-recommend-box p {
    color: #d1d7ea;
    line-height: 1.6;
}

.guest-event-action-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

 .event-success-wrapper {
            max-width: 850px;
            margin: auto;
            text-align: center;
        }

        .event-success-card {
            padding: 36px;
        }

        .event-success-icon {
            font-size: 78px;
            margin-bottom: 18px;
        }

        .event-success-summary {
            margin-top: 28px;
            padding: 24px;
            text-align: left;
            border-radius: 20px;
            background: rgba(255,255,255,0.06);
        }

        .event-success-summary p {
            margin: 10px 0;
        }

        .guest-success-note {
            margin-top: 24px;
            padding: 22px;
            border-radius: 20px;
            text-align: left;
            background: rgba(91, 109, 246, 0.10);
            border: 1px solid rgba(91, 109, 246, 0.25);
        }

        .guest-success-note h3 {
            margin-bottom: 8px;
        }

        .guest-success-note p {
            color: #d1d7ea;
            line-height: 1.6;
        }

        .event-success-whatsapp {
            margin-top: 28px;
            padding: 24px;
            border-radius: 20px;
            background: rgba(37,211,102,0.12);
            border: 1px solid rgba(37,211,102,0.4);
        }

        .event-success-whatsapp a {
            display: inline-block;
            margin-top: 14px;
            padding: 14px 20px;
            border-radius: 999px;
            color: white;
            text-decoration: none;
            font-weight: 700;
            background: linear-gradient(135deg, #25D366, #128C7E);
        }

        .event-success-actions {
            margin-top: 28px;
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .event-success-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.68);
            backdrop-filter: blur(7px);
            z-index: 20000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.28s ease, visibility 0.28s ease;
        }

        .event-success-modal-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .event-success-modal {
            width: 100%;
            max-width: 560px;
            padding: 34px;
            border-radius: 28px;
            background: linear-gradient(135deg, #111b30, #0b1427);
            border: 1px solid rgba(255,255,255,0.14);
            box-shadow: 0 24px 70px rgba(0,0,0,0.55);
            text-align: center;
            transform: translateY(18px) scale(0.97);
            transition: transform 0.28s ease;
        }

        .event-success-modal-overlay.show .event-success-modal {
            transform: translateY(0) scale(1);
        }

        .success-modal-icon {
            width: 92px;
            height: 92px;
            margin: 0 auto 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 44px;
            background: linear-gradient(135deg, #2ecc71, #00c853);
            box-shadow: 0 16px 32px rgba(0, 200, 83, 0.28);
        }

        .event-success-modal h2 {
            margin-bottom: 12px;
            font-size: 30px;
        }

        .event-success-modal p {
            line-height: 1.55;
            opacity: 0.94;
        }

        .modal-event-name {
            margin: 20px 0;
            padding: 18px;
            border-radius: 18px;
            background: rgba(255,255,255,0.07);
            font-size: 20px;
            font-weight: 800;
        }

        .event-success-modal-actions {
            margin-top: 24px;
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .modal-whatsapp-btn {
            display: inline-block;
            padding: 14px 20px;
            border-radius: 999px;
            color: white;
            text-decoration: none;
            font-weight: 800;
            background: linear-gradient(135deg, #25D366, #128C7E);
        }

        .modal-close-btn {
            padding: 14px 20px;
            border: none;
            border-radius: 999px;
            color: white;
            font-weight: 800;
            cursor: pointer;
            background: linear-gradient(135deg, #667eea, #2ecc71);
        }

        @media (max-width: 600px) {
            .event-success-modal {
                padding: 26px 20px;
            }

            .event-success-modal h2 {
                font-size: 24px;
            }
        }

        /* =========================================================
   ADMIN REGISTRATIONS - MEMBER / GUEST BADGES
========================================================= */

.guest-registration-pill,
.member-registration-pill {
    display: inline-flex;
    margin: 6px 0;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.35px;
}

.guest-registration-pill {
    background: rgba(91, 109, 246, 0.18);
    color: #c7d2fe;
}

.member-registration-pill {
    background: rgba(20, 184, 166, 0.16);
    color: #99f6e4;
}

 .payment-summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 18px;
            margin-bottom: 28px;
        }

        .payment-filter-card {
            margin-bottom: 28px;
        }

        .payment-filter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 18px;
            margin-top: 18px;
        }

        .payment-filter-field {
            display: flex;
            flex-direction: column;
        }

        .payment-filter-field label {
            margin-bottom: 8px;
            font-weight: 600;
        }

        .payment-filter-field input,
        .payment-filter-field select {
            width: 100%;
            padding: 13px 14px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.15);
            background: rgba(255,255,255,0.07);
            color: white;
            box-sizing: border-box;
        }

        .payment-filter-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 22px;
        }

        .event-payment-table-wrapper {
            overflow-x: auto;
            border-radius: 18px;
            margin-top: 18px;
        }

        .event-payment-table {
            width: 100%;
            min-width: 1750px;
            border-collapse: collapse;
        }

        .event-payment-table th,
        .event-payment-table td {
            padding: 16px 14px;
            border-bottom: 1px solid rgba(255,255,255,0.10);
            vertical-align: top;
            text-align: left;
        }

        .event-payment-table th {
            background: rgba(255,255,255,0.09);
            white-space: nowrap;
        }

        .event-payment-table tbody tr:hover {
            background: rgba(255,255,255,0.04);
        }

        .participant-detail-block,
        .transport-detail-block {
            min-width: 250px;
            line-height: 1.55;
        }

        .participant-detail-block strong,
        .transport-detail-block strong {
            font-weight: 700;
        }

        .payment-event-block {
            min-width: 220px;
            line-height: 1.55;
        }

        .status-badge {
            display: inline-block;
            padding: 7px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap;
        }

        .status-pending {
            background: rgba(255, 152, 0, 0.18);
            color: #ffd08a;
            border: 1px solid rgba(255, 152, 0, 0.45);
        }

        .status-approved {
            background: rgba(0, 200, 83, 0.18);
            color: #70ffaf;
            border: 1px solid rgba(0, 200, 83, 0.45);
        }

        .status-rejected {
            background: rgba(244, 67, 54, 0.18);
            color: #ff9f99;
            border: 1px solid rgba(244, 67, 54, 0.45);
        }

        .receipt-btn {
            display: inline-block;
            padding: 10px 14px;
            border-radius: 999px;
            text-decoration: none;
            font-weight: 700;
            color: white;
            background: linear-gradient(135deg, #667eea, #2ecc71);
        }

        .payment-action-cell {
            min-width: 220px;
        }

        .payment-action-form {
            margin-bottom: 10px;
        }

        .payment-action-form input[type="text"] {
            width: 100%;
            margin-top: 8px;
            margin-bottom: 8px;
            padding: 11px 12px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.15);
            background: rgba(255,255,255,0.07);
            color: white;
            box-sizing: border-box;
        }

        .approve-payment-btn,
        .reject-payment-btn {
            width: 100%;
            padding: 11px 14px;
            border: none;
            border-radius: 12px;
            color: white;
            font-weight: 800;
            cursor: pointer;
        }

        .approve-payment-btn {
            background: linear-gradient(135deg, #3bb78f, #0bab64);
        }

        .reject-payment-btn {
            background: linear-gradient(135deg, #ff6b6b, #d7263d);
        }

        .small-muted {
            font-size: 13px;
            opacity: 0.72;
        }

        .guest-registration-pill,
        .member-registration-pill {
            display: inline-flex;
            margin: 6px 0;
            padding: 4px 9px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.35px;
        }

        .guest-registration-pill {
            background: rgba(91, 109, 246, 0.18);
            color: #c7d2fe;
        }

        .member-registration-pill {
            background: rgba(20, 184, 166, 0.16);
            color: #99f6e4;
        }

/* =========================================================
   GUEST TRACK EVENT REGISTRATION PAGE
   Dark URRC theme - scoped supaya tak kacau page lain
========================================================= */

.track-registration-body {
    background: #050816 !important;
    margin: 0;
    font-family: Arial, sans-serif;
    color: #ffffff !important;
}

/* Fix navbar text/logo color because track body uses scoped color */
html[data-theme="dark"] .track-registration-body .navbar h1,
html[data-theme="dark"] .track-registration-body .navbar a,
html[data-theme="dark"] .track-registration-body .navbar-dropdown-btn {
    color: #ffffff !important;
}

.track-registration-body .track-wrapper {
    min-height: 100vh;
    padding: 150px 24px 80px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background:
        radial-gradient(circle at top left, rgba(91, 109, 246, 0.14), transparent 38%),
        radial-gradient(circle at bottom right, rgba(43, 196, 119, 0.10), transparent 34%),
        #050816;
}

.track-registration-body .track-container {
    width: 100%;
    max-width: 980px;
}

.track-registration-body .track-header {
    text-align: center;
    margin-bottom: 34px;
}

.track-registration-body .track-header h1 {
    font-size: 44px;
    line-height: 1.08;
    margin-bottom: 14px;
    color: #ffffff;
    font-weight: 900;
}

.track-registration-body .track-header p {
    max-width: 720px;
    margin: 0 auto;
    color: #b8b8c8;
    font-size: 16px;
    line-height: 1.7;
}

.track-registration-body .track-card {
    background: #111421;
    border-radius: 28px;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    margin-bottom: 28px;
}

.track-registration-body .track-form {
    display: grid;
    gap: 22px;
}

.track-registration-body .form-group label {
    display: block;
    font-weight: 900;
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 14px;
}

.track-registration-body .form-group input {
    width: 100%;
    height: 56px;
    padding: 0 18px;
    border-radius: 16px;
    border: none;
    outline: none;
    background: #090d1a;
    color: #ffffff;
    font-size: 15px;
    box-sizing: border-box;
}

.track-registration-body .form-group input::placeholder {
    color: #8f96aa;
}

.track-registration-body .form-group input:focus {
    box-shadow: 0 0 0 3px rgba(91, 109, 246, 0.28);
}

.track-registration-body .btn-track {
    width: 100%;
    min-height: 56px;
    border: none;
    padding: 0 22px;
    border-radius: 16px;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.25s ease;
    box-shadow: 0 16px 35px rgba(43, 196, 119, 0.18);
}

.track-registration-body .btn-track:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.track-registration-body .error-box {
    background: rgba(239, 68, 68, 0.14);
    color: #ffb4b4;
    border: 1px solid rgba(239, 68, 68, 0.35);
    padding: 16px 18px;
    border-radius: 16px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 700;
}

.track-registration-body .result-title {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.track-registration-body .result-title h2 {
    margin: 0;
    font-size: 28px;
    color: #ffffff;
}

.track-registration-body .status-badge {
    display: inline-block;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.track-registration-body .status-approved {
    background: rgba(46, 204, 113, 0.16);
    color: #70ffaf;
    border: 1px solid rgba(46, 204, 113, 0.38);
}

.track-registration-body .status-rejected {
    background: rgba(239, 68, 68, 0.14);
    color: #ff9f99;
    border: 1px solid rgba(239, 68, 68, 0.38);
}

.track-registration-body .status-pending {
    background: rgba(250, 204, 21, 0.14);
    color: #facc15;
    border: 1px solid rgba(250, 204, 21, 0.32);
}

.track-registration-body .info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.track-registration-body .info-box {
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    padding: 18px;
}

.track-registration-body .info-box small {
    display: block;
    color: #8f96aa;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.track-registration-body .info-box strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
    word-break: break-word;
    line-height: 1.5;
}

.track-registration-body .note-box {
    margin-top: 22px;
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(91, 109, 246, 0.12);
    border: 1px solid rgba(91, 109, 246, 0.22);
    color: #d1d7ea;
    font-size: 14px;
    line-height: 1.7;
}

.track-registration-body .whatsapp-box {
    margin-top: 22px;
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(37, 211, 102, 0.12);
    border: 1px solid rgba(37, 211, 102, 0.35);
    color: #b9ffd4;
}

.track-registration-body .whatsapp-box a {
    color: #70ffaf;
    font-weight: 900;
    text-decoration: underline;
}

.track-registration-body .back-link {
    text-align: center;
    margin-top: 30px;
}

.track-registration-body .back-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    border-radius: 999px;
    background: #2a2f3f;
    color: #ffffff;
    text-decoration: none;
    font-weight: 900;
    transition: 0.25s ease;
}

.track-registration-body .back-link a:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #5b6df6, #2bc477);
}

/* Make footer dark if footer appears on this page */
.track-registration-body .footer {
    margin-top: 0;
    background: #050816;
}

@media (max-width: 700px) {
    .track-registration-body .track-wrapper {
        padding: 125px 18px 60px;
    }

    .track-registration-body .track-header h1 {
        font-size: 32px;
    }

    .track-registration-body .track-card {
        padding: 24px;
        border-radius: 24px;
    }

    .track-registration-body .info-grid {
        grid-template-columns: 1fr;
    }
}
        
        @media (max-width: 700px) {
            .track-wrapper {
                padding-top: 95px;
            }

            .track-header h1 {
                font-size: 25px;
            }

            .track-card {
                padding: 22px;
            }

            .info-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* =========================================================
   TRACK REGISTRATION - WHATSAPP BUTTON POLISH
========================================================= */

.track-registration-body .whatsapp-box {
    margin-top: 22px;
    padding: 22px;
    border-radius: 22px;
    background: rgba(37, 211, 102, 0.10);
    border: 1px solid rgba(37, 211, 102, 0.32);
    color: #d9ffea;
}

.track-registration-body .whatsapp-box a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 14px 32px rgba(37, 211, 102, 0.18);
    transition: 0.25s ease;
}

.track-registration-body .whatsapp-box a:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

/* =========================================================
   ADMIN DASHBOARD - WEBSITE VISITOR ACTIVITY
========================================================= */

.admin-visitor-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.admin-visitor-card {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    padding: 26px;
    border-radius: 26px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.20);
    transition: 0.25s ease;
}

.admin-visitor-card:hover {
    transform: translateY(-4px);
    border-color: rgba(91, 109, 246, 0.30);
}

.admin-visitor-card.active-now-card {
    border-color: rgba(46, 204, 113, 0.22);
}

.admin-visitor-icon {
    font-size: 30px;
    margin-bottom: 16px;
}

.admin-visitor-card h3 {
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 10px;
}

.admin-visitor-card strong {
    color: #ffffff;
    font-size: 44px;
    line-height: 1;
    margin-bottom: 18px;
}

.admin-visitor-card p {
    color: #b8b8c8;
    font-size: 15px;
    line-height: 1.6;
    margin-top: auto;
}

.active-now-card strong {
    color: #70ffaf;
}

@media (max-width: 1250px) {
    .admin-visitor-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .admin-visitor-grid {
        grid-template-columns: 1fr;
    }

    .admin-visitor-card {
        min-height: 200px;
        padding: 24px;
    }
}

/* =========================================================
   ADMIN VISITOR ANALYTICS PAGE
========================================================= */

.admin-visitor-analytics-page {
    max-width: 1550px;
    margin: 0 auto;
    padding-bottom: 90px !important;
}

.admin-visitor-analytics-header {
    margin-bottom: 38px;
}

.visitor-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    transition: 0.25s ease;
}

.visitor-back-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #5b6df6, #2bc477);
}

.admin-visitor-analytics-header h1 {
    color: #ffffff;
    font-size: 50px;
    line-height: 1.08;
    margin-bottom: 12px;
}

.admin-visitor-analytics-header p {
    max-width: 900px;
    color: #b8b8c8;
    font-size: 17px;
    line-height: 1.75;
}

.visitor-empty-card {
    padding: 34px;
    border-radius: 28px;
}

.visitor-empty-card h2 {
    margin-bottom: 12px;
}

.visitor-empty-card p {
    color: #d1d7ea;
    line-height: 1.7;
}

.visitor-analytics-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 46px;
}

.visitor-analytics-card {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    padding: 26px;
    border-radius: 26px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.20);
    transition: 0.25s ease;
}

.visitor-analytics-card:hover {
    transform: translateY(-4px);
    border-color: rgba(91, 109, 246, 0.30);
}

.visitor-analytics-card.active-card {
    border-color: rgba(46, 204, 113, 0.24);
}

.visitor-analytics-card span {
    font-size: 32px;
    margin-bottom: 16px;
}

.visitor-analytics-card h3 {
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 12px;
}

.visitor-analytics-card strong {
    color: #ffffff;
    font-size: 46px;
    line-height: 1;
    margin-bottom: 18px;
}

.visitor-analytics-card.active-card strong {
    color: #70ffaf;
}

.visitor-analytics-card p {
    margin-top: auto;
    color: #b8b8c8;
    font-size: 15px;
    line-height: 1.6;
}

.visitor-analytics-section {
    margin-top: 46px;
}

.visitor-section-header {
    margin-bottom: 24px;
}

.visitor-section-header h2 {
    color: #ffffff;
    font-size: 34px;
    margin-bottom: 8px;
}

.visitor-section-header p {
    color: #b8b8c8;
    font-size: 16px;
    line-height: 1.6;
}

.visitor-table-card {
    padding: 24px;
    border-radius: 28px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22);
}

.visitor-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: 20px;
}

.visitor-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    background: #090d1a;
    overflow: hidden;
}

.recent-visitor-table {
    min-width: 1250px;
}

.visitor-table thead {
    background: linear-gradient(135deg, #5b6df6, #2bc477);
}

.visitor-table th {
    padding: 17px 16px;
    color: #ffffff;
    text-align: left;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.visitor-table td {
    padding: 17px 16px;
    color: #d9def5;
    font-size: 14px;
    line-height: 1.5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    vertical-align: top;
}

.visitor-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.visitor-table td strong {
    color: #ffffff;
    word-break: break-word;
}

.visitor-empty-row {
    text-align: center;
    padding: 40px 20px !important;
    color: #b8b8c8 !important;
}

.visitor-role-pill {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    white-space: nowrap;
}

.visitor-role-guest {
    background: rgba(91, 109, 246, 0.18);
    color: #c7d2fe;
}

.visitor-role-member {
    background: rgba(20, 184, 166, 0.16);
    color: #99f6e4;
}

.visitor-role-admin {
    background: rgba(250, 204, 21, 0.14);
    color: #facc15;
}

@media (max-width: 1100px) {
    .visitor-analytics-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .admin-visitor-analytics-page {
        padding-left: 24px;
        padding-right: 24px;
    }

    .admin-visitor-analytics-header h1 {
        font-size: 40px;
    }

    .visitor-analytics-summary-grid {
        grid-template-columns: 1fr;
    }

    .visitor-table-card {
        padding: 18px;
    }
}

.admin-visitor-link-card {
    text-decoration: none;
    color: inherit;
}

.admin-visitor-link-card:hover {
    cursor: pointer;
}

/* =========================================================
   ADMIN BADGE MANAGEMENT PAGE - PNG IMAGE VERSION
========================================================= */

.admin-badges-page {
    max-width: 1550px;
    margin: 0 auto;
    padding-bottom: 90px !important;
}

.admin-badges-header {
    margin-bottom: 36px;
}

.badge-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    transition: 0.25s ease;
}

.badge-back-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #5b6df6, #2bc477);
}

.admin-badges-header h1 {
    color: #ffffff;
    font-size: 50px;
    line-height: 1.08;
    margin-bottom: 12px;
}

.admin-badges-header p {
    max-width: 900px;
    color: #b8b8c8;
    font-size: 17px;
    line-height: 1.75;
}

.badge-success-alert,
.badge-error-alert {
    margin-bottom: 28px;
    padding: 18px 20px;
    border-radius: 18px;
    font-weight: 900;
}

.badge-success-alert {
    background: rgba(46, 204, 113, 0.14);
    border: 1px solid rgba(46, 204, 113, 0.32);
    color: #70ffaf;
}

.badge-error-alert {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.32);
    color: #ffb4b4;
}

.admin-badge-form-card {
    margin-bottom: 46px;
    padding: 34px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.admin-badge-form-card h2 {
    color: #ffffff;
    font-size: 32px;
    margin-bottom: 10px;
}

.admin-badge-form-card p {
    color: #b8b8c8;
    line-height: 1.7;
    margin-bottom: 26px;
}

.admin-badge-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.admin-badge-form-grid,
.admin-badge-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.badge-form-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.badge-form-field.full-width-field {
    grid-column: 1 / -1;
}

.badge-form-field label {
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

.badge-form-field input,
.badge-form-field textarea {
    width: 100%;
    padding: 15px 16px;
    border-radius: 16px;
    border: none;
    outline: none;
    background: #090d1a;
    color: #ffffff;
    font-size: 15px;
    box-sizing: border-box;
}

.badge-form-field input[type="file"] {
    border: 1px dashed rgba(255, 255, 255, 0.20);
    cursor: pointer;
}

.badge-form-field input[type="file"]::file-selector-button {
    margin-right: 14px;
    padding: 10px 16px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
}

.badge-form-field textarea {
    min-height: 110px;
    resize: vertical;
}

.badge-form-field input::placeholder,
.badge-form-field textarea::placeholder {
    color: #8f96aa;
}

.badge-form-field small {
    color: #8f96aa;
    font-size: 13px;
    line-height: 1.5;
}

.badge-submit-btn {
    width: fit-content;
    min-width: 180px;
    margin-top: 0 !important;
}

.badge-section-header {
    margin-bottom: 26px;
}

.badge-section-header h2 {
    color: #ffffff;
    font-size: 34px;
    margin-bottom: 8px;
}

.badge-section-header p {
    color: #b8b8c8;
    font-size: 16px;
    line-height: 1.6;
}

.admin-badge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.admin-badge-card {
    padding: 30px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.badge-active-card {
    border-color: rgba(46, 204, 113, 0.20);
}

.badge-inactive-card {
    opacity: 0.72;
    border-color: rgba(239, 68, 68, 0.20);
}

.badge-card-top {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.badge-image-preview {
    width: 92px;
    height: 92px;
    min-width: 92px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(91, 109, 246, 0.18), rgba(43, 196, 119, 0.12)),
        #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
}

.badge-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.badge-missing-image {
    color: #b8b8c8;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.badge-card-top h3 {
    color: #ffffff;
    font-size: 26px;
    margin-bottom: 8px;
}

.badge-current-image-name {
    margin-top: 8px;
    color: #8f96aa;
    font-size: 13px;
    word-break: break-all;
}

.badge-status-pill {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.badge-status-pill.active {
    background: rgba(46, 204, 113, 0.16);
    color: #70ffaf;
}

.badge-status-pill.inactive {
    background: rgba(239, 68, 68, 0.14);
    color: #ff9f99;
}

.badge-active-toggle {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #d9def5;
    font-weight: 900;
    cursor: pointer;
}

.badge-active-toggle.add-toggle {
    margin-top: 0;
}

.badge-active-toggle input {
    width: 18px;
    height: 18px;
}

.badge-card-actions {
    margin-top: 24px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.update-badge-btn {
    margin-top: 0 !important;
}

.delete-badge-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    transition: 0.25s ease;
}

.delete-badge-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.badge-empty-state {
    grid-column: 1 / -1;
    padding: 60px 30px;
    border-radius: 30px;
    background: #111421;
    text-align: center;
}

.badge-empty-state h3 {
    color: #ffffff;
    font-size: 30px;
    margin-bottom: 10px;
}

.badge-empty-state p {
    color: #b8b8c8;
}

@media (max-width: 1100px) {
    .admin-badge-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .admin-badges-page {
        padding-left: 24px;
        padding-right: 24px;
    }

    .admin-badges-header h1 {
        font-size: 40px;
    }

    .admin-badge-form-grid,
    .admin-badge-edit-grid {
        grid-template-columns: 1fr;
    }

    .admin-badge-form-card,
    .admin-badge-card {
        padding: 24px;
    }

    .badge-form-field.full-width-field {
        grid-column: auto;
    }

    .badge-card-top {
        align-items: flex-start;
    }

    .badge-card-actions,
    .badge-card-actions .btn,
    .delete-badge-btn {
        width: 100%;
    }
}

/* =========================================================
   MEMBER DASHBOARD - DYNAMIC PNG BADGE
========================================================= */

.member-badge-card {
    padding: 28px !important;
    border-radius: 28px !important;
    background:
        linear-gradient(135deg, rgba(91, 109, 246, 0.16), rgba(43, 196, 119, 0.10)),
        #111421 !important;
    border: 1px solid rgba(255, 255, 255, 0.09);
}

.member-badge-top {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.member-badge-image-wrap {
    width: 140px;
    height: 140px;
    min-width: 140px;
    border-radius: 28px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    box-sizing: border-box;
}

.member-badge-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.member-badge-placeholder {
    color: #b8b8c8;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.member-badge-info span,
.member-badge-points-box span {
    display: block;
    color: #9aa5ff;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.member-badge-info h3 {
    color: #ffffff;
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 10px;
}

.member-badge-info p {
    color: #d1d7ea;
    line-height: 1.7;
    margin: 0;
}

.member-badge-points-box {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 18px;
}

.member-badge-points-box > div {
    padding: 20px;
    border-radius: 20px;
    background: rgba(9, 13, 26, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.member-badge-points-box strong {
    display: block;
    color: #ffffff;
    font-size: 28px;
    line-height: 1.2;
}

.member-badge-points-box p {
    margin-top: 8px;
    color: #b8b8c8;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .member-badge-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .member-badge-image-wrap {
        width: 120px;
        height: 120px;
        min-width: 120px;
    }

    .member-badge-points-box {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   MEMBER DASHBOARD - MERGED POINTS + BADGE CARD
========================================================= */

.dashboard-merged-badge-card {
    padding: 30px !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at top right, rgba(43, 196, 119, 0.18), transparent 38%),
        linear-gradient(135deg, rgba(91, 109, 246, 0.18), rgba(43, 196, 119, 0.08)),
        #111421 !important;
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.merged-badge-header {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 26px;
    align-items: center;
    margin-bottom: 26px;
}

.merged-badge-image-wrap {
    width: 145px;
    height: 145px;
    border-radius: 30px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    box-sizing: border-box;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.25);
}

.merged-badge-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.merged-badge-label,
.merged-points-big-box span,
.merged-next-progress-box span {
    display: block;
    color: #9aa5ff;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.merged-badge-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.merged-badge-title-row h3 {
    color: #ffffff;
    font-size: 32px;
    line-height: 1.15;
    margin: 0;
}

.merged-next-badge-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.14);
    color: #facc15;
    border: 1px solid rgba(250, 204, 21, 0.22);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.merged-next-badge-pill.max {
    background: rgba(46, 204, 113, 0.16);
    color: #70ffaf;
    border-color: rgba(46, 204, 113, 0.25);
}

.merged-badge-main-info p {
    color: #d1d7ea;
    line-height: 1.7;
    margin: 0;
}

.merged-points-row {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 18px;
}

.merged-points-big-box,
.merged-next-progress-box {
    padding: 22px;
    border-radius: 22px;
    background: rgba(9, 13, 26, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.merged-points-big-box strong {
    display: block;
    color: #ffffff;
    font-size: 52px;
    line-height: 1;
    margin-bottom: 10px;
}

.merged-points-big-box p {
    color: #b8b8c8;
    line-height: 1.5;
    margin: 0;
}

.merged-next-progress-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.merged-next-progress-top strong {
    display: block;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.4;
}

.merged-progress-range {
    color: #d9def5;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.merged-progress-track {
    height: 18px !important;
    margin-bottom: 12px;
}

@media (max-width: 900px) {
    .merged-badge-header,
    .merged-points-row {
        grid-template-columns: 1fr;
    }

    .merged-badge-image-wrap {
        width: 130px;
        height: 130px;
    }

    .merged-badge-title-row h3 {
        font-size: 28px;
    }

    .merged-next-progress-top {
        flex-direction: column;
    }

    .merged-progress-range {
        width: fit-content;
    }
}

/* =========================================================
   MEMBER DASHBOARD - MERGED LEADERBOARD INSIDE BADGE CARD
========================================================= */

.merged-leaderboard-box {
    margin-top: 18px;
    padding: 22px;
    border-radius: 22px;
    background: rgba(9, 13, 26, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
}

.merged-leaderboard-info span {
    display: block;
    color: #9aa5ff;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.merged-leaderboard-info strong {
    display: block;
    color: #ffffff;
    font-size: 30px;
    line-height: 1.1;
    margin-bottom: 8px;
}

.merged-leaderboard-info p {
    color: #b8b8c8;
    line-height: 1.6;
    margin: 0;
}

.merged-leaderboard-btn {
    min-width: 180px;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 32px rgba(43, 196, 119, 0.18);
    transition: 0.25s ease;
}

.merged-leaderboard-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

@media (max-width: 768px) {
    .merged-leaderboard-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .merged-leaderboard-btn {
        width: 100%;
    }
}

/* =========================================================
   LEADERBOARD - BADGE LEVEL SHOWCASE
========================================================= */

.leaderboard-badge-levels-card {
    max-width: 1250px;
    margin: 0 auto 34px;
    padding: 34px;
    border-radius: 28px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
}

.leaderboard-badge-levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 22px;
}

.leaderboard-badge-level-card {
    padding: 22px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(91, 109, 246, 0.18), transparent 42%),
        #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.07);
    text-align: center;
    transition: 0.25s ease;
}

.leaderboard-badge-level-card:hover {
    transform: translateY(-5px);
    border-color: rgba(91, 109, 246, 0.34);
}

.leaderboard-badge-level-image {
    width: 128px;
    height: 128px;
    margin: 0 auto 18px;
    padding: 12px;
    border-radius: 26px;
    background:
        linear-gradient(135deg, rgba(91, 109, 246, 0.14), rgba(43, 196, 119, 0.10)),
        #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
}

.leaderboard-badge-level-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.leaderboard-badge-missing {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b8b8c8;
    font-size: 12px;
    font-weight: 900;
}

.leaderboard-badge-level-info h3 {
    color: #ffffff;
    font-size: 21px;
    line-height: 1.25;
    margin-bottom: 10px;
}

.leaderboard-badge-points-needed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.14);
    color: #facc15;
    border: 1px solid rgba(250, 204, 21, 0.22);
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 12px;
}

.leaderboard-badge-level-info p {
    color: #b8b8c8;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}


/* =========================================================
   LEADERBOARD - MEMBER BADGE ROW
========================================================= */

.leaderboard-badge-row {
    align-items: center;
}

.leaderboard-member-with-badge {
    gap: 16px;
    min-width: 0;
}

.leaderboard-member-badge-image {
    width: 62px;
    height: 62px;
    min-width: 62px;
    padding: 6px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(91, 109, 246, 0.14), rgba(43, 196, 119, 0.10)),
        #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
}

.leaderboard-member-badge-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.leaderboard-member-badge-image span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #b8b8c8;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
}

.leaderboard-member-name-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.leaderboard-name-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.leaderboard-name-line strong {
    color: #ffffff;
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaderboard-member-badge-name {
    display: inline-flex;
    width: fit-content;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(91, 109, 246, 0.16);
    color: #c7d2fe;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 700px) {
    .leaderboard-badge-levels-card {
        padding: 24px;
    }

    .leaderboard-badge-level-image {
        width: 112px;
        height: 112px;
    }

    .leaderboard-member-with-badge {
        width: 100%;
        flex-wrap: wrap;
    }

    .leaderboard-member-badge-image {
        width: 58px;
        height: 58px;
        min-width: 58px;
    }

    .leaderboard-name-line strong {
        white-space: normal;
    }
}

/* =========================================================
   ADMIN BADGE DISCOUNT PREVIEW
========================================================= */

.badge-discount-preview {
    margin-top: 8px;
    color: #b8b8c8;
    font-size: 13px;
    line-height: 1.5;
}

.badge-discount-preview strong {
    color: #70ffaf;
    font-weight: 900;
}

/* =========================================================
   MEMBER DASHBOARD - BADGE REWARD BOX
========================================================= */

.merged-reward-box {
    margin-top: 18px;
    padding: 22px;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(250, 204, 21, 0.12), rgba(43, 196, 119, 0.10)),
        rgba(9, 13, 26, 0.88);
    border: 1px solid rgba(250, 204, 21, 0.18);
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.merged-reward-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 18px;
    background: rgba(250, 204, 21, 0.16);
    border: 1px solid rgba(250, 204, 21, 0.24);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.merged-reward-info span {
    display: block;
    color: #facc15;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.merged-reward-info strong {
    display: block;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.35;
    margin-bottom: 8px;
}

.merged-reward-info p {
    color: #d1d7ea;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .merged-reward-box {
        flex-direction: column;
    }
}

/* =========================================================
   MEMBER DASHBOARD - REWARD VIEW MERCH BUTTON
========================================================= */

.merged-reward-merch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 14px 32px rgba(43, 196, 119, 0.18);
    transition: 0.25s ease;
}

.merged-reward-merch-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

/* =========================================================
   LEADERBOARD - BADGE DISCOUNT REWARD
========================================================= */

.leaderboard-badge-discount-reward {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    margin-bottom: 12px;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(46, 204, 113, 0.14);
    color: #70ffaf;
    border: 1px solid rgba(46, 204, 113, 0.22);
    font-size: 13px;
    font-weight: 900;
}

@media (max-width: 700px) {
    .leaderboard-badge-discount-reward {
        margin-left: 0;
    }
}

/* =========================================================
   MERCH CHECKOUT - BADGE DISCOUNT DESIGN FIX
========================================================= */

.badge-discount-checkout-box {
    margin: 24px 0 34px !important;
    padding: 26px 28px !important;
    border-radius: 24px !important;
    background:
        linear-gradient(135deg, rgba(250, 204, 21, 0.12), rgba(43, 196, 119, 0.10)),
        #111421 !important;
    border: 1px solid rgba(250, 204, 21, 0.24) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18) !important;
}

.badge-discount-checkout-box h3 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
}

.badge-discount-checkout-box p {
    margin: 0 !important;
    color: #d1d7ea !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

.badge-discount-checkout-box strong {
    color: #facc15 !important;
    font-weight: 900 !important;
}

.checkout-section h3 {
    margin-bottom: 18px !important;
}

.checkout-section .form-grid {
    margin-top: 8px !important;
}

.checkout-card .form-group label {
    color: #d9def5 !important;
    font-weight: 800 !important;
    margin-bottom: 9px !important;
}

.checkout-card .form-group input,
.checkout-card .form-group select,
.checkout-card .form-group textarea {
    min-height: 54px !important;
    background: #1b2133 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

.checkout-card .form-group input:focus,
.checkout-card .form-group select:focus,
.checkout-card .form-group textarea:focus {
    border-color: rgba(91, 109, 246, 0.72) !important;
    box-shadow: 0 0 0 4px rgba(91, 109, 246, 0.14) !important;
}


.checkout-card .summary-box img {
    object-fit: contain !important;
    background: #ffffff !important;
    padding: 6px !important;
    box-sizing: border-box !important;
}

.checkout-card .guest-note {
    margin-bottom: 24px !important;
    border-radius: 22px !important;
    background: #1b2133 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 700px) {
    .badge-discount-checkout-box {
        padding: 22px !important;
    }

    .badge-discount-checkout-box h3 {
        font-size: 19px !important;
    }
}

/* =========================================================
   LEADERBOARD - SEASON BANNER + PAST WINNERS
========================================================= */

.leaderboard-season-banner,
.leaderboard-past-season-section {
    max-width: 1250px;
    margin: 0 auto 34px;
}

.leaderboard-season-content {
    padding: 32px 36px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(43, 196, 119, 0.18), transparent 42%),
        linear-gradient(135deg, rgba(91, 109, 246, 0.18), rgba(43, 196, 119, 0.10)),
        #111421;
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
}

.leaderboard-season-content.no-season {
    background:
        radial-gradient(circle at top right, rgba(148, 163, 184, 0.15), transparent 42%),
        #111421;
}

.leaderboard-season-status {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.leaderboard-season-status.active {
    background: rgba(46, 204, 113, 0.16);
    color: #70ffaf;
    border: 1px solid rgba(46, 204, 113, 0.28);
}

.leaderboard-season-status.inactive {
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.leaderboard-season-status.closed {
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.leaderboard-season-content h2 {
    color: #ffffff;
    font-size: 34px;
    margin-bottom: 10px;
}

.leaderboard-season-content p {
    color: #d1d7ea;
    line-height: 1.7;
    margin: 0;
}

.leaderboard-season-content p strong {
    color: #ffffff;
}

.leaderboard-season-manage-btn {
    min-width: 180px;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b6df6, #2bc477);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 14px 32px rgba(43, 196, 119, 0.18);
    transition: 0.25s ease;
}

.leaderboard-season-manage-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.leaderboard-past-season-list {
    display: grid;
    gap: 26px;
}

.leaderboard-past-season-card {
    padding: 30px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 22px 60px rgba(0,0,0,0.22);
}

.leaderboard-past-season-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.leaderboard-past-season-header h3 {
    color: #ffffff;
    font-size: 30px;
    margin-bottom: 8px;
}

.leaderboard-past-season-header p {
    color: #d1d7ea;
    line-height: 1.6;
}

.leaderboard-closed-date {
    display: inline-flex;
    width: fit-content;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    color: #d1d7ea;
    font-size: 13px;
    font-weight: 800;
}

.leaderboard-past-winner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.leaderboard-past-winner-card {
    text-align: center;
    padding: 24px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(91, 109, 246, 0.16), transparent 42%),
        #090d1a;
    border: 1px solid rgba(255,255,255,0.08);
    transition: 0.25s ease;
}

.leaderboard-past-winner-card:hover {
    transform: translateY(-4px);
    border-color: rgba(91, 109, 246, 0.34);
}

.leaderboard-past-winner-rank {
    font-size: 34px;
    margin-bottom: 12px;
}

.leaderboard-past-winner-badge {
    width: 96px;
    height: 96px;
    margin: 0 auto 14px;
    padding: 8px;
    border-radius: 24px;
    background: #111421;
    border: 1px solid rgba(255,255,255,0.08);
    box-sizing: border-box;
}

.leaderboard-past-winner-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.leaderboard-past-winner-badge span {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b8b8c8;
    font-size: 11px;
    font-weight: 900;
}

.leaderboard-past-winner-card h4 {
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 8px;
}

.leaderboard-past-winner-card p {
    color: #d1d7ea;
    margin-bottom: 12px;
}

.leaderboard-past-badge-name {
    display: inline-flex;
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(91, 109, 246, 0.16);
    color: #c7d2fe;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 1000px) {
    .leaderboard-season-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .leaderboard-season-manage-btn {
        width: 100%;
    }

    .leaderboard-past-winner-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .leaderboard-season-content,
    .leaderboard-past-season-card {
        padding: 24px;
    }

    .leaderboard-season-content h2,
    .leaderboard-past-season-header h3 {
        font-size: 26px;
    }
}

/* =========================================================
   LEADERBOARD - POINT STACK + COMPACT LEADERBOARDS
========================================================= */

.leaderboard-points-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.leaderboard-points-stack small {
    color: #b8b8c8;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    line-height: 1.4;
}

.leaderboard-compact-section {
    max-width: 1250px;
    margin: 0 auto 34px;
}

.leaderboard-compact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.leaderboard-compact-card {
    padding: 28px;
    border-radius: 28px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.20);
}

.leaderboard-compact-card h3 {
    color: #ffffff;
    font-size: 25px;
    margin-bottom: 8px;
}

.leaderboard-compact-card > p {
    color: #b8b8c8;
    line-height: 1.6;
    margin-bottom: 22px;
}

.leaderboard-compact-list {
    display: grid;
    gap: 12px;
}

.leaderboard-compact-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 15px 16px;
    border-radius: 18px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.leaderboard-compact-row div {
    min-width: 0;
}

.leaderboard-compact-row strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaderboard-compact-row span {
    display: block;
    color: #b8b8c8;
    font-size: 12px;
    font-weight: 800;
}

.leaderboard-compact-row em {
    min-width: fit-content;
    font-style: normal;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(91, 109, 246, 0.16);
    color: #c7d2fe;
    font-size: 13px;
    font-weight: 900;
}

@media (max-width: 1000px) {
    .leaderboard-compact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .leaderboard-points-stack {
        align-items: flex-start;
    }

    .leaderboard-points-stack small {
        text-align: left;
    }

    .leaderboard-compact-card {
        padding: 22px;
    }

    .leaderboard-compact-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   MEMBER DASHBOARD - SEASON / ANNUAL / LIFETIME POINTS
========================================================= */

.dashboard-points-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 24px;
}

.dashboard-mini-points-card {
    padding: 20px;
    border-radius: 20px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.dashboard-mini-points-card span {
    display: block;
    color: #9aa5ff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.dashboard-mini-points-card strong {
    display: block;
    color: #ffffff;
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 8px;
}

.dashboard-mini-points-card p {
    color: #b8b8c8;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 1100px) {
    .dashboard-points-mini-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ADMIN ANNUAL REWARDS PAGE
========================================================= */

.annual-rewards-page {
    max-width: 1500px;
    margin: 0 auto;
    padding-bottom: 90px !important;
}

.annual-rewards-header h2 {
    font-size: 42px;
    margin-bottom: 8px;
}

.annual-alert {
    margin-bottom: 24px;
    padding: 18px 20px;
    border-radius: 18px;
    font-weight: 800;
}

.annual-alert.success {
    background: rgba(46, 204, 113, 0.14);
    color: #70ffaf;
    border: 1px solid rgba(46, 204, 113, 0.25);
}

.annual-alert.error {
    background: rgba(239, 68, 68, 0.14);
    color: #fecaca;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.annual-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 34px 0;
}

.annual-summary-card {
    min-height: 190px;
    padding: 26px;
    border-radius: 26px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.20);
    display: flex;
    flex-direction: column;
}

.annual-summary-card span {
    font-size: 30px;
    margin-bottom: 16px;
}

.annual-summary-card h3 {
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 12px;
}

.annual-summary-card strong {
    color: #ffffff;
    font-size: 44px;
    line-height: 1;
}

.annual-info-card {
    padding: 30px;
    border-radius: 30px;
    margin-bottom: 32px;
    background:
        linear-gradient(135deg, rgba(91, 109, 246, 0.18), rgba(43, 196, 119, 0.12)),
        #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.annual-info-label,
.annual-danger-label {
    display: inline-block;
    margin-bottom: 14px;
    color: #9aa5ff;
    letter-spacing: 2.5px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.annual-info-card h3 {
    color: #ffffff;
    font-size: 30px;
    margin-bottom: 12px;
}

.annual-info-card p {
    max-width: 920px;
    color: #d1d7ea;
    font-size: 16px;
    line-height: 1.75;
}

.annual-info-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.annual-info-pills span {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.annual-table-card {
    padding: 30px;
    border-radius: 30px;
    margin-bottom: 32px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.annual-table-header {
    margin-bottom: 24px;
}

.annual-table-header h3 {
    color: #ffffff;
    font-size: 30px;
    margin-bottom: 8px;
}

.annual-table-header p {
    color: #b8b8c8;
    line-height: 1.6;
}

.annual-table-wrapper {
    overflow-x: auto;
    border-radius: 20px;
}

.annual-reward-table {
    width: 100%;
    min-width: 1050px;
    border-collapse: collapse;
    background: #090d1a;
}

.annual-reward-table thead {
    background: linear-gradient(135deg, #5b6df6, #2bc477);
}

.annual-reward-table th {
    padding: 17px 16px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
}

.annual-reward-table td {
    padding: 17px 16px;
    color: #d9def5;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    vertical-align: middle;
}

.annual-reward-table td strong {
    color: #ffffff;
}

.annual-reward-table td small {
    color: #8f96aa;
}

.annual-rank-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 38px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(91, 109, 246, 0.18);
    color: #c1c8ff;
    font-size: 14px;
    font-weight: 900;
}

.annual-badge-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.annual-badge-cell img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    padding: 5px;
    border-radius: 16px;
    background: #111421;
}

.annual-badge-cell span {
    color: #ffffff;
    font-weight: 900;
}

.annual-discount-pill,
.annual-no-discount-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.annual-discount-pill {
    background: rgba(46, 204, 113, 0.16);
    color: #70ffaf;
    border: 1px solid rgba(46, 204, 113, 0.30);
}

.annual-no-discount-pill {
    background: rgba(255, 255, 255, 0.08);
    color: #b8b8c8;
}

.annual-reset-card {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 28px;
    align-items: start;
    padding: 32px;
    border-radius: 30px;
    background: #111421;
    border: 1px solid rgba(239, 68, 68, 0.26);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.annual-reset-card h3 {
    color: #ffffff;
    font-size: 30px;
    margin-bottom: 12px;
}

.annual-reset-card p {
    color: #d1d7ea;
    line-height: 1.7;
}

.annual-reset-warning {
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(250, 204, 21, 0.12);
    border: 1px solid rgba(250, 204, 21, 0.18);
    color: #facc15 !important;
    font-weight: 800;
}

.annual-reset-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.annual-reset-form label {
    color: #ffffff;
    font-weight: 800;
    line-height: 1.5;
}

.annual-reset-form input {
    width: 100%;
    padding: 15px 16px;
    border-radius: 15px;
    border: none;
    outline: none;
    background: #090d1a;
    color: #ffffff;
    font-size: 15px;
    box-sizing: border-box;
}

.annual-reset-btn {
    min-height: 52px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.25s ease;
}

.annual-reset-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.annual-empty-state {
    padding: 50px 24px;
    text-align: center;
    border-radius: 22px;
    background: #090d1a;
}

.annual-empty-state h3 {
    color: #ffffff;
    font-size: 26px;
    margin-bottom: 10px;
}

.annual-empty-state p {
    color: #b8b8c8;
}

@media (max-width: 1000px) {
    .annual-summary-grid,
    .annual-reset-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .annual-rewards-header h2 {
        font-size: 34px;
    }

    .annual-table-card,
    .annual-info-card,
    .annual-reset-card {
        padding: 24px;
    }
}

/* =========================================================
   ADMIN DASHBOARD - LEADERBOARD + ANNUAL REWARD SNAPSHOT
========================================================= */

.admin-leaderboard-reward-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
    margin-bottom: 24px;
}

.admin-leaderboard-season-card {
    padding: 30px;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(91, 109, 246, 0.16), rgba(43, 196, 119, 0.10)),
        #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.20);
}

.admin-leaderboard-season-card h3 {
    color: #ffffff;
    font-size: 30px;
    margin-bottom: 10px;
}

.admin-leaderboard-season-card p {
    color: #d1d7ea;
    line-height: 1.7;
    margin-bottom: 18px;
}

.admin-current-top-member {
    margin: 20px 0;
    padding: 20px;
    border-radius: 22px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-current-top-member span {
    display: block;
    color: #9aa5ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.admin-current-top-member strong {
    display: block;
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 6px;
}

.admin-current-top-member p {
    margin: 0;
    color: #b8b8c8;
}

.admin-reward-big-number {
    color: #ffffff;
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    margin: 18px 0;
}

.admin-top-member-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.admin-top-member-card {
    padding: 28px;
    border-radius: 28px;
    background: #111421;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.20);
}

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

.admin-top-member-header h3 {
    color: #ffffff;
    font-size: 24px;
    margin: 0;
}

.admin-top-member-header a {
    color: #9aa5ff;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
}

.admin-top-member-list {
    display: grid;
    gap: 12px;
}

.admin-top-member-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 18px;
    background: #090d1a;
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.admin-top-member-row div {
    min-width: 0;
}

.admin-top-member-row strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-top-member-row span {
    display: block;
    color: #b8b8c8;
    font-size: 12px;
    font-weight: 800;
}

.admin-top-member-row em {
    min-width: fit-content;
    font-style: normal;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(91, 109, 246, 0.16);
    color: #c7d2fe;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

@media (max-width: 1000px) {
    .admin-leaderboard-reward-grid,
    .admin-top-member-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .admin-leaderboard-season-card,
    .admin-top-member-card {
        padding: 22px;
    }

    .admin-top-member-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-reward-big-number {
        font-size: 52px;
    }
}

/* =========================================================
   FORCE FIX - AI CHATBOT BUTTON CLICKABLE
========================================================= */

.chatbot-toggle,
.ai-chatbot-toggle,
#chatbotToggle,
#aiChatbotToggle,
.chatbot-button,
.ai-button,
.floating-ai-button {
    position: fixed !important;
    right: 28px !important;
    bottom: 28px !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.chatbot-toggle *,
.ai-chatbot-toggle *,
#chatbotToggle *,
#aiChatbotToggle *,
.chatbot-button *,
.ai-button *,
.floating-ai-button * {
    pointer-events: none !important;
}

.chatbot-box,
.ai-chatbot-box,
#chatbotBox,
#aiChatbotBox,
.chatbot-window {
    z-index: 999998 !important;
    pointer-events: auto !important;
}

/* =========================================================
   URRC CHATBOT FORCE FIX
========================================================= */

.urrc-chatbot {
    position: fixed !important;
    right: 28px !important;
    bottom: 28px !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
}

.chatbot-toggle {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    border: none !important;
    background: linear-gradient(135deg, #5b6df6, #2bc477) !important;
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35) !important;
    pointer-events: auto !important;
    z-index: 1000000 !important;
}

.chatbot-box {
    position: absolute !important;
    right: 0 !important;
    bottom: 85px !important;
    width: 380px !important;
    max-width: calc(100vw - 34px) !important;
    height: 560px !important;
    max-height: calc(100vh - 130px) !important;
    display: none;
    flex-direction: column !important;
    background: #111421 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.45) !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
}

.urrc-chatbot.active .chatbot-box {
    display: flex !important;
}

.chatbot-header {
    padding: 18px 20px !important;
    background: linear-gradient(135deg, #5b6df6, #2bc477) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.chatbot-header h4 {
    margin: 0 !important;
    color: white !important;
    font-size: 17px !important;
}

.chatbot-header span {
    display: block !important;
    color: rgba(255,255,255,0.82) !important;
    font-size: 12px !important;
    margin-top: 3px !important;
}

#chatbotClose {
    border: none !important;
    background: rgba(255,255,255,0.18) !important;
    color: white !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    font-size: 24px !important;
    cursor: pointer !important;
}

.chatbot-messages {
    flex: 1 !important;
    padding: 18px !important;
    overflow-y: auto !important;
    background: #090d1a !important;
}

.bot-message,
.user-message {
    max-width: 86% !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
    line-height: 1.55 !important;
    font-size: 14px !important;
}

.bot-message {
    background: #1a2033 !important;
    color: #ffffff !important;
    margin-right: auto !important;
}

.user-message {
    background: linear-gradient(135deg, #5b6df6, #2bc477) !important;
    color: #ffffff !important;
    margin-left: auto !important;
}

.chatbot-input-area {
    display: flex !important;
    gap: 10px !important;
    padding: 14px !important;
    background: #111421 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}

#chatbotInput {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    border-radius: 14px !important;
    padding: 12px 13px !important;
    background: #090d1a !important;
    color: #ffffff !important;
}

#chatbotSend {
    border: none !important;
    border-radius: 14px !important;
    padding: 0 16px !important;
    background: linear-gradient(135deg, #5b6df6, #2bc477) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.chatbot-result-item {
    margin-top: 10px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.06) !important;
}

.chatbot-result-item ul {
    padding-left: 18px !important;
    margin: 8px 0 !important;
}

.chatbot-link-btn,
.chatbot-suggestion-btn {
    display: inline-flex !important;
    margin-top: 8px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: rgba(91, 109, 246, 0.18) !important;
    color: #c7d2fe !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    border: none !important;
    cursor: pointer !important;
}

@media (max-width: 600px) {
    .urrc-chatbot {
        right: 40px !important;
        bottom: 18px !important;
    }

    .chatbot-toggle {
        width: 62px !important;
        height: 62px !important;
    }

    .chatbot-box {
        width: calc(100vw - 36px) !important;
        height: 520px !important;
        bottom: 78px !important;
    }
}

/* =========================================================
   URRC REDESIGN PHASE 2 — EVENT/MEMBER POLISH
========================================================= */

.events-public-page,
.past-events-page,
.event-detail-page,
.past-gallery-section,
.member-my-events-section {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 22px;
    padding-right: 22px;
}

.events-page-header,
.past-events-hero {
    min-height: 240px;
    display: grid;
    align-content: center;
    padding: 34px 28px;
    border-radius: 32px;
    background:
        linear-gradient(135deg, rgba(17, 24, 39, 0.78), rgba(194, 65, 12, 0.62)),
        url("../uploads/countdown_1779112158_6a0b18de39204.jpg") center/cover;
    box-shadow: var(--urrc-shadow);
    overflow: hidden;
}

.events-page-header h1,
.past-events-hero h1 {
    color: #ffffff !important;
    font-size: clamp(38px, 5vw, 64px) !important;
    line-height: 0.98;
}

.events-page-header p,
.past-events-hero p,
.events-page-label,
.past-events-label {
    color: rgba(255, 255, 255, 0.88) !important;
}

.events-page-label,
.past-events-label {
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.events-modern-tools,
.past-events-filter-card {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 14px;
    align-items: end;
    margin-top: 18px;
    padding: 16px;
    border-radius: 24px;
    background: var(--urrc-card);
    border: 1px solid var(--urrc-line);
    box-shadow: var(--urrc-shadow);
}

.event-tool-group label,
.past-search-group label {
    display: block;
    margin-bottom: 7px;
    color: var(--urrc-text);
    font-size: 12px;
    font-weight: 900;
}

.event-section-block,
.past-events-results {
    margin-top: 22px;
}

.events-list-header,
.past-events-results-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.event-grid,
.past-events-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.event-card,
.past-page-card {
    position: relative;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    padding: 0 !important;
    border-radius: 24px !important;
    background: var(--urrc-card) !important;
    border: 1px solid var(--urrc-line) !important;
    box-shadow: var(--urrc-shadow) !important;
}

.event-image-box,
.past-page-image-box,
.compact-event-image-box {
    width: 100%;
    height: 185px !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    overflow: hidden;
    background: var(--urrc-orange-soft);
}

.event-image-box img,
.past-page-image-box img,
.compact-event-image-box img {
    width: 100%;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.compact-event-card-content,
.past-page-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px !important;
}

.compact-event-title,
.past-page-card h3 {
    font-size: 18px !important;
    line-height: 1.18;
}

.compact-event-description,
.past-page-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
}

.compact-event-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
}

.compact-event-meta-item,
.compact-event-extra-meta span,
.past-page-meta span,
.event-detail-meta span,
.past-detail-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(249, 115, 22, 0.09);
    border: 1px solid rgba(249, 115, 22, 0.13);
    color: var(--urrc-text) !important;
    font-size: 12px;
    font-weight: 800;
}

.compact-event-meta-item p {
    margin: 0;
    color: var(--urrc-text) !important;
}

.compact-event-extra-meta,
.past-page-meta,
.event-detail-meta,
.past-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.compact-event-actions {
    margin-top: auto;
}

.compact-event-actions .btn,
.past-page-detail-btn {
    width: 100%;
}

.event-registered-ribbon {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.94);
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
}

/* Event detail */

.event-detail-page {
    padding-top: calc(var(--urrc-nav-height) + 34px) !important;
}

.event-detail-grid {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 20px;
    align-items: start;
}

.event-detail-poster-card,
.event-detail-info-card,
.event-registration-flow-card {
    background: var(--urrc-card) !important;
    border: 1px solid var(--urrc-line) !important;
    border-radius: 28px !important;
    box-shadow: var(--urrc-shadow) !important;
    overflow: hidden;
}

.event-detail-poster-card {
    position: sticky;
    top: calc(var(--urrc-nav-height) + 18px);
    padding: 10px;
}

.event-detail-poster-card img {
    width: 100%;
    max-height: 680px;
    object-fit: cover;
    border-radius: 22px;
    display: block;
}

.event-detail-info-card,
.event-registration-flow-card {
    padding: 22px !important;
}

.event-detail-info-card h1 {
    font-size: clamp(30px, 4vw, 52px) !important;
    line-height: 1.02;
    margin: 12px 0;
}

.back-link {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.10);
    color: var(--urrc-orange-dark) !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
}

html[data-theme="dark"] .back-link {
    color: #fdba74 !important;
}

.event-detail-description {
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(249, 115, 22, 0.07);
}

.event-fee-box,
.transport-info-box,
.event-detail-apparel-info-box,
.participant-edit-box,
.event-apparel-selection-box,
.transport-form-box,
.guest-event-recommend-box,
.registration-not-open-box,
.registration-closed-box {
    margin-top: 14px;
    padding: 15px !important;
    border-radius: 20px !important;
    background: rgba(249, 115, 22, 0.08) !important;
    border: 1px solid rgba(249, 115, 22, 0.14) !important;
}

.event-fee-box p {
    margin: 4px 0 0;
    color: var(--urrc-orange-dark) !important;
    font-size: 24px;
    font-weight: 950;
}

html[data-theme="dark"] .event-fee-box p {
    color: #fdba74 !important;
}

.event-registration-flow-card {
    margin-top: 18px;
}

.participant-edit-grid,
.self-transport-grid,
.transport-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.transport-choice-group,
.guest-event-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.transport-choice-option {
    flex: 1;
    min-width: 210px;
    padding: 12px;
    border-radius: 16px;
    background: var(--urrc-card);
    border: 1px solid var(--urrc-line);
}

.event-apparel-chart-box img {
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    border-radius: 16px;
}
/* Past event detail/gallery */

.past-detail-theme {
    width: 100%;
    min-height: 100vh;
}

html[data-theme="light"] body:not(.admin-layout) .past-detail-theme {
    background:
        radial-gradient(circle at top left, rgba(249, 115, 22, 0.12), transparent 34%),
        linear-gradient(180deg, #fff7ed 0%, #ffffff 48%, #fffaf5 100%) !important;
    color: #0f172a !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-detail-theme {
    background: #07111f !important;
    color: #ffffff !important;
}

.past-detail-hero {
    position: relative;
    min-height: 78vh !important;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 20px;
    align-items: center;
    padding: calc(var(--urrc-nav-height) + 34px) 28px 44px !important;
    overflow: hidden;
    isolation: isolate;
}

html[data-theme="light"] body:not(.admin-layout) .past-detail-hero {
    background: transparent !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-detail-hero {
    background: #050816 !important;
}

html[data-theme="light"] body:not(.admin-layout) .past-detail-hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(255, 247, 237, 0.74) 0%,
            rgba(255, 255, 255, 0.54) 42%,
            rgba(255, 247, 237, 0.24) 68%,
            rgba(249, 115, 22, 0.18) 100%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 247, 237, 0.52) 100%
        ) !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-detail-hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(5, 8, 22, 0.82) 0%,
            rgba(5, 8, 22, 0.72) 42%,
            rgba(5, 8, 22, 0.48) 68%,
            rgba(5, 8, 22, 0.62) 100%
        ),
        linear-gradient(
            180deg,
            rgba(5, 8, 22, 0.18) 0%,
            rgba(5, 8, 22, 0.72) 100%
        ) !important;
}

.past-detail-content {
    padding: 28px;
    border-radius: 30px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

html[data-theme="light"] body:not(.admin-layout) .past-detail-content {
    background: rgba(255, 255, 255, 0.38) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow:
        0 20px 60px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-detail-content {
    background: rgba(17, 24, 39, 0.68) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.past-detail-content h1 {
    font-size: clamp(34px, 5vw, 66px) !important;
    line-height: 0.98;
    margin-bottom: 18px;
}

html[data-theme="light"] body:not(.admin-layout) .past-detail-content h1 {
    color: #0f172a !important;
    text-shadow: none !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-detail-content h1 {
    color: #ffffff !important;
}

html[data-theme="light"] body:not(.admin-layout) .past-detail-content p,
html[data-theme="light"] body:not(.admin-layout) .past-detail-content .past-detail-description,
html[data-theme="light"] body:not(.admin-layout) .past-detail-content .past-detail-summary {
    color: #334155 !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-detail-content p,
html[data-theme="dark"] body:not(.admin-layout) .past-detail-content .past-detail-description,
html[data-theme="dark"] body:not(.admin-layout) .past-detail-content .past-detail-summary {
    color: rgba(255, 255, 255, 0.86) !important;
}

.past-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
}

.past-detail-meta span,
.past-detail-meta a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

html[data-theme="light"] body:not(.admin-layout) .past-detail-meta span,
html[data-theme="light"] body:not(.admin-layout) .past-detail-meta a {
    background: rgba(255, 247, 237, 0.74) !important;
    color: #334155 !important;
    border: 1px solid rgba(249, 115, 22, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45) !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-detail-meta span,
html[data-theme="dark"] body:not(.admin-layout) .past-detail-meta a {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="light"] body:not(.admin-layout) .past-detail-description-box,
html[data-theme="light"] body:not(.admin-layout) .past-detail-summary-box,
html[data-theme="light"] body:not(.admin-layout) .past-detail-info-box {
    background: rgba(255, 247, 237, 0.55) !important;
    border: 1px solid rgba(249, 115, 22, 0.14) !important;
    color: #334155 !important;
    border-radius: 20px !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-detail-description-box,
html[data-theme="dark"] body:not(.admin-layout) .past-detail-summary-box,
html[data-theme="dark"] body:not(.admin-layout) .past-detail-info-box {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255,255,255,0.86) !important;
}
.past-detail-poster {
    border-radius: 28px;
    overflow: hidden;
}

html[data-theme="light"] body:not(.admin-layout) .past-detail-poster {
    background: #ffffff !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-detail-poster {
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34) !important;
}

.past-detail-poster img {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    display: block;
}

.past-gallery-section {
    width: min(1280px, calc(100vw - 96px)) !important;
    max-width: min(1280px, calc(100vw - 96px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 56px 0 !important;
    background: transparent !important;
}

.past-gallery-section h2 {
    font-size: clamp(34px, 4vw, 50px) !important;
    margin-bottom: 10px;
}

html[data-theme="light"] body:not(.admin-layout) .past-gallery-section h2 {
    color: #0f172a !important;
}

html[data-theme="dark"] body:not(.admin-layout) .past-gallery-section h2 {
    color: #ffffff !important;
}

html[data-theme="light"] body:not(.admin-layout) .gallery-subtitle {
    color: #475569 !important;
}

html[data-theme="dark"] body:not(.admin-layout) .gallery-subtitle {
    color: rgba(255, 255, 255, 0.72) !important;
}

.past-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.gallery-card {
    position: relative;
    overflow: visible !important;
    border-radius: 22px;
    border: 1px solid var(--urrc-line);
    box-shadow: var(--urrc-shadow);
}

html[data-theme="light"] body:not(.admin-layout) .gallery-card,
html[data-theme="light"] body:not(.admin-layout) .empty-gallery {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 22px 65px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="dark"] body:not(.admin-layout) .gallery-card,
html[data-theme="dark"] body:not(.admin-layout) .empty-gallery {
    background: rgba(15, 23, 42, 0.88) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.gallery-card img,
.gallery-card video {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    border-radius: 22px 22px 0 0;
}

.empty-gallery {
    margin-top: 26px;
    padding: 42px 28px;
    border-radius: 26px;
    text-align: center;
}

html[data-theme="light"] body:not(.admin-layout) .empty-gallery h3 {
    color: #0f172a !important;
}

html[data-theme="light"] body:not(.admin-layout) .empty-gallery p {
    color: #475569 !important;
}

html[data-theme="dark"] body:not(.admin-layout) .empty-gallery h3 {
    color: #ffffff !important;
}

html[data-theme="dark"] body:not(.admin-layout) .empty-gallery p {
    color: rgba(255, 255, 255, 0.72) !important;
}

.download-btn,
.locked-download-btn,
.past-certificate-btn,
.past-certificate-disabled-btn {
    display: inline-flex;
    margin: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--urrc-orange), var(--urrc-orange-dark));
    color: #ffffff !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
}

.past-certificate-disabled-btn,
.locked-download-btn {
    background: #94a3b8 !important;
}

.back-link {
    display: inline-flex;
    width: fit-content;
    padding: 9px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 900;
    margin-bottom: 18px;
}

html[data-theme="light"] body:not(.admin-layout) .back-link {
    background: #fff7ed !important;
    color: #9a3412 !important;
    border: 1px solid rgba(249, 115, 22, 0.18) !important;
}

html[data-theme="dark"] body:not(.admin-layout) .back-link {
    background: rgba(249, 115, 22, 0.18) !important;
    color: #fdba74 !important;
    border: 1px solid rgba(249, 115, 22, 0.24) !important;
}

@media (max-width: 1050px) {
    .past-detail-hero {
        grid-template-columns: 1fr !important;
    }

    .past-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    .past-detail-hero {
        min-height: auto !important;
        padding: calc(var(--urrc-nav-height) + 20px) 14px 34px !important;
    }

    .past-detail-content {
        padding: 20px !important;
    }

    .past-gallery-section {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
        padding: 38px 0 !important;
    }

    .past-gallery-grid {
        grid-template-columns: 1fr !important;
    }
}
/* Member dashboard compact */

.member-site .dashboard-container > h2 {
    font-size: clamp(30px, 4vw, 48px) !important;
}

.member-site .dashboard-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.member-site .dashboard-grid > .card {
    min-height: 150px;
}

.dashboard-merged-badge-card {
    grid-column: 1 / -1;
}

.merged-badge-header,
.merged-points-row,
.dashboard-points-mini-grid,
.member-my-events-grid {
    gap: 14px !important;
}

.dashboard-points-mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.member-my-events-section {
    margin-top: 22px;
}

.member-my-events-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.member-unified-event-card {
    padding: 16px !important;
}

.member-event-countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.member-countdown-box {
    padding: 10px 8px;
    border-radius: 14px;
    background: rgba(249, 115, 22, 0.09);
    text-align: center;
}

.member-countdown-box strong {
    display: block;
    color: var(--urrc-orange-dark);
    font-size: 20px;
}

html[data-theme="dark"] .member-countdown-box strong {
    color: #fdba74;
}

/* Admin auth page exception: public navbar still visible */

.admin-login-page .auth-visual-panel {
    background:
        radial-gradient(circle at 30% 20%, rgba(249, 115, 22, 0.42), transparent 34%),
        linear-gradient(135deg, #0f172a, #431407);
}

.admin-auth-visual .auth-visual-slide img {
    width: 52%;
    height: 52%;
    object-fit: contain;
    margin: 70px auto 0;
    opacity: 0.94;
}

@media (max-width: 1050px) {
    .event-grid,
    .past-events-grid,
    .past-gallery-grid,
    .member-site .dashboard-grid,
    .member-my-events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .event-detail-grid,
    .past-detail-hero {
        grid-template-columns: 1fr;
    }

    .event-detail-poster-card {
        position: static;
    }
}

@media (max-width: 680px) {
    .events-public-page,
    .past-events-page,
    .event-detail-page,
    .past-gallery-section,
    .member-my-events-section {
        padding-left: 14px;
        padding-right: 14px;
    }

    .events-modern-tools,
    .past-events-filter-card,
    .event-grid,
    .past-events-grid,
    .compact-event-meta-grid,
    .participant-edit-grid,
    .self-transport-grid,
    .transport-stat-grid,
    .past-gallery-grid,
    .member-site .dashboard-grid,
    .dashboard-points-mini-grid,
    .member-my-events-grid {
        grid-template-columns: 1fr !important;
    }

    .events-list-header,
    .past-events-results-header,
    .transport-choice-group,
    .guest-event-action-row {
        align-items: stretch;
        flex-direction: column;
    }

    .event-image-box,
    .past-page-image-box,
    .compact-event-image-box {
        height: 210px !important;
    }

    .past-detail-hero {
        min-height: auto !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .past-detail-content {
        padding: 20px;
    }
}

/* =========================================================
   URRC REDESIGN PHASE 1 — LIGHT ORANGE PUBLIC + ADMIN BI
   Added for FYP2 V5 major redesign.
========================================================= */

:root {
    --urrc-orange: #f97316;
    --urrc-orange-dark: #c2410c;
    --urrc-orange-soft: #ffedd5;
    --urrc-amber: #f59e0b;
    --urrc-navy: #111827;
    --urrc-muted: #64748b;
    --urrc-line: rgba(15, 23, 42, 0.10);
    --urrc-bg: #fff7ed;
    --urrc-bg-2: #ffffff;
    --urrc-card: rgba(255, 255, 255, 0.92);
    --urrc-text: #111827;
    --urrc-text-soft: #475569;
    --urrc-shadow: 0 18px 55px rgba(15, 23, 42, 0.10);
    --urrc-radius: 22px;
    --urrc-nav-height: 72px;
}

html[data-theme="dark"] {
    --urrc-bg: #07111f;
    --urrc-bg-2: #0f172a;
    --urrc-card: rgba(15, 23, 42, 0.88);
    --urrc-text: #f8fafc;
    --urrc-text-soft: #cbd5e1;
    --urrc-muted: #94a3b8;
    --urrc-line: rgba(255, 255, 255, 0.12);
    --urrc-shadow: 0 20px 70px rgba(0, 0, 0, 0.32);
}

html[data-theme="admin"] {
    --urrc-bg: #080c14;
    --urrc-bg-2: #0f172a;
    --urrc-card: rgba(17, 24, 39, 0.92);
    --urrc-text: #f8fafc;
    --urrc-text-soft: #cbd5e1;
    --urrc-muted: #94a3b8;
    --urrc-line: rgba(255, 255, 255, 0.11);
    --urrc-shadow: 0 20px 70px rgba(0, 0, 0, 0.38);
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at top left, rgba(249, 115, 22, 0.16), transparent 34%),
        linear-gradient(180deg, var(--urrc-bg), var(--urrc-bg-2)) !important;
    color: var(--urrc-text) !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    overflow-x: hidden;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
}

.page-top-spacing,
.dashboard-container {
    padding-top: calc(var(--urrc-nav-height) + 28px) !important;
}

.dashboard-container,
.section,
.about-page {
    max-width: 1180px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
}

.section {
    padding-top: 46px !important;
    padding-bottom: 24px !important;
}

h1,
h2,
h3,
h4 {
    color: var(--urrc-text);
    letter-spacing: -0.025em;
}

p,
.subtitle,
.section-subtitle {
    color: var(--urrc-text-soft) !important;
}

.btn,
button.btn,
a.btn,
.about-action-btn,
.home-section-link-btn,
.home-about-view-btn,
.leaderboard-season-manage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 17px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--urrc-orange), var(--urrc-orange-dark)) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 26px rgba(249, 115, 22, 0.26);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.btn:hover,
.about-action-btn:hover,
.home-section-link-btn:hover,
.home-about-view-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(249, 115, 22, 0.32);
}

.btn-disabled,
button[disabled] {
    background: #94a3b8 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

.card,
.auth-card,
.leaderboard-chart-card,
.leaderboard-ranking-card,
.leaderboard-badge-levels-card,
.leaderboard-past-season-card,
.leaderboard-compact-card,
.about-detail-card,
.admin-clean-section,
.admin-clean-overview-card,
.admin-clean-priority-card,
.admin-clean-kpi-card,
.admin-leaderboard-season-card,
.admin-top-member-card,
.admin-visitor-card,
.admin-action-review-card,
.admin-event-operation-card,
.admin-shortcut-card {
    background: var(--urrc-card) !important;
    color: var(--urrc-text) !important;
    border: 1px solid var(--urrc-line) !important;
    border-radius: var(--urrc-radius) !important;
    box-shadow: var(--urrc-shadow) !important;
    backdrop-filter: blur(18px);
}

.card {
    padding: 18px !important;
    margin-top: 14px !important;
}

input,
select,
textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px;
    padding: 10px 12px !important;
    border-radius: 13px !important;
    border: 1px solid var(--urrc-line) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: #111827 !important;
    outline: none !important;
    font-size: 13px !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="admin"] input,
html[data-theme="admin"] select,
html[data-theme="admin"] textarea {
    background: rgba(15, 23, 42, 0.72) !important;
    color: #ffffff !important;
}

/* -------------------------
   Public/member navbar
------------------------- */

.urrc-navbar {
    height: var(--urrc-nav-height) !important;
    padding: 0 34px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    border-bottom: 1px solid var(--urrc-line);
    box-shadow: 0 10px 36px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] .urrc-navbar {
    background: rgba(7, 17, 31, 0.88) !important;
}

.urrc-brand,
.admin-sidebar-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-left: 0 !important;
    color: var(--urrc-text) !important;
    opacity: 1 !important;
    text-decoration: none;
}

.urrc-brand img,
.admin-sidebar-brand img {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    object-fit: contain;
}

.urrc-brand strong,
.admin-sidebar-brand strong {
    display: block;
    color: var(--urrc-text);
    font-size: 19px;
    font-weight: 950;
    line-height: 1;
}

.urrc-brand span,
.admin-sidebar-brand span {
    display: block;
    margin-top: 4px;
    color: var(--urrc-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.urrc-navbar-links {
    display: flex;
    align-items: center;
    gap: 5px;
}

.urrc-navbar-links > a,
.navbar-dropdown-btn,
.theme-toggle-btn {
    margin: 0 !important;
    min-height: 38px;
    padding: 9px 12px !important;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--urrc-text) !important;
    opacity: 1 !important;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}

.urrc-navbar-links > a:hover,
.urrc-navbar-links > a.active,
.navbar-dropdown-btn:hover,
.navbar-dropdown-btn.active,
.theme-toggle-btn:hover {
    background: var(--urrc-orange-soft);
    color: var(--urrc-orange-dark) !important;
}

html[data-theme="dark"] .urrc-navbar-links > a:hover,
html[data-theme="dark"] .urrc-navbar-links > a.active,
html[data-theme="dark"] .navbar-dropdown-btn:hover,
html[data-theme="dark"] .navbar-dropdown-btn.active,
html[data-theme="dark"] .theme-toggle-btn:hover {
    background: rgba(249, 115, 22, 0.16);
    color: #fdba74 !important;
}

.nav-join-btn,
.nav-logout-link {
    background: linear-gradient(135deg, var(--urrc-orange), var(--urrc-orange-dark)) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(249, 115, 22, 0.24);
}

.navbar-dropdown {
    position: relative;
}

.navbar-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 210px;
    padding: 10px;
    background: var(--urrc-card);
    border: 1px solid var(--urrc-line);
    border-radius: 18px;
    box-shadow: var(--urrc-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: 0.18s ease;
    z-index: 1001;
}

.navbar-dropdown:hover .navbar-dropdown-menu,
.navbar-dropdown:focus-within .navbar-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navbar-dropdown-menu a {
    display: block;
    margin: 0 !important;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--urrc-text) !important;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.navbar-dropdown-menu a:hover {
    background: var(--urrc-orange-soft);
    color: var(--urrc-orange-dark) !important;
}

.mobile-nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 14px;
    background: var(--urrc-orange);
    color: white;
    font-size: 22px;
}

/* -------------------------
   Homepage visual upgrade
------------------------- */

.home-hero {
    min-height: 82vh !important;
    padding: calc(var(--urrc-nav-height) + 32px) 24px 54px !important;
    border-radius: 0 0 36px 36px;
    overflow: hidden;
}

.home-hero-content {
    max-width: 780px !important;
    padding: 34px;
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.78), rgba(124, 45, 18, 0.42));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(10px);
}

.home-hero-content h1 {
    color: #ffffff !important;
    font-size: clamp(38px, 6vw, 78px) !important;
    line-height: 0.96;
}

.home-hero-content p {
    color: rgba(255, 255, 255, 0.86) !important;
}

.hero-label,
.home-countdown-mini-label,
.leaderboard-label,
.about-page-label,
.admin-clean-mini-label {
    color: var(--urrc-orange) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase;
}

.home-countdown-banner-section,
.home-about-preview,
.leaderboard-page-header {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 22px;
    padding-right: 22px;
}

.home-countdown-banner-card {
    border-radius: 30px !important;
    min-height: 410px !important;
    box-shadow: var(--urrc-shadow) !important;
}

.featured-grid,
.home-about-mini-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px !important;
}

.home-about-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.homepage-featured-card,
.featured-card {
    overflow: hidden;
    padding: 0 !important;
}

.featured-image-box {
    height: 190px !important;
    overflow: hidden;
    border-radius: 20px 20px 0 0 !important;
    background: #fed7aa !important;
}

.featured-image-box img {
    width: 100%;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease;
}

.homepage-featured-card:hover .featured-image-box img {
    transform: scale(1.06);
}

.featured-card-content {
    padding: 16px !important;
}

.homepage-card-tag,
.leaderboard-season-status,
.admin-countdown-active-badge {
    display: inline-flex;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--urrc-orange-soft);
    color: var(--urrc-orange-dark) !important;
    font-size: 11px;
    font-weight: 950;
}

.home-visual-strip {
    max-width: 1180px;
    margin: 28px auto 0;
    padding: 0 22px;
}

.home-visual-strip-inner {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 0.9fr;
    grid-auto-rows: 180px;
    gap: 14px;
}

.home-visual-tile {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    background: #fed7aa;
    box-shadow: var(--urrc-shadow);
}

.home-visual-tile:first-child {
    grid-row: span 2;
}

.home-visual-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-visual-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.28));
}

.home-visual-caption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    z-index: 1;
    color: white;
    font-weight: 950;
}

/* -------------------------
   About page carousel/cards
------------------------- */

.about-page {
    padding-top: calc(var(--urrc-nav-height) + 34px) !important;
}

.about-page-hero {
    min-height: 280px;
    padding: 42px 26px !important;
    border-radius: 32px;
    background:
        linear-gradient(135deg, rgba(17, 24, 39, 0.74), rgba(194, 65, 12, 0.52)),
        url("../uploads/about_mission_bg.JPG") center/cover;
    color: #ffffff;
}

.about-page-hero h1,
.about-page-hero p,
.about-page-hero .about-page-label {
    color: #ffffff !important;
}

.about-gallery-carousel {
    margin-top: 22px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 34%);
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
}

.about-gallery-slide {
    min-height: 220px;
    border-radius: 24px;
    overflow: hidden;
    scroll-snap-align: start;
    box-shadow: var(--urrc-shadow);
}

.about-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-page-grid {
    gap: 16px !important;
    margin-top: 22px !important;
}

.about-detail-card {
    position: relative;
    overflow: hidden;
    min-height: 230px;
    padding: 20px !important;
}

.about-detail-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.92), rgba(255, 237, 213, 0.76));
    z-index: 0;
}

html[data-theme="dark"] .about-detail-card::before {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(124, 45, 18, 0.52));
}

.about-detail-card > * {
    position: relative;
    z-index: 1;
}

.about-detail-card:nth-child(1) {
    background: url("../uploads/about_mission_bg.JPG") center/cover !important;
}

.about-detail-card:nth-child(4) {
    background: url("../uploads/about_achievement_bg.JPG") center/cover !important;
}

/* -------------------------
   Auth/register redesign
------------------------- */

.auth-page {
    min-height: 100vh !important;
    padding: calc(var(--urrc-nav-height) + 28px) 22px 38px !important;
    display: grid !important;
    place-items: center;
}

.auth-layout {
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 22px;
    align-items: stretch;
}

.auth-visual-panel {
    position: relative;
    min-height: 610px;
    border-radius: 32px;
    overflow: hidden;
    background: #111827;
    box-shadow: var(--urrc-shadow);
}

.auth-visual-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s ease;
}

.auth-visual-slide.active {
    opacity: 1;
}

.auth-visual-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-visual-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.12), rgba(124, 45, 18, 0.82));
}

.auth-visual-content {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    z-index: 2;
    color: #ffffff;
}

.auth-visual-content h1 {
    color: #ffffff !important;
    font-size: clamp(34px, 5vw, 60px);
    line-height: 0.98;
}

.auth-visual-content p {
    color: rgba(255, 255, 255, 0.86) !important;
}

.auth-card {
    width: 100%;
    max-width: 470px !important;
    margin: 0 auto;
    padding: 26px !important;
    align-self: center;
}

.auth-card h2 {
    font-size: 30px !important;
}

.auth-form {
    gap: 10px !important;
}

.auth-main-btn,
.auth-secondary-btn {
    width: 100%;
}

/* -------------------------
   Leaderboard compact + view more
------------------------- */

.leaderboard-page {
    max-width: 1180px;
}

.leaderboard-page-header {
    padding-top: calc(var(--urrc-nav-height) + 34px) !important;
    text-align: left !important;
}

.leaderboard-page-header h1 {
    font-size: clamp(34px, 4vw, 54px) !important;
}

.leaderboard-season-banner {
    margin-top: 16px !important;
}

.leaderboard-badge-levels-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.leaderboard-badge-level-card {
    padding: 12px !important;
}

.leaderboard-badge-level-image {
    width: 54px !important;
    height: 54px !important;
}

.leaderboard-chart-card,
.leaderboard-ranking-card,
.leaderboard-badge-levels-card,
.leaderboard-past-season-section,
.leaderboard-compact-section {
    margin-top: 18px !important;
}

.leaderboard-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.leaderboard-bar-row,
.leaderboard-list-row,
.leaderboard-compact-row {
    padding: 10px 12px !important;
    border-radius: 15px !important;
}

.leaderboard-member-badge-image {
    width: 46px !important;
    height: 46px !important;
}

.leaderboard-hidden-row {
    display: none !important;
}

.leaderboard-showing-more .leaderboard-hidden-row {
    display: flex !important;
}

.leaderboard-more-actions,
.leaderboard-my-rank-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 13px 15px;
    border-radius: 18px;
    background: rgba(249, 115, 22, 0.10);
    border: 1px solid rgba(249, 115, 22, 0.18);
}

.leaderboard-my-rank-card strong {
    font-size: 22px;
    color: var(--urrc-orange-dark);
}

html[data-theme="dark"] .leaderboard-my-rank-card strong {
    color: #fdba74;
}

.leaderboard-focus-row {
    outline: 3px solid rgba(249, 115, 22, 0.42);
    background: rgba(249, 115, 22, 0.12) !important;
}

.leaderboard-compact-list.is-collapsed .leaderboard-compact-row:nth-child(n+6) {
    display: none !important;
}

/* -------------------------
   Merchandise public
------------------------- */

.merch-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 20px;
}

.merch-grid {
    gap: 16px !important;
}

.merch-grid.small,
.merch-grid.medium,
.merch-grid.large {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.merch-card {
    padding: 12px !important;
}

.merch-image-box {
    padding: 0 !important;
    border-radius: 18px !important;
    overflow: hidden;
    background: var(--urrc-orange-soft) !important;
}

.merch-image-box img,
.merch-grid.small .merch-image-box img,
.merch-grid.medium .merch-image-box img,
.merch-grid.large .merch-image-box img {
    width: 100%;
    height: 210px !important;
    max-height: none !important;
    object-fit: cover !important;
}

.merch-card h3 {
    font-size: 16px !important;
}

/* -------------------------
   Admin sidebar + compact BI
------------------------- */

body.admin-layout {
    padding-left: 270px !important;
    background:
        radial-gradient(circle at top right, rgba(249, 115, 22, 0.18), transparent 32%),
        linear-gradient(180deg, #080c14, #111827) !important;
}

body.admin-layout .dashboard-container,
body.admin-layout .section,
body.admin-layout main {
    max-width: none !important;
    width: 100%;
    padding-top: 86px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
}

.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 270px;
    padding: 18px 14px;
    background: linear-gradient(180deg, rgba(10, 15, 25, 0.98), rgba(17, 24, 39, 0.96));
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 18px 0 54px rgba(0, 0, 0, 0.30);
}

.admin-sidebar-brand {
    padding: 10px;
    border-radius: 20px;
    background: rgba(249, 115, 22, 0.10);
}

.admin-sidebar-brand strong {
    color: #ffffff;
}

.admin-sidebar-brand span {
    color: #fed7aa;
}

.admin-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding-right: 3px;
}

.admin-sidebar-link,
.admin-sidebar-group summary,
.admin-sidebar-group a,
.admin-sidebar-footer a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.82) !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}

.admin-sidebar-link:hover,
.admin-sidebar-link.active,
.admin-sidebar-group summary:hover,
.admin-sidebar-group a:hover,
.admin-sidebar-group a.active {
    background: rgba(249, 115, 22, 0.16);
    color: #ffffff !important;
}

.admin-sidebar-group {
    margin: 5px 0;
}

.admin-sidebar-group summary {
    list-style: none;
}

.admin-sidebar-group summary::-webkit-details-marker {
    display: none;
}

.admin-sidebar-group a {
    margin-top: 3px;
    margin-left: 24px;
    width: calc(100% - 24px);
    padding: 8px 11px;
    color: rgba(255, 255, 255, 0.68) !important;
    font-size: 12px;
}

.admin-sidebar-footer {
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.admin-sidebar-footer a {
    justify-content: center;
    background: linear-gradient(135deg, var(--urrc-orange), var(--urrc-orange-dark));
    color: #ffffff !important;
}

.admin-topbar {
    position: fixed;
    top: 0;
    left: 270px;
    right: 0;
    height: 66px;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
    background: rgba(8, 12, 20, 0.78);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.admin-topbar strong {
    display: block;
    color: #ffffff;
    font-weight: 950;
}

.admin-topbar span {
    display: block;
    color: #94a3b8;
    font-size: 12px;
}

.admin-sidebar-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 13px;
    background: var(--urrc-orange);
    color: #ffffff;
    font-size: 22px;
}

body.admin-layout .footer {
    margin-left: 0 !important;
    background: transparent !important;
}

.admin-dashboard-clean-page {
    padding-bottom: 34px !important;
}

.admin-clean-page-header {
    margin-bottom: 12px !important;
}

.admin-clean-page-header h2 {
    font-size: 27px !important;
}

.admin-clean-overview-grid,
.admin-clean-kpi-grid,
.admin-action-review-grid,
.admin-visitor-grid,
.admin-shortcut-grid {
    gap: 12px !important;
}

.admin-clean-overview-grid {
    grid-template-columns: 1.5fr 0.75fr !important;
}

.admin-clean-section {
    margin-top: 14px !important;
    padding: 15px !important;
}

.admin-clean-section-header {
    margin-bottom: 12px !important;
}

.admin-clean-section-header h2 {
    font-size: 19px !important;
}

.admin-clean-section-header p {
    font-size: 12px !important;
}

.admin-clean-overview-card,
.admin-clean-priority-card,
.admin-clean-kpi-card,
.admin-leaderboard-season-card,
.admin-top-member-card,
.admin-visitor-card,
.admin-action-review-card,
.admin-event-operation-card,
.admin-shortcut-card {
    padding: 14px !important;
}

.admin-clean-kpi-grid,
.admin-visitor-grid,
.admin-action-review-grid,
.admin-shortcut-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.admin-action-review-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.admin-clean-kpi-card strong,
.admin-visitor-card strong,
.admin-review-count,
.admin-priority-number {
    font-size: 30px !important;
    line-height: 1 !important;
}

.admin-event-operations-grid,
.admin-leaderboard-reward-grid,
.admin-top-member-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.admin-top-member-row,
.admin-event-operation-meta span {
    padding: 8px 10px !important;
}

body.admin-layout .dashboard-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

body.admin-layout .dashboard-grid .card {
    padding: 13px !important;
}

body.admin-layout table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

body.admin-layout th,
body.admin-layout td {
    padding: 9px 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.admin-layout th {
    color: #fed7aa;
    background: rgba(249, 115, 22, 0.10);
}

.members-table-wrap,
.admin-table-wrap,
.registrations-table-wrap,
.payments-table-wrap {
    overflow-x: auto;
}

body.admin-layout .member-filter-card form,
body.admin-layout .member-filter-grid {
    gap: 10px !important;
}

body.admin-layout .member-filter-grid {
    grid-template-columns: repeat(5, minmax(160px, 1fr)) !important;
}

body.admin-layout .member-filter-actions {
    margin-top: 10px !important;
}

body.admin-layout .dashboard-grid img {
    height: 150px !important;
}

/* -------------------------
   Chatbot orange refresh
------------------------- */

.chatbot-toggle,
#chatbotSend,
.user-message,
.chatbot-header {
    background: linear-gradient(135deg, var(--urrc-orange), var(--urrc-orange-dark)) !important;
}

/* -------------------------
   Responsive
------------------------- */

@media (max-width: 1120px) {
    .urrc-navbar {
        padding: 0 18px !important;
    }

    .mobile-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .urrc-navbar-links {
        position: fixed;
        top: var(--urrc-nav-height);
        left: 14px;
        right: 14px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 14px;
        border-radius: 22px;
        background: var(--urrc-card);
        border: 1px solid var(--urrc-line);
        box-shadow: var(--urrc-shadow);
    }

    body.nav-open .urrc-navbar-links {
        display: flex;
    }

    .navbar-dropdown-menu {
        position: static;
        display: none;
        min-width: 0;
        margin-top: 6px;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: rgba(249, 115, 22, 0.08);
    }

    .navbar-dropdown:hover .navbar-dropdown-menu,
    .navbar-dropdown:focus-within .navbar-dropdown-menu {
        display: block;
    }

    .auth-layout,
    .leaderboard-hero-grid {
        grid-template-columns: 1fr;
    }

    .auth-visual-panel {
        min-height: 320px;
    }

    .featured-grid,
    .home-about-mini-grid,
    .merch-grid.small,
    .merch-grid.medium,
    .merch-grid.large,
    .leaderboard-badge-levels-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .home-visual-strip-inner {
        grid-template-columns: 1fr 1fr;
    }

    body.admin-layout {
        padding-left: 0 !important;
    }

    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.22s ease;
    }

    body.admin-sidebar-open .admin-sidebar {
        transform: translateX(0);
    }

    .admin-topbar {
        left: 0;
    }

    .admin-sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .admin-clean-overview-grid,
    .admin-clean-kpi-grid,
    .admin-visitor-grid,
    .admin-action-review-grid,
    .admin-shortcut-grid,
    .admin-event-operations-grid,
    .admin-leaderboard-reward-grid,
    .admin-top-member-grid,
    body.admin-layout .dashboard-grid,
    body.admin-layout .member-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    body {
        font-size: 13px !important;
    }

    .dashboard-container,
    .section,
    .about-page,
    .home-countdown-banner-section,
    .home-visual-strip,
    .leaderboard-page-header {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .urrc-brand span {
        display: none;
    }

    .home-hero {
        min-height: 74vh !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .home-hero-content {
        padding: 22px;
    }

    .home-visual-strip-inner,
    .featured-grid,
    .home-about-mini-grid,
    .merch-grid.small,
    .merch-grid.medium,
    .merch-grid.large,
    .leaderboard-badge-levels-grid,
    .admin-clean-overview-grid,
    .admin-clean-kpi-grid,
    .admin-visitor-grid,
    .admin-action-review-grid,
    .admin-shortcut-grid,
    .admin-event-operations-grid,
    .admin-leaderboard-reward-grid,
    .admin-top-member-grid,
    body.admin-layout .dashboard-grid,
    body.admin-layout .member-filter-grid {
        grid-template-columns: 1fr !important;
    }

    .home-visual-tile:first-child {
        grid-row: span 1;
    }

    .auth-card {
        padding: 20px !important;
    }

    .about-gallery-carousel {
        grid-auto-columns: minmax(220px, 82%);
    }

    .leaderboard-list-row,
    .leaderboard-compact-row,
    .leaderboard-more-actions,
    .leaderboard-my-rank-card {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .admin-sidebar {
        width: 82vw;
    }
}

/* =========================================================
   URRC REDESIGN PHASE 3 — ADMIN MANAGEMENT PAGES POLISH
   Compact BI-style admin lists, tables, forms and product cards.
========================================================= */

body.admin-layout .dashboard-container > h2,
body.admin-layout main > h1,
body.admin-layout .add-event-page-header h1,
body.admin-layout .edit-event-page-header h1,
body.admin-layout .edit-merch-header h1 {
    font-size: clamp(26px, 3vw, 38px) !important;
    line-height: 1.04 !important;
    margin-bottom: 6px !important;
}

body.admin-layout .subtitle,
body.admin-layout main > p,
body.admin-layout .add-event-page-header p,
body.admin-layout .edit-event-page-header p,
body.admin-layout .edit-merch-header p {
    max-width: 760px;
    margin-bottom: 12px !important;
    font-size: 13px !important;
}

body.admin-layout .admin-events-page-header,
body.admin-layout .admin-attendance-header,
body.admin-layout .edit-merch-header,
body.admin-layout .add-event-page-header,
body.admin-layout .edit-event-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px !important;
    padding: 16px !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.13), rgba(15, 23, 42, 0.72)) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: var(--urrc-shadow) !important;
}

body.admin-layout .admin-events-header-actions,
body.admin-layout .member-filter-actions,
body.admin-layout .admin-event-action-buttons,
body.admin-layout .admin-event-filter-bottom,
body.admin-layout .past-search-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px !important;
}

body.admin-layout .btn,
body.admin-layout button.btn {
    min-height: 34px !important;
    padding: 8px 13px !important;
    font-size: 12px !important;
}

/* Admin filters */
body.admin-layout .admin-event-filter-card,
body.admin-layout .member-filter-card,
body.admin-layout .attendance-event-filter-card,
body.admin-layout .card:has(form),
body.admin-layout .payment-filter-card,
body.admin-layout .registration-filter-card {
    padding: 14px !important;
    border-radius: 22px !important;
    background: rgba(17, 24, 39, 0.86) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

body.admin-layout .admin-event-filter-grid,
body.admin-layout .member-filter-grid,
body.admin-layout .payment-filter-grid,
body.admin-layout .registration-filter-grid,
body.admin-layout .attendance-event-filter-form {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(170px, 1fr)) !important;
    gap: 10px !important;
}

body.admin-layout label {
    display: block;
    margin-bottom: 6px;
    color: #fed7aa !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body.admin-layout input,
body.admin-layout select,
body.admin-layout textarea {
    min-height: 36px !important;
    padding: 8px 10px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
}

body.admin-layout textarea {
    min-height: 92px !important;
    resize: vertical;
}

/* Manage Events compact wide cards */
body.admin-layout .admin-events-wide-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

body.admin-layout .admin-event-wide-card {
    display: grid !important;
    grid-template-columns: 132px 1fr !important;
    gap: 14px !important;
    padding: 12px !important;
    border-radius: 22px !important;
    background: rgba(17, 24, 39, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: var(--urrc-shadow) !important;
}

body.admin-layout .admin-event-poster-preview,
body.admin-layout .admin-event-no-poster {
    width: 132px !important;
    height: 132px !important;
    border-radius: 18px !important;
    overflow: hidden;
    background: rgba(249, 115, 22, 0.13) !important;
}

body.admin-layout .admin-event-poster-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body.admin-layout .admin-event-title-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

body.admin-layout .admin-event-title-row h3 {
    margin-top: 6px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
}

body.admin-layout .admin-event-info-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

body.admin-layout .admin-event-info-item,
body.admin-layout .selected-attendance-event-meta span {
    padding: 8px 9px !important;
    border-radius: 14px !important;
    background: rgba(249, 115, 22, 0.10) !important;
    border: 1px solid rgba(249, 115, 22, 0.16) !important;
}

body.admin-layout .admin-event-info-item strong {
    display: block;
    color: #fed7aa;
    font-size: 10px;
    text-transform: uppercase;
}

body.admin-layout .admin-event-info-item p {
    margin: 2px 0 0 !important;
    color: #f8fafc !important;
    font-size: 12px !important;
}

body.admin-layout .admin-event-description-box {
    margin-top: 9px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

body.admin-layout .admin-event-description-box p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 4px 0 0 !important;
    font-size: 12px !important;
}

body.admin-layout .admin-event-status-chip,
body.admin-layout .admin-event-type-chip,
body.admin-layout .selected-attendance-label,
body.admin-layout .member-registration-status,
body.admin-layout .status-pending,
body.admin-layout .status-approved,
body.admin-layout .status-rejected {
    display: inline-flex;
    width: fit-content;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 950 !important;
}

body.admin-layout .admin-event-action-buttons {
    margin-top: 10px !important;
}

/* Admin merchandise compact cards */
body.admin-layout .dashboard-grid .card h3 {
    font-size: 15px !important;
    line-height: 1.2 !important;
}

body.admin-layout .dashboard-grid .card p {
    margin: 5px 0 !important;
    font-size: 12px !important;
}

body.admin-layout .dashboard-grid .card img {
    height: 128px !important;
    border-radius: 15px !important;
}

body.admin-layout .dashboard-grid .card a {
    display: inline-flex;
    margin-top: 6px;
    margin-right: 4px;
    text-decoration: none;
}

/* Admin member/payment/registration tables */
body.admin-layout .members-table-wrap,
body.admin-layout .payment-table-wrap,
body.admin-layout .registration-table-wrap,
body.admin-layout .admin-table-wrap,
body.admin-layout .card:has(table) {
    max-width: 100%;
    overflow-x: auto !important;
}

body.admin-layout .members-table,
body.admin-layout table {
    min-width: 980px;
    background: rgba(15, 23, 42, 0.72);
    border-radius: 18px;
    overflow: hidden;
}

body.admin-layout th {
    position: sticky;
    top: 66px;
    z-index: 3;
    padding: 8px 9px !important;
    color: #fed7aa !important;
    font-size: 10px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.admin-layout td {
    padding: 8px 9px !important;
    color: #e5e7eb !important;
    font-size: 11px !important;
    vertical-align: top;
}

body.admin-layout .member-points-stack span,
body.admin-layout .member-admin-badge-cell,
body.admin-layout .member-discount-pill,
body.admin-layout .member-no-discount-pill {
    transform: scale(0.92);
    transform-origin: left center;
}

body.admin-layout .member-admin-badge-cell img {
    width: 34px !important;
    height: 34px !important;
}

/* Attendance compact */
body.admin-layout .attendance-summary-grid,
body.admin-layout .payment-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.admin-layout .attendance-summary-card,
body.admin-layout .payment-summary-grid .card,
body.admin-layout .selected-attendance-event-card {
    padding: 13px !important;
    border-radius: 20px !important;
    background: rgba(17, 24, 39, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: var(--urrc-shadow) !important;
}

body.admin-layout .attendance-summary-card strong,
body.admin-layout .payment-summary-grid .card p {
    font-size: 28px !important;
    line-height: 1 !important;
    color: #ffffff !important;
}

body.admin-layout .attendance-review-section {
    margin-top: 14px !important;
}

body.admin-layout .attendance-review-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

body.admin-layout .attendance-request-card,
body.admin-layout .attendance-card {
    padding: 13px !important;
    border-radius: 20px !important;
    background: rgba(17, 24, 39, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

body.admin-layout .attendance-selfie-box img,
body.admin-layout .attendance-selfie-preview img {
    max-height: 190px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
}

/* Admin add/edit event + merch forms */
body.admin-layout .add-event-page,
body.admin-layout .edit-event-page,
body.admin-layout .edit-merch-page {
    max-width: none !important;
    padding-top: 86px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
}

body.admin-layout .add-event-section-card,
body.admin-layout .edit-event-section-card,
body.admin-layout .edit-merch-section-card,
body.admin-layout .edit-event-current-poster-card,
body.admin-layout .edit-event-registration-control-card,
body.admin-layout .edit-merch-preview-card,
body.admin-layout .form-container .card {
    margin-top: 12px !important;
    padding: 15px !important;
    border-radius: 22px !important;
    background: rgba(17, 24, 39, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: var(--urrc-shadow) !important;
}

body.admin-layout .add-event-section-heading,
body.admin-layout .edit-event-section-heading,
body.admin-layout .edit-merch-section-heading {
    margin-bottom: 12px !important;
}

body.admin-layout .add-event-section-heading h2,
body.admin-layout .edit-event-section-heading h2,
body.admin-layout .edit-merch-section-heading h2 {
    font-size: 18px !important;
}

body.admin-layout .add-event-form-grid,
body.admin-layout .edit-event-form-grid,
body.admin-layout .edit-merch-form-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
    gap: 10px !important;
}

body.admin-layout .add-event-form-grid.two-col,
body.admin-layout .edit-event-form-grid.two-col,
body.admin-layout .edit-merch-form-grid.two-col {
    grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
}

body.admin-layout .full-width-field,
body.admin-layout .full-width-registration-link {
    grid-column: 1 / -1 !important;
}

body.admin-layout .add-event-public-registration-box,
body.admin-layout .add-event-countdown-feature-box,
body.admin-layout .add-event-countdown-banner-box,
body.admin-layout .merch-size-toggle-box,
body.admin-layout .merch-size-fields-box {
    margin-top: 10px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    background: rgba(249, 115, 22, 0.08) !important;
    border: 1px solid rgba(249, 115, 22, 0.14) !important;
}

body.admin-layout .edit-event-top-grid,
body.admin-layout .edit-merch-preview-grid {
    display: grid !important;
    grid-template-columns: 0.8fr 1.2fr !important;
    gap: 12px !important;
}

body.admin-layout .edit-event-current-poster-box img,
body.admin-layout .edit-merch-product-preview img,
body.admin-layout .edit-merch-qr-preview img {
    width: 100%;
    max-height: 260px !important;
    object-fit: contain !important;
    border-radius: 16px !important;
}

body.admin-layout .hero {
    min-height: auto !important;
    justify-content: stretch !important;
    align-items: flex-start !important;
    padding: 86px 22px 28px !important;
}

body.admin-layout .form-container {
    max-width: 980px !important;
    margin: 0 !important;
}

body.admin-layout .crop-area {
    padding: 12px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

body.admin-layout .crop-preview {
    max-width: 260px !important;
    max-height: 320px !important;
}

body.admin-layout .merch-size-stock-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 1180px) {
    body.admin-layout .admin-event-info-grid,
    body.admin-layout .add-event-form-grid,
    body.admin-layout .edit-event-form-grid,
    body.admin-layout .edit-merch-form-grid,
    body.admin-layout .add-event-form-grid.two-col,
    body.admin-layout .edit-event-form-grid.two-col,
    body.admin-layout .edit-merch-form-grid.two-col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    body.admin-layout .admin-events-page-header,
    body.admin-layout .admin-attendance-header,
    body.admin-layout .edit-merch-header,
    body.admin-layout .add-event-page-header,
    body.admin-layout .edit-event-page-header,
    body.admin-layout .admin-event-title-row {
        flex-direction: column;
        align-items: stretch;
    }

    body.admin-layout .admin-event-wide-card,
body.admin-layout .admin-event-filter-grid,
body.admin-layout .member-filter-grid,
body.admin-layout .payment-filter-grid,
body.admin-layout .registration-filter-grid,
body.admin-layout .attendance-event-filter-form,
body.admin-layout .attendance-summary-grid,
body.admin-layout .payment-summary-grid,
body.admin-layout .attendance-review-grid,
body.admin-layout .edit-event-top-grid,
body.admin-layout .edit-merch-preview-grid,
body.admin-layout .admin-event-info-grid,
body.admin-layout .add-event-form-grid,
body.admin-layout .edit-event-form-grid,
body.admin-layout .edit-merch-form-grid,
body.admin-layout .add-event-form-grid.two-col,
body.admin-layout .edit-event-form-grid.two-col,
body.admin-layout .edit-merch-form-grid.two-col {
    grid-template-columns: 1fr !important;
}

    body.admin-layout .admin-event-poster-preview,
    body.admin-layout .admin-event-no-poster {
        width: 100% !important;
        height: 190px !important;
    }

    body.admin-layout th {
        top: 66px;
    }
}

/* =========================================================
   URRC ADMIN LAYOUT HOTFIX — SIDEBAR OVERLAP + RIGHT STRIP
   Keep this block at the end so it overrides older admin rules.
========================================================= */

html.admin-html,
html[data-theme="admin"],
html[data-theme="admin"] body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #080c14 !important;
}

body.admin-layout {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding-left: 0 !important;
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at top right, rgba(249, 115, 22, 0.18), transparent 34%),
        linear-gradient(180deg, #080c14, #111827) !important;
}

body.admin-layout .admin-sidebar {
    left: 0 !important;
    width: 270px !important;
}

body.admin-layout .admin-topbar {
    left: 270px !important;
    right: 0 !important;
    width: auto !important;
}

body.admin-layout > .dashboard-container,
body.admin-layout > main,
body.admin-layout > .add-event-page,
body.admin-layout > .edit-event-page,
body.admin-layout > .edit-merch-page,
body.admin-layout > .admin-gallery-page {
    width: calc(100% - 270px) !important;
    max-width: calc(100% - 270px) !important;
    margin-left: 270px !important;
    margin-right: 0 !important;
    padding-top: 86px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box !important;
}

body.admin-layout > .footer,
body.admin-layout .footer {
    width: calc(100% - 270px) !important;
    max-width: calc(100% - 270px) !important;
    margin-left: 270px !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

body.admin-layout .admin-dashboard-clean-page,
body.admin-layout .admin-dashboard-clean-page * {
    box-sizing: border-box !important;
}

body.admin-layout .admin-clean-overview-grid,
body.admin-layout .admin-clean-kpi-grid,
body.admin-layout .admin-leaderboard-reward-grid,
body.admin-layout .admin-top-member-grid,
body.admin-layout .admin-visitor-grid,
body.admin-layout .admin-action-review-grid,
body.admin-layout .admin-event-operations-grid,
body.admin-layout .admin-shortcut-grid {
    width: 100% !important;
    max-width: 100% !important;
}

body.admin-layout .admin-clean-overview-card,
body.admin-layout .admin-clean-priority-card,
body.admin-layout .admin-clean-kpi-card,
body.admin-layout .admin-clean-section {
    min-width: 0 !important;
}

body.admin-layout .chatbot-toggle,
body.admin-layout .urrc-chatbot {
    right: 26px !important;
}

@media (max-width: 1120px) {
    body.admin-layout .admin-sidebar {
        width: 270px !important;
        transform: translateX(-100%);
    }

    body.admin-layout.admin-sidebar-open .admin-sidebar {
        transform: translateX(0);
    }

    body.admin-layout .admin-topbar {
        left: 0 !important;
    }

    body.admin-layout > .dashboard-container,
    body.admin-layout > main,
    body.admin-layout > .add-event-page,
    body.admin-layout > .edit-event-page,
    body.admin-layout > .edit-merch-page,
    body.admin-layout > .admin-gallery-page,
    body.admin-layout > .footer,
    body.admin-layout .footer {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

/* =========================================================
   FASA 5 FINAL PUBLIC/MEMBER LIGHT THEME + WIDTH FIX
   Paste at VERY BOTTOM of css/style.css
========================================================= */

/* =========================
   DESKTOP WIDTH - JANGAN KURUS
========================= */

@media (min-width: 1025px) {
    body:not(.admin-layout) .dashboard-container,
    body:not(.admin-layout) main.dashboard-container,
    body:not(.admin-layout) .section,
    body:not(.admin-layout) .about-page,
    body:not(.admin-layout) .leaderboard-page,
    body:not(.admin-layout) .events-public-page,
    body:not(.admin-layout) .member-profile-page,
    body:not(.admin-layout) .my-merch-orders-page,
    body:not(.admin-layout) .profile-page,
    body:not(.admin-layout) .past-events-page,
    body:not(.admin-layout) .event-detail-page {
        width: min(1580px, calc(100vw - 96px)) !important;
        max-width: min(1580px, calc(100vw - 96px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    body:not(.admin-layout) .home-about-preview,
    body:not(.admin-layout) .home-visual-strip,
    body:not(.admin-layout) .home-countdown-banner-section {
        width: min(1580px, calc(100vw - 96px)) !important;
        max-width: min(1580px, calc(100vw - 96px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* =========================
   NAVBAR SPACING + LOGO BESAR
========================= */

body:not(.admin-layout) {
    --urrc-nav-height: 86px;
}

body:not(.admin-layout) .urrc-navbar {
    height: 86px !important;
    padding-left: 42px !important;
    padding-right: 42px !important;
}

body:not(.admin-layout) .urrc-brand {
    gap: 14px !important;
}

body:not(.admin-layout) .urrc-brand img {
    width: 58px !important;
    height: 58px !important;
    border-radius: 14px !important;
}

body:not(.admin-layout) .urrc-brand strong {
    font-size: 25px !important;
    letter-spacing: -0.03em !important;
}

body:not(.admin-layout) .urrc-brand span {
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
}

body:not(.admin-layout) .urrc-navbar-links {
    gap: 12px !important;
    margin-left: auto !important;
}

body:not(.admin-layout) .urrc-navbar-links > a,
body:not(.admin-layout) .navbar-dropdown,
body:not(.admin-layout) .navbar-dropdown-btn,
body:not(.admin-layout) .theme-toggle-btn,
body:not(.admin-layout) .nav-join-btn,
body:not(.admin-layout) .nav-logout-link {
    margin-left: 0 !important;
}

body:not(.admin-layout) .navbar-dropdown {
    display: inline-flex !important;
    align-items: center !important;
}

body:not(.admin-layout) .urrc-navbar-links > a,
body:not(.admin-layout) .navbar-dropdown-btn,
body:not(.admin-layout) .theme-toggle-btn {
    padding: 11px 15px !important;
    min-height: 42px !important;
    font-size: 14px !important;
}

body:not(.admin-layout) .nav-join-btn,
body:not(.admin-layout) .nav-logout-link {
    padding: 12px 18px !important;
    min-height: 46px !important;
    font-size: 14px !important;
    color: #ffffff !important;
}


/* =========================
   LIGHT THEME GLOBAL TEXT FIX
========================= */

html[data-theme="light"] body:not(.admin-layout) {
    background:
        radial-gradient(circle at top left, rgba(249, 115, 22, 0.13), transparent 35%),
        linear-gradient(180deg, #fff7ed 0%, #ffffff 48%, #fffaf5 100%) !important;
    color: #0f172a !important;
}

html[data-theme="light"] body:not(.admin-layout) h1,
html[data-theme="light"] body:not(.admin-layout) h2,
html[data-theme="light"] body:not(.admin-layout) h3,
html[data-theme="light"] body:not(.admin-layout) h4,
html[data-theme="light"] body:not(.admin-layout) h5,
html[data-theme="light"] body:not(.admin-layout) strong,
html[data-theme="light"] body:not(.admin-layout) label {
    color: #0f172a !important;
}

html[data-theme="light"] body:not(.admin-layout) .image-hero-text h1,
html[data-theme="light"] body:not(.admin-layout) .image-hero-text h2,
html[data-theme="light"] body:not(.admin-layout) .image-hero-text p,
html[data-theme="light"] body:not(.admin-layout) .image-hero-text span,
html[data-theme="light"] body:not(.admin-layout) .image-hero-text strong {
    color: #ffffff !important;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.58) !important;
}

html[data-theme="light"] body:not(.admin-layout) p,
html[data-theme="light"] body:not(.admin-layout) span,
html[data-theme="light"] body:not(.admin-layout) small,
html[data-theme="light"] body:not(.admin-layout) .subtitle,
html[data-theme="light"] body:not(.admin-layout) .section-subtitle {
    color: #475569 !important;
}

/* Hero image text kekalkan putih */
html[data-theme="light"] body:not(.admin-layout) .home-hero-content h1,
html[data-theme="light"] body:not(.admin-layout) .home-hero-content p,
html[data-theme="light"] body:not(.admin-layout) .home-hero-content span,
html[data-theme="light"] body:not(.admin-layout) .home-hero-content strong {
    color: #ffffff !important;
}


/* =========================
   LIGHT THEME CARD FIX
========================= */

html[data-theme="light"] body:not(.admin-layout) .card,
html[data-theme="light"] body:not(.admin-layout) .past-events-search-form,
html[data-theme="light"] body:not(.admin-layout) .auth-card,
html[data-theme="light"] body:not(.admin-layout) .event-card,
html[data-theme="light"] body:not(.admin-layout) .event-tools-card,
html[data-theme="light"] body:not(.admin-layout) .homepage-featured-card,
html[data-theme="light"] body:not(.admin-layout) .about-detail-card,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-chart-card,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-ranking-card,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-badge-levels-card,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-past-season-card,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-compact-card,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-season-banner,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-my-rank-card,
html[data-theme="light"] body:not(.admin-layout) .dashboard-merged-badge-card,
html[data-theme="light"] body:not(.admin-layout) .member-unified-event-card,
html[data-theme="light"] body:not(.admin-layout) .member-profile-card,
html[data-theme="light"] body:not(.admin-layout) .profile-point-card,
html[data-theme="light"] body:not(.admin-layout) .profile-badge-card,
html[data-theme="light"] body:not(.admin-layout) .my-merch-order-card,
html[data-theme="light"] body:not(.admin-layout) .my-merch-payment-box,
html[data-theme="light"] body:not(.admin-layout) .my-merch-section-card,
html[data-theme="light"] body:not(.admin-layout) .my-merch-empty-card {
    background: rgba(255, 255, 255, 0.96) !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 18px 55px rgba(15, 23, 42, 0.08) !important;
}


/* =========================
   ABOUT CARD LIGHT IMAGE FIX
========================= */

html[data-theme="light"] body:not(.admin-layout) .mission-preview-card {
    background-image:
        linear-gradient(rgba(255, 247, 237, 0.86), rgba(255, 247, 237, 0.86)),
        url('../uploads/about_mission_bg.jpg') !important;
}

html[data-theme="light"] body:not(.admin-layout) .achievement-preview-card {
    background-image:
        linear-gradient(rgba(255, 247, 237, 0.86), rgba(255, 247, 237, 0.86)),
        url('../uploads/about_achievement_bg.jpg') !important;
}

html[data-theme="light"] body:not(.admin-layout) .home-about-mini-card {
    border: 1px solid rgba(249, 115, 22, 0.14) !important;
    box-shadow: 0 18px 55px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] body:not(.admin-layout) .home-about-mini-card h3,
html[data-theme="light"] body:not(.admin-layout) .home-about-mini-card p,
html[data-theme="light"] body:not(.admin-layout) .home-about-mini-card span {
    color: #0f172a !important;
}

html[data-theme="light"] body:not(.admin-layout) .about-detail-card {
    background:
        radial-gradient(circle at top right, rgba(249, 115, 22, 0.10), transparent 42%),
        #ffffff !important;
}


/* =========================
   EVENTS PAGE WIDTH + CARD FIX
========================= */

@media (min-width: 1025px) {
    body:not(.admin-layout) .event-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px !important;
        width: 100% !important;
    }

    body:not(.admin-layout) .featured-grid,
    body:not(.admin-layout) .past-events-grid,
    body:not(.admin-layout) .merch-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
        gap: 24px !important;
        width: 100% !important;
    }

body:not(.admin-layout) .compact-event-image-box,
body:not(.admin-layout) .event-image-box,
body:not(.admin-layout) .featured-image-box,
body:not(.admin-layout) .past-page-image-box {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
} }

body:not(.admin-layout) .compact-event-image-box img,
body:not(.admin-layout) .event-image-box img,
body:not(.admin-layout) .featured-image-box img,
body:not(.admin-layout) .past-page-image-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html[data-theme="light"] body:not(.admin-layout) .compact-event-meta-item,
html[data-theme="light"] body:not(.admin-layout) .compact-event-extra-meta span,
html[data-theme="light"] body:not(.admin-layout) .my-merch-detail-box,
html[data-theme="light"] body:not(.admin-layout) .my-merch-price-row {
    background: #fff7ed !important;
    color: #0f172a !important;
    border: 1px solid rgba(249, 115, 22, 0.18) !important;
}


/* =========================
   MEMBER DASHBOARD COMPACT 3/4 + 1/4
========================= */

@media (min-width: 1200px) {
    body.member-site .dashboard-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    body.member-site .dashboard-grid > .card:not(.dashboard-merged-badge-card) {
        min-height: 160px !important;
        padding: 22px !important;
    }

    body.member-site .dashboard-merged-badge-card {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 3fr) minmax(300px, 1fr) !important;
        gap: 18px !important;
        align-items: start !important;
        padding: 24px !important;
    }

    body.member-site .merged-badge-header,
    body.member-site .merged-points-row {
        grid-column: 1 !important;
    }

    body.member-site .dashboard-points-mini-grid,
    body.member-site .merged-leaderboard-box,
    body.member-site .merged-reward-box {
        grid-column: 2 !important;
    }

    body.member-site .dashboard-points-mini-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body.member-site .merged-badge-header {
        grid-template-columns: 130px 1fr !important;
        gap: 18px !important;
        margin-bottom: 18px !important;
    }

    body.member-site .merged-badge-image-wrap {
        width: 130px !important;
        height: 130px !important;
    }

    body.member-site .merged-points-row {
        grid-template-columns: 0.7fr 1.3fr !important;
        gap: 14px !important;
    }

    body.member-site .merged-points-big-box,
    body.member-site .merged-next-progress-box,
    body.member-site .dashboard-mini-points-card,
    body.member-site .merged-leaderboard-box,
    body.member-site .merged-reward-box {
        padding: 16px !important;
        border-radius: 18px !important;
    }

    body.member-site .merged-reward-box {
        margin-top: 0 !important;
    }
}

html[data-theme="light"] body.member-site .merged-points-big-box,
html[data-theme="light"] body.member-site .merged-next-progress-box,
html[data-theme="light"] body.member-site .dashboard-mini-points-card,
html[data-theme="light"] body.member-site .merged-leaderboard-box,
html[data-theme="light"] body.member-site .merged-reward-box,
html[data-theme="light"] body.member-site .merged-badge-image-wrap {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] body.member-site .merged-badge-title-row h3,
html[data-theme="light"] body.member-site .merged-points-big-box strong,
html[data-theme="light"] body.member-site .merged-next-progress-top strong,
html[data-theme="light"] body.member-site .dashboard-mini-points-card strong,
html[data-theme="light"] body.member-site .merged-leaderboard-info strong,
html[data-theme="light"] body.member-site .merged-reward-info strong {
    color: #0f172a !important;
}

html[data-theme="light"] body.member-site .merged-badge-label,
html[data-theme="light"] body.member-site .merged-points-big-box span,
html[data-theme="light"] body.member-site .merged-next-progress-box span,
html[data-theme="light"] body.member-site .dashboard-mini-points-card span,
html[data-theme="light"] body.member-site .merged-leaderboard-info span,
html[data-theme="light"] body.member-site .merged-reward-info span {
    color: #ea580c !important;
}


/* =========================
   PROFILE PAGE FULL SCREEN GRID
========================= */

@media (min-width: 1100px) {
    body:not(.admin-layout) .member-profile-page {
        width: min(1580px, calc(100vw - 96px)) !important;
        max-width: min(1580px, calc(100vw - 96px)) !important;
    }

    body:not(.admin-layout) .member-profile-grid {
        grid-template-columns: 1.45fr 1fr !important;
        gap: 18px !important;
    }

    body:not(.admin-layout) .member-profile-grid > .member-profile-card {
        padding: 22px !important;
        border-radius: 24px !important;
        display: grid !important;
        gap: 12px !important;
        align-content: start !important;
    }

    body:not(.admin-layout) .member-profile-grid > .member-profile-card:first-child {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body:not(.admin-layout) .member-profile-grid > .member-profile-card:nth-child(2) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body:not(.admin-layout) .member-profile-grid > .member-profile-card.full-profile-card {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body:not(.admin-layout) .member-profile-grid > .member-profile-card h3 {
        grid-column: 1 / -1 !important;
        margin-bottom: 4px !important;
    }

    body:not(.admin-layout) .member-profile-grid > .member-profile-card:nth-child(2) .profile-info-text,
    body:not(.admin-layout) .member-profile-grid > .member-profile-card.full-profile-card .profile-info-text {
        grid-column: 1 / -1 !important;
    }

    body:not(.admin-layout) .profile-info-row {
        padding: 12px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
        min-height: 78px !important;
    }

    body:not(.admin-layout) .profile-info-row strong {
        font-size: 14px !important;
        line-height: 1.35 !important;
        word-break: break-word !important;
    }

    body:not(.admin-layout) .profile-info-row span {
        font-size: 11px !important;
    }
}

html[data-theme="light"] body:not(.admin-layout) .profile-info-row {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] body:not(.admin-layout) .profile-info-row span {
    color: #ea580c !important;
}

html[data-theme="light"] body:not(.admin-layout) .profile-info-row strong {
    color: #0f172a !important;
}

html[data-theme="light"] body:not(.admin-layout) .profile-points-section p,
html[data-theme="light"] body:not(.admin-layout) .profile-point-card p,
html[data-theme="light"] body:not(.admin-layout) .profile-badge-card p {
    color: #475569 !important;
}


/* =========================
   MY MERCH ORDERS LIGHT FIX
========================= */

html[data-theme="light"] body:not(.admin-layout) .my-merch-order-info h3,
html[data-theme="light"] body:not(.admin-layout) .my-merch-payment-box h3,
html[data-theme="light"] body:not(.admin-layout) .my-merch-section-card h3,
html[data-theme="light"] body:not(.admin-layout) .my-merch-detail-box strong,
html[data-theme="light"] body:not(.admin-layout) .my-merch-price-row strong {
    color: #0f172a !important;
}

html[data-theme="light"] body:not(.admin-layout) .my-merch-order-info p,
html[data-theme="light"] body:not(.admin-layout) .my-merch-section-card p,
html[data-theme="light"] body:not(.admin-layout) .my-merch-detail-box span {
    color: #475569 !important;
}


/* =========================
   NOTIFICATION LIGHT THEME FIX
========================= */

html[data-theme="light"] body:not(.admin-layout) .notification-toggle {
    background: linear-gradient(135deg, #f97316, #c2410c) !important;
    color: #ffffff !important;
}

html[data-theme="light"] body:not(.admin-layout) .notification-panel {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18) !important;
}

html[data-theme="light"] body:not(.admin-layout) .notification-panel-header,
html[data-theme="light"] body:not(.admin-layout) .notification-actions {
    background: #fff7ed !important;
    border-color: rgba(249, 115, 22, 0.16) !important;
}

html[data-theme="light"] body:not(.admin-layout) .notification-panel-header h4,
html[data-theme="light"] body:not(.admin-layout) .notification-content h5 {
    color: #0f172a !important;
}

html[data-theme="light"] body:not(.admin-layout) .notification-panel-header span,
html[data-theme="light"] body:not(.admin-layout) .notification-content p,
html[data-theme="light"] body:not(.admin-layout) .notification-content small {
    color: #475569 !important;
}

html[data-theme="light"] body:not(.admin-layout) .notification-panel-header button {
    color: #0f172a !important;
}

html[data-theme="light"] body:not(.admin-layout) .notification-actions button {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
}

html[data-theme="light"] body:not(.admin-layout) .notification-item {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] body:not(.admin-layout) .notification-item.unread {
    background: #fff7ed !important;
    border-color: rgba(249, 115, 22, 0.28) !important;
}

html[data-theme="light"] body:not(.admin-layout) .notification-link {
    color: #ea580c !important;
}


/* =========================
   CHATBOT LIGHT THEME FIX
========================= */

html[data-theme="light"] body:not(.admin-layout) .chatbot-toggle,
html[data-theme="light"] body:not(.admin-layout) #chatbotSend,
html[data-theme="light"] body:not(.admin-layout) .chatbot-header {
    background: linear-gradient(135deg, #f97316, #c2410c) !important;
    color: #ffffff !important;
}

html[data-theme="light"] body:not(.admin-layout) .chatbot-box {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.20) !important;
}

html[data-theme="light"] body:not(.admin-layout) .chatbot-messages {
    background: #fffaf5 !important;
}

html[data-theme="light"] body:not(.admin-layout) .bot-message {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

html[data-theme="light"] body:not(.admin-layout) .user-message {
    background: linear-gradient(135deg, #f97316, #c2410c) !important;
    color: #ffffff !important;
}

html[data-theme="light"] body:not(.admin-layout) .chatbot-input-area {
    background: #ffffff !important;
    border-top: 1px solid rgba(15, 23, 42, 0.10) !important;
}

html[data-theme="light"] body:not(.admin-layout) #chatbotInput {
    background: #f8fafc !important;
    color: #0f172a !important;
}


/* =========================
   FOOTER LIGHT FIX
========================= */

html[data-theme="light"] body:not(.admin-layout) .footer {
    background: #ffffff !important;
    color: #0f172a !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] body:not(.admin-layout) .footer p {
    color: #475569 !important;
}

html[data-theme="light"] body:not(.admin-layout) .footer-socials a {
    background: #fff7ed !important;
    color: #9a3412 !important;
    border: 1px solid rgba(249, 115, 22, 0.16) !important;
}

html[data-theme="light"] body:not(.admin-layout) .footer-socials a:hover {
    background: linear-gradient(135deg, #f97316, #c2410c) !important;
    color: #ffffff !important;
}


/* =========================
   MOBILE KEEP BIG BUT CLEAN
========================= */

@media (max-width: 768px) {
    body:not(.admin-layout) {
        --urrc-nav-height: 66px;
        font-size: 15px !important;
    }

    body:not(.admin-layout) .urrc-navbar {
        height: 66px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body:not(.admin-layout) .urrc-brand img {
        width: 38px !important;
        height: 38px !important;
    }

    body:not(.admin-layout) .urrc-brand strong {
        font-size: 18px !important;
    }

    body:not(.admin-layout) .urrc-brand span {
        font-size: 8px !important;
    }

    body:not(.admin-layout) .dashboard-container,
    body:not(.admin-layout) main.dashboard-container,
    body:not(.admin-layout) .section,
    body:not(.admin-layout) .about-page,
    body:not(.admin-layout) .leaderboard-page,
    body:not(.admin-layout) .events-public-page,
    body:not(.admin-layout) .member-profile-page,
    body:not(.admin-layout) .my-merch-orders-page {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body:not(.admin-layout) h1 {
        font-size: 32px !important;
        line-height: 1.08 !important;
    }

    body:not(.admin-layout) h2 {
        font-size: 24px !important;
    }

    body:not(.admin-layout) .event-grid,
    body:not(.admin-layout) .featured-grid,
    body:not(.admin-layout) .past-events-grid,
    body:not(.admin-layout) .merch-grid,
    body.member-site .dashboard-grid,
    body.member-site .member-my-events-grid {
        grid-template-columns: 1fr !important;
    }

    body:not(.admin-layout) .notification-panel {
        width: calc(100vw - 24px) !important;
        right: -2px !important;
        max-height: calc(100vh - 160px) !important;
    }

    body:not(.admin-layout) .chatbot-box {
        width: calc(100vw - 24px) !important;
        right: -2px !important;
        height: min(560px, calc(100vh - 140px)) !important;
    }
}

/* =========================================================
   FIX ABOUT PAGE LIGHT THEME - REMOVE OLD DARK BACKGROUND
   Paste at VERY BOTTOM of css/style.css
========================================================= */

html[data-theme="light"] body:not(.admin-layout) .about-page {
    background: transparent !important;
    color: #0f172a !important;
    width: min(1580px, calc(100vw - 96px)) !important;
    max-width: min(1580px, calc(100vw - 96px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 56px !important;
    overflow-x: hidden !important;
}

html[data-theme="light"] body:not(.admin-layout) .about-page-grid {
    background: transparent !important;
    max-width: 1250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html[data-theme="light"] body:not(.admin-layout) .about-detail-card {
    background:
        radial-gradient(circle at top right, rgba(249, 115, 22, 0.12), transparent 38%),
        #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] body:not(.admin-layout) .about-detail-card::before {
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.88), rgba(255, 255, 255, 0.88)) !important;
}

html[data-theme="light"] body:not(.admin-layout) .about-detail-card h2 {
    color: #0f172a !important;
}

html[data-theme="light"] body:not(.admin-layout) .about-detail-card p {
    color: #475569 !important;
}

html[data-theme="light"] body:not(.admin-layout) .about-page-actions {
    background: transparent !important;
}

/* buang scrollbar melintang yang nampak buruk dekat about page */
body:not(.admin-layout) .about-gallery-carousel {
    scrollbar-width: none !important;
}

body:not(.admin-layout) .about-gallery-carousel::-webkit-scrollbar {
    display: block !important;
}

/* mobile about page */
@media (max-width: 768px) {
    html[data-theme="light"] body:not(.admin-layout) .about-page {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    html[data-theme="light"] body:not(.admin-layout) .about-page-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   ABOUT PAGE FULL WIDTH BACKGROUND FIX
========================================================= */

/* About page shell mesti full screen, bukan max-width container */
body:not(.admin-layout) .about-page {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
}

/* Light theme: about background ikut full screen */
html[data-theme="light"] body:not(.admin-layout) .about-page {
    background:
        radial-gradient(circle at top left, rgba(249, 115, 22, 0.12), transparent 35%),
        linear-gradient(180deg, #fff7ed 0%, #ffffff 45%, #fffaf5 100%) !important;
}

/* Dark theme: kalau tukar dark, background dia pun full screen */
html[data-theme="dark"] body:not(.admin-layout) .about-page {
    background:
        radial-gradient(circle at top left, rgba(249, 115, 22, 0.18), transparent 35%),
        linear-gradient(180deg, #050816 0%, #07111f 100%) !important;
}

/* Content about tu baru center dalam page */
body:not(.admin-layout) .about-page-hero,
body:not(.admin-layout) .about-gallery-carousel,
body:not(.admin-layout) .about-page-grid,
body:not(.admin-layout) .about-page-actions {
    width: min(1250px, calc(100vw - 96px)) !important;
    max-width: min(1250px, calc(100vw - 96px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body:not(.admin-layout) .about-gallery-carousel {
    overflow-x: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #f97316 rgba(249, 115, 22, 0.12) !important;
    padding-bottom: 18px !important;
}

/* Chrome / Edge scrollbar */
body:not(.admin-layout) .about-gallery-carousel::-webkit-scrollbar {
    height: 10px !important;
    display: block !important;
}

body:not(.admin-layout) .about-gallery-carousel::-webkit-scrollbar-track {
    background: rgba(249, 115, 22, 0.10) !important;
    border-radius: 999px !important;
}

body:not(.admin-layout) .about-gallery-carousel::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    border-radius: 999px !important;
}

body:not(.admin-layout) .about-gallery-carousel::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #fb923c, #c2410c) !important;
}

/* Light theme card about */
html[data-theme="light"] body:not(.admin-layout) .about-detail-card {
    background:
        radial-gradient(circle at top right, rgba(249, 115, 22, 0.12), transparent 40%),
        #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] body:not(.admin-layout) .about-detail-card::before {
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.88), rgba(255, 255, 255, 0.88)) !important;
}

html[data-theme="light"] body:not(.admin-layout) .about-detail-card h2 {
    color: #0f172a !important;
}

html[data-theme="light"] body:not(.admin-layout) .about-detail-card p {
    color: #475569 !important;
}

/* Mobile */
@media (max-width: 768px) {
    body:not(.admin-layout) .about-page-hero,
    body:not(.admin-layout) .about-gallery-carousel,
    body:not(.admin-layout) .about-page-grid,
    body:not(.admin-layout) .about-page-actions {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
    }
}

/* =========================================================
   CLEAN FINAL HERO DESIGN
   Only one hero block. Do not duplicate with old hero fixes.
========================================================= */

/* HERO CONTAINER */
body:not(.admin-layout) .home-hero {
    position: relative !important;
    min-height: 720px !important;
    width: 100% !important;
    padding: calc(var(--urrc-nav-height, 86px) + 58px) 36px 82px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 0 0 34px 34px !important;
    box-sizing: border-box !important;
}

/* BACKGROUND SLIDER MUST FILL HERO */
body:not(.admin-layout) .hero-bg-slider {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    overflow: hidden !important;
}

body:not(.admin-layout) .hero-bg-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
}

/* BASE OVERLAY */
body:not(.admin-layout) .home-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* DARK THEME BACKGROUND MOOD */
html[data-theme="dark"] body:not(.admin-layout) .hero-bg-slide {
    filter: brightness(0.78) saturate(1.05) contrast(1.05) !important;
}

html[data-theme="dark"] body:not(.admin-layout) .home-hero-overlay {
    background:
        radial-gradient(
            ellipse at 22% 88%,
            rgba(30, 64, 175, 0.34) 0%,
            rgba(30, 64, 175, 0.15) 28%,
            transparent 62%
        ),
        radial-gradient(
            circle at 78% 22%,
            rgba(249, 115, 22, 0.22) 0%,
            rgba(249, 115, 22, 0.10) 26%,
            transparent 58%
        ),
        linear-gradient(
            180deg,
            rgba(3, 7, 18, 0.60) 0%,
            rgba(3, 7, 18, 0.50) 45%,
            rgba(2, 8, 23, 0.82) 100%
        ) !important;
}

/* LIGHT THEME BACKGROUND MOOD */
html[data-theme="light"] body:not(.admin-layout) .hero-bg-slide {
    filter: brightness(1.04) saturate(0.94) contrast(0.94) !important;
}

html[data-theme="light"] body:not(.admin-layout) .home-hero-overlay {
    background:
        radial-gradient(
            ellipse at 24% 88%,
            rgba(148, 163, 184, 0.48) 0%,
            rgba(148, 163, 184, 0.22) 30%,
            transparent 64%
        ),
        radial-gradient(
            circle at 78% 20%,
            rgba(249, 115, 22, 0.34) 0%,
            rgba(249, 115, 22, 0.16) 26%,
            transparent 58%
        ),
        linear-gradient(
            180deg,
            rgba(255, 247, 237, 0.34) 0%,
            rgba(255, 255, 255, 0.20) 42%,
            rgba(255, 247, 237, 0.62) 100%
        ) !important;
}

/* HERO CARD - SAME SIZE FOR LIGHT AND DARK */
body:not(.admin-layout) .home-hero-content {
    position: relative !important;
    z-index: 3 !important;

    width: min(960px, calc(100vw - 180px)) !important;
    max-width: 960px !important;
    min-height: 390px !important;

    margin: 0 auto !important;
    padding: 54px 64px !important;
    border-radius: 32px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

    overflow: hidden !important;
}

/* DARK CARD GLASS + FLARE */
html[data-theme="dark"] body:not(.admin-layout) .home-hero-content {
    background:
        radial-gradient(
            circle at 78% 26%,
            rgba(249, 115, 22, 0.30) 0%,
            rgba(249, 115, 22, 0.14) 28%,
            transparent 60%
        ),
        radial-gradient(
            circle at 18% 82%,
            rgba(30, 64, 175, 0.24) 0%,
            rgba(30, 64, 175, 0.10) 30%,
            transparent 62%
        ),
        linear-gradient(
            135deg,
            rgba(15, 23, 42, 0.72),
            rgba(69, 26, 3, 0.58)
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow:
        0 34px 95px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;

    backdrop-filter: blur(22px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
}

/* LIGHT CARD GLASS + FLARE */
html[data-theme="light"] body:not(.admin-layout) .home-hero-content {
    background:
        radial-gradient(
            circle at 78% 26%,
            rgba(249, 115, 22, 0.40) 0%,
            rgba(249, 115, 22, 0.20) 28%,
            transparent 62%
        ),
        radial-gradient(
            circle at 18% 82%,
            rgba(148, 163, 184, 0.46) 0%,
            rgba(148, 163, 184, 0.20) 32%,
            transparent 64%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.50),
            rgba(255, 247, 237, 0.30)
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    box-shadow:
        0 34px 95px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;

    backdrop-filter: blur(24px) saturate(1.32) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.32) !important;
}

/* HERO TEXT */
body:not(.admin-layout) .home-hero-content .hero-label {
    margin: 0 0 22px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.12em !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

body:not(.admin-layout) .home-hero-content h1 {
    max-width: 850px !important;
    margin: 0 0 24px !important;
    font-size: clamp(56px, 5vw, 82px) !important;
    line-height: 0.98 !important;
    font-weight: 950 !important;
}

body:not(.admin-layout) .home-hero-content p {
    max-width: 820px !important;
    margin: 0 0 34px !important;
    font-size: 21px !important;
    line-height: 1.45 !important;
}

/* TEXT COLOR DARK */
html[data-theme="dark"] body:not(.admin-layout) .home-hero-content .hero-label {
    color: rgba(255, 255, 255, 0.76) !important;
}

html[data-theme="dark"] body:not(.admin-layout) .home-hero-content h1 {
    color: #ffffff !important;
}

html[data-theme="dark"] body:not(.admin-layout) .home-hero-content p {
    color: rgba(255, 255, 255, 0.80) !important;
}

/* TEXT COLOR LIGHT */
html[data-theme="light"] body:not(.admin-layout) .home-hero-content .hero-label {
    color: #475569 !important;
}

html[data-theme="light"] body:not(.admin-layout) .home-hero-content h1 {
    color: #0f172a !important;
    text-shadow: none !important;
}

html[data-theme="light"] body:not(.admin-layout) .home-hero-content p {
    color: #334155 !important;
}

/* HERO BUTTONS */
body:not(.admin-layout) .home-hero-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

body:not(.admin-layout) .home-hero-actions .btn {
    min-height: 48px !important;
    margin: 0 !important;
    padding: 13px 24px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    box-shadow: 0 14px 34px rgba(249, 115, 22, 0.32) !important;
}

/* MOBILE */
@media (max-width: 768px) {
    body:not(.admin-layout) .home-hero {
        min-height: 590px !important;
        padding: calc(var(--urrc-nav-height, 66px) + 28px) 14px 42px !important;
        border-radius: 0 0 24px 24px !important;
    }

    body:not(.admin-layout) .home-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 365px !important;
        padding: 34px 22px !important;
        border-radius: 24px !important;
    }

    body:not(.admin-layout) .home-hero-content .hero-label {
        font-size: 11px !important;
        margin-bottom: 16px !important;
    }

    body:not(.admin-layout) .home-hero-content h1 {
        font-size: 42px !important;
        line-height: 1.02 !important;
        margin-bottom: 18px !important;
    }

    body:not(.admin-layout) .home-hero-content p {
        font-size: 16px !important;
        line-height: 1.45 !important;
        margin-bottom: 26px !important;
    }

    body:not(.admin-layout) .home-hero-actions .btn {
        min-height: 44px !important;
        padding: 11px 18px !important;
        font-size: 14px !important;
    }
}

/* =========================================================
   ABOUT HERO TEXT FIX - KEEP WHITE ON IMAGE
   Paste at VERY BOTTOM of css/style.css
========================================================= */

/* About hero text atas gambar mesti putih untuk light dan dark */
body:not(.admin-layout) .about-page-hero h1,
body:not(.admin-layout) .about-page-hero h2,
body:not(.admin-layout) .about-page-hero p,
body:not(.admin-layout) .about-page-hero span,
body:not(.admin-layout) .about-page-hero strong,
body:not(.admin-layout) .about-page-hero .section-kicker,
body:not(.admin-layout) .about-page-hero .hero-label {
    color: #ffffff !important;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55) !important;
}

/* Override global light theme text yang paksa jadi gelap */
html[data-theme="light"] body:not(.admin-layout) .about-page-hero h1,
html[data-theme="light"] body:not(.admin-layout) .about-page-hero h2,
html[data-theme="light"] body:not(.admin-layout) .about-page-hero p,
html[data-theme="light"] body:not(.admin-layout) .about-page-hero span,
html[data-theme="light"] body:not(.admin-layout) .about-page-hero strong,
html[data-theme="light"] body:not(.admin-layout) .about-page-hero .section-kicker,
html[data-theme="light"] body:not(.admin-layout) .about-page-hero .hero-label {
    color: #ffffff !important;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.58) !important;
}

/* About hero overlay light theme bagi gambar gelap sikit supaya text nampak */
html[data-theme="light"] body:not(.admin-layout) .about-page-hero::before {
    background:
        linear-gradient(
            135deg,
            rgba(3, 7, 18, 0.58),
            rgba(249, 115, 22, 0.28)
        ) !important;
    opacity: 1 !important;
}

/* Kalau overlay lama guna ::after */
html[data-theme="light"] body:not(.admin-layout) .about-page-hero::after {
    background:
        radial-gradient(circle at 75% 20%, rgba(249, 115, 22, 0.28), transparent 42%),
        linear-gradient(180deg, rgba(3, 7, 18, 0.18), rgba(3, 7, 18, 0.35)) !important;
    opacity: 1 !important;
}

/* Pastikan content text duduk atas overlay */
body:not(.admin-layout) .about-page-hero > * {
    position: relative !important;
    z-index: 2 !important;
}

/* =========================================================
   LEADERBOARD FINAL STABLE FIX V3
   Clean scoped fix for leaderboard.php only
========================================================= */

body:not(.admin-layout) .dashboard-container.leaderboard-page {
    --lb-text: #0f172a;
    --lb-muted: #475569;
    --lb-line: rgba(15, 23, 42, 0.10);
    --lb-card: rgba(255, 255, 255, 0.94);
    --lb-soft: #fff7ed;
    --lb-soft-2: #ffedd5;
    --lb-orange-1: #ffb347;
    --lb-orange-2: #ff6a00;
    --lb-orange-3: #c2410c;
    --lb-orange-grad: linear-gradient(135deg, #ffb347 0%, #ff7a18 42%, #c2410c 100%);
    --lb-orange-soft-grad: linear-gradient(135deg, #fff7ed 0%, #ffedd5 54%, #fed7aa 100%);

    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: calc(var(--urrc-nav-height, 96px) + 46px) !important;
    padding-left: clamp(22px, 4vw, 64px);
    padding-right: clamp(22px, 4vw, 64px);
    padding-bottom: 44px;
    box-sizing: border-box;
}

html[data-theme="light"] body:not(.admin-layout) .dashboard-container.leaderboard-page {
    background:
        radial-gradient(circle at 8% 6%, rgba(249, 115, 22, 0.13), transparent 30%),
        radial-gradient(circle at 90% 16%, rgba(255, 179, 71, 0.12), transparent 34%),
        linear-gradient(180deg, #fff7ed 0%, #ffffff 46%, #fffaf5 100%);
    color: var(--lb-text);
}

html[data-theme="dark"] body:not(.admin-layout) .dashboard-container.leaderboard-page {
    --lb-text: #ffffff;
    --lb-muted: #b8c0d4;
    --lb-line: rgba(255, 255, 255, 0.10);
    --lb-card: #111421;
    --lb-soft: rgba(249, 115, 22, 0.12);
    --lb-soft-2: rgba(249, 115, 22, 0.20);

    background:
        radial-gradient(circle at 4% 10%, rgba(249, 115, 22, 0.14), transparent 34%),
        linear-gradient(180deg, #050816 0%, #08111f 100%);
    color: #ffffff;
}

body:not(.admin-layout) .dashboard-container.leaderboard-page > section,
body:not(.admin-layout) .leaderboard-join-wrapper {
    width: min(1520px, 100%);
    max-width: 1520px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

body:not(.admin-layout) .leaderboard-page-header {
    padding-top: 0 !important;
    margin: 0 auto 36px;
    text-align: left;
}

body:not(.admin-layout) .leaderboard-page-header .leaderboard-label {
    display: block;
    margin: 0 0 10px;
    padding: 0;
    color: #c2410c;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

html[data-theme="dark"] body:not(.admin-layout) .leaderboard-page-header .leaderboard-label {
    color: #fdba74;
}

body:not(.admin-layout) .leaderboard-page-header h1 {
    margin: 0 0 18px;
    padding: 0;
    color: var(--lb-text) !important;
    font-size: clamp(42px, 5vw, 74px) !important;
    line-height: 1.02;
    font-weight: 950;
    letter-spacing: -0.04em;
}

body:not(.admin-layout) .leaderboard-page-header p:not(.leaderboard-label) {
    max-width: 850px;
    margin: 0;
    color: var(--lb-muted) !important;
    font-size: 19px;
    line-height: 1.65;
}

body:not(.admin-layout) .leaderboard-season-banner,
body:not(.admin-layout) .leaderboard-badge-levels-card,
body:not(.admin-layout) .leaderboard-chart-card,
body:not(.admin-layout) .leaderboard-ranking-card,
body:not(.admin-layout) .leaderboard-past-season-section,
body:not(.admin-layout) .leaderboard-compact-section {
    margin-bottom: 34px;
}

body:not(.admin-layout) .leaderboard-season-content,
body:not(.admin-layout) .leaderboard-badge-levels-card,
body:not(.admin-layout) .leaderboard-chart-card,
body:not(.admin-layout) .leaderboard-ranking-card,
body:not(.admin-layout) .leaderboard-past-season-card,
body:not(.admin-layout) .leaderboard-compact-card {
    border-radius: 30px;
    border: 1px solid var(--lb-line);
    box-shadow: 0 22px 65px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] body:not(.admin-layout) .leaderboard-season-content,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-badge-levels-card,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-chart-card,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-ranking-card,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-past-season-card,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-compact-card {
    background: rgba(255, 255, 255, 0.94);
    color: #0f172a;
}

html[data-theme="dark"] body:not(.admin-layout) .leaderboard-season-content,
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-badge-levels-card,
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-chart-card,
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-ranking-card,
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-past-season-card,
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-compact-card {
    background:
        radial-gradient(circle at top right, rgba(249, 115, 22, 0.12), transparent 34%),
        #111421;
    color: #ffffff;
    box-shadow: 0 22px 65px rgba(0, 0, 0, 0.24);
}

body:not(.admin-layout) .leaderboard-badge-levels-card,
body:not(.admin-layout) .leaderboard-chart-card,
body:not(.admin-layout) .leaderboard-ranking-card,
body:not(.admin-layout) .leaderboard-past-season-card,
body:not(.admin-layout) .leaderboard-compact-card {
    padding: clamp(24px, 3vw, 38px);
}

body:not(.admin-layout) .leaderboard-season-content {
    padding: clamp(28px, 3vw, 42px);
}

body:not(.admin-layout) .leaderboard-section-heading h2,
body:not(.admin-layout) .leaderboard-badge-levels-card h2,
body:not(.admin-layout) .leaderboard-chart-card h2,
body:not(.admin-layout) .leaderboard-ranking-card h2,
body:not(.admin-layout) .leaderboard-compact-section h2,
body:not(.admin-layout) .leaderboard-compact-card h3,
body:not(.admin-layout) .leaderboard-season-content h2,
body:not(.admin-layout) .leaderboard-past-season-header h3 {
    color: var(--lb-text) !important;
}

body:not(.admin-layout) .leaderboard-section-heading p,
body:not(.admin-layout) .leaderboard-badge-levels-card > p,
body:not(.admin-layout) .leaderboard-chart-card p,
body:not(.admin-layout) .leaderboard-ranking-card p,
body:not(.admin-layout) .leaderboard-compact-card > p,
body:not(.admin-layout) .leaderboard-season-content p,
body:not(.admin-layout) .leaderboard-past-season-header p {
    color: var(--lb-muted) !important;
}

body:not(.admin-layout) .leaderboard-badge-levels-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

body:not(.admin-layout) .leaderboard-badge-level-card {
    padding: 22px 16px !important;
    border-radius: 24px;
    text-align: center;
}

html[data-theme="light"] body:not(.admin-layout) .leaderboard-badge-level-card,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-bar-row,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-list-row,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-compact-row,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-past-winner-card {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.10);
    color: #0f172a;
}

html[data-theme="dark"] body:not(.admin-layout) .leaderboard-badge-level-card,
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-bar-row,
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-list-row,
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-compact-row,
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-past-winner-card {
    background: rgba(9, 13, 26, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

body:not(.admin-layout) .leaderboard-badge-level-image {
    width: 112px !important;
    height: 112px !important;
    margin: 0 auto 18px;
    padding: 12px;
    border-radius: 28px;
}

body:not(.admin-layout) .leaderboard-badge-level-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body:not(.admin-layout) .leaderboard-badge-level-info h3 {
    color: var(--lb-text) !important;
    font-size: 21px;
    line-height: 1.25;
}

body:not(.admin-layout) .leaderboard-badge-points-needed,
body:not(.admin-layout) .leaderboard-chart-rank,
body:not(.admin-layout) .leaderboard-rank-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--lb-orange-grad) !important;
    color: #ffffff !important;
    border: 0;
    font-weight: 950;
    box-shadow: 0 10px 26px rgba(249, 115, 22, 0.28);
}

body:not(.admin-layout) .leaderboard-badge-points-needed {
    min-height: 44px;
    padding: 0 17px;
}

body:not(.admin-layout) .leaderboard-badge-discount-reward,
body:not(.admin-layout) .leaderboard-member-badge-name,
body:not(.admin-layout) .leaderboard-past-badge-name,
body:not(.admin-layout) .leaderboard-season-status,
body:not(.admin-layout) .leaderboard-compact-row em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--lb-orange-soft-grad) !important;
    color: #8a2c0a !important;
    border: 1px solid rgba(249, 115, 22, 0.26);
    font-weight: 950;
}

body:not(.admin-layout) .leaderboard-bar-chart {
    display: grid;
    gap: 14px;
}

body:not(.admin-layout) .leaderboard-bar-row {
    display: grid;
    grid-template-columns: 230px minmax(240px, 1fr) 170px !important;
    align-items: center;
    gap: 16px;
    padding: 16px 18px !important;
    border-radius: 22px !important;
}

body:not(.admin-layout) .leaderboard-bar-member {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

body:not(.admin-layout) .leaderboard-chart-rank,
body:not(.admin-layout) .leaderboard-rank-pill {
    width: 52px;
    height: 52px;
    min-width: 52px;
    padding: 0;
}

body:not(.admin-layout) .leaderboard-bar-member strong,
body:not(.admin-layout) .leaderboard-name-line strong,
body:not(.admin-layout) .leaderboard-compact-row strong {
    color: var(--lb-text) !important;
}

body:not(.admin-layout) .leaderboard-bar-track {
    height: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: #ffedd5 !important;
}

html[data-theme="dark"] body:not(.admin-layout) .leaderboard-bar-track {
    background: rgba(255, 255, 255, 0.10) !important;
}

body:not(.admin-layout) .leaderboard-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--lb-orange-grad) !important;
    box-shadow: 0 0 24px rgba(249, 115, 22, 0.30);
}

body:not(.admin-layout) .leaderboard-bar-points,
body:not(.admin-layout) .leaderboard-points-pill {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    justify-self: end;
    min-width: 150px;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px !important;
    background: var(--lb-orange-grad) !important;
    color: #ffffff !important;
    border: 0 !important;
    font-size: 14px;
    font-weight: 950;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(249, 115, 22, 0.24);
}

body:not(.admin-layout) .leaderboard-list {
    display: grid;
    gap: 14px;
}

body:not(.admin-layout) .leaderboard-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px !important;
    border-radius: 24px !important;
}

body:not(.admin-layout) .leaderboard-member-info,
body:not(.admin-layout) .leaderboard-member-with-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

body:not(.admin-layout) .leaderboard-member-badge-image {
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    padding: 8px;
    border-radius: 24px;
    background: var(--lb-orange-soft-grad) !important;
    border: 1px solid rgba(249, 115, 22, 0.22);
}

body:not(.admin-layout) .leaderboard-member-badge-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body:not(.admin-layout) .leaderboard-member-badge-name {
    min-height: 36px;
    padding: 0 15px;
}

body:not(.admin-layout) .leaderboard-points-stack {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

body:not(.admin-layout) .leaderboard-points-stack small {
    color: var(--lb-muted) !important;
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}

body:not(.admin-layout) .leaderboard-compact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px;
}

body:not(.admin-layout) .leaderboard-compact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px !important;
    border-radius: 20px !important;
}

body:not(.admin-layout) .leaderboard-compact-row em {
    min-width: 78px;
    min-height: 42px;
    padding: 0 14px;
    font-style: normal;
}

body:not(.admin-layout) .leaderboard-more-actions {
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: 24px;
    background: var(--lb-orange-soft-grad) !important;
    border: 1px solid rgba(249, 115, 22, 0.22);
    color: #7c2d12 !important;
}

body:not(.admin-layout) .leaderboard-page .btn,
body:not(.admin-layout) .leaderboard-more-actions .btn,
body:not(.admin-layout) .leaderboard-join-card .btn,
body:not(.admin-layout) .leaderboard-season-manage-btn {
    border: 0;
    background: var(--lb-orange-grad) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 34px rgba(249, 115, 22, 0.30);
}

body:not(.admin-layout) .leaderboard-join-wrapper {
    padding: 0;
    margin-top: 22px;
    margin-bottom: 30px;
}

body:not(.admin-layout) .leaderboard-join-card {
    margin: 0;
    padding: 34px 42px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 86% 26%, rgba(249, 115, 22, 0.28), transparent 32%),
        var(--lb-orange-soft-grad) !important;
    border: 1px solid rgba(249, 115, 22, 0.22);
    color: #0f172a;
    box-shadow: 0 22px 65px rgba(249, 115, 22, 0.10);
}

body:not(.admin-layout) .leaderboard-join-card h3,
body:not(.admin-layout) .leaderboard-join-card p {
    color: #0f172a !important;
}

@media (max-width: 1200px) {
    body:not(.admin-layout) .leaderboard-badge-levels-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body:not(.admin-layout) .leaderboard-bar-row {
        grid-template-columns: 190px minmax(160px, 1fr) 150px !important;
    }
}

@media (max-width: 820px) {
    body:not(.admin-layout) .dashboard-container.leaderboard-page {
        padding-top: calc(var(--urrc-nav-height, 66px) + 28px) !important;
        padding-left: 14px;
        padding-right: 14px;
    }

    body:not(.admin-layout) .leaderboard-page-header h1 {
        font-size: 40px !important;
    }

    body:not(.admin-layout) .leaderboard-badge-levels-grid,
    body:not(.admin-layout) .leaderboard-compact-grid {
        grid-template-columns: 1fr !important;
    }

    body:not(.admin-layout) .leaderboard-bar-row {
        grid-template-columns: 1fr !important;
    }

    body:not(.admin-layout) .leaderboard-bar-points,
    body:not(.admin-layout) .leaderboard-points-pill {
        justify-self: stretch;
        width: 100%;
    }

    body:not(.admin-layout) .leaderboard-list-row,
    body:not(.admin-layout) .leaderboard-join-card {
        flex-direction: column;
        align-items: stretch;
    }

    body:not(.admin-layout) .leaderboard-points-stack {
        align-items: stretch;
    }

    body:not(.admin-layout) .leaderboard-points-stack small {
        text-align: left;
    }
}

/* =========================================================
   LEADERBOARD V4 FINAL PATCH
   Paste this at the VERY BOTTOM of css/style.css
   Scope: leaderboard page only
========================================================= */

/* 1) Make leaderboard background full-width and stop the side boxed look */
html[data-theme="light"] body:has(.dashboard-container.leaderboard-page),
html[data-theme="light"] body:not(.admin-layout):has(.dashboard-container.leaderboard-page) {
    background:
        radial-gradient(circle at 8% 8%, rgba(249, 115, 22, 0.12), transparent 32%),
        radial-gradient(circle at 92% 16%, rgba(251, 146, 60, 0.10), transparent 34%),
        linear-gradient(180deg, #fff7ed 0%, #ffffff 46%, #fffaf5 100%) !important;
}

html[data-theme="dark"] body:has(.dashboard-container.leaderboard-page),
html[data-theme="dark"] body:not(.admin-layout):has(.dashboard-container.leaderboard-page) {
    background:
        radial-gradient(circle at 4% 12%, rgba(249, 115, 22, 0.16), transparent 34%),
        linear-gradient(180deg, #050816 0%, #08111f 100%) !important;
}

body:not(.admin-layout) .dashboard-container.leaderboard-page {
    --lb-orange-grad: linear-gradient(135deg, #ffb347 0%, #ff7a18 45%, #ea580c 72%, #c2410c 100%) !important;
    --lb-orange-soft-grad: linear-gradient(135deg, #fff7ed 0%, #ffedd5 56%, #fed7aa 100%) !important;
    --lb-orange-text: #fffaf0;
    --lb-dark-text: #0f172a;
    --lb-muted-text: #475569;

    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-top: calc(var(--urrc-nav-height, 92px) + 58px) !important;
    padding-left: clamp(26px, 3.6vw, 56px) !important;
    padding-right: clamp(26px, 3.6vw, 56px) !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

body:not(.admin-layout) .dashboard-container.leaderboard-page > section,
body:not(.admin-layout) .leaderboard-join-wrapper {
    width: 100% !important;
    max-width: 1680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* 2) Header spacing and clean alignment */
body:not(.admin-layout) .leaderboard-page-header {
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 44px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:not(.admin-layout) .leaderboard-page-header .leaderboard-label {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

html[data-theme="light"] body:not(.admin-layout) .leaderboard-page-header h1,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-page-header p:not(.leaderboard-label) {
    color: #0f172a !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html[data-theme="dark"] body:not(.admin-layout) .leaderboard-page-header h1 {
    color: #ffffff !important;
    opacity: 1 !important;
}

html[data-theme="dark"] body:not(.admin-layout) .leaderboard-page-header p:not(.leaderboard-label) {
    color: #cbd5e1 !important;
    opacity: 1 !important;
}

/* 3) Remove unwanted square/box around the white rounded cards */
body:not(.admin-layout) .leaderboard-season-banner,
body:not(.admin-layout) .leaderboard-badge-levels-card,
body:not(.admin-layout) .leaderboard-chart-card,
body:not(.admin-layout) .leaderboard-ranking-card,
body:not(.admin-layout) .leaderboard-past-season-section,
body:not(.admin-layout) .leaderboard-compact-section {
    background-clip: padding-box !important;
    outline: none !important;
}

body:not(.admin-layout) .leaderboard-season-banner {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

html[data-theme="light"] body:not(.admin-layout) .leaderboard-season-content,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-badge-levels-card,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-chart-card,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-ranking-card,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-past-season-card,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-compact-card {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 22px 65px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="dark"] body:not(.admin-layout) .leaderboard-season-content,
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-badge-levels-card,
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-chart-card,
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-ranking-card,
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-past-season-card,
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-compact-card {
    background:
        radial-gradient(circle at top right, rgba(249, 115, 22, 0.12), transparent 34%),
        #111421 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 22px 65px rgba(0, 0, 0, 0.26) !important;
}

/* 4) Strong readable text in both themes */
html[data-theme="light"] body:not(.admin-layout) .leaderboard-page h1,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-page h2,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-page h3,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-page strong {
    color: #0f172a !important;
    opacity: 1 !important;
}

html[data-theme="light"] body:not(.admin-layout) .leaderboard-page p,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-page small,
html[data-theme="light"] body:not(.admin-layout) .leaderboard-page span:not(.leaderboard-badge-points-needed):not(.leaderboard-chart-rank):not(.leaderboard-rank-pill):not(.leaderboard-points-pill):not(.leaderboard-bar-points) {
    opacity: 1 !important;
}

html[data-theme="dark"] body:not(.admin-layout) .leaderboard-page h1,
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-page h2,
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-page h3,
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-page strong {
    color: #ffffff !important;
    opacity: 1 !important;
}

html[data-theme="dark"] body:not(.admin-layout) .leaderboard-page p,
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-page small {
    color: #cbd5e1 !important;
    opacity: 1 !important;
}

/* 5) All orange elements use gradient + light readable font */
html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-badge-points-needed,
html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-chart-rank,
html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-rank-pill,
html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-bar-points,
html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-points-pill,
html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-past-winner-rank {
    background: var(--lb-orange-grad) !important;
    color: #fffaf0 !important;
    border: 0 !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.20) !important;
    box-shadow: 0 12px 30px rgba(249, 115, 22, 0.30) !important;
}

html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-chart-rank,
html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-rank-pill,
html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-past-winner-rank {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-bar-points,
html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-points-pill {
    min-width: 158px !important;
    min-height: 48px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
}

/* 6) Soft orange pills, readable but not drowned */
html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-badge-discount-reward,
html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-member-badge-name,
html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-past-badge-name,
html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-season-status,
html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-compact-row em {
    background: var(--lb-orange-soft-grad) !important;
    color: #7c2d12 !important;
    border: 1px solid rgba(249, 115, 22, 0.30) !important;
    font-weight: 950 !important;
    opacity: 1 !important;
}

/* 7) Graph bar: gradient orange, rounded, no flat cheap orange */
html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-bar-track {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}

html[data-theme="dark"] body:not(.admin-layout) .leaderboard-page .leaderboard-bar-track {
    background: rgba(255, 255, 255, 0.10) !important;
}

html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-bar-fill {
    background: var(--lb-orange-grad) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 24px rgba(249, 115, 22, 0.34) !important;
}

/* 8) Current ranking badge image stays visible and clean */
body:not(.admin-layout) .leaderboard-member-badge-image {
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    border-radius: 24px !important;
    background: var(--lb-orange-soft-grad) !important;
}

body:not(.admin-layout) .leaderboard-member-badge-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* 9) Join card bottom: orange card in light and dark, font/button visible */
html[data-theme] body:not(.admin-layout) .leaderboard-join-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: clamp(26px, 3.6vw, 56px) !important;
    padding-right: clamp(26px, 3.6vw, 56px) !important;
    box-sizing: border-box !important;
}

html[data-theme] body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card {
    max-width: 1680px !important;
    margin: 0 auto 34px !important;
    background:
        radial-gradient(circle at 88% 25%, rgba(255, 255, 255, 0.34), transparent 30%),
        var(--lb-orange-soft-grad) !important;
    border: 1px solid rgba(249, 115, 22, 0.34) !important;
    color: #0f172a !important;
    box-shadow: 0 22px 65px rgba(249, 115, 22, 0.14) !important;
}

html[data-theme] body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card h3,
html[data-theme] body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card p {
    color: #0f172a !important;
    opacity: 1 !important;
}

html[data-theme] body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card .btn,
html[data-theme] body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card button.btn {
    background: var(--lb-orange-grad) !important;
    color: #fffaf0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    min-height: 54px !important;
    padding: 0 28px !important;
    font-weight: 950 !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.22) !important;
    box-shadow: 0 16px 34px rgba(249, 115, 22, 0.34) !important;
}

/* 10) Mobile keep same spacing width */
@media (max-width: 820px) {
    body:not(.admin-layout) .dashboard-container.leaderboard-page {
        padding-top: calc(var(--urrc-nav-height, 66px) + 34px) !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    html[data-theme] body:not(.admin-layout) .leaderboard-join-wrapper {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-bar-points,
    html[data-theme] body:not(.admin-layout) .leaderboard-page .leaderboard-points-pill {
        justify-self: stretch !important;
        width: 100% !important;
    }
}
/* =========================================================
   LEADERBOARD JOIN CTA VISIBILITY FIX V5
   Paste at the VERY BOTTOM of css/style.css
========================================================= */

/* punca fix: join wrapper berada di luar .leaderboard-page,
   jadi CSS variable lama tak sampai. Guna gradient literal. */
body:not(.admin-layout) .leaderboard-join-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 54px clamp(26px, 3.6vw, 56px) 52px !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card {
    width: 100% !important;
    max-width: 1680px !important;
    margin: 0 auto !important;
    min-height: 190px !important;
    padding: 38px 42px !important;
    border-radius: 34px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 28px !important;

    background:
        radial-gradient(circle at 88% 24%, rgba(255, 255, 255, 0.52), transparent 30%),
        linear-gradient(135deg, #fff7ed 0%, #ffedd5 45%, #fed7aa 100%) !important;
    border: 1px solid rgba(249, 115, 22, 0.32) !important;
    box-shadow: 0 24px 70px rgba(249, 115, 22, 0.16) !important;
    color: #0f172a !important;
}

body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card h3,
body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card p,
body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card div,
body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card span,
body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card strong {
    color: #0f172a !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
}

body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card h3 {
    font-size: clamp(26px, 2vw, 34px) !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    margin: 0 0 10px !important;
}

body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card p {
    font-size: 17px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    color: #334155 !important;
}

body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card a {
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card .btn,
body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card button.btn {
    min-width: 210px !important;
    min-height: 58px !important;
    padding: 0 32px !important;
    border-radius: 999px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: linear-gradient(135deg, #f97316 0%, #ea580c 52%, #c2410c 100%) !important;
    color: #fffaf0 !important;
    border: none !important;
    opacity: 1 !important;
    visibility: visible !important;

    font-size: 16px !important;
    font-weight: 950 !important;
    text-align: center !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.22) !important;
    box-shadow: 0 18px 42px rgba(249, 115, 22, 0.36) !important;
}

body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card .btn:hover,
body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card button.btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 22px 50px rgba(249, 115, 22, 0.44) !important;
}

/* Dark theme: keep CTA bright, not dark blue */
html[data-theme="dark"] body:not(.admin-layout) .leaderboard-join-wrapper {
    background: #07111f !important;
}

html[data-theme="dark"] body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card {
    background:
        radial-gradient(circle at 88% 24%, rgba(255, 255, 255, 0.42), transparent 30%),
        linear-gradient(135deg, #fff7ed 0%, #ffedd5 45%, #fed7aa 100%) !important;
    border-color: rgba(249, 115, 22, 0.42) !important;
}

html[data-theme="light"] body:not(.admin-layout) .leaderboard-join-wrapper {
    background: #fffaf5 !important;
}

@media (max-width: 768px) {
    body:not(.admin-layout) .leaderboard-join-wrapper {
        padding: 34px 14px 34px !important;
    }

    body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card {
        min-height: auto !important;
        padding: 26px 22px !important;
        border-radius: 26px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card a,
    body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card .btn,
    body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card button.btn {
        width: 100% !important;
    }
}

/* FIX MISSING ORANGE GRADIENT VARIABLE */
html[data-theme],
body:not(.admin-layout),
.leaderboard-redesign-fix,
.leaderboard-join-wrapper,
.leaderboard-join-card {
    --lb-orange-grad: linear-gradient(135deg, #ff9a2f 0%, #ff6b00 50%, #d94f00 100%);
}

/* FORCE JOIN MEMBERS BUTTON COLOR */
html[data-theme] body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card .btn,
html[data-theme] body:not(.admin-layout) .leaderboard-join-wrapper .leaderboard-join-card button.btn {
    background: linear-gradient(135deg, #ff9a2f 0%, #ff6b00 50%, #d94f00 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 16px 34px rgba(249, 115, 22, 0.34) !important;
}
/* TRACK EVENT REGISTRATION - LIGHT THEME ONLY */

html[data-theme="light"] .track-event-registration-page{
    background:
        radial-gradient(circle at top left, rgba(249,115,22,.10), transparent 35%),
        linear-gradient(180deg,#fff7ed 0%,#ffffff 100%) !important;
}

html[data-theme="light"] .track-event-registration-page h1{
    color:#0f172a !important;
    text-shadow:none !important;
}

html[data-theme="light"] .track-event-registration-page p{
    color:#475569 !important;
}

html[data-theme="light"] .track-event-registration-page form{
    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(15,23,42,.08) !important;
    box-shadow:0 20px 50px rgba(15,23,42,.08) !important;
}

html[data-theme="light"] .track-event-registration-page label{
    color:#0f172a !important;
}

html[data-theme="light"] .track-event-registration-page input{
    background:#ffffff !important;
    color:#0f172a !important;
    border:1px solid rgba(15,23,42,.12) !important;
}

html[data-theme="light"] .track-event-registration-page input::placeholder{
    color:#94a3b8 !important;
}

html[data-theme="light"] .track-event-registration-page button{
    background:linear-gradient(
        135deg,
        #ff9a2f 0%,
        #ff6b00 50%,
        #d94f00 100%
    ) !important;

    color:#ffffff !important;
    border:none !important;
}

/* ===================================================
   TRACK REGISTRATION LIGHT THEME FIX
=================================================== */

html[data-theme="light"] .track-registration-body{
    background:#fff7ed !important;
}

html[data-theme="light"] .track-wrapper{
    background:
        radial-gradient(circle at top left,
        rgba(249,115,22,.10),
        transparent 40%),
        #fff7ed !important;
}

html[data-theme="light"] .track-header h1{
    color:#0f172a !important;
    text-shadow:none !important;
}

html[data-theme="light"] .track-header p{
    color:#475569 !important;
}

html[data-theme="light"] .track-card{
    background:#ffffff !important;
    border:1px solid rgba(15,23,42,.08) !important;
    box-shadow:0 20px 50px rgba(15,23,42,.08) !important;
}

html[data-theme="light"] .track-form label{
    color:#0f172a !important;
}

html[data-theme="light"] .track-form input{
    background:#ffffff !important;
    color:#0f172a !important;
    border:1px solid rgba(15,23,42,.12) !important;
}

html[data-theme="light"] .track-form input::placeholder{
    color:#94a3b8 !important;
}

html[data-theme="light"] .btn-track{
    background:linear-gradient(
        135deg,
        #ff9a2f 0%,
        #ff6b00 50%,
        #d94f00 100%
    ) !important;

    color:#ffffff !important;
    border:none !important;
}

/* TRACK REGISTRATION BUTTON FIX - LIGHT ONLY */

html[data-theme="light"] .track-registration-body .btn-track,
html[data-theme="light"] .track-registration-body .btn-track:hover,
html[data-theme="light"] .track-registration-body .btn-track:focus {
    background: linear-gradient(135deg, #ff9a2f 0%, #ff6b00 50%, #d94f00 100%) !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 14px 34px rgba(249,115,22,.30) !important;
}

html[data-theme="light"] .track-registration-body .back-link {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme="light"] .track-registration-body .back-link a,
html[data-theme="light"] .track-registration-body .back-link a:hover,
html[data-theme="light"] .track-registration-body .back-link a:focus {
    background: linear-gradient(135deg, #ff9a2f 0%, #ff6b00 50%, #d94f00 100%) !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 14px 34px rgba(249,115,22,.30) !important;
}

/* TRACK REGISTRATION BUTTON FIX - DARK THEME */

html[data-theme="dark"] .track-registration-body .btn-track,
html[data-theme="dark"] .track-registration-body .btn-track:hover,
html[data-theme="dark"] .track-registration-body .btn-track:focus {
    background: linear-gradient(
        135deg,
        #ff9a2f 0%,
        #ff6b00 50%,
        #d94f00 100%
    ) !important;

    color: #ffffff !important;
    border: none !important;

    box-shadow:
        0 16px 36px rgba(249,115,22,.35) !important;
}

/* BACK BUTTON */

html[data-theme="dark"] .track-registration-body .back-link {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .track-registration-body .back-link a,
html[data-theme="dark"] .track-registration-body .back-link a:hover,
html[data-theme="dark"] .track-registration-body .back-link a:focus {
    background: linear-gradient(
        135deg,
        #ff9a2f 0%,
        #ff6b00 50%,
        #d94f00 100%
    ) !important;

    color: #ffffff !important;
    border: none !important;

    box-shadow:
        0 16px 36px rgba(249,115,22,.35) !important;
}

/* TRACK REGISTRATION DARK DROPDOWN HOVER FIX */

html[data-theme="dark"] .track-registration-body .navbar-dropdown-menu a,
html[data-theme="dark"] .track-registration-body .navbar-dropdown-menu button {
    color: #ffffff !important;
}

html[data-theme="dark"] .track-registration-body .navbar-dropdown-menu a:hover,
html[data-theme="dark"] .track-registration-body .navbar-dropdown-menu button:hover,
html[data-theme="dark"] .track-registration-body .navbar-dropdown-menu a.active,
html[data-theme="dark"] .track-registration-body .navbar-dropdown-menu button.active {
    background: linear-gradient(135deg, rgba(249,115,22,.28), rgba(234,88,12,.18)) !important;
    color: #ffedd5 !important;
}



/* ADMIN LOGIN - 50/50 LAYOUT */
html[data-theme="light"] .admin-login-page .admin-auth-layout,
html[data-theme="dark"] .admin-login-page .admin-auth-layout {
    width: min(1400px, calc(100vw - 80px)) !important;
    max-width: 1400px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
}

html[data-theme="light"] .admin-login-page .admin-auth-visual,
html[data-theme="dark"] .admin-login-page .admin-auth-visual {
    width: 100% !important;
    max-width: none !important;
    min-height: 500px !important;
}

html[data-theme="light"] .admin-login-page .auth-card,
html[data-theme="dark"] .admin-login-page .auth-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 500px !important;
}

/* ADMIN VISUAL PANEL - SAME AS DARK THEME */
html[data-theme="light"] .admin-login-page .auth-visual-content h1 {
    color: inherit !important;
}

html[data-theme="light"] .admin-login-page .auth-visual-content p {
    color: inherit !important;
}

html[data-theme="light"] .admin-login-page .auth-visual-content .hero-label {
    color: inherit !important;
}

/* ADMIN LOGIN VISUAL LOGO FIX */
/* ADMIN LOGIN LOGO CLEAR + CENTER FIX */

.admin-login-page .auth-visual-slide.active {
    opacity: 1 !important;
    filter: none !important;
}

.admin-login-page .auth-visual-slide.active::before,
.admin-login-page .auth-visual-slide.active::after {
    display: none !important;
}

.admin-login-page .auth-visual-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.admin-login-page .auth-visual-content img,
.admin-login-page .auth-visual-content .auth-logo,
.admin-login-page .auth-visual-content .visual-logo {
    width: 75% !important;
    max-width: none !important;
    height: auto !important;
    margin: auto !important;
    opacity: 0.95 !important;
}

.admin-login-page .auth-visual-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: 100% !important;
}

.admin-login-page .hero-label,
.admin-login-page .auth-visual-content h1,
.admin-login-page .auth-visual-content p {
    display: none !important;
}

.admin-login-page .auth-visual-content img,
.admin-login-page .auth-visual-content .auth-logo,
.admin-login-page .auth-visual-content .visual-logo {
    width: 90% !important;
    max-width: none !important;
    height: auto !important;
    margin: auto !important;
    opacity: 0.95 !important;
}

/* ADMIN LOGIN LEFT CARD - LOGO BACKGROUND FIX */

.admin-login-page .admin-auth-visual {
    position: relative !important;
    overflow: hidden !important;
}

.admin-login-page .admin-auth-visual .auth-visual-slide.active {
    position: absolute !important;
    inset: 0 !important;

    background-size: 78% auto !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

.admin-login-page .admin-auth-visual .auth-visual-slide.active::before,
.admin-login-page .admin-auth-visual .auth-visual-slide.active::after {
    display: none !important;
}

.admin-login-page .admin-auth-visual .auth-visual-content {
    display: none !important;
}

/* ADMIN LOGIN LEFT LOGO ONLY */

.admin-login-page .auth-visual-content{
    display:none !important;
}

.admin-login-page .auth-visual-slide.active{
    position:absolute !important;
    inset:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    opacity:1 !important;
    filter:none !important;
    transform:none !important;
}

.admin-login-page .auth-visual-slide.active img{
    width:82% !important;
    max-width:620px !important;
    height:auto !important;

    opacity:1 !important;
    filter:none !important;
    transform:none !important;
    margin:0 !important;
}

/* REGISTER PAGE 50/50 FIX */

.register-page .register-auth-layout {
    width: min(1400px, calc(100vw - 80px)) !important;
    max-width: 1400px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
}

.register-page .auth-visual-panel,
.register-page .auth-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 820px !important;
}

html[data-theme="light"] .register-page .hero-label,
html[data-theme="light"] .register-page .auth-visual-content h1,
html[data-theme="light"] .register-page .auth-visual-content p {
    color: #ffffff !important;
    text-shadow: 0 3px 18px rgba(0,0,0,.45) !important;
}
/* COMPLETE PROFILE - LIGHT THEME FIX */

html[data-theme="light"] .profile-page .profile-form-card {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    box-shadow: 0 22px 60px rgba(15,23,42,.08) !important;
}

html[data-theme="light"] .profile-page .profile-field label {
    color: #0f172a !important;
}

html[data-theme="light"] .profile-page .profile-field input,
html[data-theme="light"] .profile-page .profile-field select,
html[data-theme="light"] .profile-page .profile-field textarea {
    background: #fff7ed !important;
    color: #0f172a !important;
    border: 1px solid rgba(249,115,22,.20) !important;
}

html[data-theme="light"] .profile-page .profile-field input::placeholder,
html[data-theme="light"] .profile-page .profile-field textarea::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] .profile-page .health-consent-box {
    background: #fff7ed !important;
    border: 1px solid rgba(249,115,22,.20) !important;
}

html[data-theme="light"] .profile-page .health-consent-label span {
    color: #334155 !important;
}

html[data-theme="light"] .profile-page .profile-submit-btn {
    background: linear-gradient(135deg, #ff9a2f 0%, #ff6b00 50%, #d94f00 100%) !important;
    color: #ffffff !important;
    border: none !important;
}
html[data-theme="light"] .profile-page .profile-form-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
}

html[data-theme="light"] .profile-page .profile-field.full-width {
    grid-column: span 2 !important;
}

@media (max-width: 1200px) {
    .profile-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-field.full-width {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .profile-form-grid {
        grid-template-columns: 1fr;
    }

    .profile-field.full-width {
        grid-column: span 1;
    }
}

/* ===================================================
   MEMBER DASHBOARD REDESIGN
=================================================== */

.member-dashboard-page {
    width: min(1500px, calc(100vw - 72px));
    margin: 0 auto;
    padding-bottom: 50px;
}

.member-dashboard-hero {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    align-items: end;
    margin-bottom: 24px;
}

.dashboard-eyebrow,
.dashboard-section-title-row span,
.member-stat-card span,
.dashboard-mini-rank-card span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 900;
    color: #ea580c;
}

.member-dashboard-hero h1 {
    font-size: clamp(42px, 5vw, 72px);
    line-height: .95;
    margin: 8px 0 14px;
}

.member-dashboard-hero p {
    max-width: 760px;
}

.member-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.member-stat-card,
.dashboard-next-event-card,
.dashboard-side-panel > div,
.dashboard-compact-events,
.dashboard-important-alert,
.dashboard-small-alert {
    border-radius: 28px;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 22px 60px rgba(15,23,42,.08);
}

.member-stat-card {
    padding: 18px;
    background: rgba(255,255,255,.86);
}

.member-stat-card strong {
    display: block;
    font-size: 34px;
    line-height: 1;
    margin: 8px 0;
}

.member-stat-card small {
    color: #64748b;
    font-weight: 700;
}

.dashboard-important-alert {
    padding: 22px 26px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, #fff7ed, #ffffff);
    border-color: rgba(249,115,22,.25);
}

.dashboard-alert-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

.dashboard-small-alert {
    padding: 20px;
    background: #fff7ed;
    border-color: rgba(249,115,22,.25);
}

.dashboard-small-alert a {
    color: #c2410c;
    font-weight: 900;
}

.member-dashboard-main-grid {
    display: grid;
    grid-template-columns: 1.6fr .8fr;
    gap: 24px;
    align-items: stretch;
}

.dashboard-next-event-card,
.dashboard-side-panel > div,
.dashboard-compact-events {
    background: rgba(255,255,255,.9);
    padding: 26px;
}

.dashboard-section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.dashboard-section-title-row h2 {
    margin: 4px 0 0;
    font-size: 30px;
}

.dashboard-section-title-row a,
.dashboard-mini-rank-card a {
    color: #c2410c;
    font-weight: 900;
    text-decoration: none;
}

.dashboard-event-highlight h3,
.dashboard-empty-event h3 {
    font-size: clamp(30px, 3vw, 48px);
    line-height: 1;
    margin: 16px 0;
}

.dashboard-event-status-row,
.dashboard-event-meta,
.dashboard-event-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.event-status-pill,
.dashboard-event-meta span,
.dashboard-event-transport {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 10px 14px;
    background: #fff7ed;
    border: 1px solid rgba(249,115,22,.18);
    color: #334155;
    font-weight: 800;
}

.event-status-pill {
    color: #9a3412;
}

.event-status-pill.muted {
    color: #475569;
}

.dashboard-event-transport {
    margin: 16px 0;
}

.dashboard-checkin-box {
    margin-top: 20px;
    padding: 18px;
    border-radius: 22px;
    background: #fff7ed;
    border: 1px solid rgba(249,115,22,.18);
}

.dashboard-checkin-form {
    display: grid;
    gap: 12px;
}

.dashboard-checkin-form input[type="file"] {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(249,115,22,.25);
    background: #fff;
}

.dashboard-orange-btn {
    background: linear-gradient(135deg, #ff9a2f 0%, #ff6b00 50%, #d94f00 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 14px 24px;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 14px 34px rgba(249,115,22,.28);
}

.dashboard-outline-btn {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid rgba(249,115,22,.25);
    border-radius: 999px;
    padding: 14px 24px;
    font-weight: 900;
    text-decoration: none;
}

.dashboard-side-panel {
    display: grid;
    gap: 20px;
}

.dashboard-quick-actions-card h2,
.dashboard-mini-rank-card h3 {
    margin-top: 0;
}

.dashboard-action-list {
    display: grid;
    gap: 12px;
}

.dashboard-action-list a {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: 18px;
    background: #fff7ed;
    border: 1px solid rgba(249,115,22,.15);
    color: #0f172a;
    text-decoration: none;
}

.dashboard-action-list span {
    font-size: 24px;
}

.dashboard-action-list strong {
    display: block;
}

.dashboard-action-list small {
    color: #64748b;
}

.dashboard-mini-rank-card h3 {
    font-size: 32px;
    margin: 10px 0;
}

.dashboard-compact-events {
    margin-top: 24px;
}

.dashboard-compact-event-list {
    display: grid;
    gap: 12px;
}

.dashboard-compact-event-item {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 18px;
    background: #fff7ed;
    border: 1px solid rgba(249,115,22,.15);
    color: #0f172a;
    text-decoration: none;
}

.dashboard-compact-event-item strong {
    display: block;
}

.dashboard-compact-event-item small {
    color: #64748b;
}

.dashboard-compact-event-item > span {
    color: #9a3412;
    font-weight: 900;
}

.dashboard-compact-empty {
    padding: 18px;
    border-radius: 18px;
    background: #fff7ed;
    color: #64748b;
    font-weight: 800;
}

/* DARK MODE */
html[data-theme="dark"] .member-dashboard-page {
    color: #fff;
}

html[data-theme="dark"] .member-stat-card,
html[data-theme="dark"] .dashboard-next-event-card,
html[data-theme="dark"] .dashboard-side-panel > div,
html[data-theme="dark"] .dashboard-compact-events {
    background: rgba(15,23,42,.88);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 22px 70px rgba(0,0,0,.35);
}

html[data-theme="dark"] .member-stat-card small,
html[data-theme="dark"] .dashboard-action-list small,
html[data-theme="dark"] .dashboard-compact-event-item small,
html[data-theme="dark"] .member-dashboard-hero p {
    color: #cbd5e1;
}

html[data-theme="dark"] .dashboard-action-list a,
html[data-theme="dark"] .dashboard-compact-event-item,
html[data-theme="dark"] .dashboard-checkin-box,
html[data-theme="dark"] .event-status-pill,
html[data-theme="dark"] .dashboard-event-meta span,
html[data-theme="dark"] .dashboard-event-transport {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.08);
    color: #fff;
}

html[data-theme="dark"] .dashboard-outline-btn {
    background: rgba(255,255,255,.06);
    color: #ffedd5;
    border-color: rgba(249,115,22,.35);
}

/* MOBILE */
@media (max-width: 1100px) {
    .member-dashboard-page {
        width: min(100% - 28px, 700px);
    }

    .member-dashboard-hero,
    .member-dashboard-main-grid {
        grid-template-columns: 1fr;
    }

    .member-dashboard-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 680px) {
    .member-dashboard-stats,
    .dashboard-alert-row {
        grid-template-columns: 1fr;
    }

    .dashboard-important-alert,
    .dashboard-compact-event-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-orange-btn,
    .dashboard-outline-btn {
        width: 100%;
    }
}

/* MERCH CHECKOUT LIGHT THEME FIX ONLY */

html[data-theme="light"] .merch-checkout-page .checkout-card,
html[data-theme="light"] .merch-checkout-page .guest-note,
html[data-theme="light"] .merch-checkout-page .total-box,
html[data-theme="light"] .merch-checkout-page .delivery-option,
html[data-theme="light"] .merch-checkout-page .badge-discount-checkout-box {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    box-shadow: 0 18px 50px rgba(15,23,42,.07) !important;
}

html[data-theme="light"] .merch-checkout-page .checkout-section {
    border-top: 1px solid rgba(15,23,42,.10) !important;
}

html[data-theme="light"] .merch-checkout-page h2,
html[data-theme="light"] .merch-checkout-page h3,
html[data-theme="light"] .merch-checkout-page strong,
html[data-theme="light"] .merch-checkout-page label {
    color: #0f172a !important;
}

html[data-theme="light"] .merch-checkout-page p,
html[data-theme="light"] .merch-checkout-page span {
    color: #475569 !important;
}

html[data-theme="light"] .merch-checkout-page input,
html[data-theme="light"] .merch-checkout-page textarea,
html[data-theme="light"] .merch-checkout-page select {
    background: #fff7ed !important;
    color: #0f172a !important;
    border: 1px solid rgba(249,115,22,.22) !important;
}

html[data-theme="light"] .merch-checkout-page .checkout-price-row {
    background: #fff7ed !important;
    color: #334155 !important;
    border: 1px solid rgba(249,115,22,.14) !important;
}

html[data-theme="light"] .merch-checkout-page .checkout-price-row strong,
html[data-theme="light"] .merch-checkout-page .total-amount {
    color: #9a3412 !important;
}

html[data-theme="light"] .merch-checkout-page .btn,
html[data-theme="light"] .merch-checkout-page .submit-btn {
    background: linear-gradient(135deg, #ff9a2f 0%, #ff6b00 50%, #d94f00 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 14px 34px rgba(249,115,22,.30) !important;
}

/* LIGHT THEME CHECKOUT PRICE COLOR */

html[data-theme="light"] #subtotalDisplay,
html[data-theme="light"] #subtotalDisplayPayment {
    color: #9a3412 !important;
    font-weight: 700 !important;
}

html[data-theme="light"] #discountDisplay,
html[data-theme="light"] #discountDisplayPayment {
    color: #16a34a !important;
    font-weight: 700 !important;
}

html[data-theme="light"] #finalDisplay,
html[data-theme="light"] #finalDisplayPayment,
html[data-theme="light"] #totalDisplay,
html[data-theme="light"] #totalDisplayPayment {
    color: #9a3412 !important;
    font-weight: 800 !important;
}


/* CHATBOT FLOAT DRAG FIX */
.urrc-chatbot {
    position: fixed !important;
    z-index: 99999 !important;
}

.chatbot-toggle {
    touch-action: none !important;
    cursor: grab !important;
    user-select: none !important;
}

.chatbot-toggle:active {
    cursor: grabbing !important;
}

/* EMERGENCY CLICK FIX */

/* Pastikan navbar sentiasa clickable */
.navbar,
.navbar *,
.public-navbar,
.public-navbar *,
.urrc-navbar,
.urrc-navbar * {
    pointer-events: auto !important;
    z-index: 999999 !important;
}

/* Chatbot jangan block seluruh screen */
.urrc-chatbot {
    pointer-events: none !important;
}

.urrc-chatbot .chatbot-toggle,
.urrc-chatbot .chatbot-box,
.urrc-chatbot .chatbot-box * {
    pointer-events: auto !important;
}

/* PWA overlay jangan block kalau tak aktif */
.urrc-pwa-install-overlay:not(.active) {
    display: none !important;
    pointer-events: none !important;
}

/* Kalau ada overlay kosong dari hero/carousel */
.home-hero-overlay,
.hero-overlay,
.past-detail-hero-overlay,
.auth-visual-slide,
.auth-visual-slide img {
    pointer-events: none !important;
}

/* Button/link force clickable */
a,
button,
.btn,
.navbar a,
.navbar button {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* ===================================================
   AUTH PAGES CLEAN FINAL FIX
   login_member.php / register.php / login_admin.php
   Fixed navbar safe, 50/50 layout, no card behind navbar
=================================================== */

/* Keep fixed navbar from covering auth pages */
.auth-page {
    width: 100% !important;
    min-height: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 108px 4vw 22px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    overflow: visible !important;
}

.auth-layout {
    width: min(1500px, 100%) !important;
    height: min(660px, calc(100svh - 140px)) !important;
    min-height: 520px !important;
    max-height: 660px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 28px !important;
    align-items: stretch !important;
    justify-content: center !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.auth-visual-panel,
.auth-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 28px !important;
    box-sizing: border-box !important;
}

.auth-visual-panel {
    position: relative !important;
    overflow: hidden !important;
    background: #111421 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.24) !important;
}

.auth-visual-slide {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    transition: opacity .9s ease !important;
    pointer-events: none !important;
}

.auth-visual-slide.active {
    opacity: 1 !important;
}

.auth-visual-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    filter: brightness(.62) saturate(1.06) !important;
    pointer-events: none !important;
}

.auth-visual-panel::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
        linear-gradient(180deg, rgba(2,8,23,.04) 0%, rgba(124,45,18,.74) 100%),
        linear-gradient(90deg, rgba(2,8,23,.42) 0%, rgba(2,8,23,.08) 100%) !important;
}

.auth-visual-content {
    position: absolute !important;
    left: 36px !important;
    right: 36px !important;
    bottom: 34px !important;
    z-index: 2 !important;
    color: #ffffff !important;
    text-align: left !important;
}

.auth-visual-content .hero-label {
    color: #ffffff !important;
    opacity: .95 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: .22em !important;
    margin: 0 0 12px !important;
}

.auth-visual-content h1 {
    color: #ffffff !important;
    font-size: clamp(40px, 4vw, 64px) !important;
    line-height: .95 !important;
    font-weight: 950 !important;
    margin: 0 0 14px !important;
    text-shadow: 0 10px 32px rgba(0,0,0,.38) !important;
}

.auth-visual-content p {
    color: rgba(255,255,255,.92) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    max-width: 620px !important;
    margin: 0 !important;
}

.auth-card {
    max-width: none !important;
    padding: 26px 36px !important;
    background: rgba(17,20,33,.94) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.24) !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow-y: auto !important;
}

.auth-card h2 {
    color: #ffffff !important;
    font-size: clamp(28px, 2.1vw, 36px) !important;
    font-weight: 950 !important;
    margin: 0 0 8px !important;
    text-align: center !important;
}

.auth-subtitle {
    color: #b8b8c8 !important;
    font-size: 15px !important;
    line-height: 1.42 !important;
    text-align: center !important;
    margin: 0 0 18px !important;
}

.auth-form {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
    text-align: left !important;
}

.auth-form input {
    width: 100% !important;
    min-height: 44px !important;
    padding: 11px 15px !important;
    border-radius: 14px !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    background: #090d1a !important;
    color: #ffffff !important;
    font-size: 15px !important;
    display: block !important;
}

.auth-form input::placeholder {
    color: #8f96aa !important;
}

.auth-main-btn,
.auth-secondary-btn {
    width: 100% !important;
    min-height: 46px !important;
    margin: 6px 0 0 !important;
    padding: 12px 18px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-decoration: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #ff9a2f 0%, #ff6b00 52%, #d94f00 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 14px 34px rgba(249,115,22,.30) !important;
}

.auth-main-btn:hover,
.auth-secondary-btn:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.05) !important;
}

.google-auth-section {
    width: 100% !important;
    margin: 10px 0 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

#googleLoginButton,
#googleRegisterButton {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.auth-divider {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 14px 0 0 !important;
    color: #8f96aa !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.auth-divider::before,
.auth-divider::after {
    content: "" !important;
    flex: 1 !important;
    height: 1px !important;
    background: rgba(255,255,255,.12) !important;
}

.auth-divider span {
    white-space: nowrap !important;
}

.auth-bottom-link {
    margin-top: 8px !important;
    text-align: center !important;
}

.auth-bottom-link p {
    color: #b8b8c8 !important;
    font-size: 15px !important;
    margin: 0 0 10px !important;
}

/* Register has more fields, so make it compact */
.auth-page:has(#googleRegisterButton) .auth-layout {
    height: min(675px, calc(100svh - 132px)) !important;
    max-height: 675px !important;
}

.auth-page:has(#googleRegisterButton) .auth-card {
    padding: 20px 34px !important;
    justify-content: flex-start !important;
}

.auth-page:has(#googleRegisterButton) .auth-card h2 {
    font-size: clamp(26px, 1.9vw, 34px) !important;
    margin-bottom: 4px !important;
}

.auth-page:has(#googleRegisterButton) .auth-subtitle {
    margin-bottom: 12px !important;
}

.auth-page:has(#googleRegisterButton) .auth-form {
    gap: 8px !important;
}

.auth-page:has(#googleRegisterButton) .auth-form input {
    min-height: 39px !important;
    padding: 9px 14px !important;
}

.auth-page:has(#googleRegisterButton) .g-recaptcha {
    transform: scale(.86) !important;
    transform-origin: left center !important;
    margin: -5px 0 -6px !important;
}

.auth-page:has(#googleRegisterButton) .auth-divider {
    margin-top: 10px !important;
}

.auth-page:has(#googleRegisterButton) .google-auth-section {
    margin: 8px 0 8px !important;
}

.auth-page:has(#googleRegisterButton) .auth-bottom-link {
    margin-top: 6px !important;
}

/* Admin logo visual */
.admin-login-page .admin-auth-visual .auth-visual-slide.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.admin-login-page .admin-auth-visual .auth-visual-slide img {
    width: 84% !important;
    height: 84% !important;
    max-width: 84% !important;
    max-height: 84% !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
    opacity: .88 !important;
}

/* Light theme auth */
html[data-theme="light"] .auth-card {
    background: rgba(255,255,255,.95) !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    box-shadow: 0 18px 55px rgba(15,23,42,.08) !important;
}

html[data-theme="light"] .auth-card h2 {
    color: #0f172a !important;
}

html[data-theme="light"] .auth-subtitle,
html[data-theme="light"] .auth-bottom-link p {
    color: #475569 !important;
}

html[data-theme="light"] .auth-form input {
    background: #fff7ed !important;
    color: #0f172a !important;
    border: 1px solid rgba(249,115,22,.20) !important;
}

html[data-theme="light"] .auth-form input::placeholder {
    color: #78716c !important;
}

html[data-theme="light"] .auth-divider {
    color: #64748b !important;
}

html[data-theme="light"] .auth-divider::before,
html[data-theme="light"] .auth-divider::after {
    background: rgba(15,23,42,.12) !important;
}

@media (max-width: 900px) {
    .auth-page {
        padding: 106px 16px 32px !important;
        align-items: flex-start !important;
    }

    .auth-layout,
    .auth-page:has(#googleRegisterButton) .auth-layout {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .auth-visual-panel {
        height: 260px !important;
        min-height: 260px !important;
        max-height: 260px !important;
    }

    .auth-visual-content {
        left: 24px !important;
        right: 24px !important;
        bottom: 24px !important;
    }

    .auth-visual-content h1 {
        font-size: 38px !important;
    }

    .auth-visual-content p {
        display: none !important;
    }

    .auth-card,
    .auth-page:has(#googleRegisterButton) .auth-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 26px 20px !important;
    }

    .auth-page:has(#googleRegisterButton) .g-recaptcha {
        transform: scale(.86) !important;
    }
}


/* REGISTER PAGE HEIGHT FIX ONLY */

.register-page .auth-layout {
    height: calc(100svh - 190px) !important;
    min-height: 560px !important;
    max-height: 660px !important;
}

.register-page .auth-card {
    padding: 18px 34px !important;
    justify-content: center !important;
    overflow-y: auto !important;
}

.register-page .auth-card h2 {
    font-size: 30px !important;
    margin-bottom: 4px !important;
}

.register-page .auth-subtitle {
    margin-bottom: 12px !important;
}

.register-page .auth-form {
    gap: 8px !important;
}

.register-page .auth-form input {
    min-height: 40px !important;
    padding: 9px 14px !important;
}

.register-page .g-recaptcha {
    transform: scale(.86) !important;
    transform-origin: left center !important;
    margin: -6px 0 -8px !important;
}

.register-page .auth-main-btn,
.register-page .auth-secondary-btn {
    min-height: 42px !important;
    padding: 10px 18px !important;
}

.register-page .auth-divider {
    margin: 10px 0 0 !important;
}

.register-page .google-auth-section {
    margin: 8px 0 8px !important;
}

.register-page .auth-bottom-link {
    margin-top: 4px !important;
}

.register-page .auth-bottom-link p {
    margin-bottom: 8px !important;
}

/* FORCE REGISTER PAGE SAME SIZE AS MEMBER LOGIN */

body:has(.register-page) {
    overflow-x: hidden !important;
}

body:has(.register-page) .auth-page.register-page {
    min-height: auto !important;
    height: auto !important;
    padding: 26px 4vw 26px !important;
    display: flex !important;
    align-items: flex-start !important;
}

body:has(.register-page) .auth-page.register-page .auth-layout {
    width: min(1560px, 100%) !important;
    height: 660px !important;
    min-height: 660px !important;
    max-height: 660px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
}

body:has(.register-page) .auth-page.register-page .auth-visual-panel,
body:has(.register-page) .auth-page.register-page .auth-card {
    height: 660px !important;
    min-height: 660px !important;
    max-height: 660px !important;
}

body:has(.register-page) .auth-page.register-page .auth-card {
    padding: 18px 34px !important;
    overflow-y: auto !important;
    justify-content: center !important;
}

body:has(.register-page) .auth-page.register-page .auth-card h2 {
    font-size: 28px !important;
    margin: 0 0 4px !important;
}

body:has(.register-page) .auth-page.register-page .auth-subtitle {
    margin: 0 0 10px !important;
}

body:has(.register-page) .auth-page.register-page .auth-form {
    gap: 7px !important;
}

body:has(.register-page) .auth-page.register-page .auth-form input {
    min-height: 38px !important;
    padding: 8px 14px !important;
}

body:has(.register-page) .auth-page.register-page .g-recaptcha {
    transform: scale(.82) !important;
    transform-origin: left center !important;
    margin: -8px 0 -10px !important;
}

body:has(.register-page) .auth-page.register-page .auth-main-btn,
body:has(.register-page) .auth-page.register-page .auth-secondary-btn {
    min-height: 40px !important;
    padding: 9px 16px !important;
}

body:has(.register-page) .auth-page.register-page .auth-divider {
    margin: 8px 0 0 !important;
}

body:has(.register-page) .auth-page.register-page .google-auth-section {
    margin: 6px 0 !important;
}

body:has(.register-page) .auth-page.register-page .auth-bottom-link {
    margin-top: 2px !important;
}

body:has(.register-page) .auth-page.register-page .auth-bottom-link p {
    margin-bottom: 6px !important;
}

body:has(.register-page) .auth-page.register-page {
    min-height: auto !important;
    height: auto !important;
    padding: 118px 4vw 26px !important;
    display: flex !important;
    align-items: flex-start !important;
}

body:has(.register-page) .auth-page.register-page .auth-layout {
    width: min(1560px, 100%) !important;
    height: 570px !important;
    min-height: 570px !important;
    max-height: 570px !important;
}


/* REGISTER CARD ALIGN FIX */

body:has(.register-page) .auth-page.register-page .auth-layout {
    align-items: start !important;
}

body:has(.register-page) .auth-page.register-page .auth-visual-panel,
body:has(.register-page) .auth-page.register-page .auth-card {
    height: 570px !important;
    min-height: 670px !important;
    max-height: 570px !important;
    align-self: start !important;
}

body:has(.register-page) .auth-page.register-page .auth-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.admin-login-page .auth-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 570px !important;
    height: 570px !important;
    max-height: 570px !important;
}

/* ADMIN LOGIN CARD SIZE FIX */

.admin-login-page .auth-layout {
    height: 170px !important;
    min-height: 670px !important;
    max-height: 170px !important;
    align-items: start !important;
}

.admin-login-page .auth-visual-panel,
.admin-login-page .auth-card {
    height: 170px !important;
    min-height: 670px !important;
    max-height: 170px !important;
}

.admin-login-page .auth-card {
    padding: 18px 30px !important;
    justify-content: center !important;
}
/* FORCE REGISTER MOBILE CAROUSEL ONLY */
@media (max-width: 600px) {
    body:has(.register-page) .auth-page.register-page .auth-visual-panel {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
    }

    body:has(.register-page) .auth-page.register-page .auth-layout {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}

/* FORCE ADMIN LOGIN MOBILE ONLY - FINAL */

@media screen and (max-width: 900px) {

    .admin-login-page.auth-page,
    .auth-page.admin-login-page {
        padding: 18px 16px 30px !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        height: auto !important;
        min-height: auto !important;
    }

    .admin-login-page .admin-auth-layout,
    .admin-login-page .auth-layout {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .admin-login-page .auth-visual-panel,
    .admin-login-page .admin-auth-visual {
        width: 100% !important;
        height: 580px !important;
        min-height: 230px !important;
        max-height: 230px !important;
        border-radius: 22px !important;
        margin: 0 !important;
    }

    .admin-login-page .auth-visual-content {
        display: none !important;
    }

    .admin-login-page .admin-auth-visual .auth-visual-slide img,
    .admin-login-page .auth-visual-panel .auth-visual-slide img {
        width: 58% !important;
        height: 58% !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    .admin-login-page .auth-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 26px 20px !important;
        border-radius: 22px !important;
        margin: 0 !important;
    }

    .admin-login-page .auth-card h2 {
        font-size: 28px !important;
        line-height: 1.1 !important;
    }

    .admin-login-page .auth-form input,
    .admin-login-page .auth-main-btn,
    .admin-login-page .auth-secondary-btn {
        width: 100% !important;
        min-height: 46px !important;
        font-size: 15px !important;
    }
}

/* ADMIN LOGIN MOBILE REAL FIX */

@media screen and (max-width: 768px) {
    .auth-page.admin-login-page {
        padding: 18px 16px 28px !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .auth-page.admin-login-page > .auth-layout.admin-auth-layout {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    .auth-page.admin-login-page .auth-visual-panel.admin-auth-visual {
        width: 100% !important;
        height: 230px !important;
        min-height: 230px !important;
        max-height: 230px !important;
        margin: 0 !important;
        border-radius: 22px !important;
    }

    .auth-page.admin-login-page .auth-visual-content {
        display: none !important;
    }

    .auth-page.admin-login-page .auth-visual-slide img {
        width: 62% !important;
        height: 62% !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    .auth-page.admin-login-page .auth-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 10px 20px !important;
        border-radius: 22px !important;
    }
}

@media (max-width: 768px){

    .auth-page.admin-login-page{
        padding-top: 95px !important;
    }

}

@media (max-width:768px){

    .admin-login-page .auth-card{

        min-height:auto !important;
        height:auto !important;

        padding-top:18px !important;
        padding-bottom:18px !important;

        justify-content:flex-start !important;
    }

}

/* ADMIN LOGIN MOBILE CARD HEIGHT FINAL */

@media (max-width: 768px) {
    .admin-login-page .auth-card {
        height: fit-content !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 22px 22px 24px !important;
        justify-content: flex-start !important;
    }

    .admin-login-page .auth-bottom-link {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .admin-login-page .auth-layout,
    .admin-login-page .admin-auth-layout {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}

@media (max-width: 768px) {
    .auth-page.admin-login-page .auth-card {
        height: auto !important;
        min-height: unset !important;
        max-height: unset !important;
    }
}

.admin-login-page .admin-auth-layout {
    align-items: stretch !important;
}

.admin-login-page .admin-auth-visual,
.admin-login-page .auth-card {
    height: auto !important;
    min-height: 0 !important;
}

/* ADMIN LOGIN DESKTOP CARD SAME HEIGHT - FINAL FORCE */

@media (min-width: 769px) {
    .admin-login-page .admin-auth-layout {
        height: 560px !important;
        min-height: 560px !important;
        max-height: 560px !important;
        align-items: stretch !important;
    }

    .admin-login-page .admin-auth-visual,
    .admin-login-page .auth-card {
        height: 560px !important;
        min-height: 560px !important;
        max-height: 560px !important;
        align-self: stretch !important;
    }

    .admin-login-page .auth-card {
        padding: 28px 38px !important;
        justify-content: center !important;
    }

    .admin-login-page .admin-auth-visual .auth-visual-slide img {
        width: 58% !important;
        height: 58% !important;
        object-fit: contain !important;
    }
}

/* =========================================================
   URRC ADMIN DESIGN FINAL FIX - 24 JUN
   Fixes admin spacing, filters, upload buttons, tables, merch form and orange theme.
========================================================= */

:root {
    --admin-sidebar-width-final: 270px;
    --admin-page-pad-final: 18px;
    --admin-orange-gradient-final: linear-gradient(135deg, #fb923c 0%, #f97316 45%, #ea580c 100%);
    --admin-dark-card-final: rgba(15, 23, 42, 0.88);
    --admin-border-final: 1px solid rgba(255, 255, 255, 0.10);
}

html.admin-html,
html[data-theme="admin"],
html[data-theme="admin"] body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

body.admin-layout {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 88% 0%, rgba(249, 115, 22, 0.22), transparent 32%),
        linear-gradient(180deg, #080c14 0%, #111827 100%) !important;
}

body.admin-layout .admin-sidebar {
    width: var(--admin-sidebar-width-final) !important;
    max-width: var(--admin-sidebar-width-final) !important;
}

body.admin-layout .admin-topbar {
    left: var(--admin-sidebar-width-final) !important;
    right: 0 !important;
    width: calc(100vw - var(--admin-sidebar-width-final)) !important;
}

body.admin-layout > .dashboard-container,
body.admin-layout > main,
body.admin-layout > .add-event-page,
body.admin-layout > .edit-event-page,
body.admin-layout > .edit-merch-page,
body.admin-layout > .admin-gallery-page,
body.admin-layout > .add-merch-page {
    margin-left: var(--admin-sidebar-width-final) !important;
    margin-right: 0 !important;
    width: calc(100vw - var(--admin-sidebar-width-final)) !important;
    max-width: calc(100vw - var(--admin-sidebar-width-final)) !important;
    padding: 84px var(--admin-page-pad-final) 28px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

body.admin-layout > .footer,
body.admin-layout .footer {
    margin-left: var(--admin-sidebar-width-final) !important;
    width: calc(100vw - var(--admin-sidebar-width-final)) !important;
    max-width: calc(100vw - var(--admin-sidebar-width-final)) !important;
}

body.admin-layout .admin-events-page-header,
body.admin-layout .admin-attendance-header,
body.admin-layout .add-event-page-header,
body.admin-layout .edit-event-page-header,
body.admin-layout .edit-merch-header,
body.admin-layout .admin-visitor-analytics-header,
body.admin-layout .manage-admin-header {
    width: 100% !important;
    max-width: 100% !important;
}

body.admin-layout .admin-searchable-event.is-admin-hidden {
    display: none !important;
}

body.admin-layout .admin-event-filter-bottom {
    justify-content: space-between !important;
}

body.admin-layout .admin-event-filter-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px !important;
}

body.admin-layout .admin-event-search-btn,
body.admin-layout .admin-event-reset-filter-btn,
body.admin-layout .admin-add-event-btn,
body.admin-layout .admin-view-archive-btn {
    border: 0 !important;
    background: var(--admin-orange-gradient-final) !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(249, 115, 22, 0.24) !important;
}

body.admin-layout .admin-event-reset-filter-btn {
    padding: 8px 13px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

body.admin-layout input[type="file"] {
    color: #e5e7eb !important;
}

body.admin-layout input[type="file"]::file-selector-button,
body.admin-layout .file-upload-btn,
body.admin-layout .custom-file-upload,
body.admin-layout label.file-upload-btn {
    border: 0 !important;
    margin-right: 12px !important;
    padding: 9px 14px !important;
    border-radius: 999px !important;
    background: var(--admin-orange-gradient-final) !important;
    color: #ffffff !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    box-shadow: 0 12px 24px rgba(249, 115, 22, 0.22) !important;
}

body.admin-layout .receipt-btn,
body.admin-layout .receipt-link-btn,
body.admin-layout a[href*="payment_receipts"] button,
body.admin-layout a[href*="merch_receipts"] button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--admin-orange-gradient-final) !important;
    color: #ffffff !important;
    font-weight: 950 !important;
    text-decoration: none !important;
    box-shadow: 0 12px 24px rgba(249, 115, 22, 0.24) !important;
}

body.admin-layout .admin-clean-overview-card,
body.admin-layout .admin-clean-priority-card,
body.admin-layout .admin-clean-kpi-card,
body.admin-layout .admin-leaderboard-season-card,
body.admin-layout .admin-top-member-card,
body.admin-layout .admin-visitor-card,
body.admin-layout .admin-action-review-card,
body.admin-layout .admin-event-operation-card,
body.admin-layout .admin-shortcut-card,
body.admin-layout .visitor-analytics-card,
body.admin-layout .payment-summary-grid .card,
body.admin-layout .attendance-summary-card {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.13), rgba(15, 23, 42, 0.88)) !important;
    border: 1px solid rgba(249, 115, 22, 0.18) !important;
}

body.admin-layout .admin-reward-big-number,
body.admin-layout .admin-priority-number,
body.admin-layout .admin-review-count,
body.admin-layout .visitor-analytics-card strong,
body.admin-layout .admin-visitor-card strong {
    background: var(--admin-orange-gradient-final) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

body.admin-layout .admin-price-summary-card {
    padding: 16px !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(15, 23, 42, 0.90)) !important;
    border: 1px solid rgba(249, 115, 22, 0.22) !important;
}

body.admin-layout .admin-final-row {
    margin-top: 10px !important;
    padding: 13px 14px !important;
    border-radius: 16px !important;
    background: var(--admin-orange-gradient-final) !important;
    color: #ffffff !important;
}

body.admin-layout .admin-final-row span,
body.admin-layout .admin-final-row strong {
    color: #ffffff !important;
}

body.admin-layout .members-table-wrap,
body.admin-layout .member-table-wrapper,
body.admin-layout .payment-table-wrap,
body.admin-layout .event-payment-table-wrapper,
body.admin-layout .registration-table-wrap,
body.admin-layout .registration-admin-table-wrapper,
body.admin-layout .admin-table-wrap,
body.admin-layout .admin-table-wrapper,
body.admin-layout .visitor-table-wrapper,
body.admin-layout .visitor-table-card,
body.admin-layout .card:has(table) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    border-radius: 18px !important;
    background: rgba(15, 23, 42, 0.72) !important;
    border: var(--admin-border-final) !important;
}

body.admin-layout table,
body.admin-layout .admin-table,
body.admin-layout .members-table,
body.admin-layout .event-payment-table,
body.admin-layout .registration-table,
body.admin-layout .registration-admin-table,
body.admin-layout .visitor-table {
    width: 100% !important;
    min-width: 980px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
    background: transparent !important;
}

body.admin-layout .event-payment-table {
    min-width: 1250px !important;
}

body.admin-layout .registration-admin-table {
    min-width: 1180px !important;
}

body.admin-layout th,
body.admin-layout td,
body.admin-layout .admin-table th,
body.admin-layout .admin-table td,
body.admin-layout .visitor-table th,
body.admin-layout .visitor-table td,
body.admin-layout .event-payment-table th,
body.admin-layout .event-payment-table td,
body.admin-layout .registration-admin-table th,
body.admin-layout .registration-admin-table td {
    padding: 10px 11px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #e5e7eb !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    vertical-align: top !important;
    white-space: normal !important;
}

body.admin-layout th,
body.admin-layout .admin-table th,
body.admin-layout .visitor-table th,
body.admin-layout .event-payment-table th,
body.admin-layout .registration-admin-table th {
    position: sticky !important;
    top: 66px !important;
    z-index: 4 !important;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.24), rgba(15, 23, 42, 0.96)) !important;
    color: #fed7aa !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

body.admin-layout tbody tr:hover {
    background: rgba(249, 115, 22, 0.07) !important;
}

body.admin-layout .participant-detail-block,
body.admin-layout .transport-detail-block,
body.admin-layout .payment-event-block {
    min-width: 0 !important;
    max-width: 280px !important;
}

body.admin-layout .add-merch-page {
    min-height: 100vh !important;
}

body.admin-layout .add-merch-shell {
    width: 100% !important;
    max-width: 100% !important;
}

body.admin-layout .add-merch-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 24px !important;
    background: rgba(15, 23, 42, 0.88) !important;
    border: var(--admin-border-final) !important;
}

body.admin-layout .add-merch-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
    padding: 14px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.16), rgba(15, 23, 42, 0.88)) !important;
    border: 1px solid rgba(249, 115, 22, 0.16) !important;
}

body.admin-layout .add-merch-header h2 {
    margin: 0 0 4px !important;
    font-size: clamp(24px, 2.8vw, 34px) !important;
}

body.admin-layout .add-merch-header p {
    margin: 0 !important;
    color: #cbd5e1 !important;
}

body.admin-layout .add-merch-form-grid {
    display: grid !important;
    grid-template-columns: 0.95fr 1.25fr 0.8fr !important;
    gap: 14px !important;
    align-items: start !important;
}

body.admin-layout .add-merch-section {
    min-width: 0 !important;
    padding: 14px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

body.admin-layout .add-merch-section h3 {
    margin: 0 0 12px !important;
    color: #ffffff !important;
    font-size: 17px !important;
}

body.admin-layout .merch-size-section {
    grid-column: 1 / 2 !important;
}

body.admin-layout .merch-image-section {
    grid-column: 2 / 3 !important;
    grid-row: 1 / span 2 !important;
}

body.admin-layout .merch-payment-section {
    grid-column: 3 / 4 !important;
    grid-row: 1 / span 2 !important;
}

body.admin-layout .add-merch-form-grid input:not([type="checkbox"]):not([type="range"]),
body.admin-layout .add-merch-form-grid select,
body.admin-layout .add-merch-form-grid textarea {
    width: 100% !important;
    margin-bottom: 10px !important;
}

body.admin-layout .add-merch-form-grid input[type="range"] {
    width: 100% !important;
}

body.admin-layout .add-merch-form-grid br {
    display: none !important;
}

body.admin-layout .add-merch-form-grid .crop-area {
    margin-top: 10px !important;
    padding: 12px !important;
    border-radius: 18px !important;
}

body.admin-layout .add-merch-form-grid .crop-preview {
    width: min(100%, 340px) !important;
    max-height: 430px !important;
    display: block !important;
    margin: 0 auto 12px !important;
}

body.admin-layout .add-merch-submit-btn,
body.admin-layout .add-merch-back-btn {
    width: 100% !important;
    border: 0 !important;
    background: var(--admin-orange-gradient-final) !important;
    color: #ffffff !important;
}

body.admin-layout .add-merch-back-btn {
    width: auto !important;
    text-decoration: none !important;
}

@media (max-width: 1180px) {
    body.admin-layout .add-merch-form-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    body.admin-layout .merch-basic-section,
    body.admin-layout .merch-size-section,
    body.admin-layout .merch-image-section,
    body.admin-layout .merch-payment-section {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

@media (max-width: 1120px) {
    body.admin-layout .admin-topbar {
        left: 0 !important;
        width: 100vw !important;
    }

    body.admin-layout > .dashboard-container,
    body.admin-layout > main,
    body.admin-layout > .add-event-page,
    body.admin-layout > .edit-event-page,
    body.admin-layout > .edit-merch-page,
    body.admin-layout > .admin-gallery-page,
    body.admin-layout > .add-merch-page,
    body.admin-layout > .footer,
    body.admin-layout .footer {
        margin-left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

@media (max-width: 760px) {
    body.admin-layout .add-merch-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.admin-layout .add-merch-form-grid {
        grid-template-columns: 1fr !important;
    }


    body.admin-layout table,
    body.admin-layout .admin-table,
    body.admin-layout .members-table,
    body.admin-layout .event-payment-table,
    body.admin-layout .registration-table,
    body.admin-layout .registration-admin-table,
    body.admin-layout .visitor-table {
        min-width: 820px !important;
    }
}

/* =========================================================
   ADMIN DESIGN PHASE 3 FINAL POLISH - 24 JUN
   Table stability, orange theme consistency, merch order receipt/final amount.
========================================================= */
body.admin-layout {
    --admin-orange-gradient-phase3: linear-gradient(135deg, #f97316 0%, #fb923c 55%, #facc15 100%);
    --admin-card-bg-phase3: rgba(15, 23, 42, 0.88);
    --admin-card-border-phase3: 1px solid rgba(249, 115, 22, 0.18);
}

body.admin-layout .dashboard-container.page-top-spacing,
body.admin-layout .dashboard-container.manage-admin-page,
body.admin-layout .dashboard-container.annual-rewards-page,
body.admin-layout .dashboard-container.visitor-analytics-page,
body.admin-layout .dashboard-container.event-payment-admin-page,
body.admin-layout .dashboard-container.members-admin-page {
    margin-left: 270px !important;
    width: calc(100vw - 270px) !important;
    max-width: calc(100vw - 270px) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
}

body.admin-layout .card,
body.admin-layout .event-payment-card,
body.admin-layout .members-card,
body.admin-layout .annual-table-card,
body.admin-layout .visitor-table-card,
body.admin-layout .admin-list-card,
body.admin-layout .admin-create-card,
body.admin-layout .order-card,
body.admin-layout .admin-price-summary-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: var(--admin-card-bg-phase3) !important;
    border: var(--admin-card-border-phase3) !important;
    box-shadow: 0 22px 55px rgba(2, 6, 23, 0.28) !important;
}

body.admin-layout .event-payment-table-wrapper,
body.admin-layout .members-table-wrap,
body.admin-layout .annual-table-wrapper,
body.admin-layout .visitor-table-wrapper,
body.admin-layout .admin-table-wrapper,
body.admin-layout .registration-admin-table-wrapper,
body.admin-layout .table-responsive,
body.admin-layout .admin-responsive-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    border-radius: 18px !important;
    background: rgba(2, 6, 23, 0.28) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    -webkit-overflow-scrolling: touch !important;
}

body.admin-layout .event-payment-table-wrapper::-webkit-scrollbar,
body.admin-layout .members-table-wrap::-webkit-scrollbar,
body.admin-layout .annual-table-wrapper::-webkit-scrollbar,
body.admin-layout .visitor-table-wrapper::-webkit-scrollbar,
body.admin-layout .admin-table-wrapper::-webkit-scrollbar,
body.admin-layout .registration-admin-table-wrapper::-webkit-scrollbar {
    height: 9px !important;
}

body.admin-layout .event-payment-table-wrapper::-webkit-scrollbar-thumb,
body.admin-layout .members-table-wrap::-webkit-scrollbar-thumb,
body.admin-layout .annual-table-wrapper::-webkit-scrollbar-thumb,
body.admin-layout .visitor-table-wrapper::-webkit-scrollbar-thumb,
body.admin-layout .admin-table-wrapper::-webkit-scrollbar-thumb,
body.admin-layout .registration-admin-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.65) !important;
    border-radius: 999px !important;
}

body.admin-layout .admin-table,
body.admin-layout .members-table,
body.admin-layout .annual-reward-table,
body.admin-layout .visitor-table,
body.admin-layout .event-payment-table,
body.admin-layout .registration-admin-table {
    margin: 0 !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
}

body.admin-layout .admin-table,
body.admin-layout .annual-reward-table,
body.admin-layout .visitor-table {
    min-width: 920px !important;
}

body.admin-layout .members-table {
    min-width: 1180px !important;
}

body.admin-layout .event-payment-table {
    min-width: 1320px !important;
}

body.admin-layout .registration-admin-table {
    min-width: 1240px !important;
}

body.admin-layout .admin-table th,
body.admin-layout .admin-table td,
body.admin-layout .members-table th,
body.admin-layout .members-table td,
body.admin-layout .annual-reward-table th,
body.admin-layout .annual-reward-table td,
body.admin-layout .visitor-table th,
body.admin-layout .visitor-table td,
body.admin-layout .event-payment-table th,
body.admin-layout .event-payment-table td,
body.admin-layout .registration-admin-table th,
body.admin-layout .registration-admin-table td {
    box-sizing: border-box !important;
    padding: 11px 12px !important;
    vertical-align: top !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
}

body.admin-layout .admin-table th,
body.admin-layout .members-table th,
body.admin-layout .annual-reward-table th,
body.admin-layout .visitor-table th,
body.admin-layout .event-payment-table th,
body.admin-layout .registration-admin-table th {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.36), rgba(124, 45, 18, 0.96)) !important;
    color: #fff7ed !important;
    border-bottom: 1px solid rgba(251, 146, 60, 0.34) !important;
}

body.admin-layout .admin-table tbody tr,
body.admin-layout .members-table tbody tr,
body.admin-layout .annual-reward-table tbody tr,
body.admin-layout .visitor-table tbody tr,
body.admin-layout .event-payment-table tbody tr,
body.admin-layout .registration-admin-table tbody tr {
    background: rgba(15, 23, 42, 0.26) !important;
}

body.admin-layout .admin-table tbody tr:hover,
body.admin-layout .members-table tbody tr:hover,
body.admin-layout .annual-reward-table tbody tr:hover,
body.admin-layout .visitor-table tbody tr:hover,
body.admin-layout .event-payment-table tbody tr:hover,
body.admin-layout .registration-admin-table tbody tr:hover {
    background: rgba(249, 115, 22, 0.10) !important;
}

body.admin-layout .receipt-btn,
body.admin-layout .receipt-link-btn,
body.admin-layout button.receipt-btn,
body.admin-layout a.receipt-btn,
body.admin-layout a[href*="payment_receipts"] button,
body.admin-layout a[href*="merch_receipts"] button,
body.admin-layout .file-upload-btn,
body.admin-layout .custom-file-upload,
body.admin-layout label.file-upload-btn,
body.admin-layout input[type="file"]::file-selector-button {
    background: var(--admin-orange-gradient-phase3) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 24px rgba(249, 115, 22, 0.24) !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

body.admin-layout .receipt-btn:hover,
body.admin-layout .receipt-link-btn:hover,
body.admin-layout a[href*="payment_receipts"] button:hover,
body.admin-layout a[href*="merch_receipts"] button:hover,
body.admin-layout .file-upload-btn:hover,
body.admin-layout .custom-file-upload:hover,
body.admin-layout label.file-upload-btn:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.05) !important;
}

body.admin-layout .annual-summary-card,
body.admin-layout .annual-info-card,
body.admin-layout .visitor-analytics-card,
body.admin-layout .admin-account-summary-card {
    background: linear-gradient(145deg, rgba(249, 115, 22, 0.18), rgba(15, 23, 42, 0.92)) !important;
    border: 1px solid rgba(249, 115, 22, 0.22) !important;
    box-shadow: 0 18px 42px rgba(249, 115, 22, 0.10) !important;
}

body.admin-layout .annual-summary-card strong,
body.admin-layout .visitor-analytics-card strong,
body.admin-layout .admin-account-summary-card strong {
    color: #fb923c !important;
    text-shadow: 0 0 18px rgba(249, 115, 22, 0.22) !important;
}

body.admin-layout .annual-info-label,
body.admin-layout .annual-danger-label,
body.admin-layout .annual-info-pills span,
body.admin-layout .annual-rank-pill,
body.admin-layout .annual-discount-pill {
    background: rgba(249, 115, 22, 0.16) !important;
    color: #fed7aa !important;
    border-color: rgba(249, 115, 22, 0.30) !important;
}

body.admin-layout .admin-price-summary-card {
    padding: 20px !important;
    border-radius: 22px !important;
}

body.admin-layout .admin-price-row {
    background: rgba(2, 6, 23, 0.44) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.admin-layout .admin-final-row {
    background: var(--admin-orange-gradient-phase3) !important;
    border: 1px solid rgba(251, 146, 60, 0.44) !important;
    box-shadow: 0 16px 34px rgba(249, 115, 22, 0.25) !important;
}

body.admin-layout .admin-final-row span,
body.admin-layout .admin-final-row strong {
    color: #111827 !important;
}

body.admin-layout .payment-action-cell form,
body.admin-layout .admin-create-form,
body.admin-layout .annual-reset-form {
    max-width: 100% !important;
}

@media (max-width: 1120px) {
    body.admin-layout .dashboard-container.page-top-spacing,
    body.admin-layout .dashboard-container.manage-admin-page,
    body.admin-layout .dashboard-container.annual-rewards-page,
    body.admin-layout .dashboard-container.visitor-analytics-page,
    body.admin-layout .dashboard-container.event-payment-admin-page,
    body.admin-layout .dashboard-container.members-admin-page {
        margin-left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
}


/* =========================================================
   URRC ADMIN EVENT PAYMENTS - CLEAN REVIEW CARD LAYOUT
   Fix table serabut / overlapping column
   ========================================================= */

body.admin-layout .admin-payment-review-card {
    overflow: visible !important;
}

body.admin-layout .admin-payment-review-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
}

body.admin-layout .admin-payment-review-header h3 {
    margin-bottom: 6px !important;
}

body.admin-layout .admin-payment-count-pill {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    box-shadow: 0 12px 24px rgba(249, 115, 22, 0.24) !important;
}

body.admin-layout .admin-payment-review-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

body.admin-layout .admin-payment-review-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 285px !important;
    gap: 16px !important;
    padding: 16px !important;
    border-radius: 22px !important;
    background: rgba(2, 6, 23, 0.50) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16) !important;
}

body.admin-layout .admin-payment-review-item.is-pending {
    border-color: rgba(249, 115, 22, 0.30) !important;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.10), rgba(2, 6, 23, 0.50)) !important;
}

body.admin-layout .admin-payment-main {
    display: grid !important;
    grid-template-columns: 42px minmax(320px, 1.3fr) minmax(220px, 0.85fr) minmax(190px, 0.65fr) !important;
    gap: 14px !important;
    min-width: 0 !important;
}

body.admin-layout .admin-payment-index {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: rgba(249, 115, 22, 0.16) !important;
    border: 1px solid rgba(249, 115, 22, 0.26) !important;
    color: #fed7aa !important;
    font-weight: 950 !important;
}

body.admin-layout .admin-payment-participant,
body.admin-layout .admin-payment-event-box,
body.admin-layout .admin-payment-side {
    min-width: 0 !important;
}

body.admin-layout .admin-payment-title-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

body.admin-layout .admin-payment-title-row h4 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
}

body.admin-layout .admin-payment-info-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 12px !important;
}

body.admin-layout .admin-payment-info-grid div,
body.admin-layout .admin-payment-meta,
body.admin-layout .admin-payment-note {
    min-width: 0 !important;
}

body.admin-layout .admin-payment-info-grid strong,
body.admin-layout .admin-payment-box-label,
body.admin-layout .admin-payment-meta strong,
body.admin-layout .admin-payment-note strong,
body.admin-layout .admin-payment-amount-box span {
    display: block !important;
    margin-bottom: 2px !important;
    color: #9ca3af !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

body.admin-layout .admin-payment-info-grid span,
body.admin-layout .admin-payment-event-box p,
body.admin-layout .admin-payment-meta span,
body.admin-layout .admin-payment-note span {
    display: block !important;
    color: #e5e7eb !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

body.admin-layout .admin-payment-event-box {
    padding: 13px !important;
    border-radius: 18px !important;
    background: rgba(15, 23, 42, 0.62) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.admin-layout .admin-payment-event-box strong {
    display: block !important;
    margin-bottom: 6px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

body.admin-layout .admin-payment-event-box p {
    margin: 3px 0 0 !important;
}

body.admin-layout .admin-payment-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 20px !important;
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid rgba(249, 115, 22, 0.16) !important;
}

body.admin-layout .admin-payment-amount-box {
    padding: 12px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
    color: #ffffff !important;
}

body.admin-layout .admin-payment-amount-box span,
body.admin-layout .admin-payment-amount-box strong {
    color: #ffffff !important;
}

body.admin-layout .admin-payment-amount-box strong {
    display: block !important;
    font-size: 21px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
}

body.admin-layout .admin-payment-side-row {
    display: flex !important;
    justify-content: flex-start !important;
}

body.admin-layout .admin-payment-receipt-btn,
body.admin-layout .admin-payment-side .receipt-btn {
    width: 100% !important;
    min-height: 42px !important;
    padding: 11px 14px !important;
    text-align: center !important;
}

body.admin-layout .admin-payment-action-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 2px !important;
}

body.admin-layout .admin-payment-action-stack .payment-action-form {
    margin: 0 !important;
}

body.admin-layout .admin-payment-action-stack .payment-action-form input[type="text"] {
    width: 100% !important;
    margin: 0 0 8px !important;
    min-height: 40px !important;
}

body.admin-layout .admin-payment-action-stack .approve-payment-btn,
body.admin-layout .admin-payment-action-stack .reject-payment-btn {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    white-space: normal !important;
}

body.admin-layout .admin-payment-complete-text {
    display: block !important;
    padding: 11px 12px !important;
    border-radius: 14px !important;
    background: rgba(148, 163, 184, 0.10) !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

body.admin-layout .admin-payment-empty-state {
    padding: 28px !important;
    border-radius: 20px !important;
    text-align: center !important;
    background: rgba(15, 23, 42, 0.62) !important;
    border: 1px dashed rgba(255, 255, 255, 0.18) !important;
}

body.admin-layout .admin-payment-empty-state h3 {
    color: #ffffff !important;
    margin-bottom: 6px !important;
}

body.admin-layout .admin-payment-empty-state p {
    color: #9ca3af !important;
}

@media (max-width: 1320px) {
    body.admin-layout .admin-payment-review-item {
        grid-template-columns: 1fr !important;
    }

    body.admin-layout .admin-payment-side {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: start !important;
    }

    body.admin-layout .admin-payment-action-stack,
    body.admin-layout .admin-payment-note {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 980px) {
    body.admin-layout .admin-payment-main {
        grid-template-columns: 38px 1fr !important;
    }

    body.admin-layout .admin-payment-event-box {
        grid-column: 2 / -1 !important;
    }

    body.admin-layout .admin-payment-side {
        grid-template-columns: 1fr !important;
    }

    body.admin-layout .admin-payment-info-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    body.admin-layout .admin-payment-review-header {
        flex-direction: column !important;
    }

    body.admin-layout .admin-payment-review-item {
        padding: 12px !important;
    }

    body.admin-layout .admin-payment-main {
        grid-template-columns: 1fr !important;
    }

    body.admin-layout .admin-payment-index,
    body.admin-layout .admin-payment-event-box {
        grid-column: auto !important;
    }
}

/* =========================================================
   ADMIN EVENT GALLERY - ORANGE GRADIENT OVERRIDE
   Tukar card/button biru ke oren gradient system
   ========================================================= */

body.admin-layout .past-event-item,
body .past-event-item {
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 14px 38px rgba(249, 115, 22, 0.22) !important;
}

body.admin-layout .past-event-item strong,
body .past-event-item strong {
    color: #ffffff !important;
}

body.admin-layout .past-event-item span,
body .past-event-item span {
    color: rgba(255, 255, 255, 0.92) !important;
}

body.admin-layout .past-event-item:hover,
body .past-event-item:hover {
    background: linear-gradient(135deg, #ea580c, #fb923c) !important;
    transform: translateY(-4px) !important;
    filter: brightness(1.06) !important;
    box-shadow: 0 18px 48px rgba(249, 115, 22, 0.30) !important;
}

body.admin-layout .past-event-item.active,
body .past-event-item.active {
    background: linear-gradient(135deg, #ea580c, #f97316) !important;
    box-shadow: 0 18px 50px rgba(249, 115, 22, 0.34) !important;
}

body.admin-layout .past-event-item.active:hover,
body .past-event-item.active:hover {
    background: linear-gradient(135deg, #ea580c, #fb923c) !important;
    transform: translateY(-4px) scale(1.01) !important;
    filter: brightness(1.07) !important;
}

body.admin-layout .bulk-upload-note,
body .bulk-upload-note {
    background: rgba(249, 115, 22, 0.12) !important;
    border: 1px solid rgba(249, 115, 22, 0.26) !important;
}

body.admin-layout .gallery-upload-form input[type="file"]::file-selector-button,
body .gallery-upload-form input[type="file"]::file-selector-button {
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 24px rgba(249, 115, 22, 0.24) !important;
}

/* =========================================================
   ADMIN MEMBERS - CLEAN REVIEW CARD LAYOUT
   Fix table terlalu serabut / text menegak
   ========================================================= */

body.admin-layout .admin-members-review-card {
    overflow: visible !important;
}

body.admin-layout .admin-members-review-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
}

body.admin-layout .admin-members-review-header h3 {
    margin-bottom: 6px !important;
}

body.admin-layout .admin-members-count-pill {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    box-shadow: 0 12px 24px rgba(249, 115, 22, 0.24) !important;
}

body.admin-layout .admin-members-review-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

body.admin-layout .admin-member-review-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 220px !important;
    gap: 16px !important;
    padding: 16px !important;
    border-radius: 22px !important;
    background: rgba(2, 6, 23, 0.50) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16) !important;
}

body.admin-layout .admin-member-main {
    display: grid !important;
    grid-template-columns: 42px minmax(240px, 0.7fr) minmax(320px, 1fr) !important;
    gap: 14px !important;
    min-width: 0 !important;
}

body.admin-layout .admin-member-index {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: rgba(249, 115, 22, 0.16) !important;
    border: 1px solid rgba(249, 115, 22, 0.26) !important;
    color: #fed7aa !important;
    font-weight: 950 !important;
}

body.admin-layout .admin-member-identity,
body.admin-layout .admin-member-info-grid,
body.admin-layout .admin-member-reward-grid,
body.admin-layout .admin-member-action-panel {
    min-width: 0 !important;
}

body.admin-layout .admin-member-identity h4 {
    margin: 0 0 5px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
}

body.admin-layout .admin-member-username {
    display: block !important;
    color: #fb923c !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    margin-bottom: 10px !important;
    overflow-wrap: anywhere !important;
}

body.admin-layout .admin-member-status-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

body.admin-layout .admin-member-info-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 14px !important;
    padding: 13px !important;
    border-radius: 18px !important;
    background: rgba(15, 23, 42, 0.62) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.admin-layout .admin-member-info-grid strong,
body.admin-layout .admin-member-points-box > span,
body.admin-layout .admin-member-badge-box > span {
    display: block !important;
    margin-bottom: 4px !important;
    color: #9ca3af !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

body.admin-layout .admin-member-info-grid span {
    display: block !important;
    color: #e5e7eb !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

body.admin-layout .admin-member-reward-grid {
    grid-column: 1 / 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body.admin-layout .admin-member-points-box,
body.admin-layout .admin-member-badge-box {
    padding: 13px !important;
    border-radius: 18px !important;
    background: rgba(15, 23, 42, 0.62) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.admin-layout .member-admin-badge-cell {
    min-width: 0 !important;
    width: 100% !important;
}

body.admin-layout .member-admin-badge-cell strong,
body.admin-layout .member-admin-badge-cell small {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

body.admin-layout .admin-member-action-panel {
    grid-column: 2 / 3 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 20px !important;
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid rgba(249, 115, 22, 0.16) !important;
}

body.admin-layout .admin-member-action-panel a {
    text-decoration: none !important;
    width: 100% !important;
}

body.admin-layout .admin-member-action-panel .member-action-btn {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    white-space: normal !important;
}

body.admin-layout .btn-view-edit {
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
}

body.admin-layout .btn-reactivate {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
}

body.admin-layout .admin-member-empty-state {
    padding: 28px !important;
    border-radius: 20px !important;
    text-align: center !important;
    background: rgba(15, 23, 42, 0.62) !important;
    border: 1px dashed rgba(255, 255, 255, 0.18) !important;
}

body.admin-layout .admin-member-empty-state h3 {
    color: #ffffff !important;
    margin-bottom: 6px !important;
}

body.admin-layout .admin-member-empty-state p {
    color: #9ca3af !important;
}

@media (max-width: 1320px) {
    body.admin-layout .admin-member-review-item {
        grid-template-columns: 1fr !important;
    }

    body.admin-layout .admin-member-action-panel {
        grid-column: auto !important;
        grid-row: auto !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 980px) {
    body.admin-layout .admin-member-main {
        grid-template-columns: 38px 1fr !important;
    }

    body.admin-layout .admin-member-info-grid {
        grid-column: 2 / -1 !important;
    }

    body.admin-layout .admin-member-reward-grid {
        grid-template-columns: 1fr !important;
    }

    body.admin-layout .admin-member-action-panel {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    body.admin-layout .admin-members-review-header {
        flex-direction: column !important;
    }

    body.admin-layout .admin-member-review-item {
        padding: 12px !important;
    }

    body.admin-layout .admin-member-main {
        grid-template-columns: 1fr !important;
    }

    body.admin-layout .admin-member-info-grid {
        grid-column: auto !important;
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   ADMIN ANNUAL REWARDS - TABLE HEADER FIX ONLY
   Betulkan header table yang overlap / terlalu rendah
   ========================================================= */

body.admin-layout .annual-reward-table-wrap,
body.admin-layout .annual-rewards-table-wrap,
body.admin-layout .reward-leaderboard-table-wrap,
body.admin-layout .admin-annual-reward-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    border-radius: 0 0 22px 22px !important;
}

body.admin-layout table.annual-reward-table,
body.admin-layout table.annual-rewards-table,
body.admin-layout table.reward-leaderboard-table,
body.admin-layout .annual-reward-table-wrap table,
body.admin-layout .annual-rewards-table-wrap table,
body.admin-layout .reward-leaderboard-table-wrap table,
body.admin-layout .admin-annual-reward-table-wrap table {
    width: 100% !important;
    min-width: 980px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
}

body.admin-layout table.annual-reward-table thead,
body.admin-layout table.annual-rewards-table thead,
body.admin-layout table.reward-leaderboard-table thead,
body.admin-layout .annual-reward-table-wrap table thead,
body.admin-layout .annual-rewards-table-wrap table thead,
body.admin-layout .reward-leaderboard-table-wrap table thead,
body.admin-layout .admin-annual-reward-table-wrap table thead {
    position: static !important;
    top: auto !important;
    z-index: 5 !important;
}

body.admin-layout table.annual-reward-table thead tr,
body.admin-layout table.annual-rewards-table thead tr,
body.admin-layout table.reward-leaderboard-table thead tr,
body.admin-layout .annual-reward-table-wrap table thead tr,
body.admin-layout .annual-rewards-table-wrap table thead tr,
body.admin-layout .reward-leaderboard-table-wrap table thead tr,
body.admin-layout .admin-annual-reward-table-wrap table thead tr {
    height: auto !important;
    min-height: 58px !important;
    background: linear-gradient(135deg, #f97316, #9a3412) !important;
}

body.admin-layout table.annual-reward-table th,
body.admin-layout table.annual-rewards-table th,
body.admin-layout table.reward-leaderboard-table th,
body.admin-layout .annual-reward-table-wrap table th,
body.admin-layout .annual-rewards-table-wrap table th,
body.admin-layout .reward-leaderboard-table-wrap table th,
body.admin-layout .admin-annual-reward-table-wrap table th {
    position: static !important;
    top: auto !important;
    z-index: 6 !important;
    height: auto !important;
    min-height: 58px !important;
    padding: 18px 16px !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

body.admin-layout table.annual-reward-table td,
body.admin-layout table.annual-rewards-table td,
body.admin-layout table.reward-leaderboard-table td,
body.admin-layout .annual-reward-table-wrap table td,
body.admin-layout .annual-rewards-table-wrap table td,
body.admin-layout .reward-leaderboard-table-wrap table td,
body.admin-layout .admin-annual-reward-table-wrap table td {
    padding: 18px 16px !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

/* bagi row pertama tak melekat bawah header */
body.admin-layout table.annual-reward-table tbody tr:first-child td,
body.admin-layout table.annual-rewards-table tbody tr:first-child td,
body.admin-layout table.reward-leaderboard-table tbody tr:first-child td,
body.admin-layout .annual-reward-table-wrap table tbody tr:first-child td,
body.admin-layout .annual-rewards-table-wrap table tbody tr:first-child td,
body.admin-layout .reward-leaderboard-table-wrap table tbody tr:first-child td,
body.admin-layout .admin-annual-reward-table-wrap table tbody tr:first-child td {
    padding-top: 22px !important;
}

/* =========================================================
   ADMIN MERCH ORDERS - ACTION BUTTON COLORS
   ========================================================= */

body.admin-layout .merch-order-action-row {
    margin-top: 20px !important;
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

body.admin-layout .merch-order-action-row .btn {
    min-height: 46px !important;
    padding: 12px 20px !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
    border: none !important;
    cursor: pointer !important;
}

/* Approve Payment - green gradient */
body.admin-layout .merch-order-action-row .approve-order-btn {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(34, 197, 94, 0.24) !important;
}

body.admin-layout .merch-order-action-row .approve-order-btn:hover {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 16px 34px rgba(34, 197, 94, 0.32) !important;
}

/* Reject Order - red gradient */
body.admin-layout .merch-order-action-row .reject-order-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(239, 68, 68, 0.24) !important;
}

body.admin-layout .merch-order-action-row .reject-order-btn:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 16px 34px rgba(239, 68, 68, 0.32) !important;
}

/* Update Order - softer premium orange */
body.admin-layout .merch-order-action-row .update-order-btn {
    background: linear-gradient(135deg, #fb923c, #f97316) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 12px 26px rgba(249, 115, 22, 0.18) !important;
}

body.admin-layout .merch-order-action-row .update-order-btn:hover {
    background: linear-gradient(135deg, #fdba74, #f97316) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 16px 34px rgba(249, 115, 22, 0.26) !important;
}

/* =========================================================
   ADMIN MERCH ORDERS - FINAL AMOUNT PAID DIRECT FIX
   ========================================================= */

body.admin-layout .merch-final-amount-row {
    width: 100% !important;
    margin-top: 14px !important;
    padding: 20px 22px !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    background: linear-gradient(135deg, #f97316, #facc15) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 16px 34px rgba(249, 115, 22, 0.22) !important;
}

body.admin-layout .merch-final-amount-row span {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 15px !important;
    font-weight: 850 !important;
}

body.admin-layout .merch-final-amount-row strong {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 950 !important;
    letter-spacing: 0.01em !important;
}

/* =========================================================
   ADMIN VISITOR ANALYTICS - TABLE HEADER ALIGNMENT FIX ONLY
   ========================================================= */

body.admin-layout .visitor-analytics-table-wrap,
body.admin-layout .visitor-table-wrap,
body.admin-layout .analytics-table-wrap,
body.admin-layout .admin-visitor-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    border-radius: 0 0 22px 22px !important;
}

/* Buang gradient strip biru/hijau atas table kalau ada */
body.admin-layout .visitor-analytics-table-wrap::before,
body.admin-layout .visitor-table-wrap::before,
body.admin-layout .analytics-table-wrap::before,
body.admin-layout .admin-visitor-table-wrap::before,
body.admin-layout .visitor-analytics-table::before,
body.admin-layout .analytics-table::before {
    display: none !important;
    content: none !important;
}

body.admin-layout table.visitor-analytics-table,
body.admin-layout table.visitor-table,
body.admin-layout table.analytics-table,
body.admin-layout .visitor-analytics-table-wrap table,
body.admin-layout .visitor-table-wrap table,
body.admin-layout .analytics-table-wrap table,
body.admin-layout .admin-visitor-table-wrap table {
    width: 100% !important;
    min-width: 900px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
    margin-top: 0 !important;
}

body.admin-layout table.visitor-analytics-table thead,
body.admin-layout table.visitor-table thead,
body.admin-layout table.analytics-table thead,
body.admin-layout .visitor-analytics-table-wrap table thead,
body.admin-layout .visitor-table-wrap table thead,
body.admin-layout .analytics-table-wrap table thead,
body.admin-layout .admin-visitor-table-wrap table thead {
    position: static !important;
    top: auto !important;
    transform: none !important;
    z-index: 5 !important;
}

body.admin-layout table.visitor-analytics-table thead tr,
body.admin-layout table.visitor-table thead tr,
body.admin-layout table.analytics-table thead tr,
body.admin-layout .visitor-analytics-table-wrap table thead tr,
body.admin-layout .visitor-table-wrap table thead tr,
body.admin-layout .analytics-table-wrap table thead tr,
body.admin-layout .admin-visitor-table-wrap table thead tr {
    height: auto !important;
    min-height: 58px !important;
    background: linear-gradient(135deg, #f97316, #9a3412) !important;
}

body.admin-layout table.visitor-analytics-table th,
body.admin-layout table.visitor-table th,
body.admin-layout table.analytics-table th,
body.admin-layout .visitor-analytics-table-wrap table th,
body.admin-layout .visitor-table-wrap table th,
body.admin-layout .analytics-table-wrap table th,
body.admin-layout .admin-visitor-table-wrap table th {
    position: static !important;
    top: auto !important;
    transform: none !important;
    z-index: 6 !important;
    height: auto !important;
    min-height: 58px !important;
    padding: 17px 16px !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

body.admin-layout table.visitor-analytics-table td,
body.admin-layout table.visitor-table td,
body.admin-layout table.analytics-table td,
body.admin-layout .visitor-analytics-table-wrap table td,
body.admin-layout .visitor-table-wrap table td,
body.admin-layout .analytics-table-wrap table td,
body.admin-layout .admin-visitor-table-wrap table td {
    padding: 17px 16px !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

/* bagi row pertama tak masuk kawasan header */
body.admin-layout table.visitor-analytics-table tbody tr:first-child td,
body.admin-layout table.visitor-table tbody tr:first-child td,
body.admin-layout table.analytics-table tbody tr:first-child td,
body.admin-layout .visitor-analytics-table-wrap table tbody tr:first-child td,
body.admin-layout .visitor-table-wrap table tbody tr:first-child td,
body.admin-layout .analytics-table-wrap table tbody tr:first-child td,
body.admin-layout .admin-visitor-table-wrap table tbody tr:first-child td {
    padding-top: 20px !important;
}

/* =========================================================
   MANAGE ADMINS - EXISTING ADMIN TABLE ORANGE FIX
   ========================================================= */

body.admin-layout .admin-list-card .admin-table-wrapper {
    position: relative !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 22px !important;
    background: rgba(2, 6, 23, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* tarik table naik elok bawah strip */
body.admin-layout .admin-list-card .admin-table {
    width: 100% !important;
    min-width: 850px !important;
    margin-top: -1px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
}

/* header table oren gelap */
body.admin-layout .admin-list-card .admin-table thead tr {
    background: linear-gradient(135deg, #f97316, #9a3412) !important;
}

body.admin-layout .admin-list-card .admin-table th {
    background: transparent !important;
    color: #ffffff !important;
    padding: 16px 16px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* body table kemas */
body.admin-layout .admin-list-card .admin-table td {
    padding: 17px 16px !important;
    color: #e5e7eb !important;
    vertical-align: middle !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

body.admin-layout .admin-list-card .admin-table tbody tr:hover {
    background: rgba(249, 115, 22, 0.08) !important;
}

/* scrollbar bawah table jadi oren */
body.admin-layout .admin-list-card .admin-table-wrapper::-webkit-scrollbar {
    height: 10px !important;
}

body.admin-layout .admin-list-card .admin-table-wrapper::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.9) !important;
    border-radius: 999px !important;
}

body.admin-layout .admin-list-card .admin-table-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
    border-radius: 999px !important;
}

/* =========================================================
   MANAGE ADMINS - FINAL CLEAN TABLE FIX
   No extra strip, only proper orange table header
   ========================================================= */

body.admin-layout .admin-list-card .admin-table-wrapper {
    position: relative !important;
    width: 100% !important;
    margin-top: 16px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    border-radius: 18px !important;
    background: rgba(2, 6, 23, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* paksa buang semua strip tambahan */
body.admin-layout .admin-list-card .admin-table-wrapper::before,
body.admin-layout .admin-list-card .admin-table-wrapper::after,
body.admin-layout .admin-list-card .admin-table::before,
body.admin-layout .admin-list-card .admin-table::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

body.admin-layout .admin-list-card .admin-table {
    width: 100% !important;
    min-width: 850px !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
}

/* header table sebenar */
body.admin-layout .admin-list-card .admin-table thead {
    position: static !important;
    display: table-header-group !important;
    transform: none !important;
}

body.admin-layout .admin-list-card .admin-table thead tr {
    position: static !important;
    height: auto !important;
    background: linear-gradient(135deg, #f97316, #9a3412) !important;
}

body.admin-layout .admin-list-card .admin-table th {
    position: static !important;
    top: auto !important;
    transform: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 16px !important;
    background: transparent !important;
    color: #ffffff !important;
    vertical-align: middle !important;
    text-align: left !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
}

/* body row */
body.admin-layout .admin-list-card .admin-table tbody tr {
    background: rgba(15, 23, 42, 0.45) !important;
}

body.admin-layout .admin-list-card .admin-table tbody tr:nth-child(even) {
    background: rgba(2, 6, 23, 0.45) !important;
}

body.admin-layout .admin-list-card .admin-table td {
    position: static !important;
    padding: 17px 16px !important;
    color: #e5e7eb !important;
    vertical-align: middle !important;
    text-align: left !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

body.admin-layout .admin-list-card .admin-table tbody tr:hover {
    background: rgba(249, 115, 22, 0.08) !important;
}

/* scrollbar bawah */
body.admin-layout .admin-list-card .admin-table-wrapper::-webkit-scrollbar {
    height: 10px !important;
}

body.admin-layout .admin-list-card .admin-table-wrapper::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.9) !important;
    border-radius: 999px !important;
}

body.admin-layout .admin-list-card .admin-table-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
    border-radius: 999px !important;
}

/* =========================================================
   HOME COUNTDOWN BANNER - LIGHT MODE FONT WHITE FIX
   Exact selector ikut html[data-theme="light"]
   ========================================================= */

html[data-theme="light"] body:not(.admin-layout) .home-countdown-banner-card,
html[data-theme="light"] body:not(.admin-layout) .home-countdown-banner-card *,
html[data-theme="light"] body:not(.admin-layout) .home-countdown-banner-content,
html[data-theme="light"] body:not(.admin-layout) .home-countdown-banner-content *,
html[data-theme="light"] body:not(.admin-layout) .home-countdown-mini-label,
html[data-theme="light"] body:not(.admin-layout) .home-countdown-title,
html[data-theme="light"] body:not(.admin-layout) .home-countdown-meta,
html[data-theme="light"] body:not(.admin-layout) .home-countdown-meta *,
html[data-theme="light"] body:not(.admin-layout) .home-countdown-timer,
html[data-theme="light"] body:not(.admin-layout) .home-countdown-timer *,
html[data-theme="light"] body:not(.admin-layout) .home-countdown-box,
html[data-theme="light"] body:not(.admin-layout) .home-countdown-box *,
html[data-theme="light"] body:not(.admin-layout) .home-countdown-number,
html[data-theme="light"] body:not(.admin-layout) .home-countdown-label {
    color: #ffffff !important;
}

html[data-theme="light"] body:not(.admin-layout) .home-countdown-number {
    color: #ffffff !important;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="light"] body:not(.admin-layout) .home-countdown-label,
html[data-theme="light"] body:not(.admin-layout) .home-countdown-mini-label {
    color: rgba(255, 255, 255, 0.88) !important;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="light"] body:not(.admin-layout) .home-countdown-title {
    color: #ffffff !important;
    text-shadow: 0 5px 22px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="light"] body:not(.admin-layout) .home-countdown-meta span,
html[data-theme="light"] body:not(.admin-layout) .home-countdown-meta p {
    color: rgba(255, 255, 255, 0.90) !important;
}

/* =========================================================
   URRC PWA INSTALL PROMPT
   ========================================================= */

.pwa-install-prompt {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 18px !important;
    z-index: 99999 !important;
    display: none !important;
}

.pwa-install-prompt.show {
    display: block !important;
}

.pwa-install-card {
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: 14px !important;
    border-radius: 22px !important;
    background: rgba(15, 23, 42, 0.94) !important;
    border: 1px solid rgba(249, 115, 22, 0.28) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(18px) !important;
    display: grid !important;
    grid-template-columns: 46px 1fr auto !important;
    gap: 12px !important;
    align-items: center !important;
}

.pwa-install-icon img {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
}

.pwa-install-text strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    margin-bottom: 2px !important;
}

.pwa-install-text span {
    display: block !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.pwa-install-actions {
    display: flex !important;
    gap: 8px !important;
}

.pwa-install-actions button {
    border: none !important;
    border-radius: 999px !important;
    padding: 9px 13px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

#pwaInstallBtn {
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
    color: #ffffff !important;
}

#pwaDismissBtn {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #e5e7eb !important;
}

@media (max-width: 520px) {
    .pwa-install-card {
        grid-template-columns: 42px 1fr !important;
    }

    .pwa-install-actions {
        grid-column: 1 / -1 !important;
        justify-content: flex-end !important;
    }
}

/* =========================================================
   ABOUT PAGE - PERMANENT IMAGE DESIGN FIX
   ========================================================= */

.about-hero-permanent-image {
    position: relative !important;
    overflow: hidden !important;
    background:
        linear-gradient(
            135deg,
            rgba(2, 6, 23, 0.72),
            rgba(124, 45, 18, 0.52)
        ),
        url("../images/about/about-hero.jpg") center / cover no-repeat !important;
    border-radius: 0 0 34px 34px !important;
}

.about-hero-permanent-image::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at top right, rgba(249, 115, 22, 0.26), transparent 42%) !important;
    pointer-events: none !important;
}

.about-hero-permanent-image > * {
    position: relative !important;
    z-index: 2 !important;
}

.about-gallery-carousel {
    display: flex !important;
    gap: 18px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 0 18px !important;
    scroll-snap-type: x mandatory !important;
}

.about-gallery-carousel::-webkit-scrollbar {
    height: 10px !important;
}

.about-gallery-carousel::-webkit-scrollbar-track {
    background: rgba(249, 115, 22, 0.16) !important;
    border-radius: 999px !important;
}

.about-gallery-carousel::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
    border-radius: 999px !important;
}

.about-gallery-slide {
    flex: 0 0 300px !important;
    height: 210px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid rgba(249, 115, 22, 0.18) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.20) !important;
}

.about-gallery-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}


/* =========================================================
   ADMIN REGISTRATIONS - CLEAN REVIEW CARD LAYOUT
========================================================= */

.registration-review-card {
    overflow: visible !important;
}

.registration-review-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
}

.registration-review-header h3 {
    margin-bottom: 6px !important;
}

.registration-review-count-pill {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    box-shadow: 0 12px 24px rgba(249, 115, 22, 0.24) !important;
}

.registration-review-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

.registration-review-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 280px !important;
    gap: 16px !important;
    padding: 16px !important;
    border-radius: 22px !important;
    background: rgba(2, 6, 23, 0.50) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16) !important;
}

.registration-review-main {
    display: grid !important;
    grid-template-columns: 42px minmax(340px, 1fr) minmax(230px, 0.55fr) !important;
    gap: 14px !important;
    min-width: 0 !important;
}

.registration-review-index {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: rgba(249, 115, 22, 0.16) !important;
    border: 1px solid rgba(249, 115, 22, 0.26) !important;
    color: #fed7aa !important;
    font-weight: 950 !important;
}

.registration-review-participant,
.registration-review-box,
.registration-review-side {
    min-width: 0 !important;
}

.registration-review-title-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

.registration-review-title-row h4 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
}

.registration-review-info-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 12px !important;
}

.registration-review-info-grid strong,
.registration-review-box-label,
.registration-review-note strong,
.registration-review-date-grid strong {
    display: block !important;
    margin-bottom: 2px !important;
    color: #9ca3af !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.registration-review-info-grid span,
.registration-review-box p,
.registration-review-note span,
.registration-review-date-grid span {
    display: block !important;
    color: #e5e7eb !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.registration-review-box {
    padding: 13px !important;
    border-radius: 18px !important;
    background: rgba(15, 23, 42, 0.62) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.registration-review-box strong {
    display: block !important;
    margin-bottom: 6px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.registration-review-box p {
    margin: 3px 0 0 !important;
}

.registration-review-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 20px !important;
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid rgba(249, 115, 22, 0.16) !important;
}

.registration-review-receipt-btn {
    width: 100% !important;
    min-height: 42px !important;
    padding: 11px 14px !important;
    text-align: center !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #f97316, #facc15) !important;
    color: #ffffff !important;
    font-weight: 950 !important;
    text-decoration: none !important;
    box-shadow: 0 12px 28px rgba(249, 115, 22, 0.24) !important;
}

.registration-no-receipt {
    display: block !important;
    padding: 11px 12px !important;
    border-radius: 14px !important;
    background: rgba(148, 163, 184, 0.10) !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

.registration-review-note {
    padding: 11px 12px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.registration-review-date-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.registration-review-date-grid div {
    padding: 11px 12px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.registration-review-delete-btn {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 950 !important;
}

.registration-review-empty-state {
    padding: 28px !important;
    border-radius: 20px !important;
    text-align: center !important;
    background: rgba(15, 23, 42, 0.62) !important;
    border: 1px dashed rgba(255, 255, 255, 0.18) !important;
}

.registration-review-empty-state h3 {
    color: #ffffff !important;
    margin-bottom: 6px !important;
}

.registration-review-empty-state p {
    color: #9ca3af !important;
}

@media (max-width: 1320px) {
    .registration-review-item {
        grid-template-columns: 1fr !important;
    }

    .registration-review-side {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: start !important;
    }

    .registration-review-note,
    .registration-review-date-grid,
    .registration-review-side a {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 980px) {
    .registration-review-main {
        grid-template-columns: 38px 1fr !important;
    }

    .registration-review-box {
        grid-column: 2 / -1 !important;
    }

    .registration-review-side {
        grid-template-columns: 1fr !important;
    }

    .registration-review-info-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .registration-review-header {
        flex-direction: column !important;
    }

    .registration-review-item {
        padding: 12px !important;
    }

    .registration-review-main {
        grid-template-columns: 1fr !important;
    }

    .registration-review-index,
    .registration-review-box {
        grid-column: auto !important;
    }

    .registration-review-date-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   ADMIN REGISTRATIONS - FINAL REVIEW CARD FIX
   Source section for admin_registrations.php
========================================================= */

body.admin-layout .registration-review-card,
.registration-review-card {
    overflow: visible !important;
}

body.admin-layout .registration-review-header,
.registration-review-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
}

body.admin-layout .registration-review-header h3,
.registration-review-header h3 {
    margin-bottom: 6px !important;
}

body.admin-layout .registration-review-count-pill,
.registration-review-count-pill {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    box-shadow: 0 12px 24px rgba(249, 115, 22, 0.24) !important;
}

body.admin-layout .registration-review-list,
.registration-review-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

body.admin-layout .registration-review-item,
.registration-review-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 280px !important;
    gap: 16px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    border-radius: 22px !important;
    background: rgba(2, 6, 23, 0.52) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16) !important;
}

body.admin-layout .registration-review-main,
.registration-review-main {
    display: grid !important;
    grid-template-columns: 42px minmax(340px, 1fr) minmax(230px, 0.55fr) !important;
    gap: 14px !important;
    min-width: 0 !important;
}

body.admin-layout .registration-review-index,
.registration-review-index {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: rgba(249, 115, 22, 0.16) !important;
    border: 1px solid rgba(249, 115, 22, 0.26) !important;
    color: #fed7aa !important;
    font-weight: 950 !important;
}

body.admin-layout .registration-review-participant,
body.admin-layout .registration-review-box,
body.admin-layout .registration-review-side,
.registration-review-participant,
.registration-review-box,
.registration-review-side {
    min-width: 0 !important;
}

body.admin-layout .registration-review-title-row,
.registration-review-title-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

body.admin-layout .registration-review-title-row h4,
.registration-review-title-row h4 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
}

body.admin-layout .registration-review-info-grid,
.registration-review-info-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 12px !important;
}

body.admin-layout .registration-review-info-grid strong,
body.admin-layout .registration-review-box-label,
body.admin-layout .registration-review-note strong,
body.admin-layout .registration-review-date-grid strong,
.registration-review-info-grid strong,
.registration-review-box-label,
.registration-review-note strong,
.registration-review-date-grid strong {
    display: block !important;
    margin-bottom: 2px !important;
    color: #9ca3af !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

body.admin-layout .registration-review-info-grid span,
body.admin-layout .registration-review-box p,
body.admin-layout .registration-review-note span,
body.admin-layout .registration-review-date-grid span,
.registration-review-info-grid span,
.registration-review-box p,
.registration-review-note span,
.registration-review-date-grid span {
    display: block !important;
    color: #e5e7eb !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

body.admin-layout .registration-review-box,
.registration-review-box {
    padding: 13px !important;
    border-radius: 18px !important;
    background: rgba(15, 23, 42, 0.62) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.admin-layout .registration-review-box strong,
.registration-review-box strong {
    display: block !important;
    margin-bottom: 6px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

body.admin-layout .registration-review-box p,
.registration-review-box p {
    margin: 3px 0 0 !important;
}

body.admin-layout .registration-review-side,
.registration-review-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 20px !important;
    background: rgba(15, 23, 42, 0.72) !important;
    border: 1px solid rgba(249, 115, 22, 0.16) !important;
}

body.admin-layout .registration-review-receipt-btn,
.registration-review-receipt-btn {
    width: 100% !important;
    min-height: 42px !important;
    padding: 11px 14px !important;
    text-align: center !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #f97316, #facc15) !important;
    color: #ffffff !important;
    font-weight: 950 !important;
    text-decoration: none !important;
    box-shadow: 0 12px 28px rgba(249, 115, 22, 0.24) !important;
}

body.admin-layout .registration-no-receipt,
.registration-no-receipt {
    display: block !important;
    padding: 11px 12px !important;
    border-radius: 14px !important;
    background: rgba(148, 163, 184, 0.10) !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

body.admin-layout .registration-review-note,
.registration-review-note {
    padding: 11px 12px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

body.admin-layout .registration-review-date-grid,
.registration-review-date-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.admin-layout .registration-review-date-grid div,
.registration-review-date-grid div {
    padding: 11px 12px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

body.admin-layout .registration-review-delete-btn,
.registration-review-delete-btn {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 950 !important;
}

body.admin-layout .registration-review-empty-state,
.registration-review-empty-state {
    padding: 28px !important;
    border-radius: 20px !important;
    text-align: center !important;
    background: rgba(15, 23, 42, 0.62) !important;
    border: 1px dashed rgba(255, 255, 255, 0.18) !important;
}

body.admin-layout .registration-review-empty-state h3,
.registration-review-empty-state h3 {
    color: #ffffff !important;
    margin-bottom: 6px !important;
}

body.admin-layout .registration-review-empty-state p,
.registration-review-empty-state p {
    color: #9ca3af !important;
}

@media (max-width: 1320px) {
    body.admin-layout .registration-review-item,
    .registration-review-item {
        grid-template-columns: 1fr !important;
    }

    body.admin-layout .registration-review-side,
    .registration-review-side {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: start !important;
    }

    body.admin-layout .registration-review-note,
    body.admin-layout .registration-review-date-grid,
    body.admin-layout .registration-review-side a,
    .registration-review-note,
    .registration-review-date-grid,
    .registration-review-side a {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 980px) {
    body.admin-layout .registration-review-main,
    .registration-review-main {
        grid-template-columns: 38px 1fr !important;
    }

    body.admin-layout .registration-review-box,
    .registration-review-box {
        grid-column: 2 / -1 !important;
    }

    body.admin-layout .registration-review-side,
    .registration-review-side {
        grid-template-columns: 1fr !important;
    }

    body.admin-layout .registration-review-info-grid,
    .registration-review-info-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    body.admin-layout .registration-review-header,
    .registration-review-header {
        flex-direction: column !important;
    }

    body.admin-layout .registration-review-item,
    .registration-review-item {
        padding: 12px !important;
    }

    body.admin-layout .registration-review-main,
    .registration-review-main {
        grid-template-columns: 1fr !important;
    }

    body.admin-layout .registration-review-index,
    body.admin-layout .registration-review-box,
    .registration-review-index,
    .registration-review-box {
        grid-column: auto !important;
    }

    body.admin-layout .registration-review-date-grid,
    .registration-review-date-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================
   ADMIN MANAGE EVENTS - ACTION BUTTON COLOURS
========================= */

.admin-event-action-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 22px !important;
}

.admin-event-action-buttons .admin-event-btn {
    min-height: 44px !important;
    padding: 12px 18px !important;
    border-radius: 999px !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    transition: 0.22s ease !important;
}

/* Share Link - soft blue */
.admin-event-action-buttons .share-admin-event-btn {
    background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.24) !important;
}

/* View Registrations - IMPORTANT / highlighted */
.admin-event-action-buttons .registrations-btn {
    position: relative !important;
    background: linear-gradient(135deg, #f97316, #facc15) !important;
    color: #ffffff !important;
    transform: scale(1.06) !important;
    box-shadow:
        0 0 0 4px rgba(249, 115, 22, 0.20),
        0 18px 38px rgba(249, 115, 22, 0.34) !important;
}

.admin-event-action-buttons .registrations-btn::after {
    content: "MAIN" !important;
    position: absolute !important;
    top: -10px !important;
    right: -6px !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    background: #16a34a !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    letter-spacing: 0.04em !important;
}

/* Certificate Settings - purple */
.admin-event-action-buttons .certificate-btn {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    box-shadow: 0 12px 26px rgba(124, 58, 237, 0.24) !important;
}

/* Gallery - teal */
.admin-event-action-buttons .gallery-event-btn {
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
    box-shadow: 0 12px 26px rgba(20, 184, 166, 0.22) !important;
}

/* Edit - softer orange */
.admin-event-action-buttons .edit-event-btn {
    background: linear-gradient(135deg, #fb923c, #f97316) !important;
    box-shadow: 0 12px 26px rgba(249, 115, 22, 0.18) !important;
}

/* Archive - red/dark */
.admin-event-action-buttons .archive-event-btn {
    background: linear-gradient(135deg, #ef4444, #991b1b) !important;
    box-shadow: 0 12px 26px rgba(239, 68, 68, 0.22) !important;
}

.admin-event-action-buttons .admin-event-btn:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.08) !important;
}

.admin-event-action-buttons .registrations-btn:hover {
    transform: translateY(-2px) scale(1.07) !important;
    box-shadow:
        0 0 0 5px rgba(249, 115, 22, 0.26),
        0 22px 44px rgba(249, 115, 22, 0.42) !important;
}

/* =========================
   HOME VISUAL RANDOM GALLERY
   5 cards, images change randomly from event_gallery
========================= */

.home-visual-random-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr 1fr;
    grid-template-rows: repeat(2, 190px);
    gap: 20px;
    margin-top: 28px;
}

.home-visual-random-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.home-visual-random-card:first-child {
    grid-row: span 2;
}

.home-visual-random-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: opacity 0.32s ease, transform 0.32s ease;
}

.home-visual-random-card:hover img {
    transform: scale(1.04);
}

.home-visual-random-card.is-changing img {
    opacity: 0;
    transform: scale(1.04);
}

.home-visual-caption {
    position: absolute;
    left: 18px;
    right: auto;
    bottom: 16px;
    padding: 0;
    border-radius: 0;
    background: transparent !important;
    color: #ffffff;
    font-size: 15px;
    font-weight: 950;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.90);
    backdrop-filter: none !important;
}

@media (max-width: 980px) {
    .home-visual-random-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .home-visual-random-card,
    .home-visual-random-card:first-child {
        grid-row: auto;
        height: 220px;
    }
}

@media (max-width: 640px) {
    .home-visual-random-grid {
        grid-template-columns: 1fr;
    }

    .home-visual-random-card,
    .home-visual-random-card:first-child {
        height: 230px;
    }
}

html[data-theme="light"] body:not(.admin-layout) .home-visual-caption {
    color: #ffffff !important;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.90) !important;
}

/* =========================
   MEMBER DASHBOARD - ALERT / NOTIFICATION CARD FIX
========================= */

.member-dashboard-alert-card {
    background: linear-gradient(
        135deg,
        rgba(15, 23, 42, 0.94),
        rgba(124, 45, 18, 0.42)
    ) !important;
    border: 1px solid rgba(249, 115, 22, 0.26) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22) !important;
}

.member-dashboard-alert-card h3,
.member-dashboard-alert-card h4,
.member-dashboard-alert-card strong {
    color: #ffffff !important;
}

.member-dashboard-alert-card p,
.member-dashboard-alert-card span {
    color: rgba(255, 255, 255, 0.82) !important;
}

.member-dashboard-alert-card a {
    color: #fb923c !important;
    font-weight: 950 !important;
}

html[data-theme="light"] body:not(.admin-layout) .member-dashboard-alert-card {
    background: linear-gradient(
        135deg,
        rgba(255, 247, 237, 0.96),
        rgba(255, 237, 213, 0.90)
    ) !important;
    border: 1px solid rgba(249, 115, 22, 0.24) !important;
    color: #111827 !important;
}

html[data-theme="light"] body:not(.admin-layout) .member-dashboard-alert-card h3,
html[data-theme="light"] body:not(.admin-layout) .member-dashboard-alert-card h4,
html[data-theme="light"] body:not(.admin-layout) .member-dashboard-alert-card strong {
    color: #111827 !important;
}

html[data-theme="light"] body:not(.admin-layout) .member-dashboard-alert-card p,
html[data-theme="light"] body:not(.admin-layout) .member-dashboard-alert-card span {
    color: #475569 !important;
}


/* =========================================================
   URRC TOAST NOTIFICATION - LIGHT/DARK FIX
========================================================= */
.urrc-toast-notification {
    position: fixed !important;
    right: 24px !important;
    bottom: 110px !important;
    z-index: 9998 !important;

    width: fit-content !important;
    min-width: 360px !important;
    max-width: 430px !important;
    height: auto !important;
    min-height: 0 !important;

    padding: 18px 20px !important;
    border-radius: 24px !important;

    display: none !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;

    background: linear-gradient(135deg, #111827, #1e293b) !important;
    border: 1px solid rgba(249, 115, 22, 0.24) !important;
    box-shadow: 0 24px 65px rgba(15, 23, 42, 0.38) !important;

    color: #ffffff !important;
}

.urrc-toast-notification.show {
    display: grid !important;
}

.urrc-toast-notification.show {
    display: grid !important;
}

.urrc-toast-notification,
.urrc-toast-notification * {
    color: #ffffff !important;
}

.urrc-toast-notification h3,
.urrc-toast-notification h4,
.urrc-toast-notification strong {
    color: #ffffff !important;
    font-weight: 950 !important;
}

.urrc-toast-notification p,
.urrc-toast-notification span {
    color: rgba(255, 255, 255, 0.82) !important;
}

.urrc-toast-notification a {
    color: #ffffff !important;
    text-decoration: none !important;
}

.urrc-toast-notification .toast-icon,
.urrc-toast-icon {
    width: 0 !important;
    height: auto !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #38bdf8, #22c55e) !important;
    font-size: 26px !important;
}

.urrc-toast-notification .toast-actions,
.urrc-toast-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 16px !important;
}

.urrc-toast-notification button,
.urrc-toast-notification .toast-btn,
.urrc-toast-notification .view-details-btn {
    border: none !important;
    border-radius: 999px !important;
    padding: 11px 17px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.urrc-toast-notification .view-details-btn,
.urrc-toast-notification a:first-of-type,
.urrc-toast-notification .toast-primary-btn {
    background: linear-gradient(135deg, #60a5fa, #22c55e) !important;
    color: #ffffff !important;
}

.urrc-toast-notification .dismiss-btn,
.urrc-toast-notification .toast-dismiss-btn,
.urrc-toast-notification button[type="button"] {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* Light theme must keep toast dark with white text */
html[data-theme="light"] body:not(.admin-layout) .urrc-toast-notification,
html[data-theme="light"] body:not(.admin-layout) .urrc-toast-notification * {
    color: #ffffff !important;
}

html[data-theme="light"] body:not(.admin-layout) .urrc-toast-notification p,
html[data-theme="light"] body:not(.admin-layout) .urrc-toast-notification span {
    color: rgba(255, 255, 255, 0.82) !important;
}

@media (max-width: 640px) {
    .urrc-toast-notification {
        left: 16px !important;
        right: 16px !important;
        bottom: 92px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: 52px 1fr !important;
        padding: 16px !important;
    }
}

.urrc-toast-notification {
    position: fixed !important;
    right: 24px !important;
    bottom: 110px !important;
    top: auto !important;
    left: auto !important;
    inset: auto 24px 110px auto !important;

    z-index: 9998 !important;

    width: fit-content !important;
    min-width: 360px !important;
    max-width: 430px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 18px 20px !important;
    border-radius: 24px !important;

    display: none !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;

    background: linear-gradient(135deg, #111827, #1e293b) !important;
    border: 1px solid rgba(249, 115, 22, 0.24) !important;
    box-shadow: 0 24px 65px rgba(15, 23, 42, 0.38) !important;

    color: #ffffff !important;
}

.urrc-toast-notification.show {
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}


/* =========================================================
   FLOATING AI + NOTIFICATION BUTTON ALIGNMENT FIX
   ========================================================= */

/* AI button bawah */
body:not(.admin-layout) .chatbot-toggle,
body:not(.admin-layout) .ai-chatbot-toggle,
body:not(.admin-layout) .ai-floating-btn,
body:not(.admin-layout) .urrc-ai-toggle {
    position: fixed !important;
    right: 24px !important;
    bottom: 28px !important;
    z-index: 9995 !important;
}

/* Notification button atas AI */
body:not(.admin-layout) .notification-floating-btn,
body:not(.admin-layout) .member-notification-floating-btn,
body:not(.admin-layout) .urrc-notification-floating-btn,
body:not(.admin-layout) .urrc-notification-bell,
body:not(.admin-layout) .floating-notification-btn {
    position: fixed !important;
    right: 36px !important;
    bottom: 118px !important;
    z-index: 9996 !important;
}

/* =========================================================
   MOBILE FLOATING AI + NOTIFICATION FINAL ALIGNMENT
========================================================= */

@media (max-width: 768px) {
    body:not(.admin-layout) #chatbotToggle.chatbot-toggle {
        position: fixed !important;
        right: 10px !important;
        bottom: 24px !important;
        width: 72px !important;
        height: 72px !important;
        font-size: 25px !important;
        z-index: 9995 !important;
    }

    body:not(.admin-layout) .notification-floating-btn,
    body:not(.admin-layout) .member-notification-floating-btn,
    body:not(.admin-layout) .urrc-notification-floating-btn,
    body:not(.admin-layout) .urrc-notification-bell,
    body:not(.admin-layout) .floating-notification-btn,
    body:not(.admin-layout) #notificationToggle,
    body:not(.admin-layout) #urrcNotificationToggle {
        position: fixed !important;
        right: 17px !important;
        bottom: 108px !important;
        width: 58px !important;
        height: 58px !important;
        font-size: 23px !important;
        z-index: 9996 !important;
    }
}

/* =========================================================
   MOBILE CHATBOT INPUT AREA - CENTERED WRAPPER FINAL
========================================================= */

@media (max-width: 768px) {
    html body:not(.admin-layout) div.chatbot-input-area {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;

        width: calc(100% - 32px) !important;
        max-width: 420px !important;

        padding: 12px !important;
        margin: 0 auto 14px auto !important;
        box-sizing: border-box !important;

        border-radius: 20px !important;
        background: #111421 !important;
    }

    html body:not(.admin-layout) div.chatbot-input-area input#chatbotInput {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 52px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;

        border-radius: 16px !important;
        background: #090d1a !important;
        color: #ffffff !important;
    }

    html body:not(.admin-layout) div.chatbot-input-area button {
        flex: 0 0 76px !important;
        width: 76px !important;
        min-width: 76px !important;
        max-width: 76px !important;

        height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;

        border-radius: 16px !important;
        font-size: 14px !important;
        font-weight: 950 !important;
    }
}

/* =========================
   FIX COMPLETE PROFILE CARD - DARK MODE
========================= */

.profile-warning-card {
    background: rgba(255, 248, 240, 0.96) !important;
    border: 1px solid rgba(234, 88, 12, 0.35) !important;
    color: #1f2937 !important;
}

.profile-warning-card h1,
.profile-warning-card h2,
.profile-warning-card h3,
.profile-warning-card h4,
.profile-warning-card strong {
    color: #111827 !important;
}

.profile-warning-card p,
.profile-warning-card span {
    color: #475569 !important;
}

/* Dark mode version */
body.dark-mode .profile-warning-card,
body.dark-theme .profile-warning-card,
[data-theme="dark"] .profile-warning-card {
    background: linear-gradient(135deg, #111827, #1e293b) !important;
    border: 1px solid rgba(249, 115, 22, 0.45) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28) !important;
    color: #ffffff !important;
}

body.dark-mode .profile-warning-card h1,
body.dark-mode .profile-warning-card h2,
body.dark-mode .profile-warning-card h3,
body.dark-mode .profile-warning-card h4,
body.dark-mode .profile-warning-card strong,
body.dark-theme .profile-warning-card h1,
body.dark-theme .profile-warning-card h2,
body.dark-theme .profile-warning-card h3,
body.dark-theme .profile-warning-card h4,
body.dark-theme .profile-warning-card strong,
[data-theme="dark"] .profile-warning-card h1,
[data-theme="dark"] .profile-warning-card h2,
[data-theme="dark"] .profile-warning-card h3,
[data-theme="dark"] .profile-warning-card h4,
[data-theme="dark"] .profile-warning-card strong {
    color: #ffffff !important;
}

body.dark-mode .profile-warning-card p,
body.dark-mode .profile-warning-card span,
body.dark-theme .profile-warning-card p,
body.dark-theme .profile-warning-card span,
[data-theme="dark"] .profile-warning-card p,
[data-theme="dark"] .profile-warning-card span {
    color: #cbd5e1 !important;
}

/* =========================================================
   ADMIN REGISTRATION CARD - PAYMENT ACTIONS
========================================================= */

.registration-payment-action-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 4px !important;
}

.registration-payment-action-stack form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
}

.registration-approve-payment-btn,
.registration-reject-payment-btn {
    width: 100% !important;
    min-height: 42px !important;
    border: none !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.registration-approve-payment-btn {
    background: linear-gradient(135deg, #16a34a, #22c55e) !important;
    box-shadow: 0 12px 24px rgba(34, 197, 94, 0.22) !important;
}

.registration-reject-payment-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    box-shadow: 0 12px 24px rgba(239, 68, 68, 0.22) !important;
}

.registration-reject-note-input {
    width: 100% !important;
    height: 42px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid rgba(249, 115, 22, 0.22) !important;
    box-sizing: border-box !important;
}

.registration-payment-decision-text {
    display: block !important;
    padding: 11px 12px !important;
    border-radius: 14px !important;
    background: rgba(34, 197, 94, 0.10) !important;
    border: 1px solid rgba(34, 197, 94, 0.20) !important;
    color: #bbf7d0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

/* =========================
   PWA INSTALL PROMPT
========================= */

.pwa-install-prompt {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 18px;
    z-index: 99999;
    display: none;
}

.pwa-install-prompt.show {
    display: block;
}

.pwa-install-card {
    max-width: 520px;
    margin: 0 auto;
    background: #10182d;
    color: #ffffff;
    border: 1px solid rgba(249, 115, 22, 0.45);
    border-radius: 22px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.pwa-install-icon img {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    object-fit: cover;
}

.pwa-install-text {
    flex: 1;
}

.pwa-install-text strong {
    display: block;
    font-size: 15px;
    color: #ffffff;
}

.pwa-install-text p {
    margin: 4px 0 0;
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.4;
}

.pwa-install-actions {
    display: flex;
    gap: 6px;
}

.pwa-install-actions button {
    border: none;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#pwaInstallBtn {
    background: #f97316;
    color: #ffffff;
}

#pwaDismissBtn {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

@media (max-width: 480px) {
    .pwa-install-card {
        align-items: flex-start;
    }

    .pwa-install-actions {
        flex-direction: column;
    }
}
/* =========================
   FINAL PWA PROMPT FIX
   Mobile only + light mode colour
========================= */

.pwa-install-prompt {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 18px !important;
    z-index: 99999 !important;
    display: none !important;
}

.pwa-install-prompt.show {
    display: block !important;
}

/* Hide on desktop/tablet wide screen */
@media (min-width: 769px) {
    .pwa-install-prompt,
    .pwa-install-prompt.show {
        display: none !important;
    }
}

/* Light mode */
.pwa-install-card {
    max-width: 520px !important;
    margin: 0 auto !important;
    background: rgba(255, 250, 245, 0.98) !important;
    color: #111827 !important;
    border: 1px solid rgba(249, 115, 22, 0.35) !important;
    border-radius: 22px !important;
    padding: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18) !important;
    backdrop-filter: blur(14px) !important;
}

.pwa-install-icon img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
    background: #ffffff !important;
    border: 1px solid rgba(249, 115, 22, 0.25) !important;
}

.pwa-install-text {
    flex: 1 !important;
}

.pwa-install-text strong {
    display: block !important;
    font-size: 15px !important;
    color: #111827 !important;
}

.pwa-install-text p {
    margin: 4px 0 0 !important;
    font-size: 12px !important;
    color: #475569 !important;
    line-height: 1.4 !important;
}

.pwa-install-actions {
    display: flex !important;
    gap: 6px !important;
}

.pwa-install-actions button {
    border: none !important;
    border-radius: 999px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

#pwaInstallBtn {
    background: linear-gradient(135deg, #ff7a18, #ea580c) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.28) !important;
}

#pwaDismissBtn {
    background: #e5e7eb !important;
    color: #334155 !important;
}

/* Dark mode */
body.dark-mode .pwa-install-card,
body.dark-theme .pwa-install-card,
[data-theme="dark"] .pwa-install-card {
    background: #10182d !important;
    color: #ffffff !important;
    border: 1px solid rgba(249, 115, 22, 0.45) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode .pwa-install-text strong,
body.dark-theme .pwa-install-text strong,
[data-theme="dark"] .pwa-install-text strong {
    color: #ffffff !important;
}

body.dark-mode .pwa-install-text p,
body.dark-theme .pwa-install-text p,
[data-theme="dark"] .pwa-install-text p {
    color: #cbd5e1 !important;
}

body.dark-mode #pwaDismissBtn,
body.dark-theme #pwaDismissBtn,
[data-theme="dark"] #pwaDismissBtn {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

@media (max-width: 480px) {
    .pwa-install-card {
        align-items: flex-start !important;
    }

    .pwa-install-actions {
        flex-direction: column !important;
    }
}
/* =========================================================
   CHATBOT HEADER CLEAR BUTTON
========================================================= */

.chatbot-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.chatbot-clear-btn {
    border: none !important;
    border-radius: 999px !important;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.chatbot-clear-btn:hover {
    background: rgba(255, 255, 255, 0.28) !important;
}

/* =========================================================
   MOBILE CHATBOT PANEL - NEVER GO BEHIND NAVBAR
========================================================= */

@media (max-width: 900px) {
    body:not(.admin-layout) .urrc-chatbot {
        left: auto !important;
        top: auto !important;
        right: 16px !important;
        bottom: 24px !important;
    }

    body:not(.admin-layout) .urrc-chatbot .chatbot-box {
        position: fixed !important;
        top: 110px !important;
        right: 16px !important;
        bottom: 95px !important;
        left: 16px !important;

        width: auto !important;
        height: auto !important;
        max-height: calc(100vh - 130px) !important;
        z-index: 9996 !important;
    }

    body:not(.admin-layout) .urrc-chatbot .chatbot-messages {
        max-height: calc(100vh - 290px) !important;
        overflow-y: auto !important;
    }
}

/* =========================================================
   CHATBOT PANEL FINAL POSITION FIX
   Force chatbot box below navbar
========================================================= */

body:not(.admin-layout) .urrc-chatbot.active .chatbot-box,
body:not(.admin-layout) .urrc-chatbot .chatbot-box {
    position: fixed !important;

    top: 155px !important;
    right: 24px !important;
    bottom: 115px !important;
    left: auto !important;

    width: 430px !important;
    height: auto !important;
    max-height: calc(100vh - 270px) !important;

    z-index: 9998 !important;
}

body:not(.admin-layout) .urrc-chatbot .chatbot-header {
    flex-shrink: 0 !important;
}

body:not(.admin-layout) .urrc-chatbot .chatbot-messages {
    overflow-y: auto !important;
}

/* Mobile / narrow screen */
@media (max-width: 900px) {
    body:not(.admin-layout) .urrc-chatbot.active .chatbot-box,
    body:not(.admin-layout) .urrc-chatbot .chatbot-box {
        top: 155px !important;
        left: 16px !important;
        right: 16px !important;
        bottom: 96px !important;

        width: auto !important;
        height: auto !important;
        max-height: calc(100vh - 260px) !important;
    }
}

/* =========================================================
   CHATBOT HEADER BUTTON FIX
========================================================= */

.urrc-chatbot .chatbot-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.urrc-chatbot .chatbot-header > div:first-child {
    min-width: 0 !important;
    flex: 1 !important;
}

.urrc-chatbot .chatbot-header h4 {
    margin: 0 !important;
    line-height: 1.15 !important;
}

.urrc-chatbot .chatbot-header span {
    display: block !important;
    margin-top: 6px !important;
    line-height: 1.35 !important;
}

.urrc-chatbot .chatbot-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.urrc-chatbot .chatbot-clear-btn {
    width: auto !important;
    min-width: 58px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

.urrc-chatbot #chatbotClose {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* MEMBER EXISTING EVENT REGISTRATION DETAIL */
.member-existing-registration-card {
    background: rgba(15, 23, 42, .88);
    border: 1px solid rgba(255, 122, 24, .25);
    border-radius: 26px;
    padding: 28px;
    box-shadow: 0 24px 70px rgba(0,0,0,.22);
}

.member-reg-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.member-reg-header h2 {
    margin: 0 0 8px;
    color: #ffffff;
}

.member-reg-header p {
    margin: 0;
    color: rgba(255,255,255,.72);
}

.member-reg-header .mini-label {
    color: #ff7a18;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.member-reg-status {
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    background: rgba(148,163,184,.18);
    color: #e5e7eb;
    white-space: nowrap;
}

.member-reg-status.approved {
    background: rgba(34,197,94,.16);
    color: #86efac;
}

.member-reg-status.rejected {
    background: rgba(239,68,68,.16);
    color: #fca5a5;
}

.member-reg-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.member-reg-item {
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 15px 16px;
}

.member-reg-item.wide {
    grid-column: 1 / -1;
}

.member-reg-item span {
    display: block;
    color: rgba(255,255,255,.52);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.member-reg-item strong {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.45;
}

.member-reg-item small {
    color: rgba(255,255,255,.68);
}

.member-reg-alert {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    font-weight: 800;
}

.member-reg-alert.rejected {
    background: rgba(239,68,68,.14);
    color: #fecaca;
    border: 1px solid rgba(239,68,68,.28);
}

.member-reg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.member-reg-orange-btn {
    background: linear-gradient(135deg, #ff7a18, #e04b00) !important;
    color: #ffffff !important;
    border: none !important;
}

/* LIGHT MODE */
html[data-theme="light"] .member-existing-registration-card {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 24px 70px rgba(15,23,42,.08);
}

html[data-theme="light"] .member-reg-header h2,
html[data-theme="light"] .member-reg-item strong {
    color: #0f172a;
}

html[data-theme="light"] .member-reg-header p,
html[data-theme="light"] .member-reg-item small {
    color: #475569;
}

html[data-theme="light"] .member-reg-item {
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,.08);
}

html[data-theme="light"] .member-reg-item span {
    color: #64748b;
}

html[data-theme="light"] .member-reg-status {
    background: #eef2ff;
    color: #3730a3;
}

html[data-theme="light"] .member-reg-status.approved {
    background: #dcfce7;
    color: #166534;
}

html[data-theme="light"] .member-reg-status.rejected {
    background: #fee2e2;
    color: #991b1b;
}

@media (max-width: 768px) {
    .member-existing-registration-card {
        padding: 20px;
        border-radius: 22px;
    }

    .member-reg-header {
        flex-direction: column;
    }

    .member-reg-summary-grid {
        grid-template-columns: 1fr;
    }

    .member-reg-actions a,
    .member-reg-actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* MEMBER LOGIN VISUAL TEXT - LIGHT MODE FIX */
html[data-theme="light"] .member-login-page .auth-visual-panel::after {
    background:
        linear-gradient(180deg, rgba(15,23,42,.10) 0%, rgba(124,45,18,.72) 100%),
        linear-gradient(90deg, rgba(15,23,42,.58) 0%, rgba(15,23,42,.18) 100%) !important;
}

html[data-theme="light"] .member-login-page .auth-visual-content .hero-label,
html[data-theme="light"] .member-login-page .auth-visual-content h1,
html[data-theme="light"] .member-login-page .auth-visual-content p {
    color: #ffffff !important;
    text-shadow: 0 4px 22px rgba(0,0,0,.62) !important;
}

html[data-theme="light"] .member-login-page .auth-visual-content .hero-label {
    color: #38bdf8 !important;
}

html[data-theme="light"] .member-login-page .auth-visual-content h1 {
    color: #ffffff !important;
}

html[data-theme="light"] .member-login-page .auth-visual-content p {
    color: rgba(255,255,255,.92) !important;
}

@media (max-width: 760px) {
    .merch-detail-layout { display:block !important; }
    .merch-detail-image-wrap { margin-bottom:20px !important; }
    .merch-detail-image-wrap img { width:100% !important; aspect-ratio:4/5 !important; object-fit:cover !important; border-radius:22px !important; }
    .compact-event-description { display:none !important; }
}


/* =========================================================
   EVENT DETAIL DESKTOP SLIDER FIX ONLY
   - Keep mobile as current
   - Remove blue spacing on desktop
   - Show full poster without top crop
========================================================= */

@media (min-width: 901px) {
    .event-detail-slider,
    .event-slider-wrap,
    .event-slider-card,
    .event-gallery-slider,
    .event-detail-gallery,
    .event-detail-image-slider {
        background: transparent !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .event-slider-main,
    .event-detail-slider-main,
    .event-detail-poster-frame,
    .event-detail-main-image,
    .event-detail-hero-image {
        background: transparent !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
        border-radius: 28px !important;
    }

    .event-slider-main img,
    .event-detail-slider-main img,
    .event-detail-poster-frame img,
    .event-detail-main-image img,
    .event-detail-hero-image img,
    .event-detail-gallery img,
    .event-detail-image-slider img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center top !important;
        border-radius: 28px !important;
        background: transparent !important;
    }

    .event-slider-counter,
    .slider-counter,
    .event-detail-slider-counter {
        position: absolute !important;
        bottom: 18px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 5 !important;
    }
}

/* =========================================================
   AI CHATBOT LIGHT MODE BUTTON FIX ONLY
========================================================= */

html[data-theme="light"] .chatbot-box a,
html[data-theme="light"] .chatbot-box button,
html[data-theme="light"] .urrc-chatbot a,
html[data-theme="light"] .urrc-chatbot button,
html[data-theme="light"] .chatbot-message a,
html[data-theme="light"] .chatbot-message button {
    background: linear-gradient(135deg, #ff7a18, #e84a0c) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 24px rgba(232, 74, 12, 0.25) !important;
    opacity: 1 !important;
}

html[data-theme="light"] .chatbot-box a:hover,
html[data-theme="light"] .chatbot-box button:hover,
html[data-theme="light"] .urrc-chatbot a:hover,
html[data-theme="light"] .urrc-chatbot button:hover,
html[data-theme="light"] .chatbot-message a:hover,
html[data-theme="light"] .chatbot-message button:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

html[data-theme="light"] .chatbot-message .btn-disabled,
html[data-theme="light"] .chatbot-message button:disabled,
html[data-theme="light"] .chatbot-message a.disabled {
    background: #cbd5e1 !important;
    color: #475569 !important;
    box-shadow: none !important;
    opacity: 0.75 !important;
}