/*
Theme Name:   Royal International Child
Theme URI:    https://hotelroyalinternational.com/
Description:  Child theme of Hello Elementor for Hotel Royal International, Guwahati. Elementor owns the design; this theme owns features. Built by Marketing Wolves.
Author:       Marketing Wolves
Template:     hello-elementor
Version:      1.0.4
Text Domain:  royalinternational
*/

/* ==========================================================================
   Bump Version: above on EVERY change to this file, then purge LiteSpeed.
   functions.php uses that number as the cache-buster, so an un-bumped edit
   keeps serving the old file.

   Feature CSS gets pasted at the END of this file, one block per feature.
   ========================================================================== */


/* ==========================================================================
   NO HEADER OR FOOTER GAP
   ==========================================================================
   Hello's header and footer are switched off in functions.php. What remains
   is <main class="site-main">, which still carries a top gap. Elementor
   section padding is NOT touched — whatever you set in the builder is yours.
   ========================================================================== */

.site-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.site-main > .page-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* ==========================================================================
   ROYAL INTERNATIONAL — STICKY BOOKING STRIP   [ri_strip]
   ==========================================================================
     strip     full bleed, white, #564B44 for every mark in it
     button    flush right, full height, #564B44
     rule      1px, from the last slot to the button
     wordmark  the site's display serif (see --ri-strip-serif below)
   ========================================================================== */

.ri-strip {
  /* Put the exact heading font from Elementor -> Site Settings -> Typography
     first in this list. */
  --ri-strip-serif: 'Marcellus', 'Cinzel', 'Playfair Display', Georgia, 'Times New Roman', serif;

  --ri-strip-font:  'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --ri-strip-ink:   #564b44;
  --ri-strip-bg:    #ffffff;
  --ri-strip-on:    #ffffff;

  --ri-strip-h:     62px;
  --ri-strip-btn:   196px;
  --ri-strip-pad:   clamp(18px, 5.7vw, 110px);
  --ri-strip-gap:   26px;
  --ri-strip-sep:   18px;
  --ri-strip-ease:  cubic-bezier(.22, 1, .36, 1);

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990;          /* under the booking modal (99990), over the page */
  font-family: var(--ri-strip-font);

  /* Off-screen until the page scrolls past the first section. */
  transform: translateY(110%);
  pointer-events: none;
  transition: transform .66s var(--ri-strip-ease);
  will-change: transform;
}

.ri-strip,
.ri-strip *,
.ri-strip *::before,
.ri-strip *::after { box-sizing: border-box; }

.ri-strip.is-on {
  transform: translateY(0);
  pointer-events: auto;
}

/* Shell */
.ri-strip .ri-strip__inner {
  display: flex;
  align-items: stretch;
  height: var(--ri-strip-h);
  background: var(--ri-strip-bg);
  box-shadow: 0 -1px 0 rgba(86, 75, 68, .10),
              0 -18px 44px rgba(86, 75, 68, 0);
  transition: box-shadow .7s var(--ri-strip-ease) .1s;
}

.ri-strip.is-on .ri-strip__inner {
  box-shadow: 0 -1px 0 rgba(86, 75, 68, .10),
              0 -18px 44px rgba(86, 75, 68, .09);
}

.ri-strip .ri-strip__left {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--ri-strip-gap);
  padding-left: var(--ri-strip-pad);
}

/* Wordmark */
.ri-strip .ri-strip__mark {
  flex: 0 0 auto;
  font-family: var(--ri-strip-serif) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.1 !important;
  letter-spacing: 1.4px !important;
  color: var(--ri-strip-ink) !important;
  white-space: nowrap;
}

/* Dividers */
.ri-strip .ri-strip__sep {
  flex: 0 0 auto;
  width: 1px;
  height: var(--ri-strip-sep);
  background: var(--ri-strip-ink);
  opacity: .45;
}

