/* ShineNos Gift Card — Frontend CSS */
:root {
  --sn-blue:#1A6FB5; --sn-blue-dark:#0F4F8A; --sn-blue-light:#E8F2FB;
  --sn-teal:#0EA5A0; --sn-teal-light:#E0F5F5;
  --sn-text:#1C2B3A; --sn-muted:#5C7A96; --sn-border:#D0E3F5;
  --sn-bg:#F4F8FD; --sn-white:#FFFFFF; --sn-err:#C0392B; --sn-yellow:#F4C430;
}
#snos-gc-root { font-family:'Outfit','Helvetica Neue',Arial,sans-serif; color:var(--sn-text); }

/* Hero */
.snos-hero { background:linear-gradient(135deg,#0F4F8A,#1A6FB5,#0EA5A0); padding:2.5rem 24px 3rem; text-align:center; }
.snos-hero-badge { display:inline-block; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); color:#fff; font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:5px 14px; border-radius:20px; margin-bottom:12px; }
.snos-hero-h1 { font-size:clamp(1.6rem,4vw,2.1rem); color:#fff; line-height:1.2; margin:0 0 8px; }
.snos-hero-h1 em { color:var(--sn-yellow); font-style:italic; }
.snos-hero-p { font-size:14px; color:rgba(255,255,255,.82); max-width:480px; margin:0 auto 1.5rem; line-height:1.6; }
.snos-trust-row { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.snos-trust { font-size:12px; color:rgba(255,255,255,.85); display:flex; align-items:center; gap:4px; }

/* Body wrapper */
.snos-body { max-width:760px; margin:-1.5rem auto 2rem; padding:0 16px; position:relative; z-index:2; }

/* Progress */
.snos-progress { background:#fff; border:0.5px solid var(--sn-border); border-radius:14px 14px 0 0; padding:1rem 1.5rem; display:flex; align-items:center; box-shadow:0 2px 8px rgba(15,79,138,.07); }
.snos-step { display:flex; align-items:center; flex:1; }
.snos-step-dot { width:28px; height:28px; border-radius:50%; background:#E8EEF5; color:#8AAAC5; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .3s; }
.snos-step.active .snos-step-dot { background:var(--sn-blue); color:#fff; }
.snos-step.done   .snos-step-dot { background:var(--sn-teal);  color:#fff; }
.snos-step-lbl { font-size:11px; color:var(--sn-muted); margin-left:7px; white-space:nowrap; }
.snos-step.active .snos-step-lbl { color:var(--sn-blue); font-weight:600; }
.snos-step.done   .snos-step-lbl { color:var(--sn-teal); }
.snos-step-line { flex:1; height:1px; background:#D8E8F5; margin:0 8px; }

/* Card */
.snos-card { background:#fff; border:0.5px solid var(--sn-border); border-top:none; border-radius:0 0 14px 14px; box-shadow:0 4px 20px rgba(15,79,138,.08); }
.snos-section { padding:1.5rem 1.75rem; }
.snos-section-title { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sn-blue); margin-bottom:1rem; }
.snos-divider { border:none; border-top:0.5px solid var(--sn-border); margin:.25rem 0 1.25rem; }
.snos-page { display:none; }
.snos-page.visible { display:block; }

/* Gift card preview */
.snos-gc-preview { border-radius:14px; background:linear-gradient(135deg,#0F4F8A 0%,#1A6FB5 55%,#0EA5A0 100%); padding:1.5rem 1.75rem; color:#fff; position:relative; overflow:hidden; margin-bottom:1.5rem; }
.snos-gc-preview::before { content:''; position:absolute; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.05); top:-70px; right:-50px; }
.snos-gc-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1rem; }
.snos-gc-brand { font-size:18px; font-weight:700; }
.snos-gc-brand span { color:var(--sn-yellow); }
.snos-gc-badge { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); font-size:10px; padding:3px 9px; border-radius:10px; letter-spacing:.08em; text-transform:uppercase; }
.snos-gc-amount { font-size:2.4rem; color:var(--sn-yellow); font-weight:700; }
.snos-gc-bottom { display:flex; justify-content:space-between; align-items:flex-end; }
.snos-gc-to { font-size:13px; opacity:.85; }
.snos-gc-to strong { display:block; font-size:15px; opacity:1; }
.snos-gc-meta { text-align:right; font-size:11px; opacity:.7; }
.snos-gc-code { font-family:monospace; font-size:13px; letter-spacing:.18em; background:rgba(255,255,255,.12); padding:4px 10px; border-radius:6px; display:inline-block; margin-top:4px; }

/* Amounts */
.snos-amounts { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:1rem; }
.snos-amt { border:1.5px solid var(--sn-border); border-radius:10px; padding:10px 6px; text-align:center; cursor:pointer; transition:all .2s; background:#fff; }
.snos-amt-val { font-size:17px; font-weight:700; }
.snos-amt-lbl { font-size:10px; color:var(--sn-muted); margin-top:2px; }
.snos-amt:hover,.snos-amt.selected { border-color:var(--sn-blue); }
.snos-amt.selected { background:var(--sn-blue-light); }
.snos-amt.selected .snos-amt-val { color:var(--sn-blue-dark); }
.snos-custom-row { display:flex; align-items:center; border:1.5px solid var(--sn-border); border-radius:10px; overflow:hidden; margin-bottom:1rem; }
.snos-custom-row span { background:#EEF4FB; padding:0 12px; height:44px; display:flex; align-items:center; font-size:15px; color:var(--sn-muted); border-right:1px solid var(--sn-border); }
.snos-custom-row input { border:none; outline:none; padding:0 12px; font-size:15px; width:100%; }

/* Form fields */
.snos-field { margin-bottom:1rem; }
.snos-label { font-size:12px; font-weight:600; color:var(--sn-muted); margin-bottom:5px; display:block; }
.snos-input { width:100%; border:1.5px solid var(--sn-border); border-radius:9px; padding:10px 13px; font-size:14px; color:var(--sn-text); background:#fff; outline:none; transition:border-color .2s; box-sizing:border-box; }
.snos-input:focus { border-color:var(--sn-blue); }
.snos-input.err { border-color:var(--sn-err); }
.snos-2col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.snos-textarea { resize:vertical; min-height:75px; }
.snos-hint { font-size:11px; color:var(--sn-muted); margin-top:3px; }
.snos-err-msg { font-size:11px; color:var(--sn-err); margin-top:3px; display:none; }
.has-err .snos-err-msg { display:block; }

/* Designs */
.snos-designs { display:flex; gap:10px; margin-bottom:1rem; }
.snos-design { border:2px solid var(--sn-border); border-radius:10px; padding:10px 14px; cursor:pointer; font-size:13px; font-weight:500; transition:all .2s; flex:1; text-align:center; }
.snos-design.selected { border-color:var(--sn-blue); background:var(--sn-blue-light); color:var(--sn-blue-dark); }

/* Payment */
.snos-pms { display:flex; gap:8px; margin-bottom:1.25rem; flex-wrap:wrap; }
.snos-pm { border:1.5px solid var(--sn-border); border-radius:8px; padding:8px 14px; cursor:pointer; font-size:13px; font-weight:500; transition:all .2s; background:#fff; }
.snos-pm.selected { border-color:var(--sn-blue); background:var(--sn-blue-light); color:var(--sn-blue-dark); }
.snos-card-brands { display:flex; gap:6px; margin-bottom:1rem; }
.snos-brand-badge { background:#F0F4FA; border:0.5px solid var(--sn-border); border-radius:5px; padding:3px 8px; font-size:11px; font-weight:700; color:var(--sn-muted); }
.snos-stripe-box { border:1.5px solid var(--sn-border); border-radius:9px; padding:11px 13px; background:#fff; transition:border-color .2s; }
.snos-stripe-box.StripeElement--focus { border-color:var(--sn-blue); }
.snos-stripe-err { font-size:12px; color:var(--sn-err); margin-top:5px; min-height:16px; }
.snos-alt-pay-msg { background:#EEF4FB; border-radius:10px; padding:1.25rem; text-align:center; font-size:14px; color:var(--sn-muted); }

/* Summary */
.snos-summary { background:var(--sn-blue-light); border-radius:12px; padding:1.25rem; margin-bottom:1.5rem; border:0.5px solid var(--sn-border); }
.snos-sum-row { display:flex; justify-content:space-between; font-size:14px; padding:5px 0; }
.snos-sum-row.total { border-top:1px solid var(--sn-border); margin-top:8px; padding-top:12px; font-weight:700; font-size:16px; color:var(--sn-blue-dark); }
.snos-notif { display:flex; gap:10px; background:#fff; border:0.5px solid var(--sn-border); border-radius:10px; padding:10px 13px; margin-bottom:8px; }
.snos-notif-ico { font-size:15px; flex-shrink:0; }
.snos-notif-txt { font-size:12px; color:var(--sn-muted); line-height:1.5; }
.snos-notif-txt strong { display:block; color:var(--sn-text); font-size:13px; margin-bottom:1px; }
.snos-secure { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--sn-muted); justify-content:center; margin-bottom:1rem; margin-top:.5rem; }

/* Spinner */
.snos-spinner { width:36px; height:36px; border:3px solid var(--sn-border); border-top-color:var(--sn-blue); border-radius:50%; animation:snos-spin .7s linear infinite; margin:0 auto; }
@keyframes snos-spin { to { transform:rotate(360deg); } }

/* Buttons */
.snos-actions { padding:0 1.75rem 1.75rem; }
.snos-btn { width:100%; padding:13px; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; border:none; transition:all .2s; }
.snos-btn-primary { background:var(--sn-blue); color:#fff; }
.snos-btn-primary:hover { background:var(--sn-blue-dark); }
.snos-btn-primary:disabled { opacity:.65; cursor:not-allowed; }
.snos-btn-back { background:transparent; border:1.5px solid var(--sn-border); color:var(--sn-muted); margin-bottom:10px; }
.snos-btn-back:hover { border-color:var(--sn-blue); color:var(--sn-blue); }

/* Success */
.snos-success { text-align:center; padding:2.5rem 1.75rem; }
.snos-success-ring { width:72px; height:72px; border-radius:50%; background:var(--sn-teal-light); display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem; }
.snos-success-h2 { font-size:1.9rem; color:var(--sn-blue-dark); margin-bottom:6px; }
.snos-code-box { background:var(--sn-blue-light); border:2px dashed var(--sn-blue); border-radius:12px; padding:1rem; margin:1.25rem auto; max-width:340px; }
.snos-code-box small { font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--sn-blue); font-weight:700; }
.snos-code-box strong { display:block; font-family:monospace; font-size:1.5rem; letter-spacing:.2em; color:var(--sn-blue-dark); margin-top:4px; }
.snos-email-log { max-width:460px; margin:1rem auto; text-align:left; }
.snos-email-log-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--sn-muted); margin-bottom:8px; }
.snos-footer-card { background:var(--sn-blue-dark); border-radius:10px; padding:1rem; margin-top:1.5rem; }
.snos-footer-card p { font-size:12px; color:rgba(255,255,255,.75); }
.snos-footer-card a { color:var(--sn-yellow); text-decoration:none; font-weight:600; }

/* ── Confirmation Popup ── */
.snos-overlay { position:fixed; inset:0; background:rgba(10,25,50,.55); display:flex; align-items:center; justify-content:center; z-index:99999; padding:16px; opacity:0; pointer-events:none; transition:opacity .25s; }
.snos-overlay.show { opacity:1; pointer-events:all; }
.snos-popup { background:#fff; border-radius:18px; padding:2rem 1.75rem 1.75rem; max-width:420px; width:100%; position:relative; transform:translateY(16px) scale(.97); transition:transform .25s; border:0.5px solid var(--sn-border); }
.snos-overlay.show .snos-popup { transform:translateY(0) scale(1); }
.snos-popup-close { position:absolute; top:14px; right:16px; background:none; border:none; font-size:18px; color:var(--sn-muted); cursor:pointer; }
.snos-popup-icon { width:56px; height:56px; border-radius:50%; background:var(--sn-blue-light); display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; font-size:26px; }
.snos-popup h3 { font-size:1.35rem; color:var(--sn-blue-dark); text-align:center; margin-bottom:6px; }
.snos-popup-sub { font-size:13px; color:var(--sn-muted); text-align:center; margin-bottom:1.25rem; line-height:1.5; }
.snos-popup-email-box { background:var(--sn-blue-light); border:1.5px solid var(--sn-blue); border-radius:12px; padding:14px 18px; margin-bottom:1rem; display:flex; align-items:center; gap:12px; }
.snos-popup-email-icon { font-size:22px; flex-shrink:0; }
.snos-popup-email-label { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--sn-blue); font-weight:700; margin-bottom:3px; }
.snos-popup-email-val { font-size:15px; font-weight:700; color:var(--sn-blue-dark); word-break:break-all; }
.snos-popup-name-row { font-size:13px; color:var(--sn-muted); margin-top:4px; }
.snos-popup-warn { background:#FFF9E6; border:1px solid #F0D060; border-radius:9px; padding:10px 13px; font-size:12px; color:#7A6010; margin-bottom:1rem; display:flex; gap:8px; }
.snos-popup-meta { font-size:11px; color:var(--sn-muted); text-align:center; padding:8px 0 12px; border-top:0.5px solid var(--sn-border); border-bottom:0.5px solid var(--sn-border); margin-bottom:1rem; }
.snos-popup-btns { display:flex; flex-direction:column; gap:8px; }
.snos-btn-confirm { width:100%; padding:12px; border-radius:10px; background:var(--sn-blue); color:#fff; border:none; font-size:14px; font-weight:600; cursor:pointer; transition:background .2s; }
.snos-btn-confirm:hover { background:var(--sn-blue-dark); }
.snos-btn-edit { width:100%; padding:11px; border-radius:10px; background:transparent; border:1.5px solid var(--sn-border); color:var(--sn-muted); font-size:14px; font-weight:500; cursor:pointer; transition:all .2s; }
.snos-btn-edit:hover { border-color:var(--sn-blue); color:var(--sn-blue); }

/* Responsive */
@media (max-width: 520px) {
  .snos-amounts { grid-template-columns:repeat(2,1fr); }
  .snos-2col { grid-template-columns:1fr; }
  .snos-designs { flex-direction:column; }
  .snos-step-lbl { display:none; }
  .snos-gc-amount { font-size:1.8rem; }
}