/* =========================================================================
   VIVIDUS Bengaluru — site-wide layer (every page, homepage included)
   Loaded last, after the shared Sleek stylesheets (design-system, dest-menu,
   booking-bar). Holds the pieces brought over from the Vividus Sleek sites.
   ========================================================================= */

/* ---------- Footer: hotel logo in place of the name (as on the Vividus Sleek sites) ---------- */
.dls-footer-inner .vs-footer-logo {
  display: block;
  height: 80px;
  width: auto;
  margin: 0 auto 18px;
  filter: brightness(0) invert(1);
  opacity: .92;
}
@media (max-width: 767px) { .dls-footer-inner .vs-footer-logo { height: 68px; } }

/* ---------- Offers: cards from the Vividus Sleek offers page, 2 x 2 (1 per row on phones) ---------- */
html body #main .vvb-offers-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; margin-top: 0; }
@media (max-width: 767px) { html body #main .vvb-offers-grid { grid-template-columns: minmax(0, 1fr) !important; } }
html body #main .vvb-offers .pg-card { background: var(--vv-paper, #FBF8F2); max-width: none; }
html body #main .vvb-offers .pg-card-img { aspect-ratio: 3 / 2; height: auto; display: block; }
html body #main .vvb-offers .pg-card-body .vs-offer-h { margin-top: 8px; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.15; }
html body #main .vvb-offers .pg-card-cta { margin-top: 26px; }
html body #main .vvb-offers .pg-card-label { display: none; }

/* ---------- Facilities: Contact Us under the cards (as on the Vividus Sleek facilities pages) ---------- */
.cnw-fac-cta { text-align: center; margin-top: clamp(40px, 6vh, 64px); }

/* ---------- Book Now buttons that go to the engine: filled in the header Book Now's ochre (as on Vividus Sleek) ---------- */
html body #main a.vv-btn:is([href*="bookings.simplotel.com"], .vvb-book-now):not(.fc-card-btn) {
  background: var(--vv-gold-deep) !important;
  border-color: var(--vv-gold-deep) !important;
  color: #FFFFFF !important;
}
html body #main a.vv-btn:is([href*="bookings.simplotel.com"], .vvb-book-now):not(.fc-card-btn):is(:hover, :focus-visible) {
  background: var(--vv-gold-pale) !important;
  border-color: var(--vv-gold-pale) !important;
  color: var(--vv-gold-deep) !important;
}

/* ---------- Rooms summary cards: Explore + a filled Book Now side by side (Vividus Sleek) ---------- */
html body #main .rm-card-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
html body #main .rm-card-ctas .rm-card-cta { margin-top: 0 !important; }
html body #main a.rm-card-img { display: block; cursor: pointer; }
html body #main a.rm-card-img:focus-visible { outline: 2px solid var(--vv-gold-deep, #9D8345); outline-offset: 3px; }

/* ---------- Room cards: an odd last card sits centred under the row above (5 room types, 2 per row) ---------- */
@media (min-width: 768px) {
  html body #main .rm-cards-row > .rm-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 24px) / 2);
  }
}

/* ---------- Room pages (as on Vividus Sleek CN Windsor) ----------
   "Room Details" is an H2 in the site H2 style; side by side, the box starts level with the
   In-Room Amenities grid (which sits below its H2: H2 line-height + 45px of margins) */
html body #main aside.room-detail-sidebar.room-detail-sidebar > h2 {
  font-size: var(--ds-fs-h2) !important; line-height: var(--ds-lh-h2) !important;
  font-style: italic !important; margin: 0 0 24px !important;
}
@media (min-width: 901px) {
  html body #main .room-detail-body > .room-detail-sidebar { margin-top: calc(var(--ds-lh-h2) + 45px) !important; }
}

/* ---------- Homepage room tabs: Explore + a filled Book Now side by side (Vividus Sleek) ---------- */
html body #main .rc-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
html body #main .rc-ctas > a { margin-top: 0 !important; margin-bottom: 0 !important; }
html body #main .rc-panel .rc-ctas { margin-top: var(--ds-space-text-button); }

/* ---------- About: Mission / Vision / Values icons — no ring, larger glyph (Vividus Sleek) ---------- */
html body #main .vmv-section .vmv-icon { width: auto !important; height: auto !important; border: 0 !important; border-radius: 0 !important; background: none !important; justify-content: flex-start; align-self: flex-start; }
html body #main .vmv-section .vmv-icon svg { width: 40px !important; height: 40px !important; }

