/* ==========================================================================
   WordPress-only additions — Social Hub.

   assets/css/style.css is a byte-preserved copy of the locked design and must
   stay that way, so everything WordPress needs that the static build never had
   lives here: the skip link, screen-reader utilities, form status messaging,
   pagination, and the core alignment/caption classes used inside post content.

   Everything below uses the design's own tokens (--amber, --ink-navy,
   --panel-navy, --readout-white, --static-gray, --hairline, --border-radius,
   --font-display, --font-body) — no new colors, no new type, no new spacing
   scale. Light mode overrides hang off html[data-theme="light"], matching the
   locked cascade exactly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Accessibility utilities
   -------------------------------------------------------------------------- */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--amber);
  color: var(--ink-navy);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--readout-white);
  outline-offset: 2px;
}

/* A consistently visible focus ring for keyboard users across every control. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Brand logo (Hywiz light/dark logo uploads)

   Sized here rather than in style.css so the rule is global and therefore also
   applies on WooCommerce templates (gotcha G41 — a logo rule scoped to the
   front-end layouts renders at intrinsic size on cart/checkout).
   -------------------------------------------------------------------------- */
.logo .logo-img,
.footer .logo .logo-img {
  display: block;
  width: auto;
  max-width: 200px;
  max-height: 36px;
  height: auto;
  object-fit: contain;
}

/* Theme-aware logo swap. Both are in the DOM; the no-flash script sets
   data-theme before first paint, so there is no flash of the wrong mark. */
.logo-light { display: block !important; }
.logo-dark { display: none !important; }
html[data-theme="light"] .logo-light { display: none !important; }
html[data-theme="light"] .logo-dark { display: block !important; }

/* Navigation Header Capsule - Dark Mode #000047 */
.main-header {
  background: #000047 !important;
  border: 1px solid rgba(169, 130, 255, 0.35) !important;
}
.main-header.scrolled {
  background: #000047 !important;
}
html[data-theme="light"] .main-header {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(2, 63, 205, 0.18) !important;
}
html[data-theme="light"] .main-header.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(2, 63, 205, 0.28) !important;
}

/* Header Dropdown Menu Opacity - Global Rule 19 & Section 2.11 */
.nav-dropdown,
.main-header .nav-dropdown,
.nav-item:hover .nav-dropdown,
.nav-item.is-open .nav-dropdown,
.mobile-menu,
.mobile-menu.is-open {
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   Contact form status + honeypot
   -------------------------------------------------------------------------- */
.form-status {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--amber);
}

.form-status:empty {
  margin-top: 0;
}

.form-status.is-error {
  color: #ff6b6b;
}

html[data-theme="light"] .form-status.is-error {
  color: #c62828;
}

/* Honeypot: present for bots, invisible and unreachable for people. */
.socialhub-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.btn[disabled],
button[disabled] {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

/* --------------------------------------------------------------------------
   Blog pagination (WordPress paginate_links output)
   -------------------------------------------------------------------------- */
.blogs-pagination {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}

.blogs-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.blogs-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--panel-navy);
  color: var(--static-gray);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition-smooth);
}

.blogs-pagination .page-numbers:hover {
  border-color: var(--hairline-amber);
  color: var(--amber);
}

.blogs-pagination .page-numbers.current {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink-navy);
}

.blogs-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

/* --------------------------------------------------------------------------
   Core WordPress content classes (used inside post / legal bodies)
   -------------------------------------------------------------------------- */
.alignleft {
  float: left;
  margin: 0 1.5rem 1rem 0;
}

.alignright {
  float: right;
  margin: 0 0 1rem 1.5rem;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignwide,
.alignfull {
  max-width: 100%;
}

.wp-caption {
  max-width: 100%;
}

.wp-caption-text,
.wp-element-caption {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--static-gray);
  text-align: center;
  margin-top: 0.5rem;
}

.post-main-article img,
.post-main-article iframe {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.post-main-article blockquote {
  margin: 2rem 0;
  padding: 1rem 0 1rem 1.5rem;
  border-left: 3px solid var(--amber);
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--readout-white);
}

.post-main-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.post-main-article th,
.post-main-article td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--hairline);
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--static-gray);
}

.post-main-article th {
  color: var(--readout-white);
  font-weight: 600;
}

/* Wide content must scroll inside itself, never the page. */
.post-main-article > table,
.post-main-article > pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Hywiz build credit (footer bottom bar).

   The locked design's .footer-bottom is a centred flex row, and its own mobile
   rule already switches to a stacked column with a 16px gap — i.e. it was
   authored to hold more than one child. So the credit is added as a sibling of
   the copyright line and only needs a horizontal gap for the desktop row.
   Everything inherits the bar's font-size and colour, so the credit reads as
   part of the design rather than bolted on.
   -------------------------------------------------------------------------- */
.footer-bottom {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* Balance the bottom bar.

   Measured on the locked build: 29px above the line (the bar's 28px padding-top
   + 1px divider) but 66px below it — the paragraph's inherited 25.5px
   margin-bottom stacked on top of the footer's 40px padding-bottom. That reads
   as the footer trailing off into dead space. Zeroing the paragraph margin and
   matching the footer's bottom padding to the bar's top padding puts an equal
   28px on each side of the credit line. */
.footer-bottom p {
  margin-bottom: 0;
}

.footer {
  padding-bottom: 28px;
}

/* Keep the bottom bar clear of the floating call / WhatsApp buttons.

   Those are position:fixed and sit 18px from each edge at 48px wide, so at
   narrow widths anything full-width in the bottom bar runs underneath them.
   (The locked build has the same collision on its copyright line.) Reserving
   the button gutters keeps the text readable without adding dead space, so the
   28px balance above and below the credit is preserved. */
@media (max-width: 640px) {
  .footer-bottom {
    padding-left: 72px;
    padding-right: 72px;
  }
}

/* Inline, NOT a flex/block box: the credit continues the copyright sentence on
   the same line and must wrap as ordinary prose. (As inline-flex the words
   became independent flex items and stacked into a ragged three-column block at
   360px.) */
.footer-credit {
  display: inline;
}

.footer-credit a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
  color: var(--amber);
}

/* The ❤️ emoji renders from the OS colour-emoji font, which sits slightly large
   and low against 13.5px body text. Nudge it back onto the baseline. */
.footer-credit-heart {
  font-size: 0.95em;
  line-height: 1;
  vertical-align: -1px;
}

/* --------------------------------------------------------------------------
   Heading-order accessibility fix.

   The locked design places <h4> directly under an <h1>/<h2>, which fails the
   WCAG heading-order check. The tags are promoted to <h3> in the templates so
   the document outline is correct, but style.css targets them as DESCENDANT
   ELEMENT selectors (`.why-feature-col h4`) and must stay byte-identical as the
   pixel-diff reference. So the exact same declarations are restated here for
   the new tag. Nothing about the rendered result changes — verified by
   re-running the full parity matrix (Δh = 0 at every width, both themes).
   -------------------------------------------------------------------------- */
.why-feature-col h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--readout-white);
  line-height: 1.3;
  white-space: nowrap;
}

html[data-theme="light"] .why-feature-col h3 {
  color: #0E1424 !important;
}

.cta-pillar-details h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--readout-white);
  margin-bottom: 4px;
  line-height: 1.3;
  white-space: nowrap;
}

html[data-theme="light"] .cta-pillar-details h3 {
  color: #0E1424;
}

@media (max-width: 768px) {
  .cta-pillar-details h3 {
    font-size: 15px;
    margin-bottom: 3px;
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — respect the OS setting for everything WP adds.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .skip-link,
  .blogs-pagination .page-numbers {
    transition: none;
  }
}

/* ==========================================================================
   Design Refinements — Palette #FFC82F, #A982FF, Button Hover & SVG Orbitals
   ========================================================================== */

/* 1. Hero Orbital Badges — 2-line layout without overlapping center hub (Images 3 & 4) */
.hero-orbital-container .badge-label {
  white-space: normal !important;
  line-height: 1.25 !important;
  text-align: left !important;
  max-width: 135px !important;
}

.hero-orbital-container .orbital-badge {
  max-width: 175px !important;
}

html[data-theme="light"] .hero-orbital-container .orbital-badge {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 200, 47, 0.35) !important;
  box-shadow: 0 8px 24px rgba(14, 20, 36, 0.08), 0 2px 6px rgba(255, 200, 47, 0.1) !important;
}

html[data-theme="light"] .hero-orbital-container .badge-label {
  color: #0E1424 !important;
}

html[data-theme="light"] .hero-orbital-container .badge-icon {
  background: rgba(255, 200, 47, 0.15) !important;
  color: #996B00 !important;
}

