/* F&IQ Menu — Restyled to match fandiq.com brand */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Inter:wght@400;500;600;700&display=swap');

/* ── Pull in base.css variables then override with F&IQ brand ── */

:root {
  /* F&IQ Brand */
  --color-primary: #C84F00;
  --color-primary-hover: #b04400;
  --color-primary-light: rgba(200,79,0,0.1);
  --color-charcoal: #1a1a1a;
  --color-charcoal-2: #242424;
  --color-charcoal-3: #2e2e2e;
  --color-warm-white: #f8f6f2;
  --color-off-white: #f2ede6;
  --color-border: #e0dbd3;
  --color-text: #1a1a1a;
  --color-text-muted: #5a5550;
  --color-text-faint: #9a9490;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
  --radius: 0.625rem;
  --radius-sm: 0.375rem;
  --shadow: 0 2px 12px rgba(26,26,26,0.08);
  --shadow-md: 0 8px 32px rgba(26,26,26,0.12);
  --ease: cubic-bezier(0.16,1,0.3,1);

  /* Map base.css vars to F&IQ brand */
  --color-bg: var(--color-warm-white);
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-overlay: var(--color-off-white);
  --color-border-subtle: var(--color-border);
  --color-text-primary: var(--color-charcoal);
  --color-text-secondary: var(--color-text-muted);
  --color-text-tertiary: var(--color-text-faint);
  --color-accent: var(--color-primary);
  --color-platinum-bg: var(--color-charcoal);
  --color-platinum-fg: #ffffff;
  --color-gold-bg: #fdf3dc;
  --color-gold-fg: #7a5200;
  --color-silver-bg: #eef0f4;
  --color-silver-fg: #4b5563;
  --color-decline-bg: var(--color-off-white);
  --color-decline-fg: var(--color-text-faint);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
}

/* Dark mode */
[data-theme="dark"] {
  --color-bg: var(--color-charcoal);
  --color-surface: #242424;
  --color-surface-raised: #2e2e2e;
  --color-surface-overlay: #1e1e1e;
  --color-border-subtle: rgba(255,255,255,0.08);
  --color-text-primary: #f8f6f2;
  --color-text-secondary: rgba(248,246,242,0.65);
  --color-text-tertiary: rgba(248,246,242,0.35);
  --color-platinum-bg: #3a3a3a;
  --color-gold-bg: #3a3220;
  --color-gold-fg: #e0b060;
  --color-silver-bg: #2a2e36;
  --color-silver-fg: #8090aa;
  --color-decline-bg: #1e1e1e;
  --color-decline-fg: rgba(248,246,242,0.3);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;}
body{
  font-family:var(--font-body);
  background:var(--color-bg);
  color:var(--color-text-primary);
  line-height:1.5;
  min-height:100dvh;
  transition:background .2s,color .2s;
}

/* ── APP WRAPPER ── */
.app-wrapper{
  max-width:1100px;
  margin:0 auto;
  padding:0 clamp(1rem,3vw,2rem) 3rem;
}

/* ── HEADER ── */
.app-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem 0;
  border-bottom:1px solid var(--color-border-subtle);
  margin-bottom:1.75rem;
  position:sticky;top:0;z-index:50;
  background:var(--color-bg);
  backdrop-filter:blur(12px);
}
.logo-area{display:flex;align-items:center;gap:.875rem;}
.logo-area img{height:40px;width:auto;}
.logo-text{line-height:1.15;}
.logo-brand{
  font-family:var(--font-display);
  font-size:1.25rem;font-weight:900;
  color:var(--color-text-primary);
  letter-spacing:-.02em;
}
.logo-brand span{color:var(--color-primary);}
.logo-tagline{
  font-size:.6875rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-text-tertiary);
}
.header-actions{display:flex;align-items:center;gap:.5rem;}

.btn-print{
  display:inline-flex;align-items:center;gap:.375rem;
  padding:.5rem 1rem;
  background:var(--color-primary);color:#fff;
  font-size:.8125rem;font-weight:600;
  border:none;border-radius:var(--radius-sm);cursor:pointer;
  transition:background .2s,box-shadow .2s;
}
.btn-print:hover{background:var(--color-primary-hover);box-shadow:0 4px 12px rgba(200,79,0,.35);}

.btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:none;cursor:pointer;
  border-radius:var(--radius-sm);
  color:var(--color-text-secondary);
  background:var(--color-surface-overlay);
  transition:background .15s,color .15s;
}
.btn-icon:hover{background:var(--color-border-subtle);color:var(--color-text-primary);}

