/* Custom Styles */
@layer utilities {
    .glass-effect {
        @apply bg-slate-900/80 backdrop-blur-md border border-white/10;
    }
    .text-gradient {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-yellow-600;
    }
    .btn-gold {
        @apply bg-yellow-500 hover:bg-yellow-400 text-slate-900 font-bold py-3 px-6 rounded-lg transition-all shadow-lg shadow-yellow-500/20 hover:shadow-yellow-500/40;
    }
}

/* Animations */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* CTA soft pulse/glow — breathing effect for main action buttons */
@keyframes tp-cta-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.28), 0 4px 14px rgba(0, 0, 0, 0.15);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 28px 10px rgba(245, 158, 11, 0.24), 0 8px 24px rgba(0, 0, 0, 0.2);
        opacity: 1;
    }
}

.tp-cta-play,
.btn-gold,
.tp-cta-glow {
    animation: tp-cta-glow 2.2s ease-in-out infinite;
}

/* Global CTA button: use in all articles (Slots, Sports, Crypto). Single source of truth. */
.btn-main-pulse {
    display: inline-block;
    background-color: rgb(245 158 11); /* amber-500 */
    color: rgb(15 23 42); /* text-slate-900 */
    font-weight: 700;
    font-size: 1rem;
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s, box-shadow 0.2s;
    animation: tp-cta-glow 2.2s ease-in-out infinite;
    will-change: box-shadow;
}
.btn-main-pulse:hover {
    background-color: rgb(251 191 36); /* amber-400 */
}
@media (max-width: 767px) {
    .tp-cta-glow { animation-duration: 2.8s; }
    .btn-main-pulse { animation-duration: 2.8s; min-height: 48px; padding: 14px 20px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ========== Blog global header (skewaya chelka) ========== */
.tp-nav-bar-blog { background: rgba(2,6,23,0.98) !important; border-color: rgba(255,255,255,0.1); }
.tp-nav-bar-blog .tp-logo-link { font-family: 'Inter', sans-serif; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; }
.tp-nav-bar-blog .tp-logo-text { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em; background: linear-gradient(135deg, #fcd34d 0%, #d4af37 50%, #b45309 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.tp-nav-bar-blog .tp-logo-icon { color: #d4af37; flex-shrink: 0; }
.tp-nav-bar-blog .tp-nav-banner { display: flex; flex-direction: column; align-items: center; padding: 0.5rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); text-decoration: none; min-width: 0; max-width: 140px; transition: all 0.2s; }
.tp-nav-bar-blog .tp-nav-banner:hover { border-color: rgba(212,175,55,0.5); background: rgba(255,255,255,0.08); }
.tp-nav-bar-blog .tp-nav-banner span:first-child { display: block; width: 100%; overflow: hidden; border-radius: 8px; aspect-ratio: 2/1; }
.tp-nav-bar-blog .tp-nav-banner img { width: 100%; height: 100%; object-fit: cover; }
.tp-nav-bar-blog .tp-nav-banner span:last-child { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.25rem; }
.tp-icons-bar-blog { display: none; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; padding: 0.5rem 0.75rem; background: rgba(2,6,23,0.98); border-bottom: 1px solid rgba(255,255,255,0.08); width: 100%; box-sizing: border-box; }
.tp-icons-bar-blog a { display: flex; flex-direction: column; align-items: center; padding: 0.4rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); text-decoration: none; min-height: 60px; }
.tp-icons-bar-blog a span:first-child { width: 32px; height: 32px; border-radius: 8px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tp-icons-bar-blog a img { width: 100%; height: 100%; object-fit: contain; }
.tp-icons-bar-blog a span:last-child { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; margin-top: 0.2rem; }
/* Mobile: larger tap targets and text for the 3-link navbar (~2x) */
@media (max-width: 767px) {
    .tp-icons-bar-blog { gap: 1rem; padding: 1rem; display: grid !important; }
    .tp-icons-bar-blog a { padding: 0.75rem 0.5rem; min-height: 100px; border-radius: 14px; }
    .tp-icons-bar-blog a span:first-child { width: 56px; height: 56px; border-radius: 12px; }
    .tp-icons-bar-blog a span:last-child { font-size: 1.05rem; margin-top: 0.4rem; }
}
.tp-blog-pt { padding-top: 5.5rem !important; }
@media (min-width: 768px) {
    .tp-blog-pt { padding-top: 7rem !important; }
}
@media (max-width: 767px) {
    .tp-nav-bar-blog .tp-nav-inner { max-height: 52px !important; min-height: 48px !important; padding: 0.35rem 0.5rem !important; }
    .tp-nav-bar-blog .tp-nav-menu { display: none !important; }
    .tp-nav-bar-blog .tp-logo-text { font-size: 0.85rem !important; }
    .tp-icons-bar-blog { display: grid !important; }
    .tp-blog-pt { padding-top: 12rem !important; }
}
@media (min-width: 768px) {
    .tp-icons-bar-blog { display: none !important; }
}

/* Provider logos on slot hub grid: centered, bounded size */
.provider-hub-logo { max-width: 160px; max-height: 56px; object-fit: contain; }

/* Slot card preview in provider hubs: 3:4 aspect, cover */
.slot-card-preview,
.card-preview.slot-card-preview {
    aspect-ratio: 3/4;
    object-fit: cover;
    max-width: 320px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    border-radius: 8px;
}

/* Slots hub grid: tile layout like provider grid (2 cols mobile, 3 cols desktop) */
.slots-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.5rem;
}
@media (min-width: 640px) {
    .slots-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

/* Slot review poster: compact, in line with site style (all breakpoints) */
.slot-review-image {
    max-width: 220px !important;
    width: 100%;
    height: auto !important;
    border-radius: 12px;
    margin: 0 auto 20px auto;
    display: block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Trust-Play: 4-brand grid */
.tp-grid-4 {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Trust block: readable cards, mobile padding */
.tp-trust-card {
    box-sizing: border-box;
}
@media (max-width: 479px) {
    .tp-trust-card {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
}

/* ========== Mobile UX (max 768px) ========== */
@media (max-width: 767px) {
    /* Header: sticky, fixed to top, no sliding, z-index above content */
    body .tp-nav-bar,
    nav.tp-nav-bar,
    header.tp-nav-bar {
        position: sticky !important;
        top: 0 !important;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 60px !important;
        min-height: 56px !important;
        z-index: 1000;
        transform: none !important;
        margin: 0;
        padding: 0.25rem 0.5rem !important;
    }
    .tp-nav-bar .tp-nav-inner {
        max-height: 60px;
        min-height: 56px;
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
    .tp-nav-bar .tp-logo-text { font-size: 0.875rem !important; }
    .tp-nav-bar .tp-logo-icon svg { width: 18px !important; height: 18px !important; }
    .tp-nav-bar .tp-flag-wrap { width: 22px !important; height: 22px !important; }
    .tp-nav-bar .tp-nav-menu .tp-nav-banner span:last-child { font-size: 0.7rem !important; line-height: 1.2; padding: 0.2rem 0.15rem !important; }
    .tp-nav-bar .tp-nav-menu .tp-nav-banner { min-width: 72px !important; max-width: 72px !important; }
    .tp-nav-bar .tp-nav-menu .tp-nav-banner span:first-child { min-height: 32px; }
    /* Ensure header icons are fully visible and not cropped */
    .tp-nav-bar .tp-nav-menu img {
        max-height: 40px;
        height: auto;
        width: auto;
        object-fit: contain;
        object-position: center;
        display: block;
        margin: 0 auto;
    }

    /* Disable heavy animations for performance */
    .animate-float,
    .tp-btn-pulse,
    .tp-pulse { animation: none !important; }
    .glass-card:hover,
    .blog-hub-card:hover,
    .card-hover:hover { transform: none !important; }
    .tp-nav-banner:hover,
    .tp-blog-banner:hover { transform: none !important; }

    /* Sections: reduce padding/margin on mobile */
    section { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
    .py-16 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .py-12 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
    .mb-14 { margin-bottom: 1.25rem !important; }
    .mb-12 { margin-bottom: 1rem !important; }
    .pt-32 { padding-top: 4rem !important; }

    /* Blog article titles: compact so user sees text */
    article h1,
    .tp-article-title {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
    }
    header.border-b.pb-6 h1 { font-size: 1.35rem !important; }

    /* Tables: scroll or contain */
    .tp-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .tp-table-wrap table { min-width: 480px; }

    /* Article prose: readable line-height */
    .prose.prose-invert,
    .prose.prose-slate { line-height: 1.65 !important; }

    .tp-article-img {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
    }

    /* Play / CTA buttons: thumb-sized (min 44px) */
    .tp-cta-play,
    .btn-gold,
    .btn-main-pulse {
        min-height: 48px;
        padding: 14px 20px !important;
        font-size: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Blog hub cards: strict column, smaller titles */
    .blog-hub-card .p-5 h2,
    .blog-hub-card .md\:p-6 h2,
    .blog-hub-card [class*="p-5"] h2,
    .blog-hub-card [class*="p-6"] h2 {
        font-size: 1.125rem !important;
    }
}

/* Crypto article blocks: Quick Tip + comparison table */
.quick-tip {
    background: linear-gradient(135deg, rgba(251,191,36,0.18) 0%, rgba(245,158,11,0.12) 100%);
    border: 2px solid rgba(251,191,36,0.6);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
}
.prose-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.prose-table th, .prose-table td { border: 1px solid rgba(255,255,255,0.2); padding: 0.6rem 0.75rem; text-align: left; }
.prose-table th { background: rgba(255,255,255,0.06); color: rgb(253 224 71); font-weight: 600; }
.prose-table tr:hover { background: rgba(255,255,255,0.04); }