/* =====================================================================
   Teen Patti Master — Redesign Foundation
   Design system modeled on teenpaticraze.in (deep-maroon theme, gradient
   pill buttons, white sticky download bar, white footer).
   Loaded AFTER the legacy CSS so it supersedes shared shell styling while
   per-page sections are migrated step by step. Branded "Teen Patti Master".
   ===================================================================== */

:root {
    --tpm-bg: #410028;          /* primary deep-maroon background      */
    --tpm-bg-deep: #2c001b;     /* darker maroon for contrast bands    */
    --tpm-surface: rgba(255, 255, 255, 0.06);
    --tpm-border: rgba(255, 255, 255, 0.12);
    --tpm-text: #ffffff;
    --tpm-text-muted: #e6d6df;
    --tpm-gold: #f39c12;        /* primary CTA orange/gold             */
    --tpm-gold-hi: #ffb300;
    --tpm-yellow: #ffc107;      /* sticky-bar button                   */
    --tpm-accent: #e85dfe;      /* magenta accent (gradients)          */
    --tpm-radius: 16px;
    --tpm-font: "Poppins", Verdana, Geneva, Tahoma, sans-serif;
    --tpm-sticky-h: 76px;
}

/* ---------- Base / typography ---------- */
body {
    background: var(--tpm-bg) !important;
    color: var(--tpm-text);
    font-family: var(--tpm-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { color: var(--tpm-text); font-weight: 700; }
h1 { font-size: clamp(1.7rem, 4.2vw, 2.6rem); line-height: 1.2; }
h2 { font-size: clamp(1.4rem, 3.2vw, 2.1rem); }
a { color: inherit; }
img { max-width: 100%; height: auto; }

/* Section title helper (mirrors reference centred headings) */
.sec_Title h2,
.tpm-sec-title { text-align: center; position: relative; }

/* ---------- Navbar (used in step 2 header) ---------- */
.navbar-section { background: var(--tpm-bg-deep); }
.bg-custom { background: var(--tpm-bg-deep) !important; }
.navbar-section .nav-link { color: #fff !important; font-weight: 600; }
.navbar-section .nav-link:hover,
.navbar-section .nav-link.active { color: var(--tpm-gold) !important; }
.navbar-brand img { max-height: 52px; width: auto; }

/* ---------- Buttons (gradient pills, reference style) ---------- */
.tpm-btn,
.download-btn {
    display: inline-block;
    background: var(--tpm-gold) !important;
    color: #fff !important;
    font-weight: 700;
    padding: 14px 34px;
    border: 2px solid #fff;
    border-radius: 100px;
    text-decoration: none;
    text-align: center;
    transition: transform .15s ease, background .2s ease;
}
.tpm-btn:hover,
.download-btn:hover { background: var(--tpm-gold-hi) !important; color: #fff !important; transform: translateY(-2px); }

.download-btn--pulse { animation: tpm-pulse 1.2s infinite; }

.custom-btn {
    border-radius: 8px;
    background: linear-gradient(113deg, #1955ab 0%, #5a95de 99.93%);
    color: #fff; border: none; padding: 10px 18px; font-weight: 700;
}
.custom-btn-two { background: linear-gradient(113deg, #e85dfe 0%, #820ead 99.93%); }
.custom-btn-four { background: linear-gradient(113deg, #f6b439 0%, #c69633 99.93%); }

@keyframes tpm-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(243, 156, 18, .55); }
    70%  { box-shadow: 0 0 0 16px rgba(243, 156, 18, 0); }
    100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); }
}

/* ---------- Generic surface / card helpers ---------- */
.tpm-card {
    background: var(--tpm-surface);
    border: 1px solid var(--tpm-border);
    border-radius: var(--tpm-radius);
    padding: 28px;
}

/* ---------- Footer (used in step 2) ---------- */
.footer-section { background-color: #fff; color: #1a1a1a; }
.footer-section .policy-link p { color: #1a1a1a; }

/* =====================================================================
   Sticky mobile download CTA bar  (mobile only — matches reference)
   ===================================================================== */
.sticky-cta-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
    background: #ffffff;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .12);
    padding: 8px 12px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.sticky-cta-content { display: flex; align-items: center; gap: 10px; max-width: 100%; }
.sticky-cta-icon { flex: 0 0 auto; }
.sticky-cta-icon img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; display: block; }
.sticky-cta-text { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.sticky-cta-title { font-size: 14px; font-weight: 700; color: #111; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta-meta { font-size: 12px; color: #555; line-height: 1.3; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta-btn {
    flex: 0 0 auto;
    background: var(--tpm-yellow);
    color: #111 !important;
    font-weight: 800;
    font-size: 15px;
    padding: 14px 24px;
    border-radius: 999px;
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-block;
    transition: background .2s;
}
.sticky-cta-btn:hover,
.sticky-cta-btn:focus { background: var(--tpm-gold-hi); color: #111 !important; }

/* Reserve space so the fixed bar never covers page content (mobile only) */
@media (max-width: 767.98px) {
    body { padding-bottom: var(--tpm-sticky-h); }
}

/* =====================================================================
   GAME PAGES + shared legacy components (Phase 7A restyle)
   Re-themes the existing class names used across the 35 game pages
   (and shared by home/about) from the old purple theme to maroon/gold.
   Loaded after legacy CSS so these win. No markup changes required.
   ===================================================================== */

/* Gold pill buttons (replace old purple #510093 + rainbow-glow buttons) */
.button-85,
.Download_Button {
    background: var(--tpm-gold) !important;
    color: #fff !important;
    font-weight: 700;
    border: 2px solid #fff !important;
    border-radius: 100px !important;
    padding: 12px 32px !important;
    font-size: 1rem !important;
    display: inline-block;
    text-decoration: none;
    animation: tpm-pulse 1.4s infinite !important;
    transition: background .2s ease;
}
.button-85:hover,
.Download_Button:hover { background: var(--tpm-gold-hi) !important; color: #fff !important; }
/* Neutralise the old rainbow glow pseudo-elements */
.button-85::before, .button-85::after,
.Download_Button::before, .Download_Button::after { display: none !important; content: none !important; }

/* Card surfaces (about_box / custome_card) re-themed to maroon/gold */
.about_box,
.custome_card {
    background: var(--tpm-surface) !important;
    border: 1px solid var(--tpm-border) !important;
    border-radius: var(--tpm-radius) !important;
}
.about_box h2, .about_box h3, .custome_card h2, .custome_card h3 { color: #fff; }
.about_box p, .custome_card p { color: var(--tpm-text-muted); }

/* Game banner: keep the background image but darken for legible white text */
.Main_Banner { position: relative; }
.Main_Banner::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(44,0,27,.55), rgba(44,0,27,.78));
    z-index: 0;
}
.Main_Banner > .container { position: relative; z-index: 1; }
.Main_Banner h1 { color: #fff; }

/* Section heading / muted text harmonised with the maroon theme */
.Why_Choose_Us h3, .Related_Games p { color: #fff; }
.Why_Choose_Us p { color: var(--tpm-text-muted); }
.text-white-50 { color: var(--tpm-text-muted) !important; }

/* FAQ accordion theming for game pages (mirrors home) */
.FAQ_Sec .accordion-item {
    background: var(--tpm-surface);
    border: 1px solid var(--tpm-border);
    border-radius: var(--tpm-radius) !important;
    overflow: hidden;
}
.FAQ_Sec .accordion-header { margin: 0; }
.FAQ_Sec .accordion-button { background: transparent; color: #fff; font-weight: 600; }
.FAQ_Sec .accordion-button:not(.collapsed) { color: var(--tpm-gold); background: rgba(255,255,255,.04); box-shadow: none; }
.FAQ_Sec .accordion-button:focus { box-shadow: none; }
.FAQ_Sec .accordion-body { color: var(--tpm-text-muted); }

/* Related games thumbnails */
.Related_Games img { transition: transform .15s ease; }
.Related_Games a:hover img { transform: translateY(-4px); }

/* =====================================================================
   POPULAR GAMES grid (Step 8) — restyle the shared game.blade.php include
   to maroon/gold cards. Styling only; links and images are untouched.
   ===================================================================== */
.Popular_Games .row > a { text-decoration: none; }
.Popular_Games .row > a > div {
    background: var(--tpm-surface);
    border: 1px solid var(--tpm-border);
    border-radius: 14px;
    padding: 10px;
    height: 100%;
    transition: transform .15s ease, border-color .2s ease;
}
.Popular_Games .row > a:hover > div { transform: translateY(-4px); border-color: var(--tpm-gold); }
.Popular_Games .row > a img { border-radius: 10px; }
.Popular_Games .row > a p { color: #fff !important; font-weight: 600; margin-top: 8px !important; }