/* ── DEAL INFO ── */
.deal-info{
  display:flex;gap:1rem;flex-wrap:wrap;
  background:var(--color-surface);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius);
  padding:1.25rem 1.5rem;
  margin-bottom:1.5rem;
  box-shadow:var(--shadow);
  align-items:flex-end;
}
.deal-field{display:flex;flex-direction:column;gap:.3rem;flex:1;min-width:120px;}
.deal-field label{
  font-size:.6875rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--color-text-tertiary);
}
.deal-field input,
.deal-field select{
  padding:.5rem .75rem;
  border:1.5px solid var(--color-border-subtle);
  border-radius:var(--radius-sm);
  font-size:.9375rem;font-family:var(--font-body);
  background:var(--color-bg);color:var(--color-text-primary);
  transition:border-color .15s,box-shadow .15s;
}
.deal-field input:focus,
.deal-field select:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(200,79,0,.12);
}
.term-field,.rate-field{flex:0 0 90px;}

/* ── MENU GRID ── */
.menu-grid{
  display:grid;
  grid-template-columns:1fr repeat(4, minmax(100px, 140px));
  background:var(--color-surface);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  margin-bottom:1.5rem;
}

/* Column headers */
.col-header{
  padding:.875rem .75rem;
  font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  border-bottom:2px solid var(--color-border-subtle);
}
.col-header.product-label{
  text-align:left;align-items:flex-start;
  font-size:.6875rem;
  color:var(--color-text-tertiary);
  background:var(--color-surface);
}
.col-header.platinum{background:var(--color-platinum-bg);color:var(--color-platinum-fg);}
.col-header.gold{background:var(--color-gold-bg);color:var(--color-gold-fg);}
.col-header.silver{background:var(--color-silver-bg);color:var(--color-silver-fg);}
.col-header.decline-col{background:var(--color-decline-bg);color:var(--color-decline-fg);}
.col-subtext{font-size:.625rem;font-weight:400;opacity:.7;text-transform:none;letter-spacing:0;}

/* Product rows */
.product-row{
  display:contents;
}
.product-cell{
  padding:.875rem .75rem;
  border-bottom:1px solid var(--color-border-subtle);
  display:flex;align-items:center;justify-content:center;
  background:var(--color-surface);
}
.product-cell.product-name{
  justify-content:flex-start;gap:.75rem;
  padding:.875rem 1rem;
}
.product-icon{
  width:32px;height:32px;flex-shrink:0;
  background:var(--color-primary-light);
  border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--color-primary);
}
.product-name-group{display:flex;flex-direction:column;gap:.25rem;}
.product-label-text{font-size:.875rem;font-weight:600;color:var(--color-text-primary);}
.product-desc{font-size:.6875rem;color:var(--color-text-tertiary);line-height:1.4;max-width:30ch;}

/* Price badge */
.price-badge{
  display:inline-flex;align-items:center;gap:.25rem;
  font-size:.75rem;font-weight:700;
  color:var(--color-primary);
  background:var(--color-primary-light);
  border:none;border-radius:var(--radius-sm);
  padding:.2rem .5rem;cursor:pointer;
  transition:background .15s;
}
.price-badge:hover{background:rgba(200,79,0,.18);}
.price-edit-icon{opacity:.6;}

/* Price edit input */
.price-edit-wrap{display:inline-flex;align-items:center;gap:.125rem;}
.price-dollar{font-size:.75rem;font-weight:700;color:var(--color-primary);}
.price-input{
  width:64px;padding:.15rem .375rem;
  border:1.5px solid var(--color-primary);
  border-radius:var(--radius-sm);
  font-size:.75rem;font-family:var(--font-body);
  background:var(--color-bg);color:var(--color-text-primary);
}
.price-input:focus{outline:none;box-shadow:0 0 0 2px rgba(200,79,0,.2);}

/* Check/exclude buttons */
.cell-content{display:flex;flex-direction:column;align-items:center;gap:.25rem;}
.product-check{
  width:28px;height:28px;border:none;cursor:pointer;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:background .15s,transform .1s;
}
.product-check:active{transform:scale(.9);}
.product-check.included{background:var(--color-primary);color:#fff;}
.product-check.excluded{
  background:var(--color-surface-overlay);
  color:var(--color-text-tertiary);
  border:1.5px solid var(--color-border-subtle);
}
.product-check.included:hover{background:var(--color-primary-hover);}
.product-check.excluded:hover{background:var(--color-border-subtle);}

.cell-price{font-size:.6875rem;font-weight:600;color:var(--color-text-secondary);}
.cell-price.hidden{display:none;}

.decline-cell{color:var(--color-text-faint);}

/* ── PAYMENT SUMMARY ── */
.payment-summary{
  display:grid;
  grid-template-columns:1fr repeat(4, minmax(100px, 140px));
  gap:0;
  margin-bottom:1.5rem;
}
.payment-spacer{grid-column:1;}
.payment-card{
  padding:1.25rem .75rem;text-align:center;cursor:pointer;
  border:2px solid transparent;border-radius:var(--radius);
  margin:.25rem;
  transition:all .2s var(--ease);
  background:var(--color-surface);
  box-shadow:var(--shadow);
}
.payment-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.payment-card.selected{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(200,79,0,.15);
}
.payment-card.platinum.selected{background:var(--color-charcoal);color:#fff;}
.payment-card-label{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);margin-bottom:.375rem;}
.payment-card-amount{font-family:var(--font-display);font-size:1.5rem;font-weight:900;letter-spacing:-.02em;color:var(--color-text-primary);}
.payment-card.selected .payment-card-amount{color:var(--color-primary);}
.payment-card-detail{font-size:.6875rem;color:var(--color-text-tertiary);margin-top:.25rem;}
.payment-card-base{font-size:.6875rem;color:var(--color-text-faint);margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-border-subtle);}

