/* =================== CSS VARIABLES =================== */
:root {
    --primary-color: #ffe166;
    --primary-dark: #e6c84d;
    --secondary-color: #DC2626;
    --secondary-dark: #b91c1c;
    --bg-color: #fafafa;
    --card-bg: #ffffff;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --border-color: #e5e7eb;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

h1,
h2,
h3 {
    font-size: 1.2rem;
}

body {
    font-family: "Archivo", sans-serif;
    background: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.2;
    min-height: 100vh;
    overflow-x: hidden;
    /* Prevent horizontal scroll flash */
}

.main-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.heading--title {
    padding: .5rem 0;
}


/* =================== HEADER =================== */
header,
.site-header {
    all: unset;
    display: flex;
}

.site-header {
    align-items: center;
    justify-content: space-between;
    padding: 1rem 5rem;
    min-height: 58px;
    background: linear-gradient(135deg, #f8da5f 0%, #e9cb50 100%);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.45);
    border-bottom: 2px solid rgb(241 207 61);
}

/* ---- Logo (Left) ---- */
.header-logo {
    display: flex;
    align-items: center;
    order: 1;
    /* Left side */
}

.header-logo img {
    height: 66px;
    max-height: 66px;
    max-width: 260px;
    width: auto;
    object-fit: contain;
    display: block;
}


/* ---- Nav (Right) ---- */
.main-nav {
    order: 2;
    flex: 1;
    display: flex;
    justify-content: right;
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
}

.nav-link {
    display: block;
    padding: 0.45rem 2rem;
    color: #392e19;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    position: relative;
    transition: color 0.25s ease;
    text-transform: uppercase;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.nav-link:hover {
    color: #ec2c31 !important;
}

.nav-link.active {
    color: #ec2c31;
}

/* ---- Hamburger Button ---- */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 2px solid rgb(191 30 30 / 26%);
    border-radius: 8px;
    cursor: pointer;
    padding: 6px;
    order: 3;
    /* Far right on mobile, after nav */
    transition: border-color 0.25s ease;
    touch-action: manipulation;
}

.hamburger:hover {
    border-color: var(--primary-color);
}

.bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #d12323;
    border-radius: 2px;
    transition: transform 0.35s ease, opacity 0.35s ease, width 0.35s ease;
    transform-origin: center;
}

/* Hamburger → X animation */
.hamburger.open .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.open .bar:nth-child(2) {
    opacity: 0;
    width: 0;
}

.hamburger.open .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---- Mobile Nav Close Button ---- */
.nav-close-btn {
    display: none;
    /* Hidden on desktop */
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 225, 102, 0.35);
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
    touch-action: manipulation;
}

.nav-close-btn:hover {
    background: rgba(255, 225, 102, 0.12);
    border-color: var(--primary-color);
}

.close-line {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--primary-color);
    border-radius: 2px;
    position: absolute;
}

.close-line:nth-child(1) {
    transform: rotate(45deg);
}

.close-line:nth-child(2) {
    transform: rotate(-45deg);
}

.countdown-urgent {
    color: #fff;
}

/* ---- Mobile Overlay 
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
}
---- */

.mobile-overlay.active {
    opacity: 1;
}

/* ---- Prevent body scroll when menu open ---- */
body.no-scroll {
    overflow: hidden;
}

.result-container {
    padding: 3rem 0;
    position: relative;
    overflow: hidden; /* Keep overlay within bounds */
}

/* ---- Mobile Responsive ---- */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .mobile-overlay {
        display: block;
    }

    .nav-close-btn {
        display: flex;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 240px;
        background: linear-gradient(160deg, #1a1a2e 0%, #0f0f1e 100%);
        z-index: 999;
        padding: 5rem 1.5rem 2rem;
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    }

    .main-nav.mobile-open {
        right: 0;
    }

    .nav-list {
        flex-direction: column;
        gap: 0.5rem;
    }

    .nav-link {
        font-size: 1.05rem;
        padding: 0.75rem 1rem;
        transition: color 0.25s ease;
    }

    .nav-link:hover {
        color: var(--primary-color);
    }

    .header-logo img {
        height: 60px;
        max-height: 100px;
        max-width: 200px;
    }
}

/* =================== COUNTDOWN TIMER =================== */
/* =================== FLOATING WHATSAPP BUTTON =================== */
.whatsapp-floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #25D366;
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 38px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 9999;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-floating-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
    color: white;
}
@media (max-width: 768px) {
    .whatsapp-floating-btn {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 32px;
    }
}
#countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: #f1d459;
    margin: 0 1rem;
    padding: 5px 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom: 5px solid #fff;
    max-width: 273px;
    margin: 0 auto 0;
}

