/* Quick Connect widget styles (markup and script: includes/quick-connect.php,
   assets/js/quick-connect.js).

   This was an inline <style> printed near the end of every page, which put it after every
   stylesheet - and some rules rely on that (the .totop placement above the <=480px bottom
   bar has to beat site.css). It is now
   linked LAST in the <head> of includes/header.php, after theme-ayur.css, which keeps
   exactly that order while letting the browser cache it. */
  /* Accent color the source template inherited from its global theme (undefined
     here, which made gradients using it render transparent). Scoped to the widget
     so it never leaks into the site. */
  .cn-cb-fab-stack, .cn-cb-overlay { --blue: #1E4A25; }
  /* The spinner sets display:inline-block, which was overriding the [hidden]
     attribute and leaving it always spinning. Let [hidden] win. */
  .cn-cb-spinner[hidden] { display: none; }

  /* ---------- site fit ---------- */
  /* Google's reCAPTCHA badge sits bottom-right - exactly under these buttons. Hidden, with the
     disclosure Google requires printed inside the widget instead (.cn-cb-rc). */
  .grecaptcha-badge { visibility: hidden; }

  /* The product page's sticky buy bar (.pdp-bar) slides up from the bottom edge, full width,
     with its Add to Cart on the right - under these buttons. While it is up, the stack rises
     above it. The JS at the bottom sets --cn-cb-lift to the bar's real height. */
  .cn-cb-fab-stack { transition: bottom 0.22s ease; }
  .cn-cb-fab-stack.is-lifted { bottom: calc(28px + var(--cn-cb-lift, 0px)); }

  /* India only: the country code is fixed, shown in the box the select used to occupy. */
  .cn-cb-cc--fixed { display: flex; align-items: center; justify-content: center; cursor: default; }

  .cn-cb-rc { font-size: 10.5px; opacity: 0.8; margin-top: 8px; }

  /* The site's back-to-top button (.totop, site.css) owns the same bottom-right corner. It
     moves up to sit on top of this stack, centred on the same line: the stack is
     28 + 58 + 18 + 58 = 162px tall, so it starts 18px above that, and its 48px disc is centred
     on the 58px buttons (28 + 29 - 24 = 33px from the edge). It already rises over the product
     page's buy bar through --totop-lift, so the same variable carries on working here.
     Printed after site.css, so these win over its rules at equal specificity. */
  .totop { right: 33px; bottom: 180px; }
  .totop.is-lifted { bottom: calc(180px + var(--totop-lift, 0px)); }
  @media (max-width: 560px) {
    /* site.css shrinks the disc to 44px here; the stack is still round buttons until 480px */
    .totop { right: 35px; bottom: 180px; }
    .totop.is-lifted { bottom: calc(180px + var(--totop-lift, 0px)); }
  }
  @media (max-width: 480px) {
    /* The stack becomes a solid bottom bar (62px + the home-indicator inset) and the arrow
       sits in its row, at the right end, centred on the 46px pills (8 + 1 from the bottom).
       Floating above the bar it covered page content. The bar opens a 66px slot for it
       (12 edge + 44 disc + 10 gap) only while it shows, and the slot slides open rather
       than snapping, so the pills ease aside instead of jumping (html.totop-on, site.js).
       z-index: the bar drops to 9997 so the arrow (9998) paints over its white ground;
       the Quick Connect overlay (9999) still covers both. */
    .totop { right: 12px; bottom: calc(9px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; z-index: 9998; }
    .totop.is-lifted { bottom: calc(9px + env(safe-area-inset-bottom, 0px) + var(--totop-lift, 0px)); }
    /* html-qualified: the base .cn-cb-fab-stack rule further down sets z-index 9998 */
    html .cn-cb-fab-stack { z-index: 9997; transition: bottom 0.22s ease, padding-right 0.26s cubic-bezier(0.22, 1, 0.36, 1); }
    html.totop-on .cn-cb-fab-stack { padding-right: 66px; }
  }
  @media (max-width: 480px) and (prefers-reduced-motion: reduce) {
    html .cn-cb-fab-stack { transition: none; }
  }

  /* ---------- Floating Action Buttons (stack) ---------- */
  .cn-cb-fab-stack {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-end;
  }

  .cn-cb-fab {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue) 0%, #2D6A2F 100%);
    border: 2px solid rgba(255, 255, 255, 0.85);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(30, 74, 37, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .cn-cb-fab--wa {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
  }

  .cn-cb-fab--wa:hover {
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5), 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .cn-cb-fab--wa .cn-cb-fab-pulse {
    background: #25D366;
  }

  .cn-cb-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 30px rgba(30, 74, 37, 0.5), 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .cn-cb-fab:active {
    transform: scale(0.96);
  }

  .cn-cb-fab svg {
    width: 26px;
    height: 26px;
    position: relative;
    z-index: 2;
  }

  /* Tooltip label on hover */
  .cn-cb-fab[data-label]::before {
    content: attr(data-label);
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: #132A17;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 7px 12px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  }

  .cn-cb-fab[data-label]::after {
    content: '';
    position: absolute;
    right: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    border: 6px solid transparent;
    border-left-color: #132A17;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .cn-cb-fab[data-label]:hover::before,
  .cn-cb-fab[data-label]:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }

  .cn-cb-fab-pulse {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: var(--blue);
    opacity: 0.45;
    animation: cnCbPulse 2.4s ease-out infinite;
    z-index: 0;
  }

  .cn-cb-fab--wa .cn-cb-fab-pulse {
    animation-delay: 1.2s;
  }

  @keyframes cnCbPulse {
    0% {
      transform: scale(1);
      opacity: 0.45;
    }

    100% {
      transform: scale(1.35);
      opacity: 0;
    }
  }

  /* ---------- Overlay ---------- */
  .cn-cb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(19, 42, 23, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
    animation: cnCbFadeIn 0.25s ease forwards;
  }

  .cn-cb-overlay[hidden] {
    display: none;
  }

  @keyframes cnCbFadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }


  /* ---------- Modal Container ---------- */
  .cn-cb-modal {
    background: #132A17;
    border-radius: 16px;
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    max-width: 460px;
    margin: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #f1f5f9;
    animation: cnCbSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    background-image:
      radial-gradient(circle at 20% 0%, rgba(45, 106, 47, 0.25) 0%, transparent 45%),
      radial-gradient(circle at 80% 100%, rgba(201, 154, 46, 0.14) 0%, transparent 45%);
    flex-shrink: 0;
  }

  @keyframes cnCbSlideUp {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.96);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Custom scrollbar inside modal */
  .cn-cb-modal {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  }

  .cn-cb-modal::-webkit-scrollbar {
    width: 6px;
  }

  .cn-cb-modal::-webkit-scrollbar-track {
    background: transparent;
  }

  .cn-cb-modal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
  }

  .cn-cb-modal::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
  }

  /* ---------- Close button ---------- */
  .cn-cb-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    z-index: 10;
  }

  .cn-cb-close:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
  }

  /* ---------- Tabs ---------- */
  .cn-cb-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 58px 22px 0;
  }

  .cn-cb-tab {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 12px 6px;
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    transition: color 0.2s, background 0.2s;
    text-align: center;
    line-height: 1.2;
  }

  .cn-cb-tab svg {
    transition: transform 0.2s;
  }

  .cn-cb-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
  }

  .cn-cb-tab.is-active {
    color: #2D6A2F;
    background: rgba(45, 106, 47, 0.25);
  }

  .cn-cb-tab.is-active svg {
    transform: translateY(-2px);
  }

  /* ---------- Header ---------- */
  .cn-cb-header {
    padding: 24px 28px 16px;
    text-align: center;
  }

  .cn-cb-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
  }

  .cn-cb-brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--blue), #2D6A2F);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(30, 74, 37, 0.35);
  }

  .cn-cb-brand-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: #fff;
  }

  /* A p element, not the template's h2 tag: the widget is on every page, and the client's rule is one
     H1 and at most three H2 per page (six popup titles would have made the home page nine).
     These are popup labels, not content headings; the dialogs are still named for assistive
     tech through aria-labelledby. text-wrap is the one thing the site's h2 rule was adding,
     kept here so the title wraps exactly as before - verified by identical screenshots. */
  .cn-cb-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.3px;
    color: #fff;
    text-wrap: balance;
  }

  /* ---------- Body ---------- */
  .cn-cb-body {
    padding: 8px 28px 24px;
    position: relative;
  }

  /* Panes */
  .cn-cb-pane {
    display: none;
  }

  .cn-cb-pane.is-active {
    display: block;
    animation: cnCbPaneIn 0.3s ease forwards;
  }

  @keyframes cnCbPaneIn {
    from {
      opacity: 0;
      transform: translateY(6px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ---------- Form fields ---------- */
  .cn-cb-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
    margin: 10px 0 6px;
  }

  .cn-cb-input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s;
    outline: none;
  }

  .cn-cb-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
  }

  .cn-cb-input:focus {
    border-color: #2D6A2F;
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 3px rgba(45, 106, 47, 0.25);
  }

  .cn-cb-input.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
  }

  .cn-cb-textarea {
    resize: vertical;
    min-height: 88px;
    font-family: inherit;
  }

  /* color-scheme makes native date/time pickers dark-mode aware */
  .cn-cb-input[type="date"],
  .cn-cb-input[type="time"] {
    color-scheme: dark;
  }

  /* Phone */
  .cn-cb-phone-wrap {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px;
  }

  .cn-cb-cc {
    padding: 13px 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
  }

  .cn-cb-cc:focus {
    border-color: #2D6A2F;
  }

  .cn-cb-cc option {
    background: #1B3A20;
    color: #fff;
  }

  /* Two-column row */
  .cn-cb-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* ---------- Submit ---------- */
  .cn-cb-submit {
    width: 100%;
    margin-top: 22px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--blue) 0%, #2D6A2F 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
    box-shadow: 0 6px 18px rgba(30, 74, 37, 0.3);
    letter-spacing: 0.2px;
  }

  .cn-cb-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(30, 74, 37, 0.45);
  }

  .cn-cb-submit:active:not(:disabled) {
    transform: translateY(0);
  }

  .cn-cb-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }

  .cn-cb-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cnCbSpin 0.7s linear infinite;
    display: inline-block;
  }

  @keyframes cnCbSpin {
    to {
      transform: rotate(360deg);
    }
  }

  /* ---------- Fine print ---------- */
  .cn-cb-fineprint {
    font-size: 11.5px;
    color: #94a3b8;
    text-align: center;
    margin: 14px 0 0;
    line-height: 1.5;
  }

  .cn-cb-fineprint a {
    color: #2D6A2F;
    text-decoration: none;
  }

  .cn-cb-fineprint a:hover {
    text-decoration: underline;
  }

  /* ---------- Success state ---------- */
  .cn-cb-success {
    text-align: center;
    padding: 32px 16px;
    animation: cnCbPaneIn 0.4s ease;
  }

  .cn-cb-success-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    border: 2px solid rgba(16, 185, 129, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cnCbPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .cn-cb-success-icon svg {
    stroke: #10b981;
  }

  @keyframes cnCbPop {
    0% {
      transform: scale(0);
    }

    100% {
      transform: scale(1);
    }
  }

  .cn-cb-success h3 {
    margin: 0 0 8px;
    font-size: 22px;
    color: #fff;
  }

  .cn-cb-success-msg {
    margin: 0;
    color: #94a3b8;
    font-size: 14.5px;
    line-height: 1.55;
  }

  /* ---------- Error banner ---------- */
  .cn-cb-error-banner {
    margin-top: 16px;
    padding: 12px 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 10px;
    color: #fecaca;
    font-size: 13.5px;
    text-align: center;
  }

  /* ---------- Footer ---------- */
  .cn-cb-footer {
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }

  .cn-cb-footer strong {
    color: #fff;
    font-weight: 600;
  }

  /* ---------- Mobile ---------- */
  @media (max-width: 480px) {
    /* A real bar, edge to edge with its own ground, rather than two pills floating over
       whatever scrolls beneath them. */
    .cn-cb-fab-stack {
      bottom: 0;
      right: 0;
      left: 0;
      gap: 10px;
      flex-direction: row;
      align-items: stretch;
      justify-content: stretch;
      padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
      background: #fff;
      border-top: 1px solid rgba(30, 74, 37, 0.12);
      box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
    }

    .cn-cb-fab-stack.is-lifted {
      bottom: var(--cn-cb-lift, 0px);
    }

    /* Room under the page for the bar, so the footer's last lines can still be read. */
    body {
      padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    }

    .cn-cb-fab {
      flex: 1 1 50%;
      width: auto;
      height: 46px;
      border-radius: 999px;
      border: 1.5px solid rgba(255, 255, 255, 0.25);
      gap: 8px;
      padding: 0 12px;
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .cn-cb-fab:active {
      transform: scale(0.97);
    }

    .cn-cb-fab:hover {
      transform: none;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
    }

    .cn-cb-fab svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    .cn-cb-fab[data-label]::before {
      position: static;
      transform: none;
      background: transparent;
      box-shadow: none;
      padding: 0;
      opacity: 1;
      color: #fff;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }

    /* Shorter mobile labels */
    #cnCbFab[data-label]::before {
      content: 'Call Us';
    }

    #cnCbWaFab[data-label]::before {
      content: 'WhatsApp';
    }

    .cn-cb-fab[data-label]::after {
      display: none;
    }

    .cn-cb-fab-pulse {
      display: none;
    }

    .cn-cb-modal {
      max-width: 100%;
    }

    .cn-cb-tab span {
      font-size: 11px;
    }

    .cn-cb-title {
      font-size: 18px;
    }

    .cn-cb-header {
      padding: 20px 20px 12px;
    }

    .cn-cb-body {
      padding: 6px 20px 20px;
    }

    .cn-cb-phone-wrap {
      grid-template-columns: 100px 1fr;
    }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {

    .cn-cb-fab-pulse,
    .cn-cb-modal,
    .cn-cb-overlay,
    .cn-cb-pane,
    .cn-cb-success-icon,
    .cn-cb-spinner {
      animation: none !important;
    }
  }