/* Royal Park UI system — scoped Persian RTL and untouched English LTR */
@font-face {
  font-family: "Peyda";
  src: url("../fonts/Peyda-Thin.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 100;
}

@font-face {
  font-family: "Peyda";
  src: url("../fonts/peyda-extralight.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 200;
}

@font-face {
  font-family: "Peyda";
  src: url("../fonts/peyda-light.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: "Peyda";
  src: url("../fonts/Peyda-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Peyda";
  src: url("../fonts/Peyda-Medium.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Peyda";
  src: url("../fonts/Peyda-SemiBold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "Peyda";
  src: url("../fonts/Peyda-Bold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Peyda";
  src: url("../fonts/Peyda-ExtraBold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 800;
}

@font-face {
  font-family: "Peyda";
  src: url("../fonts/Peyda-Black.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 900;
}

:root {
  --navy: #071731;
  --navy-soft: #102846;
  --orange: #f26722;
  --orange-dark: #d95316;
  --cream: #f5f1e9;
  --paper: #fbfaf7;
  --ink: #071731;
  --muted: #667180;
  --line: rgba(7, 23, 49, 0.14);
  --white-line: rgba(255, 255, 255, 0.25);
  --success: #2d9d68;
  --danger: #b8472e;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 7rem;
  --radius-sm: 0.625rem;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --shadow: 0 1.5rem 4.5rem rgba(7, 23, 49, 0.1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--cream);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

.royal-locale {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.royal-locale[dir="rtl"] {
  direction: rtl;
  font-family: "Peyda", Tahoma, sans-serif;
  font-weight: 400;
  text-align: right;
  line-height: 1.9;
  letter-spacing: 0;
  word-spacing: 0.035em;
  font-kerning: normal;
  font-synthesis: none;
}

.royal-locale[dir="rtl"] :where(h1, h2, h3, h4, p, li, label, dt, dd) {
  text-align: right;
}

.royal-locale[dir="rtl"] :where(h1, h2, h3, h4, strong, b) {
  font-weight: 700;
  letter-spacing: 0;
  word-spacing: 0.015em;
}

.royal-locale[dir="rtl"] :where(p, li, label, input, button, a, span, small, dt, dd) {
  line-height: 2;
  letter-spacing: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

.royal-locale[dir="rtl"] :where(.rp-section-label, .rb-kicker, .rb-step) {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}

.royal-locale[dir="ltr"] {
  direction: ltr;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
  line-height: 1.55;
}

.latin-content,
.numeric-content,
bdi {
  direction: ltr;
  unicode-bidi: isolate;
}

.latin-content { font-family: Arial, Helvetica, sans-serif !important; }

.royal-locale[dir="rtl"] .latin-content { text-align: left !important; }

.numeric-content,
bdi {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.royal-locale[dir="rtl"] .directional-icon {
  display: inline-block;
  transform: scaleX(-1);
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.rp-button {
  min-height: 3.25rem;
  width: fit-content;
  padding-inline: 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.4 !important;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.rp-button:hover { transform: translateY(-2px); }
.rp-button:disabled { cursor: wait; opacity: 0.6; transform: none; }
.rp-button--orange { background: var(--orange); color: #fff; }
.rp-button--orange:hover { background: var(--orange-dark); }
.rp-button--small { min-height: 2.75rem; padding-inline: 1.05rem; font-size: 0.68rem; }

.rp-language {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: inherit;
  font-size: 0.68rem;
  cursor: pointer;
}

.rp-brand,
.rb-logo {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  direction: ltr;
  text-align: left;
}

.rp-brand img,
.rb-logo img {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  object-fit: cover;
}

.rp-brand > span,
.rb-logo > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2 !important;
}

.rp-brand small,
.rb-logo small {
  color: var(--orange);
  font-size: 0.42rem;
  letter-spacing: 0.16em;
  line-height: 1.2 !important;
}

.rp-section-label,
.rb-kicker,
.rb-step {
  margin: 0 0 var(--space-3);
  color: var(--orange);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Homepage */
.rp-home {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--cream);
}

.rp-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: url("../images/royal-park-padel-tennis-hero.webp") center/cover no-repeat;
  color: #fff;
}

.rp-hero-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(4,14,32,.9) 0%, rgba(5,18,40,.48) 46%, rgba(5,18,40,.13) 100%);
}

.royal-locale[dir="rtl"] .rp-hero-shade { transform: scaleX(-1); }

.rp-header {
  position: relative;
  z-index: 4;
  min-height: 5rem;
  margin: 1.5rem;
  padding-inline: 1.25rem;
  border: 1px solid rgba(255,255,255,.25);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
  background: rgba(8,27,54,.5);
  backdrop-filter: blur(18px);
}

.rp-header nav,
.rp-header-actions,
.rpa-header nav,
.rpa-header > div,
.rb-top nav,
.ra-header nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.rp-header nav {
  justify-content: center;
  gap: clamp(1.75rem, 2.6vw, 3rem);
}
.rp-header > .rp-brand,
.rb-top > .rb-logo,
.rpa-header > .rb-logo,
.ra-header > .rb-logo {
  width: max-content;
  justify-self: right;
}
.rp-header nav a,
.rp-account-link { font-size: 0.82rem; font-weight: 500; white-space: nowrap; }
.rp-header nav a:hover,
.rp-account-link:hover { color: var(--orange); }
.rp-header-actions { justify-self: end; gap: 0.75rem; }
.rp-header .rp-language { color: #fff; border-color: rgba(255,255,255,.45); }

.rp-hero-copy {
  position: relative;
  z-index: 2;
  grid-row: 2;
  align-self: end;
  justify-self: start;
  margin-inline-start: clamp(2.25rem, 7vw, 7rem);
  margin-block: clamp(2rem, 4vh, 3.5rem) clamp(7.5rem, 13vh, 9.5rem);
  width: min(45rem, calc(100% - 5rem));
}


.rp-hero-copy h1 {
  margin: 0;
  max-width: 48rem;
  font-size: clamp(3rem, 6.7vw, 7.5rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.royal-locale[dir="rtl"] .rp-hero-copy h1:not(.latin-content) {
  max-width: 42rem;
  font-size: clamp(2.9rem, 5.8vw, 6.25rem);
  line-height: 1.22;
  letter-spacing: 0;
}

.rp-hero-copy h1 em { color: var(--orange); font-style: normal; }

.rp-hero-copy > p {
  max-width: 41rem;
  margin: var(--space-4) 0 0;
  color: rgba(255,255,255,.78);
  font-size: clamp(0.88rem, 1.2vw, 1rem);
  line-height: 1.9;
}

.rp-hero-actions { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: 0.75rem; }

.rp-hero-status {
  position: absolute;
  z-index: 2;
  inset-inline: clamp(2.25rem, 7vw, 7rem);
  inset-block-end: 2.25rem;
  min-height: 3.25rem;
  padding-inline: 1rem;
  border-block-start: 1px solid rgba(255,255,255,.22);
  display: flex;
  align-items: flex-end;
  gap: clamp(1rem, 3vw, 2.75rem);
  color: rgba(255,255,255,.72);
  font-size: 0.68rem;
}

.rp-hero-status span { display: inline-flex; align-items: center; gap: 0.55rem; }
.status-dot { width: .45rem; height: .45rem; border-radius: 50%; background: #56d58a; box-shadow: 0 0 0 .3rem rgba(86,213,138,.15); }

.rp-about-teaser,
.rp-facilities,
.rp-footer {
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}

.rp-about-teaser {
  padding-block: var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 7rem);
}

.rp-about-teaser__image {
  min-height: 36rem;
  background: url("../images/royal-park-covered-padel-courts.png") center/cover no-repeat;
}

.rp-about-teaser__copy h2,
.rp-section-head h2,
.rpa-page h2 {
  margin: 0;
  font-size: clamp(2.25rem, 4.8vw, 5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.royal-locale[dir="rtl"] :where(.rp-about-teaser__copy h2, .rp-section-head h2, .rpa-page h2):not(.latin-content) {
  line-height: 1.42;
  letter-spacing: 0;
}

.rp-about-teaser__copy > p:not(.rp-section-label) {
  margin: var(--space-4) 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 2;
}

.rp-text-link {
  margin-top: var(--space-5);
  padding-bottom: .4rem;
  border-bottom: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--orange);
  font-size: .75rem;
  font-weight: 500;
}

.rp-facilities { padding-block: 0 var(--space-8); }

.rp-section-head {
  margin-bottom: var(--space-6);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
}

.rp-section-head > span { color: var(--orange); font-size: clamp(2rem, 5vw, 4rem); }

.rp-facility-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.rp-facility {
  position: relative;
  isolation: isolate;
  min-height: 35rem;
  padding: 2rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  background: var(--navy);
}

.rp-facility::before,
.rp-facility::after { content: ""; position: absolute; z-index: -1; inset: 0; }
.rp-facility::before { background-position: center; background-size: cover; transition: transform 500ms ease; }
.rp-facility:hover::before { transform: scale(1.025); }
.rp-facility::after { background: linear-gradient(180deg, rgba(7,23,49,.12), rgba(7,23,49,.88)); }
.rp-facility--padel::before { background-image: url("../images/royal-park-padel.webp"); }
.rp-facility--tennis::before { background-image: url("../images/royal-park-tennis.webp"); }
.rp-facility--wellness { min-height: 24rem; grid-column: 1 / -1; }
.rp-facility--wellness::before { background-image: url("../images/royal-park-cafe-render.webp"); background-position: center 62%; filter: saturate(.8); }
.rp-facility > div { display: flex; justify-content: space-between; align-items: start; }
.rp-facility > div small { font-size: .62rem; letter-spacing: .12em; }
.rp-facility > div strong { font-size: clamp(2rem, 4vw, 4rem); font-weight: 400; }
.rp-facility footer { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 1.25rem; }
.rp-facility h3 { margin: 0; font-size: clamp(1.75rem, 3vw, 3rem); font-weight: 500; }
.rp-facility p { margin: .65rem 0 0; color: rgba(255,255,255,.7); font-size: .75rem; }
.rp-facility footer a { grid-column: 2; grid-row: 1 / 3; width: 3.25rem; height: 3.25rem; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; display: grid; place-items: center; }


.rp-footer {
  max-width: none;
  min-height: 14rem;
  padding-block: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: var(--space-5);
  color: #fff;
  background: var(--navy);
  font-size: .7rem;
}

.rp-brand--footer { color: #fff; }
.rp-footer > div { display: grid; gap: .35rem; }
.rp-footer p { margin: 0; }
.rp-footer > div:last-child { justify-self: end; }
.rp-footer > div:last-child span { color: rgba(255, 255, 255, .58); }

/* Shared interior headers */
.rb-top,
.rpa-header,
.ra-header {
  min-height: 5.5rem;
  padding-inline: clamp(1.25rem, 5vw, 4.75rem);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
  background: rgba(251,250,247,.92);
  backdrop-filter: blur(16px);
}

.rb-top nav,
.rpa-header nav { justify-self: center; }
.rb-top nav a,
.rpa-header nav a,
.ra-header nav a { font-size: .78rem; font-weight: 500; white-space: nowrap; }
.rpa-header nav .active { color: var(--orange); }
.rb-top > button,
.rpa-header > div,
.ra-header nav { justify-self: end; }
.rpa-header > div { gap: .75rem; }
.rb-top > button { color: var(--navy); }

/* About */
.rpa-page { min-height: 100vh; background: var(--cream); }
.rpa-hero,
.rpa-story,
.rpa-experience,
.rpa-cta,
.rpa-facts {
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}

.rpa-hero {
  padding-block: clamp(3.5rem, 8vw, 7.5rem) var(--space-7);
  display: grid;
  grid-template-columns: minmax(29rem, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
}

.rpa-hero h1 {
  margin: 0;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.035em;
  white-space: nowrap;
  text-align: left;
}

.royal-locale[dir="rtl"] .rpa-hero h1:not(.latin-content) { font-size: clamp(3rem, 6vw, 6.5rem); line-height: 1.28; letter-spacing: 0; }
.rpa-hero > div:first-child > p:last-child { margin: var(--space-5) 0 0; color: var(--muted); font-size: .9rem; line-height: 2; }
.rpa-hero__image { min-height: 38rem; background: url("../images/royal-park-padel-render.webp") center/cover no-repeat; }

.rpa-facts {
  padding-block: 0 var(--space-8);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.rpa-facts article { min-height: 10rem; padding: var(--space-4); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; }
.rpa-facts article + article { border-inline-start: 0; }
.rpa-facts strong { color: var(--orange); font-size: clamp(2.25rem, 4vw, 4rem); font-weight: 400; }
.rpa-facts span { color: var(--muted); font-size: .74rem; }

.rpa-story {
  padding-block: var(--space-8);
  display: grid;
  grid-template-columns: .5fr 1.25fr .35fr;
  align-items: start;
  gap: clamp(2rem, 5vw, 5rem);
  background: var(--navy);
  color: #fff;
}

.rpa-story > div > p { margin: var(--space-4) 0 0; color: rgba(255,255,255,.66); font-size: .85rem; line-height: 2; }
.rpa-story img { opacity: .15; }

.rpa-experience { padding-block: var(--space-8); }
.rpa-experience__head { max-width: 52rem; margin-bottom: var(--space-6); }
.rpa-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.rpa-feature-grid article { min-height: 27rem; border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; background: rgba(255, 255, 255, .34); }
.rpa-feature-grid article > img { width: 100%; aspect-ratio: 16 / 10; display: block; object-fit: cover; }
.rpa-feature-grid article > div { flex: 1; padding: 1.5rem; display: flex; flex-direction: column; }
.rpa-feature-grid article span { color: var(--orange); font-size: .7rem; }
.rpa-feature-grid h3 { margin: auto 0 .75rem; font-size: 1.35rem; font-weight: 500; }
.rpa-feature-grid p { margin: 0; color: var(--muted); font-size: .74rem; line-height: 2; }

.rpa-cta {
  margin-bottom: var(--space-8);
  padding-block: clamp(3rem, 6vw, 5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  background: #e9e2d6;
}
.rpa-cta > div > p { max-width: 42rem; margin: var(--space-4) 0 0; color: var(--muted); font-size: .82rem; }

/* Unified booking */
.rb-page { min-height: 100vh; padding-bottom: var(--space-8); background: var(--cream); color: var(--navy); }
.rb-intro { max-width: 90rem; margin-inline: auto; padding: clamp(3.25rem, 7vw, 6rem) clamp(1.5rem, 5vw, 5rem) var(--space-6); }
.rb-intro h1,
.rb-confirmation h1,
.ra-content h1 {
  margin: 0;
  font-size: clamp(3.1rem, 7vw, 6.8rem);
  font-weight: 500;
  line-height: .97;
  letter-spacing: -.055em;
}
.royal-locale[dir="rtl"] :where(.rb-intro h1, .rb-confirmation h1, .ra-content h1) { font-size: clamp(2.75rem, 6.2vw, 6rem); line-height: 1.3; letter-spacing: 0; }
.rb-intro > p:last-child { max-width: 48rem; margin: var(--space-4) 0 0; color: var(--muted); font-size: .86rem; line-height: 2; }

.rb-unified,
.rb-checkout-shell { max-width: 90rem; margin-inline: auto; padding-inline: clamp(1rem, 5vw, 5rem); }
.rb-unified { display: grid; gap: var(--space-4); }
.rb-filters { padding: var(--space-4); border: 1px solid var(--line); display: grid; grid-template-columns: 20rem minmax(0, 1fr); gap: var(--space-5); background: rgba(255,255,255,.58); }
.rb-filter-group { min-width: 0; display: grid; align-content: start; gap: .8rem; }
.rb-filter-group > span { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .68rem; }
.rb-filter-group > span small { color: var(--orange); font-size: .62rem; }
.rb-sport-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.rb-sport-tabs button { min-height: 4.25rem; padding-inline: 1rem; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: .75rem; background: var(--paper); color: var(--navy); font-size: .75rem; cursor: pointer; }
.rb-sport-tabs button.active { border-color: var(--navy); background: var(--navy); color: #fff; }
.rb-date-strip { min-width: 0; display: grid; grid-template-columns: repeat(14, minmax(4.2rem, 1fr)); gap: .4rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.rb-date-strip button { min-height: 4.25rem; padding: .55rem .3rem; border: 1px solid var(--line); display: grid; place-items: center; gap: .05rem; background: var(--paper); color: var(--navy); cursor: pointer; }
.rb-date-strip button small,
.rb-date-strip button span { color: var(--muted); font-size: .56rem; }
.rb-date-strip button strong { font-size: 1rem; font-weight: 500; }
.rb-date-strip button.active { border-color: var(--orange); background: var(--orange); color: #fff; }
.rb-date-strip button.active :where(small,span) { color: rgba(255,255,255,.78); }

.rb-legend { min-height: 3rem; padding-inline: .25rem; display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; font-size: .64rem; }
.rb-legend strong { margin-inline-end: auto; font-weight: 500; }
.rb-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.rb-legend i { width: .55rem; height: .55rem; border-radius: 50%; }
.rb-legend i.free { background: #fff; border: 1px solid var(--success); }
.rb-legend i.booked { background: #aab0b8; }
.rb-legend i.maintenance { background: #e0c3b7; }
.rb-legend i.selected { background: var(--orange); }

.rb-loading { min-height: 25rem; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 1rem; background: #fff; color: var(--muted); font-size: .75rem; }
.rb-loading--error { flex-direction: column; color: var(--danger); }
.rb-loading button { border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--navy); cursor: pointer; }
.rb-pulse { width: .55rem; height: .55rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 .35rem rgba(45,157,104,.13); animation: royalPulse 1.5s infinite; }
@keyframes royalPulse { 50% { box-shadow: 0 0 0 .65rem rgba(45,157,104,0); } }

.rb-schedule-layout { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; gap: var(--space-4); }
.rb-matrix-scroll { min-width: 0; overflow-x: auto; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.rb-matrix { width: 100%; min-width: 49rem; border-collapse: collapse; table-layout: fixed; }
.rb-matrix th,
.rb-matrix td { height: 3.5rem; border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .35rem; text-align: center !important; vertical-align: middle; }
.rb-matrix tr:last-child > * { border-bottom: 0; }
.rb-matrix tr > *:last-child { border-inline-end: 0; }
.rb-matrix thead th { height: 5.2rem; background: var(--navy); color: #fff; }
.rb-matrix thead th:first-child { width: 5.4rem; color: var(--orange); }
.rb-matrix thead th span { display: block; color: rgba(255,255,255,.58); font-size: .55rem; }
.rb-matrix thead th strong { display: block; font-size: 1.2rem; font-weight: 500; }
.rb-matrix thead th small { display: block; color: var(--orange); font-size: .5rem; }
.rb-matrix tbody > tr > th { color: var(--muted); font-size: .65rem; background: #f5f2ec; }
.rb-matrix td button { width: 100%; height: 100%; min-height: 2.65rem; padding: .2rem; border: 1px solid transparent; display: grid; place-items: center; gap: .12rem; background: #fff; color: var(--muted); cursor: pointer; }
.rb-matrix td button i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--success); }
.rb-matrix td button span { font-size: .5rem; text-align: center !important; }
.rb-matrix td button:hover.free { border-color: var(--success); }
.rb-matrix td button.booked,
.rb-matrix td button.past { background: #eef0f1; color: #959da7; cursor: not-allowed; }
.rb-matrix td button.booked i,
.rb-matrix td button.past i { background: #aab0b8; }
.rb-matrix td button.maintenance { background: #f5eae5; color: #a07361; cursor: not-allowed; }
.rb-matrix td button.maintenance i { background: #c79682; }
.rb-matrix td button.selected { border-color: var(--orange); background: var(--orange); color: #fff; }
.rb-matrix td button.selected i { background: #fff; }

.rb-mobile-courts { display: none; }
.rb-summary,
.rb-order-card { position: sticky; inset-block-start: 1rem; padding: 1.5rem; border: 1px solid var(--line); background: var(--navy); color: #fff; box-shadow: var(--shadow); }
.rb-summary dl,
.rb-order-card dl { margin: 0; display: grid; }
.rb-summary dl > div,
.rb-order-card dl > div { padding-block: .85rem; border-bottom: 1px solid rgba(255,255,255,.13); display: grid; gap: .2rem; }
.rb-summary dt,
.rb-order-card dt { color: rgba(255,255,255,.53); font-size: .62rem; }
.rb-summary dd,
.rb-order-card dd { margin: 0; font-size: .8rem; }
.rb-summary .rp-button { width: 100%; margin-top: 1.25rem; }
.rb-summary-empty { min-height: 15rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .55rem; text-align: center; }
.rb-summary-empty span { color: var(--orange); font-size: 2rem; text-align: center !important; }
.rb-summary-empty strong,
.rb-summary-empty p { text-align: center !important; }
.rb-summary-empty p { max-width: 14rem; margin: 0; color: rgba(255,255,255,.52); font-size: .65rem; }
.rb-error { margin: 1rem 0 0; color: #d85c43; font-size: .68rem; }

.rb-hold { min-height: 4.75rem; margin-bottom: var(--space-4); padding-inline: 1.25rem; display: flex; align-items: center; gap: 1rem; background: var(--navy); color: #fff; }
.rb-hold > span { display: grid; gap: .1rem; }
.rb-hold strong { font-size: .7rem; }
.rb-hold small { color: rgba(255,255,255,.57); font-size: .6rem; }
.rb-hold > bdi { margin-inline-start: auto; color: var(--orange); font-size: 1.35rem; }
.rb-checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-4); align-items: start; }
.rb-checkout-form { padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.rb-back-schedule { margin-bottom: var(--space-5); }
.rb-checkout-form h2 { margin: 0 0 var(--space-5); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 500; }
.rb-checkout-form h3 { margin: var(--space-6) 0 var(--space-3); font-size: .72rem; font-weight: 500; }
.rb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rb-fields label { display: grid; gap: .45rem; font-size: .66rem; }
.rb-fields .wide { grid-column: 1 / -1; }
.rb-fields input { width: 100%; height: 3.4rem; padding-inline: .9rem; border: 1px solid var(--line); background: var(--paper); color: var(--navy); outline: none; }
.rb-fields input:focus { border-color: var(--orange); }
.rb-payment { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.rb-payment > button { min-height: 7rem; padding: 1rem; border: 1px solid var(--line); display: grid; grid-template-columns: 1rem 1fr auto; align-items: center; gap: .7rem; background: var(--paper); color: var(--navy); text-align: start; cursor: pointer; }
.rb-payment > button.selected { border-color: var(--orange); background: #fff6f1; }
.rb-payment > button > i { width: .85rem; height: .85rem; border: 1px solid var(--muted); border-radius: 50%; }
.rb-payment > button.selected > i { border: .25rem solid var(--orange); }
.rb-payment > button > span { display: grid; gap: .25rem; }
.rb-payment strong { font-size: .72rem; }
.rb-payment small { color: var(--muted); font-size: .58rem; }
.rb-payment bdi { font-size: .72rem; }
.rb-member-signin { margin-top: 1rem; padding-bottom: .3rem; border-bottom: 1px solid currentColor; display: inline-flex; align-items: center; gap: .5rem; color: var(--orange); font-size: .68rem; }
.rb-confirm-button { width: 100%; margin-top: var(--space-5); }
.rb-link { padding: 0 0 .25rem; border: 0; border-bottom: 1px solid currentColor; background: none; color: inherit; font-size: .68rem; cursor: pointer; }
.rb-order-card { position: sticky; }

.rb-confirmation { max-width: 62rem; margin-inline: auto; padding: clamp(4rem, 9vw, 8rem) clamp(1.5rem, 5vw, 5rem); text-align: center; }
.rb-confirmation > * { margin-inline: auto; text-align: center !important; }
.rb-check { width: 5rem; height: 5rem; margin-bottom: var(--space-4); border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #fff; font-size: 2rem; }
.rb-confirmation > p:not(.rb-kicker) { max-width: 42rem; margin-top: var(--space-4); color: var(--muted); font-size: .85rem; line-height: 2; }
.rb-ticket { width: 100%; margin-block: var(--space-6) var(--space-5); border: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; box-shadow: var(--shadow); text-align: start !important; }
.rb-ticket > div { min-height: 8rem; padding: 1.25rem; border-inline-end: 1px dashed var(--line); display: flex; flex-direction: column; justify-content: space-between; }
.rb-ticket > div:last-child { border-inline-end: 0; }
.rb-ticket span { color: var(--muted); font-size: .58rem; }
.rb-ticket strong { font-size: .78rem; }
.rb-confirm-actions { display: flex; justify-content: center; align-items: center; gap: 1.5rem; }
.rb-gateway { max-width: 40rem; margin-top: var(--space-5); padding: 1.5rem; border: 1px solid var(--orange); background: #fff5ef; text-align: start !important; }
.rb-gateway > * { text-align: start !important; }
.rb-gateway strong { color: var(--orange); font-size: .78rem; }
.rb-gateway p { margin: .6rem 0 1rem; color: var(--muted); font-size: .7rem; }
.rb-gateway button { border: 0; border-bottom: 1px solid currentColor; background: none; font-size: .65rem; cursor: pointer; }

/* Member account */
.ra-page { min-height: 100vh; background: var(--cream); }
.ra-header { display: flex; justify-content: space-between; }
.ra-content { max-width: 80rem; margin-inline: auto; padding: clamp(3.5rem, 8vw, 7rem) clamp(1.5rem, 5vw, 5rem); }
.ra-content h1 em { color: var(--orange); font-style: normal; }
.ra-email { margin: var(--space-3) 0 0; color: var(--muted); font-size: .72rem; }
.ra-grid { margin-block: var(--space-6) var(--space-5); display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); }
.ra-grid article { min-height: 16rem; padding: 1.75rem; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; background: #fff; }
.ra-grid article + article { border-inline-start: 0; }
.ra-grid article small { color: var(--muted); font-size: .65rem; }
.ra-grid article strong { margin-top: 1rem; font-size: clamp(1.7rem, 3vw, 2.7rem); font-weight: 500; }
.ra-grid article > span { margin-top: .25rem; color: var(--orange); font-size: .68rem; }
.ra-member-card { position: relative; overflow: hidden; background: var(--navy) !important; color: #fff; }
.ra-member-card img { position: absolute; inset-block-start: -2rem; inset-inline-end: -1.75rem; width: 12rem; height: 12rem; object-fit: cover; opacity: .2; }
.ra-history { margin-top: var(--space-7); }
.ra-history > header { margin-bottom: var(--space-4); display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); }
.ra-history h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 3.25rem); font-weight: 500; }
.ra-history header span { color: var(--muted); font-size: .7rem; }
.ra-booking-list { border: 1px solid var(--line); background: #fff; }
.ra-booking-list > article { min-height: 7.5rem; padding: 1.25rem; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: center; }
.ra-booking-list > article:last-child { border-bottom: 0; }
.ra-booking-list article > div { display: grid; gap: .25rem; }
.ra-booking-list small { color: var(--muted); font-size: .6rem; }
.ra-booking-list strong { font-size: .77rem; }
.ra-booking-list span { color: var(--muted); font-size: .6rem; }
.ra-status { width: fit-content; padding: .25rem .55rem; border-radius: 999px; background: #eee; }
.ra-status.confirmed { background: rgba(45,157,104,.12); color: var(--success); }
.ra-no-bookings { min-height: 9rem; padding: 1.5rem; border: 1px solid var(--line); display: grid; place-items: center; background: #fff; color: var(--muted); font-size: .72rem; text-align: center !important; }
.ra-empty { margin-block: var(--space-6) var(--space-5); padding: 2.5rem; border: 1px solid var(--line); display: grid; grid-template-columns: 10rem 1fr; align-items: center; gap: var(--space-5); background: #fff; }
.ra-empty > span { height: 9rem; display: grid; place-items: center; background: var(--navy); color: var(--orange); font-size: 4rem; text-align: center !important; }
.ra-empty h2 { margin: 0; font-size: 2rem; font-weight: 500; }
.ra-empty p { max-width: 44rem; margin: .75rem 0 1rem; color: var(--muted); font-size: .76rem; }
.ra-empty a { display: inline-flex; align-items: center; gap: .5rem; color: var(--orange); font-size: .7rem; }


/* Booking identity verification */
.rb-identity-step { margin-bottom: var(--space-5); padding: 1.5rem; border: 1px solid var(--line); background: var(--paper); }
.rb-identity-step h3 { margin: .35rem 0 1rem; font-size: 1rem; }
.rb-step-number { color: var(--orange); font-size: .7rem; }
.rb-mobile-input,
.rb-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.rb-mobile-input input,
.rb-code-row input { min-width: 0; height: 3.5rem; padding-inline: 1rem; border: 1px solid var(--line); background: #fff; outline: 0; }
.rb-mobile-input input:focus,
.rb-code-row input:focus { border-color: var(--orange); }
.rb-mobile-input button,
.rb-code-row button { min-width: 8rem; border: 0; background: var(--navy); color: #fff; cursor: pointer; }
.rb-mobile-input button:disabled,
.rb-code-row button:disabled { opacity: .55; cursor: wait; }
.rb-code-sent { margin-block: .85rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--success); font-size: .68rem; }
.rb-code-sent button,
.rb-resend { padding: 0 0 .2rem; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--orange); font-size: .64rem; cursor: pointer; }
.rb-code-input { text-align: center !important; letter-spacing: .5rem; font-size: 1.1rem; }
.rb-resend { margin-top: .8rem; }
.rb-resend:disabled { color: var(--muted); cursor: default; }
.rb-config-note { margin-top: 1rem; display: block; color: var(--muted); font-size: .58rem; }
.rb-verified-mobile { min-height: 4rem; margin-top: .5rem; padding-inline: 1rem; border: 1px solid rgba(45,157,104,.25); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; background: rgba(45,157,104,.08); }
.rb-verified-mobile > span { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--success); color: #fff; text-align: center !important; }
.rb-verified-mobile small { color: var(--success); }
.rb-payment--three { grid-template-columns: 1fr; }
.rb-zero { color: var(--success); font-size: 1rem; }
.rb-entry-code { background: #fff5ef; }
.rb-entry-code strong { color: var(--orange); font-size: 1.35rem; letter-spacing: .15em; }

/* Account top-up */
.ra-topup { margin-top: var(--space-5); padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line); display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(22rem, 1.4fr) auto; align-items: center; gap: 1.5rem; background: #fff; }
.ra-topup h2 { margin: .25rem 0; font-size: 1.35rem; font-weight: 500; }
.ra-topup > div:first-child > span { color: var(--muted); font-size: .66rem; }
.ra-topup-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.ra-topup-options button { min-height: 4.25rem; padding: .5rem; border: 1px solid var(--line); display: grid; place-items: center; background: var(--paper); color: var(--navy); cursor: pointer; }
.ra-topup-options button.selected { border-color: var(--orange); background: #fff5ef; color: var(--orange); }
.ra-topup-options small { color: var(--muted); font-size: .52rem; }
.ra-topup-notice { grid-column: 1 / -1; margin: 0; padding: .8rem 1rem; background: #fff5ef; color: var(--orange); font-size: .66rem; }

/* Contact */
.rpc-page,
.rpd-page { min-height: 100vh; background: var(--cream); }
.rpc-hero,
.rpc-contact-grid,
.rpc-help,
.rpc-cta,
.rpd-content { max-width: 90rem; margin-inline: auto; padding-inline: clamp(1.5rem, 5vw, 5rem); }
.rpc-hero { padding-block: clamp(4rem, 9vw, 8rem) var(--space-6); }
.rpc-hero h1 { max-width: 60rem; margin: .5rem 0 0; font-size: clamp(3.1rem, 8vw, 7.5rem); line-height: .95; font-weight: 500; letter-spacing: -.06em; }
.royal-locale[dir="rtl"] .rpc-hero h1 { line-height: 1.3; letter-spacing: 0; }
.rpc-hero > p:last-child { max-width: 48rem; margin: var(--space-5) 0 0; color: var(--muted); font-size: .88rem; line-height: 2; }
.rpc-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.rpc-contact-card { min-height: 25rem; padding: 1.75rem; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; background: #fff; }
.rpc-contact-card + .rpc-contact-card { border-inline-start: 0; }
.rpc-contact-card--dark { background: var(--navy); color: #fff; }
.rpc-contact-card > span { color: var(--orange); font-size: .68rem; }
.rpc-contact-card h2 { margin: 0 0 .75rem; font-size: 1.7rem; font-weight: 500; }
.rpc-contact-card p { margin: 0 0 1rem; color: var(--muted); font-size: .74rem; line-height: 2; }
.rpc-contact-card--dark p { color: rgba(255,255,255,.62); }
.rpc-contact-card a { width: fit-content; padding-bottom: .25rem; border-bottom: 1px solid currentColor; color: var(--orange); font-size: .7rem; }
.rpc-contact-card strong { color: var(--orange); font-size: .72rem; }
.rpc-help { padding-block: var(--space-8); }
.rpc-help > header { max-width: 54rem; margin-bottom: var(--space-5); }
.rpc-help h2 { margin: .5rem 0 0; font-size: clamp(2.3rem, 5vw, 4.5rem); font-weight: 500; }
.rpc-help > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.rpc-help article { min-height: 13rem; padding: 1.5rem; border-top: 2px solid var(--orange); background: #fff; }
.rpc-help h3 { margin: 0 0 auto; font-size: 1.1rem; font-weight: 500; }
.rpc-help p { margin: 3rem 0 0; color: var(--muted); font-size: .7rem; line-height: 2; }
.rpc-cta > div:last-child { display: flex; align-items: center; gap: 1.25rem; }

/* Admin */
.rpd-content { padding-block: clamp(3.5rem, 7vw, 6rem); }
.rpd-title { display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.rpd-title h1 { margin: .25rem 0; font-size: clamp(2.7rem, 6vw, 5.5rem); font-weight: 500; }
.rpd-title span { color: var(--muted); font-size: .75rem; }
.rpd-title > small { padding: .45rem .8rem; border-radius: 999px; background: var(--navy); color: #fff; }
.rpd-stats { margin-block: var(--space-5) var(--space-7); display: grid; grid-template-columns: repeat(3, 1fr); }
.rpd-stats article { min-height: 11rem; padding: 1.4rem; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; background: #fff; }
.rpd-stats article + article { border-inline-start: 0; }
.rpd-stats small { color: var(--muted); }
.rpd-stats strong { margin-top: .75rem; color: var(--orange); font-size: 2.5rem; font-weight: 500; }
.rpd-stats span { color: var(--muted); font-size: .6rem; }
.rpd-list > header { margin-bottom: 1rem; display: flex; align-items: end; justify-content: space-between; }
.rpd-list h2 { margin: 0; font-size: 2.3rem; font-weight: 500; }
.rpd-list > header > span { color: var(--muted); font-size: .68rem; }
.rpd-table-scroll { overflow-x: auto; border: 1px solid var(--line); background: #fff; }
.rpd-table-scroll table { width: 100%; min-width: 67rem; border-collapse: collapse; }
.rpd-table-scroll th { padding: .85rem 1rem; background: var(--navy); color: #fff; font-size: .6rem; text-align: start; }
.rpd-table-scroll td { padding: 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rpd-table-scroll tr:last-child td { border-bottom: 0; }
.rpd-table-scroll td > strong,
.rpd-table-scroll td > small { display: block; }
.rpd-table-scroll td > strong { font-size: .72rem; }
.rpd-table-scroll td > small { margin-top: .2rem; color: var(--muted); font-size: .58rem; }
.rpd-code { color: var(--orange); font-size: 1rem !important; letter-spacing: .12em; }
.rpd-access { max-width: 48rem; margin-inline: auto; padding: 9rem 1.5rem; text-align: center; }
.rpd-access > * { margin-inline: auto; text-align: center !important; }
.rpd-access > span { width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #fff; font-size: 2rem; }
.rpd-access h1 { margin-block: 1.5rem .75rem; font-size: 2.6rem; font-weight: 500; }
.rpd-access p { color: var(--muted); line-height: 2; }
.rpd-access strong { color: var(--orange); }

/* Persian typographic hierarchy: real Peyda weights without synthetic spacing. */
.royal-locale[dir="rtl"] :where(h1, h2):not(.latin-content) {
  font-weight: 800;
  letter-spacing: 0;
  text-wrap: balance;
}

.royal-locale[dir="rtl"] :where(h3, h4):not(.latin-content) {
  font-weight: 700;
  letter-spacing: 0;
}

.royal-locale[dir="rtl"] :where(.rp-button, .rp-text-link, .rp-account-link, .ra-header nav a, .rb-sport-tabs button, label) {
  font-weight: 600;
}

.royal-locale[dir="rtl"] :where(.rpa-facts strong.numeric-content, .rpd-stats strong.numeric-content) {
  font-weight: 100;
  letter-spacing: 0;
}

.royal-locale[dir="rtl"] :where(p, li, dd) {
  text-wrap: pretty;
}

/* Motion system */
@keyframes rp-fade-down {
  from { opacity: 0; transform: translateY(-1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rp-rise {
  from { opacity: 0; transform: translateY(1.75rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rp-hero-drift {
  from { background-position: 52% center; }
  to { background-position: 48% center; }
}

@keyframes rp-view-rise {
  from { opacity: 0; transform: translateY(2.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rp-view-from-right {
  from { opacity: 0; transform: translateX(2.75rem) scale(.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes rp-status-pulse {
  0%, 100% { box-shadow: 0 0 0 .3rem rgba(86,213,138,.15); }
  50% { box-shadow: 0 0 0 .65rem rgba(86,213,138,0); }
}

.rp-hero { animation: rp-hero-drift 14s ease-out both; }
.rp-header { animation: rp-fade-down .75s cubic-bezier(.22,1,.36,1) both; }
.rp-hero-copy h1,
.rp-hero-copy > p,
.rp-hero-actions,
.rp-hero-status { animation: rp-rise .85s cubic-bezier(.22,1,.36,1) both; }
.rp-hero-copy h1 { animation-delay: .12s; }
.rp-hero-copy > p { animation-delay: .26s; }
.rp-hero-actions { animation-delay: .4s; }
.rp-hero-status { animation-delay: .56s; }
.status-dot { animation: rp-status-pulse 2.4s ease-in-out infinite; }

.rp-header nav a { position: relative; transition: color 180ms ease; }
.rp-header nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: .15rem;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms cubic-bezier(.22,1,.36,1);
}
.rp-header nav a:hover::after,
.rp-header nav a:focus-visible::after { transform: scaleX(1); }

.directional-icon { transition: transform 220ms cubic-bezier(.22,1,.36,1); }
.rp-button:hover .directional-icon,
.rp-text-link:hover .directional-icon { transform: translate(3px, -3px); }
.royal-locale[dir="rtl"] .rp-button:hover .directional-icon,
.royal-locale[dir="rtl"] .rp-text-link:hover .directional-icon { transform: scaleX(-1) translate(-3px, -3px); }

.rp-about-teaser__image,
.rpa-feature-grid article,
.rpc-contact-card,
.rpc-help article {
  transition: translate 500ms cubic-bezier(.22,1,.36,1), box-shadow 600ms ease, border-color 300ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .rp-about-teaser__image:hover { translate: 0 -.5rem; box-shadow: var(--shadow); }
  .rpa-feature-grid article:hover,
  .rpc-contact-card:hover,
  .rpc-help article:hover { translate: 0 -.4rem; box-shadow: var(--shadow); border-color: rgba(242,103,34,.38); }
}

@supports (animation-timeline: view()) {
  .rp-about-teaser__image {
    animation: rp-view-from-right linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 38%;
  }

  .rp-about-teaser__copy,
  .rpa-story,
  .rpa-feature-grid article,
  .rpc-contact-card,
  .rpc-help article {
    animation: rp-view-rise linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 34%;
  }
}
/* Tablet */
@media (max-width: 68rem) {
  :root { --space-8: 5.25rem; }
  .rp-header { grid-template-columns: 1fr auto; }
  .rp-header nav { display: none; }
  .rp-header-actions { grid-column: 2; }
  .rp-account-link { display: none; }
  .rp-about-teaser { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .rp-about-teaser__image { min-height: 30rem; }
  .rpa-hero { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .rpa-hero__image { min-height: 30rem; }
  .rpa-story { grid-template-columns: .45fr 1.25fr; }
  .rpa-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rpa-story img { display: none; }
  .rb-filters { grid-template-columns: 17rem minmax(0, 1fr); }
  .rb-schedule-layout { grid-template-columns: minmax(0, 1fr) 17rem; }
  .rb-checkout-layout { grid-template-columns: minmax(0, 1fr) 18rem; }
  .rb-payment { grid-template-columns: 1fr; }
  .ra-booking-list > article { grid-template-columns: 1fr 1fr; }
  .ra-topup { grid-template-columns: 1fr; }
  .ra-topup-options { grid-template-columns: repeat(4, 1fr); }
}

/* Mobile */
@media (max-width: 47rem) {
  :root { --space-6: 2.25rem; --space-7: 3.25rem; --space-8: 4rem; }
  .rp-button { min-height: 3rem; }
  .rp-hero { min-height: 47rem; margin: 0; }
  .rp-header {
    min-height: 4.5rem;
    margin: .75rem;
    padding: .65rem .75rem .75rem;
    gap: .55rem .65rem;
  }
  .rp-header > .rp-brand,
  .rp-header-actions { grid-row: 1; }
  .rp-header nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: clamp(.7rem, 4vw, 1.35rem);
    padding-block-start: .5rem;
    border-block-start: 1px solid rgba(255,255,255,.18);
  }
  .rp-header nav a { font-size: clamp(.59rem, 2.65vw, .7rem); }
  .rp-brand img,
  .rb-logo img { width: 2.6rem; height: 2.6rem; }
  .rp-brand > span,
  .rb-logo > span { display: none; }
  .rp-header-actions { gap: .5rem; }
  .rp-header-actions .rp-button { min-height: 2.6rem; padding-inline: .8rem; font-size: .6rem; }
  .rp-language { width: 2.55rem; height: 2.55rem; }
  .rp-hero-copy { width: auto; margin: 1.5rem 1.25rem 8.5rem; justify-self: stretch; }
  .rp-hero-copy h1,
  .royal-locale[dir="rtl"] .rp-hero-copy h1 { font-size: clamp(2.45rem, 12vw, 3.7rem); }
  .rp-hero-copy > p { font-size: .76rem; }
  .rp-hero-actions { margin-top: 1.25rem; }
  .rp-hero-status { inset-inline: 1.25rem; inset-block-end: 1.5rem; padding-inline: 0; align-items: center; overflow-x: auto; white-space: nowrap; }
  .rp-about-teaser { grid-template-columns: 1fr; padding-block: 4rem; }
  .rp-about-teaser__image { min-height: 23rem; }
  .rp-facility-grid { grid-template-columns: 1fr; }
  .rp-facility,
  .rp-facility--wellness { min-height: 26rem; grid-column: auto; }
  .rp-footer { grid-template-columns: 1fr; align-items: start; padding-block: 2.5rem; }
  .rp-footer > div:last-child { justify-self: start; }

  .rb-top,
  .rpa-header,
  .ra-header { min-height: 4.75rem; padding-inline: 1rem; grid-template-columns: 1fr auto; gap: .75rem; }
  .rb-top nav,
  .rpa-header nav { display: none; }
  .rpa-header > div { grid-column: 2; }
  .rpa-header > div .rp-button { display: none; }
  .ra-header nav { gap: .8rem; }
  .ra-header nav a:first-child { display: none; }

  .rpa-hero { grid-template-columns: 1fr; padding-block: 3.5rem; }
  .rpa-hero h1 { font-size: clamp(1rem, 4.7vw, 1.4rem); line-height: 1.15; }
  .rpa-hero__image { min-height: 25rem; }
  .rpa-facts { grid-template-columns: 1fr; }
  .rpa-facts article + article { border-inline-start: 1px solid var(--line); border-top: 0; }
  .rpa-story { grid-template-columns: 1fr; }
  .rpa-feature-grid { grid-template-columns: 1fr; }
  .rpa-feature-grid article { min-height: 15rem; }
  .rpa-cta { flex-direction: column; align-items: flex-start; }

  .rb-page { padding-bottom: 4rem; }
  .rb-intro { padding-block: 3.5rem 2.25rem; }
  .rb-intro h1,
  .rb-confirmation h1,
  .ra-content h1,
  .royal-locale[dir="rtl"] :where(.rb-intro h1, .rb-confirmation h1, .ra-content h1) { font-size: clamp(2.5rem, 12vw, 4rem); }
  .rb-filters { padding: 1rem; grid-template-columns: 1fr; gap: 1.5rem; }
  .rb-date-strip { grid-template-columns: repeat(14, 4.2rem); }
  .rb-legend { gap: .75rem; }
  .rb-legend strong { width: 100%; margin: 0; }
  .rb-schedule-layout { display: block; }
  .rb-matrix-scroll { display: none; }
  .rb-mobile-courts { display: grid; gap: .75rem; }
  .rb-mobile-courts article { border: 1px solid var(--line); background: #fff; }
  .rb-mobile-courts article > header { min-height: 4.5rem; padding-inline: 1rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
  .rb-mobile-courts article > header > div { display: flex; align-items: baseline; gap: .45rem; }
  .rb-mobile-courts article > header span { color: var(--muted); font-size: .6rem; }
  .rb-mobile-courts article > header strong { color: var(--orange); font-size: 1.4rem; }
  .rb-mobile-courts article > header small { color: var(--success); font-size: .6rem; }
  .rb-mobile-courts article > div { padding: .75rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .rb-mobile-courts article > div > button { min-height: 3.75rem; border: 1px solid var(--line); display: grid; place-items: center; gap: .1rem; background: var(--paper); color: var(--navy); cursor: pointer; }
  .rb-mobile-courts article > div > button small { color: var(--muted); font-size: .5rem; text-align: center !important; }
  .rb-mobile-courts article > div > button.booked,
  .rb-mobile-courts article > div > button.past { opacity: .45; cursor: not-allowed; }
  .rb-mobile-courts article > div > button.maintenance { background: #f5eae5; opacity: .65; cursor: not-allowed; }
  .rb-mobile-courts article > div > button.selected { border-color: var(--orange); background: var(--orange); color: #fff; }
  .rb-mobile-courts article > div > button.selected small { color: #fff; }
  .rb-summary { position: static; margin-top: 1rem; }
  .rb-summary-empty { min-height: 9rem; }
  .rb-checkout-layout { grid-template-columns: 1fr; }
  .rb-order-card { position: static; grid-row: 1; }
  .rb-fields { grid-template-columns: 1fr; }
  .rb-fields .wide { grid-column: auto; }
  .rb-payment { grid-template-columns: 1fr; }
  .rb-ticket { grid-template-columns: 1fr 1fr; }
  .rb-ticket > div:nth-child(2) { border-inline-end: 0; }
  .rb-ticket > div:nth-child(-n+2) { border-bottom: 1px dashed var(--line); }
  .rb-confirm-actions { flex-direction: column; }

  .ra-content { padding-block: 4rem; }
  .ra-grid { grid-template-columns: 1fr; }
  .ra-grid article + article { border-inline-start: 1px solid var(--line); border-top: 0; }
  .ra-history > header { align-items: flex-start; flex-direction: column; }
  .ra-booking-list > article { grid-template-columns: 1fr 1fr; }
  .ra-empty { padding: 1.25rem; grid-template-columns: 1fr; }
  .ra-empty > span { width: 9rem; }
  .rb-mobile-input, .rb-code-row { grid-template-columns: 1fr; }
  .rb-mobile-input button, .rb-code-row button { min-height: 3rem; }
  .ra-topup-options { grid-template-columns: 1fr 1fr; }
  .rpc-contact-grid, .rpc-help > div, .rpd-stats { grid-template-columns: 1fr; }
  .rpc-contact-card + .rpc-contact-card, .rpd-stats article + article { border-inline-start: 1px solid var(--line); border-top: 0; }
  .rpc-contact-card { min-height: 18rem; }
  .rpc-cta > div:last-child { align-items: flex-start; flex-direction: column; }
  .rpd-title { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 24rem) {
  .rp-hero-actions { flex-direction: column; align-items: stretch; }
  .rp-hero-actions .rp-button { width: 100%; }
  .rb-mobile-courts article > div { grid-template-columns: repeat(2, 1fr); }
  .rb-ticket,
  .ra-booking-list > article { grid-template-columns: 1fr; }
  .rb-ticket > div { border-inline-end: 0; border-bottom: 1px dashed var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: .01ms !important;
    translate: none !important;
  }
}