/* ════════════════════════════════════════════════════════════
   POSMini — site.css
   Dark (Black+Orange) default  |  Light (White+Orange) toggle
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&family=Inter:wght@400;600;700;800;900&display=swap');

/* ── DARK THEME (default) ──────────────────────────────────── */
[data-bs-theme="dark"] {
  --pm-accent:       #FF6B00;
  --pm-accent2:      #FF9A40;
  --pm-accent-rgb:   255,107,0;
  --pm-bg:           #0A0A0A;
  --pm-surface:      #181818;
  --pm-surface2:     #222222;
  --pm-border:       #2E2E2E;
  --pm-text:         #F5F5F5;
  --pm-text-muted:   #A0A0A0;
  --pm-gradient:     linear-gradient(135deg,#FF6B00,#FF9A40);
  --pm-glow:         0 0 32px rgba(255,107,0,.22);
  --pm-card-bg:      #181818;
  --pm-input-bg:     #1E1E1E;
  --pm-navbar-bg:    rgba(10,10,10,.92);

  /* Bootstrap overrides */
  --bs-body-bg:      #0A0A0A;
  --bs-body-color:   #F5F5F5;
  --bs-border-color: #2E2E2E;
}

/* ── LIGHT THEME ───────────────────────────────────────────── */
[data-bs-theme="light"] {
  --pm-accent:       #E55A00;
  --pm-accent2:      #FF6B00;
  --pm-accent-rgb:   229,90,0;
  --pm-bg:           #F8F9FA;
  --pm-surface:      #FFFFFF;
  --pm-surface2:     #F1F3F5;
  --pm-border:       #DEE2E6;
  --pm-text:         #1A1A1A;
  --pm-text-muted:   #6C757D;
  --pm-gradient:     linear-gradient(135deg,#E55A00,#FF6B00);
  --pm-glow:         0 0 32px rgba(229,90,0,.15);
  --pm-card-bg:      #FFFFFF;
  --pm-input-bg:     #FFFFFF;
  --pm-navbar-bg:    rgba(255,255,255,.95);

  --bs-body-bg:      #F8F9FA;
  --bs-body-color:   #1A1A1A;
  --bs-border-color: #DEE2E6;
}

/* ── BASE ─────────────────────────────────────────────────── */
html, body { font-family:'Sarabun','Inter',sans-serif; background:var(--pm-bg); color:var(--pm-text); scroll-behavior:smooth; }

/* ── NAVBAR ───────────────────────────────────────────────── */
.pm-navbar {
  background:var(--pm-navbar-bg) !important;
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--pm-border);
  transition:background .3s;
}
.pm-brand { display:flex; align-items:center; gap:9px; font-size:20px; font-weight:800; text-decoration:none; color:var(--pm-text) !important; }
.pm-logo-icon { width:30px; height:30px; border-radius:8px; background:var(--pm-gradient); display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; font-weight:900; flex-shrink:0; }
.pm-accent-text { color:var(--pm-accent) !important; }
.pm-nav-link { color:var(--pm-text-muted) !important; font-size:14px; font-weight:500; transition:color .2s; padding:6px 10px !important; }
.pm-nav-link:hover { color:var(--pm-text) !important; }
.pm-theme-toggle { background:transparent; border:1.5px solid var(--pm-border); color:var(--pm-text-muted); border-radius:8px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.pm-theme-toggle:hover { border-color:var(--pm-accent); color:var(--pm-accent); }

/* ── BUTTONS ─────────────────────────────────────────────── */
.pm-btn-primary {
  background:var(--pm-gradient); color:#fff !important; border:none;
  font-weight:700; border-radius:10px; transition:all .25s;
  box-shadow:var(--pm-glow);
}
.pm-btn-primary:hover { opacity:.88; transform:translateY(-1px); }
.pm-btn-primary:disabled { opacity:.5; transform:none; cursor:not-allowed; }
.pm-btn-outline { border:1.5px solid var(--pm-border); background:transparent; color:var(--pm-text); font-weight:600; border-radius:10px; transition:all .2s; }
.pm-btn-outline:hover { border-color:var(--pm-accent); color:var(--pm-accent); }
.pm-btn-lg { padding:12px 26px; font-size:15px; }

/* ── HERO ─────────────────────────────────────────────────── */
.pm-hero { padding:80px 0 60px; background:var(--pm-bg); }
.pm-hero-title { font-size:clamp(34px,5vw,54px); font-weight:900; line-height:1.15; letter-spacing:-1px; margin-bottom:18px; }
.pm-gradient-text { background:var(--pm-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.pm-hero-sub { color:var(--pm-text-muted); font-size:16px; line-height:1.75; margin-bottom:32px; max-width:480px; }
.pm-badge-pill { display:inline-flex; align-items:center; gap:7px; background:rgba(var(--pm-accent-rgb),.1); border:1px solid rgba(var(--pm-accent-rgb),.25); border-radius:999px; padding:5px 14px; font-size:12px; font-weight:600; color:var(--pm-accent); }
.pm-badge-dot { width:8px; height:8px; border-radius:50%; background:var(--pm-accent); animation:pulse 1.8s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.3} }

/* Slot banner */
.pm-slot-banner { display:flex; align-items:center; gap:16px; background:var(--pm-surface2); border:1px solid var(--pm-border); border-radius:14px; padding:16px 22px; margin-top:28px; }
.pm-slot-icon { font-size:20px; flex-shrink:0; }
.pm-slot-count { font-size:22px; font-weight:900; color:var(--pm-accent); white-space:nowrap; }
.pm-slot-total { font-size:12px; font-weight:500; color:var(--pm-text-muted); }
.pm-progress { background:var(--pm-border) !important; border-radius:999px !important; }
.pm-progress-bar { background:var(--pm-gradient) !important; border-radius:999px !important; transition:width .6s ease !important; }

/* ── PHONE MOCKUP ─────────────────────────────────────────── */
.pm-phone-glow { position:absolute; width:280px; height:280px; border-radius:50%; background:var(--pm-accent); opacity:.1; filter:blur(70px); pointer-events:none; }
.pm-phone { position:relative; z-index:1; width:240px; height:460px; border-radius:34px; background:var(--pm-surface2); border:2px solid var(--pm-border); box-shadow:var(--pm-glow),0 30px 60px rgba(0,0,0,.4); overflow:hidden; }
.pm-phone-notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:74px; height:26px; background:var(--pm-bg); border-radius:0 0 16px 16px; z-index:2; }
.pm-phone-screen { width:100%; height:100%; background:var(--pm-bg); display:flex; flex-direction:column; }
.pm-ps-header { background:var(--pm-surface); padding:32px 14px 10px; border-bottom:1px solid var(--pm-border); }
.pm-ps-title { font-size:11px; font-weight:700; color:var(--pm-text); }
.pm-ps-badge { background:var(--pm-gradient); color:#fff; font-size:9px; padding:2px 8px; border-radius:999px; font-weight:700; }
.pm-ps-total { font-size:20px; font-weight:800; color:var(--pm-accent); margin-top:3px; }
.pm-ps-body { flex:1; padding:10px; display:flex; flex-direction:column; gap:7px; overflow:hidden; }
.pm-ps-item { background:var(--pm-surface); border-radius:7px; padding:7px 9px; display:flex; justify-content:space-between; align-items:center; border-left:3px solid var(--pm-accent); }
.pm-psi-name { font-size:10px; font-weight:600; color:var(--pm-text); }
.pm-psi-qty { font-size:9px; color:var(--pm-text-muted); }
.pm-psi-price { font-size:11px; font-weight:700; color:var(--pm-accent); }
.pm-ps-footer { padding:9px 10px; border-top:1px solid var(--pm-border); }
.pm-mini-card { position:absolute; right:-20px; top:70px; width:160px; height:120px; border-radius:12px; background:var(--pm-surface2); border:2px solid var(--pm-border); box-shadow:var(--pm-glow); padding:12px; z-index:0; overflow:hidden; }
.pm-mini-bars { display:flex; align-items:flex-end; gap:4px; height:50px; }
.pm-mini-bar { flex:1; background:var(--pm-gradient); border-radius:3px 3px 0 0; opacity:.75; }

/* ── SECTIONS ─────────────────────────────────────────────── */
.pm-section { padding:80px 0; }
.pm-section-alt { background:var(--pm-surface); }
.pm-section-tag { display:inline-block; background:rgba(var(--pm-accent-rgb),.1); border:1px solid rgba(var(--pm-accent-rgb),.25); border-radius:999px; padding:4px 14px; font-size:11px; font-weight:700; color:var(--pm-accent); letter-spacing:.5px; }
.pm-section-title { font-size:clamp(26px,3.5vw,38px); font-weight:800; letter-spacing:-.5px; margin:10px 0 10px; }
.pm-section-sub { color:var(--pm-text-muted); font-size:15px; line-height:1.7; max-width:520px; }

/* ── FEATURE CARDS ────────────────────────────────────────── */
.pm-feat-card { background:var(--pm-card-bg); border:1px solid var(--pm-border); border-radius:16px; padding:24px; transition:all .25s; }
.pm-feat-card:hover { border-color:var(--pm-accent); transform:translateY(-3px); box-shadow:var(--pm-glow); }
.pm-feat-icon { font-size:26px; margin-bottom:14px; }
.pm-tag { display:inline-flex; align-items:center; font-size:11px; padding:3px 9px; border-radius:999px; font-weight:600; background:rgba(var(--pm-accent-rgb),.1); color:var(--pm-accent); border:1px solid rgba(var(--pm-accent-rgb),.25); }

/* ── STEPS ────────────────────────────────────────────────── */
.pm-step-num { width:60px; height:60px; border-radius:50%; background:var(--pm-gradient); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:900; color:#fff; box-shadow:var(--pm-glow); }

/* ── PERK LIST ────────────────────────────────────────────── */
.pm-perk-list li { padding:6px 0; font-size:15px; color:var(--pm-text-muted); }

/* ── FORM CARD ────────────────────────────────────────────── */
.pm-form-card { background:var(--pm-card-bg); border:1px solid var(--pm-border); border-radius:18px; padding:32px; }
.pm-form-label { font-size:12px; font-weight:600; color:var(--pm-text-muted); margin-bottom:5px; }
.pm-input { background:var(--pm-input-bg) !important; border:1.5px solid var(--pm-border) !important; color:var(--pm-text) !important; border-radius:10px !important; transition:border-color .2s !important; }
.pm-input:focus { border-color:var(--pm-accent) !important; box-shadow:0 0 0 3px rgba(var(--pm-accent-rgb),.12) !important; }
.pm-input option { background:var(--pm-surface); color:var(--pm-text); }

/* Alerts */
.pm-alert-success { background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); color:#10B981; border-radius:10px; }
.pm-alert-danger  { background:rgba(239,68,68,.1);  border:1px solid rgba(239,68,68,.3);  color:#ef4444; border-radius:10px; }
.pm-alert-warning { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3); color:#f59e0b; border-radius:10px; }

/* ── TABLE ────────────────────────────────────────────────── */
.pm-table { color:var(--pm-text) !important; border-color:var(--pm-border) !important; }
.pm-table th { background:var(--pm-surface) !important; color:var(--pm-text-muted) !important; font-size:11px; font-weight:700; letter-spacing:.3px; border-color:var(--pm-border) !important; }
.pm-table td { border-color:var(--pm-border) !important; color:var(--pm-text-muted); vertical-align:middle; font-size:13px; }
.pm-table td:first-child { color:var(--pm-text); }
.pm-table tbody tr:hover td { background:var(--pm-surface2) !important; }

/* ── FOOTER ───────────────────────────────────────────────── */
.pm-footer { background:var(--pm-surface); border-top:1px solid var(--pm-border); }
.pm-footer-link { color:var(--pm-text-muted); text-decoration:none; transition:color .2s; }
.pm-footer-link:hover { color:var(--pm-accent); }
.pm-border { border-color:var(--pm-border) !important; }

/* ── MISC ─────────────────────────────────────────────────── */
.pm-text-muted { color:var(--pm-text-muted) !important; }
.pm-divider { border:none; border-top:1px solid var(--pm-border); margin:36px 0; }

/* ── AI SUPPORT WIDGET ─────────────────────────────────────── */
.pm-ai-support { position:fixed; right:18px; bottom:18px; z-index:1300; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.pm-ai-toggle { border:none; border-radius:999px; padding:10px 16px; font-size:13px; font-weight:700; background:var(--pm-gradient); color:#fff; box-shadow:var(--pm-glow); display:flex; align-items:center; gap:8px; }
.pm-ai-panel { width:min(370px,calc(100vw - 24px)); max-height:70vh; background:var(--pm-surface); border:1px solid var(--pm-border); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.35); display:flex; flex-direction:column; overflow:hidden; }
.pm-ai-head { display:flex; justify-content:space-between; align-items:flex-start; padding:12px 14px; border-bottom:1px solid var(--pm-border); background:var(--pm-surface2); }
.pm-ai-head small { display:block; color:var(--pm-text-muted); font-size:11px; }
.pm-ai-close { border:none; background:none; color:var(--pm-text-muted); font-size:16px; }
.pm-ai-register, .pm-ai-chat { padding:12px; }
.pm-ai-chat { display:flex; flex-direction:column; min-height:0; flex:1; }
.pm-ai-messages { border:1px solid var(--pm-border); border-radius:12px; background:var(--pm-bg); min-height:0; max-height:none; overflow:auto; overflow-x:hidden; padding:10px; margin-bottom:8px; display:flex; flex-direction:column; gap:8px; flex:1; }
.pm-ai-msg { font-size:13px; line-height:1.5; padding:9px 11px; border-radius:10px; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; }
.pm-ai-msg.user { align-self:flex-end; background:rgba(var(--pm-accent-rgb),.16); color:var(--pm-text); max-width:85%; }
.pm-ai-msg.bot { align-self:flex-start; background:var(--pm-surface2); color:var(--pm-text-muted); max-width:90%; }
.pm-ai-msg-time { font-size:10px; opacity:.7; margin-top:4px; }
.pm-ai-actions { display:flex; justify-content:flex-end; margin-bottom:8px; flex-shrink:0; }
.pm-ai-actions .pm-btn-outline { padding:5px 10px; font-size:12px; }
.pm-ai-input-row { display:flex; gap:8px; flex-shrink:0; }

@media (max-width: 575.98px) {
  .pm-ai-support { right:10px; bottom:10px; }
  .pm-ai-toggle span { display:none; }
  .pm-ai-toggle { width:48px; height:48px; border-radius:50%; justify-content:center; padding:0; }
}