/* Rotating slots — both options share one grid cell so nothing shifts */
.ri-strip .ri-strip__slot {
  flex: 0 0 auto;
  display: grid;
  grid-template-areas: "swap";
  align-items: center;
}

.ri-strip .ri-strip__opt {
  grid-area: swap;
  font-family: var(--ri-strip-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  color: var(--ri-strip-ink) !important;
  white-space: nowrap;
  opacity: 0;
  animation: ri-strip-swap 8s infinite var(--ri-strip-ease);
}

.ri-strip .ri-strip__opt:nth-child(2) { animation-delay: -4s; }
.ri-strip .ri-strip__slot[data-ri-slot="b"] .ri-strip__opt:nth-child(1) { animation-delay: -2s; }
.ri-strip .ri-strip__slot[data-ri-slot="b"] .ri-strip__opt:nth-child(2) { animation-delay: -6s; }

@keyframes ri-strip-swap {
  0%          { opacity: 0; transform: translateY(9px); }
  4%, 44%     { opacity: 1; transform: translateY(0); }
  50%, 100%   { opacity: 0; transform: translateY(-9px); }
}

/* The long hairline, drawn from the left on entry */
.ri-strip .ri-strip__rule {
  flex: 1 1 auto;
  min-width: 0;
  height: 1px;
  margin-left: 19px;
  background: var(--ri-strip-ink);
  opacity: .4;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s var(--ri-strip-ease) .18s;
}

.ri-strip.is-on .ri-strip__rule { transform: scaleX(1); }

/* The button — Elementor armour */
.ri-strip .ri-strip__cta {
  position: relative;
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--ri-strip-btn);
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ri-strip-ink) !important;
  background-color: var(--ri-strip-ink) !important;
  box-shadow: none !important;
  color: var(--ri-strip-on) !important;
  font-family: var(--ri-strip-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: .15em !important;
  text-indent: .15em;
  text-align: center !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color .3s var(--ri-strip-ease),
              letter-spacing .45s var(--ri-strip-ease);
}

.ri-strip .ri-strip__cta:hover,
.ri-strip .ri-strip__cta:focus-visible {
  background: #453c36 !important;
  background-color: #453c36 !important;
  color: var(--ri-strip-on) !important;
  text-decoration: none !important;
  letter-spacing: .2em !important;
}

.ri-strip .ri-strip__cta:focus-visible {
  outline: 2px solid var(--ri-strip-on);
  outline-offset: -6px;
}

/* Sheen on hover */
.ri-strip .ri-strip__cta::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg,
              rgba(255,255,255,0) 0%,
              rgba(255,255,255,.16) 50%,
              rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}

@media (hover: hover) {
  .ri-strip .ri-strip__cta:hover::after {
    opacity: 1;
    animation: ri-strip-sheen .85s var(--ri-strip-ease);
  }
}

@keyframes ri-strip-sheen {
  from { left: -60%; }
  to   { left: 130%; }
}

/* Wordmark and slots ease in behind the strip */
.ri-strip .ri-strip__mark,
.ri-strip .ri-strip__slot,
.ri-strip .ri-strip__sep {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s var(--ri-strip-ease), transform .5s var(--ri-strip-ease);
}

.ri-strip.is-on .ri-strip__mark { transition-delay: .16s; }
.ri-strip.is-on .ri-strip__sep  { transition-delay: .22s; }
.ri-strip.is-on .ri-strip__slot { transition-delay: .26s; }

.ri-strip.is-on .ri-strip__mark,
.ri-strip.is-on .ri-strip__slot,
.ri-strip.is-on .ri-strip__sep {
  opacity: 1;
  transform: translateY(0);
}

.ri-strip.is-on .ri-strip__sep { opacity: .45; }

/* Sentinel — zero size, fallback trigger only */
.ri-strip-at {
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
}

/* Smaller screens */
@media (max-width: 1100px) {
  .ri-strip { --ri-strip-btn: 180px; --ri-strip-gap: 20px; }
  .ri-strip .ri-strip__mark { font-size: 15px !important; }
}

