:root {
      --bg: #f3e6db;
      --bg-card: #fffdfa;
      --text: #3f3a34;
      --text-soft: #7a7167;
      --border: #e6dccf;
      --accent: #7b5335;
      --accent-soft: #d4c4b5;
      --accent-pill: #f6efe6;
      --accent-pill-border: #e1d4c4;
      --radius-xl: 22px;
      --radius-lg: 16px;
      --shadow-main: 0 18px 40px rgba(0,0,0,0.10);
      --shadow-soft: 0 8px 18px rgba(0,0,0,0.08);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }

    html, body {
      background: var(--bg);
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      padding: 30px 12px 0;
    }

    .page {
      width: 100%;
      max-width: 1120px;
      padding-bottom: 40px;
    }

    header {
      text-align: center;
      margin-bottom: 22px;
    }

    .brand {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: 0.03em;
      margin-bottom: 6px;
    }

    .brand-logo {
      display: block;
      height: 88px;
      width: auto;
      margin: 0 auto 6px;
    }

    .subtitle {
      font-size: 13px;
      color: var(--text-soft);
    }

    .note-banner {
      margin: 20px auto 26px;
      background: var(--accent-pill);
      border-radius: 999px;
      border: 1px solid var(--accent-pill-border);
      padding: 10px 18px;
      font-size: 18px;
      color: var(--text-soft);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      box-shadow: var(--shadow-soft);
    }

    .note-icon {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      border: 1px solid #d8c8b7;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
    }

    .layout {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
      gap: 20px;
      align-items: flex-start;
    }

    @media (max-width: 900px) {
      .layout {
        grid-template-columns: 1fr;
      }
    }

    /* MENU */

    .menu-column {
      background: var(--bg-card);
      border-radius: var(--radius-xl);
      border: 1px solid var(--border);
      padding: 22px 22px 20px;
      box-shadow: var(--shadow-main);
    }

    .menu-title {
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 18px;
    }

    .menu-section {
      margin-bottom: 20px;
    }

    .menu-section-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 20px;
      font-weight: 700;
      color: var(--text-soft);
      margin-bottom: 8px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--accent-soft);
    }

    .menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f7f2ec;
      border-radius: var(--radius-lg);
      border: 1px solid #e7dacd;
      padding: 14px 15px;
      margin-bottom: 10px;
      position: relative;
      transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
    }

    .menu-item-text h3 {
      margin: 0 0 3px;
      font-size: 18px;
      font-weight: 700;
    }

    .menu-item-text p {
      margin: 0 0 6px;
      font-size: 15px;
      color: var(--text-soft);
    }

    .badge {
      display: inline-block;
      font-size: 14px;
      border-radius: 999px;
      padding: 3px 8px;
      margin-left: 6px;
      vertical-align: middle;
      font-weight: 600;
    }

    .badge-popular {
      background: #f7e8db;
      color: #7b4c27;
    }

    .badge-new {
      background: #e3f6e8;
      color: #2e7b41;
    }

    .price {
      font-size: 16px;
      font-weight: 600;
    }

    .menu-item-action {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .menu-item.is-selected {
      background: #f9f2ea;
      border-color: #d7c3b2;
      box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    }

    .menu-item-selected-badge {
      position: absolute;
      top: 10px;
      right: 12px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #ffffff;
      background: #b35a28;
      border: 1px solid #9e4b20;
      padding: 3px 6px;
      border-radius: 999px;
      display: none;
    }

    .menu-item.is-selected .menu-item-selected-badge {
      display: inline-block;
    }

    .add-btn {
      width: 36px;
      height: 36px;
      border-radius: 999px;
      border: none;
      background: var(--accent);
      color: #fff;
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 7px 16px rgba(0,0,0,0.14);
    }

    .add-btn:active {
      transform: translateY(1px);
      box-shadow: 0 3px 8px rgba(0,0,0,0.14);
    }

    /* SIDEBAR */

    .sidebar {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .sidebar-card {
      background: var(--bg-card);
      border-radius: var(--radius-xl);
      border: 1px solid var(--border);
      padding: 20px;
      box-shadow: var(--shadow-main);
    }

    .sidebar-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .sidebar-title .dot {
      background: var(--accent-soft);
    }

    .empty-cart {
      font-size: 16px;
      color: var(--text-soft);
    }

    .cart-item {
      border-radius: 16px;
      border: 1px solid #ebdfd3;
      background: #f7f2ec;
      padding: 10px 12px;
      margin-bottom: 10px;
      font-size: 13px;
    }

    .cart-row-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 6px;
      gap: 6px;
    }

    .cart-name {
      font-weight: 600;
      font-size: 15px;
    }

    .cart-price-unit {
      font-size: 12px;
      color: var(--text-soft);
    }

    .cart-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      font-size: 12px;
    }

    .qty-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      border: 1px solid #ddcdbf;
      padding: 5px 9px;
      background: #fff9f3;
    }

    .qty-btn {
      border: none;
      background: none;
      font-size: 18px;
      cursor: pointer;
      padding: 5px 7px;
      line-height: 1;
      color: var(--accent);
    }

    .qty-value {
      min-width: 18px;
      text-align: center;
      font-weight: 600;
      font-size: 14px;
    }

    .cart-line-total {
      font-weight: 600;
      font-size: 14px;
    }

    .cart-actions {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .remove-btn {
      border: none;
      background: none;
      color: #8a4b2a;
      font-size: 14px;
      cursor: pointer;
      padding: 5px 7px;
    }

    @media (max-width: 900px) {
      .cart-controls {
        gap: 14px;
        font-size: 14px;
      }

      .qty-pill {
        padding: 7px 11px;
      }

      .qty-btn {
        font-size: 20px;
        padding: 7px 9px;
      }

      .qty-value {
        min-width: 20px;
        font-size: 15px;
      }

      .remove-btn {
        font-size: 15px;
        padding: 7px 9px;
      }
    }

    .cart-total-row {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed #ddcdbf;
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      font-weight: 700;
    }

    /* FORM */

    .form-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      font-size: 16px;
    }

    .form-group label {
      display: block;
      font-weight: 600;
      margin-top: 12px;
      margin-bottom: 4px;
      font-size: 16px;
    }

    .form-group small {
      display: block;
      font-size: 16px;
      color: var(--text-soft);
      margin-top: 2px;
    }

    input[type="text"],
    input[type="tel"],
    select,
    textarea {
      width: 100%;
      border-radius: 10px;
      border: 1px solid #ddcdbf;
      padding: 8px 10px;
      font-size: 16px;
      font-family: inherit;
      background: #fffdfa;
    }

    textarea {
      min-height: 70px;
      resize: vertical;
    }

    .afhaal-info {
      margin-top: 10px;
      font-size: 16px;
      color: var(--text-soft);
    }

    .afhaal-info ul {
      padding-left: 18px;
      margin: 4px 0 0;
    }

    .submit-btn {
      margin-top: 14px;
      width: 100%;
      padding: 12px 16px;
      border-radius: 999px;
      border: none;
      background: var(--accent);
      color: #fff;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    }

    .submit-btn:active {
      transform: translateY(1px);
      box-shadow: 0 4px 9px rgba(0,0,0,0.18);
    }

    .submit-btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      box-shadow: none;
    }

    .error-text {
      margin-top: 6px;
      font-size: 16px;
      font-weight: bold;
      color: #aa3838;
    }

    .pickup-pill {
  display: inline-block;
  padding: 6px 14px;
  background: #f3ebe3;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 600;
  color: #5b4b3b;
  margin-bottom: 8px;
}

    /* MOBILE CART BAR */

    .mobile-cart-bar {
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: calc(12px + env(safe-area-inset-bottom));
      background: #fffdfa;
      border: 1px solid #e7dacd;
      border-radius: 999px;
      padding: 8px;
      box-shadow: 0 12px 24px rgba(0,0,0,0.12);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 50;
    }

    .mobile-cart-bar.is-visible {
      display: flex;
    }

    .mobile-cart-btn {
      width: 100%;
      border: none;
      background: var(--accent);
      color: #fff;
      border-radius: 999px;
      padding: 12px 16px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    }

    .mobile-cart-btn:active {
      transform: translateY(1px);
      box-shadow: 0 4px 9px rgba(0,0,0,0.18);
    }

    .count-pulse {
      display: inline-block;
      animation: countPulse 180ms ease-out;
    }

    @keyframes countPulse {
      0% { transform: scale(1); font-size: 1em; }
      50% { transform: scale(1.24); font-size: 1.35em; }
      100% { transform: scale(1); font-size: 1em; }
    }

    @media (min-width: 901px) {
      .mobile-cart-bar {
        display: none !important;
      }
    }

    @media (max-width: 900px) {
      .page {
        padding-bottom: 110px;
      }
    }

    /* FOOTER */

    .site-footer {
      width: 100%;
      margin: 0;
      background: var(--bg);
      color: var(--text-soft);
      padding: 80px 18px 28px;
      font-size: 14px;
      letter-spacing: 0;
      text-transform: none;
    }

    .site-footer a {
      color: var(--text-soft);
      text-decoration: none;
    }

    .footer-wrap {
      max-width: 1120px;
      margin: 0 auto;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .footer-line {
      color: var(--text-soft);
      line-height: 1.6;
    }

    .footer-row {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .footer-strong {
      color: var(--text);
      font-weight: 600;
    }

    .footer-icon {
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--text-soft);
    }

/* THANKYOU */

/* zelfde basis-styling als index */
    :root {
      --bg: #f4eee8;
      --bg-card: #fffdfa;
      --text: #3f3a34;
      --text-soft: #7a7167;
      --border: #e6dccf;
      --accent: #7b5335;
      --accent-soft: #d4c4b5;
      --radius-xl: 22px;
      --shadow-main: 0 18px 40px rgba(0,0,0,0.10);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    *{box-sizing:border-box;}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      display:flex;
      justify-content:center;
      flex-direction:column;
      align-items:center;
      padding:30px 12px 40px;
    }
    .page{width:100%;max-width:900px;}
    header{text-align:center;margin-bottom:26px;}
    .status-pill{
      display:inline-flex;
      align-items:center;
      gap:12px;
      padding:7px 24px;
      border-radius:999px;
      background:#e4f6e6;
      color:#27653a;
      font-size:22px;
      border:1px solid #c4e2c9;
      font-weight: bold;
    }
    .status-pill-icon{
      width:24px;
      height:24px;
      border-radius:999px;
      border:1px solid #a6d2af;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:18px;
    }
    h1{
      margin:16px 0 4px;
      font-size:24px;
      font-weight:800;
    }
    .subtitle{
      font-size:18px;
      color:var(--text-soft);
    }
    .pickup-summary{
      margin:18px auto 24px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:9px 18px;
      border-radius:999px;
      background:#fffdfa;
      border:1px solid var(--border);
      box-shadow:0 10px 22px rgba(0,0,0,0.10);
      font-size:18px;
      font-weight:600;
    }
    .card{
      background:var(--bg-card);
      border-radius:var(--radius-xl);
      border:1px solid var(--border);
      padding:20px 22px 18px;
      box-shadow:var(--shadow-main);
    }
    .overview-title{
      font-size:18px;
      font-weight:700;
      margin-bottom:10px;
    }
    .overview-row{
      display:flex;
      justify-content:space-between;
      padding:14px 12px;
      font-size:16px;
    }
    .overview-row.header{
      background:#f7f2ec;
      border-radius:16px 16px 0 0;
      border-bottom:1px dashed #ddcdbf;
      font-weight:600;
    }
    .overview-row.item{
      border-bottom:1px dashed #f0e2d4;
    }
    .overview-row.total{
      font-weight:800;
      font-size:16px;
      padding-top:10px;
    }
    .overview-box{
      border-radius:18px;
      border:1px solid #ebdfd3;
      background:#f7f2ec;
      margin-top:6px;
      overflow:hidden;
    }
    .note{
      margin-top:36px;
      font-size:18px;
      color:var(--text-soft);
    }
    .note a{
      color:var(--text-soft);
    }
    .quote-card{
      margin-top:22px;
      padding:14px 10px 4px;
      text-align:center;
      font-size:12px;
      color:var(--text-soft);
    }
    .quote-label{
      font-size:18px;
      text-transform:uppercase;
      letter-spacing:0.08em;
      margin-bottom:4px;
    }
    .quote-text{
      font-style:italic;
      font-size: 16px;
    }

    /* FOOTER: styles defined above (index section) */

    @media (max-width: 700px) {
      .footer-row {
        flex-direction: column;
        text-align: center;
      }

      .footer-right {
        justify-content: center;
      }
    }