/* Package lander — scoped to body.page-package-detail (Phase 2A). Do not edit generated block in package_details.php; edit this file. */
/* ==========================================================================
   PRODRIVERS - PACKAGE DETAILS (PREMIUM SAAS STYLING)
   ========================================================================== */


/* Typography & Spacing */
body.page-package-detail .package-content { padding: 5rem 2rem; background: var(--bg-soft, #f8fafc); font-family: 'Inter', sans-serif; }
body.page-package-detail .package-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: 4rem; align-items: start; }
@media (max-width: 900px) { body.page-package-detail .package-grid { grid-template-columns: 1fr; gap: 3rem; } }

/* Hero Section */
body.page-package-detail .package-hero { position: relative; border-bottom: 1px solid rgba(255,255,255,0.1); }
body.page-package-detail .package-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(59, 130, 246, 0.15); color: #60a5fa; padding: 0.5rem 1.25rem; border-radius: 100px; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid rgba(59, 130, 246, 0.3); margin-bottom: 1.5rem; backdrop-filter: blur(4px); }
body.page-package-detail .hero-title { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 900; color: #ffffff; letter-spacing: -0.03em; margin-bottom: 1rem; line-height: 1.1; }
body.page-package-detail .hero-subtitle { font-size: 1.15rem; color: #cbd5e1; max-width: 700px; margin: 0 auto; line-height: 1.6; }

/* Left Column: Features */
body.page-package-detail .package-features h2 { font-size: 2rem; font-weight: 800; color: var(--text-main, #0f172a); margin: 0 0 2rem 0; letter-spacing: -0.02em; }
body.page-package-detail .rich-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-bottom: 4rem; }
body.page-package-detail .rich-feature { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.5rem; background: #ffffff; border-radius: 12px; border: 1px solid var(--border-light, #e2e8f0); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; }
body.page-package-detail .rich-feature:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: #cbd5e1; }
body.page-package-detail .feature-icon-box { background: #f0fdf4; color: var(--brand-primary, #16a34a); width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
body.page-package-detail .rich-feature-text h3 { margin: 0 0 0.5rem 0; font-size: 1.1rem; font-weight: 800; color: var(--text-main, #0f172a); }
body.page-package-detail .rich-feature-text p { margin: 0; font-size: 0.95rem; color: var(--text-muted, #475569); line-height: 1.5; }

/* BDE Section Cards */
body.page-package-detail .bde-card { background: #ffffff; border: 1px solid var(--border-light, #e2e8f0); border-radius: 16px; padding: 2.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); transition: transform 0.2s ease; }
body.page-package-detail .bde-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-color: #cbd5e1; }
body.page-package-detail .bde-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
body.page-package-detail .bde-list li { display: flex; gap: 0.75rem; color: var(--text-muted, #475569); font-size: 0.95rem; line-height: 1.5; font-weight: 500; }
body.page-package-detail .bde-list li svg { color: var(--brand-primary, #16a34a); flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; }

/* Insurance Box */
body.page-package-detail .insurance-box { margin-top: 4rem; padding: 2rem; background: linear-gradient(to right, #eff6ff, #f8fafc); border: 1px solid #bfdbfe; border-left: 4px solid #3b82f6; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
body.page-package-detail .insurance-box h3 { color: #1e3a8a; margin: 0 0 0.75rem 0; font-size: 1.25rem; font-weight: 800; display: flex; align-items: center; gap: 8px; }
body.page-package-detail .insurance-box p { color: #334155; margin: 0; line-height: 1.6; font-size: 1rem; font-weight: 500; }

/* Sticky Checkout Card (disabled when a map sits below in the same column — otherwise map scrolls under sticky card) */
body.page-package-detail .package-pricing-card { position: sticky; top: 2rem; background: #ffffff; border: 2px solid var(--border-light, #e2e8f0); border-radius: 16px; padding: 2.5rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
body.page-package-detail .package-grid--with-sidebar-map .package-pricing-card { position: static; top: auto; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08); }
body.page-package-detail .package-grid--with-sidebar-map .package-sidebar-map { margin-top: 2rem; position: relative; z-index: 1; }
body.page-package-detail .price-block { border-bottom: 1px dashed var(--border-light, #e2e8f0); padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
body.page-package-detail .btn-checkout { display: flex; align-items: center; justify-content: center; width: 100%; background: var(--brand-primary, #16a34a); color: white; padding: 1.25rem; border-radius: 8px; font-weight: 800; font-size: 1.1rem; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 4px 6px -1px rgba(22, 163, 74, 0.3); margin-top: 1rem; }
body.page-package-detail .btn-checkout:hover { background: #15803d; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(22, 163, 74, 0.4); color: white; }

/* Micro-Trust Area */
body.page-package-detail .trust-badges { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--bg-soft, #f8fafc); }
body.page-package-detail .trust-badges span { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted, #64748b); font-weight: 600; }
body.page-package-detail .trust-badges svg { color: var(--brand-primary, #16a34a); width: 16px; height: 16px; }

/* Fine Print */
body.page-package-detail .fine-print-box { margin-top: 4rem; padding: 2rem; background: #ffffff; border: 1px dashed #cbd5e1; border-radius: 12px; }
body.page-package-detail .fine-print-box h4 { margin: 0 0 0.5rem 0; font-size: 1rem; color: var(--text-main, #0f172a); font-weight: 800; }
body.page-package-detail .fine-print-box p { margin: 0; font-size: 0.85rem; color: var(--text-muted, #64748b); line-height: 1.6; }

/* BDE Dual-Option Layout */
body.page-package-detail .bde-choose-section { margin-top: 4rem; }
body.page-package-detail .bde-options-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 2rem; }
@media (max-width: 900px) { body.page-package-detail .bde-options-grid { grid-template-columns: 1fr; } }
body.page-package-detail .bde-option-card {
    background: #ffffff; border: 2px solid var(--border-light, #e2e8f0); border-radius: 16px; 
    padding: 2.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); 
    display: flex; flex-direction: column; transition: all 0.2s ease;
}
body.page-package-detail .bde-option-card:hover { border-color: var(--brand-primary, #16a34a); box-shadow: 0 10px 25px -5px rgba(22, 163, 74, 0.15); }
body.page-package-detail .bde-option-card.popular { border-color: var(--brand-primary); box-shadow: 0 8px 20px -4px rgba(22, 163, 74, 0.2); }
body.page-package-detail .bde-option-card .option-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px dashed var(--border-light); }
body.page-package-detail .bde-option-card .option-price { font-size: 2.5rem; font-weight: 900; color: var(--text-main); letter-spacing: -0.03em; margin: 1rem 0; }
body.page-package-detail .bde-option-card .option-cta { margin-top: auto; padding-top: 1.5rem; }
body.page-package-detail .bde-both-include { background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); border: 1px solid #bbf7d0; border-radius: 16px; padding: 2.5rem; margin-top: 4rem; }
body.page-package-detail .bde-both-include h3 { color: var(--text-main); font-size: 1.5rem; font-weight: 800; margin: 0 0 1.5rem 0; display: flex; align-items: center; gap: 0.75rem; }
body.page-package-detail .bde-both-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
body.page-package-detail .bde-both-item { display: flex; gap: 1rem; align-items: flex-start; }
body.page-package-detail .bde-both-item .icon { color: var(--brand-primary); flex-shrink: 0; }

/* Seniors: supplemental narrative (trust + education, matches premium package pages) */
body.page-package-detail .seniors-supplement { margin-top: 3rem; display: flex; flex-direction: column; gap: 1.5rem; }
body.page-package-detail .seniors-panel { background: #ffffff; border: 1px solid var(--border-light, #e2e8f0); border-radius: 14px; padding: 2rem 2rem 1.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }
body.page-package-detail .seniors-panel h3 { margin: 0 0 0.85rem 0; font-size: 1.25rem; font-weight: 800; color: var(--text-main, #0f172a); letter-spacing: -0.02em; }
body.page-package-detail .seniors-panel p { margin: 0 0 0.75rem 0; font-size: 0.98rem; color: var(--text-muted, #475569); line-height: 1.65; }
body.page-package-detail .seniors-panel p:last-child { margin-bottom: 0; }
body.page-package-detail .seniors-tip-list { list-style: none; padding: 0; margin: 0.5rem 0 0 0; display: flex; flex-direction: column; gap: 0.65rem; }
body.page-package-detail .seniors-tip-list li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.95rem; color: var(--text-muted, #475569); line-height: 1.5; font-weight: 500; }
body.page-package-detail .seniors-tip-list li svg { color: var(--brand-primary, #16a34a); flex-shrink: 0; margin-top: 3px; }
body.page-package-detail .seniors-contact-cta { margin-top: 0.25rem; padding: 1.75rem 2rem; background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); border: 1px solid #bbf7d0; border-radius: 14px; text-align: center; }
body.page-package-detail .seniors-contact-cta p { margin: 0 0 0.75rem 0; font-size: 0.98rem; color: var(--text-muted, #475569); line-height: 1.6; }
body.page-package-detail .seniors-contact-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; justify-content: center; align-items: center; font-weight: 700; font-size: 0.95rem; }
body.page-package-detail .seniors-contact-links a { color: var(--brand-primary, #15803d); text-decoration: none; }
body.page-package-detail .seniors-contact-links a:hover { text-decoration: underline; }

/* Refresher: G2 / G program switcher (separate URLs, unified UX) */
body.page-package-detail .refresher-program-switch { margin-bottom: 2rem; padding: 1.25rem 1.5rem; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border: 1px solid var(--border-light, #e2e8f0); border-radius: 14px; }
body.page-package-detail .refresher-switch-label { margin: 0 0 0.75rem 0; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; }
body.page-package-detail .refresher-switch-pills { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; }
body.page-package-detail .refresher-pill { display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.15rem; border-radius: 999px; font-size: 0.92rem; font-weight: 700; text-decoration: none; border: 2px solid var(--border-light, #e2e8f0); background: #fff; color: var(--text-main, #0f172a); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
body.page-package-detail .refresher-pill:hover { border-color: var(--brand-primary, #16a34a); box-shadow: 0 4px 12px -2px rgba(22, 163, 74, 0.2); color: var(--text-main, #0f172a); }
body.page-package-detail .refresher-pill.is-current { border-color: var(--brand-primary, #16a34a); background: #ecfdf5; color: #14532d; cursor: default; }
body.page-package-detail .refresher-hero-accent { margin: 1.25rem auto 0; max-width: 720px; padding: 0.9rem 1.2rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; font-size: 1.02rem; font-weight: 600; color: #e2e8f0; line-height: 1.55; }