/* * Good-Better-Best Generator Styles
 * Focus on clean visuals for the exportable area
 */

/* PREVIEW AREA BASE STYLES */
#proposalCaptureArea {
    transition: all 0.3s ease;
    transform-origin: top left; /* Critical for the scaling logic */
}

/* Container for the preview to handle scaling bounds */
#previewScrollWrapper {
    overflow: hidden;
    position: relative;
    transition: height 0.3s ease;
    width: 100%;
}

.pricing-card {
    transition: none !important;
    position: relative;
    background: #fff;
    min-height: 100%;
    overflow: hidden !important; /* Essential for the Ribbon to crop correctly */
}

/* Featured Card Scaling */
@media (max-width: 767px) {
    .pricing-card.featured-card {
        transform: scale(1) !important;
        z-index: 1 !important;
    }
}

/* LIST STYLING */
.list-icon {
    font-size: 1.1em;
    position: relative;
    top: 2px;
}



/* --- BADGE STYLES --- */

/* 1. Badge Placeholder - Ensures consistent header height */
.badge-placeholder {
    min-height: 24px; /* Reserves space for pill so headers align */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* 2. Diagonal Ribbon (Refined Alignment) */
.ribbon {
    position: absolute;
    top: 20px; 
    right: -30px; /* Pulls it further right to ensure edge contact */
    width: 130px; /* Widened to span the hypotenuse fully */
    height: 30px; 
    transform: rotate(45deg);
    background-color: #212529; 
    color: #fff;
    text-align: center;
    line-height: 30px; /* Vertically centers text */
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    z-index: 20;
    text-transform: uppercase;
    pointer-events: none;
}

/* 3. Centered Pill (Small) */
.badge-pill-header {
    display: inline-block;
    padding: 3px 10px;        
    border-radius: 50rem;
    font-size: 0.65rem;       
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    background-color: #212529;
    color: #fff;
    border: 1px solid #fff;   
    line-height: 1.2;
}

/* --- VIRTUAL DESKTOP MODE (For Mobile) --- */
.virtual-desktop-mode {
    width: 1000px !important; /* Force wide layout to trigger grid */
    max-width: none !important;
}
/* Force columns to sit side-by-side even on small screens when this class is active */
.virtual-desktop-mode .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}


/* --- BADGE COLOR UTILITIES --- */
/* Works for both Ribbon and Pill */

