:root {
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --primary-light: #eff6ff;
    --dark: #111827;
    --gray-900: #111827;
    --gray-800: #1f2937;
    --gray-700: #374151;
    --gray-600: #4b5563;
    --gray-500: #6b7280;
    --gray-400: #9ca3af;
    --gray-300: #d1d5db;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --gray-50: #f9fafb;
    --white: #ffffff;
    --green: #10b981;
    --yellow: #fbbf24;
    --red: #ef4444;

    /* Dashboard variables */
    --bg: #f5f7fb;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --line: #e6eaf2;
    --blue: #1463ff;
    --blue-700: #0f4fe0;
    --shadow: 0 14px 30px rgba(15, 23, 42, .08);
    --radius: 0.5rem;
    --radius-sm: 0.5rem;
    --focus: 0 0 0 3px rgba(20, 99, 255, .18);

    /* Fluid Typography Scale */
    --fs-xs: clamp(0.6875rem, 0.625rem + 0.25vw, 0.75rem);
    --fs-sm: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
    --fs-base: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
    --fs-md: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
    --fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
    --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    --fs-3xl: clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem);
    --fs-4xl: clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem);

    /* Fluid Spacing */
    --space-xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem);
    --space-sm: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
    --space-md: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
    --space-lg: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    --space-xl: clamp(2rem, 1.5rem + 2vw, 3rem);
    --space-2xl: clamp(3rem, 2rem + 4vw, 5rem);
}

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

html {
    scroll-behavior: smooth;
    font-size: 100%; /* 16px base */
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text);
    line-height: 1.6;
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    font-size: var(--fs-base);
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
}

.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 clamp(12px, 3vw, 24px);
}

/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    z-index: 1000;
    border-bottom: 1px solid var(--gray-200);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--dark);
    text-decoration: none;
}

.logo-icon {
    width: 32px;
    height: 32px;
    background: var(--primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
}

nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

nav a {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--gray-600);
    text-decoration: none;
    transition: color 0.15s;
}

nav a:hover {
    color: var(--dark);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    gap: 5px;
    z-index: 1002;
}

.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--gray-700);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
    /* Prevent invisible overlay from blocking clicks when menu is closed */
    pointer-events: none;
}

.mobile-menu-overlay.active {
    opacity: 1;
    /* Re-enable click handling when menu overlay is visible */
    pointer-events: auto;
}

/* Mobile Menu Panel */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px, 85vw);
    height: 100%;
    height: 100dvh;
    background: var(--white);
    z-index: 1001;
    padding: 80px 24px 24px;
    transition: right 0.3s ease;
    overflow-y: auto;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mobile-menu nav a {
    padding: 16px 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-100);
    transition: color 0.2s, padding-left 0.2s;
}

.mobile-menu nav a:hover,
.mobile-menu nav a:active {
    color: var(--primary);
    padding-left: 8px;
}

.mobile-menu .header-actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.mobile-menu .header-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
}

/* Show mobile menu button on small screens */
@media (max-width: 768px) {
    header nav {
        display: none;
    }

    header .header-actions {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .mobile-menu-overlay,
    .mobile-menu {
        display: block;
    }
}

/* Prevent body scroll when menu is open */
body.mobile-menu-open {
    overflow: hidden;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    font-family: inherit;
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-secondary {
    background: var(--gray-100);
    color: var(--gray-700);
}

.btn-secondary:hover {
    background: var(--gray-200);
}

.btn-ghost {
    background: transparent;
    color: var(--gray-600);
}

.btn-ghost:hover {
    color: var(--dark);
    background: var(--gray-50);
}

/* Hero Section */
.hero {
    padding: 120px 0 80px;
    background: var(--white);
}

.hero-content {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 20px;
}

.hero h1 {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--dark);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.hero h1 span {
    color: var(--primary);
}

.hero p {
    font-size: 1.125rem;
    color: var(--gray-500);
    margin-bottom: 28px;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin: 56px 0 32px;
    padding: 40px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* Compact stats inside promo-card (authorized view) */
.services-page .promo-content .hero-stats {
    margin: 28px 0 20px;
    padding: 24px 0;
}

.stat {
    text-align: center;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dark);
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: 0.8125rem;
    color: var(--gray-500);
    margin-top: 2px;
}

/* Services Table Section */
.services-section {
    padding: 80px 0;
    background: var(--gray-50);
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.section-header p {
    color: var(--gray-500);
    font-size: 1rem;
}

.services-table-wrapper {
    background: var(--white);
    overflow: hidden;
}

.services-table {
    width: 100%;
    border-collapse: collapse;
}

.services-table thead {
    background: var(--gray-50);
}

.services-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--gray-200);
}

.services-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 32px;
    transition: color 0.2s, background 0.2s;
}

.services-table th.sortable:hover {
    color: var(--gray-700);
    background: var(--gray-50);
}

.services-table th.sortable .sort-icon {
    width: 14px;
    height: 14px;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.3;
    transition: opacity 0.2s, transform 0.2s;
}

.services-table th.sortable:hover .sort-icon {
    opacity: 0.6;
}

.services-table th.sortable.sorted-asc .sort-icon {
    opacity: 1;
    transform: translateY(-50%) rotate(180deg);
    stroke: var(--primary);
}

.services-table th.sortable.sorted-desc .sort-icon {
    opacity: 1;
    transform: translateY(-50%) rotate(0deg);
    stroke: var(--primary);
}

.services-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.875rem;
}

.services-table tbody tr:hover {
    background: var(--gray-50);
}

/* Clickable service rows - cursor pointer only on data rows, not headers */
.services-table tbody tr.service-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.services-table tbody tr:last-child td {
    border-bottom: none;
}

.service-platform {
    display: flex;
    align-items: center;
    gap: 10px;
}

.platform-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.platform-icon svg {
    width: 24px;
    height: 24px;
}

.service-name {
    font-weight: 500;
    color: var(--dark);
}

.service-price {
    font-weight: 600;
    color: var(--dark);
}

.service-speed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #ecfdf5;
    color: #059669;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.service-quality {
    display: flex;
    gap: 1px;
}

.quality-star {
    color: var(--yellow);
    font-size: 0.75rem;
}

.btn-order {
    padding: 6px 14px;
    font-size: 0.8125rem;
}

.table-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

