/**
 * CleanNest Bügelservice - Final Master Stylesheet
 * Version: 8.2 (2026) - 100% COMPLETE & FIXED
 */

:root {
  --bg: #030712;
  --card: rgba(255, 255, 255, 0.03);
  --border: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.05);
  --gold: #f3d17a;
  --gold-dark: #c49b46;
  --gold-gradient: linear-gradient(135deg, #f3d17a 0%, #c49b46 100%);
  --text: #f9fafb;
  --text-dim: rgba(249, 250, 251, 0.6);
  --radius: 24px;
  --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --container-max: 1100px;
}

/* 1. Alapbeállítások */
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background-color: var(--bg);
  background-image: 
    radial-gradient(circle at 0% 0%, rgba(74, 140, 255, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(243, 209, 122, 0.04) 0%, transparent 40%);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}
.bs-wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }

/* 2. Header */
.bs-header { height: 80px; border-bottom: 1px solid var(--border); background: rgba(3, 7, 18, 0.9); backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 1000; }
.bs-header-inner { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.bs-brand { font-size: 1.6rem; font-weight: 900; letter-spacing: -1px; color: #fff; text-decoration: none; }
.header-link { color: #fff; text-decoration: none; font-weight: 600; margin-left: 24px; font-size: 0.9rem; transition: var(--transition); }
.header-link:hover { color: var(--gold); }

/* 3. Selection Preview Card (V8.1 FIXES) */
.bs-preview-card {
  background: linear-gradient(135deg, rgba(243, 209, 122, 0.1) 0%, rgba(3, 7, 18, 0.6) 100%);
  border: 2px solid var(--gold);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  margin-top: 30px;
}
.bs-preview-details { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
#displayPaketName { font-size: 2rem; font-weight: 900; color: #fff; }
.bs-preview-price { font-size: 1.6rem; font-weight: 900; color: var(--gold); }
.bs-preview-logistics { display: flex; gap: 40px; }
.bs-log-item { display: flex; align-items: center; gap: 15px; font-size: 0.95rem; color: var(--text-dim); }
.bs-log-item svg { width: 45px !important; height: 45px !important; flex-shrink: 0; fill: var(--gold); }
.bs-log-item span { color: #fff; font-weight: 700; display: block; }

/* 4. Form Layout */
#buegelForm { display: grid; grid-template-columns: 1fr 380px; gap: 30px; align-items: start; margin-top: 40px; }
@media (max-width: 992px) {
  #buegelForm { grid-template-columns: 1fr; }
  .bs-summary-container { order: 2; position: static !important; }
  .bs-form-actions { order: 3; }
}

/* 5. Cards & Form Mezők */
.bs-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; margin-bottom: 30px; }
.bs-card-title { font-size: 1.3rem; font-weight: 800; color: var(--gold); margin-bottom: 30px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.bs-label { display: block; font-size: 0.85rem; font-weight: 800; color: var(--gold); margin-bottom: 10px; text-transform: uppercase; }
.bs-field, .bs-select, .bs-textarea { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); border-radius: 12px; padding: 16px; color: #fff; font-family: inherit; transition: var(--transition); }
.bs-field:focus { border-color: var(--gold); outline: none; }

/* 6. Slot Grid */
#slotWrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-top: 15px; }
.bs-slot { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); color: #fff; padding: 15px 10px; border-radius: 12px; cursor: pointer; font-weight: 800; transition: var(--transition); text-align: center; }
.bs-slot.is-active { background: var(--gold) !important; color: #000 !important; font-weight: 900; }

/* 7. Árösszegző Box */
.bs-summary-container { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 35px; position: sticky; top: 110px; }
.bs-price-row { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 1rem; color: var(--text-dim); }
.bs-price-total { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 1.8rem; font-weight: 900; color: var(--gold); }

/* 8. Jogi rész */
.bs-legal-info { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); }
.bs-info-tag { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; margin-bottom: 30px; color: var(--text); background: rgba(243, 209, 122, 0.05); padding: 15px; border-radius: 12px; }
.bs-checkbox-group { display: flex; align-items: flex-start; gap: 15px; cursor: pointer; color: var(--text-dim); font-size: 0.85rem; margin-bottom: 10px; }
.bs-checkbox-group input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--gold); cursor: pointer; }

/* 9. Akció Gombok */
.bs-form-actions { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; margin: 50px 0 120px 0; }
.btn-main { width: 100%; padding: 22px; border-radius: 18px; font-weight: 900; font-size: 1.1rem; border: none; cursor: pointer; transition: var(--transition); letter-spacing: 1px; text-transform: uppercase; }
.btn-gold { background: var(--gold-gradient) !important; color: #000 !important; box-shadow: 0 10px 30px rgba(196, 155, 70, 0.2); }
.btn-wa { background: #25D366; color: #fff; box-shadow: 0 10px 30px rgba(37, 211, 102, 0.15); text-decoration: none; display: flex; align-items: center; justify-content: center; }

/* 11. Prémium Footer */
.bs-footer { background: #010409; padding: 100px 0 50px; border-top: 1px solid var(--border); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 60px; }
.footer-section h3 { color: var(--gold); margin: 0 0 20px 0; font-size: 1.6rem; font-weight: 900; }
.footer-section p { color: var(--text-dim); font-size: 0.95rem; }
.footer-section h4 { color: #fff; margin: 0 0 25px 0; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; }
.footer-links { display: flex; flex-direction: column; gap: 16px; }
.footer-links a { color: var(--text-dim); text-decoration: none; transition: 0.3s; font-size: 0.95rem; }
.footer-links a:hover { color: var(--gold); padding-left: 8px; }
.footer-bottom { text-align: center; margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--line); color: rgba(255, 255, 255, 0.15); font-size: 0.85rem; }

/* 12. Admin Stats (Visszaállítva a 8.0-ból!) */
.bs-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; }
.bs-stat-card { display: flex; align-items: center; gap: 20px; padding: 30px !important; transition: transform 0.3s ease; }
.bs-stat-card.highlight { border-left: 4px solid var(--gold); background: linear-gradient(135deg, rgba(243, 209, 122, 0.05) 0%, transparent 100%); }

/* Mobil finomítások */
@media (max-width: 600px) {
  .bs-preview-logistics { flex-direction: column; gap: 15px; }
  .bs-card { padding: 25px; }
  .bs-summary-container { padding: 25px; }
  .btn-main { padding: 18px; font-size: 1rem; }
}