.bg-gold { background-color: #ffc107; color: #000; }
.bg-green { background-color: #198754; color: #fff; }
.bg-blue { background-color: #0d6efd; color: #fff; }
.bg-black { background-color: #212529; color: #fff; }
.bg-red { background-color: #dc3545; color: #fff; }
.bg-gray { background-color: #6c757d; color: #fff; }

/* Custom Combinations */
.bg-black-yellow { background-color: #000000; color: #ffc107; }
.bg-black-red { background-color: #000000; color: #dc3545; }
.bg-neon { background-color: #76ff03; color: #000000; }
.bg-white-blue { background-color: #ffffff; color: #0d6efd; }
.bg-white-red { background-color: #ffffff; color: #dc3545; }
.bg-white-black { background-color: #ffffff; color: #000000; }
.bg-blue-yellow { background-color: #0d6efd; color: #ffc107; }


/* --- PALETTE SYSTEM --- */

/* Default Vars */
:root {
    --col-good: #f8f9fa;
    --col-better: #0d6efd;
    --col-best: #ffc107;
    --txt-good: #212529;
    --txt-better: #ffffff;
    --txt-best: #212529;
    --sep-color: transparent; /* Default no separator */
}

/* Palette: CLASSIC (Silver / Blue / Gold) */
.palette-classic {
    --col-good: #e9ecef;   --txt-good: #495057;
    --col-better: #0d6efd; --txt-better: #ffffff;
    --col-best: #ffc107;   --txt-best: #212529;
}

/* Palette: ECO (Sand / Green / Forest) */
.palette-eco {
    --col-good: #f3e5f5;   --txt-good: #5d4037;
    --col-better: #198754; --txt-better: #ffffff;
    --col-best: #064e3b;   --txt-best: #ffffff;
}

/* Palette: BOLD (Gray / Red / Black) */
.palette-bold {
    --col-good: #dee2e6;   --txt-good: #212529;
    --col-better: #dc3545; --txt-better: #ffffff;
    --col-best: #000000;   --txt-best: #ffc107;
}

/* Palette: MODERN (Sky / Indigo / Teal) */
.palette-modern {
    --col-good: #caf0f8;   --txt-good: #023e8a;
    --col-better: #6610f2; --txt-better: #ffffff;
    --col-best: #0dcaf0;   --txt-best: #000000;
}

/* Palette: MINIMAL (White / White / White) */
.palette-minimal {
    --col-good: #ffffff;   --txt-good: #212529;
    --col-better: #ffffff; --txt-better: #0d6efd;
    --col-best: #ffffff;   --txt-best: #212529;
    --sep-color: #e9ecef;  /* Solid Light Gray Separator */
}

/* Palette: PROFESSIONAL (White / Navy / White) */
.palette-professional {
    --col-good: #ffffff;   --txt-good: #495057;
    --col-better: #032d60; --txt-better: #ffffff; /* Navy */
    --col-best: #ffffff;   --txt-best: #495057;
    --sep-color: #e9ecef;
}

/* Palette: MIDNIGHT (Slate / Blue / Dark Slate) */
.palette-midnight {
    --col-good: #e2e8f0;   --txt-good: #334155;
    --col-better: #3b82f6; --txt-better: #ffffff;
    --col-best: #0f172a;   --txt-best: #f8fafc;
}

/* Palette: TRUST (Sky / Cyan / Royal) */
.palette-trust {
    --col-good: #e0f2fe;   --txt-good: #0369a1;
    --col-better: #0284c7; --txt-better: #ffffff;
    --col-best: #0c4a6e;   --txt-best: #ffffff;
}

/* Palette: VIBRANT (Gray / Purple / Rose) */
.palette-vibrant {
    --col-good: #f3f4f6;   --txt-good: #1f2937;
    --col-better: #8b5cf6; --txt-better: #ffffff;
    --col-best: #e11d48;   --txt-best: #ffffff;
}

/* Palette: SUNSET (Orange / Red / Crimson) */
.palette-sunset {
    --col-good: #ffebd3;   --txt-good: #6d412e;
    --col-better: #fd7e14; --txt-better: #ffffff;
    --col-best: #dc3545;   --txt-best: #ffffff;
}

/* Palette: ROYAL (Lavender / Purple / Gold) */
.palette-royal {
    --col-good: #f3e5f5;   --txt-good: #4a148c;
    --col-better: #6610f2; --txt-better: #ffffff;
    --col-best: #ffc107;   --txt-best: #000000;
}


/* APPLYING PALETTE COLORS */

/* Header Backgrounds & Text Colors */
#cardGood .card-header {
    background-color: var(--col-good) !important;
    color: var(--txt-good) !important;
}
#cardGood { border-color: var(--col-good) !important; }
#cardGood h5, #cardGood h2, #cardGood .display-6 { color: var(--txt-good) !important; }

#cardBetter .card-header {
    background-color: var(--col-better) !important;
    color: var(--txt-better) !important;
}
#cardBetter { border-color: var(--col-better) !important; }
#cardBetter h5, #cardBetter h2, #cardBetter .display-6 { color: var(--txt-better) !important; }

#cardBest .card-header {
    background-color: var(--col-best) !important;
    color: var(--txt-best) !important;
}
#cardBest { border-color: var(--col-best) !important; }
#cardBest h5, #cardBest h2, #cardBest .display-6 { color: var(--txt-best) !important; }

/* Apply Separator Line Logic */
.palette-minimal .card-body, 
.palette-professional #cardGood .card-body,
.palette-professional #cardBest .card-body {
    border-top: 1px solid var(--sep-color) !important;
}

/* Minimal Palette Special Borders */
.palette-minimal #cardGood { border-color: #dee2e6 !important; }
.palette-minimal #cardBetter { border-color: #0d6efd !important; border-width: 2px !important; }
.palette-minimal #cardBest { border-color: #ffc107 !important; border-width: 2px !important; }
.palette-professional #cardGood { border-color: #dee2e6 !important; }
.palette-professional #cardBest { border-color: #dee2e6 !important; }


/* Icons */
#cardGood .list-icon { color: #6c757d; } 
.palette-bold #cardGood .list-icon { color: #212529; }
#cardBetter .list-icon { color: var(--col-better); }
#cardBest .list-icon { color: var(--col-best); }

/* Fix Icon visibility on White backgrounds */
.palette-minimal #cardBetter .list-icon { color: #0d6efd; }
.palette-minimal #cardBest .list-icon { color: #ffc107; }
.palette-professional #cardBest .list-icon { color: #032d60; }
.palette-bold #cardBest .list-icon { color: #000; }
.palette-royal #cardBest .list-icon { color: #6610f2; /* Purple icon on white body for Royal Best */ }

/* PREVIEW CARD HEADER ADJUSTMENTS */
#previewScrollWrapper .card-header {
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
    border-bottom: 0 !important;
}

/* Utils */
.ls-1 { letter-spacing: 1px; }
.border-end-lg { border-right: 1px solid #dee2e6; }
@media (max-width: 991px) {
    .border-end-lg { border-right: none; border-bottom: 1px solid #dee2e6; padding-bottom: 2rem; }
}