#countdown.countdown-urgent {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
    animation: urgentPulse 1s ease-in-out infinite;
}

#countdown.drawing-now {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    animation: drawingNow 0.5s ease-in-out infinite alternate;
}

/* =================== DATE DISPLAY =================== */
.current-date {
    padding: 25px 0 10px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
}

/* =================== RESULT TABLE CONTAINER =================== */


/* =================== SITE CONTENT (SEO ARTICLE) =================== */
.site-content {
    font-family: 'Archivo', sans-serif;
    margin: 0 auto;
    /* padding: 2.5rem 1.25rem 3rem; */
    color: var(--text-primary);
    line-height: 1.75;
}

/* ---- Global Breadcrumb ---- */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
    margin: 1.5rem 0;
    flex-wrap: wrap;
}
.breadcrumb a { color: #ec2c31; text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; color: #b91c1c; }
.breadcrumb span { opacity: 0.5; }

/* ---- H1 inside article ---- */
.site-content h1.heading--title {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.35;
    color: #111827;
    margin-bottom: 1rem;
    padding: 0 0 0.75rem;
    border-bottom: 3px solid var(--primary-color);
}

/* ---- H2 section headings ---- */
.site-content h2.heading--title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-top: 2.25rem;
    margin-bottom: 0.75rem;
    padding-left: 0.75rem;
    border-left: 4px solid var(--secondary-color);
    line-height: 1.4;
}

/* ---- H3 sub-headings (rules + FAQ questions) ---- */
.site-content h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #374151;
    margin-top: 1.5rem;
    margin-bottom: 0.4rem;
    padding: 0.45rem 0.75rem;
    background: rgba(255, 225, 102, 0.22);
    border-radius: 6px;
    border-left: 3px solid var(--primary-dark);
}

/* ---- Paragraphs ---- */
.site-content p {
    font-size: 0.975rem;
    color: #374151;
    margin-bottom: 1rem;
    line-height: 1.8;
}

/* First intro paragraph — slightly larger */
.site-content > p:first-of-type {
    font-size: 1.02rem;
    color: #1f2937;
}

/* ---- Unordered lists ---- */
.site-content ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.site-content ul li {
    position: relative;
    padding: 0.45rem 0.75rem 0.45rem 2rem;
    font-size: 0.95rem;
    color: #374151;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    line-height: 1.65;
    transition: background 0.2s ease;
}

.site-content ul li::before {
    content: "▸";
    position: absolute;
    left: 0.65rem;
    /* top: 0.45rem; */
    color: var(--secondary-color);
    font-size: 0.85rem;
    line-height: 1.65;
}

.site-content ul li:hover {
    background: #fff7ed;
    border-color: var(--primary-dark);
}

/* ---- Strong / Bold highlights ---- */
.site-content strong {
    color: #111827;
    font-weight: 700;
}

/* ---- Links ---- */
.site-content a {
    color: #ec2c31;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    transition: color 0.2s ease;
}

.site-content a:hover {
    color: #b91c1c;
}

/* ---- Disclaimer block ---- */
.site-content > p:last-of-type {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
    color: #78350f;
    margin-top: 2rem;
}

/* ---- Mobile responsive ---- */
@media (max-width: 768px) {
    .site-content {
        padding: 1.5rem 1rem 2rem;
    }

    .site-content h1.heading--title {
        font-size: 1.3rem;
    }

    .site-content h2.heading--title {
        font-size: 1.1rem;
        margin-top: 1.75rem;
    }

    .site-content h3 {
        font-size: 0.975rem;
    }

    .site-content p {
        font-size: 0.925rem;
    }

    .site-content ul li {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .site-content h1.heading--title {
        font-size: 1.15rem;
    }

    .site-content h2.heading--title {
        font-size: 1rem;
    }
}

/* =================== TABLE STYLING =================== */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card-bg);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    overflow: hidden;
}

.table thead {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

.table thead th {
    padding: 1.25rem 1rem;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 1px;
    border: none;
    text-transform: uppercase;
}

.table tbody tr {
    transition: var(--transition);
}

.table tbody tr:hover {
    background: rgba(102, 126, 234, 0.1);
}

.btn-grid {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 1fr 1fr;
    padding: 0 1rem;
}

.radius-b-left {
    border-bottom-left-radius: 15px;
}

.radius-b-right {
    border-bottom-right-radius: 15px;
}

/* =================== NUMBER CELLS =================== */
.number-cell,
.bonus-cell {
    padding: .5rem 1rem;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    position: relative;
    cursor: pointer;
}

.number-cell {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
}

.bonus-cell {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #ffffff;
}

/* =================== CELL STATES =================== */
.number-cell:hover,
.bonus-cell:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 225, 102, 0.5);
    z-index: 10;
}