html[data-theme="light"] .hero-orbital-container .orbital-center {
  background: linear-gradient(135deg, #F5F8FF 0%, #FFFFFF 100%) !important;
  border: 2px solid rgba(255, 200, 47, 0.4) !important;
  box-shadow: 0 0 35px rgba(255, 200, 47, 0.2), 0 4px 20px rgba(2, 63, 205, 0.1) !important;
}

.center-logo-svg {
  stroke: #FFC82F !important;
  filter: drop-shadow(0 0 10px rgba(255, 200, 47, 0.45)) !important;
}

/* 2. Blue Buttons — #040594 on Light Mode with Darker Blue Hover (Image 5) */
html[data-theme="light"] .btn,
html[data-theme="light"] .btn-filled,
html[data-theme="light"] .hero-actions .btn-filled,
html[data-theme="light"] .why-cta-btn,
html[data-theme="light"] .cta-v2-primary-btn {
  background: #040594 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 4px 14px rgba(4, 5, 148, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important;
}

html[data-theme="light"] .btn:hover,
html[data-theme="light"] .btn-filled:hover,
html[data-theme="light"] .hero-actions .btn-filled:hover,
html[data-theme="light"] .why-cta-btn:hover,
html[data-theme="light"] .cta-v2-primary-btn:hover {
  background: #03046e !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow: 0 6px 18px rgba(3, 4, 110, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

html[data-theme="light"] .btn:hover::before,
html[data-theme="light"] .btn-filled:hover::before,
html[data-theme="light"] .hero-actions .btn-filled:hover::before {
  background: transparent !important;
  border-color: rgba(3, 4, 110, 0.45) !important;
  box-shadow: 0 4px 12px rgba(3, 4, 110, 0.2) !important;
}

/* 3. Secondary Outline Button — Clean #FFC82F palette & rim (Hero, Why Choose Us, CTA & all pages) */
.cta-v2-secondary-btn {
  position: relative !important;
  overflow: visible !important;
  z-index: 1 !important;
}

.cta-v2-secondary-btn::before {
  content: "" !important;
  position: absolute !important;
  top: -3px !important;
  left: -3px !important;
  width: calc(100% + 6px) !important;
  height: calc(100% + 6px) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 2px solid rgba(255, 200, 47, 0.3) !important;
  box-shadow: 0 4px 14px rgba(255, 200, 47, 0.12) !important;
  z-index: -1 !important;
  transition: all 0.25s ease !important;
}

/* Yellow Outline Buttons (Both Themes) */
.btn-outline,
.why-whatsapp-btn,
.btn-whatsapp,
.cta-v2-secondary-btn,
.pricing-card .btn-outline,
html[data-theme="light"] .btn-outline,
html[data-theme="light"] .why-whatsapp-btn,
html[data-theme="light"] .btn-whatsapp,
html[data-theme="light"] .cta-v2-secondary-btn,
html[data-theme="light"] .pricing-card .btn-outline {
  background: rgb(255 200 47 / 0%) !important;
  border: 1.5px solid rgb(255 200 47 / 92%) !important;
  color: #040594 !important;
  box-shadow: 0 2px 8px rgba(255, 200, 47, 0.15) !important;
  font-weight: 600 !important;
}

html:not([data-theme="light"]) .btn-outline,
html[data-theme="dark"] .btn-outline,
[data-theme="dark"] .btn-outline,
html:not([data-theme="light"]) .cta-v2-secondary-btn,
html:not([data-theme="light"]) .why-whatsapp-btn,
html:not([data-theme="light"]) .btn-whatsapp {
  color: #FFFFFF !important;
}

/* Yellow Outline Buttons ::before Rim (88% Opacity) */
.btn-outline::before,
.why-whatsapp-btn::before,
.btn-whatsapp::before,
.cta-v2-secondary-btn::before,
.pricing-card .btn-outline::before,
html[data-theme="light"] .btn-outline::before,
html[data-theme="light"] .why-whatsapp-btn::before,
html[data-theme="light"] .btn-whatsapp::before,
html[data-theme="light"] .cta-v2-secondary-btn::before,
html[data-theme="light"] .pricing-card .btn-outline::before {
  border: 2px solid rgb(255 200 47 / 88%) !important;
  box-shadow: 0 4px 14px rgba(255, 200, 47, 0.12) !important;
}

html[data-theme="light"] .btn-outline svg,
html[data-theme="light"] .btn-outline i,
html[data-theme="light"] .why-whatsapp-btn svg,
html[data-theme="light"] .why-whatsapp-btn i,
html[data-theme="light"] .btn-whatsapp svg,
html[data-theme="light"] .btn-whatsapp i,
html[data-theme="light"] .cta-v2-secondary-btn svg,
html[data-theme="light"] .cta-v2-secondary-btn i {
  color: #040594 !important;
  stroke: #040594 !important;
}

html[data-theme="light"] .btn-outline:hover,
html[data-theme="light"] .hero-actions .btn-outline:hover,
html[data-theme="light"] .why-whatsapp-btn:hover,
html[data-theme="light"] .btn-whatsapp:hover,
html[data-theme="light"] .cta-v2-secondary-btn:hover {
  background: linear-gradient(135deg, #FFE066 0%, #FFC82F 100%) !important;
  border-color: #FFC82F !important;
  color: #040594 !important;
  box-shadow: 0 6px 20px rgba(255, 200, 47, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.65) !important;
  transform: translateY(-2px) !important;
}

html[data-theme="light"] .btn-outline:hover::before,
html[data-theme="light"] .hero-actions .btn-outline:hover::before,
html[data-theme="light"] .why-whatsapp-btn:hover::before,
html[data-theme="light"] .btn-whatsapp:hover::before,
html[data-theme="light"] .cta-v2-secondary-btn:hover::before {
  border-color: #FFC82F !important;
  box-shadow: 0 4px 14px rgba(255, 200, 47, 0.35) !important;
}

/* 4. Pricing Cards & Button Shadows — #FFC82F Palette (Image 2) */
.pricing-card.premium-plan {
  box-shadow: 0 24px 56px rgba(255, 200, 47, 0.18), 0 0 24px rgba(255, 200, 47, 0.04) !important;
}

html[data-theme="light"] .pricing-card.premium-plan {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 252, 242, 0.9)) padding-box, linear-gradient(135deg, #FFC82F 0%, #FFE066 100%) border-box !important;
  box-shadow: 0 24px 56px rgba(255, 200, 47, 0.22), 0 0 1px 1px rgba(255, 255, 255, 0.95) inset, 0 0 25px rgba(255, 200, 47, 0.12) !important;
}

html[data-theme="light"] .pricing-card.premium-plan:hover {
  box-shadow: 0 28px 64px rgba(255, 200, 47, 0.28), 0 0 32px rgba(255, 200, 47, 0.16) !important;
}

html[data-theme="light"] .pricing-card:hover {
  border-color: rgba(255, 200, 47, 0.6) !important;
  box-shadow: 0 20px 48px rgba(255, 200, 47, 0.18), 0 0 25px rgba(255, 200, 47, 0.12) !important;
}

html[data-theme="light"] .pricing-card .btn-outline {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF5 100%) !important;
  border: 1.5px solid #FFC82F !important;
  color: #FFC82F !important;
  box-shadow: 0 3px 10px rgba(255, 200, 47, 0.15), inset 0 1px 1px #FFFFFF !important;
}

html[data-theme="light"] .pricing-card.premium-plan .btn-filled {
  background: linear-gradient(135deg, #FFE066 0%, #FFC82F 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  color: #040594 !important;
  box-shadow:
    0 6px 20px rgba(255, 200, 47, 0.45),
    inset 0px 1px 1px rgba(255, 255, 255, 0.8),
    inset 0px -2px 3px rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="light"] .pricing-card.premium-plan .btn-filled:hover {
  background: linear-gradient(135deg, #FFF099 0%, #FFD54F 100%) !important;
  box-shadow:
    0 10px 28px rgba(255, 200, 47, 0.55),
    inset 0px 1px 1px rgba(255, 255, 255, 0.9) !important;
  color: #040594 !important;
}

/* 5. Eyebrows: Strictly #FFC82F (Amber Gold) on Dark Theme across all sections & pages */
html:not([data-theme="light"]) .eyebrow,
html:not([data-theme="light"]) .section-eyebrow,
html:not([data-theme="light"]) .hero-eyebrow,
html:not([data-theme="light"]) .about-eyebrow,
html:not([data-theme="light"]) .services-eyebrow,
html:not([data-theme="light"]) .process-eyebrow,
html:not([data-theme="light"]) .premium-about-eyebrow,
html:not([data-theme="light"]) .about-eyebrow-wrapper .eyebrow,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .section-eyebrow,
html[data-theme="dark"] .hero-eyebrow,
html[data-theme="dark"] .about-eyebrow,
html[data-theme="dark"] .services-eyebrow,
html[data-theme="dark"] .process-eyebrow,
html[data-theme="dark"] .premium-about-eyebrow,
html[data-theme="dark"] .about-eyebrow-wrapper .eyebrow,
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .section-eyebrow,
[data-theme="dark"] .hero-eyebrow,
[data-theme="dark"] .about-eyebrow,
[data-theme="dark"] .services-eyebrow,
[data-theme="dark"] .process-eyebrow,
[data-theme="dark"] .premium-about-eyebrow,
[data-theme="dark"] .about-eyebrow-wrapper .eyebrow,
.eyebrow,
.section-eyebrow,
.hero-eyebrow,
.about-eyebrow,
.services-eyebrow,
.process-eyebrow,
.premium-about-eyebrow {
  color: #FFC82F !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
}

/* Remove decorative line before About Us eyebrow so it matches all other eyebrows */
.premium-about-eyebrow::before {
  display: none !important;
  content: none !important;
}

html[data-theme="light"] .eyebrow,
html[data-theme="light"] .section-eyebrow,
html[data-theme="light"] .hero-eyebrow,
html[data-theme="light"] .about-eyebrow,
html[data-theme="light"] .services-eyebrow,
html[data-theme="light"] .process-eyebrow,
html[data-theme="light"] .premium-about-eyebrow,
html[data-theme="light"] .about-eyebrow-wrapper .eyebrow {
  color: #7B4FE3 !important;
}

.popular-badge,
.plan-badge.popular,
.badge-popular {
  background: linear-gradient(135deg, #A982FF 0%, #7B4FE3 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(169, 130, 255, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

.orbital-ring-2 {
  border-color: rgba(169, 130, 255, 0.45) !important;
}

.about-stat-card:hover {
  border-color: rgba(169, 130, 255, 0.5) !important;
  box-shadow: 0 12px 36px rgba(169, 130, 255, 0.15) !important;
}

/* 6. WhatsApp Floating Chatty Pulse Effect */
.whatsapp-btn,
.float-whatsapp {
  position: relative !important;
}

.whatsapp-btn::before,
.float-whatsapp::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  animation: pulseWhatsApp 2s infinite !important;
  z-index: -1 !important;
}

@keyframes pulseWhatsApp {
  0% { transform: scale(1); opacity: 0.7; }
  70% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* 7. Proper White Text on Dark Theme (Images 1 & 2) */
html:not([data-theme="light"]) .brand-pitch-text,
html:not([data-theme="light"]) .footer-title,
html:not([data-theme="light"]) .footer-link,
html:not([data-theme="light"]) .info-item,
html:not([data-theme="light"]) .info-item a,
html:not([data-theme="light"]) .footer-contact-link,
html:not([data-theme="light"]) .footer-bottom,
html:not([data-theme="light"]) .footer-bottom p,
html:not([data-theme="light"]) .footer-credit,
html:not([data-theme="light"]) .footer-credit a,
html:not([data-theme="light"]) .plan-desc,
html:not([data-theme="light"]) .plan-period,
html:not([data-theme="light"]) .plan-feature-item {
  color: #FFFFFF !important;
}

/* Light mode overrides preserve crisp dark readability */
html[data-theme="light"] .brand-pitch-text {
  color: #475569 !important;
}
html[data-theme="light"] .footer-title {
  color: #0E1424 !important;
}
html[data-theme="light"] .footer-link {
  color: #475569 !important;
}
html[data-theme="light"] .info-item,
html[data-theme="light"] .info-item a:not(:hover),
html[data-theme="light"] .footer-contact-link:not(:hover) {
  color: #475569 !important;
}

.info-item a,
.footer-contact-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.25s ease !important;
}

html[data-theme="light"] .info-item a:hover,
html[data-theme="light"] .footer-contact-link:hover {
  color: #FFC82F !important;
  transform: translateX(4px) !important;
}

html:not([data-theme="light"]) .info-item a:hover,
html:not([data-theme="light"]) .footer-contact-link:hover {
  color: #FFC82F !important;
  transform: translateX(4px) !important;
}

/* Unified Footer Right-Side Contact Badges — Zero Layout Shift between Light & Dark */
.footer-info .info-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.contact-icon-badge {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

.contact-icon-badge svg {
  width: 17px !important;
  height: 17px !important;
  transition: all 0.25s ease !important;
  margin-top: 0 !important;
}

/* Dark Theme Contact Badges */
html:not([data-theme="light"]) .contact-icon-badge,
html[data-theme="dark"] .contact-icon-badge,
[data-theme="dark"] .contact-icon-badge {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 200, 47, 0.25) !important;
  color: #FFC82F !important;
}

html:not([data-theme="light"]) .contact-icon-badge svg,
html[data-theme="dark"] .contact-icon-badge svg,
[data-theme="dark"] .contact-icon-badge svg {
  color: #FFC82F !important;
  stroke: #FFC82F !important;
}

html:not([data-theme="light"]) .contact-icon-badge svg[fill]:not([fill="none"]),
html[data-theme="dark"] .contact-icon-badge svg[fill]:not([fill="none"]),
[data-theme="dark"] .contact-icon-badge svg[fill]:not([fill="none"]) {
  fill: #FFC82F !important;
  stroke: none !important;
}

html:not([data-theme="light"]) .info-item-clickable:hover .contact-icon-badge,
html[data-theme="dark"] .info-item-clickable:hover .contact-icon-badge,
[data-theme="dark"] .info-item-clickable:hover .contact-icon-badge {
  color: #000000 !important;
  border-color: #FFC82F !important;
  background: linear-gradient(135deg, #FFE066 0%, #FFC82F 100%) !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 6px 18px rgba(255, 200, 47, 0.45) !important;
}

html:not([data-theme="light"]) .info-item-clickable:hover .contact-icon-badge svg,
html[data-theme="dark"] .info-item-clickable:hover .contact-icon-badge svg,
[data-theme="dark"] .info-item-clickable:hover .contact-icon-badge svg {
  color: #000000 !important;
  stroke: #000000 !important;
}

html:not([data-theme="light"]) .info-item-clickable:hover .contact-icon-badge svg[fill]:not([fill="none"]),
html[data-theme="dark"] .info-item-clickable:hover .contact-icon-badge svg[fill]:not([fill="none"]),
[data-theme="dark"] .info-item-clickable:hover .contact-icon-badge svg[fill]:not([fill="none"]) {
  fill: #000000 !important;
  stroke: none !important;
}

html:not([data-theme="light"]) .info-item-clickable:hover .footer-contact-link,
html[data-theme="dark"] .info-item-clickable:hover .footer-contact-link,
[data-theme="dark"] .info-item-clickable:hover .footer-contact-link {
  color: #FFC82F !important;
  transform: translateX(4px) !important;
}

/* Light Theme Contact Badges — Refined Royal Blue Brand Palette */
html[data-theme="light"] .contact-icon-badge {
  background: rgba(4, 5, 148, 0.06) !important;
  border: 1px solid rgba(4, 5, 148, 0.22) !important;
  color: #040594 !important;
}

html[data-theme="light"] .contact-icon-badge svg {
  color: #040594 !important;
  stroke: #040594 !important;
}

html[data-theme="light"] .contact-icon-badge svg[fill]:not([fill="none"]) {
  fill: #040594 !important;
  stroke: none !important;
}

html[data-theme="light"] .info-item-clickable:hover .contact-icon-badge,
html[data-theme="light"] .contact-icon-badge:hover {
  color: #FFFFFF !important;
  border-color: #040594 !important;
  background: #040594 !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 6px 18px rgba(4, 5, 148, 0.35) !important;
}

html[data-theme="light"] .info-item-clickable:hover .contact-icon-badge svg,
html[data-theme="light"] .contact-icon-badge:hover svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

html[data-theme="light"] .info-item-clickable:hover .contact-icon-badge svg[fill]:not([fill="none"]),
html[data-theme="light"] .contact-icon-badge:hover svg[fill]:not([fill="none"]) {
  fill: #FFFFFF !important;
  stroke: none !important;
}

html[data-theme="light"] .info-item-clickable:hover .footer-contact-link {
  color: #040594 !important;
  transform: translateX(4px) !important;
}

/* Non-hoverable Location item */
.info-item-static {
  cursor: default !important;
}

.info-item-static .contact-icon-badge {
  cursor: default !important;
  pointer-events: none !important;
}

/* Portfolio Case Study Metrics Shelf - Full Width 3-Column Grid (Image 2) */
.case-metrics-bar {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.case-stat {
  min-width: 0 !important;
}

.case-stat .stat-lbl {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.case-stat .stat-val {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.case-stat .stat-val.highlight,
html[data-theme="light"] .case-stat .stat-val.highlight {
  color: #FFC82F !important;
}

html[data-theme="light"] .footer-bottom,
html[data-theme="light"] .footer-bottom p {
  color: #475569 !important;
}
html[data-theme="light"] .plan-desc,
html[data-theme="light"] .plan-period {
  color: #5C6479 !important;
}
html[data-theme="light"] .plan-feature-item {
  color: #0E1424 !important;
}

/* ==========================================================================
   8. Universal Clean Palette Icons (#FFC82F) & Zero Orange/Peach Tints
   ========================================================================== */

/* Universal Icon Styling Across Entire Site */
.badge-icon,
.pillar-icon-box,
.cta-pillar-round-icon,
.cta-badge-icon,
.why-feature-icon-box,
.growth-check-icon,
.plan-icon-wrapper,
.stat-icon-wrapper,
.bento-icon-wrapper {
  background: rgba(255, 200, 47, 0.15) !important;
  color: #FFC82F !important;
  border: 1px solid rgba(255, 200, 47, 0.3) !important;
  box-shadow: 0 2px 8px rgba(255, 200, 47, 0.12) !important;
}

.badge-icon svg,
.badge-icon i,
.pillar-icon-box svg,
.pillar-icon-box i,
.cta-pillar-round-icon svg,
.cta-badge-icon svg,
.feature-icon-circle svg,
.feature-icon-circle i,
.why-feature-icon-box svg,
.why-feature-icon-box i,
.growth-check-icon svg,
.plan-feature-item svg,
.plan-icon-wrapper svg,
.premium-about-check-icon svg,
.premium-about-check-icon i {
  color: #FFC82F !important;
  stroke: #FFC82F !important;
}

/* Eliminate All Peach/Orange Tints from Cards & Components (Image 1 & 2) */
html[data-theme="light"] .about-pillar-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(255, 200, 47, 0.25) !important;
  box-shadow: 0 10px 30px rgba(14, 20, 36, 0.04), 0 2px 8px rgba(255, 200, 47, 0.08) !important;
}

html[data-theme="light"] .about-pillar-featured {
  background: linear-gradient(135deg, #FFFFFF 0%, rgba(255, 200, 47, 0.06) 100%) !important;
  border: 1px solid rgba(255, 200, 47, 0.3) !important;
}

html[data-theme="light"] .pillar-number {
  background: rgba(255, 200, 47, 0.12) !important;
  color: #040594 !important;
  border: 1px solid rgba(255, 200, 47, 0.3) !important;
}

html[data-theme="light"] .pillar-pill.accent {
  background: rgba(255, 200, 47, 0.15) !important;
  color: #040594 !important;
  border: 1px solid rgba(255, 200, 47, 0.3) !important;
}

html[data-theme="light"] .pillar-pill.accent svg {
  color: #FFC82F !important;
}

html[data-theme="light"] .orbital-badge {
  background: #FFFFFF !important;
  border: 1px solid rgba(255, 200, 47, 0.3) !important;
  box-shadow: 0 8px 24px rgba(14, 20, 36, 0.06), 0 2px 6px rgba(255, 200, 47, 0.08) !important;
}

html[data-theme="light"] .cta-badge-icon,
html[data-theme="light"] .cta-pillar-round-icon {
  background: rgba(255, 200, 47, 0.15) !important;
  border: 1px solid rgba(255, 200, 47, 0.3) !important;
  color: #FFC82F !important;
}

/* ==========================================================================
   9. CHECKOUT PAGE IMPROVEMENTS & CALIBRATIONS
   ========================================================================== */

/* 1. Checkout Hero Heading: "Confirm Your Plan" strictly on ONE line (Image 1) */
body.woocommerce-checkout .blog-hero-title br,
.socialhub-checkout-hero .blog-hero-title br,
.socialhub-woo .blog-hero-title br {
  display: none !important;
}

body.woocommerce-checkout .blog-hero-title,
.socialhub-checkout-hero .blog-hero-title {
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  body.woocommerce-checkout .blog-hero-title,
  .socialhub-checkout-hero .blog-hero-title {
    font-size: clamp(24px, 6vw, 42px) !important;
    white-space: nowrap !important;
  }
}

/* 2. Checkbox and "Save to account" side-by-side with consistent spacing (Image 2) */
.socialhub-woo #payment .woocommerce-SavedPaymentMethods-saveNew,
.socialhub-woo .woocommerce-SavedPaymentMethods-saveNew,
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew,
li.payment_method_stripe_cc .woocommerce-SavedPaymentMethods-saveNew {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 10px !important;
  margin: 14px 0 10px !important;
  padding: 0 !important;
  width: 100% !important;
  clear: both !important;
}

.socialhub-woo #payment .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"],
.socialhub-woo .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"],
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"],
li.payment_method_stripe_cc .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
  display: inline-block !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid var(--amber, #FFC82F) !important;
  border-radius: 4px !important;
  background: #FFFFFF !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
  box-shadow: none !important;
  outline: none !important;
}

.socialhub-woo #payment .woocommerce-SavedPaymentMethods-saveNew label,
.socialhub-woo .woocommerce-SavedPaymentMethods-saveNew label,
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew label,
li.payment_method_stripe_cc .woocommerce-SavedPaymentMethods-saveNew label {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-body, inherit) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--wc-ink, #111) !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
}

/* 3. Internal Boxes Spacing & PayPal Description Text (Image 3) */
/* Outer payment method box */
.socialhub-woo #payment ul.payment_methods li {
  padding: 16px 18px !important;
}

/* 3. Internal Boxes Spacing & PayPal Description Text (Image 1) */
/* Outer payment method box */
.socialhub-woo #payment ul.payment_methods li {
  padding: 16px 18px !important;
}

/* First internal box (payment_box) - consistent top, bottom, and left spacing */
.socialhub-woo #payment div.payment_box,
.socialhub-woo #payment div.payment_box.payment_method_ppcp-gateway,
.socialhub-woo #payment div.payment_box.payment_method_ppcp {
  margin: 14px 0 0 !important;
  padding: 16px !important;
  padding-left: 16px !important;
  border-radius: var(--wc-radius-sm, 8px) !important;
}

/* Hide empty payment_box when it has no visible error or content */
.socialhub-woo #payment div.payment_box.is-empty,
html[data-theme="dark"] .socialhub-woo #payment div.payment_box.is-empty,
html:not([data-theme="light"]) .socialhub-woo #payment div.payment_box.is-empty,
.socialhub-woo #payment div.payment_box:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: 0 !important;
}

/* CSS :has() check: If payment_box has no visible error or input elements */
.socialhub-woo #payment div.payment_box.payment_method_ppcp:not(:has(.woocommerce-error li, .woocommerce-error p, .wc-ppcp-notice__info li, .wc-ppcp-notice__info p, .wc-ppcp-popup__container, p:not(:empty), [role="alert"]:not(:empty), input:not([type="hidden"]))) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: 0 !important;
}

/* Hide empty error / notice containers */
.socialhub-woo #payment .payment_box .wc-ppcp-notice__info:empty,
.socialhub-woo #payment .payment_box .woocommerce-error:empty,
.socialhub-woo #payment .payment_box .woocommerce-error:not(:has(li, p)) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* When an error or notice IS present inside payment_box, explicitly ensure it is displayed */
.socialhub-woo #payment div.payment_box.has-error,
.socialhub-woo #payment div.payment_box:has(.woocommerce-error li),
.socialhub-woo #payment div.payment_box:has(.woocommerce-error p),
.socialhub-woo #payment div.payment_box:has(.wc-ppcp-notice__info li),
.socialhub-woo #payment div.payment_box:has(.wc-ppcp-notice__info p),
.socialhub-woo #payment div.payment_box:has(.wc-ppcp-popup__container),
.socialhub-woo #payment div.payment_box.payment_method_ppcp:has(.wc-ppcp-order-review-message__container:not([style*="display: none"]):not([style*="display:none"])) {
  display: block !important;
  margin: 14px 0 0 !important;
  height: auto !important;
  min-height: auto !important;
}

/* If payment_box contains an error/notice, remove outer box card styling so it doesn't create a double card */
.socialhub-woo #payment div.payment_box.has-error,
.socialhub-woo #payment div.payment_box:has(.woocommerce-error),
.socialhub-woo #payment div.payment_box:has(.wc-ppcp-notice__info),
.socialhub-woo #payment div.payment_box.payment_method_ppcp:has(.woocommerce-error),
.socialhub-woo #payment div.payment_box.payment_method_ppcp:has(.wc-ppcp-notice__info) {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Second internal box (the div containing the text, e.g. PayPal notice / error container) */
.socialhub-woo #payment .payment_box .wc-ppcp-payment-method__container,
.socialhub-woo #payment .payment_box .wc-ppcp-notice__info {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Error card: ONLY 4px solid red border on left, seamlessly curving at top and bottom corners */
.socialhub-woo #payment .payment_box .woocommerce-error,
.socialhub-woo #payment .payment_box .wc-ppcp-notice__info .woocommerce-error,
.socialhub-woo #payment .payment_box ul.woocommerce-error,
.socialhub-woo .woocommerce-error {
  margin: 0 !important;
  padding: 14px 16px !important;
  background: #FFFFFF !important;
  border-top: 1px solid var(--wc-field-border, rgba(0, 0, 0, 0.1)) !important;
  border-right: 1px solid var(--wc-field-border, rgba(0, 0, 0, 0.1)) !important;
  border-bottom: 1px solid var(--wc-field-border, rgba(0, 0, 0, 0.1)) !important;
  border-left: 4px solid #dc2626 !important;
  border-radius: var(--wc-radius-sm, 8px) !important;
  list-style: none !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Remove ::before pseudo-element to prevent double left border and flat cut-off ends */
.socialhub-woo #payment .payment_box .woocommerce-error::before,
.socialhub-woo #payment .payment_box .wc-ppcp-notice__info .woocommerce-error::before,
.socialhub-woo #payment .payment_box ul.woocommerce-error::before,
.socialhub-woo .woocommerce-error::before {
  display: none !important;
  content: none !important;
}

/* PayPal notice message text - strictly 10px left padding on both desktop and mobile */
.socialhub-woo #payment .payment_box.payment_method_ppcp p,
.socialhub-woo #payment .payment_box.payment_method_ppcp .woocommerce-error,
.socialhub-woo #payment .payment_box.payment_method_ppcp .woocommerce-error li,
.socialhub-woo #payment .payment_box .woocommerce-error li,
.socialhub-woo #payment .payment_box .woocommerce-error p,
.socialhub-woo #payment .payment_box .wc-ppcp-notice__info,
.socialhub-woo #payment .payment_box .wc-ppcp-notice__info p,
.socialhub-woo #payment .payment_box .wc-ppcp-notice__info li {
  line-height: 1.4 !important;
  font-family: var(--font-body, inherit) !important;
  color: var(--wc-ink, #222) !important;
  margin: 0 !important;
  padding-left: 10px !important;
}

@media (max-width: 767px) {
  .socialhub-woo #payment .payment_box.payment_method_ppcp p,
  .socialhub-woo #payment .payment_box.payment_method_ppcp .woocommerce-error,
  .socialhub-woo #payment .payment_box.payment_method_ppcp .woocommerce-error li,
  .socialhub-woo #payment .payment_box .woocommerce-error li,
  .socialhub-woo #payment .payment_box .woocommerce-error p,
  .socialhub-woo #payment .payment_box .wc-ppcp-notice__info,
  .socialhub-woo #payment .payment_box .wc-ppcp-notice__info p,
  .socialhub-woo #payment .payment_box .wc-ppcp-notice__info li {
    font-size: 12px !important;
    line-height: 1.4 !important;
    padding-left: 10px !important;
  }
}

/* 4. Terms & Conditions link styling */
.socialhub-woo .woocommerce-terms-and-conditions-link.no-terms-page {
  color: inherit !important;
  cursor: default !important;
  pointer-events: none !important;
  text-decoration: none !important;
}

.socialhub-woo a.woocommerce-terms-and-conditions-link {
  color: var(--amber, #FFC82F) !important;
  cursor: pointer !important;
  text-decoration: underline !important;
}

/* Dark Theme / default hover: keep the exact same yellow amber color as on default */
html:not([data-theme="light"]) .socialhub-woo a.woocommerce-terms-and-conditions-link:hover,
html[data-theme="dark"] .socialhub-woo a.woocommerce-terms-and-conditions-link:hover,
[data-theme="dark"] .socialhub-woo a.woocommerce-terms-and-conditions-link:hover,
.socialhub-woo a.woocommerce-terms-and-conditions-link:hover {
  color: var(--amber, #FFC82F) !important;
  opacity: 0.9 !important;
  text-decoration: underline !important;
}

/* Light Theme: royal blue default and hover */
html[data-theme="light"] .socialhub-woo a.woocommerce-terms-and-conditions-link {
  color: var(--primary-blue, #040594) !important;
  text-decoration: underline !important;
}

html[data-theme="light"] .socialhub-woo a.woocommerce-terms-and-conditions-link:hover {
  color: var(--primary-blue, #040594) !important;
  opacity: 0.8 !important;
  text-decoration: underline !important;
}

/* 5. Dropdown Height, Arrow Centering, and Clean Single Dropdown (Image 2) */
/* Completely hide select elements when enhanced by select2 so no duplicate box appears above */
select.select2-hidden-accessible,
.select2-hidden-accessible,
.socialhub-woo select.select2-hidden-accessible {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ensure select2 container always takes 100% width and never collapses into a narrow 48px square */
.socialhub-woo .select2-container,
.socialhub-woo span.select2-container,
.woocommerce .select2-container,
.select2-container {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* Style the select2 container and native unenhanced selects to standard 48px height */
.socialhub-woo .select2-container--default .select2-selection--single,
.socialhub-woo .select2-container .select2-selection--single,
.socialhub-woo form.checkout select:not(.select2-hidden-accessible) {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  box-sizing: border-box !important;
  padding: 0 36px 0 16px !important;
  border-radius: var(--wc-radius-sm, 8px) !important;
  background: var(--wc-field-bg) !important;
  border: 1px solid var(--wc-field-border) !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
}

.socialhub-woo .select2-container--default .select2-selection--single .select2-selection__rendered,
.socialhub-woo .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  color: var(--wc-ink) !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

/* Arrow container - perfectly vertically centered with equal top and bottom space */
.socialhub-woo .select2-container--default .select2-selection--single .select2-selection__arrow,
.socialhub-woo .select2-container .select2-selection--single .select2-selection__arrow {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 14px !important;
  left: auto !important;
  height: 100% !important;
  width: 18px !important;
  margin: auto 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

.socialhub-woo .select2-container--default .select2-selection--single .select2-selection__arrow b,
.socialhub-woo .select2-container .select2-selection--single .select2-selection__arrow b {
  position: static !important;
  margin: 0 !important;
  border-color: var(--wc-ink-2, #666) transparent transparent transparent !important;
  border-style: solid !important;
  border-width: 5px 4.5px 0 4.5px !important;
  height: 0 !important;
  width: 0 !important;
}

/* Native unenhanced select element arrow centering and height */
.socialhub-woo form.checkout select:not(.select2-hidden-accessible) {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23666666" d="M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 11px 7px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 46px !important;
}

/* 6. Order Review Table - Perfect Subtotal & Pricing Alignment (Images 3 & 4) */
.socialhub-woo table.woocommerce-checkout-review-order-table,
.woocommerce-checkout table.woocommerce-checkout-review-order-table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  margin-bottom: 24px !important;
}

/* Header Alignment */
.socialhub-woo table.woocommerce-checkout-review-order-table thead th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
  padding: 14px 20px !important;
  vertical-align: middle !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--wc-ink-2) !important;
  border-bottom: 1px solid var(--wc-inset-border) !important;
}

.socialhub-woo table.woocommerce-checkout-review-order-table thead th.product-name,
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th.product-name {
  text-align: left !important;
  width: 60% !important;
}

.socialhub-woo table.woocommerce-checkout-review-order-table thead th.product-total,
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th.product-total {
  text-align: right !important;
  width: 40% !important;
}

/* Identical Padding, Vertical Middle Centering, and Horizontal Alignment for all rows */
.socialhub-woo table.woocommerce-checkout-review-order-table tbody td,
.socialhub-woo table.woocommerce-checkout-review-order-table tfoot th,
.socialhub-woo table.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
  padding: 16px 20px !important;
  vertical-align: middle !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

/* Left Column: Product Name, Subtotal label, Total label */
.socialhub-woo table.woocommerce-checkout-review-order-table tbody td.product-name,
.socialhub-woo table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td.product-name,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th {
  text-align: left !important;
  width: 60% !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--wc-ink) !important;
}

/* Right Column: Product Total amount, Subtotal amount, Total amount */
.socialhub-woo table.woocommerce-checkout-review-order-table tbody td.product-total,
.socialhub-woo table.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td.product-total,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
  text-align: right !important;
  width: 40% !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--wc-ink) !important;
}

/* Order Total Row */
.socialhub-woo table.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total th {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--wc-ink) !important;
}

.socialhub-woo table.woocommerce-checkout-review-order-table tfoot .order-total td,
.socialhub-woo table.woocommerce-checkout-review-order-table tfoot .order-total .woocommerce-Price-amount,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total .woocommerce-Price-amount {
  font-family: var(--font-display) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #040594 !important;
}

/* Mobile Screen Clean Order Review Table (Image 3) */
@media (max-width: 768px) {
  .socialhub-woo table.woocommerce-checkout-review-order-table,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    margin-bottom: 20px !important;
  }

  .socialhub-woo table.woocommerce-checkout-review-order-table thead,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table thead {
    display: table-header-group !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    clip: auto !important;
    white-space: normal !important;
  }

  .socialhub-woo table.woocommerce-checkout-review-order-table thead th,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
    padding: 12px 14px !important;
    font-size: 11px !important;
  }

  .socialhub-woo table.woocommerce-checkout-review-order-table tbody,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table tbody {
    display: table-row-group !important;
    width: 100% !important;
  }

  .socialhub-woo table.woocommerce-checkout-review-order-table tfoot,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot {
    display: table-footer-group !important;
    width: 100% !important;
  }

  .socialhub-woo table.woocommerce-checkout-review-order-table tr,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table tr {
    display: table-row !important;
    width: 100% !important;
    border-bottom: 1px solid var(--wc-inset-border, rgba(0, 0, 0, 0.08)) !important;
  }

  .socialhub-woo table.woocommerce-checkout-review-order-table th,
  .socialhub-woo table.woocommerce-checkout-review-order-table td,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table th,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table td {
    display: table-cell !important;
    padding: 12px 14px !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid var(--wc-inset-border, rgba(0, 0, 0, 0.08)) !important;
  }

  .socialhub-woo table.woocommerce-checkout-review-order-table th:first-child,
  .socialhub-woo table.woocommerce-checkout-review-order-table td:first-child,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table th:first-child,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table td:first-child {
    width: 60% !important;
    text-align: left !important;
  }

  .socialhub-woo table.woocommerce-checkout-review-order-table th:last-child,
  .socialhub-woo table.woocommerce-checkout-review-order-table td:last-child,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table th:last-child,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table td:last-child {
    width: 40% !important;
    text-align: right !important;
  }

  .socialhub-woo table.woocommerce-checkout-review-order-table td::before,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table td::before {
    display: none !important;
    content: none !important;
  }
}

