/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.1.7
Description: Child theme of Hello Elementor with a custom-coded blog archive and single post layout.
Author: Custom
*/

/* ==========================================================================
   1. THEME VARIABLES — change these to match your brand, everything below
      references them, so this is the only section you should need to edit
      for colors / spacing / fonts.
   ========================================================================== */
:root {
  --blog-accent: #2b4bf2;         /* links, buttons, tag pills */
  --blog-text: #1a1a1a;           /* main text color */
  --blog-text-muted: #6b6b6b;     /* dates, meta text */
  --blog-bg: #ffffff;             /* page background */
  --blog-card-bg: #ffffff;        /* card background */
  --blog-border: #e8e8e8;         /* hairline borders */
  --blog-font-heading: Georgia, 'Times New Roman', serif;
  --blog-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --blog-radius: 6px;
  --blog-max-width: 1160px;
}

/* ==========================================================================
   2. ARCHIVE / BLOG LISTING PAGE
   ========================================================================== */
.blog-archive-wrapper {
  max-width: var(--blog-max-width);
  margin: 0 auto;
  padding: 60px 24px 80px;
  background: var(--blog-bg);
  color: var(--blog-text);
  font-family: var(--blog-font-body);
}

.blog-archive-header {
  margin-bottom: 48px;
  border-bottom: 1px solid var(--blog-border);
  padding-bottom: 24px;
}

.blog-archive-header h1 {
  font-family: var(--blog-font-heading);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.blog-archive-header p {
  color: var(--blog-text-muted);
  font-size: 16px;
  margin: 0;
}

.blog-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}

@media (max-width: 900px) {
  .blog-archive-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .blog-archive-grid { grid-template-columns: 1fr; }
}

.blog-card {
  background: var(--blog-card-bg);
  border-radius: var(--blog-radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.blog-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--blog-border);
  border-radius: var(--blog-radius);
}

.blog-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-thumb img {
  transform: scale(1.05);
}

.blog-card-content {
  padding: 18px 4px 0;
}

.blog-card-category {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blog-accent);
  margin-bottom: 10px;
}

.blog-card-title {
  font-family: var(--blog-font-heading);
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--blog-text);
}

.blog-card-excerpt {
  font-size: 15px;
  line-height: 1.55;
  color: var(--blog-text-muted);
  margin: 0 0 14px;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--blog-text-muted);
}

.blog-card-readmore {
  font-size: 14px;
  font-weight: 600;
  color: var(--blog-accent);
}

.blog-archive-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--blog-text-muted);
}

/* Pagination */
.blog-pagination {
  margin-top: 56px;
  display: flex;
  justify-content: center;
}

.blog-pagination .nav-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.blog-pagination a,
.blog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--blog-radius);
  border: 1px solid var(--blog-border);
  color: var(--blog-text);
  text-decoration: none;
  font-size: 14px;
}

.blog-pagination a:hover {
  border-color: var(--blog-accent);
  color: var(--blog-accent);
}

.blog-pagination .current {
  background: var(--blog-accent);
  border-color: var(--blog-accent);
  color: #fff;
}

/* ==========================================================================
   3. SINGLE POST PAGE
   ========================================================================== */
.single-post-wrapper {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 24px 100px;
  color: var(--blog-text);
  font-family: var(--blog-font-body);
}

.single-post-category {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blog-accent);
  margin-bottom: 14px;
}

.single-post-title {
  font-family: var(--blog-font-heading);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

.single-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 14px;
  color: var(--blog-text-muted);
  border-bottom: 1px solid var(--blog-border);
  padding-bottom: 28px;
  margin-bottom: 36px;
}

.single-post-meta span::after {
  content: '•';
  margin-left: 14px;
  color: var(--blog-border);
}

.single-post-meta span:last-child::after {
  content: '';
  margin: 0;
}

.single-post-thumb {
  width: 100%;
  border-radius: var(--blog-radius);
  overflow: hidden;
  margin-bottom: 40px;
}

.single-post-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* Body content typography */
.single-post-content {
  font-size: 18px;
  line-height: 1.75;
  color: var(--blog-text);
}

.single-post-content p {
  margin: 0 0 24px;
}

.single-post-content h2 {
  font-family: var(--blog-font-heading);
  font-size: 28px;
  margin: 44px 0 18px;
  line-height: 1.3;
}

.single-post-content h3 {
  font-family: var(--blog-font-heading);
  font-size: 22px;
  margin: 36px 0 16px;
}

.single-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--blog-radius);
  margin: 12px 0;
}

.single-post-content a {
  color: var(--blog-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.single-post-content blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--blog-accent);
  font-style: italic;
  color: var(--blog-text-muted);
}

.single-post-content ul,
.single-post-content ol {
  margin: 0 0 24px;
  padding-left: 22px;
}

.single-post-content li {
  margin-bottom: 8px;
}

/* Tags */
.single-post-tags {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--blog-border);
  font-size: 14px;
}

.single-post-tags a {
  display: inline-block;
  padding: 5px 14px;
  margin: 0 8px 8px 0;
  border-radius: 999px;
  border: 1px solid var(--blog-border);
  color: var(--blog-text-muted);
  text-decoration: none;
  font-size: 13px;
}

.single-post-tags a:hover {
  border-color: var(--blog-accent);
  color: var(--blog-accent);
}

/* Prev / Next navigation */
.single-post-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--blog-border);
}

.single-post-nav > div {
  flex: 1;
  font-size: 14px;
}

.single-post-nav .nav-next {
  text-align: right;
}

.single-post-nav a {
  color: var(--blog-text);
  text-decoration: none;
  font-weight: 600;
}

