/* ============================================================
   PAPA777 — supplemental styles
   Covers the font variables, styled-component buttons, emotion
   theme blocks and ticker animation that the Tailwind build
   (papa777-tw.css) does not contain.
   ============================================================ */

:root {
    --font-inter: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-outfit: "Outfit", var(--font-inter);
    --font-acme: "Acme", var(--font-inter);
    --papa-red: #e42a27;
    --papa-red-dark: #b61916;
    --papa-gold: #ffb800;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after { box-sizing: inherit; }

body {
    margin: 0;
    color: #010103;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    font-family: var(--font-inter);
    background-color: #fff;
}

@media (max-width: 1199.95px) {
    body { font-size: 13px; }
}

strong, b { font-weight: 700; }

.acmefont  { font-family: var(--font-acme); }
.outfitfont { font-family: var(--font-outfit); }
.font-sans { font-family: var(--font-inter); }

/* ------------------------------------------------------------
   Header (was emotion .css-ogu1tn)
   ------------------------------------------------------------ */
.papa-header {
    background-color: #010103;
    color: #fff;
}
.papa-header .svgicons svg { fill: #fff; }
.papa-header .svgicons svg path { stroke: #fff; }

.desktopmenu a,
.desktopmenu .menu-trigger {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    text-transform: capitalize;
}

@media (max-width: 1279px) {
    .desktopmenu { display: none !important; }
}

/* Mobile drawer */
.mobilemenu-toggle { display: none; }
@media (max-width: 1279px) {
    .mobilemenu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: none;
        background: transparent;
        cursor: pointer;
    }
}
.mobilemenu {
    position: fixed;
    inset: 68px 0 0 0;
    background: #010103;
    padding: 20px;
    overflow-y: auto;
    z-index: 60;
    display: none;
}
.mobilemenu.open { display: block; }
.mobilemenu a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 14px 4px;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.08);
    font-size: 15px;
}
.mobilemenu a:hover { color: #ff7270; }

/* ------------------------------------------------------------
   Hero section (was emotion .css-yj70pn)
   ------------------------------------------------------------ */
.papa-hero {
    position: relative;
    background: radial-gradient(120% 120% at 50% 0%, #fffdfd 0%, #fff4f3 35%, #ffeaea 70%, #fff0ef 100%);
}

@keyframes gentleFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
@keyframes float-element-1 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-16px) rotate(6deg); }
}
@keyframes float-element-2 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-10px) rotate(-10deg); }
}
@keyframes float-element-3 {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-8px) scale(1.15); }
}
@keyframes glow-pulse {
    0%, 100% { opacity: .75; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.06); }
}

.floating-figure { animation: gentleFloat 6s ease-in-out infinite; }
.float-slow      { animation: float-element-1 9s ease-in-out infinite; }
.float-medium    { animation: float-element-2 7s ease-in-out infinite; }
.float-fast      { animation: float-element-3 4.5s ease-in-out infinite; }
.glow-pulse      { animation: glow-pulse 6s ease-in-out infinite; }

.word-spacing--15px { word-spacing: -15px; }
@media (max-width: 1023px) { .word-spacing--15px { word-spacing: -6px; } }
@media (max-width: 768px)  { .word-spacing--15px { word-spacing: normal !important; } }
@media (max-width: 374px)  { .chatboxs p { font-size: 12px; } }

/* ------------------------------------------------------------
   Buttons (were styled-components .sc-Qotzb variants)
   ------------------------------------------------------------ */