/* ==========================================================================
   7. DESKTOP / LAPTOP CHECKOUT TWO-COLUMN LAYOUT (Laptop Screen Fixes)
   ========================================================================== */
@media (min-width: 992px) {
  .socialhub-woo form.woocommerce-checkout,
  .woocommerce-checkout form.checkout,
  form.woocommerce-checkout {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 32px 0 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
  }

  /* Left Column: Customer details (Billing Details & Additional Info) */
  .socialhub-woo #customer_details,
  .woocommerce-checkout #customer_details,
  form.woocommerce-checkout #customer_details,
  #customer_details.col2-set {
    flex: 0 0 calc(57% - 16px) !important;
    width: calc(57% - 16px) !important;
    max-width: calc(57% - 16px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .socialhub-woo #customer_details > .col-1,
  .socialhub-woo #customer_details > .col-2,
  #customer_details.col2-set > .col-1,
  #customer_details.col2-set > .col-2 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Hide redundant order review heading */
  .socialhub-woo #order_review_heading,
  form.woocommerce-checkout #order_review_heading {
    display: none !important;
  }

  /* Right Column: Order Review Table & Payment Gateway Box */
  .socialhub-woo #order_review,
  .woocommerce-checkout #order_review,
  form.woocommerce-checkout #order_review,
  #order_review.woocommerce-checkout-review-order {
    flex: 0 0 calc(43% - 16px) !important;
    width: calc(43% - 16px) !important;
    max-width: calc(43% - 16px) !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  /* Take hidden wc attribution inputs completely out of document flow */
  .socialhub-woo wc-order-attribution-inputs,
  wc-order-attribution-inputs {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Medium / Tablet Screens (769px to 991px): Clean Single Column Stack with Zero Overlap */
@media (min-width: 769px) and (max-width: 991px) {
  .socialhub-woo form.woocommerce-checkout,
  form.woocommerce-checkout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
  }

  .socialhub-woo #customer_details,
  form.woocommerce-checkout #customer_details,
  #customer_details.col2-set {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    float: none !important;
    margin: 0 !important;
  }

  .socialhub-woo #customer_details > .col-1,
  .socialhub-woo #customer_details > .col-2,
  #customer_details.col2-set > .col-1,
  #customer_details.col2-set > .col-2 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
  }
  .socialhub-woo #order_review,
  form.woocommerce-checkout #order_review {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    margin: 0 !important;
  }
}

/* Stat Card Hover Icon Visibility (Preserves Crisp White Icon on Dark Blue Container) */
html[data-theme="light"] .stat-card:hover .stat-icon-wrapper svg,
html[data-theme="light"] .stat-card:hover .stat-icon-wrapper svg *,
html[data-theme="light"] .stat-card:hover .stat-icon-wrapper i {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
}

/* Contact Form Submit Button (Light Theme Strictly) — Solid #040594 on Hover (No Gradient) */
html[data-theme="light"] .ref-submit-btn {
  background: #040594 !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

html[data-theme="light"] .ref-submit-btn:hover {
  background: #040594 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
  box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.85), inset 0px -2px 3px rgba(0, 0, 0, 0.2), 0 6px 16px rgba(4, 5, 148, 0.35) !important;
}

html[data-theme="light"] .ref-submit-btn::before,
html[data-theme="light"] .ref-submit-btn:hover::before {
  border-color: rgba(2, 63, 205, 0.35) !important;
  box-shadow: 0 4px 14px rgba(2, 63, 205, 0.15) !important;
  background: transparent !important;
}

html[data-theme="light"] .ref-submit-btn::after,
html[data-theme="light"] .ref-submit-btn:hover::after {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
}

