/* ========================================================
   Richmond Hill Publishers - Official Design System & Theme
   Palette:
   - forestGreen: #173E32
   - antiqueGold: #C9A354
   - warmIvory:   #F8F4E8
   - charcoal:    #252C29
   - mutedSage:   #9DAF9D
   - deepForest:  #102D25
   - paleSage:    #E7ECE3
   - softCream:   #FCFAF5
   Fonts:
   - display:     'Cormorant Garamond', Georgia, serif
   - body:        'Manrope', -apple-system, BlinkMacSystemFont, sans-serif
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  --forest-green: #173E32;
  --antique-gold: #C9A354;
  --antique-gold-hover: #D4AF37;
  --antique-gold-dark: #A68030;
  --warm-ivory: #F8F4E8;
  --charcoal: #252C29;
  --muted-sage: #9DAF9D;
  --deep-forest: #102D25;
  --pale-sage: #E7ECE3;
  --soft-cream: #FCFAF5;

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ========================================================
   Lenis Smooth Scrolling
   ======================================================== */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* ========================================================
   Base Typography & Master Headings (Cormorant Garamond)
   ======================================================== */
body {
  font-family: var(--font-body) !important;
  background-color: var(--soft-cream) !important;
  color: var(--charcoal);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Master Heading typography: Cormorant Garamond across ALL headings & sub-spans */
h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 *,
.font-display,
.font-display *,
.jost,
.jost *,
[class*="text-secondary"].jost,
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  letter-spacing: -0.015em;
}

h1 {
  font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
  line-height: 1.15;
}

h2 {
  font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem);
  line-height: 1.2;
}

h3 {
  font-size: clamp(1.35rem, 2vw + 0.5rem, 1.85rem);
  line-height: 1.25;
}

/* Body copy typography: Manrope */
p,
a,
button,
input,
textarea,
select,
label,
td,
th {
  font-family: var(--font-body) !important;
}

/* Headings on light backgrounds default to Forest Green or Charcoal */
body>div h1,
body>div h2,
body>div h3,
section:not(.bg-primary):not(.bg-secondary):not(.bg-slate-700) h1,
section:not(.bg-primary):not(.bg-secondary):not(.bg-slate-700) h2,
section:not(.bg-primary):not(.bg-secondary):not(.bg-slate-700) h3 {
  color: var(--forest-green);
}

/* Headings with explicit gray-900 class on light background */
h2.text-gray-900,
h3.text-gray-900 {
  color: var(--forest-green) !important;
}

/* Subtitle and intro paragraph contrast */
p.text-gray-600,
p.text-gray-500 {
  color: #3b4540 !important;
}

/* ========================================================
   DARK SECTIONS & HERO FONT COLOR SYSTEM
   Ensures crisp contrast on dark backgrounds
   ======================================================== */
