.bh-home{--bh-blue:#003b95;--bh-navy:#07183f;--bh-yellow:#ffc400;margin:0;color:var(--bh-navy);background:#fff;font-family:Jost,Arial,sans-serif}.bh-home *{box-sizing:border-box}.bh-shell,.bh-section{width:min(1300px,calc(100% - 40px));margin:auto}.bh-header{position:relative;z-index:20;color:#fff;background:var(--bh-blue)}.bh-topbar{height:78px;display:flex;align-items:center}.bh-logo{color:#fff;font-size:30px;font-weight:700;text-decoration:none}.bh-account-links{margin-left:auto;display:flex;align-items:center;gap:24px;font-size:13px}.bh-account-links a{color:#fff;text-decoration:none}.bh-outline{min-width:105px;height:50px;display:grid;place-items:center;border:1px solid #fff;border-radius:4px}.bh-services{height:70px;display:flex;align-items:center;gap:2px}.bh-services a{padding:14px 12px;border-radius:4px;color:#fff;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}.bh-services a.active,.bh-services a:hover{background:rgb(255 255 255 / 11%)}.bh-menu{display:none}.bh-hero{height:295px;color:#fff;background:var(--bh-blue)}.bh-hero h1{margin:0;padding-top:90px;font-size:45px}.bh-hero p{margin:7px 0 48px;font-size:20px;color:#fff}.bh-search{width:min(940px,100%);height:72px;display:grid;grid-template-columns:1.6fr 1.2fr 1.3fr 168px;border:4px solid var(--bh-yellow);border-radius:5px;background:#fff;box-shadow:0 4px 12px rgb(0 0 0 / 18%)}.bh-search label{padding:10px 30px;display:grid;align-content:center;gap:3px;border-right:4px solid var(--bh-yellow);color:var(--bh-navy)}.bh-search label strong{font-size:14px}.bh-search input{width:100%;border:0;outline:0;color:#718096}.bh-search label span{color:#718096;font-size:14px}.bh-search button{border:0;color:#fff;background:#0877bb;font-size:19px;font-weight:600}.bh-section{padding:65px 0}.bh-section h2,.bh-planner h2{margin:0 0 38px;font-size:29px}.bh-events{padding-top:65px}.bh-event-card{position:relative;height:380px;display:grid;place-items:center;overflow:hidden;color:#fff;text-decoration:none}.bh-event-card::after,.bh-offers a::after,.bh-destination-grid a::after{content:"";position:absolute;inset:0;background:rgb(1 18 47 / 30%)}.bh-event-card img{width:100%;height:100%;object-fit:cover}.bh-event-card>div{position:absolute;z-index:2;display:grid;justify-items:center;gap:18px}.bh-event-card strong{font-size:37px}.bh-event-card em,.bh-offers a span{padding:14px 30px;border-radius:4px;color:var(--bh-navy);background:#fff;font-style:normal}.bh-destination-grid{display:grid;grid-template-columns:1fr 2fr 1fr;grid-template-rows:300px 300px;gap:28px}.bh-destination-grid a{position:relative;overflow:hidden;border-radius:4px;color:#fff}.bh-destination-grid .nuwara{grid-column:1/3}.bh-destination-grid a img{width:100%;height:100%;object-fit:cover}.bh-destination-grid a>span{position:absolute;top:30px;left:30px;z-index:2;display:grid}.bh-destination-grid strong{font-size:27px}.bh-destination-grid em{font-size:14px;font-style:normal}.bh-title-row{margin-bottom:38px;display:flex;align-items:center;justify-content:space-between}.bh-title-row h2{margin:0}.bh-title-row>button,.bh-title-row select{min-width:135px;height:49px;border:1px solid #003b95;border-radius:4px;color:#003b95;background:#fff}.bh-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.bh-property-card{min-width:0}.bh-property-card>div{position:relative;height:300px;overflow:hidden;border-radius:4px}.bh-property-card img{width:100%;height:100%;object-fit:cover}.bh-property-card>div>span{position:absolute;top:20px;left:0;padding:8px 15px;color:#fff;background:#06184a;font-size:11px;font-weight:700}.bh-property-card>div>span.yellow{color:#07183f;background:#ffd33c}.bh-property-card>div>button{position:absolute;top:20px;right:20px;width:34px;height:34px;border:0;border-radius:50%;background:#fff;appearance:none;-webkit-appearance:none;outline:0}.bh-property-card h3{margin:12px 0 4px;font-size:17px}.bh-property-card p{margin:0 0 14px;color:#72809a;font-size:13px}.bh-score{padding:6px;border-radius:3px;color:#fff;background:#003b95;font-weight:600}.bh-property-card>span{font-size:13px}.bh-property-card>strong{margin-top:12px;display:block;color:#003b95;font-size:15px}.bh-planner,.bh-browse{background:#fafafa}.bh-planner-head{margin-bottom:45px;display:flex;align-items:center;justify-content:space-between}.bh-planner-head h2{margin-bottom:6px}.bh-planner-head p{color:#77849a}.bh-tabs{display:flex;gap:10px}.bh-tabs button{height:48px;padding:0 19px;border:0;border-radius:4px;color:var(--bh-navy);background:#f0f0f0}.bh-tabs button.active{color:#fff;background:#003b95}.bh-why>div{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center}.bh-why article>span{font-size:56px;color:#e6a72b}.bh-why h3{margin:15px 0 8px}.bh-why p{max-width:280px;margin:auto;color:#76849c;font-size:14px}.bh-offers>div{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.bh-offers a{position:relative;height:450px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border-radius:4px;color:#fff;text-decoration:none}.bh-offers img{position:absolute;width:100%;height:100%;object-fit:cover}.bh-offers strong,.bh-offers span{position:relative;z-index:2}.bh-offers strong{max-width:320px;margin-bottom:35px;font-size:30px}.bh-footer{padding:65px max(20px,calc((100% - 1300px)/2));color:#fff;background:#0c2e5e}.bh-footer-links{display:grid;grid-template-columns:repeat(5,1fr);gap:45px}.bh-footer-links>div{display:grid;align-content:start;gap:18px}.bh-footer a{color:#fff;text-decoration:none}.bh-copy{margin-top:60px;padding-top:25px;border-top:1px solid rgb(255 255 255 / 22%);font-size:13px}
@media(max-width:1000px){.bh-account-links>span,.bh-account-links>a:first-of-type{display:none}.bh-services{overflow:auto}.bh-card-grid{grid-template-columns:repeat(2,1fr)}.bh-tabs{max-width:600px;overflow:auto}.bh-footer-links{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.bh-shell,.bh-section{width:min(100% - 26px,1300px)}.bh-topbar{height:64px}.bh-logo{font-size:24px}.bh-account-links{gap:8px}.bh-outline{min-width:70px;height:38px}.bh-services{height:58px}.bh-services a{font-size:13px}.bh-hero{height:auto;padding-bottom:24px}.bh-hero h1{padding-top:28px;font-size:35px}.bh-hero p{margin-bottom:14px}.bh-search{height:auto;grid-template-columns:1fr}.bh-search label{min-height:60px;border-right:0;border-bottom:2px solid var(--bh-yellow)}.bh-search button{min-height:55px}.bh-event-card{height:260px}.bh-event-card strong{padding:0 20px;font-size:25px;text-align:center}.bh-destination-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,220px);gap:12px}.bh-destination-grid .nuwara{grid-column:auto}.bh-card-grid{gap:16px}.bh-property-card>div{height:210px}.bh-planner-head{align-items:flex-start;flex-direction:column}.bh-tabs{width:100%}.bh-why>div{grid-template-columns:1fr}.bh-offers>div{grid-template-columns:1fr}.bh-offers a{height:320px}.bh-footer-links{grid-template-columns:1fr 1fr}}
@media(max-width:450px){.bh-account-links .bh-outline:first-of-type{display:none}.bh-card-grid{grid-template-columns:1fr}.bh-destination-grid{grid-template-columns:1fr;grid-template-rows:repeat(6,220px)}.bh-footer-links{grid-template-columns:1fr}.bh-title-row{align-items:flex-start;flex-direction:column;gap:15px}}