/* Contact Form Submit Button (Dark Theme Strictly) — Vibrant Yellow Button with Black Text & Plane Icon */
html:not([data-theme="light"]) .ref-submit-btn,
html[data-theme="dark"] .ref-submit-btn,
[data-theme="dark"] .ref-submit-btn {
  background: linear-gradient(135deg, #FFE066 0%, #FFC82F 100%) !important;
  background-image: linear-gradient(135deg, #FFE066 0%, #FFC82F 100%) !important;
  color: #000000 !important;
  border: 1px solid rgba(255, 200, 47, 0.6) !important;
  box-shadow: 0 4px 18px rgba(255, 200, 47, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.65) !important;
}

html:not([data-theme="light"]) .ref-submit-btn span,
html[data-theme="dark"] .ref-submit-btn span,
[data-theme="dark"] .ref-submit-btn span {
  color: #000000 !important;
  font-weight: 600 !important;
}

html:not([data-theme="light"]) .ref-submit-btn svg,
html:not([data-theme="light"]) .ref-submit-btn svg *,
html:not([data-theme="light"]) .ref-submit-btn .plane-send-icon,
html[data-theme="dark"] .ref-submit-btn svg,
html[data-theme="dark"] .ref-submit-btn svg *,
html[data-theme="dark"] .ref-submit-btn .plane-send-icon,
[data-theme="dark"] .ref-submit-btn svg,
[data-theme="dark"] .ref-submit-btn svg *,
[data-theme="dark"] .ref-submit-btn .plane-send-icon {
  color: #000000 !important;
  stroke: #000000 !important;
}

html:not([data-theme="light"]) .ref-submit-btn::before,
html[data-theme="dark"] .ref-submit-btn::before,
[data-theme="dark"] .ref-submit-btn::before {
  border: 2px solid rgba(255, 200, 47, 0.35) !important;
  box-shadow: 0 4px 14px rgba(255, 200, 47, 0.18) !important;
}

html:not([data-theme="light"]) .ref-submit-btn:hover,
html[data-theme="dark"] .ref-submit-btn:hover,
[data-theme="dark"] .ref-submit-btn:hover {
  background: linear-gradient(135deg, #FFF099 0%, #FFE066 40%, #FFC82F 100%) !important;
  background-image: linear-gradient(135deg, #FFF099 0%, #FFE066 40%, #FFC82F 100%) !important;
  border-color: #FFE066 !important;
  color: #000000 !important;
  box-shadow: 0 6px 24px rgba(255, 200, 47, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-2px) !important;
}

html:not([data-theme="light"]) .ref-submit-btn:hover span,
html[data-theme="dark"] .ref-submit-btn:hover span,
[data-theme="dark"] .ref-submit-btn:hover span {
  color: #000000 !important;
}

html:not([data-theme="light"]) .ref-submit-btn:hover svg,
html:not([data-theme="light"]) .ref-submit-btn:hover svg *,
html:not([data-theme="light"]) .ref-submit-btn:hover .plane-send-icon,
html[data-theme="dark"] .ref-submit-btn:hover svg,
html[data-theme="dark"] .ref-submit-btn:hover svg *,
html[data-theme="dark"] .ref-submit-btn:hover .plane-send-icon,
[data-theme="dark"] .ref-submit-btn:hover svg,
[data-theme="dark"] .ref-submit-btn:hover svg *,
[data-theme="dark"] .ref-submit-btn:hover .plane-send-icon {
  color: #000000 !important;
  stroke: #000000 !important;
}

html:not([data-theme="light"]) .ref-submit-btn:hover::before,
html[data-theme="dark"] .ref-submit-btn:hover::before,
[data-theme="dark"] .ref-submit-btn:hover::before {
  border-color: #FFC82F !important;
  box-shadow: 0 4px 18px rgba(255, 200, 47, 0.4) !important;
}

/* ==========================================================================
   User Requested Visual & Palette Refinements
   ========================================================================== */

/* 1. Hero Secondary Outline Button — #FFC82F Yellow Border on Hover */
html[data-theme="light"] .btn-outline:hover,
html[data-theme="light"] .hero-actions .btn-outline:hover {
  border-color: #FFC82F !important;
}
html[data-theme="light"] .btn-outline:hover::before,
html[data-theme="light"] .hero-actions .btn-outline:hover::before {
  border-color: #FFC82F !important;
  box-shadow: 0 4px 14px rgba(255, 200, 47, 0.35) !important;
}

/* 2. Blog Page — Hide Article Filter Buttons */
.blog-filter-pills,
.blog-filters,
.article-filter-buttons {
  display: none !important;
}

/* 3. Center Pricing Card — Buy Now Arrow Matches Text Color (#040594) */
.pricing-card.premium-plan .btn-filled svg,
.pricing-card.premium-plan .btn-filled svg *,
.pricing-card.premium-plan .btn-filled i,
html[data-theme="light"] .pricing-card.premium-plan .btn-filled svg,
html[data-theme="light"] .pricing-card.premium-plan .btn-filled svg *,
html[data-theme="light"] .pricing-card.premium-plan .btn-filled i,
html[data-theme="light"] .pricing-card.premium-plan .btn-filled:hover svg,
html[data-theme="light"] .pricing-card.premium-plan .btn-filled:hover svg * {
  color: #040594 !important;
  stroke: #040594 !important;
  fill: none !important;
}

/* 4. CTA Card Top Shimmer — Blue Palette Accent (#040594) Across All Pages */
.cta-glass-shimmer,
.cta-v2-card .cta-glass-shimmer {
  background: linear-gradient(90deg, transparent, rgba(255, 200, 47, 0.8), rgba(255, 255, 255, 0.9), rgba(4, 5, 148, 0.8), transparent) !important;
}

/* 5. Why Choose Us Right-Side SVG Background Shape — Light #FFC82F Tint */
.why-bg-shape {
  fill: #FFF8E7 !important;
}
html[data-theme="dark"] .why-bg-shape,
[data-theme="dark"] .why-bg-shape {
  fill: rgba(255, 200, 47, 0.1) !important;
}

/* 6. Dark Theme Background — #000028 */
:root {
  --ink-navy: #000028 !important;
  --deck-navy: #000028 !important;
}
html[data-theme="dark"],
[data-theme="dark"] {
  --ink-navy: #000028 !important;
  --deck-navy: #000028 !important;
  --page-gradient: #000028 !important;
}

/* 7. About Section (Home) & About Page Hero — Yellow #FFC82F Rating Stars */
.premium-about-stars svg,
.premium-about-stars svg *,
.premium-about-stars i,
html[data-theme="light"] .premium-about-stars svg,
html[data-theme="light"] .premium-about-stars svg *,
html[data-theme="light"] .premium-about-stars i {
  fill: #FFC82F !important;
  color: #FFC82F !important;
  stroke: #FFC82F !important;
}

/* 8. Dark Mode Cards — Custom Royal Navy & Gold Sheen Linear Gradient */
/* background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576) */
:root {
  --panel-navy: #0436aa;
  --about-card-bg: #0436aa;
}

html[data-theme="dark"],
[data-theme="dark"],
html:not([data-theme="light"]) {
  --panel-navy: #0436aa !important;
  --about-card-bg: #0436aa !important;
}

html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .stat-card--featured,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .pricing-card.premium-plan,
html[data-theme="dark"] .plan-inner-card,
html[data-theme="dark"] .portfolio-case-card,
html[data-theme="dark"] .portfolio-card,
html[data-theme="dark"] .case-card-body,
html[data-theme="dark"] .testimonial-marquee-card,
html[data-theme="dark"] .why-dashboard-card,
html[data-theme="dark"] .why-features-card,
html[data-theme="dark"] .why-badge-stat,
html[data-theme="dark"] .about-pillar-card,
html[data-theme="dark"] .about-pillar-featured,
html[data-theme="dark"] .about-stat-card,
html[data-theme="dark"] .pillar-featured-stats,
html[data-theme="dark"] .premium-collage-card,
html[data-theme="dark"] .card-experience,
html[data-theme="dark"] .card-campaigns,
html[data-theme="dark"] .card-impressions,
html[data-theme="dark"] .card-roi,
html[data-theme="dark"] .card-growth,
html[data-theme="dark"] .card-growth-inner,
html[data-theme="dark"] .blog-modern-card,
html[data-theme="dark"] .blog-featured-card,
html[data-theme="dark"] .post-author-bio-card,
html[data-theme="dark"] .contact-form-panel,
html[data-theme="dark"] .ref-info-card,
html[data-theme="dark"] .ref-info-card-static,
html[data-theme="dark"] .falling-physics-card,
html[data-theme="dark"] .cta-v2-card,
html[data-theme="dark"] .cta-card,
html[data-theme="dark"] .panel-card,
html[data-theme="dark"] .growth-engine-card,
html[data-theme="dark"] .bento-box,
html[data-theme="dark"] .bento-box-status,
html[data-theme="dark"] .bento-card,
html[data-theme="dark"] .analytics-graph-card,
html[data-theme="dark"] .process-card,
html[data-theme="dark"] .team-card,
html[data-theme="dark"] .hero-bottom-banner,
html[data-theme="dark"] .modal-kpi-card,
html[data-theme="dark"] .case-modal-box,
html[data-theme="dark"] .checkout-panel-card,
html[data-theme="dark"] .socialhub-woo .woocommerce-checkout-review-order,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .stat-card--featured,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .pricing-card.premium-plan,
[data-theme="dark"] .plan-inner-card,
[data-theme="dark"] .portfolio-case-card,
[data-theme="dark"] .portfolio-card,
[data-theme="dark"] .case-card-body,
[data-theme="dark"] .testimonial-marquee-card,
[data-theme="dark"] .why-dashboard-card,
[data-theme="dark"] .why-features-card,
[data-theme="dark"] .why-badge-stat,
[data-theme="dark"] .about-pillar-card,
[data-theme="dark"] .about-pillar-featured,
[data-theme="dark"] .about-stat-card,
[data-theme="dark"] .pillar-featured-stats,
[data-theme="dark"] .premium-collage-card,
[data-theme="dark"] .card-experience,
[data-theme="dark"] .card-campaigns,
[data-theme="dark"] .card-impressions,
[data-theme="dark"] .card-roi,
[data-theme="dark"] .card-growth,
[data-theme="dark"] .card-growth-inner,
[data-theme="dark"] .blog-modern-card,
[data-theme="dark"] .blog-featured-card,
[data-theme="dark"] .post-author-bio-card,
[data-theme="dark"] .contact-form-panel,
[data-theme="dark"] .ref-info-card,
[data-theme="dark"] .ref-info-card-static,
[data-theme="dark"] .falling-physics-card,
[data-theme="dark"] .cta-v2-card,
[data-theme="dark"] .cta-card,
[data-theme="dark"] .panel-card,
[data-theme="dark"] .growth-engine-card,
[data-theme="dark"] .bento-box,
[data-theme="dark"] .bento-box-status,
[data-theme="dark"] .bento-card,
[data-theme="dark"] .analytics-graph-card,
[data-theme="dark"] .process-card,
[data-theme="dark"] .team-card,
[data-theme="dark"] .hero-bottom-banner,
[data-theme="dark"] .modal-kpi-card,
[data-theme="dark"] .case-modal-box,
[data-theme="dark"] .checkout-panel-card,
[data-theme="dark"] .socialhub-woo .woocommerce-checkout-review-order,
html:not([data-theme="light"]) .stat-card,
html:not([data-theme="light"]) .stat-card--featured,
html:not([data-theme="light"]) .pricing-card,
html:not([data-theme="light"]) .pricing-card.premium-plan,
html:not([data-theme="light"]) .plan-inner-card,
html:not([data-theme="light"]) .portfolio-case-card,
html:not([data-theme="light"]) .portfolio-card,
html:not([data-theme="light"]) .case-card-body,
html:not([data-theme="light"]) .testimonial-marquee-card,
html:not([data-theme="light"]) .why-dashboard-card,
html:not([data-theme="light"]) .why-features-card,
html:not([data-theme="light"]) .why-badge-stat,
html:not([data-theme="light"]) .about-pillar-card,
html:not([data-theme="light"]) .about-pillar-featured,
html:not([data-theme="light"]) .about-stat-card,
html:not([data-theme="light"]) .pillar-featured-stats,
html:not([data-theme="light"]) .premium-collage-card,
html:not([data-theme="light"]) .card-experience,
html:not([data-theme="light"]) .card-campaigns,
html:not([data-theme="light"]) .card-impressions,
html:not([data-theme="light"]) .card-roi,
html:not([data-theme="light"]) .card-growth,
html:not([data-theme="light"]) .card-growth-inner,
html:not([data-theme="light"]) .blog-modern-card,
html:not([data-theme="light"]) .blog-featured-card,
html:not([data-theme="light"]) .post-author-bio-card,
html:not([data-theme="light"]) .contact-form-panel,
html:not([data-theme="light"]) .ref-info-card,
html:not([data-theme="light"]) .ref-info-card-static,
html:not([data-theme="light"]) .falling-physics-card,
html:not([data-theme="light"]) .cta-v2-card,
html:not([data-theme="light"]) .cta-card,
html:not([data-theme="light"]) .panel-card,
html:not([data-theme="light"]) .growth-engine-card,
html:not([data-theme="light"]) .bento-box,
html:not([data-theme="light"]) .bento-box-status,
html:not([data-theme="light"]) .bento-card,
html:not([data-theme="light"]) .analytics-graph-card,
html:not([data-theme="light"]) .process-card,
html:not([data-theme="light"]) .team-card,
html:not([data-theme="light"]) .hero-bottom-banner,
html:not([data-theme="light"]) .modal-kpi-card,
html:not([data-theme="light"]) .case-modal-box,
html:not([data-theme="light"]) .checkout-panel-card,
html:not([data-theme="light"]) .socialhub-woo .woocommerce-checkout-review-order {
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576) !important;
  background-image: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576) !important;
}

/* Card Hover States on Dark Mode */
html[data-theme="dark"] .stat-card:hover,
html[data-theme="dark"] .stat-card--featured:hover,
html[data-theme="dark"] .pricing-card:hover,
html[data-theme="dark"] .pricing-card.premium-plan:hover,
html[data-theme="dark"] .portfolio-case-card:hover,
html[data-theme="dark"] .portfolio-card:hover,
html[data-theme="dark"] .testimonial-marquee-card:hover,
html[data-theme="dark"] .about-pillar-card:hover,
html[data-theme="dark"] .about-pillar-featured:hover,
html[data-theme="dark"] .about-stat-card:hover,
html[data-theme="dark"] .premium-collage-card:hover,
html[data-theme="dark"] .blog-modern-card:hover,
html[data-theme="dark"] .ref-info-card:hover,
[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .stat-card--featured:hover,
[data-theme="dark"] .pricing-card:hover,
[data-theme="dark"] .pricing-card.premium-plan:hover,
[data-theme="dark"] .portfolio-case-card:hover,
[data-theme="dark"] .portfolio-card:hover,
[data-theme="dark"] .testimonial-marquee-card:hover,
[data-theme="dark"] .about-pillar-card:hover,
[data-theme="dark"] .about-pillar-featured:hover,
[data-theme="dark"] .about-stat-card:hover,
[data-theme="dark"] .premium-collage-card:hover,
[data-theme="dark"] .blog-modern-card:hover,
[data-theme="dark"] .ref-info-card:hover,
html:not([data-theme="light"]) .stat-card:hover,
html:not([data-theme="light"]) .stat-card--featured:hover,
html:not([data-theme="light"]) .pricing-card:hover,
html:not([data-theme="light"]) .pricing-card.premium-plan:hover,
html:not([data-theme="light"]) .portfolio-case-card:hover,
html:not([data-theme="light"]) .portfolio-card:hover,
html:not([data-theme="light"]) .testimonial-marquee-card:hover,
html:not([data-theme="light"]) .about-pillar-card:hover,
html:not([data-theme="light"]) .about-pillar-featured:hover,
html:not([data-theme="light"]) .about-stat-card:hover,
html:not([data-theme="light"]) .premium-collage-card:hover,
html:not([data-theme="light"]) .blog-modern-card:hover,
html:not([data-theme="light"]) .ref-info-card:hover {
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.14) 0%, #0436aa, #022576) !important;
}

/* Remove old brownish/black ::before overlays on Dark Mode */
html[data-theme="dark"] .testimonial-marquee-card::before,
[data-theme="dark"] .testimonial-marquee-card::before,
html:not([data-theme="light"]) .testimonial-marquee-card::before,
html[data-theme="dark"] .about-stat-card::before,
[data-theme="dark"] .about-stat-card::before,
html:not([data-theme="light"]) .about-stat-card::before {
  display: none !important;
}

/* 9. Dark Mode Input Fields — #012985 Background */
/* Contact form, checkout, comments, and all input/textarea/select fields */
html[data-theme="dark"] .ref-input,
html[data-theme="dark"] .ref-textarea,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .woocommerce form.checkout input.input-text,
html[data-theme="dark"] .woocommerce form.checkout textarea,
html[data-theme="dark"] .woocommerce .select2-container--default .select2-selection--single,
[data-theme="dark"] .ref-input,
[data-theme="dark"] .ref-textarea,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .woocommerce form.checkout input.input-text,
[data-theme="dark"] .woocommerce form.checkout textarea,
[data-theme="dark"] .woocommerce .select2-container--default .select2-selection--single,
html:not([data-theme="light"]) .ref-input,
html:not([data-theme="light"]) .ref-textarea,
html:not([data-theme="light"]) .form-input,
html:not([data-theme="light"]) .form-textarea,
html:not([data-theme="light"]) .form-control,
html:not([data-theme="light"]) input[type="text"],
html:not([data-theme="light"]) input[type="email"],
html:not([data-theme="light"]) input[type="tel"],
html:not([data-theme="light"]) input[type="url"],
html:not([data-theme="light"]) input[type="password"],
html:not([data-theme="light"]) input[type="search"],
html:not([data-theme="light"]) input[type="number"],
html:not([data-theme="light"]) textarea,
html:not([data-theme="light"]) select,
html:not([data-theme="light"]) .woocommerce form.checkout input.input-text,
html:not([data-theme="light"]) .woocommerce form.checkout textarea,
html:not([data-theme="light"]) .woocommerce .select2-container--default .select2-selection--single {
  background: #012985 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 200, 47, 0.25) !important;
}

/* Dark Mode Input Fields Focus States */
html[data-theme="dark"] .ref-input:focus,
html[data-theme="dark"] .ref-textarea:focus,
html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] .form-textarea:focus,
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
[data-theme="dark"] .ref-input:focus,
[data-theme="dark"] .ref-textarea:focus,
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-textarea:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
html:not([data-theme="light"]) .ref-input:focus,
html:not([data-theme="light"]) .ref-textarea:focus,
html:not([data-theme="light"]) .form-input:focus,
html:not([data-theme="light"]) .form-textarea:focus,
html:not([data-theme="light"]) .form-control:focus,
html:not([data-theme="light"]) input:focus,
html:not([data-theme="light"]) textarea:focus,
html:not([data-theme="light"]) select:focus {
  background: #012985 !important;
  border-color: #FFC82F !important;
  box-shadow: 0 0 0 3px rgba(255, 200, 47, 0.2) !important;
  color: #FFFFFF !important;
}

/* Dark Mode Placeholder Text */
html[data-theme="dark"] ::placeholder,
[data-theme="dark"] ::placeholder,
html:not([data-theme="light"]) ::placeholder,
html[data-theme="dark"] .ref-input::placeholder,
html[data-theme="dark"] .ref-textarea::placeholder,
[data-theme="dark"] .ref-input::placeholder,
[data-theme="dark"] .ref-textarea::placeholder,
html:not([data-theme="light"]) .ref-input::placeholder,
html:not([data-theme="light"]) .ref-textarea::placeholder {
  color: rgba(255, 255, 255, 0.65) !important;
  opacity: 1 !important;
}

/* 10. Dark Mode: Yellow Buttons have Black Text & Black Icons (Strict Dark Mode Only) */
html[data-theme="dark"] .btn-filled,
[data-theme="dark"] .btn-filled,
html[data-theme="dark"] .main-header .btn-filled,
[data-theme="dark"] .main-header .btn-filled,
html[data-theme="dark"] .btn-brand,
[data-theme="dark"] .btn-brand,
html[data-theme="dark"] .pricing-card.premium-plan .btn-filled,
[data-theme="dark"] .pricing-card.premium-plan .btn-filled,
html:not([data-theme="light"]) .pricing-card.premium-plan .btn-filled {
  color: #000000 !important;
}

html[data-theme="dark"] .btn-filled svg,
html[data-theme="dark"] .btn-filled svg *,
html[data-theme="dark"] .btn-filled i,
[data-theme="dark"] .btn-filled svg,
[data-theme="dark"] .btn-filled svg *,
[data-theme="dark"] .btn-filled i,
html:not([data-theme="light"]) .btn-filled svg,
html:not([data-theme="light"]) .btn-filled svg *,
html:not([data-theme="light"]) .btn-filled i,
html[data-theme="dark"] .pricing-card.premium-plan .btn-filled svg,
html[data-theme="dark"] .pricing-card.premium-plan .btn-filled svg *,
html[data-theme="dark"] .pricing-card.premium-plan .btn-filled i,
[data-theme="dark"] .pricing-card.premium-plan .btn-filled svg,
[data-theme="dark"] .pricing-card.premium-plan .btn-filled svg *,
[data-theme="dark"] .pricing-card.premium-plan .btn-filled i,
html:not([data-theme="light"]) .pricing-card.premium-plan .btn-filled svg,
html:not([data-theme="light"]) .pricing-card.premium-plan .btn-filled svg *,
html:not([data-theme="light"]) .pricing-card.premium-plan .btn-filled i,
html[data-theme="dark"] .main-header .btn-filled svg,
html[data-theme="dark"] .main-header .btn-filled svg *,
html[data-theme="dark"] .main-header .btn-filled i,
[data-theme="dark"] .main-header .btn-filled svg,
[data-theme="dark"] .main-header .btn-filled svg *,
[data-theme="dark"] .main-header .btn-filled i,
html[data-theme="dark"] .btn-brand svg,
html[data-theme="dark"] .btn-brand svg *,
html[data-theme="dark"] .btn-brand i,
[data-theme="dark"] .btn-brand svg,
[data-theme="dark"] .btn-brand svg *,
[data-theme="dark"] .btn-brand i {
  color: #000000 !important;
  stroke: #000000 !important;
  fill: none !important;
}

html[data-theme="dark"] .btn-filled:hover,
[data-theme="dark"] .btn-filled:hover,
html:not([data-theme="light"]) .btn-filled:hover,
html[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .btn-outline:hover,
html:not([data-theme="light"]) .btn-outline:hover,
html[data-theme="dark"] .main-header .btn-filled:hover,
[data-theme="dark"] .main-header .btn-filled:hover,
html:not([data-theme="light"]) .main-header .btn-filled:hover,
html[data-theme="dark"] .btn-brand:hover,
[data-theme="dark"] .btn-brand:hover,
html:not([data-theme="light"]) .btn-brand:hover,
html[data-theme="dark"] .pricing-card .btn:hover,
[data-theme="dark"] .pricing-card .btn:hover,
html:not([data-theme="light"]) .pricing-card .btn:hover,
html[data-theme="dark"] .pricing-card .btn-outline:hover,
[data-theme="dark"] .pricing-card .btn-outline:hover,
html:not([data-theme="light"]) .pricing-card .btn-outline:hover,
html[data-theme="dark"] .pricing-card.premium-plan .btn-filled:hover,
[data-theme="dark"] .pricing-card.premium-plan .btn-filled:hover,
html:not([data-theme="light"]) .pricing-card.premium-plan .btn-filled:hover,
html[data-theme="dark"] .pricing-card:hover .btn,
[data-theme="dark"] .pricing-card:hover .btn,
html:not([data-theme="light"]) .pricing-card:hover .btn {
  color: #000000 !important;
}

html[data-theme="dark"] .btn-filled:hover svg,
html[data-theme="dark"] .btn-filled:hover svg *,
html[data-theme="dark"] .btn-filled:hover i,
[data-theme="dark"] .btn-filled:hover svg,
[data-theme="dark"] .btn-filled:hover svg *,
[data-theme="dark"] .btn-filled:hover i,
html:not([data-theme="light"]) .btn-filled:hover svg,
html:not([data-theme="light"]) .btn-filled:hover svg *,
html:not([data-theme="light"]) .btn-filled:hover i,
html[data-theme="dark"] .btn-outline:hover svg,
html[data-theme="dark"] .btn-outline:hover svg *,
html[data-theme="dark"] .btn-outline:hover i,
[data-theme="dark"] .btn-outline:hover svg,
[data-theme="dark"] .btn-outline:hover svg *,
[data-theme="dark"] .btn-outline:hover i,
html:not([data-theme="light"]) .btn-outline:hover svg,
html:not([data-theme="light"]) .btn-outline:hover svg *,
html:not([data-theme="light"]) .btn-outline:hover i,
html[data-theme="dark"] .pricing-card .btn:hover svg,
html[data-theme="dark"] .pricing-card .btn:hover svg *,
html[data-theme="dark"] .pricing-card .btn:hover i,
[data-theme="dark"] .pricing-card .btn:hover svg,
[data-theme="dark"] .pricing-card .btn:hover svg *,
[data-theme="dark"] .pricing-card .btn:hover i,
html:not([data-theme="light"]) .pricing-card .btn:hover svg,
html:not([data-theme="light"]) .pricing-card .btn:hover svg *,
html:not([data-theme="light"]) .pricing-card .btn:hover i,
html[data-theme="dark"] .pricing-card .btn-outline:hover svg,
html[data-theme="dark"] .pricing-card .btn-outline:hover svg *,
html[data-theme="dark"] .pricing-card .btn-outline:hover i,
[data-theme="dark"] .pricing-card .btn-outline:hover svg,
[data-theme="dark"] .pricing-card .btn-outline:hover svg *,
[data-theme="dark"] .pricing-card .btn-outline:hover i,
html:not([data-theme="light"]) .pricing-card .btn-outline:hover svg,
html:not([data-theme="light"]) .pricing-card .btn-outline:hover svg *,
html:not([data-theme="light"]) .pricing-card .btn-outline:hover i,
html[data-theme="dark"] .pricing-card.premium-plan .btn-filled:hover svg,
html[data-theme="dark"] .pricing-card.premium-plan .btn-filled:hover svg *,
html[data-theme="dark"] .pricing-card.premium-plan .btn-filled:hover i,
[data-theme="dark"] .pricing-card.premium-plan .btn-filled:hover svg,
[data-theme="dark"] .pricing-card.premium-plan .btn-filled:hover svg *,
[data-theme="dark"] .pricing-card.premium-plan .btn-filled:hover i,
html:not([data-theme="light"]) .pricing-card.premium-plan .btn-filled:hover svg,
html:not([data-theme="light"]) .pricing-card.premium-plan .btn-filled:hover svg *,
html:not([data-theme="light"]) .pricing-card.premium-plan .btn-filled:hover i,
html[data-theme="dark"] .pricing-card:hover .btn svg,
html[data-theme="dark"] .pricing-card:hover .btn svg *,
html[data-theme="dark"] .pricing-card:hover .btn i,
[data-theme="dark"] .pricing-card:hover .btn svg,
[data-theme="dark"] .pricing-card:hover .btn svg *,
[data-theme="dark"] .pricing-card:hover .btn i,
html:not([data-theme="light"]) .pricing-card:hover .btn svg,
html:not([data-theme="light"]) .pricing-card:hover .btn svg *,
html:not([data-theme="light"]) .pricing-card:hover .btn i {
  color: #000000 !important;
  stroke: #000000 !important;
  fill: none !important;
}

/* 11. Dark Mode: Stat Cards Default to Amber Icon Setting from Hover State (Strict Dark Mode Only) */
html[data-theme="dark"] .stat-card,
[data-theme="dark"] .stat-card,
html[data-theme="dark"] .stat-card--featured,
[data-theme="dark"] .stat-card--featured {
  border: 1px solid rgba(255, 200, 47, 0.45) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35), 0 0 25px rgba(255, 200, 47, 0.12) !important;
}

html[data-theme="dark"] .stat-icon-wrapper,
[data-theme="dark"] .stat-icon-wrapper {
  background: #FFC82F !important;
  color: #040594 !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: 0 4px 14px rgba(255, 200, 47, 0.35) !important;
}

html[data-theme="dark"] .stat-icon-wrapper svg,
html[data-theme="dark"] .stat-icon-wrapper svg *,
html[data-theme="dark"] .stat-icon-wrapper i,
[data-theme="dark"] .stat-icon-wrapper svg,
[data-theme="dark"] .stat-icon-wrapper svg *,
[data-theme="dark"] .stat-icon-wrapper i {
  color: #040594 !important;
  stroke: #040594 !important;
}

html[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .stat-card:hover,
html[data-theme="dark"] .stat-card--featured:hover,
[data-theme="dark"] .stat-card--featured:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(255, 200, 47, 0.7) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45), 0 0 32px rgba(255, 200, 47, 0.22) !important;
}

