/* ================================================================
   THEMAINSMM — PREMIUM DARK THEME
   Style: Dark Cinema + Red Accent + 3D Buttons
   Font: Inter
   Author: Claude Theme Builder
   ================================================================ */

/* ============================================
   SECTION 1: GLOBAL BASE & BOOTSTRAP OVERRIDES
   ============================================ */

/* --- Bootstrap Reset Overrides --- */
body { background: var(--bg-body) !important; color: var(--text-primary) !important; font-family: var(--font) !important; }
a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-hover); text-decoration: none; }
h1, h2, h3, h4, h5, h6 { color: var(--text-primary); font-weight: 600; letter-spacing: -0.3px; text-wrap: balance; }
p { color: var(--text-secondary); }
hr { border-color: var(--border); }
label { color: var(--text-primary); font-weight: 500; }

/* --- Bootstrap .well override --- */
.well { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: none; color: var(--text-primary); }

/* --- Bootstrap .panel override --- */
.panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: none; }
.panel-heading { background: var(--bg-card) !important; border-bottom: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.panel-body { color: var(--text-primary); }
.panel-default { border-color: var(--border); }

/* --- Bootstrap .table override --- */
.table { color: var(--text-primary); }
.table > thead > tr > th { background: var(--bg-card); color: var(--text-secondary); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: normal; padding: 12px 16px; }
.table > tbody > tr > td { border-top: 1px solid var(--border); padding: 12px 16px; vertical-align: middle; }
.table > tbody > tr:hover > td { background: var(--bg-card-hover); }
.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,0.02); }
.table-bordered { border-color: var(--border); }
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border-color: var(--border); }

/* --- Bootstrap .form-control override --- */
.form-control {
    background: var(--bg-input) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    font-family: var(--font);
    font-size: 14px;
    height: auto;
    padding: 10px 14px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    outline: none;
}
.form-control::placeholder { color: var(--text-muted); }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238A8F9E' viewBox='0 0 16 16'%3e%3cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
textarea.form-control { min-height: 100px; resize: vertical; }

