/*
 * Lottomate GOLD unified public concept
 * Path: /var/www/lottomate/assets/css/lottomate_gold_unified.css
 * Purpose: public pages concept consistency
 */

:root{
    --lm-navy:#071d3a;
    --lm-navy2:#092b58;
    --lm-blue:#1e5fbf;
    --lm-gold:#d9a441;
    --lm-gold2:#f5ca5c;
    --lm-gold3:#fff4bd;
    --lm-brown:#3c2700;
    --lm-red:#e33333;
    --lm-green:#26a641;
    --lm-text:#1f2937;
    --lm-muted:#6b7280;
    --lm-line:#e5e7eb;
    --lm-bg:#f7f6f2;
    --lm-card:#ffffff;
    --lm-shadow:0 12px 30px rgba(15,23,42,.12);
    --lm-gold-shadow:0 18px 44px rgba(99,65,6,.22);
    --lm-radius:18px;
}

html{
    scroll-behavior:smooth;
}

body{
    background:
        radial-gradient(circle at 18% 0%, rgba(255,244,189,.46), transparent 28%),
        linear-gradient(180deg,#fff 0%,#f7f6f2 48%,#fff 100%) !important;
    color:var(--lm-text) !important;
    letter-spacing:-.035em;
}

a{
    transition:color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

a:hover{
    transform:translateY(-1px);
}

.wrap,
.container,
.public-wrap{
    width:min(1180px,calc(100% - 36px)) !important;
}

/* ===== header / navigation ===== */
.topbar,
.public-topbar,
.site-topbar{
    background:#fffaf0 !important;
    border-bottom:1px solid #ead9aa !important;
    color:#5c4520 !important;
}

.gnb,
.public-header,
.site-header,
.header,
header.gnb{
    background:linear-gradient(180deg,#082a57 0%,#061d3f 100%) !important;
    color:#fff !important;
    box-shadow:0 6px 18px rgba(7,29,58,.24) !important;
    border-bottom:1px solid rgba(217,164,65,.28) !important;
}

.brand,
.logo,
.site-logo{
    font-weight:950 !important;
    letter-spacing:-.05em !important;
}

.brand strong,
.logo strong,
.site-logo strong{
    color:#fff !important;
}

.brand span,
.logo span,
.site-logo span,
.nav .gold,
.gnb .gold{
    color:#f8d66a !important;
}

.nav a,
.gnb a,
.public-header a,
.site-header a{
    font-weight:900;
}

.nav a:hover,
.gnb a:hover,
.public-header a:hover,
.site-header a:hover{
    color:#f8d66a !important;
}

/* ===== common section / card ===== */
main{
    position:relative;
}

section{
    scroll-margin-top:92px;
}

.card,
.panel,
.section-card,
.public-card,
.board-card,
.gen-card,
.service-card,
.result-card,
.notice-card,
.inquiry-card,
.stat-card,
.price-card,
.plan-card,
.my-card,
.mypage-card,
.saved-card,
.number-card,
.post-card,
.faq-card,
.content-card{
    background:#fff !important;
    border:1px solid #ead9aa !important;
    border-radius:18px !important;
    box-shadow:0 8px 20px rgba(68,44,6,.07) !important;
}

.card:hover,
.panel:hover,
.section-card:hover,
.public-card:hover,
.board-card:hover,
.gen-card:hover,
.stat-card:hover,
.price-card:hover,
.plan-card:hover,
.saved-card:hover,
.number-card:hover,
.post-card:hover,
.faq-card:hover{
    box-shadow:0 14px 30px rgba(68,44,6,.12) !important;
}

.section-title,
.page-title,
.page-head h1,
.public-title,
.board-title,
.gen-card-head h2,
.service-card h2,
.result-card h2,
.mypage-title,
.pricing-title,
h1,h2{
    letter-spacing:-.065em;
}

.section-title,
.page-head h1,
.public-title,
.board-title,
.gen-card-head h2,
.service-card h2,
.result-card h2{
    color:var(--lm-navy) !important;
    font-weight:950 !important;
}

.page-head,
.public-page-head,
.board-page-head,
.my-page-head,
.pricing-head,
.stat-head{
    border-radius:22px !important;
    background:
        radial-gradient(circle at 88% 20%,rgba(255,220,80,.22),transparent 26%),
        linear-gradient(135deg,#071d3a 0%,#092b58 100%) !important;
    border:1px solid rgba(217,164,65,.42) !important;
    box-shadow:var(--lm-gold-shadow) !important;
    color:#fff !important;
    padding:26px !important;
    margin-bottom:18px !important;
}

.page-head h1,
.public-page-head h1,
.board-page-head h1,
.my-page-head h1,
.pricing-head h1,
.stat-head h1{
    color:#fff4bd !important;
    margin-top:0 !important;
}

.page-head p,
.public-page-head p,
.board-page-head p,
.my-page-head p,
.pricing-head p,
.stat-head p{
    color:#dbe7f7 !important;
    font-weight:800 !important;
}

/* ===== hero / major banners ===== */
.hero,
.main-hero,
.generator-hero,
.latest,
.premium-banner,
.gold-hero,
.service-hero{
    border-radius:22px !important;
    overflow:hidden !important;
    border:1px solid rgba(217,164,65,.55) !important;
    box-shadow:var(--lm-gold-shadow) !important;
}

.hero,
.main-hero,
.gold-hero,
.service-hero{
    background:
        radial-gradient(circle at 72% 36%,rgba(255,220,80,.28),transparent 22%),
        radial-gradient(circle at 90% 80%,rgba(217,164,65,.28),transparent 25%),
        linear-gradient(115deg,#0b0805 0%,#1b1409 45%,#503509 74%,#c9952f 100%) !important;
}

.generator-hero,
.latest,
.premium-banner{
    background:
        radial-gradient(circle at 20% 44%,rgba(255,211,95,.23),transparent 22%),
        radial-gradient(circle at 60% 50%,rgba(34,199,255,.16),transparent 24%),
        linear-gradient(110deg,#130e07,#21170a 64%,#6c470d) !important;
}

.generator-hero h1,
.hero h1,
.main-hero h1,
.gold-hero h1,
.premium-banner h2,
.latest h2{
    color:#fff8d9 !important;
    text-shadow:0 3px 16px rgba(0,0,0,.42) !important;
}

.generator-hero p,
.hero p,
.main-hero p,
.gold-hero p,
.premium-banner p{
    color:rgba(255,255,255,.80) !important;
    font-weight:800 !important;
}

.label,
.badge,
.tag,
.private-pin,
.reply-pin,
.gen-label,
.status-badge,
.plan-badge{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    border-radius:999px !important;
    padding:0 11px !important;
    background:rgba(255,231,151,.16) !important;
    border:1px solid rgba(255,231,151,.42) !important;
    color:#8a5b00 !important;
    font-size:12px;
    font-weight:950 !important;
}

.generator-hero .gen-label,
.hero .label,
.main-hero .label,
.gold-hero .label,
.latest .label,
.premium-banner .label{
    color:#ffe9a3 !important;
}

/* ===== buttons ===== */
.btn,
.gen-btn,
.mini-btn,
.admin-btn,
.board-btn,
.public-btn,
button[type="submit"],
input[type="submit"],
.button{
    border-radius:999px !important;
    font-weight:950 !important;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn.gold,
.gen-btn.gold,
.mini-btn.gold,
.bulk-save-btn,
.public-btn.gold,
.button.gold,
.price-card a,
.plan-card a,
a[href*="pricing"],
button.gold{
    background:linear-gradient(135deg,#fff3b0,#d9a441) !important;
    color:#3b2500 !important;
    border-color:#d9a441 !important;
    box-shadow:0 10px 18px rgba(99,65,6,.18) !important;
}

.btn.dark,
.gen-btn.dark,
.public-btn.dark,
.button.dark{
    background:var(--lm-navy) !important;
    color:#fff !important;
    border-color:rgba(255,255,255,.14) !important;
}

.btn.blue,
.gen-btn.blue,
.public-btn.blue,
.button.blue{
    background:var(--lm-navy2) !important;
    color:#fff !important;
}

.btn:hover,
.gen-btn:hover,
.mini-btn:hover,
.public-btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(68,44,6,.18) !important;
}

/* ===== forms ===== */
input,
select,
textarea{
    border:1px solid #d1d5db !important;
    border-radius:12px !important;
    background:#fff !important;
    color:#111827 !important;
}

input:focus,
select:focus,
textarea:focus{
    outline:none !important;
    border-color:#d9a441 !important;
    box-shadow:0 0 0 4px rgba(217,164,65,.16) !important;
}

/* ===== board / list / table ===== */
table{
    border-collapse:separate;
    border-spacing:0;
}

thead th{
    background:#fff8d9 !important;
    color:#5b3b08 !important;
    font-weight:950 !important;
    border-bottom:1px solid #ead9aa !important;
}

tbody td{
    border-bottom:1px solid #edf0f3 !important;
}

.board-grid,
.board-list,
.post-list,
.faq-list,
.inquiry-list,
.saved-list{
    border-radius:18px !important;
}

.board,
.board-item,
.post-item,
.faq-item,
.inquiry-item,
.saved-item{
    background:#fff !important;
    border-color:#e5e7eb !important;
}

.board-head h3,
.board-item h3,
.post-item h3,
.faq-item h3,
.inquiry-item h3{
    color:#071d3a !important;
    font-weight:950 !important;
}

/* ===== service boxes ===== */
.service,
.service-box,
.feature,
.feature-card{
    border:1px solid #e5e7eb !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:0 6px 14px rgba(0,0,0,.04) !important;
}

.service .ico,
.feature .ico,
.service-icon,
.feature-icon{
    background:linear-gradient(135deg,#fff7d1,#d9a441) !important;
    color:#3b2500 !important;
}

/* ===== number balls unified premium style ===== */
.num-balls,
.balls,
.neon-balls,
.round-balls,
.lotto-balls,
.mini-balls{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex-wrap:wrap !important;
}

.ball,
.mini-ball,
.neon,
.lotto-ball,
.num-ball,
.round-ball{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    border-radius:50% !important;
    display:inline-grid !important;
    place-items:center !important;
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
    color:#fff !important;
    font-size:16px !important;
    font-weight:950 !important;
    line-height:1 !important;
    letter-spacing:-.02em !important;
    border:1px solid rgba(255,255,255,.86) !important;
    text-shadow:0 1px 2px rgba(0,0,0,.50) !important;
    box-shadow:
        inset 0 3px 5px rgba(255,255,255,.33),
        inset 0 -11px 15px rgba(0,0,0,.22),
        0 8px 16px rgba(15,23,42,.16) !important;
}

.ball::before,
.mini-ball::before,
.neon::before,
.lotto-ball::before,
.num-ball::before,
.round-ball::before{
    content:"";
    position:absolute;
    left:9px;
    top:7px;
    width:16px;
    height:10px;
    border-radius:50%;
    background:rgba(255,255,255,.34);
    filter:blur(.2px);
    z-index:-1;
}

.ball.orange,.mini-ball.orange,.neon.orange,.lotto-ball.orange,.num-ball.orange,.round-ball.orange,
.ball.yellow,.mini-ball.yellow,.neon.yellow,.lotto-ball.yellow,.num-ball.yellow,.round-ball.yellow,
.ball.mb1,.mini-ball.mb1,.neon.mb1,.lotto-ball.mb1,.num-ball.mb1,.round-ball.mb1,
.ball.b1,.mini-ball.b1,.neon.b1,.lotto-ball.b1,.num-ball.b1,.round-ball.b1{
    background:radial-gradient(circle at 30% 24%,#fff7b8 0 13%,#ffd75a 33%,#f4b400 72%,#b87500 100%) !important;
}

.ball.blue,.mini-ball.blue,.neon.blue,.lotto-ball.blue,.num-ball.blue,.round-ball.blue,
.ball.mb2,.mini-ball.mb2,.neon.mb2,.lotto-ball.mb2,.num-ball.mb2,.round-ball.mb2,
.ball.b2,.mini-ball.b2,.neon.b2,.lotto-ball.b2,.num-ball.b2,.round-ball.b2{
    background:radial-gradient(circle at 30% 24%,#dbeafe 0 13%,#67a8ff 33%,#2563eb 74%,#123a91 100%) !important;
}

.ball.red,.mini-ball.red,.neon.red,.lotto-ball.red,.num-ball.red,.round-ball.red,
.ball.mb3,.mini-ball.mb3,.neon.mb3,.lotto-ball.mb3,.num-ball.mb3,.round-ball.mb3,
.ball.b3,.mini-ball.b3,.neon.b3,.lotto-ball.b3,.num-ball.b3,.round-ball.b3{
    background:radial-gradient(circle at 30% 24%,#ffe1e1 0 13%,#ff8383 33%,#e53935 74%,#a81515 100%) !important;
}

.ball.purple,.mini-ball.purple,.neon.purple,.lotto-ball.purple,.num-ball.purple,.round-ball.purple,
.ball.gray,.mini-ball.gray,.neon.gray,.lotto-ball.gray,.num-ball.gray,.round-ball.gray,
.ball.mb4,.mini-ball.mb4,.neon.mb4,.lotto-ball.mb4,.num-ball.mb4,.round-ball.mb4,
.ball.b4,.mini-ball.b4,.neon.b4,.lotto-ball.b4,.num-ball.b4,.round-ball.b4{
    background:radial-gradient(circle at 30% 24%,#f3f4f6 0 13%,#a9b0bb 34%,#5f6978 74%,#303846 100%) !important;
}

.ball.green,.mini-ball.green,.neon.green,.lotto-ball.green,.num-ball.green,.round-ball.green,
.ball.mb5,.mini-ball.mb5,.neon.mb5,.lotto-ball.mb5,.num-ball.mb5,.round-ball.mb5,
.ball.b5,.mini-ball.b5,.neon.b5,.lotto-ball.b5,.num-ball.b5,.round-ball.b5{
    background:radial-gradient(circle at 30% 24%,#dcfce7 0 13%,#7fe78d 34%,#16a34a 74%,#0f6b31 100%) !important;
}

.ball.hit,
.mini-ball.hit,
.neon.hit,
.lotto-ball.hit,
.num-ball.hit,
.round-ball.hit,
.ball.matched,
.mini-ball.matched,
.neon.matched,
.lotto-ball.matched,
.num-ball.matched,
.round-ball.matched{
    transform:translateY(-1px);
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 5px rgba(255,215,80,.58),
        inset 0 3px 5px rgba(255,255,255,.33),
        inset 0 -11px 15px rgba(0,0,0,.22),
        0 10px 18px rgba(245,158,11,.32) !important;
}

.ball.bonus-hit,
.mini-ball.bonus-hit,
.neon.bonus-hit,
.lotto-ball.bonus-hit,
.num-ball.bonus-hit,
.round-ball.bonus-hit{
    transform:translateY(-1px);
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 5px rgba(249,115,22,.50),
        inset 0 3px 5px rgba(255,255,255,.33),
        inset 0 -11px 15px rgba(0,0,0,.22),
        0 10px 18px rgba(249,115,22,.30) !important;
}

.ball.no-hit,
.mini-ball.no-hit,
.neon.no-hit,
.lotto-ball.no-hit,
.num-ball.no-hit,
.round-ball.no-hit,
.ball.miss,
.mini-ball.miss,
.neon.miss,
.lotto-ball.miss,
.num-ball.miss,
.round-ball.miss{
    opacity:.58 !important;
    filter:saturate(.75) brightness(.95) !important;
}

.plus,
.bonus-plus,
.num-balls em,
.balls em,
.neon-balls em,
.mini-balls em{
    font-weight:950 !important;
    color:#8a5b00 !important;
    font-style:normal !important;
}

.side-item .ball,
.side-item .mini-ball,
.side-item .neon,
.recent-rounds .ball,
.recent-rounds .mini-ball,
.recent-rounds .neon,
.history-list .ball,
.history-list .mini-ball,
.history-list .neon,
.board .mini-ball,
.board-item .mini-ball{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    font-size:12px !important;
}

/* ===== pricing ===== */
.pricing-card,
.plan-card,
.price-box{
    overflow:hidden;
}

.pricing-card.featured,
.plan-card.featured,
.price-box.featured{
    background:linear-gradient(135deg,#fffaf0 0%,#fff 56%,#fff3b0 100%) !important;
    border-color:#d9a441 !important;
}

/* ===== mobile ===== */
@media(max-width:980px){
    .wrap,
    .container,
    .public-wrap{
        width:min(100% - 28px,1180px) !important;
    }
}

@media(max-width:768px){
    .page-head,
    .public-page-head,
    .board-page-head,
    .my-page-head,
    .pricing-head,
    .stat-head{
        padding:22px 18px !important;
        border-radius:18px !important;
    }

    .ball,
    .mini-ball,
    .neon,
    .lotto-ball,
    .num-ball,
    .round-ball{
        width:38px !important;
        height:38px !important;
        min-width:38px !important;
        font-size:14px !important;
    }

    .side-item .ball,
    .side-item .mini-ball,
    .side-item .neon,
    .recent-rounds .ball,
    .recent-rounds .mini-ball,
    .recent-rounds .neon,
    .board .mini-ball,
    .board-item .mini-ball{
        width:28px !important;
        height:28px !important;
        min-width:28px !important;
        font-size:11px !important;
    }

    table{
        font-size:13px;
    }
}