/* =========================================================
   PACKAGE BOOKING -- responsive (mobile / tablet / laptop / large screens)
========================================================= */
.pb-page{--g:#4a7729;--gd:#3b6020;--ink:#16233a;--muted:#6b7789;--line:#e2e8dc;--wrap:1000px;
  background:#f5f8f2;font-family:'Segoe UI',Arial,sans-serif;color:var(--ink);
  padding:60px 24px 40px;overflow-wrap:break-word}
.pb-page *{box-sizing:border-box}
.pb-page img{max-width:100%}

.pb-wrap{max-width:var(--wrap);margin:0 auto;padding:0;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
.pb-wrap > *{min-width:0}
.pb-wrap.one{grid-template-columns:1fr;max-width:760px}

.pb-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 3px 12px rgba(20,45,70,.06);padding:18px 20px;margin-bottom:16px}
.pb-title{font-size:16px;font-weight:800;color:var(--ink);margin:0 0 14px;padding-left:10px;border-left:4px solid var(--g)}
.pb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pb-grid2 > *{min-width:0}
.pb-full{grid-column:1/-1}
.pb-page label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:0 0 5px}
.pb-in,.pb-page select.pb-in,.pb-page textarea.pb-in{width:100%;max-width:100%;height:42px;padding:0 12px;border:1.5px solid #d5d9e3;border-radius:8px;font:inherit;font-size:14px;background:#fff;color:var(--ink)}
.pb-page textarea.pb-in{height:80px;padding:10px 12px;resize:vertical}
.pb-in:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 3px rgba(74,119,41,.15)}
.pb-err{display:block;color:#b23b3b;font-size:11.5px;margin-top:3px}
.pb-msg{color:#b23b3b;font-weight:600;margin:0 0 12px;display:block}
.pb-ok{background:#eaf3e3;border:1px solid #cfe3bf;color:#285719;border-radius:10px;padding:12px 14px;margin-bottom:14px;font-weight:600}

.pb-btn{display:inline-block;border:0;border-radius:8px !important;padding:12px 22px !important;margin:0 8px 8px 0;font-weight:700;font-size:14px;cursor:pointer;background:linear-gradient(90deg,var(--g),var(--gd)) !important;color:#fff !important;text-decoration:none;text-align:center}
.pb-btn:hover{opacity:.92}
.pb-btn.alt{background:#fff !important;color:var(--gd) !important;border:1.5px solid var(--g)}
.pb-btn.danger{background:#b23b3b !important}
.pb-btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- right column ---------- */
.pb-side{min-width:0;position:sticky;top:110px;max-height:calc(100vh - 130px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding-right:2px}
.pb-pkg img{width:100%;height:170px;object-fit:cover;border-radius:10px;display:block;background:#eef4e0}
.pb-pkg-name{font-size:16px;font-weight:800;margin:12px 0 2px}
.pb-pkg-dn{font-size:12.5px;font-weight:600;color:#b07a3a}
.pb-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;font-size:13.5px;border-top:1px dashed var(--line)}
.pb-row > span{min-width:0}
.pb-row b{color:var(--ink);text-align:right}
.pb-row.total{font-size:16px}
.pb-row.total b{color:var(--g)}
.pb-kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 12px;font-size:14px}
.pb-kv span{color:var(--muted);font-weight:600}

.st{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700}
.st0{background:#fff4d6;color:#8a6100}.st1{background:#e3efd8;color:#285719}
.st2{background:#fbe1e1;color:#a12c2c}.st3{background:#dfe9f7;color:#1f4a86}

/* ---------- steps bar ---------- */
.pb-steps{display:flex;gap:6px;max-width:var(--wrap);margin:0 auto 16px;padding:0}
.pb-steps span{flex:1;min-width:0;text-align:center;padding:9px 6px;border-radius:8px;background:#e9efe4;color:#6b7789;font-size:12.5px;font-weight:700}
.pb-steps span.on{background:var(--g);color:#fff}
.pb-steps span.done{background:#cfe3bf;color:#285719}

/* ---------- seat map ---------- */
.seatmap{display:flex;flex-direction:column;gap:8px;align-items:center;padding:16px;background:#f8faf5;border:1px dashed var(--line);border-radius:12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.seatrow{display:flex;gap:8px;flex-direction: row-reverse;}
.seat{width:42px;height:42px;border-radius:8px;border:1.5px solid var(--g);background:#fff;color:var(--gd);font-weight:800;font-size:13px;cursor:pointer;padding:0;flex:0 0 auto}
.seat.sel{background:var(--g);color:#fff}
.seat.booked{background:#e5e7eb;border-color:#d1d5db;color:#9ca3af;cursor:not-allowed}
.aisle{width:26px;flex:0 0 auto}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-top:10px;flex-wrap:wrap}
.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;border:1.5px solid var(--g);vertical-align:-2px;margin-right:5px}
.legend i.s{background:var(--g)}.legend i.b{background:#e5e7eb;border-color:#d1d5db}

.pb-grid3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
.pb-grid3 > *{min-width:0}
.pb-pax{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px;background:#fbfdf9}
.pb-seatno{font-weight:800;color:var(--gd);margin-bottom:8px}

.pb-hide{display:none !important}
.pb-recap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

.seatmap .driver{text-align:right;align-self:stretch;font-size:12px;color:#777;margin-bottom:8px}

/* sleeper */
.seatmap.sleeper .deck-tabs{display:flex;gap:8px;margin-bottom:12px;align-self:stretch}
.seatmap.sleeper .deck-tab{flex:1;padding:9px;border:1.5px solid #4a7729;border-radius:8px;background:#fff;color:#3b6020;font-weight:700;cursor:pointer;text-shadow:none}
.seatmap.sleeper .deck-tab.on{background:#4a7729;color:#fff}
.seatmap.sleeper .seat{    width: 50px;
    height: 69px;border-radius:6px}
.seatmap.sleeper .seatrow{margin-bottom:10px}
.seatmap.sleeper .aisle{display:inline-block;width:28px}
 .mixed .deck-tab.on{background:#4a7729;color:#fff}
 .mixed .deck-tab{flex:1;padding:9px;border:1.5px solid #4a7729;border-radius:8px;background:#fff;color:#3b6020;font-weight:700;cursor:pointer;text-shadow:none}
 .mixed .deck-tabs{display:flex;gap:8px;margin-bottom:12px;align-self:stretch}
/* =========================================================
   RESPONSIVE
========================================================= */

/* ---- large screens ---- */
@media (min-width:1400px){
  .pb-page{--wrap:1180px}
  .pb-wrap{grid-template-columns:minmax(0,1fr) 360px;gap:22px}
}

/* ---- laptops / small desktops ---- */
@media (max-width:1100px){
  .pb-wrap{grid-template-columns:minmax(0,1fr) 300px;gap:16px}
}

/* ---- tablets & below: single column ---- */
@media (max-width:860px){
  .pb-page{padding:100px 14px 32px}
  .pb-wrap{grid-template-columns:1fr;gap:0}

  /* sidebar splits: package summary card first, route/boarding/etc. after the form */
  .pb-side{display:contents}
  .pb-side .pb-pkg{order:-1}
  .pb-side #pbxSide{order:2;margin-top:0}
  .pb-pkg img{height:200px}
}

/* ---- large phones ---- */
@media (max-width:600px){
  .pb-grid2{grid-template-columns:1fr}
  .pb-kv{grid-template-columns:1fr;gap:2px 0}
  .pb-kv span{margin-top:8px}
  .pb-grid3{grid-template-columns:1fr 1fr}
  .pb-grid3 > :first-child{grid-column:1/-1}
}

/* ---- phones ---- */
@media (max-width:520px){
  .pb-page{padding:20px 10px 28px}
  .pb-card{padding:14px 14px;border-radius:12px;margin-bottom:12px}
  .pb-title{font-size:15px;margin-bottom:12px}
  .pb-steps{gap:4px}
  .pb-steps span{font-size:10.5px;padding:8px 2px;line-height:14px}
  .pb-pkg img{height:170px}

  /* 16px inputs stop iOS from zooming on focus */
  .pb-in,.pb-page select.pb-in,.pb-page textarea.pb-in{font-size:16px;height:44px}
  .pb-page textarea.pb-in{height:80px}

  /* buttons full width, stacked */
  .pb-btn{display:block;width:100%;margin:0 0 10px}

  .seatmap{padding:12px 8px}
  .seatmap.sleeper .seat{width: 49px;
        height: 80px;}
  .aisle{width:18px}
  .seatmap.sleeper .aisle{width:18px}
  .legend{gap:10px;font-size:11.5px}
  .pb-row{font-size:13px}
}

/* ---- small phones ---- */
@media (max-width:380px){
  .pb-page{padding:20px 8px 24px}
  .seat{width:36px;height:36px;font-size:12px}
  .seatrow{gap:6px}
  .seatmap{gap:6px}
  .seatmap.sleeper .seat{width: 50px;
        height: 85px;}
  .pb-grid3{grid-template-columns:1fr}
  .pb-steps span{font-size:9.5px}
}

/* ---- landscape phones: keep sticky column usable ---- */
@media (max-height:520px) and (min-width:861px){
  .pb-side{top:70px;max-height:calc(100vh - 90px)}
}

/* ---- print ---- */
@media print{
  header,footer,.no-print{display:none!important}
  .pb-page{padding:0;background:#fff}
  .pb-card{box-shadow:none}
  .pb-side{position:static;max-height:none;overflow:visible}
}

/* ---------- booked seats by gender + ladies-only seats ---------- */
.seat.booked.m{background:#a9c9ea;border-color:#6f9dcf;color:#17345b}
.seat.booked.f{background:#f3aecb;border-color:#d97fa8;color:#5c1734}
.seat.fonly{border-color:#d97fa8;box-shadow:inset 0 0 0 2px #fbe1ec}
.seat.fonly.sel{background:var(--g);border-color:var(--g);box-shadow:none}
.legend i.m{background:#a9c9ea;border-color:#6f9dcf}
.legend i.f{background:#f3aecb;border-color:#d97fa8}
.legend i.fo{background:#fff;border-color:#d97fa8;box-shadow:inset 0 0 0 2px #fbe1ec}

.pb-sub{display:block;font-weight:600;margin-bottom:8px}
.pb-list{display:block;max-height:320px;overflow-y:auto}
.pb-list br{display:none}
.pb-list input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.pb-list label{
  display:block;margin:0 0 8px;padding:10px 12px 10px 38px;
  border:1px solid #d8dde6;border-radius:8px;background:#fff;
  cursor:pointer;position:relative;font-size:14px;line-height:1.4;
  transition:border-color .15s, background .15s;
}
.pb-list label::before{
  content:"";position:absolute;left:12px;top:50%;margin-top:-8px;
  width:16px;height:16px;border:2px solid #9aa4b2;border-radius:50%;background:#fff;
}
.pb-list label:hover{border-color:#4a7729}
.pb-list input[type=radio]:checked + label{border-color: #4a7729;
    background: #4a772924;}
.pb-list input[type=radio]:checked + label::before{
border-color: #4a7729;
    background: radial-gradient(#4a7729 45%, #fff 50%);
}
.pb-list input[type=radio]:focus-visible + label{outline:2px solid #e53935;outline-offset:2px}

/* Seater: chair (upar backrest) */
.seat{position:relative}
.seat:not(.bth){border-radius:8px 8px 4px 4px;border-bottom-width:4px}
.seat:not(.bth)::before{content:"";position:absolute;top:3px;left:18%;right:18%;height:5px;border-radius:3px;background:rgba(0,0,0,.2)}

/* Sleeper: lambi berth (upar takiya) */
.seat.bth{width:34px;height:64px;border-radius:6px;padding-top:12px}
.seat.bth::before{content:"";position:absolute;top:4px;left:18%;right:18%;height:8px;border-radius:4px;background:rgba(0,0,0,.2)}

/* legend icons */
.legend .ic-seat,.legend .ic-bth{display:inline-block;border:1px solid #9aa4b2;background:#fff;vertical-align:middle;margin-right:6px}
.legend .ic-seat{width:16px;height:16px;border-radius:5px 5px 2px 2px}
.legend .ic-bth{width:12px;height:22px;border-radius:4px}