@media (max-width: 860px) {
  .ri-strip { --ri-strip-h: 58px; --ri-strip-btn: 168px; }
  .ri-strip .ri-strip__rule { display: none; }
  .ri-strip .ri-strip__cta { font-size: 12px !important; }
}

@media (max-width: 620px) {
  .ri-strip {
    --ri-strip-h: 54px;
    --ri-strip-btn: 146px;
    --ri-strip-gap: 12px;
    --ri-strip-pad: 16px;
  }

  .ri-strip .ri-strip__mark,
  .ri-strip .ri-strip__sep,
  .ri-strip .ri-strip__slot[data-ri-slot="a"] { display: none; }

  .ri-strip .ri-strip__opt { font-size: 13px !important; }
  .ri-strip .ri-strip__cta {
    font-size: 11px !important;
    letter-spacing: .12em !important;
    padding: 0 10px !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ri-strip,
  .ri-strip .ri-strip__inner,
  .ri-strip .ri-strip__rule,
  .ri-strip .ri-strip__mark,
  .ri-strip .ri-strip__slot,
  .ri-strip .ri-strip__sep,
  .ri-strip .ri-strip__cta { transition-duration: .01ms !important; }

  .ri-strip .ri-strip__opt { animation: none !important; opacity: 0; }
  .ri-strip .ri-strip__opt:nth-child(1) { opacity: 1; }
  .ri-strip .ri-strip__cta::after { display: none; }
}
/* ==========================================================================
   ROYAL INTERNATIONAL — SECTION LINK STRIP   [ri_nav_strip]
   ==========================================================================
     strip      white, no border, no radius, hugs its content
     label      Roboto 16px / 400, #000000
     cell       full strip height, 32px padding each side
     strip pad  24px left and right
     hover      whole cell fills #564B44, label turns #FFFFFF

   ELEMENTOR ARMOUR: these are <a> elements, so `.elementor-kit-N a` would
   repaint and underline them. Every rule is scoped under `.ri-nav` and the
   properties that define the cell are forced.
   ========================================================================== */

.ri-nav {
  --ri-nav-font:  'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --ri-nav-bg:    #ffffff;
  --ri-nav-ink:   #000000;
  --ri-nav-fill:  #564b44;   /* the hover block */
  --ri-nav-on:    #ffffff;   /* label on that block */

  --ri-nav-h:     100px;
  --ri-nav-size:  16px;
  --ri-nav-pad:   32px;      /* per cell, each side */
  --ri-nav-edge:  24px;      /* strip padding, each side */

  display: block;
  text-align: center;        /* centres the inline-flex strip on the page */
}

.ri-nav,
.ri-nav *,
.ri-nav *::before,
.ri-nav *::after { box-sizing: border-box; }

/* The strip — inline-flex so the white box hugs its content */
.ri-nav .ri-nav__row {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  max-width: 100%;
  padding: 0 var(--ri-nav-edge);
  background: var(--ri-nav-bg);
  text-align: left;
  vertical-align: top;
}

/* A cell — Elementor armour */
.ri-nav .ri-nav__item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: var(--ri-nav-h);
  margin: 0 !important;
  padding: 0 var(--ri-nav-pad) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--ri-nav-ink) !important;
  font-family: var(--ri-nav-font) !important;
  font-size: var(--ri-nav-size) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color .16s ease, color .16s ease;
}

/* Hover block fills the cell edge to edge, top to bottom */
.ri-nav .ri-nav__item:hover,
.ri-nav .ri-nav__item:focus-visible {
  background: var(--ri-nav-fill) !important;
  background-color: var(--ri-nav-fill) !important;
  color: var(--ri-nav-on) !important;
  text-decoration: none !important;
}

.ri-nav .ri-nav__item:focus-visible {
  outline: 2px solid var(--ri-nav-fill);
  outline-offset: -4px;
}