.number-highlight {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    animation: highlightPulse 2s ease-in-out infinite;
}

.bonus-highlight {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%) !important;
    animation: highlightPulse 2s ease-in-out infinite;
}

.time-locked {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #000000 !important;
    cursor: not-allowed;
}

.coming-soon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    animation: comingSoonFlash 1s ease-in-out infinite;
    font-size: 1.2rem;
}

.sunday-closed {
    background: linear-gradient(135deg, #434343 0%, #000000 100%) !important;
    color: #666 !important;
    cursor: not-allowed;
    opacity: 0.5;
}

.pending-result {
    background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%) !important;
    animation: pendingPulse 2s ease-in-out infinite;
}

.waiting-result {
    background: linear-gradient(135deg, #ec2c31 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
}
.waiting-dots {
    display: inline-block;
    width: 18px;
    text-align: left;
}
.waiting-dots::after {
    content: '';
    animation: waitingDotsAnim 3s infinite;
}
@keyframes waitingDotsAnim {
    0%, 24% { content: ''; }
    25%, 49% { content: '.'; }
    50%, 74% { content: '..'; }
    75%, 100% { content: '...'; }
}

.missed-result {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
    color: #000000 !important;
    font-size: 1.5rem;
}

.game-off-result {
    background: linear-gradient(135deg, #475569 0%, #1e293b 100%) !important;
    color: #ffffff !important;
}

/* =================== BUTTONS =================== */
.text-center {
    text-align: center;
}

.mt-3 {
    margin-top: 1.5rem;
}

.btn {
    font-family: 'Archivo', sans-serif;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    text-transform: uppercase;
    box-shadow: var(--shadow-md);
}

.refresh-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #1a1a2e;
}

.refresh-btn:hover {
    filter: brightness(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}


.refresh-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* =================== ANIMATIONS =================== */
@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

@keyframes urgentPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 8px 32px rgba(235, 51, 73, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 48px rgba(235, 51, 73, 0.5);
    }
}

@keyframes drawingNow {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.05);
    }
}

@keyframes highlightPulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(56, 239, 125, 0.5);
    }

    50% {
        box-shadow: 0 0 25px rgba(56, 239, 125, 0.8);
    }
}

@keyframes comingSoonPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes timeLockFlash {

    0%,
    100% {
        color: #ecf0f1;
        text-shadow: 0 0 5px rgba(236, 240, 241, 0.5);
    }

    50% {
        color: #3498db;
        text-shadow: 0 0 15px rgba(52, 152, 219, 0.8);
    }
}

@keyframes comingSoonFlash {

    0%,
    100% {
        color: #ffffff;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }

    50% {
        color: #f39c12;
        text-shadow: 0 0 20px rgba(243, 156, 18, 1);
    }
}

@keyframes pendingPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

/* =================== RESPONSIVE DESIGN =================== */
@media (max-width: 768px) {

    .nav-link::after {
        width: 100%;
    }

    .mobile-open .nav-link {
        display: block;
        padding: 0.45rem 0.5rem;
        color: var(--primary-color);
        font-size: .875rem;
    }

    .result-container {
        box-shadow: inset 0px -7px 20px 6px #00000052;
    }

    .site-header {
        gap: 2rem;
        padding: .5rem 1rem;
        min-height: 40px;
    }

    .current-date {
        font-size: 1rem;
        padding: 1rem 1.5rem;
    }

    #countdown {
        font-size: 1.2rem;
    }

    .table thead th {
        padding: 0.75rem 0.5rem;
        font-size: 0.9rem;
    }

    .number-cell,
    .bonus-cell {
        padding: 1rem 0.5rem;
        font-size: 1.25rem;
    }

    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .current-date {
        font-size: 0.9rem;
        padding: 0.50rem 1rem;
    }

    #countdown {
        font-size: 1rem;
    }

    .table thead th {
        padding: 0.5rem 0.25rem;
        font-size: 0.8rem;
    }

    .number-cell,
    .bonus-cell {
        padding: 0.5rem 0.25rem;
        font-size: .785rem;
    }

    .btn {
        padding: .7rem 0;
        font-size: 0.85rem;
        margin: 0;
    }
}

/* =================== UTILITY CLASSES =================== */
.mb-0 {
    margin-bottom: 0;
}

