: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;
}

.mobile-menu-overlay.active {
    opacity: 1;
}

/* 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-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--gray-200);
}

.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);
}

.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;
}

/* 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;
}

.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;
}

.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;
}

.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 {
  background: #e0e7ff;
  color: #4338ca;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.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 */
.auth .user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 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);
}

.auth .user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue) 0%, #6366f1 100%);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.auth .user-details {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.auth .user-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--dark);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.auth .user-settings {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--muted);
  transition: all 0.2s;
  flex-shrink: 0;
}

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

.auth .user-settings svg {
  transition: transform 0.3s ease;
}

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

.auth .user-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--muted);
  transition: all 0.2s;
  flex-shrink: 0;
}

.auth .user-logout: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;
}
.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 {
  background: #e0e7ff;
  color: #4338ca;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.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);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}
.auth .spec-header:hover {
  background: #f8f9fa;
}
.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: nowrap; }
.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; }

/* ===== 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 */
.content-grid {
  display: grid;
  grid-template-columns: 800px 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1024px) {
  .content-grid {
    grid-template-columns: 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);
}

/* 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 */
.telegram-button {
  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;
  transition: transform 0.2s, box-shadow 0.2s;
}

.telegram-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 136, 204, 0.4);
}

.telegram-button .telegram-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;
}

.payment-table {
  width: 100%;
  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 */
.service-cell {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 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);
  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 */
.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);
}

.file-types-hint {
  margin-top: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.file-types-hint .drag-hint {
  font-size: 13px;
  color: var(--text);
}

.file-types-hint .formats-hint {
  font-size: 11px;
  color: var(--muted);
}

/* 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;
  background: 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);
}

.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;
}

/* 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;
  }

  .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 */
}

.blog-post-container {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

/* 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;
  color: var(--gray-600);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 24px;
  transition: color 0.2s ease;
}

.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;
}

.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-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;
}

.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 */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--gray-600);
}

.checkbox-label input[type="checkbox"] {
  display: none;
}

.checkmark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--gray-300);
  border-radius: 6px;
  background: var(--white);
  position: relative;
  transition: all 0.2s ease;
}

.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: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.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;
  }
}

/* 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);
}

/* 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;
}

.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 Mode Support (if user prefers) --- */
@media (prefers-color-scheme: dark) {
  /* Placeholder for future dark mode implementation */
  /* Uncomment and customize when needed */
  /*
  :root {
    --bg: #0f172a;
    --card: #1e293b;
    --text: #f1f5f9;
    --muted: #94a3b8;
    --line: #334155;
  }
  */
}

/* --- 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 {
  background: ghostwhite;
  cursor: not-allowed;
}

/* Hide system commission fields (Extra fee, Total) on addfunds page */
.commission-fields,
#order_extra_fee,
#order_total {
  display: none !important;
}

/* Scroll to top button */
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  background: var(--primary, #3b82f6);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 1000;
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background: var(--primary-dark, #2563eb);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);
}

.scroll-to-top:active {
  transform: translateY(0);
}

/* ============================================
   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;
  }
}