/* ============================================
   Patriot Pest Control — Unified Brand CSS
   Brand Guide v1: Patriot Red, Freedom Blue, 
   Clean White, Stealth Gray, Olive Green
   ============================================ */

:root {
    --pp-red: #B22222;
    --pp-blue: #1A1F71;
    --pp-white: #FFFFFF;
    --pp-gray: #4A4A4A;
    --pp-olive: #4B5320;
}

/* ---- Fonts (Brand Guide: Montserrat headings, Open Sans body) ---- */
body { font-family: "Open Sans", sans-serif !important; }
h1, h2, h3, h4, h5, h6 { font-family: "Montserrat", sans-serif !important; }

/* ---- Brand Color Overrides ---- */

/* Freedom Blue replaces all blue-900, indigo-900, purple-900 */
.bg-blue-900 { background-color: #1A1F71 !important; }
.bg-indigo-900 { background-color: #1A1F71 !important; }
.bg-purple-900 { background-color: #1A1F71 !important; }

/* Freedom Blue replaces blue-600/indigo-600 */
.bg-blue-600 { background-color: #1A1F71 !important; }
.hover\:bg-blue-700:hover { background-color: #151866 !important; }

/* Patriot Red replaces red-600 */
.bg-red-600 { background-color: #B22222 !important; }
.hover\:bg-red-700:hover { background-color: #9A1C1C !important; }
.text-red-600 { color: #B22222 !important; }
.border-red-600 { border-color: #B22222 !important; }

/* Olive Green replaces green-600 (veteran/military accent) */
.bg-green-600 { background-color: #4B5320 !important; }
.hover\:bg-green-700:hover { background-color: #3E4519 !important; }
.text-green-500 { color: #4B5320 !important; }
.text-green-600 { color: #4B5320 !important; }

/* Stealth Gray for secondary text */
.text-gray-400 { color: #6B7280 !important; }
.text-gray-500 { color: #374151 !important; }
.text-gray-600 { color: #1F2937 !important; }

/* ---- Gradient Overrides (kill purple/indigo/pink, use brand colors) ---- */
.from-blue-900 { --tw-gradient-from: #1A1F71 !important; }
.via-indigo-900 { --tw-gradient-via: #1A1F71 !important; --tw-gradient-stops: var(--tw-gradient-from), #1A1F71, var(--tw-gradient-to) !important; }
.via-blue-900 { --tw-gradient-via: #1A1F71 !important; }
.to-purple-900 { --tw-gradient-to: #1A1F71 !important; }
.from-blue-600 { --tw-gradient-from: #1A1F71 !important; }
.via-blue-600 { --tw-gradient-via: #1A1F71 !important; }
.to-indigo-700 { --tw-gradient-to: #1A1F71 !important; }
.to-purple-600 { --tw-gradient-to: #1A1F71 !important; }
.from-blue-500 { --tw-gradient-from: #2A2F91 !important; }
.to-indigo-600 { --tw-gradient-to: #2A2F91 !important; }
.via-indigo-700 { --tw-gradient-via: #1A1F71 !important; }
.via-indigo-600 { --tw-gradient-via: #2A2F91 !important; }
.via-purple-600 { --tw-gradient-via: #1A1F71 !important; }
.from-red-600 { --tw-gradient-from: #B22222 !important; }
.from-purple-500 { --tw-gradient-from: #1A1F71 !important; }
.to-pink-600 { --tw-gradient-to: #1A1F71 !important; }
.from-purple-50 { --tw-gradient-from: #F0F0F2 !important; }
.to-pink-50 { --tw-gradient-to: #F0F0F2 !important; }
.from-indigo-50 { --tw-gradient-from: #EEEEF2 !important; }
.to-violet-50 { --tw-gradient-to: #EEEEF2 !important; }
.from-blue-50 { --tw-gradient-from: #EEEEF4 !important; }
.to-indigo-50 { --tw-gradient-to: #EEEEF2 !important; }
.to-blue-50 { --tw-gradient-to: #EEEEF4 !important; }
.from-cyan-50 { --tw-gradient-from: #EEEEF4 !important; }
.from-orange-50 { --tw-gradient-from: #F5EEE8 !important; }
.to-amber-50 { --tw-gradient-to: #F5EEE8 !important; }
.from-yellow-50 { --tw-gradient-from: #F5F2E8 !important; }
.from-red-50 { --tw-gradient-from: #F5EEEE !important; }
.to-rose-50 { --tw-gradient-to: #F5EEEE !important; }
.from-green-50 { --tw-gradient-from: #EFF2EA !important; }
.to-emerald-50 { --tw-gradient-to: #EFF2EA !important; }
.from-blue-400 { --tw-gradient-from: #4A4A6A !important; }
.to-purple-400 { --tw-gradient-to: #4A4A6A !important; }
.from-green-400 { --tw-gradient-from: #4B5320 !important; }
.to-emerald-400 { --tw-gradient-to: #4B5320 !important; }

/* Override the combined gradient stops for hero */
.bg-gradient-to-br.from-blue-900.via-indigo-900.to-purple-900 {
    background-image: linear-gradient(to bottom right, #1A1F71, #1A1F71, #1A1F71) !important;
}
.bg-gradient-to-br.from-blue-900.via-indigo-900.to-blue-900 {
    background-image: linear-gradient(to bottom right, #1A1F71, #2A2F91, #1A1F71) !important;
}

/* ---- KILL soft/girly elements ---- */

/* Remove all animated blur circles — military doesn't do fuzzy blobs */
[class*="blur-3xl"][class*="rounded-full"] {
    display: none !important;
}

/* Kill the animate-pulse on decorative elements */
[class*="animate-pulse"][class*="blur"] {
    display: none !important;
}

/* Kill gradient text on light backgrounds — use solid brand colors instead */
.bg-clip-text.text-transparent {
    -webkit-text-fill-color: initial !important;
    background: none !important;
    -webkit-background-clip: initial !important;
}

/* But keep white text on dark sections — let the parent text-white class win */
section[class*="from-slate-900"] .bg-clip-text.text-transparent,
section[class*="from-blue-900"] .bg-clip-text.text-transparent,
section[class*="bg-gradient-to-br from-blue-900"] .bg-clip-text.text-transparent {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Yellow/gold gradient text on hero (military gold accent) — keep it */
.bg-clip-text.text-transparent[class*="from-yellow"] {
    color: #FBBF24 !important;
    -webkit-text-fill-color: #FBBF24 !important;
}

/* On light backgrounds, gradient text becomes Freedom Blue */
section:not([class*="from-slate-900"]):not([class*="from-blue-900"]) .bg-clip-text.text-transparent:not([class*="from-yellow"]):not([class*="from-green"]):not([class*="from-red"]) {
    color: #1A1F71 !important;
    -webkit-text-fill-color: #1A1F71 !important;
}

/* Green gradient text → Olive Green */
.bg-clip-text.text-transparent[class*="from-green"] {
    color: #4B5320 !important;
    -webkit-text-fill-color: #4B5320 !important;
}

/* Red gradient text → Patriot Red */
.bg-clip-text.text-transparent[class*="from-red"] {
    color: #B22222 !important;
    -webkit-text-fill-color: #B22222 !important;
}

/* Pink/purple icon boxes → Freedom Blue */
.bg-purple-500, [class*="from-purple-500"] { background-color: #1A1F71 !important; --tw-gradient-from: #1A1F71 !important; }
[class*="to-pink-600"] { --tw-gradient-to: #1A1F71 !important; }
.bg-pink-600 { background-color: #1A1F71 !important; }
.bg-purple-600 { background-color: #1A1F71 !important; }
[class*="from-indigo-500"] { --tw-gradient-from: #1A1F71 !important; }
[class*="to-violet-600"] { --tw-gradient-to: #1A1F71 !important; }
.bg-indigo-500 { background-color: #1A1F71 !important; }
.bg-violet-600 { background-color: #1A1F71 !important; }
.border-purple-600 { border-color: #1A1F71 !important; }
.border-purple-500 { border-color: #1A1F71 !important; }

/* Purple gradient backgrounds → neutral gray */
[class*="from-indigo-50"][class*="to-purple-50"] { background: #F0F0F2 !important; }
[class*="from-blue-50"][class*="to-purple-50"] { background: #F0F0F2 !important; }

/* Blog dropdown purple borders → Freedom Blue */
.blog-dropdown-menu { border-color: rgba(26, 31, 113, 0.2) !important; }
.blog-dropdown-item { border-color: rgba(26, 31, 113, 0.2) !important; }
.blog-dropdown-separator { background: linear-gradient(90deg, transparent, rgba(26, 31, 113, 0.2), transparent) !important; }
.blog-dropdown-menu-mobile { border-color: rgba(26, 31, 113, 0.15) !important; }

/* Pastel card hover backgrounds → light gray (military neutral) */
[class*="from-purple-50"][class*="to-pink-50"],
[class*="from-blue-50"][class*="to-indigo-50"],
[class*="from-orange-50"][class*="to-amber-50"],
[class*="from-cyan-50"][class*="to-blue-50"],
[class*="from-indigo-50"][class*="to-violet-50"],
[class*="from-green-50"][class*="to-emerald-50"],
[class*="from-yellow-50"][class*="to-orange-50"],
[class*="from-red-50"][class*="to-rose-50"] {
    background: #F5F5F5 !important;
}

/* Kill ANY remaining purple/pink/violet/indigo-50 backgrounds */
[class*="purple-50"], [class*="pink-50"], [class*="violet-50"], [class*="indigo-50"] {
    background-color: #F0F0F2 !important;
}

/* Kill any remaining purple text/border colors */
.text-purple-600, .text-purple-500, .text-violet-600, .text-indigo-600 { color: #1A1F71 !important; }
.text-pink-600, .text-pink-500 { color: #B22222 !important; }

/* Reduce border radius — military is sharp, not rounded */
.rounded-3xl { border-radius: 0.5rem !important; }
.rounded-2xl { border-radius: 0.375rem !important; }

/* Shadow — less soft shadow, more defined */
.shadow-2xl { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.2), 0 2px 4px -1px rgba(0,0,0,0.1) !important; }
.shadow-xl { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.15), 0 2px 4px -1px rgba(0,0,0,0.08) !important; }
.hover\:shadow-2xl:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.2), 0 2px 4px -1px rgba(0,0,0,0.1) !important; }

/* Kill the hover translateY bounce — military is steady */
.hover\:-translate-y-2:hover, .hover\:-translate-y-1:hover { transform: none !important; }

/* Gradient text (America's Premier heading etc.) */
.from-red-600.via-blue-600.to-purple-600 {
    --tw-gradient-from: #B22222 !important;
    --tw-gradient-via: #1A1F71 !important;
    --tw-gradient-to: #1A1F71 !important;
}

/* ---- Decorative Blobs (replace purple with subtle Freedom Blue) ---- */
.bg-purple-500\/20 { background-color: rgba(26, 31, 113, 0.15) !important; }
.bg-purple-500\/30 { background-color: rgba(26, 31, 113, 0.2) !important; }
.bg-indigo-500\/20 { background-color: rgba(26, 31, 113, 0.15) !important; }
.bg-indigo-500\/30 { background-color: rgba(26, 31, 113, 0.2) !important; }
.bg-blue-500\/30 { background-color: rgba(26, 31, 113, 0.2) !important; }
.bg-blue-500\/20 { background-color: rgba(26, 31, 113, 0.15) !important; }

/* ---- Tagline Styling ---- */
.pp-tagline {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: #4A4A4A;
    letter-spacing: 0.02em;
}

/* ---- Section Spacing (Sales Pad) ---- */
.pp-section {
    padding-top: 7rem;
    padding-bottom: 7rem;
}
.pp-section-sm {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.pp-section-lg {
    padding-top: 8rem;
    padding-bottom: 8rem;
}
.pp-section-gap {
    margin-top: 4rem;
}
@media (min-width: 1024px) {
    .pp-section { padding-top: 8rem; padding-bottom: 8rem; }
    .pp-section-lg { padding-top: 9rem; padding-bottom: 9rem; }
    .pp-section-gap { margin-top: 5rem; }
}

/* ---- Shared Component Styles ---- */
.pp-card {
    transition: all 0.3s ease;
}
.pp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Hero gradient using brand colors */
.pp-hero-gradient {
    background: linear-gradient(135deg, #1A1F71 0%, #2A2F91 50%, #1A1F71 100%);
}

/* Button styles using brand colors */
.pp-btn-primary {
    background-color: #1A1F71;
    color: #FFFFFF;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
}
.pp-btn-primary:hover {
    background-color: #151866;
}

.pp-btn-red {
    background-color: #B22222;
    color: #FFFFFF;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
}
.pp-btn-red:hover {
    background-color: #9A1C1C;
}

.pp-btn-olive {
    background-color: #4B5320;
    color: #FFFFFF;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
}
.pp-btn-olive:hover {
    background-color: #3E4519;
}

/* Print styles */
@media print {
    nav, footer, .mobile-menu, #cookie-consent, #name-popup, #pp-accessibility {
        display: none !important;
    }
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
}

/* ---- Accessibility Widget (A+ text resizer for elderly) ---- */
#pp-accessibility {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}
@media (max-width: 768px) {
    #pp-accessibility { bottom: 7rem; }
    #pp-accessibility { bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 1.5rem); }
}

/* ---- Magnifying Glass Lens ---- */
#pp-mag-lens {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483000;
    display: none;
    pointer-events: none;
}
#pp-mag-lens.active { display: block; }
#pp-mag-glass {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 5px solid #1A1F71;
    box-shadow: 0 8px 28px rgba(0,0,0,0.4), inset 0 0 0 3px #FFFFFF;
    overflow: hidden;
    background: #FFFFFF;
    pointer-events: none;
}
#pp-mag-inner {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
    background: #FFFFFF;
}
#pp-mag-handle { display: none; }
#pp-mag-lens.pp-mag-touch #pp-mag-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 232px;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #1A1F71;
    color: #FFFFFF;
    border: 3px solid #FFFFFF;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1;
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
#pp-mag-handle .pp-mag-hint {
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    font-size: 0.5rem;
    letter-spacing: 0.03em;
    margin-top: 2px;
    opacity: 0.85;
}
body.pp-mag-on, body.pp-mag-on * { cursor: zoom-in !important; }
body.pp-mag-on #pp-mag-handle, body.pp-mag-on #pp-mag-handle * { cursor: grab !important; }
#pp-a11y-toggle {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #1A1F71;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    transition: transform 0.2s, background 0.2s;
}
#pp-a11y-toggle:hover {
    background: #151866;
    transform: scale(1.1);
}
#pp-a11y-panel {
    display: none;
    background: #FFFFFF;
    border: 2px solid #1A1F71;
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    min-width: 240px;
    position: absolute;
    bottom: 4rem;
    right: 0;
}
#pp-a11y-panel.show { display: block; }
#pp-a11y-panel h4 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: #1A1F71;
    margin-bottom: 0.5rem;
}
.pp-a11y-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    background: #FFFFFF;
    color: #333;
    font-family: "Open Sans", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.pp-a11y-btn:hover { background: #f0f0f5; border-color: #1A1F71; }
.pp-a11y-btn.active { background: #1A1F71; color: #FFFFFF; border-color: #1A1F71; }
.pp-a11y-size-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.pp-a11y-size-btn {
    flex: 1; padding: 0.4rem;
    border: 1px solid #e0e0e0; border-radius: 0.5rem;
    background: #FFFFFF; cursor: pointer;
    font-family: "Montserrat", sans-serif; font-weight: 700;
    color: #1A1F71; transition: background 0.15s;
}
.pp-a11y-size-btn:hover { background: #f0f0f5; }
.pp-a11y-size-btn.active { background: #1A1F71; color: #FFFFFF; }
.pp-a11y-sep { height: 1px; background: #e0e0e0; margin: 0.5rem 0; }

/* Text size scaling — class is on <body>, so selector must be body.pp-text-* */
body.pp-text-lg { font-size: 1.15rem !important; }
body.pp-text-xl { font-size: 1.3rem !important; }
body.pp-text-2xl { font-size: 1.5rem !important; }
body.pp-text-lg small, body.pp-text-lg .text-xs { font-size: 0.85rem !important; }
body.pp-text-xl small, body.pp-text-xl .text-xs { font-size: 0.9rem !important; }
body.pp-text-2xl small, body.pp-text-2xl .text-xs { font-size: 0.95rem !important; }

/* High contrast mode — keep brand colors, boost readability */
body.pp-high-contrast { background: #FFFFFF !important; color: #000000 !important; }
body.pp-high-contrast nav { background: #1A1F71 !important; }
body.pp-high-contrast nav * { color: #FFFFFF !important; }
body.pp-high-contrast .bg-white { background: #FFFFFF !important; color: #000000 !important; }
body.pp-high-contrast .text-gray-900, body.pp-high-contrast .text-gray-800 { color: #000000 !important; }
body.pp-high-contrast .text-gray-500, body.pp-high-contrast .text-gray-600 { color: #333333 !important; }
body.pp-high-contrast .text-gray-400 { color: #555555 !important; }
body.pp-high-contrast a { color: #1A1F71 !important; text-decoration: underline !important; font-weight: 600 !important; }
body.pp-high-contrast .bg-blue-900, body.pp-high-contrast .bg-blue-600 { background: #1A1F71 !important; color: #FFFFFF !important; }
body.pp-high-contrast .bg-red-600 { background: #B22222 !important; color: #FFFFFF !important; }
body.pp-high-contrast .border-gray-200, body.pp-high-contrast .border-gray-300 { border-color: #666666 !important; }
body.pp-high-contrast .bg-gray-50, body.pp-high-contrast .bg-gray-100 { background: #EEEEEE !important; }

/* Reduced motion */
body.pp-reduced-motion * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }

/* ============================================
   PORTAL — Patriotic styling + font visibility
   ============================================ */

/* Portal body base — larger, more readable base font */
body { font-size: 1rem; line-height: 1.6; color: #1a1a1a; }

/* Portal nav — Freedom Blue with Patriot Red bottom stripe */
.pp-nav {
    background: linear-gradient(180deg, #1A1F71 0%, #151866 100%) !important;
    border-bottom: 3px solid #B22222 !important;
}
/* White stripe between blue and red for full flag effect */
.pp-nav::after {
    content: '';
    display: block;
    height: 2px;
    background: #FFFFFF;
    margin-top: -3px;
    opacity: 0.3;
}

/* Portal nav links — white text, clear hover */
.pp-nav a { color: #E8E8F0 !important; }
.pp-nav a:hover { color: #FFFFFF !important; }

/* Portal active nav link — Patriot Red accent */
.pp-nav .bg-blue-600 { background: #B22222 !important; color: #FFFFFF !important; }

/* Portal mobile nav strip */
.pp-nav .md\:hidden { border-top: 1px solid rgba(255,255,255,0.15); }

/* Portal cards — sharp military style */
.pp-portal-card {
    border-radius: 0.5rem;
    border-left: 4px solid #1A1F71;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Portal section headers — Freedom Blue with red underline */
.pp-portal-section-header {
    border-bottom: 3px solid #B22222;
    padding-bottom: 0.5rem;
}

/* Portal stat cards — patriotic accent borders */
.pp-stat-blue { border-left-color: #1A1F71 !important; }
.pp-stat-red { border-left-color: #B22222 !important; }
.pp-stat-olive { border-left-color: #4B5320 !important; }
.pp-stat-white { border-left-color: #666 !important; }

/* Portal text -- ensure minimum readable contrast */
.pp-portal-card .text-gray-500 { color: #555 !important; }
.pp-portal-card .text-gray-600 { color: #444 !important; }
.pp-portal-card .text-gray-900 { color: #111 !important; }

/* Sidebar link text -- dark on light background */
.pp-sidebar .sidebar-label { color: #1F2937 !important; font-weight: 500; }
.pp-sidebar a:hover .sidebar-label { color: #111827 !important; font-weight: 600; }
.pp-sidebar a.bg-blue-900 .sidebar-label { color: #FFFFFF !important; font-weight: 600; }
.pp-sidebar svg { color: #6B7280 !important; }
.pp-sidebar a:hover svg { color: #111827 !important; }
.pp-sidebar a.bg-blue-900 svg { color: #FFFFFF !important; }
.pp-sidebar .text-gray-700 { color: #1F2937 !important; }
.pp-sidebar a:hover .text-gray-700 { color: #111827 !important; }
.pp-sidebar a.bg-blue-900 .text-gray-700 { color: #FFFFFF !important; }
.pp-sidebar .text-gray-300 { color: #6B7280 !important; }
.pp-sidebar a:hover .text-gray-300 { color: #111827 !important; }
.pp-sidebar .text-gray-400 { color: #6B7280 !important; }
.pp-sidebar a:hover .text-gray-400 { color: #DC2626 !important; }

/* Portal badges — patriotic colors */
.pp-badge-blue { background: #1A1F71; color: #FFFFFF; }
.pp-badge-red { background: #B22222; color: #FFFFFF; }
.pp-badge-olive { background: #4B5320; color: #FFFFFF; }
.pp-badge-white { background: #FFFFFF; color: #1A1F71; border: 1px solid #1A1F71; }

/* Regular customer label — gold star (veteran premium customer) */
.pp-regular-customer {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #4B5320;
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-family: "Montserrat", sans-serif;
}

/* Non-regular customer label */
.pp-new-customer {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #E5E5E5;
    color: #555;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-family: "Montserrat", sans-serif;
}

/* A-Z search slider */
.pp-az-slider {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 0.5rem;
    background: #1A1F71;
    border-radius: 0.5rem;
}
.pp-az-slider button {
    width: 2rem;
    height: 2rem;
    border-radius: 0.25rem;
    background: transparent;
    color: #E8E8F0;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
}
.pp-az-slider button:hover { background: rgba(255,255,255,0.2); color: #FFFFFF; }
.pp-az-slider button.active { background: #B22222; color: #FFFFFF; }
.pp-az-slider button.disabled { opacity: 0.3; cursor: not-allowed; }

/* Live search input */
.pp-live-search {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 2px solid #1A1F71;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-family: "Open Sans", sans-serif;
    background: #FFFFFF;
    color: #1a1a1a;
}
.pp-live-search:focus { outline: none; border-color: #B22222; box-shadow: 0 0 0 3px rgba(178,34,34,0.15); }

/* Broadcast message indicator */
.pp-broadcast-badge {
    display: inline-block;
    background: #B22222;
    color: #FFFFFF;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   READ-ALOUD PLAYER + CONTEXT MENU
   ============================================ */

/* Read-aloud player bar — fixed at bottom of screen */
#pp-read-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1A1F71;
    color: #FFFFFF;
    z-index: 120;
    padding: 0.5rem 1rem;
    display: none;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
    border-top: 2px solid #B22222;
}
#pp-read-player.visible { display: flex; }

#pp-read-player .pp-rp-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.375rem;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}
#pp-read-player .pp-rp-btn:hover { background: rgba(255,255,255,0.3); }
#pp-read-player .pp-rp-btn.active { background: #B22222; }
#pp-read-player .pp-rp-btn svg { width: 1.25rem; height: 1.25rem; }

#pp-read-player .pp-rp-info {
    flex: 1;
    min-width: 0;
}
#pp-read-player .pp-rp-status {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#pp-read-player .pp-rp-progress {
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    margin-top: 0.35rem;
    overflow: hidden;
}
#pp-read-player .pp-rp-progress-bar {
    height: 100%;
    background: #B22222;
    border-radius: 2px;
    transition: width 0.3s;
}

#pp-read-player .pp-rp-close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.25rem;
    flex-shrink: 0;
}
#pp-read-player .pp-rp-close:hover { color: #FFFFFF; }

/* Right-click context menu for read aloud */
#pp-context-menu {
    position: fixed;
    z-index: 130;
    background: #FFFFFF;
    border: 2px solid #1A1F71;
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    padding: 0.25rem;
    min-width: 200px;
    display: none;
}
#pp-context-menu.visible { display: block; }
#pp-context-menu .pp-ctx-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-radius: 0.375rem;
    font-family: "Open Sans", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
    transition: background 0.12s;
}
#pp-context-menu .pp-ctx-item:hover { background: #1A1F71; color: #FFFFFF; }
#pp-context-menu .pp-ctx-item svg { width: 1rem; height: 1rem; flex-shrink: 0; }
#pp-context-menu .pp-ctx-sep { height: 1px; background: #e0e0e0; margin: 0.25rem 0; }
#pp-context-menu .pp-ctx-header {
    padding: 0.4rem 0.75rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #1A1F71;
    letter-spacing: 0.05em;
}

/* Highlight for element currently being read */
.pp-reading-highlight {
    background: rgba(178, 34, 34, 0.12) !important;
    border-left: 3px solid #B22222 !important;
    padding-left: 0.5rem !important;
    transition: background 0.2s, border-color 0.2s !important;
}

/* Per-word highlight during read-aloud */
.pp-read-word {
    transition: background 0.1s, color 0.1s;
    border-radius: 0.15rem;
}
.pp-read-word.pp-read-word-active {
    background: #B22222 !important;
    color: #FFFFFF !important;
    padding: 0 0.1rem;
}
/* In high contrast mode, use blue for word highlight instead */
body.pp-high-contrast .pp-read-word.pp-read-word-active {
    background: #1A1F71 !important;
    color: #FFFFFF !important;
}

/* ============================================
   GOOGLE PREFERRED SOURCE BAR
   ============================================ */

.pp-preferred-source-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(90deg, #1A1F71 0%, #2A2F91 50%, #1A1F71 100%);
    border-bottom: 2px solid #B22222;
    position: relative;
}

.pp-preferred-source-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #FFFFFF;
    color: #1A1F71;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
    border-radius: 0.375rem;
    text-decoration: none;
    border: 1px solid rgba(26, 31, 113, 0.15);
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
    white-space: nowrap;
}
.pp-preferred-source-btn:hover {
    background: #B22222;
    color: #FFFFFF;
    border-color: #B22222;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(178, 34, 34, 0.3);
}
.pp-preferred-source-btn:active { transform: translateY(0); }

.pp-ps-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.pp-ps-dismiss {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
    transition: color 0.15s;
}
.pp-ps-dismiss:hover { color: #FFFFFF; }

/* Heart like button */
.pp-heart-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: #FFFFFF;
    border-radius: 0.375rem;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    transition: all 0.2s;
}
.pp-heart-btn:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.05);
}
.pp-heart-btn svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s;
}
.pp-heart-btn.liked {
    background: #B22222;
    border-color: #B22222;
}
.pp-heart-btn.liked svg {
    transform: scale(1.2);
    animation: ppHeartPop 0.4s ease;
}
.pp-heart-btn.liked .pp-heart-text {
    font-size: 1rem;
    animation: ppTextGrow 0.3s ease;
}
@keyframes ppHeartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1.2); }
}
@keyframes ppTextGrow {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}
.pp-heart-text {
    font-size: 0.75rem;
    transition: font-size 0.2s;
}

/* Confetti drop */
.pp-confetti-piece {
    position: fixed;
    top: -20px;
    width: 10px;
    height: 14px;
    z-index: 9999;
    pointer-events: none;
    animation-name: ppConfettiFall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration: 2s;
}
@keyframes ppConfettiFall {
    0% { top: -20px; opacity: 1; transform: rotate(0deg); }
    100% { top: 100vh; opacity: 0.7; transform: rotate(720deg); }
}

/* Tip popup after clicking preferred source button */
.pp-ps-tip {
    display: none;
    background: #FFFFFF;
    color: #1A1F71;
    font-family: "Open Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(26, 31, 113, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 340px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.5rem;
    z-index: 55;
}
.pp-ps-tip.show {
    display: block;
    animation: ppTipFadeIn 0.3s ease;
}
.pp-ps-tip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #FFFFFF;
}
@keyframes ppTipFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 640px) {
    .pp-preferred-source-btn {
        font-size: 0.7rem;
        padding: 0.35rem 0.75rem;
    }
    .pp-preferred-source-bar { padding: 0.4rem 0.5rem; }
}