.mb-4 {
    margin-bottom: 2rem;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* =================== FOOTER =================== */
.site-footer {
    background: #1a1a2e;
    color: #94a3b8;
    margin-top: 0;
    font-family: 'Archivo', sans-serif;
    position: relative;
}

/* Wave SVG on top of footer */
.footer-wave {
    line-height: 0;
    overflow: hidden;
    background: var(--bg-color);
    /* matches page bg so wave blends */
}

.footer-wave svg {
    display: block;
    width: 100%;
    height: 60px;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 0;
}

/* ---- Top Grid ---- */
.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- Brand Column ---- */
.footer-brand .footer-logo img {
    height: 60px;
    max-width: 220px;
    object-fit: contain;
    filter: brightness(1.1);
    margin-bottom: 0.75rem;
    display: block;
}

.footer-tagline {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 1.25rem;
}

/* ---- Social Icons ---- */
.footer-socials {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease,
        border-color 0.25s ease;
}

.social-icon svg {
    width: 17px;
    height: 17px;
}

.social-icon:hover {
    background: var(--primary-color);
    color: #1a1a2e;
    border-color: var(--primary-color);
    transform: translateY(-3px);
}

/* ---- Column Heading ---- */
.footer-heading {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary-color);
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 2px;
    background: var(--primary-color);
    border-radius: 2px;
}

/* ---- Footer Links ---- */
.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-links a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.footer-links a::before {
    content: '\203A';
    color: var(--primary-color);
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.footer-links a:hover {
    color: #fff;
    padding-left: 4px;
}

.footer-links a:hover::before {
    transform: translateX(2px);
}

/* ---- Contact List ---- */
.footer-contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.875rem;
    color: #94a3b8;
}

.contact-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--primary-color);
    margin-top: 1px;
}

.contact-icon svg {
    width: 100%;
    height: 100%;
}

.footer-contact-list a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact-list a:hover {
    color: var(--primary-color);
}

/* ---- Disclaimer ---- */
.footer-disclaimer {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: rgba(220, 38, 38, 0.08);
    border-left: 3px solid var(--secondary-color);
    border-radius: 0 8px 8px 0;
    font-size: 0.8rem;
    line-height: 1.6;
    color: #94a3b8;
}

.footer-disclaimer strong {
    color: #f87171;
}

/* ---- Bottom Bar ---- */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
    gap: 0.75rem;
}

.footer-copy {
    font-size: 0.8rem;
    color: #64748b;
}

.footer-bottom-links {
    display: flex;
    gap: 1.25rem;
}

