/* ═══════════════════════════════════════════════════════════════
       SITE DESIGN TOKENS
    ═══════════════════════════════════════════════════════════════ */
    :root {
      --primary-teal:      #0d7377;
      --primary-teal-dark: #14919b;
      --green-deep:        #14442a;
      --wa-green:          #25D366;
      --wa-dark:           #128c7e;

      --fab-size:    48px;
      --fab-edge:    16px;
      --fab-gap:     10px;
      --fab-icon:    21px;
      --fab-wa-icon: 26px;
    }


    /* ═══════════════════════════════════════════════════════════════
       1.  SCROLL TO TOP  — fixed bottom-right corner
    ═══════════════════════════════════════════════════════════════ */
    #fabScrollTop {
      position: fixed;
      bottom: 24px;
      right: var(--fab-edge);
      width: var(--fab-size);
      height: var(--fab-size);
      border-radius: 50%;
      border: none;
      background: linear-gradient(145deg, var(--primary-teal) 0%, var(--primary-teal-dark) 100%);
      color: #fff;
      font-size: var(--fab-icon);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      box-shadow:
        0 4px 18px rgba(13,115,119,.42),
        0 0 0 3px rgba(13,115,119,.14),
        inset 0 1px 0 rgba(255,255,255,.18);
      z-index: 9900;
      opacity: 0;
      pointer-events: none;
      transform: translateY(14px) scale(.86);
      transition:
        opacity .35s ease,
        transform .4s cubic-bezier(.34,1.42,.64,1),
        box-shadow .3s ease;
    }
    #fabScrollTop.visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
    #fabScrollTop:hover {
      transform: translateY(-3px) scale(1.07);
      box-shadow:
        0 8px 28px rgba(13,115,119,.54),
        0 0 0 4px rgba(13,115,119,.2),
        inset 0 1px 0 rgba(255,255,255,.2);
    }
    #fabScrollTop:active { transform: scale(.95); }

    #fabScrollTop .stt-icon { display: flex; transition: transform .3s ease; }
    #fabScrollTop:hover .stt-icon { transform: translateY(-2px); }

    #fabScrollTop .prog-ring {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      transform: rotate(-90deg);
    }
    #fabScrollTop .prog-ring circle {
      fill: none;
      stroke: rgba(255,255,255,.45);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 125.6;
      stroke-dashoffset: 125.6;
      transition: stroke-dashoffset .12s linear;
    }

    #fabScrollTop::after {
      content: 'Back to Top';
      position: absolute;
      right: calc(100% + 10px); top: 50%;
      transform: translateY(-50%) translateX(6px);
      background: var(--green-deep); color: #fff;
      font-family: 'Roboto', sans-serif;
      font-size: 10px; font-weight: 700;
      letter-spacing: .08em; text-transform: uppercase;
      padding: 5px 10px; border-radius: 5px; white-space: nowrap;
      opacity: 0; pointer-events: none;
      transition: opacity .25s, transform .25s;
    }
    #fabScrollTop:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }


    /* ═══════════════════════════════════════════════════════════════
       2.  WHATSAPP BUTTON  — fixed just above scroll button
    ═══════════════════════════════════════════════════════════════ */
    .whatsapp-button {
      position: fixed;
      bottom: calc(var(--fab-size) + 24px + var(--fab-gap));
      right: var(--fab-edge);
      width: var(--fab-size);
      height: var(--fab-size);
      background: var(--wa-green);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      box-shadow:
        0 4px 16px rgba(37,211,102,.44),
        0 0 0 3px rgba(37,211,102,.16);
      transition: transform .3s ease, box-shadow .3s ease;
      z-index: 9900;
    }
    .whatsapp-button:hover {
      transform: scale(1.1);
      box-shadow: 0 7px 24px rgba(37,211,102,.64), 0 0 0 4px rgba(37,211,102,.22);
    }
    .whatsapp-button:active { transform: scale(.94); }

    .whatsapp-button::before {
      content: '';
      position: absolute; inset: -5px;
      border-radius: 50%;
      border: 2.5px solid rgba(37,211,102,.5);
      animation: waPulse 2.4s ease-out infinite;
      pointer-events: none;
    }
    @keyframes waPulse {
      0%   { transform: scale(1); opacity: .8; }
      70%  { transform: scale(1.55); opacity: 0; }
      100% { transform: scale(1.55); opacity: 0; }
    }

    .whatsapp-button svg {
      width: var(--fab-wa-icon);
      height: var(--fab-wa-icon);
      fill: white;
      transition: transform .3s ease;
      flex-shrink: 0;
      position: relative; z-index: 1;
    }
    .whatsapp-button:hover svg { transform: scale(1.1); }

    .whatsapp-notification-badge {
      position: absolute; top: -5px; right: -5px;
      background: #FF3E4E; color: white;
      width: 22px; height: 22px;
      border-radius: 50%; border: 2px solid white;
      display: none; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700;
      animation: badgePulse 1s ease-in-out infinite;
      z-index: 2;
    }
    .whatsapp-notification-badge.show { display: flex; }
    @keyframes badgePulse {
      0%,100% { transform: scale(1); }
      50%     { transform: scale(1.14); }
    }

    .whatsapp-button::after {
      content: 'WhatsApp';
      position: absolute;
      right: calc(100% + 10px); top: 50%;
      transform: translateY(-50%) translateX(6px);
      background: var(--green-deep); color: #fff;
      font-family: 'Roboto', sans-serif;
      font-size: 10px; font-weight: 700;
      letter-spacing: .08em; text-transform: uppercase;
      padding: 5px 10px; border-radius: 5px; white-space: nowrap;
      opacity: 0; pointer-events: none;
      transition: opacity .25s, transform .25s;
    }
    .whatsapp-button:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

    /* ── Chat Popup ── */
    .whatsapp-chat-popup {
      position: fixed;
      bottom: calc(var(--fab-size) + 24px + var(--fab-gap) + var(--fab-size) + var(--fab-gap) + 6px);
      right: var(--fab-edge);
      width: 340px;
      max-width: calc(100vw - 32px);
      background: white;
      border-radius: 18px;
      box-shadow: 0 12px 44px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.1);
      overflow: hidden;
      opacity: 0;
      transform: translateY(22px) scale(.94);
      pointer-events: none;
      transition: all .38s cubic-bezier(.34,1.3,.64,1);
      z-index: 9890;
    }
    .whatsapp-chat-popup.show {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: all;
    }

    .whatsapp-chat-header {
      background: linear-gradient(135deg, var(--wa-dark), var(--wa-green));
      color: white;
      padding: 16px 18px;
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
    }
    .whatsapp-chat-header-info { display: flex; align-items: center; gap: 11px; }

    .whatsapp-chat-avatar {
      width: 48px; height: 48px; background: white;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; padding: 4px; flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(0,0,0,.15);
    }
    .whatsapp-chat-avatar img { width: 100%; height: 100%; object-fit: contain; }
    .whatsapp-chat-avatar .wa-fallback {
      font-size: 20px; color: var(--wa-green);
      display: none; align-items: center; justify-content: center;
    }

    .whatsapp-chat-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; font-family: 'Roboto', sans-serif; }
    .whatsapp-chat-status {
      font-size: 12px; opacity: .9;
      display: flex; align-items: center; gap: 5px; font-family: 'Roboto', sans-serif;
    }
    .wa-status-dot {
      width: 7px; height: 7px; border-radius: 50%; background: #fff;
      animation: blink 2s ease-in-out infinite; flex-shrink: 0;
    }
    @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

    .whatsapp-close-button {
      background: rgba(255,255,255,.18); border: none; color: white;
      width: 28px; height: 28px; border-radius: 50%;
      font-size: 18px; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: background .2s; flex-shrink: 0;
    }
    .whatsapp-close-button:hover { background: rgba(255,255,255,.32); }

    .whatsapp-chat-body {
      padding: 18px 16px; background: #ECE5DD; min-height: 130px; position: relative;
    }
    .whatsapp-chat-body::before {
      content: '';
      position: absolute; inset: 0; opacity: .04; pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 80L80 0' stroke='%23000' stroke-width='.5'/%3E%3C/svg%3E");
    }
    .whatsapp-chat-message {
      background: white; padding: 12px 14px;
      border-radius: 4px 14px 14px 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,.1);
      animation: waSlideIn .35s ease both; max-width: 92%;
    }
    @keyframes waSlideIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

    .whatsapp-message-text { color: #222; line-height: 1.55; font-size: 13.5px; font-family: 'Roboto', sans-serif; }
    .whatsapp-message-time {
      font-size: 10.5px; color: #aaa; text-align: right; margin-top: 6px;
      display: flex; align-items: center; justify-content: flex-end; gap: 3px;
    }
    .whatsapp-message-time i { font-size: 11px; color: #4FC3F7; }

    .whatsapp-chat-footer { padding: 14px 16px; background: white; }
    .whatsapp-start-chat-button {
      width: 100%;
      background: linear-gradient(135deg, var(--wa-dark), var(--wa-green));
      color: white; border: none;
      padding: 13px 16px; border-radius: 10px;
      font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 700;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 9px;
      letter-spacing: .03em;
      box-shadow: 0 4px 14px rgba(37,211,102,.32);
      transition: transform .3s, box-shadow .3s;
    }
    .whatsapp-start-chat-button:hover {
      transform: translateY(-1px); box-shadow: 0 7px 20px rgba(37,211,102,.48);
    }


    /* ═══════════════════════════════════════════════════════════════
       RESPONSIVE BREAKPOINTS
    ═══════════════════════════════════════════════════════════════ */

    @media (max-width: 359px) {
      :root { --fab-size: 38px; --fab-edge: 10px; --fab-gap: 8px; --fab-icon: 15px; --fab-wa-icon: 20px; }
      .whatsapp-button { bottom: calc(38px + 24px + 8px); right: 10px; }
      .whatsapp-chat-popup { right: 10px; width: calc(100vw - 24px); bottom: calc(38px + 24px + 8px + 38px + 8px + 6px); }
    }

    @media (min-width: 360px) and (max-width: 479px) {
      :root { --fab-size: 42px; --fab-edge: 12px; --fab-gap: 9px; --fab-icon: 17px; --fab-wa-icon: 22px; }
      .whatsapp-button { bottom: calc(42px + 24px + 9px); right: 12px; }
      .whatsapp-chat-popup { right: 12px; width: calc(100vw - 28px); bottom: calc(42px + 24px + 9px + 42px + 9px + 6px); }
    }

    @media (min-width: 480px) and (max-width: 767px) {
      :root { --fab-size: 46px; --fab-edge: 14px; --fab-gap: 10px; --fab-icon: 19px; --fab-wa-icon: 24px; }
      .whatsapp-button { bottom: calc(46px + 24px + 10px); right: 14px; }
      .whatsapp-chat-popup { right: 14px; bottom: calc(46px + 24px + 10px + 46px + 10px + 6px); }
    }

    @media (min-width: 768px) and (max-width: 1023px) {
      :root { --fab-size: 48px; --fab-edge: 16px; --fab-gap: 10px; --fab-icon: 21px; --fab-wa-icon: 26px; }
      .whatsapp-button { bottom: calc(48px + 24px + 10px); right: 16px; }
      .whatsapp-chat-popup { right: 16px; bottom: calc(48px + 24px + 10px + 48px + 10px + 6px); }
    }

    @media (min-width: 1024px) and (max-width: 1279px) {
      :root { --fab-size: 50px; --fab-edge: 18px; --fab-gap: 12px; --fab-icon: 22px; --fab-wa-icon: 27px; }
      .whatsapp-button { bottom: calc(50px + 24px + 12px); right: 18px; }
      .whatsapp-chat-popup { right: 18px; bottom: calc(50px + 24px + 12px + 50px + 12px + 6px); }
    }

    @media (min-width: 1280px) and (max-width: 1535px) {
      :root { --fab-size: 52px; --fab-edge: 22px; --fab-gap: 12px; --fab-icon: 22px; --fab-wa-icon: 28px; }
      .whatsapp-button { bottom: calc(52px + 24px + 12px); right: 22px; }
      .whatsapp-chat-popup { right: 22px; bottom: calc(52px + 24px + 12px + 52px + 12px + 6px); }
    }

    @media (min-width: 1536px) {
      :root { --fab-size: 56px; --fab-edge: 28px; --fab-gap: 14px; --fab-icon: 24px; --fab-wa-icon: 30px; }
      .whatsapp-button { bottom: calc(56px + 24px + 14px); right: 28px; }
      .whatsapp-chat-popup { right: 28px; bottom: calc(56px + 24px + 14px + 56px + 14px + 6px); }
    }

    @media (max-height: 500px) {
      #fabScrollTop { bottom: 12px; }
      .whatsapp-button { bottom: calc(var(--fab-size) + 16px + var(--fab-gap)); }
      .whatsapp-chat-popup { bottom: calc(var(--fab-size) + 16px + var(--fab-gap) + var(--fab-size) + var(--fab-gap) + 4px); max-height: 70vh; overflow-y: auto; }
    }