/* ============================================================
   CARRYPARCEL PREMIUM 3D DESIGN SYSTEM
   Standardized visuals for all public pages.
   ============================================================ */

:root {
    /* Brand Colors */
    --cp-primary: #0d6efd;
    --cp-primary-dark: #0b5ed7;
    --cp-primary-light: #eef5ff;
    --cp-secondary: #7291d2;
    --cp-accent: #3d8bff;

    /* Semantic Colors */
    --cp-success: #22c55e;
    --cp-warning: #f5a524;
    --cp-danger: #ef4056;
    --cp-info: #4f8dff;

    /* Neutral / Surfaces */
    --cp-ink: #12203a;
    --cp-ink-soft: #33415c;
    --cp-muted: #667797;
    --cp-border: #e6ecf9;
    --cp-surface: #ffffff;
    --cp-bg: #f7f9fc;
    --cp-navy: #0b213f;

    /* 3D Elevation Layers */
    --cp-shadow-l1: 0 4px 12px rgba(18, 32, 58, 0.05);
    --cp-shadow-l2: 0 12px 24px rgba(18, 32, 58, 0.08);
    --cp-shadow-l3: 0 24px 48px rgba(18, 32, 58, 0.12);
    --cp-shadow-l4: 0 40px 80px rgba(18, 32, 58, 0.18);

    /* Perspective & Depth */
    --cp-perspective: 1200px;
    --cp-transition: cubic-bezier(0.2, 0.8, 0.2, 1);
    --cp-speed: 0.4s;

    /* Border Radius */
    --cp-radius-sm: 8px;
    --cp-radius-md: 16px;
    --cp-radius-lg: 24px;
    --cp-radius-xl: 32px;
    --cp-radius-full: 9999px;

    /* Heuristic Fixes - Standardized Tokens */
    --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
    --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
    --text-md: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
    --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
    --text-xl: clamp(1.35rem, 1.2rem + 1vw, 1.75rem);
    --text-2xl: clamp(1.75rem, 1.5rem + 2vw, 2.5rem);
    --text-3xl: clamp(2.25rem, 2rem + 4vw, 4rem);

    --text-primary: #172033;
    --text-secondary: #5f6b7a;
    --text-muted: #7b8794;
    --text-inverse: #ffffff;
    --text-brand: #2563eb;
    --text-success: #16803c;
    --text-danger: #dc2626;
    --border-color: #e5e7eb;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;

    /* Background System Variables */
    --tb-bg-base: #F8FCFF;
    --tb-bg-cyan: #BFEFF1;
    --tb-bg-light: #DDF7F8;
    --tb-bg-center: #F8FDFF;
    --tb-bg-atmosphere: #D8EAFE;
    --tb-orb-opacity: 0.08;
    --tb-route-opacity: 0.03;
    --tb-shape-opacity: 0.06;

    /* Responsive Spacing Tokens */
    --spacing-xs: clamp(0.25rem, 0.2rem + 0.5vw, 0.5rem);
    --spacing-sm: clamp(0.5rem, 0.4rem + 1vw, 1rem);
    --spacing-md: clamp(1rem, 0.8rem + 2vw, 2rem);
    --spacing-lg: clamp(1.5rem, 1.2rem + 4vw, 4rem);
    --spacing-xl: clamp(2.5rem, 2rem + 8vw, 8rem);

    --section-padding: clamp(2rem, 5vw + 1rem, 8rem);
    --container-px: clamp(1rem, 0.8rem + 2vw, 2.5rem);
    --section-gap-mobile: 2rem;

    /* Stacking Context (Z-index Hierarchy) */
    --z-base: 1;
    --z-sticky: 100;
    --z-drawer: 200;
    --z-drawer-overlay: 190;
    --z-dropdown: 500;
    --z-floating: 1000;
    --z-modal-backdrop: 2000;
    --z-modal: 2010;
    --z-toast: 3000;
    --z-critical: 9999;
}

/* ============================================================
   LEGACY "tb-*" TOKEN BRIDGE
   ----------------------------------------------------------
   The public pages (about, team, support, contact, seo-*) and
   design-system.css itself reference a --tb-* token family that
   was never defined in this file — it only exists in the
   dashboard-scoped stylesheets (user-dashboard/css/common.css,
   admin_dashboard/css/admin.css), which public pages do not load.

   Undefined custom properties invalidate the *entire* declaration
   they appear in, so this was not a subtle tint problem:
     .btn-primary { background: linear-gradient(135deg, var(--tb-primary), var(--tb-accent)); }
   resolved to an invalid background (transparent), leaving white
   label text on a transparent button — invisible CTAs across every
   public page. Borders, shadows and hover transitions were lost the
   same way, which is what made these pages read as flat and unstyled.

   Everything below aliases to the --cp-* palette defined above, so
   the two families cannot drift. Values match user-dashboard's
   --tb-primary (#0D6EFD) to keep the public and dashboard surfaces
   visually identical.
   ============================================================ */