/* How It Works Section */
.how-it-works {
    padding: 80px 0;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.step-card {
    text-align: center;
    padding: 28px 20px;
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    position: relative;
}

.step-number {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
}

.step-icon {
    width: 48px;
    height: 48px;
    margin: 8px auto 16px;
    background: var(--primary-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.step-icon svg {
    width: 24px;
    height: 24px;
}

.step-card h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
}

.step-card p {
    font-size: 0.8125rem;
    color: var(--gray-500);
    line-height: 1.5;
}

/* Why Choose Us Section */
.why-us {
    padding: 80px 0;
    background: var(--gray-900);
    color: white;
}

.why-us .section-header h2 {
    color: white;
}

.why-us .section-header p {
    color: var(--gray-400);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.feature-card {
    padding: 24px;
    background: var(--gray-800);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.feature-icon {
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin-bottom: 16px;
}

.feature-icon svg {
    width: 20px;
    height: 20px;
}

.feature-card h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.feature-card p {
    color: var(--gray-400);
    font-size: 0.8125rem;
    line-height: 1.6;
}

/* Support Banner */
.support-banner {
    padding: 60px 0;
    background: var(--primary);
}

.support-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    border-radius: 12px;
    padding: 32px 40px;
}

.support-text h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
}

.support-text p {
    color: var(--gray-500);
    font-size: 0.9375rem;
}

.support-features {
    display: flex;
    gap: 24px;
}

.support-feature {
    display: flex;
    align-items: center;
    gap: 10px;
}

.support-feature-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.support-feature-icon svg {
    width: 20px;
    height: 20px;
}

.support-feature span {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--dark);
}

/* Reviews Section */
.reviews {
    padding: 80px 0;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.review-card {
    padding: 24px;
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}

.review-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.review-avatar {
    width: 40px;
    height: 40px;
    background: var(--gray-200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    font-weight: 600;
    font-size: 0.875rem;
}

.review-author {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--dark);
}

.review-rating {
    display: flex;
    gap: 1px;
    color: var(--yellow);
    font-size: 0.75rem;
}

.review-card p {
    color: var(--gray-600);
    font-size: 0.8125rem;
    line-height: 1.6;
}

/* Business Section */
.business-section {
    padding: 80px 0;
    background: var(--gray-50);
}

.business-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.business-card {
    text-align: center;
    padding: 36px 28px;
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}

.business-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    background: var(--primary-light);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.business-icon svg {
    width: 28px;
    height: 28px;
}

.business-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
}

.business-card p {
    color: var(--gray-500);
    font-size: 0.875rem;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* FAQ Section */
.faq-section {
    padding: 80px 0;
}

.faq-container {
    max-width: 720px;
    margin: 40px auto 0;
}

.faq-item {
    border-bottom: 1px solid var(--gray-200);
}

.faq-item:first-child {
    border-top: 1px solid var(--gray-200);
}

.faq-question {
    width: 100%;
    padding: 18px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--dark);
    text-align: left;
}

.faq-icon {
    width: 20px;
    height: 20px;
    color: var(--gray-400);
    transition: transform 0.2s;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
}

.faq-item.active .faq-answer {
    max-height: 200px;
}

.faq-answer p {
    padding-bottom: 18px;
    color: var(--gray-600);
    font-size: 0.875rem;
    line-height: 1.7;
}

/* Blog Section */
.blog-section {
    padding: 80px 0;
    background: var(--gray-50);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.blog-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

.blog-image {
    height: 160px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
}

.blog-image svg {
    width: 48px;
    height: 48px;
}

.blog-content {
    padding: 20px;
}

.blog-category {
    display: inline-block;
    padding: 3px 10px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.blog-card h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.4;
}

.blog-card p {
    color: var(--gray-500);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* CTA Section */
.cta-section {
    padding: 80px 0;
    text-align: center;
}

.cta-section h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.cta-section p {
    font-size: 1rem;
    color: var(--gray-500);
    margin-bottom: 24px;
}

/* Footer */
footer {
    background: var(--gray-900);
    color: var(--gray-400);
    padding: 64px 0 24px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.footer-brand {
    color: white;
}

.footer-brand p {
    margin-top: 12px;
    font-size: 0.8125rem;
    color: var(--gray-400);
    line-height: 1.7;
}

.footer-column h4 {
    color: white;
    font-weight: 600;
    font-size: 0.8125rem;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-column ul {
    list-style: none;
}

.footer-column li {
    margin-bottom: 10px;
}

.footer-column a {
    color: var(--gray-400);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.15s;
}

.footer-column a:hover {
    color: white;
}

.footer-bottom {
    padding-top: 24px;
    border-top: 1px solid var(--gray-800);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-bottom p {
    font-size: 0.8125rem;
}

.social-links {
    display: flex;
    gap: 8px;
}

.social-link {
    width: 36px;
    height: 36px;
    background: var(--gray-800);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    text-decoration: none;
    transition: all 0.15s;
}

.social-link:hover {
    background: var(--gray-700);
    color: white;
}

.social-link svg {
    width: 18px;
    height: 18px;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero h1 {
        font-size: 2.25rem;
    }

    .steps-grid,
    .features-grid,
    .business-grid,
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    nav {
        display: none;
    }

    .hero h1 {
        font-size: 1.875rem;
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: 24px;
    }

    .stat {
        flex: 0 0 calc(50% - 12px);
    }

    .steps-grid,
    .features-grid,
    .business-grid,
    .reviews-grid,
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .support-content {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }

    .support-features {
        flex-direction: column;
        gap: 12px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .services-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .services-table {
        min-width: 800px;
    }
}

/* Services Page Styles */
.services-page {
    min-height: 100vh;
}

/* NOT_AUTH: обёртка с ограничением ширины и отступом под fixed header */
body.not_auth .services-wrapper {
    width: 85%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 88px 0 40px; /* 64px header + 24px отступ */
}

/* AUTH: убрать лишний фон чтобы блоки были визуально отдельными */
body.auth .services-page {
    padding-top: 0;
    background: transparent;
}

.services-hero {
    background: var(--white);
    padding: 40px 0 30px;
    text-align: center;
    border-bottom: 1px solid var(--gray-200);
}

.services-hero h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.services-hero p {
    font-size: 1rem;
    color: var(--gray-600);
}

.services-filters-section {
    padding: 24px 0 16px;
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
}

.filters-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-decoration: none;
}

/* Services page specific - equal width buttons (except service type filters) */
.services-page .filter-btn:not(.service-type-btn) {
    width: 100%;
}

.dashboard-page .filter-btn {
    width: 145px;
    flex: 0 0 145px;
}

.filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

.filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.filter-btn.active .filter-icon {
    fill: var(--white);
}

.filter-btn.active .filter-icon svg,
.filter-btn.active .filter-icon svg path {
    fill: white !important;
}

.filter-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Service Type Filters */
.service-type-filters {
    padding: 16px 0;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-type-filters-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.service-type-btn {
    padding: 8px 18px;
    font-size: 0.875rem;
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--gray-700);
    font-weight: 500;
    width: 100%;
    text-align: center;
}

.service-type-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

.service-type-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.search-sort-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0 0 25px 0;
}

.search-box {
    position: relative;
    flex: 1;
    width: 100%;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--gray-400);
    pointer-events: none;
}

.search-box input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.875rem;
    transition: all 0.2s;
    /* margin: 20px 0; */
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.sort-select {
    padding: 10px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    background: var(--white);
    cursor: pointer;
    transition: all 0.2s;
}

.sort-select:hover {
    border-color: var(--primary);
}

.sort-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.services-table-section {
    padding: 20px 0 80px;
}

.services-count {
    margin-bottom: 20px;
    font-size: 0.875rem;
    color: var(--gray-600);
    font-weight: 500;
}

.service-id {
    font-weight: 600;
    color: var(--gray-500);
}

.service-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.service-name {
    font-weight: 600;
    color: var(--dark);
    display: block;
}

.service-category {
    font-size: 0.8125rem;
    color: var(--gray-500);
    text-transform: capitalize;
}

.minmax-cell {
    font-size: 0.875rem;
}

.minmax-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.minmax-info span {
    color: var(--gray-600);
}

.description-cell {
    max-width: 300px;
}

.service-description {
    color: var(--gray-600);
    font-size: 0.875rem;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.875rem;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.empty-state svg {
    width: 64px;
    height: 64px;
    color: var(--gray-300);
    margin-bottom: 20px;
}

.empty-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 0.875rem;
    color: var(--gray-500);
}

/* Service categories section */
.services-categories-section {
    padding: 32px 0 80px;
}

.service-category-block {
    margin-bottom: 24px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
}

.service-category-block:last-child {
    margin-bottom: 0;
}

.category-header {
    padding: 16px 20px;
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
}

.category-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.category-title h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.category-name-text {
    display: inline-block;
}

.category-badges {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.category-badges .badge {
    font-size: 0.75rem;
    padding: 3px 8px;
}

.service-name-cell {
    font-size: 0.875rem;
    color: var(--gray-700);
}

.service-with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-name-with-badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.service-name-main {
    font-weight: 600;
    color: var(--dark);
    font-size: 0.875rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 4px;

    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto,
               "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.service-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Badge styles */
.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
}

.badge-orange {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

.badge-purple {
    background: #faf5ff;
    color: #7e22ce;
    border: 1px solid #e9d5ff;
}

.badge-blue {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.badge-green {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.badge-gold {
    background: #fefce8;
    color: #a16207;
    border: 1px solid #fef08a;
}

.badge-cyan {
    background: #ecfeff;
    color: #0e7490;
    border: 1px solid #a5f3fc;
}

.badge-gray {
    background: #f9fafb;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

.badge-pink {
    background: #fdf2f8;
    color: #be185d;
    border: 1px solid #fbcfe8;
}

.badge-indigo {
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}

.badge-red {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.badge-emerald {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.badge-amber {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.badge-violet {
    background: #f5f3ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
}

.platform-icon-small {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.platform-icon-small svg {
    width: 18px;
    height: 18px;
}

/* Services table value badges */
.rate-cell,
.min-cell,
.max-cell,
.average-time-cell {
    white-space: nowrap;
    text-align: center;
}

.rate-cell span {
    display: inline-block;
    padding: 3px 12px;
    background: #4ade80;
    color: #fff;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.min-cell span {
    display: inline-block;
    padding: 3px 12px;
    background: #fbbf24;
    color: #fff;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.max-cell span {
    display: inline-block;
    padding: 3px 12px;
    background: #f87171;
    color: #fff;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.average-time-cell span {
    display: inline-block;
    padding: 3px 12px;
    background: #9ca3af;
    color: #fff;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.description-btn-cell {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--primary);
    border: none;
    border-radius: 6px;
    color: var(--white);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.btn-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* Favorite button styles */
.btn-favorite {
    background: #fbbf24;
}

.btn-favorite:hover {
    background: #f59e0b;
}

.btn-favorite.disabled {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-favorite.disabled:hover {
    background: #e5e7eb;
    transform: none;
}

/* Show More Button Container */
.show-more-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 48px 0;
    margin-top: 24px;
}

.show-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.show-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.show-more-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.show-more-btn:hover svg {
    transform: translateY(2px);
}

.show-more-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.show-more-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Modal styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--white);
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: scale(0.95);
    transition: transform 0.3s;
}

.modal-overlay.active .modal {
    transform: scale(1);
}

.services-page .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-200);
}

.services-page .modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dark);
    margin: 0;
    flex: 1;
    padding-right: 16px;
    line-height: 1.4;
}

/* Modal title with badges */
.services-page .modal-header h3 .service-name-main {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
}

.services-page .modal-header h3 .service-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.services-page .modal-header h3 .service-badges .badge {
    font-size: 0.7rem;
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.modal-close:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}

.modal-close svg {
    width: 20px;
    height: 20px;
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-description {
    color: var(--gray-700);
    line-height: 1.6;
}

.modal-description p {
    /* margin-bottom: 12px; */
}

.modal-description p:last-child {
    margin-bottom: 0;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.modal-footer .btn,
.modal-footer .btn-favorite-modal {
    white-space: nowrap;
}

@media (max-width: 480px) {
    .modal-footer {
        flex-direction: column;
    }
    .modal-footer .btn,
    .modal-footer .btn-favorite-modal {
        width: 100%;
        justify-content: center;
    }
}

/* Favorite button in modal */
.btn-favorite-modal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fbbf24;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-favorite-modal svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.btn-favorite-modal:hover {
    background: #f59e0b;
    transform: translateY(-1px);
}

.btn-favorite-modal.disabled {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
}

.btn-favorite-modal.disabled:hover {
    background: #e5e7eb;
    transform: none;
}

/* Responsive styles for services page */
@media (max-width: 768px) {
    .services-hero h1 {
        font-size: 1.875rem;
    }

    .services-hero p {
        font-size: 1rem;
    }

    .search-sort-wrapper {
        flex-direction: column;
    }

    .search-box {
        max-width: 100%;
    }

    .sort-select {
        width: 100%;
    }

    .category-filters {
        gap: 8px;
    }

    .filter-btn {
        padding: 8px 16px;
        font-size: 0.8125rem;
    }

    .service-type-filters {
        padding-top: 8px;
    }

    .service-type-filters-inner {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 6px;
    }

    .service-type-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    .category-title h2 {
        font-size: 1.25rem;
    }

    .category-badges .badge {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    .modal {
        width: 95%;
    }

    .services-page .modal-header,
    .services-page .modal-body,
    .services-page .modal-footer {
        padding: 16px;
    }
}


/* ============================================
   DASHBOARD STYLES
   ============================================ */

/* Dashboard body styling */
body.dashboard-page {
    color: var(--text);
    background: var(--bg);
}

/* Dashboard layout */
.app {
    min-height: 100vh;
    display: flex;
    gap: 0;
}

/* Dashboard sidebar */
.sidebar {
    width: 280px;
    background: var(--card);
    border-right: 1px solid var(--line);
    padding: 18px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 18px;
}

.brand .logo {
    width: 28px;
    height: 28px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgba(20,99,255,.15), rgba(20,99,255,.35));
    display: grid;
    place-items: center;
    border: 1px solid rgba(20,99,255,.25);
}

.brand .logo svg {
    width: 16px;
    height: 16px;
}

.brand .name {
    font-weight: 700;
    letter-spacing: .2px;
}

.user {
    padding: 8px 10px 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
}

.user .who {
    font-weight: 700;
    margin-bottom: 2px;
}

.user .email {
    color: var(--muted);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar .stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 10px 16px;
}

.sidebar .stat {
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    padding: 10px;
    background: #fbfcff;
}

.sidebar .stat .val {
    font-weight: 800;
    color: var(--blue);
    font-size: 18px;
    line-height: 1.1;
}

.sidebar .stat .lbl {
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
}

.sidebar .cta {
    display: grid;
    gap: 10px;
    padding: 0 10px 14px;
}

.sidebar .nav {
    padding: 10px;
    display: grid;
    gap: 2px;
}

.sidebar .nav h6 {
    margin: 10px 0 8px;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sidebar .nav a {
    text-decoration: none;
    color: #0f172a;
    padding: 10px 10px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
}

.sidebar .nav a:hover {
    background: #f2f6ff;
    border-color: rgba(20,99,255,.18);
}

.sidebar .nav a.active {
    background: #eef4ff;
    border-color: rgba(20,99,255,.25);
    color: var(--blue-700);
    font-weight: 700;
}

.sidebar .nav .n-ico {
    width: 18px;
    height: 18px;
    color: var(--muted);
}

.sidebar .nav a.active .n-ico {
    color: var(--blue-700);
}

.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
}

.sidebar:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

.sidebar:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.sidebar {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.sidebar:hover {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Dashboard main content */
.main {
    flex: 1;
    padding: 28px 28px 22px;
    min-width: 0;
}

.header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.header h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* Dashboard buttons */
.btn-blue {
    background: var(--blue);
    color: #fff;
    border: 0;
    border-radius: 0.5rem;
    padding: 12px 14px;
    font-weight: 700;
}

.btn-blue:hover {
    background: var(--blue-700);
}

.btn-blue:active {
    transform: translateY(1px);
}

.btn-green {
    background: var(--green);
    color: #fff;
    border: 0;
    border-radius: 0.5rem;
    padding: 12px 14px;
    font-weight: 700;
}

.btn-green:hover {
    filter: brightness(.95);
}

.btn-green:active {
    transform: translateY(1px);
}

.btn .ico {
    width: 18px;
    height: 18px;
    border-radius: 0.5rem;
    background: rgba(255,255,255,.22);
    display: grid;
    place-items: center;
}

.btn .ico svg {
    width: 14px;
    height: 14px;
}

/* Dashboard tables */
.orders-table-container {
    background: var(--card);
    border-radius: 0.5rem;
    border: 1px solid var(--line);
    overflow: hidden;
    overflow-x: auto;
    box-shadow: var(--shadow);
    -webkit-overflow-scrolling: touch;
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
}

.orders-table thead {
    background: #f8fafc;
    border-bottom: 2px solid var(--line);
}

.orders-table th {
    padding: 14px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.orders-table tbody tr {
    border-bottom: 1px solid var(--line);
    transition: background 0.1s;
}

.orders-table tbody tr:hover {
    background: #f8fafc;
}

.orders-table tbody tr:last-child {
    border-bottom: none;
}

.orders-table td {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--text);
    vertical-align: middle;
}

/* Link column: wrap long URLs instead of truncating */
.orders-table .order-link {
    display: block;
    max-width: 300px;
    word-break: break-all;
    color: var(--blue);
    text-decoration: none;
}

.orders-table .order-link:hover {
    text-decoration: underline;
}

/* Service column: minimum width for readability */
.orders-table .service-name-with-badges {
    min-width: 300px;
}

.order-id {
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
}

.order-id:hover {
    text-decoration: underline;
}

.order-status {
    padding: 4px 10px;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: 0.3px;
}

.status-completed {
    background: #d1fae5;
    color: #065f46;
}

.status-canceled,
.status-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.status-pending {
    background: #fef3c7;
    color: #92400e;
}

.status-processing {
    background: #dbeafe;
    color: #1e40af;
}

.status-in-progress {
    background: #e0e7ff;
    color: #3730a3;
}

.status-partial {
    background: #fce7f3;
    color: #831843;
}

.status-active {
    background: #dbeafe;
    color: #1e40af;
}

.status-rejected {
    background: #fee2e2;
    color: #991b1b;
}

/* ===== Delivery progress bar (orders table, Remains column) ===== */
/* Shows how much of the order has already been delivered.
   Bar color is inherited from the order status class on the same element. */
.orders-table td.delivery-cell {
    min-width: 160px;
}

.delivery-progress {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 140px;
    /* Fallback colors — every .status-* rule below overrides this pair */
    --bar: #1463ff;
    --bar-soft: #60a5fa;
}

.delivery-progress-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.delivery-progress-track {
    position: relative;
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.09);
    overflow: hidden;
}

.delivery-progress-fill {
    position: relative;
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--bar-soft), var(--bar));
    overflow: hidden;
    transition: width 0.4s ease;
}

.delivery-progress-pct {
    min-width: 34px;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    color: var(--bar);
    /* Tabular figures keep the percent column from jittering between rows */
    font-variant-numeric: tabular-nums;
}

.delivery-progress-meta {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Per-status bar colors, matching the .status-* badge palette above.
   Keyed off data-status so the badge backgrounds never leak into this cell. */
.delivery-progress[data-status="completed"] { --bar: #059669; --bar-soft: #34d399; }
.delivery-progress[data-status="in-progress"],
.delivery-progress[data-status="inprogress"] { --bar: #4f46e5; --bar-soft: #818cf8; }
.delivery-progress[data-status="processing"],
.delivery-progress[data-status="active"] { --bar: #1d4ed8; --bar-soft: #60a5fa; }
.delivery-progress[data-status="pending"] { --bar: #d97706; --bar-soft: #fbbf24; }
.delivery-progress[data-status="partial"] { --bar: #db2777; --bar-soft: #f472b6; }
.delivery-progress[data-status="canceled"],
.delivery-progress[data-status="cancelled"],
.delivery-progress[data-status="rejected"] { --bar: #94a3b8; --bar-soft: #cbd5e1; }

/* Finished-unsuccessfully orders stay visually quiet */
.delivery-progress[data-status="canceled"] .delivery-progress-fill,
.delivery-progress[data-status="cancelled"] .delivery-progress-fill,
.delivery-progress[data-status="rejected"] .delivery-progress-fill {
    opacity: 0.6;
}

/* Live orders get a slow highlight sweep so "still running" reads at a glance */
.delivery-progress[data-status="in-progress"] .delivery-progress-fill::after,
.delivery-progress[data-status="inprogress"] .delivery-progress-fill::after,
.delivery-progress[data-status="processing"] .delivery-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: translateX(-100%);
    animation: delivery-progress-sweep 2.4s ease-in-out infinite;
}

@keyframes delivery-progress-sweep {
    to { transform: translateX(100%); }
}

/* Dark theme: lighter track, brighter bar so it stays readable on the dark card */
[data-theme="dark"] .delivery-progress-track {
    background: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .delivery-progress[data-status="completed"] { --bar: #34d399; --bar-soft: #059669; }
[data-theme="dark"] .delivery-progress[data-status="in-progress"],
[data-theme="dark"] .delivery-progress[data-status="inprogress"] { --bar: #818cf8; --bar-soft: #4f46e5; }
[data-theme="dark"] .delivery-progress[data-status="processing"],
[data-theme="dark"] .delivery-progress[data-status="active"] { --bar: #60a5fa; --bar-soft: #1d4ed8; }
[data-theme="dark"] .delivery-progress[data-status="pending"] { --bar: #fbbf24; --bar-soft: #d97706; }
[data-theme="dark"] .delivery-progress[data-status="partial"] { --bar: #f472b6; --bar-soft: #db2777; }
[data-theme="dark"] .delivery-progress[data-status="canceled"],
[data-theme="dark"] .delivery-progress[data-status="cancelled"],
[data-theme="dark"] .delivery-progress[data-status="rejected"] { --bar: #cbd5e1; --bar-soft: #94a3b8; }

[data-theme="dark"] .delivery-progress-meta {
    color: var(--text-muted, #7A7A7A);
}

@media (max-width: 768px) {
    .orders-table td.delivery-cell { min-width: 128px; }
    .delivery-progress { min-width: 112px; }
}

@media (prefers-reduced-motion: reduce) {
    .delivery-progress-fill { transition: none; }
    .delivery-progress-fill::after { animation: none; }
}

.status-error {
    background: #fecaca;
    color: #7f1d1d;
}

.status-refunded {
    background: #dbeafe;
    color: #1e40af;
}

.status-answered {
    background: #dbeafe;
    color: #1e40af;
}

.status-closed {
    background: #fee2e2;
    color: #991b1b;
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--text);
}

.form-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    font-size: 14px;
    outline: none;
    transition: all 0.15s;
    background: var(--card);
    color: var(--text);
}

.form-input:focus {
    border-color: var(--blue);
    box-shadow: var(--focus);
}

.form-input::placeholder {
    color: var(--muted);
}

.form-select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    font-size: 14px;
    outline: none;
    transition: all 0.15s;
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.form-select:focus {
    border-color: var(--blue);
    box-shadow: var(--focus);
}

.form-textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    font-size: 14px;
    outline: none;
    transition: all 0.15s;
    background: var(--card);
    color: var(--text);
    resize: vertical;
    min-height: 150px;
    font-family: inherit;
}

.form-textarea:focus {
    border-color: var(--blue);
    box-shadow: var(--focus);
}

/* Mobile Sidebar Toggle Button */
.sidebar-toggle {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    width: 44px;
    height: 44px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    z-index: 100;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.2s;
}

.sidebar-toggle:hover {
    background: var(--gray-50);
}

.sidebar-toggle svg {
    width: 20px;
    height: 20px;
    color: var(--gray-700);
}

/* Sidebar Overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    opacity: 1;
}

/* Mobile Header */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    z-index: 100;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
}

.mobile-header .sidebar-toggle {
    position: static;
    flex-shrink: 0;
}

.mobile-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dashboard responsive */
@media (max-width: 1100px) {
    .mobile-header {
        display: flex;
    }

    .mobile-header .sidebar-toggle {
        display: flex;
    }

    .sidebar {
        position: fixed;
        left: -300px;
        z-index: 101;
        transition: left 0.3s ease;
    }

    .sidebar.active {
        left: 0;
    }

    .sidebar-overlay.active {
        display: block;
    }

    .main {
        padding: 22px;
        padding-top: 76px;
    }
}

@media (max-width: 768px) {
    .mobile-header {
        height: 56px;
        padding: 0 12px;
    }

    .mobile-title {
        font-size: 16px;
    }

    .main {
        padding-top: 72px;
    }
}

@media (max-width: 480px) {
    .mobile-header {
        height: 52px;
    }

    .mobile-header .sidebar-toggle {
        width: 40px;
        height: 40px;
    }

    .mobile-title {
        font-size: 15px;
    }

    .main {
        padding: 12px;
        padding-top: 64px;
    }

    .sidebar {
        width: 100%;
        max-width: 300px;
    }
}

.how-it-works .features-grid,
.services-section {
    color: white;
}



.services-section .features-grid .btn-secondary {
    background: var(--gray-100);
    color: var(--gray-700);
    width: 100%;
    margin: 20px 0 0 0;
}


/* main page */

/* Modal Styles */
.main-landing .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.main-landing .modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.main-landing .modal {
    background: var(--white, #fff);
    border-radius: 12px;
    max-width: 520px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.2s;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.main-landing .modal-overlay.active .modal {
    transform: translateY(0) scale(1);
}

.main-landing .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
}

.main-landing .modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--dark, #111827);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-landing .modal-header .platform-icon {
    width: 28px;
    height: 28px;
}

.main-landing .modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--gray-100, #f3f4f6);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500, #6b7280);
    transition: background 0.15s, color 0.15s;
}

.main-landing .modal-close:hover {
    background: var(--gray-200, #e5e7eb);
    color: var(--dark, #111827);
}

.main-landing .modal-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(80vh - 130px);
}

.main-landing .modal-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--gray-600, #4b5563);
}

.main-landing .modal-description br {
    display: block;
    margin: 4px 0;
}

.main-landing .modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--gray-200, #e5e7eb);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Button variants for table */
.btn-show {
    padding: 6px 12px;
    font-size: 13px;
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-700, #374151);
    border: 1px solid var(--gray-200, #e5e7eb);
}

.btn-show:hover {
    background: var(--gray-200, #e5e7eb);
}

.btn-check {
    padding: 6px 14px;
    font-size: 13px;
}

/* Quality stars */
.quality-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    color: #fbbf24;
}

.quality-stars svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Price styling */
.price-cell {
    font-weight: 600;
    color: var(--dark, #111827);
    font-size: 14px;
}

.price-cell small {
    font-weight: 400;
    color: var(--gray-500, #6b7280);
    font-size: 11px;
}

/* Service name in table */
.service-name {
    font-weight: 500;
    color: var(--dark, #111827);
    font-size: 14px;
}

.service-meta {
    font-size: 12px;
    color: var(--gray-500, #6b7280);
    margin-top: 2px;
}


/* --- EEAT / SEO Content Blocks (Landing) --- */
.eeat-block { margin-top: 28px; }
.eeat-lead { max-width: 920px; margin: 14px auto 0; text-align: center; color: var(--gray-600); line-height: 1.75; }

.eeat-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 26px;
}
.eeat-mini {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}
.eeat-mini h3 {
    color: var(--dark);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}
.eeat-mini p {
    color: var(--gray-600);
    font-size: 0.875rem;
    line-height: 1.7;
    margin-bottom: 10px;
}
.eeat-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.eeat-bullets li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--gray-600);
    font-size: 0.875rem;
    line-height: 1.65;
}
.eeat-bullets li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--primary);
    margin-top: 8px;
    flex: 0 0 8px;
}

.eeat-compare {
    margin-top: 22px;
    background: var(--primary-light);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 12px;
    padding: 18px 20px;
    color: var(--gray-700);
}
.eeat-compare strong { color: var(--dark); }

.eeat-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 20px;
    margin-top: 22px;
    align-items: start;
}
.eeat-panel {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 22px;
}
.eeat-panel h3 {
    color: var(--dark);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.eeat-panel p { color: var(--gray-600); font-size: 0.875rem; line-height: 1.75; }

.eeat-callout {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 22px;
    margin-top: 30px;
}
.eeat-callout .tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    color: var(--gray-700);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.eeat-callout h3 { color: var(--dark); font-size: 1rem; font-weight: 800; margin-bottom: 10px; }
.eeat-callout p { color: var(--gray-600); font-size: 0.875rem; line-height: 1.75; margin-bottom: 10px; }

.eeat-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.eeat-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    color: var(--gray-700);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.eeat-links a:hover { border-color: rgba(59, 130, 246, 0.35); background: var(--primary-light); color: var(--dark); }

/* Dark-section variants (reused inside .why-us if needed) */
.why-us .eeat-panel,
.why-us .eeat-callout {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}

/* SEO Anchor block */
.seo-anchor {
    padding: 72px 0;
    background: var(--white);
    border-top: 1px solid var(--gray-100);
}
.seo-anchor .section-header { margin-bottom: 26px; }
.seo-anchor-text {
    max-width: 920px;
    margin: 0 auto;
    color: var(--gray-600);
    font-size: 0.9375rem;
    line-height: 1.85;
    text-align: center;
}

@media (max-width: 1024px) {
    .eeat-mini-grid { grid-template-columns: repeat(2, 1fr); }
    .eeat-split { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .eeat-mini-grid { grid-template-columns: 1fr; }
    .eeat-links { justify-content: center; }
}

/* SEO anchor + quick answers */
.seo-anchor{background:var(--gray-50);padding:80px 0;}
.seo-anchor .section-header{margin-bottom:28px;}
.authority-line{margin-top:14px;color:var(--text);font-weight:600;text-align: center;}
.quick-faq{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.quick-faq .qcard{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:18px;}
.quick-faq .qcard h3{font-size:16px;margin:0 0 8px;}
.quick-faq .qcard p{margin:0;color:var(--text-light);font-size:14px;line-height:1.55;}
@media (max-width: 900px){.quick-faq{grid-template-columns:1fr;}}

/* Trust section layout fix */
.business-grid + .eeat-block{margin-top:28px;}



/* Micro-FAQ (near footer) */
.authority-line{
    margin-top:18px;
    padding:14px 16px;
    border:1px solid var(--gray-200);
    border-radius:14px;
    background:#fff;
    font-weight:600;
    color:var(--text-dark);
}
.micro-faq{margin-top:20px;}
.micro-faq h3{font-size:18px;margin:0 0 12px;color:var(--text-dark);}
.micro-faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.micro-faq-item{
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius:16px;
    padding:16px 16px 14px;
}
.micro-faq-item h4{margin:0 0 8px;font-size:15px;color:var(--text-dark);}
.micro-faq-item p{margin:0;color:var(--text-muted);font-size:13px;line-height:1.55;}
@media (max-width: 980px){
    .micro-faq-grid{grid-template-columns:1fr;}
}

/* Ensure alternation: SEO anchor on muted background */
section.seo-anchor{background:var(--gray-50);}








/* ============ LOGIN MODAL (variant B: SaaS) ============ */
.login-modal-overlay{
    position:fixed;inset:0;
    background:rgba(15,23,42,.55);
    display:none;
    align-items:center;justify-content:center;
    padding:18px;
    z-index:999;
}
.login-modal-overlay.is-open{display:flex}

.login-modal{
    width:min(940px, 100%);
    background:#fff;
    border-radius:18px;
    box-shadow:var(--shadow-lg);
    overflow:hidden;
    transform: translateY(8px);
    opacity:0;
    transition: all .18s ease;
    border:1px solid rgba(226,232,240,.8);
}
.login-modal-overlay.is-open .login-modal{
    transform: translateY(0);
    opacity:1;
}

.login-grid{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    min-height: 520px;
}
@media (max-width:900px){
    .login-grid{grid-template-columns:1fr;min-height:auto}
    .login-side{display:none}
}

/* Left: form */
.login-main{padding:26px 26px 22px}
.login-top{
    display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
    padding-bottom:14px;border-bottom:1px solid var(--gray-200);
}
.login-title-wrap{display:flex;gap:12px;align-items:center}
.login-logo{
    width:40px;height:40px;border-radius:12px;
    background: var(--primary-light);
    border:1px solid var(--gray-200);
    display:grid;place-items:center;
    color:var(--primary);
}
.login-title{font-size:1.25rem;letter-spacing:-.01em}
.login-sub{margin-top:4px;color:var(--gray-600);font-size:.92rem;line-height:1.35}
.login-close{
    width:40px;height:40px;border-radius:12px;
    border:1px solid var(--gray-200);
    background:var(--gray-50);
    display:grid;place-items:center;
    cursor:pointer;transition:.15s;
    flex:0 0 auto;
}
.login-close:hover{background:var(--gray-100)}
.login-close:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(59,130,246,.22)}

.login-form{padding-top:18px}
.login-form .field{margin-bottom:12px}
.login-form .label{
    display:flex;align-items:center;justify-content:space-between;
    font-size:.85rem;color:var(--gray-700);font-weight:600;
    margin-bottom:6px;
}
.login-form .input{
    width:100%;
    height:44px;
    padding:0 12px;
    border-radius:10px;
    border:1px solid var(--gray-300);
    background:#fff;
    font-size:.95rem;
    transition:.15s;
}
.login-form .input:focus{
    outline:none;
    border-color: rgba(59,130,246,.6);
    box-shadow:0 0 0 4px rgba(59,130,246,.16);
}
.login-modal .input-wrap{position:relative}
.login-modal .input-icon{
    position:absolute;left:12px;top:50%;transform:translateY(-50%);
    width:18px;height:18px;color:var(--gray-500);
}
.login-form .input.has-icon{padding-left:38px}
.login-modal .pw-toggle{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);
    height:32px;width:38px;border-radius:10px;border:1px solid transparent;
    background:transparent;cursor:pointer;color:var(--gray-500);
    display:grid;place-items:center;
}
.login-modal .pw-toggle:hover{background:var(--gray-50);color:var(--gray-700)}
.login-modal .pw-toggle:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(59,130,246,.18)}

.login-modal .row{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;margin:10px 0 14px;flex-wrap:wrap;
}
.login-modal .check{
    display:flex;align-items:center;gap:10px;
    color:var(--gray-700);font-size:.9rem;
}
.login-modal .check input{width:16px;height:16px}
.login-modal .link{
    color:var(--primary);
    font-weight:600;
    font-size:.9rem;
}
.login-modal .link:hover{text-decoration:underline}
.login-modal .error{
    display:none;
    margin-top:10px;
    padding:10px 12px;
    border-radius:12px;
    background:#fff1f2;
    border:1px solid #fecdd3;
    color:#9f1239;
    font-size:.9rem;
    line-height:1.35;
}
.login-modal .error.is-show{display:block}

.login-modal .actions{
    display:flex;gap:10px;flex-wrap:wrap;
    margin-top:12px;
}
.login-modal .btn-wide{flex:1;min-width:200px}

.login-modal .divider{
    display:flex;align-items:center;gap:12px;
    margin:16px 0 12px;color:var(--gray-500);font-size:.85rem;
}
.login-modal .divider:before,.login-modal .divider:after{
    content:"";height:1px;background:var(--gray-200);flex:1;
}
/* .login-modal .oauth{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
} */
.login-modal .oauth .btn{width:100%}
@media (max-width:520px){.login-modal .oauth{grid-template-columns:1fr}.login-modal .btn-wide{min-width:0}}
@media (max-width:480px){
    .login-modal-overlay{padding:10px}
    .login-modal{border-radius:14px}
    .login-main{padding:20px 16px 18px}
    .login-title{font-size:1.125rem}
    .login-sub{font-size:.85rem}
    .login-logo,.login-close{width:36px;height:36px;border-radius:10px}
    .login-form .input{height:42px;font-size:16px}
    .login-modal .row{margin:8px 0 12px}
    .login-modal .check,.login-modal .link{font-size:.85rem}
}
@media (max-width:375px){
    .login-main{padding:16px 12px}
    .login-top{gap:10px;padding-bottom:12px}
    .login-title-wrap{gap:8px}
    .login-title{font-size:1rem}
    .login-sub{font-size:.8rem}
    .login-form{padding-top:14px}
    .login-form .field{margin-bottom:10px}
    .login-form .label{font-size:.8rem}
    .login-modal .actions{gap:8px}
    .login-modal .divider{margin:12px 0 10px;font-size:.8rem}
}

.login-foot{
    margin-top:14px;
    color:var(--gray-600);
    font-size:.92rem;
    line-height:1.45;
}

/* Right: SaaS value panel */
.login-side{
    padding:26px;
    background:
    radial-gradient(1000px 420px at 20% 0%, rgba(59,130,246,.18), transparent 55%),
    radial-gradient(1000px 420px at 90% 40%, rgba(37,99,235,.14), transparent 55%),
    linear-gradient(180deg, #0b1220, #0f172a);
    color:#e5e7eb;
    position:relative;
    overflow:hidden;
}
.side-badge{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 12px;border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    font-weight:700;font-size:.85rem;
    color:#fff;
}
.side-title{margin-top:14px;font-size:1.45rem;letter-spacing:-.02em}
.side-copy{margin-top:10px;color:rgba(226,232,240,.85);line-height:1.55}
.side-list{margin-top:16px;display:grid;gap:10px}
.side-item{
    display:flex;gap:10px;align-items:flex-start;
    padding:12px;border-radius:14px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
}
.side-ico{
    width:34px;height:34px;border-radius:12px;
    display:grid;place-items:center;
    background:rgba(59,130,246,.18);
    border:1px solid rgba(59,130,246,.25);
    color:#dbeafe;flex:0 0 auto;
}
.side-item h4{font-size:.95rem;margin-bottom:2px;color:#fff}
.side-item p{font-size:.88rem;color:rgba(226,232,240,.82);line-height:1.4}
.side-footer{
    position:absolute;left:26px;right:26px;bottom:22px;
    padding-top:14px;border-top:1px solid rgba(255,255,255,.12);
    color:rgba(226,232,240,.8);font-size:.88rem;
}
.login-modal .kbd{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    padding:2px 8px;border-radius:8px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    color:#fff;
}

/* Accessibility helper */
.sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}


/* ============================================
   ALERT STYLES (Error/Success)
   Based on PerfectPanel documentation classes:
   - alert alert-dismissible alert-danger
   - alert alert-success alert-dismissible
   ============================================ */

.alert {
    position: relative;
    padding: 20px 24px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid transparent;
    animation: alertSlideIn 0.3s ease-out;
}

@keyframes alertSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-dismissible {
    /* padding-right: 50px; */
}

.alert-dismissible .close {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert-dismissible .close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.05);
}

.alert-dismissible .close:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* Success Alert - Green Theme */
.alert-success {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #a7f3d0;
    color: #065f46;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
}

.alert-success .close {
    color: #065f46;
    background: rgba(16, 185, 129, 0.15);
}

.alert-success .close:hover {
    background: rgba(16, 185, 129, 0.25);
}

.alert-success h4,
.alert-success .alert-title {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 700;
    color: #047857;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success h4::before,
.alert-success .alert-title::before {
    content: '';
    display: inline-flex;
    width: 24px;
    height: 24px;
    background: #10b981;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* Error/Danger Alert - Red Theme */
.alert-danger {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fecaca;
    color: #991b1b;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.15);
}

.alert-danger .close {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.15);
}

.alert-danger .close:hover {
    background: rgba(239, 68, 68, 0.25);
}

.alert-danger h4,
.alert-danger .alert-title {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 700;
    color: #b91c1c;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-danger h4::before,
.alert-danger .alert-title::before {
    content: '';
    display: inline-flex;
    width: 24px;
    height: 24px;
    background: #ef4444;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* Alert Content Styling */
.alert-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alert-details {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.7;
}

.alert-success .alert-details {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.alert-danger .alert-details {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-details-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.alert-details-row:last-child {
    border-bottom: none;
}

.alert-details-label {
    font-weight: 600;
    color: inherit;
    opacity: 0.8;
}

.alert-details-value {
    font-weight: 700;
    color: inherit;
    text-align: right;
    word-break: break-all;
    max-width: 60%;
}

/* Tooltip styling for converted values */
.alert [data-toggle="tooltip"] {
    cursor: help;
    border-bottom: 1px dotted currentColor;
}

/* Warning Alert (optional, for future use) */
.alert-warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fde68a;
    color: #92400e;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15);
}

.alert-warning .close {
    color: #92400e;
    background: rgba(245, 158, 11, 0.15);
}

.alert-warning h4::before,
.alert-warning .alert-title::before {
    background: #f59e0b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
}

/* Info Alert (optional, for future use) */
.alert-info {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #bfdbfe;
    color: #1e40af;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
}

.alert-info .close {
    color: #1e40af;
    background: rgba(59, 130, 246, 0.15);
}

.alert-info h4::before,
.alert-info .alert-title::before {
    background: #3b82f6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}

/* RTL Support */
.rtl-alert {
    direction: rtl;
    text-align: right;
}

.rtl-alert.alert-dismissible {
    padding-right: 24px;
    padding-left: 50px;
}

.rtl-alert .close {
    right: auto;
    left: 16px;
}

.rtl-alert h4::before,
.rtl-alert .alert-title::before {
    order: 1;
}

.rtl-alert .alert-details-value {
    text-align: left;
}

/* Responsive */
@media (max-width: 768px) {
    .alert {
        padding: 16px 20px;
        font-size: 13px;
    }

    .alert-dismissible {
        /* padding-right: 45px; */
    }

    .alert h4,
    .alert .alert-title {
        font-size: 15px;
    }

    .alert-details {
        padding: 12px 14px;
        font-size: 12px;
    }

    .alert-details-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .alert-details-value {
        text-align: left;
        max-width: 100%;
    }
}

/* =====================================================
   Custom Dropdown Styles
   ===================================================== */

.custom-select-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.custom-select-trigger {
  width: 100%;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 14px 40px 14px 16px;
  font-size: 14px;
  font-weight: 400;
  color: #0f172a;
  cursor: pointer;
  transition: box-shadow .2s ease, border-color .2s ease;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 48px;
  position: relative;
  user-select: none;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.custom-select-trigger:hover {
  border-color: rgba(20,99,255,.3);
}

.custom-select-trigger.open {
  border-color: rgba(20,99,255,.5);
  box-shadow: var(--focus);
}

.custom-select-trigger::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #64748b;
  transition: transform .2s ease;
}

.custom-select-trigger.open::after {
  transform: translateY(-50%) rotate(180deg);
}

.custom-select-trigger .placeholder {
  color: #9ca3af;
  font-weight: 400;
}

/* Loading spinner inside select - only hourglass, no circle */
.custom-select-trigger .loading-spinner {
  width: auto;
  height: auto;
  border: none;
  animation: none;
  margin-right: 4px;
}

.custom-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(15, 23, 42, .12);
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1000;
  margin-top: 4px;
  display: none;
  max-width: 100%;
}

.custom-select-dropdown.open {
  display: block;
}

/* Service filter input - sticky at top of service dropdown */
.service-filter-wrapper {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
  padding: 8px;
  border-bottom: 1px solid var(--line);
}

.service-filter-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--gray-50, #f8fafc);
  color: var(--text);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.service-filter-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.service-filter-input::placeholder {
  color: var(--gray-400, #94a3b8);
}

/* No results message inside service dropdown */
.service-filter-no-results {
  padding: 16px;
  text-align: center;
  color: var(--gray-400, #94a3b8);
  font-size: 13px;
}

.custom-select-option {
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: background .15s ease;
  border-bottom: 1px solid #f1f5f9;
  line-height: 1.5;
  min-width: 0;
  max-width: 100%;
}

.custom-select-option:last-child {
  border-bottom: none;
}

.custom-select-option:hover {
  background: #f8fafc;
}

.custom-select-option.selected {
  background: #eff6ff;
}

.custom-select-option .service-option-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.custom-select-option .service-first-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
}

.custom-select-option .service-name-main {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  max-width: 100%;
}

.custom-select-option .service-first-line .service-price {
  margin-left: auto;
  flex-shrink: 0;
}

.custom-select-option .service-second-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  max-width: 100%;
}

.custom-select-option .service-second-line .service-time-badge {
  margin-left: auto;
  flex-shrink: 0;
}

.custom-select-option .service-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.custom-select-option .service-id-badge {
  margin-bottom: 4px;
  display: inline-block;
}

/* Styles for selected service in trigger */
.custom-select-trigger .service-option-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.custom-select-trigger .service-first-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.custom-select-trigger .service-name-main {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

.custom-select-trigger .service-first-line .service-price {
  margin-left: auto;
  flex-shrink: 0;
}

.custom-select-trigger .service-second-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.custom-select-trigger .service-second-line .service-time-badge {
  margin-left: auto;
  flex-shrink: 0;
}

/* Service badges */
.service-id-badge {
  display: inline-block;
  background: #e0e7ff;
  color: #4338ca;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  margin-right: 6px;
  vertical-align: baseline;
}

.service-time-badge {
  background: #f0fdf4;
  color: #166534;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto;
}

.service-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
  flex-shrink: 0;
}

.option-text {
  color: #0f172a;
  font-size: 14px;
  font-weight: 400;
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

.category-name-text {
  font-weight: 600;
  font-size: 0.8rem;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

.category-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  /* margin-left: 6px; */
}

/* =====================================================
   Search Dropdown Styles
   ===================================================== */

.search-dropdown {
  max-height: 400px;
  overflow: hidden;
  overflow-y: hidden !important; /* Override parent overflow */
  display: none;
  flex-direction: column;
}

.search-dropdown.open {
  display: flex;
}

.search-dropdown-input-wrapper {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
  flex-shrink: 0;
}

.search-dropdown-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  background: var(--card);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.search-dropdown-input:focus {
  outline: none;
  border-color: rgba(20,99,255,.5);
  box-shadow: var(--focus);
}

.search-dropdown-input::placeholder {
  color: #9ca3af;
}

.search-dropdown-results {
  flex: 1;
  overflow-y: auto;
  max-height: 340px;
}

.search-dropdown-empty {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* ===== Search Input Wrapper & Input Styles ===== */

.search-input-wrapper {
  position: relative;
  width: 100%;
}

.search-input-wrapper .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 16px;
  pointer-events: none;
  z-index: 1;
}

.search-input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 14px 16px 14px 42px;
  font-size: 14px;
  font-weight: 400;
  color: #0f172a;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.search-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.search-input:focus {
  border-color: rgba(20,99,255,.5);
  box-shadow: var(--focus);
}

/* Search trigger with selected service */
.search-trigger-selected {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* ===== Search Icon & Trigger Content ===== */

.search-icon-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0px 2px;
  background: none;
  border: none;
  z-index: 1;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.2s ease;
}

.search-icon-btn:hover {
  color: var(--text);
}

.search-icon-btn:not(.rtl) {
  left: 12px;
}

.search-icon-btn.rtl {
  right: 12px;
  left: auto;
}

.search-trigger-content {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 42px;
}

.search-trigger-content:not(.rtl) {
  padding-left: 40px;
}

.search-trigger-content.rtl {
  padding-right: 40px;
  padding-left: 0;
}

.search-trigger-content .placeholder {
  color: var(--muted);
  font-size: 14px;
}

#search-trigger {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  min-height: 42px;
}


















/* ============================================================
   AUTHORIZED USER STYLES (Auth-only pages)
   Includes: massorder.twig.html, neworder_fixed.twig.html
   ============================================================ */
.auth * {
  box-sizing: border-box;
}
.auth html,
.auth body {
  height: 100%;
}
.auth body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.auth .app {
  min-height: 100vh;
  display: flex;
  gap: 0;
}
.auth .sidebar {
  width: 280px;
  background: var(--card);
  border-right: 1px solid var(--line);
  padding: 18px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}
.auth .sidebar::-webkit-scrollbar {
  width: 8px;
}
.auth .sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.auth .sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
}
.auth .sidebar:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
.auth .sidebar:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}
.auth .sidebar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.auth .sidebar:hover {
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.auth .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 18px;
}
.auth .brand .logo {
  width: 28px;
  height: 28px;
  border-radius: 0.5rem;
  background: linear-gradient(
    135deg,
    rgba(20, 99, 255, 0.15),
    rgba(20, 99, 255, 0.35)
  );
  display: grid;
  place-items: center;
  border: 1px solid rgba(20, 99, 255, 0.25);
}
.auth .brand .logo svg {
  width: 16px;
  height: 16px;
}
.auth .brand .name {
  font-weight: 700;
  letter-spacing: 0.2px;
}
/* User Info Block */
/* User profile block in sidebar */
.auth .user-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  margin: 0 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: all 0.2s;
}

.auth .user-info:hover {
  border-color: var(--gray-300);
}

/* Top row: username/email left, theme toggle right */
.auth .user-info-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.auth .user-details {
  min-width: 0;
}

.auth .user-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--dark);
  margin-bottom: 2px;
  word-break: break-word;
}

.auth .user-email {
  color: var(--muted);
  font-size: 12px;
  word-break: break-all;
}

/* Settings & Logout action buttons row */
.auth .user-actions {
  display: flex;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.auth .user-settings-btn,
.auth .user-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  transition: all 0.2s;
  text-decoration: none;
}

.auth .user-settings-btn:hover {
  background: var(--bg);
  color: var(--blue);
}

.auth .user-settings-btn:hover svg {
  transform: rotate(45deg);
}

.auth .user-settings-btn svg,
.auth .user-logout-btn svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.auth .user-logout-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

.auth .stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 10px 16px;
}
.auth .stat {
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 10px;
  background: #fbfcff;
}
.auth .stat .val {
  font-weight: 800;
  color: var(--blue);
  font-size: 18px;
  line-height: 1.1;
}
.auth .stat .lbl {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}
.auth .cta {
  display: grid;
  gap: 10px;
  padding: 0 10px 14px;
}
.auth .btn {
  border: 0;
  border-radius: 0.5rem;
  padding: 12px 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.05s ease, background 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
}
.auth .btn:active {
  transform: translateY(1px);
}
.auth .btn-blue {
  background: var(--blue);
  color: #fff;
}
.auth .btn-blue:hover {
  background: var(--blue-700);
}
.auth .btn-green {
  background: var(--green);
  color: #fff;
}
.auth .btn-green:hover {
  filter: brightness(0.95);
}
.auth .btn .ico {
  width: 18px;
  height: 18px;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.22);
  display: grid;
  place-items: center;
}
.auth .btn .ico svg {
  width: 14px;
  height: 14px;
}
.auth .nav {
  padding: 10px;
  display: grid;
  gap: 2px;
}
.auth .nav h6 {
  margin: 10px 0 8px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.auth .nav a {
  text-decoration: none;
  color: #0f172a;
  padding: 10px 10px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
}
.auth .nav a:hover {
  background: #f2f6ff;
  border-color: rgba(20, 99, 255, 0.18);
}
.auth .nav a.active {
  background: #eef4ff;
  border-color: rgba(20, 99, 255, 0.25);
  color: var(--blue-700);
  font-weight: 700;
}
.auth .nav .n-ico {
  width: 18px;
  height: 18px;
  color: var(--muted);
}
.auth .nav a.active .n-ico {
  color: var(--blue-700);
}
.auth .main {
  flex: 1;
  padding: 28px 28px 22px;
  min-width: 0;
}
.auth .header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.auth .header h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.auth .content {
  display: grid;
  grid-template-columns: 540px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  min-width: 0;
}
.auth .topbar {
  grid-column: 1 / -1;
  display: grid;
  gap: 16px;
  margin-bottom: 10px;
}
.auth .filter-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}
.auth .tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 11px 16px;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    transform 0.05s ease;
  color: #334155;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  box-sizing: border-box;
}
.auth .tab-btn:hover {
  background: #f8fafc;
  border-color: rgba(20, 99, 255, 0.25);
}
.auth .tab-btn.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.auth .tab-btn:active {
  transform: translateY(1px);
}
.auth .filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.auth .field {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}
.auth .label {
  font-size: 14px;
  color: #0f172a;
  font-weight: 600;
  letter-spacing: -0.005em;
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
  /* Pin left: the server base theme (article.css) centers form labels,
     so lock alignment explicitly to keep them left on the live server */
  text-align: left !important;
}
.auth .hint {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
}
.auth .hint:hover {
  color: var(--blue);
  text-decoration: underline;
}
.auth .input,
.auth .select,
.auth .textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 400;
  color: #0f172a;
  outline: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, sans-serif;
}
.auth .input::placeholder,
.auth .select option[value=""] {
  color: #9ca3af;
  font-weight: 400;
}
.auth .textarea {
  min-height: 110px;
  resize: vertical;
}
.auth .input:focus,
.auth .select:focus,
.auth .textarea:focus {
  border-color: rgba(20, 99, 255, 0.5);
  box-shadow: var(--focus);
}
.auth .input:disabled,
.auth .select:disabled,
.auth .textarea:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.6;
}
.auth .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
}
.auth .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  box-shadow: var(--shadow);
  min-width: 0;
}
.auth .card .inner {
  padding: 20px;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}
.auth .form-card .inner {
  padding: 28px 26px;
  min-width: 0;
  max-width: 100%;
}
.auth .form-card .controls {
  display: grid;
  gap: 20px;
  min-width: 0;
  max-width: 100%;
}
.auth .form-card .search-filters {
  display: grid;
  gap: 16px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
  max-width: 100%;
}
.auth .search-filters > .row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.auth .search-filters > .row > .field {
  flex: 1 1 200px;
}
.auth .form-card .search-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
}
.auth .inline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.auth .meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.auth .submit {
  margin-top: 6px;
  width: 100%;
  border-radius: 0.5rem;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.auth .desc-title {
  font-weight: 700;
  margin: 0 0 12px;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.auth .desc {
  color: #0f172a;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  white-space: normal;
}
.auth .desc b {
  font-weight: 700;
}
.auth .desc .muted {
  color: var(--muted);
  font-weight: 700;
}
.auth .desc hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 12px 0;
}
.auth .badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin: 0 2px;
  white-space: nowrap;
}
.auth .badge-pink {
  background: #fce7f3;
  color: #be185d;
}
.auth .badge-indigo {
  background: #e0e7ff;
  color: #4338ca;
}
.auth .badge-orange {
  background: #fed7aa;
  color: #c2410c;
}
.auth .badge-purple {
  background: #e9d5ff;
  color: #7c3aed;
}
.auth .badge-blue {
  background: #dbeafe;
  color: #1e40af;
}
.auth .badge-green {
  background: #d1fae5;
  color: #059669;
}
.auth .badge-gold {
  background: #fef3c7;
  color: #d97706;
}
.auth .badge-cyan {
  background: #cffafe;
  color: #0891b2;
}
.auth .badge-gray {
  background: #e5e7eb;
  color: #4b5563;
}
.auth .platform-icon-small {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth .platform-icon-small svg {
  width: 100%;
  height: 100%;
  display: block;
}
.auth .service-first-line .platform-icon-small {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.auth .service-name-main {
  font-weight: 500;
  color: #0f172a;
  line-height: 1.4;
  font-size: 14px;
  display: inline;
}
.auth .service-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.auth .custom-select-option .service-id-badge {
  margin-bottom: 4px;
  display: inline-block;
}
.auth .category-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.auth .category-name-text {
  font-weight: 600;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth .category-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  flex-basis: 100%;
  /* padding-left: 30px; */
}
.auth .select option {
  padding: 8px 12px;
}
.auth .custom-select-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.auth .custom-select-trigger {
  width: 100%;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 14px 40px 14px 16px;
  font-size: 14px;
  font-weight: 400;
  color: #0f172a;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 48px;
  position: relative;
  user-select: none;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.auth .custom-select-trigger:hover {
  border-color: rgba(20, 99, 255, 0.3);
}
.auth .custom-select-trigger.open {
  border-color: rgba(20, 99, 255, 0.5);
  box-shadow: var(--focus);
}
.auth .custom-select-trigger::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #64748b;
  transition: transform 0.2s ease;
}
.auth .custom-select-trigger.open::after {
  transform: translateY(-50%) rotate(180deg);
}
.auth .custom-select-trigger .placeholder {
  color: #9ca3af;
  font-weight: 400;
}
.auth .custom-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1000;
  margin-top: 4px;
  display: none;
  max-width: 100%;
}
.auth .custom-select-dropdown.open {
  display: block;
}
.auth .search-dropdown {
  overflow-y: hidden !important;
  flex-direction: column;
}
.auth .search-input-wrapper {
  position: relative;
  width: 100%;
}
.auth .search-input-wrapper .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 16px;
  pointer-events: none;
  z-index: 1;
}
.auth .search-input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 14px 16px 14px 42px;
  font-size: 14px;
  font-weight: 400;
  color: #0f172a;
  outline: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, sans-serif;
}
.auth .search-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}
.auth .search-input:focus {
  border-color: rgba(20, 99, 255, 0.5);
  box-shadow: var(--focus);
}
.auth .search-input:focus ~ .search-dropdown,
.auth .search-dropdown.open {
  display: flex;
}
.auth .custom-select-option {
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  transition: background 0.15s ease;
  border-bottom: 1px solid #f1f5f9;
  line-height: 1.5;
  min-width: 0;
  max-width: 100%;
}
.auth .custom-select-option .service-option-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  flex: 1;
  min-width: 0;
  max-width: 100%;
}
.auth .custom-select-option .service-first-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
}
.auth .custom-select-option .service-name-main {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  max-width: 100%;
}
.auth .custom-select-option .service-first-line .service-price {
  margin-left: auto;
  flex-shrink: 0;
}
.auth .custom-select-option .service-second-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  max-width: 100%;
}
.auth .custom-select-option .service-second-line .service-time-badge {
  margin-left: auto;
  flex-shrink: 0;
}
.auth .custom-select-option .service-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
  max-width: 100%;
}
.auth .custom-select-trigger .service-option-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.auth .custom-select-trigger .service-first-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.auth .custom-select-trigger .service-name-main {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}
.auth .custom-select-trigger .service-first-line .service-price {
  margin-left: auto;
  flex-shrink: 0;
}
.auth .custom-select-trigger .service-second-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.auth .custom-select-trigger .service-second-line .service-time-badge {
  margin-left: auto;
  flex-shrink: 0;
}
.auth .custom-select-option:last-child {
  border-bottom: none;
}
.auth .custom-select-option:hover {
  background: #f8fafc;
}
.auth .custom-select-option.selected {
  background: #eff6ff;
}
.auth .service-id-badge {
  display: inline-block;
  background: #e0e7ff;
  color: #4338ca;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  margin-right: 6px;
  vertical-align: baseline;
}
.auth .service-time-badge {
  background: #f0fdf4;
  color: #166534;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto;
}
.auth .option-text {
  color: #0f172a;
  font-size: 14px;
  font-weight: 400;
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}
.auth .price-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.auth .price-block {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 12px 14px;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.auth .price-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(20, 99, 255, 0.1);
}
.auth .price-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.auth .price-quantity {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
}
.auth .price-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--blue);
  line-height: 1;
}
.auth .service-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
  flex-shrink: 0;
}
.auth .stack {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.auth .small-card .inner {
  padding: 14px 16px;
}
.auth .mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.auth .stars {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #f59e0b;
  font-size: 14px;
}
.auth .pill {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.auth .link {
  color: var(--blue-700);
  text-decoration: none;
  font-weight: 800;
  font-size: 12px;
}
.auth .link:hover {
  text-decoration: underline;
}
.auth .footer-note {
  margin-top: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.auth .specifications-guide {
  background: #f8f9fa;
  overflow: hidden;
}
.auth .spec-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.auth .spec-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1a1d1f;
  letter-spacing: -0.005em;
}
.auth .toggle-specs {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--muted);
  transition: color 0.2s ease;
}
.auth .toggle-specs:hover {
  color: #495057;
}
.auth .toggle-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}
.auth .spec-content {
  padding: 16px;
  display: block;
}
.auth .spec-content.collapsed {
  display: none;
}
.auth .toggle-specs.collapsed .toggle-icon {
  transform: rotate(-90deg);
}
.auth .spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.auth .spec-category {
  background: var(--card);
  border-radius: 0.5rem;
  padding: 14px;
  border: 1px solid var(--line);
}
.auth .spec-category h4 {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 700;
  color: #495057;
  padding-bottom: 8px;
  border-bottom: 1px solid #e9ecef;
}
.auth .spec-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth .spec-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.auth .spec-label {
  font-weight: 700;
  font-size: 12px;
  color: var(--blue);
  font-family: "Courier New", monospace;
  background: #eff6ff;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
}
.auth .spec-description {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.auth .spec-note {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 0.5rem;
  padding: 10px 14px;
  font-size: 12px;
  color: #856404;
  margin-top: 10px;
}
.auth .spec-note strong {
  color: #533f03;
}
.auth .mass-order-container {
  display: none;
  grid-column: 1 / -1;
}
.auth .mass-order-container.active {
  display: grid;
  grid-template-columns: 540px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  min-width: 0;
}
.auth .mass-order-info {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 0.5rem;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #856404;
}
.auth .mass-order-info strong {
  color: #533f03;
  display: block;
  margin-bottom: 6px;
}
.auth .mass-textarea {
  width: 100%;
  min-height: 300px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 14px 16px;
  font-size: 13px;
  font-family: "Courier New", monospace;
  color: #0f172a;
  outline: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  resize: vertical;
}
.auth .mass-textarea:focus {
  border-color: rgba(20, 99, 255, 0.5);
  box-shadow: var(--focus);
}
.auth .mass-textarea::placeholder {
  color: #9ca3af;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, sans-serif;
}
.auth .new-order-container {
  display: none;
  grid-column: 1 / -1;
}
.auth .new-order-container.active {
  display: grid;
  grid-template-columns: 840px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  min-width: 0;
}
.auth .alert {
  padding: 14px 16px;
  border-radius: 0.5rem;
  margin-bottom: 20px;
  font-size: 13px;
  border: 1px solid;
}
.auth .alert h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 700;
}
.auth .alert-success {
  background: #d1fae5;
  border-color: #6ee7b7;
  color: #065f46;
}
.auth .alert-danger {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #7f1d1d;
}
@media (max-width: 1100px) {
  .auth .content {
    grid-template-columns: 1fr;
  }
  .auth .sidebar {
    position: fixed;
    left: -300px;
    z-index: 101;
    transition: left 0.3s ease;
  }
  .auth .sidebar.active {
    left: 0;
  }
  .auth .main {
    padding: 22px;
    padding-top: 76px;
  }
  .auth .spec-grid {
    grid-template-columns: 1fr;
  }
  /* Mobile: order containers to single column */
  .auth .new-order-container.active,
  .auth .mass-order-container.active {
    grid-template-columns: 1fr;
  }
  /* Mobile: tabs wrap */
  .auth .filter-tabs {
    flex-wrap: wrap;
  }
  .auth .tab-btn {
    flex-shrink: 1;
    min-width: auto;
  }
}
@media (max-width: 768px) {
  .auth .main {
    padding: 16px;
    padding-top: 72px;
  }
  .auth .tab-btn {
    padding: 10px 14px;
    font-size: 12px;
  }
  .auth .form-card .inner {
    padding: 20px 16px;
  }
}
@media (max-width: 480px) {
  .auth .main {
    padding: 12px;
    padding-top: 64px;
  }
  .auth .tab-btn {
    padding: 8px 12px;
    font-size: 11px;
  }
  .auth .form-card .inner {
    padding: 16px 12px;
  }
  .auth .filter-tabs {
    gap: 6px;
  }
  .auth .price-blocks {
    grid-template-columns: 1fr;
  }
  .auth .inline {
    flex-wrap: wrap;
  }
}

