/*
 * Stoute Web Solutions — Nexus Cart Order Form
 *
 * Comprehensive brand overrides for the Vue-based Shadow DOM cart.
 * Brand: Deep Forest Green · Warm Amber · Warm Cream
 * Fonts: Plus Jakarta Sans (display) / Inter (body)
 *
 * This file is loaded INSIDE the Shadow DOM, so both variables
 * and element/class selectors work here.
 */


/* ==========================================================================
   1. CSS Variables — Brand Tokens
   ========================================================================== */

:host, :root {

    /* ── Primary — Deep Forest Green ── */
    --vl-primary:          #49782c;
    --vl-primary-lifted:   #395e23;
    --vl-primary-accented: #2f4c1e;

    /* ── Secondary — Warm Amber ── */
    --vl-secondary:          #d4881c;
    --vl-secondary-lifted:   #b86c15;
    --vl-secondary-accented: #985313;

    /* ── Success — Brand Green ── */
    --vl-success:          #49782c;
    --vl-success-lifted:   #395e23;
    --vl-success-accented: #2f4c1e;

    /* ── Info — Soft Blue ── */
    --vl-info:          #2563eb;
    --vl-info-lifted:   #1d4ed8;
    --vl-info-accented: #1e40af;

    /* ── Notice — Warm Amber ── */
    --vl-notice:          #d4881c;
    --vl-notice-lifted:   #b86c15;
    --vl-notice-accented: #985313;

    /* ── Warning — Warm Amber ── */
    --vl-warning:          #d4881c;
    --vl-warning-lifted:   #b86c15;
    --vl-warning-accented: #985313;

    /* ── Error — Soft Red ── */
    --vl-error:          #dc2626;
    --vl-error-lifted:   #b91c1c;
    --vl-error-accented: #991b1b;

    /* ── Grayscale ── */
    --vl-grayscale:          #6b7280;
    --vl-grayscale-lifted:   #4b5563;
    --vl-grayscale-accented: #374151;

    /* ── Neutral ── */
    --vl-neutral:          #374151;
    --vl-neutral-lifted:   #1f2937;
    --vl-neutral-accented: #111827;

    /* ── Text Colors — Warm-tinted ── */
    --vl-text:          #1a1a1a;
    --vl-text-lifted:   #374151;
    --vl-text-muted:    #6b7280;
    --vl-text-accented: #111827;
    --vl-text-inverted: #ffffff;

    /* ── Border Colors — Warm tones ── */
    --vl-border:         #e8e0d4;
    --vl-border-lifted:  #d9cebf;
    --vl-border-muted:   #f0eae0;
    --vl-border-accented:#c4b8a6;

    /* ── Background Colors — Warm Cream ── */
    --vl-bg:          #fefcf9;
    --vl-bg-muted:    #faf6f0;
    --vl-bg-lifted:   #ffffff;
    --vl-bg-accented: #f5efe6;
    --vl-bg-inverted: #1a1a1a;

    /* ── Typography ── */
    --vl-text-xs:  0.75rem;
    --vl-text-sm:  0.875rem;
    --vl-text-md:  1rem;
    --vl-text-lg:  1.125rem;
    --vl-letter-spacing: -0.01em;

    /* ── Rounding — Generous ── */
    --vl-rounding-sm: 0.5rem;
    --vl-rounding-md: 0.75rem;
    --vl-rounding-lg: 1rem;

    /* ── Spacing — Comfortable ── */
    --vl-outline-sm: 2px;
    --vl-outline-md: 3px;
    --vl-outline-lg: 4px;
    --vl-spacing: 0.25rem;

    /* ── Disabled State ── */
    --vl-disabled-opacity: 0.5;

    /* ── Font Override — Plus Jakarta Sans for display ── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* ==========================================================================
   2. Global Typography — Inside Shadow DOM
   ========================================================================== */

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings — Plus Jakarta Sans */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    letter-spacing: -0.025em;
}


