/* BHROMI Holiday Packages - PHONE-ONLY polish for the results page (/packages?location=...)
   Everything is inside @media (max-width:767px): desktop / tablet are untouched.
   Loaded LAST so it wins over gz-packages.css. v1
   Changes: category tiles -> compact scrollable pills (icon + label, solid blue when active, edge fade),
            tighter location bar, calmer package card (smaller title, 16:9 image, price row, 2-line note). */
@media (max-width:767px){

  /* ---------- location bar ---------- */
  .pk-page .gz-loc{padding:10px 14px;gap:8px}
  .pk-page .gz-loc-tx small{font-size:12px}
  .pk-page .gz-loc-tx b{font-size:18px;line-height:1.25}
  .pk-page .gz-back{width:32px;height:32px;margin-left:-6px;border-radius:50%}
  .pk-page .gz-back:active{background:var(--gz-primary-soft)}
  .pk-page .gz-btn-y{height:34px;padding:0 13px;font-size:13px}

  /* ---------- category tiles -> pills ---------- */
  .pk-page .gz-tiles{
    gap:8px;padding:10px 16px 12px;
    scroll-snap-type:x proximity;scroll-padding-inline:16px;-webkit-overflow-scrolling:touch;
    /* soft fade on the right edge = "there is more, swipe" */
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%)}
  .pk-page .gz-tiles::after{content:"";flex:0 0 12px}            /* lets the last pill scroll clear of the fade */
  .pk-page .gz-tile{
    flex-direction:row-reverse;                                  /* icon first, label second (no markup change) */
    justify-content:flex-end;gap:7px;
    min-width:0;height:40px;padding:0 15px 0 5px;
    border:1.5px solid #dbe5f5;border-radius:999px;background:#fff;
    font-size:13.5px;font-weight:700;white-space:nowrap;color:var(--gz-ink);
    scroll-snap-align:start;box-shadow:0 1px 2px rgba(15,23,42,.04);
    transition:background .15s,border-color .15s,color .15s,transform .1s;-webkit-tap-highlight-color:transparent}
  .pk-page .gz-tile:active{transform:scale(.96)}
  .pk-page .gz-tile-ic{width:30px;height:30px;padding:6px;background:var(--gz-primary-soft);color:var(--gz-primary)}
  .pk-page .gz-tile.on{background:var(--gz-primary);border-color:var(--gz-primary);color:#fff;box-shadow:0 3px 10px rgba(37,99,235,.28)}
  .pk-page .gz-tile.on .gz-tile-ic{background:rgba(255,255,255,.22);color:#fff}

  /* ---------- package card ---------- */
  .pk-page .gz-card{width:calc(100% - 24px);margin:0 12px 12px;padding:10px;border-radius:16px;box-shadow:0 2px 10px rgba(15,23,42,.06)}
  .pk-page .gz-card:active{transform:scale(.995)}
  .pk-page .gz-img{aspect-ratio:16/9;border-radius:12px}
  .pk-page .gz-pts{left:8px;bottom:8px;font-size:11.5px;padding:4px 10px}
  .pk-page .gz-title{font-size:17px;line-height:1.3;margin:10px 2px 4px}
  .pk-page .gz-meta{margin:4px 2px;font-size:13.5px}
  .pk-page .gz-mi{width:16px;height:16px}
  .pk-page .gz-row{gap:14px;margin-top:6px}
  .pk-page .gz-refund{margin:8px 0 0;padding:7px 9px;font-size:12px;line-height:16px;border-radius:9px;
    display:flex;align-items:flex-start;
    /* long policy text is clamped to 2 lines on phones; full text stays on the detail page */
  }
  .pk-page .gz-refund span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* price row: "View details" button on the left, "Starting From / BDT 24,830 / Per Person" kept together on the right */
  .pk-page .gz-from{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;
    margin:10px 2px 0;padding-top:10px;border-top:1px dashed var(--gz-line);text-align:right}
  .pk-page .gz-from small{display:block;grid-column:2;font-size:12px;line-height:1.3}
  .pk-page .gz-from>.gz-price{grid-column:2;font-size:24px;line-height:1.15;margin:1px 0}
  .pk-page .gz-price sup{font-size:12px;margin-right:4px}
  .pk-page .gz-cta{grid-column:1;grid-row:1/4;align-self:center;display:inline-flex;align-items:center;gap:8px;
    height:40px;padding:0 5px 0 15px;border-radius:999px;
    background:var(--gz-primary-soft);border:1.5px solid #cfdffb;color:var(--gz-primary);
    font-size:13.5px;font-weight:700;letter-spacing:-.005em;white-space:nowrap;transition:background .15s,border-color .15s}
  .pk-page .gz-cta-i{box-sizing:content-box;width:16px;height:16px;padding:5px;border-radius:50%;
    background:var(--gz-primary);color:#fff}
  .pk-page .gz-card:active .gz-cta{background:#dde9fd;border-color:#b9d0f8}

  /* "Build your own package" card: slimmer */
  .pk-page .gz-build{padding:12px 14px;border-radius:14px}
  .pk-page .gz-build b{font-size:14.5px}
  .pk-page .gz-build small{font-size:12.5px}

  /* note when results are relaxed */
  .gz-note{margin:0 12px 10px;font-size:12.5px}
}
@media (min-width:768px){.pk-page .gz-cta{display:none}}

/* v1.2.23: "Request a callback" floating button -> same yellow as the hotel Filter button, smaller, thinner, sitting lower */
.pk-page{--gz-fab-bottom:20px}
.pk-page .gz-fab{
  height:34px;padding:0 16px;gap:6px;border-radius:12px;
  font-size:13px;font-weight:800;letter-spacing:0;line-height:1;
  color:#06064a;
  background:linear-gradient(145deg,#FFD23F,#FFB400);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 5px 14px rgba(255,180,0,.42),0 2px 4px rgba(6,6,74,.16),inset 0 1px 0 rgba(255,255,255,.65);
  transition:transform .15s,box-shadow .15s;
}
.pk-page .gz-fab:active{background:linear-gradient(145deg,#FFD23F,#FFB400);transform:translateX(-50%) scale(.96)}
.pk-page .gz-fab:focus-visible{outline:3px solid rgba(6,6,74,.35);outline-offset:2px}
@media (min-width:768px){.pk-page{--gz-fab-bottom:22px}}