/* Narrower screens — padding tightens first, then the row wraps full width */
@media (max-width: 780px) {
  .ri-nav {
    --ri-nav-pad:  20px;
    --ri-nav-edge: 12px;
    --ri-nav-h:    72px;
    --ri-nav-size: 15px;
  }
}

@media (max-width: 560px) {
  .ri-nav {
    --ri-nav-pad:  16px;
    --ri-nav-edge: 8px;
    --ri-nav-h:    58px;
    --ri-nav-size: 14px;
  }

  .ri-nav .ri-nav__row {
    display: flex;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ri-nav .ri-nav__item { transition-duration: .01ms !important; }
}
/* ==========================================================================
   ROYAL INTERNATIONAL — WHY GUESTS CHOOSE US   [ri_why_us]
   ==========================================================================
     list        1035px wide, centred
     row         74px rule-to-rule closed
     rule        1px #564B44 under every row (none above the first)
     heading     <h3>, Roboto 23px / 300 + 0.04em tracking, #000, centred
     description Roboto 16px / 300, line-height 20px, #000, centred
   ========================================================================== */

.ri-why {
  --ri-why-font:  'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --ri-why-ink:   #000000;
  --ri-why-rule:  #564b44;

  --ri-why-w:     1035px;
  --ri-why-pad:   21px;      /* top and bottom of each row */
  --ri-why-size:  23px;
  --ri-why-track: 0.04em;
  --ri-why-lh:    31px;      /* 21 + 31 + 21 + 1px rule = 74px pitch */
  --ri-why-gap:   27px;      /* heading -> description */
  --ri-why-desc:  16px;
  --ri-why-descw: 480px;
  --ri-why-ease:  cubic-bezier(.22, 1, .36, 1);

  max-width: var(--ri-why-w);
  margin-inline: auto;
  font-family: var(--ri-why-font);
  color: var(--ri-why-ink);
}

.ri-why,
.ri-why *,
.ri-why *::before,
.ri-why *::after { box-sizing: border-box; }

/* Row */
.ri-why .ri-why__row {
  position: relative;   /* anchors the touch chevron */
  padding: var(--ri-why-pad) 0;
  border-bottom: 1px solid var(--ri-why-rule);
  text-align: center;
  cursor: default;
}

/* Touch chevron — hidden wherever hover exists */
.ri-why .ri-why__mark { display: none; }

@media (hover: none) {
  .ri-why .ri-why__mark {
    display: block;
    position: absolute;
    right: 3px;
    top: calc(var(--ri-why-pad) + (var(--ri-why-lh) / 2) - 5px);
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--ri-why-rule);
    border-bottom: 1.5px solid var(--ri-why-rule);
    transform: rotate(45deg);
    opacity: .5;
    transition: transform .32s var(--ri-why-ease), opacity .2s linear;
  }

  .ri-why .ri-why__row.is-open .ri-why__mark {
    transform: rotate(-135deg);
    opacity: .9;
  }
}

/* Heading — Elementor armour. This rule is what keeps the <h3> in Roboto;
   without it the kit's display serif takes over. */
.ri-why .ri-why__title {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ri-why-ink) !important;
  font-family: var(--ri-why-font) !important;
  font-size: var(--ri-why-size) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: var(--ri-why-lh) !important;
  letter-spacing: var(--ri-why-track) !important;
  text-transform: none !important;
  text-align: center !important;
}

/* The reveal — 0fr -> 1fr animates to the real height. The description
   stays in the DOM (never display:none) so search engines read all six. */
.ri-why .ri-why__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--ri-why-ease);
}

.ri-why .ri-why__reveal > div {
  overflow: hidden;
  min-height: 0;
}

