/* ClassicTheme — Luxury Gold/Black premium shortlink step design */
:root {
    --vs-bg: #0d0d0f;
    --vs-card: #17171b;
    --vs-border: rgba(212,175,110,0.18);
    --vs-primary: #d4af6e;
    --vs-primary2: #f0d9a8;
    --vs-text: #f4f1ea;
    --vs-muted: #a39d8f;
    --vs-radius: 16px;
}

body.captcha-page, body.layout-top-nav { background: var(--vs-bg) !important; }
.main-header .navbar, .main-header { background: #111114 !important; border-bottom: 1px solid var(--vs-border); }
.main-footer, footer.main-footer { background: #111114 !important; border-top: 1px solid var(--vs-border); color: var(--vs-muted) !important; }

.vs-wrap { max-width: 640px; margin: 40px auto; font-family: 'Georgia', 'Times New Roman', serif; }
.vs-card {
    background: var(--vs-card);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    overflow: hidden;
}
.vs-header {
    background: linear-gradient(135deg, #1a1a1e, #232326);
    border-bottom: 1px solid var(--vs-border);
    padding: 26px 28px;
    text-align: center;
}
.vs-header .vs-brand {
    font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
    color: var(--vs-primary); margin-bottom: 8px; font-family: 'Montserrat', sans-serif;
}
.vs-header .vs-title { font-size: 22px; font-weight: 700; color: var(--vs-text); }
.vs-body { padding: 30px 28px; color: var(--vs-text); }

.vs-progress-track { height: 3px; background: rgba(212,175,110,0.12); border-radius: 4px; margin-bottom: 26px; overflow: hidden; }
.vs-progress-fill { height: 100%; background: linear-gradient(90deg, var(--vs-primary), var(--vs-primary2)); transition: width .4s ease; }

.vs-article { border: 1px solid var(--vs-border); border-radius: 12px; padding: 16px 18px; margin-bottom: 22px; background: rgba(212,175,110,0.03); }
.vs-article h4 { margin: 0 0 8px; font-size: 15px; color: var(--vs-primary2); font-weight: 700; }
.vs-article p { margin: 0; font-size: 13px; color: var(--vs-muted); line-height: 1.7; }

.vs-countdown-wrap { text-align: center; margin: 26px 0; }
.vs-countdown-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; border-radius: 50%;
    border: 1px solid var(--vs-border); color: var(--vs-primary);
    font-size: 22px; font-weight: 700; margin-bottom: 10px; font-family: 'Montserrat', sans-serif;
}
.vs-countdown-label { font-size: 12px; letter-spacing: 1px; color: var(--vs-muted); text-transform: uppercase; }

.vs-final-btn, .btn-captcha.vs-final-btn {
    width: 100%; padding: 15px; border: 1px solid var(--vs-primary); border-radius: 8px;
    background: linear-gradient(135deg, var(--vs-primary), #b8925a); color: #14140f !important;
    font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
    font-family: 'Montserrat', sans-serif; cursor: pointer;
}
.vs-final-btn:disabled { background: #2a2a2e; border-color: rgba(212,175,110,0.15); color: var(--vs-muted) !important; cursor: not-allowed; }

.vs-note { text-align: center; font-size: 11px; color: var(--vs-muted); margin-top: 14px; letter-spacing: 0.5px; }

.vs-step-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--vs-border); border-radius: 10px; margin-bottom: 10px; background: rgba(255,255,255,0.015); }
.vs-step-row.is-done { border-color: var(--vs-primary); }
.vs-step-row.is-locked { opacity: 0.4; }
.vs-step-left { display: flex; align-items: center; gap: 12px; }
.vs-step-num { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--vs-primary); color: var(--vs-primary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.vs-step-row.is-done .vs-step-num { background: var(--vs-primary); color: #14140f; }
.vs-step-title { font-weight: 700; font-size: 13px; color: var(--vs-text); }
.vs-step-desc { font-size: 11px; color: var(--vs-muted); }
.vs-offer-btn { border: 1px solid var(--vs-primary); background: transparent; color: var(--vs-primary); border-radius: 6px; padding: 7px 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; }
.vs-offer-btn:disabled { border-color: rgba(255,255,255,0.1); color: var(--vs-muted); cursor: not-allowed; }

/* ===== Homepage ===== */
header.shorten { background: linear-gradient(160deg, #0d0d0f, #1a1712); padding: 140px 0 110px; position: relative; overflow: hidden; }
header.shorten::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:80px; background:var(--vs-bg); }
header.shorten .intro-lead-in { font-size:16px; color: var(--vs-primary); font-style: normal; letter-spacing:2px; text-transform:uppercase; }
header.shorten .intro-heading { font-size:44px; font-weight:800; color:#fff; margin-bottom:30px; font-family:'Georgia',serif; }
header.shorten .row .col-sm-8 { background:#fff; border-radius:100px; padding:6px; box-shadow:0 25px 60px rgba(0,0,0,0.4); }

section.steps { padding:70px 0 30px; background: var(--vs-bg); }
section.steps .step-img { width:70px; height:70px; margin:0 auto 16px; border-radius:50%; border:1px solid var(--vs-primary); display:flex; align-items:center; justify-content:center; }
section.steps .step-img svg { width:28px; height:28px; stroke: var(--vs-primary); }
section.steps .step-heading { color:#fff; font-size:15px; font-weight:700; }

.separator { background: var(--vs-bg); height:1px; }
.separator .container { border-top:1px solid var(--vs-border); }

section.features { padding:80px 0; background: var(--vs-bg); }
.section-subheading { color: var(--vs-primary); font-style: normal; letter-spacing:2px; text-transform:uppercase; font-size:12px; }
.section-heading { color:#fff; font-size:30px; font-weight:800; font-family:'Georgia',serif; }
.feature { background: var(--vs-card); border:1px solid var(--vs-border); border-radius:14px; padding:28px 24px; margin:10px; height:calc(100% - 20px); }
.feature-img { width:48px; height:48px; border-radius:50%; border:1px solid var(--vs-primary); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.feature-img svg { width:22px; height:22px; stroke: var(--vs-primary); }
.feature-heading { color:#fff; font-size:15px; font-weight:700; }
.feature-content { color: var(--vs-muted); font-size:13px; line-height:1.6; }

section.stats { padding:80px 0; background:#111114; }
.stat-img { width:56px; height:56px; margin:0 auto 12px; border-radius:50%; border:1px solid var(--vs-primary); display:flex; align-items:center; justify-content:center; }
.stat-img svg { width:24px; height:24px; stroke: var(--vs-primary); }
.stat-num { color:#fff; font-size:32px; font-weight:800; font-family:'Georgia',serif; }
.stat-text { color: var(--vs-muted); font-size:11px; letter-spacing:1px; text-transform:uppercase; }

section#contact { padding:80px 0; background: var(--vs-bg); }
section#contact form { background: var(--vs-card); border:1px solid var(--vs-border); border-radius:14px; padding:30px; }
section#contact .form-control { background: rgba(255,255,255,0.03); border:1px solid var(--vs-border); color:#fff; }

/* ===== Inner pages (Publisher Rates, Blog, dll yang pakai layout front tapi bukan homepage) ===== */
body.inner-page { background: var(--vs-bg); color: var(--vs-text); }
body.inner-page .container { color: var(--vs-text); }
body.inner-page h1, body.inner-page h2, body.inner-page h3, body.inner-page h4 { color: #fff; }
body.inner-page .advertising-rates { background: var(--vs-card); border: 1px solid var(--vs-border); border-radius: 16px; padding: 20px; margin: 30px 0; }
body.inner-page .nav-tabs { border-bottom: 1px solid var(--vs-border); }
body.inner-page .nav-tabs > li > a { color: var(--vs-muted); background: transparent; border: none; }
body.inner-page .nav-tabs > li.active > a { color: #fff !important; background: transparent !important; border: none !important; border-bottom: 2px solid var(--vs-primary) !important; }
body.inner-page .tab-content { padding-top: 16px; }
body.inner-page .table { color: var(--vs-text); }
body.inner-page .table > thead > tr > th { border-bottom: 2px solid var(--vs-border); color: var(--vs-muted); text-transform: uppercase; font-size: 12px; }
body.inner-page .table > tbody > tr > td { border-top: 1px solid var(--vs-border); }
body.inner-page .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,0.02); }
body.inner-page .blog-item { background: var(--vs-card); border: 1px solid var(--vs-border); border-radius: 16px; padding: 24px; margin-bottom: 20px; }
body.inner-page .blog-item h3, body.inner-page .blog-item h2 { color: #fff; }
body.inner-page .blog-content { color: var(--vs-muted); line-height: 1.7; }
body.inner-page .pagination > li > a, body.inner-page .pagination > li > span { background: var(--vs-card); border: 1px solid var(--vs-border); color: var(--vs-muted); }
body.inner-page .pagination > .active > a { background: var(--vs-primary); border-color: var(--vs-primary); color: #fff; }
body.inner-page .form-control { background: rgba(255,255,255,0.04); border: 1px solid var(--vs-border); color: var(--vs-text); }
body.inner-page .panel, body.inner-page .link-details .panel { background: var(--vs-card); border: 1px solid var(--vs-border); color: var(--vs-text); }

/* ===== Halaman statis (Publisher Rates, Terms, Privacy, dll) & Blog ===== */
header.vs-page-hero {
    background: var(--vs-bg-alt, #10152b) !important;
    background-image: none !important;
    padding: 70px 0 !important;
    text-align: center;
    border-bottom: 1px solid var(--vs-border);
}
header.vs-page-hero .intro-lead-in {
    font-size: 28px !important; font-weight: 800 !important; color: #fff !important;
    text-shadow: none !important; font-style: normal !important;
}

.vs-page-content {
    background: var(--vs-card); border: 1px solid var(--vs-border); border-radius: 18px;
    padding: 32px; margin: 36px 0; color: var(--vs-text);
}
.vs-page-content h1, .vs-page-content h2, .vs-page-content h3, .vs-page-content h4 { color: #fff; margin-top: 0; }
.vs-page-content p { color: var(--vs-muted); line-height: 1.75; }
.vs-page-content a { color: var(--vs-accent); }
.vs-page-content ul, .vs-page-content ol { color: var(--vs-muted); line-height: 1.8; }

/* Publisher Rates: tab pills custom, tahan dari cascade CSS lama */
.vs-page-content .advertising-rates { background: transparent; border: none; padding: 0; margin: 0; }
.vs-page-content .advertising-rates .nav-tabs { border-bottom: 1px solid var(--vs-border) !important; display: flex; flex-wrap: wrap; gap: 6px; }
.vs-page-content .advertising-rates .nav-tabs > li { float: none; }
.vs-page-content .advertising-rates .nav-tabs > li > a {
    border: 1px solid var(--vs-border) !important; border-radius: 100px !important;
    background: rgba(255,255,255,0.03) !important; color: var(--vs-muted) !important;
    padding: 8px 18px !important; margin: 0 !important; font-weight: 600; font-size: 13px;
}
.vs-page-content .advertising-rates .nav-tabs > li.active > a,
.vs-page-content .advertising-rates .nav-tabs > li.active > a:hover,
.vs-page-content .advertising-rates .nav-tabs > li.active > a:focus {
    background: linear-gradient(135deg, var(--vs-primary), var(--vs-accent)) !important;
    color: #fff !important; border-color: transparent !important;
}
.vs-page-content .advertising-rates .tab-content { padding-top: 22px; }
.vs-page-content .advertising-rates .table { background: transparent; }
.vs-page-content .advertising-rates .table > thead > tr > th {
    border-bottom: 2px solid var(--vs-border) !important; color: var(--vs-muted) !important;
    text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.5px;
}
.vs-page-content .advertising-rates .table > tbody > tr > td { border-top: 1px solid var(--vs-border) !important; color: var(--vs-text) !important; }

/* Blog list & single post */
.vs-blog-list .blog-item {
    background: rgba(255,255,255,0.02); border: 1px solid var(--vs-border); border-radius: 16px;
    padding: 26px; margin-bottom: 18px;
}
.vs-blog-list .blog-item .page-header { border-bottom: 1px solid var(--vs-border); margin-bottom: 12px; padding-bottom: 10px; }
.vs-blog-list .blog-item h3 a { color: #fff; text-decoration: none; }
.vs-blog-list .blog-item h3 a:hover { color: var(--vs-accent); }
.vs-blog-list .blog-content { color: var(--vs-muted); line-height: 1.7; }
.vs-blog-list .pagination > li > a, .vs-blog-list .pagination > li > span {
    background: var(--vs-card); border: 1px solid var(--vs-border); color: var(--vs-muted);
}
.vs-blog-list .pagination > .active > a { background: var(--vs-primary); border-color: var(--vs-primary); color: #fff; }