html[data-theme="dark"] .stat-card:hover .stat-icon-wrapper,
[data-theme="dark"] .stat-card:hover .stat-icon-wrapper,
html[data-theme="dark"] .stat-card--featured:hover .stat-icon-wrapper,
[data-theme="dark"] .stat-card--featured:hover .stat-icon-wrapper {
  transform: scale(1.08) rotate(3deg) !important;
  background: #FFE066 !important;
  box-shadow: 0 6px 20px rgba(255, 200, 47, 0.5) !important;
}

/* 12. Hero Bottom Banner — Compact Sleek Dimensions */
.hero-bottom-banner {
  bottom: -40px !important;
  width: auto !important;
  min-width: 270px !important;
  max-width: 320px !important;
  padding: 12px 18px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}

.hero-bottom-banner .banner-left {
  gap: 4px !important;
}

.hero-bottom-banner .banner-badge {
  font-size: 10px !important;
  line-height: 1 !important;
}

.hero-bottom-banner .banner-title,
.hero-bottom-banner h2.banner-title {
  font-size: 14px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.hero-bottom-banner .banner-right {
  height: 40px !important;
  margin-left: 16px !important;
  flex-shrink: 0 !important;
}

.hero-bottom-banner .bar-chart {
  gap: 5px !important;
  height: 100% !important;
}

.hero-bottom-banner .bar {
  width: 8px !important;
}

.hero-bottom-banner.active .bar-1 {
  height: 16px !important;
}

.hero-bottom-banner.active .bar-2 {
  height: 24px !important;
}

.hero-bottom-banner.active .bar-3 {
  height: 32px !important;
}

.hero-bottom-banner.active .bar-4 {
  height: 40px !important;
}

/* 13. Light Mode: Buttons with White Text have Pure White Icons (Arrow & all SVG icons) */
html[data-theme="light"] .btn-filled,
html[data-theme="light"] .hero-actions .btn-filled,
html[data-theme="light"] .main-header .btn-filled,
html[data-theme="light"] .premium-about-actions .btn-filled,
html[data-theme="light"] .why-cta-btn,
html[data-theme="light"] .cta-v2-primary-btn,
html[data-theme="light"] .modal-cta-btn,
html[data-theme="light"] .ref-submit-btn {
  color: #FFFFFF !important;
}

html[data-theme="light"] .btn-filled svg,
html[data-theme="light"] .btn-filled svg *,
html[data-theme="light"] .btn-filled svg.ic,
html[data-theme="light"] .btn-filled i,
html[data-theme="light"] .hero-actions .btn-filled svg,
html[data-theme="light"] .hero-actions .btn-filled svg *,
html[data-theme="light"] .hero-actions .btn-filled svg.ic,
html[data-theme="light"] .hero-actions .btn-filled i,
html[data-theme="light"] .main-header .btn-filled svg,
html[data-theme="light"] .main-header .btn-filled svg *,
html[data-theme="light"] .main-header .btn-filled i,
html[data-theme="light"] .premium-about-actions .btn-filled svg,
html[data-theme="light"] .premium-about-actions .btn-filled svg *,
html[data-theme="light"] .premium-about-actions .btn-filled i,
html[data-theme="light"] .why-cta-btn svg,
html[data-theme="light"] .why-cta-btn svg *,
html[data-theme="light"] .why-cta-btn i,
html[data-theme="light"] .cta-v2-primary-btn svg,
html[data-theme="light"] .cta-v2-primary-btn svg *,
html[data-theme="light"] .cta-v2-primary-btn i,
html[data-theme="light"] .modal-cta-btn svg,
html[data-theme="light"] .modal-cta-btn svg *,
html[data-theme="light"] .modal-cta-btn i,
html[data-theme="light"] .ref-submit-btn svg,
html[data-theme="light"] .ref-submit-btn svg * {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: none !important;
}

html[data-theme="light"] .btn-filled:hover svg,
html[data-theme="light"] .btn-filled:hover svg *,
html[data-theme="light"] .btn-filled:hover svg.ic,
html[data-theme="light"] .btn-filled:hover i,
html[data-theme="light"] .hero-actions .btn-filled:hover svg,
html[data-theme="light"] .hero-actions .btn-filled:hover svg *,
html[data-theme="light"] .hero-actions .btn-filled:hover i,
html[data-theme="light"] .main-header .btn-filled:hover svg,
html[data-theme="light"] .main-header .btn-filled:hover svg *,
html[data-theme="light"] .main-header .btn-filled:hover i,
html[data-theme="light"] .premium-about-actions .btn-filled:hover svg,
html[data-theme="light"] .premium-about-actions .btn-filled:hover svg *,
html[data-theme="light"] .premium-about-actions .btn-filled:hover i,
html[data-theme="light"] .why-cta-btn:hover svg,
html[data-theme="light"] .why-cta-btn:hover svg *,
html[data-theme="light"] .why-cta-btn:hover i,
html[data-theme="light"] .cta-v2-primary-btn:hover svg,
html[data-theme="light"] .cta-v2-primary-btn:hover svg *,
html[data-theme="light"] .cta-v2-primary-btn:hover i,
html[data-theme="light"] .modal-cta-btn:hover svg,
html[data-theme="light"] .modal-cta-btn:hover svg * {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: none !important;
}

/* 14. Contact Cards: Blue Icon Background with Adjusted Opacity (Light Mode) */
html[data-theme="light"] .ref-card-icon-box {
  background: rgba(4, 5, 148, 0.08) !important;
  border: 1px solid rgba(4, 5, 148, 0.15) !important;
  color: #040594 !important;
}

html[data-theme="light"] .ref-card-icon-box svg,
html[data-theme="light"] .ref-card-icon-box svg * {
  color: #040594 !important;
  stroke: #040594 !important;
}

html[data-theme="light"] .ref-info-card:hover .ref-card-icon-box {
  background: rgba(4, 5, 148, 0.16) !important;
  border-color: rgba(4, 5, 148, 0.3) !important;
  color: #040594 !important;
}

/* Contact Cards: Dark Mode Icon Box Styling */
html[data-theme="dark"] .ref-card-icon-box,
[data-theme="dark"] .ref-card-icon-box,
html:not([data-theme="light"]) .ref-card-icon-box {
  background: rgba(255, 200, 47, 0.12) !important;
  border: 1px solid rgba(255, 200, 47, 0.25) !important;
  color: #FFC82F !important;
}

html[data-theme="dark"] .ref-card-icon-box svg,
html[data-theme="dark"] .ref-card-icon-box svg *,
[data-theme="dark"] .ref-card-icon-box svg,
[data-theme="dark"] .ref-card-icon-box svg *,
html:not([data-theme="light"]) .ref-card-icon-box svg,
html:not([data-theme="light"]) .ref-card-icon-box svg * {
  color: #FFC82F !important;
  stroke: #FFC82F !important;
}

/* Static Contact Card (Office Address - No Hover, No Movement, Box Never Disappears) */
.ref-info-card.ref-info-card-static,
.ref-info-card.ref-info-card-static:hover {
  cursor: default !important;
  transform: none !important;
  transition: none !important;
}

html[data-theme="dark"] .ref-info-card.ref-info-card-static,
html[data-theme="dark"] .ref-info-card.ref-info-card-static:hover,
[data-theme="dark"] .ref-info-card.ref-info-card-static,
[data-theme="dark"] .ref-info-card.ref-info-card-static:hover,
html:not([data-theme="light"]) .ref-info-card.ref-info-card-static,
html:not([data-theme="light"]) .ref-info-card.ref-info-card-static:hover {
  transform: none !important;
  border-color: rgba(255, 200, 47, 0.22) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35), 0 0 18px rgba(255, 200, 47, 0.05), inset 0 1px 2px rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .ref-info-card.ref-info-card-static .ref-card-icon-box,
html[data-theme="dark"] .ref-info-card.ref-info-card-static:hover .ref-card-icon-box,
[data-theme="dark"] .ref-info-card.ref-info-card-static .ref-card-icon-box,
[data-theme="dark"] .ref-info-card.ref-info-card-static:hover .ref-card-icon-box,
html:not([data-theme="light"]) .ref-info-card.ref-info-card-static .ref-card-icon-box,
html:not([data-theme="light"]) .ref-info-card.ref-info-card-static:hover .ref-card-icon-box {
  background: rgba(255, 200, 47, 0.12) !important;
  border: 1px solid rgba(255, 200, 47, 0.25) !important;
  color: #FFC82F !important;
  transform: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .ref-info-card.ref-info-card-static .ref-card-icon-box svg,
html[data-theme="dark"] .ref-info-card.ref-info-card-static:hover .ref-card-icon-box svg,
html[data-theme="dark"] .ref-info-card.ref-info-card-static .ref-card-icon-box svg *,
html[data-theme="dark"] .ref-info-card.ref-info-card-static:hover .ref-card-icon-box svg *,
[data-theme="dark"] .ref-info-card.ref-info-card-static .ref-card-icon-box svg,
[data-theme="dark"] .ref-info-card.ref-info-card-static:hover .ref-card-icon-box svg,
[data-theme="dark"] .ref-info-card.ref-info-card-static .ref-card-icon-box svg *,
[data-theme="dark"] .ref-info-card.ref-info-card-static:hover .ref-card-icon-box svg *,
html:not([data-theme="light"]) .ref-info-card.ref-info-card-static .ref-card-icon-box svg,
html:not([data-theme="light"]) .ref-info-card.ref-info-card-static:hover .ref-card-icon-box svg,
html:not([data-theme="light"]) .ref-info-card.ref-info-card-static .ref-card-icon-box svg *,
html:not([data-theme="light"]) .ref-info-card.ref-info-card-static:hover .ref-card-icon-box svg * {
  color: #FFC82F !important;
  stroke: #FFC82F !important;
}

html[data-theme="light"] .ref-info-card.ref-info-card-static,
html[data-theme="light"] .ref-info-card.ref-info-card-static:hover {
  transform: none !important;
  border-color: rgba(14, 20, 36, 0.1) !important;
  box-shadow: 0 8px 24px rgba(14, 20, 36, 0.04) !important;
}

html[data-theme="light"] .ref-info-card.ref-info-card-static .ref-card-icon-box,
html[data-theme="light"] .ref-info-card.ref-info-card-static:hover .ref-card-icon-box {
  background: rgba(4, 5, 148, 0.08) !important;
  border: 1px solid rgba(4, 5, 148, 0.15) !important;
  color: #040594 !important;
  transform: none !important;
  box-shadow: none !important;
}

html[data-theme="light"] .ref-info-card.ref-info-card-static .ref-card-icon-box svg,
html[data-theme="light"] .ref-info-card.ref-info-card-static:hover .ref-card-icon-box svg,
html[data-theme="light"] .ref-info-card.ref-info-card-static .ref-card-icon-box svg *,
html[data-theme="light"] .ref-info-card.ref-info-card-static:hover .ref-card-icon-box svg * {
  color: #040594 !important;
  stroke: #040594 !important;
}

.ref-info-card.ref-info-card-static:hover .ref-card-title,
.ref-info-card.ref-info-card-static:hover .ref-card-desc,
.ref-info-card.ref-info-card-static:hover .ref-card-link {
  color: inherit !important;
  text-decoration: none !important;
  transform: none !important;
}

/* 15. Homepage Hero, Homepage About, and About Page Hero Section: Icons Background #0436aa */
/* Image 1: Homepage Hero Section Feature Icons */
.feature-icon-circle,
.hero-feature-item .feature-icon-circle,
.hero-features-row .feature-icon-circle,
html[data-theme="light"] .feature-icon-circle,
html[data-theme="dark"] .feature-icon-circle {
  background: #0436aa !important;
  color: #FFC82F !important;
  border: 1px solid rgba(255, 200, 47, 0.35) !important;
  box-shadow: 0 4px 14px rgba(4, 54, 170, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

.feature-icon-circle svg,
.feature-icon-circle svg *,
.feature-icon-circle i,
html[data-theme="light"] .feature-icon-circle svg,
html[data-theme="light"] .feature-icon-circle svg *,
html[data-theme="dark"] .feature-icon-circle svg,
html[data-theme="dark"] .feature-icon-circle svg * {
  color: #FFC82F !important;
  stroke: #FFC82F !important;
}

/* Image 2: Homepage About Section & Image 3: About Page Main Hero Section Check Icons */
.premium-about-check-icon,
.premium-about-checklist .premium-about-check-icon,
.premium-about-check-item .premium-about-check-icon,
html[data-theme="light"] .premium-about-check-icon,
html[data-theme="dark"] .premium-about-check-icon {
  background: #0436aa !important;
  color: #FFC82F !important;
  border: 1px solid rgba(255, 200, 47, 0.35) !important;
  box-shadow: 0 4px 14px rgba(4, 54, 170, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

.premium-about-check-icon svg,
.premium-about-check-icon svg *,
.premium-about-check-icon i,
html[data-theme="light"] .premium-about-check-icon svg,
html[data-theme="light"] .premium-about-check-icon svg *,
html[data-theme="dark"] .premium-about-check-icon svg,
html[data-theme="dark"] .premium-about-check-icon svg * {
  color: #FFC82F !important;
  stroke: #FFC82F !important;
}

.hero-feature-item:hover .feature-icon-circle,
.premium-about-check-item:hover .premium-about-check-icon {
  background: #032a85 !important;
  transform: scale(1.05);
  box-shadow: 0 0 16px rgba(4, 54, 170, 0.45) !important;
}

/* Pricing Cards: Checklist & Time Icons Matching Hero Section (#0436aa Blue Circle with #FFC82F Icon) */
.plan-feature-item svg,
.plan-feature-item .ic,
.plan-feature-item .feature-icon-clock,
html[data-theme="light"] .plan-feature-item svg,
html[data-theme="light"] .plan-feature-item .ic,
html[data-theme="light"] .plan-feature-item .feature-icon-clock,
html[data-theme="dark"] .plan-feature-item svg,
html[data-theme="dark"] .plan-feature-item .ic,
html[data-theme="dark"] .plan-feature-item .feature-icon-clock {
  background: #0436aa !important;
  color: #FFC82F !important;
  border: 1px solid rgba(255, 200, 47, 0.35) !important;
  box-shadow: 0 3px 10px rgba(4, 54, 170, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  border-radius: 50% !important;
  width: 22px !important;
  height: 22px !important;
  padding: 4px !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}

.plan-feature-item svg,
.plan-feature-item svg *,
.plan-feature-item .ic,
.plan-feature-item .ic *,
.plan-feature-item .feature-icon-clock,
.plan-feature-item .feature-icon-clock *,
html[data-theme="light"] .plan-feature-item svg,
html[data-theme="light"] .plan-feature-item svg *,
html[data-theme="light"] .plan-feature-item .ic,
html[data-theme="light"] .plan-feature-item .ic *,
html[data-theme="light"] .plan-feature-item .feature-icon-clock,
html[data-theme="light"] .plan-feature-item .feature-icon-clock *,
html[data-theme="dark"] .plan-feature-item svg,
html[data-theme="dark"] .plan-feature-item svg *,
html[data-theme="dark"] .plan-feature-item .ic,
html[data-theme="dark"] .plan-feature-item .ic *,
html[data-theme="dark"] .plan-feature-item .feature-icon-clock,
html[data-theme="dark"] .plan-feature-item .feature-icon-clock * {
  color: #FFC82F !important;
  stroke: #FFC82F !important;
}

.plan-feature-item:hover svg,
.plan-feature-item:hover .ic,
.plan-feature-item:hover .feature-icon-clock {
  background: #032a85 !important;
  color: #FFC82F !important;
  stroke: #FFC82F !important;
  transform: scale(1.1) !important;
  box-shadow: 0 0 14px rgba(4, 54, 170, 0.45) !important;
}

.plan-feature-item:hover svg *,
.plan-feature-item:hover .ic *,
.plan-feature-item:hover .feature-icon-clock * {
  color: #FFC82F !important;
  stroke: #FFC82F !important;
}

/* -------------------------------------------------------------------------- */
/* 16. Header & Footer Dark Mode Background: #000047                          */
/* -------------------------------------------------------------------------- */
html:not([data-theme="light"]) .main-header,
html:not([data-theme="light"]) .main-header.scrolled,
html:not([data-theme="light"]) header.main-header,
html[data-theme="dark"] .main-header,
html[data-theme="dark"] .main-header.scrolled,
html[data-theme="dark"] header.main-header,
[data-theme="dark"] .main-header,
[data-theme="dark"] .main-header.scrolled,
[data-theme="dark"] header.main-header {
  background: #000047 !important;
  background-color: #000047 !important;
}

html:not([data-theme="light"]) .footer,
html:not([data-theme="light"]) footer.footer,
html[data-theme="dark"] .footer,
html[data-theme="dark"] footer.footer,
[data-theme="dark"] .footer,
[data-theme="dark"] footer.footer {
  background: #000047 !important;
  background-color: #000047 !important;
}

/* -------------------------------------------------------------------------- */
/* 17. Dark Mode Background All Over Site, Sections & Pages: #000028          */
/* -------------------------------------------------------------------------- */
html:not([data-theme="light"]),
html[data-theme="dark"],
[data-theme="dark"] {
  --ink-navy: #000028 !important;
  --deck-navy: #000028 !important;
  --page-gradient: #000028 !important;
}

html:not([data-theme="light"]) body,
html:not([data-theme="light"]) body::before,
html[data-theme="dark"] body,
html[data-theme="dark"] body::before,
[data-theme="dark"] body,
[data-theme="dark"] body::before {
  background: #000028 !important;
  background-color: #000028 !important;
}

/* All Sections & Pages Across the Entire Site in Dark Mode */
html:not([data-theme="light"]) section,
html:not([data-theme="light"]) main,
html:not([data-theme="light"]) .hero-section,
html:not([data-theme="light"]) .premium-about,
html:not([data-theme="light"]) #hero,
html:not([data-theme="light"]) #about,
html:not([data-theme="light"]) #process,
html:not([data-theme="light"]) #pricing,
html:not([data-theme="light"]) #portfolio,
html:not([data-theme="light"]) #why-choose-us,
html:not([data-theme="light"]) #stats,
html:not([data-theme="light"]) #testimonials,
html:not([data-theme="light"]) #faq,
html:not([data-theme="light"]) #cta,
html:not([data-theme="light"]) .cta-v2-section,
html:not([data-theme="light"]) .blog-hero,
html:not([data-theme="light"]) .blog-grid-section,
html:not([data-theme="light"]) .contact-ref-hero,
html:not([data-theme="light"]) .contact-ref-main-section,
html:not([data-theme="light"]) .about-page-wrapper,
html:not([data-theme="light"]) .contact-page-wrapper,
html:not([data-theme="light"]) .falling-text-section,
html:not([data-theme="light"]) .bento-focus-section,
html:not([data-theme="light"]) .about-growth-section,
html:not([data-theme="light"]) .about-pillars-section,
html:not([data-theme="light"]) .post-hero-section,
html:not([data-theme="light"]) .post-featured-media-section,
html:not([data-theme="light"]) .post-content-section,
html:not([data-theme="light"]) .related-posts-section,
html:not([data-theme="light"]) .socialhub-woo,
html[data-theme="dark"] section,
html[data-theme="dark"] main,
html[data-theme="dark"] .hero-section,
html[data-theme="dark"] .premium-about,
html[data-theme="dark"] #hero,
html[data-theme="dark"] #about,
html[data-theme="dark"] #process,
html[data-theme="dark"] #pricing,
html[data-theme="dark"] #portfolio,
html[data-theme="dark"] #why-choose-us,
html[data-theme="dark"] #stats,
html[data-theme="dark"] #testimonials,
html[data-theme="dark"] #faq,
html[data-theme="dark"] #cta,
html[data-theme="dark"] .cta-v2-section,
html[data-theme="dark"] .blog-hero,
html[data-theme="dark"] .blog-grid-section,
html[data-theme="dark"] .contact-ref-hero,
html[data-theme="dark"] .contact-ref-main-section,
html[data-theme="dark"] .about-page-wrapper,
html[data-theme="dark"] .contact-page-wrapper,
html[data-theme="dark"] .falling-text-section,
html[data-theme="dark"] .bento-focus-section,
html[data-theme="dark"] .about-growth-section,
html[data-theme="dark"] .about-pillars-section,
html[data-theme="dark"] .post-hero-section,
html[data-theme="dark"] .post-featured-media-section,
html[data-theme="dark"] .post-content-section,
html[data-theme="dark"] .related-posts-section,
html[data-theme="dark"] .socialhub-woo,
[data-theme="dark"] section,
[data-theme="dark"] main,
[data-theme="dark"] .hero-section,
[data-theme="dark"] .premium-about,
[data-theme="dark"] #hero,
[data-theme="dark"] #about,
[data-theme="dark"] #process,
[data-theme="dark"] #pricing,
[data-theme="dark"] #portfolio,
[data-theme="dark"] #why-choose-us,
[data-theme="dark"] #stats,
[data-theme="dark"] #testimonials,
[data-theme="dark"] #faq,
[data-theme="dark"] #cta,
[data-theme="dark"] .cta-v2-section,
[data-theme="dark"] .blog-hero,
[data-theme="dark"] .blog-grid-section,
[data-theme="dark"] .contact-ref-hero,
[data-theme="dark"] .contact-ref-main-section,
[data-theme="dark"] .about-page-wrapper,
[data-theme="dark"] .contact-page-wrapper,
[data-theme="dark"] .falling-text-section,
[data-theme="dark"] .bento-focus-section,
[data-theme="dark"] .about-growth-section,
[data-theme="dark"] .about-pillars-section,
[data-theme="dark"] .post-hero-section,
[data-theme="dark"] .post-featured-media-section,
[data-theme="dark"] .post-content-section,
[data-theme="dark"] .related-posts-section,
[data-theme="dark"] .socialhub-woo {
  background-color: #000028 !important;
}

/* Hide Read Time Badge on Blog Cards */
.card-read-badge {
  display: none !important;
}

/* ==========================================================================
   Checkout & WooCommerce Checkbox Fixes: Spacing + Theme Tick Colors
   ========================================================================== */
.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row .woocommerce-form__label-for-checkbox,
.woocommerce .woocommerce-terms-and-conditions-wrapper label,
.socialhub-woo .woocommerce-form__label-for-checkbox,
.socialhub-woo label.checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
}

.woocommerce form .form-row input[type="checkbox"],
.woocommerce input[type="checkbox"],
.socialhub-woo input[type="checkbox"],
.socialhub-woo .woocommerce form .form-row input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  margin: 2px 12px 0 0 !important;
  padding: 0 !important;
  position: relative !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  display: inline-block !important;
}

/* Light Theme Unchecked Checkbox */
html[data-theme="light"] .woocommerce form .form-row input[type="checkbox"],
html[data-theme="light"] .woocommerce input[type="checkbox"],
html[data-theme="light"] .socialhub-woo input[type="checkbox"] {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(14, 20, 36, 0.3) !important;
}

html[data-theme="light"] .woocommerce form .form-row input[type="checkbox"]:hover,
html[data-theme="light"] .woocommerce input[type="checkbox"]:hover,
html[data-theme="light"] .socialhub-woo input[type="checkbox"]:hover {
  border-color: #FFC82F !important;
}

/* Dark Theme Unchecked Checkbox */
html:not([data-theme="light"]) .woocommerce form .form-row input[type="checkbox"],
html:not([data-theme="light"]) .woocommerce input[type="checkbox"],
html:not([data-theme="light"]) .socialhub-woo input[type="checkbox"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1.5px solid rgba(255, 200, 47, 0.4) !important;
}

/* Checked Checkbox Background */
.woocommerce form .form-row input[type="checkbox"]:checked,
.woocommerce input[type="checkbox"]:checked,
.socialhub-woo input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #FFE066 0%, #FFC82F 100%) !important;
  border-color: #FFC82F !important;
}

/* Checkmark Tick Mark Styling */
.woocommerce form .form-row input[type="checkbox"]:checked::after,
.woocommerce input[type="checkbox"]:checked::after,
.socialhub-woo input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 2px !important;
  width: 5px !important;
  height: 10px !important;
  border-style: solid !important;
  border-width: 0 2.5px 2.5px 0 !important;
  transform: rotate(45deg) !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* LIGHT THEME: Black tick mark */
html[data-theme="light"] .woocommerce form .form-row input[type="checkbox"]:checked::after,
html[data-theme="light"] .woocommerce input[type="checkbox"]:checked::after,
html[data-theme="light"] .socialhub-woo input[type="checkbox"]:checked::after {
  border-color: #0E1424 !important;
}

/* DARK THEME: White tick mark */
html:not([data-theme="light"]) .woocommerce form .form-row input[type="checkbox"]:checked::after,
html:not([data-theme="light"]) .woocommerce input[type="checkbox"]:checked::after,
html:not([data-theme="light"]) .socialhub-woo input[type="checkbox"]:checked::after {
  border-color: #FFFFFF !important;
}

.woocommerce-terms-and-conditions-checkbox-text,
.woocommerce-form__label-for-checkbox span {
  display: inline !important;
  line-height: 1.5 !important;
  flex: 1 1 auto !important;
}

/* ==========================================================================
   Checkout Page Dark Mode: Matched with Contact Form Panel & Inputs
   ========================================================================== */

/* 1. All Checkout Cards — Contact Form Card Gradient & Glow */
html:not([data-theme="light"]) .socialhub-woo .woocommerce-billing-fields,
html:not([data-theme="light"]) .socialhub-woo .woocommerce-additional-fields,
html:not([data-theme="light"]) .socialhub-woo #order_review,
html:not([data-theme="light"]) .socialhub-woo .woocommerce-checkout-review-order,
html:not([data-theme="light"]) .socialhub-woo form.checkout_coupon,
html:not([data-theme="light"]) .socialhub-woo form.woocommerce-form-login,
html:not([data-theme="light"]) .socialhub-woo form.login,
html[data-theme="dark"] .socialhub-woo .woocommerce-billing-fields,
html[data-theme="dark"] .socialhub-woo .woocommerce-additional-fields,
html[data-theme="dark"] .socialhub-woo #order_review,
html[data-theme="dark"] .socialhub-woo .woocommerce-checkout-review-order,
html[data-theme="dark"] .socialhub-woo form.checkout_coupon,
html[data-theme="dark"] .socialhub-woo form.woocommerce-form-login,
html[data-theme="dark"] .socialhub-woo form.login,
[data-theme="dark"] .socialhub-woo .woocommerce-billing-fields,
[data-theme="dark"] .socialhub-woo .woocommerce-additional-fields,
[data-theme="dark"] .socialhub-woo #order_review,
[data-theme="dark"] .socialhub-woo .woocommerce-checkout-review-order,
[data-theme="dark"] .socialhub-woo form.checkout_coupon,
[data-theme="dark"] .socialhub-woo form.woocommerce-form-login,
[data-theme="dark"] .socialhub-woo form.login {
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576) !important;
  border: 1px solid rgba(255, 200, 47, 0.25) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 200, 47, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.15) !important;
}

html:not([data-theme="light"]) .socialhub-woo form.woocommerce-form-login,
html:not([data-theme="light"]) .socialhub-woo form.login,
html[data-theme="dark"] .socialhub-woo form.woocommerce-form-login,
html[data-theme="dark"] .socialhub-woo form.login,
[data-theme="dark"] .socialhub-woo form.woocommerce-form-login,
[data-theme="dark"] .socialhub-woo form.login {
  margin: 0 0 24px !important;
  padding: 28px !important;
}

/* 2. Card Headings & Titles in Dark Mode */
html:not([data-theme="light"]) .socialhub-woo .woocommerce-billing-fields h3,
html:not([data-theme="light"]) .socialhub-woo .woocommerce-additional-fields h3,
html:not([data-theme="light"]) .socialhub-woo #order_review_heading,
html:not([data-theme="light"]) .socialhub-woo .woocommerce-checkout h3,
html[data-theme="dark"] .socialhub-woo .woocommerce-billing-fields h3,
html[data-theme="dark"] .socialhub-woo .woocommerce-additional-fields h3,
html[data-theme="dark"] .socialhub-woo #order_review_heading,
[data-theme="dark"] .socialhub-woo .woocommerce-billing-fields h3,
[data-theme="dark"] .socialhub-woo .woocommerce-additional-fields h3,
[data-theme="dark"] .socialhub-woo #order_review_heading {
  color: #FFFFFF !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* Paragraph text inside dark login & coupon forms */
html:not([data-theme="light"]) .socialhub-woo form.woocommerce-form-login p,
html:not([data-theme="light"]) .socialhub-woo form.login p,
html[data-theme="dark"] .socialhub-woo form.woocommerce-form-login p,
html[data-theme="dark"] .socialhub-woo form.login p,
[data-theme="dark"] .socialhub-woo form.woocommerce-form-login p,
[data-theme="dark"] .socialhub-woo form.login p {
  color: #FFFFFF !important;
}

/* 3. Form Labels in Dark Mode */
html:not([data-theme="light"]) .socialhub-woo form.checkout .form-row label,
html:not([data-theme="light"]) .socialhub-woo form.checkout .woocommerce-form-row label,
html:not([data-theme="light"]) .socialhub-woo form.woocommerce-form-login label,
html:not([data-theme="light"]) .socialhub-woo form.login label,
html[data-theme="dark"] .socialhub-woo form.checkout .form-row label,
html[data-theme="dark"] .socialhub-woo form.woocommerce-form-login label,
html[data-theme="dark"] .socialhub-woo form.login label,
[data-theme="dark"] .socialhub-woo form.checkout .form-row label,
[data-theme="dark"] .socialhub-woo form.woocommerce-form-login label,
[data-theme="dark"] .socialhub-woo form.login label {
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

html:not([data-theme="light"]) .socialhub-woo form.checkout .required,
html:not([data-theme="light"]) .socialhub-woo form.woocommerce-form-login .required,
html:not([data-theme="light"]) .socialhub-woo form.login .required,
html[data-theme="dark"] .socialhub-woo form.checkout .required,
html[data-theme="dark"] .socialhub-woo form.woocommerce-form-login .required,
html[data-theme="dark"] .socialhub-woo form.login .required,
[data-theme="dark"] .socialhub-woo form.checkout .required,
[data-theme="dark"] .socialhub-woo form.woocommerce-form-login .required,
[data-theme="dark"] .socialhub-woo form.login .required {
  color: #FFC82F !important;
  font-weight: 700 !important;
}

/* Remember me & Lost Password in Dark Mode */
html:not([data-theme="light"]) .socialhub-woo form.woocommerce-form-login .woocommerce-form-login__rememberme,
html:not([data-theme="light"]) .socialhub-woo form.login .woocommerce-form-login__rememberme,
html[data-theme="dark"] .socialhub-woo form.woocommerce-form-login .woocommerce-form-login__rememberme,
html[data-theme="dark"] .socialhub-woo form.login .woocommerce-form-login__rememberme,
[data-theme="dark"] .socialhub-woo form.woocommerce-form-login .woocommerce-form-login__rememberme,
[data-theme="dark"] .socialhub-woo form.login .woocommerce-form-login__rememberme,
html:not([data-theme="light"]) .socialhub-woo form.woocommerce-form-login .woocommerce-form__label-for-checkbox span,
html:not([data-theme="light"]) .socialhub-woo form.login .woocommerce-form__label-for-checkbox span,
html[data-theme="dark"] .socialhub-woo form.woocommerce-form-login .woocommerce-form__label-for-checkbox span,
html[data-theme="dark"] .socialhub-woo form.login .woocommerce-form__label-for-checkbox span,
[data-theme="dark"] .socialhub-woo form.woocommerce-form-login .woocommerce-form__label-for-checkbox span,
[data-theme="dark"] .socialhub-woo form.login .woocommerce-form__label-for-checkbox span {
  color: #FFFFFF !important;
}

html:not([data-theme="light"]) .socialhub-woo form.woocommerce-form-login .lost_password a,
html:not([data-theme="light"]) .socialhub-woo form.login .lost_password a,
html[data-theme="dark"] .socialhub-woo form.woocommerce-form-login .lost_password a,
html[data-theme="dark"] .socialhub-woo form.login .lost_password a,
[data-theme="dark"] .socialhub-woo form.woocommerce-form-login .lost_password a,
[data-theme="dark"] .socialhub-woo form.login .lost_password a {
  color: #FFC82F !important;
  transition: opacity 0.2s ease !important;
}

html:not([data-theme="light"]) .socialhub-woo .show-password-input,
html[data-theme="dark"] .socialhub-woo .show-password-input,
[data-theme="dark"] .socialhub-woo .show-password-input {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 4. Checkout Input Fields & Textareas — Exact Match to Contact Form */
html:not([data-theme="light"]) .socialhub-woo form.checkout input.input-text,
html:not([data-theme="light"]) .socialhub-woo form.checkout textarea,
html:not([data-theme="light"]) .socialhub-woo form.checkout select,
html:not([data-theme="light"]) .socialhub-woo form.checkout_coupon input.input-text,
html:not([data-theme="light"]) .socialhub-woo form.woocommerce-form-login input.input-text,
html:not([data-theme="light"]) .socialhub-woo form.login input.input-text,
html[data-theme="dark"] .socialhub-woo form.checkout input.input-text,
html[data-theme="dark"] .socialhub-woo form.checkout textarea,
html[data-theme="dark"] .socialhub-woo form.checkout select,
html[data-theme="dark"] .socialhub-woo form.checkout_coupon input.input-text,
html[data-theme="dark"] .socialhub-woo form.woocommerce-form-login input.input-text,
html[data-theme="dark"] .socialhub-woo form.login input.input-text,
[data-theme="dark"] .socialhub-woo form.checkout input.input-text,
[data-theme="dark"] .socialhub-woo form.checkout textarea,
[data-theme="dark"] .socialhub-woo form.checkout select,
[data-theme="dark"] .socialhub-woo form.checkout_coupon input.input-text,
[data-theme="dark"] .socialhub-woo form.woocommerce-form-login input.input-text,
[data-theme="dark"] .socialhub-woo form.login input.input-text {
  background: #012985 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 200, 47, 0.25) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  outline: none !important;
  transition: var(--transition-smooth) !important;
}

/* Focus State */
html:not([data-theme="light"]) .socialhub-woo form.checkout input.input-text:focus,
html:not([data-theme="light"]) .socialhub-woo form.checkout textarea:focus,
html:not([data-theme="light"]) .socialhub-woo form.checkout select:focus,
html:not([data-theme="light"]) .socialhub-woo form.checkout_coupon input.input-text:focus,
html:not([data-theme="light"]) .socialhub-woo form.woocommerce-form-login input.input-text:focus,
html:not([data-theme="light"]) .socialhub-woo form.login input.input-text:focus,
html[data-theme="dark"] .socialhub-woo form.checkout input.input-text:focus,
html[data-theme="dark"] .socialhub-woo form.checkout textarea:focus,
html[data-theme="dark"] .socialhub-woo form.checkout select:focus,
html[data-theme="dark"] .socialhub-woo form.checkout_coupon input.input-text:focus,
html[data-theme="dark"] .socialhub-woo form.woocommerce-form-login input.input-text:focus,
html[data-theme="dark"] .socialhub-woo form.login input.input-text:focus,
[data-theme="dark"] .socialhub-woo form.checkout input.input-text:focus,
[data-theme="dark"] .socialhub-woo form.checkout textarea:focus,
[data-theme="dark"] .socialhub-woo form.checkout select:focus,
[data-theme="dark"] .socialhub-woo form.checkout_coupon input.input-text:focus,
[data-theme="dark"] .socialhub-woo form.woocommerce-form-login input.input-text:focus,
[data-theme="dark"] .socialhub-woo form.login input.input-text:focus {
  background: #012985 !important;
  border-color: #FFC82F !important;
  box-shadow: 0 0 0 3px rgba(255, 200, 47, 0.2) !important;
  color: #FFFFFF !important;
}

/* Placeholders */
html:not([data-theme="light"]) .socialhub-woo form.checkout input::placeholder,
html:not([data-theme="light"]) .socialhub-woo form.checkout textarea::placeholder,
html:not([data-theme="light"]) .socialhub-woo form.woocommerce-form-login input::placeholder,
html:not([data-theme="light"]) .socialhub-woo form.login input::placeholder,
html[data-theme="dark"] .socialhub-woo form.checkout input::placeholder,
html[data-theme="dark"] .socialhub-woo form.checkout textarea::placeholder,
html[data-theme="dark"] .socialhub-woo form.woocommerce-form-login input::placeholder,
html[data-theme="dark"] .socialhub-woo form.login input::placeholder,
[data-theme="dark"] .socialhub-woo form.checkout input::placeholder,
[data-theme="dark"] .socialhub-woo form.checkout textarea::placeholder,
[data-theme="dark"] .socialhub-woo form.woocommerce-form-login input::placeholder,
[data-theme="dark"] .socialhub-woo form.login input::placeholder {
  color: rgba(255, 255, 255, 0.65) !important;
  opacity: 1 !important;
}

/* 5. Select2 Dropdowns in Dark Mode */
html:not([data-theme="light"]) .socialhub-woo .select2-container--default .select2-selection--single,
html[data-theme="dark"] .socialhub-woo .select2-container--default .select2-selection--single,
[data-theme="dark"] .socialhub-woo .select2-container--default .select2-selection--single {
  background: #012985 !important;
  border: 1px solid rgba(255, 200, 47, 0.25) !important;
  border-radius: 12px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  outline: none !important;
}

html:not([data-theme="light"]) .socialhub-woo .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .socialhub-woo .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] .socialhub-woo .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #FFFFFF !important;
  line-height: normal !important;
  padding-left: 16px !important;
  padding-right: 36px !important;
  font-size: 14px !important;
}

html:not([data-theme="light"]) .socialhub-woo .select2-container--default .select2-selection--single .select2-selection__arrow b,
html[data-theme="dark"] .socialhub-woo .select2-container--default .select2-selection--single .select2-selection__arrow b,
[data-theme="dark"] .socialhub-woo .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #FFC82F transparent transparent transparent !important;
}

html:not([data-theme="light"]) .socialhub-woo .select2-dropdown,
html:not([data-theme="light"]) .select2-dropdown,
html[data-theme="dark"] .select2-dropdown,
[data-theme="dark"] .select2-dropdown {
  background: #012985 !important;
  border: 1px solid rgba(255, 200, 47, 0.3) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden !important;
}

html:not([data-theme="light"]) .select2-results__option,
html[data-theme="dark"] .select2-results__option,
[data-theme="dark"] .select2-results__option {
  color: #FFFFFF !important;
  background: transparent !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
}

html:not([data-theme="light"]) .select2-results__option--highlighted,
html[data-theme="dark"] .select2-results__option--highlighted,
[data-theme="dark"] .select2-results__option--highlighted {
  background: rgba(255, 200, 47, 0.2) !important;
  color: #FFC82F !important;
}

/* 6. Order Review Table & Total Price Highlight */
html:not([data-theme="light"]) .socialhub-woo .shop_table tr.order-total strong,
html:not([data-theme="light"]) .socialhub-woo .shop_table tr.order-total .woocommerce-Price-amount,
html:not([data-theme="light"]) .socialhub-woo .shop_table tr.order-total td,
html[data-theme="dark"] .socialhub-woo .shop_table tr.order-total strong,
html[data-theme="dark"] .socialhub-woo .shop_table tr.order-total .woocommerce-Price-amount,
html[data-theme="dark"] .socialhub-woo .shop_table tr.order-total td,
[data-theme="dark"] .socialhub-woo .shop_table tr.order-total strong,
[data-theme="dark"] .socialhub-woo .shop_table tr.order-total .woocommerce-Price-amount,
[data-theme="dark"] .socialhub-woo .shop_table tr.order-total td {
  color: #FFC82F !important;
  font-weight: 700 !important;
  font-size: 20px !important;
}

html:not([data-theme="light"]) .socialhub-woo .shop_table th,
html:not([data-theme="light"]) .socialhub-woo .shop_table td,
html[data-theme="dark"] .socialhub-woo .shop_table th,
html[data-theme="dark"] .socialhub-woo .shop_table td,
[data-theme="dark"] .socialhub-woo .shop_table th,
[data-theme="dark"] .socialhub-woo .shop_table td {
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255, 200, 47, 0.15) !important;
}