/* ==========================================================================
   3. Product Group Headers — Tier Title & Description
   ========================================================================== */

/* Group title (e.g. "Managed WordPress Hosting")
   The cart uses Tailwind text-3xl / text-2xl for headings */
.text-3xl,
.text-2xl,
[class*="text-3xl"],
[class*="text-2xl"] {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}

/* Product group description */
.text-muted {
    line-height: 1.6;
}


/* ==========================================================================
   4. Product Cards — Match stoutewebsolutions.com /pricing
   ========================================================================== */

/*
 * Product cards use: "p-4 border-box flex flex-col border border-solid rounded-medium w-full"
 * We target .rounded-medium elements that are card-like containers.
 */

/* All rounded-medium bordered elements (product cards, input groups, etc.) */
.rounded-medium {
    border-radius: 1rem !important;
}

/* Product card containers — flex-col with border + padding */
.flex-col.rounded-medium,
.flex.flex-col.rounded-medium,
[class*="flex-col"][class*="rounded-medium"][class*="border-solid"] {
    border-radius: 1rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease !important;
    background-color: #fff;
}

.flex-col.rounded-medium:hover,
.flex.flex-col.rounded-medium:hover,
[class*="flex-col"][class*="rounded-medium"][class*="border-solid"]:hover {
    box-shadow: 0 8px 30px rgba(73, 120, 44, 0.1) !important;
    border-color: var(--vl-border-lifted) !important;
    transform: translateY(-2px);
}

/* Large rounding for larger containers */
.rounded-large {
    border-radius: 1rem !important;
}


/* ==========================================================================
   5. Product Name — Plan Number + Title Style
   ========================================================================== */

/* The cart uses .text-large.font-semibold for product titles */
.text-large.font-semibold,
.font-semibold.text-large,
[class*="text-large"][class*="font-semibold"] {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: #1a1a1a;
}

/* All font-semibold elements — slightly bolder display */
.font-semibold {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 600;
}


/* ==========================================================================
   6. Price Display — Bold, Large, Brand-Aligned
   ========================================================================== */

/* The cart uses .font-bold for prices (with !font-bold override) */
.font-bold,
[class*="font-bold"] {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    letter-spacing: -0.02em;
}

/* Large bold text = prices */
.text-large.font-bold,
[class*="font-bold"][class*="text-large"] {
    font-weight: 800 !important;
    letter-spacing: -0.03em;
    color: #1a1a1a;
}

/* Billing cycle / muted text */
.text-muted {
    color: var(--vl-text-muted);
}

.text-tiny,
.text-small {
    line-height: 1.5;
}


/* ==========================================================================
   7. Feature Lists — Green Checkmarks Style
   ========================================================================== */

/* Feature list items inside product cards */
ul, ol {
    line-height: 1.7;
}

ul li, ol li {
    line-height: 1.7;
    padding: 0.125rem 0;
}

/* SVG icons — ensure brand green for checks/bullets */
.text-primary svg,
.text-success svg,
[class*="text-primary"] svg,
[class*="text-success"] svg {
    color: #49782c !important;
}


/* ==========================================================================
   8. CTA Buttons — Gradient Primary, Outline Default
   ========================================================================== */

/*
 * Primary buttons use: "bg-{color} border-transparent text-inverted"
 * which becomes: bg-primary border-transparent text-inverted at runtime.
 * Also: "!bg-primary !text-inverted !border-transparent" for Order Now.
 */