/* Keep the current module visibly selected while using a lighter hover state. */
.bh-services a.active{color:#fff;background:rgb(255 255 255 / 18%);box-shadow:inset 0 -3px 0 var(--bh-yellow)}
.bh-services a:hover:not(.active){background:rgb(255 255 255 / 9%);box-shadow:none}

/* Full-width homepage event banner with container-aligned heading. */
.bh-section.bh-events{width:100%;max-width:none}
.bh-events>h2{width:min(1300px,calc(100% - 64px));margin-right:auto;margin-left:auto}
.bh-events>.bh-event-card{width:100%;border-radius:0}
@media(max-width:640px){.bh-events>h2{width:calc(100% - 28px)}}

.bh-browse .bh-card-grid{grid-template-rows:auto}
.bh-browse .bh-property-card[hidden]{display:none!important}
.bh-browse.is-loading .bh-card-grid{opacity:.55;pointer-events:none}.bh-browse .bh-card-grid{transition:opacity .15s}.bh-browse-empty{margin:10px 0 0;padding:28px;border:1px dashed #b9cbe0;border-radius:6px;color:#607d9b;background:#f7faff;text-align:center}.bh-browse-empty[hidden]{display:none!important}
.bh-browse .bh-property-card>div>a{width:100%;height:100%;display:block}
.bh-browse-dots{display:flex;align-items:center;justify-content:center;gap:12px}
.bh-browse-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#d7dbe3;cursor:pointer;appearance:none;-webkit-appearance:none}
.bh-browse-dots button.active{background:#003b95}
.bh-slider-nav>button:disabled{opacity:.3;cursor:not-allowed}
.bh-event-card .bh-event-button{padding:14px 30px;border-radius:4px;color:var(--bh-navy);background:#fff}
.bh-destination-grid .bh-destination-count{font-size:14px;font-style:normal}
.bh-browse{background:#fff}.bh-browse .bh-title-row{min-height:58px;margin-bottom:32px;align-items:center;flex-direction:row}.bh-browse .bh-title-row h2{width:auto;margin:0;white-space:nowrap}.bh-browse .bh-title-row select{flex:0 0 180px;width:180px!important;min-width:180px;height:50px;padding:0 18px;border:1px solid #d9dee8;border-radius:4px;color:var(--bh-navy);background-color:#fff;font-size:14px;font-weight:500}.bh-browse .bh-card-grid{align-items:start}.bh-property-card>div>button{display:grid;place-items:center;color:#26364d;font-size:18px}.bh-slider-nav{grid-column:1/-1;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:13px}.bh-slider-nav button{width:30px;height:30px;border:0;color:#111;background:transparent;font-size:22px;cursor:pointer}.bh-slider-nav span{width:7px;height:7px;border-radius:50%;background:#d9d9d9}.bh-slider-nav span.active{background:#003b95}
.bh-search{position:relative}.bh-popup-trigger{cursor:pointer;user-select:none}.bh-popup-trigger.open{background:#f7faff}.bh-search-popup{position:absolute;top:82px;z-index:50;display:none;border:1px solid #e2e7ef;border-radius:4px;color:var(--bh-navy);background:#fff;box-shadow:0 15px 45px rgb(3 24 62 / 20%)}.bh-search-popup.open{display:block}.bh-date-popup{left:0;width:min(900px,calc(100vw - 32px));padding:22px 28px 28px}.bh-popup-head{display:flex;align-items:center;justify-content:space-between}.bh-popup-head>button{width:38px;height:38px;border:0;color:#12213d;background:transparent;font-size:23px}.bh-calendar-months{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:42px}.bh-calendar{min-width:0}.bh-calendar>strong{display:block;margin-bottom:18px;text-align:center}.bh-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.bh-calendar-grid span,.bh-calendar-grid button{height:38px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;font-size:12px;appearance:none;-webkit-appearance:none}.bh-calendar-grid span{height:28px;font-weight:700}.bh-calendar-grid button{cursor:pointer}.bh-calendar-grid button:hover{color:#fff;background:#003b95}.bh-calendar-grid button.muted{color:#b3bdca;pointer-events:none}.bh-calendar-grid button.selected{color:#fff;background:#003b95}.bh-calendar-grid button.in-range{border-radius:4px;background:#e8f1ff}.bh-guest-popup{right:110px;width:420px;padding:12px 28px}.bh-counter-row{min-height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e1e5eb}.bh-counter-row:last-child{border-bottom:0}.bh-counter-row>div:first-child{display:grid;gap:4px}.bh-counter-row>div:first-child span{color:#76849a;font-size:12px}.bh-counter-row>div:last-child{display:flex;align-items:center;gap:18px}.bh-counter-row button{width:40px;height:40px;border:1px solid #003b95;border-radius:4px;color:#003b95;background:#fff;font-size:20px}.bh-counter-row [data-value]{min-width:16px;text-align:center}
@media(max-width:700px){.bh-search-popup{top:auto;bottom:auto;margin-top:4px}.bh-date-popup{left:-3px;width:calc(100% + 6px);padding:16px}.bh-calendar-months{grid-template-columns:1fr;gap:20px}.bh-calendar:nth-child(2){display:none}.bh-guest-popup{right:-3px;width:calc(100% + 6px)}.bh-calendar-grid span,.bh-calendar-grid button{height:34px}}

/* Template typography and icon system */
.bh-home,.bh-home button,.bh-home input,.bh-home select{font-family:"Jost",Arial,sans-serif}.bh-logo{font-family:"Jost",Arial,sans-serif;font-weight:600;letter-spacing:-.035em}.bh-topbar{font-weight:500}.bh-account-links{font-weight:500}.bh-services a{display:inline-flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.01em}.bh-services a>span:first-child{width:22px;display:inline-grid;place-items:center;font-size:20px;font-weight:400}.bh-account-links>span:first-child{width:20px;height:20px;display:grid;place-items:center;font-size:17px}.bh-search>button{display:flex;align-items:center;justify-content:center;gap:11px}.bh-search>button .icon-search{font-size:20px}.bh-hero h1,.bh-section h2,.bh-planner h2{font-family:"Jost",Arial,sans-serif;font-weight:600;letter-spacing:-.025em}.bh-property-card h3{font-weight:500;letter-spacing:-.012em}.bh-property-card>strong{font-weight:500}.bh-footer a{font-weight:400}.bh-counter-row button{font-family:"Jost",Arial,sans-serif}
@media(max-width:640px){.bh-services a{justify-content:flex-start}.bh-services a>span:first-child{font-size:18px}.bh-logo{letter-spacing:-.025em}}
.bh-calendar-grid .bh-calendar-day{position:relative!important;width:38px!important;height:38px!important;min-width:0!important;min-height:0!important;margin:0 auto!important;padding:0!important;display:grid!important;place-items:center!important;border:0!important;border-radius:50%!important;color:#0b1b43!important;background:transparent!important;font:500 13px/1 "Jost",Arial,sans-serif!important;opacity:1!important;visibility:visible!important;transform:none!important}.bh-calendar-grid .bh-calendar-day:hover{color:#fff!important;background:#003b95!important}.bh-calendar-grid .bh-calendar-day.selected{color:#fff!important;background:#003b95!important}.bh-calendar-grid .bh-calendar-day.in-range{border-radius:4px!important;color:#003b95!important;background:#e8f1ff!important}.bh-calendar-grid>button.muted{width:38px!important;height:38px!important;display:block!important;visibility:hidden!important}.bh-calendar-grid{grid-auto-rows:38px;align-items:center}
.bh-calendar-grid .bh-calendar-day:disabled{color:#b8c0cc!important;background:transparent!important;cursor:not-allowed!important;text-decoration:line-through;opacity:.65!important}.bh-calendar-actions{margin-top:20px;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #e1e5eb}.bh-calendar-status{color:#5f6f86;font-size:13px}.bh-calendar-apply{min-width:120px;height:42px!important;padding:0 18px!important;border:0!important;border-radius:4px!important;color:#fff!important;background:#0879bd!important;font:600 14px "Jost",Arial,sans-serif!important;cursor:pointer}.bh-calendar-apply:disabled{color:#8994a5!important;background:#e2e6eb!important;cursor:not-allowed}
@media(max-width:500px){.bh-calendar-grid .bh-calendar-day,.bh-calendar-grid>button.muted{width:34px!important;height:34px!important}.bh-calendar-grid{grid-auto-rows:34px}}
.bh-destination-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:300px 300px}.bh-destination-grid .kandy{grid-column:span 2}.bh-destination-grid .nuwara{grid-column:span 2}.bh-why article>img{width:70px;height:70px;object-fit:contain}.bh-why article{display:flex;flex-direction:column;align-items:center}

/* Reference-layout refinements */
.bh-home{min-width:320px;overflow-x:hidden;line-height:1.45}.bh-home main{display:block}.bh-header>.bh-shell{position:relative}.bh-header{box-shadow:none}.bh-topbar,.bh-services{padding-inline:0}.bh-services{scrollbar-width:none}.bh-services::-webkit-scrollbar{display:none}.bh-hero .bh-shell{position:relative;height:100%}.bh-section>h2{line-height:1.2}.bh-event-card,.bh-destination-grid a,.bh-property-card>div,.bh-offers a{box-shadow:none}.bh-property-card{color:var(--bh-navy)}.bh-property-card button.saved{color:#e11d48}.bh-offers{padding-bottom:90px}.bh-footer{line-height:1.45}
@media(min-width:1200px){.bh-shell,.bh-section{width:min(1300px,calc(100% - 64px))}.bh-header .bh-shell{width:min(1300px,calc(100% - 64px))}.bh-property-card>div{aspect-ratio:1/1;height:auto}.bh-footer{padding-inline:max(32px,calc((100% - 1300px)/2))}}
@media(max-width:1199px){.bh-account-links{gap:14px}.bh-services a{padding-inline:10px}.bh-search{grid-template-columns:1.6fr 1.2fr 1.25fr 150px}.bh-destination-grid{gap:18px}.bh-card-grid{gap:22px}.bh-planner-head{gap:25px}.bh-tabs button{padding-inline:14px;white-space:nowrap}}
@media(max-width:900px){.bh-topbar{padding-right:55px}.bh-account-links .bh-outline:last-child{display:none}.bh-menu{position:absolute;top:18px;right:18px;z-index:30;width:40px;height:40px;display:none;border:1px solid rgb(255 255 255 / 45%);border-radius:4px;color:#fff;background:transparent}.bh-hero h1{padding-top:40px}.bh-hero p{margin-bottom:16px}.bh-section{padding-block:52px}.bh-event-card{height:320px}.bh-event-card strong{font-size:30px}.bh-destination-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,240px)}.bh-destination-grid .kandy,.bh-destination-grid .nuwara{grid-column:auto}.bh-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bh-property-card>div{height:auto;aspect-ratio:1/1}.bh-planner-head{align-items:flex-start;flex-direction:column}.bh-tabs{width:100%;padding-bottom:5px;overflow-x:auto}.bh-footer-links{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.bh-shell,.bh-section{width:min(100% - 28px,1300px)}.bh-header .bh-shell{width:100%}.bh-topbar{height:68px;padding:0 64px 0 16px}.bh-logo{font-size:24px}.bh-account-links{display:none}.bh-menu{display:grid;place-items:center}.bh-services{height:auto;max-height:0;padding:0 12px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;transition:max-height .25s ease,padding .25s ease}.bh-header.menu-open .bh-services{max-height:390px;padding-block:10px 16px}.bh-services a{padding:11px 10px;font-size:12px}.bh-hero{height:auto;padding-bottom:22px}.bh-hero h1{padding-top:26px;font-size:34px;line-height:1.15}.bh-hero p{margin:6px 0 12px;font-size:18px}.bh-search{width:100%;height:auto;grid-template-columns:1fr;border-width:3px}.bh-search label{min-height:60px;padding:8px 18px;border-right:0;border-bottom:2px solid var(--bh-yellow)}.bh-search button{min-height:54px}.bh-section{padding-block:45px}.bh-section h2,.bh-planner h2{margin-bottom:25px;font-size:25px}.bh-event-card{height:250px}.bh-event-card>div{gap:10px}.bh-event-card strong{padding-inline:14px;font-size:23px;line-height:1.2;text-align:center}.bh-event-card .bh-event-button{padding:10px 20px}.bh-destination-grid{grid-template-columns:1fr;grid-template-rows:repeat(6,210px);gap:12px}.bh-destination-grid a>span{top:20px;left:20px}.bh-destination-grid strong{font-size:23px}.bh-title-row{margin-bottom:25px;align-items:flex-start;flex-direction:column;gap:14px}.bh-card-grid{grid-template-columns:1fr;gap:34px}.bh-property-card>div{aspect-ratio:1.18/1}.bh-planner .bh-section{padding-block:45px}.bh-tabs{gap:8px}.bh-tabs button{height:42px;padding-inline:14px}.bh-why>div{grid-template-columns:1fr;gap:42px}.bh-why article>span{font-size:45px}.bh-offers>div{grid-template-columns:1fr;gap:18px}.bh-offers a{height:300px}.bh-offers strong{padding-inline:20px;font-size:25px;text-align:center}.bh-footer{padding:45px 20px}.bh-footer-links{grid-template-columns:1fr 1fr;gap:35px 22px}.bh-copy{line-height:1.7}}
@media(max-width:390px){.bh-footer-links{grid-template-columns:1fr}.bh-destination-grid{grid-template-rows:repeat(6,190px)}.bh-property-card>div{aspect-ratio:1/1}.bh-services{grid-template-columns:1fr}}

/* Hero typography, matched to the reference site (dev.bookingshub.lk), whose
   rules are .booking-home-title / .booking-home-subtitle. These are appended
   last so they win over the earlier .bh-hero declarations, including the shared
   heading rule that set font-weight:600 and letter-spacing:-.025em.
   Margins are deliberately left alone - only type is changed here. */
.bh-hero h1{font-size:48px;font-weight:700;line-height:1.08;letter-spacing:normal}
.bh-hero p{font-size:clamp(20px,1.9vw,26px);font-weight:300;line-height:1.35;color:#fff}
@media(max-width:991px){.bh-hero h1{font-size:34px}.bh-hero p{font-size:19px}}

/* Contemporary hero-title treatment shared by home and accommodation pages. */
.bh-hero-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:.22em;font-size:clamp(42px,4.2vw,58px)!important;font-weight:700!important;line-height:1.02!important;letter-spacing:-.045em!important;text-wrap:balance}
.bh-hero-title__accent{position:relative;z-index:0;color:#ffd33f}
.bh-hero-title__accent::after{position:absolute;right:.02em;bottom:-.08em;left:.02em;z-index:-1;height:.13em;border-radius:999px;background:linear-gradient(90deg,#ffd33f,rgba(255,211,63,.16));content:"";transform:rotate(-1deg)}
@media(max-width:640px){.bh-hero-title{font-size:clamp(34px,10vw,44px)!important;letter-spacing:-.035em!important}}

/* Deal cards link to their listing page. The image anchor has to fill its
   wrapper or only the image's own box would be clickable. */
.bh-deals .bh-property-card>div>a{width:100%;height:100%;display:block}
.bh-deals .bh-property-card h3 a{color:inherit;text-decoration:none}
.bh-deals .bh-property-card h3 a:hover{text-decoration:underline}
.bh-deals .bh-property-card .bh-strike{margin-top:12px;display:block;color:#8994a5;font-size:13px;text-decoration:line-through}
.bh-deals .bh-property-card .bh-strike+strong{margin-top:2px}

/* "Why Choose Us", matched to the reference layout. The card titles were
   inheriting Bootstrap's fluid h3 from vendors.css - calc(1.3rem + .6vw),
   about 31px on a desktop - which is why they read as headings rather than
   captions. The catalogue page already pins its own to 18px; this is the
   same value, so the two pages finally agree. The heading block is centred
   over the columns and the icons sit a little larger, as the reference has
   them. .bh-why-lead is a direct child p, not a div, so the three-column
   grid rule (.bh-why>div) cannot pick it up. */
.bh-why h2{margin-bottom:9px;text-align:center}
/* Qualified with .bh-why: the plain .bh-why p rule is a class-plus-element
   selector, so a bare .bh-why-lead would lose to it and the subtitle would
   inherit the 280px card width. */
.bh-why p.bh-why-lead{max-width:640px;margin:0 auto 58px;color:#76849c;font-size:15px;text-align:center}
.bh-why h3{font-size:18px}
.bh-why article>img{width:82px;height:82px}
.bh-why p{line-height:1.7}
@media(max-width:640px){.bh-why p.bh-why-lead{margin-bottom:34px;font-size:14px}}

/* Trending Events banner. The whole card is already an anchor, so the heading
   clicks - what it had was no hover feedback of any kind, which left a
   full-width banner looking like decoration. On hover the flat dark scrim
   warms to the brand blue, the photo eases in slightly and the button
   inverts, so all three read as one target rather than only the button being
   live. The scrim carries the tint rather than the card, so the text keeps
   its contrast against it. */
.bh-event-card::after{transition:background .25s ease}
.bh-event-card img{transition:transform .4s ease}
.bh-event-card .bh-event-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:color .2s ease,background-color .2s ease}
.bh-event-card .bh-event-button__icon{font-size:.85em;transition:transform .2s ease}
.bh-event-card:hover .bh-event-button__icon,.bh-event-card:focus-visible .bh-event-button__icon{transform:translateX(3px)}
.bh-event-card:hover::after,.bh-event-card:focus-visible::after{background:rgb(0 59 149 / 52%)}
.bh-event-card:hover img,.bh-event-card:focus-visible img{transform:scale(1.04)}
.bh-event-card:hover .bh-event-button,.bh-event-card:focus-visible .bh-event-button{color:#fff;background:var(--bh-blue)}
/* Inset, because the card is full-bleed and an outset ring would be clipped. */
.bh-event-card:focus-visible{outline:3px solid var(--bh-yellow);outline-offset:-3px}
@media(prefers-reduced-motion:reduce){
.bh-event-card::after,.bh-event-card img,.bh-event-card .bh-event-button,.bh-event-card .bh-event-button__icon{transition:none}
.bh-event-card:hover img,.bh-event-card:focus-visible img,.bh-event-card:hover .bh-event-button__icon,.bh-event-card:focus-visible .bh-event-button__icon{transform:none}
}

/* Keep adjacent homepage sections visually connected. The shared 65px
   top-and-bottom padding used to stack into 130px gaps at these boundaries. */
.bh-events{padding-top:34px;padding-bottom:18px;background:linear-gradient(180deg,#f7faff 0,#fff 138px)}
.bh-events>h2{margin-bottom:30px}
.bh-events + .bh-section{padding-top:18px;padding-bottom:38px}
.bh-deals{padding-block:38px}
.bh-deals + .bh-planner .bh-section{padding-top:38px}
.bh-planner .bh-section{padding-bottom:38px}
.bh-planner + .bh-why{padding-top:38px}
.bh-why{padding-bottom:38px}
.bh-why + .bh-browse .bh-section{padding-top:38px}
.bh-browse .bh-section{padding-bottom:8px}
.bh-browse + .bh-offers{padding-top:8px;padding-bottom:10px}
.bh-home footer.footer{margin-top:0!important}
.bh-wishlist-notice{position:fixed;right:24px;bottom:24px;z-index:1000;padding:12px 18px;border-radius:6px;color:#fff;background:#003b95;box-shadow:0 10px 30px rgb(0 0 0 / 20%);font-size:14px;opacity:0;pointer-events:none;transform:translateY(12px);transition:.2s ease}.bh-wishlist-notice.show{opacity:1;transform:translateY(0)}

@media(max-width:900px){
  .bh-events + .bh-section{padding-top:16px;padding-bottom:30px}
  .bh-deals{padding-block:30px}
  .bh-planner .bh-section,
  .bh-why{padding-bottom:30px}
  .bh-events{padding-top:28px;padding-bottom:16px}
  .bh-events>h2{margin-bottom:26px}
  .bh-browse .bh-section{padding-bottom:6px}
  .bh-deals + .bh-planner .bh-section,
  .bh-planner + .bh-why,
  .bh-why + .bh-browse .bh-section{padding-top:30px}
  .bh-browse + .bh-offers{padding-top:6px;padding-bottom:8px}
}

@media(max-width:640px){
  .bh-events + .bh-section{padding-top:14px;padding-bottom:24px}
  .bh-deals{padding-block:24px}
  .bh-planner .bh-section,
  .bh-why{padding-bottom:24px}
  .bh-events{padding-top:24px;padding-bottom:14px}
  .bh-events>h2{margin-bottom:22px}
  .bh-browse .bh-section{padding-bottom:4px}
  .bh-deals + .bh-planner .bh-section,
  .bh-planner + .bh-why,
  .bh-why + .bh-browse .bh-section{padding-top:24px}
  .bh-browse + .bh-offers{padding-top:4px;padding-bottom:6px}
}

/* ------------------------------------------------ white on a photograph --
   These cards are links whose words sit on top of an image, so they are set
   white. Nothing said what they should be while the pointer is on them, and a
   global `a:hover` took over - turning the heading blue against a photo, which
   is both off brand and hard to read. Pinned white through hover, focus and
   the moment of the click. The one thing that does change is the button
   inside, which fills with brand blue on purpose. */
.bh-event-card:hover,
.bh-event-card:focus,
.bh-event-card:focus-visible,
.bh-event-card:active,
.bh-event-card:hover span,
.bh-event-card:hover strong,
.bh-event-card:focus-visible span,
.bh-event-card:focus-visible strong,
.bh-destination-grid a:hover,
.bh-destination-grid a:focus,
.bh-destination-grid a:active,
.bh-destination-grid a:hover span,
.bh-destination-grid a:hover strong,
.bh-offers a:hover,
.bh-offers a:focus,
.bh-offers a:active,
.bh-offers a:hover strong { color: #fff; }

/* Said after the rule above so the button keeps its own hover. */
.bh-event-card:hover .bh-event-button,
.bh-event-card:focus-visible .bh-event-button { color: #fff; background: var(--bh-blue); }

/* One age select per child, built by home.js as the Children counter moves.
   Capped at a scroll rather than left to grow unbounded - the counter allows
   up to 20 children and a 420px popup cannot fit twenty rows on screen. */
.bh-child-ages[hidden] { display: none; }
.bh-child-ages { padding: 4px 0 14px; border-bottom: 1px solid #e1e5eb; }
.bh-child-age-rows { display: grid; gap: 10px; max-height: 220px; overflow-y: auto; }
.bh-child-age-row { display: flex; align-items: center; gap: 10px; }
.bh-child-age-row .bh-child-age-label { min-width: 58px; color: #495566; font-size: 13px; }
.bh-child-age-row select {
  flex: 1;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #c7cfdb;
  border-radius: 4px;
  color: var(--bh-navy);
  background: #fff;
  font-size: 14px;
}
.bh-child-age-row .bh-child-age-flag { display: none; color: #d33; font-size: 12px; white-space: nowrap; }
.bh-child-age-row.is-invalid select { border-color: #d33; color: #d33; }
.bh-child-age-row.is-invalid .bh-child-age-flag { display: inline; }
/* .bh-hero p{color:#fff;font-size:22px} outranks a single-class selector on
   specificity alone (it is two selectors deep) and was rendering this note
   white-on-white inside the popup - invisible except where text was
   selected. Two classes here beats that without touching the hero rule. */
.bh-search-popup .bh-child-ages-note { margin: 12px 0 0; color: #495566; font-size: 14px; line-height: 1.5; }

/* Hero-overlay homepage.

   The search bar leaves the flow and drops onto the top edge of the full-width
   banner image, the way the /browse hero does, instead of sitting on a plain
   blue strip above a white gap. The "Trending Events in Sri Lanka" line (the
   admin Settings row `home_trending_events_heading` - Inactive or blank hides
   it) rides on the banner too, centred in white just under the search bar. */
.bh-home--hero-overlay .bh-hero { height: 240px; }
.bh-home--hero-overlay .bh-hero .bh-shell { height: 100%; }
.bh-home--hero-overlay .bh-hero h1 { padding-top: 52px; }
.bh-home--hero-overlay .bh-hero p { margin-bottom: 0; }
.bh-home--hero-overlay .bh-search {
  position: absolute;
  left: 0;
  bottom: -38px;
  z-index: 30;
  width: min(940px, 100%);
  margin: 0;
}
.bh-home--hero-overlay .bh-events {
  position: relative;
  padding-top: 0;
  margin-top: 0;
  background: none;
}
.bh-home--hero-overlay .bh-event-card { height: 440px; }
.bh-home--hero-overlay .bh-events > h2 {
  position: absolute;
  top: 64px;
  left: 50%;
  right: auto;
  z-index: 3;
  width: min(940px, calc(100% - 40px));
  margin: 0;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 0;
  border-radius: 0;
  color: #ffd33f;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .14em;
  text-align: center;
  text-shadow: none;
  text-transform: uppercase;
  transform: translateX(-50%);
  backdrop-filter: none;
}
.bh-home--hero-overlay .bh-events > h2::before { display: none; }
.bh-home--hero-overlay .bh-events > h2::after {
  display: none;
}

.bh-home--hero-overlay .bh-event-card > div {
  top: 108px;
  left: 50%;
  width: min(940px, calc(100% - 40px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  transform: translateX(-50%);
}
.bh-home--hero-overlay .bh-event-card > div > span:first-child {
  order: 2;
  margin-top: 16px;
  color: rgba(255, 255, 255, .88);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
}
.bh-home--hero-overlay .bh-event-card strong {
  order: 1;
  max-width: 820px;
  padding: 0;
  font-size: clamp(48px, 5.2vw, 72px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.048em;
  text-align: center;
  text-wrap: balance;
}
.bh-home--hero-overlay .bh-event-card .bh-event-button {
  order: 3;
  min-width: 140px;
  margin-top: 24px;
  padding: 13px 24px;
  border-radius: 10px;
  color: #07183f;
  background: #ffd33f;
  font-size: 14px;
  font-weight: 600;
}

/* Once the search strip stacks into rows it is far too tall to float over the
   boundary, so below 700px it goes back into the normal flow - same call the
   /browse hero makes at its own stacking breakpoint. The heading drops back
   into the flow with it, as plain dark text above the banner. */
@media (max-width: 700px) {
  .bh-home--hero-overlay .bh-hero { height: auto; }
  .bh-home--hero-overlay .bh-hero h1 { padding-top: 26px; }
  .bh-home--hero-overlay .bh-search { position: relative; left: auto; bottom: auto; margin: 14px 0 0; }
  .bh-home--hero-overlay .bh-events { padding-top: 0; }
  .bh-home--hero-overlay .bh-event-card { height: 320px; }
  .bh-home--hero-overlay .bh-events > h2 {
    position: absolute;
    top: 18px;
    left: 50%;
    right: auto;
    z-index: 3;
    width: calc(100% - 40px);
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
    border: 0;
    border-radius: 0;
    color: #ffd33f;
    background: transparent;
    box-shadow: none;
    font-size: 11px;
    letter-spacing: .12em;
    justify-content: center;
    text-align: center;
    text-shadow: none;
    text-transform: uppercase;
    transform: translateX(-50%);
    backdrop-filter: none;
  }
  .bh-home--hero-overlay .bh-event-card > div { position: absolute; top: 50%; left: 50%; width: calc(100% - 36px); transform: translate(-50%, -50%); }
  .bh-home--hero-overlay .bh-event-card strong { padding: 0; font-size: clamp(28px, 8vw, 44px); }
  .bh-home--hero-overlay .bh-event-card > div > span:first-child { margin-top: 12px; font-size: 15px; }
  .bh-home--hero-overlay .bh-event-card .bh-event-button { margin-top: 18px; }
}

/* Brand-yellow search action used consistently across public search bars. */
.bh-search > button {
  color: var(--bh-navy);
  background: #ffd33f;
  cursor: pointer;
  transition: background-color .2s ease;
}
.bh-search > button:hover { background: #ffc400; }

/*
 * Available-Rooms table for the "Browse by Property Type" strip's Hotel /
 * Boarding House / Rent Apartment groups - the same booking widget the
 * single listing page shows (room-table.css), just stacked instead of one
 * listing at a time. It replaces .bh-card-grid for those three groups, so it
 * needs the same top margin the grid/slider-nav pair carries.
 */
.bh-room-table { margin-top: 10px; }
.bh-room-table[hidden] { display: none; }
/* The card carousel's prev/next/dots page .bh-card-grid, which sits empty
   once a room-table group is picked (its cards never render there at all) -
   an inert, arrow-and-dot control with nothing to scroll otherwise. */
.bh-slider-nav:has(~ .bh-room-table:not([hidden])) { display: none; }