/* Custom Styles for Lotto System */
:root {
    --lotto-green: #00796b;
    --lotto-dark-green: #004d40;
    --lotto-yellow: #fff176;
    --lotto-text-dark: #000000;
    /* Pure Black for Senior contrast */

    /* Dynamic Scaling System */
    --base-scale: 1.15;
    --font-size-base: calc(16px * var(--base-scale));
    --spacing-base: calc(0.5rem * var(--base-scale));
}

html {
    font-size: var(--font-size-base);
}

body {
    background-color: #f4f6f9;
    font-family: 'Sarabun', sans-serif;
    /* font-size inherited from html */
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700 !important;
    color: #111;
}

/* Facebook-like Responsive Width */
@media (max-width: 767.98px) {

    /* Mobile: Use full width with standard Bootstrap container padding */
    .container-custom {
        max-width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

@media (min-width: 768px) {

    /* iPad/PC: Fixed width centered ~960px */
    .container-custom {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }
}

.bg-lotto-primary {
    background-color: var(--lotto-green);
    color: white;
}

.bg-lotto-secondary {
    background-color: var(--lotto-dark-green);
    color: white;
}

.bg-lotto-announcement {
    background-color: var(--lotto-yellow);
    color: var(--lotto-text-dark);
}

.nav-link-custom {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    padding: 0.5rem 0.5rem;
    font-size: 0.88rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.nav-link-custom i {
    font-size: 1.1rem;
}

.nav-link-custom:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.nav-desktop {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    /* Firefox */
}

.nav-desktop::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.header-icon {
    font-size: 1.2rem;
}

.balance-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 2px 10px;
}

.breadcrumb-custom {
    background-color: #e9ecef;
    padding: 0.5rem 1rem;
    margin-bottom: 0;
}

/* Level Badges Premium Styles */
.badge-level {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
}

.badge-vip {
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 50%, #FFD700 100%);
    background-size: 200% 200%;
    color: #3e2723;
    border: 1px solid #fff5c2;
    animation: shine 3s infinite linear;
}

.badge-gold {
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%);
    color: #4e342e;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.badge-silver {
    background: linear-gradient(135deg, #E0E0E0 0%, #B0B0B0 100%);
    color: #212121;
    border: 1px solid rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.badge-bronze {
    background: linear-gradient(135deg, #d7a57a 0%, #a67c52 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes shine {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* =========================================
   Senior Friendly Utility Classes
   ========================================= */

/* Large Touch Targets */
.btn-senior {
    padding: calc(12px * var(--base-scale)) calc(24px * var(--base-scale));
    font-size: 1.2rem;
    font-weight: bold;
    min-height: calc(54px * var(--base-scale));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.form-control-senior {
    height: calc(54px * var(--base-scale)) !important;
    font-size: 1.4rem !important;
    font-weight: bold;
    color: #000 !important;
    border: 2px solid #ccc;
}

.form-control-senior:focus {
    border-color: var(--lotto-green);
    background-color: #fffde7;
    /* Light yellow highlight on focus */
    box-shadow: 0 0 0 4px rgba(0, 121, 107, 0.25);
}

/* Huge Text for Amounts/Numbers */
.text-huge {
    font-size: 2rem !important;
    font-weight: 800;
}

/* High Contrast Helpers */
.text-contrast {
    color: #000 !important;
}

.bg-contrast-light {
    background-color: #fff !important;
    border: 1px solid #ddd;
}

/* Sticky Footer for Mobile */
@media (max-width: 767.98px) {
    .sticky-bottom-senior {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        padding: 1rem;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1050;
        border-top: 2px solid var(--lotto-green);
    }

    /* Spacer to prevent content overlap */
    .sticky-bottom-spacer {
        height: 120px;
    }
}

/* Header Senior-Friendly Styles */
.header-logo-mobile {
    width: 40px;
    height: 40px;
    font-weight: bold;
    font-size: 1.2rem;
}

.header-logo-desktop {
    width: 45px;
    height: 45px;
    font-weight: bold;
    font-size: 1.4rem;
}

.balance-box-large {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.font-scaler-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #333 !important;
}