.footer-bottom-links a {
    font-size: 0.8rem;
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-bottom-links a:hover {
    color: var(--primary-color);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer-brand {
        grid-column: 1 / -1;
        /* Full width on tablet */
    }
}

@media (max-width: 520px) {
    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* =================== DARK MODE =================== */
body.dark-mode {
    --bg-color: #050505;
    --card-bg: #111111;
    --text-primary: #f0f0f0;
    --text-secondary: #a0a0a0;
    --border-color: #050505;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.8);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.9);
    background: var(--bg-color);
    color: var(--text-primary);
    transition: background 0.3s ease, color 0.3s ease;
}
body.dark-mode .site-content { color: var(--text-primary); }
body.dark-mode .site-content p { color: #cccce0; }
body.dark-mode .site-content h1.heading--title { color: #f0f0ff; border-color: var(--primary-color); }
body.dark-mode .site-content h2.heading--title { color: #e0e0ef; }
body.dark-mode .site-content h3 { color: #d0d0e8; background: rgba(255,225,102,0.08); }
body.dark-mode .site-content ul li { background: #1e1e35; border-color: #2e2e50; color: #cccce0; }
body.dark-mode .site-content ul li:hover { background: #252545; }
body.dark-mode .site-content strong { color: #f0f0ff; }
body.dark-mode .table { background: #111111; }
body.dark-mode .table tbody tr:hover { background: rgba(255,255,255,0.05); }
body.dark-mode .footer-disclaimer p { color: #cbd5e1; }
body.dark-mode .site-content > p:last-of-type { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35); color: #e2c97e; }
body.dark-mode .site-header { background: #111111; border-bottom-color: #333; }
body.dark-mode .nav-link { color: var(--primary-color); }
body.dark-mode .hamburger { border-color: rgba(255,225,102,0.3); }
body.dark-mode .bar { background: var(--primary-color); }
body.dark-mode #countdown { background: #111111; color: var(--primary-color); border-bottom-color: #050505; }
body.dark-mode .result-top-bar .current-date { color: var(--text-primary); }
body.dark-mode .filter-section { background: #111111; }
body.dark-mode .whatsapp-channel-banner { background: #0a1f0a; border-color: #25d366; }
/* About-hero dark mode — keep gradient red & text white */
body.dark-mode .about-hero { background: linear-gradient(135deg, #ec2c31 0%, #b91c1c 100%) !important; }
body.dark-mode .about-hero,
body.dark-mode .about-hero h1,
body.dark-mode .about-hero p { color: #ffffff !important; }
/* Nav-link dark mode hover */
body.dark-mode .nav-link:hover { color: var(--primary-color); }

body.dark-mode .table thead { background: #1a1a1a; }
body.dark-mode .table thead th { color: #f8da5f; border-bottom: 2px solid #050505; }
body.dark-mode .refresh-btn { background: #1a1a1a; color: #f8da5f; }
body.dark-mode .refresh-btn:hover { background: #222; }
body.dark-mode .btn-separator { background: #333; }

body.dark-mode .number-highlight { background: linear-gradient(135deg, #047857 0%, #064e3b 100%) !important; }
body.dark-mode .bonus-highlight { background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%) !important; }
body.dark-mode .coming-soon { background: linear-gradient(135deg, #b45309 0%, #78350f 100%) !important; color: #fff !important; }
body.dark-mode .time-locked { background: linear-gradient(135deg, #854d0e 0%, #713f12 100%); color: #fef08a !important; }
body.dark-mode .missed-result { background: linear-gradient(135deg, #854d0e 0%, #713f12 100%) !important; color: #fef08a !important; }
body.dark-mode .waiting-result { background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%) !important; color: #ffffff !important; }

body.dark-mode .number-ticker { background: linear-gradient(135deg, #047857 0%, #064e3b 100%) !important; box-shadow: none; }
body.dark-mode .number-ticker .digit:last-child { background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%) !important; border-left-color: #050505; }
body.dark-mode .ticker-result-glow { background: linear-gradient(135deg, #059669 0%, #047857 100%) !important; }

/* Disable all glow effects in Dark Mode per user request */
body.dark-mode .number-highlight,
body.dark-mode .bonus-highlight,
body.dark-mode .coming-soon,
body.dark-mode .pending-result,
body.dark-mode #countdown.countdown-urgent,
body.dark-mode #countdown.drawing-now,
body.dark-mode .number-cell:hover,
body.dark-mode .bonus-cell:hover,
body.dark-mode .ticker-result-glow,
body.dark-mode .digit {
    animation: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Explicitly disable transforms ONLY for hover effects so ticker scroll doesn't break */
body.dark-mode .number-cell:hover,
body.dark-mode .bonus-cell:hover {
    transform: none !important;
}

/* =================== FLOATING DARK MODE BUTTON =================== */
.dark-mode-floating-btn {
    position: fixed;
    bottom: 100px;
    right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: #1a1a2e;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    font-size: 32px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    z-index: 9999;
}
.dark-mode-floating-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}
body.dark-mode .dark-mode-floating-btn {
    background: #f8da5f;
    box-shadow: 0 4px 15px rgba(248, 218, 95, 0.4);
}

.dark-mode-floating-btn .bx-moon { display: none; }
.dark-mode-floating-btn .bx-sun { display: block; color: #fff; }
body.dark-mode .dark-mode-floating-btn .bx-moon { display: block;}
body.dark-mode .dark-mode-floating-btn .bx-sun { display: none; }

@media (max-width: 768px) {
    .dark-mode-floating-btn {
        bottom: 80px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 28px;
    }
}

/* =================== WHATSAPP BANNER =================== */
.whatsapp-header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 8px rgba(37,211,102,0.4);
}
.whatsapp-header-btn:hover { transform: scale(1.12); box-shadow: 0 4px 16px rgba(37,211,102,0.6); }

/* =================== RESULT TOP BAR =================== */
.result-top-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0rem 10px;
}
.result-top-bar .current-date {
    padding: 0;
    text-align: center;
    font-size: 1.1rem;
}

/* =================== LIVE DOT =================== */
.last-updated {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    background: #ec2c31;
    padding: 12px 20px;
    border-radius: 20px;
    border: 1px solid #ec2c31;
    line-height: 0;
}
.live-dot {
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
    display: inline-block;
}
@keyframes livePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

/* =================== SCREENSHOT BRAND WATERMARK =================== */
.screenshot-brand {
    display: none; /* visible only during screenshot capture */
    text-align: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: rgba(0,0,0,0.25);
    letter-spacing: 2px;
    padding: 4px 0 2px;
    text-transform: uppercase;
}
.screenshot-date {
    display: none; /* hidden on page, shown in screenshot */
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a1a1a;
    padding: 4px 0 6px;
    letter-spacing: 0.5px;
}

/* =================== BAAZI ROW (time labels sub-row) removed =================== */

/* =================== BTN-GRID & BUTTONS =================== */
.btn-grid {
    display: flex;
    justify-content: stretch;
    padding: 0;
    width: 100%;
}
.btn-grid .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.95rem;
}
.custom-spinner {
    width: 18px;
    height: 18px;
    border: 3px solid #10b981; /* theme green */
    border-top: 3px solid #ec2c31; /* theme red */
    border-radius: 50%;
    animation: customSpin 0.8s linear infinite;
    display: inline-block;
}
.f-btn { padding: 1.2rem 1.5rem;border-radius: 8px;font-weight: 600;border: none;cursor: pointer;width: 100%;display: flex;align-items: center;justify-content: center;gap: 6px;font-size: 1rem;transition: transform 0.2s, background 0.2s;box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1)); }
body.dark-mode .custom-spinner {
    border: 3px solid #10b981;
    border-top: 3px solid #ec2c31;
}
@keyframes customSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.btn-separator {
    width: 1px;
    background: rgba(0,0,0,0.1);
}
body.dark-mode .btn-separator { background: #2e2e50; }

#screenshotBtn {
    border-radius: 0; /* Remove rounded corners for middle button */
}

@media (max-width: 480px) {
    .btn-grid .btn span { display: none; }
    .btn-grid .btn i { font-size: 1.6rem; }
}
.share-screenshot-btn:active { transform: scale(0.98); }

/* =================== SHARE POPUP =================== */
.share-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    backdrop-filter: blur(4px);
}
.share-overlay.active { display: block; }

.share-popup {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2001;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.share-popup.active {
    display: block;
    transform: translateY(0);
}
.share-popup-inner {
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    padding: 2rem 1.5rem 5rem;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}
body.dark-mode .share-popup-inner { background: #1a1a2e; color: #e8e8f0; }

.share-popup-inner h3 {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: #111827;
}
body.dark-mode .share-popup-inner h3 { color: #f8da5f; }
body.dark-mode .share-popup-inner { background: #050505; border: 1px solid #222; border-bottom: none; }

.share-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}
@media (max-width: 400px) { .share-options { grid-template-columns: repeat(2, 1fr); } }

.share-opt-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Archivo', sans-serif;
}

.share-opt-btn:hover { 
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.share-opt-btn.whatsapp  { background: #f0fff4; color: #128c4e; border-color: #dcfce7; }
.share-opt-btn.whatsapp i { font-size: 1.75rem; }

.share-opt-btn.telegram  { background: #f0f9ff; color: #0088cc; border-color: #e0f2fe; }
.share-opt-btn.telegram i { font-size: 1.75rem; }

.share-opt-btn.download  { background: #fffbeb; color: #92400e; border-color: #fef3c7; }
.share-opt-btn.download i { font-size: 1.75rem; }

.share-opt-btn.copy-link { background: #f9fafb; color: #4b5563; border-color: #f3f4f6; }
.share-opt-btn.copy-link i { font-size: 1.75rem; }

/* Dark Mode Share Buttons */
body.dark-mode .share-opt-btn { background: #111; border-color: #222; color: #ccc; }
body.dark-mode .share-opt-btn.whatsapp { color: #25d366; }
body.dark-mode .share-opt-btn.telegram { color: #0088cc; }
body.dark-mode .share-opt-btn.download { color: #f8da5f; }
body.dark-mode .share-opt-btn.copy-link { color: #9ca3af; }
body.dark-mode .share-opt-btn:hover { background: #1a1a1a; border-color: #333; }

/* =================== SHARE POPUP CLOSE BUTTON =================== */
.share-close-btn {
    display: block;
    width: 100%;
    padding: 0.85rem;
    background: #f3f4f6;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    color: #374151;
    font-family: 'Archivo', sans-serif;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

.share-close-btn:hover {
    background: #e5e7eb;
}

body.dark-mode .share-close-btn {
    background: #222;
    color: #eee;
}

body.dark-mode .share-close-btn:hover {
    background: #333;
}

/* =================== COUNTDOWN FLASH ANIMATION =================== */
@keyframes countdownFlash {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.02); filter: brightness(1.2); }
}

.live-panel-wrapper.flash-glow {
    animation: countdownFlash 1s ease-in-out infinite;
    border-radius: 15px;
    overflow: hidden;
}

#countdown.flash-glow {
    background: linear-gradient(135deg, #f1d459 0%, #facc15 100%);
    border-bottom: 2px solid #fff;
    border-radius: 15px 15px 0 0;
}


body.dark-mode #countdown.flash-glow {
    background: linear-gradient(135deg, #f8da5f 0%, #eab308 100%);
    color: #000 !important;
}

/* Ensure ticker also looks like it's part of the pulsing panel */
.live-panel-wrapper.flash-glow .number-ticker {
    border-top: none;
    border-radius: 0 0 15px 15px;
}

/* =================== CHART CONTAINER =================== */
.chart-container-wrapper {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    padding: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
    display: none; /* Shown via JS if data exists */
    transition: opacity 0.3s ease;
}

/* =================== TICKER BAZI INFO BOX =================== */
.ticker-bazi-info {
    display: none;
    background: #ec2c31;
    color: #ffffff;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 800;
    margin: 8px auto 0;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(236, 44, 49, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ticker-bazi-info.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

body.dark-mode .ticker-bazi-info {
    background: #ec2c31;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(236, 44, 49, 0.4);
    color: #ffffff;
}

@media (max-width: 480px) {
    .ticker-bazi-info {
        font-size: 0.75rem;
        padding: 4px 12px;
    }
}


/* =================== WHATSAPP CHANNEL BANNER (Footer) =================== */
.whatsapp-channel-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #e8fef0;
    color: #128c4e;
    border: 1px solid #25d366;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    margin-top: 0.75rem;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.25s ease;
}
.whatsapp-channel-banner:hover { background: #25d366; color: #fff; transform: translateY(-1px); }

/* =================== MOBILE OVERLAY (fixed) =================== */
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mobile-overlay.active { display: block; opacity: 1; }

/* =================== NAV LINK ACTIVE =================== */
.nav-link.active {
    color: #ec2c31 !important;
}
.nav-link.active::after { transform: translateX(-50%) scaleX(1) !important; }

/* =================== PWA INSTALL BANNER =================== */
#pwaInstallBanner {
    display: none;
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 340px;
    width: calc(100% - 2rem);
    animation: slideUp 0.4s ease;
    border: 1px solid rgba(255,225,102,0.3);
}
#pwaInstallBanner.hidden { display: none !important; }

@keyframes slideUp {
    from { transform: translateX(-50%) translateY(100px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.pwa-install-text { flex: 1; font-size: 0.875rem; line-height: 1.4; }
.pwa-install-text strong { display: block; font-size: 0.95rem; color: var(--primary-color); }

.pwa-install-btn {
    background: var(--primary-color);
    color: #111;
    border: none;
    border-radius: 8px;
    padding: 0.45rem 0.9rem;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Archivo', sans-serif;
}
.pwa-install-dismiss {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
    line-height: 1;
}

/* =================== CONFETTI TOAST =================== */
.result-toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    padding: 0.65rem 1.5rem;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 8px 24px rgba(16,185,129,0.4);
    z-index: 3000;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
    white-space: nowrap;
}
.result-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* =================== COPY LINK TOAST =================== */
.copy-toast {
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    padding: 0.5rem 1.25rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    z-index: 3000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.copy-toast.show { opacity: 1; }

/* =================== SCREENSHOT LOADING STATE =================== */
#screenshotBtn.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* =================== @media fixes for header controls =================== */
@media (max-width: 768px) {
    .result-top-bar {
    flex-direction: column;
    row-gap: 1rem;
    }
    
    #old-result .result-table {
        padding: 0;
    }

    .result-table {
        padding: 0 .5rem;
    }
    /* Removed specific #old-result padding to restore side spacing */
    .header-controls {
        margin-right: 0.25rem;
    }
    .share-options {
        grid-template-columns: repeat(2, 1fr);
    }
    .btn-grid {
        grid-template-columns: 1fr auto 1fr;
        padding: 0 0.5rem;
    }
    .share-screenshot-btn {
        padding: 0.85rem 0.6rem;
        font-size: 0.8rem;
    }
    .main-nav {
    justify-content: start;
}
}
/* =================== GLOBAL SCRATCH OVERLAY =================== */
.global-scratch-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 1);
    z-index: 1;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    font-family: 'Archivo', sans-serif;
}

.global-scratch-overlay.active {
    opacity: 1;
}

.ticket-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 77%;
    max-width: 272px;
}

.scratch-card-ticket {
    width: 100%;
    background: #fff;
    padding: 30px 20px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    border-radius: 4px;
}

/* Zig Zag Edges */
.scratch-card-ticket::before, .scratch-card-ticket::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 12px;
    background-size: 24px 24px;
    z-index: 2;
}

.scratch-card-ticket::before {
    top: -12px;
    background-image: radial-gradient(circle at 12px -6px, transparent 14px, #fff 15px);
}

.scratch-card-ticket::after {
    bottom: -12px;
    background-image: radial-gradient(circle at 12px 18px, transparent 14px, #fff 15px);
}

.close-scratch {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #64748b;
    cursor: pointer;
    z-index: 10;
    padding: 5px;
    line-height: 1;
}

.ticket-header {
    text-align: center;
    margin-bottom: 20px;
}

.gs-brand {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: 1px;
}

.gs-tagline {
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 1.5px;
}

.scratch-area-container {
    position: relative;
    width: 100%;
    height: 130px;
    background: #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    padding: 3px;
}

/* Animated Border Effect */
.scratch-area-container::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, transparent 0 25%, #ef4444 25% 50%, transparent 50% 75%, #ef4444 75% 100%);
    animation: rotateBorder 3s linear infinite;
    z-index: 0;
    transition: opacity 0.5s ease;
    filter: blur(2px) drop-shadow(0 0 8px #ef4444);
}

.global-scratch-overlay.revealed .scratch-area-container::before {
    opacity: 0;
}

@keyframes rotateBorder {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.scratch-reveal-content, #gsCanvas {
    position: absolute;
    inset: 3px;
    border-radius: 10px;
    width: calc(100% - 6px) !important;
    height: calc(100% - 6px) !important;
}

.scratch-reveal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 1;
}

.gs-bazi {
    font-size: 0.9rem;
    font-weight: 800;
    color: #ef4444;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.gs-numbers-reveal {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reveal-item {
    text-align: center;
}

.reveal-item span {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    color: #64748b;
    margin-bottom: 2px;
}

.reveal-item div {
    font-size: 2.8rem;
    font-weight: 900;
    color: #1e293b;
    line-height: 1;
}

.reveal-divider {
    width: 10px;
    height: 4px;
    background: #ef4444;
}

#gsCanvas {
    z-index: 5;
    cursor: crosshair;
    touch-action: none;
    transition: opacity 0.5s ease;
}

.global-scratch-overlay.revealed #gsCanvas {
    opacity: 0;
    pointer-events: none;
}

.gs-action-btn {
    width: 100%;
    padding: 15px;
    background: #ef4444; /* Initial Red */
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
    transition: all 0.4s ease;
    font-family: 'Archivo', sans-serif;
}

.global-scratch-overlay.revealed .gs-action-btn {
    background: #25d366; /* Final Green */
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}

.gs-action-btn:active {
    transform: scale(0.95);
}


/* =================== MOBILE BOTTOM NAVIGATION =================== */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    z-index: 9999;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

body.dark-mode .mobile-bottom-nav {
    background: rgba(15, 23, 42, 0.9);
    border-top-color: rgba(255, 255, 255, 0.1);
}

.mobile-bottom-nav .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    gap: 4px;
}

body.dark-mode .mobile-bottom-nav .nav-item .nav-icon{
    color: var(--primary-color);
}

.mobile-bottom-nav .nav-item .nav-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.mobile-bottom-nav .nav-item span {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.mobile-bottom-nav .nav-item:hover,
.mobile-bottom-nav .nav-item:active {
    color: var(--secondary-color);
}

.center-item {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-nav-btn {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ec2c31 0%, #b91c1c 100%);
    border-radius: 50%;
    border: 5px solid var(--card-bg);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    cursor: pointer;
    transform: translateY(-20px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 0;
}

body.dark-mode .center-nav-btn {
    border-color: #0f172a;
}

.center-nav-btn:active {
    transform: translateY(-22px) scale(0.9);
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }
    
    /* Hide original floating buttons on mobile since they are now in the nav bar */
    .dark-mode-floating-btn,
    .whatsapp-floating-btn {
        display: none !important;
    }
    
    /* Prevent page content from being hidden behind the sticky nav */
    body {
        padding-bottom: 50px !important;
    }

    /* Icon switching logic for mobile nav dark mode */
    .darkModeBtn .bx-sun { display: none; }
    .darkModeBtn .bx-moon { display: block; }
    body.dark-mode .darkModeBtn .bx-sun { display: block; }
    body.dark-mode .darkModeBtn .bx-moon { display: none; }
}