/* --- Bootstrap .btn overrides --- */
.btn-default { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); }
.btn-default:hover { background: var(--bg-card-hover); border-color: var(--border-hover); color: var(--text-primary); }
.btn-success { background: var(--success); border-color: var(--success); color: var(--on-success, #052E16); }
.btn-danger { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-warning { background: var(--warning); border-color: var(--warning); color: var(--on-warning, #1F1300); }
.btn-info { background: var(--info-strong, #2563EB); border-color: var(--info-strong, #2563EB); color: #fff; }

/* --- Bootstrap .alert override --- */
.alert-danger { background: var(--error-bg); border-color: rgba(239,68,68,0.2); color: var(--error); }
.alert-success { background: var(--success-bg); border-color: rgba(34,197,94,0.2); color: var(--success); }
.alert-warning { background: var(--warning-bg); border-color: rgba(245,158,11,0.2); color: var(--warning); }
.alert-info { background: var(--info-bg); border-color: rgba(59,130,246,0.2); color: var(--info); }
.close { color: var(--text-muted); opacity: 0.7; text-shadow: none; }
.close:hover { color: var(--text-primary); opacity: 1; }

/* --- Bootstrap .nav / .navbar override --- */
.navbar { border: none; margin-bottom: 0; }
.navbar-default { background: transparent; border: none; }
.nav > li > a { color: var(--text-secondary); }
.nav > li > a:hover, .nav > li > a:focus { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.nav-tabs { border-bottom: 1px solid var(--border); }
.nav-tabs > li > a { color: var(--text-secondary); border: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.nav-tabs > li > a:hover { border-color: transparent; background: rgba(255,255,255,0.03); color: var(--text-primary); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { background: var(--bg-card); border: 1px solid var(--border); border-bottom-color: var(--bg-card); color: var(--accent); }

/* --- Bootstrap .dropdown-menu override --- */
.dropdown-menu { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; }
.dropdown-menu > li > a { color: var(--text-secondary); padding: 8px 14px; border-radius: var(--radius-sm); }
.dropdown-menu > li > a:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.dropdown-menu .divider { background: var(--border); }

/* --- Bootstrap .badge / .label override --- */
.badge { background: var(--accent); color: #fff; font-weight: 600; border-radius: var(--radius-full); padding: 3px 8px; font-size: 11px; }
.label-default { background: var(--bg-card-hover); color: var(--text-secondary); }
.label-success { background: var(--success); }
.label-danger { background: var(--error); }
.label-warning { background: var(--warning); color: var(--on-warning, #1F1300); }
.label-info { background: var(--info); }

/* --- Bootstrap .pagination override --- */
.pagination > li > a, .pagination > li > span { background: var(--bg-card); border-color: var(--border); color: var(--text-secondary); }
.pagination > li > a:hover { background: var(--bg-card-hover); border-color: var(--border-hover); color: var(--text-primary); }
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > span { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination > .disabled > a, .pagination > .disabled > span { background: var(--bg-body); border-color: var(--border); color: var(--text-muted); }

/* --- Bootstrap .modal override --- */
.modal-content { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); color: var(--text-primary); }
.modal-header { border-bottom: 1px solid var(--border); }
.modal-footer { border-top: 1px solid var(--border); }
.modal-backdrop.in { opacity: 0.6; }
.modal-title { color: var(--text-primary); font-weight: 600; }

/* --- Bootstrap .tooltip / .popover override --- */
.tooltip-inner { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }

/* --- Misc Bootstrap overrides --- */
.breadcrumb { background: transparent; padding: 0; margin: 0; }
.breadcrumb > li + li:before { color: var(--text-muted); }
.breadcrumb > .active { color: var(--text-muted); }
.caret { border-top-color: var(--text-secondary); }
.text-muted { color: var(--text-muted) !important; }
.bg-primary { background: var(--accent) !important; }
code { background: var(--bg-input); color: var(--accent); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 6px; }
pre { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius-md); }
blockquote { border-left-color: var(--accent); color: var(--text-secondary); }

/* --- Global Utilities --- */
.btn-full { width: 100%; }
.page-wrapper.no-sidebar { margin-left: 0 !important; }
.page-wrapper.no-sidebar .main-content { max-width: 100%; padding: 24px 40px; }
@media (max-width: 768px) {
    .page-wrapper.no-sidebar .main-content { padding: 16px 12px; }
}
@media (max-width: 480px) {
    .page-wrapper.no-sidebar .main-content { padding: 12px 8px; }
}
.page-wrapper.no-sidebar .svc-col-action { display: none; }
.page-wrapper.no-sidebar .main-footer { margin-left: 0 !important; }

/* ============================================
   ADVANCED RESPONSIVE SYSTEM (All Devices)
   Breakpoints: 375 / 480 / 768 / 1024 / 1440
   ============================================ */

/* --- Container Widths --- */
.content-container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }

/* --- Responsive Typography Scale --- */
h1 { font-size: clamp(22px, 4vw, 36px); line-height: 1.2; }
h2 { font-size: clamp(18px, 3.5vw, 28px); line-height: 1.3; }
h3 { font-size: clamp(16px, 3vw, 22px); line-height: 1.4; }
h4 { font-size: clamp(14px, 2.5vw, 18px); line-height: 1.4; }
p { line-height: 1.7; max-width: 75ch; }

/* --- Responsive Grid Utilities --- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .grid-3 { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    .content-container { padding: 0 16px; }
}
@media (max-width: 480px) {
    .grid-4 { grid-template-columns: 1fr; }
    .content-container { padding: 0 12px; }
}

/* --- Touch Friendly (Mobile) --- */
@media (max-width: 768px) {
    body { overscroll-behavior: contain; -webkit-tap-highlight-color: transparent; }
    .btn, .btn-primary, .btn-3d, .btn-secondary, .btn-google {
        min-height: 48px;
        font-size: 15px;
        touch-action: manipulation;
    }
    .form-input { min-height: 48px; font-size: 16px; }
    .nav-link { min-height: 44px; touch-action: manipulation; }
    a, button { touch-action: manipulation; }
}

/* --- Tablet Landscape --- */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .signin-hero-grid, .signup-hero-grid { gap: 32px; }
    .signin-platform-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Large Desktop (1440+) --- */
@media (min-width: 1440px) {
    :root { --content-max: 1600px; --sidebar-width: 280px; }
    .signin-hero-grid, .signup-hero-grid { max-width: 1200px; gap: 60px; }
    .section-title { font-size: 32px; }
}

/* --- Ultra Wide (1920+) --- */
@media (min-width: 1920px) {
    :root { --content-max: 1800px; }
    .signin-hero, .signup-hero { padding: 60px 40px; }
}

/* ============================================
   ADVANCED ANIMATION SYSTEM
   Performance: transform/opacity only (GPU)
   Duration: 150-300ms micro, 400ms complex
   ============================================ */

/* --- Scroll-triggered Fade Variants --- */
.scroll-fade-up {
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-fade-up.revealed { opacity: 1; transform: translateY(0); }

.scroll-fade-left {
    opacity: 0; transform: translateX(-40px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-fade-left.revealed { opacity: 1; transform: translateX(0); }

.scroll-fade-right {
    opacity: 0; transform: translateX(40px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-fade-right.revealed { opacity: 1; transform: translateX(0); }

.scroll-zoom-in {
    opacity: 0; transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-zoom-in.revealed { opacity: 1; transform: scale(1); }

/* --- Stagger Children Animation --- */
.stagger-children > * {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger-children.revealed > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(2) { transition-delay: 50ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(3) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(4) { transition-delay: 150ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(5) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(6) { transition-delay: 250ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(7) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
.stagger-children.revealed > *:nth-child(8) { transition-delay: 350ms; opacity: 1; transform: translateY(0); }

/* --- Card Hover Effects --- */
.hover-lift { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.hover-glow { transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.hover-glow:hover { box-shadow: 0 0 30px var(--accent-glow); border-color: var(--border-active); }

.hover-scale { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.hover-scale:hover { transform: scale(1.03); }

/* --- Button Press Animation (3D) --- */
.btn-press { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.btn-press:active { transform: translateY(3px) scale(0.97); }

/* --- Text Gradient Animation --- */
.text-gradient {
    background: linear-gradient(135deg, var(--accent), #F59E0B, var(--accent));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease infinite;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* --- Typing Animation --- */
.typing-effect {
    overflow: hidden;
    border-right: 2px solid var(--accent);
    white-space: nowrap;
    animation: typing 3s steps(40) 1s forwards, blinkCaret 0.7s step-end infinite;
    width: 0;
}
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blinkCaret { 50% { border-color: transparent; } }

/* --- Counter Animation --- */
.count-up {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* --- Parallax (subtle, respects reduced-motion) --- */
.parallax-bg {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* --- Ripple Click Effect --- */
.ripple {
    position: relative; overflow: hidden;
}
.ripple::after {
    content: ''; position: absolute;
    width: 100%; padding-top: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 1; pointer-events: none;
}
.ripple:active::after {
    animation: rippleEffect 0.4s ease-out;
}
@keyframes rippleEffect {
    to { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* --- Magnetic Hover (subtle pull toward cursor) --- */
.magnetic { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

/* --- Focus Ring (Accessibility) --- */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* --- Skip to Content Link (Accessibility) --- */
.skip-to-content {
    position: absolute; top: -100px; left: 16px;
    background: var(--accent); color: #fff;
    padding: 8px 16px; border-radius: var(--radius-md);
    font-weight: 600; z-index: 9999;
    transition: top 0.2s ease;
}
.skip-to-content:focus { top: 16px; }

/* --- Reduced Motion: Disable ALL animations --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .scroll-reveal, .scroll-fade-up, .scroll-fade-left,
    .scroll-fade-right, .scroll-zoom-in, .stagger-children > * {
        opacity: 1 !important; transform: none !important;
    }
    .typing-effect { width: 100% !important; border-right: none !important; }
    .parallax-bg { transform: none !important; }
}

/* --- Print Styles --- */
@media print {
    .main-nav, .sidebar, .main-footer, .back-to-top, .toast-container,
    .preloader, .mobile-overlay, .top-bar { display: none !important; }
    .page-wrapper { margin-left: 0 !important; }
    body { background: #fff !important; color: #000 !important; }
    a { color: #000 !important; text-decoration: underline !important; }
}

/* --- Form Field Components (Reused across pages) --- */
.form-field { margin-bottom: 20px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.form-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.form-input-wrapper { position: relative; display: flex; align-items: center; }
.form-input-icon { position: absolute; left: 14px; color: var(--text-muted); font-size: 16px; pointer-events: none; z-index: 1; transition: color var(--transition-fast); }
.form-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 14px;
    padding: 12px 14px 12px 42px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.form-input:focus + .form-input-icon, .form-input:focus ~ .form-input-icon { color: var(--accent); }
.form-input::placeholder { color: var(--text-muted); }
.form-password-toggle {
    position: absolute; right: 12px;
    background: none; border: none;
    color: var(--text-muted); cursor: pointer;
    padding: 4px; font-size: 16px;
    transition: color var(--transition-fast);
}
.form-password-toggle:hover { color: var(--text-primary); }
.form-forgot { font-size: 13px; color: var(--accent); font-weight: 500; }
.form-forgot:hover { color: var(--accent-hover); }


/* ============================================
   SECTION 2: SIGNIN PAGE (Landing + Login)
   ============================================ */

/* --- Section Shared --- */
.section-title {
    font-size: 28px; font-weight: 700; color: var(--text-primary);
    text-align: center; margin-bottom: 8px; letter-spacing: -0.5px;
}
.section-subtitle {
    font-size: 15px; color: var(--text-secondary);
    text-align: center; margin: 0 auto 36px; max-width: 100%;
}
.text-accent { color: var(--accent); }

/* --- Page Container --- */
.signin-page {
    padding: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(220, 38, 38, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.03) 0%, transparent 50%);
}

/* ===== HERO SECTION: Login + Features ===== */
.signin-hero {
    min-height: calc(100vh - var(--nav-height)); min-height: calc(100dvh - var(--nav-height));
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px;
}
.signin-hero-grid {
    max-width: 1100px; width: 100%;
    display: grid;
    grid-template-columns: 440px minmax(0, 1fr);
    gap: 48px; align-items: center;
}

/* --- Login Card --- */
.signin-form-col { position: relative; z-index: 2; }
.signin-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 36px 32px;
    box-shadow: var(--shadow-lg);
    position: relative; overflow: hidden;
}
.signin-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover), var(--accent));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.signin-header { text-align: center; margin-bottom: 28px; }
.signin-title { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; letter-spacing: -0.5px; }
.signin-subtitle { font-size: 14px; color: var(--text-secondary); margin: 0; }
.signin-card .alert { margin-bottom: 20px; padding: 10px 14px; font-size: 13px; border-radius: var(--radius-md); }
.signin-captcha { display: flex; justify-content: center; margin-bottom: 20px; }

/* ===== DIVIDER ===== */
.signin-divider {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 18px;
}
.signin-divider-line {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-hover), transparent);
}
.signin-divider-text {
    font-size: 12px; font-weight: 500; color: var(--text-muted);
    text-transform: none; letter-spacing: normal;
    white-space: nowrap;
}

/* ===== CUSTOM GOOGLE BUTTON ===== */

/* Google OAuth: g_id_onload hidden, widget overlays custom button */
#g_id_onload {
    position: absolute !important;
    width: 0 !important; height: 0 !important;
    overflow: hidden !important;
}

/* Wrapper: positions Google iframe over our styled button */
.google-btn-wrap {
    position: relative;
    width: 100%;
}

/* Google iframe overlay: desktop only — mouse clicks pass through */
.g-widget-inner {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10;
    opacity: 0.01 !important;
    cursor: pointer !important;
    overflow: hidden !important;
    pointer-events: auto !important;
}
.g-widget-inner > div {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.g-widget-inner iframe {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
}

/* Mobile: hide overlay visually but keep in DOM for GIS initialization */
@media (max-width: 768px) {
    .g-widget-inner {
        visibility: hidden !important;
        position: absolute !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}

/* Mobile fallback modal: real Google button in styled popup */
.g-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999; background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.2s ease;
}
.g-modal-box {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 32px 28px; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5); max-width: 340px; width: 90%;
}
.g-modal-box p {
    color: var(--text-primary); font-size: 16px; font-weight: 600;
    margin-bottom: 20px; font-family: var(--font);
}
.g-modal-box #g-modal-btn { display: flex; justify-content: center; }
.g-modal-close {
    margin-top: 16px; background: none; border: 1px solid var(--border);
    color: var(--text-muted); padding: 8px 24px; border-radius: var(--radius-md);
    cursor: pointer; font-family: var(--font); font-size: 14px;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.g-modal-close:hover { border-color: var(--border-hover); color: var(--text-secondary); }

/* Mobile fallback: Google iframe with dark filter */
.g-mobile-google-visible {
    position: relative !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
    z-index: auto;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 4px;
    overflow: hidden;
}
.g-mobile-google-visible iframe {
    width: 100% !important;
    height: 48px !important;
    border-radius: 10px !important;
    filter: brightness(0.15) contrast(1.4) saturate(0) !important;
}

/* Custom Google button sits underneath */
.btn-google {
    position: relative;
    z-index: 1;
}

.btn-google {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; padding: 13px 24px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 0 rgba(0,0,0,0.2);
}

/* Shimmer sweep on hover */
.btn-google::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transition: left 0.5s ease;
}
.btn-google:hover::before { left: 100%; }

.btn-google:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 0 rgba(0,0,0,0.2), 0 8px 20px rgba(0,0,0,0.2);
}
.btn-google:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

/* Google icon bounce animation */
.google-icon {
    flex-shrink: 0;
    transition: transform var(--transition-base);
}
.btn-google:hover .google-icon {
    animation: googleBounce 0.5s ease forwards;
}

/* Google icon glow ring */
.btn-google::after {
    content: '';
    position: absolute; left: 20px; top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(66,133,244,0.12) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-base);
}
.btn-google:hover::after { opacity: 1; }

@keyframes googleBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.2) rotate(-8deg); }
    60% { transform: scale(0.95) rotate(3deg); }
    100% { transform: scale(1.1) rotate(-3deg); }
}

/* Google button responsive */
@media (max-width: 480px) {
    .btn-google { padding: 12px 16px; font-size: 13px; }
}

/* Google button containers — dark theme blend */
.signin-card .g_id_signin { margin-bottom: 16px; }
.google-btn-container {
    display: flex; justify-content: center; width: 100%;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 6px;
    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
    position: relative; overflow: hidden;
}
.google-btn-container:hover {
    border-color: var(--border-hover);
    box-shadow: 0 3px 12px rgba(0,0,0,0.3);
}
.google-btn-container .g_id_signin { width: 100%; }
.google-btn-container iframe {
    border-radius: var(--radius-sm) !important;
    color-scheme: dark !important;
}
/* Dark mode filter for Google's white iframe button */
.google-btn-container .g_id_signin iframe {
    filter: invert(0.88) hue-rotate(180deg) !important;
    border-radius: 6px !important;
}
.google-btn-container::after {
    content: ''; position: absolute; inset: 0;
    border-radius: var(--radius-md);
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.signin-card .btn-full { padding: 14px 24px; font-size: 15px; border-radius: var(--radius-md); gap: 8px; }
/* Mini feature cards section (below trust bar) */
.signin-mini-section { padding: 40px 24px; max-width: 1100px; margin: 0 auto; }
.signin-mini-cards {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.mini-card {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px; border-radius: var(--radius-md);
    background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.mini-card:hover { border-color: var(--border-hover); background: rgba(255,255,255,0.05); }
.mini-card i { font-size: 20px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.mini-card strong { font-size: 12px; color: var(--text-primary); display: block; }
.mini-card p { font-size: 10px; color: var(--text-muted); margin: 2px 0 0; line-height: 1.3; }

@media (max-width: 1024px) { .signin-mini-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .signin-mini-cards { grid-template-columns: 1fr; } .signin-mini-section { padding: 30px 12px; } }

.signin-footer { text-align: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.signin-footer-text { font-size: 14px; color: var(--text-secondary); }
.signin-footer-link { font-size: 14px; font-weight: 600; color: var(--accent); margin-left: 4px; }
.signin-footer-link:hover { color: var(--accent-hover); }

/* --- Features Column --- */
.signin-features { padding: 20px 0; }
.signin-features-title {
    font-size: 36px; font-weight: 800; color: var(--text-primary);
    line-height: 1.2; margin-bottom: 12px; letter-spacing: -1px;
}
.signin-features-desc {
    font-size: 16px; color: var(--text-secondary); line-height: 1.7;
    margin-bottom: 28px; max-width: 480px;
}

/* Stats Row */
.signin-stats {
    display: flex; gap: 24px; margin-bottom: 32px;
    flex-wrap: wrap;
}
.signin-stat {
    display: flex; flex-direction: column;
}
.signin-stat-number {
    font-size: 28px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px; line-height: 1;
}
.signin-stat-label {
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    text-transform: none; letter-spacing: normal; margin-top: 4px;
}

/* Feature Cards */
.signin-feature-cards {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.signin-fcard {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 16px; border-radius: var(--radius-md);
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}
.signin-fcard:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.signin-fcard-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
    border-radius: var(--radius-sm); font-size: 18px;
}
.signin-fcard-text h4 {
    font-size: 14px; font-weight: 600; color: var(--text-primary);
    margin: 0 0 4px;
}
.signin-fcard-text p {
    font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5;
}

/* ===== TRUST BAR ===== */
.signin-trust {
    padding: 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.01);
}
.signin-trust-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    gap: 32px; flex-wrap: wrap;
}
.signin-trust-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    white-space: nowrap;
}
.signin-trust-item i { color: var(--accent); font-size: 16px; }

/* ===== BLOG CARDS ===== */
.signin-blogs {
    padding: 60px 24px; max-width: 1100px; margin: 0 auto;
}
.signin-blog-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.signin-blog-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}
.signin-blog-card:hover {
    border-color: var(--border-hover); transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.signin-blog-img {
    height: 160px; display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.signin-blog-body { padding: 20px; }
.signin-blog-tag {
    display: inline-block; padding: 3px 10px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 11px; font-weight: 700; text-transform: none;
    letter-spacing: normal; border-radius: var(--radius-full);
    margin-bottom: 10px;
}
.signin-blog-title {
    font-size: 16px; font-weight: 700; color: var(--text-primary);
    margin: 0 0 8px; line-height: 1.4;
}
.signin-blog-excerpt {
    font-size: 13px; color: var(--text-secondary); line-height: 1.6;
    margin: 0 0 14px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.signin-blog-link {
    font-size: 13px; font-weight: 600; color: var(--accent);
    display: inline-flex; align-items: center; gap: 4px;
    transition: gap var(--transition-fast);
}
.signin-blog-link:hover { gap: 8px; color: var(--accent-hover); }

/* ===== SEO CONTENT ===== */
.signin-seo {
    padding: 60px 24px; max-width: 1100px; margin: 0 auto;
}
.signin-seo-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.signin-seo-block {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px;
}
.signin-seo-block h2 {
    font-size: 20px; font-weight: 700; margin-bottom: 14px;
    color: var(--text-primary);
}
.signin-seo-block p {
    font-size: 14px; color: var(--text-secondary); line-height: 1.7;
    margin-bottom: 12px;
}
.signin-seo-list { list-style: none; padding: 0; }
.signin-seo-list li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; font-size: 14px; color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
.signin-seo-list li:last-child { border-bottom: none; }
.signin-seo-list li i { color: var(--success); font-size: 16px; flex-shrink: 0; }

/* --- Auth Content --- */
.signin-auth-content {
    padding: 40px 24px; max-width: 1100px; margin: 0 auto;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 14px; color: var(--text-secondary); line-height: 1.7;
}

/* ===== FAQ SECTION ===== */
.signin-faq {
    padding: 60px 24px; max-width: 800px; margin: 0 auto;
}
.signin-faq-list { display: flex; flex-direction: column; gap: 10px; }
.signin-faq-item {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); overflow: hidden;
    transition: border-color var(--transition-fast);
}
.signin-faq-item[open] { border-color: var(--border-active); }
.signin-faq-q {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px; cursor: pointer;
    font-size: 15px; font-weight: 600; color: var(--text-primary);
    list-style: none; transition: color var(--transition-fast);
}
.signin-faq-q::-webkit-details-marker { display: none; }
.signin-faq-q i { color: var(--accent); font-size: 16px; transition: transform var(--transition-base); }
.signin-faq-item[open] .signin-faq-q i { transform: rotate(45deg); }
.signin-faq-q:hover { color: var(--accent); }
.signin-faq-a {
    padding: 0 20px 16px 46px;
    font-size: 14px; color: var(--text-secondary); line-height: 1.7;
}

/* ===== BOTTOM CTA ===== */
.signin-cta {
    padding: 60px 24px 80px;
}
.signin-cta-card {
    max-width: 700px; margin: 0 auto;
    text-align: center; padding: 48px 32px;
    background: linear-gradient(135deg, rgba(220,38,38,0.08) 0%, rgba(59,130,246,0.06) 100%);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-xl);
    position: relative; overflow: hidden;
}
.signin-cta-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(220,38,38,0.1) 0%, transparent 60%);
    pointer-events: none;
}
.signin-cta-card h2 {
    font-size: 28px; font-weight: 700; margin-bottom: 10px;
    color: var(--text-primary); position: relative;
}
.signin-cta-card p {
    font-size: 16px; color: var(--text-secondary); margin-bottom: 24px;
    position: relative;
}
.signin-cta-card .btn { position: relative; }

/* ===== PLATFORMS SECTION ===== */
.signin-platforms { padding: 60px 24px; max-width: 1200px; margin: 0 auto; }
.signin-platform-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.signin-platform-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px; text-align: center;
    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base); position: relative; overflow: hidden;
}
.signin-platform-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; opacity: 0; transition: opacity var(--transition-base);
}
.signin-platform-card:hover {
    border-color: var(--border-hover); transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.signin-platform-card:hover::before { opacity: 1; }
.platform-instagram::before { background: linear-gradient(90deg, #833AB4, #FD1D1D, #F77737); }
.platform-youtube::before { background: #FF0000; }
.platform-tiktok::before { background: linear-gradient(90deg, #00F2EA, #FF0050); }
.platform-telegram::before { background: #0088CC; }
.platform-facebook::before { background: #1877F2; }
.platform-twitter::before { background: #1DA1F2; }
.platform-spotify::before { background: #1DB954; }
.platform-threads::before { background: linear-gradient(90deg, #000, #333); }

.signin-platform-icon {
    width: 56px; height: 56px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); font-size: 28px;
}
.platform-instagram .signin-platform-icon { background: rgba(225, 48, 108, 0.1); color: #E1306C; }
.platform-youtube .signin-platform-icon { background: rgba(255, 0, 0, 0.1); color: #FF0000; }
.platform-tiktok .signin-platform-icon { background: rgba(0, 242, 234, 0.1); color: #00F2EA; }
.platform-telegram .signin-platform-icon { background: rgba(0, 136, 204, 0.1); color: #0088CC; }
.platform-facebook .signin-platform-icon { background: rgba(24, 119, 242, 0.1); color: #1877F2; }
.platform-twitter .signin-platform-icon { background: rgba(29, 161, 242, 0.1); color: #1DA1F2; }
.platform-spotify .signin-platform-icon { background: rgba(29, 185, 84, 0.1); color: #1DB954; }
.platform-threads .signin-platform-icon { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }

.signin-platform-card h3 {
    font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px;
}
.signin-platform-card p {
    font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px;
}
.signin-platform-services {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 14px;
}
.platform-chip {
    display: inline-block; padding: 3px 10px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 11px; font-weight: 500; color: var(--text-secondary);
}
.signin-platform-price {
    font-size: 13px; color: var(--text-secondary);
}
.signin-platform-price strong {
    color: var(--accent); font-weight: 700;
}

/* ===== HOW IT WORKS ===== */
.signin-how { padding: 60px 24px; max-width: 900px; margin: 0 auto; }
.signin-how-grid {
    display: flex; align-items: center; justify-content: center;
    gap: 0;
}
.signin-how-step {
    flex: 1; text-align: center; padding: 28px 20px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    position: relative; transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}
.signin-how-step:hover {
    border-color: var(--border-active); transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.signin-how-number {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    width: 28px; height: 28px;
    background: var(--accent); color: #fff;
    font-size: 13px; font-weight: 700;
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-glow);
}
.signin-how-icon {
    width: 52px; height: 52px; margin: 8px auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
    border-radius: var(--radius-md); font-size: 24px;
}
.signin-how-step h3 {
    font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px;
}
.signin-how-step p {
    font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0;
}
.signin-how-connector {
    width: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 18px;
}

/* ===== TESTIMONIALS ===== */
.signin-testimonials { padding: 60px 24px; max-width: 1100px; margin: 0 auto; }
.signin-testi-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.signin-testi-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px;
    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}
.signin-testi-card:hover {
    border-color: var(--border-hover); transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.signin-testi-stars {
    display: flex; gap: 3px; margin-bottom: 14px; color: #FBBF24; font-size: 14px;
}
.signin-testi-text {
    font-size: 14px; color: var(--text-secondary); line-height: 1.7;
    margin-bottom: 16px; font-style: italic;
}
.signin-testi-author {
    display: flex; align-items: center; gap: 12px;
}
.signin-testi-avatar {
    width: 40px; height: 40px;
    background: var(--accent-soft); color: var(--accent);
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
}
.signin-testi-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.signin-testi-role { font-size: 12px; color: var(--text-muted); }

/* ===== SERVICES OVERVIEW ===== */
.signin-services { padding: 60px 24px; max-width: 1100px; margin: 0 auto; }
.signin-services-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.signin-svc-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px;
    text-align: center; transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}
.signin-svc-card:hover {
    border-color: var(--border-hover); transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.signin-svc-card i {
    font-size: 28px; color: var(--accent); margin-bottom: 12px; display: block;
}
.signin-svc-card h4 {
    font-size: 15px; font-weight: 600; color: var(--text-primary);
    margin: 0 0 8px;
}
.signin-svc-card p {
    font-size: 12px; color: var(--text-muted); line-height: 1.6; margin: 0;
}

/* ===== PAYMENT METHODS ===== */
.signin-payments { padding: 60px 24px; max-width: 1100px; margin: 0 auto; }
.signin-payment-grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.signin-pay-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 20px 12px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.signin-pay-card:hover {
    border-color: var(--border-hover); background: var(--bg-card-hover);
}
.signin-pay-card i {
    font-size: 24px; color: var(--text-secondary);
}
.signin-pay-card span {
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    text-align: center;
}

/* ===== FULL ARTICLES SECTION ===== */
.signin-articles { padding: 60px 24px; max-width: 1100px; margin: 0 auto; }
.signin-article-list { display: flex; flex-direction: column; gap: 32px; }
.signin-article {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 32px;
    transition: border-color var(--transition-base);
}
.signin-article:hover { border-color: var(--border-hover); }
.signin-article-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.signin-article-tag {
    display: inline-block; padding: 4px 14px;
    font-size: 12px; font-weight: 700; text-transform: none;
    letter-spacing: normal; border-radius: var(--radius-full);
}
.platform-instagram-tag { background: rgba(225,48,108,0.1); color: #E1306C; }
.platform-youtube-tag { background: rgba(255,0,0,0.1); color: #FF4444; }
.platform-tiktok-tag { background: rgba(0,242,234,0.1); color: #00F2EA; }
.platform-telegram-tag { background: rgba(0,136,204,0.1); color: #0088CC; }
.platform-facebook-tag { background: rgba(24,119,242,0.1); color: #1877F2; }
.platform-business-tag { background: var(--accent-soft); color: var(--accent); }

.signin-article-date {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-muted);
}
.signin-article-title {
    font-size: 22px; font-weight: 700; color: var(--text-primary);
    line-height: 1.3; margin-bottom: 20px;
}
.signin-article-content h3 {
    font-size: 17px; font-weight: 700; color: var(--text-primary);
    margin: 24px 0 10px; padding-left: 12px;
    border-left: 3px solid var(--accent);
}
.signin-article-content p {
    font-size: 14px; color: var(--text-secondary);
    line-height: 1.8; margin-bottom: 12px;
}
.signin-article-list-items {
    list-style: none; padding: 0; margin: 0 0 16px;
}
.signin-article-list-items li {
    padding: 8px 0 8px 20px; font-size: 14px;
    color: var(--text-secondary); line-height: 1.7;
    position: relative; border-bottom: 1px solid var(--border);
}
.signin-article-list-items li:last-child { border-bottom: none; }
.signin-article-list-items li::before {
    content: ''; position: absolute; left: 0; top: 16px;
    width: 8px; height: 8px; background: var(--accent);
    border-radius: 50%;
}
.signin-article-list-items li strong { color: var(--text-primary); }

.signin-article-services {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 8px; margin-top: 16px;
}
.article-svc {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; font-size: 13px;
    background: rgba(255,255,255,0.02); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-secondary);
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.article-svc:hover {
    background: var(--accent-soft); border-color: var(--border-active);
    color: var(--accent);
}
.article-svc i { color: var(--accent); font-size: 14px; flex-shrink: 0; }

/* Article Calculator */
.signin-article-calculator {
    background: rgba(255,255,255,0.02); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 20px; margin-top: 16px;
}
.calc-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--border);
    font-size: 14px; color: var(--text-secondary);
}
.calc-row:last-child { border-bottom: none; font-size: 16px; }
.calc-row strong { color: var(--text-primary); }

/* ===== COMPARISON TABLE ===== */
.signin-compare { padding: 60px 24px; max-width: 900px; margin: 0 auto; }
.signin-compare-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.signin-compare-table {
    width: 100%; border-collapse: collapse;
    background: var(--bg-card);
}
.signin-compare-table th, .signin-compare-table td {
    padding: 14px 20px; text-align: left;
    font-size: 14px; border-bottom: 1px solid var(--border);
}
.signin-compare-table thead th {
    background: rgba(255,255,255,0.03);
    font-size: 13px; font-weight: 700; text-transform: none;
    letter-spacing: normal; color: var(--text-secondary);
}
.signin-compare-table td { color: var(--text-secondary); }
.compare-highlight { background: rgba(220,38,38,0.04) !important; }
.compare-highlight strong { color: var(--accent); }
thead .compare-highlight { color: var(--accent) !important; }
.signin-compare-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.signin-compare-table .text-accent { color: var(--accent); }

/* ===== SEO DETAIL SECTION ===== */
.signin-seo-detail { padding: 60px 24px; max-width: 1100px; margin: 0 auto; }
.signin-seo-full {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 36px;
}
.signin-seo-full h2 {
    font-size: 24px; font-weight: 700; color: var(--text-primary);
    margin-bottom: 16px;
}
.signin-seo-full h3 {
    font-size: 18px; font-weight: 700; color: var(--text-primary);
    margin: 28px 0 12px; padding-left: 12px;
    border-left: 3px solid var(--accent);
}
.signin-seo-full p {
    font-size: 14px; color: var(--text-secondary);
    line-height: 1.8; margin-bottom: 14px;
}

/* ===== SEO KEYWORDS CLOUD ===== */
.signin-keywords { padding: 40px 24px 60px; max-width: 1100px; margin: 0 auto; }
.signin-keywords-cloud {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    margin-top: 24px;
}
.keyword-tag {
    display: inline-block; padding: 6px 16px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 13px; font-weight: 500; color: var(--text-secondary);
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.keyword-tag:hover {
    background: var(--accent-soft); border-color: var(--border-active);
    color: var(--accent);
}

/* ===== SIGNIN RESPONSIVE ===== */
@media (max-width: 1024px) {
    .signin-hero-grid { grid-template-columns: minmax(0, 1fr); max-width: 500px; margin: 0 auto; }
    .signin-features-col { order: -1; }
    .signin-features-title { font-size: 28px; }
    .signin-feature-cards { grid-template-columns: 1fr 1fr; }
    .signin-platform-grid { grid-template-columns: repeat(2, 1fr); }
    .signin-services-grid { grid-template-columns: repeat(2, 1fr); }
    .signin-payment-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .signin-blog-grid { grid-template-columns: 1fr; max-width: 100%; margin: 0 auto; }
    .signin-seo-grid { grid-template-columns: 1fr; }
    .signin-trust-inner { gap: 20px; justify-content: flex-start; }
    .signin-feature-cards { grid-template-columns: 1fr; }
    .signin-testi-grid { grid-template-columns: 1fr; }
    .signin-how-grid { flex-direction: column; gap: 16px; }
    .signin-how-connector { transform: rotate(90deg); width: auto; }
    .section-title { font-size: 22px; }
    .section-subtitle { font-size: 13px; }
    .signin-platform-grid { grid-template-columns: 1fr 1fr; max-width: 100%; }
    .signin-services-grid { grid-template-columns: 1fr; max-width: 100%; }
    .signin-payment-grid { grid-template-columns: repeat(2, 1fr); }

    /* Articles responsive */
    .signin-articles { padding: 40px 12px; }
    .signin-article { padding: 20px 16px; border-radius: var(--radius-md); }
    .signin-article-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .signin-article-title { font-size: 18px; }
    .signin-article-content h3 { font-size: 15px; }
    .signin-article-content p { font-size: 13px; }
    .signin-article-services { grid-template-columns: 1fr; }
    .signin-article-list-items li { font-size: 13px; padding: 6px 0 6px 16px; }
    .signin-article-calculator { padding: 16px; }
    .calc-row { font-size: 13px; }

    /* SEO detail responsive */
    .signin-seo-detail { padding: 40px 12px; }
    .signin-seo-full { padding: 20px 16px; }
    .signin-seo-full h2 { font-size: 18px; }
    .signin-seo-full p { font-size: 13px; }

    /* Compare table responsive */
    .signin-compare { padding: 40px 12px; }
    .signin-compare-table th, .signin-compare-table td { padding: 10px 12px; font-size: 12px; }

    /* FAQ responsive */
    .signin-faq-q { font-size: 14px; padding: 14px 16px; }
    .signin-faq-a { padding: 0 16px 14px 36px; font-size: 13px; }
}
@media (max-width: 480px) {
    .signin-hero { padding: 24px 12px; }
    .signin-card { padding: 28px 16px; border-radius: var(--radius-lg); }
    .signin-title { font-size: 20px; }
    .signin-features-title { font-size: 22px; }
    .signin-stats { gap: 12px; }
    .signin-stat-number { font-size: 20px; }
    .signin-blogs { padding: 30px 10px; }
    .signin-seo { padding: 30px 10px; }
    .signin-faq { padding: 30px 10px; }
    .signin-cta { padding: 30px 10px 50px; }
    .signin-cta-card { padding: 24px 16px; }
    .signin-cta-card h2 { font-size: 20px; }
    .signin-platforms { padding: 30px 10px; }
    .signin-how { padding: 30px 10px; }
    .signin-testimonials { padding: 30px 10px; }
    .signin-services { padding: 30px 10px; }
    .signin-payments { padding: 30px 10px; }
    .signin-keywords { padding: 24px 10px 30px; }
    .keyword-tag { font-size: 11px; padding: 4px 10px; }

    /* Cards tighter on small phones */
    .signin-article { padding: 16px 12px; }
    .signin-article-title { font-size: 16px; }
    .signin-article-list { gap: 20px; }
    .signin-seo-full { padding: 16px 12px; }
    .signin-seo-block { padding: 20px 16px; }
    .signin-platform-grid { grid-template-columns: 1fr; }
    .signin-platform-card { padding: 20px 16px; }
    .signin-blog-card .signin-blog-body { padding: 14px; }
    .signin-blog-title { font-size: 14px; }
    .signin-payment-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .signin-pay-card { padding: 14px 8px; }
    .signin-pay-card i { font-size: 20px; }
    .signin-pay-card span { font-size: 11px; }

    /* Comparison table scroll */
    .signin-compare-table-wrap { -webkit-overflow-scrolling: touch; }
    .signin-compare-table { min-width: 500px; }
}


/* ============================================
   SECTION 3: SIGNUP PAGE
   ============================================ */

/* --- Page Container --- */
.signup-page {
    padding: 0;
    background:
        radial-gradient(ellipse at 80% 50%, rgba(220, 38, 38, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(59, 130, 246, 0.03) 0%, transparent 50%);
}

/* ===== HERO: Form + Benefits ===== */
.signup-hero {
    min-height: calc(100vh - var(--nav-height)); min-height: calc(100dvh - var(--nav-height));
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px;
}
.signup-hero-grid {
    max-width: 1100px; width: 100%;
    display: grid; grid-template-columns: 480px 1fr;
    gap: 48px; align-items: start;
}

/* --- Signup Card --- */
.signup-form-col { position: relative; z-index: 2; }
.signup-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 36px 32px;
    box-shadow: var(--shadow-lg);
    position: relative; overflow: hidden;
}
.signup-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent), #F59E0B, var(--accent));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.signup-header { text-align: center; margin-bottom: 28px; }
.signup-title { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; letter-spacing: -0.5px; }
.signup-subtitle { font-size: 14px; color: var(--text-secondary); margin: 0; }
.signup-card .alert { margin-bottom: 20px; }
.signup-captcha { display: flex; justify-content: center; }
.signup-card .btn-full { padding: 14px 24px; font-size: 15px; gap: 8px; }

/* --- Custom Checkbox --- */
.signup-terms { margin-bottom: 20px; }
.signup-checkbox-label {
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer; font-size: 13px; color: var(--text-secondary); line-height: 1.5;
}
.signup-checkbox { display: none; }
.signup-checkbox-custom {
    width: 20px; height: 20px; flex-shrink: 0;
    border: 2px solid var(--border-hover);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
    color: transparent; font-size: 12px; margin-top: 1px;
}
.signup-checkbox:checked + .signup-checkbox-custom {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.signup-checkbox-text { flex: 1; }
.signup-terms-link { color: var(--accent); font-weight: 600; }
.signup-terms-link:hover { color: var(--accent-hover); text-decoration: underline; }

/* --- Signup Footer --- */
.signup-footer {
    text-align: center; margin-top: 24px; padding-top: 20px;
    border-top: 1px solid var(--border);
}
.signup-footer-text { font-size: 14px; color: var(--text-secondary); }
.signup-footer-link { font-size: 14px; font-weight: 600; color: var(--accent); margin-left: 4px; }
.signup-footer-link:hover { color: var(--accent-hover); }

/* --- Benefits Column --- */
.signup-benefits { padding: 20px 0; }
.signup-benefits-title {
    font-size: 32px; font-weight: 800; color: var(--text-primary);
    line-height: 1.2; margin-bottom: 10px; letter-spacing: -0.5px;
}
.signup-benefits-desc {
    font-size: 15px; color: var(--text-secondary); line-height: 1.7;
    margin-bottom: 28px;
}

/* Benefit Items */
.signup-benefit-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.signup-benefit-item {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px; border-radius: var(--radius-md);
    background: rgba(255,255,255,0.02); border: 1px solid var(--border);
    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}
.signup-benefit-item:hover {
    background: rgba(255,255,255,0.04); border-color: var(--border-hover);
    transform: translateX(4px);
}
.signup-benefit-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
    border-radius: var(--radius-sm); font-size: 18px;
}
.signup-benefit-text h4 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 4px; }
.signup-benefit-text p { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* Stats Bar */
.signup-stats-bar { display: flex; gap: 12px; flex-wrap: wrap; }
.signup-stat-chip {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: var(--radius-full);
    background: var(--accent-soft); border: 1px solid var(--border-active);
    font-size: 13px; font-weight: 600; color: var(--accent);
}
.signup-stat-chip i { font-size: 14px; }

/* ===== TRUST BAR ===== */
.signup-trust {
    padding: 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.01);
}
.signup-trust-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    gap: 32px; flex-wrap: wrap;
}
.signup-trust-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.signup-trust-item i { color: var(--accent); font-size: 16px; }

/* ===== STEPS ===== */
.signup-steps { padding: 60px 24px; max-width: 900px; margin: 0 auto; }
.signup-steps-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.signup-step-card {
    text-align: center; padding: 28px 20px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); position: relative;
    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}
.signup-step-card:hover {
    border-color: var(--border-active); transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.signup-step-num {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    width: 24px; height: 24px;
    background: var(--accent); color: #fff;
    font-size: 12px; font-weight: 700;
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
}
.signup-step-icon { font-size: 28px; color: var(--accent); margin-bottom: 12px; }
.signup-step-card h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.signup-step-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* ===== PLATFORM ICONS ===== */
.signup-platforms { padding: 60px 24px; max-width: 800px; margin: 0 auto; }
.signup-platform-icons {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 24px;
}
.signup-plat-icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); font-size: 24px; color: var(--text-secondary);
    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}
.signup-plat-icon:hover {
    border-color: var(--border-active); color: var(--accent);
    transform: translateY(-3px); box-shadow: var(--shadow-md);
}

/* ===== SEO CONTENT ===== */
.signup-seo { padding: 60px 24px; max-width: 1100px; margin: 0 auto; }
.signup-seo-content {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 32px;
}
.signup-seo-content h2 { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; }
.signup-seo-content h3 { font-size: 17px; font-weight: 700; color: var(--text-primary); margin: 24px 0 10px; padding-left: 12px; border-left: 3px solid var(--accent); }
.signup-seo-content p { font-size: 14px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 12px; }
.signup-seo-list { list-style: none; padding: 0; }
.signup-seo-list li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; font-size: 14px; color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
.signup-seo-list li:last-child { border-bottom: none; }
.signup-seo-list li i { color: var(--success); font-size: 16px; flex-shrink: 0; }

/* ===== SIGNUP CTA ===== */
.signup-cta { padding: 60px 24px 80px; }
.signup-cta-card {
    max-width: 600px; margin: 0 auto;
    text-align: center; padding: 40px 28px;
    background: linear-gradient(135deg, rgba(220,38,38,0.08) 0%, rgba(59,130,246,0.06) 100%);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-xl);
}
.signup-cta-card h2 { font-size: 26px; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
.signup-cta-card p { font-size: 15px; color: var(--text-secondary); margin-bottom: 20px; }

/* ===== SIGNUP RESPONSIVE ===== */
@media (max-width: 1024px) {
    .signup-hero-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
    .signup-benefits-col { order: -1; }
    .signup-benefits-title { font-size: 26px; }
}
@media (max-width: 768px) {
    .signup-steps-grid { grid-template-columns: 1fr; max-width: 350px; margin: 0 auto; }
    .signup-trust-inner { gap: 20px; justify-content: flex-start; }
}
@media (max-width: 480px) {
    .signup-hero { padding: 24px 12px; }
    .signup-card { padding: 28px 20px; border-radius: var(--radius-lg); }
    .signup-title { font-size: 20px; }
    .signup-benefits-title { font-size: 22px; }
    .signup-steps { padding: 40px 12px; }
    .signup-platforms { padding: 40px 12px; }
    .signup-seo { padding: 40px 12px; }
    .signup-cta { padding: 40px 12px 60px; }
    .signup-stat-chip { font-size: 11px; padding: 6px 10px; }
}


/* ============================================
   SECTION 4: RESET PASSWORD PAGE
   ============================================ */

.reset-page {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(220, 38, 38, 0.04) 0%, transparent 50%);
}

/* --- Hero --- */
.reset-hero {
    min-height: calc(100vh - var(--nav-height)); min-height: calc(100dvh - var(--nav-height));
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px;
}
.reset-wrapper { width: 100%; max-width: 520px; }

/* --- Reset Card --- */
.reset-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    box-shadow: var(--shadow-lg);
    position: relative; overflow: hidden;
}
.reset-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--info), var(--accent), var(--info));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* Header with icon */
.reset-header { text-align: center; margin-bottom: 28px; }
.reset-icon-circle {
    width: 72px; height: 72px; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent-soft), rgba(59,130,246,0.1));
    border: 1px solid var(--border-active);
    border-radius: 50%; font-size: 32px; color: var(--accent);
}
.reset-title {
    font-size: 24px; font-weight: 700; color: var(--text-primary);
    margin: 0 0 8px; letter-spacing: -0.5px;
}
.reset-subtitle {
    font-size: 14px; color: var(--text-secondary); margin: 0;
    max-width: 360px; margin: 0 auto; line-height: 1.6;
}

/* Captcha */
.reset-captcha { display: flex; justify-content: center; }

/* Footer */
.reset-footer {
    text-align: center; margin-top: 24px; padding-top: 20px;
    border-top: 1px solid var(--border);
}
.reset-back-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 500; color: var(--text-secondary);
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast), gap var(--transition-fast);
}
.reset-back-link:hover { color: var(--accent); gap: 10px; }

/* --- Info Cards Grid --- */
.reset-info-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 14px; margin-top: 24px;
}
.reset-info-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 18px; text-align: center;
    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}
.reset-info-card:hover {
    border-color: var(--border-hover); transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.reset-info-card i { font-size: 24px; color: var(--accent); margin-bottom: 10px; display: block; }
.reset-info-card h4 { font-size: 13px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.reset-info-card p { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* --- Trust Bar --- */
.reset-trust {
    padding: 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.01);
}

/* --- Help Section --- */
.reset-help { padding: 60px 24px; max-width: 900px; margin: 0 auto; }
.reset-help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.reset-help-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px;
    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}
.reset-help-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.reset-help-card i { font-size: 24px; color: var(--accent); margin-bottom: 12px; display: block; }
.reset-help-card h4 { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0 0 8px; }
.reset-help-card p { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.6; }

/* --- FAQ --- */
.reset-faq { padding: 60px 24px; max-width: 800px; margin: 0 auto; }

/* --- SEO --- */
.reset-seo { padding: 60px 24px; max-width: 900px; margin: 0 auto; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .reset-info-grid { grid-template-columns: 1fr; max-width: 300px; margin: 24px auto 0; }
    .reset-help-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .reset-hero { padding: 24px 12px; }
    .reset-card { padding: 28px 20px; border-radius: var(--radius-lg); }
    .reset-title { font-size: 20px; }
    .reset-icon-circle { width: 60px; height: 60px; font-size: 26px; }
    .reset-help { padding: 40px 12px; }
    .reset-faq { padding: 40px 12px; }
    .reset-seo { padding: 40px 12px; }
}


/* ============================================
   SECTION 5: SERVICES PAGE (Accordion Style)
   ============================================ */

.services-page { padding-bottom: 40px; }

/* --- Page Header --- */
/* Services page: use wider layout */
.services-page { max-width: 1600px; margin: 0 auto; width: 100%; }
.svc-page-header { margin-bottom: 20px; }
.svc-main-title { font-size: 26px; font-weight: 800; margin: 0; }

/* --- Toolbar: Search + Filter --- */
.svc-toolbar {
    display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap;
}
.svc-search-box {
    flex: 1; min-width: 250px; position: relative;
}
.svc-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: 16px; pointer-events: none;
}
.svc-search-input { padding-left: 42px !important; }
.svc-filter-dropdown { min-width: 200px; }
.svc-category-select {
    padding-right: 36px !important;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238A8F9E' viewBox='0 0 16 16'%3e%3cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* --- Admin Text --- */
.svc-admin-text {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 20px;
    margin-bottom: 24px; font-size: 14px; color: var(--text-secondary); line-height: 1.7;
}

/* --- Empty State --- */
.svc-empty {
    text-align: center; padding: 80px 24px; color: var(--text-muted);
}
.svc-empty i { font-size: 48px; margin-bottom: 16px; display: block; }
.svc-empty h3 { font-size: 18px; color: var(--text-secondary); margin-bottom: 8px; }

/* --- Widget --- */
.svc-widget-wrap {
    margin-bottom: 20px; border-radius: var(--radius-lg); overflow: hidden;
}

/* --- Sticky Table Header --- */
.svc-table-header {
    display: flex; align-items: center;
    background: var(--accent); color: #fff;
    border-radius: var(--radius-md);
    padding: 12px 20px; margin-bottom: 12px;
    font-size: 12px; font-weight: 700; text-transform: none;
    letter-spacing: normal;
    position: sticky; top: var(--nav-height); z-index: 10;
}
.svc-th-col { flex-shrink: 0; }
.svc-th-details { flex: 1; min-width: 200px; }
.svc-th-price { width: 100px; text-align: center; }
.svc-th-qty { width: 130px; text-align: center; }
.svc-th-speed { width: 80px; text-align: center; }
.svc-th-desc { width: 200px; text-align: center; }

/* --- Accordion --- */
.svc-accordion { display: flex; flex-direction: column; gap: 6px; }

/* Accordion Item */
.svc-acc-item {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    overflow: hidden; transition: border-color var(--transition-fast);
}
.svc-acc-item:hover { border-color: var(--border-hover); }
.svc-acc-item.open { border-color: var(--border-active); }

/* Accordion Header (clickable) */
.svc-acc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; cursor: pointer;
    background: linear-gradient(135deg, rgba(220,38,38,0.06) 0%, rgba(255,255,255,0.02) 100%);
    list-style: none; user-select: none;
    transition: background var(--transition-fast);
}
.svc-acc-header:hover { background: linear-gradient(135deg, rgba(220,38,38,0.1) 0%, rgba(255,255,255,0.04) 100%); }

.svc-acc-name {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 700; color: var(--text-primary);
}

/* Category header icons */
.svc-cat-icon { font-size: 16px; }
.svc-cat-emoji { font-size: 16px; line-height: 1; }
.svc-cat-img { width: 20px; height: 20px; border-radius: 3px; object-fit: cover; }

/* Service row icons (same size as category) */
.svc-svc-icon { font-size: 16px; color: var(--text-muted); flex-shrink: 0; }
.svc-svc-emoji { font-size: 16px; line-height: 1; flex-shrink: 0; }
.svc-svc-img { width: 20px; height: 20px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }

/* Chevron + Right section */
.svc-acc-right { display: flex; align-items: center; gap: 10px; }
.svc-acc-chevron {
    color: var(--text-muted); font-size: 14px;
    transition: transform var(--transition-base);
}
.svc-acc-item.open .svc-acc-chevron { transform: rotate(180deg); }

.svc-acc-badge {
    padding: 4px 12px;
    background: var(--accent); color: #fff;
    font-size: 11px; font-weight: 700;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Accordion Body — hidden by default, shown on .open */
.svc-acc-body {
    display: none;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}
.svc-acc-item.open .svc-acc-body {
    display: block;
    animation: slideDown 0.25s ease;
}

/* Service Row (inside accordion) */
.svc-row {
    display: flex; align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-fast);
    gap: 8px;
}
.svc-row:last-child { border-bottom: none; }
.svc-row:hover { background: rgba(255,255,255,0.02); }

.svc-col { flex-shrink: 0; }
.svc-col-details { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 12px; }
.svc-col-price { width: 100px; text-align: center; }
.svc-col-qty { width: 130px; text-align: center; font-size: 12px; color: var(--text-secondary); }
.svc-col-speed { width: 80px; text-align: center; }
.svc-col-desc { width: 200px; font-size: 12px; color: var(--text-muted); }

/* Service ID badge (smmbirla style) */
.svc-id-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 22px; padding: 0 8px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff; border-radius: var(--radius-full); font-size: 10px; font-weight: 700;
    font-variant-numeric: tabular-nums; flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(220,38,38,0.3);
    letter-spacing: 0.3px;
}
.svc-name-block { flex: 1; min-width: 0; }
.svc-name {
    font-size: 13px; font-weight: 500; color: var(--text-primary);
    display: block; word-break: break-word; line-height: 1.5;
}
/* Delivery tag inline */
.svc-delivery-tag {
    display: inline-flex; align-items: center;
    font-size: 11px; color: var(--success); font-weight: 600;
    margin-top: 3px;
}
.svc-delivery-tag i { font-size: 14px; }

/* Price tag style */
.svc-col-price {
    display: flex; align-items: center; justify-content: center; gap: 2px;
}
.svc-rate-big {
    display: inline-flex; align-items: center; padding: 3px 10px;
    background: var(--accent-soft); color: var(--accent);
    border: 1px solid var(--border-active); border-radius: var(--radius-full);
    font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.svc-rate-unit { color: var(--text-muted); font-size: 10px; font-weight: 500; }

/* Platform icons in service names */
.svc-platform-icon { margin-right: 6px; font-size: 14px; flex-shrink: 0; }
.svc-cat-platform { font-size: 16px; margin-right: 8px; }

/* Quantities (stacked with icons) */
.svc-qty-row {
    font-size: 12px; color: var(--text-secondary); margin-bottom: 2px;
    display: flex; align-items: center; gap: 4px;
}
.svc-qty-row i { font-size: 12px; color: var(--text-muted); }
.svc-qty-row strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* Action column */
.svc-col-action { display: flex; flex-direction: column; gap: 6px; width: 90px; flex-shrink: 0; }

/* Order button — Red 3D style */
.svc-know-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    padding: 6px 14px; height: 32px; border-radius: var(--radius-sm); border: none;
    background: linear-gradient(180deg, #EF4444 0%, #DC2626 50%, #B91C1C 100%);
    color: #fff;
    font-size: 11px; font-weight: 700; font-family: var(--font);
    text-decoration: none; transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
    white-space: nowrap;
    box-shadow: 0 3px 0 var(--accent-dark), 0 4px 8px rgba(220,38,38,0.2);
}
.svc-know-btn:hover {
    background: linear-gradient(180deg, #F87171 0%, #EF4444 50%, #DC2626 100%);
    color: #fff; transform: translateY(-1px);
    box-shadow: 0 3px 0 var(--accent-dark), 0 6px 12px rgba(220,38,38,0.3);
}
.svc-know-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--accent-dark);
}

/* Row Actions */
.svc-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
.svc-order-btn, .svc-fav-btn {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: transparent; color: var(--text-secondary);
    cursor: pointer; font-size: 14px;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
/* Analyse button — GREEN 3D style */
.svc-analyse-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    height: 32px; padding: 0 14px;
    border-radius: var(--radius-sm); border: none;
    background: linear-gradient(180deg, #F59E0B 0%, #D97706 50%, #B45309 100%);
    color: #fff;
    cursor: pointer; font-size: 12px; font-weight: 600; font-family: var(--font);
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast); white-space: nowrap;
    box-shadow: 0 3px 0 #78350F, 0 4px 8px rgba(245,158,11,0.25);
}
.svc-analyse-btn i { font-size: 13px; }
.svc-analyse-btn:hover {
    background: linear-gradient(180deg, #FBBF24 0%, #F59E0B 50%, #D97706 100%);
    transform: translateY(-1px);
    box-shadow: 0 3px 0 #78350F, 0 6px 12px rgba(245,158,11,0.35);
}
.svc-analyse-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #78350F;
}

/* Delivery time auto-tags (in action column) */
.svc-dt-tags {
    display: flex; flex-wrap: wrap; gap: 4px;
}
/* Desktop: tags inline under service name */
.svc-name-block .svc-dt-tags {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px;
}
.dt-tag {
    display: inline-block; padding: 3px 10px;
    font-size: 10px; font-weight: 700;
    border-radius: var(--radius-sm);
    white-space: nowrap; border: none;
}
.dt-avg {
    background: linear-gradient(180deg, #22C55E 0%, #15803D 100%);
    color: #fff; box-shadow: 0 2px 0 #14532D;
}
.dt-success {
    background: linear-gradient(180deg, #3B82F6 0%, #1D4ED8 100%);
    color: #fff; box-shadow: 0 2px 0 #1E3A5F;
}
.dt-speed {
    background: linear-gradient(180deg, #F59E0B 0%, #B45309 100%);
    color: #fff; box-shadow: 0 2px 0 #78350F;
}
.dt-drop {
    background: linear-gradient(180deg, #EF4444 0%, #B91C1C 100%);
    color: #fff; box-shadow: 0 2px 0 #7F1D1D;
}
.svc-dt-loading {
    display: inline-block; width: 12px; height: 12px;
    border: 2px solid var(--border); border-top-color: var(--accent);
    border-radius: 50%; animation: spin 0.6s linear infinite;
}

/* Widget inline container (shows below service row) */
.svc-widget-container {
    background: var(--bg-card-hover);
    border-bottom: 1px solid var(--border);
    padding: 0;
    animation: slideDown 0.25s ease;
}
.svc-widget-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px;
    background: var(--info-bg); border-bottom: 1px solid var(--border);
    font-size: 13px; font-weight: 600; color: var(--info);
}
.svc-widget-header i { margin-right: 6px; }
.svc-widget-close {
    background: none; border: none; color: var(--text-muted);
    font-size: 18px; cursor: pointer; padding: 2px 6px;
}
.svc-widget-close:hover { color: var(--text-primary); }
#dt-delivery-widget-root { padding: 12px 20px; }

/* Widget modal (removed, using inline now) */

.svc-order-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--border-active); }
.svc-fav-btn:hover { color: #FBBF24; border-color: rgba(251,191,36,0.3); }
.svc-fav-btn .bi-star-fill { color: #FBBF24; }

/* --- Stats Bar --- */
.svc-stats {
    padding: 24px 0; margin: 24px 0;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}

/* --- Platform Chips --- */
.svc-platforms { padding: 40px 0; }
.svc-platform-chips {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px;
}
.svc-plat-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: var(--radius-full);
    background: var(--bg-card); border: 1px solid var(--border);
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base); cursor: pointer;
}
.svc-plat-chip:hover {
    background: var(--accent-soft); border-color: var(--border-active);
    color: var(--accent); transform: translateY(-2px);
}
.svc-plat-chip i { font-size: 16px; }

/* --- How / Steps --- */
.svc-how { padding: 40px 0; max-width: 900px; margin: 0 auto; }

/* --- FAQ --- */
.svc-faq { padding: 40px 0; max-width: 800px; margin: 0 auto; }

/* --- SEO --- */
.svc-seo { padding: 40px 0; }

/* --- Keywords --- */
.svc-keywords { padding: 20px 0 40px; }


/* --- Services Responsive --- */

/* Touch optimization */
.svc-acc-header, .svc-analyse-btn, .svc-order-btn, .svc-fav-btn {
    touch-action: manipulation;
}

@media (max-width: 1024px) {
    .svc-th-desc, .svc-col-desc { display: none; }
    .svc-th-speed, .svc-col-speed { display: none; }
}

@media (max-width: 768px) {
    .svc-toolbar { flex-direction: column; }
    .svc-filter-dropdown { min-width: 100%; }
    .svc-table-header { display: none; }

    /* Service rows → card layout */
    .svc-row {
        flex-wrap: wrap; padding: 14px 16px; gap: 6px;
        position: relative;
    }
    .svc-col-details { width: 100%; min-width: 0; flex-wrap: wrap; }
    .svc-col-price { width: auto; text-align: left; font-size: 14px; }
    .svc-col-qty { width: auto; text-align: left; }
    .svc-col-desc, .svc-col-speed { display: none; }

    /* Bigger touch targets on mobile */
    .svc-acc-header { padding: 14px 16px; min-height: 48px; }
    .svc-acc-name { font-size: 13px; gap: 8px; }
    .svc-analyse-btn, .svc-order-btn, .svc-fav-btn {
        width: 36px; height: 36px; font-size: 16px;
    }
    .svc-row-actions { gap: 8px; }

    .svc-platform-chips { gap: 8px; }
    .svc-plat-chip { padding: 8px 14px; font-size: 12px; min-height: 40px; }

    /* Widget inline */
    .svc-widget-container { margin: 0; }
    .svc-widget-header { padding: 10px 14px; font-size: 12px; }
    #dt-delivery-widget-root { padding: 10px 14px; }
}

@media (max-width: 480px) {
    .svc-main-title { font-size: 18px; }

    /* Card-style service rows — fully stacked */
    .svc-row {
        display: block !important;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
    }

    /* Mobile service card — compact layout */
    .svc-row { display: block !important; padding: 12px 14px; }

    .svc-col-details {
        display: flex; align-items: center; gap: 8px;
        width: 100%; margin-bottom: 6px;
    }
    .svc-name { font-size: 13px; line-height: 1.3; }
    .svc-delivery-tag { display: inline; margin-top: 0; margin-left: 4px; }

    /* Price + Qty + Speed — centered */
    .svc-col-price, .svc-col-qty, .svc-col-speed {
        display: inline !important; width: auto !important;
    }
    .svc-row > .svc-col-price, .svc-row > .svc-col-qty, .svc-row > .svc-col-speed {
        text-align: center !important;
    }
    .svc-col-price { margin-right: 6px; }
    .svc-rate-big { font-size: 16px; }
    .svc-rate-unit { font-size: 10px; }
    .svc-qty-row { display: inline; font-size: 11px; margin: 0; }
    .svc-qty-row i { display: none; }
    .svc-qty-row + .svc-qty-row::before { content: ' · '; color: var(--text-muted); }

    /* Center the price/qty row */
    .svc-row { text-align: center; }
    .svc-col-details { text-align: left; }

    /* Delivery tag — float right of name row as a badge */
    .svc-name { display: inline; }
    .svc-delivery-tag {
        display: inline-block; float: right;
        padding: 2px 8px; margin-top: 2px;
        background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.2);
        border-radius: var(--radius-full);
        font-size: 10px;
    }

    /* Actions + tags — centered */
    .svc-col-action {
        display: flex !important; width: 100% !important;
        flex-direction: column !important; align-items: center; gap: 8px;
        margin-top: 8px;
    }
    .svc-dt-tags {
        display: flex !important; flex-wrap: wrap !important;
        justify-content: center; width: 100%;
        gap: 4px;
    }
    .dt-tag { font-size: 9px; padding: 3px 8px; }
    .svc-know-btn { width: 100%; height: 36px; justify-content: center; font-size: 12px; }

    /* Category header */
    .svc-acc-header { min-height: 48px; padding: 10px 14px; }
    .svc-acc-name { font-size: 13px; gap: 6px; }
    .svc-acc-badge { font-size: 10px; padding: 3px 8px; }
    .svc-acc-chevron { font-size: 12px; }
    .svc-cat-img { width: 18px; height: 18px; }
    .svc-cat-icon, .svc-cat-emoji { font-size: 14px; }
    .svc-svc-icon, .svc-svc-emoji { font-size: 14px; }
    .svc-svc-img { width: 18px; height: 18px; }

    /* Search */
    .svc-search-input { font-size: 16px; min-height: 48px; }
    .svc-category-select { font-size: 16px; min-height: 48px; }

    /* Hide table columns not needed */
    .svc-col-desc { display: none !important; }
}

/* Small phones (375px) */
@media (max-width: 375px) {
    .svc-main-title { font-size: 16px; }
    .svc-row { padding: 10px 12px; }
    .svc-acc-header { padding: 10px 12px; }
    .svc-acc-name { font-size: 12px; }
    .svc-name { font-size: 12px; }
    .svc-analyse-btn { height: 38px; font-size: 12px; }
}

/* ============================================
   SECTION 6: API PAGE
   ============================================ */

.api-page { max-width: 1200px; margin: 0 auto; width: 100%; }

/* --- Hero --- */
.api-hero { padding: 40px 24px 50px; text-align: center; }
.api-hero-inner { max-width: 800px; margin: 0 auto; }
.api-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px; border-radius: var(--radius-full);
    background: var(--accent-soft); color: var(--accent);
    font-size: 13px; font-weight: 600; margin-bottom: 16px;
    border: 1px solid var(--border-active);
}
.api-hero-title { font-size: 36px; font-weight: 800; margin-bottom: 12px; }
.api-hero-subtitle { font-size: 15px; color: var(--text-secondary); line-height: 1.7; max-width: 600px; margin: 0 auto 24px; }
.api-hero-url {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 10px 16px;
    margin-bottom: 28px;
}
.api-url-label { font-size: 11px; font-weight: 700; text-transform: none; color: var(--text-muted); letter-spacing: normal; }
.api-url-code { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--accent); font-weight: 600; }
.api-copy-btn {
    background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-muted); padding: 4px 8px; cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.api-copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.api-hero-stats { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.api-stat { text-align: center; }
.api-stat strong { display: block; font-size: 20px; font-weight: 800; color: var(--accent); }
.api-stat span { font-size: 12px; color: var(--text-muted); }

/* --- Credentials --- */
.api-credentials { padding: 0 24px 40px; max-width: 1000px; margin: 0 auto; }
.api-cred-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.api-cred-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 16px 20px;
}
.api-cred-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.api-cred-value { display: flex; align-items: center; gap: 8px; }
.api-cred-value code { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text-primary); word-break: break-all; }

/* --- Quick Start --- */
.api-quickstart { padding: 40px 24px; }
.api-steps { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.api-step-card {
    flex: 1; min-width: 200px; max-width: 280px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px 20px; text-align: center;
    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}
.api-step-card:hover { border-color: var(--border-hover); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.api-step-num {
    width: 40px; height: 40px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-weight: 800; font-size: 18px;
    border-radius: var(--radius-full); box-shadow: 0 3px 0 var(--accent-dark);
}
.api-step-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.api-step-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.api-step-connector { color: var(--text-muted); font-size: 20px; }

/* --- API Methods --- */
.api-methods { padding: 40px 24px; }
.api-method-list { display: flex; flex-direction: column; gap: 12px; }
.api-method-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: border-color var(--transition-base);
}
.api-method-card.open { border-color: var(--border-active); }
.api-method-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; cursor: pointer;
    transition: background var(--transition-fast);
}
.api-method-header:hover { background: var(--bg-card-hover); }
.api-method-name { display: flex; align-items: center; gap: 12px; }
.api-method-badge {
    padding: 3px 10px; border-radius: var(--radius-sm);
    background: linear-gradient(180deg, #22C55E 0%, #15803D 100%);
    color: #fff; font-size: 11px; font-weight: 800; letter-spacing: normal;
    box-shadow: 0 2px 0 #14532D;
}
.api-method-name h3 { font-size: 15px; font-weight: 600; margin: 0; }
.api-method-chevron { color: var(--text-muted); transition: transform var(--transition-base); }
.api-method-card.open .api-method-chevron { transform: rotate(180deg); }
.api-method-body {
    display: none; padding: 0 20px 20px;
    border-top: 1px solid var(--border);
}
.api-method-card.open .api-method-body { display: block; }

/* Parameters table */
.api-params-section h4, .api-example-section h4 {
    font-size: 14px; font-weight: 700; margin: 16px 0 10px;
    display: flex; align-items: center; gap: 8px; color: var(--text-primary);
}
.api-type-block { margin-bottom: 16px; }
.api-type-label {
    display: inline-block; padding: 3px 12px; border-radius: var(--radius-sm);
    background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700;
    margin-bottom: 8px;
}
.api-params-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
    border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
}
.api-params-table th {
    background: var(--bg-card-hover); padding: 10px 16px; text-align: left;
    font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: normal;
    color: var(--text-muted);
}
.api-params-table td { padding: 10px 16px; border-top: 1px solid var(--border); color: var(--text-secondary); }
.api-params-table code {
    background: var(--accent-soft); color: var(--accent); padding: 2px 8px;
    border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
}

/* Code blocks */
.api-code-block {
    background: #0D1117; color: #E6EDF3; border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md); padding: 20px; overflow-x: auto;
    font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.7;
    margin: 0;
}
.api-code-block code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* --- Code Example Tabs --- */
.api-code-examples { padding: 40px 24px; }
.api-tab-nav { display: flex; gap: 4px; margin-bottom: 0; border-bottom: 1px solid var(--border); }
.api-tab-btn {
    padding: 10px 20px; border: none; background: none;
    color: var(--text-muted); font-family: var(--font); font-size: 13px; font-weight: 600;
    cursor: pointer; border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
    display: flex; align-items: center; gap: 6px;
}
.api-tab-btn:hover { color: var(--text-primary); }
.api-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.api-tab-content { display: none; }
.api-tab-content.active { display: block; }

/* --- SEO Section --- */
.api-seo-section { padding: 50px 24px; }
.api-seo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.api-seo-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px 24px;
    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}
.api-seo-card:hover { border-color: var(--border-hover); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.api-seo-icon {
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent); font-size: 22px;
    border-radius: var(--radius-md); margin-bottom: 14px;
}
.api-seo-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.api-seo-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }

/* --- Profit Section --- */
.api-profit { padding: 50px 24px; }
.api-profit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.api-profit-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px 24px;
}
.api-profit-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.api-profit-step {
    display: flex; gap: 14px; margin-bottom: 18px; align-items: flex-start;
}
.api-profit-step-num {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-weight: 800; font-size: 13px;
    border-radius: var(--radius-full);
}
.api-profit-step strong { font-size: 14px; display: block; margin-bottom: 4px; }
.api-profit-step p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0; }
.api-calc-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14px; }
.api-calc-divider { height: 1px; background: var(--border); margin: 8px 0; }
.api-calc-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 12px; }

/* --- Why Section --- */
.api-why { padding: 50px 24px; }
.api-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.api-why-item {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px 20px; text-align: center;
    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}
.api-why-item:hover { border-color: var(--border-hover); transform: translateY(-3px); }
.api-why-item i { font-size: 28px; color: var(--accent); margin-bottom: 12px; display: block; }
.api-why-item h4 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.api-why-item p { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

/* --- Limits Section --- */
.api-limits { padding: 40px 24px; }
.api-limits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.api-limits-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px;
}
.api-limits-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.api-best-list { list-style: none; padding: 0; }
.api-best-list li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0; font-size: 13px; color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
.api-best-list li:last-child { border-bottom: none; }
.api-best-list li i { color: var(--success); font-size: 14px; flex-shrink: 0; margin-top: 2px; }

/* --- SEO Detail --- */
.api-seo-detail { padding: 40px 24px; }
.api-seo-article {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 36px 32px;
}
.api-seo-article h2 { font-size: 22px; font-weight: 700; margin-bottom: 16px; }
.api-seo-article h3 { font-size: 17px; font-weight: 700; margin: 24px 0 10px; color: var(--text-primary); }
.api-seo-article p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 14px; }
.api-seo-list { list-style: none; padding: 0; margin: 0 0 16px; }
.api-seo-list li {
    padding: 8px 0 8px 20px; font-size: 14px; color: var(--text-secondary);
    line-height: 1.6; border-bottom: 1px solid var(--border); position: relative;
}
.api-seo-list li:last-child { border-bottom: none; }
.api-seo-list li::before {
    content: ''; position: absolute; left: 0; top: 16px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.api-seo-list li strong { color: var(--text-primary); }

/* --- FAQ --- */
.api-faq { padding: 40px 24px; max-width: 800px; margin: 0 auto; }
.api-faq-list { display: flex; flex-direction: column; gap: 10px; }
.api-faq-item {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); overflow: hidden;
}
.api-faq-item[open] { border-color: var(--border-active); }
.api-faq-q {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px; font-size: 14px; font-weight: 600;
    color: var(--text-primary); cursor: pointer; list-style: none;
}
.api-faq-q::-webkit-details-marker { display: none; }
.api-faq-q i { color: var(--accent); font-size: 16px; transition: transform var(--transition-base); }
.api-faq-item[open] .api-faq-q i { transform: rotate(45deg); }
.api-faq-q:hover { color: var(--accent); }
.api-faq-a { padding: 0 20px 16px 46px; font-size: 13px; color: var(--text-secondary); line-height: 1.7; }

/* --- Keywords --- */
.api-keywords { padding: 30px 24px 50px; text-align: center; }
.api-keyword-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* --- API Responsive --- */
@media (max-width: 1024px) {
    .api-seo-grid { grid-template-columns: 1fr; }
    .api-profit-grid { grid-template-columns: 1fr; }
    .api-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .api-hero-title { font-size: 26px; }
    .api-hero-stats { gap: 20px; }
    .api-stat strong { font-size: 18px; }
    .api-cred-grid { grid-template-columns: 1fr; }
    .api-steps { flex-direction: column; }
    .api-step-connector { transform: rotate(90deg); }
    .api-step-card { max-width: 100%; }
    .api-why-grid { grid-template-columns: 1fr; }
    .api-limits-grid { grid-template-columns: 1fr; }
    .api-tab-btn { padding: 8px 12px; font-size: 12px; }
    .api-seo-article { padding: 24px 16px; }
    .api-seo-article h2 { font-size: 18px; }
    .api-hero-url { flex-wrap: wrap; justify-content: center; }
    .api-method-header { padding: 14px 16px; }
    .api-method-body { padding: 0 16px 16px; }
}
@media (max-width: 480px) {
    .api-hero { padding: 24px 12px 36px; }
    .api-hero-title { font-size: 22px; }
    .api-hero-subtitle { font-size: 13px; }
    .api-quickstart, .api-methods, .api-code-examples,
    .api-seo-section, .api-profit, .api-why,
    .api-limits, .api-seo-detail, .api-faq, .api-keywords { padding-left: 10px; padding-right: 10px; }
    .api-seo-card { padding: 20px 16px; }
    .api-profit-card { padding: 20px 16px; }
    .api-code-block { font-size: 11px; padding: 14px; }
    .api-params-table th, .api-params-table td { padding: 8px 10px; font-size: 12px; }
}

/* --- API Light Mode --- */
[data-theme="light"] .api-code-block { background: #F6F8FA; color: #24292F; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .api-method-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .api-seo-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .api-profit-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .api-why-item { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .api-params-table code { background: rgba(220,38,38,0.06); }

/* ============================================
   SECTION 7: BLOG PAGE
   ============================================ */

.blog-page { max-width: 1200px; margin: 0 auto; width: 100%; }

/* --- Hero --- */
.blog-hero { padding: 40px 24px 32px; text-align: center; }
.blog-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px; border-radius: var(--radius-full);
    background: var(--accent-soft); color: var(--accent);
    font-size: 13px; font-weight: 600; margin-bottom: 16px;
    border: 1px solid var(--border-active);
}
.blog-hero-title { font-size: 36px; font-weight: 800; margin-bottom: 12px; }
.blog-hero-subtitle { font-size: 15px; color: var(--text-secondary); line-height: 1.7; max-width: 600px; margin: 0 auto; }

/* --- Blog Intro --- */
.blog-intro { padding: 0 24px 32px; max-width: 800px; margin: 0 auto; }
.blog-intro-content {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px 28px;
    font-size: 14px; color: var(--text-secondary); line-height: 1.7;
}

/* --- Two-Column Layout: Grid + Sidebar --- */
.blog-layout {
    display: grid; grid-template-columns: 1fr 300px; gap: 28px;
    padding: 0 24px 40px;
}
.blog-main { min-width: 0; }
.blog-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.blog-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
    display: flex; flex-direction: column;
}
.blog-card:hover { border-color: var(--border-hover); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-card-img-wrap {
    display: block; height: 180px; overflow: hidden;
    background: var(--bg-card-hover);
}
.blog-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-card:hover .blog-card-img { transform: scale(1.05); }
.blog-card-no-img {
    display: flex; align-items: center; justify-content: center;
    font-size: 48px; color: var(--text-muted);
}
.blog-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.blog-card-title { font-size: 17px; font-weight: 700; margin-bottom: 10px; line-height: 1.4; }
.blog-card-title a { color: var(--text-primary); text-decoration: none; }
.blog-card-title a:hover { color: var(--accent); }
.blog-card-excerpt { font-size: 13px; color: var(--text-secondary); line-height: 1.6; flex: 1; margin-bottom: 16px; }

/* --- Card Footer: Read More + Share --- */
.blog-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--border); padding-top: 14px; margin-top: auto;
}
.blog-read-more {
    font-size: 13px; font-weight: 600; color: var(--accent);
    display: flex; align-items: center; gap: 4px;
    transition: gap var(--transition-fast);
}
.blog-read-more:hover { gap: 8px; color: var(--accent-hover); }

/* Share Row */
.blog-share-row { display: flex; gap: 4px; }
.blog-share-btn {
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: none; color: var(--text-muted); font-size: 13px;
    cursor: pointer; transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast); text-decoration: none;
}
.blog-share-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* --- Pagination --- */
.blog-pagination {
    display: flex; justify-content: center; gap: 6px;
    padding: 0 24px 40px;
}
.blog-page-btn {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text-secondary); font-size: 14px; font-weight: 600;
    text-decoration: none; transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.blog-page-btn:hover { border-color: var(--accent); color: var(--accent); }
.blog-page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 3px 0 var(--accent-dark); }

/* --- Empty State --- */
.blog-empty {
    text-align: center; padding: 80px 24px; color: var(--text-muted);
}
.blog-empty i { font-size: 48px; margin-bottom: 16px; display: block; }
.blog-empty h3 { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.blog-empty p { font-size: 14px; }

/* --- Sidebar --- */
.blog-sidebar { position: sticky; top: 90px; align-self: start; }
.blog-sidebar-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px;
}
.blog-sidebar-title {
    font-size: 15px; font-weight: 700; margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.blog-sidebar-title i { color: var(--accent); }

/* Recent Posts */
.blog-recent-list { display: flex; flex-direction: column; gap: 12px; }
.blog-recent-item {
    display: flex; gap: 10px; align-items: center;
    text-decoration: none; padding: 6px; border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
.blog-recent-item:hover { background: var(--bg-card-hover); }
.blog-recent-img {
    width: 56px; height: 42px; flex-shrink: 0; border-radius: var(--radius-sm);
    object-fit: cover;
}
.blog-recent-no-img {
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card-hover); color: var(--text-muted); font-size: 16px;
}
.blog-recent-title {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* Quick Links */
.blog-quick-links { display: flex; flex-direction: column; gap: 4px; }
.blog-quick-links a {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500; color: var(--text-secondary);
    text-decoration: none; transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.blog-quick-links a:hover { background: var(--bg-card-hover); color: var(--accent); }
.blog-quick-links a i { color: var(--accent); font-size: 14px; }

/* Sidebar Tags */
.blog-sidebar-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-sidebar-tags .keyword-tag { font-size: 11px; padding: 3px 10px; }

/* --- Single Post View (enhanced default template) --- */
.blog-post-enhanced {
    padding: 36px 40px !important; border-radius: var(--radius-lg) !important;
    width: 100%;
}
.blog-post-enhanced img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin-bottom: 20px; }
.blog-post-enhanced h1 { font-size: 28px; font-weight: 800; line-height: 1.3; margin-bottom: 8px; }
.blog-post-enhanced h2 { font-size: 22px; font-weight: 700; margin: 28px 0 12px; }
.blog-post-enhanced h3 { font-size: 18px; font-weight: 700; margin: 24px 0 10px; }
.blog-post-enhanced p { font-size: 15px; line-height: 1.8; color: var(--text-secondary); margin-bottom: 16px; max-width: 100%; }
.blog-post-enhanced ul, .blog-post-enhanced ol { padding-left: 24px; margin-bottom: 16px; }
.blog-post-enhanced li { margin-bottom: 8px; font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
.blog-post-enhanced a { color: var(--accent); }
.blog-post-enhanced .blog-post-share {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 14px 0; margin: 16px 0 24px;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
/* Blog post header (outside card) */
.blog-post-header-outer {
    max-width: 960px; margin: 0 auto; padding: 0 24px 20px;
}
.blog-post-header-outer .blog-back-btn { margin-bottom: 20px; display: inline-flex; }
.blog-post-feat-img {
    border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px;
    box-shadow: var(--shadow-md);
}
.blog-post-feat-img img {
    width: 100%; height: auto; display: block;
    max-height: 450px; object-fit: cover;
}
.blog-post-title-outer {
    font-size: 32px; font-weight: 800; line-height: 1.25;
    margin-bottom: 12px; color: var(--text-primary);
}
.blog-post-header-outer .blog-post-share {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 14px 0; margin-top: 4px;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
@media (max-width: 768px) {
    .blog-post-header-outer { padding: 0 8px 16px; max-width: 100%; }
    .blog-post-title-outer { font-size: 24px; }
    .blog-post-feat-img { border-radius: var(--radius-md); }
    /* Override Bootstrap container for blog posts */
    .blog-post-enhanced { margin: 0 !important; }
    .main-content .container { width: 100% !important; padding: 0 8px !important; }
    .main-content .row { margin: 0 !important; }
    .main-content .col-md-12 { padding: 0 4px !important; }
}
@media (max-width: 480px) {
    .blog-post-header-outer { padding: 0 4px 10px; }
    .blog-post-title-outer { font-size: 20px; }
    .blog-post-feat-img img { max-height: 250px; }
}

/* Author meta injected by JS */
.blog-post-meta-js {
    display: flex; gap: 20px; flex-wrap: wrap;
    font-size: 13px; color: var(--text-muted); margin: 8px 0 4px;
}
.blog-post-meta-js span { display: flex; align-items: center; gap: 6px; }
.blog-post-meta-js i { color: var(--accent); font-size: 14px; }

/* Bottom section */
.blog-post-bottom { margin-top: 32px; border-top: 1px solid var(--border); padding-top: 24px; }
.blog-post-bottom-share p {
    font-size: 14px; font-weight: 600; color: var(--text-primary);
    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.blog-post-bottom-share .blog-post-share { padding: 0; border: none; margin-bottom: 32px; }

/* Recent posts grid */
.blog-recent-section h3 {
    font-size: 18px; font-weight: 700; margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}
.blog-recent-section h3 i { color: var(--accent); }
.blog-recent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 768px) {
    .blog-post-enhanced { padding: 20px 16px !important; border-radius: var(--radius-md) !important; }
    .blog-post-enhanced h1 { font-size: 22px; }
    .blog-post-enhanced h2 { font-size: 18px; }
    .blog-post-enhanced p { font-size: 14px; }
    .blog-recent-grid { grid-template-columns: 1fr; }
    .blog-post-meta-js { gap: 12px; font-size: 12px; }
    .blog-post-enhanced .blog-post-share { gap: 4px; }
}
@media (max-width: 480px) {
    .blog-post-enhanced { padding: 16px 12px !important; }
    .blog-post-enhanced h2 { font-size: 16px; }
    .blog-post-enhanced h3 { font-size: 15px; }
    .blog-post-enhanced p { font-size: 13px; }
}

/* --- Single Post View (custom template) --- */
.blog-post-nav { padding: 0 24px 16px; }
.blog-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 600; color: var(--text-secondary);
    text-decoration: none; padding: 8px 16px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.blog-back-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.blog-post-article {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
}
.blog-post-header { padding: 32px 32px 0; }
.blog-post-title { font-size: 28px; font-weight: 800; line-height: 1.3; margin-bottom: 12px; }
.blog-post-meta {
    display: flex; gap: 20px; font-size: 13px; color: var(--text-muted);
    margin-bottom: 16px;
}
.blog-post-meta span { display: flex; align-items: center; gap: 6px; }
.blog-post-meta i { color: var(--accent); }

.blog-post-share {
    display: flex; gap: 6px; padding: 14px 32px;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.blog-post-content {
    padding: 28px 32px;
    font-size: 15px; line-height: 1.8; color: var(--text-secondary);
}
.blog-post-content h2 { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 28px 0 12px; }
.blog-post-content h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 24px 0 10px; }
.blog-post-content p { margin-bottom: 16px; max-width: 100%; }
.blog-post-content ul, .blog-post-content ol { padding-left: 24px; margin-bottom: 16px; }
.blog-post-content li { margin-bottom: 8px; }
.blog-post-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 16px 0; }
.blog-post-content a { color: var(--accent); text-decoration: underline; }
.blog-post-content blockquote {
    border-left: 4px solid var(--accent); padding: 12px 20px; margin: 16px 0;
    background: var(--accent-soft); border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic; color: var(--text-primary);
}

.blog-post-bottom-share {
    padding: 20px 32px 28px;
    border-top: 1px solid var(--border);
}
.blog-post-bottom-share p { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
.blog-post-bottom-share .blog-post-share { padding: 0; border: none; }

/* --- SEO Content --- */
.blog-seo { padding: 40px 24px; max-width: 900px; margin: 0 auto; }
.blog-seo-article {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 36px 32px;
}
.blog-seo-article h2 { font-size: 22px; font-weight: 700; margin-bottom: 16px; }
.blog-seo-article h3 { font-size: 17px; font-weight: 700; margin: 20px 0 10px; }
.blog-seo-article p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 14px; }

/* --- Keywords --- */
.blog-keywords { padding: 30px 24px 50px; text-align: center; }

/* --- Blog Responsive --- */
@media (max-width: 1024px) {
    .blog-layout { grid-template-columns: 1fr 260px; }
    .blog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar { position: static; }
    .blog-hero-title { font-size: 26px; }
    .blog-grid { max-width: 500px; margin: 0 auto; }
    .blog-seo-article { padding: 24px 16px; }
    .blog-seo-article h2 { font-size: 18px; }
    .blog-share-btn { width: 28px; height: 28px; font-size: 12px; }
    .blog-post-header { padding: 20px 16px 0; }
    .blog-post-title { font-size: 22px; }
    .blog-post-share { padding: 12px 16px; }
    .blog-post-content { padding: 20px 16px; font-size: 14px; }
    .blog-post-content h2 { font-size: 18px; }
    .blog-post-content h3 { font-size: 16px; }
    .blog-post-bottom-share { padding: 16px; }
}
@media (max-width: 480px) {
    .blog-hero { padding: 24px 12px 24px; }
    .blog-hero-title { font-size: 22px; }
    .blog-posts { padding: 0 10px 30px; }
    .blog-grid { max-width: 100%; }
    .blog-card-body { padding: 16px; }
    .blog-card-title { font-size: 15px; }
    .blog-seo { padding: 30px 10px; }
    .blog-keywords { padding: 20px 10px 40px; }
}

/* --- Blog Light Mode --- */
[data-theme="light"] .blog-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .blog-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
[data-theme="light"] .blog-seo-article { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .blog-card-no-img { background: #F3F4F8; }

/* ============================================
   SECTION 8: FAQ PAGE
   ============================================ */

.faq-page { max-width: 1100px; margin: 0 auto; width: 100%; }

/* Hero */
.faq-hero { padding: 40px 24px 32px; text-align: center; }
.faq-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px; border-radius: var(--radius-full);
    background: var(--accent-soft); color: var(--accent);
    font-size: 13px; font-weight: 600; margin-bottom: 16px;
    border: 1px solid var(--border-active);
}
.faq-hero-title { font-size: 36px; font-weight: 800; margin-bottom: 12px; }
.faq-hero-subtitle { font-size: 15px; color: var(--text-secondary); line-height: 1.7; max-width: 600px; margin: 0 auto 24px; }
.faq-search-box {
    max-width: 500px; margin: 0 auto; position: relative;
}
.faq-search-box i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 16px; }
.faq-search-input {
    width: 100%; padding: 14px 16px 14px 44px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); color: var(--text-primary);
    font-family: var(--font); font-size: 15px;
    transition: border-color var(--transition-fast);
}
.faq-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.faq-search-input::placeholder { color: var(--text-muted); }

/* Category Cards */
.faq-categories { padding: 0 24px 32px; }
.faq-cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.faq-cat-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 18px 12px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); text-decoration: none;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast); cursor: pointer;
}
.faq-cat-card:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.faq-cat-card i { font-size: 22px; color: var(--accent); }
.faq-cat-card span { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.faq-cat-card:hover span { color: var(--accent); }

/* Admin FAQ Content — no extra card wrapper to avoid card-in-card */
.faq-admin-content { padding: 0 24px 32px; }
.faq-content-wrap {
    font-size: 14px; color: var(--text-secondary); line-height: 1.7;
}
.faq-content-wrap .well,
.faq-content-wrap .panel {
    background: var(--bg-card) !important; border-color: var(--border) !important;
    border-radius: var(--radius-md) !important;
}

/* FAQ Sections */
.faq-section { padding: 0 24px 32px; }
.faq-section-title {
    font-size: 20px; font-weight: 700; margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.faq-section-title i { color: var(--accent); font-size: 20px; }
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); overflow: hidden;
    transition: border-color var(--transition-fast);
}
.faq-item[open] { border-color: var(--border-active); }
.faq-q {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px; font-size: 14px; font-weight: 600;
    color: var(--text-primary); cursor: pointer; list-style: none;
    transition: color var(--transition-fast);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q i { color: var(--accent); font-size: 16px; transition: transform var(--transition-base); flex-shrink: 0; }
.faq-item[open] .faq-q i { transform: rotate(45deg); }
.faq-q:hover { color: var(--accent); }
.faq-a {
    padding: 0 20px 18px 46px;
    font-size: 14px; color: var(--text-secondary); line-height: 1.7;
}
.faq-a a { color: var(--accent); text-decoration: underline; }

/* CTA */
.faq-cta { padding: 20px 24px 40px; }
.faq-cta-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 40px 32px;
    text-align: center;
}
.faq-cta-card h2 { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
.faq-cta-card p { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; }
.faq-cta-buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* SEO */
.faq-seo { padding: 0 24px 40px; max-width: 900px; margin: 0 auto; }
.faq-seo-article {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 32px;
}
.faq-seo-article h2 { font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.faq-seo-article h3 { font-size: 17px; font-weight: 700; margin: 20px 0 10px; }
.faq-seo-article p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 12px; }

/* Keywords */
.faq-keywords { padding: 20px 24px 50px; text-align: center; }

/* Responsive */
@media (max-width: 768px) {
    .faq-page { padding: 0; }
    .faq-hero-title { font-size: 26px; }
    .faq-cat-grid { grid-template-columns: repeat(3, 1fr); }
    .faq-hero, .faq-categories, .faq-section, .faq-admin-content,
    .faq-cta, .faq-seo, .faq-keywords { padding-left: 8px; padding-right: 8px; }
    .faq-q { padding: 14px 16px; font-size: 13px; }
    .faq-a { padding: 0 16px 14px 36px; font-size: 13px; }
    .faq-cta-card { padding: 28px 16px; }
    .faq-seo-article { padding: 20px 14px; }
    .faq-item { border-radius: var(--radius-sm); }
}
@media (max-width: 480px) {
    .faq-hero-title { font-size: 22px; }
    .faq-hero-subtitle { font-size: 13px; }
    .faq-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .faq-cat-card { padding: 12px 6px; }
    .faq-cat-card i { font-size: 18px; }
    .faq-cat-card span { font-size: 10px; }
    .faq-section-title { font-size: 17px; }
    .faq-cta-card h2 { font-size: 20px; }
    .faq-seo-article h2 { font-size: 17px; }
}

/* Light Mode */
[data-theme="light"] .faq-item { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .faq-cat-card { box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
[data-theme="light"] .faq-search-input { background: #fff; }
[data-theme="light"] .faq-cta-card { box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
[data-theme="light"] .faq-seo-article { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }

/* ============================================
   SECTION 9: NEW ORDER PAGE
   ============================================ */

/* Stats Bar */
.no-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.no-stat-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 14px 16px;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.no-stat-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.no-stat-icon {
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent); font-size: 18px;
    border-radius: var(--radius-md); flex-shrink: 0;
}
.no-stat-icon-active { background: rgba(34,197,94,0.1); color: var(--success); }
.no-stat-icon-balance { background: rgba(59,130,246,0.1); color: var(--info); }
.no-stat-info { display: flex; flex-direction: column; }
.no-stat-value { font-size: 17px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.no-stat-label { font-size: 11px; color: var(--text-muted); font-weight: 500; text-transform: none; letter-spacing: normal; }
.no-stat-balance { position: relative; }
.no-add-funds-3d {
    position: absolute; bottom: 6px; right: 6px;
    display: flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 5px;
    background: linear-gradient(135deg, #e53935, #c62828);
    color: #fff; font-size: 14px; font-weight: 900; text-decoration: none; line-height: 1;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(198,40,40,0.4), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 2px rgba(0,0,0,0.15);
    transition: transform 0.15s, box-shadow 0.15s;
}
.no-add-funds-3d::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    animation: tagShine 3s ease-in-out infinite; pointer-events: none;
}
@keyframes addFundsShine { 0%,100%{left:-100%} 50%{left:150%} }
.no-add-funds-3d:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(198,40,40,0.5); }
.no-add-funds-3d:active { transform: scale(0.95); }
[data-theme="light"] .no-add-funds-3d { box-shadow: 0 3px 8px rgba(198,40,40,0.25), inset 0 1px 0 rgba(255,255,255,0.3); }

/* Quick Actions */
.no-quick-actions { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.no-qa-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-full);
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 13px; font-weight: 500;
    text-decoration: none; transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}
.no-qa-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.no-qa-btn i { font-size: 14px; }
.no-qa-accent { background: var(--accent-soft); color: var(--accent); border-color: var(--border-active); }
.no-qa-accent:hover { background: var(--accent); color: #fff; }

/* Alerts */
.no-alert {
    display: flex; gap: 16px; padding: 20px 24px;
    border-radius: var(--radius-lg); margin-bottom: 20px;
    align-items: flex-start;
}
.no-alert-icon {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); font-size: 22px; flex-shrink: 0;
}
.no-alert-error { background: var(--error-bg); border: 1px solid rgba(239,68,68,0.2); }
.no-alert-error .no-alert-icon { background: rgba(239,68,68,0.15); color: var(--error); }
.no-alert-error .no-alert-body strong { color: var(--error); }
.no-alert-error .no-alert-body p { color: var(--text-secondary); font-size: 13px; margin: 4px 0 0; }
.no-alert-success { background: var(--success-bg); border: 1px solid rgba(34,197,94,0.2); }
.no-alert-success .no-alert-icon { background: rgba(34,197,94,0.15); color: var(--success); }
.no-alert-body { flex: 1; }
.no-alert-body strong { display: block; font-size: 15px; margin-bottom: 12px; color: var(--success); }
.no-success-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.no-success-item {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 6px 12px; background: rgba(255,255,255,0.04);
    border-radius: var(--radius-sm); font-size: 13px;
}
.no-success-item span { color: var(--text-muted); }
.no-success-item strong { color: var(--text-primary); text-align: right; }
.no-link-truncate { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
/* Receipt — compact myfame style */
.no-receipt-card {
    border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px;
    border: 1px solid rgba(34,197,94,0.15);
}
.no-receipt-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer;
    background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(34,197,94,0.04));
}
.no-receipt-check {
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    background: var(--success); color: #fff; border-radius: 50%;
    font-size: 13px; flex-shrink: 0;
}
.no-receipt-title { flex: 1; display: flex; justify-content: space-between; align-items: center; }
.no-receipt-title strong { font-size: 13px; color: var(--success); }
.no-receipt-title span { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.no-dl-icon { color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 4px; transition: color var(--transition-fast); }
.no-dl-icon:hover { color: var(--success); }
.no-receipt-toggle { color: var(--success); font-size: 18px; transition: transform var(--transition-base); }
.no-receipt-card.expanded .no-receipt-toggle { transform: rotate(180deg); }

.no-receipt-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.no-receipt-card.expanded .no-receipt-body { max-height: 500px; }

.no-receipt-rows { padding: 8px 14px; font-size: 13px; line-height: 1.9; }
.no-receipt-row span { color: var(--text-muted); }
.no-receipt-row strong { color: var(--text-primary); }
.no-receipt-accent strong { color: var(--accent) !important; font-weight: 800; }

.no-receipt-actions { display: flex; gap: 8px; padding: 4px 14px 10px; }
.no-receipt-actions .btn { font-size: 12px; padding: 5px 12px; }

@media (max-width: 480px) {
    .no-receipt-actions { flex-direction: column; }
    .no-receipt-actions .btn { width: 100%; justify-content: center; }
}

/* Main Layout */
.no-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }

/* Form Card */
.no-form-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
}
/* Step Indicators */
.no-steps {
    display: flex; align-items: center; justify-content: center;
    padding: 20px 24px; border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--accent-soft), transparent);
    gap: 0;
}
.no-step {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    opacity: 0.4; transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}
.no-step.active { opacity: 1; }
.no-step.current .no-step-dot { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-glow); }
.no-step-dot {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 12px; font-weight: 800;
    background: var(--bg-card-hover); color: var(--text-muted);
    border: 2px solid var(--border); transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}
.no-step.active .no-step-dot { background: var(--success); color: #fff; border-color: var(--success); }
.no-step span { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: none; letter-spacing: normal; }
.no-step.active span { color: var(--text-primary); }
.no-step-line {
    width: 40px; height: 2px; background: var(--border);
    margin: 0 8px 14px; transition: background var(--transition-base);
}
.no-step.active + .no-step-line { background: var(--success); }

#order-form { padding: 24px; }

/* Search */
.no-search-wrap { position: relative; margin-bottom: 20px; }
.neworder-search {
    display: none; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: var(--accent); font-size: 16px; z-index: 2;
}
.no-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 16px; z-index: 1; }
.no-search-input { padding-left: 42px !important; }
.no-search-error { font-size: 12px; color: var(--error); margin-top: 4px; }

/* Search Suggestions */
.no-suggestions {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-lg); z-index: 50; max-height: 280px; overflow-y: auto;
}
.no-sug-item {
    padding: 10px 14px; font-size: 13px; color: var(--text-secondary);
    cursor: pointer; border-bottom: 1px solid var(--border);
    transition: background var(--transition-fast);
}
.no-sug-item:last-child { border-bottom: none; }
.no-sug-item:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.no-sug-item mark { background: rgba(220,38,38,0.15); color: var(--accent); border-radius: 2px; padding: 0 2px; }

/* Fields */
.no-field { margin-bottom: 18px; }
.no-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    margin-bottom: 6px;
}
.no-label i { color: var(--accent); font-size: 14px; }

/* Simple Custom Dropdown */
.no-dd { position: relative; width: 100%; }
.no-dd-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius-md); color: var(--text-primary);
    font-size: 14px; transition: border-color var(--transition-fast);
}
.no-dd-btn:hover { border-color: var(--border-hover); }
.no-dd.open .no-dd-btn { border-color: var(--border-hover); box-shadow: 0 0 0 2px rgba(255,255,255,0.04); }
.no-dd-txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-dd-chev { color: var(--text-muted); font-size: 12px; transition: transform var(--transition-fast); }
.no-dd.open .no-dd-chev { transform: rotate(180deg); }
.no-cat-img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; vertical-align: middle; }
.no-dd-ico {
    display: inline-flex; align-items: center; font-size: 16px; flex-shrink: 0;
    transition: transform 0.3s ease;
}
.no-dd-ico i { font-size: 14px; display: inline-block; }
.no-svc-id {
    display: inline-flex; transition: transform 0.3s ease;
}

/* Service dropdown — icon float animation */
.no-svc-id { animation: badgePulse 2.5s ease-in-out infinite; }

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Category — bounce on select */
.no-dd-opt.active .no-dd-ico { animation: iconSelect 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes iconSelect {
    0% { transform: scale(1); }
    40% { transform: scale(1.35) rotate(-10deg); }
    70% { transform: scale(0.9) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
}
.no-cat-img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; }
.no-dd-list {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); z-index: 100;
    box-shadow: var(--shadow-lg); max-height: 300px; overflow-y: auto;
    padding: 4px 0;
}
.no-dd.open .no-dd-list { display: block; }
.no-dd-opt {
    display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
    padding: 9px 14px; font-size: 13px; color: var(--text-secondary);
    cursor: pointer; transition: background var(--transition-fast);
}
.no-dd-opt:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.no-dd-opt:hover .no-dd-ico { transform: scale(1.15) rotate(-5deg); }
.no-dd-opt:hover .no-svc-id { transform: scale(1.15); }
.no-dd-opt.active {
    color: var(--text-primary); font-weight: 600;
    background: var(--bg-card-hover);
    border-left: 3px solid var(--accent);
}
.no-dd-opt.active .no-svc-rate { color: var(--success); }
/* Dropdown option text */
.no-dd-optxt { flex: 1; line-height: 1.4; word-break: break-word; position: relative; z-index: 1; }

/* Country flag background */
.no-dd-opt { position: relative; overflow: hidden; }
.no-has-flag { position: relative; }
.no-has-flag::before {
    content: ''; position: absolute; inset: 0;
    background: var(--bg-card); opacity: 0.9;
    z-index: 0;
}
.no-has-flag .no-dd-ico,
.no-has-flag .no-dd-optxt,
.no-has-flag .no-svc-id,
.no-has-flag .no-svc-rate { position: relative; z-index: 1; }
[data-theme="light"] .no-has-flag::before { background: #fff; opacity: 0.85; }
.no-svc-id {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; padding: 1px 6px;
    background: var(--accent); color: #fff; border-radius: var(--radius-full);
    font-size: 10px; font-weight: 700; margin-right: 2px;
}
.no-svc-rate { color: var(--accent); font-weight: 800; }

.no-dd-list::-webkit-scrollbar { width: 5px; }
.no-dd-list::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }

/* Dynamic fields from panel JS */
.no-dynamic-fields .form-group { margin-bottom: 16px; }
.no-dynamic-fields label { font-size: 13px; font-weight: 600; margin-bottom: 6px; display: block; }
.no-dynamic-fields .help-block { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Charge */
.no-charge-wrap {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; margin: 16px 0;
    background: var(--accent-soft); border: 1px solid var(--border-active);
    border-radius: var(--radius-md);
}
.no-charge-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.no-charge-value { font-size: 18px; font-weight: 800; color: var(--accent); }

/* Terms */
.no-terms { margin-bottom: 20px; }
.no-terms-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-secondary); cursor: pointer;
}
.no-terms-label input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: var(--accent);
}
.no-terms-label a { color: var(--accent); text-decoration: underline; }

/* Submit */
.no-submit-btn {
    width: 100%; padding: 14px 24px !important;
    font-size: 16px !important; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.no-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.no-submit-text, .no-submit-loading { display: inline-flex; align-items: center; gap: 8px; }
@keyframes noSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.no-spin { animation: noSpin 0.8s linear infinite; }

/* ── Service Description ── */
#service_description:not(.no-svc-parsed) { color: transparent !important; font-size: 0 !important; max-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }
#service_description:not(.no-svc-parsed) * { display: none !important; }
.no-svc-desc { margin: 14px 0; }

/* Tags — compact pills with icon circles */
.no-dtags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.no-dtag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 4px; border-radius: 20px; font-size: 11px; font-weight: 600;
    background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
    color: #e0e0e0;
}
.no-dtag i {
    width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 11px; flex-shrink: 0;
}
.no-dtag-premium { color: #ffd54f; } .no-dtag-premium i { background: rgba(255,193,7,0.2); color: #ffc107; }
.no-dtag-non-drop { color: #69f0ae; } .no-dtag-non-drop i { background: rgba(0,200,83,0.2); color: #00c853; }
.no-dtag-admin-sug { color: #90caf9; } .no-dtag-admin-sug i { background: rgba(33,150,243,0.2); color: #42a5f5; }
.no-dtag-refill-notif { color: #ce93d8; } .no-dtag-refill-notif i { background: rgba(156,39,176,0.2); color: #ab47bc; }
.no-dtag-best-quality { color: #ffcc80; } .no-dtag-best-quality i { background: rgba(255,152,0,0.2); color: #ff9800; }
.no-dtag-super-fast { color: #ef9a9a; } .no-dtag-super-fast i { background: rgba(244,67,54,0.2); color: #f44336; }
.no-dtag-instant { color: #fff59d; } .no-dtag-instant i { background: rgba(255,235,59,0.15); color: #ffeb3b; }
.no-dtag-hot { color: #ff8a65; } .no-dtag-hot i { background: rgba(255,87,34,0.2); color: #ff5722; }
.no-dtag-recommended { color: #80cbc4; } .no-dtag-recommended i { background: rgba(0,150,136,0.2); color: #26a69a; }
.no-dtag-default { color: #b0b0b0; } .no-dtag-default i { background: rgba(255,255,255,0.08); color: #9e9e9e; }

/* Description label */
.no-dlabel { font-size: 12px; font-weight: 500; color: #aaa; margin-bottom: 8px; letter-spacing: 0.3px; }

/* Cards — always 1 row, auto-fit all screens */
.no-dcards { display: flex; gap: 6px; margin-bottom: 10px; }
.no-dcard {
    flex: 1 1 0; min-width: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 8px 10px;
}
.no-dcard-head {
    font-size: 9px; color: #aaa; margin-bottom: 3px;
    display: flex; align-items: center; gap: 3px; text-transform: none; letter-spacing: normal;
}
.no-dcard-head i { color: var(--accent); font-size: 11px; }
.no-dcard-val { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Alert banner — 3D golden */
.no-dalert {
    background: linear-gradient(135deg, #d4a017 0%, #f0c040 40%, #e6a810 70%, #c8920e 100%);
    border: 1px solid rgba(255,215,0,0.4);
    border-radius: 10px; padding: 10px 14px; margin-bottom: 10px;
    font-size: 12px; font-weight: 700; color: #2a1800; line-height: 1.5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 3px rgba(0,0,0,0.15);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

/* Details table rows */
.no-ddetails {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; overflow: hidden; margin-bottom: 10px;
}
.no-ddetail {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 12px; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.no-ddetail:last-child { border-bottom: none; }
.no-ddetail span { color: #aaa; display: flex; align-items: center; gap: 6px; }
.no-ddetail span i { color: var(--accent); font-size: 13px; }
.no-ddetail strong { color: #fff; font-weight: 600; }

/* Notes box — red accent border */
.no-dnotes {
    padding: 10px 12px; font-size: 11px; line-height: 1.6;
    color: #ccc; border-left: 3px solid var(--accent);
    background: rgba(230,57,70,0.06); border-radius: 0 8px 8px 0;
    word-break: break-word;
}
.no-dnotes b, .no-dnotes strong { color: #fff; }

/* Responsive — compact on mobile */
@media (max-width: 480px) {
    .no-dtag { font-size: 10px; padding: 3px 8px 3px 3px; }
    .no-dtag i { width: 18px; height: 18px; font-size: 9px; }
    .no-dcard { padding: 6px 8px; }
    .no-dcard-head { font-size: 8px; }
    .no-dcard-val { font-size: 11px; }
    .no-ddetail { padding: 7px 10px; font-size: 11px; }
    .no-dalert { font-size: 11px; padding: 6px 10px; }
    .no-dnotes { font-size: 10px; padding: 8px 10px; }
}

/* Light mode — description visibility */
[data-theme="light"] .no-dtag { background: linear-gradient(145deg, #fff, #f0f0f3); border-color: rgba(0,0,0,0.08); box-shadow: 0 2px 5px rgba(0,0,0,0.08), inset 0 1px 0 #fff; color: #333; }
[data-theme="light"] .no-dtag-premium { color: #b8860b; } [data-theme="light"] .no-dtag-premium i { background: rgba(255,193,7,0.15); color: #b8860b; }
[data-theme="light"] .no-dtag-non-drop { color: #2e7d32; } [data-theme="light"] .no-dtag-non-drop i { background: rgba(76,175,80,0.15); color: #2e7d32; }
[data-theme="light"] .no-dtag-admin-sug { color: #1565c0; } [data-theme="light"] .no-dtag-admin-sug i { background: rgba(33,150,243,0.15); color: #1565c0; }
[data-theme="light"] .no-dtag-refill-notif { color: #7b1fa2; } [data-theme="light"] .no-dtag-refill-notif i { background: rgba(156,39,176,0.15); color: #7b1fa2; }
[data-theme="light"] .no-dtag-best-quality { color: #e65100; } [data-theme="light"] .no-dtag-best-quality i { background: rgba(255,152,0,0.15); color: #e65100; }
[data-theme="light"] .no-dtag-super-fast { color: #c62828; } [data-theme="light"] .no-dtag-super-fast i { background: rgba(244,67,54,0.15); color: #c62828; }
[data-theme="light"] .no-dtag-default { color: #555; } [data-theme="light"] .no-dtag-default i { background: rgba(0,0,0,0.06); color: #666; }
[data-theme="light"] .no-dcard { background: #f5f5f8; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .no-dcard-head { color: #666; }
[data-theme="light"] .no-dcard-head i { color: var(--accent); }
[data-theme="light"] .no-dcard-val { color: #111; }
[data-theme="light"] .no-ddetails { background: #f5f5f8; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .no-ddetail { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .no-ddetail span { color: #666; }
[data-theme="light"] .no-ddetail span i { color: var(--accent); }
[data-theme="light"] .no-ddetail strong { color: #111; }
[data-theme="light"] .no-dalert { background: linear-gradient(135deg, #f9a825, #e6960a); color: #3e2700; box-shadow: 0 2px 8px rgba(255,152,0,0.2); font-weight: 700; }
[data-theme="light"] .no-dnotes { background: rgba(230,57,70,0.06); border-left-color: var(--accent); color: #333; }
[data-theme="light"] .no-dnotes b, [data-theme="light"] .no-dnotes strong { color: var(--text-primary); }
[data-theme="light"] .no-dlabel { color: #555; }
[data-theme="light"] .no-svc-desc { color: #333; }

/* Layout — full width (no sidebar) */
.no-layout { grid-template-columns: 1fr !important; }

/* Responsive */
@media (max-width: 768px) {
    .no-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .no-stat-card { padding: 12px 14px; }
    .no-stat-value { font-size: 16px; }
    #order-form { padding: 16px; }
    .no-success-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .no-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
    .no-stat-card { padding: 10px 12px; gap: 10px; }
    .no-stat-card > i { font-size: 20px; }
    .no-stat-value { font-size: 14px; }
    .no-stat-label { font-size: 10px; }
    .no-form-header { padding: 14px 16px; }
    .no-form-title { font-size: 16px; }
    #order-form { padding: 14px; }
}

/* Light Mode */
[data-theme="light"] .no-form-card { box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
[data-theme="light"] .no-stat-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .no-success-item { background: rgba(0,0,0,0.03); }

/* ============================================
   SECTION 10: LIGHT MODE OVERRIDES
   ============================================ */

/* --- Bootstrap overrides for light mode --- */
[data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(0,0,0,0.02); }
[data-theme="light"] .form-control { background: #F3F4F8 !important; border-color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] .form-control:focus { border-color: var(--accent) !important; }
[data-theme="light"] .form-control::placeholder { color: #9CA3AF; }
[data-theme="light"] .btn-default { background: #fff; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .btn-default:hover { background: #F5F6FA; border-color: rgba(0,0,0,0.15); }

/* --- Signin page light mode --- */
[data-theme="light"] .signin-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.08);
}
[data-theme="light"] .signin-card::before { background: var(--accent); }
[data-theme="light"] .signin-input-icon { color: var(--text-muted); }
[data-theme="light"] .signin-divider-line { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent); }

/* --- Google button light mode --- */
[data-theme="light"] .btn-google {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.12);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
[data-theme="light"] .btn-google:hover {
    background: #F8F9FA;
    border-color: rgba(0,0,0,0.18);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
[data-theme="light"] .btn-google:active { box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
[data-theme="light"] .btn-google::before {
    background: linear-gradient(90deg, transparent, rgba(220,38,38,0.06), transparent);
}
[data-theme="light"] .btn-google::after {
    box-shadow: 0 0 0 3px rgba(220,38,38,0.08);
}

/* --- Hero section light mode --- */
[data-theme="light"] .hero-stat-value { color: var(--accent); }
[data-theme="light"] .hero-stat-label { color: var(--text-secondary); }

/* --- Trust / feature sections light mode --- */
[data-theme="light"] .trust-icon-box {
    background: #F8F9FA;
    border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .mini-card {
    background: #F8F9FA;
    border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .mini-card-icon { color: var(--accent); }

/* --- Blog / SEO article cards light mode --- */
[data-theme="light"] .blog-card,
[data-theme="light"] .article-card {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
[data-theme="light"] .blog-card:hover,
[data-theme="light"] .article-card:hover {
    border-color: rgba(0,0,0,0.12);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* --- FAQ section light mode --- */
[data-theme="light"] .faq-item {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .faq-question { color: var(--text-primary); }
[data-theme="light"] .faq-answer { color: var(--text-secondary); }

/* --- Comparison / pricing tables light mode --- */
[data-theme="light"] .compare-table th {
    background: #F8F9FA;
    color: var(--text-primary);
    border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .compare-table td {
    border-color: rgba(0,0,0,0.06);
}

/* --- Testimonial cards light mode --- */
[data-theme="light"] .testimonial-card {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.06);
}

/* --- Signup page light mode --- */
[data-theme="light"] .signup-card {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.08);
}
[data-theme="light"] .signup-card::before { background: var(--accent); }

/* --- Reset password page light mode --- */
[data-theme="light"] .reset-card {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* --- Services page light mode --- */
[data-theme="light"] .svc-acc-header {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .svc-acc-header:hover {
    background: #F8F9FA;
    border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .svc-category.open .svc-acc-header {
    background: #F8F9FA;
    border-color: rgba(220,38,38,0.2);
}
[data-theme="light"] .svc-body {
    background: #FAFBFD;
    border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .svc-row {
    border-bottom-color: rgba(0,0,0,0.04);
}
[data-theme="light"] .svc-row:hover {
    background: rgba(220,38,38,0.02);
}
[data-theme="light"] .svc-id-badge {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
}
[data-theme="light"] .svc-rate-big {
    background: rgba(220,38,38,0.06);
    border-color: rgba(220,38,38,0.15);
}
[data-theme="light"] .svc-search-input {
    background: #FFFFFF !important;
    border-color: rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .svc-category-select {
    background: #FFFFFF !important;
    border-color: rgba(0,0,0,0.1) !important;
}

/* --- Delivery tags light mode: keep colorful gradients, soften shadows --- */
[data-theme="light"] .dt-avg { box-shadow: 0 2px 0 rgba(21,128,61,0.4); }
[data-theme="light"] .dt-success { box-shadow: 0 2px 0 rgba(29,78,216,0.4); }
[data-theme="light"] .dt-speed { box-shadow: 0 2px 0 rgba(180,83,9,0.4); }
[data-theme="light"] .dt-drop { box-shadow: 0 2px 0 rgba(185,28,28,0.4); }

/* --- Keyword tags light mode --- */
[data-theme="light"] .keyword-tag {
    background: #F3F4F8;
    border-color: rgba(0,0,0,0.06);
    color: var(--text-secondary);
}

/* --- 3D button light mode adjustments --- */
[data-theme="light"] .btn-3d {
    box-shadow: 0 4px 0 #B91C1C, 0 2px 8px rgba(220,38,38,0.15);
}
[data-theme="light"] .btn-3d:hover {
    box-shadow: 0 4px 0 #B91C1C, 0 4px 16px rgba(220,38,38,0.2);
}
[data-theme="light"] .btn-3d:active {
    box-shadow: 0 2px 0 #B91C1C;
}


/* ===== Google button (Option B: pill + logo chip) — 2026-10-10 =====
   Google's real button (iframe) is stretched invisibly over this pill on every screen size,
   in redirect mode, so a tap opens Google in the same tab. No mobile popup. */
.google-btn-wrap { border-radius: 999px; }
.google-btn-wrap > .btn-google {
    display: flex; align-items: center; justify-content: flex-start; gap: 12px;
    width: 100%; min-height: 48px; padding: 6px 18px 6px 6px;
    border-radius: 999px; overflow: visible;
    background: var(--bg-input); border: 1px solid var(--border); box-shadow: none;
    color: var(--text-primary); font-family: var(--font); font-size: 15px; font-weight: 600;
    transform: none; pointer-events: none;
    transition: border-color 160ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out;
}
.google-btn-wrap > .btn-google::before,
.google-btn-wrap > .btn-google::after { content: none; }
.google-btn-wrap > .btn-google .g-chip {
    width: 36px; height: 36px; flex: none; border-radius: 50%; background: #FFFFFF;
    display: grid; place-items: center; box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.google-btn-wrap > .btn-google .google-icon { animation: none; transform: none; }
.google-btn-wrap > .btn-google .g-txt { flex: 1; text-align: center; margin-right: 24px; }
.google-btn-wrap > .btn-google .g-arrow { flex: none; opacity: 0.55; transition: transform 160ms ease-out, opacity 160ms ease-out; }
.google-btn-wrap > .btn-google .g-spin {
    display: none; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid #4285F4; border-right-color: transparent; animation: gSpin 0.7s linear infinite;
}
.google-btn-wrap:hover > .btn-google { border-color: var(--border-hover); background: var(--bg-card-hover); }
.google-btn-wrap:hover > .btn-google .g-arrow { opacity: 0.9; transform: translateX(2px); }
.google-btn-wrap:focus-within > .btn-google { border-color: #4285F4; box-shadow: 0 0 0 3px rgba(66,133,244,0.25); }
.google-btn-wrap > .btn-google.is-loading .google-icon { display: none; }
.google-btn-wrap > .btn-google.is-loading .g-spin { display: block; }
.google-btn-wrap > .btn-google.is-loading .g-arrow { opacity: 0; }
@keyframes gSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .google-btn-wrap > .btn-google, .google-btn-wrap > .btn-google .g-arrow { transition: none; }
    .google-btn-wrap > .btn-google .g-spin { animation-duration: 2s; }
}
[data-theme="light"] .google-btn-wrap > .btn-google {
    background: #FFFFFF; border-color: rgba(0,0,0,0.12); box-shadow: 0 1px 2px rgba(16,24,40,0.06);
}
[data-theme="light"] .google-btn-wrap:hover > .btn-google { background: #FFFFFF; border-color: rgba(0,0,0,0.22); }

/* Invisible Google iframe covers the whole pill on all widths (was hidden on mobile) */
.google-btn-wrap > .g-widget-inner {
    visibility: visible !important; height: 100% !important; pointer-events: auto !important;
    border-radius: 999px; touch-action: manipulation;
}
.google-btn-wrap > .g-widget-inner > div { transform: scale(1.25); transform-origin: 0 0; }
/* Safari/WebKit: Google wraps its iframe in a fit-content div that collapses to 0x0 once the iframe is absolute, so taps hit nothing. Stretch that wrapper too. */
.google-btn-wrap > .g-widget-inner > div > div:not(:empty) {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
}

/* ===== TM mobile UX pack — 2026-11-14 =====
   One Help button instead of three floats, New Order form first + sticky Place Order bar,
   Services filters. Elements are built by script.js; hidden on desktop. */
.tmux-fab, .tmux-ov, .tmux-sheet, .tmux-bar, .tmux-chips, .tmux-more, .tmux-hint { display: none; }
.svc-acc-item.tmux-hide { display: none !important; }
.ord-hd h1 { text-transform: capitalize; }
.ord-empty .tmux-cta {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 12px; padding: 0 20px;
    border-radius: var(--radius-md); background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none;
}
.no-dt-tag.suc.tmux-low { color: #FBBF24 !important; background: rgba(245, 158, 11, 0.12) !important; border-color: rgba(245, 158, 11, 0.4) !important; }
.no-dt-tag.suc.tmux-low i, .no-dt-tag.suc.tmux-low .no-dt-val { color: inherit !important; }
[data-theme="light"] .no-dt-tag.suc.tmux-low { color: #92400E !important; }

/* Estimated charge card: converted price sits under the amount */
.no-charge-wrap { padding-bottom: 16px !important; }
.no-charge-wrap .no-charge-label { order: 1; }
.no-charge-wrap .no-charge-value { order: 2; }
.no-charge-wrap .no-charge-alt {
    order: 3; position: static !important; flex-basis: 100%; margin: -8px 0 0 !important; padding: 0 !important; text-align: right;
    background: none !important; border: 0 !important; box-shadow: none !important; transform: none !important;
    color: var(--text-secondary) !important; font-size: 13px !important; font-weight: 600 !important;
}
.no-charge-wrap .no-charge-alt:empty { display: none; }
.no-charge-wrap .no-charge-alt:not(:empty)::before { content: "\2248  "; }
/* removed on request 2026-11-14: low-balance "Add funds" notice and the cart (Add to Cart button + cart box) */
#noBalWarn, #tmAddCart, #tmCartBox { display: none !important; }

@media (max-width: 768px) {
    /* --- Help button: the three floats are reachable from its sheet --- */
    .integration-fixed, .wnw-btn, #smm-chat-bubble { display: none !important; }
    /* back to top: sits right above the Help button and only shows while scrolling up, so it never covers what is being read or filled.
       "body" prefix beats the older !important rule in layout.twig. */
    body .back-to-top { bottom: calc(156px + env(safe-area-inset-bottom, 0px)) !important; right: 23px !important; }
    body:not(.tmux-up) .back-to-top { opacity: 0 !important; pointer-events: none !important; }
    .tmux-fab {
        display: grid; place-items: center; position: fixed; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom, 0px));
        width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #fff; font-size: 24px;
        box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3); z-index: 1040; cursor: pointer;
    }
    body.wnw-open .tmux-fab, body.tmux-chat .tmux-fab, body.tmux-on .tmux-fab { display: none; }
    body.tmux-bar-on .tmux-fab { bottom: calc(164px + env(safe-area-inset-bottom, 0px)); }
    body.tmux-bar-on .back-to-top { bottom: calc(228px + env(safe-area-inset-bottom, 0px)) !important; }

    .tmux-ov { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 2147483000; opacity: 0; visibility: hidden; transition: opacity 0.2s ease-out, visibility 0s 0.2s; }
    .tmux-sheet {
        display: flex; flex-direction: column; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483001;
        padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0;
        background: var(--bg-card); color: var(--text-primary); font-family: var(--font);
        transform: translateY(100%); visibility: hidden; transition: transform 0.22s ease-out, visibility 0s 0.22s;
    }
    body.tmux-on .tmux-ov { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
    body.tmux-on .tmux-sheet { transform: none; visibility: visible; transition-delay: 0s, 0s; }
    .tmux-grip { width: 40px; height: 4px; border-radius: 4px; background: var(--border-hover); align-self: center; }
    .tmux-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .tmux-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-primary); }
    .tmux-x { width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px; background: var(--bg-input); color: var(--text-primary); font-size: 18px; cursor: pointer; }
    .tmux-it {
        display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; box-sizing: border-box; padding: 8px 12px;
        border: 1px solid var(--border-hover); border-radius: 14px; background: none; color: var(--text-primary);
        font: inherit; text-align: left; text-decoration: none; cursor: pointer;
    }
    .tmux-it > i { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--bg-input); font-size: 20px; }
    .tmux-it > i.bi-whatsapp { color: #22C55E; }
    .tmux-it > i.bi-chat-dots-fill { color: var(--accent); }
    .tmux-it > span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .tmux-it b { font-size: 15px; font-weight: 600; }
    .tmux-it small { font-size: 13px; color: var(--text-secondary); }

    /* chat panel: keep its header below the "Open in the app" banner */
    body.pp-app--show #smm-chat-panel { height: calc(100dvh - 76px) !important; }

    /* --- New Order: long description collapsed, sticky Place Order --- */
    body:not(.tmux-desc-open) #service_description .no-ddetails,
    body:not(.tmux-desc-open) #service_description .no-dnotes { display: none; }
    .tmux-more {
        display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin: 8px 0 14px; padding: 0 12px;
        border: 1px solid var(--border-hover); border-radius: var(--radius-md); background: var(--bg-input); color: var(--text-primary);
        font: 600 13px var(--font); cursor: pointer;
    }
    .tmux-more[hidden] { display: none; }
    .tmux-hint { display: block; margin-top: 6px; font-size: 12px; font-weight: 500; }
    .tmux-hint:empty { display: none; }
    .tmux-hint.ok { color: #4ADE80; }
    .tmux-hint.warn { color: #FBBF24; }
    [data-theme="light"] .tmux-hint.ok { color: #15803D; }
    [data-theme="light"] .tmux-hint.warn { color: #92400E; }

    body.tmux-bar-on .tmux-bar { display: flex; }
    body.tmux-on .tmux-bar, body.wnw-open .tmux-bar, body.tmux-chat .tmux-bar { display: none !important; }
    .tmux-bar {
        position: fixed; left: 10px; right: 10px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 1045;
        align-items: center; gap: 10px; box-sizing: border-box; padding: 8px 10px 8px 14px; border-radius: 16px;
        background: var(--bg-card); border: 1px solid var(--border-hover); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); font-family: var(--font);
    }
    .tmux-bar-c { display: flex; flex-direction: column; gap: 1px; min-width: 72px; }
    .tmux-bar-c span { font-size: 12px; color: var(--text-secondary); }
    .tmux-bar-c strong { font-size: 17px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
    .tmux-bar-go { flex: 1; height: 48px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font: 700 15px var(--font); cursor: pointer; }

    /* --- Services: search + currency on one row, platform chips --- */
    .svc-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
    .svc-toolbar > .svc-search-box { order: 1; }
    .svc-toolbar > .svc-cur-dd { order: 2; width: auto; }
    .svc-toolbar > .svc-cur-dd > button { width: 52px; min-width: 52px; height: 52px; }
    .svc-toolbar > .svc-filter-dropdown { order: 3; grid-column: 1 / -1; }
    .svc-toolbar > .tmux-chips { order: 4; grid-column: 1 / -1; }
    .tmux-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .tmux-chips::-webkit-scrollbar { display: none; }
    .tmux-chip {
        flex: none; min-height: 44px; padding: 0 16px; border: 1px solid var(--border-hover); border-radius: 9999px;
        background: var(--bg-card); color: var(--text-primary); font: 600 14px var(--font); cursor: pointer;
    }
    .tmux-chip[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: #fff; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .tmux-ov, .tmux-sheet { transition: none; }
}