html:not([data-theme="light"]) .socialhub-woo .shop_table .product-name,
html:not([data-theme="light"]) .socialhub-woo .shop_table .product-total,
html:not([data-theme="light"]) .socialhub-woo .shop_table .cart-subtotal td,
html[data-theme="dark"] .socialhub-woo .shop_table .product-name,
html[data-theme="dark"] .socialhub-woo .shop_table .product-total,
html[data-theme="dark"] .socialhub-woo .shop_table .cart-subtotal td,
[data-theme="dark"] .socialhub-woo .shop_table .product-name,
[data-theme="dark"] .socialhub-woo .shop_table .product-total,
[data-theme="dark"] .socialhub-woo .shop_table .cart-subtotal td {
  color: #FFFFFF !important;
}

/* 7. Inner Payment Section & Notice Boxes */
html:not([data-theme="light"]) .socialhub-woo #payment,
html[data-theme="dark"] .socialhub-woo #payment,
[data-theme="dark"] .socialhub-woo #payment {
  background: rgba(2, 37, 118, 0.45) !important;
  border: 1px solid rgba(255, 200, 47, 0.2) !important;
  border-radius: 16px !important;
}

html:not([data-theme="light"]) .socialhub-woo #payment ul.payment_methods li,
html[data-theme="dark"] .socialhub-woo #payment ul.payment_methods li,
[data-theme="dark"] .socialhub-woo #payment ul.payment_methods li {
  color: #FFFFFF !important;
}