/* Room cards: the button row follows the aligned spec row (a wrapped button row must not shift it) */
html body #main .rm-card .rm-card-ctas { margin-top: 0; align-items: flex-start; }
/* when the cards are too narrow for Explore + Book Now side by side, every card stacks them the same way */
html body #main .rm-card .rm-card-body { container-type: inline-size; container-name: rmbody; }
@container rmbody (max-width: 500px) {
  html body #main .rm-card .rm-card-ctas { flex-direction: column; align-items: flex-start; }
}

/* ---------- Forms: per-field messages (Simplotel webforms, as on Vividus Sleek) ---------- */
html body #main p.ct-err { display: block; margin: 6px 0 0 !important; padding: 0; font-family: var(--fb); font-size: 12px !important; line-height: 1.4 !important; letter-spacing: 0; text-transform: none; color: #dc3545 !important; }
html body #main p.ct-err[style*="none"] { display: none !important; }
html body #main form .check input { accent-color: var(--vv-gold-deep, #9D8345); }

/* ---------- FAQs: accordion in the site's type and gold rules ---------- */
html body #main .vvb-faq-wrap { max-width: calc(900px + 2 * var(--container-pad)); margin: 0 auto; padding: 0 var(--container-pad); }
html body #main .vvb-faq-section { padding-top: var(--ds-space-section, 80px); scroll-margin-top: 140px; }
html body #main .vvb-faq-section > h2 { margin: 0 0 var(--ds-space-heading-grid, 32px); text-align: center; }
html body #main .vvb-faq-list { border-top: 1px solid var(--vv-line, #E0D2AE); }
html body #main .vvb-faq-item { border-bottom: 1px solid var(--vv-line, #E0D2AE); }
html body #main .vvb-faq-item > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 4px;
}
html body #main .vvb-faq-item > summary::-webkit-details-marker { display: none; }
html body #main .vvb-faq-q { font-family: var(--ds-font-display, 'Playfair Display', serif); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.35; color: var(--vv-ink, #2A2823); }
html body #main .vvb-faq-item > summary:is(:hover, :focus-visible) .vvb-faq-q { color: var(--vv-gold-deep, #9D8345); }
html body #main .vvb-faq-item > summary:focus-visible { outline: 2px solid var(--vv-gold-deep, #9D8345); outline-offset: 2px; }
html body #main .vvb-faq-icon { position: relative; flex: none; width: 16px; height: 16px; }
html body #main .vvb-faq-icon::before, html body #main .vvb-faq-icon::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1.5px; background: var(--vv-gold-deep, #9D8345);
  transition: transform 250ms ease;
}
html body #main .vvb-faq-icon::after { transform: rotate(90deg); }
html body #main .vvb-faq-item[open] .vvb-faq-icon::after { transform: rotate(0deg); }
html body #main .vvb-faq-a { padding: 0 44px 24px 4px; }
html body #main .vvb-faq-a > :first-child { margin-top: 0 !important; }
html body #main .vvb-faq-a p, html body #main .vvb-faq-a li { color: var(--ds-ink-soft, #5A554C); }
html body #main .vvb-faq-a p + ul, html body #main .vvb-faq-a ul + p { margin-top: 10px !important; }
html body #main .vvb-faq-a ul { margin: 0; padding-left: 20px; }
html body #main .vvb-faq-a li + li { margin-top: 4px; }
html body #main .vvb-faq-a a { color: var(--vv-gold-deep, #9D8345); text-decoration: underline; text-underline-offset: 3px; }
html body #main .vvb-faq-wrap + .cnw-fac-cta { margin-bottom: var(--ds-space-section, 80px); }
@media (max-width: 640px) {
      html body #main .vvb-faq-a { padding-right: 4px; }
}
/* ---------- Room pages: In-Room Amenities tiles stay as they are on hover (no dark fill) ---------- */
html body #main .sa-tile:hover { background: var(--vv-paper-ivory) !important; }
html body #main .sa-tile:hover .sa-tile-icon { background: var(--vv-gold-pale) !important; color: var(--vv-gold-deep) !important; }
html body #main .sa-tile:hover .sa-tile-name { color: var(--vv-ink-soft) !important; }

/* ---------- Things to Do: room-card style place cards; photo slot until images arrive ---------- */
html body #main .vvb-ttd-img.is-placeholder { background: color-mix(in srgb, var(--vv-gold-pale, #F1E8CE) 60%, var(--vv-paper, #FBF8F2)); }

/* ---------- Location: CN Windsor layout; travel-hub / attraction photos to follow ---------- */
html body #main .loc-transport + .loc-transport { padding-top: 0 !important; }
html body #main .loc-tcard-img.is-placeholder { aspect-ratio: 3 / 2; background: color-mix(in srgb, var(--vv-gold-pale, #F1E8CE) 60%, var(--vv-paper, #FBF8F2)); }

