/* ========================================================================
   new-theme5 bundled stylesheet — Roomory
   Combines: _base.css, components/_header.css, components/_footer.css,
             pages/_home.css, pages/_standard-page.css, pages/_cab.css
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --primary-blue: #163c8c;
    --active-blue: #007bff;
    --search-green: #4eaa7e;
    --search-green-hover: #3d8c65;
    --alert-bg: #f8f6ea;
    --bg-light: #ffffff;
    --text-main: #333333;
    --text-muted: #666666;
    --border-color: #e5e7eb;
    --footer-bg: #0a0a0a;
    --box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    --box-shadow-hover: 0 8px 25px rgba(0,0,0,0.12);
}

/* ----- Scope global typography reset to new-theme5 elements so we don't
         destroy Bootstrap/select2/fancybox widgets used elsewhere ------
   IMPORTANT: do NOT use `.nt5 *` here — it overrides the icon-font family
   on <i class="fa*"> / <i class="la*"> and makes icons render as blank boxes.
   Apply the font only to text-bearing elements instead. ---------------- */
body.nt5-body,
.nt5,
.nt5 h1, .nt5 h2, .nt5 h3, .nt5 h4, .nt5 h5, .nt5 h6,
.nt5 p, .nt5 a, .nt5 span, .nt5 li, .nt5 label,
.nt5 input, .nt5 textarea, .nt5 select, .nt5 button,
.nt5 div, .nt5 section, .nt5 article, .nt5 nav, .nt5 aside,
.nt5-header, .nt5-header a, .nt5-header button, .nt5-header h3, .nt5-header span,
.nt5-footer, .nt5-footer a, .nt5-footer h4, .nt5-footer li, .nt5-footer span, .nt5-footer strong,
.nt5-sidebar, .nt5-sidebar a, .nt5-sidebar h3, .nt5-sidebar-menu a {
    font-family: 'Quicksand', 'Inter', sans-serif;
}

/* Keep icon fonts intact — these selectors win over the block above because
   they are more specific for <i> tags / icon classes. */
.nt5 i[class*="fa-"], .nt5 i.fa, .nt5 i.fas, .nt5 i.far, .nt5 i.fab, .nt5 i.fal, .nt5 i.fad, .nt5 i.fa-solid, .nt5 i.fa-regular, .nt5 i.fa-brands, .nt5 i.fa-light, .nt5 i.fa-duotone,
.nt5-header i[class*="fa-"], .nt5-header i.fa, .nt5-header i.fas, .nt5-header i.far, .nt5-header i.fab,
.nt5-footer i[class*="fa-"], .nt5-footer i.fa, .nt5-footer i.fas, .nt5-footer i.far, .nt5-footer i.fab,
.nt5-sidebar i[class*="fa-"], .nt5-sidebar i.fa, .nt5-sidebar i.fas, .nt5-sidebar i.far, .nt5-sidebar i.fab {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
}
.nt5 i.fab, .nt5-header i.fab, .nt5-footer i.fab, .nt5-sidebar i.fab,
.nt5 i.fa-brands { font-family: "Font Awesome 6 Brands", "FontAwesome" !important; }

/* Line-awesome compatibility (used elsewhere on legacy pages). */
.nt5 i[class*="la-"], .nt5 i.la, .nt5 i.las, .nt5 i.lar, .nt5 i.lab, .nt5 i.lal, .nt5 i.lad { font-family: "Line Awesome Free", "Line Awesome Brands", "FontAwesome" !important; }
.nt5 i.lab { font-family: "Line Awesome Brands" !important; }

body.nt5-body {
    background-color: #fafafa;
    color: var(--text-main);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    padding-top: 0 !important;
    margin: 0;
}