.single-post-nav a:hover {
  color: var(--blog-accent);
}
/* ==========================================================================
   ROYAL PALACE — BOOKING BAR   v2
   ==========================================================================
   WHAT CHANGED IN v2 AND WHY
   --------------------------
   Elementor's global kit stylesheet loads AFTER the theme stylesheet and
   styles every <button> and <a> on the page with selectors like
   `.elementor-kit-5 button` — specificity (0,1,1). My v1 rules were
   `.rp-bar__book` — specificity (0,1,0). Elementor won every conflict,
   which is why the buttons came out pink with borders instead of black.

   Fix: every rule is now scoped under `.rp-bar` (min. 0,2,0, which beats
   0,1,1), plus !important on the specific properties that define the look
   of a control. Those are marked ELEMENTOR ARMOUR below. Normally
   !important is a smell; here it is correct, because Elementor changes its
   kit selectors between versions and specificity arithmetic against a
   moving target is not a fix that stays fixed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
.rp-bar {
  --rp-bar-bg:      #ffffff;   /* the light grey strip */
  --rp-ink:         #000000;   /* text on grey, and the inverted fill */
  --rp-on-dark:     #ffffff;
  --rp-hairline:    rgba(255, 255, 255, 0.38);  /* rules inside the panels */

  --rp-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --rp-label:   14px;
  --rp-value:   27px;
  --rp-book:    27px;
  --rp-panel-w: 330px;

  --rp-pad-y:   22px;
  --rp-pad-x:   26px;
  --rp-ease:    cubic-bezier(.22, 1, .36, 1);

  max-width: 1180px;
  margin-inline: auto;
  font-family: var(--rp-font);
  color: var(--rp-ink);
}

/* Don't inherit box-sizing from the page. */
.rp-bar,
.rp-bar *,
.rp-bar *::before,
.rp-bar *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. ELEMENTOR ARMOUR
   --------------------------------------------------------------------------
   Strips whatever the page builder has decided every button and input on
   the site should look like. :where() keeps this at (0,2,0) so the real
   component rules further down — also (0,2,0) — win on source order rather
   than fighting it.
   -------------------------------------------------------------------------- */
.rp-bar.rp-bar :where(button, input, select, textarea) {
  margin: 0;
  font: inherit;
  font-family: var(--rp-font);
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-align: inherit;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

/* --------------------------------------------------------------------------
   3. The strip
   -------------------------------------------------------------------------- */
.rp-bar .rp-bar__row {
  display: flex;
  align-items: stretch;
  background: var(--rp-bar-bg);
}

/* Segments size to their content and share the leftover space evenly.
   flex-basis:0 with min-width:0 (the obvious choice) makes every segment
   equal width, which truncates "Executive" while "29 Aug" sits in empty
   space. */
.rp-bar .rp-seg {
  position: relative;
  flex: 1 1 auto;
  min-width: max-content;
  padding: var(--rp-pad-y) var(--rp-pad-x);
  transition: background .18s var(--rp-ease), color .18s var(--rp-ease);
}

/* Hover and open both invert the segment — that is the whole interaction
   language of this bar. The price segment is display-only, so it is
   excluded; inverting something unclickable reads as a broken button. */
.rp-bar .rp-seg:not(.rp-seg--price):hover,
.rp-bar .rp-seg.is-open {
  background: var(--rp-ink);
  color: var(--rp-on-dark);
}

.rp-bar .rp-seg__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--rp-label);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: inherit;
}

.rp-bar .rp-seg__chev {
  flex: none;
  transition: transform .22s var(--rp-ease);
}

.rp-bar .rp-seg.is-open .rp-seg__chev { transform: rotate(180deg); }

.rp-bar .rp-seg__value {
  display: block;
  margin-top: 11px;
  font-size: var(--rp-value);
  font-weight: 400;
  line-height: 1.15;
  white-space: nowrap;
  color: inherit;
}

/* ELEMENTOR ARMOUR — the trigger is a <button>, so it inherits the kit's
   colour, border, radius and padding unless every one is forced off. */
.rp-bar .rp-seg__trigger {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: inherit !important;
  text-align: left !important;
  min-height: 0 !important;
  cursor: pointer;
}

/* ELEMENTOR ARMOUR — the date input must be completely invisible. The kit
   styles inputs with `.elementor-kit-N input:not([type=button])`, which is
   (0,3,0) and outranks any sane class selector. A visible date field here
   would wreck the bar, so this is forced. */
.rp-bar .rp-seg__native {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: transparent !important;
  opacity: 0 !important;
  cursor: pointer;
}

/* Chrome draws a calendar icon inside date inputs; hide it so no ghost
   shows through the transparent field. */
.rp-bar .rp-seg__native::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}

.rp-bar .rp-seg--date:focus-within {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.rp-bar .rp-seg--price { cursor: default; }

/* ELEMENTOR ARMOUR — the Book button. This is the control the kit changed
   most visibly, so every visual property is forced. */
.rp-bar .rp-bar__book {
  flex: 0 0 auto;
  min-width: 190px !important;
  margin: 0 !important;
  padding: var(--rp-pad-y) 32px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--rp-ink) !important;
  background-color: var(--rp-ink) !important;
  color: var(--rp-on-dark) !important;
  font-family: var(--rp-font) !important;
  font-size: var(--rp-book) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: opacity .18s var(--rp-ease);
}

.rp-bar .rp-bar__book:hover,
.rp-bar .rp-bar__book:focus {
  background: var(--rp-ink) !important;
  color: var(--rp-on-dark) !important;
  opacity: .82;
}

/* --------------------------------------------------------------------------
   4. Dropdown panels
   -------------------------------------------------------------------------- */
.rp-bar .rp-pop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: var(--rp-panel-w);
  padding: 26px 28px 30px;
  background: var(--rp-ink);
  color: var(--rp-on-dark);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
  cursor: default;
}