.btn-papa {
    background: linear-gradient(93deg, #e42a27 0%, #ff5a3c 50%, #e42a27 100%);
    border: none;
    display: inline-block;
    color: #fff;
}
.btn-papa > span,
.btn-papa > div > p,
.btn-papa > div > span {
    display: flex;
    background: transparent;
    color: #fff;
}
.btn-papa:hover { filter: brightness(1.08); }

/* Outline pill used by the Jodi / Pana chart links */
.btn-papa-outline {
    background: #fff;
    border: 1px solid #ee7977;
    color: var(--papa-red-dark);
    display: inline-block;
    text-decoration: none;
}
.btn-papa-outline:hover {
    background: var(--papa-red);
    border-color: var(--papa-red);
}
.btn-papa-outline:hover span { color: #fff !important; background: transparent !important; }

/* Call / WhatsApp tiles */
.chatboxs { text-decoration: none; }

/* ------------------------------------------------------------
   Utilities the upstream Tailwind build never generated
   (non-standard scale values: /8 opacity, 4.5 spacing, z-1)
   ------------------------------------------------------------ */
.bg-\[\#E42A27\]\/8 { background-color: rgba(228, 42, 39, .08); }
.z-1 { z-index: 1; }
.shadows { box-shadow: 0 4px 14px rgba(228, 42, 39, .35); }

@media (min-width: 768px) {
    .md\:px-4\.5 { padding-left: 1.125rem; padding-right: 1.125rem; }
}

/* Utilities used by the PHP pages that the upstream build omitted */
.mb-6      { margin-bottom: 1.5rem; }
.pl-5      { padding-left: 1.25rem; }
.max-w-\[720px\] { max-width: 720px; }
.max-w-\[760px\] { max-width: 760px; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem; }

@media (min-width: 768px) {
    .md\:pt-14 { padding-top: 3.5rem; }
}

/* ------------------------------------------------------------
   Winners ticker
   ------------------------------------------------------------ */
@keyframes tickerScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ticker-track {
    width: max-content;
    animation: tickerScroll 40s linear infinite;
    will-change: transform;
}
.ticker-track:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .ticker-track,
    .floating-figure,
    .float-slow,
    .float-medium,
    .float-fast,
    .glow-pulse,
    .shine-effect:before { animation: none !important; }
}

/* ------------------------------------------------------------
   Footer (was emotion .css-4ds7ek)
   ------------------------------------------------------------ */
.papa-footer {
    background-color: #010103;
    color: #fff;
}
.papa-footer a { text-decoration: none; }

.subtitle2 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
}
@media (max-width: 899.95px) {
    .subtitle2 { font-size: 12px; }
}

/* ------------------------------------------------------------
   Breadcrumb hero (inner pages)
   ------------------------------------------------------------ */
.breadcrumb-bg {
    background-image:
        radial-gradient(60% 120% at 85% 10%, rgba(255, 184, 0, .18) 0%, transparent 60%),
        radial-gradient(70% 130% at 10% 90%, rgba(228, 42, 39, .12) 0%, transparent 60%);
    pointer-events: none;
}

/* ------------------------------------------------------------
   Chart tables
   ------------------------------------------------------------ */
.chart-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.chart-scroll table { min-width: 340px; }

/* ------------------------------------------------------------
   FAQ accordion
   ------------------------------------------------------------ */
.faq-panel {
    overflow: hidden;
    max-height: 0;
    padding: 0;
    opacity: 0;
    transition: all .3s ease-in-out;
}
.faq-item.open .faq-panel {
    max-height: 600px;
    padding-top: 12px;
    opacity: 1;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .3s ease-in-out; }
.faq-item:last-of-type .faq-divider { border: none; }

/* ------------------------------------------------------------
   Play Store style install sheet (mobile)
   ------------------------------------------------------------ */
.install-sheet[hidden] { display: none !important; }
.install-sheet__backdrop { opacity: 0; }
.install-sheet__panel {
    transform: translateY(110%);
    transition: transform 300ms cubic-bezier(0, 0, .2, 1);
}
.install-sheet.is-open .install-sheet__backdrop { opacity: 1; }
.install-sheet.is-open .install-sheet__panel { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .install-sheet__panel { transition: none; }
}

/* ------------------------------------------------------------
   Sticky download bar
   ------------------------------------------------------------ */
.download-bar {
    bottom: -8rem;
    transition: bottom .7s ease-out;
}
.download-bar.visible { bottom: 0; }

/* ------------------------------------------------------------
   Hero badges row - always one line; scrolls instead of wrapping
   to a second row on narrow screens.
   ------------------------------------------------------------ */
.hero-badges-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    padding-bottom: 4px;
}
.hero-badges-row > div { flex-shrink: 0; }
.hero-badges-row p { white-space: nowrap; }
@media (min-width: 768px) {
    .hero-badges-row {
        justify-content: center;
        overflow-x: visible;
        padding-bottom: 0;
    }
}