/* ================================================================
   MIDNIGHT BLUE & GOLD — GLOBAL THEME
   Loaded after redesign-pro.css. Overrides all rp-* and blue-*
   tokens with the new Midnight Blue & Gold palette.
   ================================================================ */

/* ================================================================
   DESIGN TOKENS — Midnight Blue & Gold
   ================================================================ */
:root {
  /* --- Spec variables (used in new CSS below) --- */
  --color-primary:        #4173D6;
  --color-primary-dark:   #232D42;
  --color-primary-light:  #80A1E4;
  --color-accent:         #F3AE24;

  --color-bg-dark:   #0B1220;
  --color-bg-soft:   #F6F8FC;
  --color-white:     #FFFFFF;

  --color-text-main: #111827;
  --color-text-muted:#64748B;
  --color-border:    #D8E0EF;

  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 12px 40px rgba(35, 45, 66, 0.12);

  /* --- Override rp-* tokens --- */
  --rp-navy:    #0B1220;
  --rp-dark:    #232D42;
  --rp-blue:    #4173D6;
  --rp-blue-d:  #2D57B0;
  --rp-blue-l:  #EDF2FC;
  --rp-blue-m:  #D6E3F8;
  --rp-gray:    #F6F8FC;
  --rp-border:  #D8E0EF;
  --rp-text:    #111827;
  --rp-muted:   #64748B;
  --rp-white:   #FFFFFF;

  /* Shadows */
  --rp-sh-sm:   0 2px 10px rgba(35, 45, 66, 0.07);
  --rp-sh-md:   0 6px 28px rgba(35, 45, 66, 0.11);
  --rp-sh-lg:   0 18px 56px rgba(35, 45, 66, 0.16);
  --rp-sh-xl:   0 28px 80px rgba(35, 45, 66, 0.22);
  --rp-sh-blue: 0 8px 32px rgba(65, 115, 214, 0.30);

  /* --- Override blue-* tokens (styles.css Tailwind overrides) --- */
  --blue-primary:    #4173D6;
  --blue-secondary:  #2D57B0;
  --blue-light:      #EDF2FC;
  --blue-card:       #D6E3F8;
  --blue-mid:        #80A1E4;
  --blue-dark:       #232D42;
  --blue-deepnav:    #0B1220;
  --blue-border:     #D8E0EF;
  --blue-accent-bg:  #F0F4FD;
  --text-dark:       #111827;
  --text-muted:      #64748B;
}

/* ================================================================
   GOLD CTA BUTTON SYSTEM
   ================================================================ */