.rp-bar .rp-pop[hidden] { display: none; }

.rp-bar .rp-pop__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rp-bar .rp-pop__list li { margin: 0; padding: 0; list-style: none; }

/* ELEMENTOR ARMOUR — the room rows are <button>s inside the panel. */
.rp-bar .rp-pop__row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: 100% !important;
  margin: 0 !important;
  padding: 15px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rp-hairline) !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--rp-on-dark) !important;
  text-align: left !important;
  min-height: 0 !important;
}

.rp-bar .rp-pop__list .rp-pop__row {
  cursor: pointer;
  transition: opacity .16s var(--rp-ease);
}

.rp-bar .rp-pop__list .rp-pop__row:hover { opacity: .72; }

/* Selected room. An underline rather than a colour — this design has no
   accent to reach for. */
.rp-bar .rp-pop__row.is-active .rp-pop__name {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rp-bar .rp-pop__name {
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  color: inherit;
}

.rp-bar .rp-pop__rate {
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  color: inherit;
}

.rp-bar .rp-pop__row--step { margin-top: 6px !important; }

.rp-bar .rp-pop--room .rp-pop__row--step { margin-top: 34px !important; }

.rp-bar .rp-pop__hint {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--rp-on-dark);
  opacity: .85;
}

/* Steppers */
.rp-bar .rp-step {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

/* ELEMENTOR ARMOUR — stepper controls are <button>s too. */
.rp-bar .rp-step__btn {
  width: 22px !important;
  height: 22px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--rp-on-dark) !important;
  font-family: var(--rp-font) !important;
  font-size: 19px !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: opacity .16s var(--rp-ease);
}

.rp-bar .rp-step__btn:hover { opacity: .6; }

.rp-bar .rp-step__num {
  min-width: 26px;
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  color: inherit;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   5. Responsive
   --------------------------------------------------------------------------
   The strip is a desktop layout. Below 1024 it becomes a 2-up grid, and on
   phones the price and Book go full width — six across at 360px would give
   each field 60px, which is unusable.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .rp-bar {
    --rp-value: 22px;
    --rp-book: 22px;
    --rp-pad-x: 20px;
  }

  .rp-bar .rp-bar__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .rp-bar .rp-seg {
    min-width: 0;   /* allow shrink once the row is a grid */
    border-bottom: 1px solid rgba(0, 0, 0, .09);
  }

  .rp-bar .rp-bar__book {
    grid-column: 1 / -1;
    width: 100% !important;
  }

  /* Keep panels inside the viewport once the row wraps. */
  .rp-bar .rp-pop { min-width: min(330px, 86vw); }
  .rp-bar .rp-pop--guests { left: auto; right: 0; }
}

@media (max-width: 600px) {
  .rp-bar {
    --rp-value: 21px;
    --rp-book: 20px;
    --rp-pad-y: 16px;
    --rp-pad-x: 18px;
    --rp-label: 13px;
  }

  .rp-bar .rp-seg--price {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .rp-bar .rp-seg--price .rp-seg__value { margin-top: 0; }
}

/* Reduced motion — kill the movement, keep the state changes. */
@media (prefers-reduced-motion: reduce) {
  .rp-bar *,
  .rp-bar *::before,
  .rp-bar *::after {
    transition-duration: .01ms !important;
  }
}
/* ==========================================================================
   ROYAL PALACE — CONTACT STEP (modal)
   ==========================================================================
   Paste at the END of hello-elementor-child/style.css, after the booking
   bar block. Then bump Version: in the theme header at the top of the file.

   Same ELEMENTOR ARMOUR approach as the bar: every rule is scoped under
   .rp-modal so it outranks `.elementor-kit-N button` (0,1,1), and the
   properties that define a control are forced. Elementor styles inputs
   with `.elementor-kit-N input:not([type="button"])` — specificity (0,3,0)
   — which would otherwise give these fields white backgrounds and borders
   in the middle of a black panel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Overlay
   -------------------------------------------------------------------------- */
.rp-modal {
  --rp-m-ink:    #000000;
  --rp-m-on:     #ffffff;
  --rp-m-line:   rgba(255, 255, 255, .55);
  --rp-m-hint:   rgba(255, 255, 255, .55);
  --rp-m-font:   'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --rp-m-ease:   cubic-bezier(.22, 1, .36, 1);

  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 24px;
  font-family: var(--rp-m-font);
  opacity: 0;
  transition: opacity .26s var(--rp-m-ease);
}

.rp-modal[hidden] { display: none; }

.rp-modal.is-open { opacity: 1; }

.rp-modal,
.rp-modal *,
.rp-modal *::before,
.rp-modal *::after { box-sizing: border-box; }

/* The page behind blurs rather than dimming to black — that is what the
   design shows, and it keeps the bar readable as context for what is being
   booked. The rgba layer is also the fallback where backdrop-filter is
   unsupported. */
.rp-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  cursor: pointer;
}

body.rp-modal-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   2. Panel
   -------------------------------------------------------------------------- */
.rp-modal__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  padding: 54px 56px 58px;
  background: var(--rp-m-ink);
  color: var(--rp-m-on);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  transform: translateY(14px);
  transition: transform .3s var(--rp-m-ease);
}

.rp-modal.is-open .rp-modal__panel { transform: translateY(0); }

/* The line under the panel, on the page rather than inside it. */
.rp-modal__note {
  position: relative;
  margin: 0;
  max-width: 640px;
  font-size: 15px;
  font-style: italic;
  color: #6d6d6d;
  text-align: center;
}

.rp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Honeypot — off-screen rather than display:none, because some bots skip
   fields that are display:none and the trap stops working. */
