:root{
    --brand:#07a28f;
    --brand-600:#068a7a;
    --bg:#f6f7fb;
    --card:#ffffff;
    --text:#1f2937;
    --muted:#6b7280;
    --border:#e5e7eb;
    --error:#d93025;
    --success:#0f9d58;
    --radius:16px;
    --shadow:0 8px 24px rgba(0,0,0,.06);
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family: "Cairo","Tajawal",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    padding:0;
  }

  /* Page layout */
  body > img[alt="الرأس"]{
    display:block;
    width:100%;
    height:auto;
    object-fit:cover;
    max-height:220px;
  }
  h1{
    margin:16px auto 8px;
    font-size:clamp(20px,3.5vw,28px);
    text-align:center;
    font-weight:800;
    letter-spacing:.2px;
  }

  form{
    width:100%;
    max-width:980px;
    margin:12px auto 40px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:16px;
  }
  @media (min-width:768px){
    form{padding:24px 28px}
  }

  /* Flash messages */
  .message{
    max-width:980px;
    margin:10px auto 0;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid var(--border);
    background:#fff;
    box-shadow:var(--shadow);
    font-weight:600;
  }
  .message.error{background:#ffecec;border-color:#ffd3d3;color:var(--error)}
  .message.success{background:#ecfff2;border-color:#cbf4dc;color:var(--success)}

  /* Fields */
  label{
    display:block;
    font-weight:700;
    margin:14px 0 6px;
    font-size:15px;
  }
  .error{color:var(--error); margin-top:6px; font-size:13px}

  input[type="text"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    outline:none;
    font-size:15px;
    transition:border-color .2s, box-shadow .2s;
    direction:rtl;
  }
  input:focus, select:focus, textarea:focus{
    border-color:var(--brand);
    box-shadow:0 0 0 4px rgba(7,162,143,.12);
  }

  /* Products grid (works with current markup) */
  /* Each .product behaves like a card; inline-block allows wrapping without changing HTML */
  .product{
    display:inline-block;
    vertical-align:top;
    width:100%;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:10px;
    margin:6px 4px;
    box-shadow:var(--shadow);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .product:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.08)}
  .product input[type="checkbox"]{
    /* Larger, touch-friendly checkbox */
    width:20px; height:20px; vertical-align:middle; margin-left:6px;
    accent-color:var(--brand);
  }
  .product label{
    margin:4px 0 0;
    font-weight:600;
    cursor:pointer;
  }
  .product img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;      /* Ensure square shape */
    object-fit: cover;        /* Fill the box, cropping if needed */
    background: #fafafa;
    border-radius: 10px;
    max-width: 300px;         /* Optional: limit max size */
    margin: 0 auto;           /* Optional: center image */
  }
  .product div:last-child{font-weight:800}

  /* Responsive product card sizing */
  @media (min-width:420px){
    .product{width:calc(50% - 12px)}
  }
  @media (min-width:720px){
    .product{width:calc(33.333% - 14px)}
  }
  @media (min-width:1024px){
    .product{width:calc(25% - 16px)}
  }

  /* Submit button */
  button[type="submit"]{
    width:100%;
    appearance:none;
    border:none;
    background:linear-gradient(135deg,var(--brand),var(--brand-600));
    color:#fff;
    font-weight:800;
    font-size:16px;
    padding:14px 18px;
    border-radius:14px;
    margin-top:18px;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(7,162,143,.28);
    transition:transform .08s ease, filter .2s ease, box-shadow .2s ease;
  }
  button[type="submit"]:hover{filter:brightness(1.02)}
  button[type="submit"]:active{transform:translateY(1px); box-shadow:0 8px 18px rgba(7,162,143,.24)}

  /* Sections visibility */
  .hidden{display:none !important}

  /* Helper spacing so the form breathes */
  #location_fields, #home_extra, #stop_extra{margin-top:10px}

  /* Make selects & inputs comfy on mobile */
  @media (max-width:420px){
    input, select, textarea{font-size:16px} /* prevents iOS zoom */
  }

  /* Tiny “hint” style (if you add helper text later) */
  .hint{color:var(--muted); font-size:12.5px; margin-top:4px}

  /* Optional: dark mode if user prefers */
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#0f1216; --card:#151a21; --text:#e5e7eb; --muted:#9ca3af; --border:#222831;
      --shadow:0 8px 24px rgba(0,0,0,.35);
    }
    .message{background:var(--card)}
    .product{background:var(--card)}
    input, select, textarea{background:#0f1115; border-color:#232935; color:var(--text)}
    button[type="submit"]{box-shadow:0 12px 28px rgba(7,162,143,.35)}
  }