/* YGL Product Finder — production CSS (scoped). Do not edit custom.css. v=20260915b */
:root {
      --ygl: #114b6c;
      --ygl-dark: #0c3550;
      --ygl-light: #e8f1f6;
      --accent: #1a7a9c;
      --ok: #1b7a4a;
      --border: #d5e2ea;
      --text: #1a2b36;
      --muted: #5a7180;
      --card: #ffffff;
      --shadow: 0 12px 40px rgba(17, 75, 108, 0.22);
      --radius: 16px;
    }

/* Floating launcher — bottom LEFT (WhatsApp is bottom-right on live site) */
    #ygl-finder-root { all: initial; }
    #ygl-finder-root, #ygl-finder-root * {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Rubik, Arial, sans-serif;
      box-sizing: border-box;
    }
    .ygl-fab {
      position: fixed;
      bottom: 22px;
      left: 22px;
      z-index: 99990;
      display: flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, #0a2f48 0%, #114b6c 42%, #1a7a9c 78%, #3aa0c0 100%);
      background-size: 160% 160%;
      color: #fff;
      border: none;
      border-radius: 999px;
      padding: 12px 16px 12px 14px;
      cursor: pointer;
      box-shadow: 0 14px 32px rgba(17, 75, 108, 0.38), inset 0 1px 0 rgba(255,255,255,.22);
      font-size: 14px;
      font-weight: 600;
      transition: transform .18s ease, box-shadow .18s ease, background-position .35s ease, filter .18s ease;
    }
    .ygl-fab:hover {
      background-position: 100% 0;
      transform: translateY(-2px);
      filter: brightness(1.05);
      box-shadow: 0 18px 40px rgba(17, 75, 108, 0.45), inset 0 1px 0 rgba(255,255,255,.28);
    }
    .ygl-fab:focus-visible { outline: 3px solid #7ec8e3; outline-offset: 2px; }
    .ygl-fab-icon {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: rgba(255,255,255,.15);
      display: grid; place-items: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .ygl-fab-label { white-space: nowrap; max-width: 200px; }
    @media (max-width: 420px) {
      .ygl-fab-label { max-width: 140px; font-size: 13px; }
    }

    .ygl-overlay {
      position: fixed; inset: 0;
      background: rgba(10, 30, 45, .35);
      z-index: 99991;
      opacity: 0; pointer-events: none;
      transition: opacity .2s ease;
    }
    .ygl-overlay.open { opacity: 1; pointer-events: auto; }

    .ygl-panel {
      position: fixed;
      bottom: 90px;
      left: 22px;
      width: min(360px, calc(100vw - 28px));
      max-height: min(78vh, 640px);
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      z-index: 99992;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid var(--border);
      transform: translateY(12px) scale(.98);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
    }
    .ygl-panel.open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
    .ygl-panel-hd {
      background: var(--ygl);
      color: #fff;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .ygl-panel-hd h2 {
      margin: 0;
      font-size: 15px;
      font-weight: 700;
    }
    .ygl-close {
      background: rgba(255,255,255,.15);
      border: none;
      color: #fff;
      width: 32px; height: 32px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
    }
    .ygl-close:hover { background: rgba(255,255,255,.28); }
    .ygl-progress {
      height: 4px;
      background: #d9e6ee;
    }
    .ygl-progress > i {
      display: block;
      height: 100%;
      background: var(--accent);
      width: 0%;
      transition: width .25s ease;
    }
    .ygl-body {
      padding: 16px;
      overflow-y: auto;
      flex: 1;
    }
    .ygl-step-title {
      margin: 0 0 6px;
      font-size: 16px;
      color: var(--ygl);
      font-weight: 700;
    }
    .ygl-step-sub {
      margin: 0 0 14px;
      font-size: 13px;
      color: var(--muted);
    }
    .ygl-opts {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .ygl-opt {
      text-align: right;
      width: 100%;
      border: 1.5px solid var(--border);
      background: #fff;
      border-radius: 12px;
      padding: 12px 14px;
      cursor: pointer;
      font-size: 14px;
      color: var(--text);
      transition: border-color .12s, background .12s;
    }
    .ygl-opt:hover { border-color: var(--accent); background: var(--ygl-light); }
    .ygl-opt.selected {
      border-color: var(--ygl);
      background: var(--ygl-light);
      font-weight: 600;
      box-shadow: inset 0 0 0 1px var(--ygl);
    }
    .ygl-footer {
      padding: 12px 16px;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 8px;
      background: #fafcfd;
    }
    .ygl-btn {
      flex: 1;
      border: none;
      border-radius: 10px;
      padding: 11px 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }
    .ygl-btn-ghost {
      background: #eef3f6;
      color: var(--ygl);
    }
    .ygl-btn-primary {
      background: var(--ygl);
      color: #fff;
    }
    .ygl-btn-primary:disabled {
      opacity: .45;
      cursor: not-allowed;
    }
    .ygl-btn-wa {
      background: #25D366;
      color: #fff;
      width: 100%;
      margin-top: 8px;
    }
    .ygl-btn-link {
      background: transparent;
      color: var(--ygl);
      text-decoration: underline;
      width: 100%;
      margin-top: 4px;
      font-weight: 500;
    }

    .ygl-card {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 10px;
      background: #fff;
    }
    .ygl-card-top {
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
    .ygl-card img {
      width: 64px; height: 64px;
      object-fit: contain;
      border-radius: 8px;
      background: #f3f7fa;
      flex-shrink: 0;
    }
    .ygl-card h3 {
      margin: 0 0 4px;
      font-size: 13.5px;
      color: var(--ygl-dark);
      line-height: 1.3;
    }
    .ygl-price {
      font-weight: 700;
      color: var(--ygl);
      font-size: 15px;
    }
    .ygl-price s {
      color: var(--muted);
      font-weight: 500;
      font-size: 12px;
      margin-right: 6px;
    }
    .ygl-why {
      margin: 8px 0 0;
      font-size: 12.5px;
      color: var(--muted);
      background: var(--ygl-light);
      padding: 8px 10px;
      border-radius: 8px;
    }
    .ygl-card a.ygl-prod-link {
      display: inline-block;
      margin-top: 8px;
      color: var(--accent);
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
    }
    .ygl-card a.ygl-prod-link:hover { text-decoration: underline; }
    .ygl-badge {
      display: inline-block;
      background: var(--ygl);
      color: #fff;
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 999px;
      margin-bottom: 6px;
    }
    .ygl-form label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      margin: 10px 0 4px;
      color: var(--ygl);
    }
    .ygl-form input {
      width: 100%;
      border: 1.5px solid var(--border);
      border-radius: 10px;
      padding: 11px 12px;
      font-size: 15px;
      direction: rtl;
    }
    .ygl-form input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(26,122,156,.15);
    }
    .ygl-err {
      color: #b42318;
      font-size: 12px;
      margin-top: 4px;
      display: none;
    }
    .ygl-empty {
      text-align: center;
      padding: 20px 8px;
      color: var(--muted);
      font-size: 14px;
    }

    /* Advisor portrait (circular) */
    .ygl-advisor {
      display: block;
      object-fit: cover;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 0 2px #fff;
      flex-shrink: 0;
    }
    .ygl-advisor-fab {
      width: 38px;
      height: 38px;
    }
    .ygl-advisor-hd {
      width: 32px;
      height: 32px;
    }
    .ygl-panel-hd-title {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .ygl-panel-hd-title h2 {
      margin: 0;
      font-size: 15px;
      font-weight: 700;
    }
    /* keep fab icon slot compatible when using img */
    .ygl-fab .ygl-advisor-fab {
      margin: 0;
    }