/* ============================================================
   custom.css — LuckKing Dark Gold Theme
   Place at: public_html/asset/theme5/frontend/css/custom.css
   Link in master.blade.php AFTER style.css
   ============================================================ */

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
    --gold:        #E6C766;
    --gold-light:  #F9EEC0;
    --gold-dark:   #C9A23F;
    --gold-border: rgba(230,199,102,0.30);
    --bg-0:        #060708;
    --bg-1:        #0C0E11;
    --bg-2:        #111317;
    --surface:     #15171B;
    --surface-2:   #1B1E23;
    --border:      rgba(230,199,102,0.18);
    --text:        #F7F8FB;
    --text-2:      #C5C9D4;
    --muted:       #888EA0;
    --green:       #4FC98C;
    --red:         #F0746A;
    --radius:      16px;
    --radius-sm:   10px;
    --btn-shadow:  0 10px 26px -10px rgba(230,199,102,0.50);
}

/* ── GLOBAL ─────────────────────────────────────────────────── */
body {
    background: var(--bg-0) !important;
    color: var(--text) !important;
    font-family: 'Manrope', -apple-system, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text) !important;
}

p { color: var(--text-2) !important; }

a { color: var(--gold) !important; }
a:hover { color: var(--gold-light) !important; text-decoration: none !important; }

