:root {
      --bg:#f6f8fa;
      --card:#fff;
      --border:#e6e9ee;
      --accent: black;
      --radius:10px;
      --muted:#6b7280;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Inter, system-ui, sans-serif;
      background: var(--bg);
      color: #0f172a;
    }

    .container{
        margin-top: calc(var(--header-height) + 2rem);
    }
    h1 { font-size: 22px; margin-bottom: 8px; }
    p.lead { color: var(--muted); margin-bottom: 24px; }
    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px 0;
      box-shadow: 0 6px 18px rgba(15,23,42,0.03);
    }
    label {
      display: block;
      font-size: 14px;
      margin-bottom: 6px;
      color: #334155;
      font-weight: 500;
    }

    /* 🔽 Custom searchable dropdown container */
    .dropdown {
      position: relative;
      margin-bottom: 18px;
    }
    .dropdown input {
      width: 100%;
      padding: 12px 16px;
      font-size: 15px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      outline: none;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    .dropdown input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(15,98,254,0.15);
    }
    .dropdown-list {
      position: absolute;
      top: 105%;
      left: 0;
      right: 0;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 8px 16px rgba(0,0,0,0.05);
      max-height: 200px;
      overflow-y: auto;
      z-index: 10;
      display: none;
    }
    .dropdown-list div {
      padding: 10px 14px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .dropdown-list div:hover {
      background: #eef3ff;
    }

    input[type="date"], input[type="time"], input[type="number"] {
      width: 100%;
      padding: 12px 16px;
      font-size: 15px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      margin-bottom: 18px;
    }

    .price-box {
      background: #eef3ff;
      border-radius: var(--radius);
      padding: 10px 12px;
      font-weight: 600;
      color: var(--accent);
      font-size: 15px;
      margin-bottom: 18px;
      display: none;
    }

    button {
      background: var(---colorOnBackground);
      color: #000;
      height: 44px;
      border-radius: 44px;
      border: none;
      padding: 12px 18px;
      font-size: 14px;
      cursor: pointer;
      transition: 0.2s;
      width: 100%;
    }
    button:hover {
       background: var(---colorOnSecondary);
       color: var(---colorOnPrimary);
    }

@media screen and (min-width:1024px){
}

@media screen and (min-width:1200px){

}