.rp-btn-gold,
.site-client-btn {
  background: linear-gradient(135deg, #F3AE24, #d9950d) !important;
  color: #111827 !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 8px 28px rgba(243, 174, 36, 0.38) !important;
  transition: all 220ms ease !important;
}
.rp-btn-gold:hover,
.site-client-btn:hover {
  background: linear-gradient(135deg, #ffbe3d, #F3AE24) !important;
  box-shadow: 0 12px 36px rgba(243, 174, 36, 0.52) !important;
  transform: translateY(-3px) !important;
  color: #111827 !important;
}

/* ================================================================
   PROMO BAR
   ================================================================ */
.site-header__promo {
  background: linear-gradient(90deg, #0B1220 0%, #232D42 60%, #4173D6 100%) !important;
}

/* ================================================================
   NAVBAR HOVER STATES
   (overrides inline styles so we don't need JS-based color flips)
   ================================================================ */
.nav-link:hover, .nav-link:focus {
  color: #4173D6 !important;
  background: #EDF2FC !important;
}
.nav-link.active {
  color: #4173D6 !important;
  background: #EDF2FC !important;
}
.site-dropdown {
  border-top-color: #4173D6 !important;
}
.site-dropdown__link:hover {
  background: #EDF2FC !important;
  color: #4173D6 !important;
}

/* Dropdown icon boxes */
.site-dropdown__link span[style*="background:#EDF2FC"],
.site-dropdown__link span[style*="background: #EDF2FC"] {
  background: #EDF2FC !important;
}

/* ================================================================
   HERO SECTION
   ================================================================ */
.rp-hero {
  background: linear-gradient(135deg, #0B1220 0%, #232D42 55%, #1a2d5a 100%) !important;
}
.rp-hero__blob1 {
  background: radial-gradient(circle, rgba(65,115,214,.25) 0%, transparent 70%) !important;
}
.rp-hero__blob2 {
  background: radial-gradient(circle, rgba(65,115,214,.18) 0%, transparent 70%) !important;
}
.rp-hero__img-overlay {
  background: linear-gradient(135deg, rgba(65,115,214,.1) 0%, rgba(11,18,32,.15) 100%) !important;
}
/* Hero gradient text */
.rp-hero__h1 .rp-gradient-text {
  background: linear-gradient(90deg, #80A1E4, #A5BFEE, #c5d3f5) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
/* CTA buttons inside hero — primary stays blue */
.rp-hero .rp-btn-primary {
  background: linear-gradient(135deg, #4173D6, #2D57B0) !important;
  box-shadow: 0 8px 32px rgba(65,115,214,.35) !important;
}
.rp-hero .rp-btn-primary:hover {
  background: linear-gradient(135deg, #2D57B0, #232D42) !important;
  box-shadow: 0 12px 40px rgba(65,115,214,.45) !important;
}

/* ================================================================
   STAT BADGES
   ================================================================ */
.rp-stat-badge {
  box-shadow: 0 8px 32px rgba(35,45,66,.18) !important;
}
.rp-stat-badge__icon {
  background: #EDF2FC !important;
  color: #4173D6 !important;
}

/* ================================================================
   METRICS STRIP
   ================================================================ */
.rp-metrics {
  background: linear-gradient(135deg, #232D42 0%, #2D57B0 55%, #4173D6 100%) !important;
}
.rp-metric {
  border-right-color: rgba(255,255,255,.1) !important;
}

/* ================================================================
   SECTION LABELS & SHARED SECTION STYLES
   ================================================================ */
.rp-section--blue-light {
  background: #EDF2FC !important;
}
.rp-section-label {
  background: rgba(65,115,214,.09) !important;
  border-color: rgba(65,115,214,.18) !important;
  color: #4173D6 !important;
}

/* ================================================================
   FEATURE SECTIONS
   ================================================================ */
.rp-feature-list__icon {
  background: #EDF2FC !important;
}
.rp-feature-list li:hover .rp-feature-list__icon {
  background: #4173D6 !important;
}
.rp-feature-list__icon i {
  color: #4173D6 !important;
}
.rp-feat-img__overlay {
  background: linear-gradient(to top, rgba(11,18,32,.5) 0%, transparent 55%) !important;
}

/* ================================================================
   DOMAIN SEARCH
   ================================================================ */
.rp-domain-form:focus-within {
  border-color: #4173D6 !important;
  box-shadow: 0 0 0 4px rgba(65,115,214,.12) !important;
}
.rp-domain-form__prefix {
  background: #4173D6 !important;
}
.rp-domain-form button {
  background: linear-gradient(135deg, #4173D6, #2D57B0) !important;
}
.rp-domain-form button:hover {
  background: linear-gradient(135deg, #2D57B0, #232D42) !important;
}
.rp-tld-pill:hover {
  border-color: #4173D6 !important;
  background: #EDF2FC !important;
}
.rp-tld-pill__ext {
  color: #4173D6 !important;
}

/* ================================================================
   PRICING CARDS
   ================================================================ */
.rp-price-card:hover {
  border-color: rgba(65,115,214,.35) !important;
}
.rp-price-card--featured {
  background: linear-gradient(160deg, #EDF2FC 0%, #D6E3F8 100%) !important;
  border-color: #4173D6 !important;
  box-shadow: 0 24px 60px rgba(65,115,214,.20) !important;
}
.rp-price-card--featured:hover {
  box-shadow: 0 32px 80px rgba(65,115,214,.28) !important;
}
.rp-price-card__badge {
  background: linear-gradient(135deg, #F3AE24, #d9950d) !important;
  color: #111827 !important;
}
.rp-price-card__price .currency,
.rp-price-card__price .amount {
  color: #4173D6 !important;
}
.rp-price-card__cta--outline {
  border-color: #4173D6 !important;
  color: #4173D6 !important;
}
.rp-price-card__cta--outline:hover {
  background: #4173D6 !important;
  color: white !important;
  box-shadow: 0 8px 32px rgba(65,115,214,.30) !important;
}
/* Featured plan CTA — gold */
.rp-price-card--featured .rp-price-card__cta--solid {
  background: linear-gradient(135deg, #F3AE24, #d9950d) !important;
  color: #111827 !important;
  box-shadow: 0 8px 28px rgba(243,174,36,.38) !important;
}
.rp-price-card--featured .rp-price-card__cta--solid:hover {
  background: linear-gradient(135deg, #ffbe3d, #F3AE24) !important;
  box-shadow: 0 12px 36px rgba(243,174,36,.52) !important;
}
/* Non-featured solid CTA — blue */
.rp-price-card__cta--solid {
  background: linear-gradient(135deg, #4173D6, #2D57B0) !important;
  color: white !important;
  box-shadow: 0 8px 32px rgba(65,115,214,.30) !important;
}
.rp-price-card__cta--solid:hover {
  background: linear-gradient(135deg, #2D57B0, #232D42) !important;
  box-shadow: 0 10px 32px rgba(65,115,214,.40) !important;
}
/* Override featured solid after base solid (specificity order matters) */
.rp-price-card--featured .rp-price-card__cta--solid {
  background: linear-gradient(135deg, #F3AE24, #d9950d) !important;
  color: #111827 !important;
  box-shadow: 0 8px 28px rgba(243,174,36,.38) !important;
}
.rp-price-card--featured .rp-price-card__cta--solid:hover {
  background: linear-gradient(135deg, #ffbe3d, #F3AE24) !important;
  box-shadow: 0 12px 36px rgba(243,174,36,.52) !important;
  color: #111827 !important;
}
.rp-price-card__features li i {
  color: #4173D6 !important;
}

/* ================================================================
   PRICING TOGGLE
   ================================================================ */
.rp-pricing__toggle span.active-tab {
  color: #111827 !important;
}

/* ================================================================
   COMPARISON CARDS
   ================================================================ */
.rp-compare-card:hover {
  border-color: rgba(65,115,214,.25) !important;
}
.rp-compare-card--featured {
  background: linear-gradient(145deg, #EDF2FC, #D6E3F8) !important;
  border-color: #4173D6 !important;
}
.rp-compare-card__tag {
  background: #4173D6 !important;
}

/* ================================================================
   APP CARDS
   ================================================================ */
.rp-app-card:hover {
  border-color: #4173D6 !important;
}
.rp-app-card__icon {
  background: #EDF2FC !important;
}
.rp-app-card:hover .rp-app-card__icon {
  background: #4173D6 !important;
}
.rp-app-card__btn {
  background: #EDF2FC !important;
  color: #4173D6 !important;
}
.rp-app-card:hover .rp-app-card__btn {
  background: #4173D6 !important;
  color: white !important;
}

/* ================================================================
   FEATURES BENTO GRID
   ================================================================ */
.rp-feat-card::before {
  background: linear-gradient(90deg, #4173D6, #2D57B0) !important;
}
.rp-feat-card:hover {
  border-color: rgba(65,115,214,.25) !important;
}
.rp-feat-card--top {
  background: linear-gradient(150deg, #EDF2FC, #D6E3F8) !important;
  border-color: rgba(65,115,214,.3) !important;
}
.rp-feat-card__icon {
  background: #EDF2FC !important;
  color: #4173D6 !important;
}
.rp-feat-card:hover .rp-feat-card__icon {
  background: #4173D6 !important;
  color: white !important;
}
.rp-feat-card__top-tag {
  background: linear-gradient(135deg, #F3AE24, #d9950d) !important;
  color: #111827 !important;
}

/* ================================================================
   FAQ ACCORDION
   ================================================================ */
.rp-accordion-item.is-open {
  border-color: rgba(65,115,214,.3) !important;
}
.rp-accordion-item.is-open .rp-accordion-btn {
  background: #EDF2FC !important;
  color: #4173D6 !important;
}
.rp-accordion-item.is-open .rp-accordion-icon {
  background: #4173D6 !important;
}

/* ================================================================
   CTA BANNER
   ================================================================ */
.rp-cta-banner {
  background: linear-gradient(135deg, #0B1220 0%, #232D42 55%, #1a2d5a 100%) !important;
}
.rp-cta-banner::after {
  background: radial-gradient(ellipse, rgba(65,115,214,.18) 0%, transparent 70%) !important;
}
/* CTA banner primary button — gold */
.rp-cta-banner .rp-btn-primary {
  background: linear-gradient(135deg, #F3AE24, #d9950d) !important;
  color: #111827 !important;
  box-shadow: 0 8px 28px rgba(243,174,36,.40) !important;
}
.rp-cta-banner .rp-btn-primary:hover {
  background: linear-gradient(135deg, #ffbe3d, #F3AE24) !important;
  box-shadow: 0 12px 36px rgba(243,174,36,.55) !important;
  color: #111827 !important;
}

/* ================================================================
   FOOTER
   ================================================================ */
.rp-footer {
  background: linear-gradient(160deg, #050c1f 0%, #0B1220 60%, #1a2540 100%) !important;
}
.rp-footer__soc-btn:hover {
  background: #4173D6 !important;
}
.rp-footer__col-title i {
  color: #80A1E4 !important;
}
.rp-footer__links a:hover {
  color: #80A1E4 !important;
}
.rp-footer__links a i {
  color: #475569 !important;
}
.rp-footer__links a:hover i {
  color: #80A1E4 !important;
}
.rp-footer__contact-item i {
  color: #80A1E4 !important;
}
.rp-footer__support-btn {
  background: #4173D6 !important;
}
.rp-footer__support-btn:hover {
  background: #2D57B0 !important;
}
.rp-footer__back-top:hover {
  color: #80A1E4 !important;
}
.rp-footer__policy a:hover {
  color: #80A1E4 !important;
}

/* ================================================================
   COOKIE BAR
   ================================================================ */
#cookie-bar {
  background: linear-gradient(90deg, #232D42, #2D57B0) !important;
  border-top-color: #4173D6 !important;
}
#cookieNotice button,
#cookie-bar button {
  background: #4173D6 !important;
}

/* ================================================================
   CLOUD SUB-TEMPLATE CARDS (sleek/aws/google.phtml)
   ================================================================ */
.tab-panel .pricing-card:hover {
  border-color: rgba(65,115,214,.3) !important;
  box-shadow: 0 12px 40px rgba(65,115,214,.12) !important;
}
.tab-panel .pricing-card h3 {
  color: #111827 !important;
}
.tab-panel .pricing-card .price {
  color: #4173D6 !important;
}
.tab-panel .pricing-card ul li::before {
  color: #4173D6 !important;
}
.tab-panel .pricing-card .buy-btn {
  background: linear-gradient(135deg, #4173D6, #2D57B0) !important;
  box-shadow: 0 4px 14px rgba(65,115,214,.28) !important;
}
.tab-panel .pricing-card .buy-btn:hover {
  background: linear-gradient(135deg, #2D57B0, #232D42) !important;
  box-shadow: 0 8px 24px rgba(65,115,214,.40) !important;
}

/* ================================================================
   GENERAL BUTTON OVERRIDES
   ================================================================ */
.rp-btn-primary {
  background: linear-gradient(135deg, #4173D6, #2D57B0) !important;
  box-shadow: 0 8px 32px rgba(65,115,214,.30) !important;
}
.rp-btn-primary:hover {
  background: linear-gradient(135deg, #2D57B0, #232D42) !important;
  box-shadow: 0 12px 40px rgba(65,115,214,.45) !important;
}
.rp-btn-outline {
  color: #4173D6 !important;
  border-color: #4173D6 !important;
}
.rp-btn-outline:hover {
  background: #4173D6 !important;
  box-shadow: 0 8px 32px rgba(65,115,214,.30) !important;
}

/* ================================================================
   TAILWIND UTILITY RGBA OVERRIDES
   (hardcoded rgba values in styles.css bypassing CSS vars)
   ================================================================ */
.bg-primary\/5       { background-color: rgba(65,115,214,.05)  !important; }
.bg-primary\/10      { background-color: rgba(65,115,214,.10)  !important; }
.bg-primary\/20      { background-color: rgba(65,115,214,.20)  !important; }
.border-primary\/10  { border-color:     rgba(65,115,214,.10)  !important; }
.hover\:border-primary\/30:hover { border-color: rgba(65,115,214,.30) !important; }
.hover\:bg-primary\/20:hover { background-color: rgba(65,115,214,.20) !important; }
.focus\:ring-primary\/50:focus { --tw-ring-color: rgba(65,115,214,.50) !important; }
.placeholder-primary\/50::placeholder { color: rgba(65,115,214,.5) !important; }

/* Old red overrides → now use new primary */
.bg-\[\#FF204E\]\/10 { background-color: rgba(65,115,214,.10) !important; }
.from-\[\#FF204E\]\/5 { --tw-gradient-from: rgba(65,115,214,.05) var(--tw-gradient-from-position) !important; }
.to-\[\#A0153E\]\/5  { --tw-gradient-to: rgba(65,115,214,.05) var(--tw-gradient-to-position) !important; }

/* ================================================================
   PER-PAGE: Web Hosting page custom classes
   ================================================================ */
.custom-btn-primary {
  background-color: #4173D6 !important;
}
.custom-btn-primary:hover {
  background-color: #2D57B0 !important;
  box-shadow: 0 10px 20px rgba(65,115,214,.25) !important;
}
.custom-feature-item:before {
  background-color: #4173D6 !important;
}
.custom-bg-gradient {
  background: linear-gradient(135deg, rgba(65,115,214,.10) 0%, rgba(45,87,176,.05) 100%) !important;
}

/* ================================================================
   PER-PAGE: WordPress hosting custom classes
   ================================================================ */
.swc-primary  { background-color: #4173D6 !important; }
.swc-secondary { background-color: #2D57B0 !important; }
.swc-text-primary { color: #4173D6 !important; }
.swc-text-secondary { color: #2D57B0 !important; }
.swc-hover-primary:hover { background-color: #4173D6 !important; }
.glow { box-shadow: 0 0 15px rgba(65,115,214,.60) !important; }
.btn-hover-effect:hover {
  box-shadow: 0 10px 20px rgba(65,115,214,.30) !important;
}

/* ================================================================
   PER-PAGE: Email hosting custom classes
   ================================================================ */
.custom-primary       { color: #4173D6 !important; }
.custom-secondary     { color: #2D57B0 !important; }
.custom-bg-primary    { background-color: #4173D6 !important; }
.custom-bg-secondary  { background-color: #2D57B0 !important; }
.custom-hover-bg-primary:hover { background-color: #2D57B0 !important; }
.btn-glow:hover { box-shadow: 0 0 15px rgba(65,115,214,.70) !important; }
.feature-card:hover .feature-icon { color: #4173D6 !important; }

/* ================================================================
   PER-PAGE: Cloud hosting custom classes
   ================================================================ */
.swh-primary          { color: #4173D6 !important; }
.swh-bg-primary       { background-color: #4173D6 !important; }
.swh-bg-primary-hover:hover { background-color: #2D57B0 !important; }
.swh-secondary        { color: #2D57B0 !important; }
.swh-bg-secondary     { background-color: #2D57B0 !important; }
.feature-card-raise:hover {
  box-shadow: 0 10px 25px -5px rgba(65,115,214,.20) !important;
}
.comparison-table th {
  background: linear-gradient(135deg, #4173D6 0%, #2D57B0 100%) !important;
}
.comparison-table tr:nth-child(even) {
  background-color: rgba(65,115,214,.05) !important;
}
.highlight-box::before {
  background: linear-gradient(to bottom, #4173D6, #2D57B0) !important;
}
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(65, 115, 214, 0.4); }
  70%  { box-shadow: 0 0 0 10px rgba(65, 115, 214, 0); }
  100% { box-shadow: 0 0 0 0 rgba(65, 115, 214, 0); }
}

/* ================================================================
   PER-PAGE: VPS hosting custom classes
   ================================================================ */
.custom-primary         { color: #4173D6 !important; }
.custom-secondary       { color: #2D57B0 !important; }
.bg-custom-primary      { background-color: #4173D6 !important; }
.bg-custom-secondary    { background-color: #2D57B0 !important; }
.hover\:bg-custom-secondary:hover { background-color: #2D57B0 !important; }
.border-custom-primary  { border-color: #4173D6 !important; }
.cta-button {
  box-shadow: 0 4px 6px rgba(65,115,214,.15) !important;
}
.cta-button:hover {
  box-shadow: 0 6px 12px rgba(65,115,214,.20) !important;
}
.feature-card:hover {
  border-color: rgba(65,115,214,.20) !important;
}

/* ================================================================
   PER-PAGE: gradient helpers used across pages
   ================================================================ */
.gradient-text {
  background: linear-gradient(90deg, #4173D6 0%, #2D57B0 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.gradient-bg,
.gradient-bgs {
  background: linear-gradient(135deg, #4173D6 0%, #2D57B0 100%) !important;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(65, 115, 214, 0.4); }
  70%  { box-shadow: 0 0 0 15px rgba(65, 115, 214, 0); }
  100% { box-shadow: 0 0 0 0 rgba(65, 115, 214, 0); }
}

/* ================================================================
   MISC OVERRIDES — sections using old hardcoded dark palette
   ================================================================ */
/* from-fourth to-third dark banner (domain, cloud, website-builder) */
.from-fourth {
  --tw-gradient-from: #0B1220 var(--tw-gradient-from-position) !important;
}
.bg-third {
  background-color: #0B1220 !important;
}

/* Blog & others page cards */
.hover\:border-primary:hover { border-color: #4173D6 !important; }
.hover\:bg-primary:hover     { background-color: #4173D6 !important; }
.hover\:text-primary:hover   { color: #4173D6 !important; }
.text-primary                { color: #4173D6 !important; }
.bg-primary                  { background-color: #4173D6 !important; }
.border-primary              { border-color: #4173D6 !important; }
.from-primary                { --tw-gradient-from: #4173D6 var(--tw-gradient-from-position) !important; }
.bg-secondary, .bg-second    { background-color: #2D57B0 !important; }
.text-secondary, .text-second { color: #2D57B0 !important; }
.to-second, .to-secondary    { --tw-gradient-to: #2D57B0 var(--tw-gradient-to-position) !important; }

/* ================================================================
   MOBILE MENU HOVER — CSS override for inline JS hover colors
   ================================================================ */
#mobile-menu a:hover {
  background: #EDF2FC !important;
}

/* ================================================================
   TEXT CONTRAST FIXES
   Fix dark/blue text that becomes invisible on blue/dark bg sections
   ================================================================ */

/* ---- gradient-bg / gradient-bgs sections (solid blue bg) ---- */
/* Primary color text is invisible on primary-colored background */
section.gradient-bg .text-primary,
section.gradient-bgs .text-primary {
  color: #ffffff !important;
}
/* bg-primary/10 pill badges on blue bg — use white tint instead */
section.gradient-bg .bg-primary\/10,
section.gradient-bgs .bg-primary\/10 {
  background-color: rgba(255, 255, 255, 0.18) !important;
}
/* Dark text headings on blue bg — make white for maximum legibility */
section.gradient-bg h1, section.gradient-bg h2, section.gradient-bg h3,
section.gradient-bgs h1, section.gradient-bgs h2, section.gradient-bgs h3 {
  color: #ffffff !important;
}
section.gradient-bg .text-dark,
section.gradient-bgs .text-dark {
  color: #ffffff !important;
}
/* Paragraph / muted text on blue bg */
section.gradient-bg .text-gray-700,
section.gradient-bg .text-gray-600,
section.gradient-bgs .text-gray-700,
section.gradient-bgs .text-gray-600 {
  color: rgba(255, 255, 255, 0.85) !important;
}
/* Body text (direct p tags) on blue bg */
section.gradient-bg > .container p,
section.gradient-bgs > .container p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ---- Restore dark text inside nested white-bg cards ---- */
/* White cards inside gradient sections must keep their dark colours */
section.gradient-bg .bg-white .text-primary,
section.gradient-bgs .bg-white .text-primary,
section.gradient-bg .bg-white i.text-primary,
section.gradient-bgs .bg-white i.text-primary {
  color: #4173D6 !important;
}
section.gradient-bg .bg-white .bg-primary\/10,
section.gradient-bgs .bg-white .bg-primary\/10 {
  background-color: rgba(65, 115, 214, 0.10) !important;
}
section.gradient-bg .bg-white h1,
section.gradient-bg .bg-white h2,
section.gradient-bg .bg-white h3,
section.gradient-bg .bg-white h4,
section.gradient-bgs .bg-white h1,
section.gradient-bgs .bg-white h2,
section.gradient-bgs .bg-white h3,
section.gradient-bgs .bg-white h4 {
  color: #111827 !important;
}
section.gradient-bg .bg-white .text-dark,
section.gradient-bgs .bg-white .text-dark {
  color: #111827 !important;
}
section.gradient-bg .bg-white .text-gray-700,
section.gradient-bg .bg-white .text-gray-600,
section.gradient-bg .bg-white .text-gray-500,
section.gradient-bgs .bg-white .text-gray-700,
section.gradient-bgs .bg-white .text-gray-600,
section.gradient-bgs .bg-white .text-gray-500 {
  color: inherit !important;   /* let Tailwind handle inside white cards */
}
section.gradient-bg .bg-white p,
section.gradient-bgs .bg-white p {
  color: inherit !important;
}

/* ---- from-primary / bg-primary full sections ---- */
/* Any section that has a solid blue bg via from-primary + to-secondary gradient */
.from-primary.to-secondary h1, .from-primary.to-secondary h2, .from-primary.to-secondary h3,
.from-primary.to-second h1, .from-primary.to-second h2, .from-primary.to-second h3 {
  color: #ffffff !important;
}
.from-primary.to-secondary p, .from-primary.to-second p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ---- rp-section--blue-light sections — keep dark text readable ---- */
/* These sections use #EDF2FC bg so dark text is correct */
.rp-section--blue-light .rp-section__title,
.rp-section--blue-light h1, .rp-section--blue-light h2, .rp-section--blue-light h3 {
  color: #111827 !important;
}

/* ---- Span text-primary inside dark backgrounds ---- */
/* Section title coloured spans on light bg sections — keep blue */
.rp-section--white .rp-section__title span[style*="color:#4173D6"],
.rp-section--gray .rp-section__title span[style*="color:#4173D6"] {
  color: #4173D6 !important;
}

/* ---- Primary buttons on blue-gradient sections → gold for visibility ---- */
section.gradient-bg > .container a.bg-primary,
section.gradient-bgs > .container a.bg-primary {
  background: linear-gradient(135deg, #F3AE24, #d9950d) !important;
  color: #111827 !important;
  box-shadow: 0 8px 28px rgba(243, 174, 36, 0.38) !important;
}
section.gradient-bg > .container a.bg-primary:hover,
section.gradient-bgs > .container a.bg-primary:hover {
  background: linear-gradient(135deg, #ffbe3d, #F3AE24) !important;
  color: #111827 !important;
}

/* ---- White buttons on blue-gradient sections (bg-white + text-dark on SAME element) ---- */
/* Descendant selectors don't cover elements that carry both classes themselves */
section.gradient-bg a.bg-white,
section.gradient-bgs a.bg-white {
  color: #111827 !important;
  background-color: #ffffff !important;
}
section.gradient-bg a.bg-white *,
section.gradient-bgs a.bg-white * {
  color: #111827 !important;
}
section.gradient-bg a.bg-white .text-primary,
section.gradient-bgs a.bg-white .text-primary,
section.gradient-bg a.bg-white i.text-primary,
section.gradient-bgs a.bg-white i.text-primary {
  color: #4173D6 !important;
}

/* ---- pro-img-wrap / pro-img-badge / pro-img-overlay — full definitions ---- */
/* These classes were referenced in phtml but had no CSS definitions */
.pro-img-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(35, 45, 66, 0.22);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.pro-img-wrap:hover {
  box-shadow: 0 32px 80px rgba(35, 45, 66, 0.30);
  transform: translateY(-4px);
}
.pro-img-wrap img {
  display: block;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.pro-img-wrap:hover img {
  transform: scale(1.03);
}
.pro-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 18, 32, 0.40) 0%, transparent 55%);
  pointer-events: none;
}
/* Floating stat badges on images — use positive offsets (inside parent) to avoid overflow:hidden clip */
.pro-img-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 0 8px 28px rgba(35, 45, 66, 0.22);
  min-width: 150px;
  z-index: 10;
}
.pro-img-badge-tr {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 0 8px 28px rgba(35, 45, 66, 0.22);
  z-index: 10;
}
.pro-dot-green {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: rp-pulse-dot 2s infinite;
}

/* ---- Cookie banner text legibility ---- */
#cookieNotice p {
  color: #f1f5f9;
}

/* ================================================================
   FULL IMAGE DISPLAY
   Shows complete images without cropping.
   overflow:hidden on the parent card still clips the scale()
   transform at the card edges, so the hover zoom works perfectly.
   ================================================================ */

/* Feature section side-by-side images */
.rp-feat-img__card img {
  height: auto !important;
  object-fit: unset !important;
  width: 100% !important;
  display: block !important;
}

/* Hero image */
.rp-hero__img-wrap img {
  height: auto !important;
  object-fit: unset !important;
  width: 100% !important;
  display: block !important;
}

/* FAQ sidebar image */
.rp-faq__img img {
  height: auto !important;
  object-fit: unset !important;
  width: 100% !important;
  display: block !important;
}

/* pro-img-wrap images (one-click installs, etc.) */
.pro-img-wrap img {
  height: auto !important;
  object-fit: unset !important;
  width: 100% !important;
  display: block !important;
}

/* Global catch-all — any content image inside an rp-* or feature card */
.rp-feature img,
.rp-feature__inner img,
.rp-section img:not(.rp-hero__avatars img):not(.rp-app-card__icon img):not(.rp-stat-badge img) {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Blog card thumbnails — aspect-ratio container, full image display */
.blog-card-image,
.blog-card-image img {
  height: auto !important;
  object-fit: unset !important;
  width: 100% !important;
  display: block !important;
}

/* Responsive: remove the media-query 300px override from redesign-pro.css */
@media (max-width: 768px) {
  .rp-feat-img__card img {
    height: auto !important;
    object-fit: unset !important;
  }
}

/* ================================================================
   SCROLL REVEAL — no color changes needed
   ================================================================ */