/* ---------- Careers: Open Positions cards (gold top rule, role, location and department, Apply) ---------- */
html body #main .vvb-pos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 767px) { html body #main .vvb-pos-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
html body #main .vvb-pos-card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #FFFFFF; border-top: 5px solid var(--vv-gold, #C8A968);
  box-shadow: 0 6px 24px -12px rgba(42, 40, 35, .18);
  padding: clamp(28px, 3.4vw, 44px);
}
html body #main .vvb-pos-card .vvb-pos-title { margin: 0 !important; font-size: clamp(24px, 2.2vw, 32px) !important; line-height: 1.2 !important; font-style: normal !important; }
html body #main .vvb-pos-meta { list-style: none; margin: 14px 0 0; padding: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px 22px; width: 100%; border-bottom: 1px solid var(--vv-line, #E0D2AE); }
html body #main .vvb-pos-meta li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ds-ink-soft, #5A554C); }
html body #main .vvb-pos-meta svg { color: var(--vv-gold-deep, #9D8345); flex: none; }
html body #main .vvb-pos-apply { margin-top: 26px !important; }

/* ---------- Careers: tighter, equal gaps between sections (60px desktop, 40px phone) ---------- */
html body #main .vvb-cr-section.vvb-cr-intro { padding-bottom: 30px !important; }
html body #main .vvb-cr-section:not(.vvb-cr-intro) { padding-top: 30px !important; }
html body #main .vvb-cr-section:not(.vvb-cr-intro):not(.enq-section) { padding-bottom: 30px !important; }
@media (max-width: 767px) {
  html body #main .vvb-cr-section.vvb-cr-intro { padding-bottom: 20px !important; }
  html body #main .vvb-cr-section:not(.vvb-cr-intro) { padding-top: 20px !important; }
  html body #main .vvb-cr-section:not(.vvb-cr-intro):not(.enq-section) { padding-bottom: 20px !important; }
}

