/*
Theme Name: Indira Hair Weaving Centre
Theme URI: https://indirahairweaving.com/
Author: ThatRank
Author URI: https://thatrank.com/
Description: A premium, conversion-focused classic WordPress theme for Indira Hair Weaving Centre — a non-surgical hair replacement clinic in Chandigarh. Includes a rich single-page front page, a full blog, mega-menu navigation, and Customizer options for contact details.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: indira-hair
Tags: business, one-column, custom-logo, custom-menu, featured-images, blog, translation-ready
*/

/* ============================================================
   All custom CSS below is the original site design, preserved.
   Tailwind utility classes are provided by the Tailwind CDN
   (enqueued in functions.php); this file holds the bespoke styles.
   ============================================================ */

  *, *::before, *::after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: #fcfaf7; color: #1a2937; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; overflow-x: hidden; }

  .font-display { font-family: 'Newsreader', Georgia, serif; letter-spacing: -0.02em; }
  .font-display-italic { font-family: 'Newsreader', serif; font-style: italic; }
  .eyebrow { letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; font-weight: 600; }

  /* Buttons */
  .btn-primary { background: #1c2951; color: white; transition: all .4s cubic-bezier(.2,.7,.2,1); box-shadow: 0 4px 14px rgba(28,41,81,.25); }
  .btn-primary:hover { background: #0f1a3a; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(28,41,81,.35); }
  .btn-primary .arrow { transition: transform .4s; display: inline-flex; }
  .btn-primary:hover .arrow { transform: translateX(3px); }

  .btn-accent { background: #b08a3f; color: white; transition: all .4s cubic-bezier(.2,.7,.2,1); box-shadow: 0 4px 14px rgba(176,138,63,.4); }
  .btn-accent:hover { background: #8a6b2e; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(176,138,63,.5); }

  .btn-ghost { background: #fff; color: #1a2937; border: 1.5px solid #e6e9ec; transition: all .4s cubic-bezier(.2,.7,.2,1); }
  .btn-ghost:hover { border-color: #1c2951; color: #1c2951; background: #f5f6fa; }

  .btn-white { background: white; color: #1c2951; transition: all .4s cubic-bezier(.2,.7,.2,1); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
  .btn-white:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.14); }

  /* Card */
  .card-soft { background: #fff; border: 1px solid #e6e9ec; box-shadow: 0 1px 2px rgba(20,30,40,.04), 0 12px 36px -16px rgba(20,30,40,.08); transition: all .45s cubic-bezier(.2,.7,.2,1); }
  .card-soft:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(20,30,40,.04), 0 24px 50px -16px rgba(20,30,40,.14); }

  /* Nav link */
  .nav-item { position: relative; transition: color .3s; }
  .nav-item::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: #1c2951; transition: width .4s cubic-bezier(.2,.7,.2,1); border-radius: 2px; }
  .nav-item:hover { color: #1c2951; }
  .nav-item:hover::after { width: 100%; }

  /* MEGA MENU */
  .nav-mega { position: relative; }
  .nav-trigger { position: relative; transition: color .3s; cursor: pointer; background: none; border: none; font-family: inherit; }
  .nav-trigger::after { content: ''; position: absolute; bottom: -5px; left: 12px; right: 12px; width: 0; height: 2px; background: #1c2951; transition: width .4s cubic-bezier(.2,.7,.2,1); border-radius: 2px; }
  .nav-trigger:hover, .nav-mega.open .nav-trigger { color: #1c2951; }
  .nav-mega:hover .nav-trigger::after, .nav-mega.open .nav-trigger::after { width: calc(100% - 24px); }
  .nav-trigger .mega-chev { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .nav-mega:hover .mega-chev, .nav-mega.open .mega-chev { transform: rotate(180deg); }

  .mega-panel {
    position: absolute; top: 100%; left: 50%; transform: translate(-50%, 10px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .3s cubic-bezier(.2,.7,.2,1), transform .3s cubic-bezier(.2,.7,.2,1), visibility .3s;
    padding-top: 14px; z-index: 60;
  }
  .mega-panel-inner {
    background: white; border-radius: 20px;
    box-shadow: 0 30px 60px -20px rgba(20,30,40,.18), 0 0 0 1px rgba(20,30,40,.04);
    border: 1px solid #e6e9ec;
    padding: 16px;
  }
  .nav-mega:hover .mega-panel, .nav-mega.open .mega-panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, 0);
  }
  /* Invisible bridge so the gap between trigger and panel doesn't break hover */
  .mega-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 14px; }

  .mega-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px; border-radius: 12px;
    transition: background .25s; cursor: pointer;
    text-decoration: none;
  }
  .mega-item:hover { background: #f5f6fa; }
  .mega-item:hover .mega-item-arrow { opacity: 1; transform: translateX(2px); }
  .mega-item-arrow { opacity: 0; transition: all .3s; align-self: center; }

  /* Mobile mega — expandable sub-menus */
  .mm-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 8px 0; background: none; border: none; font-family: inherit; cursor: pointer; }
  .mm-trigger i { transition: transform .35s; }
  .mm-content { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.2,.7,.2,1), opacity .3s; padding-left: 16px; border-left: 2px solid #e6e9ec; margin-left: 4px; }
  .mm-section.open .mm-content { max-height: 500px; opacity: 1; }
  .mm-section.open .mm-trigger i { transform: rotate(180deg); }

  /* Image hover zoom */
  .img-zoom { overflow: hidden; }
  .img-zoom img { transition: transform .8s cubic-bezier(.2,.7,.2,1); width: 100%; height: 100%; object-fit: cover; display: block; }
  .img-zoom:hover img { transform: scale(1.06); }

  /* Reveal animation (driven by IntersectionObserver) */
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: translateY(0); }

  /* WhatsApp pulse */
  @keyframes pulseSoft { 0% { transform: scale(.9); opacity: .7; } 80%,100% { transform: scale(1.6); opacity: 0; } }
  .pulse-soft::before, .pulse-soft::after { content:''; position:absolute; inset:0; border-radius:9999px; border:2px solid #25D366; animation: pulseSoft 2.5s cubic-bezier(.4,0,.2,1) infinite; }
  .pulse-soft::after { animation-delay: 1.25s; }

  @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
  .float { animation: float 5s ease-in-out infinite; }
  @keyframes floatSlow { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-10px) rotate(-3deg)} }
  .float-slow { animation: floatSlow 6s ease-in-out infinite; }

  @keyframes drift {
    0% { transform: translate(0,0) scale(1); }
    50% { transform: translate(30px,-25px) scale(1.06); }
    100% { transform: translate(0,0) scale(1); }
  }
  .drift-1 { animation: drift 22s ease-in-out infinite; }
  .drift-2 { animation: drift 28s ease-in-out infinite reverse; }

  @keyframes ringRotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
  .ring-rotate { animation: ringRotate 40s linear infinite; }

  @keyframes pingSoft { 0% { transform: scale(1); opacity:1 } 75%,100% { transform: scale(2.4); opacity: 0 } }
  .ping-soft { animation: pingSoft 1.6s cubic-bezier(0,0,.2,1) infinite; }

  /* Marquee */
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .marquee-track { animation: marquee 30s linear infinite; display: flex; width: max-content; }

  /* Accordion */
  .accordion-content { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s cubic-bezier(.2,.7,.2,1), opacity .4s; }
  .accordion-content.open { max-height: 300px; opacity: 1; }

  /* Chip */
  .chip { background: #fff; border: 1px solid #e6e9ec; box-shadow: 0 8px 24px -8px rgba(20,30,40,.12); border-radius: 14px; }

  ::selection { background: #1c2951; color: white; }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: #fcfaf7; }
  ::-webkit-scrollbar-thumb { background: #a9b2cc; border-radius: 8px; border: 2px solid #fcfaf7; }
  ::-webkit-scrollbar-thumb:hover { background: #3a4a7a; }

  /* Horizontal scroll for mobile carousels */
  .h-scroll { display: flex; gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .h-scroll::-webkit-scrollbar { display: none; }
  .h-scroll { scrollbar-width: none; }
  .h-scroll > * { scroll-snap-align: start; flex: 0 0 80%; }
  @media (min-width: 640px) { .h-scroll > * { flex: 0 0 45%; } }

  /* Responsive type */
  @media (max-width: 1024px) {
    .display-xl { font-size: 3rem !important; line-height: 1.05 !important; }
    .display-lg { font-size: 2.2rem !important; line-height: 1.1 !important; }
  }
  @media (max-width: 640px) {
    .display-xl { font-size: 2.4rem !important; line-height: 1.05 !important; }
    .display-lg { font-size: 1.9rem !important; line-height: 1.1 !important; }
  }

  /* Mobile bottom-bar safe area */
  .safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

  /* Slider handle */
  .ba-handle { cursor: ew-resize; user-select: none; }

  /* Lucide icon defaults */
  [data-lucide] { stroke-width: 2; }

  /* Nav scrolled state */
  .nav-scrolled { background: rgba(252,250,247,.95) !important; backdrop-filter: blur(16px); border-bottom-color: #e6e9ec !important; padding: 12px 0 !important; }

  /* Mobile sticky bar transition */
  .mobile-bar { transform: translateY(100%); transition: transform .5s; }
  .mobile-bar.visible { transform: translateY(0); }

  .float-btns { opacity: 0; transform: translateY(20px); pointer-events: none; transition: all .5s; }
  .float-btns.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

  /* Step circles — interactive hover */
  .step-circle { box-shadow: 0 1px 0 rgba(20,30,40,.02); }
  .step-circle:hover {
    border-color: #1c2951;
    background: #f5f6fa;
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -8px rgba(28,41,81,.18);
  }
  .step-circle:hover span { color: #0f1a3a; }

  /* Solution Finder — custom slider */
  .finder-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #1c2951 0%, #3a4a7a 50%, #c9a154 100%);
    outline: none;
    cursor: grab;
  }
  .finder-slider:active { cursor: grabbing; }
  .finder-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    border: 3px solid #1c2951;
    cursor: grab;
    box-shadow: 0 4px 14px rgba(28,41,81,.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .finder-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 20px rgba(28,41,81,.45);
  }
  .finder-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }
  .finder-slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    border: 3px solid #1c2951;
    cursor: grab;
    box-shadow: 0 4px 14px rgba(28,41,81,.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .finder-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 20px rgba(28,41,81,.45);
  }

  /* Stage preview cards on hover */
  .finder-stage-preview > div {
    transition: all 0.3s cubic-bezier(.2,.7,.2,1);
  }

  /* Gender card hover effect */
  .finder-gender-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -8px rgba(28,41,81,.18);
  }

  /* ============================================================ */
  /* MOBILE RESPONSIVE — center alignment for screens under 768px */
  /* ============================================================ */
  @media (max-width: 767px) {

    /* ===== Section headers (eyebrow, h2, h3, intro paragraphs) ===== */
    section h1,
    section h2,
    section h3 { text-align: center; }

    section .eyebrow {
      display: inline-flex !important;
      justify-content: center;
    }

    /* Centered max-width paragraphs already work; left-aligned ones in column splits get centered */
    section [class*="lg:col-span-"]:not(.lg\:col-span-12) > p,
    section [class*="lg:col-span-"]:not(.lg\:col-span-12) > .reveal > p,
    section [class*="lg:col-span-"]:not(.lg\:col-span-12) > h2,
    section [class*="lg:col-span-"]:not(.lg\:col-span-12) > .reveal > h2,
    section [class*="lg:col-span-"]:not(.lg\:col-span-12) > h3,
    section [class*="lg:col-span-"]:not(.lg\:col-span-12) > .reveal > h3 {
      text-align: center;
    }

    /* ===== Lists with icons in column content — center the row ===== */
    section [class*="lg:col-span-"]:not(.lg\:col-span-12) > ul li,
    section [class*="lg:col-span-"]:not(.lg\:col-span-12) > .reveal > ul li,
    section [class*="lg:col-span-"]:not(.lg\:col-span-12) > .space-y-3 > li,
    section [class*="lg:col-span-"]:not(.lg\:col-span-12) > .reveal > .space-y-3 > li,
    section [class*="lg:col-span-"]:not(.lg\:col-span-12) > .space-y-3\.5 > li {
      justify-content: center;
    }

    /* ===== Buttons — auto margins center them ===== */
    .btn-primary:not(.w-full):not([class*="absolute"]),
    .btn-accent:not(.w-full):not([class*="absolute"]),
    .btn-ghost:not(.w-full):not([class*="absolute"]) {
      margin-left: auto;
      margin-right: auto;
    }

    /* Button rows: stack with center alignment */
    .flex.flex-col.sm\:flex-row.gap-3,
    .flex.flex-col.sm\:flex-row.gap-4,
    .reveal.flex.flex-col.sm\:flex-row {
      align-items: center;
      justify-content: center;
    }

    /* ===== Trust badges / icon-text rows under hero CTAs ===== */
    section .flex.items-center.gap-4 { justify-content: center; flex-wrap: wrap; }
    section .flex.flex-wrap.items-center { justify-content: center; }

    /* ===== Stat rows with grid (e.g., 10+ years / 1000+ cases / 5.0) ===== */
    section .grid.grid-cols-3 > div,
    section .grid.grid-cols-4 > div { text-align: center; }
    section .grid.grid-cols-2 > div { text-align: center; }

    /* ===== Avatar stacks (social proof) ===== */
    section .flex.-space-x-2,
    section .flex.-space-x-2\.5 { justify-content: center; }

    /* Strip CTAs with avatar + text rows */
    section .flex.items-center.gap-4.sm\:gap-5 { justify-content: center; flex-wrap: wrap; }

    /* ===== Star rating rows ===== */
    section .flex.gap-0\.5 { justify-content: center; }

    /* ===== Sectional CTAs that wrap with text + button ===== */
    section .flex.flex-col.md\:flex-row.items-center.justify-between { gap: 1.25rem; }
    section .flex.flex-col.md\:flex-row.items-center.justify-between > div:first-child { text-align: center; }

    /* ===== Form labels stay left aligned (better usability) ===== */
    section label,
    section input,
    section textarea,
    section select { text-align: left; }
    section form .grid > div { text-align: left; }

    /* ===== Cards keep their internal alignment (do not center) ===== */
    section .card-soft p,
    section .card-soft h3,
    section .card-soft h4,
    section .card-soft ul,
    section .card-soft .flex {
      /* preserve original card alignment */
    }

    /* ===== FOOTER mobile centering ===== */
    /* Only center the 4-column nav (logo, treatments, explore, visit) - NOT the SEO content or price list */
    footer .lg\:col-span-4,
    footer .lg\:col-span-2 { text-align: center; }
    footer .lg\:col-span-4 img,
    footer .lg\:col-span-2 img { margin-left: auto; margin-right: auto; }
    footer .lg\:col-span-4 ul li,
    footer .lg\:col-span-2 ul li { justify-content: center; }
    footer .lg\:col-span-4 address { text-align: center; }
    footer .lg\:col-span-4 .flex.items-center { justify-content: center; }
    footer .lg\:col-span-4 .flex.flex-col { align-items: center; }
    footer .lg\:col-span-4 .max-w-xs { margin-left: auto !important; margin-right: auto !important; }

    /* Footer SEO content (col-span-7) — keep left aligned for readability */
    footer .lg\:col-span-7 { text-align: left; }
    footer .lg\:col-span-7 h2,
    footer .lg\:col-span-7 h3 { text-align: left; }
    footer .lg\:col-span-7 p { text-align: left; }

    /* Price list card (col-span-5) — preserve grid alignment */
    footer .lg\:col-span-5 { text-align: left; }
    footer .lg\:col-span-5 .text-right { text-align: right !important; }

    /* Footer bottom bar */
    footer .flex.flex-col.md\:flex-row.justify-between { align-items: center; }

    /* ===== Hero specific ===== */
    section .reveal > div + div { text-align: center; }
    section .reveal .max-w-xl,
    section .reveal .max-w-lg,
    section .reveal .max-w-md { margin-left: auto; margin-right: auto; }

    /* ===== Decorative chips and floats — center on mobile ===== */
    section .chip:not([class*="absolute"]) {
      margin-left: auto;
      margin-right: auto;
    }

    /* ===== Tabs and tab containers stay row-flex ===== */
    section .inline-flex.p-1\.5 { justify-content: center; }

    /* ===== Service area / city grids — center content within each card ===== */
    section .rounded-2xl.p-4 { text-align: center; }
    section .rounded-2xl.p-5 { text-align: center; }

    /* ===== Comparison table cells stay aligned ===== */
    section #compareRows > div { text-align: left; }

    /* ===== Various small adjustments ===== */
    section .max-w-2xl,
    section .max-w-md { margin-left: auto; margin-right: auto; }

    /* Section padding tightening on mobile */
    section.py-20 { padding-top: 4rem; padding-bottom: 4rem; }
    section.py-16 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  }

  /* Tablet adjustments (between 768 and 1024px) — keep content readable */
  @media (min-width: 768px) and (max-width: 1023px) {
    section [class*="lg:col-span-"] { text-align: inherit; }
  }

/* ============================ WORDPRESS CORE / BLOG ADDITIONS ============================ */
.wp-prose { color: #3d4a55; line-height: 1.8; font-size: 16px; }
.wp-prose h1, .wp-prose h2, .wp-prose h3, .wp-prose h4 { font-family: 'Newsreader', Georgia, serif; color: #1a2937; letter-spacing: -0.02em; line-height: 1.2; margin: 1.6em 0 .6em; }
.wp-prose h2 { font-size: 1.9rem; }
.wp-prose h3 { font-size: 1.45rem; }
.wp-prose p { margin: 0 0 1.1em; }
.wp-prose a { color: #1c2951; text-decoration: underline; text-underline-offset: 2px; }
.wp-prose a:hover { color: #b08a3f; }
.wp-prose ul, .wp-prose ol { margin: 0 0 1.1em 1.4em; }
.wp-prose li { margin: .35em 0; }
.wp-prose blockquote { border-left: 3px solid #c9a154; margin: 1.5em 0; padding: .4em 0 .4em 1.4em; font-family: 'Newsreader', serif; font-style: italic; font-size: 1.2rem; color: #1c2951; }
.wp-prose img { border-radius: 18px; height: auto; max-width: 100%; }
.wp-prose figure { margin: 1.6em 0; }
.wp-prose figcaption { font-size: 13px; color: #687480; text-align: center; margin-top: .6em; }
.wp-prose code { background: #eef0f7; padding: .15em .45em; border-radius: 6px; font-size: .9em; }
.wp-prose pre { background: #0f1a3a; color: #eef0f7; padding: 1.1em 1.3em; border-radius: 14px; overflow-x: auto; }
.wp-prose pre code { background: transparent; padding: 0; }

/* Alignments from the block editor */
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: #687480; text-align: center; }
.sticky, .bypostauthor { display: block; }
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important;
}

/* Pagination */
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 999px; border: 1.5px solid #e6e9ec; color: #1a2937; font-weight: 600; font-size: 14px; transition: all .3s; }
.pagination .page-numbers:hover { border-color: #1c2951; color: #1c2951; }
.pagination .page-numbers.current { background: #1c2951; color: #fff; border-color: #1c2951; }

/* Comments */
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list ol.children { list-style: none; margin: 0 0 0 2rem; padding: 0; }

/* ============================ CONTACT FORM 7 — APPOINTMENT FORM ============================ */
/* Match the original inline-styled inputs (bg / border / focus). */
.form-input,
.wpcf7-form .form-input {
  background: #fcfaf7;
  border: 1.5px solid #e6e9ec;
  color: #1a2937;
  width: 100%;
  padding: 0.875rem 1rem;      /* = py-3.5 px-4 */
  border-radius: 0.75rem;      /* = rounded-xl */
  font-size: 0.875rem;         /* = text-sm  */
  line-height: 1.25rem;
  font-family: inherit;
  outline: none;
  transition: all .3s;
}
.form-input::placeholder { color: #9aa3ad; }
.form-input:focus {
  border-color: #1c2951;
  box-shadow: 0 0 0 3px rgba(28, 41, 81, .10);
  outline: none;
}
/* Custom chevron for the concern dropdown */
select.form-input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23687480' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px;
}
/* CF7 wrappers shouldn't add their own spacing that breaks the layout */
.wpcf7-form p { margin: 0; }
.wpcf7-form .wpcf7-form-control-wrap { display: block; }
/* Validation + response messages, themed */
.wpcf7-not-valid-tip { color: #b3261e; font-size: 12px; margin-top: .35rem; display: block; }
.wpcf7-form .wpcf7-response-output {
  border-radius: 12px;
  border: 1.5px solid #e6e9ec;
  padding: .75rem 1rem;
  margin: 1rem 0 0;
  font-size: 13px;
  color: #3d4a55;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output { border-color: #f0c36d; background: #fdf9ee; }
.wpcf7 form.sent .wpcf7-response-output { border-color: #3a7a4a; background: #f0f7f2; color: #2c5c39; }
.wpcf7-spinner { margin: .5rem auto 0; display: block; }

/* ============================ CF7 SUCCESS POPUP ============================ */
.ty-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15,26,58,.55); backdrop-filter: blur(4px); animation: tyFade .25s ease; }
.ty-overlay[hidden] { display: none; }
.ty-box { position: relative; background: #fff; border-radius: 28px; padding: 40px 32px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 30px 80px -20px rgba(20,30,40,.35); animation: tyPop .35s cubic-bezier(.2,.7,.2,1); }
.ty-badge { width: 64px; height: 64px; border-radius: 999px; background: #1c2951; color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: 0 10px 24px rgba(28,41,81,.35); }
.ty-close { position: absolute; top: 16px; right: 18px; background: none; border: 0; font-size: 26px; line-height: 1; color: #9aa3ad; cursor: pointer; transition: color .2s; }
.ty-close:hover { color: #1c2951; }
@keyframes tyFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tyPop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }