.paiq{--paiq-primary:#5156F6;--paiq-accent:#6C63FF;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji";color:#111827;position:relative;width:100%;min-height:720px;background:#fff}
.paiq *{box-sizing:border-box}

/* Header */
.paiq-header{position:relative;height:64px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #eef2f7}
.paiq-brand{font-family:"Brush Script MT","Segoe Script",cursive;font-size:34px;color:var(--paiq-primary);line-height:1;display:flex;align-items:center;justify-content:center}
.paiq-brand img{height:26px;width:auto;display:block}
/* Menu removed (no restart option) */
.paiq-menu{display:none}
.paiq-menu span{display:none}
.paiq-back{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:transparent;cursor:pointer}
.paiq-back:before{content:"←";font-size:18px;color:#111827;opacity:.7}

/* Progress */
.paiq-topline{position:absolute;left:0;right:0;top:64px;height:2px;background:#e5e7eb;width:100%}
.paiq-topline-fill{height:100%;width:0%;background:var(--paiq-primary);transition:width .25s ease}

/* Make the progress bar span the full viewport width (even inside a constrained content area). */
.paiq-fullbar .paiq-topline{width:100vw;left:50%;right:auto;transform:translateX(-50%)}
.paiq-fullbar .paiq-topline-fill{width:0%}

/* Menu styles kept for backward compat but hidden */
.paiq-menu-overlay,.paiq-menu-panel,.paiq-menu-close,.paiq-menu-item{display:none}

/* Stage */
.paiq-stage{padding:72px 16px 128px;display:flex;justify-content:center}
.paiq-step{width:min(980px,100%);position:relative;background-repeat:no-repeat;background-position:right bottom;background-size:320px auto}
.paiq-step-inner{width:100%;text-align:center}
.paiq-center{display:flex;flex-direction:column;align-items:center}

.paiq-counter{font-weight:800;font-size:14px;color:var(--paiq-primary);margin-bottom:18px}
.paiq-title{font-size:32px;font-weight:900;color:#0f172a;line-height:1.22;margin:0 0 10px}
.paiq-subtitle{margin:0 0 10px;font-size:15px;color:#6b7280;font-weight:600}

/* Answers */
.paiq-answers{display:flex;flex-direction:column;gap:18px;align-items:center;margin-top:22px;width:100%}
.paiq-answers.paiq-layout-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;align-items:stretch;width:min(1050px,100%);margin:22px auto 0}
@media (max-width:820px){.paiq-answers.paiq-layout-grid{grid-template-columns:1fr}}

.paiq-answer,.paiq-card{width:min(520px,calc(100% - 32px));background:#f3f4f6;border-radius:8px;padding:20px 18px;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center;gap:14px;transition:transform .08s ease,border-color .12s ease,background .12s ease}
.paiq-answer:hover,.paiq-card:hover{transform:translateY(-1px);background:#e5e7eb}
.paiq-answer.is-selected,.paiq-card.is-selected{border-color:var(--paiq-primary);background:#f2f3ff}
.paiq-emoji{font-size:28px;line-height:1}
.paiq-answer-text,.paiq-card-text{font-weight:800;color:#111827}

.paiq-answers.paiq-layout-grid .paiq-card{width:100%;justify-content:flex-start}

/* Form */
.paiq-form{width:min(560px,100%);margin:26px auto 0}
.paiq-input{width:100%;background:#eef2ff;border:1px solid #e5e7eb;border-radius:6px;padding:14px 16px;display:flex;align-items:center;gap:10px;margin-bottom:12px}
.paiq-input input{border:0;outline:0;background:transparent;width:100%;font-size:16px}
.paiq-input-icon{opacity:.7}
.paiq-input-check{min-width:20px;text-align:right}
.paiq-privacy{width:min(560px,100%);margin:12px auto 0;font-size:12px;color:#6b7280;display:flex;gap:8px;align-items:flex-start}

/* Footer */
.paiq-footer{position:absolute;left:0;right:0;bottom:30px;display:flex;justify-content:center}
.paiq-continue{width:min(520px,calc(100% - 32px));height:60px;border-radius:8px;border:0;background:#c7c8ff;color:#fff;font-weight:900;letter-spacing:.6px;text-transform:uppercase;cursor:not-allowed;display:flex;align-items:center;justify-content:center;gap:10px}
.paiq-continue:not(:disabled){background:var(--paiq-primary);cursor:pointer}
.paiq-continue-icon{display:flex;align-items:center;justify-content:center;opacity:.95}
.paiq-spin{animation:paiq-spin .9s linear infinite}
@keyframes paiq-spin{to{transform:rotate(360deg)}}

/* Results */
.paiq-green{color:#22c55e}
.paiq-box{width:min(560px,100%);margin-top:22px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:16px 16px;text-align:left}
.paiq-box-title{font-weight:900;margin-bottom:8px}
.paiq-coupon code{font-size:16px;font-weight:800;background:#eef2ff;border-radius:10px;padding:8px 10px;display:inline-block}
.paiq-small{font-size:12px;color:#6b7280;font-weight:600}

/* Scratch */
.paiq-scratch-wrap{margin-top:22px}
.paiq-scratch-label{font-size:14px;color:#6b7280;font-weight:700;margin-bottom:10px}
.paiq-scratch-card{width:360px;max-width:calc(100vw - 32px);height:240px;border-radius:18px;position:relative;overflow:hidden;box-shadow:0 12px 28px rgba(15,23,42,.12)}
.paiq-scratch-reveal{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#ffb34d,#ffd24a)}
.paiq-scratch-big{font-weight:900;font-size:56px;color:#166534;line-height:1}
.paiq-scratch-big span{font-size:18px;font-weight:900;margin-left:6px;color:#14532d}
.paiq-scratch-code{margin-top:8px;font-weight:800;color:#111827;background:rgba(255,255,255,.65);padding:8px 10px;border-radius:12px}
.paiq-scratch-canvas{position:absolute;inset:0;width:100%;height:100%}

/* Modal */
.paiq-modal{position:fixed;inset:0;background:rgba(15,23,42,.62);display:flex;align-items:flex-end;justify-content:center;padding:24px;z-index:9999}
.paiq-modal-card{width:min(520px,100%);background:#fff;border-radius:16px;padding:18px 18px 16px;text-align:center;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.paiq-modal-emoji{font-size:30px;margin-bottom:6px}
.paiq-modal-title{font-size:18px;font-weight:900;margin-bottom:8px}
.paiq-modal-text{font-size:13px;color:#6b7280;font-weight:600;margin-bottom:12px}
.paiq-modal-btn{width:100%;height:52px;border-radius:10px;border:0;background:var(--paiq-primary);color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.6px;cursor:pointer}


/* --- Modern result layout tweaks --- */
.paiq-result .paiq-subtitle{max-width:640px}
.paiq-box{box-shadow:0 10px 28px rgba(15,23,42,.06)}
.paiq-box-center{text-align:center}
.paiq-score-box{padding:22px 18px}
.paiq-result-score{font-weight:950;font-size:44px;line-height:1.05;letter-spacing:-0.02em;color:#0f172a}
.paiq-expire-box{padding:18px}
.paiq-expire-big{font-weight:950;font-size:30px;line-height:1.1;letter-spacing:-0.02em;color:#0f172a}

/* Improve scratch label spacing */
.paiq-scratch-label{margin-top:6px}

/* --- Mobile responsiveness --- */
@media (max-width:600px){
  .paiq-stage{padding:56px 14px 112px}
  .paiq-title{font-size:26px}
  .paiq-subtitle{font-size:14px}
  .paiq-answers{gap:14px}
  .paiq-answer,.paiq-card{padding:16px 14px;border-radius:12px}
  .paiq-emoji{font-size:24px}
  .paiq-continue{height:54px;border-radius:12px}
  .paiq-result-score{font-size:40px}
  .paiq-expire-big{font-size:26px}
}

@media (max-width:420px){
  .paiq-title{font-size:24px}
  .paiq-result-score{font-size:36px}
  .paiq-scratch-card{height:220px}
}

/* Mobile: make answer options more compact (less scrolling) */
@media (max-width: 480px) {
  /* Option buttons/cards */
  .paiq-option,
  .paiq-choice,
  .paiq-answer,
  .paiq-option-btn,
  .paiq-options button {
    padding: 12px 14px !important;   /* smaller vertical height */
    margin: 10px 0 !important;       /* tighter spacing between options */
    border-radius: 18px !important;  /* slightly less “pill” */
    font-size: 16px !important;      /* keep readable but smaller */
    line-height: 1.2 !important;
    min-height: 52px !important;     /* avoids giant buttons */
  }

  /* If the option text is wrapped in a label/span, tighten it too */
  .paiq-option label,
  .paiq-option span,
  .paiq-choice label,
  .paiq-choice span {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
}

/* Capitalize the coupon expiry label */
.paiq-expire-label,
.paiq-expiry-label,
.paiq-expire-text {
  text-transform: capitalize;
}

/*
  Continue button visibility is controlled in JS based on step type.
  - Hidden for single-select (auto-advance)
  - Shown for multi-select + name/email
*/