/* ORDERS HISTORY PAGE STYLES */
.auth .orders-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.auth .orders-table thead { background: #f8fafc; border-bottom: 2px solid var(--line); }
.auth .orders-table th { padding: 12px 14px; text-align: left; font-weight: 700; color: #0f172a; white-space: normal; }
.auth .orders-table tbody tr { border-bottom: 1px solid var(--line); }
.auth .orders-table tbody tr:hover { background-color: #f8fafc; }
.auth .orders-table td { padding: 12px 14px; vertical-align: middle; }
.auth .order-id { color: var(--blue); font-weight: 700; }
.auth .btn-details { margin-left: 8px; padding: 6px 10px; border: 1px solid var(--line); background: var(--card); border-radius: 0.25rem; cursor: pointer; font-size: 12px; color: var(--blue); display: inline-flex; align-items: center; gap: 4px; }
.auth .search-form-orders { margin-bottom: 20px; }
.auth .search-input { padding: 12px 16px 12px 42px; }
.auth .pagination-btn { min-width: 36px; height: 36px; padding: 8px 10px; border: 1px solid var(--line); background: var(--card); border-radius: 0.25rem; }
.auth .pagination-btn.active { background: var(--blue); color: white; }
.auth .modal-content { background: var(--card); border: 1px solid var(--line); border-radius: 0.5rem; }

/* Compact action buttons inside tables (drip-feed Cancel, orders Refill/Cancel).
   Built entirely on theme variables so they adapt to light/dark automatically. */
.auth .order-actions { display: inline-flex; align-items: center; gap: 6px; }
.auth .btn.btn-xs {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 8px;
  border: 1px solid transparent;
  white-space: nowrap;
}
/* Neutral outlined look for btn-default — same family as .btn-details */
.auth .btn.btn-xs.btn-default {
  background: var(--card);
  border-color: var(--line);
  color: var(--muted);
}
.auth .btn.btn-xs.btn-default:hover {
  color: var(--blue);
  border-color: var(--blue);
}
/* Cancel is a destructive action — soft red pill, turns solid red on hover */
.auth .order-actions a[href*="cancel"].btn-default {
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
}
.auth .order-actions a[href*="cancel"].btn-default:hover {
  color: #ffffff;
  border-color: var(--red);
  background: var(--red);
}

/* Money badge (drip-feed Total charge) — green, matches status-completed accent */
.charge-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

/* Quantity badge (Quantity / Total quantity / Remains) — amber, readable in both themes */
.qty-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.12);
  color: #d97706; /* amber-600: enough contrast on light backgrounds */
}
/* Brighter amber text on dark backgrounds */
[data-theme="dark"] .qty-badge {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

/* Drip-feed table: keep the actions column tight so Cancel hugs the row edge */
.auth .dripfeed-table th:last-child,
.auth .dripfeed-table td:last-child {
  width: 1%;
  white-space: nowrap;
}

/* Order details modal — uses unified modal-overlay system (same as services) */

/* ── Centering fix ──
   The panel ships Bootstrap, whose `.modal` is a full-screen fixed CONTAINER
   (position:fixed; top:0; left:0; height:100%). Our `.modal` is a card, and with a
   plain `.modal` selector (0,1,0) whichever sheet loads last wins — when Bootstrap
   won, the card was pinned to the top-left corner, stretched to full height, and the
   overlay backdrop disappeared. Scoping to `.order-details-modal` raises specificity
   above any single-class rule, so the layout no longer depends on stylesheet order.
   The overlay owns the fixed positioning; the card is a normal flex child again. */
.modal-overlay.order-details-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal-overlay.order-details-modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-overlay.order-details-modal > .modal {
  /* static — undo Bootstrap's fixed positioning so flex centering applies */
  position: static;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.45);
  transform: scale(0.97);
  transition: transform 0.25s ease;
}

.modal-overlay.order-details-modal.active > .modal {
  transform: scale(1);
}

/* Long lists (comments, usernames) scroll inside the card instead of stretching it */
.order-details-modal .modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 24px 24px;
}

.order-details-modal .modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 16px 20px 16px 24px;
  border-bottom: 1px solid var(--line);
}

/* Title left, close button hard right. `flex:1` + `margin-left:auto` pin both ends
   regardless of the justify-content another .modal-header rule may apply — the pair
   was rendering grouped in the middle of the header. */
.order-details-modal .modal-header h3 {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dark);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-details-modal .modal-close {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--gray-600);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.order-details-modal .modal-close:hover {
  background: var(--gray-100, rgba(148, 163, 184, 0.16));
  color: var(--dark);
}

@media (max-width: 576px) {
  .modal-overlay.order-details-modal {
    padding: 12px;
  }

  .modal-overlay.order-details-modal > .modal {
    max-height: 92vh;
  }
}

.order-details-modal .modal-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
  margin: 0;
}

.order-details-modal .modal-body .form-group {
  margin-bottom: 16px;
}

.order-details-modal .modal-body .form-group:last-child {
  margin-bottom: 0;
}

.order-details-modal .modal-body label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-600);
  margin-bottom: 8px;
}

.order-details-modal .modal-body .form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-700);
  background: var(--gray-50);
  resize: none;
  box-sizing: border-box;
}

/* The list itself scrolls once it outgrows ~10 lines, so the card keeps its size
   no matter how many usernames/comments the order carries. */
.order-details-modal .modal-body textarea.form-control {
  min-height: 120px;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Slim scrollbars so the list does not look like an editable field */
.order-details-modal .modal-body textarea.form-control::-webkit-scrollbar,
.order-details-modal .modal-body::-webkit-scrollbar {
  width: 8px;
}

.order-details-modal .modal-body textarea.form-control::-webkit-scrollbar-thumb,
.order-details-modal .modal-body::-webkit-scrollbar-thumb {
  background: var(--gray-200);
  border-radius: 4px;
}

.order-details-modal .modal-body textarea.form-control::-webkit-scrollbar-thumb:hover,
.order-details-modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--gray-600);
}

.order-details-modal .modal-body textarea.form-control::-webkit-scrollbar-track,
.order-details-modal .modal-body::-webkit-scrollbar-track {
  background: transparent;
}

/* readonly must not read as disabled — keep normal contrast and a text cursor */
.order-details-modal .modal-body .form-control[readonly] {
  opacity: 1;
  cursor: text;
}

/* ===== New Orders Page Spacing ===== */
.auth-section .orders-filters { margin-bottom: 25px; }
.auth-section .search-wrapper { margin-bottom: 25px; position: relative; }

/* ===== Search Input with Icon Button ===== */
.auth-section .search-wrapper .search-input {
  width: 100%;
  padding-left: 44px;
  padding-right: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  font-size: 14px;
  color: #0f172a;
  outline: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.auth-section .search-wrapper .search-input::placeholder {
  color: #9ca3af;
}

.auth-section .search-wrapper .search-input:focus {
  border-color: rgba(20, 99, 255, 0.5);
  box-shadow: var(--focus);
}

.auth-section .search-wrapper .search-btn {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--muted);
  transition: color 0.2s ease;
  z-index: 2;
}

.auth-section .search-wrapper .search-btn:hover {
  color: var(--text);
}

.auth-section .search-wrapper .search-btn svg {
  width: 20px;
  height: 20px;
}

/* ============================================
   ADD FUNDS PAGE STYLES
   ============================================ */

/* Two column layout.
   The left column is capped at 800px but is allowed to shrink, so the Payment List
   column always keeps a readable width. With a hard 800px left column the grid
   overflowed on 1100-1550px viewports (280px sidebar + 56px main padding eat the
   space) and the Payment List was squeezed to ~100px — its table then wrapped one
   character per line. The 360px floor on the right column keeps the date, method
   and amount columns legible at every viewport that still shows both columns. */
.content-grid {
  display: grid;
  grid-template-columns: minmax(420px, 800px) minmax(360px, 1fr);
  gap: 24px;
  align-items: start;
}

/* Below this width the two columns no longer fit side by side without squeezing
   the payment table, so stack them and let the Payment List use the full width. */
@media (max-width: 1200px) {
  .content-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Payment Card (left column) */
.payment-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}

.payment-card h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 20px 0;
  color: var(--text);
}

/* ── Payment method instruction (engine-injected #instruction_instruction) ──────────
   The panel engine injects the selected method's admin rich-text into this block after the
   Method field (triggered by the native <select> "change" our custom select dispatches). We
   restyle it to match our design and fix the rich-text rendering:
   - the engine wraps content in Bootstrap's .text-center, which broke lists (the numbers/
     bullets hugged the left while the text centred) → we force left alignment;
   - the .panel-body had a hard-coded light background that stayed white in dark mode → we
     drive background and text from theme tokens.
   background/color/text-align use !important to reliably beat the engine's own styling. */
#instruction_instruction {
  margin-bottom: 20px;
}

/* "Instruction" label — match our other form labels (Method, Amount) */
#instruction_instruction .control-label,
#instruction_instruction > label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}

/* Content card */
#instruction_instruction .panel-body {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg, #f8fafc) !important;
  color: var(--text) !important;
  font-size: 14px;
  line-height: 1.6;
  text-align: left !important;
  overflow-wrap: anywhere;
}

/* Trim the outer margins the rich-text brings so the card padding stays even */
#instruction_instruction .panel-body > *:first-child { margin-top: 0; }
#instruction_instruction .panel-body > *:last-child { margin-bottom: 0; }

#instruction_instruction .panel-body h1,
#instruction_instruction .panel-body h2,
#instruction_instruction .panel-body h3,
#instruction_instruction .panel-body h4 {
  margin: 0 0 10px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
#instruction_instruction .panel-body h1 { font-size: 20px; }
#instruction_instruction .panel-body h2 { font-size: 18px; }
#instruction_instruction .panel-body h3 { font-size: 16px; }
#instruction_instruction .panel-body h4 { font-size: 15px; }

#instruction_instruction .panel-body p { margin: 0 0 10px; }

#instruction_instruction .panel-body ul,
#instruction_instruction .panel-body ol {
  margin: 0 0 10px;
  padding-left: 24px;
}
#instruction_instruction .panel-body li { margin-bottom: 6px; }

#instruction_instruction .panel-body a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
#instruction_instruction .panel-body a:hover { text-decoration: underline; }

#instruction_instruction .panel-body strong,
#instruction_instruction .panel-body b { color: var(--text); font-weight: 600; }

/* Wallet addresses / codes providers sometimes include */
#instruction_instruction .panel-body code,
#instruction_instruction .panel-body pre {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
}
#instruction_instruction .panel-body code { padding: 2px 6px; }
#instruction_instruction .panel-body pre { padding: 12px; overflow-x: auto; }

#instruction_instruction .panel-body img { max-width: 100%; height: auto; }

/* Custom Select */
.custom-select {
  position: relative;
  width: 100%;
}

.custom-select .select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-size: 14px;
  color: var(--text);
}

.custom-select .select-trigger:hover {
  border-color: var(--primary);
}

.custom-select .select-trigger.open {
  border-color: var(--primary);
  box-shadow: var(--focus);
}

.custom-select .select-trigger span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 10px;
}

.custom-select .select-arrow {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.2s;
}

.custom-select .select-trigger.open .select-arrow {
  transform: rotate(180deg);
}

.custom-select .select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  z-index: 100;
  max-height: 280px;
  overflow-y: auto;
  display: none;
}

.custom-select .select-dropdown.open {
  display: block;
}

.custom-select .select-option {
  padding: 12px 14px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  transition: background 0.15s;
}

.custom-select .select-option:hover {
  background: var(--bg);
}

.custom-select .select-option.selected {
  background: rgba(20, 99, 255, 0.1);
  color: var(--primary);
}

/* Hide native select when custom is used */
select.hidden,
.custom-select + select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Form inputs for addfunds */
.payment-card .form-group {
  margin-bottom: 16px;
}

.payment-card .form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}

.payment-card .form-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.payment-card .form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus);
}

.payment-card .form-input:disabled {
  background: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

.payment-card .form-input::placeholder {
  color: var(--muted);
}

/* Telegram Support Button on addfunds page (unique class to avoid floating tg conflict) */
.tg-support-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #0088cc 0%, #0077b5 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.tg-support-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 136, 204, 0.4);
  color: #fff;
}

.tg-support-btn .tg-support-icon {
  width: 22px;
  height: 22px;
}

/* Payment List Card (right column) */
.payment-list-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.payment-list-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.payment-list-header h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.payment-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* min-width keeps the cells readable on narrow viewports: the wrapper scrolls
   horizontally instead of the table collapsing to one character per line. */
.payment-table {
  width: 100%;
  min-width: 340px;
  border-collapse: collapse;
}

.payment-table th {
  text-align: left;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.payment-table td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.payment-table tbody tr:hover {
  background: var(--bg);
}

.payment-table tbody tr:last-child td {
  border-bottom: none;
}

.payment-id {
  font-weight: 600;
  color: var(--primary);
}

.payment-amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.payment-amount.positive {
  color: #10b981;
}

.payment-amount.negative {
  color: #ef4444;
}

.invoice-link {
  color: var(--primary);
  text-decoration: none;
  font-size: 13px;
}

.invoice-link:hover {
  text-decoration: underline;
}

/* Pagination for addfunds */
.pagination-wrapper {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
}

.pagination-wrapper .pagination {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.pagination-wrapper .pagination li a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--line);
  transition: all 0.2s;
}

.pagination-wrapper .pagination li a:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.pagination-wrapper .pagination li.active a {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Alerts */
.payment-card .alert {
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.payment-card .alert-success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
}

.payment-card .alert-danger {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.payment-card .alert .close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  line-height: 1;
}

.payment-card .alert .close:hover {
  opacity: 1;
}

/* ============================================
   DRIP FEED / DATA TABLE STYLES
   ============================================ */

/* Page Card Container */
.page-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.page-card > .alert {
  margin: 20px 24px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 8px;
}

.page-card > .alert .alert-icon {
  flex-shrink: 0;
}

.page-card > .alert-info {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.id-link {
  text-decoration: none;
}

.id-link:hover .id-badge {
  background: var(--primary);
  color: #fff;
}

/* Header Bar with Tabs and Search */
.page-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  gap: 20px;
  flex-wrap: wrap;
}

/* Status Tabs */
.status-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.status-tab {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--line);
  transition: all 0.2s;
}

.status-tab:hover {
  color: var(--text);
  border-color: var(--primary);
}

.status-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Search Form */
.search-form {
  flex-shrink: 0;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrapper .search-icon {
  position: absolute;
  left: 12px;
  color: var(--muted);
  pointer-events: none;
}

.search-input-wrapper .search-input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input-wrapper .search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus);
}

.search-input-wrapper .search-input::placeholder {
  color: var(--muted);
}

/* Data Table */
.table-wrapper {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  text-align: left;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.data-table td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.data-table tbody tr:hover {
  background: var(--bg);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* ID Badge */
.id-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: 4px 10px;
  background: rgba(20, 99, 255, 0.1);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}

/* Link Cell */
.link-cell {
  max-width: 200px;
}

.link-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 13px;
}

/* Service Cell — min-width for readability, allow badges to wrap */
.service-cell {
  min-width: 300px;
}

/* Amount */
.amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Runs */
.runs-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.runs-link:hover {
  text-decoration: underline;
}

.runs-divider {
  color: var(--muted);
  margin: 0 4px;
}

.runs-total {
  color: var(--muted);
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.status-badge.status-active,
.status-badge.status-processing,
.status-badge.status-inprogress,
.status-badge.status-in-progress {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.status-badge.status-completed,
.status-badge.status-complete,
.status-badge.status-done {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.status-badge.status-canceled,
.status-badge.status-cancelled,
.status-badge.status-refunded {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.status-badge.status-pending,
.status-badge.status-waiting {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.status-badge.status-partial {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 60px 20px !important;
}

.empty-state .empty-icon {
  color: var(--muted);
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state p {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

/* API Page */
.api-page {
  max-width: 900px;
  margin: 0 auto;
}

.api-header {
  padding: 24px;
  border-bottom: 1px solid var(--line);
}

.api-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.api-content {
  padding: 24px;
}

.api-section {
  margin-bottom: 32px;
}

.api-info-table {
  width: 100%;
  border-collapse: collapse;
}

.api-info-table td {
  padding: 14px 16px;
  border: 1px solid var(--line);
}

.api-info-table .info-label {
  width: 40%;
  background: var(--bg);
  font-weight: 600;
  color: var(--muted);
}

.api-info-table .info-value {
  color: var(--text);
}

.method-badge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13px;
}

.format-badge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13px;
}

.api-url {
  background: var(--bg);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 13px;
  color: var(--primary);
  word-break: break-all;
}

.api-link {
  color: var(--primary);
  font-weight: 500;
}

.api-method {
  margin-bottom: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.api-method:first-of-type {
  border-top: none;
  padding-top: 0;
}

.method-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--text);
}

.type-selector {
  margin-bottom: 20px;
}

.type-selector .form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--muted);
}

.type-selector .custom-select {
  max-width: 300px;
}

.params-table-wrapper {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.params-table {
  width: 100%;
  border-collapse: collapse;
}

.params-table th {
  background: var(--bg);
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.params-table th:first-child {
  width: 40%;
}

.params-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.params-table tr:last-child td {
  border-bottom: none;
}

.param-name {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 13px;
}

.example-section {
  margin-top: 20px;
}

.example-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--muted);
}

.code-block {
  background: var(--bg);
  /* Explicit theme-aware text colour: without it the block inherited the panel's base
     text colour, which doesn't flip in dark mode → dark text on the dark --bg background,
     invisible. var(--text) tracks the theme, so it reads in both light and dark. */
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin: 0;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.api-footer {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Responsive */
@media (max-width: 768px) {
  .page-header-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .status-tabs {
    justify-content: center;
  }

  .search-input-wrapper .search-input {
    width: 100%;
  }

  .data-table th,
  .data-table td {
    padding: 12px 10px;
    font-size: 13px;
  }

  .link-cell {
    max-width: 120px;
  }

  .service-cell {
    max-width: 100px;
  }
}

/* ========================================
   TICKETS PAGE
======================================== */
.tickets-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.ticket-create-card,
.ticket-list-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}

.ticket-create-card h2,
.ticket-list-card h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--text);
}

/* FAQ Alert */
.ticket-faq-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 20px;
}

.ticket-faq-alert span {
  font-size: 14px;
  color: var(--text);
}

.btn-sm {
  padding: 8px 16px;
  font-size: 13px;
}

/* Category Grid */
.category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.category-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.category-option:hover {
  border-color: var(--primary);
}

.category-option.selected {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb, 34, 197, 94), 0.1);
}

.category-option input {
  display: none;
}

.category-check {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 4px;
  flex-shrink: 0;
  transition: all 0.2s;
}

.category-option.selected .category-check {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.category-check svg {
  opacity: 0;
  transition: opacity 0.2s;
}

.category-option.selected .category-check svg {
  opacity: 1;
}

.category-label {
  font-size: 14px;
  color: var(--text);
}

/* Dynamic ticket fields styling */
#ticket-fields .form-group {
  margin-bottom: 16px;
}

#ticket-fields label:not(.category-option) {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}

#ticket-fields input,
#ticket-fields select,
#ticket-fields textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}

#ticket-fields input:focus,
#ticket-fields select:focus,
#ticket-fields textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59, 130, 246), 0.1);
}

/* Ticket Search Form */
.ticket-search-form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.ticket-search-form .form-input {
  flex: 1;
}

/* Ticket Table */
.ticket-table-wrapper {
  overflow-x: auto;
  margin: 0 -24px;
  padding: 0 24px;
}

.ticket-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.ticket-table th {
  text-align: left;
  padding: 12px 10px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.ticket-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.ticket-table tbody tr:last-child td {
  border-bottom: none;
}

.ticket-id {
  font-weight: 500;
  color: var(--muted);
}

.ticket-subject {
  color: var(--primary);
  text-decoration: none;
  transition: opacity 0.2s;
}

.ticket-subject:hover {
  opacity: 0.8;
}

.ticket-subject.unread {
  font-weight: 600;
}

.ticket-status {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  white-space: nowrap;
}

.ticket-status.status-answered {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.ticket-status.status-closed {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.ticket-status.status-open,
.ticket-status.status-pending {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.empty-cell {
  text-align: center;
  padding: 40px 10px !important;
  color: var(--muted);
}

/* Tickets Info Block */
.tickets-info {
  margin-top: 20px;
}

.tickets-info .info-content {
  padding: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* Tickets Uploader */
/* Upload zone — single dashed box, click anywhere triggers file dialog */
.upload-zone {
  position: relative;
  border: 2px dashed var(--line);
  border-radius: 8px;
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.upload-zone:hover {
  border-color: var(--primary);
}

/* Drag over state - highlight when dragging files */
.upload-zone.drag-over {
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.05);
}

/* Hide server uploader visually but stretch it over entire zone for click handling */
.upload-zone .tickets-uploader {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  z-index: 2;
}

/* Stretch all inner elements (input, button, label) to fill entire upload zone */
.upload-zone .tickets-uploader *,
.upload-zone .tickets-uploader input[type="file"],
.upload-zone .tickets-uploader button,
.upload-zone .tickets-uploader label {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 3;
}

/* Standalone uploader fallback */
.tickets-uploader {
  border: 2px dashed var(--line);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  color: var(--muted);
  transition: border-color 0.2s;
}

.tickets-uploader:hover {
  border-color: var(--primary);
}

.tickets-uploader.drag-over {
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.05);
}

/* Dropzone hint content - displayed inside the dashed border */
.file-types-hint {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.file-types-hint svg {
  color: var(--primary);
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
}

.file-types-hint .drag-hint {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.file-types-hint .drag-hint a,
.file-types-hint .drag-hint span.browse-link {
  color: var(--primary);
  cursor: pointer;
}

.file-types-hint .formats-hint {
  font-size: 12px;
  color: var(--muted);
}

/* Selected Files List - shows files after selection */
.selected-files-list {
  margin-top: 12px;
}

.selected-files-list .files-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selected-files-list .file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
}

.selected-files-list .file-item svg {
  flex-shrink: 0;
  color: var(--primary);
}

.selected-files-list .file-item .file-name {
  flex: 1;
  color: var(--text);
  word-break: break-all;
  font-weight: 500;
}

.selected-files-list .file-item .file-size {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 12px;
}

/* Remove file button */
.selected-files-list .file-remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
  margin-left: 8px;
}

.selected-files-list .file-remove:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Tickets Responsive */
@media (max-width: 1024px) {
  .tickets-layout {
    grid-template-columns: 1fr;
  }
}

/* =================================================
   VIEW TICKET PAGE
   ================================================= */
.viewticket-page {
  max-width: 800px;
  margin: 0 auto;
}

/* Ticket Header */
.viewticket-page .ticket-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.viewticket-page .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 12px;
  transition: color 0.2s;
}

.viewticket-page .back-link:hover {
  color: var(--primary);
}

.viewticket-page .ticket-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 10px 0;
}

.viewticket-page .ticket-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.viewticket-page .ticket-id-badge {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

/* Messages Container */
.viewticket-page .ticket-messages {
  padding: 24px;
  max-height: 500px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Message Rows */
.viewticket-page .message-row {
  display: flex;
  gap: 12px;
}

.viewticket-page .message-user {
  justify-content: flex-end;
}

.viewticket-page .message-support {
  justify-content: flex-start;
}

/* Message Avatar (support only) */
.viewticket-page .message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Message Bubble */
.viewticket-page .message-bubble {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 12px;
}

.viewticket-page .message-user .message-bubble {
  background: var(--primary);
  color: white;
  border-bottom-right-radius: 4px;
}

.viewticket-page .message-support .message-bubble {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}

.viewticket-page .message-content {
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

.viewticket-page .message-content p {
  margin: 0 0 8px 0;
}

.viewticket-page .message-content p:last-child {
  margin-bottom: 0;
}

/* Message Files */
.viewticket-page .message-files {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.viewticket-page .message-support .message-files {
  border-top-color: var(--line);
}

.viewticket-page .file-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: inherit;
  opacity: 0.9;
  text-decoration: none;
  margin-bottom: 4px;
}

.viewticket-page .file-link:hover {
  opacity: 1;
  text-decoration: underline;
}

.viewticket-page .message-support .file-link {
  color: var(--primary);
}

/* Message Info */
.viewticket-page .message-info {
  margin-top: 8px;
  font-size: 11px;
  opacity: 0.8;
  display: flex;
  gap: 8px;
}

.viewticket-page .message-author {
  font-weight: 500;
}

.viewticket-page .message-support .message-info {
  color: var(--muted);
  opacity: 1;
}

/* No Messages */
.viewticket-page .no-messages {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

.viewticket-page .no-messages svg {
  margin-bottom: 12px;
  opacity: 0.4;
}

.viewticket-page .no-messages p {
  margin: 0;
  font-size: 14px;
}

/* Reply Form */
.viewticket-page .ticket-reply {
  padding: 24px;
  border-top: 1px solid var(--line);
  background: var(--input-bg);
}

.viewticket-page .ticket-reply .btn {
  margin-top: 8px;
}

/* Ticket Closed Notice */
.viewticket-page .ticket-closed-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background: var(--input-bg);
  color: var(--muted);
  font-size: 14px;
  border-top: 1px solid var(--line);
}

/* Responsive */
@media (max-width: 768px) {
  .viewticket-page .message-bubble {
    max-width: 85%;
  }

  .viewticket-page .ticket-messages {
    padding: 16px;
  }

  .viewticket-page .ticket-reply {
    padding: 16px;
  }
}

@media (max-width: 576px) {
  .viewticket-page {
    gap: 16px;
  }

  .viewticket-page .ticket-header {
    gap: 12px;
  }

  .viewticket-page .ticket-title h1 {
    font-size: 1.125rem;
  }

  .viewticket-page .ticket-meta {
    flex-wrap: wrap;
  }

  .viewticket-page .message-bubble {
    max-width: 90%;
    padding: 12px;
  }

  .viewticket-page .message-avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .viewticket-page .message-time {
    font-size: 11px;
  }

  .viewticket-page .ticket-messages {
    padding: 12px;
    gap: 12px;
  }

  .viewticket-page .ticket-reply {
    padding: 12px;
  }

  .viewticket-page .no-messages {
    padding: 40px 16px;
  }
}

@media (max-width: 375px) {
  .viewticket-page .message-bubble {
    max-width: 95%;
    padding: 10px;
    font-size: 13px;
  }

  .viewticket-page .ticket-title h1 {
    font-size: 1rem;
  }
}

/* ==========================================
   AFFILIATES PAGE
   ========================================== */

.affiliates-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.affiliates-page .affiliates-info {
  background: var(--card);
  border-radius: 12px;
  padding: 20px;
}

.affiliates-page .affiliates-info .info-content {
  color: var(--text);
  line-height: 1.6;
}

/* Referral Link Card */
.affiliates-page .referral-card {
  background: var(--card);
  border-radius: 12px;
  padding: 24px;
}

.affiliates-page .referral-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.affiliates-page .referral-header svg {
  color: var(--primary);
}

.affiliates-page .referral-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.affiliates-page .referral-link-wrapper {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.affiliates-page .referral-link-input {
  flex: 1;
  padding: 12px 16px;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  font-family: monospace;
}

.affiliates-page .referral-link-input:focus {
  outline: none;
  border-color: var(--primary);
}

.affiliates-page .copy-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.affiliates-page .referral-meta {
  display: flex;
  gap: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.affiliates-page .meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.affiliates-page .meta-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.affiliates-page .meta-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.affiliates-page .meta-value.highlight {
  color: var(--success);
}

/* Stats Grid */
.affiliates-page .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.affiliates-page .stat-card {
  background: var(--card);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.affiliates-page .stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--input-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.affiliates-page .stat-card.stat-earnings .stat-icon {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
}

.affiliates-page .stat-card.stat-available .stat-icon {
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary);
}

.affiliates-page .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.affiliates-page .stat-card.stat-earnings .stat-value {
  color: var(--success);
}

.affiliates-page .stat-card.stat-available .stat-value {
  color: var(--primary);
}

.affiliates-page .stat-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.affiliates-page .payout-btn {
  margin-top: 8px;
}

/* Payments Card */
.affiliates-page .payments-card {
  background: var(--card);
  border-radius: 12px;
  padding: 24px;
}

.affiliates-page .payments-card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 20px 0;
}

.affiliates-page .payments-card h2 svg {
  color: var(--muted);
}

.affiliates-page .table-wrapper {
  overflow-x: auto;
}

.affiliates-page .affiliates-table {
  width: 100%;
  border-collapse: collapse;
}

.affiliates-page .affiliates-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--input-bg);
  border-bottom: 1px solid var(--line);
}

.affiliates-page .affiliates-table th:first-child {
  border-radius: 8px 0 0 0;
}

.affiliates-page .affiliates-table th:last-child {
  border-radius: 0 8px 0 0;
}

.affiliates-page .affiliates-table td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.affiliates-page .affiliates-table td.amount {
  font-weight: 600;
  color: var(--success);
}

.affiliates-page .affiliates-table tbody tr:hover {
  background: var(--input-bg);
}

.affiliates-page .payment-status {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.affiliates-page .payment-status.status-paid,
.affiliates-page .payment-status.status-completed {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
}

.affiliates-page .payment-status.status-pending {
  background: rgba(251, 191, 36, 0.1);
  color: #f59e0b;
}

.affiliates-page .payment-status.status-rejected,
.affiliates-page .payment-status.status-cancelled {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Affiliates Responsive */
@media (max-width: 768px) {
  .affiliates-page .referral-link-wrapper {
    flex-direction: column;
  }

  .affiliates-page .referral-meta {
    flex-direction: column;
    gap: 16px;
  }

  .affiliates-page .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .affiliates-page .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   CHILD PANEL PAGE
   ========================================== */

.childpanel-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.childpanel-page .card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.childpanel-page .card-header svg {
  color: var(--primary);
}

.childpanel-page .card-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* Alerts */
.childpanel-page .alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
}

.childpanel-page .alert-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.childpanel-page .alert-danger {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.childpanel-page .alert-success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: var(--success);
}

.childpanel-page .alert-warning {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  color: #f59e0b;
}

.childpanel-page .alert .close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  line-height: 1;
}

.childpanel-page .alert .close:hover {
  opacity: 1;
}

/* Panels Table */
.childpanel-page .table-wrapper {
  overflow-x: auto;
}

.childpanel-page .childpanel-table {
  width: 100%;
  border-collapse: collapse;
}

.childpanel-page .childpanel-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--input-bg);
  border-bottom: 1px solid var(--line);
}

.childpanel-page .childpanel-table th:first-child {
  border-radius: 8px 0 0 0;
}

.childpanel-page .childpanel-table th:last-child {
  border-radius: 0 8px 0 0;
}

.childpanel-page .childpanel-table td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.childpanel-page .childpanel-table tbody tr:hover {
  background: var(--input-bg);
}

.childpanel-page .domain-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.childpanel-page .domain-cell svg {
  color: var(--primary);
  flex-shrink: 0;
}

.childpanel-page .panel-status {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.childpanel-page .panel-status.status-active {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success);
}

.childpanel-page .panel-status.status-inactive,
.childpanel-page .panel-status.status-expired {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.childpanel-page .panel-status.status-pending {
  background: rgba(251, 191, 36, 0.1);
  color: #f59e0b;
}

.childpanel-page .nowrap {
  white-space: nowrap;
}

/* Child Panel Responsive */
@media (max-width: 768px) {
  .childpanel-page .childpanel-table th,
  .childpanel-page .childpanel-table td {
    padding: 10px 12px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .childpanel-page .alert {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .childpanel-page .alert .btn {
    width: 100%;
  }
}

/* ==========================================
   CHILD PANEL ORDER PAGE
   ========================================== */

.childpanel-order-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.childpanel-order-page .full-width {
  grid-column: 1 / -1;
}

/* Two Column Layout */
.childpanel-order-page .order-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.childpanel-order-page .childpanel-info {
  background: var(--card);
  border-radius: 12px;
  padding: 20px;
}

.childpanel-order-page .childpanel-info .info-content {
  color: var(--text);
  line-height: 1.6;
}

.childpanel-order-page .order-form-card {
  background: var(--card);
  border-radius: 12px;
  padding: 24px;
}

.childpanel-order-page .card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.childpanel-order-page .card-header svg {
  color: var(--primary);
}

.childpanel-order-page .card-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.childpanel-order-page .childpanel-form .form-group {
  margin-bottom: 20px;
}

.childpanel-order-page .form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}

.childpanel-order-page .form-input,
.childpanel-order-page .form-select {
  width: 100%;
  padding: 12px 16px;
  /* Use background-color instead of shorthand to preserve background-image (select arrow) */
  background-color: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.2s;
}

.childpanel-order-page .form-input:focus,
.childpanel-order-page .form-select:focus {
  outline: none;
  border-color: var(--primary);
}

.childpanel-order-page .form-input::placeholder {
  color: var(--muted);
}

/* Nameservers Info Box */
.childpanel-order-page .ns-info-box {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}

.childpanel-order-page .ns-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary);
  font-size: 14px;
  margin-bottom: 12px;
}

.childpanel-order-page .ns-list {
  margin: 0;
  padding-left: 26px;
  color: var(--text);
}

.childpanel-order-page .ns-list li {
  font-family: monospace;
  font-size: 13px;
  padding: 4px 0;
}

/* Form Row (two columns) */
.childpanel-order-page .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.childpanel-order-page .form-row .form-group {
  margin-bottom: 20px;
}

/* Price Display */
.childpanel-order-page .price-group {
  background: var(--input-bg);
  border-radius: 10px;
  padding: 16px;
}

.childpanel-order-page .price-display {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.childpanel-order-page .price-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
}

.childpanel-order-page .price-period {
  font-size: 14px;
  color: var(--muted);
}

/* Submit Button */
.childpanel-order-page .btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  margin-top: 8px;
}

/* Alert */
.childpanel-order-page .alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.childpanel-order-page .alert-danger {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.childpanel-order-page .alert .close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  line-height: 1;
}

.childpanel-order-page .alert .close:hover {
  opacity: 1;
}

/* Promo Card */
.childpanel-order-page .promo-card {
  background: var(--card);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.childpanel-order-page .promo-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 51, 234, 0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.childpanel-order-page .promo-icon svg {
  color: var(--primary);
}

.childpanel-order-page .promo-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px 0;
}

.childpanel-order-page .promo-lead {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 24px 0;
}

.childpanel-order-page .promo-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.childpanel-order-page .feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.childpanel-order-page .feature-item svg {
  color: var(--success);
  flex-shrink: 0;
  margin-top: 2px;
}

.childpanel-order-page .feature-item span {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

.childpanel-order-page .promo-cta {
  margin-top: auto;
  padding: 16px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(147, 51, 234, 0.08));
  border-radius: 10px;
}

.childpanel-order-page .cta-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 6px;
}

.childpanel-order-page .cta-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* Child Panel Order Responsive */
@media (max-width: 900px) {
  .childpanel-order-page .order-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .childpanel-order-page .form-row {
    grid-template-columns: 1fr;
  }

  .childpanel-order-page .price-value {
    font-size: 24px;
  }

  .childpanel-order-page .promo-card {
    padding: 20px;
  }
}

/* ===========================================
   UPDATES PAGE
   =========================================== */

.updates-page {
  padding: 24px;
}

.updates-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.updates-header .header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.updates-header .header-left svg {
  color: var(--blue);
}

.updates-header .header-left h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* Filter Pills */
.updates-page .filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.updates-page .filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.2s;
}