body.nt5-body a {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

/* --- Shared Global Content Blocks --- */
.nt5 .home-inner-container { max-width: 1200px; margin: 60px auto 40px; padding: 0 5%; }
.nt5 .alert-banner { background: var(--alert-bg); border: 1px solid #e8e4d0; border-radius: 8px; padding: 15px 20px; text-align: center; font-size: 14px; font-weight: 600; color: #555; margin-bottom: 40px; line-height: 1.5; }
.nt5 .section-title { font-size: 22px; font-weight: 800; color: var(--text-main); margin-bottom: 20px; }
.nt5 .section-title.center { text-align: center; }
.nt5 .section-subtitle { text-align: center; font-size: 15px; color: var(--text-muted); margin-bottom: 30px; max-width: 800px; margin-left: auto; margin-right: auto; font-weight: 500; line-height: 1.6; }

/* Shared Cards
   Note: use auto-fill (not auto-fit) so a single card doesn't stretch across
   the whole row when the list has only one item. auto-fill keeps empty
   phantom tracks at their min width, so cards stay at a normal size and
   the leftover space is left blank on the right. */
.nt5 .grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); gap: 20px; margin-bottom: 50px; justify-content: start; }
.nt5 .custom-card { background: white; border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; }
.nt5 .custom-card:hover { box-shadow: var(--box-shadow-hover); transform: translateY(-3px); }
.nt5 .custom-card-flat { border: none; background: transparent; }
.nt5 .custom-card-img { width: 100%; height: 160px; object-fit: cover; border-radius: 12px; }
.nt5 .img-tall { height: 200px; }
.nt5 .custom-card-body { padding: 15px 5px; flex-grow: 1; }
.nt5 .custom-card-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; line-height: 1.4; color: var(--text-main); }
.nt5 .custom-card-desc { font-size: 13px; font-weight: 500; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Price/Rating helpers for listing cards */
.nt5 .custom-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.nt5 .custom-card-price { color: #163c8c; font-weight: 800; font-size: 15px; }
.nt5 .custom-card-rating { background: #2e7d32; color: #fff; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.nt5 .custom-card-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--active-blue); font-weight: 700; font-size: 13px; margin-top: 10px; }
.nt5 .custom-card-cta:hover { color: var(--primary-blue); }

/* Shared Features Grid */
.nt5 .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 50px; }
.nt5 .feature-item { display: flex; align-items: center; gap: 15px; border: 1px solid var(--border-color); padding: 15px; border-radius: 12px; background: white; }
.nt5 .feature-icon-wrapper { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.nt5 .bg-yellow { background: #FFF9EE; color: #f5b041; }
.nt5 .bg-green { background: #EAFFF1; color: #4caf50; }
.nt5 .bg-blue { background: #ECFBFF; color: #2196f3; }
.nt5 .bg-red { background: #FFF0F7; color: #f44336; }
.nt5 .feature-text h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; margin-top: 0; }
.nt5 .feature-text p { font-size: 12px; font-weight: 500; color: var(--text-muted); margin: 0; }

/* ========================================
   HEADER
   ======================================== */
.nt5-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    background: var(--bg-light);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 70px;
    font-family: 'Quicksand', 'Inter', sans-serif;
}
.nt5-header .header-left { display: flex; align-items: center; }
.nt5-header .mobile-menu-btn { display: none; background: none; border: none; font-size: 24px; color: var(--primary-blue); cursor: pointer; margin-right: 15px; }
.nt5-header .logo { display: flex; align-items: center; height: 100%; }
.nt5-header .logo img { height: 30px; object-fit: contain; }
.nt5-header .logo h3 { margin: 0; font-size: 20px; font-weight: 800; color: var(--primary-blue); }
.nt5-header .nav-links { display: flex; gap: 30px; height: 100%; list-style: none; padding: 0; margin: 0; }
.nt5-header .nav-links a { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--text-main); height: 100%; border-bottom: 3px solid transparent; text-decoration: none; }
.nt5-header .nav-links a i { color: #888; }
.nt5-header .nav-links a:hover, .nt5-header .nav-links a.active { color: var(--active-blue); border-bottom: 3px solid var(--active-blue); }
.nt5-header .nav-links a:hover i, .nt5-header .nav-links a.active i { color: var(--active-blue); }
.nt5-header .nav-actions { display: flex; gap: 12px; align-items: center; }
.nt5-header .btn { padding: 8px 18px; border-radius: 6px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s ease; border: none; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.nt5-header .btn-channel { background: var(--primary-blue); color: white; border: 1px solid var(--primary-blue); }
.nt5-header .btn-channel:hover { background: #112d6b; color: white; }
.nt5-header .btn-login { background: var(--active-blue); color: white; display: flex; align-items: center; gap: 8px; }
.nt5-header .btn-login:hover { background: #0069d9; color: white; }
.nt5-header .btn-signup { background: transparent; color: var(--primary-blue); border: 1px solid var(--primary-blue); }
.nt5-header .btn-signup:hover { background: var(--primary-blue); color: white; }

/* Mobile Sidebar */
.nt5-sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1999; opacity: 0; visibility: hidden; transition: 0.3s ease; }
.nt5-sidebar-overlay.active { opacity: 1; visibility: visible; }
.nt5-sidebar { position: fixed; top: 0; left: -300px; width: 280px; height: 100%; background: #e3f2fd; box-shadow: 2px 0 15px rgba(0,0,0,0.2); z-index: 2000; transition: 0.3s ease; padding: 20px; display: flex; flex-direction: column; overflow-y: auto; font-family: 'Quicksand', sans-serif; }
.nt5-sidebar.active { left: 0; }
.nt5-sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.nt5-sidebar .close-btn { background: none; border: none; font-size: 24px; color: #333; cursor: pointer; }
.nt5-sidebar-menu { background: white; border-radius: 12px; border: 1px solid var(--border-color); display: flex; flex-direction: column; overflow: hidden; }
.nt5-sidebar-menu a { padding: 15px 20px; font-size: 15px; font-weight: 600; color: var(--text-main); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 15px; text-decoration: none; }
.nt5-sidebar-menu a:last-child { border-bottom: none; }
.nt5-sidebar-menu a i { color: var(--text-main); font-size: 18px; width: 20px; text-align: center; }

@media (max-width: 900px) {
    .nt5-header .nav-links { display: none; }
    .nt5-header { padding: 0 10px; }
    .nt5-header .header-left { gap: 8px; }
    .nt5-header .mobile-menu-btn { display: block; margin-right: 0; font-size: 20px; padding: 5px; }
    .nt5-header .logo img { height: 22px; }
    .nt5-header .logo h3 { font-size: 16px; }
    .nt5-header .nav-actions { gap: 5px; }
    .nt5-header .btn { padding: 6px 8px; font-size: 11px; }
    .nt5-header .btn-login { background: white; color: var(--text-main); border: 1px solid var(--border-color); padding: 4px 6px; gap: 4px; }
    .nt5-header .btn-login:hover { background: #f8f9fa; border-color: #d1d5db; color: var(--text-main); }
    .nt5-header .btn-login i.fa-user { color: white; background: var(--active-blue); width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 10px; }
}

/* ========================================
   FOOTER
   ======================================== */
.nt5-footer { background: var(--footer-bg); color: white; padding: 50px 5% 20px; font-size: 13.5px; font-family: 'Quicksand', sans-serif; }
.nt5-footer .footer-grid { display: grid; grid-template-columns: 3fr 1fr; gap: 30px; max-width: 1200px; margin: 0 auto 30px; }
.nt5-footer .footer-nav-section { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; border-right: 1px solid #2a2a2a; padding-right: 30px; }
.nt5-footer .footer-contact-section { padding-left: 15px; }
.nt5-footer .footer-col h4 { font-size: 14px; text-transform: uppercase; margin-bottom: 25px; color: #ffffff; font-weight: 700; letter-spacing: 0.5px; }
.nt5-footer .footer-col ul { list-style: none; padding: 0; margin: 0; }
.nt5-footer .footer-col ul li a { color: #aaaaaa; display: flex; align-items: center; gap: 10px; transition: 0.2s; line-height: 32px; font-weight: 500; text-decoration: none; }
.nt5-footer .footer-col ul li a i { font-size: 13px; color: #777777; transition: 0.2s; }
.nt5-footer .footer-col ul li a:hover, .nt5-footer .footer-col ul li a:hover i { color: var(--active-blue); }
.nt5-footer .contact-info { margin-bottom: 15px; list-style: none; padding: 0; }
.nt5-footer .contact-info li { color: #aaaaaa; margin-bottom: 12px; line-height: 1.6; font-weight: 500; }
.nt5-footer .contact-info strong { color: white; display: inline-block; width: 65px; font-weight: 700; }
.nt5-footer .footer-bottom { text-align: center; border-top: 1px solid #1a1a1a; padding-top: 25px; color: #666666; font-size: 12px; font-weight: 600; }

@media (max-width: 900px) {
    .nt5-footer .footer-grid { grid-template-columns: 1fr; gap: 20px; }
    .nt5-footer .footer-nav-section { grid-template-columns: 1fr; border-right: none; padding-right: 0; gap: 10px; }
    .nt5-footer .footer-contact-section { padding-left: 0; }
}

/* ========================================
   HOME PAGE — Hero + Search
   ======================================== */
.nt5 .hero-section { min-height: 420px; background-image: url('https://99bookin.com/b2b/images/hh.jpg'); background-size: cover; background-position: center; position: relative; display: flex; flex-direction: column; align-items: center; padding: 80px 0 0 0; }
.nt5 .hero-title { color: white; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 25px; text-transform: uppercase; text-shadow: 0 2px 4px rgba(0,0,0,0.5); text-align: center; }
.nt5 .search-wrapper { width: 90%; max-width: 1100px; position: relative; }
.nt5 .search-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
.nt5 .search-tabs a { background: white; padding: 12px 22px; border-radius: 8px; border: 1px solid #2d6942; font-weight: 700; font-size: 14px; color: var(--text-main); display: flex; align-items: center; gap: 8px; transition: 0.2s; text-decoration: none; cursor: pointer; }
.nt5 .search-tabs a:hover { background: #fdfdfd; }
.nt5 .search-tabs a.active { color: var(--search-green); }
.nt5 .search-tabs a i { color: #888; }
.nt5 .search-tabs a.active i { color: var(--search-green); }

.nt5 .custom-search-container { background: white; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); padding: 30px 25px 50px 25px; position: relative; z-index: 1; }
.nt5 .custom-search-container.search-panel { display: none; }
.nt5 .custom-search-container.search-panel.active { display: block; }
.nt5 .search-grid { display: grid; grid-template-columns: 1fr; gap: 15px; }
.nt5 .input-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.nt5 .input-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.nt5 .input-box { border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 15px 12px 45px; position: relative; cursor: text; transition: border-color 0.2s; background: transparent; min-height: 62px; }
.nt5 .input-box:focus-within, .nt5 .input-box.focused { border-color: var(--search-green); }
.nt5 .input-box > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #999; }
.nt5 .input-box label { display: block; font-size: 11px; font-weight: 800; color: #888; text-transform: uppercase; margin-bottom: 4px; cursor: pointer; }
.nt5 .input-box input, .nt5 .input-box select { border: none; outline: none; font-size: 15px; font-weight: 700; color: var(--text-main); width: 100%; background: transparent; appearance: none; -webkit-appearance: none; }
.nt5 .input-box select { cursor: pointer; }
.nt5 .search-btn-container { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); z-index: 3; width: auto; }
.nt5 .btn-search { background: var(--search-green); color: white; border: none; padding: 0 40px; height: 52px; font-size: 16px; font-weight: 700; border-radius: 6px; cursor: pointer; width: 300px; box-shadow: 0 4px 15px rgba(78, 170, 126, 0.4); transition: background-color 0.2s, transform 0.1s; }
.nt5 .btn-search:hover { background: var(--search-green-hover); }
/* Button sits inside .search-btn-container which already handles the
   translate(-50%, 50%) centering — so the active state only needs scale. */
.nt5 .btn-search:active { transform: scale(0.97); }

/* Testimonials - Home Specific */
.nt5 .testimonials { background-image: url('https://99bookin.com/ofc/upload/171887937518270938441717669775.jpg'); background-size: cover; background-position: center; border-radius: 20px; padding: 40px; position: relative; margin-bottom: 50px; color: white; }
.nt5 .testimonials::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); border-radius: 20px; }
.nt5 .testi-content { position: relative; z-index: 2; }
.nt5 .testi-content h2 { font-size: 26px; font-weight: 800; margin-bottom: 15px; color: white; }
.nt5 .testi-content p { font-size: 15px; font-weight: 500; max-width: 800px; line-height: 1.6; margin-bottom: 30px; opacity: 0.95; color: white; }
.nt5 .testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.nt5 .testi-card { background: white; color: var(--text-main); border-radius: 12px; padding: 20px; box-shadow: var(--box-shadow); }
.nt5 .testi-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.nt5 .testi-avatar { width: 45px; height: 45px; background: #e0f7fa; color: #00bcd4; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; overflow: hidden; }
.nt5 .testi-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.nt5 .testi-name { font-weight: 700; font-size: 15px; margin: 0; }
.nt5 .stars { color: #ffb400; font-size: 13px; margin-top: 4px; }
.nt5 .testi-text { font-size: 13px; font-weight: 500; font-style: italic; color: var(--text-muted); line-height: 1.6; }

@media (max-width: 900px) {
    .nt5 .search-tabs { gap: 6px; margin-bottom: 12px; }
    .nt5 .search-tabs a { flex-direction: column; padding: 8px; font-size: 12px; flex: 1 1 calc(33% - 10px); text-align: center; gap: 5px; border: 1px solid var(--border-color); }
    .nt5 .search-tabs a i { font-size: 16px; margin-bottom: 2px; }
    .nt5 .search-tabs a.active { border-color: var(--search-green); }
    .nt5 .hero-section { height: auto; padding-bottom: 60px; padding-top: 40px; }
    .nt5 .custom-search-container { padding: 20px 15px 45px 15px; }
    .nt5 .input-row, .nt5 .input-row.cols-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
    .nt5 .input-box { padding: 8px 10px 8px 35px; min-height: 54px; }
    .nt5 .input-box > i { left: 10px; font-size: 15px; }
    .nt5 .input-box label { font-size: 10px; margin-bottom: 2px; }
    .nt5 .input-box input, .nt5 .input-box select { font-size: 12px; }
    .nt5 .search-btn-container { width: calc(100% - 30px); }
    .nt5 .btn-search { width: 100%; height: 45px; font-size: 15px; border-radius: 4px; }
}

/* ========================================
   STANDARD PAGE (About, Terms, Privacy, Blog details, etc.)
   ======================================== */
.nt5 .page-hero { background-color: #4b8df9; padding: 60px 5% 100px; text-align: center; color: white; }
.nt5 .page-hero h1 { font-size: 36px; font-weight: 800; margin-bottom: 10px; letter-spacing: -0.5px; color: white; }
.nt5 .page-hero p { font-size: 16px; font-weight: 500; opacity: 0.9; max-width: 600px; margin: 0 auto; color: white; }

.nt5 .page-content-wrapper { max-width: 900px; margin: -60px auto 60px auto; padding: 0 20px; position: relative; z-index: 10; }
.nt5 .page-card { background: white; border-radius: 16px; padding: 50px 60px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); }
.nt5 .page-card h2 { font-size: 22px; font-weight: 800; color: #163c8c; margin: 35px 0 15px 0; }
.nt5 .page-card h2:first-child { margin-top: 0; }
.nt5 .page-card h3 { font-size: 18px; font-weight: 700; color: #333; margin: 25px 0 10px 0; }
.nt5 .page-card p { font-size: 15px; line-height: 1.8; color: #555; margin-bottom: 20px; }
.nt5 .page-card ul, .nt5 .page-card ol { margin-bottom: 25px; padding-left: 20px; }
.nt5 .page-card li { font-size: 15px; line-height: 1.8; color: #555; margin-bottom: 10px; }
.nt5 .page-card li strong { color: #333; }
.nt5 .page-image { width: 100%; height: auto; border-radius: 12px; margin: 25px 0; box-shadow: 0 8px 25px rgba(0,0,0,0.08); object-fit: cover; cursor: pointer; transition: transform 0.3s ease; }
.nt5 .page-image:hover { transform: scale(1.02); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }

@keyframes fadeUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
.nt5 .animate-fade-up { opacity: 0; animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.nt5 .delay-100 { animation-delay: 0.1s; }
.nt5 .delay-200 { animation-delay: 0.2s; }
.nt5 .delay-300 { animation-delay: 0.3s; }
.nt5 .delay-400 { animation-delay: 0.4s; }
.nt5 .delay-500 { animation-delay: 0.5s; }

@media (max-width: 768px) {
    .nt5 .page-hero { padding: 40px 5% 80px; }
    .nt5 .page-hero h1 { font-size: 28px; }
    .nt5 .page-content-wrapper { margin-top: -40px; padding: 0 15px; }
    .nt5 .page-card { padding: 30px 20px; border-radius: 12px; }
}

/* ========================================
   Misc helpers
   ======================================== */
.nt5 .alert-banner-teal {
    background: #348f8f; color: white; text-align: center; padding: 12px 20px;
    border-radius: 8px; font-weight: 600; font-size: 14px; margin-bottom: 30px;
    display: flex; justify-content: center; align-items: center; gap: 10px; line-height: 1.4;
}

/* Ensure select2 widgets inside input-box look clean */
.nt5 .input-box .select2-container { width: 100% !important; }
.nt5 .input-box .select2-container--default .select2-selection--single {
    background: transparent; border: none; height: 22px;
}
.nt5 .input-box .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0; padding-right: 0; font-size: 15px; font-weight: 700; color: var(--text-main); line-height: 22px;
}
.nt5 .input-box .select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }

/* Select2 inside .nt5-field — matches the rest of the 44px bordered inputs */
.nt5 .nt5-field .select2-container { width: 100% !important; display: block; }
.nt5 .nt5-field .select2-container--default .select2-selection--single {
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    padding: 0 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.nt5 .nt5-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    padding: 0 24px 0 0;
    font-family: 'Quicksand', 'Inter', sans-serif;
}
.nt5 .nt5-field .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9ca3af; }
.nt5 .nt5-field .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px; right: 10px; top: 1px;
}
.nt5 .nt5-field .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #6b7280 transparent transparent transparent;
    border-width: 6px 5px 0 5px;
}
.nt5 .nt5-field .select2-container--default.select2-container--focus .select2-selection--single,
.nt5 .nt5-field .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--search-green);
    box-shadow: 0 0 0 3px rgba(78,170,126,0.12);
}
.nt5 .nt5-field .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #6b7280 transparent;
    border-width: 0 5px 6px 5px;
}

/* Dropdown panel — select2 appends this to <body>, so target with body.nt5-body */
body.nt5-body .select2-dropdown {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
    overflow: hidden;
    font-family: 'Quicksand', 'Inter', sans-serif;
}
body.nt5-body .select2-dropdown .select2-search--dropdown { padding: 8px; }
body.nt5-body .select2-dropdown .select2-search--dropdown .select2-search__field {
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    outline: none;
}
body.nt5-body .select2-dropdown .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--search-green);
    box-shadow: 0 0 0 3px rgba(78,170,126,0.12);
}
body.nt5-body .select2-container--default .select2-results__option {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}
body.nt5-body .select2-container--default .select2-results__option--highlighted[aria-selected],
body.nt5-body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--primary-blue);
    color: #fff;
}
body.nt5-body .select2-container--default .select2-results__option[aria-selected=true],
body.nt5-body .select2-container--default .select2-results__option--selected {
    background-color: #eef4ff;
    color: var(--primary-blue);
    font-weight: 700;
}


/* =====================================================================
   NEW-THEME5 LISTING / DETAIL / BOOKING / FORM COMPONENTS
   ===================================================================== */

/* Shared container */
.nt5 .nt5-container { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
.nt5 .nt5-section { padding: 40px 0; }
.nt5 .nt5-section-sm { padding: 24px 0; }

/* Breadcrumb ribbon (small header strip) */
.nt5 .nt5-crumbs { color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600; display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.nt5 .nt5-crumbs a { color: rgba(255,255,255,0.95); text-decoration: none; }
.nt5 .nt5-crumbs a:hover { color: white; text-decoration: underline; }
.nt5 .nt5-crumbs span { opacity: 0.6; }

/* Listing page layout (2-col: filter sidebar + results) */
.nt5 .nt5-listing { display: grid; grid-template-columns: 300px 1fr; gap: 28px; margin-top: -40px; position: relative; z-index: 5; padding-bottom: 60px; }
@media (max-width: 900px) { .nt5 .nt5-listing { grid-template-columns: 1fr; gap: 20px; margin-top: -30px; } }

/* Filter card */
.nt5 .nt5-filter-card { background: white; border: 1px solid var(--border-color); border-radius: 14px; padding: 22px; box-shadow: 0 8px 25px rgba(0,0,0,0.05); position: sticky; top: 90px; align-self: start; }
@media (max-width: 900px) { .nt5 .nt5-filter-card { position: static; } }
.nt5 .nt5-filter-card .nt5-filter-group { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eef1f6; }
.nt5 .nt5-filter-card .nt5-filter-group:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.nt5 .nt5-filter-card .nt5-filter-title { font-size: 13px; font-weight: 800; color: #163c8c; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.nt5 .nt5-filter-card .nt5-filter-title i { color: #4eaa7e; }

/* Form field (generic reusable) */
.nt5 .nt5-field { position: relative; margin-bottom: 14px; }
.nt5 .nt5-field label { display: block; font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
.nt5 .nt5-field .nt5-input, .nt5 .nt5-field input[type="text"], .nt5 .nt5-field input[type="email"], .nt5 .nt5-field input[type="tel"], .nt5 .nt5-field input[type="number"], .nt5 .nt5-field input[type="password"], .nt5 .nt5-field input[type="date"], .nt5 .nt5-field input[type="time"], .nt5 .nt5-field input[type="month"], .nt5 .nt5-field input[type="datetime-local"], .nt5 .nt5-field textarea, .nt5 .nt5-field select {
    width: 100%; height: 44px; background: #fff; border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 14px; font-size: 14px; font-weight: 500; color: #333; transition: border-color 0.2s, box-shadow 0.2s; outline: none; font-family: 'Quicksand', 'Inter', sans-serif;
}
.nt5 .nt5-field textarea { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; }
.nt5 .nt5-field .nt5-input:focus, .nt5 .nt5-field input:focus, .nt5 .nt5-field textarea:focus, .nt5 .nt5-field select:focus {
    border-color: var(--search-green); box-shadow: 0 0 0 3px rgba(78,170,126,0.12);
}
.nt5 .nt5-field.has-icon .nt5-input,
.nt5 .nt5-field.has-icon input,
.nt5 .nt5-field.has-icon select,
.nt5 .nt5-field.has-icon textarea { padding-left: 40px; }
/* Icon positioned from the BOTTOM of the field — stays centered in the 44px
   input whether or not a label is present above. Previously used top:38px
   which dropped the icon below the input when the field had no label. */
/* Anchor the icon from the TOP (label height + half the 44px input) so it
   stays centred in the input even when a validation message is appended
   below it — anchoring from the bottom made the icon slide onto the error. */
.nt5 .nt5-field.has-icon .nt5-field-icon { position: absolute; left: 14px; top: 35px; bottom: auto; color: #9ca3af; font-size: 15px; pointer-events: none; z-index: 1; }
.nt5 .nt5-field.has-icon textarea ~ .nt5-field-icon { bottom: auto; top: 38px; }
.nt5 .nt5-field .nt5-hint { font-size: 12px; color: #888; margin-top: 6px; }

/* Button variants */
.nt5 .nt5-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 8px; font-size: 14px; font-weight: 700; border: none; cursor: pointer; text-decoration: none; transition: all 0.2s ease; line-height: 1.2; font-family: 'Quicksand', 'Inter', sans-serif; }
.nt5 .nt5-btn-primary { background: var(--search-green); color: white; box-shadow: 0 4px 15px rgba(78,170,126,0.25); }
.nt5 .nt5-btn-primary:hover { background: var(--search-green-hover); color: white; transform: translateY(-1px); }
.nt5 .nt5-btn-secondary { background: var(--primary-blue); color: white; }
.nt5 .nt5-btn-secondary:hover { background: #112d6b; color: white; transform: translateY(-1px); }
.nt5 .nt5-btn-outline { background: white; color: var(--primary-blue); border: 1px solid var(--primary-blue); }
.nt5 .nt5-btn-outline:hover { background: var(--primary-blue); color: white; }
.nt5 .nt5-btn-ghost { background: #f4f6fa; color: #333; }
.nt5 .nt5-btn-ghost:hover { background: #e7ecf4; color: #163c8c; }
.nt5 .nt5-btn-full { width: 100%; }
.nt5 .nt5-btn-sm { padding: 7px 14px; font-size: 12px; }
.nt5 .nt5-btn-lg { padding: 14px 30px; font-size: 15px; }

/* Results toolbar (count + sort + view switcher) */
.nt5 .nt5-results-toolbar { background: white; border: 1px solid var(--border-color); border-radius: 12px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.nt5 .nt5-results-count { font-size: 15px; font-weight: 700; color: #333; }
.nt5 .nt5-results-count span { color: var(--search-green); font-weight: 800; }
.nt5 .nt5-results-actions { display: flex; align-items: center; gap: 10px; }
.nt5 .nt5-view-toggle { display: inline-flex; background: #f4f6fa; border-radius: 8px; padding: 3px; gap: 3px; }
.nt5 .nt5-view-toggle a { width: 34px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: #666; font-size: 15px; text-decoration: none; }
.nt5 .nt5-view-toggle a.active { background: white; color: var(--primary-blue); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }

/* Listing card — horizontal variant */
.nt5 .nt5-list-card { display: grid; grid-template-columns: 260px 1fr; background: white; border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; margin-bottom: 16px; transition: all 0.3s ease; text-decoration: none; color: inherit; }
.nt5 .nt5-list-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-color: #dbe5f2; transform: translateY(-2px); }
.nt5 .nt5-list-card .nt5-list-img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; }
.nt5 .nt5-list-card .nt5-list-body { padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.nt5 .nt5-list-card .nt5-list-title { font-size: 17px; font-weight: 800; color: #222; margin: 0; line-height: 1.3; }
.nt5 .nt5-list-card .nt5-list-addr { font-size: 13px; color: #777; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.nt5 .nt5-list-card .nt5-list-addr i { color: #f44336; }
.nt5 .nt5-list-card .nt5-list-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid #f0f2f7; }
.nt5 .nt5-list-card .nt5-list-price { font-size: 18px; font-weight: 800; color: var(--primary-blue); }
.nt5 .nt5-list-card .nt5-list-price small { font-size: 11px; color: #888; font-weight: 600; margin-right: 2px; }
.nt5 .nt5-list-card .nt5-badge-rating { background: #2e7d32; color: white; padding: 4px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.nt5 .nt5-list-card .nt5-badge-rating i { font-size: 10px; }
@media (max-width: 700px) { .nt5 .nt5-list-card { grid-template-columns: 1fr; } .nt5 .nt5-list-card .nt5-list-img { height: 180px; min-height: 180px; } }

/* Hotel listing card — 3-col with stacked price tiers */
.nt5 .nt5-list-card-hotel { grid-template-columns: 240px 1fr 220px; }
.nt5 .nt5-list-card-hotel .nt5-price-stack { padding: 14px; display: flex; flex-direction: column; gap: 8px; border-left: 1px solid #f0f2f7; background: #fafbfd; }
.nt5 .nt5-price-tier { border: 1px solid #e3eadb; border-radius: 6px; overflow: hidden; }
.nt5 .nt5-price-tier-head { background: #6aa84f; color: #fff; font-size: 12px; font-weight: 700; padding: 5px 10px; letter-spacing: 0.2px; }
.nt5 .nt5-price-tier-body { background: #fff; padding: 7px 10px; font-size: 13px; font-weight: 700; color: #222; }
.nt5 .nt5-price-tier-na { color: #888; font-weight: 600; font-size: 12px; }
.nt5 .nt5-price-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; }
@media (max-width: 900px) { .nt5 .nt5-list-card-hotel { grid-template-columns: 1fr; } .nt5 .nt5-list-card-hotel .nt5-price-stack { border-left: none; border-top: 1px solid #f0f2f7; } }

/* Detail page header */
.nt5 .nt5-detail-hero { background: linear-gradient(135deg, #4b8df9 0%, #163c8c 100%); color: white; padding: 40px 5% 60px; }
.nt5 .nt5-detail-hero .nt5-detail-title { font-size: 28px; font-weight: 800; margin: 0 0 10px 0; color: white; }
.nt5 .nt5-detail-hero .nt5-detail-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 14px; opacity: 0.92; }
.nt5 .nt5-detail-hero .nt5-detail-meta i { margin-right: 4px; }
.nt5 .nt5-detail-hero .nt5-badge-rating { background: #2e7d32; padding: 5px 10px; border-radius: 6px; font-weight: 700; }

/* Detail gallery */
.nt5 .nt5-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 150px 150px; gap: 8px; max-width: 1200px; margin: -30px auto 40px; padding: 0 5%; position: relative; z-index: 3; }
.nt5 .nt5-gallery .nt5-gallery-item { overflow: hidden; border-radius: 10px; background: #eef1f6; }
.nt5 .nt5-gallery .nt5-gallery-item:first-child { grid-row: span 2; height: 308px; }
.nt5 .nt5-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.nt5 .nt5-gallery .nt5-gallery-item:hover img { transform: scale(1.03); }
@media (max-width: 768px) {
    .nt5 .nt5-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 140px 140px; }
    .nt5 .nt5-gallery .nt5-gallery-item:first-child { grid-column: span 2; grid-row: auto; height: 200px; }
}

/* Detail body layout */
.nt5 .nt5-detail-body { display: grid; grid-template-columns: 1fr 340px; gap: 30px; max-width: 1200px; margin: 0 auto 60px; padding: 0 5%; }
@media (max-width: 900px) { .nt5 .nt5-detail-body { grid-template-columns: 1fr; } }

.nt5 .nt5-content-card { background: white; border: 1px solid var(--border-color); border-radius: 14px; padding: 26px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
.nt5 .nt5-content-card h2 { font-size: 20px; font-weight: 800; color: var(--primary-blue); margin: 0 0 16px 0; }
.nt5 .nt5-content-card h3 { font-size: 16px; font-weight: 700; color: #333; margin: 18px 0 10px 0; }
.nt5 .nt5-content-card p { font-size: 14px; line-height: 1.75; color: #555; margin-bottom: 14px; }
.nt5 .nt5-content-card ul { padding-left: 20px; }
.nt5 .nt5-content-card ul li { color: #555; font-size: 14px; line-height: 1.8; }

/* Amenity pills */
.nt5 .nt5-amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.nt5 .nt5-amenity { display: flex; align-items: center; gap: 10px; background: #f8fafc; border: 1px solid #eef1f6; border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #333; }
.nt5 .nt5-amenity i { color: var(--search-green); font-size: 15px; }

/* Booking widget (sidebar on detail) */
.nt5 .nt5-booking-widget { background: white; border: 1px solid var(--border-color); border-radius: 14px; padding: 22px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); position: sticky; top: 90px; align-self: start; }
.nt5 .nt5-booking-widget .nt5-bw-price { font-size: 26px; font-weight: 800; color: var(--primary-blue); margin-bottom: 2px; }
.nt5 .nt5-booking-widget .nt5-bw-price small { font-size: 13px; color: #888; font-weight: 500; }
.nt5 .nt5-booking-widget .nt5-bw-sub { font-size: 13px; color: #666; margin-bottom: 18px; }
.nt5 .nt5-booking-widget hr { border: none; border-top: 1px solid #eef1f6; margin: 16px 0; }

/* Summary row */
.nt5 .nt5-summary-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; color: #555; }
.nt5 .nt5-summary-row.total { font-weight: 800; color: #163c8c; font-size: 16px; padding-top: 10px; border-top: 1px dashed #cbd5e1; margin-top: 12px; }

/* Tabs */
.nt5 .nt5-tabs { display: flex; gap: 4px; border-bottom: 2px solid #eef1f6; margin-bottom: 18px; overflow-x: auto; }
.nt5 .nt5-tabs button { background: transparent; border: none; border-bottom: 3px solid transparent; color: #666; font-weight: 700; font-size: 14px; padding: 12px 18px; cursor: pointer; white-space: nowrap; font-family: inherit; }
.nt5 .nt5-tabs button:hover { color: var(--primary-blue); }
.nt5 .nt5-tabs button.active { color: var(--primary-blue); border-bottom-color: var(--primary-blue); }

/* Room/table cards on detail page */
.nt5 .nt5-room-card { display: grid; grid-template-columns: 180px 1fr auto; gap: 16px; background: white; border: 1px solid var(--border-color); border-radius: 12px; padding: 14px; margin-bottom: 14px; align-items: center; }
/* Target ONLY the main room photo (direct child, or wrapped in an <a>), not
   amenity icons inside nt5-chip. Previously `.nt5-room-card img` grabbed
   every descendant image and stretched the tiny amenity icons to 180x130. */
.nt5 .nt5-room-card > img,
.nt5 .nt5-room-card > a > img { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; }
.nt5 .nt5-room-card h4 { margin: 0 0 4px 0; font-size: 16px; font-weight: 800; color: #222; }
.nt5 .nt5-room-card p { margin: 0; font-size: 13px; color: #666; }
.nt5 .nt5-room-card .nt5-room-price { text-align: right; }
.nt5 .nt5-room-card .nt5-room-price strong { display: block; font-size: 20px; font-weight: 800; color: var(--primary-blue); }
.nt5 .nt5-room-card .nt5-room-price small { font-size: 11px; color: #888; font-weight: 600; }
@media (max-width: 700px) { .nt5 .nt5-room-card { grid-template-columns: 1fr; } .nt5 .nt5-room-card > img, .nt5 .nt5-room-card > a > img { height: 180px; } .nt5 .nt5-room-card .nt5-room-price { text-align: left; } }

/* Lock amenity icons inside chips to 14x14 so CMS-uploaded PNGs don't
   render at their natural size and blow up the layout. */
.nt5 .nt5-chip img { width: 14px !important; height: 14px !important; object-fit: contain; flex-shrink: 0; }
.nt5 .nt5-amenity img { width: 20px !important; height: 20px !important; object-fit: contain; flex-shrink: 0; }

/* Review card */
.nt5 .nt5-review { display: grid; grid-template-columns: 54px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid #eef1f6; }
.nt5 .nt5-review:last-child { border-bottom: none; }
.nt5 .nt5-review-avatar { width: 54px; height: 54px; border-radius: 50%; background: #eef4ff; color: var(--primary-blue); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; overflow: hidden; }
.nt5 .nt5-review-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.nt5 .nt5-review h4 { margin: 0 0 4px 0; font-size: 15px; font-weight: 700; color: #222; }
.nt5 .nt5-review .nt5-review-meta { font-size: 12px; color: #888; font-weight: 500; margin-bottom: 6px; }
.nt5 .nt5-review .nt5-review-stars { color: #ffb400; font-size: 13px; margin-bottom: 6px; }
.nt5 .nt5-review p { margin: 0; font-size: 14px; color: #555; line-height: 1.7; }

/* Pagination */
.nt5 .nt5-pagination { display: flex; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 30px 0 0; flex-wrap: wrap; }
.nt5 .nt5-pagination li a, .nt5 .nt5-pagination li span {
    min-width: 38px; height: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; background: white; border: 1px solid var(--border-color); color: #333; font-weight: 700; font-size: 13px; text-decoration: none; transition: all 0.2s ease;
}
.nt5 .nt5-pagination li a:hover { background: #f4f6fa; border-color: #dbe5f2; }
.nt5 .nt5-pagination li.active a, .nt5 .nt5-pagination li.active span { background: var(--primary-blue); color: white; border-color: var(--primary-blue); }
.nt5 .nt5-pagination li.disabled span { color: #bbb; background: #f8f9fa; cursor: not-allowed; }

/* Checkbox / rating filter */
.nt5 .nt5-check { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: #333; cursor: pointer; font-weight: 600; }
.nt5 .nt5-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary-blue); cursor: pointer; }
.nt5 .nt5-check i { color: #ffb400; font-size: 13px; }

/* Empty state */
.nt5 .nt5-empty { text-align: center; padding: 60px 20px; color: #666; background: white; border: 1px dashed var(--border-color); border-radius: 14px; }
.nt5 .nt5-empty i { font-size: 46px; color: #cbd5e1; margin-bottom: 14px; display: inline-block; }
.nt5 .nt5-empty h3 { font-size: 18px; font-weight: 800; color: #333; margin-bottom: 6px; }
.nt5 .nt5-empty p { color: #777; font-size: 14px; margin: 0; }

/* Auth form card */
.nt5 .nt5-auth { display: grid; place-items: center; padding: 50px 20px; }
.nt5 .nt5-auth-card { width: 100%; max-width: 440px; background: white; border-radius: 18px; padding: 32px; box-shadow: 0 16px 50px rgba(0,0,0,0.08); border: 1px solid var(--border-color); }
.nt5 .nt5-auth-card h1 { font-size: 26px; font-weight: 800; color: var(--primary-blue); margin: 0 0 6px 0; text-align: center; }
.nt5 .nt5-auth-card p.sub { color: #666; font-size: 14px; text-align: center; margin: 0 0 22px 0; }
.nt5 .nt5-auth-card .nt5-auth-footer { text-align: center; margin-top: 18px; font-size: 14px; color: #666; }
.nt5 .nt5-auth-card .nt5-auth-footer a { color: var(--active-blue); font-weight: 700; }

/* Info panel (for highlights/banners) */
.nt5 .nt5-info-panel { display: flex; align-items: flex-start; gap: 14px; background: #f0f7ff; border: 1px solid #cfe1fd; border-radius: 12px; padding: 14px 18px; color: #113b8a; font-weight: 600; font-size: 14px; }
.nt5 .nt5-info-panel i { color: #4b8df9; font-size: 18px; margin-top: 2px; }

/* Grid auto (responsive card grid) */
.nt5 .nt5-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.nt5 .nt5-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .nt5 .nt5-grid-2 { grid-template-columns: 1fr; } }

/* Chip */
.nt5 .nt5-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #eef4ff; color: var(--primary-blue); border-radius: 999px; font-size: 12px; font-weight: 700; }


/* =====================================================================
   LEGACY BRIDGE — styles applied to the existing site-wide classes so
   that non-rewritten pages (hotels list, restaurant details, contact,
   booking, blogs, etc.) visually align with the new-theme5 system.
   These selectors DO NOT live under .nt5 — they target the original
   Roomory templates directly. Body class is `nt5-body` globally.
   ===================================================================== */

/* ----- Page hero (replaces the old breadcrumb-area colored banner) ----- */
body.nt5-body .breadcrumb-area {
    background: linear-gradient(135deg, #4b8df9 0%, #163c8c 100%) !important;
    background-image: linear-gradient(135deg, #4b8df9 0%, #163c8c 100%) !important;
    padding: 55px 5% 90px !important;
    text-align: center;
    color: white;
    position: relative;
    margin: 0;
}
body.nt5-body .breadcrumb-area.bread-bg-5,
body.nt5-body .breadcrumb-area.bread-bg-7,
body.nt5-body .breadcrumb-area.bread-bg-9,
body.nt5-body .breadcrumb-area[class*="bread-bg-"] {
    background: linear-gradient(135deg, #4b8df9 0%, #163c8c 100%) !important;
    background-image: linear-gradient(135deg, #4b8df9 0%, #163c8c 100%) !important;
}
body.nt5-body .breadcrumb-area .breadcrumb-wrap { padding: 0; }
body.nt5-body .breadcrumb-area .breadcrumb-content,
body.nt5-body .breadcrumb-area .breadcrumb-list { text-align: center !important; }
body.nt5-body .breadcrumb-area .section-heading .sec__title {
    font-size: 34px !important;
    font-weight: 800 !important;
    color: white !important;
    letter-spacing: -0.5px;
    line-height: 1.25 !important;
    margin: 0 0 10px 0 !important;
    font-family: 'Quicksand', 'Inter', sans-serif;
}
body.nt5-body .breadcrumb-area .breadcrumb-list { text-align: center !important; margin-top: 8px; }
body.nt5-body .breadcrumb-area .breadcrumb-list ul,
body.nt5-body .breadcrumb-area .breadcrumb-list .list-items {
    display: inline-flex; justify-content: center; gap: 8px;
    list-style: none; padding: 0; margin: 0;
}
body.nt5-body .breadcrumb-area .breadcrumb-list li {
    color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center;
}
body.nt5-body .breadcrumb-area .breadcrumb-list li a { color: rgba(255,255,255,0.95); text-decoration: none; }
body.nt5-body .breadcrumb-area .breadcrumb-list li a:hover { color: white; text-decoration: underline; }
body.nt5-body .breadcrumb-area .breadcrumb-list li + li::before { content: "/"; margin-right: 8px; opacity: 0.6; }
body.nt5-body .breadcrumb-area .bread-svg-box { display: none; }
body.nt5-body .breadcrumb-area .text-end { text-align: center !important; }

@media (max-width: 768px) {
    body.nt5-body .breadcrumb-area { padding: 40px 5% 70px !important; }
    body.nt5-body .breadcrumb-area .section-heading .sec__title { font-size: 24px !important; }
}

/* ----- Section padding harmonization ----- */
body.nt5-body .section--padding { padding: 50px 0 !important; }
body.nt5-body .section-padding { padding: 50px 0 !important; }
body.nt5-body .padding-top-100px { padding-top: 60px !important; }
body.nt5-body .padding-bottom-90px { padding-bottom: 60px !important; }
body.nt5-body .padding-top-80px { padding-top: 50px !important; }
body.nt5-body .padding-bottom-80px { padding-bottom: 50px !important; }
body.nt5-body .padding-right-100px { padding-right: 5% !important; }
body.nt5-body .padding-left-100px { padding-left: 5% !important; }

/* Lift content that previously overlapped header */
body.nt5-body .card-area,
body.nt5-body .about-area,
body.nt5-body .info-area,
body.nt5-body .contact-area,
body.nt5-body .hotel-area,
body.nt5-body .blog-area,
body.nt5-body .testimonial-area,
body.nt5-body .funfact-area { background-color: #fafafa; }
body.nt5-body .section-bg { background-color: #f4f6fa !important; }

/* ----- Section heading (legacy .sec__title and related) ----- */
body.nt5-body .section-heading .sec__title {
    font-family: 'Quicksand', 'Inter', sans-serif;
    font-weight: 800;
    color: #163c8c;
    letter-spacing: -0.3px;
}
body.nt5-body .section-heading .sec__desc,
body.nt5-body .section-heading p {
    font-family: 'Quicksand', 'Inter', sans-serif;
    color: #666; line-height: 1.7; font-size: 15px;
}

/* ----- Cards (listing / blog / testimonial) ----- */
body.nt5-body .card-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: none;
    margin-bottom: 24px;
}
body.nt5-body .card-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border-color: #dbe5f2;
}
body.nt5-body .card-item .card-img { overflow: hidden; }
body.nt5-body .card-item .card-img img {
    width: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
body.nt5-body .card-item:hover .card-img img { transform: scale(1.04); }
body.nt5-body .card-item .card-body { padding: 18px 18px 20px 18px; }
body.nt5-body .card-item .card-title {
    font-family: 'Quicksand', 'Inter', sans-serif;
    font-size: 16px; font-weight: 700; color: #222; margin-bottom: 6px; line-height: 1.35;
}
body.nt5-body .card-item .card-title a { color: #222; text-decoration: none; }
body.nt5-body .card-item .card-title a:hover { color: #007bff; }
body.nt5-body .card-item .card-meta {
    font-family: 'Quicksand', 'Inter', sans-serif;
    font-size: 13px; color: #777; font-weight: 500; margin-bottom: 10px; line-height: 1.5;
}
body.nt5-body .card-item .card-rating { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
body.nt5-body .card-item .card-rating .badge {
    background: #2e7d32 !important; color: #fff !important; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 700;
}
body.nt5-body .card-item .card-rating .rating__text { font-size: 12px; color: #888; font-weight: 500; }
body.nt5-body .card-item .card-price { padding-top: 8px; border-top: 1px solid #f0f0f0; }
body.nt5-body .card-item .card-price .price__from { font-size: 11px; color: #888; font-weight: 600; margin-right: 3px; }
body.nt5-body .card-item .card-price .price__num { font-size: 18px; font-weight: 800; color: #163c8c; }
body.nt5-body .card-item .btn-text {
    color: #007bff; font-weight: 700; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
body.nt5-body .card-item .btn-text:hover { color: #163c8c; }
body.nt5-body .card-item .btn-text i { font-size: 12px; }

/* ----- Blog card list layout ----- */
body.nt5-body .blog-card .card-img { position: relative; }
body.nt5-body .blog-card .post-categories { position: absolute; top: 12px; left: 12px; z-index: 2; }
body.nt5-body .blog-card .post-categories .badge {
    background: #163c8c !important; color: white !important; padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 700;
}
body.nt5-body .blog-card .post__date { font-size: 12px; color: #888; font-weight: 600; }

/* ----- Theme button (replaces old .theme-btn) ----- */
body.nt5-body .theme-btn {
    font-family: 'Quicksand', 'Inter', sans-serif;
    background: #4eaa7e !important;
    color: white !important;
    border: none;
    padding: 11px 26px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(78,170,126,0.25);
    transition: all 0.2s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
}
body.nt5-body .theme-btn:hover { background: #3d8c65 !important; color: white !important; transform: translateY(-1px); }
body.nt5-body .theme-btn.theme-btn-transparent {
    background: transparent !important; color: #163c8c !important;
    border: 1px solid #163c8c; box-shadow: none;
}
body.nt5-body .theme-btn.theme-btn-transparent:hover { background: #163c8c !important; color: white !important; }
body.nt5-body .theme-btn.theme-btn-small { padding: 7px 16px; font-size: 12px; }
body.nt5-body .btn-box .theme-btn { margin-top: 5px; }
body.nt5-body .theme-btn.w-100 { width: 100%; }

/* ----- Sidebar widgets on listing pages ----- */
body.nt5-body .sidebar .sidebar-widget {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
body.nt5-body .sidebar .sidebar-widget .title {
    font-family: 'Quicksand', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #163c8c;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eef1f6;
}
body.nt5-body .sidebar .sidebar-widget .title.stroke-shape::after,
body.nt5-body .sidebar .sidebar-widget .title.stroke-shape::before { display: none; }
body.nt5-body .sidebar .sidebar-widget .input-box { margin-bottom: 12px; }
body.nt5-body .sidebar-review .custom-checkbox { padding: 6px 0; }
body.nt5-body .sidebar-review .ratings i { color: #ffb400; font-size: 14px; margin-right: 2px; }

/* ----- Form input boxes (.input-box / .form-group / .form-control) ----- */
body.nt5-body .form-box,
body.nt5-body .contact-form-action .form-box {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
body.nt5-body .form-title-wrap .title,
body.nt5-body .form-title-wrap h3 {
    font-family: 'Quicksand', 'Inter', sans-serif;
    font-size: 20px; font-weight: 800; color: #163c8c; margin-bottom: 6px;
}
body.nt5-body .contact-form-action .input-box { margin-bottom: 16px; }
body.nt5-body .contact-form-action .input-box .label-text {
    font-family: 'Quicksand', 'Inter', sans-serif;
    display: block; font-size: 12px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 5px;
}
body.nt5-body .contact-form-action .form-group { position: relative; }
body.nt5-body .contact-form-action .form-group .form-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #999; font-size: 16px; z-index: 2;
}
body.nt5-body .contact-form-action .form-control,
body.nt5-body .form-control {
    font-family: 'Quicksand', 'Inter', sans-serif;
    height: 46px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 14px 10px 40px; font-size: 14px; font-weight: 500; color: #333;
    box-shadow: none; transition: border-color 0.2s, box-shadow 0.2s; background: #fff;
}
body.nt5-body .contact-form-action .form-control:focus,
body.nt5-body .form-control:focus {
    border-color: #4eaa7e; box-shadow: 0 0 0 3px rgba(78,170,126,0.12); outline: none;
}
body.nt5-body textarea.form-control { height: auto; min-height: 120px; padding-left: 14px; }
body.nt5-body .contact-form-action .form-group:not(:has(.form-icon)) .form-control { padding-left: 14px; }

/* ----- Select2 on bridge (listing filters etc.) ----- */
body.nt5-body .select-contain .select2-container--default .select2-selection--single,
body.nt5-body .select-contain-select + .select2 .select2-selection--single {
    height: 44px; border-radius: 8px; border: 1px solid #e5e7eb;
}
body.nt5-body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px; padding-left: 14px; font-weight: 600; color: #333;
}
body.nt5-body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }

/* ----- Sidebar price slider cleaner look ----- */
body.nt5-body .ui-slider { background: #eef1f6; border: none; height: 6px; border-radius: 999px; }
body.nt5-body .ui-slider .ui-slider-range { background: #4eaa7e; border-radius: 999px; }
body.nt5-body .ui-slider .ui-slider-handle {
    width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #4eaa7e; top: -7px; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ----- Badges and price displays used in details pages ----- */
body.nt5-body .badge.rounded-pill.bg-primary,
body.nt5-body .badge.bg-primary { background: #163c8c !important; }
body.nt5-body .badge.bg-success { background: #2e7d32 !important; }

/* ----- Footer back-to-top button ----- */
body.nt5-body #back-to-top {
    position: fixed; bottom: 24px; right: 24px; z-index: 1500; width: 42px; height: 42px;
    background: #163c8c; color: white; border-radius: 50%; display: none; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 6px 20px rgba(22,60,140,0.35); font-size: 18px;
}
body.nt5-body #back-to-top.show { display: inline-flex; }
body.nt5-body #back-to-top:hover { background: #112d6b; }

/* ----- Pagination ----- */
body.nt5-body .pagination-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; justify-content: center; }
body.nt5-body .pagination-list li a,
body.nt5-body .pagination-list li span,
body.nt5-body .pagination .page-item .page-link {
    min-width: 38px; height: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; background: #fff; border: 1px solid #e5e7eb; color: #333; font-weight: 600; font-size: 13px;
    text-decoration: none; transition: all 0.2s ease;
}
body.nt5-body .pagination-list li a:hover,
body.nt5-body .pagination .page-item .page-link:hover { background: #f4f6fa; border-color: #dbe5f2; }
body.nt5-body .pagination-list li.active a,
body.nt5-body .pagination-list li a.active,
body.nt5-body .pagination .page-item.active .page-link { background: #163c8c; color: white; border-color: #163c8c; }

/* ----- Nav tabs (detail pages) ----- */
body.nt5-body .nav-tab-item .nav-tabs { border-bottom: 2px solid #eef1f6; gap: 6px; }
body.nt5-body .nav-tab-item .nav-tabs .nav-link {
    border: none; border-bottom: 3px solid transparent; color: #555; font-weight: 700; font-size: 14px; padding: 12px 18px; background: transparent;
}
body.nt5-body .nav-tab-item .nav-tabs .nav-link.active {
    color: #163c8c; border-bottom-color: #163c8c; background: transparent;
}

/* ----- Footer area on legacy .footer-area (if any view still uses it) ----- */
body.nt5-body .footer-area {
    background: #0a0a0a !important;
    color: #aaa;
    padding: 50px 5% 20px !important;
}
body.nt5-body .footer-area h3,
body.nt5-body .footer-area h4,
body.nt5-body .footer-area .title {
    color: white !important; font-family: 'Quicksand', 'Inter', sans-serif; font-weight: 700; letter-spacing: 0.4px;
}
body.nt5-body .footer-area a { color: #aaa; }
body.nt5-body .footer-area a:hover { color: #4b8df9; }

/* ----- Misc alignment helpers used across pages ----- */
body.nt5-body .margin-bottom-40px { margin-bottom: 30px !important; }
body.nt5-body .margin-top-60px { margin-top: 40px !important; }
body.nt5-body .padding-top-30px { padding-top: 20px !important; }
body.nt5-body .padding-top-35px { padding-top: 20px !important; }
body.nt5-body .line-height-50,
body.nt5-body .line-height-55 { line-height: 1.25 !important; }

/* ----- Info icon circles on homepage/about ----- */
body.nt5-body .icon-box .info-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, #4b8df9, #163c8c); color: white;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; margin-bottom: 16px;
    box-shadow: 0 6px 18px rgba(22,60,140,0.25);
}
body.nt5-body .icon-box .info__title {
    font-family: 'Quicksand', 'Inter', sans-serif;
    font-size: 18px; font-weight: 800; color: #163c8c; margin-bottom: 8px;
}
body.nt5-body .icon-box .info__desc { font-size: 14px; color: #666; line-height: 1.6; font-weight: 500; }

/* ----- Counter items (about page) ----- */
body.nt5-body .counter-item .counter-icon {
    width: 64px; height: 64px; border-radius: 12px;
    background: #eef4ff; color: #163c8c;
    display: inline-flex; align-items: center; justify-content: center; font-size: 28px;
}
body.nt5-body .counter-item .counter {
    font-size: 32px; font-weight: 800; color: #163c8c; font-family: 'Quicksand', 'Inter', sans-serif;
}
body.nt5-body .counter-item .counter__title { color: #666; font-weight: 600; font-size: 13px; margin-top: 4px; }

/* ----- Auth pages (login/signup) ----- */
body.nt5-body .billing-form-item {
    background: #fff; border-radius: 16px; padding: 30px 28px; border: 1px solid #e5e7eb;
    box-shadow: 0 8px 30px rgba(0,0,0,0.05); max-width: 500px; margin: 40px auto;
}
body.nt5-body .billing-title-wrap .widget-title {
    font-family: 'Quicksand', 'Inter', sans-serif;
    font-size: 24px; font-weight: 800; color: #163c8c; margin-bottom: 6px;
}
body.nt5-body .billing-title-wrap .widget-sub-title { color: #666; font-size: 14px; margin-bottom: 20px; }

/* ----- Detail page hero image gallery ----- */
body.nt5-body .breadcrumb-area.bread-bg-4,
body.nt5-body .breadcrumb-area.bread-bg-6,
body.nt5-body .breadcrumb-area.bread-bg-8 {
    padding: 40px 5% 60px !important;
}

/* ----- Make sure modals still render correctly ----- */
body.nt5-body .modal-content { border-radius: 16px; border: none; box-shadow: 0 20px 50px rgba(0,0,0,0.15); }
body.nt5-body .modal-header { border-bottom: 1px solid #eef1f6; padding: 20px 24px; }
body.nt5-body .modal-title.title { font-family: 'Quicksand', 'Inter', sans-serif; font-size: 20px; font-weight: 800; color: #163c8c; }
body.nt5-body .modal-body { padding: 20px 24px 24px; }

/* ----- Hero (legacy homepage) no longer used on / but kept for safety ----- */
body.nt5-body .hero-wrapper .hero-box.hero-bg {
    background: linear-gradient(135deg, #4b8df9 0%, #163c8c 100%) !important;
}