/* Primary filled buttons — brand gradient */
.bg-primary,
[class*="bg-primary"]:not([class*="bg-primary/"]):not([class*="bg-primary-"]) {
    background: linear-gradient(135deg, #5e9639 0%, #395e23 100%) !important;
    border-color: transparent !important;
    border-radius: 0.75rem !important;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 14px rgba(73, 120, 44, 0.25) !important;
    transition: all 0.2s ease !important;
}

.bg-primary:hover,
[class*="bg-primary"]:not([class*="bg-primary/"]):not([class*="bg-primary-"]):hover {
    filter: brightness(1.1) !important;
    box-shadow: 0 6px 20px rgba(73, 120, 44, 0.35) !important;
    transform: translateY(-1px);
}

/* Hover state for primary-lifted */
.bg-primary-lifted,
[class*="hover\\:bg-primary-lifted"]:hover {
    background: linear-gradient(135deg, #5e9639 0%, #2f4c1e 100%) !important;
}

/* Outline / bordered buttons */
button.border-default,
a.border-default,
[class*="border"][class*="border-default"]:not(div) {
    border-radius: 0.75rem !important;
    transition: all 0.2s ease !important;
}

button.border-default:hover,
a.border-default:hover {
    border-color: #49782c !important;
    color: #49782c !important;
}


/* ==========================================================================
   9. Sidebar Categories (Outside Shadow DOM — via viewcart.tpl)
   ========================================================================== */

/* These target the standard_cart sidebar-categories include.
   Styled via viewcart.tpl inline <style> since they're outside the Shadow DOM. */


/* ==========================================================================
   10. Input Fields & Selects — Brand Focus Ring
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #7fb35d !important;
    box-shadow: 0 0 0 3px rgba(127, 179, 93, 0.15) !important;
    outline: none !important;
}


/* ==========================================================================
   11. Badges & Tags — Pill Shape, Brand Colors
   ========================================================================== */

/* Rounded-full pill badges */
.rounded-full.text-tiny,
.rounded-full.text-small,
[class*="rounded-full"][class*="text-tiny"],
[class*="rounded-full"][class*="text-small"] {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Primary-colored badges — don't apply gradient */
.bg-primary.rounded-full,
[class*="bg-primary"][class*="rounded-full"] {
    background: #49782c !important;
    box-shadow: none !important;
}


/* ==========================================================================
   12. Tabs & Navigation — Brand Active State
   ========================================================================== */

/* Tab-style navigation with border-bottom active indicator */
[class*="border-b-2"][class*="border-primary"],
[class*="border-b"][class*="border-primary"] {
    border-color: #49782c !important;
    color: #49782c !important;
}


/* ==========================================================================
   13. Tooltips & Popovers — Warm Theme
   ========================================================================== */

.tippy-box[data-theme~=vueless] {
    background-color: #1a1a1a;
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    border-radius: 0.5rem;
}


/* ==========================================================================
   14. Loading & Spinner States
   ========================================================================== */

/* Spinner color */
[class*="animate-spin"] {
    color: #49782c;
}

/* Skeleton / pulse loading */
[class*="animate-pulse"] {
    background-color: #f5efe6;
}


/* ==========================================================================
   15. Cart Summary / Checkout Section
   ========================================================================== */

/* Bottom bar / summary area */
[class*="border-t"][class*="border-muted"] {
    border-color: #e8e0d4 !important;
}

/* Total price in cart summary */
.font-bold.text-large,
[class*="font-bold"][class*="text-large"] {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-weight: 800 !important;
}


/* ==========================================================================
   16. Domain Search — Input + Button Combo
   ========================================================================== */

/* Large search input containers */
[class*="rounded-large"][class*="outline"] {
    border-radius: 1rem !important;
}

/* Inverted CTA bar (e.g. "Continue to checkout") */
[class*="rounded-large"][class*="bg-inverted"] {
    background-color: #1a1a1a !important;
    border-radius: 1rem !important;
}


/* ==========================================================================
   17. Scrollbar — Subtle Warm
   ========================================================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background-color: #d9cebf;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #c4b8a6;
}


/* ==========================================================================
   18. Selection Color
   ========================================================================== */

::selection {
    background-color: rgba(73, 120, 44, 0.15);
    color: #1a1a1a;
}