.updates-page .filter-pill:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.updates-page .filter-pill.active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* Search Form */
.updates-page .search-form {
  margin: 0;
}

.updates-page .search-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.2s;
}

.updates-page .search-wrapper:focus-within {
  border-color: var(--blue);
  box-shadow: var(--focus);
}

.updates-page .search-wrapper svg {
  color: var(--muted);
  flex-shrink: 0;
}

.updates-page .search-wrapper input {
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  color: var(--text);
  width: 180px;
}

.updates-page .search-wrapper input::placeholder {
  color: var(--muted);
}

/* Updates Card */
.updates-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Updates Table */
.updates-table {
  width: 100%;
  border-collapse: collapse;
}

.updates-table thead {
  background: var(--gray-50);
}

.updates-table th {
  padding: 14px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.updates-table .col-service {
  width: 60%;
}

.updates-table .col-date {
  width: 15%;
}

.updates-table .col-update {
  width: 25%;
}

.updates-table td {
  padding: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--text);
  vertical-align: top;
}

.updates-table tbody tr:hover {
  background: var(--gray-50);
}

.updates-table .service-cell {
  color: var(--text);
  font-weight: 500;
}

.updates-table .date-cell {
  color: var(--muted);
  font-size: 13px;
}

.updates-table .update-cell {
  color: var(--gray-600);
  line-height: 1.5;
}

/* Empty State */
.updates-page .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.updates-page .empty-state svg {
  color: var(--gray-300);
  margin-bottom: 16px;
}

.updates-page .empty-state p {
  color: var(--muted);
  font-size: 15px;
}

/* Responsive */
@media (max-width: 768px) {
  .updates-page {
    padding: 16px;
  }

  .updates-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .updates-page .search-form {
    width: 100%;
  }

  .updates-page .search-wrapper {
    width: 100%;
  }

  .updates-page .search-wrapper input {
    width: 100%;
  }

  .updates-table .col-service {
    width: auto;
  }

  .updates-table .col-date {
    width: 100px;
  }
}

/* =====================================================
   REFILL PAGE STYLES
   ===================================================== */

.refill-page {
  padding: 24px;
}

.refill-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.refill-header .header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.refill-header .header-left svg {
  color: var(--blue);
}

.refill-header .header-left h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* Filter Pills */
.refill-page .filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.refill-page .filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.2s;
}

.refill-page .filter-pill:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.refill-page .filter-pill.active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* Search Form */
.refill-page .search-form {
  margin: 0;
}

.refill-page .search-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.2s;
}

.refill-page .search-wrapper:focus-within {
  border-color: var(--blue);
  box-shadow: var(--focus);
}

.refill-page .search-wrapper svg {
  color: var(--muted);
  flex-shrink: 0;
}

.refill-page .search-wrapper input {
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  color: var(--text);
  width: 180px;
}

.refill-page .search-wrapper input::placeholder {
  color: var(--muted);
}

/* Refill Card */
.refill-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Refill Table */
.refill-table {
  width: 100%;
  border-collapse: collapse;
}

.refill-table thead {
  background: var(--gray-50);
}

.refill-table th {
  padding: 14px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.refill-table .col-id {
  width: 80px;
}

.refill-table .col-date {
  width: 120px;
}

.refill-table .col-order {
  width: 100px;
}

.refill-table .col-link {
  width: 25%;
}

.refill-table .col-service {
  width: auto;
}

.refill-table .col-status {
  width: 120px;
}

.refill-table td {
  padding: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--text);
  vertical-align: middle;
}

.refill-table tbody tr:hover {
  background: var(--gray-50);
}

.refill-table .id-cell {
  font-weight: 600;
  color: var(--muted);
}

.refill-table .date-cell {
  color: var(--muted);
  font-size: 13px;
}

.refill-table .order-link {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
}

.refill-table .order-link:hover {
  text-decoration: underline;
}

.refill-table .external-link {
  color: var(--text);
  text-decoration: none;
  word-break: break-all;
}

.refill-table .external-link:hover {
  color: var(--blue);
}

.refill-table .service-cell {
  color: var(--text);
  font-weight: 500;
}

/* Status Badge Extensions for Refill */
.status-badge.status-rejected {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.status-badge.status-error {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

/* Empty State */
.refill-page .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.refill-page .empty-state svg {
  color: var(--gray-300);
  margin-bottom: 16px;
}

.refill-page .empty-state p {
  color: var(--muted);
  font-size: 15px;
}

/* Responsive */
@media (max-width: 768px) {
  .refill-page {
    padding: 16px;
  }

  .refill-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .refill-page .search-form {
    width: 100%;
  }

  .refill-page .search-wrapper {
    width: 100%;
  }

  .refill-page .search-wrapper input {
    width: 100%;
  }

  .refill-table .col-id,
  .refill-table .col-date {
    width: auto;
  }

  .refill-table .col-link {
    display: none;
  }

  .refill-table td {
    padding: 12px;
  }
}

/* =====================================================
   SUBSCRIPTIONS PAGE STYLES
   ===================================================== */

.subscriptions-page {
  padding: 24px;
}

.subscriptions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.subscriptions-header .header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.subscriptions-header .header-left svg {
  color: var(--blue);
}

.subscriptions-header .header-left h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* Filter Pills */
.subscriptions-page .filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.subscriptions-page .filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.2s;
}

.subscriptions-page .filter-pill:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.subscriptions-page .filter-pill.active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* Search Form */
.subscriptions-page .search-form {
  margin: 0;
}

.subscriptions-page .search-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.2s;
}

.subscriptions-page .search-wrapper:focus-within {
  border-color: var(--blue);
  box-shadow: var(--focus);
}

.subscriptions-page .search-wrapper svg {
  color: var(--muted);
  flex-shrink: 0;
}

.subscriptions-page .search-wrapper input {
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  color: var(--text);
  width: 180px;
}

.subscriptions-page .search-wrapper input::placeholder {
  color: var(--muted);
}

/* Subscriptions Card */
.subscriptions-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Subscriptions Table */
.subscriptions-table {
  width: 100%;
  border-collapse: collapse;
}

.subscriptions-table thead {
  background: var(--gray-50);
}

.subscriptions-table th {
  padding: 14px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  white-space: nowrap;
}

.subscriptions-table .col-id {
  width: 60px;
}

.subscriptions-table .col-username {
  min-width: 150px;
}

.subscriptions-table .col-quantity,
.subscriptions-table .col-delay {
  width: 70px;
}

.subscriptions-table .col-posts {
  width: 100px;
}

.subscriptions-table .col-service {
  min-width: 180px;
}

.subscriptions-table .col-status {
  width: 100px;
}

.subscriptions-table .col-date {
  width: 100px;
}

.subscriptions-table .col-actions {
  width: 60px;
  text-align: center;
}

.subscriptions-table td {
  padding: 14px 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text);
  vertical-align: middle;
}

.subscriptions-table tbody tr:hover {
  background: var(--gray-50);
}

.subscriptions-table .id-cell {
  font-weight: 600;
  color: var(--muted);
}

.subscriptions-table .username-cell {
  max-width: 200px;
}

.subscriptions-table .username-link {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscriptions-table .username-link:hover {
  text-decoration: underline;
}

.subscriptions-table .quantity-cell {
  font-weight: 500;
}

.subscriptions-table .posts-cell {
  font-size: 12px;
}

.subscriptions-table .posts-link {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.subscriptions-table .posts-link:hover {
  text-decoration: underline;
}

.subscriptions-table .posts-zero {
  color: var(--muted);
}

.subscriptions-table .posts-divider {
  color: var(--gray-300);
  margin: 0 2px;
}

.subscriptions-table .posts-total {
  color: var(--muted);
}

.subscriptions-table .delay-cell {
  color: var(--muted);
  font-size: 12px;
}

.subscriptions-table .service-cell {
  font-weight: 500;
}

.subscriptions-table .date-cell {
  color: var(--muted);
  font-size: 12px;
}

.subscriptions-table .status-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.subscriptions-table .status-reason {
  color: var(--muted);
  cursor: help;
  display: inline-flex;
}

.subscriptions-table .status-reason:hover {
  color: var(--blue);
}

/* Status Badge Extensions for Subscriptions */
.status-badge.status-active {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.status-badge.status-paused {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.status-badge.status-expired {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.status-badge.status-canceled {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Action Buttons */
.subscriptions-table .actions-cell {
  text-align: center;
}

.subscriptions-table .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  transition: all 0.2s;
}

.subscriptions-table .action-cancel {
  color: var(--muted);
  background: transparent;
}

.subscriptions-table .action-cancel:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.subscriptions-table .action-resume {
  color: var(--white);
  background: var(--blue);
}

.subscriptions-table .action-resume:hover {
  background: #1152d9;
}

.subscriptions-table .action-reorder {
  color: var(--white);
  background: var(--blue);
}

.subscriptions-table .action-reorder:hover {
  background: #1152d9;
}

/* Empty State */
.subscriptions-page .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.subscriptions-page .empty-state svg {
  color: var(--gray-300);
  margin-bottom: 16px;
}

.subscriptions-page .empty-state p {
  color: var(--muted);
  font-size: 15px;
}

/* Responsive */
@media (max-width: 1200px) {
  .subscriptions-table .col-delay,
  .subscriptions-table .delay-cell {
    display: none;
  }
}

@media (max-width: 992px) {
  .subscriptions-table .col-posts:last-of-type,
  .subscriptions-table .posts-cell:nth-child(5) {
    display: none;
  }
}

@media (max-width: 768px) {
  .subscriptions-page {
    padding: 16px;
  }

  .subscriptions-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .subscriptions-page .search-form {
    width: 100%;
  }

  .subscriptions-page .search-wrapper {
    width: 100%;
  }

  .subscriptions-page .search-wrapper input {
    width: 100%;
  }

  .subscriptions-table th,
  .subscriptions-table td {
    padding: 10px 8px;
    font-size: 12px;
  }

  .subscriptions-table .col-service,
  .subscriptions-table .service-cell,
  .subscriptions-table .col-date:last-of-type,
  .subscriptions-table .date-cell:last-of-type {
    display: none;
  }
}

/* ==========================================================================
   ACCOUNT PAGE STYLES
   ========================================================================== */

.account-page {
  padding: 24px;
  width: 100%;
}

.account-page .account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.account-page .account-header .header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-page .account-header .header-left svg {
  color: var(--blue);
}

.account-page .account-header .header-left h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* Account Page Tabs */
.account-page .filter-pills {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--card);
  border-radius: 10px;
  width: fit-content;
  margin-bottom: 24px;
}

.account-page .filter-pill {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.account-page .filter-pill:hover {
  color: var(--text);
  background: var(--bg);
}

.account-page .filter-pill.active {
  color: #ffffff;
  background: var(--blue);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

/* Account Cards Grid */
.account-page .account-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .account-page .account-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* Account Cards */
.account-card {
  margin-bottom: 0;
}

.account-card .card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.account-card .card-header svg {
  color: var(--blue);
  flex-shrink: 0;
}

.account-card .card-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  flex-grow: 1;
}

.account-card .card-header .status-badge {
  margin-left: auto;
}

.account-card .card-body {
  padding: 20px;
}

/* Form Elements */
.account-page .form-group {
  margin-bottom: 16px;
}

.account-page .form-group:last-child {
  margin-bottom: 0;
}

.account-page .form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 6px;
}

.account-page .form-input,
.account-page .form-select,
.account-page .form-textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: all 0.2s;
}

.account-page .form-input:focus,
.account-page .form-select:focus,
.account-page .form-textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.account-page .form-input[readonly] {
  background: var(--card);
  cursor: not-allowed;
  opacity: 0.7;
}

.account-page .form-input[disabled] {
  background: var(--card);
  cursor: not-allowed;
  opacity: 0.5;
}

.account-page .form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

.account-page .form-select option {
  background: #ffffff;
  color: #1f2937;
  padding: 10px;
}

.account-page .form-textarea {
  resize: vertical;
  min-height: 100px;
}

.account-page .form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.account-page .form-description {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
}

.account-page .form-hint {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}

/* Input with Action Button */
.account-page .input-with-action {
  display: flex;
  gap: 8px;
}

.account-page .input-with-action .form-input {
  flex: 1;
}

/* API Key Info Box */
.account-page .api-key-info-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 10px;
  margin-bottom: 16px;
}

.account-page .api-key-info-box svg {
  color: var(--blue);
  flex-shrink: 0;
  margin-top: 2px;
}

.account-page .api-key-info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-page .api-key-info-text strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.account-page .api-key-info-text span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* API Key Wrapper */
.account-page .api-key-wrapper {
  display: flex;
  gap: 8px;
}

.account-page .api-key-wrapper .form-input {
  flex: 1;
  font-family: monospace;
  font-size: 13px;
}

/* Copy Button */
.account-page .btn-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--blue);
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.account-page .btn-copy:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--blue);
}

.account-page .btn-copy svg {
  flex-shrink: 0;
}

.account-page .btn-copy.copied {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}

/* Hide Bootstrap tooltip on API key field */
.account-page .tooltip {
  display: none !important;
}

/* Buttons */
.account-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.account-page .btn-primary {
  background: var(--blue);
  color: var(--white);
}

.account-page .btn-primary:hover {
  background: #1152d9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 99, 255, 0.3);
}

.account-page .btn-secondary {
  background: var(--card);
  color: var(--white);
  border: 1px solid var(--line);
}

.account-page .btn-secondary:hover {
  background: var(--line);
}

.account-page .btn-danger {
  background: #ef4444;
  color: var(--white);
}

.account-page .btn-danger:hover {
  background: #dc2626;
}

.account-page .btn-sm {
  padding: 8px 14px;
  font-size: 13px;
}

/* Alerts */
.account-page .alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}

.account-page .alert svg {
  flex-shrink: 0;
}

.account-page .alert span {
  flex: 1;
}

.account-page .alert-close {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.account-page .alert-close:hover {
  opacity: 1;
}

.account-page .alert-success {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.account-page .alert-success .alert-close {
  color: #10b981;
}

.account-page .alert-error {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.account-page .alert-error .alert-close {
  color: #ef4444;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: var(--card);
  border-radius: 12px;
  width: 100%;
  max-width: 550px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

/* ── Fix: neutralize card-style .modal for panel-native (Bootstrap) modals ──
   Panel modals such as the hCaptcha popup (#module-captcha) use Bootstrap markup where
   .modal is a full-screen fixed CONTAINER and .modal-dialog/.modal-content is the card.
   Our custom .modal rules (~1880 & ~9274) style .modal as a card — white bg, max-width,
   radius, shadow, transform:scale, max-height, mobile margin — which hijacked that
   container and collapsed it into a ~550px white strip pinned to the left. .modal.fade
   matches ONLY panel-native modals (our custom modals live under .modal-overlay and never
   carry .fade), so this reset restores Bootstrap centering without touching our own modals. */
.modal.fade {
  background: transparent;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

/* ── hCaptcha modal (panel-native #module-captcha) — modern brand styling ──
   The panel builds this Bootstrap modal on submit to show hCaptcha. We fully restyle it
   (isolated via #id, nothing else is affected) into a compact, centred verification card:
   soft rounded corners, a trust badge above a centred title, and a crisp corner close
   button. Container positioning stays with the .modal.fade reset above. The neutral tokens
   --card/--line/--text/--muted flip with the theme, so this reads right in light and dark. */
#module-captcha .modal-dialog {
  max-width: 420px;
  width: calc(100% - 32px);
  margin: 24px auto;
}

#module-captcha .modal-content {
  position: relative;
  background: var(--card, #ffffff);
  border: 1px solid var(--line, #e6eaf0);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

/* Header: block layout (overrides the panel's d-flex/flex-row-reverse utilities) so the
   title centres cleanly, with a trust badge above it and the close pinned to the corner. */
#module-captcha .modal-header {
  display: block !important;
  position: relative;
  padding: 26px 56px 18px;
  text-align: center;
  border-bottom: 1px solid var(--line, #eef2f7);
}

/* Trust badge — a shield-check in a soft brand tint, sets a professional/secure tone */
#module-captcha .modal-header::before {
  content: '';
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background-color: rgba(0, 102, 255, 0.1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

#module-captcha .modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text, #0f172a);
}

/* Crisp CSS-drawn close (×) — consistent across fonts, unlike the raw &times; glyph */
#module-captcha .modal-header .close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.14);
  color: var(--muted, #64748b);
  font-size: 0; /* hide the &times; glyph; the X is drawn with the pseudo-elements below */
  text-shadow: none;
  opacity: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

#module-captcha .modal-header .close::before,
#module-captcha .modal-header .close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
#module-captcha .modal-header .close::before { transform: translate(-50%, -50%) rotate(45deg); }
#module-captcha .modal-header .close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

#module-captcha .modal-header .close:hover {
  background: rgba(148, 163, 184, 0.26);
  color: var(--text, #0f172a);
}

#module-captcha .modal-header .close:active {
  transform: scale(0.93);
}

#module-captcha .modal-header .close:focus-visible {
  outline: 2px solid #0066ff;
  outline-offset: 2px;
}

/* Body: centre the captcha widget with comfortable breathing room */
#module-captcha .modal-body {
  display: flex;
  justify-content: center;
  padding: 26px 24px 30px;
}

#module-captcha #dynamic-captcha {
  display: flex;
  justify-content: center;
  width: 100%;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.modal-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Larger icon size for modal header */
.modal-header .platform-icon-small {
  width: 32px;
  height: 32px;
  min-width: 32px;
}

.modal-header .platform-icon-small svg {
  width: 20px;
  height: 20px;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s;
}

.modal-close:hover {
  color: var(--white);
}

.modal-body {
  padding: 20px;
}

.modal-body .form-group {
  margin-bottom: 16px;
}

.modal-body .form-group:last-child {
  margin-bottom: 0;
}

.modal-body .form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 6px;
}

.modal-body .form-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: all 0.2s;
}

.modal-body .form-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.modal-body .form-input[disabled] {
  background: var(--card);
  cursor: not-allowed;
  opacity: 0.5;
}

.modal-body .alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}

.modal-body .alert-error {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}

.modal-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.modal-footer .btn-primary {
  background: var(--blue);
  color: var(--white);
}

.modal-footer .btn-primary:hover {
  background: #1152d9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 99, 255, 0.3);
}

.modal-footer .btn-secondary {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
}

.modal-footer .btn-secondary:hover {
  background: var(--line);
}

/* Responsive */
@media (max-width: 768px) {
  .account-page {
    padding: 16px;
  }

  .account-page .account-cards-grid {
    grid-template-columns: 1fr;
  }

  .account-page .filter-pills {
    width: 100%;
  }

  .account-page .filter-pill {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
  }

  .account-page .form-row {
    grid-template-columns: 1fr;
  }

  .account-page .input-with-action {
    flex-direction: column;
  }

  .account-page .api-key-wrapper {
    flex-direction: column;
  }

  .modal {
    margin: 16px;
    max-width: none;
  }
}

/* ====================================
   NOTIFICATIONS SETTINGS STYLES
   ==================================== */

/* Notifications Settings Card - Full Width */
.account-page .notifications-settings-card {
  grid-column: 1 / -1;
}

/* Notifications List */
.account-page .notifications-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
}

.account-page .notification-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.account-page .notification-row:last-child {
  border-bottom: none;
}

.account-page .notification-info {
  flex: 1;
}

.account-page .notification-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.account-page .notification-toggles {
  display: flex;
  align-items: center;
  gap: 24px;
}

.account-page .toggle-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-page .toggle-label {
  font-size: 13px;
  color: var(--text-secondary);
  min-width: 50px;
}

/* Toggle Switch - Modern Style */
.account-page .toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  cursor: pointer;
  flex-shrink: 0;
}

.account-page .toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.account-page .toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #d1d5db;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 26px;
}

.account-page .toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.account-page .toggle-switch input:checked + .toggle-slider {
  background: var(--blue);
}

.account-page .toggle-switch input:checked + .toggle-slider:before {
  transform: translateY(-50%) translateX(22px);
}

.account-page .toggle-switch:hover .toggle-slider {
  background: #9ca3af;
}

.account-page .toggle-switch input:checked + .toggle-slider:hover {
  background: #1152d9;
}

.account-page .toggle-switch input:disabled + .toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

.account-page .toggle-switch input:disabled + .toggle-slider:hover {
  background: #d1d5db;
}

/* Empty State */
.account-page .empty-state {
  text-align: center;
  padding: 48px 24px;
}

.account-page .empty-state svg {
  color: var(--text-secondary);
  opacity: 0.5;
  margin-bottom: 16px;
}

.account-page .empty-state h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.account-page .empty-state p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

/* ============================================
   BLOG PAGE STYLES (for non-authenticated users)
   ============================================ */

.blog-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* NOT_AUTH: Add top padding to compensate for fixed header */
body.not_auth .blog-page {
  padding-top: 104px; /* 64px header + 40px spacing */
}

/* Blog Header */
.blog-header {
  text-align: center;
  margin-bottom: 48px;
}

.blog-header h1 {
  font-size: 42px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.blog-header p {
  font-size: 18px;
  color: var(--gray-600);
  margin: 0;
  max-width: 500px;
  margin: 0 auto;
}

/* Featured Post */
.featured-post {
  margin-bottom: 48px;
}

.featured-link {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.featured-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.featured-link:hover .featured-image img {
  transform: scale(1.05);
}

.featured-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
}

.featured-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--primary);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.featured-content {
  padding: 40px 40px 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.post-category {
  background: var(--primary-light);
  color: var(--primary);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.post-date {
  color: var(--gray-500);
  font-size: 13px;
}

.featured-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.featured-excerpt {
  font-size: 15px;
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: 24px;
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  transition: gap 0.2s ease;
}

.featured-link:hover .read-more {
  gap: 12px;
}

/* Secondary Posts (2 columns) */
.secondary-posts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.secondary-post {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.secondary-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.post-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.post-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.secondary-post:hover .post-image img {
  transform: scale(1.05);
}

.image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
}

.post-content {
  padding: 24px;
}

.post-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0 0 12px;
  line-height: 1.4;
}

.post-excerpt {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0 0 16px;
}

.read-more-link {
  color: var(--primary);
  font-weight: 600;
  font-size: 13px;
  transition: color 0.2s ease;
}

.post-link:hover .read-more-link {
  color: var(--primary-hover);
}

/* Posts Grid (3 columns) */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.post-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.post-card:hover .card-image img {
  transform: scale(1.05);
}

.card-content {
  padding: 20px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0 0 10px;
  line-height: 1.4;
}

.card-excerpt {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0 0 14px;
}

/* Blog Pagination */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 24px;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.pagination-btn:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
  color: var(--gray-900);
}

.pagination-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.pagination-number:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
}

.pagination-number.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* Blog Empty State */
.blog-empty {
  text-align: center;
  padding: 80px 24px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.blog-empty svg {
  color: var(--gray-400);
  margin-bottom: 20px;
}

.blog-empty h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0 0 8px;
}

.blog-empty p {
  font-size: 15px;
  color: var(--gray-600);
  margin: 0;
}

/* Blog Page Responsive */
@media (max-width: 1024px) {
  .featured-link {
    grid-template-columns: 1fr;
  }

  .featured-content {
    padding: 32px;
  }

  .featured-title {
    font-size: 24px;
  }

  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .blog-page {
    padding: 32px 16px 60px;
  }

  /* NOT_AUTH: Compensate for fixed header on mobile */
  body.not_auth .blog-page {
    padding-top: 96px; /* 64px header + 32px spacing */
  }

  .blog-header h1 {
    font-size: 32px;
  }

  .blog-header p {
    font-size: 16px;
  }

  .secondary-posts {
    grid-template-columns: 1fr;
  }

  .posts-grid {
    grid-template-columns: 1fr;
  }

  .featured-content {
    padding: 24px;
  }

  .featured-title {
    font-size: 20px;
  }

  .featured-excerpt {
    font-size: 14px;
  }

  .pagination-btn span {
    display: none;
  }

  .pagination-btn {
    padding: 10px 14px;
  }
}

/* ============================================
   BLOG POST PAGE STYLES
   ============================================ */

.blog-post-page {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 100px 40px 0; /* Extra top padding for fixed header */
  /* Flex layout: sidebar renders outside .blog-post-container on server */
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}

.blog-post-container {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  /* Grow to fill available width next to sidebar */
  flex: 1;
  min-width: 0;
}

/* White card container for article content */
.blog-post-card {
  flex: 1;
  min-width: 0;
  background: var(--white);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.blog-post-sidebar {
  width: 300px;
  flex-shrink: 0;
  align-self: start;
  position: sticky;
  top: 90px;
}

/* Back Link */
.back-to-blog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%; /* Force own flex line in .blog-post-page wrap layout */
  color: var(--gray-600);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 24px;
  transition: color 0.2s ease;
  /* Full width so it stays above the two-column layout */
  width: 100%;
}