.ri-why .ri-why__desc {
  margin: var(--ri-why-gap) auto 0 !important;
  padding: 0 !important;
  max-width: var(--ri-why-descw);
  color: var(--ri-why-ink) !important;
  font-family: var(--ri-why-font) !important;
  font-size: var(--ri-why-desc) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 20px !important;
  letter-spacing: normal !important;
  text-align: center !important;
  opacity: 0;
  transition: opacity .3s var(--ri-why-ease);
}

/* Open on hover — pointer devices only */
@media (hover: hover) {
  .ri-why .ri-why__row:hover .ri-why__reveal,
  .ri-why .ri-why__row:focus-within .ri-why__reveal {
    grid-template-rows: 1fr;
  }

  .ri-why .ri-why__row:hover .ri-why__desc,
  .ri-why .ri-why__row:focus-within .ri-why__desc {
    opacity: 1;
  }
}

/* Touch: tap to open (.is-open set by the script, one row at a time) */
@media (hover: none) {
  .ri-why .ri-why__row { cursor: pointer; }

  .ri-why .ri-why__row.is-open .ri-why__reveal { grid-template-rows: 1fr; }
  .ri-why .ri-why__row.is-open .ri-why__desc   { opacity: 1; }
}

/* Smaller screens */
@media (max-width: 1100px) {
  .ri-why { padding-inline: 24px; }
}

@media (max-width: 760px) {
  .ri-why {
    --ri-why-size: 20px;
    --ri-why-lh:   28px;
    --ri-why-pad:  18px;
    --ri-why-gap:  16px;
    --ri-why-desc: 15px;
  }
  .ri-why .ri-why__desc { line-height: 22px !important; }
}

@media (max-width: 480px) {
  .ri-why {
    --ri-why-size: 18px;
    --ri-why-lh:   26px;
    --ri-why-pad:  16px;
    --ri-why-desc: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ri-why .ri-why__reveal,
  .ri-why .ri-why__desc { transition-duration: .01ms !important; }
}
/* ==========================================================================
   ROYAL INTERNATIONAL — WHAT SETS US APART   [ri_vs]
   ==========================================================================
     rule      1px, dead centre
     gutter    64px from the rule to the text on each side
     text      Roboto 16px / 300
     align     left column right-aligned, right column left-aligned
     "other hotels" column in muted brown-grey (5.4:1, AA legible)
   ========================================================================== */

.ri-vs {
  --ri-vs-font:   'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --ri-vs-ours:   #000000;
  --ri-vs-theirs: #6b6058;
  --ri-vs-rule:   #564b44;
  --ri-vs-label:  #8a7c72;

  --ri-vs-w:      860px;
  --ri-vs-gut:    128px;     /* 64px each side of the rule */
  --ri-vs-row:    64px;
  --ri-vs-size:   16px;
  --ri-vs-ease:   cubic-bezier(.22, 1, .36, 1);

  max-width: var(--ri-vs-w);
  margin-inline: auto;
  font-family: var(--ri-vs-font);
}

.ri-vs,
.ri-vs *,
.ri-vs *::before,
.ri-vs *::after { box-sizing: border-box; }

.ri-vs .ri-vs__grid { position: relative; }

/* The centre rule — drawn downward on reveal */
.ri-vs .ri-vs__rule {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -.5px;
  background: var(--ri-vs-rule);
  opacity: .55;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .8s var(--ri-vs-ease);
}

.ri-vs.is-in .ri-vs__rule { transform: scaleY(1); }

/* Rows */
.ri-vs .ri-vs__head,
.ri-vs .ri-vs__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--ri-vs-gut);
  align-items: center;
}

.ri-vs .ri-vs__head { padding-bottom: 26px; }
.ri-vs .ri-vs__row  { min-height: var(--ri-vs-row); }

/* Faint band on hover, tying the two halves of a pair together */
.ri-vs .ri-vs__row::before {
  content: "";
  position: absolute;
  inset: 0 -20px;
  background: rgba(86, 75, 68, .04);
  opacity: 0;
  transition: opacity .25s var(--ri-vs-ease);
  pointer-events: none;
}

