/* Holiday packages — listing, country, detail, application & payment pages.
   Uses only design tokens (--navy, --teal, --line, --muted, --soft …). */

/* ---------- Filter bar ---------- */
.pkg-filter{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;box-shadow:0 6px 20px rgba(12,43,63,.06);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end}
.pkg-filter .fld{margin-bottom:0}
.pkg-filter.has-btn{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto}
@media (max-width:820px){.pkg-filter,.pkg-filter.has-btn{grid-template-columns:1fr}}

/* ---------- Package cards ---------- */
/* auto-fit + center: one or two packages sit in the middle instead of leaving an empty row end */
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,calc((100% - 40px) / 3)));justify-content:center;gap:20px}
@media (max-width:1000px){.pkg-grid{grid-template-columns:repeat(auto-fit,minmax(0,calc((100% - 20px) / 2)))}}
@media (max-width:640px){.pkg-grid{grid-template-columns:1fr}}
.pkg-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(12,43,63,.07);transition:transform .18s,box-shadow .18s,border-color .18s}
.pkg-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(12,43,63,.12);border-color:#cfe3de}
.pkg-media{position:relative;aspect-ratio:4/3;background:linear-gradient(120deg,var(--navy),#14506a);overflow:hidden;display:block}
.pkg-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.pkg-card:hover .pkg-media img{transform:scale(1.04)}
.pkg-media .pkg-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55)}
.pkg-media .pkg-ph svg{width:54px;height:54px}
.pkg-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,24,36,0) 55%,rgba(6,24,36,.55) 100%);pointer-events:none}
.pkg-stars{position:absolute;top:12px;inset-inline-end:12px;z-index:2;display:inline-flex;gap:2px;background:rgba(255,255,255,.92);border-radius:30px;padding:5px 10px;color:#f2a900}
.pkg-stars svg{width:14px;height:14px;fill:currentColor}
.pkg-offer{position:absolute;top:12px;inset-inline-start:12px;z-index:2;background:#d64545;color:#fff;border-radius:30px;padding:4px 12px;font-size:12.5px;font-weight:800}
.pkg-loc{position:absolute;bottom:12px;inset-inline-start:14px;z-index:2;color:#fff;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.pkg-loc svg{width:15px;height:15px}
.pkg-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.pkg-body h3{font-size:18px;font-weight:800;color:var(--navy);line-height:1.45}
.pkg-body h3 a:hover{color:var(--teal-d)}
.pkg-hotel{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:700;font-size:14.5px}
.pkg-hotel svg{width:16px;height:16px;color:var(--teal-d)}
.pkg-desc{color:var(--muted);font-size:14.5px;line-height:1.7}
.pkg-foot{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pkg-price small{display:block;color:var(--muted);font-size:12.5px;font-weight:700}
.pkg-price b{font-size:20px;font-weight:900;color:var(--teal-d)}
.pkg-price b span{font-size:13px;font-weight:700;color:var(--muted)}
.pkg-foot .btn{padding:10px 18px;font-size:14.5px}

.pkg-loading{display:flex;flex-direction:column;align-items:center;gap:12px;padding:44px 0;color:var(--muted);font-weight:700}
.pkg-spin{width:38px;height:38px;border-radius:50%;border:4px solid #d7ece8;border-top-color:var(--teal);animation:pkgspin .8s linear infinite}
@keyframes pkgspin{to{transform:rotate(360deg)}}
.pkg-empty{grid-column:1/-1}

/* Laravel custom pagination (pagination.custom) */
.ht-pagination .pagination-wrapper{width:100%}
.ht-pagination .d-flex{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;width:100%}
.ht-pagination .text-muted{color:var(--muted);font-size:13.5px}
.ht-pagination .pagination{margin:0}
.ht-pagination .page-item{list-style:none}
.ht-pagination .page-item span.page-link{cursor:default}
@media (max-width:640px){.ht-pagination .d-flex{justify-content:center}}

/* ---------- Detail page ---------- */
.pkg-hero{min-height:360px;display:flex;align-items:flex-end}
.pkg-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pkg-hero .pkg-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,24,36,.10) 0%,rgba(6,24,36,.85) 100%)}
.pkg-hero > .container{position:relative;z-index:2;width:min(1200px,100% - 40px);padding-top:80px}
@media (max-width:720px){.pkg-hero{min-height:260px}}
.pkg-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pkg-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:30px;padding:5px 12px;font-size:13.5px;font-weight:700}
.pkg-chip svg{width:15px;height:15px}
.pkg-chip.stars{color:#ffd166}
.pkg-chip.stars svg{fill:currentColor}
.pkg-text{color:var(--ink);line-height:1.9;font-size:15.5px;white-space:pre-line}
.pkg-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pkg-gallery a{display:block;cursor:zoom-in;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--soft)}
.pkg-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.pkg-gallery a:hover img{transform:scale(1.05)}
@media (max-width:640px){.pkg-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pkg-map{height:300px;border-radius:12px;overflow:hidden;margin-top:12px;border:1px solid var(--line)}
.pkg-facts{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:10px;padding:0}
.pkg-facts li{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:14.5px}
.pkg-facts svg{width:17px;height:17px;color:var(--teal-d);flex:none}
.pkg-inc{list-style:none;padding:0;margin:0;display:grid;gap:0}
.pkg-inc li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);font-weight:600;color:var(--ink)}
.pkg-inc li:last-child{border-bottom:0}
.pkg-inc li::before{content:"✓";width:22px;height:22px;border-radius:50%;background:#eaf8f4;color:var(--teal-d);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;flex:none}
.pkg-opt{border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;transition:border-color .15s,box-shadow .15s;background:#fff}
.pkg-opt + .pkg-opt{margin-top:12px}
.pkg-opt:hover{border-color:var(--teal);box-shadow:0 0 0 3px rgba(24,174,151,.10)}
.pkg-opt-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.pkg-opt-top b{color:var(--navy);font-size:15px}
.pkg-opt-top strong{color:var(--teal-d);font-size:19px;font-weight:900;white-space:nowrap}
.pkg-opt-top strong span{font-size:12.5px;color:var(--muted);font-weight:700}
.pkg-opt p{color:var(--muted);font-size:13.5px;margin-bottom:10px}

/* ---------- Application form (service-apply family) ---------- */
.hpf .fld input,.hpf .fld select,.hpf .fld textarea{width:100%}
.hpf .fld .ht-error{margin-top:0}
.hpf .fld input.is-invalid,.hpf .fld textarea.is-invalid{border-color:#d64545}
.hpf .fld input.is-valid{border-color:var(--teal)}
.hpf .date-show{margin-top:6px;background:#eaf8f4;color:#0f6b5c;border-radius:10px;padding:10px 14px;font-weight:700;font-size:14.5px}
.hpf .date-show:empty{display:none}
.hpf .upl-field{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:14px;background:#fff}
.hpf .upl-field > label{display:block;font-weight:800;color:var(--navy);font-size:15px;margin-bottom:4px}
.hpf .upl-field > label em{color:#c0392b;font-style:normal}
.hpf .upl-field .ht-help{display:block;margin-bottom:8px}
.hpf .upl-field input[type=file]{width:100%;border:1px dashed #c9d6de;border-radius:12px;padding:12px;background:var(--soft);font:inherit;font-size:14px;cursor:pointer}
.hpf .upl-field textarea,.hpf .upl-field input[type=text]{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;background:#fff}
.hpf .upl-field textarea{min-height:90px;resize:vertical}
.hpf .filepond--root{margin-bottom:6px;font-family:inherit}
.hpf .filepond--panel-root{background:var(--soft);border:1px dashed #c9d6de;border-radius:12px}
.hpf .filepond--drop-label{color:var(--muted);font-weight:600}
.hpf .filepond--label-action{color:var(--teal-d);text-decoration-color:var(--teal)}
.hpf .filepond--item-panel{background:var(--navy)}
.hpf [data-filepond-item-state='processing-complete'] .filepond--item-panel{background:var(--teal)}
.hpf .sub-h{font-size:16px;font-weight:800;color:var(--navy);margin:18px 0 10px}
.hpf .stickybar .tot b{font-size:17px}

/* ---------- Payment selection ---------- */
.pay-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:640px){.pay-opts{grid-template-columns:1fr}}
.pay-opt{border:1.5px solid var(--line);border-radius:16px;padding:22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;transition:border-color .15s,box-shadow .15s,transform .15s}
.pay-opt:hover{border-color:var(--teal);box-shadow:0 10px 24px rgba(12,43,63,.08);transform:translateY(-2px)}
.pay-opt .ic{width:54px;height:54px;border-radius:16px;background:#e8f6f3;color:var(--teal-d);display:flex;align-items:center;justify-content:center}
.pay-opt .ic svg{width:26px;height:26px}
.pay-opt.later .ic{background:#fff8e8;color:#b07d10}
.pay-opt h3{font-size:18px;font-weight:800;color:var(--navy)}
.pay-opt p{color:var(--muted);font-size:14px;flex:1}
.pay-opt .ht-btn{width:100%;margin-top:6px}
.pay-total{background:linear-gradient(120deg,var(--navy),#14506a);color:#fff;border-radius:14px;padding:16px 18px;margin-top:14px}
.pay-total .ht-sum{color:#dbe9f0;border-bottom-color:rgba(255,255,255,.18)}
.pay-total .ht-sum.disc{color:#8ff0d6}
.pay-total .ht-sum.total{color:#fff;border-top-color:rgba(255,255,255,.25)}
.pay-total .ht-sum.total b{font-size:22px}