.back-to-blog:hover {
  color: var(--primary);
}

/* Post Header */
.post-header {
  margin-bottom: 32px;
}

.blog-post-card .post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.blog-post-card .post-category {
  background: var(--primary-light);
  color: var(--primary);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.meta-separator {
  color: var(--gray-300);
}

.blog-post-card .post-date {
  color: var(--gray-500);
  font-size: 14px;
}

.post-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Featured Image */
.post-featured-image {
  margin-bottom: 32px;
  border-radius: 16px;
  overflow: hidden;
}

.post-featured-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Post Body */
.post-body {
  font-size: 17px;
  line-height: 1.8;
  color: var(--gray-700);
}

.post-body h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 40px 0 16px;
}

.post-body h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 32px 0 12px;
}

.post-body p {
  margin: 0 0 20px;
}

.post-body a {
  color: var(--primary);
  text-decoration: underline;
}

.post-body a:hover {
  color: var(--primary-hover);
}

.post-body ul,
.post-body ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

.post-body li {
  margin-bottom: 8px;
}

.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 24px 0;
}

.post-body blockquote {
  border-left: 4px solid var(--primary);
  margin: 24px 0;
  padding: 16px 24px;
  background: var(--gray-50);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--gray-600);
}

.post-body strong,
.post-body b {
  font-weight: 600;
  color: var(--gray-900);
}

/* Post Footer */
.post-footer {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--gray-200);
}

.post-footer .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Facebook Comments */
.post-comments {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--gray-200);
}

.comments-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0 0 24px;
}

.comments-title svg {
  color: var(--primary);
}

.fb-comments {
  background: var(--gray-50);
  border-radius: 12px;
  padding: 20px;
}

.fb-comments iframe {
  width: 100% !important;
}