:root {
    --tb-primary: #0d6efd;
    --tb-primary-dark: #0b5ed7;
    --tb-accent: #3d8bff;
    --tb-primary-light: #eef5ff;

    --tb-surface: #ffffff;
    --tb-bg: #f7f9fc;
    --tb-bg-alt: #f2f7ff;
    --tb-border: #e6ecf9;
    --tb-bg-blue: #d8eafe;
    --tb-bg-navy: #0b213f;
    --tb-navy: #0b213f;

    --tb-ink: #12203a;
    --tb-ink-soft: #33415c;
    --tb-muted: #667797;

    --tb-success: #16803c;
    --tb-warning: #f5a524;
    --tb-danger: #dc2626;

    --tb-shadow-l1: 0 4px 12px rgba(18, 32, 58, 0.05);
    --tb-shadow-l2: 0 12px 24px rgba(18, 32, 58, 0.08);
    --tb-shadow-l3: 0 24px 48px rgba(18, 32, 58, 0.12);

    --tb-radius-md: 16px;
    --tb-radius-full: 9999px;
    --tb-perspective: 1200px;
    --tb-speed: 0.4s;
    --tb-transition: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ============================================================
   PREMIUM BACKGROUND SYSTEM
   ============================================================ */

.cp-bg-system,
.tb-bg-system {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    background-color: var(--tb-bg-base);
    pointer-events: none;
    display: block;
}

/* Layer 1: Base Tints (Center-Light Engine) */
.cp-bg-layer-base,
.tb-bg-layer-base {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 45%,
        var(--tb-bg-center) 0%,
        var(--tb-bg-light) 35%,
        #D7F3F5 65%,
        var(--tb-bg-cyan) 100%
    );
}

/* Layer 2: Atmospheric Light Fields */
.cp-bg-orb,
.tb-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(150px);
    opacity: var(--tb-orb-opacity);
    will-change: transform;
    animation: tb-orb-float 25s infinite alternate ease-in-out;
}

.cp-bg-orb-1,
.tb-bg-orb-1 {
    width: 800px;
    height: 800px;
    background: var(--tb-bg-atmosphere);
    top: -20%;
    left: -10%;
}

.cp-bg-orb-2,
.tb-bg-orb-2 {
    width: 700px;
    height: 700px;
    background: var(--tb-bg-cyan);
    bottom: -10%;
    right: -10%;
    animation-delay: -7s;
}

.cp-bg-orb-3,
.tb-bg-orb-3 {
    width: 600px;
    height: 600px;
    background: #EAF2FF;
    top: 30%;
    right: 5%;
    filter: blur(180px);
    animation-delay: -12s;
}

@keyframes tb-orb-float {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(20px, 30px) scale(1.05); }
}

/* Layer 3: Route Motif */
.cp-bg-route-svg,
.tb-bg-route-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: var(--tb-route-opacity);
    stroke: var(--tb-bg-blue);
}

/* Layer 4: Floating Shapes */
.cp-bg-shape,
.tb-bg-shape {
    position: absolute;
    border: 1px solid var(--tb-bg-blue);
    border-radius: 50%;
    opacity: var(--tb-shape-opacity);
    animation: tb-shape-float 15s infinite alternate ease-in-out;
}

@keyframes tb-shape-float {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-20px) rotate(10deg); }
}