@media (hover: hover) {
  .ri-vs .ri-vs__row:hover::before { opacity: 1; }
}

/* Labels and text — Elementor armour (keeps the <h3> in Roboto) */
.ri-vs .ri-vs__label {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--ri-vs-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--ri-vs-label) !important;
}

.ri-vs .ri-vs__ours,
.ri-vs .ri-vs__theirs {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--ri-vs-font) !important;
  font-size: var(--ri-vs-size) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1.45 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.ri-vs .ri-vs__label--ours,
.ri-vs .ri-vs__ours   { text-align: right !important; color: var(--ri-vs-ours) !important; }

.ri-vs .ri-vs__label--theirs,
.ri-vs .ri-vs__theirs { text-align: left  !important; color: var(--ri-vs-theirs) !important; }

.ri-vs .ri-vs__label--ours   { color: var(--ri-vs-label) !important; }
.ri-vs .ri-vs__label--theirs { color: var(--ri-vs-label) !important; }

/* Node on the rule */
.ri-vs .ri-vs__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--ri-vs-rule);
  transform: scale(0);
  transition: transform .5s var(--ri-vs-ease);
}

.ri-vs.is-in .ri-vs__dot { transform: scale(1); }

@media (hover: hover) {
  .ri-vs.is-in .ri-vs__row:hover .ri-vs__dot { transform: scale(1.9); }
}

/* Reveal — each half enters from its own side, staggered by --i */
.ri-vs .ri-vs__label,
.ri-vs .ri-vs__ours,
.ri-vs .ri-vs__theirs {
  opacity: 0;
  transition: opacity .6s var(--ri-vs-ease), transform .6s var(--ri-vs-ease);
  transition-delay: calc(.22s + (var(--i, 0) * .09s));
}

.ri-vs .ri-vs__label--ours,
.ri-vs .ri-vs__ours   { transform: translateX(-18px); }

.ri-vs .ri-vs__label--theirs,
.ri-vs .ri-vs__theirs { transform: translateX(18px); }

.ri-vs.is-in .ri-vs__label,
.ri-vs.is-in .ri-vs__ours,
.ri-vs.is-in .ri-vs__theirs {
  opacity: 1;
  transform: translateX(0);
}

.ri-vs .ri-vs__dot { transition-delay: calc(.30s + (var(--i, 0) * .09s)); }

/* Smaller screens — pairs become stacked cards */
@media (max-width: 820px) {
  .ri-vs { --ri-vs-gut: 64px; padding-inline: 24px; }
}

@media (max-width: 680px) {
  .ri-vs { --ri-vs-size: 15px; padding-inline: 20px; }

  .ri-vs .ri-vs__rule,
  .ri-vs .ri-vs__dot { display: none; }

  .ri-vs .ri-vs__head { display: none; }

  .ri-vs .ri-vs__row {
    display: block;
    min-height: 0;
    padding: 18px 0;
    border-bottom: 1px solid rgba(86, 75, 68, .28);
  }

  .ri-vs .ri-vs__row:last-child { border-bottom: 0; }

  .ri-vs .ri-vs__ours,
  .ri-vs .ri-vs__theirs {
    text-align: left !important;
    transform: translateY(12px);
  }

  .ri-vs .ri-vs__ours { font-weight: 400 !important; }

  .ri-vs .ri-vs__theirs { margin-top: 7px !important; }

  .ri-vs .ri-vs__theirs::before {
    content: "Other hotels: ";
    color: var(--ri-vs-label);
  }

  .ri-vs.is-in .ri-vs__ours,
  .ri-vs.is-in .ri-vs__theirs { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ri-vs .ri-vs__rule,
  .ri-vs .ri-vs__dot,
  .ri-vs .ri-vs__label,
  .ri-vs .ri-vs__ours,
  .ri-vs .ri-vs__theirs {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}