/* Sticky Sidebar */
.sidebar-sticky {
  position: sticky;
  top: 90px; /* Account for fixed header height */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-block {
  background: var(--white);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Share Block */
.share-block {
  border: 1px solid var(--gray-200);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.share-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.share-header svg {
  color: var(--primary);
}

.share-header h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}

.share-subtitle {
  font-size: 13px;
  color: var(--gray-500);
  margin: 0 0 16px;
}

.share-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.share-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 10px;
  color: white;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.share-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.share-facebook {
  background: linear-gradient(135deg, #4267B2 0%, #3b5998 100%);
}

.share-linkedin {
  background: linear-gradient(135deg, #0A66C2 0%, #004182 100%);
}

.share-twitter {
  background: linear-gradient(135deg, #1a1a1a 0%, #333333 100%);
}

.share-telegram {
  background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
}

.copy-link-wrapper {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: var(--gray-100);
  border-radius: 10px;
}

.copy-link-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  color: var(--gray-600);
  background: var(--white);
}

.copy-link-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.copy-link-btn:hover {
  background: var(--primary-dark);
}

.copy-link-btn.copied {
  background: var(--green);
}

/* CTA Banner */
.cta-banner {
  background: linear-gradient(145deg, var(--primary) 0%, #0052cc 50%, #003d99 100%);
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
  margin-bottom: 16px;
}

.cta-icon svg {
  color: white;
}

.cta-banner h4 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 8px;
}

.cta-description {
  font-size: 13px;
  opacity: 0.85;
  margin: 0 0 20px;
  line-height: 1.5;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  background: white;
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* Related Posts */
.related-posts {
  /* background: var(--gray-50); */
  padding: 64px 24px;
  margin-top: 64px;
  width: 100%; /* Force own flex line in .blog-post-page wrap layout */
}

.related-posts-container {
  max-width: 1200px;
  margin: 0 auto;
}

.related-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 32px;
  text-align: center;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.related-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.related-link {
  display: block;
  padding: 28px;
  text-decoration: none;
  color: inherit;
}

.related-category {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary);
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

.related-card h4 {
  font-size: 17px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.4;
  margin: 0 0 12px;
}

.related-card p {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0 0 16px;
}

.related-read-more {
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
}

.related-card:hover .related-read-more {
  text-decoration: underline;
}

/* Blog Post Responsive */
@media (max-width: 1024px) {
  .blog-post-page {
    flex-direction: column;
  }

  .blog-post-container {
    flex-direction: column;
  }

  .blog-post-card {
    padding: 32px;
  }

  .blog-post-sidebar {
    width: 100%;
    position: static;
    order: 1;
  }

  .sidebar-sticky {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .sidebar-block {
    flex: 1;
    min-width: 280px;
  }

  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .blog-post-page {
    padding: 80px 16px 0;
  }

  .blog-post-card {
    padding: 24px;
  }

  .post-title {
    font-size: 28px;
  }

  .post-body {
    font-size: 16px;
  }

  .sidebar-sticky {
    flex-direction: column;
  }

  .sidebar-block {
    min-width: 100%;
  }

  .related-posts {
    padding: 48px 16px;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  .related-title {
    font-size: 24px;
  }
}

/* ============================================
   Sign Up / Sign In Pages
   ============================================ */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 40px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.auth-container {
  display: flex;
  width: 100%;
  max-width: 1100px;
  min-height: 600px;
  background: var(--white);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Form Section */
.auth-form-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.auth-form-wrapper {
  width: 100%;
  max-width: 400px;
}

.auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.auth-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 8px;
}

.auth-header p {
  font-size: 15px;
  color: var(--gray-500);
  margin: 0;
}

/* Social Auth */
.social-auth {
  margin-bottom: 24px;
}

.social-auth .g_id_signin {
  display: flex;
  justify-content: center;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

.auth-divider span {
  font-size: 13px;
  color: var(--gray-400);
  white-space: nowrap;
}

/* Auth Form */
.auth-form .form-group {
  margin-bottom: 20px;
}

.auth-form label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 8px;
}

/* Override: .auth-form label has higher specificity (0-1-1) than .checkbox-label (0-1-0),
   so flex layout was broken. This restores it with specificity 0-2-0. */
.auth-form .checkbox-label {
  display: flex;
  margin-bottom: 0;
}

.auth-form .input-wrapper {
  position: relative;
}

.auth-form .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  pointer-events: none;
}

.auth-form .form-input {
  width: 100%;
  padding: 14px 14px 14px 46px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  font-size: 15px;
  color: var(--gray-900);
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-form .form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
}

.auth-form .form-input::placeholder {
  color: var(--gray-400);
}

/* Toggle Password */
.toggle-password {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--gray-400);
  transition: color 0.2s ease;
}

.toggle-password:hover {
  color: var(--gray-600);
}

/* Checkbox — custom styled checkbox */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--gray-600);
  user-select: none;
}

.checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.checkmark {
  flex-shrink: 0;
  display: inline-block;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border: 2px solid var(--gray-300);
  border-radius: 4px;
  background: var(--white);
  position: relative;
  transition: all 0.2s ease;
}

.checkbox-label:hover .checkmark {
  border-color: var(--primary);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
  background: var(--primary);
  border-color: var(--primary);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-text {
  line-height: 1.4;
}

.checkbox-text a {
  color: var(--primary);
  text-decoration: none;
}

.checkbox-text a:hover {
  text-decoration: underline;
}

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

/* Submit Button */
.auth-form .btn-block {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  margin-top: 8px;
}

/* Auth Footer */
.auth-footer {
  text-align: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-100);
}

.auth-footer p {
  margin: 0;
  font-size: 14px;
  color: var(--gray-500);
}

.auth-footer a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.auth-footer a:hover {
  text-decoration: underline;
}

/* Benefits Section */
.auth-benefits-section {
  width: 450px;
  flex-shrink: 0;
  background: linear-gradient(145deg, var(--primary) 0%, #0052cc 50%, #003d99 100%);
  color: white;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px;
  padding-top: 80px;
  position: relative;
  overflow: hidden;
}

.auth-benefits-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.benefits-content {
  position: relative;
  z-index: 1;
}

.benefits-header {
  margin-bottom: 40px;
}

.benefits-header h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
}

.benefits-header p {
  font-size: 15px;
  opacity: 0.85;
  margin: 0;
}

/* Benefits List */
.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.benefit-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.benefit-text h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
}

.benefit-text p {
  font-size: 14px;
  opacity: 0.8;
  margin: 0;
  line-height: 1.4;
}

/* Benefits Stats */
.benefits-stats {
  display: flex;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-item {
  text-align: center;
  flex: 1;
}

.stat-number {
  display: block;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
  color: white;
}

.auth-page .stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

/* Responsive */
@media (max-width: 1024px) {
  .auth-benefits-section {
    display: none;
  }

  .auth-container {
    max-width: 500px;
  }
}

@media (max-width: 640px) {
  .auth-page {
    padding: 70px 16px 24px;
  }

  .auth-container {
    border-radius: 20px;
  }

  .auth-form-section {
    padding: 32px 24px;
  }

  .auth-header h1 {
    font-size: 24px;
  }

  .benefits-stats {
    flex-direction: column;
    gap: 16px;
  }
}

/* Signup page overrides — prevent setnewpassword .auth-container (max-width:480px) from breaking 2-column layout */
.signup-page.auth-page {
  min-height: 100vh;
  padding: 80px 24px 40px;
}

.signup-page .auth-container {
  max-width: 1100px;
  min-height: 600px;
  display: flex;
  background: var(--white);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.signup-page .auth-benefits-section {
  display: flex;
}

@media (max-width: 1024px) {
  .signup-page .auth-benefits-section {
    display: none;
  }
  .signup-page .auth-container {
    max-width: 500px;
  }
}

@media (max-width: 640px) {
  .signup-page.auth-page {
    padding: 70px 16px 24px;
  }
}

/* Signin page — 2-column layout override (same pattern as signup) */
/* `resetpassword-page` shares this shell so password recovery matches signin/signup */
.signin-page.auth-page,
.resetpassword-page.auth-page {
  min-height: 100vh;
  padding: 80px 24px 40px;
}

.signin-page .auth-container,
.resetpassword-page .auth-container {
  max-width: 1100px;
  min-height: 600px;
  display: flex;
  background: var(--white);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.signin-page .auth-benefits-section,
.resetpassword-page .auth-benefits-section {
  display: flex;
}

/* Remember me + Forgot password — single row */
.signin-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px !important;
}

.signin-options .checkbox-label {
  margin: 0;
}

.forgot-link {
  font-size: 14px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.forgot-link:hover {
  text-decoration: underline;
  color: #0052cc;
}

@media (max-width: 1024px) {
  .signin-page .auth-benefits-section,
  .resetpassword-page .auth-benefits-section {
    display: none;
  }
  .signin-page .auth-container,
  .resetpassword-page .auth-container {
    max-width: 500px;
  }
}

@media (max-width: 640px) {
  .signin-page.auth-page,
  .resetpassword-page.auth-page {
    padding: 70px 16px 24px;
  }
}

/* Signup page — 2-column layout (reuses signin-page layout) */
.signup-page.auth-page {
  min-height: 100vh;
  padding: 80px 24px 40px;
}

.signup-page .auth-container {
  max-width: 1100px;
  min-height: 600px;
  display: flex;
  background: var(--white);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.signup-page .auth-benefits-section {
  display: flex;
}

@media (max-width: 1024px) {
  .signup-page .auth-benefits-section {
    display: none;
  }
  .signup-page .auth-container {
    max-width: 500px;
  }
}

@media (max-width: 640px) {
  .signup-page.auth-page {
    padding: 70px 16px 24px;
  }
}

/* Hide CTA section on auth pages — CSS fallback if twig condition fails */
.auth-page ~ .cta-section,
.signin-page ~ .cta-section,
.signup-page ~ .cta-section {
  display: none !important;
}

/* 2FA Page - Centered Layout */
.auth-container-centered {
  max-width: 480px;
  margin: 0 auto;
}

.auth-container-centered .auth-form-section {
  border-radius: 24px;
}

/* Auth Icon Block */
.auth-icon-block {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.auth-icon-circle {
  width: 72px;
  height: 72px;
  background: linear-gradient(145deg, var(--primary) 0%, #0052cc 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.3);
}

/* Code Input */
.code-input {
  text-align: center;
  font-size: 24px !important;
  font-weight: 600;
  letter-spacing: 8px;
  padding-left: 14px !important;
}

.code-input::placeholder {
  font-size: 15px !important;
  letter-spacing: normal;
  font-weight: 400;
}

/* Help Text */
.auth-footer .help-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.auth-footer .help-text svg {
  color: var(--gray-400);
  flex-shrink: 0;
}

/* =========================================
   Services Page (Public)
   ========================================= */

.services-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Promo Card */
.services-page .promo-card {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.services-page .promo-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(145deg, var(--primary) 0%, #0052cc 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.services-page .promo-content h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 12px;
}

.services-page .promo-content p {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.7;
  margin: 0 0 12px;
}

.services-page .promo-content p:last-of-type {
  margin-bottom: 16px;
}

.services-page .promo-features {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.services-page .promo-feature {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
}

.services-page .promo-feature svg {
  color: var(--success);
  width: 18px;
  height: 18px;
}

/* Filters Section */
.services-page .filters-section {
  background: white;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.services-page .filters-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.services-page .category-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.services-page .search-sort-wrapper {
  display: flex;
  justify-content: flex-start;
}

.services-page .search-box {
  position: relative;
  width: 300px;
}

.services-page .search-box .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--gray-400);
}

.services-page .search-box input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  font-size: 14px;
  color: var(--gray-900);
  background: var(--gray-50);
  transition: all 0.2s ease;
}

.services-page .search-box input:focus {
  outline: none;
  border-color: var(--primary);
  background: white;
  box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
}

/* Category header - no pointer on services page (not collapsible) */
.services-page .category-header {
  cursor: default;
}

.services-page .category-header:hover {
  background: var(--gray-50); /* Keep same background, no hover effect */
}

/* Services Table */
.services-page .services-table-wrapper {
  background: transparent;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Loading State */
.services-page .loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 16px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.services-page .loading-state p {
  color: var(--gray-500);
  font-size: 14px;
  margin: 0;
}

/* Service Category */
.service-category {
  border-bottom: 1px solid var(--gray-100);
}

.service-category:last-child {
  border-bottom: none;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  background: var(--gray-50);
  cursor: pointer;
  transition: background 0.2s ease;
}

.category-header:hover {
  background: var(--gray-100);
}

.category-header .platform-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
  flex: 1;
}

.category-header .service-count {
  font-size: 13px;
  color: var(--gray-500);
  background: var(--gray-200);
  padding: 4px 10px;
  border-radius: 20px;
}

.category-header .toggle-icon {
  color: var(--gray-400);
  transition: transform 0.2s ease;
}

.service-category.expanded .toggle-icon {
  transform: rotate(180deg);
}

/* Services Table */
.services-table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
}

.services-table th {
  text-align: left;
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: white;
  border-bottom: 1px solid var(--gray-100);
}

.services-table td {
  padding: 16px 0px 20px 20px;
  font-size: 14px;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-50);
  vertical-align: middle;
}

.services-table tr:last-child td {
  border-bottom: none;
}

.services-table tr:hover td {
  background: var(--gray-50);
}

/* SERVICE column - min-width 350px */
.services-table td:nth-child(2),
.services-table th:nth-child(2) {
  min-width: 350px;
}

/* Service Name Cell */
.service-name-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.service-name {
  font-weight: 600;
  color: var(--gray-900);
}

.service-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.service-badge {
  display: inline-flex;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
}

.service-badge.badge-hot {
  background: #fee2e2;
  color: #dc2626;
}

.service-badge.badge-new {
  background: #d1fae5;
  color: #059669;
}

.service-badge.badge-slow {
  background: #fef3c7;
  color: #d97706;
}

.service-badge.badge-default {
  background: var(--gray-100);
  color: var(--gray-600);
}

/* Price Cell */
.price-cell {
  font-weight: 700;
  color: var(--success);
}

/* Actions Cell */
.actions-cell {
  display: flex;
  gap: 8px;
}

.action-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn.favorite-btn {
  background: var(--gray-100);
  color: var(--gray-500);
}

.action-btn.favorite-btn:hover,
.action-btn.favorite-btn.active {
  background: #fef3c7;
  color: #f59e0b;
}

.action-btn.order-btn {
  background: var(--primary);
  color: white;
}

.action-btn.order-btn:hover {
  background: #0052cc;
}

/* Responsive */
@media (max-width: 1024px) {
  .services-page .promo-card {
    flex-direction: column;
  }

  .services-page .search-box {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .services-page .promo-card {
    padding: 20px;
  }

  .services-page .promo-content h2 {
    font-size: 18px;
  }

  .services-page .filters-section {
    padding: 16px;
  }

  .services-table th,
  .services-table td {
    padding: 12px 16px;
  }
}

@media (max-width: 576px) {
  .services-page .promo-card {
    padding: 16px;
  }

  .services-page .promo-icon {
    width: 48px;
    height: 48px;
  }

  .services-page .promo-content h2 {
    font-size: 16px;
  }

  .services-page .promo-content p {
    font-size: 13px;
  }

  .services-page .filters-section {
    padding: 12px;
    gap: 12px;
  }

  .services-page .services-table-wrapper {
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .services-table {
    min-width: 800px;
  }

  .services-table th,
  .services-table td {
    padding: 10px 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  .services-table td:nth-child(2) {
    min-width: 350px;
    white-space: normal;
  }

  .category-header {
    padding: 12px 16px;
  }

  .category-header h3 {
    font-size: 14px;
  }

  .action-btn {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 375px) {
  .services-page .filters-section {
    padding: 10px;
  }

  .services-table {
    min-width: 800px;
  }

  .services-table th,
  .services-table td {
    padding: 8px 10px;
    font-size: 12px;
  }
}

/* ========================================
   Terms of Service Page
   ======================================== */

.terms-page {
  min-height: calc(100vh - 200px);
  padding: 150px 40px 20px 60px;
}

.terms-container {
  max-width: 900px;
  margin: 0 auto;
}

.terms-header {
  text-align: center;
  margin-bottom: 32px;
}

.terms-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 16px;
  color: #fff;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.terms-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 12px 0;
}

.terms-subtitle {
  color: var(--gray-600);
  font-size: 1.05rem;
  margin: 0;
}

.terms-card {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

.terms-content {
  padding: 40px;
  color: var(--gray-700);
  font-size: 0.95rem;
  line-height: 1.8;
}

.terms-content h1,
.terms-content h2,
.terms-content h3,
.terms-content h4,
.terms-content h5,
.terms-content h6 {
  color: var(--gray-900);
  margin-top: 32px;
  margin-bottom: 16px;
  font-weight: 600;
}

.terms-content h1:first-child,
.terms-content h2:first-child,
.terms-content h3:first-child {
  margin-top: 0;
}

.terms-content h2 {
  font-size: 1.35rem;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--gray-200);
}

.terms-content h3 {
  font-size: 1.15rem;
}

.terms-content p {
  margin-bottom: 16px;
}

.terms-content ul,
.terms-content ol {
  margin-bottom: 16px;
  padding-left: 24px;
}

.terms-content li {
  margin-bottom: 8px;
}

.terms-content a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.terms-content a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.terms-content strong {
  color: var(--gray-900);
  font-weight: 600;
}

.terms-content blockquote {
  margin: 20px 0;
  padding: 16px 24px;
  background: var(--gray-50);
  border-left: 4px solid var(--primary);
  border-radius: 0 8px 8px 0;
  color: var(--gray-700);
}

.terms-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.terms-content th,
.terms-content td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
}

.terms-content th {
  background: var(--gray-50);
  font-weight: 600;
  color: var(--gray-900);
}

.terms-content hr {
  border: none;
  height: 1px;
  background: var(--gray-200);
  margin: 32px 0;
}

.terms-footer {
  text-align: center;
  margin-top: 32px;
  padding: 20px;
  color: var(--gray-600);
  font-size: 0.9rem;
}

.terms-footer a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.terms-footer a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .terms-page {
    padding: 24px 16px 40px;
  }

  .terms-header h1 {
    font-size: 1.5rem;
  }

  .terms-subtitle {
    font-size: 0.95rem;
  }

  .terms-content {
    padding: 24px;
  }

  .terms-content h2 {
    font-size: 1.2rem;
  }
}

/* ========================================
   Auth Pages (Set New Password, etc.)
   ======================================== */

.auth-page {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
}

.auth-container {
  width: 100%;
  max-width: 480px;
}

.auth-card {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

.auth-card .card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 32px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  border-bottom: none;
}

.auth-card .card-header svg {
  flex-shrink: 0;
}

.auth-card .card-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
}

.auth-card .card-body {
  padding: 32px;
}

/* Auth alerts — the base .alert is a plain block, so the icon, the message and the
   dismiss button all flowed inline. Lay them out as a row and pin the button to the
   top-right corner. Applies to signin, signup, resetpassword and set-new-password. */
.auth-page .alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

.auth-page .alert > svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.auth-page .alert > span {
  flex: 1;
  min-width: 0;
}

.auth-page .alert-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: -2px -4px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.auth-page .alert-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}

.auth-page .alert-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Auth alert colours. The auth markup uses .alert-error / .alert-success, but only
   .alert-danger / .alert-success ever carried colours globally — so error/success alerts
   on signin, signup, reset and set-password rendered with no colour (plain grey text).
   Reuse the exact global palette. The icon (stroke="currentColor"), the message text and
   the close button (color:inherit) all inherit from the container, so colouring the
   container alone tints the whole alert. */
.auth-page .alert-error,
.auth-page .alert-danger {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1px solid #fecaca;
  color: #991b1b;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.12);
}

.auth-page .alert-success {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #a7f3d0;
  color: #065f46;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.12);
}

/* Optional-field badge. The panel decides which fields are mandatory
   (field.required); marking the few optional ones reads cleaner than
   starring the required ones and needs no legend to explain it. */
.optional-badge {
  display: inline-block;
  vertical-align: 1px;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--gray-50);
  color: var(--gray-400);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

.input-password-wrapper {
  position: relative;
}

.input-password-wrapper .form-input {
  padding-right: 48px;
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.password-toggle:hover {
  color: var(--gray-700);
}

.btn-full {
  width: 100%;
}

.auth-footer {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
  text-align: center;
}

.auth-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-600);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.auth-link:hover {
  color: var(--primary);
}

@media (max-width: 576px) {
  .auth-page {
    padding: 20px 16px;
  }

  .auth-card .card-header {
    padding: 20px 24px;
  }

  .auth-card .card-body {
    padding: 24px;
  }
}

/* ========================================
   New Page Styles
   ======================================== */

.newpage-page {
  min-height: calc(100vh - 200px);
  padding: 140px 20px 60px;
  background: var(--gray-50);
}

.newpage-container {
  max-width: 900px;
  margin: 0 auto;
}

.newpage-header {
  margin-bottom: 24px;
}

.newpage-header h1 {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.newpage-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.newpage-content {
  padding: 32px;
  line-height: 1.7;
  color: var(--gray-700);
}

.newpage-content h1,
.newpage-content h2,
.newpage-content h3,
.newpage-content h4,
.newpage-content h5,
.newpage-content h6 {
  color: var(--gray-900);
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  font-weight: 600;
}

.newpage-content h1:first-child,
.newpage-content h2:first-child,
.newpage-content h3:first-child {
  margin-top: 0;
}

.newpage-content p {
  margin-bottom: 1em;
}

.newpage-content ul,
.newpage-content ol {
  margin-bottom: 1em;
  padding-left: 1.5em;
}

.newpage-content li {
  margin-bottom: 0.5em;
}

.newpage-content a {
  color: var(--primary);
  text-decoration: none;
}

.newpage-content a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .newpage-page {
    padding: 120px 16px 40px;
  }

  .newpage-header h1 {
    font-size: 1.5rem;
  }

  .newpage-content {
    padding: 24px;
  }
}

/* =====================================================
   COMPREHENSIVE RESPONSIVE DESIGN SYSTEM
   Covers all modern device breakpoints (2024-2026)
   ===================================================== */

/* --- Extra Large Desktops & 4K (≥1920px) --- */
@media (min-width: 1920px) {
  .container {
    max-width: 1400px;
  }

  .hero h1 {
    font-size: 4rem;
  }

  .hero p {
    font-size: 1.375rem;
  }

  .steps-grid,
  .features-grid,
  .business-grid {
    gap: 40px;
  }

  .reviews-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .blog-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .dashboard-content {
    max-width: 1600px;
  }

  .services-hero h1 {
    font-size: 3.5rem;
  }
}

/* --- Large Desktops (1440px - 1919px) --- */
@media (min-width: 1440px) and (max-width: 1919px) {
  .container {
    max-width: 1280px;
  }

  .dashboard-content {
    max-width: 1400px;
  }
}

/* --- Standard Laptops (1366px - 1439px) --- */
@media (min-width: 1366px) and (max-width: 1439px) {
  .container {
    max-width: 1200px;
  }

  .reviews-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Small Laptops / Large Tablets Landscape (1200px - 1365px) --- */
@media (min-width: 1200px) and (max-width: 1365px) {
  .container {
    max-width: 1140px;
  }

  .hero h1 {
    font-size: 2.75rem;
  }
}

/* --- Tablets Landscape / Small Laptops (1024px - 1199px) --- */
@media (min-width: 1024px) and (max-width: 1199px) {
  .container {
    max-width: 960px;
    padding: 0 24px;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .dashboard-sidebar {
    width: 220px;
  }
}

/* --- Tablets Portrait (768px - 1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    max-width: 720px;
    padding: 0 20px;
  }

  .hero-stats {
    gap: 20px;
  }

  .stat {
    flex: 0 0 calc(50% - 10px);
  }

  .cta-section h2 {
    font-size: 1.75rem;
  }

  .page-card {
    padding: 24px;
  }

  .form-row {
    flex-direction: column;
    gap: 16px;
  }

  .form-row .form-group {
    flex: 1 1 100%;
  }
}

/* --- Large Phones Landscape / Small Tablets (576px - 767px) --- */
@media (min-width: 576px) and (max-width: 767px) {
  .container {
    padding: 0 16px;
  }

  .hero {
    padding: 100px 0 60px;
  }

  .hero h1 {
    font-size: 1.75rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .hero-stats {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .stat {
    flex: 0 0 100%;
    max-width: 280px;
  }

  .steps-grid,
  .features-grid,
  .business-grid,
  .reviews-grid,
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .page-card {
    padding: 20px;
    border-radius: 12px;
  }

  .dashboard-content {
    padding: 16px;
  }

  .section-header h2 {
    font-size: 1.5rem;
  }
}

/* --- Standard Phones (480px - 575px) --- */
@media (min-width: 480px) and (max-width: 575px) {
  html {
    font-size: 15px;
  }

  .container {
    padding: 0 16px;
  }

  .hero {
    padding: 90px 0 50px;
  }

  .hero h1 {
    font-size: 1.625rem;
    line-height: 1.3;
  }

  .hero p {
    font-size: 0.9375rem;
  }

  .btn {
    padding: 12px 20px;
    font-size: 0.875rem;
  }

  .btn-lg {
    padding: 14px 24px;
  }

  .page-card {
    padding: 16px;
    border-radius: 10px;
  }

  .form-group label {
    font-size: 0.8125rem;
  }

  .form-control {
    padding: 10px 12px;
    font-size: 0.9375rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cta-section {
    padding: 40px 16px;
  }

  .cta-section h2 {
    font-size: 1.5rem;
  }
}

/* --- Small Phones (375px - 479px) --- */
@media (min-width: 375px) and (max-width: 479px) {
  html {
    font-size: 14px;
  }

  .container {
    padding: 0 12px;
  }

  header .container {
    padding: 0 12px;
  }

  .logo {
    font-size: 1.25rem;
  }

  .hero {
    padding: 80px 0 40px;
  }

  .hero h1 {
    font-size: 1.5rem;
    line-height: 1.25;
  }

  .hero p {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .hero-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .stat-number {
    font-size: 1.5rem;
  }

  .section {
    padding: 40px 0;
  }

  .section-header h2 {
    font-size: 1.375rem;
  }

  .section-header p {
    font-size: 0.875rem;
  }

  .page-card {
    padding: 14px;
    border-radius: 8px;
  }

  .form-control {
    padding: 10px;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  select.form-control {
    font-size: 16px;
  }

  .btn {
    min-height: 44px; /* Touch target */
    padding: 10px 16px;
  }

  .modal-content {
    margin: 10px;
    max-height: calc(100vh - 20px);
  }

  .dashboard-content {
    padding: 12px;
  }

  .orders-table th,
  .orders-table td {
    padding: 10px 8px;
    font-size: 0.8125rem;
  }

  .services-hero {
    padding: 100px 0 40px;
  }

  .services-hero h1 {
    font-size: 1.5rem;
  }

  .login-modal {
    padding: 24px 16px;
  }

  .ticket-card {
    padding: 14px;
  }

  .notification-item {
    padding: 14px;
  }
}

/* --- Extra Small Phones (320px - 374px) --- */
@media (max-width: 374px) {
  html {
    font-size: 13px;
  }

  .container {
    padding: 0 10px;
  }

  header .container {
    padding: 0 10px;
  }

  .logo {
    font-size: 1.125rem;
  }

  .hero {
    padding: 70px 0 30px;
  }

  .hero h1 {
    font-size: 1.375rem;
    line-height: 1.2;
  }

  .hero p {
    font-size: 0.8125rem;
  }

  .btn {
    padding: 10px 14px;
    font-size: 0.8125rem;
    min-height: 44px;
  }

  .stat-number {
    font-size: 1.25rem;
  }

  .stat-label {
    font-size: 0.6875rem;
  }

  .section-header h2 {
    font-size: 1.25rem;
  }

  .page-card {
    padding: 12px;
    border-radius: 6px;
  }

  .form-group label {
    font-size: 0.75rem;
  }

  .form-control {
    padding: 8px 10px;
    font-size: 16px;
  }

  .dashboard-content {
    padding: 10px;
  }

  .card-header h3 {
    font-size: 1rem;
  }

  .footer-section h4 {
    font-size: 0.9375rem;
  }

  .footer-section a {
    font-size: 0.8125rem;
  }

  .cta-section h2 {
    font-size: 1.25rem;
  }

  .cta-section p {
    font-size: 0.8125rem;
  }

  .modal-content {
    margin: 8px;
    border-radius: 8px;
  }

  .modal-header h2 {
    font-size: 1.125rem;
  }

  .quick-faq {
    gap: 12px;
  }

  .faq-item summary {
    padding: 12px;
    font-size: 0.875rem;
  }

  .faq-answer {
    padding: 0 12px 12px;
    font-size: 0.8125rem;
  }

  .services-hero h1 {
    font-size: 1.375rem;
  }

  .services-hero p {
    font-size: 0.8125rem;
  }

  .login-modal {
    padding: 20px 12px;
  }

  .login-modal h2 {
    font-size: 1.25rem;
  }

  .oauth-btn {
    padding: 10px 12px;
    font-size: 0.8125rem;
  }
}

/* --- Landscape Orientation Fixes --- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    padding: 60px 0 30px;
    min-height: auto;
  }

  .hero h1 {
    font-size: 1.5rem;
  }

  .hero-stats {
    flex-wrap: nowrap;
    gap: 16px;
  }

  .modal-content {
    max-height: 90vh;
    overflow-y: auto;
  }

  .login-modal {
    padding: 16px;
  }

  .services-hero {
    padding: 70px 0 30px;
  }
}

/* --- High DPI / Retina Display Enhancements --- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .logo img,
  .feature-icon img,
  .step-icon img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* --- Print Styles --- */
@media print {
  header,
  footer,
  .dashboard-sidebar,
  .mobile-menu-btn,
  .btn,
  .modal {
    display: none !important;
  }

  .dashboard-content {
    margin: 0;
    padding: 0;
  }

  .page-card {
    box-shadow: none;
    border: 1px solid #ddd;
  }

  body {
    background: white;
    color: black;
  }

  a {
    color: black;
    text-decoration: underline;
  }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ========================================================================
   DARK THEME
   Activated via data-theme="dark" on <html>.
   Colors inspired by YouTrack dark UI — soft backgrounds, muted white text,
   accent blue stays close to the original --primary / --blue.
   ======================================================================== */

[data-theme="dark"] {
    /* Core palette — Darcula-inspired warm dark gray */
    --bg: #2B2B2B;
    --card: #3C3F41;
    --dark: #D4D4D4;
    --white: #313335;

    /* Text — brighter for better readability */
    --text: #C5CED9;
    --muted: #8C8C8C;
    --text-dark: #D4D4D4;
    --text-light: #AAAAAA;
    --text-muted: #7A7A7A;
    --text-secondary: #AAAAAA;

    /* Borders & lines — visible but subtle */
    --line: #515151;
    --border: #515151;

    /* Primary / accent — keep site blue, slightly warmer */
    --blue: #4A8EFF;
    --blue-700: #6BA1FF;
    --primary: #4A8EFF;
    --primary-hover: #6BA1FF;
    --primary-light: rgba(74, 142, 255, 0.15);
    --primary-dark: #3A7AE6;

    /* Semantic colors — Darcula-matched */
    --green: #499C54;
    --yellow: #BBB529;
    --red: #C75450;

    /* Gray scale inverted — brighter Darcula tones */
    --gray-50: #2B2B2B;
    --gray-100: #313335;
    --gray-200: #3C3F41;
    --gray-300: #515151;
    --gray-400: #6E6E6E;
    --gray-500: #8C8C8C;
    --gray-600: #AAAAAA;
    --gray-700: #BCC7D4;
    --gray-800: #D4D4D4;
    --gray-900: #E8E8E8;

    /* Shadows — softer for lighter dark bg */
    --shadow: 0 14px 30px rgba(0, 0, 0, .25);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, .35);
    --focus: 0 0 0 3px rgba(74, 142, 255, .25);

    /* Input backgrounds — Darcula field color */
    --input-bg: #45494A;
    --success: #499C54;
}

/* --- Dark Theme: Component Overrides ---
   Targets elements that use hardcoded colors instead of CSS vars.
   Organized by component group for maintainability.
   ------------------------------------------------------------ */

/* Sidebar — auth panel (Darcula toolbar tone) */
[data-theme="dark"] .auth .sidebar {
    background: #313335;
    border-right-color: var(--line);
}
[data-theme="dark"] .auth .sidebar:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .auth .sidebar:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}
[data-theme="dark"] .auth .sidebar:hover {
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* Brand logo in sidebar */
[data-theme="dark"] .auth .brand .logo {
    background: linear-gradient(135deg, rgba(74, 142, 255, .18), rgba(74, 142, 255, .35));
    border-color: rgba(74, 142, 255, .30);
}

/* User info block */
[data-theme="dark"] .auth .user-logout-btn:hover {
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
}

/* Stats card in sidebar (Darcula input field tone) */
[data-theme="dark"] .auth .stat {
    background: #45494A;
}

/* Navigation active/hover states */
[data-theme="dark"] .auth .nav a {
    color: var(--text);
}
[data-theme="dark"] .auth .nav a:hover {
    background: rgba(74, 142, 255, 0.10);
    border-color: rgba(74, 142, 255, 0.20);
}
[data-theme="dark"] .auth .nav a.active {
    background: rgba(33, 66, 131, 0.45);
    border-color: rgba(74, 142, 255, 0.30);
    color: #6BA1FF;
}

/* Button white text stays white on dark */
[data-theme="dark"] .auth .btn-blue,
[data-theme="dark"] .auth .btn-green {
    color: #fff;
}
[data-theme="dark"] .auth .btn .ico {
    background: rgba(255, 255, 255, 0.15);
}

/* Header inner (landing) — Darcula glass effect */
[data-theme="dark"] .header-inner {
    background: rgba(49, 51, 53, 0.95);
    border-bottom-color: var(--line);
}

/* Sidebar overlay */
[data-theme="dark"] .sidebar-overlay.active {
    background: rgba(0, 0, 0, 0.6);
}

/* --- Category badges (dark variants) --- */
/* Muted badge colors for dark theme — less eye strain */
[data-theme="dark"] .badge-orange {
    background: rgba(194, 65, 12, 0.12);
    color: #d4956c;
    border-color: rgba(194, 65, 12, 0.2);
}
[data-theme="dark"] .badge-purple {
    background: rgba(126, 34, 206, 0.12);
    color: #b39cd8;
    border-color: rgba(126, 34, 206, 0.2);
}
[data-theme="dark"] .badge-blue {
    background: rgba(29, 78, 216, 0.12);
    color: #8aabda;
    border-color: rgba(29, 78, 216, 0.2);
}
[data-theme="dark"] .badge-green {
    background: rgba(21, 128, 61, 0.12);
    color: #7cc29a;
    border-color: rgba(21, 128, 61, 0.2);
}
[data-theme="dark"] .badge-gold {
    background: rgba(161, 98, 7, 0.12);
    color: #d4b266;
    border-color: rgba(161, 98, 7, 0.2);
}
[data-theme="dark"] .badge-cyan {
    background: rgba(14, 116, 144, 0.12);
    color: #6dbfcf;
    border-color: rgba(14, 116, 144, 0.2);
}
[data-theme="dark"] .badge-gray {
    background: rgba(75, 85, 99, 0.12);
    color: #8c939e;
    border-color: rgba(75, 85, 99, 0.2);
}
[data-theme="dark"] .badge-pink {
    background: rgba(190, 24, 93, 0.12);
    color: #cf8aaa;
    border-color: rgba(190, 24, 93, 0.2);
}
[data-theme="dark"] .badge-indigo {
    background: rgba(67, 56, 202, 0.12);
    color: #9a95cc;
    border-color: rgba(67, 56, 202, 0.2);
}
[data-theme="dark"] .badge-red {
    background: rgba(220, 38, 38, 0.12);
    color: #d08a8a;
    border-color: rgba(220, 38, 38, 0.2);
}
[data-theme="dark"] .badge-emerald {
    background: rgba(5, 150, 105, 0.12);
    color: #72bf9f;
    border-color: rgba(5, 150, 105, 0.2);
}
[data-theme="dark"] .badge-amber {
    background: rgba(217, 119, 6, 0.12);
    color: #d4b266;
    border-color: rgba(217, 119, 6, 0.2);
}
[data-theme="dark"] .badge-violet {
    background: rgba(124, 58, 237, 0.12);
    color: #a598cc;
    border-color: rgba(124, 58, 237, 0.2);
}

/* --- Order status badges (dark variants) --- */
[data-theme="dark"] .status-completed {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}
[data-theme="dark"] .status-canceled,
[data-theme="dark"] .status-cancelled {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}
[data-theme="dark"] .status-pending {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}
[data-theme="dark"] .status-processing {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}
[data-theme="dark"] .status-in-progress {
    background: rgba(129, 140, 248, 0.15);
    color: #818cf8;
}
[data-theme="dark"] .status-partial {
    background: rgba(244, 114, 182, 0.15);
    color: #f472b6;
}
[data-theme="dark"] .status-active {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}
[data-theme="dark"] .status-rejected {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}
[data-theme="dark"] .status-error {
    background: rgba(248, 113, 113, 0.2);
    color: #fca5a5;
}
[data-theme="dark"] .status-refunded {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}
[data-theme="dark"] .status-answered {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}
[data-theme="dark"] .status-closed {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

/* --- Rate dots (Excellent/Good/Bad/Neutral) --- */
[data-theme="dark"] .rate-dot.excellent { background: #34d399; }
[data-theme="dark"] .rate-dot.good { background: #fbbf24; }
[data-theme="dark"] .rate-dot.bad { background: #f87171; }
[data-theme="dark"] .rate-dot.neutral { background: #6b7280; }

/* --- Tables --- */
[data-theme="dark"] .auth .orders-table thead {
    background: #45494A;
}
[data-theme="dark"] .auth .orders-table th {
    color: var(--text);
}
[data-theme="dark"] .services-table .service-name {
    color: var(--text);
}

/* --- Hardcoded #f8fafc / #fbfcff backgrounds → dark surface --- */
[data-theme="dark"] .order-summary,
[data-theme="dark"] .order-form-card,
[data-theme="dark"] .info-card,
[data-theme="dark"] .tab-content {
    background: var(--card);
}

/* Search Services title — white in dark theme */
[data-theme="dark"] .auth .form-card .search-title {
    color: #e8e8e8 !important;
}

/* --- Login modal --- */
[data-theme="dark"] .login-modal {
    background: var(--card);
    border-color: var(--line);
}

/* --- Micro-FAQ & authority line (landing) --- */
[data-theme="dark"] .authority-line {
    background: var(--card);
    border-color: var(--line);
}
[data-theme="dark"] .micro-faq-item {
    background: var(--card);
    border-color: var(--line);
}
[data-theme="dark"] .quick-faq .qcard {
    background: var(--card);
    border-color: var(--line);
}

/* --- Modals overlay & body --- */
[data-theme="dark"] .modal-overlay,
[data-theme="dark"] .login-modal-overlay {
    background: rgba(0, 0, 0, 0.65);
}
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-body {
    background: var(--card);
    border-color: var(--line);
}

/* --- Order new page: #f8fafc panels --- */
[data-theme="dark"] .panel,
[data-theme="dark"] .order-card {
    background: var(--card);
}

/* --- Form select dropdown arrow for dark mode --- */
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Landing page dark overrides --- */
[data-theme="dark"] .hero-section,
[data-theme="dark"] .side-area {
    background: var(--bg);
}
[data-theme="dark"] .side-item h4 {
    color: var(--text);
}

/* --- Warning / alert boxes --- */
[data-theme="dark"] .alert-warning,
[data-theme="dark"] .warning-banner {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.25);
    color: #fbbf24;
}
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-error {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.25);
    color: #fca5a5;
}
[data-theme="dark"] .alert-success {
    background: rgba(52, 211, 153, 0.1);
    border-color: rgba(52, 211, 153, 0.25);
    color: #6ee7b7;
}

/* Alert internals in dark mode.
   The light theme paints the heading dark green (#047857) and gives .alert-details
   a near-white backdrop (rgba(255,255,255,.7)). Neither was overridden here, so the
   "Your order received" box rendered dark-on-dark and was unreadable. Repaint the
   heading, the details panel and its rows for the dark surface. */
[data-theme="dark"] .alert-success h4,
[data-theme="dark"] .alert-success .alert-title {
    color: #6ee7b7;
}

[data-theme="dark"] .alert-danger h4,
[data-theme="dark"] .alert-danger .alert-title {
    color: #fca5a5;
}

[data-theme="dark"] .alert-details {
    /* Darker inset panel instead of the light theme's white wash */
    background: rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .alert-success .alert-details {
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(52, 211, 153, 0.22);
}

[data-theme="dark"] .alert-danger .alert-details {
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(248, 113, 113, 0.22);
}

[data-theme="dark"] .alert-details-row {
    /* Light theme uses a black dashed rule — invisible on a dark panel */
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .alert-details-label {
    opacity: 0.75;
}

/* Values carry the payload (order id, link, charge) — keep them high contrast */
[data-theme="dark"] .alert-success .alert-details-value {
    color: #ecfdf5;
}

[data-theme="dark"] .alert-danger .alert-details-value {
    color: #fef2f2;
}

[data-theme="dark"] .alert-details-value a,
[data-theme="dark"] .alert-content a {
    color: #93c5fd;
}

[data-theme="dark"] .alert-success .close {
    color: #6ee7b7;
    background: rgba(52, 211, 153, 0.18);
}

[data-theme="dark"] .alert-success .close:hover {
    background: rgba(52, 211, 153, 0.3);
}

[data-theme="dark"] .alert-danger .close {
    color: #fca5a5;
    background: rgba(248, 113, 113, 0.18);
}

[data-theme="dark"] .alert-danger .close:hover {
    background: rgba(248, 113, 113, 0.3);
}

/* --- Account / settings page cards --- */
[data-theme="dark"] .account-card,
[data-theme="dark"] .account-card .card-body {
    background: var(--card);
}

/* --- Blog sidebar blocks --- */
[data-theme="dark"] .sidebar-block,
[data-theme="dark"] .sidebar-sticky {
    background: var(--card);
}

/* --- Auth card (signin/signup) --- */
[data-theme="dark"] .auth-card,
[data-theme="dark"] .auth-card .card-body {
    background: var(--card);
}

/* --- Partnership page overrides --- */
[data-theme="dark"] .partner-card,
[data-theme="dark"] .partner-card-body {
    background: var(--card);
    border-color: var(--line);
}

/* --- FAQ page overrides --- */
[data-theme="dark"] .faq-item {
    background: var(--card);
    border-color: var(--line);
}

/* --- Scrollbar global dark --- */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* --- Services page: promo card, filters, table headers (hardcoded white) --- */
[data-theme="dark"] .services-page .promo-card,
[data-theme="dark"] .page-promo-banner {
    background: var(--card);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .services-page .filters-section {
    background: var(--card);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .services-page .search-box input:focus {
    background: var(--input-bg);
}
[data-theme="dark"] .services-page .services-table-wrapper {
    background: var(--card);
}
[data-theme="dark"] .services-table th {
    background: var(--gray-100);
    color: var(--gray-600);
    border-bottom-color: var(--line);
}
[data-theme="dark"] .services-table td {
    color: var(--text);
    border-bottom-color: var(--gray-200);
}
[data-theme="dark"] .services-table tbody tr:hover {
    background: var(--gray-200);
}

/* --- Services page: "Why Choose" section — fix inverted gray scale in dark mode --- */
[data-theme="dark"] .services-page .why-us {
    background: #252530;
}
[data-theme="dark"] .services-page .why-us .section-header h2 {
    color: var(--text);
}
[data-theme="dark"] .services-page .why-us .section-header p {
    color: var(--text-secondary);
}
[data-theme="dark"] .services-page .feature-card {
    background: var(--card);
    border-color: var(--line);
}
[data-theme="dark"] .services-page .feature-card h3 {
    color: var(--text);
}
[data-theme="dark"] .services-page .feature-card p {
    color: var(--text-secondary);
}
[data-theme="dark"] .services-page .feature-icon {
    background: rgba(74, 142, 255, 0.12);
    color: var(--primary);
}

/* --- Services page: FAQ section — polished accordion for dark mode --- */
[data-theme="dark"] .services-page .faq-container {
    background: var(--card);
    border-radius: 16px;
    padding: 8px 0;
    overflow: hidden;
}
[data-theme="dark"] .services-page .faq-item {
    border-color: var(--line);
}
[data-theme="dark"] .services-page .faq-item:first-child {
    border-top: none;
}
[data-theme="dark"] .services-page .faq-item:last-child {
    border-bottom: none;
}
[data-theme="dark"] .services-page .faq-question {
    color: var(--text);
    padding: 18px 24px;
}
[data-theme="dark"] .services-page .faq-question:hover {
    background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .services-page .faq-answer p {
    color: var(--text-secondary);
    padding: 0 24px 18px;
}
[data-theme="dark"] .services-page .faq-icon {
    color: var(--text-secondary);
}

/* --- Eeat callout (landing, hardcoded white) --- */
[data-theme="dark"] .eeat-callout {
    background: var(--card);
    border-color: var(--line);
}

/* --- Login form inputs (hardcoded #fff) --- */
[data-theme="dark"] .login-form .input {
    background: var(--input-bg);
    color: var(--text);
    border-color: var(--line);
}

/* --- Account page select options & toggle (hardcoded #ffffff) --- */
[data-theme="dark"] .account-page .form-select option {
    background: var(--card);
    color: var(--text);
}

/* --- CTA button on landing (hardcoded white bg) --- */
[data-theme="dark"] .btn-cta {
    background: var(--card);
    color: var(--primary);
}

/* --- Newpage card (hardcoded #fff) --- */
[data-theme="dark"] .newpage-card {
    background: var(--card);
}

/* --- Orders table hover (hardcoded #f8fafc) --- */
[data-theme="dark"] .orders-table tbody tr:hover {
    background: var(--gray-200);
}

/* --- Custom select hover/selected (hardcoded #f8fafc/#eff6ff) --- */
[data-theme="dark"] .custom-select-option:hover,
[data-theme="dark"] .auth .custom-select-option:hover {
    background: var(--gray-200);
}
[data-theme="dark"] .custom-select-option.selected,
[data-theme="dark"] .auth .custom-select-option.selected {
    background: rgba(33, 66, 131, 0.35);
}

/* --- Search dropdown input wrapper (hardcoded #f8fafc) --- */
[data-theme="dark"] .search-dropdown-input-wrapper {
    background: var(--gray-100);
    border-bottom-color: var(--line);
}
[data-theme="dark"] .search-dropdown-input {
    background: var(--input-bg);
    color: var(--text);
    border-color: var(--line);
}

/* --- Tab buttons hover (hardcoded #f8fafc) --- */
/* Tab buttons — fix hardcoded #334155 text color */
[data-theme="dark"] .auth .tab-btn {
    color: var(--text);
    background: var(--gray-200);
    border-color: var(--line);
}
[data-theme="dark"] .auth .tab-btn:hover {
    background: var(--gray-300);
    border-color: rgba(74, 142, 255, 0.3);
    color: var(--gray-900);
}
[data-theme="dark"] .auth .tab-btn.active {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}
/* Service names in tables — fix hardcoded #0f172a */
[data-theme="dark"] .service-name-main {
    color: #E0E0E0;
}
[data-theme="dark"] .auth .service-name-main {
    color: #E0E0E0;
}
/* Specifications Guide — transparent bg so it inherits parent .card bg */
[data-theme="dark"] .auth .specifications-guide {
    background: transparent;
}
[data-theme="dark"] .auth .spec-header {
    background: transparent;
    border-bottom-color: var(--line);
}
[data-theme="dark"] .auth .spec-header h3 {
    color: var(--text);
}
[data-theme="dark"] .auth .toggle-specs:hover {
    color: var(--text);
}
/* Spec cards slightly darker than parent to create visual separation */
[data-theme="dark"] .auth .spec-category {
    background: var(--gray-100);
    border-color: var(--line);
}
[data-theme="dark"] .auth .spec-category h4 {
    color: var(--text);
    border-bottom-color: var(--line);
}
[data-theme="dark"] .auth .spec-label {
    background: rgba(74, 142, 255, 0.12);
    color: #6BA1FF;
}
/* Partnership — "How to Get Started" block, fix hardcoded #f5f3ff */
[data-theme="dark"] .partner-steps {
    background: rgba(124, 58, 237, 0.10);
}
[data-theme="dark"] .partner-steps-title {
    color: var(--gray-900);
}
[data-theme="dark"] .partner-step {
    color: var(--text);
}
/* Tickets — softer link color to reduce eye strain */
[data-theme="dark"] .ticket-subject {
    color: #7DB4FF;
}
[data-theme="dark"] .ticket-subject:hover {
    color: #9DC5FF;
    opacity: 1;
}
/* Updates table — brighter service names and text */
[data-theme="dark"] .updates-table .service-cell {
    color: #E0E0E0;
    font-weight: 500;
}
[data-theme="dark"] .updates-table .date-cell {
    color: var(--text);
}
[data-theme="dark"] .updates-table .update-cell {
    color: var(--text);
}
[data-theme="dark"] .updates-table thead {
    background: var(--gray-100);
}
[data-theme="dark"] .updates-table tbody tr:hover {
    background: var(--gray-200);
}
/* Filter buttons — fix active text using --white (#313335) which is dark in dark mode */
[data-theme="dark"] .filter-btn.active {
    color: #fff;
}
[data-theme="dark"] .filter-pill.active {
    color: #fff;
}
/* Data table header — ensure dark bg */
[data-theme="dark"] .data-table thead {
    background: var(--gray-100);
}
/* Ticket create/list cards — match dark containers */
[data-theme="dark"] .ticket-create-card,
[data-theme="dark"] .ticket-list-card {
    background: var(--card);
    border-color: var(--line);
}
[data-theme="dark"] .ticket-table th {
    color: var(--gray-600);
}
/* Form labels globally — fix hardcoded #0f172a */
[data-theme="dark"] .auth label,
[data-theme="dark"] .auth .label,
[data-theme="dark"] .auth .form-label {
    color: var(--gray-900);
}
/* Mass order textarea */
[data-theme="dark"] .auth textarea {
    background: var(--input-bg);
    color: var(--text);
    border-color: var(--line);
}
/* Description panel on new order page */
[data-theme="dark"] .auth .description-panel,
[data-theme="dark"] .auth .order-description {
    background: var(--gray-100);
    border-color: var(--line);
    color: var(--text);
}
/* Price blocks */
[data-theme="dark"] .auth .price-block {
    background: var(--gray-100);
    border-color: var(--line);
}
[data-theme="dark"] .auth .price-block .price-label {
    color: var(--gray-600);
}
[data-theme="dark"] .auth .price-block .price-value {
    color: var(--primary);
}
/* Payment card - input fields */
[data-theme="dark"] .payment-card input,
[data-theme="dark"] .payment-card select {
    background: var(--input-bg);
    color: var(--text);
    border-color: var(--line);
}
/* Page card containers */
[data-theme="dark"] .page-card {
    background: var(--card);
    border-color: var(--line);
}
/* Description block on new order page — fix hardcoded #0f172a */
[data-theme="dark"] .auth .desc {
    color: var(--text);
}
[data-theme="dark"] .auth .desc b {
    color: var(--gray-900);
}
[data-theme="dark"] .auth .desc-title {
    color: var(--gray-900);
}
/* Mass order textarea — fix hardcoded #0f172a text color */
[data-theme="dark"] .auth .mass-textarea {
    color: var(--text);
    background: var(--input-bg);
}
[data-theme="dark"] .auth .mass-textarea::placeholder {
    color: var(--gray-500);
}
/* Custom select trigger — fix hardcoded #0f172a text */
[data-theme="dark"] .custom-select-trigger,
[data-theme="dark"] .auth .custom-select-trigger {
    color: var(--text) !important;
}
[data-theme="dark"] .custom-select-trigger .placeholder,
[data-theme="dark"] .auth .custom-select-trigger .placeholder {
    color: var(--gray-500) !important;
}
/* Fix hardcoded #0f172a on .option-text and category text inside triggers */
[data-theme="dark"] .custom-select-trigger .option-text,
[data-theme="dark"] .custom-select-trigger .category-name-text,
[data-theme="dark"] .auth .custom-select-trigger .option-text,
[data-theme="dark"] .auth .custom-select-trigger .category-name-text {
    color: var(--text) !important;
}
/* Custom select dropdown — force dark bg and light text */
[data-theme="dark"] .custom-select-dropdown,
[data-theme="dark"] .auth .custom-select-dropdown {
    background: var(--card) !important;
    border-color: var(--line) !important;
}
[data-theme="dark"] .custom-select-option,
[data-theme="dark"] .auth .custom-select-option {
    border-bottom-color: var(--line);
    color: var(--text) !important;
    background: transparent !important;
}
[data-theme="dark"] .custom-select-option:hover,
[data-theme="dark"] .auth .custom-select-option:hover {
    background: var(--gray-200) !important;
}
/* Dark theme: service filter input */
[data-theme="dark"] .service-filter-wrapper {
    background: var(--card);
    border-bottom-color: var(--line);
}
[data-theme="dark"] .service-filter-input {
    background: var(--gray-100, #1e293b);
    border-color: var(--line);
    color: var(--text);
}
[data-theme="dark"] .custom-select-option.selected,
[data-theme="dark"] .auth .custom-select-option.selected {
    background: rgba(33, 66, 131, 0.35) !important;
}
/* Platform/service type option names — light text in dark theme */
[data-theme="dark"] .custom-select-option .option-name,
[data-theme="dark"] .custom-select-option .option-text,
[data-theme="dark"] .custom-select-option .platform-name,
[data-theme="dark"] .custom-select-option .service-name-main,
[data-theme="dark"] .auth .custom-select-option .option-name,
[data-theme="dark"] .auth .custom-select-option .option-text,
[data-theme="dark"] .auth .custom-select-option .platform-name,
[data-theme="dark"] .auth .custom-select-option .service-name-main {
    color: var(--text) !important;
}

/* --- Disabled form fields (hardcoded #f1f5f9) --- */
[data-theme="dark"] .auth .input:disabled,
[data-theme="dark"] .auth .select:disabled,
[data-theme="dark"] .auth .textarea:disabled {
    background: var(--gray-200);
    color: var(--gray-500);
}

/* --- Active search input should match normal field bg (not darker) --- */
[data-theme="dark"] .auth .search-input {
    background: var(--card) !important;
    color: var(--text);
}
[data-theme="dark"] .auth .search-input::placeholder {
    color: var(--gray-500);
}

/* --- Disabled custom-select: darker than active fields --- */
[data-theme="dark"] .custom-select-trigger.disabled,
[data-theme="dark"] .form-input.disabled,
[data-theme="dark"] .input.disabled {
    background: var(--gray-100) !important;
    color: var(--gray-500);
    cursor: not-allowed;
}

/* --- Readonly form fields (Total Cost, Charge) — muted bg --- */
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .auth .form-control[readonly] {
    background: var(--gray-100) !important;
    color: var(--gray-500);
}

/* Order details modal is an exception: its fields are readonly only so the list
   stays scrollable and copyable — it is content to read, not a muted input. */
[data-theme="dark"] .order-details-modal .modal-body .form-control[readonly] {
    background: var(--gray-50) !important;
    color: var(--text);
}

/* --- Service ID badge (hardcoded #e0e7ff) --- */
[data-theme="dark"] .auth .service-id-badge {
    background: rgba(74, 142, 255, 0.15);
    color: var(--primary);
}

/* --- Spec note / mass order info (hardcoded #fff3cd yellow) --- */
[data-theme="dark"] .auth .spec-note,
[data-theme="dark"] .auth .mass-order-info {
    background: rgba(187, 181, 41, 0.12);
    border-color: rgba(187, 181, 41, 0.30);
    color: #BBB529;
}
[data-theme="dark"] .auth .spec-note strong {
    color: #D4CF3F;
}

/* --- Category header (services, uses var(--white) but overrides needed for bg) --- */
[data-theme="dark"] .category-header {
    background: var(--gray-100);
}
[data-theme="dark"] .service-category-block {
    background: var(--card);
    border-color: var(--line);
}

/* --- Generic form inputs/selects/textareas with hardcoded bg --- */
[data-theme="dark"] .auth .input,
[data-theme="dark"] .auth .select,
[data-theme="dark"] .auth .textarea,
[data-theme="dark"] .auth .form-control {
    background: var(--input-bg);
    color: var(--text);
    border-color: var(--line);
}

/* --- Theme toggle button styling --- */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    cursor: pointer;
    color: var(--muted);
    transition: all 0.2s;
    padding: 0;
}
.theme-toggle:hover {
    border-color: var(--gray-300);
    color: var(--text);
    background: var(--bg);
}
.theme-toggle svg {
    width: 16px;
    height: 16px;
}
/* Hide/show sun & moon icons based on theme */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* --- Touch Device Optimizations --- */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .oauth-btn,
  .tab-btn,
  .filter-btn,
  .pagination-btn,
  a {
    min-height: 44px;
    min-width: 44px;
  }

  .form-control,
  select.form-control,
  textarea.form-control {
    min-height: 44px;
    font-size: 16px; /* Prevent zoom on iOS */
  }

  .orders-table td,
  .services-table td {
    padding: 12px 8px;
  }

  .notification-item,
  .ticket-card,
  .order-card {
    cursor: pointer;
  }

  /* Remove hover states on touch devices */
  .btn:hover,
  .card:hover,
  .order-card:hover {
    transform: none;
  }
}

/* --- Foldable Device Support (Galaxy Fold, etc.) --- */
@media (max-width: 280px) {
  html {
    font-size: 12px;
  }

  .container {
    padding: 0 8px;
  }

  .hero h1 {
    font-size: 1.25rem;
  }

  .btn {
    padding: 8px 12px;
    font-size: 0.75rem;
  }

  .page-card {
    padding: 10px;
  }
}

/* --- Ultra-wide Monitors (≥2560px) --- */
@media (min-width: 2560px) {
  .container {
    max-width: 1600px;
  }

  .dashboard-content {
    max-width: 1800px;
  }

  .hero h1 {
    font-size: 4.5rem;
  }

  .hero p {
    font-size: 1.5rem;
  }

  .section {
    padding: 100px 0;
  }

  .steps-grid,
  .features-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
  }

  .reviews-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.custom-select-trigger.disabled,
.form-input.disabled,
.input.disabled {
  background: ghostwhite;
  cursor: not-allowed;
}

/* Number spinners on a locked field (Amount Wanted while it mirrors the list line
   count) still let the value be changed by clicking the arrows — hide them so the
   field reads as, and behaves as, read-only. */
.input.disabled[type="number"],
input[type="number"][readonly] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.input.disabled[type="number"]::-webkit-outer-spin-button,
.input.disabled[type="number"]::-webkit-inner-spin-button,
input[type="number"][readonly]::-webkit-outer-spin-button,
input[type="number"][readonly]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* Subscription & drip-feed select styled as .input */
select.input {
  appearance: auto;
  padding: 8px 12px;
  height: auto;
}

/* Hide system commission fields (Extra fee, Total) on addfunds page */
.commission-fields,
#order_extra_fee,
#order_total {
  display: none !important;
}

/* ============================================
   Fixed Bottom Buttons — Right Column Stack
   Order (bottom→top): Tidio Chat → Scroll Top → Beamer
   Tidio ~52px from bottom (uncontrolled, shadow DOM)
   Each button gets 20px gap from the one below
   ============================================ */

/* Scroll to top — above Tidio (Tidio top edge ~110px from bottom + 20px gap) */
.scroll-to-top {
  position: fixed;
  bottom: 130px;
  right: 32px;
  width: 44px;
  height: 44px;
  background: var(--primary, #3b82f6);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 999999998;
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background: var(--primary-dark, #2563eb);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45);
  transform: translateY(-2px);
}

.scroll-to-top:active {
  transform: translateY(0);
}

/* Beamer — above Scroll to top (130 + 44 + 20 gap = 194) */
#beamerSelector.beamer_beamerSelector {
  bottom: 194px !important;
  right: 24px !important;
}

/* Telegram — left side, vertically centered to Tidio */
.integration-fixed.integration-fixed__bottom-left {
  bottom: 0;
  left: 0;
  padding: 20px;
}

/* Telegram — right side, raised above Tidio chat widget */
.integration-fixed.integration-fixed__bottom-right {
  bottom: 90px !important;
  right: 10px !important;
}

/* --- Tablet: moderate adjustments --- */
@media (max-width: 1024px) {
  .scroll-to-top {
    bottom: 120px;
    right: 20px;
  }

  #beamerSelector.beamer_beamerSelector {
    bottom: 180px !important;
    right: 16px !important;
  }
}

/* --- Mobile: compact stack with smaller buttons --- */
@media (max-width: 768px) {
  .scroll-to-top {
    bottom: 110px;
    right: 14px;
    width: 38px;
    height: 38px;
  }

  #beamerSelector.beamer_beamerSelector {
    bottom: 165px !important;
    right: 10px !important;
    transform: scale(0.85);
    transform-origin: bottom right;
  }

  .integration-fixed.integration-fixed__bottom-left {
    padding: 10px;
  }

  /* Shrink Tidio button on mobile for less clutter */
  #tidio-chat {
    transform: scale(0.85);
    transform-origin: bottom right;
  }
}

/* --- Small mobile: even more compact --- */
@media (max-width: 480px) {
  .scroll-to-top {
    bottom: 95px;
    right: 10px;
    width: 34px;
    height: 34px;
  }

  #beamerSelector.beamer_beamerSelector {
    bottom: 145px !important;
    right: 8px !important;
    transform: scale(0.75);
    transform-origin: bottom right;
  }

  .integration-fixed.integration-fixed__bottom-left {
    padding: 8px;
  }

  #tidio-chat {
    transform: scale(0.8);
    transform-origin: bottom right;
  }
}

/* ============================================
   Universal Page Promo Banner
   Reusable promo/hero card for all auth pages
   ============================================ */
.page-promo-banner {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.page-promo-banner .promo-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(145deg, var(--primary) 0%, #0052cc 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.page-promo-banner .promo-content h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 12px;
}

.page-promo-banner .promo-content p {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.7;
  margin: 0 0 12px;
}

.page-promo-banner .promo-content p:last-of-type {
  margin-bottom: 16px;
}

.page-promo-banner .promo-features {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.page-promo-banner .promo-feature {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
}

.page-promo-banner .promo-feature svg {
  color: var(--success);
  width: 18px;
  height: 18px;
}

/* Responsive for promo banner */
@media (max-width: 1024px) {
  .page-promo-banner {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .page-promo-banner {
    padding: 20px;
  }

  .page-promo-banner .promo-content h2 {
    font-size: 18px;
  }
}

@media (max-width: 576px) {
  .page-promo-banner {
    padding: 16px;
  }

  .page-promo-banner .promo-icon {
    width: 48px;
    height: 48px;
  }

  .page-promo-banner .promo-content h2 {
    font-size: 16px;
  }

  .page-promo-banner .promo-content p {
    font-size: 13px;
  }
}

/* ============================================
   FAQ Page Styles
   ============================================ */

/* Layout */
.auth .faq-page { padding: 0; }
.not_auth .faq-page {
  min-height: calc(100vh - 200px);
  padding: 150px 40px 40px 60px;
}
.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

/* Header - centered with icon */
.faq-page-header {
  text-align: center;
  margin-bottom: 36px;
}
.faq-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  border-radius: 16px;
  color: #fff;
  margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
}
.faq-page-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 10px 0;
}
.faq-subtitle {
  color: var(--gray-600);
  font-size: 1.05rem;
  margin: 0;
}

/* Category section */
.faq-category {
  margin-bottom: 28px;
}
.faq-category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.faq-category-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}
.faq-category-header h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}

/* FAQ Card */
.faq-card {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

/* Accordion Items */
.faq-acc-item {
  border-bottom: 1px solid var(--gray-100);
}
.faq-acc-item:last-child {
  border-bottom: none;
}

/* Accordion Question Button */
.faq-acc-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s;
}
.faq-acc-question:hover {
  background: var(--gray-50);
}
.faq-acc-item.open .faq-acc-question {
  background: var(--gray-50);
}

/* Question text */
.faq-acc-q-text {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-800);
  line-height: 1.4;
}
.faq-acc-item.open .faq-acc-q-text {
  color: var(--primary-hover);
}

/* Chevron icon */
.faq-acc-chevron {
  display: flex;
  align-items: center;
  color: var(--gray-400);
  transition: transform 0.3s ease, color 0.2s;
  flex-shrink: 0;
}
.faq-acc-item.open .faq-acc-chevron {
  transform: rotate(180deg);
  color: var(--primary);
}

/* Accordion Answer - smooth reveal via CSS grid */
.faq-acc-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.faq-acc-item.open .faq-acc-answer {
  grid-template-rows: 1fr;
}
.faq-acc-answer-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 24px 0 24px;
  color: var(--gray-600);
  font-size: 0.92rem;
  line-height: 1.75;
}
.faq-acc-item.open .faq-acc-answer-inner {
  padding-bottom: 22px;
}
.faq-acc-answer-inner p {
  margin: 0 0 12px;
}
.faq-acc-answer-inner p:last-child {
  margin-bottom: 0;
}
.faq-acc-answer-inner ul,
.faq-acc-answer-inner ol {
  margin: 0 0 12px;
  padding-left: 20px;
}
.faq-acc-answer-inner li {
  margin-bottom: 6px;
}
.faq-acc-answer-inner a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.faq-acc-answer-inner a:hover {
  text-decoration: underline;
}
.faq-acc-answer-inner strong {
  color: var(--gray-800);
  font-weight: 600;
}
.faq-acc-answer-inner code {
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.88em;
  color: var(--primary-hover);
}

/* Code blocks inside FAQ answers */
.faq-code {
  background: #1e293b;
  color: #e2e8f0;
  padding: 14px 18px;
  border-radius: 10px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 10px 0 14px;
  overflow-x: auto;
  white-space: pre;
}

/* Info note block */
.faq-note {
  display: flex;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 14px 16px;
  background: #fef3c7;
  border-radius: 10px;
  border-left: 3px solid #f59e0b;
}
.faq-note svg {
  flex-shrink: 0;
  color: #d97706;
  margin-top: 2px;
}
.faq-note p {
  margin: 0 !important;
  font-size: 0.88rem;
  color: #92400e;
  line-height: 1.6;
}

/* Order status badges */
.faq-status-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-status-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.faq-status-item p {
  margin: 0 !important;
  flex: 1;
}
.faq-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  min-width: 90px;
  justify-content: center;
  margin-top: 2px;
}
.faq-status-badge.processing {
  background: #dbeafe;
  color: #1e40af;
}
.faq-status-badge.in-progress {
  background: #e0e7ff;
  color: #3730a3;
}
.faq-status-badge.refund {
  background: #fce7f3;
  color: #9d174d;
}
.faq-status-badge.completed {
  background: #d1fae5;
  color: #065f46;
}
.faq-status-badge.canceled {
  background: #fee2e2;
  color: #991b1b;
}
.faq-status-badge.partial {
  background: #fef3c7;
  color: #92400e;
}

/* Footer */
.faq-page-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  padding: 20px;
  color: var(--gray-600);
  font-size: 0.9rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
}
.faq-footer-icon {
  display: flex;
  align-items: center;
  color: var(--gray-400);
}
.faq-page-footer p { margin: 0; }
.faq-page-footer a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.faq-page-footer a:hover {
  text-decoration: underline;
}

/* Empty State */
.faq-page-empty {
  padding: 60px 20px;
  text-align: center;
}
.faq-page-empty svg {
  color: var(--gray-300);
  margin-bottom: 16px;
}
.faq-page-empty p {
  color: var(--gray-500);
  font-size: 1rem;
  margin: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .not_auth .faq-page {
    padding: 24px 16px 40px;
  }
  .faq-page-header h1 {
    font-size: 1.5rem;
  }
  .faq-subtitle {
    font-size: 0.95rem;
  }
  .faq-category {
    margin-bottom: 20px;
  }
  .faq-acc-question {
    padding: 16px;
    gap: 10px;
  }
  .faq-acc-q-text {
    font-size: 0.9rem;
  }
  .faq-acc-answer-inner {
    padding: 0 16px 0 16px;
    font-size: 0.88rem;
  }
  .faq-acc-item.open .faq-acc-answer-inner {
    padding-bottom: 18px;
  }
  .faq-code {
    font-size: 0.78rem;
    padding: 12px 14px;
  }
  .faq-status-item {
    flex-direction: column;
    gap: 4px;
  }
  .faq-page-footer {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}


/* ================================================================
   PARTNERSHIP PAGE
   Landing page for Affiliate & Reseller partnership programs
   ================================================================ */

/* Page wrapper */
.partner-page {
  font-family: inherit;
  color: var(--gray-800);
  line-height: 1.6;
}
.partner-page * { box-sizing: border-box; }
.partner-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Hero Section ---------- */
.partner-hero {
  text-align: center;
  padding: 60px 24px 50px;
  background: linear-gradient(135deg, #eff6ff 0%, #f0f4ff 50%, #faf5ff 100%);
  border-radius: 0 0 32px 32px;
}
.partner-badge {
  display: inline-block;
  padding: 6px 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.partner-hero-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--gray-900);
  margin: 0 0 16px 0;
  line-height: 1.15;
}
/* Gradient text accent for brand name */
.partner-accent {
  background: linear-gradient(135deg, var(--primary), #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.partner-hero-desc {
  font-size: 1.1rem;
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto 28px;
}
.partner-hero-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.partner-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  font-family: inherit;
}
.partner-btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
}
.partner-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
  color: #fff;
  text-decoration: none;
}
.partner-btn-outline {
  background: var(--white);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}
.partner-btn-outline:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
  color: var(--gray-700);
  text-decoration: none;
}
.partner-btn-purple {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
}
.partner-btn-purple:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
  color: #fff;
  text-decoration: none;
}
.partner-btn-ghost {
  background: transparent;
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.3);
}
.partner-btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  text-decoration: none;
}
.partner-btn-full { width: 100%; justify-content: center; }
.partner-btn-lg { padding: 14px 32px; font-size: 1.05rem; }

/* ---------- Programs Section ---------- */
.partner-programs { padding: 50px 0; }
.partner-programs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Program Card */
.partner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 20px;
  padding: 32px;
  border: 1px solid var(--gray-200);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s, transform 0.3s;
}
.partner-card:hover {
  box-shadow: 0 12px 28px -4px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}
/* Card number badge (top-right corner) */
.partner-card-num {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gray-400);
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
}
/* Icon container with gradient background */
.partner-card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-bottom: 18px;
}
.partner-card-icon-blue {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
}
.partner-card-icon-purple {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
}
.partner-card h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 6px 0;
}
.partner-card-tagline {
  font-size: 0.9rem;
  color: var(--gray-500);
  margin: 0 0 20px 0;
  font-weight: 500;
}
/* Card body stretches to fill card, pushes button to bottom */
.partner-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.partner-card-body > p {
  font-size: 0.92rem;
  color: var(--gray-600);
  margin: 0 0 20px 0;
  line-height: 1.6;
}
/* Pin CTA button to the bottom of the card */
.partner-card-body > .partner-btn-full {
  margin-top: auto;
}

