:root{
    --ws-bg:#f6f8fb;
    --ws-card:#ffffff;
    --ws-border:rgba(15,23,42,.10);
    --ws-text:#0f172a;
    --ws-muted:#64748b;
    --ws-accent:#99c000;
  }
  body{
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--ws-bg);
    color: var(--ws-text);
    margin:0;
  }

  /* hide legacy divider gifs */
  img[src*="div.gif"]{display:none!important;}

  /* Modern header/footer (inc_header.php / inc_footer.php) */
  .ws-header, .ws-footer{
    background: transparent !important;
    padding: 0 !important;
  }
  .ws-header-inner{
    width:min(1100px, calc(100% - 32px));
    margin:16px auto 16px auto;
    background: linear-gradient(135deg, #0b1220, #111827);
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    padding:14px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow:0 10px 28px rgba(2,6,23,.18);
  }
  .ws-brand{display:flex; align-items:center; gap:14px;}
  .ws-logo{height:44px; width:auto;}
  .ws-title-main{color:#fff; font-weight:600; letter-spacing:.2px;}
  .ws-title-sub{color:rgba(255,255,255,.65); font-size:12px; margin-top:2px;}
  .ws-footer-inner{
    width:min(1100px, calc(100% - 32px));
    margin: 0 auto 28px auto;
    background: var(--ws-card);
    border:1px solid var(--ws-border);
    border-radius:14px;
    padding:14px 18px;
    box-shadow:0 10px 24px rgba(2,6,23,.06);
  }

  /* form control styling without changing markup */
  .textfield, select.textfield, textarea.textfield{
    border:1px solid rgba(15,23,42,.14) !important;
    border-radius:10px !important;
    padding:8px 10px !important;
    background:#fff !important;
    outline:none !important;
    box-shadow:none !important;
    font-size: 14px;
  }
  select.textfield{ height:44px !important; }
  textarea.textfield{ width:100% !important; min-height: 80px; }
  .formerror{
    border:1px solid rgba(220,38,38,.55) !important;
    background: rgba(220,38,38,.04) !important;
    border-radius:10px !important;
    padding:8px 10px !important;
    font-size: 14px;
  }

  /* status banner */
  #msg{
    width:min(1100px, calc(100% - 32px));
    margin: 10px auto 10px auto;
    padding: 8px 12px;
    border-radius: 12px;
    border:1px solid rgba(14,116,144,.25);
    background: rgba(14,116,144,.08);
    color:#0e7490;
    font-weight: 500;
    display:none;
  }

  /* New grid layout */
  .ws-page{
    width:min(1100px, calc(100% - 32px));
    margin: 0 auto 28px;
  }

  .ws-form{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .ws-card{
    background: var(--ws-card);
    border:1px solid var(--ws-border);
    border-radius:14px;
    box-shadow:0 8px 22px rgba(2,6,23,.05);
    padding:12px 14px;
  }

  .ws-card-h{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(15,23,42,.06);
    margin-bottom:10px;
  }

  .ws-card-h h2{
    font-size:16px;
    margin:0;
    font-weight:600;
  }

  .ws-sub{font-size:12px;color:var(--ws-muted)}

  .ws-grid{
    display:grid;
    gap:10px 12px;
  }

  .ws-grid-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ws-grid-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }

  @media (max-width: 900px){
    .ws-grid-3,.ws-grid-2{ grid-template-columns:1fr; }
  }

  .ws-field label{
    display:block;
    font-size:12px;
    color:var(--ws-muted);
    margin-bottom:4px;
  }

  .ws-inline-3{
    display:grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap:8px;
  }

  .ws-submitbar{
    position:sticky;
    bottom:14px;
    background:#0b1220;
    border-radius:999px;
    padding:10px 12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 10px 24px rgba(2,6,23,.24);
    z-index: 10;
  }

  .ws-btn{
    background: var(--ws-accent);
    border:0;
    color:#0b1220;
    font-weight:700;
    border-radius:999px;
    padding:10px 14px;
    cursor:pointer;
  }

  /* sticky total pill (kept for your existing JS) */
  #totalPrice{
    margin-top: 10px;
    width: fit-content;
    background: #0b1220;
    color: #fff;
    border-radius: 999px;
    padding: 10px 16px;
    box-shadow: 0 10px 24px rgba(2, 6, 23, .24);
    font-weight: 600;
    letter-spacing: .2px;
  }

  /* wifi panel */
  #wifi_name{
    margin-top:10px;
    padding:10px 12px;
    border:1px solid rgba(15,23,42,.10);
    border-radius:12px;
    background: rgba(15,23,42,.02);
  }
  #wifi_status, #passwordStatus{ font-size:12px; margin-top:6px; }
  .valid{ color: green; }
  .invalid{ color: red; }

  a{ color: var(--ws-accent) !important; text-decoration:none !important; }
  a:hover{ text-decoration: underline !important; }

/* Required badge (replaces inline red asterisks) */
.ws-required{
  background: rgba(220,38,38,.12);
  color: #dc2626;
  border-radius: 999px;
  font-size: 10px;
  padding: 2px 6px;
  font-weight: 700;
  line-height: 1;
}

/* Tighter, nicer labels */
.ws-field label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size: 12px;
  color: var(--ws-muted);
  margin-bottom: 4px;
}

/* Ensure inputs never get "scrunched" */
.ws-field{min-width:0;}
.textfield, select.textfield, textarea.textfield, .formerror{width:100% !important;}

/* Slightly tighter card spacing */
.ws-card{padding:14px 16px;}
.ws-form{gap:12px;}

/* =========================
   PRINT: ultra-compact receipt
   ========================= */
@media print {

  @page {
    size: Letter;
    margin: 0.4in;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body.ws-app {
    background: #ffffff !important;
  }

  /* ===== Header: logo only ===== */
  .ws-header {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: static !important;
  }

  .ws-header-inner {
    padding: 0 0 6px 0 !important;
    justify-content: flex-start !important;
  }

  /* Hide everything except logo */
  .ws-header .ws-title,
  .ws-header .ws-header-right,
  .ws-header nav,
  .ws-header a:not(.ws-logo-link) {
    display: none !important;
  }

  .ws-logo {
    height: 36px !important;
    width: auto !important;
  }

  /* Hide non-print UI */
  .no-print,
  .btn,
  button,
  .ws-actions {
    display: none !important;
  }

  /* ===== Overall compaction ===== */
  html, body {
    font-size: 10pt !important;
    line-height: 1.1 !important;
  }

  .ws-main {
    padding: 0 !important;
  }

  .ws-card {
    box-shadow: none !important;
    border: 1px solid #000 !important;
    padding: 8px !important;
    margin-top: 4px !important;
  }

  /* ===== Two-column receipt flow ===== */
  .ws-receipt .ws-card {
    column-count: 2;
    column-gap: 0.3in;
  }

  /* Keep headers & dividers full width */
  .ws-card-h,
  hr {
    column-span: all;
    margin: 6px 0 !important;
  }

  /* ===== Collapsed label + value ===== */
  .ws-field {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin-bottom: 2px !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .ws-field label {
    font-size: 9pt !important;
    font-weight: 600 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .ws-field label::after {
    content: ":" !important;
    margin-left: 2px;
  }

  .form-control-plaintext {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 9.5pt !important;
    white-space: normal !important;
  }

  /* Tighten grids */
  .ws-grid {
    gap: 4px !important;
  }
}