/* Page Specific Overrides */
body[data-page="about"] .cp-bg-system,
body[data-page="about"] .tb-bg-system { --tb-bg-base: #f4f8ff; }
body[data-page="about"] .cp-bg-orb-1,
body[data-page="about"] .tb-bg-orb-1 { background: var(--tb-bg-navy); opacity: 0.08; }

body[data-page="how-it-works"] .cp-bg-orb-2,
body[data-page="how-it-works"] .tb-bg-orb-2 { background: var(--tb-bg-blue); }

body[data-page="safety"] .cp-bg-orb-3,
body[data-page="safety"] .tb-bg-orb-3 { background: #22c55e; opacity: 0.05; }

body[data-page="faq"] .cp-bg-system,
body[data-page="faq"] .tb-bg-system { --tb-bg-base: #ffffff; --tb-orb-opacity: 0.05; }

/* Dark Section Background Utility */
.tb-dark-section-bg {
    background: linear-gradient(155deg, #071A3D 0%, #0B2A63 50%, #0A376F 100%);
    position: relative;
    overflow: hidden;
}

.tb-dark-section-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(13, 110, 253, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

/* ============================================================
   RESPONSIVE UTILITIES
   ============================================================ */

.container {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: var(--container-px);
}

.stack-mobile {
    display: flex;
    flex-direction: column;
}

@media (min-width: 769px) {
    .stack-mobile {
        flex-direction: row;
    }
}

.hide-mobile {
    display: none !important;
}

@media (min-width: 769px) {
    .hide-mobile {
        display: block !important;
    }
}

.show-mobile {
    display: block !important;
}

@media (min-width: 769px) {
    .show-mobile {
        display: none !important;
    }
}

.text-center-mobile {
    text-align: center;
}

@media (min-width: 769px) {
    .text-center-mobile {
        text-align: inherit;
    }
}

/* Fluid Typography */
.text-fluid-xs { font-size: clamp(0.7rem, 0.6rem + 0.5vw, 0.75rem); }
.text-fluid-sm { font-size: clamp(0.8rem, 0.75rem + 0.5vw, 0.85rem); }
.text-fluid-base { font-size: clamp(0.875rem, 0.8rem + 0.5vw, 1rem); }
.text-fluid-lg { font-size: clamp(1rem, 0.9rem + 1vw, 1.25rem); }
.text-fluid-xl { font-size: clamp(1.25rem, 1rem + 2vw, 1.75rem); }
.text-fluid-2xl { font-size: clamp(1.5rem, 1.25rem + 3vw, 2.5rem); }
.text-fluid-3xl { font-size: clamp(1.75rem, 1.5rem + 5vw, 4rem); }

/* Absolute Text Utilities */
.tb-text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-text-break {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.tb-force-wrap {
    white-space: normal !important;
}

.tb-no-wrap {
    white-space: nowrap !important;
}

/* Section Spacing Logic */
.section-p {
    padding-block: var(--section-padding);
}

.section-pt { padding-top: var(--section-padding); }
.section-pb { padding-bottom: var(--section-padding); }

/* 3D Container Primitives */
.depth-container {
    perspective: var(--tb-perspective);
    transform-style: preserve-3d;
}

.depth-card {
    background: var(--tb-surface);
    border-radius: var(--tb-radius-md);
    border: 1px solid var(--tb-border);
    box-shadow: var(--tb-shadow-l1);
    transition: transform var(--tb-speed) var(--tb-transition),
                box-shadow var(--tb-speed) var(--tb-transition);
    transform-style: preserve-3d;
    will-change: transform, box-shadow;
}

.depth-card:hover {
    transform: translateZ(10px) translateY(-5px);
    box-shadow: var(--tb-shadow-l3);
    border-color: rgba(13, 110, 253, 0.2);
}

/* Base Button System */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.7rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s var(--tb-transition);
}

.btn-primary {
    background: linear-gradient(135deg, var(--tb-primary), var(--tb-accent));
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(13, 110, 253, 0.3);
}

.btn-secondary {
    background: var(--tb-surface);
    color: var(--tb-primary);
    border-color: var(--tb-primary-light);
}

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

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover {
    background: var(--tb-bg);
    color: var(--tb-primary);
}

.btn-danger {
    background: var(--tb-danger);
    color: #ffffff;
}

/* Premium Buttons (keeping existing for backward compatibility but mapping to system) */
.tb-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--tb-primary), var(--tb-accent));
    color: #fff;
    border: none;
    border-radius: var(--tb-radius-full);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.25);
    transition: all 0.3s var(--tb-transition);
    position: relative;
    overflow: hidden;
}

.tb-btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 28px rgba(13, 110, 253, 0.35);
}

.tb-btn-primary:active {
    transform: translateY(-1px) scale(0.98);
}

.tb-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background: var(--tb-surface);
    color: var(--tb-primary);
    border: 2px solid var(--tb-primary-light);
    border-radius: var(--tb-radius-full);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s var(--tb-transition);
}

.tb-btn-secondary:hover {
    background: var(--tb-primary-light);
    border-color: var(--tb-primary);
    transform: translateY(-2px);
}

/* Glassmorphism Classes */
.glass-surface {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark-glass {
    background: rgba(11, 33, 63, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(13, 110, 253, 0.2); }
    50% { box-shadow: 0 0 40px rgba(13, 110, 253, 0.4); }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* Typography Scale */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    color: var(--tb-ink);
    font-weight: 700;
}

.gradient-text {
    background: linear-gradient(135deg, var(--tb-primary), var(--tb-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Global Scroll Progress Bar */
#cpScrollProgress,
#tbScrollProgress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--tb-primary), var(--tb-accent));
    z-index: 9999;
    transition: width 0.1s ease-out;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
    #cpScrollProgress,
    #tbScrollProgress { transition: none !important; }
}

/* Utility Classes - Premium Micro-interactions */
.transition-premium {
    transition: all var(--tb-speed) var(--tb-transition);
}

.hover-lift {
    transition: transform var(--tb-speed) var(--tb-transition), box-shadow var(--tb-speed) var(--tb-transition);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--tb-shadow-l3);
}

.glow-primary:hover {
    box-shadow: 0 0 20px rgba(13, 110, 253, 0.4);
}

.glow-success:hover {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
}

.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--tb-radius-md);
}

/* Empty State Styling */
.tb-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
}

.tb-empty-icon {
    font-size: 4rem;
    color: var(--tb-muted);
    opacity: 0.3;
    margin-bottom: var(--spacing-md);
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.05));
}

.tb-empty-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--tb-ink-soft);
    margin-bottom: var(--spacing-xs);
}

.tb-empty-desc {
    font-size: var(--text-sm);
    color: var(--tb-muted);
    max-width: 300px;
}