/* Optics Configurator — Phase 5 Frontend Modal · Animated Premium UI */
/* Zero external dependencies · Pure CSS animations · LiteSpeed/cache safe */

:root {
  --ocm-p: #7c3aed;
  --ocm-p2: #8b5cf6;
  --ocm-p3: #6d28d9;
  --ocm-pbg: #f5f3ff;
  --ocm-g: #10b981;
  --ocm-gbg: #ecfdf5;
  --ocm-r: #ef4444;
  --ocm-rbg: #fef2f2;
  --ocm-pk: #ec4899;
  --ocm-txt: #111827;
  --ocm-txt2: #6b7280;
  --ocm-txt3: #9ca3af;
  --ocm-border: #e5e7eb;
  --ocm-card: #ffffff;
  --ocm-rad: 16px;
  --ocm-rad-sm: 10px;
  --ocm-shadow: 0 24px 64px rgba(15,7,41,.25), 0 8px 24px rgba(0,0,0,.08);
  --ocm-ease: cubic-bezier(.4,0,.2,1);
  --ocm-spring: cubic-bezier(.34,1.56,.64,1);
  --ocm-dur: 220ms;
  --ocm-slow: 380ms;
  --ocm-fast: 130ms;
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes ocm-overlay-in  { from{opacity:0} to{opacity:1} }
@keyframes ocm-overlay-out { from{opacity:1} to{opacity:0} }
@keyframes ocm-box-in  {
  from { opacity:0; transform:translateY(32px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes ocm-box-out {
  from { opacity:1; transform:translateY(0) scale(1); }
  to   { opacity:0; transform:translateY(24px) scale(.97); }
}
@keyframes ocm-fade-up {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes ocm-fade-in { from{opacity:0} to{opacity:1} }
@keyframes ocm-slide-right {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes ocm-slide-left {
  from { opacity:0; transform:translateX(-20px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes ocm-scale-in {
  from { opacity:0; transform:scale(.88); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes ocm-bounce-in {
  0%   { transform:scale(.75); opacity:0; }
  60%  { transform:scale(1.08); opacity:1; }
  100% { transform:scale(1); }
}
@keyframes ocm-spin { to{transform:rotate(360deg)} }
@keyframes ocm-shimmer {
  from { background-position:-200% 0 }
  to   { background-position:200% 0 }
}
@keyframes ocm-pulse-dot {
  0%,100% { box-shadow:0 0 0 0 rgba(124,58,237,.4); }
  50%      { box-shadow:0 0 0 6px rgba(124,58,237,0); }
}
@keyframes ocm-check-draw {
  from { stroke-dashoffset:20; }
  to   { stroke-dashoffset:0; }
}
@keyframes ocm-success-pop {
  0%   { transform:scale(.6) rotate(-10deg); opacity:0; }
  70%  { transform:scale(1.15) rotate(3deg); opacity:1; }
  100% { transform:scale(1) rotate(0); }
}

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.ocm-overlay {
  position:fixed; inset:0;
  background:rgba(15,7,41,.60);
  backdrop-filter:blur(6px) saturate(1.2);
  -webkit-backdrop-filter:blur(6px) saturate(1.2);
  display:flex; align-items:center; justify-content:center;
  z-index:999999; padding:16px;
  animation:ocm-overlay-in var(--ocm-dur) var(--ocm-ease) both;
  will-change:opacity;
}
.ocm-overlay.closing { animation:ocm-overlay-out var(--ocm-dur) var(--ocm-ease) both; }

/* ── Modal Box ───────────────────────────────────────────────────────────── */
.ocm-box {
  background:var(--ocm-card);
  border-radius:22px;
  box-shadow:var(--ocm-shadow);
  width:100%; max-width:600px;
  max-height:92vh; overflow-y:auto;
  display:flex; flex-direction:column;
  animation:ocm-box-in var(--ocm-slow) var(--ocm-spring) both;
  will-change:transform,opacity;
  /* Custom scrollbar */
  scrollbar-width:thin;
  scrollbar-color:var(--ocm-border) transparent;
}
.ocm-box::-webkit-scrollbar { width:5px; }
.ocm-box::-webkit-scrollbar-track { background:transparent; }
.ocm-box::-webkit-scrollbar-thumb { background:var(--ocm-border); border-radius:100px; }
.ocm-box.closing { animation:ocm-box-out var(--ocm-dur) var(--ocm-ease) both; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.ocm-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1.5px solid var(--ocm-border);
  background:var(--ocm-card); position:sticky; top:0; z-index:10;
  border-radius:22px 22px 0 0;
}
.ocm-header-left { display:flex; align-items:center; gap:12px; }
.ocm-header-icon {
  width:42px; height:42px; border-radius:13px;
  background:linear-gradient(135deg,var(--ocm-p),var(--ocm-pk));
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
  box-shadow:0 4px 14px rgba(124,58,237,.25);
  animation:ocm-scale-in var(--ocm-slow) var(--ocm-spring) .1s both;
}
.ocm-header-title { font-size:15px; font-weight:800; color:var(--ocm-txt); }
.ocm-header-sub { font-size:12px; color:var(--ocm-txt3); margin-top:1px; }
.ocm-close {
  width:34px; height:34px; border-radius:10px;
  border:1.5px solid var(--ocm-border); background:transparent;
  cursor:pointer; font-size:20px; color:var(--ocm-txt2);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--ocm-fast), color var(--ocm-fast), transform var(--ocm-fast) var(--ocm-spring), border-color var(--ocm-fast);
}
.ocm-close:hover { background:var(--ocm-rbg); color:var(--ocm-r); transform:scale(1.1) rotate(8deg); border-color:#fca5a5; }

/* ── Body ────────────────────────────────────────────────────────────────── */
.ocm-body { padding:22px; flex:1; }

/* ── Step Bar ────────────────────────────────────────────────────────────── */
.ocm-steps {
  display:flex; align-items:center; margin-bottom:28px;
  animation:ocm-fade-in var(--ocm-dur) var(--ocm-ease) .08s both;
}
.ocm-step-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; }
.ocm-step-dot {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
  transition:background var(--ocm-dur) var(--ocm-ease),
             color var(--ocm-dur) var(--ocm-ease),
             transform var(--ocm-dur) var(--ocm-spring),
             box-shadow var(--ocm-dur) var(--ocm-ease);
}
.ocm-step-dot.pending { background:#f3f4f6; color:var(--ocm-txt3); border:2px solid var(--ocm-border); }
.ocm-step-dot.active  {
  background:linear-gradient(135deg,var(--ocm-p),var(--ocm-p2));
  color:#fff; transform:scale(1.12);
  box-shadow:0 0 0 4px rgba(124,58,237,.15);
  animation:ocm-pulse-dot 2s infinite;
}
.ocm-step-dot.done {
  background:var(--ocm-g); color:#fff;
  animation:ocm-bounce-in .4s var(--ocm-spring) both;
}
.ocm-step-label {
  font-size:10px; font-weight:600; white-space:nowrap;
  transition:color var(--ocm-dur) var(--ocm-ease);
}
.ocm-step-label.pending { color:var(--ocm-txt3); }
.ocm-step-label.active  { color:var(--ocm-p); }
.ocm-step-label.done    { color:var(--ocm-g); }
.ocm-step-line {
  flex:1; height:2px; background:var(--ocm-border); margin:0 6px; margin-bottom:16px;
  transition:background .4s var(--ocm-ease);
  position:relative; overflow:hidden;
}
.ocm-step-line.done { background:var(--ocm-g); }
.ocm-step-line.done::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation:ocm-shimmer .6s var(--ocm-ease) both;
}

/* ── Step content animation ──────────────────────────────────────────────── */
.ocm-step-content { animation:ocm-slide-right var(--ocm-dur) var(--ocm-ease) both; }
.ocm-step-content.going-back { animation:ocm-slide-left var(--ocm-dur) var(--ocm-ease) both; }

/* ── Section titles ──────────────────────────────────────────────────────── */
.ocm-section-title {
  font-size:15px; font-weight:800; color:var(--ocm-txt);
  margin-bottom:6px;
  animation:ocm-fade-up var(--ocm-dur) var(--ocm-ease) .05s both;
}
.ocm-section-sub {
  font-size:13px; color:var(--ocm-txt2); margin-bottom:20px; line-height:1.55;
  animation:ocm-fade-up var(--ocm-dur) var(--ocm-ease) .1s both;
}

/* ── Option cards ────────────────────────────────────────────────────────── */
.ocm-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.ocm-option-card {
  background:var(--ocm-card);
  border:2px solid var(--ocm-border);
  border-radius:var(--ocm-rad);
  padding:16px 14px; text-align:center;
  cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  transition:border-color var(--ocm-dur) var(--ocm-ease),
             background var(--ocm-dur) var(--ocm-ease),
             transform var(--ocm-dur) var(--ocm-spring),
             box-shadow var(--ocm-dur) var(--ocm-ease);
  position:relative; overflow:hidden;
}
.ocm-option-card:hover {
  border-color:var(--ocm-p2);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(124,58,237,.12);
}
.ocm-option-card:active { transform:scale(.97); }
.ocm-option-card.sel {
  border-color:var(--ocm-p);
  background:var(--ocm-pbg);
  box-shadow:0 0 0 3px rgba(124,58,237,.1), 0 8px 24px rgba(124,58,237,.12);
}
.ocm-option-card.sel-g {
  border-color:var(--ocm-g);
  background:var(--ocm-gbg);
  box-shadow:0 0 0 3px rgba(16,185,129,.1);
}
.ocm-check {
  position:absolute; top:8px; right:8px;
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
  animation:ocm-bounce-in .35s var(--ocm-spring) both;
}
.ocm-check.purple { background:var(--ocm-p); color:#fff; }
.ocm-check.green  { background:var(--ocm-g); color:#fff; }
.ocm-card-name { font-size:13px; font-weight:700; color:var(--ocm-txt); }
.ocm-card-desc { font-size:11px; color:var(--ocm-txt3); line-height:1.4; }
.ocm-card-price { font-size:12px; font-weight:800; color:var(--ocm-p); }
.ocm-card-price.green { color:var(--ocm-g); }

/* ── Method cards ────────────────────────────────────────────────────────── */
.ocm-method-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-bottom:20px; }
.ocm-method-card {
  background:var(--ocm-card);
  border:2px solid var(--ocm-border);
  border-radius:var(--ocm-rad);
  padding:20px 12px; text-align:center;
  cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:border-color var(--ocm-dur) var(--ocm-ease),
             transform var(--ocm-dur) var(--ocm-spring),
             box-shadow var(--ocm-dur);
}
.ocm-method-card:hover { border-color:var(--ocm-p2); transform:translateY(-3px); box-shadow:0 10px 28px rgba(124,58,237,.14); }
.ocm-method-card:active { transform:scale(.96); }
.ocm-method-card .icon { font-size:28px; transition:transform var(--ocm-dur) var(--ocm-spring); }
.ocm-method-card:hover .icon { transform:scale(1.2) rotate(-5deg); }
.ocm-method-card strong { font-size:13px; font-weight:700; color:var(--ocm-txt); }
.ocm-method-card span { font-size:11px; color:var(--ocm-txt3); }

/* ── Rx table ────────────────────────────────────────────────────────────── */
.ocm-rx-table-wrap { overflow-x:auto; border-radius:var(--ocm-rad-sm); border:1.5px solid var(--ocm-border); margin-bottom:14px; }
.ocm-rx-table { width:100%; border-collapse:collapse; min-width:360px; }
.ocm-rx-table thead th { background:linear-gradient(180deg,var(--ocm-pbg),#fff); color:var(--ocm-p3); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; padding:10px 12px; border-bottom:1.5px solid var(--ocm-border); }
.ocm-rx-table tbody td { padding:8px 10px; border-bottom:1px solid #f3f4f6; }
.ocm-rx-table tbody tr:last-child td { border-bottom:none; }
.ocm-rx-table tbody tr:hover td { background:#faf9ff; }
.ocm-rx-input {
  width:80px; padding:6px 8px; border:1.5px solid var(--ocm-border);
  border-radius:8px; font-size:12px; text-align:center;
  font-family:inherit; color:var(--ocm-txt);
  transition:border-color var(--ocm-fast), box-shadow var(--ocm-fast), transform var(--ocm-fast) var(--ocm-spring);
  outline:none;
}
.ocm-rx-input:focus { border-color:var(--ocm-p2); box-shadow:0 0 0 3px rgba(124,58,237,.1); transform:scale(1.04); }
.ocm-rx-extras { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ocm-rx-extra-field label { display:block; font-size:11px; font-weight:600; color:var(--ocm-txt2); margin-bottom:4px; }
.ocm-rx-extra-field input, .ocm-rx-extra-field textarea {
  width:100%; padding:8px 10px; border:1.5px solid var(--ocm-border);
  border-radius:var(--ocm-rad-sm); font-size:12px; font-family:inherit;
  color:var(--ocm-txt); outline:none;
  transition:border-color var(--ocm-fast), box-shadow var(--ocm-fast);
}
.ocm-rx-extra-field input:focus, .ocm-rx-extra-field textarea:focus { border-color:var(--ocm-p2); box-shadow:0 0 0 3px rgba(124,58,237,.1); }
.ocm-back-link {
  background:none; border:none; color:var(--ocm-p); font-size:12px; font-weight:600;
  cursor:pointer; padding:0; font-family:inherit; margin-bottom:16px;
  display:inline-flex; align-items:center; gap:4px;
  transition:gap var(--ocm-fast) var(--ocm-spring);
}
.ocm-back-link:hover { gap:8px; }

/* ── File upload ─────────────────────────────────────────────────────────── */
.ocm-upload-area {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:36px 24px; border:2px dashed var(--ocm-border);
  border-radius:var(--ocm-rad); cursor:pointer; text-align:center;
  transition:border-color var(--ocm-dur), background var(--ocm-dur), transform var(--ocm-dur) var(--ocm-spring);
  background:#fafafa;
}
.ocm-upload-area:hover { border-color:var(--ocm-p2); background:var(--ocm-pbg); transform:scale(1.01); }
.ocm-upload-icon { font-size:36px; transition:transform var(--ocm-dur) var(--ocm-spring); }
.ocm-upload-area:hover .ocm-upload-icon { transform:translateY(-4px) scale(1.1); }
.ocm-upload-area strong { font-size:13px; font-weight:700; color:var(--ocm-txt); }
.ocm-upload-area span { font-size:11px; color:var(--ocm-txt3); }
.ocm-upload-success {
  text-align:center; padding:24px;
  background:var(--ocm-gbg); border:2px solid #a7f3d0;
  border-radius:var(--ocm-rad);
  animation:ocm-scale-in var(--ocm-dur) var(--ocm-spring) both;
}
.ocm-upload-success strong { font-size:13px; font-weight:700; color:#065f46; display:block; margin:8px 0 4px; }
.ocm-remove-btn {
  background:none; border:none; font-size:11px; color:var(--ocm-txt3);
  cursor:pointer; font-family:inherit; text-decoration:underline;
  transition:color var(--ocm-fast);
}
.ocm-remove-btn:hover { color:var(--ocm-r); }

/* ── Later box ───────────────────────────────────────────────────────────── */
.ocm-later-box {
  text-align:center; padding:32px; background:var(--ocm-pbg);
  border-radius:var(--ocm-rad); border:1.5px solid #ddd6fe;
  animation:ocm-scale-in var(--ocm-dur) var(--ocm-spring) both;
}
.ocm-later-box .icon { font-size:40px; display:block; margin-bottom:12px; animation:ocm-bounce-in .5s var(--ocm-spring) .1s both; }
.ocm-later-box strong { font-size:14px; font-weight:700; color:var(--ocm-p3); display:block; margin-bottom:8px; }
.ocm-later-box p { font-size:13px; color:var(--ocm-txt2); }

/* ── Review ──────────────────────────────────────────────────────────────── */
.ocm-review { display:flex; flex-direction:column; gap:14px; }
.ocm-review-section {
  background:#fafafa; border-radius:var(--ocm-rad-sm);
  border:1.5px solid var(--ocm-border); overflow:hidden;
  animation:ocm-fade-up var(--ocm-dur) var(--ocm-ease) both;
}
.ocm-review-section-title {
  font-size:12px; font-weight:700; padding:10px 14px;
  background:linear-gradient(180deg,#f3f4f6,#f9f9f9);
  border-bottom:1px solid var(--ocm-border);
}
.ocm-review-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 14px; border-bottom:1px solid #f3f4f6; font-size:13px;
}
.ocm-review-row:last-child { border-bottom:none; }
.ocm-review-row-key { color:var(--ocm-txt2); }
.ocm-review-row-val { font-weight:600; color:var(--ocm-txt); }
.ocm-pricing-total {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; background:linear-gradient(135deg,var(--ocm-pbg),#fff);
  border-top:2px solid var(--ocm-border); font-size:13px; font-weight:700; color:var(--ocm-txt);
}
.ocm-pricing-total-val { font-size:18px; font-weight:800; color:var(--ocm-p); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ocm-footer {
  padding:16px 22px; border-top:1.5px solid var(--ocm-border);
  position:sticky; bottom:0; background:var(--ocm-card);
  border-radius:0 0 22px 22px; z-index:10;
  backdrop-filter:blur(8px);
}
.ocm-footer-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ocm-price-display { line-height:1.2; }
.total-label { font-size:11px; color:var(--ocm-txt3); font-weight:500; }
.total-amount { font-size:22px; font-weight:800; color:var(--ocm-p); transition:transform var(--ocm-dur) var(--ocm-spring); }
.total-amount.bump { animation:ocm-bounce-in .35s var(--ocm-spring) both; }
.total-breakdown { font-size:11px; color:var(--ocm-txt3); margin-top:2px; }
.ocm-footer-btns { display:flex; gap:10px; align-items:center; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ocm-btn {
  padding:10px 22px; border-radius:10px;
  font-size:13px; font-weight:700; font-family:inherit;
  cursor:pointer; border:none; outline:none;
  transition:transform var(--ocm-fast) var(--ocm-spring),
             box-shadow var(--ocm-dur),
             background var(--ocm-fast),
             opacity var(--ocm-fast);
  white-space:nowrap;
}
.ocm-btn:active { transform:scale(.95) !important; }
.ocm-btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }
.ocm-btn-primary {
  background:linear-gradient(135deg,var(--ocm-p),var(--ocm-p2));
  color:#fff; box-shadow:0 4px 14px rgba(124,58,237,.3);
}
.ocm-btn-primary:hover:not(:disabled) {
  background:linear-gradient(135deg,var(--ocm-p3),var(--ocm-p));
  box-shadow:0 6px 20px rgba(124,58,237,.4); transform:translateY(-1px);
}
.ocm-btn-secondary { background:#f3f0ff; color:var(--ocm-p); border:1.5px solid #ddd6fe; }
.ocm-btn-secondary:hover:not(:disabled) { background:#ede9fe; transform:translateY(-1px); }
.ocm-btn-success {
  background:linear-gradient(135deg,var(--ocm-g),#059669);
  color:#fff; box-shadow:0 4px 14px rgba(16,185,129,.3);
}
.ocm-btn-success:hover:not(:disabled) { box-shadow:0 6px 20px rgba(16,185,129,.4); transform:translateY(-1px); }

/* ── Error ───────────────────────────────────────────────────────────────── */
.ocm-error {
  background:var(--ocm-rbg); border:1.5px solid #fca5a5;
  color:#991b1b; border-radius:var(--ocm-rad-sm);
  padding:11px 14px; font-size:13px; font-weight:500;
  margin-bottom:16px;
  animation:ocm-fade-up var(--ocm-dur) var(--ocm-ease) both;
}

/* ── Audio bar ───────────────────────────────────────────────────────────── */
.ocm-audio-bar {
  background:linear-gradient(135deg,var(--ocm-pbg),#fff);
  border:1.5px solid #ddd6fe;
  border-radius:var(--ocm-rad-sm); padding:12px 16px;
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
  animation:ocm-fade-up var(--ocm-dur) var(--ocm-ease) .1s both;
}
.ocm-audio-bar .icon { font-size:22px; animation:ocm-bounce-in .5s var(--ocm-spring) .2s both; }
.ocm-audio-bar .label { font-size:11px; font-weight:700; color:var(--ocm-p3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.ocm-audio-bar audio { width:100%; height:32px; }

/* ── CTA Button (injected) ───────────────────────────────────────────────── */
#ocm-cta-btn {
  transition:transform 180ms var(--ocm-spring), box-shadow 220ms var(--ocm-ease), opacity 150ms !important;
}
#ocm-cta-btn:hover { transform:translateY(-2px) scale(1.02) !important; }
#ocm-cta-btn:active { transform:scale(.97) !important; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:540px){
  .ocm-box { border-radius:16px 16px 0 0; max-height:94vh; margin:auto 0 0; }
  .ocm-overlay { align-items:flex-end; padding:0; }
  .ocm-card-grid { grid-template-columns:1fr 1fr; }
  .ocm-method-grid { grid-template-columns:1fr; }
  .ocm-header { padding:14px 16px; }
  .ocm-body { padding:16px; }
  .ocm-footer { padding:12px 16px; }
  .ocm-step-label { display:none; }
}
@media(max-width:360px){
  .ocm-card-grid { grid-template-columns:1fr; }
}

/* ── Performance: respect reduced-motion preference ──────────────────────── */
@media(prefers-reduced-motion:reduce){
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}