:root{
      --bg1:#f7d36a; --bg2:#e6b637;
      --brand:#f2c94c; --brand-hover:#e0b949;
      --card:#ffffff; --line:#e5e7eb;
      --text-strong:#111827; --text:#1f2937; --muted:#6b7280;
      --radius:14px; --transition:all .25s ease; --shadow:0 4px 20px rgba(0,0,0,.08);
      --safe-top: env(safe-area-inset-top); --safe-right: env(safe-area-inset-right);
      --safe-bottom: env(safe-area-inset-bottom); --safe-left: env(safe-area-inset-left);
    }
    :root.dark{
      --bg1:#0a0f1a; --bg2:#0c1628;
      --brand:#f2c94c; --brand-hover:#ddb533;
      --card:#0d1320; --line:#1b2535;
      --text-strong:#eaf2ff; --text:#e5eef7; --muted:#a6b2c4;
    }
    *{box-sizing:border-box; margin:0; padding:0;}
    html,body{height:100%;}
    body{
      background:linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
      color:var(--text);
      font-family:'Tajawal',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
      line-height:1.6; display:flex; flex-direction:column;
      padding:max(0px,var(--safe-top)) max(0px,var(--safe-right)) max(0px,var(--safe-bottom)) max(0px,var(--safe-left));
    }
    header{
      position:sticky; top:0; z-index:10; background:transparent; border-bottom:0; padding:1rem 1.25rem;
    }
    .header-content{display:flex; justify-content:center; align-items:center; gap:.6rem; max-width:1200px; margin:0 auto; width:100%;}
    h1{
      font-size:clamp(1.5rem, 2.8vw, 2.1rem);
      margin:0; display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:-.3px;
      color:var(--text-strong);
    }
    .header-content i,.section-title i,.btn i,.hint i,.bus-icon{ color:currentColor; }
    .build-tag{ font-size:.8rem; font-weight:800; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:.15rem .5rem; }

    .container{flex:1; max-width:1200px; margin:1rem auto; padding:0; width:100%;}
    .card{
      background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
      margin:0 1rem 1.2rem; position:relative;
    }
    .card-body{padding:1.2rem 1rem 1.4rem;}

    /* ===== Switches (top-right) ===== */
    .switch-group{ position:absolute; inset-inline-end:1rem; inset-block-start:1rem; display:flex; gap:.6rem; align-items:center; z-index:3; }
    .theme-switch, .lang-switch, .btn-secondary{
      background:#fff0; border:1px solid var(--line); border-radius:999px;
      padding:.55rem .9rem; cursor:pointer; color:var(--text-strong); display:inline-flex; align-items:center; gap:.5rem; font-weight:700;
    }
    .theme-switch:hover, .lang-switch:hover, .btn-secondary:hover{background:#fff3; border-color: var(--brand); color:var(--text-strong);}

    /* ===== Improved section title placement ===== */
    .section-title-wrap{
      position:sticky; top:calc(var(--safe-top) + .5rem);
      z-index:2; background:var(--card);
      box-shadow:0 1px 0 var(--line);
    }
    .section-subtitle{ color:var(--muted); font-weight:600; font-size:.98rem; margin-top:.25rem; text-align:center; } 
    .section-title-wrap
      display:flex; align-items:center; justify-content:center;
      padding:.8rem 1rem .6rem; margin:0 .6rem 1rem; position:relative;
    }
    .section-title{
      color:var(--text-strong);
      font-size:clamp(1.25rem,2.6vw,1.7rem); font-weight:800;
      display:flex; align-items:center; gap:.6rem;
    }
    .section-title-wrap::after{
      content:""; position:absolute; inset-inline:0; bottom:-.2rem; height:2px; background:var(--line);
      margin:0 .4rem;
    }

    .row{display:grid; grid-template-columns:repeat(2,minmax(240px,1fr)); gap:1rem; padding:0 1rem;}
    label{
      display:block; margin:.45rem 0 .35rem; font-weight:800; color:var(--text-strong);
      font-size:clamp(1.02rem, 3vw, 1.35rem);
    }

    input,select{
      width:100%; padding:1rem 1.05rem; border-radius:12px; border:1.5px solid var(--line);
      font-size:clamp(1rem, 2.6vw, 1.06rem); transition:var(--transition); font-family:'Tajawal',sans-serif;
      background:#f8fafc; color:var(--text);
    }
    input::placeholder{ color:var(--muted); }
    input:focus,select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(242,201,76,.25); }

    select{
      -webkit-appearance:none; -moz-appearance:none; appearance:none;
      background-image:linear-gradient(45deg, transparent 50%, #9aa3af 50%), linear-gradient(135deg, #9aa3af 50%, transparent 50%), linear-gradient(to right, transparent, transparent);
      background-position: calc(100% - 18px) calc(1.2em), calc(100% - 13px) calc(1.2em), calc(100% - 2.5rem) 0.5rem;
      background-size:5px 5px, 5px 5px, 1px 1.8rem; background-repeat:no-repeat;
    }

    .hint{color:var(--muted); font-size:.98rem; margin-top:.25rem; display:flex; align-items:center; gap:.45rem; font-weight:500; padding:0 1rem;}

    /* ===== Buttons: improved look & spacing ===== */
    .sp{display:flex; justify-content:space-between; gap:.8rem; align-items:center; flex-wrap:wrap; margin-top:1rem; padding:0 1rem;}
    .toolbar{display:flex; gap:.6rem; flex-wrap:wrap;}
    .btn{
      display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
      padding:.9rem 1.2rem; border-radius:14px; border:1px solid transparent;
      background:var(--brand); color:#1f2937; font-weight:900; cursor:pointer;
      font-size:clamp(.95rem, 2.6vw, 1rem); transition:var(--transition); white-space:nowrap;
      min-width: 44px; min-height: 44px;
    }
    .btn:hover{background:var(--brand-hover); transform:translateY(-1px);}
    .btn:focus-visible{ outline:3px solid rgba(242,201,76,.45); outline-offset:2px; }
    .btn.secondary{background:transparent; color:var(--text-strong); border:1.5px solid var(--brand);}
    .btn.secondary:hover{ background:rgba(242,201,76,.18); }
    .btn:disabled{opacity:0.6; cursor:not-allowed;}

    .pill{padding:.7rem 1rem; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:clamp(.92rem,2.4vw,1rem); display:flex; align-items:center; gap:.45rem; font-weight:700;}
    .pill.success{color:#14532d; border-color:#22c55e; background:rgba(34,197,94,.18);}
    .pill.error{color:#7f1d1d; border-color:#ef4444; background:rgba(239,68,68,.18);}

    .required::after{content:" *"; color:#ef4444;}
    .other-district-container{display:none; margin-top:.5rem;}
    .other-district-container.visible{display:block;}
    .coords-field{cursor:default!important;}
    .coords-field:not([data-url]){color:var(--muted);}

    .overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.45); z-index:1000; }
    .overlay.visible{ display:flex; }
    .overlay .box{ background:var(--card); color:var(--text); border:2px solid var(--brand); border-radius:18px; padding:1.2rem 1.4rem; max-width:720px; margin:1rem; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.25); }
    .overlay .box h3{ margin:0 0 .5rem; font-size:1.25rem; color:var(--text-strong); }
    .overlay .brand{ font-weight:800; margin-top:.25rem; color:var(--text-strong); }
    .overlay .actions{ margin-top:.9rem; display:flex; justify-content:center; gap:.6rem; }
    .overlay .actions .btn{ padding:.6rem 1rem; }

    /* Mobile */
    @media (max-width:820px){
      .container{max-width:100%; width:100%; padding:0; margin:0;}
      .card{border-radius:0; margin:0; border-left:none; border-right:none; box-shadow:none;}
      .card-body{padding:calc(1rem + var(--safe-top)) .6rem 1rem;}
      .row{grid-template-columns:1fr; gap:.9rem; padding:0 .6rem;}
      .hint{padding:0 .6rem;}
      .switch-group{inset-inline-end:.6rem; inset-block-start:.6rem; gap:.45rem;}
      label{font-size:clamp(1.08rem, 3.8vw, 1.45rem);}
      .btn{padding:1rem 1.2rem;}
      #status{width:100%; justify-content:center; margin-top:.4rem;}
    }
    @media (max-width: 480px){
      .switch-group{ gap:.4rem; }
      .switch-group button{ font-size:0; padding:.55rem .65rem; }
      .switch-group button i{ font-size:1.25rem; margin:0; }
    }

    html,body{overflow-x:hidden;}

    /* Dark input backgrounds */
    :root.dark { --field-bg:#1a1d2b; --field-hover:#222b3d; --field-focus:#2c3b55; }
    input, select { background: var(--field-bg); color: var(--text); }
    input:hover, select:hover { background: var(--field-hover); }
    input:focus, select:focus { background: var(--field-focus); border-color: var(--brand); box-shadow:0 0 0 3px rgba(242,201,76,.25); outline:none; }

    /* Modal */
    .modal{ display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.45); }
    .modal-content{ background:var(--card); color:var(--text); width:min(560px, 92%); margin:8vh auto; border-radius:16px; border:1px solid var(--line); box-shadow:var(--shadow); padding:1.2rem 1rem 1.4rem; position:relative;}
    .modal-title{ font-size:clamp(1.2rem, 2.6vw, 1.6rem); margin:0 0 .6rem; font-weight:800; color:var(--text-strong); }
    .help-list{ margin:.4rem 1.2rem 0; line-height:1.9; }
    .close{ position:absolute; inset-inline-start:.8rem; inset-block-start:.5rem; background:transparent; border:0; font-size:1.8rem; cursor:pointer; color:var(--muted); }
    .close:hover{ color:var(--text-strong); }
    :root.dark .modal{ background:rgba(0,0,0,.6); }

    .tabs{ display:flex; gap:.5rem; margin:.3rem 0 1rem; }
    .tab-btn{ padding:.45rem .8rem; border:1px solid var(--line); border-radius:999px; background:#fff0; color:var(--text-strong); cursor:pointer; }
    .tab-btn.tab-active{ background:var(--brand); border-color:var(--brand); color:#1f2937; }
    .tab-panel{ margin-top:.4rem; }
    #faqList .qa{ margin:.6rem 0; }
    #faqList .q{ font-weight:800; color:var(--text-strong); }
    #faqList .a{ color:var(--text); margin:.2rem 0 0 .2rem; }

    /* Footer */
    .app-footer{ margin:1rem auto 1.2rem; padding:.8rem 1rem; max-width:1200px; width:100%; text-align:center; color:var(--muted); }
    .app-footer .contact{ margin-top:.35rem; }
    .app-footer a{ color:inherit; text-decoration:underline dotted; }
    .app-footer a:hover{ text-decoration:underline; }
  
/* === Override to make the second bus icon identical in size/color === */
.build-tag{ font-size:inherit !important; color:inherit !important; border:0 !important; padding:0 !important; }


.card.hidden { display: none; }
/* Contact box inside success overlay */
.contact-box {
  margin: 1rem auto;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  text-align: center;
  max-width: 300px;
}
.contact-box p {
  margin: 0.5rem 0;
  font-size: 0.95rem;
}
.contact-box i {
  margin-left: 0.5rem;
  color: var(--brand);
}