.rp-modal .rp-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   3. Fields
   --------------------------------------------------------------------------
   Each row is label + input on one baseline with a single hairline under
   both, as designed.
   -------------------------------------------------------------------------- */
.rp-modal .rp-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 0;
}

/* `display` on the element beats the [hidden] attribute's default
   display:none, so hiding the form in JS silently does nothing without
   this. Same reason .rp-done needs its own rule below. */
.rp-modal .rp-form[hidden] { display: none; }

.rp-modal .rp-field {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--rp-m-line);
}

.rp-modal .rp-field__label {
  flex: 0 0 auto;
  min-width: 156px;
  margin: 0;
  padding: 0;
  color: var(--rp-m-on);
  font-family: var(--rp-m-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

/* ELEMENTOR ARMOUR — without this the kit gives these a white background,
   a border and a radius, in the middle of a black panel. */
.rp-modal .rp-field__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--rp-m-on) !important;
  font-family: var(--rp-m-font) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  -webkit-appearance: none;
  appearance: none;
}

.rp-modal .rp-field__input:focus,
.rp-modal .rp-field__input:focus-visible {
  outline: none;
  box-shadow: none !important;
}

/* The field itself carries the focus indication, so the underline moves
   rather than a ring appearing around a borderless input. */
.rp-modal .rp-field:focus-within {
  border-bottom-color: var(--rp-m-on);
}

.rp-modal .rp-field__input::placeholder {
  color: var(--rp-m-hint);
  font-style: italic;
  opacity: 1;   /* Firefox dims placeholders by default. */
}

.rp-modal .rp-field.is-invalid,
.rp-modal .rp-field__input.is-invalid {
  border-bottom-color: #ff6b6b;
}

