/* Hostel page (_hostels/index.php): the same page and the same sections, given a sleeker, more modern look. Scoped to body.hp, so nothing else changes. */
.hp{ --hp-ink:#14162b; --hp-mut:#4a4e69; --hp-line:#e6e8f4; --hp-soft:#f6f7fd; --hp-p:#4f46d8; --hp-p2:#7a4cff; --hp-a:#ff7846; --hp-ok:#1f9d6b;
  font-family:'Nunito',sans-serif; font-size:16px; color:var(--hp-ink); background:#f3f4fb; -webkit-font-smoothing:antialiased; }
.hp p, .hp li, .hp h1, .hp h2, .hp h3, .hp h4, .hp h5, .hp a, .hp small, .hp strong, .hp b, .hp button, .hp label, .hp input, .hp select{ font-family:'Nunito',sans-serif; }
.hp p, .hp li{ font-size:16px!important; line-height:1.75; color:var(--hp-ink); }
.hp a{ color:var(--hp-p); } .hp a.btn{ color:#fff; }

/* ---- hero ---- */
.hp header{ position:relative; display:flex; align-items:center; justify-content:center; height:auto!important; min-height:440px; max-height:none!important; padding:110px 22px 120px!important; background-size:cover!important; background-position:center!important; background-color:#27235f; }
.hp header:before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,14,50,.45) 0%,rgba(20,18,70,.78) 100%); }
.hp header .text-center{ position:relative; z-index:1; max-width:900px; }
.hp header h1{ font-weight:800!important; font-size:clamp(34px,6vw,60px)!important; line-height:1.08; letter-spacing:-.02em; color:#fff!important; -webkit-text-stroke:0!important; text-shadow:0 6px 30px rgba(0,0,0,.45)!important; margin:0 0 6px!important; }
.hp header br{ display:none; }
.hp header .btn{ border:0; border-radius:999px; padding:13px 26px; font-weight:800; font-size:15px!important; margin:8px 6px; box-shadow:0 10px 26px rgba(0,0,0,.25); transition:transform .15s, box-shadow .15s; }
.hp header .btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.3); }
.hp header .btn-danger{ background:rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.4); }
.hp header .btn-warning{ background:#fff; color:var(--hp-ink); }
.hp header .btn-info{ background:linear-gradient(120deg,var(--hp-a),#ff9a3c); color:#fff; }

/* ---- layout: a white sheet that rises over the hero ---- */
.hp section.container-fluid{ max-width:1260px; margin:-64px auto 40px; padding:0 18px; position:relative; z-index:2; }
.hp section.container-fluid > .row > .col-md-9{ background:#fff; border-radius:26px; box-shadow:0 20px 60px rgba(40,45,120,.12); padding:8px 38px 34px; }
.hp section.container-fluid > .row > .col-md-3{ padding-top:0; }
@media (min-width:992px){ .hp section.container-fluid > .row > .col-md-9{ width:calc(75% - 24px); margin-right:24px; } .hp section.container-fluid > .row > .col-md-3{ width:25%; } }
@media (max-width:991px){ .hp section.container-fluid > .row > .col-md-9{ padding:6px 20px 26px; border-radius:22px; margin-bottom:22px; } .hp header{ min-height:360px; padding:90px 18px 100px!important; } }

/* ---- section headings ---- */
.hp .page-header{ border:0; margin:40px 0 14px; padding:0; }
.hp .page-header h2, .hp .page-header h3{ display:flex; align-items:center; justify-content:flex-start; gap:12px; text-align:left!important; padding:0!important; margin:0; font-weight:800!important; font-size:24px; letter-spacing:-.01em; color:var(--hp-ink); }
.hp .page-header h2 i, .hp .page-header h3 i{ flex:none; width:40px; height:40px; border-radius:13px; background:linear-gradient(135deg,#eceaff,#fff0e8); color:var(--hp-p); display:grid; place-items:center; font-size:18px; }
.hp .page-header h3 small{ font-size:13px; padding:5px 12px; border-radius:999px; font-weight:800; margin-left:4px; }
.hp .page-header h3 small.bg-success{ background:#e5f6ee!important; color:#12724c!important; } .hp .page-header h3 small.bg-danger{ background:#fdeaea!important; color:#a32a26!important; }
.hp .page-header h3 small strong{ font-size:13px; }
.hp .page-header:first-child{ margin-top:34px; }

/* ---- gallery and map ---- */
.hp .thumbnail{ border:0; padding:0; border-radius:18px; overflow:hidden; box-shadow:0 8px 22px rgba(40,45,120,.12); margin-bottom:18px; background:#fff; }
.hp .thumbnail img{ width:100%!important; height:200px!important; object-fit:cover; transition:transform .35s; display:block; }
.hp .thumbnail:hover img{ transform:scale(1.06); }
.hp .prop_direction{ border-radius:18px; overflow:hidden; border:1px solid var(--hp-line); }
.hp .prop_direction iframe{ width:100%!important; min-height:320px; border:0; display:block; }

/* ---- room types (the booking panels) ---- */
.hp .panel-group{ margin-bottom:0; }
.hp .panel{ border:1px solid var(--hp-line)!important; border-radius:20px!important; box-shadow:0 8px 26px rgba(40,45,120,.07)!important; overflow:hidden; margin-bottom:16px!important; background:#fff; }
.hp .panel-heading{ background:#fff!important; border:0!important; padding:18px 22px!important; }
.hp .panel-title{ display:flex; align-items:center; justify-content:space-between; gap:12px 18px; flex-wrap:wrap; font-size:19px!important; }
.hp .panel-title a{ color:var(--hp-ink)!important; font-weight:800; font-size:19px; }
.hp .panel-title a .fa{ color:var(--hp-p); font-size:14px; }
.hp .panel-title > span{ float:none!important; font-weight:800!important; font-size:15px; color:var(--hp-p); background:#eef0ff; border-radius:999px; padding:8px 16px; }
.hp .panel-body{ background:var(--hp-soft)!important; padding:20px 22px!important; border:0!important; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.hp .panel-body:before, .hp .panel-body:after{ display:none!important; }
.hp .panel-body > p{ margin:0!important; background:#fff; border:1px solid var(--hp-line); border-radius:14px; padding:12px 14px; font-weight:800; font-size:15px!important; line-height:1.5; }
.hp .panel-body > p small{ font-size:15px; font-weight:600; color:var(--hp-mut); }
.hp .panel-body > p .fa{ color:var(--hp-p); margin-right:6px; }
.hp .panel-body > .text-right{ grid-column:1 / -1; text-align:right; }
.hp .panel-body .btn-success, .hp .panel-body .btn-success b, .hp .panel-body .btn-success .fa{ color:#fff!important; }
.hp .panel-body .btn-success{ background:linear-gradient(120deg,var(--hp-p),var(--hp-p2)); border:0; border-radius:14px; padding:14px 26px; font-size:16px; font-weight:800; box-shadow:0 12px 26px rgba(79,70,216,.3); transition:transform .15s; }
.hp .panel-body .btn-success:hover{ transform:translateY(-2px); }
.hp .panel-body .btn-success[disabled]{ opacity:.5; box-shadow:none; }
@media (max-width:700px){ .hp .panel-body{ grid-template-columns:minmax(0,1fr); } .hp .panel-body > .text-right{ text-align:stretch; } .hp .panel-body .btn-success{ display:block; width:100%; text-align:center; } .hp .panel-title > span{ width:100%; text-align:center; } }

/* ---- staff ---- */
.hp .team figure{ margin:0 0 18px; }
.hp .team img{ width:100%; height:210px!important; object-fit:cover; border-radius:18px; box-shadow:0 8px 22px rgba(40,45,120,.12); }
.hp .team figcaption{ position:static!important; background:none!important; opacity:1!important; color:var(--hp-ink); padding:10px 4px 0; text-align:center; }
.hp .team figcaption p{ top:0!important; position:static!important; margin:0; font-size:15px!important; line-height:1.4; } .hp .team figcaption b{ display:block; font-size:16px; }

/* ---- the right-hand column ---- */
.hp .col-md-3 .bars, .hp .col-md-3 > .page-header, .hp .col-md-3 > h5, .hp .col-md-3 > .facs{ background:#fff; }
.hp .col-md-3 > .bars{ border-radius:22px; padding:6px 20px 20px; box-shadow:0 10px 34px rgba(40,45,120,.08); margin-bottom:18px; }
.hp .col-md-3 .page-header{ margin:20px 0 10px; }
.hp .col-md-3 .page-header h3{ font-size:18px; padding:0!important; gap:10px; justify-content:flex-start; text-align:left!important; }
.hp .col-md-3 .page-header h3 .fa{ width:34px; height:34px; border-radius:11px; background:#eceaff; color:var(--hp-p); display:inline-grid; place-items:center; font-size:15px; }
.hp .bar-title{ font-size:14px!important; font-style:normal!important; font-weight:800; text-align:left!important; margin:14px 0 6px!important; color:var(--hp-ink); }
.hp .bar{ height:10px!important; border-radius:99px; background:#eceef8!important; overflow:visible; }
.hp .bar-inner{ background:linear-gradient(90deg,var(--hp-p),var(--hp-a))!important; border-radius:99px; }
.hp .bar-inner:after{ display:none; } .hp .hp-pct{ float:right; font-weight:800; font-size:14px; color:var(--hp-mut); }
.hp .col-md-3 h5{ font-size:15px!important; line-height:1.55; background:#fff6e8; border:1px solid #f3dfa4; border-radius:14px; padding:12px 14px; margin:8px 0; color:#5f4500; }
.hp .facs{ display:flex; align-items:center; gap:10px; padding:5px 2px; } .hp .facs h4{ font-size:15px!important; font-weight:700; margin:0; display:inline-block; }
.hp .facs .fa{ color:var(--hp-ok); }

/* ---- a button that stays within reach on phones ---- */
.hp-cta{ display:none; }
@media (max-width:991px){ .hp-cta{ display:block; position:fixed; left:14px; right:14px; bottom:14px; z-index:50; text-align:center; background:linear-gradient(120deg,var(--hp-a),#ff9a3c); color:#fff!important; font-weight:800; font-size:16px; padding:15px; border-radius:16px; box-shadow:0 14px 32px rgba(255,120,70,.45); text-decoration:none; } .hp section.container-fluid{ padding-bottom:70px; } }