/* ==========================================================================
   CUSTOM CSS ARCHITECTURE (Light & Dark Mode Compatible)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Variables & Base Typography Scaling
   -------------------------------------------------------------------------- */
:root {
    /* Base spacing variables for fluid layout scaling */
    --page-padding: 1.5rem;
    --component-gap: 1.5rem;
}

/* Global transitions for seamless theme toggling */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   2. Custom Canvas Background & Mesh Gradients
   -------------------------------------------------------------------------- */
body {
    background-image: 
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(236, 72, 153, 0.12) 0px, transparent 50%),
        radial-gradient(at 50% 100%, rgba(6, 182, 212, 0.10) 0px, transparent 50%);
    background-attachment: fixed;
    background-size: cover;
}

/* --------------------------------------------------------------------------
   3. Global Layout Wrappers
   -------------------------------------------------------------------------- */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

.page-wrapper {
    width: 100%;
    max-width: 80rem; /* 1280px max desktop container */
    margin: 0 auto;
    padding: var(--page-padding);
}

/* --------------------------------------------------------------------------
   4. Glassmorphism Card Utilities
   -------------------------------------------------------------------------- */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease-in-out;
}

.dark .glass-card {
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card:hover {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.25);
}

/* --------------------------------------------------------------------------
   5. Mobile Compact Overrides (Forced Overrides for Checkout & Portal Pages)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    :root {
        --page-padding: 0.5rem; /* Ultra-compact page margins on phones */
        --component-gap: 0.5rem; /* Tight spacing matrix */
    }

    html {
        font-size: 13.5px !important; /* Scale typography down for mobile viewports */
    }

    /* Target main containers, checkout sections, order summaries, and form blocks */
    .p-3\.5, .p-4, .p-6, .p-8, .sm\:p-8,
    form .rounded-xl, form .rounded-3xl, 
    .bg-white, .dark\:bg-slate-900 {
        padding: 0.75rem !important; /* Forces compact padding across form panels */
        border-radius: 0.875rem !important; /* Sleek, space-efficient corner curves */
    }

    /* Force tight flex & grid gap spacing */
    .grid, .flex, .space-y-2, .space-y-3, .space-y-4, .space-y-5, .space-y-6 {
        gap: var(--component-gap) !important;
    }

    /* Compact Headings & Text Headers */
    h1, .text-3xl, .text-2xl {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.25rem !important;
    }

    h2, .text-xl, .text-lg, .text-base {
        font-size: 0.95rem !important;
        line-height: 1.25 !important;
        padding-bottom: 0.35rem !important;
    }

    /* Form Controls & Inputs (Full Width, Compact Padding) */
    input[type="text"], 
    input[type="email"], 
    input[type="tel"], 
    textarea, 
    select {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.8rem !important;
        border-radius: 0.5rem !important;
    }

    textarea {
        height: 2.75rem !important; /* Reduces billing address height while maintaining readability */
    }

    /* Subscription Cycle Radio Cards (Compact Grid Cells) */
    form .grid-cols-3 label {
        padding: 0.4rem 0.5rem !important;
        border-radius: 0.5rem !important;
    }

    form .grid-cols-3 label span {
        font-size: 0.75rem !important;
        line-height: 1 !important;
    }

    /* Order Summary Breakdown Items */
    .border-t {
        padding-top: 0.5rem !important;
        margin-top: 0.5rem !important;
    }

    /* Action Buttons & Submit Triggers */
    button[type="submit"], 
    button {
        padding-top: 0.55rem !important;
        padding-bottom: 0.55rem !important;
        font-size: 0.8rem !important;
        border-radius: 0.625rem !important;
    }
}