section {
    background: transparent !important;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.main-btn {
    background: linear-gradient(135deg, #F9EEC0 0%, #E6C766 38%, #C29A38 100%) !important;
    border: none !important;
    color: #1A1305 !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
    box-shadow: var(--btn-shadow) !important;
    transition: filter .15s, box-shadow .2s !important;
}
.main-btn:hover {
    filter: brightness(1.08) !important;
    box-shadow: 0 14px 30px -10px rgba(230,199,102,0.70) !important;
    color: #1A1305 !important;
}
.main-btn span { color: #1A1305 !important; }

.main-btn2 {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    padding: 12px 28px !important;
    transition: background .15s !important;
}
.main-btn2:hover {
    background: rgba(255,255,255,0.10) !important;
    color: var(--text) !important;
}
.main-btn2 span { color: var(--text) !important; }

.btn-secondary, .btn.btn-secondary {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-2) !important;
    border-radius: 999px !important;
}

/* ── HEADER ─────────────────────────────────────────────────── */
#header {
    background: rgba(6,7,8,0.90) !important;
    backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
}

#header .logo h4,
#header .logo a { color: var(--gold) !important; }

/* ── BANNER ─────────────────────────────────────────────────── */
.banner-section {
    background: radial-gradient(900px 520px at 60% -10%, rgba(230,199,102,0.13), transparent 58%),
                var(--bg-0) !important;
    padding-top: 130px !important;
    padding-bottom: 60px !important;
    position: relative !important;
}

.banner-title {
    font-size: clamp(32px, 5vw, 58px) !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    line-height: 1.1 !important;
}

.banner-description {
    font-size: 17px !important;
    color: var(--text-2) !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.65 !important;
}

/* ── COUNTER ─────────────────────────────────────────────────── */
.counter-section {
    background: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 32px 0 !important;
}

.counter-wrapper { gap: 0 !important; }

.counter-item {
    text-align: center !important;
    padding: 16px 24px !important;
    border-right: 1px solid var(--border) !important;
}
.counter-item:last-child { border-right: none !important; }

.counter-title {
    font-size: 32px !important;
    font-weight: 800 !important;
    background: linear-gradient(120deg, #FBF1C6 0%, #E6C766 45%, #C9A23F 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    margin-bottom: 4px !important;
}

.counter-item .caption {
    font-size: 13px !important;
    color: var(--muted) !important;
    font-weight: 600 !important;
    letter-spacing: .4px !important;
}

/* ── SECTION HEADERS ─────────────────────────────────────────── */
.sp_site_header, .sp_site_title {
    color: var(--text) !important;
}

.sp_site_title {
    font-size: clamp(26px, 4vw, 40px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

.sp_separator_bg {
    background: var(--bg-1) !important;
}

/* ── PLAN SECTION ─────────────────────────────────────────────── */
.plan-section {
    background: var(--bg-1) !important;
}

.plan-item {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 32px 24px !important;
    transition: border-color .2s, transform .2s !important;
    position: relative !important;
    overflow: hidden !important;
}
.plan-item:hover {
    border-color: var(--gold-dark) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 24px 48px -20px rgba(230,199,102,0.25) !important;
}

.plan-name {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--text) !important;
}

.plan-amount {
    font-size: 44px !important;
    font-weight: 800 !important;
    background: linear-gradient(120deg, #FBF1C6 0%, #E6C766 45%, #C9A23F 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    line-height: 1 !important;
}

.plan-list { list-style: none !important; padding: 0 !important; margin: 16px 0 !important; }
.plan-list li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    font-size: 14px !important;
}
.plan-list li:last-child { border-bottom: none !important; }
.plan-list .caption { color: var(--muted) !important; }
.plan-list .caption i { color: var(--gold) !important; margin-right: 6px !important; }
.plan-list .details { color: var(--text) !important; font-weight: 700 !important; }

.plan-btn {
    background: linear-gradient(135deg, #F9EEC0 0%, #E6C766 38%, #C29A38 100%) !important;
    border: none !important;
    color: #1A1305 !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    box-shadow: var(--btn-shadow) !important;
}
.plan-btn span { color: #1A1305 !important; }

/* ── CALCULATE AREA ──────────────────────────────────────────── */
.calculate-area {
    background: var(--surface-2) !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 48px 0 !important;
}

.calculate-area .form-control,
.calculate-area .select {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    padding: 13px 16px !important;
}
.calculate-area .form-control::placeholder { color: var(--muted) !important; }
.calculate-area .mbl-h { color: var(--text-2) !important; font-weight: 600 !important; }

/* ── TRANSACTION SECTION ─────────────────────────────────────── */
.transaction-section { background: var(--bg-0) !important; }

.transaction-wrapper {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 28px !important;
}

.transaction-wrapper-top .title {
    color: var(--text) !important;
    font-weight: 800 !important;
}

.transaction-tabs .nav-link {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--border) !important;
    color: var(--muted) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 8px 18px !important;
    margin-right: 8px !important;
    transition: all .15s !important;
}
.transaction-tabs .nav-link.active,
.transaction-tabs .nav-link:hover {
    background: rgba(230,199,102,0.14) !important;
    border-color: var(--gold-dark) !important;
    color: var(--gold-light) !important;
}

.site-table { color: var(--text) !important; }
.site-table thead tr.bg-yellow th,
.site-table thead tr th {
    background: rgba(230,199,102,0.12) !important;
    color: var(--gold) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: .4px !important;
    border: none !important;
    padding: 14px 16px !important;
}
.iziToast-message {
    color: #ffffff !important;
}

.iziToast-title {
    color: #ffffff !important;
}
.iziToast {
    color: #ffffff !important;
}

.iziToast * {
    color: #ffffff !important;
}
.site-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    transition: background .12s !important;
}
.site-table tbody tr:hover {
    background: rgba(230,199,102,0.04) !important;
}
.site-table tbody td {
    color: var(--text-2) !important;
    border: none !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
}

/* ── INVESTOR SECTION ────────────────────────────────────────── */
.investor-section { background: var(--bg-1) !important; }

.investor-item {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 24px !important;
    text-align: center !important;
    transition: border-color .2s !important;
}
.investor-item:hover { border-color: var(--gold-dark) !important; }

.investor-thumb-inner {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    margin: 0 auto 14px !important;
    border: 3px solid var(--gold-dark) !important;
    box-shadow: 0 0 0 4px rgba(230,199,102,0.15) !important;
}
.investor-thumb-inner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.investor-content .name {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
}
.investor-content p { color: var(--text-2) !important; font-size: 13px !important; }
.site-color { color: var(--gold) !important; font-weight: 700 !important; }

/* ── FAQ SECTION ─────────────────────────────────────────────── */
.faq-section { background: var(--bg-0) !important; }

.accordion-item {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
}

.accordion-button {
    background: var(--surface) !important;
    color: var(--text) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: none !important;
    padding: 18px 20px !important;
}
.accordion-button:not(.collapsed) {
    background: rgba(230,199,102,0.08) !important;
    color: var(--gold-light) !important;
}
.accordion-button::after {
    filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg) !important;
}
.accordion-body {
    background: var(--surface) !important;
    color: var(--text-2) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    padding: 0 20px 20px !important;
}

/* ── TESTIMONIAL SECTION ─────────────────────────────────────── */
.testimonial-section { background: var(--bg-1) !important; }

.testimonial-item {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 28px !important;
}

.testimonial-details {
    color: var(--text-2) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    font-style: italic !important;
}

.testimonial-client .name {
    color: var(--text) !important;
    font-weight: 700 !important;
}
.testimonial-client p { color: var(--muted) !important; font-size: 13px !important; }

.testimonial-client .thumb {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 2px solid var(--gold-dark) !important;
    flex-shrink: 0 !important;
}

/* ── MODALS ──────────────────────────────────────────────────── */
.modal-content {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
}
.modal-header {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: 20px 24px !important;
}
.modal-title { color: var(--text) !important; font-weight: 700 !important; }
.modal-body { padding: 20px 24px !important; }
.modal-footer {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding: 16px 24px !important;
}

.modal-header .close,
.modal-header .btn-close {
    color: var(--text-2) !important;
    opacity: .7 !important;
}

/* ── FORM CONTROLS ───────────────────────────────────────────── */
.form-control, .form-select, select.select {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    transition: border-color .15s !important;
}
.form-control:focus, .form-select:focus {
    background: rgba(255,255,255,0.06) !important;
    border-color: var(--gold-dark) !important;
    box-shadow: 0 0 0 3px rgba(230,199,102,0.15) !important;
    color: var(--text) !important;
}
.form-control::placeholder { color: var(--muted) !important; }
label { color: var(--text-2) !important; font-weight: 600 !important; font-size: 13px !important; }

/* ── TICKER / SLIDER ─────────────────────────────────────────── */
.slider-text-container {
    background: #000 !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
}
.slider-text { color: var(--gold) !important; }

/* ── AFFILIATE / REFERRAL POPUP ──────────────────────────────── */
.plan-referral-area {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
}
.plan-referral h6 { color: var(--text) !important; }
.single-referral {
    display: flex !important;
    justify-content: space-between !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    color: var(--text-2) !important;
}
.single-referral span { color: var(--gold) !important; font-weight: 700 !important; }

.view-affiliate-wrapper p { color: var(--muted) !important; font-size: 13px !important; }
.view-affiliate-btn {
    background: none !important;
    border: 1px solid var(--border) !important;
    color: var(--gold) !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    padding: 5px 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }

/* ── SLICK SLIDER DOTS ───────────────────────────────────────── */
.slick-dots li button:before {
    color: var(--gold-dark) !important;
    opacity: .4 !important;
}
.slick-dots li.slick-active button:before {
    color: var(--gold) !important;
    opacity: 1 !important;
}

/* ── UTILITY ─────────────────────────────────────────────────── */
.sp_text_dark { color: #1A1305 !important; }
.bg-white { background: rgba(255,255,255,0.06) !important; }
.text-white { color: var(--text) !important; }
.text-muted { color: var(--muted) !important; }
/* ============================================================
   ADD THIS TO THE BOTTOM OF custom.css
   Shared styles used by all new section blade files
   ============================================================ */

/* ── FONTS ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

body { font-family: 'Manrope', -apple-system, sans-serif !important; }

/* ── SHARED GOLD TEXT ────────────────────────────────────────── */
.lk-gold-text {
    background: linear-gradient(120deg, #FBF1C6 0%, #E6C766 45%, #C9A23F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── SHARED SECTION WRAPPER ──────────────────────────────────── */
.lk-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px;
}

.lk-sec { padding: 90px 0; }

.lk-sec-head {
    text-align: center;
    margin-bottom: 52px;
}

.lk-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #C9A23F;
    display: block;
    margin-bottom: 10px;
}

.lk-sec-title {
    font-family: 'Sora', 'Manrope', sans-serif !important;
    font-size: clamp(28px, 4vw, 40px) !important;
    font-weight: 800 !important;
    color: #F7F8FB !important;
    -webkit-text-fill-color: #F7F8FB;
    line-height: 1.1 !important;
    margin-bottom: 14px !important;
}

.lk-sec-desc {
    font-size: 16px !important;
    color: #C5C9D4 !important;
    max-width: 540px;
    margin: 0 auto !important;
    line-height: 1.65 !important;
}

/* ── OVERRIDE OLD THEME SECTION BACKGROUNDS ──────────────────── */
.plan-section,
.investor-section,
.transaction-section,
.faq-section,
.testimonial-section,
.banner-section,
.counter-section,
.calculate-area {
    background: transparent !important;
}
/* Sidebar active item — gold instead of orange */
.d-sidebar-menu li.active > a,
.d-sidebar-menu li.active > a i,
.d-sidebar-menu li > a:hover,
.d-sidebar-menu li > a:hover i {
    color: #E6C766 !important;
}

.d-sidebar-menu li.active {
    background: rgba(230,199,102,0.10) !important;
    border-radius: 8px !important;
}

.d-sidebar-menu li.active > a::before,
.d-sidebar-menu li.active > a::after {
    background: #E6C766 !important;
    border-color: #E6C766 !important;
}

/* Mobile bottom menu active */
.mobile-bottom-menu li a.active,
.mobile-bottom-menu li a:hover {
    color: #E6C766 !important;
}

.mobile-bottom-menu li a.active i,
.mobile-bottom-menu li a:hover i {
    color: #E6C766 !important;
}

/* ── HAMBURGER BUTTON ─────────────────────────────────────────── */
.sidebar-toggle-btn {
    position: fixed;
    top: 14px;
    left: 16px;
    z-index: 1050;
    width: 40px;
    height: 40px;
    background: #15171B;
    border: 1px solid rgba(230,199,102,0.35);
    border-radius: 10px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    transition: background .15s;
    padding: 0;
}
.sidebar-toggle-btn:hover {
    background: rgba(230,199,102,0.14);
}
.sidebar-toggle-btn span {
    display: block;
    width: 18px;
    height: 2px;
    background: #E6C766;
    border-radius: 2px;
    transition: all .3s;
}
/* Animate to X when open */
.sidebar-toggle-btn.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.sidebar-toggle-btn.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.sidebar-toggle-btn.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── OVERLAY ──────────────────────────────────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 1040;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.sidebar-overlay.active {
    display: block;
}

/* ── SIDEBAR — HIDDEN BY DEFAULT, SLIDE IN ON OPEN ───────────── */
.d-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -290px !important;
    width: 270px !important;
    height: 100vh !important;
    overflow-y: auto !important;
    z-index: 1045 !important;
    transition: left .3s cubic-bezier(.4,0,.2,1) !important;
    background: #0C0E11 !important;
    border-right: 1px solid rgba(230,199,102,0.18) !important;
    padding-top: 20px !important;
    box-shadow: none;
}
.d-sidebar.sidebar-open {
    left: 0 !important;
    box-shadow: 4px 0 40px rgba(0,0,0,0.6) !important;
}

/* ── MAIN CONTENT — FULL WIDTH ALWAYS ────────────────────────── */
.dashboard-main,
.dashboard-section,
.content-wrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
}

/* ── PUSH LOGO RIGHT SO HAMBURGER DOESN'T OVERLAP ────────────── */
#header .logo {
    padding-left: 56px !important;
}

/* ── MOBILE BOTTOM MENU — keep visible ───────────────────────── */
.mobile-bottom-menu-wrapper {
    display: block !important;
}
/* Hide hamburger on mobile — mobile uses bottom nav instead */
@media(max-width: 991px) {
    .sidebar-toggle-btn {
        display: none !important;
    }
    .sidebar-overlay {
        display: none !important;
    }
    .d-sidebar {
        position: static !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        box-shadow: none !important;
        display: none !important;
    }
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .lk-container { padding: 0 24px; }
    .lk-sec { padding: 60px 0; }
    .lk-investors-grid,
    .lk-test-grid { grid-template-columns: 1fr 1fr; }
    .lk-draws-grid,
    .lk-plans-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .lk-investors-grid,
    .lk-test-grid { grid-template-columns: 1fr; }
    .lk-sec-title { font-size: 26px !important; }
}