/*
Theme Name: Rico Casino
Theme URI: https://yoursite.com
Author: Your Name
Description: A mobile app landing page WordPress theme with gradient background, offcanvas nav, download cards and accordion FAQ.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: rico-casino
Tags: one-page, landing-page, full-width-template
*/

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #e8e8f0;
    background: #0a0a12;
    -webkit-font-smoothing: antialiased;
}

a { color: #f5c518; text-decoration: none; transition: color .25s; }
a:hover { color: #ffd84d; }
ol, ul { list-style: none; padding: 0; margin: 0; }
h1,h2,h3,h4,h5,h6 { font-family: 'Rajdhani', sans-serif; font-weight: 700; line-height: 1.25; }
img { max-width: 100%; height: auto; }

#page { display: flex; flex-direction: column; min-height: 100vh; max-width: 760px; margin: 0 auto; background: #0a0a12; }
.site-content { flex: 1; }
.container-wrap { max-width: 900px; margin: 0 auto; padding: 0 16px; }

/* HEADER */
#masthead { position: relative; z-index: 100; }
.main-menu-btn { position: relative; text-align: center; min-height: 64px; }
.main-menu-wrap { position: absolute; top: 16px; left: 16px; z-index: 200; }

.btn-menu {
    background: rgba(20,20,30,.95);
    backdrop-filter: blur(8px);
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: #e8e8f0;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    gap: 8px;
    animation: menuPulse 1.8s infinite;
}
@keyframes menuPulse {
    0%  { color: #f5c518; }
    50% { color: #ffd84d; }
    100%{ color: #f5c518; }
}
.btn-menu:hover, .btn-menu:focus { background: rgba(30,30,45,.98); outline: none; }

/* OFFCANVAS */
.offcanvas { background: transparent; border: none; max-width: 270px; width: 100%; }
.offcanvas-body { padding: 0; background: rgba(10,10,18,.97); backdrop-filter: blur(12px); border-right: 1px solid rgba(245,197,24,.1); min-height: 100%; }
.menu-panel-header {
    background: linear-gradient(90deg, #1a1a2e, #0f3460);
    border-bottom: 2px solid #f5c518;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
}
.menu-panel-header h2 { font-size: 22px; font-weight: 800; color: #fff; margin: 0; }
.btn-offcanvas-close {
    position: absolute; top: 16px; left: 16px;
    background: transparent; border: none;
    color: #fff; font-size: 22px; cursor: pointer;
    padding: 4px; opacity: .85; transition: opacity .2s; z-index: 10;
}
.btn-offcanvas-close:hover { opacity: 1; }

#menu-primary-v2 { display: flex; flex-direction: column; margin-top: 8px; }
#menu-primary-v2 li { border-left: 3px solid #f5c518; }
#menu-primary-v2 li:hover,
#menu-primary-v2 li.current_page_item { background: rgba(245,197,24,.08); transition: background .25s; }
#menu-primary-v2 li a {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 20px 11px 18px;
    font-size: 15px; color: #8888aa; font-weight: 600;
}
#menu-primary-v2 li a::before { content: "▸"; color: #f5c518; font-size: 14px; }
#menu-primary-v2 li:hover a,
#menu-primary-v2 li.current_page_item a { color: #fff; font-weight: 700; }

/* CARDS */
.box-wrap {
    background: #1a1a2e;
    border-radius: 14px;
    border-top: 4px solid #f5c518;
    border: 1px solid rgba(245,197,24,.15);
    box-shadow: 0 6px 32px rgba(0,0,0,.5);
    margin-bottom: 16px;
    padding: 14px;
}
.box-wrap-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; margin-bottom: 16px; }
.box-wrap-card {
    flex: 1; min-width: 180px;
    background: #16213e;
    border-radius: 12px;
    border-top: 4px solid #f5c518;
    border: 1px solid rgba(245,197,24,.12);
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    padding: 16px 12px;
    text-align: center;
}
.top-padding-box { padding: 16px; }
.top-logo img { width: 180px; height: auto; }
.site-name-logo { font-family: 'Rajdhani', sans-serif; font-size: 28px; font-weight: 900; color: #f5c518; }

/* BUTTONS */
.btn-global {
    color: #fff; text-align: center;
    border-radius: 25px; padding: 10px 18px;
    display: flex; justify-content: center; align-items: center; gap: 10px;
    width: 100%;
    font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.3;
    transition: filter .2s, transform .15s; text-decoration: none;
}
.btn-global:hover { filter: brightness(1.1); transform: translateY(-2px); color: #fff; }
.btn-tele    { background: linear-gradient(135deg, #229ed9 60%, #0e6ea8); }
.btn-whatsapp{ background: linear-gradient(135deg, #25d366 60%, #128c4f); color: #000; }
.btn-play {
    font-size: 22px; font-weight: 800;
    background: linear-gradient(135deg, #c9a000, #f5c518);
    border-radius: 30px;
    color: #000;
    box-shadow: 0 6px 20px rgba(245,197,24,.4);
}
.home-contact-items { max-width: 220px; width: 100%; }

/* DOWNLOAD */
.download-title h2 { font-size: 19px; color: #f5c518; }
.download-title .fa-android { color: #16a34a; font-size: 26px; }
.download-title .fa-apple   { color: #475569; font-size: 26px; }
.download-content p, .demo-info p { font-size: 14px; color: #8888aa; line-height: 1.5; margin-bottom: 4px; }
.btn-download {
    font-size: 18px; font-weight: 700;
    padding: 10px 20px; border-radius: 8px;
    width: 100%; display: block; text-align: center; color: #fff;
    transition: filter .2s, transform .15s; text-decoration: none;
}
.btn-download:hover { color: #fff; filter: brightness(1.12); transform: translateY(-2px); }
.btn-android { background: linear-gradient(90deg, #1a6e3c 30%, #25d366); }
.btn-ios     { background: linear-gradient(90deg, #0e6ea8 30%, #229ed9); }

/* CONTENT */
.global-top { padding: 0 12px 12px; }
.section-page-content {
    background: #12121e;
    border: 1px solid rgba(245,197,24,.08);
    border-radius: 12px;
    padding: 28px 32px;
    margin-bottom: 20px;
}

.section-content-text h1 { font-size: 22px; line-height: 1.35; color: #fff; text-align: center; margin: 20px 0 18px; }
.section-content-text h2 { font-size: 18px; color: #f5c518; margin: 20px 0 10px; }
.section-content-text h3 { font-size: 16px; color: #ffd84d; margin: 14px 0 8px; }
.section-content-text p, .section-content-text a { font-size: 15px; line-height: 1.65; color: #8888aa; margin-bottom: 12px; }
.section-content-text a { color: #f5c518; text-decoration: underline; font-weight: 700; }
.section-content-text a:hover { color: #ffd84d; }
.section-content-text ul { list-style: disc inside; margin-bottom: 14px; padding-left: 8px; }
.section-content-text ol { list-style: decimal inside; margin-bottom: 14px; padding-left: 8px; }
.section-content-text ul li, .section-content-text ol li { font-size: 15px; line-height: 1.6; color: #8888aa; margin-bottom: 4px; }

.table-title h2 { font-size: 18px; color: #f5c518; text-align: center; margin-bottom: 10px; }
.table-content { list-style: lower-roman inside; padding-left: 8px; margin-bottom: 18px; }
.table-content li { font-size: 14px; line-height: 1.7; color: #8888aa; }
.table-content li a { font-size: 14px; color: #f5c518; text-decoration: none; }
.table-content li a:hover { color: #ffd84d; }

/* ACCORDION */
.accordion { margin-top: 12px; }
.accordion-item { border: 1px solid rgba(245,197,24,.1); border-radius: 8px !important; overflow: hidden; margin-bottom: 6px; background: rgba(255,255,255,.04); }
.accordion-item h3 { margin: 0; }
.accordion-button { background: rgba(245,197,24,.04); color: #e8e8f0; font-size: 15px; font-weight: 700; font-family: 'Inter', sans-serif; padding: 13px 16px; }
.accordion-button:not(.collapsed) { background: rgba(245,197,24,.12); color: #f5c518; box-shadow: none; }
.accordion-button::after { filter: invert(1) sepia(1) saturate(3) hue-rotate(5deg) brightness(.9); }
.accordion-button:not(.collapsed)::after { filter: invert(1) sepia(1) saturate(3) hue-rotate(5deg); }
.accordion-button:focus { box-shadow: none; }
.accordion-body { background: transparent; color: #8888aa; font-size: 15px; line-height: 1.6; padding: 12px 16px; }

/* SCROLL TOP */
#scroll-top-v2 {
    position: fixed; bottom: 28px; right: 28px;
    width: 44px; height: 44px;
    background: #1a1a2e;
    border: 1px solid rgba(245,197,24,.3);
    color: #f5c518; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
    z-index: 999; opacity: 0; pointer-events: none;
    transition: opacity .3s; text-decoration: none;
}
#scroll-top-v2.visible { opacity: 1; pointer-events: all; }
#scroll-top-v2:hover { background: rgba(245,197,24,.1); color: #f5c518; }

/* FOOTER */
#colophon { padding: 18px 16px; text-align: center; }
.page-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-bottom: 10px; }
.page-list li::after { content: "|"; margin-left: 14px; color: rgba(245,197,24,.2); }
.page-list li:last-child::after { content: ""; margin-left: 0; }
.copyright { font-size: 14px; color: #555577; }
.copyright a { color: #f5c518; font-weight: 700; text-decoration: underline; }
.copyright a:hover { color: #ffd84d; }
.offcanvas-backdrop { pointer-events: auto !important; z-index: 1040 !important; }

@media (max-width: 767px) {
    .main-menu-wrap { top: 14px; left: 12px; }
    .btn-menu { font-size: 15px; padding: 5px 10px; }
    .top-logo img { width: 140px; }
    .btn-global { font-size: 17px; }
    .btn-play { font-size: 18px; }
    .home-contact-items { max-width: 150px; }
    .box-wrap-card { min-width: 100%; }
    .section-page-content { padding: 20px 14px; }
    .section-content-text h1 { font-size: 19px; }
    .section-content-text h2 { font-size: 16px; }
    .section-content-text p, .section-content-text a,
    .section-content-text ul li, .section-content-text ol li { font-size: 14px; }
}

@media (min-width: 768px) {
    .global-top { padding: 0 24px 24px; }
    .box-wrap { padding: 20px; }
    .top-logo img { width: 200px; }
}