/* ---------- Homepage intro (VIVIDUS Sleek style): Root Word → welcome split → USP strip ---------- */
html body #main .anchor.vvb-root { padding-bottom: 0 !important; }
html body #main .anchor.anchor--split { text-align: left; max-width: none; margin: 0; padding-left: 0 !important; padding-right: 0 !important; }
html body #main .anchor-split {
  box-sizing: border-box; max-width: var(--container); margin: 0 auto; padding-left: var(--container-pad); padding-right: var(--container-pad);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 100px); align-items: start;
}
html body #main .anchor .anchor-h1 { color: var(--ds-ink); margin: 0; text-align: left; }
html body #main .anchor .anchor-copy p { max-width: 62ch; color: var(--ds-ink-soft); text-align: left; margin: 0; }
html body #main .anchor .anchor-copy p + p { margin-top: var(--ds-space-text-text) !important; }
html body #main .anchor .anchor-copy a { color: var(--vv-gold-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 200ms ease, text-decoration-thickness 200ms ease, text-underline-offset 200ms ease; }
html body #main .anchor .anchor-copy a:is(:hover, :focus-visible) { color: var(--ds-ink); text-decoration-color: var(--vv-gold-deep); text-decoration-thickness: 2px; text-underline-offset: 5px; outline: none; }
@media (max-width: 860px) { html body #main .anchor-split { grid-template-columns: 1fr; gap: 24px; } }
/* USP strip as on CN Windsor: light band, gold serif numbers, grey spaced labels, thin gold dividers */
html body #main .vv-usp.cnw-usp { background: transparent !important; border: 0 !important; margin: 0; }
html body #main .cnw-usp .usp-inner { display: flex; align-items: flex-start; justify-content: center; flex-wrap: nowrap; }
html body #main .cnw-usp .usp-stat { flex: 1 1 0; min-width: 0; padding: 4px 16px; }
html body #main .cnw-usp .usp-num { color: var(--vv-gold-deep, #9D8345) !important; font-style: normal !important; font-variant-numeric: oldstyle-nums; font-size: clamp(40px, 4vw, 56px); white-space: nowrap; }
html body #main .cnw-usp .usp-label { color: var(--vv-ink-mute, #8A8478) !important; font-size: 15px; letter-spacing: .22em; margin-top: 14px; }
html body #main .cnw-usp .usp-divider { align-self: center; width: 1px; height: 60px; flex: 0 0 1px; background: rgba(157, 131, 69, .45) !important; }
@media (min-width: 761px) and (max-width: 1280px) { html body #main .cnw-usp .usp-num { font-size: clamp(30px, 3.5vw, 44px) !important; } }
@media (max-width: 760px) {
  html body #main .cnw-usp .usp-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  html body #main .cnw-usp .usp-divider { display: none; }
  html body #main .cnw-usp .usp-stat { width: auto !important; padding: 0 8px; }
  html body #main .cnw-usp .usp-stat:first-child { grid-column: 1 / -1; }
  html body #main .cnw-usp .usp-label { font-size: 12px; letter-spacing: .18em; }
}

/* ---------- Homepage: Ujjvala block spacing (no label above the word); Rooms heading sized as an H2, as on CN Windsor ---------- */
html body #main .anchor.vvb-root { padding-top: 50px !important; padding-bottom: 0 !important; }
html body #main .anchor.vvb-root > .reveal:first-child { margin-top: 0 !important; }
html body #main .anchor.vvb-root .english { margin-top: 16px; }
html body #main .rooms #rooms-h { font-size: 40px !important; line-height: 48px !important; }
@media (max-width: 767px) {
  html body #main .anchor.vvb-root { padding-top: 30px !important; }
  html body #main .rooms #rooms-h { font-size: 28px !important; line-height: 36px !important; }
}

/* ---------- Homepage rooms header: same split as CN Windsor's meetings header (wider gap, ~60-character copy) ---------- */
html body #main .rooms .r-head { column-gap: clamp(32px, 5vw, 80px) !important; }
html body #main .rooms .r-head-right p { max-width: 60ch !important; }

/* ---------- Homepage parallax: Offers heading + button over a soft dark tint, linking to the offers page ---------- */
html body #main .vvb-par-offers .vv-parallax-img::after { content: ""; position: absolute; inset: 0; background: rgba(20, 18, 15, .42); }
html body #main .vvb-par-offers .vvb-par-content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--container-pad, 24px); }
html body #main .vvb-par-offers h2 { color: #FFFFFF !important; margin: 0 !important; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
html body #main .vvb-par-offers .vvb-par-btn { margin-top: var(--ds-space-text-button, 32px) !important; color: #FFFFFF !important; border: 1px solid #FFFFFF !important; background: transparent !important; }
html body #main .vvb-par-offers .vvb-par-btn:is(:hover, :focus-visible) { background: #FFFFFF !important; color: var(--vv-ink, #2A2823) !important; }
html body #main .vvb-par-offers { height: clamp(400px, 60vh, 680px) !important; }
html body #main .vvb-par-offers .vvb-par-liner { max-width: 52ch; margin: 14px auto 0 !important; color: rgba(255, 255, 255, .9) !important; font-size: 16px; line-height: 1.6; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
@media (max-width: 767px) { html body #main .vvb-par-offers .vvb-par-liner { font-size: 15px; } }

/* ---------- Homepage location: CTA under the nearby-places list (as on CN Windsor) ---------- */
html body #main .place .p-copy .place-cta { display: inline-flex; margin-top: var(--ds-space-text-button, 32px) !important; }
html body #main .vvb-par-offers h2 em { color: var(--vv-light, #E0C07A) !important; }

/* ---------- Homepage meetings header: heading left, copy + button right (as the Rooms header and CN Windsor's venues header) ---------- */
html body #main .vv-meetings .section-head.vvb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; text-align: left; }
html body #main .vv-meetings .vvb-split-right .lede { max-width: 60ch !important; margin: 0 !important; }
html body #main .vv-meetings .vvb-split-right .vv-btn { margin-top: var(--ds-space-text-button, 32px) !important; }
@media (max-width: 860px) { html body #main .vv-meetings .section-head.vvb-split { grid-template-columns: minmax(0, 1fr); row-gap: 16px; } }

/* ---------- Homepage location: illustrated map image (as on CN Windsor); the address bar sits below it ---------- */
html body #main .map-plate.map-plate--img { aspect-ratio: auto; padding: 0; }
html body #main .map-plate--img .map-plate-imglink { display: block; }
html body #main .map-plate--img .map-plate-img { display: block; width: 100%; height: auto; }
html body #main .map-plate--img .map-cta { position: static; display: flex; margin: 0; }
html body #main .map-plate a.map-cta { text-decoration: none; color: var(--vv-ink-mute); }

/* ---------- Room pages: gallery strips show clearly (no fade); the open one keeps its gold border and larger size ---------- */
html body #main .rs-vthumb { opacity: 1 !important; }
html body #main .rs-vthumb:not(.is-active):hover { filter: brightness(1.06); }

/* ---------- Facilities cards are not links: no hover zoom or colour shift ---------- */
html body #main .fc-card:hover .fc-card-img img { transform: none !important; filter: saturate(.9) !important; }
html body #main .dining-subhead a { color: var(--vv-gold-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 200ms ease, text-decoration-thickness 200ms ease, text-underline-offset 200ms ease; }
html body #main .dining-subhead a:is(:hover, :focus-visible) { color: var(--ds-ink); text-decoration-thickness: 2px; text-underline-offset: 5px; outline: none; }