/* * */ /*font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-family: var(--ibe-font, 'Nunito Sans', sans-serif);*/ :root { /* Static IBE visual tokens. Dynamic accent tokens (--ibe-accent*, --ibe-on-accent) are injected per-theme in via includes/ibe_theme_root.php. --ibe-font is set by the active font theme (css/style_{font_style}.css). */ /* One radius scale for the whole IBE (mirrors css/reservation-page.css). */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; --ibe-card-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .07); --ibe-card-shadow-hover: 0 16px 40px rgba(16, 24, 40, .14); --ibe-transition: .25s cubic-bezier(.4, 0, .2, 1); /* Neutral text/surface system — one ink, one muted, one warm paper, one hairline. Accent-tinted section wash derives from the tenant color. */ --ibe-ink: #1d2129; --ibe-muted: #5f6672; --ibe-paper: #faf9f7; --ibe-hairline: #e9e7e2; --ibe-wash: rgba(var(--ibe-accent-rgb, 28, 60, 107), .07); } body { font-family: var(--ibe-font, 'Nunito Sans', sans-serif); } h1, h3, h4, h5, h6 { font-family: var(--ibe-font, 'Nunito Sans', sans-serif); } nav.navbar.navbar-expand-lg.navbar-light { background: #323a40; } a.navbar-brand { font-size: 20px; color: #fff !important; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 300; letter-spacing: 0px; } section#header { background: #fff; } section#header .row { height: 80vh; align-items: center; justify-content: center; } .hero-logo { text-align: center; } .hero-logo h4 { font-size: 18px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; color: #141414; } .hero-logo h1 { font-size: 40px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 700; color: #141414; } .slick-slide img { width: 100%; height: 100%; object-fit: cover; } /* .slick-prev:before { content: '\f104'; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); color: #333333; font-size: 25px !important; } .slick-next:before { content: '\f105'; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); color: #333333; font-size: 25px !important; } */ button.slick-prev.slick-arrow { left: 10px; z-index: 1; height: 40px; width: 40px; border-radius: 100%; transition: .3s ease; color: #fff !important; } button.slick-next.slick-arrow { right: 10px; z-index: 1; height: 40px; width: 40px; border-radius: 100%; transition: .3s ease; color: #fff !important; } button.slick-arrow:hover{ } button.slick-arrow:hover.slick-prev:before{ color: #fff !important; } button.slick-arrow:hover.slick-next:before{ color: #fff !important; } .slick-dots li button:before { opacity: 1; color: transparent; border: none; background: #666666; height: 12px; width: 12px; border-radius: 100%; } .slick-dots li.slick-active button:before { opacity: 1; color: transparent; border: none; background: var(--ibe-accent, #deb666); height: 12px; width: 12px; border-radius: 100%; } .slick-dots { } .pad-30{ padding-top: 30px; } .pad-50{ padding-top: 50px; } #rooms{ padding: 120px 0 80px; background: var(--ibe-paper, #f1f0ed); } .sec-title h2 { color: var(--ibe-ink, #333333); font-size: clamp(28px, 3.2vw, 38px); font-weight: 700; letter-spacing: -0.01em; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); } .sec-title h2::after { content: ""; display: block; width: 56px; height: 3px; margin: 16px auto 0; border-radius: 999px; background: var(--ibe-accent, #deb666); } .sec-title h5 { color: #666666; font-size: 20px; font-weight: 400; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); } .card { border: 0; background: #fff; margin-top: 0px; overflow: hidden; } /* Flexbox column so .room-booking-home always sticks to the bottom */ .room-card { display: flex; flex-direction: column; border-radius: var(--radius-lg, 16px); box-shadow: var(--ibe-card-shadow, 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .07)); transition: transform var(--ibe-transition, .25s ease), box-shadow var(--ibe-transition, .25s ease); } .room-types:hover .room-card { transform: translateY(-6px); box-shadow: var(--ibe-card-shadow-hover, 0 16px 40px rgba(16, 24, 40, .14)); } .room-card .card-body { flex: 1; } .room-types{ padding-bottom: 20px; } .card img{ border-radius: 0px; } .price { font-weight: 700; font-size: 21px; } /*span.hover-border { border: 3px solid var(--ibe-accent, #deb666); height: 220px; position: absolute; width: 90%; left: 50%; transform: translateX(-50%); top: 15px; opacity: 0; transition: .3s ease; } .card:hover span.hover-border{ opacity: 1; }*/ .next-carousel-nav ul.slick-dots { bottom: 0px; } .next-carousel-nav ul.slick-dots { background: #33333380; } .next-carousel-nav .slick-dots li button:before { opacity: 1; color: transparent; border: none; background: #adb5bd; height: 5px; width: 5px; border-radius: 100%; } .next-carousel-nav .slick-dots li.slick-active button:before { opacity: 1; color: transparent; border: none; background: var(--ibe-accent, #deb666) !important; height: 5px; width: 5px; border-radius: 100%; } .room-booking-home a { width: 100%; display: inline-block; padding: 14px 10px; background: var(--ibe-accent, #deb666); text-align: center; text-decoration: none; color: var(--ibe-on-accent, #2d2d2d); font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 700; font-size: 15px; letter-spacing: .5px; text-transform: uppercase; transition: background var(--ibe-transition, .25s ease), color var(--ibe-transition, .25s ease); } .room-booking-home a:hover{ background: var(--ibe-accent-strong, #c3a25e); color: var(--ibe-on-accent, #fafafa); } .card-body { position: relative; } p.persons { font-size: 13px; font-weight: 600; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); color: #999999; } .room-card .persons { display: inline-block; background: var(--ibe-accent-light, rgba(0, 0, 0, .05)); color: var(--ibe-accent, #555); padding: 3px 10px; border-radius: var(--radius-full, 9999px); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; margin: 0 0 10px; max-width: 100%; } h5.card-title { font-size: 20px; color: #333333; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 700; margin-bottom: 8px; line-height: 1.25; } p.card-text { color: #999999; font-size: 14px; /* line-height: 28px; */ font-weight: 200; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); text-align: justify; } .hover-border ul { /* list-style-image: url(../images/list-style.png); */ padding: 0px 0px; float: left; margin-top: 10px; /* overflow:auto; */ padding-right:0px; list-style-type: none; } .card-body{ padding-right: 20px; margin-right:0px; /* height: 300px !important; overflow-y: scroll; */ } .hover-border ul li { margin-left:0px; /* width: 50%; */ font-size: 11px; line-height: 15px; color: #999999; font-weight: 600; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); float:left; margin-right:0px; padding-right: 0px; padding:3px; } .hover-border ul li img{ fill: #EEEEEE; } #rooms-result{ padding-top: 0; } #rooms-result:not(:empty){ padding-top: 80px; } #billing { margin-top: 0; padding: 0; } #billing:not(:empty) { margin-top: 60px; padding-top: 30px; padding-bottom: 80px; } .scrolling{ height:90px; max-height: 90px; width:auto; } .scrolling2{ } .hero-container{ color:#FFFFFF; padding-top:35vh; } .hero-container h1{ font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-size: clamp(34px, 4.6vw, 60px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; text-shadow: 0 2px 24px rgba(0,0,0,.35); margin-bottom: 0; } /* Divider under the headline: a short accent rule, not a full-width hr */ .hero-container hr{ width: 64px; margin: 26px auto; border: 0; border-top: 3px solid var(--ibe-accent, #deb666); border-radius: 999px; opacity: 1; } .hero-container p{ max-width: 640px; margin: 0 auto; font-size: 17px; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,.92); text-shadow: 0 1px 12px rgba(0,0,0,.35); } h1.hero-container{ font-weight: 200; } .sec-title { margin-bottom: 40px; } /* Essentials strip: check-in / check-out / cancellation rendered as one hotel-factsheet bar on an accent wash, instead of three floating cards on a full-bleed accent slab. */ #conditions { padding: 72px 0; background: var(--ibe-wash, rgba(222, 182, 102, .07)); border-top: 1px solid var(--ibe-hairline, #e9e7e2); border-bottom: 1px solid var(--ibe-hairline, #e9e7e2); } #conditions .row { background: #fff; border: 1px solid var(--ibe-hairline, #e9e7e2); border-radius: var(--radius-lg, 16px); box-shadow: var(--ibe-card-shadow); overflow: hidden; margin-left: 0; margin-right: 0; } #conditions .row > [class*="col-"] { padding-left: 0; padding-right: 0; } .condition-items { text-align: center; background: transparent; height: auto; padding: 44px 24px; border-radius: 0; box-shadow: none; } /* All three cells share a top line (the inline equal-height helper in conditions.php centers them, which misaligns the labels). */ #conditions .row .condition-items { justify-content: flex-start; } @media (min-width: 768px) { #conditions .row > [class*="col-"] + [class*="col-"] .condition-items { border-left: 1px solid var(--ibe-hairline, #e9e7e2); } } @media (max-width: 767.98px) { #conditions .row > [class*="col-"] + [class*="col-"] .condition-items { border-top: 1px solid var(--ibe-hairline, #e9e7e2); } } .condition-items h4 { color: var(--ibe-muted, #666); font-size: 12px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; word-break: normal; overflow-wrap: normal; } .condition-items h3 { color: var(--ibe-ink, #333); font-size: 30px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 700; margin-top: 10px; margin-bottom: 0; line-height: 1.1; } .condition-items h3 span { font-size: 52px; margin-right: 2px; letter-spacing: -0.02em; } .condition-items p { font-size: 14px; color: var(--ibe-accent, #666); font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; margin-top: 12px; } .cancelation-system{ cursor: pointer; } .modal-header { background: #323a40; } .modal-header .modal-title, h5#exampleModalLabel { color: #fff; font-size: 20px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 700; text-transform: uppercase; width: 100%; text-align: center; } #cancelation .modal-body h6 { font-weight: 700; color: #333; margin: 1rem 0 0.75rem; } #cancelation .modal-body li { color: #555; line-height: 1.55; } #cancelation .modal-body li strong { color: #333; } .modal-body p{ color: #999999; font-size: 16px; line-height: 28px; font-weight: 400; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); } section#service { padding: 0px 0; background: #f1f0ed; } .spa-image { border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.12); } .spa-image img { width: 100%; position: relative; display: block; } .spa-image span { position: absolute; border: 4px solid var(--ibe-accent, #deb666); width: 90%; left: 50%; height: 90%; transform: translate(-50%, -50%); top: 50%; transition: .3s ease; opacity: 0; } .spa-image:hover span{ opacity: 1; } .spa-content { text-align: center; align-items: center; margin-top: 50px; } .spa-content img { width: 115px; } .spa-content h4 { font-size: 30px; color: #333333; margin-top: 25px; text-transform: uppercase; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; margin-bottom: 0; } .spa-content h5 { font-size: 20px; color: #666666; font-weight: 400; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); } .spa-content p { font-size: 16px; color: #666666; font-weight: 400; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); } .restaurant-carousel ul.slick-dots { background: none; } .next-carousel-nav ul.slick-dots { background: #33333380; } .spa-carousel ul.slick-dots { bottom: 0px; background: #33333380; } .spa-carousel .slick-dots li button:before { opacity: 1; color: transparent; border: none; background: #adb5bd; height: 5px; width: 5px; border-radius: 100%; } .spa-carousel .slick-dots li.slick-active button:before { opacity: 1; color: transparent; border: none; background: var(--ibe-accent, #deb666) !important; height: 5px; width: 5px; border-radius: 100%; } .rooms-carousel ul.slick-dots { bottom: 0px; background: #33333380; } .rooms-carousel .slick-dots li button:before { opacity: 1; color: transparent; border: none; background: #adb5bd; height: 5px; width: 5px; border-radius: 100%; } .rooms-carousel .slick-dots li.slick-active button:before { opacity: 1; color: transparent; border: none; background: var(--ibe-accent, #deb666) !important; height: 5px; width: 5px; border-radius: 100%; } .restaurant-carousel ul.slick-dots { bottom: 0px; background: #33333380; } .restaurant-carousel .slick-dots li button:before { opacity: 1; color: transparent; border: none; background: #adb5bd; height: 5px; width: 5px; border-radius: 100%; } .restaurant-carousel .slick-dots li.slick-active button:before { opacity: 1; color: transparent; border: none; background: var(--ibe-accent, #deb666) !important; height: 5px; width: 5px; border-radius: 100%; } .restaurent-row{ /* margin-top: 100px; */ padding-top: 50px; padding-bottom: 50px; } .check-menu-title { font-size: 14px !important; color: #333333 !important; font-weight: 600 !important; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); margin-bottom: 10px; margin-top: 15px; } .spa-content a { padding: 8px 20px; margin-top: 0px; display: inline-block; text-decoration: none; font-size: 16px; font-weight: 600 !important; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); color: var(--ibe-on-accent, #fff); background: var(--ibe-accent, #deb666); transition: .3s ease; } .spa-content a:hover{ background: var(--ibe-accent-strong, #c5a158); } .spa-content.restaurant-content { margin-top: 25px; } section#about { padding: 80px 0; } section#about .row { align-items: stretch; } section#about .col-12.col-lg-5, section#about .col-12.col-lg-7 { display: flex; flex-direction: column; } section#about .about-content { flex: 1; } .about-images img { width: 100%; position: relative; } .about-images{ position: relative; } .about-images:after { content: ""; position: absolute; width: 160px; height: 160px; background: transparent; left: -5px; border-top: 5px solid var(--ibe-accent, #deb666); border-left: 5px solid var(--ibe-accent, #deb666); top: -5px; } .about-images:before { content: ""; position: absolute; width: 160px; height: 160px; background: transparent; right: -5px; border-bottom: 5px solid var(--ibe-accent, #deb666); border-right: 5px solid var(--ibe-accent, #deb666); bottom: -5px; } .about-image-wrap { border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.12); flex: 1; display: flex; flex-direction: column; min-height: 320px; } .about-image-wrap .hero-slider { flex: 1; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; min-height: 0; } .about-image-wrap .hero-carousel { flex: 1; display: flex; flex-direction: column; min-height: 0; } .about-image-wrap .hero-img { flex: 1; overflow: hidden; min-height: 0; max-height: none !important; min-height: 0 !important; } .about-image-wrap .hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-content h3 { font-size: clamp(26px, 2.8vw, 34px); color: var(--ibe-ink, #222); font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 14px; } /* Short accent rule under the About heading — same device as .sec-title */ .about-content h3::after { content: ""; display: block; width: 56px; height: 3px; margin: 14px 0 0; border-radius: 999px; background: var(--ibe-accent, #deb666); } .about-content p { font-size: 16px; color: var(--ibe-muted, #666); font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 400; line-height: 1.75; margin-top: 0; margin-bottom: 24px; } .about-amenities-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 4px; } .about-amenity-item { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.35; color: #666; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); } .about-amenity-item .fa-check { font-size: 9px; margin-top: 3px; color: var(--ibe-accent, #1C3C6B); flex-shrink: 0; } .about-image-wrap .hero-slider { position: relative; } .about-image-wrap .slick-dots { bottom: 10px; line-height: 0; } .about-image-wrap .slick-dots li { width: 10px; height: 10px; margin: 0 2px; } .about-image-wrap .slick-dots li button:before { width: 6px; height: 6px; opacity: 1; color: transparent; background: rgba(255, 255, 255, 0.55); border-radius: 100%; } .about-image-wrap .slick-dots li.slick-active button:before { width: 6px; height: 6px; background: var(--ibe-accent, #deb666); } .hero-slide-counter { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 11px; font-weight: 600; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); letter-spacing: 0.04em; pointer-events: none; } /* Facilities: same factsheet-strip treatment as #conditions — one white bar on the accent wash with hairline dividers between cells. */ #facili{ padding: 72px 0; background: var(--ibe-wash, rgba(222, 182, 102, .07)); border-top: 1px solid var(--ibe-hairline, #e9e7e2); border-bottom: 1px solid var(--ibe-hairline, #e9e7e2); } #facili .row { display: flex; flex-wrap: wrap; background: #fff; border: 1px solid var(--ibe-hairline, #e9e7e2); border-radius: var(--radius-lg, 16px); box-shadow: var(--ibe-card-shadow); overflow: hidden; margin-left: 0; margin-right: 0; } #facili .row > [class*="col-"] { display: flex; padding-left: 0; padding-right: 0; } .facili-items img { width: 50px; } .facili-items { width: 100%; text-align: center; padding: 40px 24px; background: transparent; border: 0; border-radius: 0; box-shadow: none; } @media (min-width: 768px) { #facili .row > [class*="col-"] + [class*="col-"] .facili-items { border-left: 1px solid var(--ibe-hairline, #e9e7e2); } } @media (max-width: 767.98px) { #facili .row > [class*="col-"] + [class*="col-"] .facili-items { border-top: 1px solid var(--ibe-hairline, #e9e7e2); } } .facili-items i { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 100%; color: var(--ibe-accent, #333); background: var(--ibe-wash, rgba(222, 182, 102, .1)); } .facili-items i.fa-2x { font-size: 1.4em; } .facili-items h4 { color: var(--ibe-muted, #5f6672); font-size: 15px; line-height: 1.6; margin-top: 16px; margin-bottom: 0; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 400; } .facili-items h4 b { color: var(--ibe-ink, #333333); font-size: 17px; font-weight: 700; } section#contact { padding: 80px 0 40px; } .contact-row{ margin-top: 40px; } .contact-info > div, .contact-info > a { border: 1px solid var(--ibe-hairline, #e8e6e1); border-radius: var(--radius-md, 12px); margin-bottom: 12px; display: flex; align-items: center; padding: 14px 20px; transition: .3s ease; word-break: break-all; background: #fff; box-shadow: var(--ibe-card-shadow); } .contact-info > div:hover, .contact-info > a:hover { border: 1px solid var(--ibe-accent, #deb666); } .contact-info > div:hover .contect-icon, .contact-info > a:hover .contect-icon { border: 1px solid; color: var(--ibe-on-accent, #fff) !important; background: var(--ibe-accent, #deb666); } .contact-info > div:hover .contect-icon i, .contact-info > a:hover .contect-icon i { color: var(--ibe-on-accent, #fff) !important; } .contect-icon { width: 44px; height: 44px; flex: 0 0 44px; text-align: center; line-height: 44px; font-size: 18px; border-radius: 100%; margin-top: 10px; margin-right: 18px; color: var(--ibe-accent, #deb666); background: var(--ibe-wash, rgba(222, 182, 102, .1)); transition: .3s ease; } .contact-text h5 { font-size: 12px; color: var(--ibe-muted, #bababa); font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; } .contact-text h4 { font-size: 15px; color: #444444; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 400; transition: .3s ease; } .contact-info > div:hover .contact-text h4, .contact-info > a:hover .contact-text h4 { font-weight: 700; } .nearby-location { margin-top: 15px; } .nearby-location h5 { font-size: 12px; color: var(--ibe-accent, #deb666); font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 400; } .nearby-location ul { font-size: 13px; padding-left: 0; list-style-type: none; display: flex; flex-wrap: wrap; gap: 8px 24px; } .nearby-location li { color: #444444; } .nearby-location ul li::before { content: "\2022"; color: var(--ibe-accent, #deb666); font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; } h5.dot-style { color: #444444; position: relative; } .map iframe { border: 3px solid #acacac !important; } section#footer { padding: 40px 0; background: #f1f0ed; } .footer-info h1 { font-size: 26px; color: #555; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 700; margin-bottom: 4px; } .footer-info p { font-size: 14px; line-height: 1.5; color: #888; margin: 0; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 400; } .footer-social h3 { font-size: 14px; color: #888; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; } .footer-social { float: right; margin-top: 0; display: flex; flex-direction: column; align-items: flex-end; } .social-link { display: flex; } .social-link h5 { font-size: 17px; color: #999999; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 400; margin-bottom: 0; margin-top: 2px; } .social-link ul li { margin-left: 4px; margin-right: 4px; } .social-link ul li a { text-decoration: none; font-size: 22px; color: #999; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; border-radius: 8px; transition: all .25s ease; } .social-link ul li a:hover { color: var(--ibe-accent, #deb666); border-color: var(--ibe-accent, #deb666); background: rgba(0,0,0,0.03); } section#copyright { background: #12183f; padding: 17px 0; } .copyright-text p { color: #fff; margin-bottom: 0; text-align: center; font-size: 16px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 400; } .navbar-fixed-top .date-picker-wrapper { position: absolute !important; top: 100%; left: 50% !important; right: auto !important; transform: translateX(-50%); z-index: 1060; margin-left: 0 !important; margin-right: 0 !important; } section#booking-sec { position: relative !important; z-index: 1050; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .booking-bg{ background: #323a40; padding: 10px 0; position: fixed !important; left: 0; right: 0; width: 100%; bottom: 0; } .check-footer { text-align: center; } .btn.focus, .btn:focus { outline: 0; box-shadow: none !important; } button.btn.check-btn { color: var(--ibe-on-accent, #2d2d2d); padding: 3px 140px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 800; font-size: 17px; background: var(--ibe-accent, #deb666); border-radius: var(--radius-sm, 8px); } svg path{ fill: var(--ibe-accent, #deb666) !important; } .icon{ max-width: 100px; } .check-in { width: 48%; float: left; padding: 15px 20px; border-radius: 8px; background: #f1f0ed; } input#datepick-in { border: 1px solid var(--ibe-accent, #deb666); padding: 15px 0px; text-align: center; background: transparent; color: #fff; width: 100%; border-radius: var(--radius-sm, 8px); } .check-out { width: 48%; float: right; padding: 15px 20px; border-radius: 8px; background: #f1f0ed; } input#datepick-out { border: 1px solid var(--ibe-accent, #deb666); padding: 15px 0px; text-align: center; background: transparent; color: #fff; width: 100%; border-radius: var(--radius-sm, 8px); } input:focus { outline: -webkit-focus-ring-color auto 0px !important; } .suit-type { width: 48%; float: left; padding: 15px 20px; margin-top: 20px; border-radius: 8px; background: #f1f0ed; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; } .member-number { width: 48%; float: right; padding: 15px 20px; margin-top: 20px; border-radius: 8px; background: #f1f0ed; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; font-size: 18px; } input.popup-email { border: 1px solid var(--ibe-accent, #deb666); width: 100%; margin-top: 20px; padding: 15px 25px; background: #f1f0ed; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; font-size: 18px; border-radius: 8px; text-transform: lowercase; } button.btn.btn.check-availability { color: var(--ibe-on-accent, #323a40); padding: 8px 0px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 800; font-size: 15px; background: var(--ibe-accent, #deb666); margin-top: 30px; width: 100%; text-transform: uppercase; border-radius: var(--radius-sm, 8px); } .modal-content { border-radius: var(--radius-lg, 16px); overflow: hidden; } .modal-body { padding: 35px; } button.close { color: #fff !important; opacity: 1; } .suit-type select { border: 1px solid var(--ibe-accent, #deb666); width: 100%; padding: 15px; text-align: center; background: transparent; color: #333333; width: 100%; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; font-size: 18px; } .member-number select { border: 1px solid var(--ibe-accent, #deb666); width: 100%; padding: 15px; text-align: center; background: transparent; color: #333333; width: 100%; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; font-size: 18px; } .suit-type option{ width: 100%; padding: 15px !important; text-align: center; background: red; color: var(--ibe-on-accent, #333); width: 100%; background: var(--ibe-accent, #deb666) !important; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; font-size: 18px; } .member-number option{ border: 1px solid #444444; width: 100%; padding: 15px !important; text-align: center; background: var(--ibe-accent, #deb666) !important; color: var(--ibe-on-accent, #333); width: 100%; background: var(--ibe-accent, #deb666) !important; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; font-size: 18px; } .second-modal-header{ background: #323a40 !important; color: #fff; } .second-modal-header h5{ text-align: center; width: 100%; } label { color: #333333; font-size: 18px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; } input::placeholder{ color: #333333; font-size: 15px !important; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; } input{ color: #333333 !important; font-size: 18px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; } /* Ensure the active theme font reaches form controls that don't inherit it. */ textarea, option, select, button, .form-control { font-family: var(--ibe-font, 'Nunito Sans', sans-serif); } .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all { background: var(--ibe-accent, #deb666); color: var(--ibe-on-accent, #fff); font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 400 !important; } a.ui-state-default { text-align: center !important; background: var(--ibe-accent, #deb666) !important; color: var(--ibe-on-accent, #fff) !important; border: 0 !important; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 400 !important; } .ui-datepicker-calendar th { font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 400 !important; } div#ui-datepicker-div { background: #f1f0ed; } td.ui-datepicker-days-cell-over.ui-datepicker-today { border: 1px solid #333 !important; } a.ui-state-default.ui-state-highlight { background: #333 !important; } .modal-open .modal { overflow-x: hidden; overflow-y: auto; background: #e9ecef94; } #button { display: inline-block; background-color: var(--ibe-accent, #deb666); width: 50px; height: 50px; text-align: center; border-radius: 100%; position: fixed; bottom: 30px; right: 30px; transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; z-index: 2000; } #button::after { content: "\f077"; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: normal; font-style: normal; font-size: 16px; line-height: 50px; color: #fff; } #button:hover { cursor: pointer; background-color: var(--ibe-accent-strong, #c5a158); } #button:active { background-color: #c9543a; } #button.show { opacity: 1; visibility: visible; } html{ scroll-behavior: smooth; } /*-------------Availablity Page------------------*/ .navbar-light .navbar-nav .nav-link { color: #fff !important; } .second-page-suite-image { position: relative; } .second-page-suite-image img { width: 100%; } .second-page-suite-image span { position: absolute; border: 4px solid var(--ibe-accent, #deb666); width: 83%; left: 50%; height: 90%; transform: translate(-50%, -50%); top: 50%; transition: .3s ease; opacity: 0; } .second-page-suite-image:hover span { opacity: 1; } .sdf-facility { background: #ebebeb; padding: 5px; } .sdf-facility ul { list-style-image: url(../images/list-style2.png); padding: 0px 0px; margin-top: 10px; list-style-position: inside; } .sdf-facility ul li { margin-right: 12px; font-size: 15px; } .second-page-suite-info p { font-family: var(--ibe-font, 'Nunito Sans', sans-serif); } #availability-header{ padding: 80px 0px; } .quantity { position: relative; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } .quantity input { width: 180px; height: 50px; line-height: 1.65; float: left; display: block; padding: 0; margin: 0; text-align: center; position: relative; z-index: 1; border:1px solid #CCC; border-radius: 10px; } .quantity2 input { width: 180px; height: 50px; line-height: 1.65; float: left; display: block; padding: 0; margin: 0; text-align: center; position: relative; z-index: 1; border:1px solid #CCC; border-radius: 10px; } .quantity-nav { float: left; position: absolute; height: 50px; width: 180px; } .quantity-button { position: relative; cursor: pointer; border-left: 1px solid #999999; width: 20px; text-align: center; color: #333; font-size: 13px; line-height: 1.7; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .quantity-button.quantity-up { position: absolute; height: 30px; right: -10px; background: #eee; z-index: 2; width: 30px; text-align: center; line-height: 30px; font-size: 30px; top: 50%; transform: translate(-50%, -50%); border-radius: 10px; } .quantity-button.quantity-down { position: absolute; top: 50%; border-bottom: 1px solid #eee; width: 30px; background: #eee; height: 30px; line-height: 30px; font-size: 25px; left: 35px; z-index: 1; transform: translate(-100%, -50%); text-align: center; border-radius: 10px; } .secont-page-member-select.quantity span { font-size: 20px; font-weight: 600; margin-bottom: 8px; display: inline-block; } .secont-page-member-select.quantity2 span { font-size: 20px; font-weight: 600; margin-bottom: 8px; display: inline-block; } .adult-quantity { width: 33%; float: left; } .child-quantity { width: 33%; float: left; } .child-ages { width: 33%; float: left; } .chd-selects{ width: 23%; float: left; } /* Pet size. The count keeps the -/+ spinner the guest counts are shown with; the size is a select because only the property's own bands are valid answers, and the price rides in the option label so the fee is never a surprise. */ .pet-size-row { margin-top: 4px; } .pet-size-row select { display: block; width: 100%; max-width: 380px; margin-top: 2px; padding: 6px 8px; border: 1px solid #ced4da; border-radius: 6px; background: #fff; font-size: 13px; line-height: 1.4; color: #333; } /* Guest, child and pet steppers inside a room card. bootstrap-input-spinner builds a stock .input-group, which Bootstrap allows to wrap: in a col-6 on a narrow card the three parts no longer fit on one line and the + dropped underneath the - and the count. nowrap plus smaller buttons keeps the row intact down to a 280px viewport, and takes the bulk off the control at every width. The inline min-width the plugin writes on each button is why these need !important. */ .room-result-card .input-group { flex-wrap: nowrap; max-width: 150px; } .room-result-card .input-group > .input-group-prepend > .btn, .room-result-card .input-group > .input-group-append > .btn { min-width: 1.85rem !important; padding: 0.2rem 0.3rem; font-size: 0.8rem; line-height: 1.3; } .room-result-card .input-group > .form-control { height: auto; min-width: 0; padding: 0.25rem 0.2rem; font-size: 0.9rem; } @media (max-width: 575.98px) { /* iOS zooms the page when a field under 16px takes focus, and a guest can type into these. The buttons carry the size reduction on phones instead. */ .room-result-card .input-group > .form-control { font-size: 16px; } } .age-span { font-size: 20px; font-weight: 600; margin-bottom: 8px; display: inline-block; } .second-suite-price { display: flow-root; width: 35%; float: left; position: relative; } .second-suite-price:after { content: ""; position: absolute; width: 2px; height: 100%; right: 35px; top: 0; } .second-suite-includ { display: flow-root; width: 40%; float: left; position: relative; } /* ===== Rates section ===== */ .ibe-rates-container { margin-top: 1rem; padding-top: 0.5rem; } .ibe-rates { display: flex; flex-direction: column; gap: 0.75rem; } /* Why a room cannot be quoted (pets, occupancy, stay restrictions). It stands in for the rate list, so it follows the rate cards' shape and lets the container padding set the spacing below it. */ .ibe-gate-notice { margin-bottom: 0; border-radius: 12px; font-size: 0.95rem; } /* ===== Rate Card ===== */ .rate-card { position: relative; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.1rem 1.25rem 1rem; background: #fff; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); box-sizing: border-box; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .rate-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.07); border-color: #d1d5db; } .rate-card--best { border-color: var(--ibe-accent); border-width: 2px; background: linear-gradient(160deg, var(--ibe-accent-light) 0%, #fff 60%); } .rate-card--best:hover { border-color: var(--ibe-accent); box-shadow: 0 4px 20px rgba(var(--ibe-accent-rgb), 0.12); } .rate-card__badge { position: absolute; top: -10px; left: 1.1rem; background: var(--ibe-accent); color: var(--ibe-on-accent, #fff); font-size: 10px; font-weight: 800; padding: 3px 12px; border-radius: 20px; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(var(--ibe-accent-rgb), 0.30); } /* Price */ .rate-card__price-block { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.6rem; margin-bottom: 0.25rem; margin-top: 0.5rem; } .rate-card__price { font-size: 1.75rem; font-weight: 800; color: #111; line-height: 1.1; letter-spacing: -0.03em; } .rate-card__price--original { font-size: 1rem; font-weight: 500; color: #999; text-decoration: line-through; } .rate-card__badge--promo { background: #e8f5e9; color: #2e7d32; box-shadow: none; text-transform: none; letter-spacing: 0; } .breakdown .strike { text-decoration: line-through; color: #999; margin-right: 0.35rem; } .summary-promo-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 10px; border-radius: 20px; background: #e8f5e9; color: #2e7d32; font-size: 0.78rem; font-weight: 700; } .summary-price-original { text-decoration: line-through; color: #999; font-size: 0.85em; } /* ── Date picker promo tag ── */ .date-picker-wrapper .promo-mark { font-size: 8px; color: #28a745; margin-left: 2px; vertical-align: super; } /* ── Search results: bordered room cards, horizontal on desktop ── */ .ibe-room-col .room-types > .card { background: #fff; border: 1px solid #e2e6ef; border-radius: 14px; box-shadow: 0 2px 10px rgba(15, 23, 42, .05); overflow: hidden; } .ibe-room-col .room-types > .card.featured { border-color: var(--ibe-accent, #c3a25e); } .ibe-room-col .room-result-card { border: none; box-shadow: none; margin-bottom: 0; } /* Desktop (≥992px) layout for the result cards lives in the "IBE search results — desktop renewal" section at the end of this file. */ /* ── Landing "Special offers" cards ── */ .ibe-promos { padding: 40px 0 10px; } .ibe-promos__row { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; } @media (max-width: 767px) { .ibe-promos__row { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; padding-bottom: 8px; } } .ibe-promo-card { display: flex; min-width: 290px; max-width: 360px; flex: 1 1 290px; background: #fff; border: 1px solid #e8eaf0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(15, 23, 42, .06); } .ibe-promo-card__discount { display: flex; align-items: center; justify-content: center; min-width: 86px; background: #e8f5e9; color: #2e7d32; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; } .ibe-promo-card__body { padding: 14px 16px; flex: 1; min-width: 0; } .ibe-promo-card__desc { font-weight: 700; color: #2d3047; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; } .ibe-promo-card__rooms { font-weight: 700; color: #2d3047; margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ibe-promo-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.78rem; color: #74788d; } .rate-card__nights { background: none; border: none; padding: 0; color: var(--ibe-accent); font-size: 0.8125rem; font-family: inherit; cursor: pointer; font-weight: 600; } .rate-card__nights:hover { opacity: 0.8; text-decoration: underline; } .breakdown { margin-bottom: 0.5rem; padding: 6px 0; border-top: 1px solid #f0f0f0; } .breakdown__row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 0.8125rem; color: #6b7280; } .breakdown__val { font-weight: 600; color: #374151; } .breakdown__arrow { font-size: 10px; transition: transform 0.2s ease; color: var(--ibe-accent); } .rate-card__nights[aria-expanded="true"] .breakdown__arrow { transform: rotate(180deg); } /* Title & description */ .rate-card__title { font-size: 1rem; font-weight: 700; color: #222; line-height: 1.35; margin: 0 0 0.2rem 0; word-wrap: break-word; overflow-wrap: break-word; } .rate-card__desc { font-size: 0.75rem; color: #9ca3af; line-height: 1.45; margin: 0 0 0.5rem 0; word-wrap: break-word; overflow-wrap: break-word; } /* Meta — breakfast + cancellation */ .rate-card__meta { font-size: 0.8rem; color: #555; font-weight: 600; margin: 0.35rem 0 0.75rem 0; line-height: 1.45; padding: 5px 10px; background: #f7f7f7; border-radius: 8px; display: inline-block; } /* Cancellation policy indicator */ .rate-card__cancel { white-space: nowrap; cursor: help; } .rate-card__cancel--free { color: #16a34a; } .rate-card__cancel--partial { color: #d97706; } .rate-card__cancel--non_refundable { color: #dc2626; } .rate-card__cancel--neutral { color: inherit; } .rate-card__cancel-info { font-size: 0.7em; opacity: 0.7; vertical-align: middle; } /* Cancellation policy block */ .rate-card__policy { margin: 8px 0 4px; padding: 9px 12px; border-radius: 6px; font-size: 0.8rem; line-height: 1.45; } .rate-card__policy-label { display: block; font-weight: 600; } .rate-card__policy-detail { display: block; font-weight: 400; opacity: 0.8; font-size: 0.75rem; margin-top: 2px; } .rate-card__policy-payment { display: block; font-weight: 400; font-size: 0.75rem; margin-top: 4px; padding-top: 4px; border-top: 1px dashed currentColor; opacity: 0.7; } .rate-card__policy--free { background: rgba(22, 163, 74, 0.07); color: #15803d; } .rate-card__policy--partial { background: rgba(22, 163, 74, 0.07); color: #15803d; } .rate-card__policy--non_refundable { background: rgba(234, 179, 8, 0.10); color: #854d0e; } .rate-card__policy--neutral { background: rgba(156, 163, 175, 0.08); color: #374151; } /* Per-night price */ .rate-card__pernight { font-size: 0.8125rem; color: #6b7280; font-weight: 600; } /* CTA */ .rate-card__cta { width: 100%; margin-top: 0.6rem; } /* Room added / removed: full width under the rate row, not a squeezed grid cell. */ .rate-card__notice { width: 100%; max-width: none; box-sizing: border-box; margin: 12px 0 0; padding: 12px 16px; font-size: 0.875rem; line-height: 1.45; } .rate-card__notice h7 { display: block; font-size: inherit; font-weight: inherit; line-height: inherit; } .rate-card__notice b { font-weight: 600; } .rate-card__book-btn { display: block; width: 100%; height: 46px; border: none; border-radius: 10px; background: var(--ibe-accent); color: var(--ibe-on-accent, #fff); font-size: 0.9375rem; font-weight: 700; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); cursor: pointer; transition: opacity 0.2s ease, transform 0.1s ease; letter-spacing: 0.01em; } .rate-card__book-btn:hover { opacity: 0.88; transform: translateY(-1px); } .rate-card__book-btn:active { transform: translateY(0); opacity: 1; } /* Quantity counter (shown after booking) */ .rate-card__qty { display: flex; align-items: center; justify-content: center; gap: 0.5rem; height: 46px; border: 2px solid var(--ibe-accent); border-radius: 10px; background: var(--ibe-accent-light); } .rate-card__qty-btn { width: 34px; height: 34px; border: none; border-radius: 8px; background: var(--ibe-accent); color: var(--ibe-on-accent, #fff); font-size: 1.2rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.15s ease; } .rate-card__qty-btn:hover { opacity: 0.85; } .rate-card__qty-val { font-size: 1.1rem; font-weight: 800; color: var(--ibe-accent); min-width: 1.5rem; text-align: center; } .rate-card__qty-label { font-size: 0.8125rem; color: #555; font-weight: 600; margin-right: 0.25rem; } /* Keep old class references working */ .rate-item {} .second-suite-booking { margin-top: 14px; } .second-suite { display: inline-block; width: 100%; margin-top: 40px; } span.price-include-title { color: #828282; font-size: 12px; font-weight: 600; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); } .second-suite-booking h4 { color: #000; font-size: 20px; font-weight: 700; margin-top: 10px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); } span.night-counte { font-size: 16px; color: #111111; margin-top: 10px; } .second-suite-booking button { color: #17a2b8; margin-top: 0px; border: 0; background: none; padding: 0; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-size: 12px; } .second-suite-includ h6 { font-size: 16px; margin-top: 8px; color: #333; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 800; } .second-suite-includ h4 { margin-top: 15px; font-size: 22px; color: #000; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 700; } .second-suite-booking label { color: #ff5656; font-weight: 400; font-size: 15px } .second-suite-booking select { border: 1px solid; border-color: #2ba8bc; padding: 10px; background: #f8f9fa; color: #000; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 700; height: 50px; font-size: 14px; } .second-suite-booking select option{ color: #000; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 400; } select:focus { outline: -webkit-focus-ring-color auto 0px; } .suite-tow{ margin-top: 70px; } .footer-price p { color: #fff; font-weight: 500; margin-bottom: 0; margin-top: 8px; font-size: 14px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); } .footer-price small{ font-family: var(--ibe-font, 'Nunito Sans', sans-serif); } .footer-price p span { color: #28a745; font-weight: 700; font-size: 17px; } .footer-price h4{ font-size: 15px; } .resenvation-bnt button { background: #28a745 !important; color: #fff !important; padding: 10px 20px !important; width: 100%; } /*--------------Form Page Style--------------*/ section#booking-form { padding: 50px 0px 90px 0; } .input-first-name { width: 48%; float: left; margin-bottom: 35px !important; } .input-last-name { width: 48%; float: right; margin-bottom: 35px !important; } .input-level h5 { color: #333333; font-size: 20px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 400; } .input-email-main { width: 48%; display: grid; float: left; margin-bottom: 35px !important; } .input-phone-main { width: 48%; display: grid; float: right; margin-bottom: 35px !important; } .input-booking-type { width: 48%; float: left; display: grid; margin-bottom: 35px; } .input-booking-day { width: 48%; float: right; display: grid; margin-bottom: 35px; } .input-country { width: 30%; float: left; } .input-state { width: 30%; float: left; } .input-zip { width: 30%; float: right; } .country-seclection { display: flex; justify-content: space-between; width: 100%; margin-bottom: 35px; } .input-flight-no { width: 48%; float: left; display: grid; margin-bottom: 35px; } .input-arrive-time { width: 48%; float: right; display: grid; margin-bottom: 35px; } .input-checkin-time { width: 48%; display: grid; margin-bottom: 35px; } span.payment-info-title { color: #333333; font-size: 26px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 500; } .reservation-form-title h4 { color: #333333; font-size: 26px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 500; } .input-address-main { width: 100%; display: grid; margin-bottom: 25px; } .input-address-optional { width: 100%; margin-bottom: 25px; } .input-level select { -webkit-appearance: none; -moz-appearance: window; padding: 2px 50px 2px 2px; border: none; background-image: url(../images/down-arrow.png); background-repeat: no-repeat; background-position: 97% center; border: 1px solid #ced4da; width: 100%; padding: 6px; border-radius: 8px; } select { color: #333333 !important; font-size: 16px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; } .input-level select option{ background: var(--ibe-accent, #deb666); padding: 10px; } .form-control:focus { color: #495057; background-color: #fff; border-color: #80bdff; outline: 0; box-shadow: none; } .back-to-search a { width: 220px; display: inline-block; text-align: center; padding: 6px; text-decoration: none; color: #fff; background: #6c757d; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); border-radius: 10px; } span.badge { background: #5d70ff; /* border-radius: 100%; */ color: #fff; /* font-size: 16px; */ } .suite-counte { font-size: 15px; margin-bottom: 10px !important; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; } .total-suite-price { font-size: 17px; margin-bottom: 10px !important; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; } ul.include-in-price { padding: 0; list-style: none; font-size: 14px; line-height: 22px; color: #999999; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); } .total-suite-price-title { font-size: 15px; margin-bottom: 10px !important; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; } .total-price-amount { font-size: 17px; margin-bottom: 10px !important; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; } button#redeem { background: var(--ibe-accent, #deb666); color: var(--ibe-on-accent, #333); font-size: 16px; margin-bottom: 10px !important; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; } .visa-image img { width: 50px; margin-bottom: 35px; } label.custom-control-label { font-size: 16px; line-height: 29px; } .confirm-booking-bnt button { background: #dc3545 !important; color: #fff !important; padding: 5px 25px !important; width: 450px; font-size: 22px !important; } button.btn.check-btn.count h3 { font-size: 14px; display: inline-block; } button.btn.check-btn.count h3 { font-size: 14px; display: inline-block; } span#timer { font-size: 15px; margin-left: 10px; } /*-------------------details page----------------------*/ .booking-info-details img { width: 150px; } .b-i-details-content p img { width: auto; } .b-i-details-content p { text-align: left; } .b-i-details-content ul li p { font-size: 16px !important; font-weight: 400; } .b-i-details-content ul li span{ font-size: 16px !important; font-weight: 400; } .booking-info-details { width: 350px; text-align: center; } .booking-info-details img { width: 150px; margin-bottom: 20px; } section#details { padding: 50px 0 90px 0; } .b-i-details-content { text-align: left; } a.checkin-now { border: 2px solid #3e55ff; display: inline-block; padding: 10px 30px; border-radius: 10px; color: #333; font-size: 20px; text-decoration: none; margin-top: 10px; } .bar-code { text-align: right; } .bar-code img { width: 65px; } .bar-code span { font-size: 16px; color: gray; margin-top: 10px; display: inline-block; } .guest-details h4 { margin-bottom: 40px; } .guest-details { width: 350px; } .room-details img { width: 100%; position: relative; z-index: 1; } .room-details { position: relative; } .room-details:before { content: ""; position: absolute; width: 150px; height: 150px; left: -3px; top: -3px; background: var(--ibe-accent, #deb666); } .room-details:after { content: ""; position: absolute; width: 150px; height: 150px; right: -3px; bottom: -3px; background: var(--ibe-accent, #deb666); } .day-and-price-details { display: flex; justify-content: space-between; } .in-and-out-details { display: flex; justify-content: space-between; } .checkin-details { border: 1px solid; width: 48%; text-align: center; padding: 36px 0; border-radius: 20px; } .checkout-details { border: 1px solid; width: 48%; text-align: center; padding: 36px 0; border-radius: 20px; } .room-details-info h4 { font-size: 32px; } .day-and-price-details p { font-size: 18px; margin-top: 10px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); } .day-and-price-details span { font-size: 18px; margin-top: 10px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); display: inline-block; color: #3cd35a; } .in-and-out-details h5 { font-size: 26px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; margin-bottom: 16px; } .in-and-out-details p { font-size: 26px; font-size: 18px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); margin-bottom: 0; } .member-details { display: flex; justify-content: space-between; width: 480px; } .member-details p{ font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-size: 20px; color: #333; } .contact-form form textarea { width: 100%; } .contact-form form button { width: 100%; margin-top: 10px; border-radius: 10px; } .contact-direction a { width: 100%; border-radius: 10px; } h4.contact-form-title { margin-bottom: 20px; } .contact-form { margin-bottom: 25px; } .contact-direction-main{ margin-bottom: 25px; } /*------------------Payment page---------------------*/ section#payment-page { padding: 70px 0 100px 0; } .payment-option-bg { background: #ced4da; padding: 70px 70px; } .visa-image.payment-page-cards img { margin-bottom: 0; } .payment-option-bg p { font-size: 16px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); } .payment-page-amount-select { background: #fff; padding: 40px 40px; border-radius: 10px; } .visa-image.payment-page-cards { padding: 10px; border-radius: 10px; background: #ced4da; margin-bottom: 30px; } .form-group.bank-payment-box { margin-top: 50px; } .payment-note p { display: inline-block; float: right; margin-top: -50px; } section#contact-form-sec { padding-bottom: 80px; } .card.ability-card { margin-top: 0; border-radius: 0; } .card.ability-card .card-body { /* background: #dee2e6; */ } .card.ability-card .slick-dotted.slick-slider { margin-bottom: 0; } .card.ability-card .card-body { /* background: #dee2e6; */ padding: 0px 15px; } .nearby-location h5 { display: inline; float: left; width: 120px; } .hero-img { width: 100%; overflow: hidden; justify-content: center; max-height: 500px; min-height: 500px; } @media (max-width: 1199.9px) { ol.carousel-indicators { bottom: -45px; } .card-body ul { padding: 0px 0px 0px 0px; /* float: left; */ list-style-type: none; } .card-body ul li { font-size: 14px; } .condition-items { height: auto; padding: 40px 24px; margin-bottom: 20px; } .spa-content { margin-top: 35px; } .spa-content.restaurant-content { margin-top: 0px; } } @media (max-width: 991.9px) { .hero-img { width: 100%; overflow: hidden; justify-content: center; max-height: 300px; min-height: 300px; } .card-body ul li { font-size: 15px; float: left; margin-right: 10px; } .condition-items { height: auto; padding: 36px 20px; } .spa-content img { width: 90px; } .spa-content { margin-top: 5px; } .spa-image span { display: none; } .spa-content h4 { font-size: 25px; margin-top: 15px; } .facili-items h4 { font-size: 17px; margin-top: 20px; } .contact-text h4 { font-size: 14px; } .footer-info p { width: 100%; } .footer-info h1 { font-size: 35px; } .hero-logo h1 { font-size: 24px; } .hero-logo img { width: 130px; } .sec-title h2 { font-size: 28px; } .condition-items h3 { font-size: 30px; } .condition-items h3 span { font-size: 40px; } .quantity-nav { width: 130px; } .quantity input { width: 130px; } .second-suite-price h4 { color: #000; font-size: 23px; } .second-suite-price button { font-size: 13px; } .second-suite-price:after { right: 5px; } .second-suite-includ:after { right: 10px; } .second-suite-includ h4 { font-size: 19px; } button.navbar-toggler { display: none !important; } .member-details { width: auto; } .room-details-info h4 { font-size: 25px; } .member-details p { font-size: 17px; } .in-and-out-details h5 { font-size: 21px; margin-bottom: 8px; } .checkout-details { padding: 20px 0; } .checkin-details { padding: 20px 0; } .input-level h5 { font-size: 16px; } .confirm-booking-bnt button { width: auto; font-size: 20px !important; } .total-suite-price { text-align: right; } button#redeem { width: 195px; border-radius: var(--radius-sm, 8px); margin-top: 10px; } .payment-option-bg p { font-size: 9px; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); } section#contact-form-sec { padding-bottom: 100px; } } #add-discount{ font-size: 12px; } .my-0{ font-size:15px; } @media (max-width: 767.9px) { } @media (max-width: 575.9px) { .navbar-fixed-top .date-picker-wrapper { left: 0 !important; right: 0 !important; transform: none; width: 100%; } .hero-container{ padding-top:30vh; } .hero { position: relative; height: 93vh; z-index: -2; font-size:12px; } .hero h1{ font-size:30px; margin-top:-10px; } .list-group-item { position: relative; display: block; padding: .75rem 1.25rem; background-color: #fff; border: 1px solid rgba(0,0,0,.125); width: 350px; } button.btn.check-btn { padding: 3px 30px; } .hero-slider { margin-top: 0px; } button.slick-prev.slick-arrow { /* display: none !important; */ } button.slick-next.slick-arrow { /* display: none !important; */ } .hero-logo { /* margin-top: 5px; */ /* margin-bottom: 0px; */ } .hero-logo h1 { font-size: 30px; } .sec-title h2 { font-size: 25px; line-height: 40px; } .sec-title h5 { font-size: 17px; } .card-body ul li { font-size: 14px; } span.hover-border{ display: none; } .condition-items { height: auto; padding: 32px 24px; margin-bottom: 30px; } .spa-content { margin-top: 40px; margin-bottom: 40px; } .restaurent-row { margin-top: 50px; } .about-content { text-align: left; margin-top: 32px; } .about-content h3 { font-size: 22px; } .about-amenities-grid { grid-template-columns: 1fr 1fr; } .facili-items { padding: 40px 20px; margin-bottom: 20px; } .contact-text h4 { font-size: 16px; } .nearby-location h5 { font-size: 13px; } .footer-info { text-align: center; } .footer-info h1 { font-size: 30px; } .footer-social { float: none; margin-top: 24px; text-align: center; align-items: center; } .social-link { display: flex; justify-content: center; } .social-link ul.nav { justify-content: center; } #button { width: 40px; height: 40px; bottom: 49px; right: 5px; } #button::after { line-height: 40px; } label { font-size: 15px; } .modal-body { padding: 25px 5px; } .check-in { padding: 15px 10px; } .check-out { padding: 15px 10px; } input::placeholder{ color: #333333; text-transform: uppercase; font-size: 11px !important; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 600; } .suit-type { padding: 15px 10px; } .member-number { padding: 15px 10px; } button.btn.check-btn { font-size: 17px; } button.btn.btn.check-availability { font-size: 16px; } input#datepick-in { padding: 7px 0px; } input#datepick-out { padding: 7px 0px; } .suit-type select { padding: 7px; } .member-number select { padding: 7px; } input.popup-email { padding: 10px 10px; } a.navbar-brand { font-size: 17px; display: block; display: inline-table; } .logo{ max-height: 90px; } .copyright-text p { font-size: 13px; } ol.carousel-indicators li { width: 10px; height: 10px; } a.carousel-control-prev { width: 30px; height: 30px; left: 5px; display: none; } a.carousel-control-next { width: 30px; height: 30px; right: 5px; display: none; } .adult-quantity { width: 50%; float: left; } .child-quantity { width: 45%; float: left; } .second-suite-price { width: 40%; float: left; } .second-suite-includ { width: 70%; float: left; } .second-suite-includ:after { display: none; } .second-suite-price:after { right: 0px; } .second-page-suite-info { margin-top: 20px; } .check-footer.resenvation-bnt button { margin-top: 10px; } #availability-header { padding: 0px 0px 0px; } #availability-header { padding-top:0px; margin-top:0px; } .booking-info-details { width: auto; text-align: center; } .guest-details { width: auto; } .bar-code { text-align: center; margin-top: 30px; } a.checkin-now { display: block; padding: 4px 30px; font-size: 18px; text-align: center; } .room-details { margin-bottom: 20px; } .input-first-name { width: 100%; float: inherit; } .input-last-name { width: 100%; float: inherit; } .input-email-main { width: 100%; float: inherit; } .input-phone-main { width: 100%; float: inherit; } .input-booking-type { width: 100%; float: inherit; } .input-booking-day { width: 100%; float: inherit; } .input-checkin-time { width: 100%; } .input-group-append.redeem-button { width: 100%; } .input-group-append.redeem-button button { width: 100% !important; } input.form-control.redeem-input { border-radius: var(--radius-sm, 8px) !important; } .row.payment-line p { font-size: 14px; } .check-footer.confirm-booking-bnt button { padding: 0px !important; margin-top: 10px; } .back-to-search { text-align: center; } .back-to-search a { font-size: 12px; } .check-footer.confirm-booking-bnt button { padding: 0px !important; margin-top: 10px; font-size: 17px !important; } section#booking-form { padding: 50px 0px 130px 0; } .payment-option-bg { padding: 40px 15px; } .payment-page-amount-select { background: #fff; padding: 20px 15px; border-radius: 10px; } .payment-page-amount-select h4 { font-size: 20px; margin-bottom: 15px; } .visa-image.payment-page-cards { padding: 7px; border-radius: 10px; background: #ced4da; margin-bottom: 25px; } .payment-note p { display: inline-block; float: inherit; margin-top: 10px; } button.btn.check-btn.count.payment-page-f-btn { width: 100%; padding: 7px !important; } section#contact-form-sec { padding-bottom: 120px; } } .rooms-carousel{ max-width: 100%; } .rooms-carousel .team-image, .room-carousel .team-image, .room-editorial__hero, .room-editorial__thumb { overflow: hidden; aspect-ratio: 4 / 5; } .rooms-carousel .team-image.ibe-orient-landscape, .room-carousel .team-image.ibe-orient-landscape, .room-editorial__hero.ibe-orient-landscape, .room-editorial__thumb.ibe-orient-landscape { aspect-ratio: 4 / 3; } .rooms-carousel .team-image.ibe-orient-portrait, .room-carousel .team-image.ibe-orient-portrait, .room-editorial__hero.ibe-orient-portrait, .room-editorial__thumb.ibe-orient-portrait { aspect-ratio: 4 / 5; } .rooms-carousel .team-image.ibe-orient-square, .room-carousel .team-image.ibe-orient-square, .room-editorial__hero.ibe-orient-square, .room-editorial__thumb.ibe-orient-square { aspect-ratio: 1 / 1; } .rooms-carousel .team-image img, .room-carousel .team-image img { width: 100%; height: 100%; object-fit: cover; } /* Positioning context for the caption overlay below. Scoped to the carousel slides rather than added to the shared aspect-ratio rule above, which also covers .room-editorial__thumb -- and that already carries an absolutely positioned "+N" badge that would re-anchor if the thumb stopped being static. */ .rooms-carousel .team-image, .room-carousel .team-image { position: relative; } /* Staff-entered photo caption as a soft chip. It hugs its text rather than banding the full width, so it reads as a label on the photo instead of a bar cutting across it. Top-left, not bottom-left: every one of these carousels paints its dots as a dark translucent strip pinned to the bottom of the photo (.rooms-carousel above, .next-carousel-nav for the home page cards). A chip down there either lands on that strip or stacks a second dark block directly above it. Anchoring to the top keeps one element per edge and needs no per-carousel offset. pointer-events is off so the area it covers still opens the lightbox: the click target is the img underneath, not this span. */ .ibe-photo-caption { position: absolute; left: 12px; top: 12px; max-width: calc(100% - 24px); padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-size: 12px; font-weight: 600; line-height: 1.35; text-align: left; pointer-events: none; /* Two lines max: a long caption must not creep up over the photo. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .booking-features{ font-size: 12px; } .more-info{ color: var(--ibe-accent, #6bbdcc); font-size: 13px; font-weight: 700; display: inline-block; margin-bottom: 6px; cursor: pointer; } .more-info__arrow{ font-size: 10px; transition: transform 0.2s ease; } .more-info[aria-expanded="true"] .more-info__arrow{ transform: rotate(180deg); } .room-desc{ margin-bottom: 8px; } .room-desc__text{ font-size: 0.8125rem; color: #6b7280; line-height: 1.5; margin: 4px 0 0 0; } .room-result-card.card-body ul{ padding-left: 0px; list-style-type: none; margin-left: 0px; } .room-result-card.card-body li{ margin-left: 0px; padding-left: 0px; } .second-suite-includ{ padding:0px; } .invalid-feedback{ font-size: 12px; display: block; } .date-info{ font-size: 12px; } h2, h3, h4, h5, h6{ font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-size: 30px; font-weight: 700; } .pulse { animation: pulse-animation 2s infinite; } @keyframes pulse-animation { 0% { box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5); } 100% { box-shadow: 0 0 0 30px rgba(0, 0, 0, 0); } } .payment-secure{ font-size: 11px; } .navbar { position: relative; min-height: 50px; margin-bottom: 20px; border: 1px solid transparent } /* ===================================== */ /* ===== THE INTERESTING STUFF NOW ===== */ /* ===================================== */ .navbar { border: none; -webkit-transition: 0.4s; transition: 0.4s; /* --- navbar sizes --- */ /* --- navbar colors --- */ } .navbar-brand { font-size: 2.25rem; font-weight: 900; color: #4b4b4b; } .navbar--size--xl { padding: 2rem 0; } .navbar--size--lg { padding: 0rem 0; } .navbar--size--md { padding: 0rem 0; } .navbar--color--white { background: #fff; } .navbar--color--primary { background: #37ca7e; } .navbar--color--secondary { background: var(--ibe-accent, #343b3f); background-image: linear-gradient(135deg, var(--ibe-accent, #343b3f) 0%, var(--ibe-accent-grad-end, #23282b) 100%); color: var(--ibe-on-accent, #fff); box-shadow: 0 6px 24px rgba(16, 24, 40, .16); } .navbar--color--ghost { background: rgba(0,0,0,0.2); } .navbar--color--ghost .navbar-brand, .navbar--color--ghost .navbar-text, .navbar--color--ghost a { color: #fff; } .conditions { margin-left: 0px; padding-left: 0px; } .conditions li{ margin-left:0; padding-left:0; list-style: none; } .discount{ max-width: 80px; padding-right: 10px; } .strike{ text-decoration: line-through; } .new-total{ text-decoration: none; } .other-prices{ display: none; } .date-link{ text-decoration-line: underline; text-decoration-style: wavy; } .bed-types{ font-size: 12px; } h5.card-title{ padding-top: 15px; } @media (min-width:768px) { .navbar { border-radius: 4px } } @media (min-width:768px) { .navbar-header { float: left } } .navbar-collapse { padding-right: 15px; padding-left: 15px; overflow-x: visible; -webkit-overflow-scrolling: touch; } .navbar-collapse.in { overflow-y: auto } @media (min-width:768px) { .navbar-collapse { width: auto; border-top: 0; -webkit-box-shadow: none; box-shadow: none } .navbar-collapse.collapse { display: block!important; height: auto!important; padding-bottom: 0; overflow: visible!important } .navbar-collapse.in { overflow-y: visible } .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse { padding-right: 0; padding-left: 0 } } .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse { max-height: 340px } @media (max-device-width:480px) and (orientation:landscape) { .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse { max-height: 200px } } .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header { /* margin-right: -15px; */ /* margin-left: -15px; */ width: 100%; } @media (min-width:768px) { .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header { margin-right: 0; margin-left: 0 } } .navbar-static-top { z-index: 1000; border-width: 0 0 1px } @media (min-width:768px) { .navbar-static-top { border-radius: 0 } } .navbar-fixed-bottom, .navbar-fixed-top { position: fixed; right: 0; left: 0; z-index: 1030 } @media (min-width:768px) { .navbar-fixed-bottom, .navbar-fixed-top { border-radius: 0 } } .navbar-fixed-top { top: 0; border-width: 0 0 1px } .navbar-fixed-bottom { bottom: 0; margin-bottom: 0; border-width: 1px 0 0 } .navbar-brand { float: left; height: 50px; padding: 15px 5px; font-size: 18px; line-height: 20px; } .navbar-brand:focus, .navbar-brand:hover { text-decoration: none } .navbar-brand>img, #logo.img-fluid, .ibe-header__brand img { display: block; max-width: var(--ibe-logo-max-width, 240px); max-height: var(--ibe-logo-max-height, 90px); height: auto; width: auto; object-fit: contain; } @media (min-width:768px) { .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: 0px } } .navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: 8px; margin-right: 15px; margin-bottom: 8px; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px } .navbar-toggle:focus { outline: 0 } .navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px } .navbar-toggle .icon-bar+.icon-bar { margin-top: 4px } @media (min-width:768px) { .navbar-toggle { display: none } } .navbar-nav { margin: 7.5px -15px } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; line-height: 20px } @media (max-width:767px) { .rooms-carousel{ max-width: 100%; } #period-col{ margin-top:-30px; } .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none } .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a { padding: 5px 15px 5px 25px } .navbar-nav .open .dropdown-menu>li>a { line-height: 20px } .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-nav .open .dropdown-menu>li>a:hover { background-image: none } } @media (min-width:768px) { .navbar-nav { float: left; margin: 0 } .navbar-nav>li { float: left } .navbar-nav>li>a { padding-top: 15px; padding-bottom: 15px } } .navbar-form { padding: 10px 15px; margin-top: 8px; margin-right: -15px; margin-bottom: 8px; margin-left: -15px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1) } @media (min-width:768px) { .navbar-form .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle } .navbar-form .form-control { display: inline-block; width: auto; vertical-align: middle } .navbar-form .form-control-static { display: inline-block } .navbar-form .input-group { display: inline-table; vertical-align: middle } .navbar-form .input-group .form-control, .navbar-form .input-group .input-group-addon, .navbar-form .input-group .input-group-btn { width: auto } .navbar-form .input-group>.form-control { width: 100% } .navbar-form .control-label { margin-bottom: 0; vertical-align: middle } .navbar-form .checkbox, .navbar-form .radio { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle } .navbar-form .checkbox label, .navbar-form .radio label { padding-left: 0 } .navbar-form .checkbox input[type=checkbox], .navbar-form .radio input[type=radio] { position: relative; margin-left: 0 } .navbar-form .has-feedback .form-control-feedback { top: 0 } } @media (max-width:767px) { .navbar-form .form-group { margin-bottom: 5px } .navbar-form .form-group:last-child { margin-bottom: 0 } } @media (min-width:768px) { .navbar-form { width: auto; padding-top: 0; padding-bottom: 0; margin-right: 0; margin-left: 0; border: 0; -webkit-box-shadow: none; box-shadow: none } } .navbar-nav>li>.dropdown-menu { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0 } .navbar-fixed-bottom .navbar-nav>li>.dropdown-menu { margin-bottom: 0; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 0; border-bottom-left-radius: 0 } .navbar-btn { margin-top: 8px; margin-bottom: 8px } .navbar-btn.btn-sm { margin-top: 10px; margin-bottom: 10px } .navbar-btn.btn-xs { margin-top: 14px; margin-bottom: 14px } .navbar-text { margin-top: 15px; margin-bottom: 15px } @media (min-width:768px) { .navbar-text { float: left; margin-right: 15px; margin-left: 15px } } @media (min-width:768px) { .navbar-left { float: left!important } .navbar-right { float: right!important; margin-right: -15px } .navbar-right~.navbar-right { margin-right: 0 } } .navbar-default { background-color: #f8f8f8; border-color: #e7e7e7 } .navbar-default .navbar-brand { color: #777 } .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover { color: #5e5e5e; background-color: transparent } .navbar-default .navbar-text { color: #777 } .navbar-default .navbar-nav>li>a { color: #777 } .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { color: #333; background-color: transparent } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { color: #555; background-color: #e7e7e7 } .navbar-default .navbar-nav>.disabled>a, .navbar-default .navbar-nav>.disabled>a:focus, .navbar-default .navbar-nav>.disabled>a:hover { color: #ccc; background-color: transparent } .navbar-default .navbar-toggle { border-color: #ddd } .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background-color: #ddd } .navbar-default .navbar-toggle .icon-bar { background-color: #888 } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #e7e7e7 } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover { color: #555; background-color: #e7e7e7 } @media (max-width:767px) { .navbar-default .navbar-nav .open .dropdown-menu>li>a { color: #777 } .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover { color: #333; background-color: transparent } .navbar-default .navbar-nav .open .dropdown-menu>.active>a, .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover { color: #555; background-color: #e7e7e7 } .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a, .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover { color: #ccc; background-color: transparent } } .navbar-default .navbar-link { color: #777 } .navbar-default .navbar-link:hover { color: #333 } .navbar-default .btn-link { color: #777 } .navbar-default .btn-link:focus, .navbar-default .btn-link:hover { color: #333 } .navbar-default .btn-link[disabled]:focus, .navbar-default .btn-link[disabled]:hover, fieldset[disabled] .navbar-default .btn-link:focus, fieldset[disabled] .navbar-default .btn-link:hover { color: #ccc } .navbar-inverse { background-color: #222; border-color: #080808 } .navbar-inverse .navbar-brand { color: #9d9d9d } .navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand:hover { color: #fff; background-color: transparent } .navbar-inverse .navbar-text { color: #9d9d9d } .navbar-inverse .navbar-nav>li>a { color: #9d9d9d } .navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover { color: #fff; background-color: transparent } .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover { color: #fff; background-color: #080808 } .navbar-inverse .navbar-nav>.disabled>a, .navbar-inverse .navbar-nav>.disabled>a:focus, .navbar-inverse .navbar-nav>.disabled>a:hover { color: #444; background-color: transparent } .navbar-inverse .navbar-toggle { border-color: #333 } .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover { background-color: #333 } .navbar-inverse .navbar-toggle .icon-bar { background-color: #fff } .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: #101010 } .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover { color: #fff; background-color: #080808 } @media (max-width: 767px) { .footer-price{ font-size: 18px; } .navbar-brand { height: auto; padding: 5px 10px; } .navbar-brand>img, #logo.img-fluid, .ibe-header__brand img { height: auto; margin:0 auto; max-width: var(--ibe-logo-max-width-mobile, 140px); max-height: var(--ibe-logo-max-height-mobile, 40px); } #mobileNav{ margin-top: -50px; } .navbar--color--secondary { padding-top:10px; } .navbar--size--xl { padding: 0rem 0; padding-top:10px; } .navbar{ padding-top: 10px; display: block; } .navbar--color--ghost { /*height: 110px;*/ } .navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header { border-color: #080808 } .navbar-inverse .navbar-nav .open .dropdown-menu .divider { background-color: #080808 } .navbar-inverse .navbar-nav .open .dropdown-menu>li>a { color: #9d9d9d } .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover { color: #fff; background-color: transparent } .navbar-inverse .navbar-nav .open .dropdown-menu>.active>a, .navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus, .navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover { color: #fff; background-color: #080808 } .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a, .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus, .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover { color: #444; background-color: transparent } } .navbar-inverse .navbar-link { color: #9d9d9d } .navbar-inverse .navbar-link:hover { color: #fff } .navbar-inverse .btn-link { color: #9d9d9d } .navbar-inverse .btn-link:focus, .navbar-inverse .btn-link:hover { color: #fff } .navbar-inverse .btn-link[disabled]:focus, .navbar-inverse .btn-link[disabled]:hover, fieldset[disabled] .navbar-inverse .btn-link:focus, fieldset[disabled] .navbar-inverse .btn-link:hover { color: #444 } .overlay { position: absolute; z-index: -1; top: 0; left: 0; height: 100%; width: 100%; /* Let the photo breathe mid-frame; keep the top dark for the navbar and the center readable for the headline. */ background: linear-gradient(180deg, rgba(10, 12, 16, .62) 0%, rgba(10, 12, 16, .38) 42%, rgba(10, 12, 16, .46) 100%); } .main-content { background: #f2f2f2; } section { background: #fff; padding: 4rem 0 7rem; } section:nth-child(even) { background: #f5f5f5; } h2, h3 { padding: 2rem 0 0.75rem; font-weight: 700; color: #4b4b4b; } #mobileNav{ margin-top:-25px; } .check-rates{ font-size: 12px; } /* ── Daterangepicker responsive containment ─────────────────────────────── */ /* Never let the picker exceed the viewport width */ .daterangepicker { max-width: calc(100vw - 32px) !important; } /* On smaller desktops / large tablets (564–780px) where two months side-by-side would be too wide, stack the calendars vertically */ @media (min-width: 564px) and (max-width: 780px) { .daterangepicker .drp-calendar.left, .daterangepicker .drp-calendar.right { float: none !important; clear: both !important; display: block !important; max-width: 100% !important; } } /* ========================================================================== Editorial single-room layout Used when the property has exactly one room type — replaces the centered card with a magazine-style two-column gallery + content section. ========================================================================== */ .room-editorial { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; width: 100%; } @media (min-width: 992px) { .room-editorial { grid-template-columns: 1.15fr 1fr; gap: 60px; } } .room-editorial__gallery { display: grid; grid-template-columns: 1fr; gap: 12px; width: 100%; min-width: 0; } .room-editorial__hero { width: 100%; overflow: hidden; cursor: zoom-in; background: #e8e6e1; border-radius: var(--radius-lg, 16px); } .room-editorial__hero > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .room-editorial__hero:hover > img { transform: scale(1.03); } .room-editorial__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; } .room-editorial__thumb { position: relative; width: 100%; overflow: hidden; cursor: zoom-in; background: #e8e6e1; border-radius: var(--radius-md, 12px); } .room-editorial__thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, opacity 0.3s ease; } .room-editorial__thumb:hover > img { transform: scale(1.05); } .room-editorial__thumb--more > img { opacity: 0.5; } .room-editorial__thumb-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 700; font-size: 22px; background: rgba(45, 45, 45, 0.35); pointer-events: none; } .room-editorial__hidden { display: none !important; } .room-editorial__content { padding: 8px 0; } @media (min-width: 992px) { .room-editorial__content { padding: 24px 0 0; } } .room-editorial__title { font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-size: 32px; font-weight: 700; color: #2d2d2d; margin: 0 0 16px; line-height: 1.2; } @media (min-width: 992px) { .room-editorial__title { font-size: 38px; } } .room-editorial__rule { display: block; width: 56px; height: 2px; background: var(--ibe-accent, #deb666); margin: 0 0 18px; } .room-editorial__persons { display: inline-block; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #999; margin-bottom: 18px; } .room-editorial__description { color: #555; font-size: 16px; line-height: 1.7; font-weight: 300; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); text-align: left; margin-bottom: 24px; } .room-editorial__amenities { margin-bottom: 28px; } .room-editorial__amenities ul { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; } .room-editorial__amenities ul li { float: none; margin: 0; padding: 0; } .room-editorial__cta { max-width: 320px; } .room-editorial__cta a { padding: 14px 10px; font-size: 16px; letter-spacing: 0.06em; border-radius: var(--radius-sm, 8px); } @media (max-width: 575px) { .room-editorial__title { font-size: 26px; } .room-editorial__thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; } .room-editorial__cta { max-width: 100%; } } /* ═══════════════════════════════════════════════════════════════════ IBE search results — room cards (desktop renewal 2026-07) Base rules below apply at all widths (mobile keeps the stacked card); the @media (min-width: 992px) block turns each result into a full-width "dossier": photo column spanning the card height, room details top-right, and rate plans as aligned ledger rows (info | price | CTA). ═══════════════════════════════════════════════════════════════════ */ .room-result-card .card-title { font-size: 1.25rem; font-weight: 800; color: #111827; margin-bottom: 0.75rem; line-height: 1.3; } .room-result-card .persons { font-size: 0.85rem; color: #6b7280; margin-bottom: 0.5rem; } .room-result-card .bed-types { font-size: 0.85rem; color: #4b5563; font-weight: 600; } .room-result-card .hover-border { margin-top: auto; padding-top: 1rem; } .room-result-card .hover-border ul { display: flex; flex-wrap: wrap; gap: 8px; } .room-result-card .hover-border li .btn { padding: 4px; border: 1px solid #e5e7eb; border-radius: 6px; background: #f9fafb; } .room-result-card .hover-border li .btn img { width: 24px; height: 24px; opacity: 0.7; } .room-result-card .more-info { font-size: 0.85rem; font-weight: 700; color: var(--ibe-accent, #0056b3); margin: 0.5rem 0; display: inline-block; } .room-result-card .room-desc__text { font-size: 0.85rem; color: #4b5563; line-height: 1.5; margin-top: 0.5rem; } .room-result-card [id^="search"] { width: 100%; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f3f4f6; } .room-result-card [id^="search"] span { font-weight: 600; color: #374151; margin-bottom: 4px; display: inline-block; } /* Rates area + rate card base */ .ibe-room-col .ibe-rates-container { padding: 1.5rem; background: #f8fafc; } .ibe-room-col .ibe-rates-container .rate-card { margin-top: 12px; } .rate-card { display: flex; flex-direction: column; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .rate-card--best { border-color: var(--ibe-accent); background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .rate-card__badge { top: -12px; font-size: 11px; padding: 4px 14px; } .rate-card__plan-name { font-size: 1.1rem; font-weight: 800; color: #111827; margin: 0.5rem 0 0.25rem 0; line-height: 1.3; } .rate-card__info-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem; } .rate-card__cancel-note { display: block; color: #6b7280; font-size: 0.75rem; font-weight: 400; margin-top: 2px; } .rate-card__features { list-style: none; padding: 0; margin: 1rem 0; flex-grow: 1; } .rate-card__features li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: #4b5563; margin-bottom: 0.5rem; line-height: 1.4; } .rate-card__features li i { margin-top: 3px; font-size: 0.9rem; } .rate-card__desc { font-size: 0.85rem; color: #4b5563; line-height: 1.4; margin: 0.5rem 0; } .rate-card__cta { margin-top: auto; } /* Opt-in promotion "coupon" strip */ .rate-card__promo-offer { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0.75rem 0 0.25rem; padding: 9px 12px; border: 1.5px dashed #2e7d32; border-radius: 10px; background: #f0faf1; font-size: 0.85rem; color: #2e7d32; line-height: 1.4; } .rate-card__promo-offer-text b { font-weight: 800; } .rate-card__promo-apply { border: none; border-radius: 8px; background: #2e7d32; color: #fff; font-family: var(--ibe-font, 'Nunito Sans', sans-serif); font-weight: 700; font-size: 0.8125rem; padding: 8px 14px; cursor: pointer; white-space: nowrap; transition: opacity 0.15s ease, transform 0.15s ease; } .rate-card__promo-apply:hover { opacity: 0.9; transform: translateY(-1px); } .rate-card__promo-apply:disabled { opacity: 0.6; cursor: default; transform: none; } .rate-card__promo-offer--applied { border-style: solid; justify-content: flex-start; animation: ibePromoIn 0.45s ease; } @keyframes ibePromoIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .rate-card--promo-applied .rate-card__price { animation: ibePricePop 0.5s ease; } @keyframes ibePricePop { 0% { transform: scale(0.85); opacity: 0.3; } 60% { transform: scale(1.08); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .rate-card__promo-offer--applied, .rate-card--promo-applied .rate-card__price { animation: none; } } /* ── Desktop / tablet: the room dossier ── Starts at 768px, not 992px. Between the two, search.php's col-md-6 put two cards side by side in a 720px container, so each room got a 360px column with desktop-sized type and the rate list pushed far below the fold: the narrowest layout on the page served to a screen wide enough for the full row. The band overrides just below re-tune the photo column and type for 720px. */ @media (min-width: 768px) { .ibe-room-col { flex: 0 0 100%; max-width: 100%; } /* Photo pairs with the details row only — its frame stays a stable landscape (~370x300) no matter how tall the rate list gets, so photos never crop into a vertical sliver. Rates span full width. */ .ibe-room-col .room-result-card { display: grid; grid-template-columns: minmax(300px, 370px) minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "image details" "rates rates"; } /* Photo column — spans the full card height, images crop to cover. Neutral background covers rooms that have no photos yet. */ .ibe-room-col .room-result-card .rooms-carousel { grid-area: image; min-width: 0; overflow: hidden; display: flex; flex-direction: column; background: #eef1f5; } .ibe-room-col .room-result-card .rooms-carousel .team-item, .ibe-room-col .room-result-card .rooms-carousel .slick-list, .ibe-room-col .room-result-card .rooms-carousel .slick-track { height: 100%; min-height: 100%; } .ibe-room-col .room-result-card .rooms-carousel .team-image { height: 100% !important; aspect-ratio: auto !important; } .ibe-room-col .room-result-card .rooms-carousel .team-image img { height: 100%; object-fit: cover; } /* No pagination bar when there are 0 or 1 photos */ .ibe-room-col .rooms-carousel ul.slick-dots:not(:has(li:nth-child(2))) { display: none; } /* Details — top right. min-height sets the photo frame height. */ .ibe-room-col .room-result-card .card-body { grid-area: details; display: flex; flex-direction: column; align-items: flex-start; padding: 26px 32px 6px; min-height: 300px; } .room-result-card .card-title { font-size: 1.55rem; letter-spacing: -0.015em; } .room-result-card .hover-border { margin-top: 0.25rem; padding-top: 0.5rem; } .room-result-card [id^="search"] { margin-top: auto; max-width: 430px; border-top: 0; padding-top: 0.75rem; } /* Rate ledger — bottom right. No padding: the rates are rows of the room card itself, so their rules have to reach both card edges. The 32px inset that used to live here now sits on each row, matching the details column above. */ .ibe-room-col .ibe-rates-container { grid-area: rates; background: none; padding: 0; margin-top: 0; } .ibe-room-col .ibe-rates-container .rate-card { margin-top: 0; } /* A refusal answers the guest form, not the rate ledger, so it starts where that form does instead of running the full width under the photo. 370px is the photo column, which the 1fr details column always pushes to its max at this breakpoint; +32px of container padding matches the details padding. */ .ibe-room-col .ibe-rates-container > .ibe-gate-notice { margin: 0 32px 26px 370px; } /* ── One ledger, not a stack of cards ── The plans are rows of a single framed table separated by a rule, so the eye runs down one column of prices instead of hopping over six card edges. */ .ibe-rates { gap: 0; background: none; } /* Each rate plan is one aligned row: info | price | CTA */ .ibe-rates .rate-card { display: grid; grid-template-columns: minmax(0, 1fr) auto 190px; column-gap: 24px; align-items: center; /* 32px is the card's own inset for full-width rows. It is deliberately not the details column's left edge: the ledger spans the card, photo included. */ padding: 16px 32px; max-width: none; border-radius: 0; } .ibe-rates .rate-card__plan-name { grid-area: 1 / 1 / 2 / 2; margin: 0; font-size: 1rem; } .ibe-rates .rate-card__features { grid-area: 2 / 1 / 3 / 2; display: flex; flex-wrap: wrap; gap: 3px 18px; margin: 5px 0 0; } .ibe-rates .rate-card__features li { margin-bottom: 0; } .ibe-rates .rate-card__desc { grid-area: 3 / 1 / 4 / 2; margin: 5px 0 0; } .ibe-rates .rate-card__info-row { grid-area: 4 / 1 / 5 / 2; margin: 5px 0 0; } .ibe-rates .breakdown { grid-area: 5 / 1 / 6 / 4; margin: 10px 0 0; } .ibe-rates .rate-card__price-block { grid-area: 1 / 2 / 5 / 3; flex-direction: column; align-items: flex-end; justify-self: end; gap: 0; margin: 0; text-align: right; } .ibe-rates .rate-card__cta { grid-area: 1 / 3 / 5 / 4; margin: 0; min-width: 0; align-self: center; } .ibe-rates .rate-card__notice { grid-area: 6 / 1 / 7 / 4; margin-top: 14px; } .ibe-rates .rate-card__badge { top: -9px; left: 20px; } .ibe-rates .rate-card__badge--promo { left: auto; right: 20px; top: -9px; } .ibe-rates .rate-card__promo-offer { grid-area: 6 / 1 / 7 / 4; margin: 12px 0 0; } .ibe-rates .rate-card--best { background: linear-gradient(90deg, rgba(var(--ibe-accent-rgb), 0.06) 0%, #fff 55%); } /* Rows, not cards: the frame and the rules live on the list above, so each plan drops its own border, radius, shadow and gap. */ .ibe-rates .rate-card { border: 0; border-radius: 0; box-shadow: none; margin: 0; } .ibe-rates .rate-card + .rate-card { border-top: 1px solid #e2e8f0; } .ibe-rates .rate-card:hover { box-shadow: none; } /* The ribbon hung over the card's top edge, which in a divided ledger lands on the rule between two rows. It becomes a chip on its own line above the plan name: every other cell shifts down one row, and rows without a badge collapse that row to zero height, so they are unaffected. */ .ibe-rates .rate-card__badge { position: static; grid-area: 1 / 1 / 2 / 2; justify-self: start; margin-bottom: 6px; } .ibe-rates .rate-card__badge--promo { grid-area: 1 / 1 / 2 / 4; justify-self: end; margin-bottom: 6px; top: auto; right: auto; } .ibe-rates .rate-card__plan-name { grid-area: 2 / 1 / 3 / 2; } .ibe-rates .rate-card__features { grid-area: 3 / 1 / 4 / 2; } .ibe-rates .rate-card__desc { grid-area: 4 / 1 / 5 / 2; } .ibe-rates .rate-card__info-row { grid-area: 5 / 1 / 6 / 2; } .ibe-rates .breakdown { grid-area: 6 / 1 / 7 / 4; } .ibe-rates .rate-card__price-block { grid-area: 1 / 2 / 6 / 3; } .ibe-rates .rate-card__cta { grid-area: 1 / 3 / 6 / 4; } .ibe-rates .rate-card__promo-offer { grid-area: 7 / 1 / 8 / 4; } .ibe-rates .rate-card__notice { grid-area: 8 / 1 / 9 / 4; margin-top: 14px; } } /* ── Tablet band (768-991px): the same row layout, sized for a 720px container ── The dossier's desktop values (370px photo, 32px gutters, 1.55rem title) leave a ~286px text column here, so the room name wraps three times. These trim the photo and the type to fit; everything else is inherited from the block above. */ @media (min-width: 768px) and (max-width: 991.98px) { .ibe-room-col .room-result-card { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); } .ibe-room-col .room-result-card .card-body { padding: 18px 20px 6px; min-height: 220px; } .room-result-card .card-title { font-size: 1.2rem; } .ibe-rates .rate-card { padding: 14px 20px; } .ibe-room-col .ibe-rates-container > .ibe-gate-notice { margin: 0 20px 20px 260px; } .ibe-room-col .room-result-card [id^="search"] { max-width: none; } } /* ── IBE search results: mobile padding budget ───────────────────────────── On a 390px phone the copy inside a rate card sat behind roughly 80px of padding per side, 41% of the screen, before a single word was drawn: 15px .container 25px inline padding on #rooms-result (index.php only, book_form.php:7) 20px Bootstrap's .card-body default (1.25rem) 24px .ibe-rates-container (1.5rem) 20px .rate-card (1.25rem) + 1px border That is why a cancellation sentence wrapped to three short lines. Desktop keeps the roomier values: this block only trims the phone. The !important is for the inline attribute, which no plain rule can beat. */ @media (max-width: 767.98px) { #rooms-result { padding-left: 0 !important; padding-right: 0 !important; } #rooms-result .card-body { padding: 12px; } /* Same merge as the wider layouts: the rates are rows of the room card, so the container adds no inset of its own and each row carries the card's 12px. */ #rooms-result .ibe-rates-container { padding: 0; background: none; } #rooms-result .rate-card { padding: 12px; border-radius: 0; } #rooms-result .ibe-rates-container > .ibe-gate-notice { margin: 12px; } #rooms-result .ibe-rates-container .rate-card { margin-top: 10px; } /* The "MELHOR PREÇO" ribbon is absolutely positioned at left: 1.1rem, a value tuned to the card's 1.25rem padding. With the padding trimmed above, the ribbon has to follow or it no longer lines up with the content edge. */ #rooms-result .rate-card__badge { left: 0.9rem; } /* 80px of dead space above the first result (style.css:343). landing.php overrides it to 20px with a higher-specificity selector, but index.php gets the full 80px, on the host that already had the tightest card. */ #rooms-result:not(:empty) { padding-top: 20px; } /* ── The rate ledger, phone edition ── Same idea as the desktop block: one framed list with a rule between plans, instead of a stack of separate cards. The row cannot be four columns at this width, so it stacks and puts the price and the CTA together on the last line. */ #rooms-result .ibe-rates { gap: 0; background: none; } #rooms-result .ibe-rates .rate-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border: 0; border-radius: 0; box-shadow: none; margin: 0; } #rooms-result .ibe-rates .rate-card + .rate-card { border-top: 1px solid #e2e8f0; } /* Ribbon becomes a chip on its own line, as on desktop: hanging it above the card would drop it on the rule between two rows. */ #rooms-result .ibe-rates .rate-card__badge { position: static; grid-area: 1 / 1 / 2 / 3; justify-self: start; margin-bottom: 6px; } #rooms-result .ibe-rates .rate-card__badge--promo { justify-self: end; top: auto; right: auto; } #rooms-result .ibe-rates .rate-card__plan-name { grid-area: 2 / 1 / 3 / 3; margin: 0; } /* The base list carries a 1rem block margin, which inside a divided row reads as a hole between the benefits and the plan description. */ #rooms-result .ibe-rates .rate-card__features { grid-area: 3 / 1 / 4 / 3; margin: 8px 0 0; } #rooms-result .ibe-rates .rate-card__desc { grid-area: 4 / 1 / 5 / 3; margin: 8px 0 0; } #rooms-result .ibe-rates .rate-card__promo-offer { grid-area: 5 / 1 / 6 / 3; } /* Last line: nights toggle + price on the left, book button on the right. */ #rooms-result .ibe-rates .rate-card__info-row { grid-area: 6 / 1 / 7 / 2; margin-top: 6px; } #rooms-result .ibe-rates .rate-card__price-block { grid-area: 7 / 1 / 8 / 2; margin: 0; } #rooms-result .ibe-rates .rate-card__cta { grid-area: 6 / 2 / 8 / 3; margin: 0; align-self: center; } #rooms-result .ibe-rates .breakdown { grid-area: 8 / 1 / 9 / 3; } #rooms-result .ibe-rates .rate-card__notice { grid-area: 9 / 1 / 10 / 3; margin-top: 12px; } }