html:not([data-theme="light"]) .socialhub-woo #payment div.payment_box:not(.is-empty),
html[data-theme="dark"] .socialhub-woo #payment div.payment_box:not(.is-empty),
[data-theme="dark"] .socialhub-woo #payment div.payment_box:not(.is-empty) {
  background: rgba(1, 41, 133, 0.6) !important;
  border: 1px solid rgba(255, 200, 47, 0.2) !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
}

html:not([data-theme="light"]) .socialhub-woo #payment div.payment_box.has-error,
html:not([data-theme="light"]) .socialhub-woo #payment div.payment_box:has(.woocommerce-error),
html:not([data-theme="light"]) .socialhub-woo #payment div.payment_box:has(.wc-ppcp-notice__info),
html[data-theme="dark"] .socialhub-woo #payment div.payment_box.has-error,
html[data-theme="dark"] .socialhub-woo #payment div.payment_box:has(.woocommerce-error),
html[data-theme="dark"] .socialhub-woo #payment div.payment_box:has(.wc-ppcp-notice__info),
[data-theme="dark"] .socialhub-woo #payment div.payment_box.has-error,
[data-theme="dark"] .socialhub-woo #payment div.payment_box:has(.woocommerce-error),
[data-theme="dark"] .socialhub-woo #payment div.payment_box:has(.wc-ppcp-notice__info) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