/* ---------- Feature list inside cards ---------- */
.partner-feature-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.partner-feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.partner-feature-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--primary-light);
  color: var(--primary);
}
/* Purple variant for reseller card features */
.partner-fi-purple {
  background: #f5f3ff;
  color: #7c3aed;
}
.partner-feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.partner-feature-text strong {
  font-size: 0.9rem;
  color: var(--gray-800);
}
.partner-feature-text span {
  font-size: 0.82rem;
  color: var(--gray-500);
}

/* ---------- Quote block (affiliate card) ---------- */
.partner-quote {
  position: relative;
  background: var(--primary-light);
  border-radius: 12px;
  padding: 16px 16px 16px 20px;
  margin-bottom: 20px;
  border-left: 3px solid var(--primary);
}
.partner-quote-icon {
  position: absolute;
  top: 12px;
  right: 14px;
  color: var(--primary);
}
.partner-quote p {
  font-size: 0.88rem;
  color: var(--gray-700);
  margin: 0;
  font-style: italic;
  line-height: 1.6;
}

/* ---------- Steps block (reseller card) ---------- */
.partner-steps {
  background: #f5f3ff;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
}
.partner-steps-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 12px;
}
.partner-step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.88rem;
  color: var(--gray-600);
}
.partner-step:last-child { margin-bottom: 0; }
.partner-step-num {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #7c3aed;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

/* ---------- Why FiveBBC Section ---------- */
.partner-why {
  padding: 50px 0;
  background: var(--gray-50);
  border-radius: 24px;
}
.partner-section-title {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 8px 0;
}
.partner-section-desc {
  text-align: center;
  font-size: 1rem;
  color: var(--gray-500);
  margin: 0 0 32px 0;
}
.partner-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.partner-why-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-700);
  transition: all 0.2s;
}
.partner-why-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: var(--primary);
}
.partner-why-item svg {
  color: var(--primary);
  min-width: 22px;
}

/* ---------- Fair Play / Anti-abuse Policy ---------- */
.partner-fairplay { padding: 50px 0 0; }
.partner-fairplay-card {
  max-width: 960px;
  margin: 0 auto;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(239, 68, 68, 0.05));
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 20px;
  padding: 28px 32px;
}
.partner-fairplay-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}
.partner-fairplay-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.partner-fairplay-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 4px;
}
.partner-fairplay-sub {
  font-size: 0.95rem;
  color: var(--gray-500);
  margin: 0;
}
.partner-fairplay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.partner-fairplay-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 16px;
}
.partner-fairplay-item svg {
  color: #d97706;
  min-width: 20px;
  margin-top: 2px;
}
.partner-fairplay-item strong {
  display: block;
  font-size: 0.9rem;
  color: var(--gray-900);
  margin-bottom: 4px;
}
.partner-fairplay-item span {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--gray-500);
}
@media (max-width: 900px) {
  .partner-fairplay-grid { grid-template-columns: 1fr; }
  .partner-fairplay-card { padding: 22px 18px; }
}
/* Dark theme adjustments — brighter amber, dark card surfaces */
[data-theme="dark"] .partner-fairplay-card {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(239, 68, 68, 0.06));
  border-color: rgba(251, 191, 36, 0.3);
}
[data-theme="dark"] .partner-fairplay-icon {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}
[data-theme="dark"] .partner-fairplay-title { color: var(--text); }
[data-theme="dark"] .partner-fairplay-sub { color: var(--muted); }
[data-theme="dark"] .partner-fairplay-item {
  background: var(--card);
  border-color: var(--line);
}
[data-theme="dark"] .partner-fairplay-item strong { color: var(--text); }
[data-theme="dark"] .partner-fairplay-item span { color: var(--muted); }
[data-theme="dark"] .partner-fairplay-item svg { color: #fbbf24; }

/* ---------- FAQ Section ---------- */
.partner-faq-section { padding: 50px 0; }
.partner-faq-list {
  max-width: 800px;
  margin: 24px auto 0;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}
.partner-faq-item {
  border-bottom: 1px solid var(--gray-100);
}
.partner-faq-item:last-child { border-bottom: none; }
/* Question button */
.partner-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gray-800);
  transition: background 0.15s;
}
.partner-faq-q:hover { background: var(--gray-50); }
.partner-faq-item.open .partner-faq-q {
  background: var(--gray-50);
  color: var(--primary-hover);
}
/* Chevron rotation on open */
.partner-faq-chevron {
  transition: transform 0.2s;
  color: var(--gray-400);
  min-width: 18px;
}
.partner-faq-item.open .partner-faq-chevron {
  transform: rotate(180deg);
  color: var(--primary);
}
/* Collapsible answer area */
.partner-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.partner-faq-item.open .partner-faq-a { max-height: 300px; }
.partner-faq-a-inner {
  padding: 0 22px 16px;
  font-size: 0.88rem;
  color: var(--gray-600);
  line-height: 1.7;
}
.partner-faq-a-inner p { margin: 0; }
.partner-faq-a-inner a {
  color: var(--primary);
  text-decoration: none;
}
.partner-faq-a-inner a:hover { text-decoration: underline; }

/* ---------- CTA Section ---------- */
.partner-cta {
  text-align: center;
  padding: 50px 24px;
  background: linear-gradient(135deg, var(--gray-900), #1e293b);
  /* border-radius: 24px; */
  margin: 0 0 40px 0;
}
.partner-cta h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px 0;
}
.partner-cta p {
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  max-width: 500px;
  margin: 0 auto 24px;
}
.partner-cta-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Offset for fixed header on non-auth (public) pages */
body.not_auth .partner-page {
  padding-top: 64px;
}

/* ---------- Auth users: compact adjustments inside dashboard ---------- */
.auth .partner-page .partner-hero {
  padding: 30px 24px 26px;
  border-radius: 16px;
  margin-bottom: 24px;
  background: transparent;
}
.auth .partner-page .partner-hero-title { font-size: 2rem; }
.auth .partner-page .partner-card { padding: 24px; }
.auth .partner-page .partner-cta {
  margin: 0;
  border-radius: 16px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .partner-programs-grid { grid-template-columns: 1fr; }
  .partner-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .partner-hero { padding: 40px 16px 36px; border-radius: 0 0 20px 20px; }
  .partner-hero-title { font-size: 2rem; }
  .partner-hero-desc { font-size: 0.95rem; }
  .partner-section-title { font-size: 1.3rem; }
  .partner-cta h2 { font-size: 1.4rem; }
  .partner-card { padding: 24px; }
  .partner-why { padding: 36px 0; border-radius: 16px; }
  .partner-faq-section { padding: 36px 0; }
  .partner-cta { padding: 36px 18px; border-radius: 16px; }
}
@media (max-width: 480px) {
  .partner-why-grid { grid-template-columns: 1fr; }
  .partner-hero-btns { flex-direction: column; align-items: center; }
  .partner-hero-btns .partner-btn { width: 100%; justify-content: center; }
  .partner-card { padding: 20px; }
  .partner-cta-btns { flex-direction: column; align-items: center; }
  .partner-cta-btns .partner-btn { width: 100%; justify-content: center; }
}




/* ══════════════════════════════════════════════════════════════════════
   ARTICLE CSS — Blog post & simple-page content styles
   Scoped to: :is(.blog-post-page .post-body, .simple-page-content)
   Merged from article.css
   ══════════════════════════════════════════════════════════════════════ */

/* ==========================================================================
   ARTICLE CSS - Scoped to blog posts AND custom simple pages
   Targets: :is(.blog-post-page .post-body, .simple-page-content)  |  .simple-page-content
   Uses :is() selector for shared styles across both page types.
   ========================================================================== */


/* ============================================
   POST BODY - Main article content container
   Replaces .prose / .article from original
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.08rem;
  line-height: 1.75;
  color: #334155;
  background: transparent;
}

/* Force left alignment for all post-body text */
:is(.blog-post-page .post-body, .simple-page-content),
:is(.blog-post-page .post-body, .simple-page-content) p,
:is(.blog-post-page .post-body, .simple-page-content) li,
:is(.blog-post-page .post-body, .simple-page-content) td,
:is(.blog-post-page .post-body, .simple-page-content) th,
:is(.blog-post-page .post-body, .simple-page-content) h1,
:is(.blog-post-page .post-body, .simple-page-content) h2,
:is(.blog-post-page .post-body, .simple-page-content) h3,
:is(.blog-post-page .post-body, .simple-page-content) h4,
:is(.blog-post-page .post-body, .simple-page-content) h5,
:is(.blog-post-page .post-body, .simple-page-content) h6 {
  text-align: left !important;
}

/* Reset first/last margins */
:is(.blog-post-page .post-body, .simple-page-content) > *:first-child {
  margin-top: 0 !important;
}

:is(.blog-post-page .post-body, .simple-page-content) > *:last-child {
  margin-bottom: 0 !important;
}

/* Default spacing for block elements */
:is(.blog-post-page .post-body, .simple-page-content) p,
:is(.blog-post-page .post-body, .simple-page-content) ul:not(.checklist),
:is(.blog-post-page .post-body, .simple-page-content) ol,
:is(.blog-post-page .post-body, .simple-page-content) blockquote,
:is(.blog-post-page .post-body, .simple-page-content) pre,
:is(.blog-post-page .post-body, .simple-page-content) figure,
:is(.blog-post-page .post-body, .simple-page-content) .callout,
:is(.blog-post-page .post-body, .simple-page-content) .toc,
:is(.blog-post-page .post-body, .simple-page-content) details,
:is(.blog-post-page .post-body, .simple-page-content) hr,
:is(.blog-post-page .post-body, .simple-page-content) .table-wrap {
  margin-top: 1.4em;
  margin-bottom: 1.4em;
}


/* ============================================
   BREADCRUMBS
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) .breadcrumbs {
  font-size: 0.9rem;
  margin: 1.25rem 0 2.5rem;
  color: #64748b;
}

:is(.blog-post-page .post-body, .simple-page-content) .breadcrumbs a {
  color: #0ea5e9;
  text-decoration: none;
  transition: color 0.2s;
}

:is(.blog-post-page .post-body, .simple-page-content) .breadcrumbs a:hover {
  color: #0284c7;
  text-decoration: underline;
}

:is(.blog-post-page .post-body, .simple-page-content) .breadcrumbs .sep {
  opacity: 0.5;
  margin: 0 0.5em;
}


/* ============================================
   HEADER - Article title and meta inside content
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) header {
  margin-bottom: 2.5rem;
}

:is(.blog-post-page .post-body, .simple-page-content) header h1 {
  font-size: clamp(2rem, 3vw, 2.5rem);
  color: #0c4a6e;
  margin: 0.5em 0;
  font-weight: 700;
  line-height: 1.2;
}

:is(.blog-post-page .post-body, .simple-page-content) header p {
  color: #64748b;
  font-size: 0.95rem;
  margin: 0.5rem 0;
}

:is(.blog-post-page .post-body, .simple-page-content) header time {
  color: #64748b;
}


/* ============================================
   HEADINGS
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) h2 {
  font-size: clamp(1.7rem, 2.4vw, 2rem);
  margin-top: 2.5em;
  margin-bottom: 0.8em;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  scroll-margin-top: 100px;
}

:is(.blog-post-page .post-body, .simple-page-content) h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  margin-top: 0.5em;
  background: linear-gradient(90deg, #0ea5e9, transparent);
  border-radius: 2px;
}

:is(.blog-post-page .post-body, .simple-page-content) h3 {
  font-size: clamp(1.4rem, 2vw, 1.6rem);
  margin-top: 2em;
  margin-bottom: 0.7em;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
  scroll-margin-top: 100px;
}

:is(.blog-post-page .post-body, .simple-page-content) h3::after {
  content: '';
  display: block;
  width: 45px;
  height: 2px;
  margin-top: 0.4em;
  background: linear-gradient(90deg, #0ea5e9, transparent);
  border-radius: 2px;
}

:is(.blog-post-page .post-body, .simple-page-content) h4 {
  font-size: 1.2rem;
  margin-top: 1.5em;
  margin-bottom: 0.6em;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
}

:is(.blog-post-page .post-body, .simple-page-content) h5 {
  font-size: 1rem;
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  font-weight: 600;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

:is(.blog-post-page .post-body, .simple-page-content) h6 {
  font-size: 0.95rem;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: 600;
  color: #64748b;
}

/* Anchor links in headings */
:is(.blog-post-page .post-body, .simple-page-content) .h-anchor {
  margin-left: 0.5em;
  text-decoration: none;
  color: #0ea5e9;
  opacity: 0;
  font-weight: 400;
  transition: opacity 0.2s;
}

:is(.blog-post-page .post-body, .simple-page-content) h2:hover .h-anchor,
:is(.blog-post-page .post-body, .simple-page-content) h3:hover .h-anchor,
:is(.blog-post-page .post-body, .simple-page-content) h4:hover .h-anchor {
  opacity: 0.7;
}

:is(.blog-post-page .post-body, .simple-page-content) .h-anchor:hover {
  opacity: 1 !important;
}


/* ============================================
   PARAGRAPHS
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) p {
  color: #334155;
  line-height: 1.75;
  margin-top: 1em;
  margin-bottom: 1em;
}

:is(.blog-post-page .post-body, .simple-page-content) strong {
  color: #1e293b;
  font-weight: 600;
}

:is(.blog-post-page .post-body, .simple-page-content) em {
  color: #475569;
  font-style: italic;
}

:is(.blog-post-page .post-body, .simple-page-content) mark {
  background: #e0f2fe;
  color: #0c4a6e;
  padding: 0.15em 0.4em;
  border-radius: 0.25em;
  font-weight: 500;
}


/* ============================================
   LINKS
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) a {
  color: #0ea5e9;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 3px;
  transition: all 0.2s;
}

:is(.blog-post-page .post-body, .simple-page-content) a:hover {
  color: #0284c7;
  text-decoration-thickness: 0.14em;
}


/* ============================================
   LISTS
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) ul:not(.checklist),
:is(.blog-post-page .post-body, .simple-page-content) ol {
  padding-left: 2rem;
}

:is(.blog-post-page .post-body, .simple-page-content) ul:not(.checklist) {
  list-style: disc;
}

:is(.blog-post-page .post-body, .simple-page-content) ol {
  list-style: decimal;
}

:is(.blog-post-page .post-body, .simple-page-content) li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  color: #334155;
  line-height: 1.7;
}

:is(.blog-post-page .post-body, .simple-page-content) li::marker {
  color: #0ea5e9;
}

/* Nested lists */
:is(.blog-post-page .post-body, .simple-page-content) ul:not(.checklist) ul:not(.checklist),
:is(.blog-post-page .post-body, .simple-page-content) ol ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* Checklist style */
:is(.blog-post-page .post-body, .simple-page-content) ul.checklist {
  list-style: none;
  padding-left: 0;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

:is(.blog-post-page .post-body, .simple-page-content) ul.checklist li {
  position: relative;
  padding-left: 2em;
  margin-bottom: 0.7em;
}

:is(.blog-post-page .post-body, .simple-page-content) ul.checklist li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0.15em;
  color: #16a34a;
  background: rgba(22, 163, 74, 0.1);
  border: 1px solid #bbf7d0;
  border-radius: 50%;
  font-size: 0.75em;
  width: 1.4em;
  height: 1.4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}


/* ============================================
   TABLES - .table-wrap variant (prose-style)
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) .table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

:is(.blog-post-page .post-body, .simple-page-content) table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  font-size: 0.97rem;
}

:is(.blog-post-page .post-body, .simple-page-content) thead {
  background: linear-gradient(90deg, #e0f2fe 0%, #f0f9ff 100%);
}

:is(.blog-post-page .post-body, .simple-page-content) th {
  padding: 14px 16px;
  text-align: left !important;
  font-weight: 700;
  color: #0f172a;
  border-bottom: 2px solid #93c5fd;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

:is(.blog-post-page .post-body, .simple-page-content) td {
  padding: 14px 16px;
  text-align: left !important;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
}

:is(.blog-post-page .post-body, .simple-page-content) tbody tr:nth-child(even) {
  background: #f9fafb;
}

:is(.blog-post-page .post-body, .simple-page-content) tbody tr:hover {
  background: #eff6ff;
}

/* Table cell colors */
:is(.blog-post-page .post-body, .simple-page-content) .td-good {
  color: #16a34a;
  font-weight: 600;
}

:is(.blog-post-page .post-body, .simple-page-content) .td-bad {
  color: #dc2626;
  font-weight: 600;
}

:is(.blog-post-page .post-body, .simple-page-content) .td-neutral {
  color: #64748b;
  font-weight: 600;
}

/* .table-wrapper variant (article-style) */
:is(.blog-post-page .post-body, .simple-page-content) .table-wrapper {
  overflow-x: auto;
  margin: 36px 0;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* .quality-table variant */
:is(.blog-post-page .post-body, .simple-page-content) .quality-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

:is(.blog-post-page .post-body, .simple-page-content) .quality-table thead {
  background: linear-gradient(90deg, #e0f2fe 0%, #f0f9ff 100%);
}

:is(.blog-post-page .post-body, .simple-page-content) .quality-table th {
  padding: 14px 16px;
  font-weight: 700;
  color: #0f172a;
  border-bottom: 2px solid #93c5fd;
  font-size: 0.9rem;
  text-transform: uppercase;
}

:is(.blog-post-page .post-body, .simple-page-content) .quality-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
}

:is(.blog-post-page .post-body, .simple-page-content) .quality-table tbody tr:nth-child(even) {
  background: #f9fafb;
}

:is(.blog-post-page .post-body, .simple-page-content) .quality-table tbody tr:hover {
  background: #eff6ff;
}

/* Table interpretation note */
:is(.blog-post-page .post-body, .simple-page-content) .table-interpretation {
  margin-top: 18px;
  background: #f8fafc;
  border-left: 4px solid #0ea5e9;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 0.96rem;
  color: #475569;
}


/* ============================================
   TABLE OF CONTENTS
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) .toc {
  max-width: 750px;
  margin: 2.5rem auto;
  padding: 1.5rem 2rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

:is(.blog-post-page .post-body, .simple-page-content) .toc-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #f1f5f9;
}

:is(.blog-post-page .post-body, .simple-page-content) .toc ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

:is(.blog-post-page .post-body, .simple-page-content) .toc li {
  margin: 0.6rem 0;
  text-align: left !important;
}

:is(.blog-post-page .post-body, .simple-page-content) .toc li::before {
  display: none;
}

:is(.blog-post-page .post-body, .simple-page-content) .toc a {
  color: #0ea5e9;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

:is(.blog-post-page .post-body, .simple-page-content) .toc a:hover {
  color: #0284c7;
  text-decoration: underline;
}

/* Nested TOC items */
:is(.blog-post-page .post-body, .simple-page-content) .toc ul ul {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
  margin-left: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid #dbeafe;
}

:is(.blog-post-page .post-body, .simple-page-content) .toc ul ul li {
  margin: 0.4rem 0;
}

:is(.blog-post-page .post-body, .simple-page-content) .toc ul ul a {
  font-size: 0.95rem;
  color: #1f81ea;
  font-weight: 500;
}

/* TOC clean-list variant */
:is(.blog-post-page .post-body, .simple-page-content) .toc-list-clean {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

:is(.blog-post-page .post-body, .simple-page-content) .toc-list-clean li {
  padding-left: 14px;
  border-left: 3px solid rgba(59, 130, 246, 0.15);
  transition: all 0.25s ease;
}

:is(.blog-post-page .post-body, .simple-page-content) .toc-list-clean li:hover {
  border-left-color: #3b82f6;
}

:is(.blog-post-page .post-body, .simple-page-content) .toc-list-clean a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

:is(.blog-post-page .post-body, .simple-page-content) .toc-list-clean a:hover {
  color: #1d4ed8;
  transform: translateX(3px);
}


/* ============================================
   BLOCKQUOTES
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) blockquote {
  margin: 2rem 0;
  padding: 1em 1.4em;
  border-left: 4px solid #0ea5e9;
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.08), transparent 60%);
  border-radius: 0 12px 12px 0;
  color: #0f172a;
  font-style: italic;
}

:is(.blog-post-page .post-body, .simple-page-content) blockquote p {
  margin: 0.5em 0;
}


/* ============================================
   CODE
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) code {
  font-family: 'SFMono-Regular', 'Consolas', 'Monaco', monospace;
  font-size: 0.9em;
  background: rgba(14, 165, 233, 0.08);
  padding: 0.2em 0.4em;
  border-radius: 0.3em;
  color: #0369a1;
}

:is(.blog-post-page .post-body, .simple-page-content) pre {
  margin: 2rem 0;
  padding: 1.2rem 1.4rem;
  background: #0b1022;
  color: #f8fafc;
  border-radius: 12px;
  overflow-x: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:is(.blog-post-page .post-body, .simple-page-content) pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: 0.9rem;
}


/* ============================================
   IMAGES & FIGURES
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) figure {
  margin: 0;
  text-align: center;
  max-width: 100% !important;
}

:is(.blog-post-page .post-body, .simple-page-content) figure img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  display: block;
  margin: 0 auto;
}

:is(.blog-post-page .post-body, .simple-page-content) figcaption {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: #64748b;
  font-style: italic;
  text-align: center;
  line-height: 1.5;
}

:is(.blog-post-page .post-body, .simple-page-content) img:not(figure img) {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.5rem 0;
}

/* Additional image style (block-centered with shadow) */
:is(.blog-post-page .post-body, .simple-page-content) img {
  display: block;
  margin: 30px auto;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

/* Floating figures */
:is(.blog-post-page .post-body, .simple-page-content) figure.fig-left,
:is(.blog-post-page .post-body, .simple-page-content) figure.float-left {
  float: left;
  width: 45%;
  max-width: 420px;
  margin: 1rem 2rem 1.5rem 0;
}

:is(.blog-post-page .post-body, .simple-page-content) figure.fig-right,
:is(.blog-post-page .post-body, .simple-page-content) figure.float-right {
  float: right;
  width: 45%;
  max-width: 420px;
  margin: 1rem 0 1.5rem 2rem;
}


/* ============================================
   CALLOUTS (.callout)
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) .callout {
  margin: 2rem 0;
  padding: 1.2rem 1.5rem;
  border-left: 5px solid #0ea5e9;
  border-radius: 12px;
  background: #f8fafc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

:is(.blog-post-page .post-body, .simple-page-content) .callout p {
  margin: 0.5em 0;
}

:is(.blog-post-page .post-body, .simple-page-content) .callout.info {
  background: #e5f1f9;
  border-left-color: #0ea5e9;
}

:is(.blog-post-page .post-body, .simple-page-content) .callout.tip {
  background: #e9f9f1;
  border-left-color: #16a34a;
}

:is(.blog-post-page .post-body, .simple-page-content) .callout.warn {
  background: #fffbe9;
  border-left-color: #f59e0b;
}


/* ============================================
   NOTE / TIP / WARN BLOCKS (standalone classes)
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) .note,
:is(.blog-post-page .post-body, .simple-page-content) .tip,
:is(.blog-post-page .post-body, .simple-page-content) .warn {
  margin: 1.8rem 0;
  padding: 1.2rem 1.5rem 1.2rem 1.2rem;
  border-radius: 12px;
  position: relative;
  line-height: 1.7;
  font-size: 0.98rem;
  background: #f9fafb;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Icon base for note/tip/warn */
:is(.blog-post-page .post-body, .simple-page-content) .note::before,
:is(.blog-post-page .post-body, .simple-page-content) .tip::before,
:is(.blog-post-page .post-body, .simple-page-content) .warn::before {
  position: absolute;
  left: 1.1rem;
  top: 2.2rem;
  font-size: 1.1rem;
  line-height: 1;
}

/* NOTE (info) */
:is(.blog-post-page .post-body, .simple-page-content) .note {
  background: #f0f9ff;
  border-left: 5px solid #0ea5e9;
}

:is(.blog-post-page .post-body, .simple-page-content) .note strong {
  color: #0c4a6e;
}

/* TIP (success) */
:is(.blog-post-page .post-body, .simple-page-content) .tip {
  background: #ecfdf5;
  border-left: 5px solid #10b981;
}

:is(.blog-post-page .post-body, .simple-page-content) .tip strong {
  color: #065f46;
}

/* WARN (warning) */
:is(.blog-post-page .post-body, .simple-page-content) .warn {
  background: #fffbeb;
  border-left: 5px solid #f59e0b;
}

:is(.blog-post-page .post-body, .simple-page-content) .warn strong {
  color: #92400e;
}

/* Inner text cleanup for note/tip/warn */
:is(.blog-post-page .post-body, .simple-page-content) .note p,
:is(.blog-post-page .post-body, .simple-page-content) .tip p,
:is(.blog-post-page .post-body, .simple-page-content) .warn p {
  margin: 0.4em 0;
}

:is(.blog-post-page .post-body, .simple-page-content) .note p:first-child,
:is(.blog-post-page .post-body, .simple-page-content) .tip p:first-child,
:is(.blog-post-page .post-body, .simple-page-content) .warn p:first-child {
  margin-top: 0;
}

:is(.blog-post-page .post-body, .simple-page-content) .note p:last-child,
:is(.blog-post-page .post-body, .simple-page-content) .tip p:last-child,
:is(.blog-post-page .post-body, .simple-page-content) .warn p:last-child {
  margin-bottom: 0;
}


/* ============================================
   COLORFUL TIP BLOCKS (.tip-block)
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) .tip-block {
  padding: 14px 18px;
  border-radius: 10px;
  margin: 16px 0;
  font-weight: 500;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

:is(.blog-post-page .post-body, .simple-page-content) .tip-blue {
  background: #f0f9ff;
  border-left: 4px solid #3b82f6;
}

:is(.blog-post-page .post-body, .simple-page-content) .tip-purple {
  background: #f5f3ff;
  border-left: 4px solid #6366f1;
}

:is(.blog-post-page .post-body, .simple-page-content) .tip-green {
  background: #ecfdf5;
  border-left: 4px solid #10b981;
}

:is(.blog-post-page .post-body, .simple-page-content) .tip-yellow {
  background: #fffbeb;
  border-left: 4px solid #facc15;
}

:is(.blog-post-page .post-body, .simple-page-content) .tip-pink {
  background: #fdf2f8;
  border-left: 4px solid #f472b6;
}


/* ============================================
   DETAILS / SUMMARY (accordion)
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) details {
  margin: 1.8rem 0;
  padding: 1rem 1.2rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f9fafb;
}

:is(.blog-post-page .post-body, .simple-page-content) details[open] {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

:is(.blog-post-page .post-body, .simple-page-content) details summary {
  cursor: pointer;
  font-weight: 600;
  color: #0f172a;
  list-style: none;
  user-select: none;
}

:is(.blog-post-page .post-body, .simple-page-content) details summary::-webkit-details-marker {
  display: none;
}

:is(.blog-post-page .post-body, .simple-page-content) details summary::before {
  content: '\25B8';
  display: inline-block;
  margin-right: 0.6em;
  color: #0ea5e9;
  transition: transform 0.2s;
}

:is(.blog-post-page .post-body, .simple-page-content) details[open] summary::before {
  transform: rotate(90deg);
}

:is(.blog-post-page .post-body, .simple-page-content) details > *:not(summary) {
  margin-top: 1em;
}


/* ============================================
   FAQ - div-based variant (.faq / .faq-item)
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) .faq {
  max-width: 1320px;
  margin: 3rem auto;
  padding: 0 1.5rem;
}

:is(.blog-post-page .post-body, .simple-page-content) .faq-item {
  margin-bottom: 1.2rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: all 0.25s;
}

:is(.blog-post-page .post-body, .simple-page-content) .faq-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border-color: #bae6fd;
}

:is(.blog-post-page .post-body, .simple-page-content) .faq-item .q {
  padding: 1.1rem 3.5rem 1.1rem 1.5rem;
  background: #f8fafc;
  font-weight: 600;
  font-size: 1.05rem;
  color: #111827;
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: all 0.25s;
}

:is(.blog-post-page .post-body, .simple-page-content) .faq-item .q::after {
  content: '\FF0B';
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: #0ea5e9;
  font-weight: 700;
  font-size: 1.3em;
  transition: transform 0.3s;
}

:is(.blog-post-page .post-body, .simple-page-content) .faq-item.active .q {
  background: #e0f2fe;
  color: #0c4a6e;
}

:is(.blog-post-page .post-body, .simple-page-content) .faq-item.active .q::after {
  content: '\2212';
  transform: translateY(-50%) rotate(180deg);
  color: #0284c7;
}

:is(.blog-post-page .post-body, .simple-page-content) .faq-item .a {
  display: none;
  padding: 1.3rem 1.7rem;
  border-top: 1px solid #e2e8f0;
  color: #334155;
  line-height: 1.7;
  background: #ffffff;
}

:is(.blog-post-page .post-body, .simple-page-content) .faq-item .a p {
  margin: 0;
  text-align: left;
}

:is(.blog-post-page .post-body, .simple-page-content) .faq-item.active .a {
  display: block;
  animation: blogPostFadeInDown 0.3s ease;
}

/* Scoped animation name to avoid global conflicts */
@keyframes blogPostFadeInDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================
   FAQ - details/summary variant (#faq)
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) #faq {
  margin: 40px 0;
  padding: 20px;
  border-radius: 12px;
}

:is(.blog-post-page .post-body, .simple-page-content) #faq h2 {
  font-size: 1.6rem;
  margin-bottom: 20px;
  color: #0f172a;
  border-left: 4px solid #0ea5e9;
  padding-left: 10px;
}

:is(.blog-post-page .post-body, .simple-page-content) #faq details {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin: 12px 0;
  padding: 14px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
}