.bg-primary,
.bg-secondary,
.bg-gray-900,
.bg-\[\#222E3E\],
div[class*="bg-primary"],
div[class*="bg-secondary"],
section[class*="bg-primary"],
section[class*="bg-secondary"],
div[class*="bg-[#222E3E]"],
.text-\[\#fff\],
.\!text-\[\#fff\] {
  color: var(--soft-cream) !important;
}

/* Headings in dark sections */
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-secondary h1,
.bg-secondary h2,
.bg-secondary h3,
.bg-secondary h4,
.bg-gray-900 h1,
.bg-gray-900 h2,
.bg-gray-900 h3,
.bg-gray-900 h4,
.bg-\[\#222E3E\] h1,
.bg-\[\#222E3E\] h2,
.bg-\[\#222E3E\] h3,
.bg-\[\#222E3E\] h4,
div[class*="bg-primary"] h1,
div[class*="bg-primary"] h2,
div[class*="bg-primary"] h3,
section[class*="bg-primary"] h1,
section[class*="bg-primary"] h2,
section[class*="bg-primary"] h3,
div[class*="bg-secondary"] h1,
div[class*="bg-secondary"] h2,
div[class*="bg-secondary"] h3,
div[class*="bg-[#222E3E]"] h1,
div[class*="bg-[#222E3E]"] h2,
div[class*="bg-[#222E3E]"] h3,
.text-\[\#fff\] h1,
.text-\[\#fff\] h2,
.text-\[\#fff\] h3,
.\!text-\[\#fff\] h1,
.\!text-\[\#fff\] h2,
.\!text-\[\#fff\] h3 {
  color: var(--soft-cream) !important;
}

/* Paragraphs & list items in dark sections */
.bg-primary p,
.bg-primary span:not(.text-secondary):not(.text-\[\#FB9E09\]),
.bg-primary li,
.bg-secondary p,
.bg-secondary span:not(.text-secondary):not(.text-\[\#FB9E09\]),
.bg-secondary li,
.bg-gray-900 p,
.bg-gray-900 span:not(.text-secondary),
.bg-gray-900 li,
.bg-\[\#222E3E\] p,
.bg-\[\#222E3E\] span:not(.text-secondary),
.bg-\[\#222E3E\] li,
div[class*="bg-primary"] p,
section[class*="bg-primary"] p,
div[class*="bg-secondary"] p,
section[class*="bg-secondary"] p,
div[class*="bg-[#222E3E]"] p,
section[class*="bg-[#222E3E]"] p,
.text-\[\#fff\] p,
.\!text-\[\#fff\] p,
.text-\[\#fff\] span:not(.text-secondary),
.\!text-\[\#fff\] span:not(.text-secondary) {
  color: var(--warm-ivory) !important;
}

/* Contact form inputs on dark background */
.bg-secondary input,
.bg-secondary textarea,
div[class*="bg-secondary"] input,
div[class*="bg-secondary"] textarea,
.ant-input-affix-wrapper {
  background-color: #FFFFFF !important;
  color: var(--charcoal) !important;
  border-radius: 8px !important;
}

/* ========================================================
   TAILWIND COLOR PALETTE MAPPING
   ======================================================== */
.bg-primary {
  background-color: var(--forest-green) !important;
}

.bg-secondary {
  background-color: var(--forest-green) !important;
}

.bg-\[\#FB9E09\],
.bg-\[\#fb9e09\] {
  background: linear-gradient(135deg, #D4AF37 0%, #C9A354 50%, #B88E3E 100%) !important;
  color: #102D25 !important;
  font-weight: 700;
  border: 1px solid rgba(201, 163, 84, 0.4);
}

.bg-\[\#FB9E09\]:hover,
.bg-\[\#fb9e09\]:hover {
  background: linear-gradient(135deg, #E2C17C 0%, #D4AF37 100%) !important;
  box-shadow: 0 6px 20px rgba(201, 163, 84, 0.4) !important;
}

.bg-\[\#222E3E\] {
  background-color: var(--deep-forest) !important;
  color: var(--soft-cream) !important;
  border: 1px solid rgba(201, 163, 84, 0.25);
}

.bg-\[\#222E3E\]:hover {
  background-color: var(--forest-green) !important;
}

.text-primary {
  color: var(--forest-green) !important;
}

.text-secondary {
  color: var(--antique-gold) !important;
}

.text-\[\#FB9E09\],
.text-\[\#fb9e09\],
.\!text-\[\#FB9E09\] {
  color: var(--antique-gold) !important;
}

/* Gray section backgrounds mapped to Warm Ivory / Soft Cream */
.bg-\[\#F4F4F4\],
.bg-\[\#F0F0F0\],
.bg-\[\#F1F1F1\],
.bg-gray-50 {
  background-color: var(--warm-ivory) !important;
}

.bg-white {
  background-color: var(--soft-cream) !important;
}

/* ========================================================
   TARGET SECTION 1: WHY AUTHORS CHOOSE TO WORK WITH US?
   (in index.html: "Why Work With Us?")
   ======================================================== */
section:has(h2:contains("Why Work With Us")),
section.bg-\[\#F0F0F0\]:has(.border-2.border-\[\#395D41\]) {
  background-color: var(--warm-ivory) !important;
}

/* The Grid Cards in normal state */
.border-2.border-\[\#395D41\] {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(201, 163, 84, 0.35) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(23, 62, 50, 0.06) !important;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.border-2.border-\[\#395D41\] h3 {
  color: var(--forest-green) !important;
  font-weight: 700 !important;
  transition: color 0.3s ease !important;
}

.border-2.border-\[\#395D41\] p,
.border-2.border-\[\#395D41\] p.text-sm {
  color: var(--charcoal) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  transition: color 0.3s ease !important;
}

/* Hover state: Luxury Dark Forest Green with Gold & White text */
.border-2.border-\[\#395D41\]:hover {
  background: var(--forest-green) !important;
  border-color: var(--antique-gold) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(23, 62, 50, 0.24) !important;
}

.border-2.border-\[\#395D41\]:hover h3 {
  color: var(--antique-gold) !important;
}

.border-2.border-\[\#395D41\]:hover p,
.border-2.border-\[\#395D41\]:hover p.text-sm {
  color: var(--soft-cream) !important;
}

.border-2.border-\[\#395D41\]:hover img {
  filter: brightness(1.2) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) !important;
}

/* ========================================================
   TARGET SECTION 2: GENRE EXPERTISE ACROSS FICTION & NON-FICTION
   (in index.html)
   ======================================================== */
div[class*="rounded-xl border border-[#CCCCCC]"],
.grid div.flex.bg-\[\#F1F1F1\] {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(201, 163, 84, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 18px rgba(23, 62, 50, 0.05) !important;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

div[class*="rounded-xl border border-[#CCCCCC]"] h3,
.grid div.flex.bg-\[\#F1F1F1\] h3 {
  color: var(--forest-green) !important;
  font-weight: 700 !important;
  transition: color 0.3s ease !important;
}

/* Override washed-out #828282 in normal state */
div[class*="rounded-xl border border-[#CCCCCC]"] p,
div[class*="rounded-xl border border-[#CCCCCC]"] p.text-\[\#828282\],
.grid div.flex.bg-\[\#F1F1F1\] p,
.grid div.flex.bg-\[\#F1F1F1\] p.text-\[\#828282\] {
  color: var(--charcoal) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  transition: color 0.3s ease !important;
}

/* Hover state: Forest green background with gold heading and soft-cream text */
div[class*="rounded-xl border border-[#CCCCCC]"]:hover,
.grid div.flex.bg-\[\#F1F1F1\]:hover {
  background: var(--forest-green) !important;
  border-color: var(--antique-gold) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(23, 62, 50, 0.22) !important;
}

div[class*="rounded-xl border border-[#CCCCCC]"]:hover h3,
.grid div.flex.bg-\[\#F1F1F1\]:hover h3 {
  color: var(--antique-gold) !important;
}

div[class*="rounded-xl border border-[#CCCCCC]"]:hover p,
div[class*="rounded-xl border border-[#CCCCCC]"]:hover p.text-\[\#828282\],
.grid div.flex.bg-\[\#F1F1F1\]:hover p,
.grid div.flex.bg-\[\#F1F1F1\]:hover p.text-\[\#828282\] {
  color: var(--soft-cream) !important;
}

/* ========================================================
   TARGET SECTION 3: CLIENT SUCCESS STORIES
   (Transforming Ideas into Bestsellers in index.html)
   ======================================================== */
.w-full.bg-gray-50:has(.slick-slider) {
  background-color: var(--warm-ivory) !important;
}

.w-full.bg-gray-50 h2 {
  color: var(--forest-green) !important;
}

.w-full.bg-gray-50 p.text-gray-500 {
  color: var(--charcoal) !important;
  font-size: 15px !important;
}

/* Dark Testimonial Cards */
.bg-gray-900.text-white {
  background: linear-gradient(145deg, #173E32 0%, #102D25 100%) !important;
  border: 1.5px solid var(--antique-gold) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 32px rgba(16, 45, 37, 0.35) !important;
}

.bg-gray-900.text-white svg {
  color: var(--antique-gold) !important;
}

.bg-gray-900.text-white h3,
.slick-slide .bg-gray-900 h3 {
  color: var(--antique-gold) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.bg-gray-900.text-white p,
.slick-slide .bg-gray-900 p {
  color: var(--warm-ivory) !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}

/* Light Testimonial Cards */
.slick-slide .bg-white.text-gray-800 {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(201, 163, 84, 0.35) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(23, 62, 50, 0.08) !important;
}

.slick-slide .bg-white.text-gray-800 svg {
  color: var(--forest-green) !important;
}

.slick-slide .bg-white.text-gray-800 h3 {
  color: var(--forest-green) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.slick-slide .bg-white.text-gray-800 p {
  color: var(--charcoal) !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}

/* ========================================================
   TARGET SECTIONS 4 & 5: SKILLED PROFESSIONALS FOR EVERY GENRE & STORY
   (in book-editing.html, book-marketing.html, book-publishing.html)
   ======================================================== */
/* Section Description in Header */
p.text-slate-300 {
  color: var(--warm-ivory) !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
}

/* Container */
.bg-slate-700.rounded-b-2xl {
  background-color: var(--deep-forest) !important;
  border: 1.5px solid rgba(201, 163, 84, 0.3) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25) !important;
}

/* Grid Cards inside */
.bg-slate-700 .bg-\[\#fff\],
div[class*="bg-slate-700"] div[class*="bg-[#fff]"] {
  background-color: #FFFFFF !important;
  border: 1.5px solid rgba(201, 163, 84, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Title */
.bg-slate-700 .bg-\[\#fff\] h3,
.bg-slate-700 .bg-\[\#fff\] h3.text-slate-800 {
  color: var(--forest-green) !important;
  font-weight: 700 !important;
  transition: color 0.25s ease !important;
}

/* Body Text - fix low contrast #828282 */
.bg-slate-700 .bg-\[\#fff\] p,
.bg-slate-700 .bg-\[\#fff\] p.text-\[\#828282\] {
  color: var(--charcoal) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  transition: color 0.25s ease !important;
}

/* Icon Container */
.bg-slate-700 .bg-orange-100 {
  background-color: var(--warm-ivory) !important;
  border: 1px solid rgba(201, 163, 84, 0.35) !important;
}

/* Hover State */
.bg-slate-700 .bg-\[\#fff\]:hover,
div[class*="bg-slate-700"] div[class*="bg-[#fff]"]:hover {
  transform: translateY(-5px) scale(1.02) !important;
  border-color: var(--antique-gold) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25), 0 0 25px rgba(201, 163, 84, 0.2) !important;
}

.bg-slate-700 .bg-\[\#fff\]:hover h3,
.bg-slate-700 .bg-\[\#fff\]:hover h3.text-slate-800 {
  color: var(--antique-gold) !important;
}

.bg-slate-700 .bg-\[\#fff\]:hover p,
.bg-slate-700 .bg-\[\#fff\]:hover p.text-\[\#828282\] {
  color: var(--charcoal) !important;
}

/* ========================================================
   TARGET SECTION 6: OUR STREAMLINED PUBLISHING PROCESS
   (in pricing-plans.html)
   ======================================================== */
/* Process Cards */
.grid.md\:grid-cols-2.lg\:grid-cols-4 .border-2.border-\[\#395D41\] {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(201, 163, 84, 0.35) !important;
  border-radius: 18px !important;
}

/* Step Number Circle */
.grid.md\:grid-cols-2.lg\:grid-cols-4 .bg-secondary.w-16.h-16 {
  background-color: var(--forest-green) !important;
  border: 2px solid var(--antique-gold) !important;
  box-shadow: 0 4px 14px rgba(23, 62, 50, 0.2) !important;
  transition: all 0.3s ease !important;
}

.grid.md\:grid-cols-2.lg\:grid-cols-4 .bg-secondary.w-16.h-16 span {
  color: #FFFFFF !important;
}

/* Step Title */
.grid.md\:grid-cols-2.lg\:grid-cols-4 .border-2.border-\[\#395D41\] h3 {
  color: var(--forest-green) !important;
  font-weight: 700 !important;
}

/* Step Description */
.grid.md\:grid-cols-2.lg\:grid-cols-4 .border-2.border-\[\#395D41\] p {
  color: var(--charcoal) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

/* Process Hover State */
.grid.md\:grid-cols-2.lg\:grid-cols-4 .border-2.border-\[\#395D41\]:hover {
  background: var(--forest-green) !important;
  border-color: var(--antique-gold) !important;
  transform: translateY(-8px) !important;
  box-shadow: 0 18px 40px rgba(23, 62, 50, 0.28) !important;
}

.grid.md\:grid-cols-2.lg\:grid-cols-4 .border-2.border-\[\#395D41\]:hover .bg-secondary.w-16.h-16 {
  background-color: var(--antique-gold) !important;
  border-color: #FFFFFF !important;
  transform: scale(1.1);
}

.grid.md\:grid-cols-2.lg\:grid-cols-4 .border-2.border-\[\#395D41\]:hover .bg-secondary.w-16.h-16 span {
  color: #102D25 !important;
}

.grid.md\:grid-cols-2.lg\:grid-cols-4 .border-2.border-\[\#395D41\]:hover h3 {
  color: var(--antique-gold) !important;
}

.grid.md\:grid-cols-2.lg\:grid-cols-4 .border-2.border-\[\#395D41\]:hover p {
  color: var(--soft-cream) !important;
}

/* ========================================================
   TARGET SECTION 7: AFFORDABLE PUBLISHING PACKAGES
   (in pricing-plans.html)
   ======================================================== */
.grid.md\:grid-cols-2.lg\:grid-cols-3 .border-2.border-\[\#395D41\] {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(201, 163, 84, 0.35) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 28px rgba(23, 62, 50, 0.08) !important;
}

/* Package Title */
.grid.md\:grid-cols-2.lg\:grid-cols-3 .border-2.border-\[\#395D41\] h3 {
  color: var(--forest-green) !important;
  font-weight: 700 !important;
  font-size: 24px !important;
}

/* Inner Pricing Box */
.grid.md\:grid-cols-2.lg\:grid-cols-3 .bg-gray-100 {
  background-color: var(--warm-ivory) !important;
  border: 1px solid rgba(201, 163, 84, 0.3) !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
}

.grid.md\:grid-cols-2.lg\:grid-cols-3 .bg-gray-100 p {
  color: var(--charcoal) !important;
}

.grid.md\:grid-cols-2.lg\:grid-cols-3 .bg-gray-100 span.font-bold {
  color: var(--forest-green) !important;
  font-weight: 800 !important;
}

.grid.md\:grid-cols-2.lg\:grid-cols-3 .bg-gray-100 p.text-gray-600 {
  color: #4A564F !important;
}

.grid.md\:grid-cols-2.lg\:grid-cols-3 .bg-gray-100 p.text-secondary {
  color: var(--antique-gold-dark) !important;
  font-weight: 700 !important;
}

/* Feature Checkmarks and Text */
.grid.md\:grid-cols-2.lg\:grid-cols-3 li span.text-secondary {
  color: var(--antique-gold) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}

.grid.md\:grid-cols-2.lg\:grid-cols-3 li span.text-gray-700 {
  color: var(--charcoal) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}

/* Pricing Card Hover State: Luxury Deep Green with Glowing Gold */
.grid.md\:grid-cols-2.lg\:grid-cols-3 .border-2.border-\[\#395D41\]:hover {
  background: var(--forest-green) !important;
  border-color: var(--antique-gold) !important;
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 48px rgba(23, 62, 50, 0.32) !important;
}

.grid.md\:grid-cols-2.lg\:grid-cols-3 .border-2.border-\[\#395D41\]:hover h3 {
  color: var(--antique-gold) !important;
}

.grid.md\:grid-cols-2.lg\:grid-cols-3 .border-2.border-\[\#395D41\]:hover .bg-gray-100 {
  background-color: var(--deep-forest) !important;
  border-color: var(--antique-gold) !important;
}

.grid.md\:grid-cols-2.lg\:grid-cols-3 .border-2.border-\[\#395D41\]:hover .bg-gray-100 p {
  color: var(--soft-cream) !important;
}

.grid.md\:grid-cols-2.lg\:grid-cols-3 .border-2.border-\[\#395D41\]:hover .bg-gray-100 span.font-bold {
  color: var(--antique-gold) !important;
}

.grid.md\:grid-cols-2.lg\:grid-cols-3 .border-2.border-\[\#395D41\]:hover .bg-gray-100 p.text-gray-600 {
  color: var(--muted-sage) !important;
}

.grid.md\:grid-cols-2.lg\:grid-cols-3 .border-2.border-\[\#395D41\]:hover .bg-gray-100 p.text-secondary {
  color: #E2C17C !important;
}

.grid.md\:grid-cols-2.lg\:grid-cols-3 .border-2.border-\[\#395D41\]:hover li span.text-secondary {
  color: var(--antique-gold) !important;
}

.grid.md\:grid-cols-2.lg\:grid-cols-3 .border-2.border-\[\#395D41\]:hover li span.text-gray-700 {
  color: var(--soft-cream) !important;
}

/* ========================================================
   HIGH-CONVERTING PINE BOOK PUBLISHING STYLE POPUP MODAL
   ======================================================== */
.rh-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(16, 45, 37, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 999999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.rh-modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.rh-modal-card {
  width: 100%;
  max-width: 980px;
  max-height: 94vh;
  overflow-y: auto;
  background: var(--soft-cream);
  border-radius: 24px;
  border: 2px solid var(--antique-gold);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45), 0 0 50px rgba(201, 163, 84, 0.25);
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  position: relative;
  transform: scale(0.92) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rh-modal-overlay.active .rh-modal-card {
  transform: scale(1) translateY(0);
}

@media (max-width: 860px) {
  .rh-modal-card {
    grid-template-columns: 1fr;
    max-height: 90vh;
  }

  .rh-modal-showcase {
    display: none !important;
  }
}

.rh-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--soft-cream);
  border: 1.5px solid var(--antique-gold);
  color: var(--charcoal);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: all 0.25s ease;
}

.rh-modal-close:hover {
  background: var(--forest-green);
  color: var(--antique-gold);
  transform: rotate(90deg);
}

/* Modal Form Wrap */
.rh-modal-form-wrap {
  padding: 34px 34px 28px;
}

.rh-modal-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.rh-modal-logo {
  max-width: 175px;
  height: auto;
  object-fit: contain;
}

.rh-modal-timer-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(201, 163, 84, 0.15);
  border: 1px solid var(--antique-gold);
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--forest-green);
  letter-spacing: 0.5px;
}

.rh-modal-timer-badge strong {
  color: #B88E3E;
  font-family: monospace;
  font-size: 13px;
}

.rh-modal-title {
  font-family: var(--font-display) !important;
  font-size: clamp(23px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--forest-green);
  line-height: 1.2;
  margin-bottom: 8px;
}

.rh-gold-text {
  color: var(--antique-gold);
  font-style: italic;
}

.rh-modal-desc {
  font-size: 13px;
  color: #404c46;
  margin-bottom: 18px;
  line-height: 1.5;
}

/* Form Layout */
.rh-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 540px) {
  .rh-form-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.rh-input-group {
  margin-bottom: 12px;
  position: relative;
}

.rh-input-group label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--charcoal);
  margin-bottom: 4px;
}

.rh-input-control {
  width: 100%;
  padding: 10px 13px;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(157, 175, 157, 0.45);
  border-radius: 10px;
  font-size: 13px;
  color: var(--charcoal);
  transition: all 0.25s ease;
  font-family: var(--font-body) !important;
  box-sizing: border-box;
}

.rh-input-control:focus {
  outline: none;
  border-color: var(--antique-gold);
  box-shadow: 0 0 0 3px rgba(201, 163, 84, 0.2);
}

/* Gleaming Shimmer Submit Button */
.rh-modal-btn {
  width: 100%;
  padding: 13px 24px;
  margin-top: 8px;
  background: linear-gradient(135deg, #E2C17C 0%, #C9A354 50%, #B88E3E 100%);
  color: #102D25;
  font-weight: 800;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border: 1px solid rgba(201, 163, 84, 0.6);
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(201, 163, 84, 0.35);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.rh-modal-btn:hover {
  background: linear-gradient(135deg, #F3D99E 0%, #E2C17C 50%, #C9A354 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(201, 163, 84, 0.5);
}

.rh-btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-25deg);
  animation: rhShine 3.5s infinite;
}

@keyframes rhShine {
  0% {
    left: -100%;
  }

  30% {
    left: 160%;
  }

  100% {
    left: 160%;
  }
}

.rh-modal-trust-row {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #526058;
}

.rh-trust-dot {
  color: var(--antique-gold);
}

/* Modal Showcase Panel (Right Column) */
.rh-modal-showcase {
  background: linear-gradient(160deg, #173E32 0%, #102D25 100%);
  padding: 34px 28px;
  border-top-right-radius: 22px;
  border-bottom-right-radius: 22px;
  border-left: 1.5px solid rgba(201, 163, 84, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.rh-showcase-logo {
  max-width: 170px;
  height: auto;
  margin-bottom: 18px;
}

.rh-showcase-title {
  font-family: var(--font-display) !important;
  font-size: 21px;
  font-weight: 700;
  color: var(--antique-gold);
  line-height: 1.25;
  margin-bottom: 8px;
}

.rh-showcase-desc {
  font-size: 12.5px;
  color: var(--pale-sage);
  line-height: 1.55;
  margin-bottom: 16px;
}

.rh-perks-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rh-perks-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--soft-cream);
  font-weight: 500;
}

.rh-perk-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(201, 163, 84, 0.2);
  border: 1px solid var(--antique-gold);
  color: var(--antique-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  flex-shrink: 0;
}

.rh-showcase-footer {
  padding-top: 14px;
  border-top: 1px solid rgba(201, 163, 84, 0.25);
  text-align: center;
}

.rh-rating-stars {
  color: var(--antique-gold);
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 2px;
}

.rh-rating-text {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--soft-cream);
  margin-bottom: 8px;
}

.rh-showcase-phone {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--antique-gold);
  text-decoration: none;
  transition: color 0.2s ease;
}

.rh-showcase-phone:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

/* Floating Special Offer Trigger Pill */
.rh-floating-badge {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999998;
  background: linear-gradient(135deg, #173E32 0%, #102D25 100%);
  border: 1.5px solid var(--antique-gold);
  border-radius: 9999px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(201, 163, 84, 0.25);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rh-floating-badge:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), 0 0 30px rgba(201, 163, 84, 0.45);
}

.rh-badge-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--antique-gold);
  box-shadow: 0 0 0 0 rgba(201, 163, 84, 0.7);
  animation: rhPulse 2s infinite;
}

@keyframes rhPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(201, 163, 84, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(201, 163, 84, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(201, 163, 84, 0);
  }
}

.rh-badge-content {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.rh-badge-tag {
  color: var(--antique-gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1.1;
}

.rh-badge-main {
  color: var(--soft-cream);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Footer Styling */
footer,
div.bg-primary:has(div.grid) {
  background-color: var(--forest-green) !important;
  color: var(--soft-cream) !important;
  border-top: 2px solid var(--antique-gold);
}

/* Floating Live Chat Trigger Pill (Bottom Left) */
.rh-floating-chat {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 999998;
  background: linear-gradient(135deg, #173E32 0%, #102D25 100%);
  border: 1.5px solid var(--antique-gold);
  border-radius: 9999px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(201, 163, 84, 0.25);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rh-floating-chat:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), 0 0 30px rgba(201, 163, 84, 0.45);
}

.rh-chat-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: rhPulseGreen 2s infinite;
}

@keyframes rhPulseGreen {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.rh-chat-content {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.rh-chat-title {
  color: var(--soft-cream);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.rh-chat-status {
  color: #86EFAC;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 2px;
}

.bg-secondary .popupMain h2,
.bg-secondary .popupMain h3,
.bg-secondary .popupMain p {
  color: #102D25 !important;
}

.popupMain #normal_login ::placeholder {
  color: #3b4540;
}

#normal_login ::placeholder {
  color: #FFFFFF;
}