html:not([data-theme="light"]) .socialhub-woo #payment .payment_box .woocommerce-error,
html:not([data-theme="light"]) .socialhub-woo #payment .payment_box .wc-ppcp-notice__info .woocommerce-error,
html:not([data-theme="light"]) .socialhub-woo #payment .payment_box ul.woocommerce-error,
html:not([data-theme="light"]) .socialhub-woo .woocommerce-error,
html[data-theme="dark"] .socialhub-woo #payment .payment_box .woocommerce-error,
html[data-theme="dark"] .socialhub-woo #payment .payment_box .wc-ppcp-notice__info .woocommerce-error,
html[data-theme="dark"] .socialhub-woo #payment .payment_box ul.woocommerce-error,
html[data-theme="dark"] .socialhub-woo .woocommerce-error,
[data-theme="dark"] .socialhub-woo #payment .payment_box .woocommerce-error,
[data-theme="dark"] .socialhub-woo #payment .payment_box .wc-ppcp-notice__info .woocommerce-error,
[data-theme="dark"] .socialhub-woo #payment .payment_box ul.woocommerce-error,
[data-theme="dark"] .socialhub-woo .woocommerce-error {
  background: rgba(1, 41, 133, 0.9) !important;
  border-top: 1px solid rgba(255, 200, 47, 0.3) !important;
  border-right: 1px solid rgba(255, 200, 47, 0.3) !important;
  border-bottom: 1px solid rgba(255, 200, 47, 0.3) !important;
  border-left: 4px solid #dc2626 !important;
  border-radius: var(--wc-radius-sm, 8px) !important;
  color: #FFFFFF !important;
}

html:not([data-theme="light"]) .socialhub-woo #payment .payment_box .woocommerce-error li,
html:not([data-theme="light"]) .socialhub-woo #payment .payment_box .woocommerce-error p,
html[data-theme="dark"] .socialhub-woo #payment .payment_box .woocommerce-error li,
html[data-theme="dark"] .socialhub-woo #payment .payment_box .woocommerce-error p,
[data-theme="dark"] .socialhub-woo #payment .payment_box .woocommerce-error li,
[data-theme="dark"] .socialhub-woo #payment .payment_box .woocommerce-error p,
html:not([data-theme="light"]) .socialhub-woo .woocommerce-error li,
html:not([data-theme="light"]) .socialhub-woo .woocommerce-error p,
html[data-theme="dark"] .socialhub-woo .woocommerce-error li,
html[data-theme="dark"] .socialhub-woo .woocommerce-error p,
[data-theme="dark"] .socialhub-woo .woocommerce-error li,
[data-theme="dark"] .socialhub-woo .woocommerce-error p {
  color: #FFFFFF !important;
}

html:not([data-theme="light"]) .socialhub-woo #payment .payment_box .woocommerce-error::before,
html:not([data-theme="light"]) .socialhub-woo .woocommerce-error::before,
html[data-theme="dark"] .socialhub-woo #payment .payment_box .woocommerce-error::before,
html[data-theme="dark"] .socialhub-woo .woocommerce-error::before,
[data-theme="dark"] .socialhub-woo #payment .payment_box .woocommerce-error::before,
[data-theme="dark"] .socialhub-woo .woocommerce-error::before {
  display: none !important;
  content: none !important;
}

/* 8. Coupon Notice Bar at Top */
html:not([data-theme="light"]) .socialhub-woo .woocommerce-form-coupon-toggle .woocommerce-info,
html:not([data-theme="light"]) .socialhub-woo .woocommerce-form-login-toggle .woocommerce-info,
html[data-theme="dark"] .socialhub-woo .woocommerce-form-coupon-toggle .woocommerce-info,
html[data-theme="dark"] .socialhub-woo .woocommerce-form-login-toggle .woocommerce-info,
[data-theme="dark"] .socialhub-woo .woocommerce-form-coupon-toggle .woocommerce-info,
[data-theme="dark"] .socialhub-woo .woocommerce-form-login-toggle .woocommerce-info {
  background: linear-gradient(145deg, rgba(255, 200, 47, 0.09) 0%, #0436aa, #022576) !important;
  border: 1px solid rgba(255, 200, 47, 0.25) !important;
  border-left: 4px solid #FFC82F !important;
  border-radius: 14px !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}

html:not([data-theme="light"]) .socialhub-woo .woocommerce-info a,
html[data-theme="dark"] .socialhub-woo .woocommerce-info a,
[data-theme="dark"] .socialhub-woo .woocommerce-info a {
  color: #FFC82F !important;
  font-weight: 600 !important;
}

/* 9. About page hero floating flow accent circle */
.premium-about-content .about-floating-flow circle[cx="100"][r="6"] {
  fill: #023FCD !important;
}
.premium-about-content .about-floating-flow circle.orbit-glow-fast,
.premium-about-content .about-floating-flow circle[cx="100"][r="12"] {
  stroke: #FFC82F !important;
}

/* 10. Mobile Header Navigation Menu — Full Opacity 1 (No Translucency) */
@media (max-width: 1100px) {
  .main-header .nav-menu.active,
  .nav-menu.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  .main-header .nav-menu.active .nav-link,
  .nav-menu.active .nav-link,
  .main-header .nav-menu.active .nav-link.active,
  .nav-menu.active .nav-link.active {
    opacity: 1 !important;
  }

  /* Dark mode solid opaque background */
  .main-header .nav-menu.active,
  .nav-menu.active,
  html[data-theme="dark"] .main-header .nav-menu.active,
  html[data-theme="dark"] .nav-menu.active,
  [data-theme="dark"] .main-header .nav-menu.active,
  [data-theme="dark"] .nav-menu.active,
  html:not([data-theme="light"]) .main-header .nav-menu.active,
  html:not([data-theme="light"]) .nav-menu.active {
    opacity: 1 !important;
    background: #022576 !important;
    background: linear-gradient(145deg, #0436aa 0%, #022576 100%) !important;
    border: 1px solid rgba(255, 200, 47, 0.4) !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.95), 0 0 30px rgba(255, 200, 47, 0.2) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Light mode solid opaque background */
  html[data-theme="light"] .main-header .nav-menu.active,
  html[data-theme="light"] .nav-menu.active,
  html[data-theme="light"] .main-header.scrolled .nav-menu.active {
    opacity: 1 !important;
    background: #FFFFFF !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F5 100%) !important;
    border: 1.5px solid rgba(255, 200, 47, 0.35) !important;
    box-shadow: 0 24px 60px rgba(14, 20, 36, 0.25), 0 0 24px rgba(255, 200, 47, 0.1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* 11. Checkout Place Order Button — Strictly Light Theme Matching Hero Button (No Gradient on Hover) */
html[data-theme="light"] .socialhub-woo #place_order,
html[data-theme="light"] .socialhub-woo button#place_order,
html[data-theme="light"] .socialhub-woo #payment #place_order,
html[data-theme="light"] .socialhub-woo .place-order button,
html[data-theme="light"] .socialhub-woo .checkout-button,
html[data-theme="light"] .socialhub-woo a.button.alt,
html[data-theme="light"] .socialhub-woo button.button.alt,
html[data-theme="light"] .socialhub-woo input.button.alt {
  background: #040594 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 14px rgba(4, 5, 148, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important;
}

html[data-theme="light"] .socialhub-woo #place_order:hover,
html[data-theme="light"] .socialhub-woo button#place_order:hover,
html[data-theme="light"] .socialhub-woo #payment #place_order:hover,
html[data-theme="light"] .socialhub-woo .place-order button:hover,
html[data-theme="light"] .socialhub-woo .checkout-button:hover,
html[data-theme="light"] .socialhub-woo a.button.alt:hover,
html[data-theme="light"] .socialhub-woo button.button.alt:hover,
html[data-theme="light"] .socialhub-woo input.button.alt:hover {
  background: #03046e !important;
  background-image: none !important;
  border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow: 0 6px 18px rgba(3, 4, 110, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}


/* Eliminate pseudo-element glow or gradient overlays on checkout button in light theme */
html[data-theme="light"] .socialhub-woo #place_order::before,
html[data-theme="light"] .socialhub-woo #place_order::after,
html[data-theme="light"] .socialhub-woo #place_order:hover::before,
html[data-theme="light"] .socialhub-woo #place_order:hover::after,
html[data-theme="light"] .socialhub-woo .place-order button::before,
html[data-theme="light"] .socialhub-woo .place-order button::after {
  display: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* -------------------------------------------------------------------------- */
/* 22. Our Process Section: Amber Yellow Icons on Mobile Light Mode Strictly  */
/* -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  html[data-theme="light"] #process .process-icon-wrapper,
  html[data-theme="light"] .process-section .process-icon-wrapper,
  html[data-theme="light"] .process-grid .process-icon-wrapper,
  html[data-theme="light"] .ag-panel .process-icon-wrapper {
    background: rgba(255, 200, 47, 0.12) !important;
    border: 1px solid rgba(255, 200, 47, 0.3) !important;
  }

  html[data-theme="light"] #process .process-icon-wrapper svg,
  html[data-theme="light"] #process .process-icon-wrapper svg *,
  html[data-theme="light"] #process .process-icon-wrapper .ic,
  html[data-theme="light"] #process .process-icon-wrapper .ic *,
  html[data-theme="light"] .process-section .process-icon-wrapper svg,
  html[data-theme="light"] .process-section .process-icon-wrapper svg *,
  html[data-theme="light"] .process-section .process-icon-wrapper .ic,
  html[data-theme="light"] .process-section .process-icon-wrapper .ic *,
  html[data-theme="light"] .process-grid .process-icon-wrapper svg,
  html[data-theme="light"] .process-grid .process-icon-wrapper svg *,
  html[data-theme="light"] .process-grid .process-icon-wrapper .ic,
  html[data-theme="light"] .process-grid .process-icon-wrapper .ic *,
  html[data-theme="light"] .ag-panel .process-icon-wrapper svg,
  html[data-theme="light"] .ag-panel .process-icon-wrapper svg *,
  html[data-theme="light"] .ag-panel .process-icon-wrapper .ic,
  html[data-theme="light"] .ag-panel .process-icon-wrapper .ic * {
    color: #FFC82F !important;
    stroke: #FFC82F !important;
    fill: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 23. Process Section: Floating Chips Visibility & 0.9 Opacity on Dark Theme */
/* -------------------------------------------------------------------------- */
html:not([data-theme="light"]) .process-float-element,
html[data-theme="dark"] .process-float-element,
[data-theme="dark"] .process-float-element {
  opacity: 0.9 !important;
  background: rgba(0, 0, 40, 0.65) !important;
  border: 1px solid rgba(255, 200, 47, 0.45) !important;
  color: #FFC82F !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 14px rgba(255, 200, 47, 0.12) !important;
}

html:not([data-theme="light"]) .process-float-element svg,
html[data-theme="dark"] .process-float-element svg,
[data-theme="dark"] .process-float-element svg {
  color: #FFC82F !important;
  stroke: #FFC82F !important;
}

/* -------------------------------------------------------------------------- */
/* 24. Button ::before Outlines: Set 88% Opacity on Outline Rims              */
/* -------------------------------------------------------------------------- */
/* Yellow-rimmed buttons (Dark theme / Yellow variants) */
html:not([data-theme="light"]) .btn::before,
html:not([data-theme="light"]) .btn-filled::before,
html:not([data-theme="light"]) .btn-brand::before,
html:not([data-theme="light"]) .pricing-card.premium-plan .btn-filled::before,
html:not([data-theme="light"]) .cta-v2-primary-btn::before,
html[data-theme="dark"] .btn::before,
html[data-theme="dark"] .btn-filled::before,
html[data-theme="dark"] .btn-brand::before,
html[data-theme="dark"] .pricing-card.premium-plan .btn-filled::before,
html[data-theme="dark"] .cta-v2-primary-btn::before,
[data-theme="dark"] .btn::before,
[data-theme="dark"] .btn-filled::before,
[data-theme="dark"] .btn-brand::before,
[data-theme="dark"] .pricing-card.premium-plan .btn-filled::before,
[data-theme="dark"] .cta-v2-primary-btn::before,
.btn-filled::before,
.cta-v2-primary-btn::before {
  border: 2px solid rgb(255 200 47 / 88%) !important;
}

/* Blue-rimmed buttons (Light theme filled/colored buttons) */
html[data-theme="light"] .btn:not(.btn-outline):not(.why-whatsapp-btn):not(.btn-whatsapp):not(.cta-v2-secondary-btn)::before,
html[data-theme="light"] .btn-filled::before,
html[data-theme="light"] .hero-actions .btn-filled::before,
html[data-theme="light"] .why-cta-btn::before,
html[data-theme="light"] .cta-v2-primary-btn::before,
html[data-theme="light"] .pricing-card.premium-plan .btn-filled::before {
  border: 2px solid rgb(4 5 148 / 88%) !important;
}

/* -------------------------------------------------------------------------- */
/* 25. Contact Page Subtitle: Remove Sparkle / Star Icon                      */
/* -------------------------------------------------------------------------- */
.sparkle-icon,
.contact-ref-subtitle .sparkle-icon {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.contact-ref-subtitle {
  text-align: center !important;
}

/* -------------------------------------------------------------------------- */
/* 26. Mobile CTA Trust Footer Text Overflow Fix                              */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .cta-v2-trust-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(10px, 2.9vw, 12px) !important;
    line-height: 1.45 !important;
    gap: 6px 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 0 4px !important;
    white-space: normal !important;
  }

  .cta-v2-trust-footer svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
  }

  .cta-v2-trust-footer span {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    font-size: inherit !important;
    line-height: inherit !important;
    text-align: center !important;
  }
	.page-id-10 .cta-v2-trust-footer{
		flex-wrap: nowrap !important;
    	align-items: flex-start !important;
	}
}