.rp-modal .rp-field__input.is-invalid { box-shadow: 0 1px 0 0 #ff6b6b !important; }

/* State + Purpose share a row. */
.rp-modal .rp-field-row {
  display: flex;
  gap: 38px;
}

.rp-modal .rp-field-row .rp-field {
  flex: 1 1 0;
  min-width: 0;
}

.rp-modal .rp-field-row .rp-field__label { min-width: 0; }

/* --------------------------------------------------------------------------
   4. Submit
   -------------------------------------------------------------------------- */
.rp-modal .rp-form__submit {
  display: block;
  width: 100% !important;
  margin: 26px 0 0 !important;
  padding: 21px 28px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--rp-m-on) !important;
  background-color: var(--rp-m-on) !important;
  color: var(--rp-m-ink) !important;
  font-family: var(--rp-m-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: opacity .18s var(--rp-m-ease);
}

.rp-modal .rp-form__submit:hover { opacity: .88; }

.rp-modal .rp-form__submit:disabled {
  opacity: .6;
  cursor: default;
}

.rp-modal .rp-form__status {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: var(--rp-m-on);
}

.rp-modal .rp-form__status:empty { display: none; }
.rp-modal .rp-form__status.is-error { color: #ff8a8a; }

/* --------------------------------------------------------------------------
   5. Confirmation state
   -------------------------------------------------------------------------- */
.rp-modal .rp-done { text-align: center; }
.rp-modal .rp-done[hidden] { display: none; }

.rp-modal .rp-done__title {
  margin: 0 0 10px;
  color: var(--rp-m-on);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.rp-modal .rp-done__text {
  margin: 0 auto;
  max-width: 34ch;
  color: rgba(255, 255, 255, .78);
  font-size: 16px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   6. Responsive
   --------------------------------------------------------------------------
   On a phone the label column would leave ~120px for the input, so the row
   stacks: label above, input below, hairline still under both.
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
  .rp-modal { padding: 18px; gap: 18px; }

  .rp-modal__panel { padding: 34px 26px 38px; }

  .rp-modal .rp-form { gap: 24px; }

  .rp-modal .rp-field {
    display: block;
    padding-bottom: 11px;
  }

  .rp-modal .rp-field__label {
    display: block;
    min-width: 0;
    margin-bottom: 7px !important;
    font-size: 16px;
  }

  .rp-modal .rp-field__input { font-size: 16px !important; }

  .rp-modal .rp-field-row {
    display: block;
  }

  .rp-modal .rp-field-row .rp-field + .rp-field { margin-top: 24px; }

  .rp-modal .rp-form__submit {
    margin-top: 18px !important;
    padding: 18px 22px !important;
    font-size: 16px !important;
  }

  .rp-modal__note { font-size: 13px; }
}

/* Short viewports — let the panel scroll rather than clipping the button. */
@media (max-height: 620px) {
  .rp-modal {
    justify-content: flex-start;
    overflow-y: auto;
  }
  .rp-modal__panel { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .rp-modal,
  .rp-modal__panel,
  .rp-modal * {
    transition-duration: .01ms !important;
  }
  .rp-modal__panel { transform: none !important; }
}
/* ==========================================================================
   NO HEADER OR FOOTER STRIP
   ==========================================================================
   Hello's header and footer are switched off in functions.php via the
   hello_elementor_header_footer filter, so there's no markup left to hide.
   What remains is <main class="site-main">, which still wraps page content
   and carries the last of the gap.

   Deliberately NOT touching Elementor section padding — whatever top spacing
   you set on the hero 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 PALACE — OTA LINKS
   ==========================================================================
   ELEMENTOR ARMOUR
   The pills are <a> elements and the heading is a <p> inside a shortcode
   widget. Elementor's kit loads after this stylesheet and reaches both —
   `.elementor-kit-N a` at (0,1,1) for the pills, `.elementor-widget-container p`
   at (0,2,1) for the heading, which beats a plain (0,2,0) rule of ours. So
   the properties that define the look are forced.
   ========================================================================== */

.rp-otas {
  --rp-ota-font:   'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --rp-ota-ink:    #1a1a1a;
  --rp-ota-line:   #e3e3e3;   /* the hairline round each pill */
  --rp-ota-bg:     #ffffff;
  --rp-ota-ease:   cubic-bezier(.22, 1, .36, 1);

  --rp-ota-w:      174px;
  --rp-ota-h:      67px;
  --rp-ota-gap:    14px;

  max-width: 1180px;
  margin-inline: auto;
  font-family: var(--rp-ota-font);
  color: var(--rp-ota-ink);
}

.rp-otas,
.rp-otas *,
.rp-otas *::before,
.rp-otas *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   1. Heading
   --------------------------------------------------------------------------
   font-family, size and weight are forced. Without that, Elementor's
   `.elementor-widget-container p` wins on specificity and the line renders in
   the kit's font at the kit's weight.
   -------------------------------------------------------------------------- */
.rp-otas .rp-otas__heading {
  margin: 0 0 16px !important;
  padding: 0 !important;
  color: var(--rp-ota-ink) !important;
  font-family: var(--rp-ota-font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* --------------------------------------------------------------------------
   2. The row
   -------------------------------------------------------------------------- */
.rp-otas .rp-otas__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rp-ota-gap);
}

/* --------------------------------------------------------------------------
   3. The pill  —  ELEMENTOR ARMOUR
   -------------------------------------------------------------------------- */
.rp-otas .rp-otas__box {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--rp-ota-w);
  height: var(--rp-ota-h);

  /* Per-brand logo size. See section 4 — this is the only number to tune. */
  --rp-logo-size: 90px;

  padding: 10px 14px !important;
  border: 1px solid var(--rp-ota-line) !important;
  border-radius: 999px !important;
  background: var(--rp-ota-bg) !important;
  background-color: var(--rp-ota-bg) !important;
  box-shadow: none !important;
  color: var(--rp-ota-ink) !important;
  text-decoration: none !important;
  overflow: hidden;
  transition: border-color .18s var(--rp-ota-ease),
              box-shadow   .18s var(--rp-ota-ease);
}

.rp-otas .rp-otas__box:hover,
.rp-otas .rp-otas__box:focus-visible {
  border-color: #c9c9c9 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07) !important;
  text-decoration: none !important;
}

.rp-otas .rp-otas__box:focus-visible {
  outline: 2px solid var(--rp-ota-ink);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Logo
   --------------------------------------------------------------------------
   All four logo files are 340x340 SQUARES with the wordmark floating in the
   middle, surrounded by transparent space. Measured, the mark occupies only
   this much of its own file:

       Booking.com   98.8% wide x 16.5% tall
       goibibo       97.1% x 28.5%
       MakeMyTrip    94.1% x 29.4%
       agoda         70.0% x 35.6%

   So any rule that sizes the IMAGE is really sizing mostly empty space, and
   the visible logo comes out a fraction of it. Sizing the square to 40px tall
   left Booking.com's wordmark 6.6px tall — which is what you saw.

   The fix: size each square by how much of it is actually ink, so the marks
   land at matched visual weight. The square then overflows the pill
   vertically and `overflow: hidden` clips the empty part — nothing visible is
   lost, because all four marks sit within 0.7% of dead centre in their file.
   -------------------------------------------------------------------------- */
.rp-otas .rp-otas__logo {
  display: block;
  flex: 0 0 auto;
  width: var(--rp-logo-size) !important;
  height: var(--rp-logo-size) !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain;
  object-position: center;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* Fallback when a logo is missing from the Media Library — the brand name
   as text, so the pill is still a working link rather than an empty box. */
.rp-otas .rp-otas__name {
  font-family: var(--rp-ota-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--rp-ota-ink);
  white-space: nowrap;
}

/* Per-brand sizes, derived from the ink measurements above. Balanced on
   optical weight, not raw height — agoda is a stacked two-line lockup and
   Booking.com is a 6:1 wordmark, so making them the same HEIGHT would let
   Booking.com dominate the row. If a logo ever looks off, this one number is
   the only thing to change. Bigger = bigger logo. */
.rp-otas .rp-otas__box[data-rp-ota="booking"]    { --rp-logo-size: 118px; }
.rp-otas .rp-otas__box[data-rp-ota="agoda"]      { --rp-logo-size:  94px; }
.rp-otas .rp-otas__box[data-rp-ota="goibibo"]    { --rp-logo-size:  92px; }
.rp-otas .rp-otas__box[data-rp-ota="makemytrip"] { --rp-logo-size:  90px; }

/* --------------------------------------------------------------------------
   5. Phone — two pills per row, so none is orphaned on its own line.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .rp-otas { --rp-ota-h: 60px; --rp-ota-gap: 10px; }

  .rp-otas .rp-otas__heading {
    margin-bottom: 12px !important;
    font-size: 15px;
  }

  .rp-otas .rp-otas__box {
    width: calc(50% - (var(--rp-ota-gap) / 2));
    padding: 8px 10px !important;
  }

  /* Matched on the attribute so these are (0,3,0) and beat the sizes above,
     which are also (0,3,0) but come earlier. A plain `.rp-otas .rp-otas__box`
     here would be (0,2,0) and silently lose. */
  .rp-otas .rp-otas__box[data-rp-ota="booking"]    { --rp-logo-size: 100px; }
  .rp-otas .rp-otas__box[data-rp-ota="agoda"]      { --rp-logo-size:  80px; }
  .rp-otas .rp-otas__box[data-rp-ota="goibibo"]    { --rp-logo-size:  78px; }
  .rp-otas .rp-otas__box[data-rp-ota="makemytrip"] { --rp-logo-size:  76px; }
}

@media (prefers-reduced-motion: reduce) {
  .rp-otas .rp-otas__box { transition-duration: .01ms !important; }
}
/* ==========================================================================
   ROYAL PALACE — SECTION LINK STRIP
   ==========================================================================
   Measured off the Figma frames rather than eyeballed:
     strip      695 x 100px, #FFFFFF, no border, no radius
     label      Roboto 16px / 400, #000000  (cap height 12px in the artwork)
     cell       full strip height, 32px padding each side -> 64px between labels
     strip pad  24px left and right
     hover      whole cell fills #564B44, label turns #FFFFFF
   24 + 32 + labels + 32 ... + 24 comes to 693px against the artwork's 695.

   ELEMENTOR ARMOUR
   These are <a> elements, so `.elementor-kit-N a` (0,1,1) would repaint them
   in the accent colour and underline them on hover. Every rule is scoped
   under `.rp-nav` and the properties that define the cell are forced.
   ========================================================================== */

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

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

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

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

/* --------------------------------------------------------------------------
   The strip
   --------------------------------------------------------------------------
   inline-flex so the white box hugs its content — that is what produces the
   695px width in the design, rather than a hard-coded number that would go
   wrong the moment a label is renamed.
   -------------------------------------------------------------------------- */
.rp-nav .rp-nav__row {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  max-width: 100%;
  padding: 0 var(--rp-nav-edge);
  background: var(--rp-nav-bg);
  text-align: left;
  vertical-align: top;
}

/* --------------------------------------------------------------------------
   A cell  —  ELEMENTOR ARMOUR
   -------------------------------------------------------------------------- */
.rp-nav .rp-nav__item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: var(--rp-nav-h);
  margin: 0 !important;
  padding: 0 var(--rp-nav-pad) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--rp-nav-ink) !important;
  font-family: var(--rp-nav-font) !important;
  font-size: var(--rp-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;
}

/* The hover block fills the cell edge to edge, top to bottom — no inset, no
   radius. Height comes from the cell, so it still fills correctly if the row
   wraps on a narrow screen. */
.rp-nav .rp-nav__item:hover,
.rp-nav .rp-nav__item:focus-visible {
  background: var(--rp-nav-fill) !important;
  background-color: var(--rp-nav-fill) !important;
  color: var(--rp-nav-on) !important;
  text-decoration: none !important;
}

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

/* --------------------------------------------------------------------------
   Narrower screens
   --------------------------------------------------------------------------
   The strip is 693px, so it survives to about 740px before it has to give.
   Padding tightens first; below that the row wraps and the strip goes full
   width, keeping every label on one line rather than breaking words.
   -------------------------------------------------------------------------- */
@media (max-width: 780px) {
  .rp-nav {
    --rp-nav-pad:  20px;
    --rp-nav-edge: 12px;
    --rp-nav-h:    72px;
    --rp-nav-size: 15px;
  }
}

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

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

@media (prefers-reduced-motion: reduce) {
  .rp-nav .rp-nav__item { transition-duration: .01ms !important; }
}
/* ==========================================================================
   ROYAL PALACE — WHY GUESTS CHOOSE US
   ==========================================================================
     list        1035px wide, centred
     row         74px rule-to-rule closed, 141px open
     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
     gap         27px between the heading and the description
   ========================================================================== */

.rp-why {
  --rp-why-font:  'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --rp-why-ink:   #000000;
  --rp-why-rule:  #564b44;   /* same brown as the section-strip hover */

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

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

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

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

/* --------------------------------------------------------------------------
   Touch affordance
   --------------------------------------------------------------------------
   Hidden on anything with a pointer — there, hover does the work and a
   chevron would be clutter. On a touch screen the rows are collapsed and
   tappable, and without a mark nothing would suggest that, so six
   descriptions would simply never be found.
   -------------------------------------------------------------------------- */
.rp-why .rp-why__mark { display: none; }

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

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

/* --------------------------------------------------------------------------
   Heading  —  ELEMENTOR ARMOUR
   --------------------------------------------------------------------------
   A real <h3>, so the copy counts for SEO. Elementor's kit styles headings
   with `.elementor-kit-N h3` (0,1,1) and Hello Elementor adds its own, both
   loading after this file. THIS RULE IS THE ONLY THING KEEPING THE HEADINGS
   IN ROBOTO — delete it and the site's display serif takes over.

   TYPE: the frames measure 25px / 400. This is set 23px / 300 with 0.04em
   tracking instead — lighter, slightly smaller, and opened up. The
   line-height stays 31px so the 74px rule-to-rule rhythm is unchanged.

   The size stays the same on hover. Frame 22 shows the open heading about
   4.5% smaller than Frame 21 — that reads as a rendering slip rather than an
   intended effect, and type that shrinks when you point at it looks like a
   bug, so it is held constant here.
   -------------------------------------------------------------------------- */
.rp-why .rp-why__title {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--rp-why-ink) !important;
  font-family: var(--rp-why-font) !important;
  font-size: var(--rp-why-size) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: var(--rp-why-lh) !important;
  letter-spacing: var(--rp-why-track) !important;
  text-transform: none !important;
  text-align: center !important;
}

/* --------------------------------------------------------------------------
   The reveal
   --------------------------------------------------------------------------
   grid-template-rows 0fr -> 1fr animates to the content's real height, so
   there is no guessed max-height to get wrong when the copy is replaced.

   The description stays in the DOM at all times — collapsed, never
   display:none — so search engines still read all six.
   -------------------------------------------------------------------------- */
.rp-why .rp-why__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--rp-why-ease);
}

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

.rp-why .rp-why__desc {
  margin: var(--rp-why-gap) auto 0 !important;
  padding: 0 !important;
  max-width: var(--rp-why-descw);
  color: var(--rp-why-ink) !important;
  font-family: var(--rp-why-font) !important;
  font-size: var(--rp-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(--rp-why-ease);
}

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

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

/* --------------------------------------------------------------------------
   Touch: tap to open
   --------------------------------------------------------------------------
   `.is-open` is put on by the script in functions.php, one row at a time, so
   the list stays short on a phone instead of running to six open paragraphs.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .rp-why .rp-why__row { cursor: pointer; }

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

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

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

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

@media (prefers-reduced-motion: reduce) {
  .rp-why .rp-why__reveal,
  .rp-why .rp-why__desc { transition-duration: .01ms !important; }
}
/* ==========================================================================
   ROYAL PALACE — WHAT SETS US APART
   ==========================================================================
   Measured off Frame 23:
     rule      1px, dead centre, overhanging the rows top and bottom
     gutter    64px from the rule to the text on each side
     text      Roboto 16px / 300 (fingerprinted: rms 0.79 against the frame)
     align     left column right-aligned, right column left-aligned

   ADDED, because the frame has none and the section does not work without:
     column labels — with four bare pairs either side of a line, nothing
     tells a visitor which side is Royal Palace.
     colour split — the "other hotels" column is a muted brown-grey rather
     than black. It carries the comparison without resorting to tick and
     cross icons, which would cheapen it. Still AA legible at 5.4:1.
   ========================================================================== */

.rp-vs {
  --rp-vs-font:   'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --rp-vs-ours:   #000000;
  --rp-vs-theirs: #6b6058;   /* 5.39:1 on the cream page */
  --rp-vs-rule:   #564b44;
  --rp-vs-label:  #8a7c72;

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

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

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

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

/* --------------------------------------------------------------------------
   The centre rule
   --------------------------------------------------------------------------
   Its own element rather than a border, so it can be drawn downward on
   reveal. transform-origin: top is what makes it read as being drawn rather
   than fading in.
   -------------------------------------------------------------------------- */
.rp-vs .rp-vs__rule {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -.5px;
  background: var(--rp-vs-rule);
  opacity: .55;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .8s var(--rp-vs-ease);
}

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

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

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

/* A faint band on hover — enough to tie the two halves of a pair together,
   far too light to read as a button. */
.rp-vs .rp-vs__row::before {
  content: "";
  position: absolute;
  inset: 0 -20px;
  background: rgba(86, 75, 68, .04);
  opacity: 0;
  transition: opacity .25s var(--rp-vs-ease);
  pointer-events: none;
}

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

/* --------------------------------------------------------------------------
   Labels and text  —  ELEMENTOR ARMOUR
   --------------------------------------------------------------------------
   `.rp-vs__ours` is an <h3>. Elementor's kit reaches headings through
   `.elementor-kit-N h3` and Hello Elementor adds more, both loading after
   this file. THESE RULES ARE THE ONLY THING KEEPING THIS TEXT IN ROBOTO —
   remove them and the site's display serif takes over.
   -------------------------------------------------------------------------- */
.rp-vs .rp-vs__label {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--rp-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(--rp-vs-label) !important;
}

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

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

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

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

/* --------------------------------------------------------------------------
   Node on the rule
   --------------------------------------------------------------------------
   Four one-line pairs separated by 64px of air on each side of a bare line
   read as eight unrelated fragments. The node gives each pair a visible
   anchor on the rule. Delete this rule and its markup if you disagree —
   nothing else depends on it.
   -------------------------------------------------------------------------- */
.rp-vs .rp-vs__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--rp-vs-rule);
  transform: scale(0);
  transition: transform .5s var(--rp-vs-ease);
}

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

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

/* --------------------------------------------------------------------------
   Reveal
   --------------------------------------------------------------------------
   Each half enters from its own side of the rule, so the motion itself says
   "two columns being compared". Staggered by row via --i, set in the markup.
   -------------------------------------------------------------------------- */
.rp-vs .rp-vs__label,
.rp-vs .rp-vs__ours,
.rp-vs .rp-vs__theirs {
  opacity: 0;
  transition: opacity .6s var(--rp-vs-ease), transform .6s var(--rp-vs-ease);
  transition-delay: calc(.22s + (var(--i, 0) * .09s));
}

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

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

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

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

/* --------------------------------------------------------------------------
   Smaller screens
   --------------------------------------------------------------------------
   Below the breakpoint the centre rule stops working — two 366px columns do
   not fit — so each pair becomes a stacked card: our line, then theirs
   beneath it, separated by a short rule. The comparison survives; only the
   axis changes from vertical to horizontal.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .rp-vs { --rp-vs-gut: 64px; padding-inline: 24px; }
}

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

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

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

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

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

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

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

  /* The label the head row would have carried, restored per line so the
     stacked version still says which is which. */
  .rp-vs .rp-vs__theirs { margin-top: 7px !important; }

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

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

@media (prefers-reduced-motion: reduce) {
  .rp-vs .rp-vs__rule,
  .rp-vs .rp-vs__dot,
  .rp-vs .rp-vs__label,
  .rp-vs .rp-vs__ours,
  .rp-vs .rp-vs__theirs {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}
/* ==========================================================================
   ROYAL PALACE — STICKY BOOKING 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 --rp-strip-serif below)

   DENSITY: the artwork measures 88px tall with a 26px button label. Over a
   photographic hero that reads heavy, so this is set at 62px with the CTA
   as 13px tracked capitals — the proportions luxury hotel bars actually
   use. Same parts, same colour, less of it. Every size is a variable
   below; raise --rp-strip-h and the rest scales around it.
   ========================================================================== */

.rp-strip {
  /* ---- THE ONE LINE YOU MAY NEED TO CHANGE -----------------------------
     The wordmark uses the site's display serif, not Roboto. Put the exact
     font name your Elementor kit uses for headings first in this list —
     Elementor -> Site Settings -> Typography. It is already being loaded
     for the page headings, so naming it here costs no extra request.
     Marcellus and Cinzel are the two closest matches to the artwork.       */
  --rp-strip-serif: 'Marcellus', 'Cinzel', 'Playfair Display', Georgia, 'Times New Roman', serif;

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

  --rp-strip-h:     62px;
  --rp-strip-btn:   196px;
  --rp-strip-pad:   clamp(18px, 5.7vw, 110px);
  --rp-strip-gap:   26px;
  --rp-strip-sep:   18px;
  --rp-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(--rp-strip-font);

  /* Off-screen until the page scrolls past the first section. pointer-events
     is what stops an invisible bar from swallowing clicks along the bottom
     edge of the hero. */
  transform: translateY(110%);
  pointer-events: none;
  transition: transform .66s var(--rp-strip-ease);
  will-change: transform;
}

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

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

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.rp-strip .rp-strip__inner {
  display: flex;
  align-items: stretch;
  height: var(--rp-strip-h);
  background: var(--rp-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(--rp-strip-ease) .1s;
}

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

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

/* --------------------------------------------------------------------------
   Wordmark
   -------------------------------------------------------------------------- */
.rp-strip .rp-strip__mark {
  flex: 0 0 auto;
  font-family: var(--rp-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(--rp-strip-ink) !important;
  white-space: nowrap;
}

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

/* --------------------------------------------------------------------------
   Rotating slots
   --------------------------------------------------------------------------
   Both options sit in the SAME grid cell, so the slot sizes itself to the
   wider of the two and the divider after it never moves as the text swaps.
   Doing this with absolute positioning would have collapsed the slot to
   zero width and shunted the whole strip on every change.
   -------------------------------------------------------------------------- */
.rp-strip .rp-strip__slot {
  flex: 0 0 auto;
  display: grid;
  grid-template-areas: "swap";
  align-items: center;
}

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

/* Second option runs half a cycle behind the first, so one leaves as the
   other arrives. */
.rp-strip .rp-strip__opt:nth-child(2) { animation-delay: -4s; }

/* Slot B is offset a further quarter cycle, so the two lines never change
   at the same moment — which is what the three frames show. */
.rp-strip .rp-strip__slot[data-rp-slot="b"] .rp-strip__opt:nth-child(1) { animation-delay: -2s; }
.rp-strip .rp-strip__slot[data-rp-slot="b"] .rp-strip__opt:nth-child(2) { animation-delay: -6s; }

@keyframes rp-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 rather than simply appearing — it is the one
   element wide enough for the motion to register.
   -------------------------------------------------------------------------- */
.rp-strip .rp-strip__rule {
  flex: 1 1 auto;
  min-width: 0;
  height: 1px;
  margin-left: 19px;
  background: var(--rp-strip-ink);
  opacity: .4;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s var(--rp-strip-ease) .18s;
}

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

/* --------------------------------------------------------------------------
   The button  —  ELEMENTOR ARMOUR
   --------------------------------------------------------------------------
   An <a>, so `.elementor-kit-N a` (0,1,1) would recolour it and underline it
   on hover. Every property that defines the button is forced.
   -------------------------------------------------------------------------- */
.rp-strip .rp-strip__cta {
  position: relative;
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--rp-strip-btn);
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--rp-strip-ink) !important;
  background-color: var(--rp-strip-ink) !important;
  box-shadow: none !important;
  color: var(--rp-strip-on) !important;
  font-family: var(--rp-strip-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: .15em !important;
  text-indent: .15em;              /* offsets the trailing letter-space */
  text-align: center !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color .3s var(--rp-strip-ease),
              letter-spacing .45s var(--rp-strip-ease);
}

/* The tracking opens a touch on hover. On tracked capitals that reads as
   the button drawing breath — more in keeping than a size or colour jump. */
.rp-strip .rp-strip__cta:hover,
.rp-strip .rp-strip__cta:focus-visible {
  background: #453c36 !important;
  background-color: #453c36 !important;
  color: var(--rp-strip-on) !important;
  text-decoration: none !important;
  letter-spacing: .2em !important;
}

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

/* A single slow band of light crossing the face on hover. Subtler than a
   colour change and the reason the button reads as lit rather than flat. */
.rp-strip .rp-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) {
  .rp-strip .rp-strip__cta:hover::after {
    opacity: 1;
    animation: rp-strip-sheen .85s var(--rp-strip-ease);
  }
}

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

/* The wordmark and slots ease in behind the strip rather than arriving
   rigid with it. */
.rp-strip .rp-strip__mark,
.rp-strip .rp-strip__slot,
.rp-strip .rp-strip__sep {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s var(--rp-strip-ease), transform .5s var(--rp-strip-ease);
}

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

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

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

/* The sentinel marks where the shortcode sits. Zero size, no layout effect —
   only used as a fallback if the first section cannot be identified. */
.rp-strip-at {
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Smaller screens
   --------------------------------------------------------------------------
   The strip loses parts in order of how little each one sells: the hairline
   first, then the wordmark (the logo is already at the top of the page), and
   finally one of the two rotating lines. The price line and the button
   always survive.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .rp-strip { --rp-strip-btn: 180px; --rp-strip-gap: 20px; }
  .rp-strip .rp-strip__mark { font-size: 15px !important; }
}

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

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

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

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

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

  .rp-strip .rp-strip__opt { animation: none !important; opacity: 0; }
  .rp-strip .rp-strip__opt:nth-child(1) { opacity: 1; }
  .rp-strip .rp-strip__cta::after { display: none; }
}