:is(.blog-post-page .post-body, .simple-page-content) #faq details:hover {
  border-color: #38bdf8;
  box-shadow: 0 2px 6px rgba(56, 189, 248, 0.1);
}

:is(.blog-post-page .post-body, .simple-page-content) #faq summary {
  cursor: pointer;
  font-weight: 600;
  color: #0f172a;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:is(.blog-post-page .post-body, .simple-page-content) #faq summary::after {
  content: "\25BA";
  font-size: 1.2rem;
  transform: rotate(90deg);
  color: #0ea5e9;
  transition: transform 0.2s ease;
}

:is(.blog-post-page .post-body, .simple-page-content) #faq details[open] summary::after {
  transform: rotate(270deg);
}

:is(.blog-post-page .post-body, .simple-page-content) #faq .faq-body {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
  color: #334155;
  line-height: 1.6;
}


/* ============================================
   PROMO BLOCK
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) .promo-block {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(90deg, #f0f9ff 0%, #e0f2fe 100%);
  border-left: 4px solid #0ea5e9;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 28px 0 40px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
}

:is(.blog-post-page .post-body, .simple-page-content) .promo-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
}

:is(.blog-post-page .post-body, .simple-page-content) .promo-icon {
  font-size: 1.8rem;
  line-height: 1;
}

:is(.blog-post-page .post-body, .simple-page-content) .promo-text p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #0f172a;
}

:is(.blog-post-page .post-body, .simple-page-content) .promo-text a {
  color: #0284c7;
  font-weight: 600;
  text-decoration: none;
}

:is(.blog-post-page .post-body, .simple-page-content) .promo-text a:hover {
  text-decoration: underline;
  color: #0369a1;
}


/* ============================================
   VIDEO EMBED
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) .video-embed {
  background: linear-gradient(90deg, #f9fafb 0%, #f0f9ff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 40px 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
  text-align: center;
}

:is(.blog-post-page .post-body, .simple-page-content) .video-embed__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 16px;
}

:is(.blog-post-page .post-body, .simple-page-content) .video-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

:is(.blog-post-page .post-body, .simple-page-content) .video-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 10px;
}

:is(.blog-post-page .post-body, .simple-page-content) .video-caption {
  margin-top: 14px;
  font-size: 0.98rem;
  color: #475569;
  line-height: 1.6;
}

:is(.blog-post-page .post-body, .simple-page-content) .video-caption a {
  color: #0284c7;
  font-weight: 600;
  text-decoration: none;
}

:is(.blog-post-page .post-body, .simple-page-content) .video-caption a:hover {
  text-decoration: underline;
  color: #0369a1;
}


/* ============================================
   IFRAME / VIDEO EMBEDS (generic)
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) iframe {
  max-width: 100%;
  margin: 2rem auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

:is(.blog-post-page .post-body, .simple-page-content) div > iframe {
  margin: 2rem auto;
}


/* ============================================
   HR
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) hr {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 3rem 0;
}


/* ============================================
   SECTIONS
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) section {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

:is(.blog-post-page .post-body, .simple-page-content) section:first-of-type {
  margin-top: 0;
}


/* ============================================
   REFERENCES & FOOTNOTES
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) .references {
  margin-top: 4rem;
  padding: 2rem 2.5rem;
  background: #f9fafb;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

:is(.blog-post-page .post-body, .simple-page-content) .references h2 {
  font-size: 1.4rem;
  margin-top: 0;
}

:is(.blog-post-page .post-body, .simple-page-content) .references ul {
  list-style: none;
  padding-left: 0;
}

:is(.blog-post-page .post-body, .simple-page-content) .references li {
  margin-bottom: 0.75rem;
  padding-left: 1.2rem;
  position: relative;
}

:is(.blog-post-page .post-body, .simple-page-content) .references li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: #0ea5e9;
}

:is(.blog-post-page .post-body, .simple-page-content) .footnotes {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

:is(.blog-post-page .post-body, .simple-page-content) .footnotes h2 {
  font-size: 1.2rem;
  margin-top: 0;
}

:is(.blog-post-page .post-body, .simple-page-content) .footnotes ol {
  font-size: 0.9rem;
  color: #64748b;
}

:is(.blog-post-page .post-body, .simple-page-content) sup {
  font-size: 0.75em;
  line-height: 0;
}

:is(.blog-post-page .post-body, .simple-page-content) .backref {
  text-decoration: none;
  margin-left: 0.4em;
  opacity: 0.7;
}


/* ============================================
   CHEAT SHEET
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) .cheat-sheet .table-note {
  margin: 1rem;
}


/* ============================================
   SCREEN READER ONLY
   ============================================ */
:is(.blog-post-page .post-body, .simple-page-content) .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================
   RESPONSIVE - Mobile adjustments
   ============================================ */
@media (max-width: 768px) {
  :is(.blog-post-page .post-body, .simple-page-content) {
    font-size: 1rem;
    padding: 0 1rem 2.5rem;
  }

  :is(.blog-post-page .post-body, .simple-page-content) header h1 {
    font-size: clamp(1.8rem, 6vw, 2.2rem);
  }

  :is(.blog-post-page .post-body, .simple-page-content) h2 {
    font-size: clamp(1.5rem, 5vw, 1.8rem);
    margin-top: 2em;
  }

  :is(.blog-post-page .post-body, .simple-page-content) h3 {
    font-size: clamp(1.25rem, 4vw, 1.4rem);
    margin-top: 1.6em;
  }

  :is(.blog-post-page .post-body, .simple-page-content) ul:not(.checklist),
  :is(.blog-post-page .post-body, .simple-page-content) ol {
    padding-left: 1.5rem;
  }

  :is(.blog-post-page .post-body, .simple-page-content) .toc {
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
  }

  :is(.blog-post-page .post-body, .simple-page-content) table {
    font-size: 0.9rem;
  }

  :is(.blog-post-page .post-body, .simple-page-content) th,
  :is(.blog-post-page .post-body, .simple-page-content) td {
    padding: 10px 12px;
  }

  :is(.blog-post-page .post-body, .simple-page-content) figure.fig-left,
  :is(.blog-post-page .post-body, .simple-page-content) figure.fig-right,
  :is(.blog-post-page .post-body, .simple-page-content) figure.float-left,
  :is(.blog-post-page .post-body, .simple-page-content) figure.float-right {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 1.5rem 0;
  }

  :is(.blog-post-page .post-body, .simple-page-content) .callout {
    padding: 1rem 1.2rem;
  }

  :is(.blog-post-page .post-body, .simple-page-content) blockquote {
    padding: 0.8em 1em;
  }

  :is(.blog-post-page .post-body, .simple-page-content) .faq {
    padding: 0 1rem;
  }

  :is(.blog-post-page .post-body, .simple-page-content) .faq-item .q {
    padding: 1rem 3rem 1rem 1.2rem;
    font-size: 1rem;
  }

  :is(.blog-post-page .post-body, .simple-page-content) .faq-item .a {
    padding: 1rem 1.2rem;
  }

  :is(.blog-post-page .post-body, .simple-page-content) .promo-block {
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
  }

  :is(.blog-post-page .post-body, .simple-page-content) .promo-icon {
    font-size: 1.6rem;
  }

  :is(.blog-post-page .post-body, .simple-page-content) .video-embed {
    padding: 16px;
  }

  :is(.blog-post-page .post-body, .simple-page-content) .video-embed__title {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  :is(.blog-post-page .post-body, .simple-page-content) {
    padding: 0 0.75rem 2rem;
  }

  :is(.blog-post-page .post-body, .simple-page-content) h2::after,
  :is(.blog-post-page .post-body, .simple-page-content) h3::after {
    width: 40px;
  }
}


/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  :is(.blog-post-page .post-body, .simple-page-content) {
    max-width: 100%;
    padding: 0;
  }

  :is(.blog-post-page .post-body, .simple-page-content) .breadcrumbs,
  :is(.blog-post-page .post-body, .simple-page-content) .toc,
  :is(.blog-post-page .post-body, .simple-page-content) .faq {
    page-break-inside: avoid;
  }

  :is(.blog-post-page .post-body, .simple-page-content) img,
  :is(.blog-post-page .post-body, .simple-page-content) table,
  :is(.blog-post-page .post-body, .simple-page-content) pre,
  :is(.blog-post-page .post-body, .simple-page-content) blockquote {
    page-break-inside: avoid;
  }

  :is(.blog-post-page .post-body, .simple-page-content) .h-anchor {
    display: none;
  }

  :is(.blog-post-page .post-body, .simple-page-content) .faq-item .q::after {
    display: none;
  }

  :is(.blog-post-page .post-body, .simple-page-content) .faq-item .a {
    display: block !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   MONEY PAGE CONTENT OVERRIDES
   ══════════════════════════════════════════════════════════════════════
   On money pages (.simple-page-page), .simple-page-content is a
   full-width SECTION wrapper (for alternating backgrounds), with
   .container inside for content width constraint.

   article.css treats .simple-page-content as a content container
   (like .post-body), setting max-width: 1320px and padding on it.
   These overrides fix that for money pages without touching blog posts.
   ══════════════════════════════════════════════════════════════════════ */


/* ─── 1. Reset article.css base container styles on section wrappers ─── */
.simple-page-page .simple-page-content {
  max-width: none;
  padding: 0;
}


/* ─── 2. Content section spacing (card layout) ─── */
.page-card .simple-page-content .simple-page-content {
  padding: 20px 0;
  background: transparent;
}
.page-card .simple-page-content .simple-page-content:nth-of-type(odd),
.page-card .simple-page-content .simple-page-content:nth-of-type(even) {
  background: transparent;
}


/* ─── 3. H2: no top margin, no gradient underline in content sections ─── */
.simple-page-content .container > h2 {
  margin-top: 0;
}
.simple-page-content .container > h2::after {
  display: none;
}


/* ─── 4. Last paragraph: no bottom margin before callout/checklist ─── */
.simple-page-content .container > p:last-of-type {
  margin-bottom: 0;
}


/* ─── 5. Checklist: 2-column grid for money pages ─── */
.simple-page-content .container ul.checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding-left: 0;
}
.simple-page-content .container ul.checklist li {
  background: transparent !important;
  margin: 0 !important;
  padding: 4px 8px 4px 28px !important;
  border-radius: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.simple-page-content .container ul.checklist li::before {
  background: transparent;
  border: none;
  font-size: 1rem;
  width: auto;
  height: auto;
  border-radius: 0;
  display: block;
  top: 4px !important;
  left: 4px !important;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .simple-page-content .container ul.checklist {
    grid-template-columns: 1fr;
  }
}


/* ─── 6. Table: dark headers for money pages ─── */
.simple-page-content .container .table-wrap thead {
  background: none;
}
.simple-page-content .container .table-wrap th {
  background: #111827;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  border-bottom: none;
}
.simple-page-content .container .table-wrap td {
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
}
.simple-page-content .container .table-wrap tr:last-child td {
  border-bottom: none;
}
.simple-page-content .container .table-wrap tbody tr:nth-child(even) {
  background: transparent;
}
.simple-page-content .container .table-wrap tbody tr:hover {
  background: transparent;
}
.simple-page-content .container .table-wrap .td-good {
  color: #059669;
  font-weight: 500;
}
.simple-page-content .container .table-wrap .td-neutral {
  color: #6b7280;
  font-weight: 500;
}


/* ─── 7. Reset article.css link styles on buttons ─── */
.simple-page-content a.btn {
  text-decoration: none;
}
.simple-page-content a.btn.btn-primary {
  color: #fff;
}
.simple-page-content a.btn.btn-secondary {
  color: #0f172a;
}
.simple-page-content a.btn:hover {
  text-decoration: none;
}


/* ─── 8. Seamless section flow — remove default landing margins ─── */
.simple-page-page .hero,
.simple-page-page .hero-stats,
.simple-page-page .why-us,
.simple-page-page .how-it-works,
.simple-page-page .cta-section,
.simple-page-page .faq-section {
  margin: 0 !important;
}


/* ─── 9. Gray page background for landing-style card contrast ─── */
.simple-page-page .page-card {
  background: #f5f7fb;
}


/* ─── 10. Card-style content containers ─── */
.page-card .simple-page-content .simple-page-content > .container {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 48px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

@media (max-width: 768px) {
  .page-card .simple-page-content .simple-page-content > .container {
    padding: 28px 20px;
    border-radius: 12px;
  }
}


/* ─── 11. Landing-style H2 with accent bar ─── */
.page-card .simple-page-content .simple-page-content > .container > h2::before {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #0ea5e9);
  border-radius: 2px;
  margin-bottom: 16px;
}


/* ─── 12. Lead paragraph — first p after H2 is larger ─── */
.page-card .simple-page-content .simple-page-content > .container > h2 + p {
  font-size: 1.125rem;
  color: #1e293b;
  line-height: 1.8;
}


/* ─── 13. Enhanced callout & table shadows ─── */
.page-card .simple-page-content .simple-page-content .callout {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.page-card .simple-page-content .simple-page-content .table-wrap {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}


/* ─── 14. Checklist items — clean style (no pill background) ─── */
.page-card .simple-page-content .simple-page-content .checklist li {
  background: transparent;
  border-radius: 0;
  padding: 4px 8px 4px 28px;
}


/* ─── 15. CTA sections — dark gradient card ─── */
.simple-page-page .cta-section {
  padding: 20px 0;
}
.simple-page-page .cta-section .container {
  background: linear-gradient(135deg, #1e3a5f 0%, #111827 100%);
  border-radius: 16px;
  padding: 64px 40px;
}
.simple-page-page .cta-section h2 {
  color: #fff;
  text-align: center !important;
}
.simple-page-page .cta-section p {
  color: rgba(255, 255, 255, 0.8);
  text-align: center !important;
}

@media (max-width: 768px) {
  .simple-page-page .cta-section .container {
    padding: 40px 24px;
    border-radius: 12px;
  }
}

.simple-page-content .hero-stats {
  border: none !important;
  padding-bottom: 50px;
}


/* ─── 16. Reset article.css styles on dark landing sections ─── */
.simple-page-page .why-us h2,
.simple-page-page .how-it-works h2 {
  color: inherit !important;
  text-align: inherit !important;
  margin-top: 0 !important;
}
.simple-page-page .why-us h2::after,
.simple-page-page .why-us .feature-card h3::after,
.simple-page-page .how-it-works h2::after,
.simple-page-page .how-it-works .step-card h3::after {
  display: none !important;
}
.simple-page-page .why-us .feature-card h3 {
  color: #fff !important;
  font-size: 0.9375rem !important;
}
.simple-page-page .why-us .feature-card p {
  color: #9ca3af !important;
  font-size: 0.8125rem !important;
}
.simple-page-page .why-us .section-header p {
  color: #9ca3af !important;
  text-align: center !important;
}
.simple-page-page .how-it-works .step-card h3 {
  color: inherit !important;
  font-size: 0.9375rem !important;
}

/* ─── 17. FAQ section — padding and decoration reset ─── */
.simple-page-page .faq-section .faq-item {
  padding: 0 20px !important;
}
.simple-page-page .faq-section h2::after,
.simple-page-page .faq-section h2::before {
  display: none !important;
}
.simple-page-page .faq-section h2 {
  text-align: center !important;
  border-top: none !important;
  padding-top: 0 !important;
}
.simple-page-page .faq-section .section-header p {
  text-align: center !important;
}

.simple-page-page .page-card.simple-page-card {
  border: none !important;
}

.how-it-works .section-header p {
  text-align: center !important;
}

.cta-section a.btn-primary {
  margin-top: 30px;
}


/* =============================================
   DARK MODE SUGGESTION POPUP
   One-time popup offering dark theme to new users.
   Shown 3.5s after page load, persisted via localStorage.
   ============================================= */

/* Fullscreen overlay with backdrop blur */
.dm-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.dm-popup-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* Card container */
.dm-popup {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
  max-width: 380px;
  width: 90%;
  overflow: hidden;
  transform: scale(0.92) translateY(12px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.dm-popup-overlay.visible .dm-popup {
  transform: scale(1) translateY(0);
}

/* ---- CSS mockup of dark UI ---- */
.dm-popup-preview {
  background: #1a1b1e;
  padding: 20px;
  border-radius: 12px;
  margin: 16px 16px 0;
  display: flex;
  gap: 12px;
  overflow: hidden;
}

/* Sidebar mockup */
.dm-mock-sidebar {
  width: 52px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dm-mock-logo {
  width: 32px;
  height: 8px;
  background: #3b82f6;
  border-radius: 4px;
  margin-bottom: 4px;
}
.dm-mock-nav-item {
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}
.dm-mock-nav-item.active {
  background: rgba(59, 130, 246, 0.5);
}

/* Content area mockup */
.dm-mock-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dm-mock-header {
  height: 10px;
  width: 65%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}
.dm-mock-card {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dm-mock-line {
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
.dm-mock-line.short { width: 55%; }
.dm-mock-line.medium { width: 80%; }
.dm-mock-btn-row {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.dm-mock-btn {
  height: 8px;
  width: 36px;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.6);
}
.dm-mock-btn.secondary {
  background: rgba(255, 255, 255, 0.08);
}

/* ---- Text content ---- */
.dm-popup-body {
  padding: 20px 20px 8px;
}
.dm-popup-body h3 {
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 8px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dm-popup-body h3 svg {
  flex-shrink: 0;
  color: #6366f1;
}
.dm-popup-body p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.55;
}

/* ---- Actions ---- */
.dm-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px 20px;
}
.dm-popup-actions button {
  padding: 9px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}
.dm-popup-btn-later {
  background: transparent;
  color: #64748b;
}
.dm-popup-btn-later:hover {
  background: #f1f5f9;
  color: #334155;
}
.dm-popup-btn-enable {
  background: #1a1b1e;
  color: #fff;
}
.dm-popup-btn-enable:hover {
  background: #2d2e33;
}

/* ---- Responsive: smaller screens ---- */
@media (max-width: 480px) {
  .dm-popup { max-width: 340px; }
  .dm-popup-preview { padding: 14px; margin: 12px 12px 0; }
  .dm-popup-body { padding: 16px 16px 6px; }
  .dm-popup-actions { padding: 12px 16px 16px; }
}

/* ---- Dark theme variant (if user already has dark active somehow) ---- */
[data-theme="dark"] .dm-popup {
  background: var(--card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .dm-popup-body h3 { color: var(--text); }
[data-theme="dark"] .dm-popup-body p { color: var(--muted); }



.simple-page-content  .how-it-works .steps-grid {
  grid-template-columns: repeat(5, 1fr);
}

.simple-page-page .how-it-works .step-card h3 {
  text-align: center !important;
}

.simple-page-content .hero-content {
  max-width: 850px !important;
}


/* =============================================
   Onboarding Tour — Spotlight & Tooltips
   Interactive product tour for new users.
   All classes prefixed with "tour-" for isolation.
   ============================================= */

/* Full-screen dark overlay behind spotlight */
.tour-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; /* no inset shorthand — Safari <14.1 compat */
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none; /* Visual-only overlay; click blocking handled by JS */
}
.tour-overlay.visible { opacity: 1; }

/* Target element elevated above overlay so it remains clickable */
.tour-highlight {
  position: relative !important;
  z-index: 9999 !important;
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.4), 0 0 20px rgba(99, 102, 241, 0.15);
  transition: box-shadow 0.3s ease;
}

/* Ensure dropdown inside highlighted element stays clickable on mobile (touch) */
.tour-highlight .custom-select-dropdown.open {
  z-index: 10001 !important;
  pointer-events: auto !important;
}

/* Subtle pulse on highlighted element */
.tour-highlight::after {
  content: '';
  position: absolute;
  top: -4px; right: -4px; bottom: -4px; left: -4px; /* no inset shorthand */
  border-radius: 12px;
  border: 2px solid rgba(99, 102, 241, 0.5);
  animation: tour-pulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tour-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Tooltip positioned near highlighted element */
.tour-tooltip {
  position: fixed;
  z-index: 10000;
  background: #1a1b2e;
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 12px;
  padding: 20px 24px;
  max-width: 380px;
  min-width: 280px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; /* Hidden tooltip must not intercept clicks on dropdowns beneath it */
}
.tour-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; /* Re-enable clicks only when tooltip is visible */
}

/* Tooltip arrow */
.tour-tooltip::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: inherit;
  border: 1px solid rgba(99, 102, 241, 0.3);
  transform: rotate(45deg);
}
.tour-tooltip[data-pos="bottom"]::before {
  top: -7px;
  left: 28px;
  border-right: none;
  border-bottom: none;
}
.tour-tooltip[data-pos="top"]::before {
  bottom: -7px;
  left: 28px;
  border-left: none;
  border-top: none;
}
.tour-tooltip[data-pos="right"]::before {
  left: -7px;
  top: 24px;
  border-top: none;
  border-right: none;
}
.tour-tooltip[data-pos="left"]::before {
  right: -7px;
  top: 24px;
  border-bottom: none;
  border-left: none;
}

/* Step counter & dots row */
.tour-step-counter {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: rgba(99, 102, 241, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 10px;
}
.tour-step-dots {
  display: flex;
  margin-left: auto;
}
.tour-step-dot + .tour-step-dot { margin-left: 4px; } /* gap fallback for Safari <14.1 */
.tour-step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.3s;
}
.tour-step-dot.active {
  background: #6366f1;
  width: 18px;
  border-radius: 3px;
}
.tour-step-dot.done { background: rgba(99, 102, 241, 0.5); }

/* Title, text, action hint */
.tour-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.3;
}
.tour-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin-bottom: 14px;
}
/* Interactive action hint — tells user what to do */
.tour-action {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #6366f1;
  font-weight: 500;
  padding: 8px 12px;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 8px;
  margin-bottom: 14px;
}
.tour-action-icon { font-size: 14px; flex-shrink: 0; margin-right: 8px; } /* gap fallback */

/* Button row */
.tour-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tour-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  font-family: inherit;
}
.tour-btn-skip {
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
}
.tour-btn-skip:hover { color: rgba(255, 255, 255, 0.8); }
.tour-btn-next {
  background: #6366f1;
  color: #fff;
}
.tour-btn-next:hover { background: #5558e6; }

/* Centered modal (welcome, phase-2 prompt, completion) */
.tour-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: 10000;
  background: #1a1b2e;
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 16px;
  padding: 32px 40px;
  text-align: center;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: auto;
}
.tour-modal.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.tour-modal-icon { font-size: 48px; margin-bottom: 16px; }
.tour-modal h2 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}
.tour-modal p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin-bottom: 24px;
}
.tour-modal-buttons {
  display: flex;
  justify-content: center;
}
.tour-modal-buttons .tour-btn + .tour-btn { margin-left: 12px; } /* gap fallback */

/* Restart tour button — placed near "Search Services" title */
.tour-restart-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: #818cf8; /* Bright indigo — clearly visible */
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  margin-left: 10px;
  vertical-align: middle;
}
.tour-restart-btn:hover {
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.15);
}

/* ── Light theme adjustments for tour ── */
:root:not([data-theme="dark"]) .tour-tooltip,
:root:not([data-theme="dark"]) .tour-modal {
  background: #fff;
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
:root:not([data-theme="dark"]) .tour-tooltip::before { background: #fff; border-color: rgba(99, 102, 241, 0.2); }
:root:not([data-theme="dark"]) .tour-title,
:root:not([data-theme="dark"]) .tour-modal h2 { color: #1a1b2e; }
:root:not([data-theme="dark"]) .tour-text,
:root:not([data-theme="dark"]) .tour-modal p { color: rgba(0, 0, 0, 0.6); }
:root:not([data-theme="dark"]) .tour-btn-skip { color: rgba(0, 0, 0, 0.4); }
:root:not([data-theme="dark"]) .tour-btn-skip:hover { color: rgba(0, 0, 0, 0.7); }
:root:not([data-theme="dark"]) .tour-step-dot { background: rgba(0, 0, 0, 0.1); }
:root:not([data-theme="dark"]) .tour-action { background: rgba(99, 102, 241, 0.08); }
:root:not([data-theme="dark"]) .tour-restart-btn { color: #6366f1; background: rgba(99, 102, 241, 0.06); border-color: rgba(99, 102, 241, 0.2); }
:root:not([data-theme="dark"]) .tour-restart-btn:hover { color: #4f46e5; background: rgba(99, 102, 241, 0.12); border-color: rgba(99, 102, 241, 0.4); }

/* Dark theme fine-tuning */
[data-theme="dark"] .tour-tooltip,
[data-theme="dark"] .tour-modal {
  background: var(--card, #1a1b2e);
  border-color: rgba(99, 102, 241, 0.25);
}
[data-theme="dark"] .tour-tooltip::before { background: var(--card, #1a1b2e); }

/* ── Responsive: tablets (<=768px) ── */
@media (max-width: 768px) {
  .tour-tooltip {
    max-width: calc(100vw - 24px);
    min-width: 0;
    padding: 16px 18px;
    border-radius: 10px;
  }
  .tour-modal {
    padding: 24px 20px;
    border-radius: 14px;
    width: 92%;
  }
  .tour-modal-icon { font-size: 40px; margin-bottom: 12px; }
  .tour-modal h2 { font-size: 19px; margin-bottom: 10px; }
  .tour-modal p { font-size: 13px; margin-bottom: 18px; }
  .tour-title { font-size: 15px; }
  .tour-text { font-size: 12px; }
  .tour-btn { padding: 7px 14px; font-size: 12px; }
}

/* ── Responsive: phones (<=480px) ── */
@media (max-width: 480px) {
  .tour-tooltip {
    max-width: calc(100vw - 24px);
    padding: 18px 16px;
    border-radius: 10px;
    /* Center tooltip on mobile for better positioning */
    margin: 0 auto;
  }
  /* On small screens, hide arrow — tooltip is flush-positioned by JS */
  .tour-tooltip::before { display: none; }
  .tour-modal {
    padding: 24px 20px;
    width: 92%;
    max-width: 340px;
  }
  .tour-modal-icon { font-size: 40px; margin-bottom: 12px; }
  .tour-modal h2 { font-size: 18px; margin-bottom: 10px; }
  .tour-modal p { font-size: 13px; line-height: 1.6; margin-bottom: 18px; }
  .tour-title { font-size: 15px; margin-bottom: 8px; }
  .tour-text {
    font-size: 13px;
    line-height: 1.65;
    margin-bottom: 12px;
  }
  .tour-action { font-size: 12px; padding: 8px 12px; margin-bottom: 12px; }
  .tour-btn { padding: 8px 14px; font-size: 12.5px; }
  .tour-step-counter { font-size: 10px; margin-bottom: 12px; }
  .tour-step-dots {
    gap: 5px; /* Better spacing between dots */
  }
  .tour-buttons {
    gap: 10px; /* Better spacing between buttons */
  }
  .tour-highlight::after {
    top: -2px; right: -2px; bottom: -2px; left: -2px; /* tighter pulse ring on small screens */
    border-radius: 10px;
  }
  .tour-highlight {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4), 0 0 12px rgba(99, 102, 241, 0.15);
  }
}

/* ── Extra small phones (<=390px) — iPhone SE, iPhone 12 mini, etc. ── */
@media (max-width: 390px) {
  .tour-tooltip {
    max-width: calc(100vw - 20px);
    padding: 16px 14px;
  }
  .tour-modal {
    width: 94%;
    max-width: 320px;
    padding: 20px 18px;
  }
  .tour-title { font-size: 14.5px; }
  .tour-text { font-size: 12.5px; }
  .tour-btn { padding: 7px 12px; font-size: 12px; }
}

body.auth .services-page .hero-stats {
  margin: 0 0 32px;
}