/* ── SELECTION BANNER ── */
.selection-banner{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;
  background:var(--color-primary);color:#fff;
  border-radius:var(--radius);
  margin-bottom:1.5rem;
  opacity:0;transform:translateY(-8px);
  transition:opacity .25s,transform .25s;
  pointer-events:none;
}
.selection-banner.visible{opacity:1;transform:none;pointer-events:auto;}
.selection-text{font-weight:700;font-size:.9375rem;}
.selection-detail{font-size:.8125rem;opacity:.85;margin-top:.125rem;}
.btn-reset{
  padding:.375rem .875rem;
  background:rgba(255,255,255,.2);color:#fff;
  border:1px solid rgba(255,255,255,.4);
  border-radius:var(--radius-sm);font-size:.8125rem;font-weight:600;cursor:pointer;
  transition:background .15s;flex-shrink:0;
}
.btn-reset:hover{background:rgba(255,255,255,.3);}

/* ── SIGN-OFF ── */
.sign-off{
  background:var(--color-surface);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius);
  padding:1.75rem;
  box-shadow:var(--shadow);
}
.sign-off-title{
  font-family:var(--font-display);
  font-size:1.125rem;font-weight:900;
  letter-spacing:-.01em;
  color:var(--color-text-primary);
  margin-bottom:.375rem;
}
.sign-off-subtitle{font-size:.8125rem;color:var(--color-text-tertiary);margin-bottom:1.25rem;}
.sign-off-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1.5rem;}
.sign-off-option{
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-sm);
  padding:1rem;
  background:var(--color-surface-overlay);
}
.sign-off-label{
  font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--color-text-secondary);
  margin-bottom:.375rem;
}
.sign-off-label.platinum{color:var(--color-charcoal);}
.sign-off-label.gold{color:var(--color-gold-fg);}
.sign-off-label.silver{color:var(--color-silver-fg);}
.sign-off-label.decline{color:var(--color-text-faint);}
.sign-off-desc{font-size:.6875rem;color:var(--color-text-tertiary);margin-bottom:.875rem;line-height:1.4;}
.sign-off-line{display:flex;align-items:flex-end;gap:.5rem;font-size:.6875rem;color:var(--color-text-tertiary);font-weight:600;}
.sign-off-blank{flex:1;border-bottom:1px solid var(--color-border-subtle);height:1rem;}
.sign-off-signatures{display:flex;gap:3rem;}
.sig-field{flex:1;display:flex;flex-direction:column;gap:.5rem;font-size:.75rem;color:var(--color-text-tertiary);}
.sig-field.sig-date{flex:0 0 140px;}
.sig-line{height:1px;background:var(--color-border-subtle);}

/* ── FOOTER ── */
.app-footer{
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--color-border-subtle);
  text-align:center;
  font-size:.75rem;
  color:var(--color-text-faint);
}
.app-footer a{color:var(--color-primary);text-decoration:none;}
.app-footer a:hover{text-decoration:underline;}

/* ── PRINT ── */
@media print{
  .app-header,.header-actions{display:none!important;}
  .selection-banner{display:none!important;}
  body{background:#fff;color:#000;}
}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .menu-grid{grid-template-columns:1fr repeat(2,1fr);}
  .col-header.decline-col,.product-cell:last-child,.payment-card.decline{display:none;}
  .payment-summary{grid-template-columns:repeat(3,1fr);}
  .payment-spacer{display:none;}
  .sign-off-grid{grid-template-columns:repeat(2,1fr);}
  .sign-off-signatures{flex-direction:column;gap:1.5rem;}
  .sig-field.sig-date{flex:auto;}
  .deal-info{gap:.75rem;}
  .term-field,.rate-field{flex:0 0 80px;}
}