/* Suite Inn / Courtyard concept. Loaded only by DefaultConcept.aspx.
   Existing component hooks and server controls remain owned by the original page. */
:root {
    --ink: #8b2333;
    --ink-2: #691c28;
    --ink-3: #9a3443;
    --paper: #f9f8f4;
    --paper-2: #f2ece7;
    --paper-3: #ece3dc;
    --accent-color: #8a682e;
    --accent-soft: #d8be88;
    --text-color: #3f2c2d;
    --text-muted: #746363;
    --line: #ddcfd0;
    --line-soft: #ece2de;
    --gutter: clamp(1.15rem, 4vw, 4.5rem);
    --section-y: clamp(3.75rem, 7vw, 7rem);
    --header-h: 84px;
    --header-stuck: 76px;
    --hero-dwell: 7000ms;
    --hero-fade: 450ms;
    --radius-sm: 3px;
    --radius-md: 5px;
    --shadow-md: 0 16px 40px rgba(70, 20, 30, .06);
}
body.concept { color: var(--text-color); overflow-x: clip; }
.concept .shell { max-inline-size: 1512px; }
.concept .site-header { position: sticky; inset-block-start: 0; background: var(--paper); border-block-end: 1px solid var(--line-soft); }
.concept .site-header.is-stuck { background: var(--paper); box-shadow: none; backdrop-filter: none; }
.concept .site-header__bar { gap: clamp(1rem, 2vw, 2rem); }
.concept .brand__mark { color: var(--ink); font-size: 1.75rem; letter-spacing: .11em; }
.concept .brand__sub { color: var(--accent-color); font-size: .64rem; }
.concept .nav__link, .concept .lang { color: var(--ink); }
.concept .nav__list { gap: clamp(.7rem, 1.1vw, 1.25rem); }
.concept .nav__link { font-size: .87rem; }
html[lang="en"] .concept .nav__link { font-size: .67rem; letter-spacing: .06em; }
.concept .nav + .header-actions { margin-inline-start: 0; gap: 1rem; }
.concept .burger span { background: var(--ink); }
.concept .header-cta { background: var(--ink); color: #fff; border-color: var(--ink); padding-inline: 1.4rem; }
.concept .btn { border-radius: var(--radius-sm); min-block-size: 46px; transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out; }
.concept .btn--accent, .concept .btn--solid { color: #fff; background: var(--ink); border-color: var(--ink); }
.concept .btn--accent:hover, .concept .btn--solid:hover { color: #fff; background: #ad3038; border-color: #ad3038; }
.concept :is(a, button, input, select):focus-visible { outline: 2px solid var(--accent-color); outline-offset: 4px; }
.concept .h2 { font-size: clamp(2rem, 3.25vw, 3.4rem); line-height: 1.3; }
html[lang="ar"] .concept :is(.h2, .room-card__title, .fac__title, .exp-tile__title) { font-weight: 500; }
.concept .lead { font-size: 1rem; line-height: 1.9; }
.concept .eyebrow { color: var(--accent-color); }
.concept .section-index { color: var(--accent-color); }
.concept .section-head { margin-block-end: 2.25rem; }
.concept .section-head--split { align-items: end; }
.concept .section-head--split .lead { max-inline-size: 43ch; }

/* A quiet text panel beside an uninterrupted photograph of the real hotel. */
/* Booking is in normal flow: no field sits under the hero or its controls. */
.concept .booking { margin-block: 0; padding-block: 0 1.25rem; z-index: 4; }
.concept .booking__card { border: 1px solid var(--line); border-block-start: 2px solid var(--accent-color); background: #fff; backdrop-filter: none; padding: 1rem 1.4rem .9rem; box-shadow: none; }
.concept .booking__heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-block-end: .8rem; }
.concept .booking__heading h2 { font-family: inherit; font-size: 1rem; font-weight: 500; }
.concept .booking__heading span { color: var(--text-muted); font-size: .76rem; }
.concept .booking__grid { background: var(--line-soft); gap: 1px; }
.concept .booking__field { background: #fff; padding: .55rem .8rem; min-inline-size: 0; }
.concept .booking__field:focus-within { background: var(--paper); }
.concept .booking__label { color: #695459; }
.concept .booking__control { font-size: .94rem; min-inline-size: 0; }
.concept .booking__submit { background: #fff; padding-inline-start: .8rem; }
.concept .booking__submit .btn { min-inline-size: 145px; min-block-size: 60px; }
.concept .booking__guarantee { margin-block-start: .75rem; padding: 0; background: transparent; border: 0; }
.concept .booking__guarantee svg { inline-size: 19px; block-size: 19px; }
.concept .booking__guarantee strong { display: inline; margin-inline-end: .6rem; font-size: .75rem; }
.concept .booking__guarantee span { display: inline; font-size: .72rem; color: var(--text-muted); }
.concept .booking__note { font-size: .72rem; margin-block-start: .5rem; }

/* Architectural photos, compact proof and a browsable room collection. */
.concept #about { padding-block: var(--section-y); }
.concept .welcome__grid { gap: clamp(2rem, 7vw, 7rem); }
.concept .welcome__copy .lead { max-inline-size: 50ch; }
.concept .welcome__media .fig-a { border-start-start-radius: 95px; }
.concept .welcome__media .fig-b { border-end-end-radius: 45px; }
.concept .welcome__stats { gap: 1rem; grid-template-columns: repeat(4,minmax(0,1fr)); }
.concept .stat__value { font-size: 1.8rem; font-family: var(--font-en); direction: ltr; text-align: start; }
.concept .stat__label { font-size: .73rem; line-height: 1.6; }
.concept .ornament { opacity: .5; }
.concept #rooms { background: var(--paper-2); }
.concept #rooms .rail { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: visible; margin: 0; padding: 0; gap: 1.5rem; }
.concept #rooms .rail-nav, .concept #rooms .rail-progress { display: none; }
.concept .room-card { background: var(--paper); border: 1px solid #e7dcda; border-radius: 4px; overflow: hidden; }
.concept .room-card__media { aspect-ratio: 1.5; }
.concept .room-card__body { padding: 1.35rem; gap: .8rem; }
.concept .room-card__title { font-size: 1.5rem; }
.concept .room-card__meta { gap: .4rem .75rem; font-size: .76rem; }
.concept .room-card__amenities li { border: 0; padding: 0; background: transparent; color: var(--text-muted); }
.concept .room-card__amenities li + li::before { content: "·"; margin-inline-end: .4rem; }
.concept .room-card__foot { gap: .9rem; margin-block-start: auto; }
.concept .room-card__actions { flex-wrap: wrap; }
.concept .room-card__actions .btn { padding-inline: .9rem; font-size: .78rem; min-block-size: 42px; }
.concept .price__value { font-size: 1.3rem; }
.concept .exp-grid { grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 1rem; }
.concept .exp-tile { aspect-ratio: auto; min-block-size: 390px; }
.concept .exp-tile:first-child { border-start-start-radius: 75px; }
.concept .exp-tile__text { opacity: 1; transform: none; }
.concept .fac-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.5rem; }
.concept .fac { padding-block-end: 1.25rem; border-block-end: 1px solid var(--line); }
.concept .fac__media { aspect-ratio: 1.15; border-radius: 3px; }
.concept .fac__title { font-size: 1.35rem; }
.concept .fac__text { font-size: .87rem; }
.concept .offer { border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: var(--paper); }
.concept .offer__body { padding: 1.75rem; }
.concept .gal-grid { gap: .8rem; }
.concept .gal-filter { min-block-size: 44px; }
.concept .section--dark { background: var(--ink); }
.concept .section--dark :is(.h2,.why__title) { color: var(--paper); }
.concept .section--dark :is(.eyebrow,.section-index,.why__icon,.why__n) { color: var(--accent-soft); }
.concept .awards-strip { padding-block: 2.8rem; }
.concept .award { background: none; box-shadow: none; border-radius: 0; border: 0; border-inline-start: 1px solid var(--line); }
.concept .loc__map { border-start-start-radius: 70px; }
.concept .review { border: 1px solid var(--line); background: var(--paper); border-radius: 3px; }
.concept .cta { min-block-size: 480px; }
.concept .site-footer { background: #43141d; }
.concept .site-footer .brand__mark { color: #fff; }
.concept .site-footer .brand__sub { color: var(--accent-soft); }
.concept .site-footer .btn--accent { background: #d8be88; border-color: #d8be88; color: #43141d; }
.concept .newsletter__status { color: #d8be88; font-size: .87rem; flex-basis: 100%; }
.concept .cookie-banner { inset-inline: var(--gutter); max-inline-size: 500px; margin-inline: 0; transform: translateY(130%); border: 1px solid var(--line); box-shadow: var(--shadow-md); padding: 1.2rem; }
.concept .cookie-banner.is-visible { transform: translateY(0); }
.concept .cookie-banner__text { font-size: .79rem; }
.concept .wa-fab { inline-size: 46px; block-size: 46px; }
/* Data still awaiting completion remains visible in this comparison. */
.concept .is-ph { font-family: inherit; font-size: .8rem; overflow-wrap: anywhere; }
/* Readable HTML and photography are available even without script. */
.concept [data-anim], .concept .reveal-img { opacity: 1; transform: none; clip-path: none; }

@media (max-width: 1179px) {
    .concept .header-actions { margin-inline-start: auto; }
    .concept .header-cta { display: inline-flex; }

    .concept .booking__grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .concept .booking__submit { grid-column: 1 / -1; padding: .7rem 0 0; margin: 0; }
    .concept .booking__submit .btn { min-block-size: 48px; }
    .concept #rooms .rail { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .concept .exp-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .concept .exp-tile { min-block-size: 360px; }
    .concept .fac-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    :root { --header-h: 74px; --header-stuck: 68px; }
    .concept .site-header__bar { gap: .6rem; }
    .concept .brand__mark { font-size: 1.35rem; }
    .concept .header-actions { gap: .65rem; }
    .concept .header-cta { padding-inline: .85rem; font-size: .75rem; min-block-size: 40px; }
    .concept .lang { gap: .3rem; font-size: .66rem; }
    .concept .lang [aria-current="true"], .concept .lang__sep { display: none; }
    .concept .burger { inline-size: 36px; padding-inline: 6px; }

    .concept .booking { padding-block-end: 0; }
    .concept .booking__card { padding: .95rem; }
    .concept .booking__heading { align-items: start; flex-direction: column; gap: .2rem; }
    .concept .booking__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .concept .booking__field { padding: .65rem .6rem; }
    .concept .booking__label { font-size: .72rem; }
    .concept .booking__control { font-size: 16px; }
    .concept .booking__guarantee { align-items: start; }
    .concept .booking__guarantee strong, .concept .booking__guarantee span { display: block; }
    .concept .booking__guarantee span { line-height: 1.7; }
    .concept .welcome__media { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .concept .welcome__media .fig-a { aspect-ratio: 1.5; border-start-start-radius: 60px; }
    .concept .welcome__media .fig-b, .concept .welcome__media .fig-c { aspect-ratio: 1.15; }
    .concept .welcome__stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .concept .section-head--split { align-items: start; }
    .concept #rooms .rail { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
    .concept .room-card__body { padding: 1.2rem; }
    .concept .room-card__foot { align-items: center; }
    .concept .exp-grid { grid-template-columns: minmax(0,1fr); }
    .concept .exp-tile { min-block-size: 310px; }
    .concept .exp-tile:first-child { border-start-start-radius: 60px; }
    .concept .fac-grid { gap: 1.2rem; }
    .concept .fac__title { font-size: 1.1rem; }
    .concept .fac__text { font-size: .8rem; }
    .concept .offer__body { padding: 1.15rem; }
    .concept .cookie-banner { inset-inline: 1rem; inset-block-end: 5.75rem; max-inline-size: none; padding: 1rem; }
    .concept .cookie-banner__text { font-size: .75rem; }
    .concept .wa-fab { inset-block-end: 5.6rem; }
    .concept .cta { min-block-size: 430px; }
}
@media (prefers-reduced-motion: reduce) {
    .concept *, .concept *::before, .concept *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

.concept .newsletter__form { flex-wrap: wrap; }
.concept .newsletter__form input { min-inline-size: 0; }
.concept .newsletter__form [disabled] { opacity: .65; cursor: not-allowed; }
@media (max-width: 1179px) {
    .concept .nav + .header-actions { margin-inline-start: auto; }
}

@media (max-width: 359px) {
    .concept .header-cta { display: none; }

    .concept .room-card__actions { inline-size: 100%; }
}.concept .offers-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.concept .cta .eyebrow { color: var(--accent-soft); }
.concept .cta .btn--accent { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.concept .cta .btn--accent:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
@media (max-width: 760px) {
    .concept .offers-grid { grid-template-columns: minmax(0,1fr); }
}

/* Text contrast: use surface-specific colors, never opacity to mute copy. */
:root {
    --text-muted: #62504f;
    --accent-color: #78551f;
    --accent-soft: #ead4ae;
    --text-on-dark: #fff9f3;
    --text-on-dark-muted: #f1ddd8;
    --line-on-dark: rgba(255, 249, 243, .3);
}
.concept .lead { font-weight: 400; }
.concept .section-index,
.concept .lang__sep,
.concept .hero__rating .sep,
.concept .is-ph { opacity: 1; }
.concept .section--dark,
.concept .awards-strip,
.concept .site-footer {
    --text-muted: var(--text-on-dark-muted);
    color: var(--text-on-dark);
}
.concept .section--dark :is(.lead, .fac__text, .why__text, .muted),
.concept .awards-strip :is(.award__text, .trust-strip__ssl) {
    color: var(--text-on-dark-muted);
}
.concept .awards-strip .eyebrow,
.concept .awards-strip .award__year {
    color: var(--accent-soft);
}
.concept .awards-strip__grid { background: transparent; }
.concept .section--dark .link-under { color: var(--text-on-dark); }
.concept .section--dark .link-under:hover,
.concept .section--dark .link-under:focus-visible { color: var(--accent-soft); }
.concept .section--dark .is-ph,
.concept .awards-strip .is-ph,
.concept .site-footer .is-ph {
    color: var(--text-on-dark-muted) !important;
    border-block-end-color: var(--line-on-dark);
}
.concept .awards-strip .trust-strip__ssl svg { stroke: currentColor; }
.concept .site-footer :is(.footer__about, .footer__col a, .footer__col span,
    .footer__bottom, .socials a, .newsletter__text) { color: var(--text-on-dark-muted); }
.concept .site-footer .footer__col a:hover,
.concept .site-footer .footer__col a:focus-visible { color: #fff; }
.concept .newsletter__form [disabled] { opacity: 1; }
.concept .newsletter__form input::placeholder { color: var(--text-on-dark-muted); opacity: 1; }
.concept .newsletter__form button:disabled {
    color: #43141d;
    background: #d9cbb6;
    border-color: #d9cbb6;
}
.concept .booking__control::placeholder { color: #62504f; opacity: 1; }

/* The shared button fill animation painted burgundy behind burgundy CTA text. */
.concept .btn::before { content: none; }
.concept .btn:not(.btn--accent):not(.btn--solid):not(.btn--ghost-light):is(:hover, :focus-visible) {
    color: #fff;
    background: var(--ink);
    border-color: var(--ink);
}
.concept :is(.btn--accent, .btn--solid):not(:disabled):is(:hover, :focus-visible) {
    color: #fff;
    background: #ad3038;
    border-color: #ad3038;
}

.concept .cta .btn--accent:is(:hover, :focus-visible) {
    color: var(--ink);
    background: var(--accent-soft);
    border-color: var(--accent-soft);
}

/* Stable dark backplates protect captions even over the brightest photographs. */
.concept .exp-tile__body { background: rgba(35, 12, 18, .88); }
.concept .exp-tile__title,
.concept .exp-tile__text { color: #fff; }
.concept .exp-tile__text { font-weight: 400; }
.concept .cta::before { background: rgba(30, 10, 16, .78); }
.concept .cta :is(.cta__text, .cta__phone) { color: #fff9f3; }
.concept .cta .btn--ghost-light { color: #fff; border-color: #fff; }
.concept .cta .btn--ghost-light:is(:hover, :focus-visible) {
    color: var(--ink);
    background: #fff;
    border-color: #fff;
}
.concept .fig__cap { color: #fff; background: rgba(35, 12, 18, .88); }

.concept .lightbox__caption { color: #fff9f3; }

/* Full-width homepage photography, with readable text and controls above it. */
.concept .hero { display: block; min-block-size: 0; margin: 0; overflow: hidden; background: #281b1b; }
.concept #heroSlider { position: relative; isolation: isolate; display: grid; inline-size: 100%; min-block-size: calc(100svh - var(--header-h)); }
.concept .hero__slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: 0; }
.concept .hero__slide img, .concept .hero__slide.is-active img { transform: none; animation: none; object-position: center; }
.concept .hero__scrim { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(var(--side, to left), rgba(20,12,15,.83) 0%, rgba(20,12,15,.70) 32%, rgba(20,12,15,.20) 72%, rgba(20,12,15,.12) 100%), linear-gradient(to top, rgba(20,12,15,.70), transparent 35%); }
.concept .hero__inner { grid-area: 1 / 1; align-content: center; min-inline-size: 0; padding-block: clamp(3rem, 7vh, 6rem) 8rem; color: #fff; }
.concept .hero__panel { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-inline-size: 0; }
.concept .hero__panel > * { transform: none; }
.concept .hero__eyebrow { color: #f4deb9; font-size: .8rem; margin-block-end: 1.4rem; }
.concept .hero__title { color: #fff; font-size: clamp(2.8rem, 5vw, 5rem); line-height: 1.16; max-inline-size: 16ch; margin-block-end: 1.35rem; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
html[lang="ar"] .concept .hero__title { font-weight: 500; font-size: clamp(2.5rem, 4.4vw, 4.8rem); max-inline-size: 16ch; line-height: 1.4; }
.concept .hero__text { color: #fff; font-size: clamp(1rem, 1.2vw, 1.18rem); line-height: 1.9; font-weight: 400; max-inline-size: 43ch; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.concept .hero__actions { order: 3; margin-block-start: 1.75rem; gap: .75rem; }
.concept .hero__actions .btn { min-block-size: 48px; padding-inline: 1.5rem; }
.concept .hero__actions .btn--ghost-light { color: #fff; border-color: rgba(255,255,255,.85); background: rgba(20,12,15,.3); }
.concept .hero__actions .btn--ghost-light:is(:hover, :focus-visible) { color: #691c28; background: #fff; border-color: #fff; }
.concept .hero__rating { order: 4; margin-block-start: 1.5rem; padding: 0; border: 0; background: none; backdrop-filter: none; color: #fff; flex-wrap: wrap; gap: .5rem; }
.concept .hero__rating strong, .concept .hero__rating .src { color: #fff; }
.concept .hero__rating .stars { color: #f4deb9; }
.concept .hero__ui { position: absolute; inset-inline: 0; inset-block-end: 2rem; max-inline-size: 1512px; margin-inline: auto; padding-inline: var(--gutter); gap: 1rem; }
.concept .hero__arrows { display: flex; gap: .5rem; }
.concept .hero-btn { inline-size: 44px; block-size: 44px; border-radius: 50%; color: #fff; background: rgba(35,15,20,.75); border-color: rgba(255,255,255,.85); }
.concept .hero-btn:is(:hover, :focus-visible) { color: #691c28; background: #fff; border-color: #fff; }
.concept .hero__dots { gap: .5rem; }
.concept .hero-dot { max-inline-size: 44px; min-block-size: 44px; }
.concept .hero__count { display: block; color: #fff; background: rgba(35,15,20,.75); padding: .35rem .6rem; border-radius: 3px; font-size: .8rem; }
.concept .hero__scroll { display: none; }
@media (min-width: 761px) and (max-width: 1600px) {
    /* Keep the first arrow clear of the fixed WhatsApp button in both languages. */
    .concept .hero__ui { padding-inline-start: calc(var(--gutter) + 3.5rem); }
}
@media (max-width: 760px) {
    .concept .hero__scrim { background: linear-gradient(to top, rgba(20,12,15,.88) 0%, rgba(20,12,15,.70) 60%, rgba(20,12,15,.25) 100%); }
    .concept .hero__inner { padding-block: 3rem 11rem; }
    .concept .hero__eyebrow { font-size: .73rem; margin-block-end: 1rem; }
    .concept .hero__title { font-size: clamp(2.4rem, 8vw, 3.8rem); max-inline-size: 18ch; }
    html[lang="ar"] .concept .hero__title { font-size: clamp(2.1rem, 7vw, 3.2rem); max-inline-size: 18ch; }
    .concept .hero__text { font-size: 1rem; max-inline-size: 38ch; }
    .concept .hero__actions { margin-block-start: 1.25rem; gap: .65rem; }
    .concept .hero__actions .btn { padding-inline: 1.1rem; font-size: .85rem; }
    .concept .hero__ui { inset-block-end: 6.5rem; gap: .55rem; padding-inline-start: calc(var(--gutter) + 3.5rem); }
    .concept .hero__arrows { display: none; }
    .concept .hero__dots { gap: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
    .concept .hero__slide, .concept .hero__panel { transition: opacity 200ms ease, visibility 200ms step-end !important; }
    .concept .hero__slide.is-active, .concept .hero__panel.is-active { transition: opacity 200ms ease, visibility 0s !important; }
}