@font-face {
    font-family: "Cairo";
    src: url("../../../../assets/cairo-400.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Cairo";
    src: url("../../../../assets/cairo-600.ttf") format("truetype");
    font-weight: 600;
}

@font-face {
    font-family: "Cairo";
    src: url("../../../../assets/cairo-700.ttf") format("truetype");
    font-weight: 700;
}

@font-face {
    font-family: "Cairo";
    src: url("../../../../assets/cairo-800.ttf") format("truetype");
    font-weight: 800;
}

.sakkaf-hotel-details {
    --hotel-reference-pink: #ae0066;
    --hotel-reference-pink-dark: #970058;
    --hotel-reference-navy: #11174d;
    --hotel-reference-text: #394579;
    --hotel-reference-muted: #8490ac;
    --hotel-reference-border: #eee9ed;
    --hotel-reference-gold: #ffb016;
    background: linear-gradient(115deg, #ffffff, #fdfbf9);
    color: var(--hotel-reference-text);
    font-family: "Cairo", Arial, sans-serif;
    font-size: clamp(14px, 1.04vw, 20px);
    line-height: 1.65;
    padding-bottom: 28px;
}

.sakkaf-hotel-details,
.sakkaf-hotel-details * {
    box-sizing: border-box;
}

.sakkaf-hotel-details a {
    color: inherit;
    text-decoration: none;
}

.hotel-reference-icon-defs {
    height: 0;
    overflow: hidden;
    position: absolute;
    width: 0;
}

.hotel-reference-icon {
    fill: none;
    flex-shrink: 0;
    height: 1.25rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
    vertical-align: middle;
    width: 1.25rem;
}

.hotel-reference-frame {
    margin: 0 auto;
    max-width: 70.125rem;
}

.hotel-reference-container {
    margin-left: 1.75rem;
    margin-right: 1.75rem;
}

.hotel-destination-banner {
    height: 8.3125rem;
    overflow: hidden;
    position: relative;
}

.hotel-destination-banner-inner {
    direction: ltr;
    display: block;
    height: 100%;
    position: relative;
    width: 100%;
}

.hotel-destination-banner-inner > img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.hotel-destination-banner-copy {
    align-items: flex-end;
    background: linear-gradient(90deg, #fffdfd1a 0%, #fff8fccc 48%, #fffdfdf2 100%);
    backdrop-filter: blur(0.3rem);
    -webkit-backdrop-filter: blur(0.3rem);
    border-left: 0.25rem solid var(--hotel-reference-pink);
    color: var(--hotel-reference-navy);
    direction: rtl;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 0.75rem 1.5rem 0.75rem 1rem;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
    bottom: 0;
    width: 38%;
    z-index: 1;
}

.hotel-destination-banner-copy strong {
    color: var(--hotel-reference-pink);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.35;
}

.hotel-destination-banner-copy span {
    color: var(--hotel-reference-navy);
    font-size: 0.9rem;
    line-height: 1.6;
}

.hotel-reference-breadcrumb {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.6875rem;
    gap: 0.625rem;
    height: 2.3125rem;
    margin-left: 1.75rem;
    margin-right: 1.75rem;
}

.hotel-reference-breadcrumb .hotel-reference-icon {
    color: var(--hotel-reference-pink);
    height: 1.125rem;
    width: 1.125rem;
}

.hotel-reference-breadcrumb span {
    font-size: 1.25rem;
    line-height: 1;
}

.hotel-reference-overview-grid {
    direction: rtl;
    display: grid;
    gap: 1.125rem;
    grid-template-columns: 458fr 588fr;
}

.hotel-reference-summary {
    min-width: 0;
    padding-top: 0.1875rem;
}

.hotel-reference-title {
    align-items: center;
    display: flex;
    gap: 0.625rem;
    justify-content: space-between;
}

.hotel-reference-title h1,
.hotel-reference-rooms-heading h1 {
    color: var(--hotel-reference-navy);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.45;
    margin: 0;
}

.hotel-reference-stars,
.hotel-reference-sidebar-stars {
    color: var(--hotel-reference-gold);
    direction: ltr;
    font-size: 1.4375rem;
    line-height: 1;
    white-space: nowrap;
}

.hotel-reference-english {
    color: #202d68;
    direction: ltr;
    font-family: Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.4;
    margin: 0 0.9375rem 0.8125rem 0;
    text-align: right;
}

.hotel-reference-place {
    align-items: center;
    display: flex;
    font-size: 0.8125rem;
    gap: 0.5rem;
    margin: 0 0 0.625rem;
    padding-right: 0.8125rem;
}

.hotel-reference-place .hotel-reference-icon {
    color: var(--hotel-reference-pink);
    height: 1.375rem;
    width: 1.375rem;
}

.hotel-reference-description,
.hotel-reference-description p {
    font-size: 0.875rem;
    line-height: 1.8;
    margin: 0 0 0.9375rem;
    padding-right: 0.625rem;
}

.hotel-reference-features {
    background: #ffffff99;
    border: 0.0625rem solid var(--hotel-reference-border);
    border-radius: 0.375rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: 8.375rem;
    padding: 1rem 0.3125rem 0.875rem;
}

.hotel-reference-features > div {
    border-left: 0.0625rem solid var(--hotel-reference-border);
    padding: 0 0.4375rem;
    text-align: center;
}

.hotel-reference-features > div:last-child {
    border-left: 0;
}

.hotel-reference-features .hotel-reference-icon {
    color: var(--hotel-reference-pink);
    height: 1.875rem;
    margin-bottom: 0.375rem;
    width: 1.875rem;
}

.hotel-reference-features h3 {
    color: var(--hotel-reference-navy);
    font-size: 0.75rem;
    line-height: 1.45;
    margin: 0 0 0.25rem;
}

.hotel-reference-features p {
    font-size: 0.6875rem;
    line-height: 1.75;
    margin: 0;
}

.hotel-reference-amenities {
    align-items: center;
    background: #ffffff;
    border: 0.0625rem solid var(--hotel-reference-border);
    border-radius: 0.375rem;
    direction: rtl;
    display: grid;
    gap: 0;
    grid-template-columns: 1.55fr repeat(8, minmax(0, 1fr));
    margin: 1rem 0 1.0625rem;
    min-height: 10.125rem;
    padding: 1rem 0.75rem;
}

.hotel-reference-amenities h2 {
    color: var(--hotel-reference-pink);
    font-size: 1.3rem;
    line-height: 1.5;
    margin: 0;
    padding: 0 0.5rem;
    text-align: right;
}

.hotel-reference-amenity {
    align-self: stretch;
    border-left: 0.0625rem solid var(--hotel-reference-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 0 0.3rem;
    text-align: center;
}

.hotel-reference-amenity:last-child {
    border-left: 0;
}

.hotel-reference-amenity > span {
    align-items: center;
    background: #fff3f8;
    border-radius: 50%;
    color: var(--hotel-reference-pink);
    display: flex;
    height: 3.75rem;
    justify-content: center;
    margin: 0 auto 0.5rem;
    width: 3.75rem;
}

.hotel-reference-amenity > span .hotel-reference-icon {
    height: 2rem;
    width: 2rem;
}

.hotel-reference-amenity p {
    color: var(--hotel-reference-text);
    font-size: 0.72rem;
    line-height: 1.7;
    margin: 0;
}

.hotel-reference-summary-ctas {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.hotel-reference-primary,
.hotel-reference-outline,
.hotel-reference-subtle {
    align-items: center;
    border-radius: 0.3125rem;
    display: inline-flex;
    font-weight: 700;
    gap: 0.625rem;
    justify-content: center;
    line-height: 1.5;
    padding: 0.625rem 1rem;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.hotel-reference-primary {
    background: linear-gradient(105deg, #b4006b, #9d005e);
    border: 0.0625rem solid transparent;
    color: #ffffff !important;
}

.hotel-reference-primary:hover,
.hotel-reference-primary:focus-visible {
    background: var(--hotel-reference-pink-dark);
    color: #ffffff !important;
}

.hotel-reference-outline {
    background: #ffffff;
    border: 0.0625rem solid #d33390;
    color: var(--hotel-reference-pink) !important;
}

.hotel-reference-outline:hover,
.hotel-reference-outline:focus-visible {
    background: #fff2f9;
}

.hotel-reference-primary .hotel-reference-icon,
.hotel-reference-outline .hotel-reference-icon {
    height: 1.375rem;
    width: 1.375rem;
}

.hotel-reference-summary-ctas > * {
    flex: 1;
    font-size: 0.875rem;
    padding: 0.75rem 0.25rem;
    white-space: nowrap;
}

.hotel-reference-gallery {
    min-width: 0;
}

.hotel-reference-gallery-main {
    border-radius: 0.4375rem;
    height: 22.5rem;
    overflow: hidden;
    position: relative;
}

.hotel-reference-gallery-main > img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hotel-reference-all-photos {
    align-items: center;
    background: #243151dd;
    border-radius: 0.5rem;
    color: #ffffff;
    display: flex;
    font-size: 0.8125rem;
    gap: 0.5625rem;
    left: 0.75rem;
    min-width: 11rem;
    padding: 0.5625rem 0.8125rem;
    position: absolute;
    top: 0.5625rem;
}

.hotel-reference-all-photos .hotel-reference-icon {
    height: 1.125rem;
    width: 1.125rem;
}

.hotel-reference-gallery-prev,
.hotel-reference-gallery-next {
    align-items: center;
    background: var(--hotel-reference-pink);
    border-radius: 50%;
    box-shadow: 0 0.1875rem 0.625rem #12164718;
    color: #ffffff;
    display: grid;
    font-size: 1.8125rem;
    height: 2.1875rem;
    line-height: 1;
    padding: 0;
    place-items: center;
    position: absolute;
    top: 52%;
    width: 2.1875rem;
}

.hotel-reference-gallery-prev {
    left: auto;
    right: 1.125rem;
}

.hotel-reference-gallery-next {
    left: 1.0625rem;
    right: auto;
}

.hotel-reference-thumbnails {
    direction: ltr;
    display: flex;
    gap: 0.375rem;
    height: 8rem;
    margin-top: 0.375rem;
    overflow-x: auto;
}

.hotel-reference-thumbnail {
    flex: 0 0 calc((100% - 1.125rem) / 4);
    border: 0.125rem solid transparent;
    border-radius: 0.3125rem;
    height: 8rem;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}

.hotel-reference-thumbnail.is-selected,
.hotel-reference-thumbnail:hover,
.hotel-reference-thumbnail:focus-visible {
    border-color: var(--hotel-reference-pink);
}

.hotel-reference-thumbnail > img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hotel-reference-thumbnail > span {
    background: #1b1e25bb;
    border-radius: 0.25rem;
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 700;
    padding: 0.3125rem 0.625rem;
    position: absolute;
    right: 0.4375rem;
    top: 34%;
}

.hotel-reference-gallery-empty {
    align-items: center;
    background: #fff9fb;
    border: 0.0625rem dashed #e7c2d8;
    border-radius: 0.4375rem;
    display: flex;
    height: 22.5rem;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

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

.hotel-gallery-modal {
    align-items: center;
    background: linear-gradient(135deg, #10153ed9, #43123fdd);
    backdrop-filter: blur(0.45rem);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1.5rem;
    position: fixed;
    z-index: 2147483000;
}

.hotel-gallery-modal-backdrop {
    inset: 0;
    position: absolute;
}

.hotel-gallery-modal-dialog {
    background: #ffffff;
    border: 0.0625rem solid #ffffff;
    border-radius: 1rem;
    box-shadow: 0 1.5rem 5rem #080b2e80, 0 0 0 0.25rem #ffffff12;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3rem);
    max-width: 76rem;
    min-height: 0;
    overflow: hidden;
    position: relative;
    width: min(100%, 76rem);
    z-index: 1;
}

.hotel-gallery-modal-header {
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #fff7fb 100%);
    border-bottom: 0.0625rem solid #f4e1ec;
    display: flex;
    justify-content: space-between;
    min-height: 4rem;
    padding: 0.65rem 1.25rem 0.65rem 1rem;
}

.hotel-gallery-modal-header h2 {
    color: var(--hotel-reference-navy);
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
}

.hotel-gallery-modal-close {
    align-items: center;
    background: var(--hotel-reference-pink) !important;
    border: 0.125rem solid #ffffff !important;
    border-radius: 50%;
    box-shadow: 0 0.25rem 0.75rem #ae006655;
    color: #ffffff !important;
    display: grid;
    font-size: 1.75rem;
    height: 2.35rem;
    line-height: 1;
    padding: 0;
    place-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 2.35rem;
}

.hotel-gallery-modal-close:hover,
.hotel-gallery-modal-close:focus-visible {
    box-shadow: 0 0.35rem 1rem #ae006677;
    transform: scale(1.06);
}

.hotel-gallery-modal-viewer {
    background: radial-gradient(circle at 50% 0%, #29285e 0%, #121842 52%, #0c1032 100%);
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 1.1rem 4.75rem 0.85rem;
    position: relative;
}

.hotel-gallery-modal-viewer figure {
    background: #070b26;
    border: 0.0625rem solid #ffffff26;
    border-radius: 0.75rem;
    box-shadow: 0 0.75rem 2rem #05071966;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: min(60vh, 38rem);
    margin: 0;
    min-height: 16rem;
    min-width: 0;
    overflow: hidden;
    padding: 0.35rem;
}

.hotel-gallery-modal-viewer figure img {
    border-radius: 0.5rem;
    display: block;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    width: 100%;
}

.hotel-gallery-modal-viewer figcaption {
    color: #fcecf6;
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 0.45rem 0 0.1rem;
    text-align: center;
}

.hotel-gallery-modal-prev,
.hotel-gallery-modal-next {
    align-items: center;
    background: #ae0066e6;
    border: 0.125rem solid #ffffffcc;
    border-radius: 50%;
    color: #ffffff;
    display: grid;
    font-size: 2.1rem;
    height: 3rem;
    line-height: 1;
    padding: 0;
    place-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: background 0.2s ease, transform 0.2s ease;
    width: 3rem;
    z-index: 1;
}

.hotel-gallery-modal-prev:hover,
.hotel-gallery-modal-next:hover,
.hotel-gallery-modal-prev:focus-visible,
.hotel-gallery-modal-next:focus-visible {
    background: var(--hotel-reference-pink);
    transform: translateY(-50%) scale(1.06);
}

.hotel-gallery-modal-prev {
    right: 1.25rem;
}

.hotel-gallery-modal-next {
    left: 1.25rem;
}

.hotel-gallery-modal-thumbnails {
    align-items: center;
    background: linear-gradient(135deg, #fff 0%, #fff8fb 100%);
    border-top: 0.0625rem solid #f4e1ec;
    display: flex;
    direction: ltr;
    flex: 0 0 auto;
    gap: 0.65rem;
    justify-content: center;
    max-width: 100%;
    overflow-x: auto;
    padding: 0.85rem 1rem 1rem;
}

.hotel-gallery-modal-thumbnail {
    background: #ffffff;
    border: 0.15rem solid transparent;
    border-radius: 0.6rem;
    box-shadow: 0 0.2rem 0.5rem #18144418;
    flex: 0 0 7rem;
    height: 5rem;
    overflow: hidden;
    padding: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.hotel-gallery-modal-thumbnail.is-selected,
.hotel-gallery-modal-thumbnail:hover,
.hotel-gallery-modal-thumbnail:focus-visible {
    border-color: var(--hotel-reference-pink);
    box-shadow: 0 0.35rem 0.85rem #ae006644;
    transform: translateY(-0.1rem);
}

.hotel-gallery-modal-thumbnail img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hotel-reference-shortcuts {
    display: grid;
    grid-template-columns: 1fr;
    margin: 1rem 0 1.0625rem;
}

.hotel-reference-shortcuts article {
    align-items: center;
    background: #ffffff;
    border: 0.0625rem solid var(--hotel-reference-border);
    border-radius: 0.375rem;
    display: flex;
    min-height: 10.125rem;
    overflow: hidden;
    position: relative;
}

.hotel-reference-shortcut-photo {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 56%;
}

.hotel-reference-shortcut-photo img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hotel-reference-shortcuts article::after {
    background: linear-gradient(to left, #ffffff 38%, #ffffffde 49%, transparent 63%);
    content: "";
    inset: 0;
    position: absolute;
}

.hotel-reference-shortcuts article > div:last-child {
    padding: 0.875rem 1.625rem 0.875rem 0;
    position: relative;
    width: 62%;
    z-index: 1;
}

.hotel-reference-shortcuts h2 {
    color: var(--hotel-reference-navy);
    font-size: 1.125rem;
    line-height: 1.45;
    margin: 0;
    white-space: nowrap;
}

.hotel-reference-shortcuts h2 .hotel-reference-icon {
    height: 1.875rem;
    margin-left: 0.625rem;
    width: 1.875rem;
}

.hotel-reference-shortcuts p {
    font-size: 0.8125rem;
    margin: 0.4375rem 2.4375rem 0.75rem;
}

.hotel-reference-shortcuts .hotel-reference-outline {
    font-size: 0.75rem;
    gap: 0.9375rem;
    margin-right: 2.4375rem;
    padding: 0.4375rem 0.75rem;
}

.hotel-reference-shortcuts .hotel-reference-outline .hotel-reference-icon {
    height: 0.875rem;
    width: 0.875rem;
}

.hotel-reference-contact {
    margin: 1rem 0 0;
}

.hotel-reference-contact .contact-box,
.hotel-reference-sidebar-contact .contact-box {
    background: #fffcfd;
    border: 0.0625rem solid #f9e9f1;
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 0.75rem #18144408;
    color: var(--hotel-reference-text);
    margin: 0;
    padding: 1rem 1.25rem;
}

.hotel-reference-contact .contact-box .heading-orange,
.hotel-reference-sidebar-contact .contact-box .heading-orange {
    background: transparent;
    border: 0;
    color: var(--hotel-reference-pink);
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
    padding: 0;
}

.hotel-reference-contact .contact-box p,
.hotel-reference-contact .contact-box address,
.hotel-reference-sidebar-contact .contact-box p,
.hotel-reference-sidebar-contact .contact-box address {
    color: var(--hotel-reference-text);
    font-size: 0.8125rem;
    line-height: 1.7;
}

.hotel-reference-contact .contact-box hr,
.hotel-reference-sidebar-contact .contact-box hr {
    border: 0;
    border-top: 0.0625rem solid #f4e6ef;
    margin: 0.75rem 0;
}

.hotel-reference-contact .contact-box a,
.hotel-reference-sidebar-contact .contact-box a {
    color: var(--hotel-reference-pink);
}

.hotel-reference-contact-cta {
    align-items: center;
    background: linear-gradient(90deg, #fffdfd 0%, #fff6fa 100%);
    border: 0.0625rem solid var(--hotel-reference-border);
    border-radius: 0.375rem;
    direction: ltr;
    display: grid;
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr) auto;
    min-height: 6.5rem;
    margin: 1rem 0 0;
    overflow: hidden;
    box-shadow: 0 0.25rem 0.75rem #18144408;
}

.hotel-reference-contact-cta-art {
    align-self: stretch;
    min-height: 6.5rem;
    overflow: hidden;
}

.hotel-reference-contact-cta-art img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.hotel-reference-contact-cta-copy {
    direction: rtl;
    min-width: 0;
    padding: 0.75rem 1rem;
    text-align: right;
}

.hotel-reference-contact-cta-copy h2 {
    color: var(--hotel-reference-pink);
    font-size: 1.3rem;
    line-height: 1.45;
    margin: 0 0 0.2rem;
}

.hotel-reference-contact-cta-copy p {
    color: var(--hotel-reference-text);
    font-size: 0.8rem;
    line-height: 1.7;
    margin: 0;
}

.hotel-reference-contact-cta-button {
    border: 0;
    border-radius: 0.3125rem;
    direction: rtl;
    flex: 0 0 auto;
    font-size: 1rem;
    margin: 0 1rem 0 0;
    min-width: 12rem;
    padding: 0.8rem 1rem;
    white-space: nowrap;
}

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

.hotel-contact-modal {
    align-items: center;
    background: #11174dcc;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 2147483000;
}

.hotel-contact-modal-backdrop {
    inset: 0;
    position: absolute;
}

.hotel-contact-modal-dialog {
    background: #fff;
    border: 0.0625rem solid #f0dce8;
    border-radius: 0.625rem;
    box-shadow: 0 1rem 4rem #090c2e55;
    max-height: calc(100vh - 2rem);
    max-width: 34rem;
    overflow: auto;
    position: relative;
    width: min(100%, 34rem);
    z-index: 1;
}

.hotel-contact-modal-header {
    align-items: center;
    border-bottom: 0.0625rem solid #f4e6ef;
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
}

.hotel-contact-modal-header h2 {
    color: var(--hotel-reference-pink);
    font-size: 1.3rem;
    margin: 0;
}

.hotel-contact-modal-close {
    align-items: center;
    background: #fff3f8;
    border: 0.0625rem solid #f0c5dc;
    border-radius: 50%;
    color: var(--hotel-reference-pink);
    display: grid;
    font-size: 1.75rem;
    height: 2rem;
    line-height: 1;
    padding: 0;
    place-items: center;
    width: 2rem;
}

.hotel-contact-modal-content {
    padding: 1rem;
}

.hotel-contact-modal-content .contact-box {
    background: linear-gradient(135deg, #fffafb, #fff);
    border: 0;
    box-shadow: none;
    color: var(--hotel-reference-text);
    margin: 0;
    padding: 0.25rem;
}

.hotel-contact-modal-content .contact-box .heading-orange {
    background: transparent;
    border: 0;
    color: var(--hotel-reference-pink);
    font-size: 1.25rem;
    margin: 0 0 0.4rem;
    padding: 0;
    text-align: right;
}

.hotel-contact-modal-content .contact-box p,
.hotel-contact-modal-content .contact-box address {
    color: var(--hotel-reference-text);
    font-size: 0.8rem;
    line-height: 1.8;
}

.hotel-contact-modal-content .contact-box hr {
    border: 0;
    border-top: 0.0625rem solid #f4e6ef;
    margin: 0.75rem 0;
}

.hotel-contact-modal-content .contact-details {
    margin: 0;
    text-align: right;
}

.hotel-contact-modal-content .contact-phones {
    display: block;
    line-height: 1.3;
    margin: 0.35rem 0;
}

.hotel-contact-modal-content .contact-phones + br {
    display: none;
}

.hotel-contact-modal-content .contact-phones a {
    align-items: center;
    color: var(--hotel-reference-pink);
    display: flex;
    direction: ltr;
    font-size: 0.95rem;
    gap: 0.6rem;
    justify-content: center;
}

.hotel-contact-modal-content .contact-phones img {
    height: auto;
    max-width: 6.5rem;
    width: auto;
}

.hotel-contact-modal-content .contact-email {
    color: var(--hotel-reference-pink);
    display: block;
    font-size: 0.9rem;
    margin-top: 0.25rem;
    text-align: center;
}

.hotel-reference-rooms-layout {
    align-items: start;
    direction: rtl;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) 16.25rem;
    margin-bottom: 0.875rem;
}

.hotel-reference-rooms-content {
    min-width: 0;
}

.hotel-reference-rooms-heading {
    min-height: 10rem;
    padding: 0.25rem 0.1875rem 0;
}

.hotel-reference-rooms-heading h2 {
    color: var(--hotel-reference-navy);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.45;
    margin: 0;
}

.hotel-reference-rooms-heading h2 .hotel-reference-stars {
    display: inline-block;
    font-size: 1.3125rem;
    margin-right: 1.25rem;
    vertical-align: middle;
}

.hotel-reference-rooms-heading > p:last-child {
    font-size: 0.8125rem;
    line-height: 1.75;
    margin: 0.75rem 0 0;
}

.hotel-reference-rooms-grid {
    display: grid;
    gap: 0.625rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hotel-reference-room-card {
    background: #ffffff;
    border: 0.0625rem solid var(--hotel-reference-border);
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 0.75rem #18144408;
    min-width: 0;
    overflow: hidden;
}

.hotel-reference-room-photo {
    height: 8.75rem;
}

.hotel-reference-room-photo img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.hotel-reference-room-body {
    padding: 0.625rem 0.6875rem 0.75rem;
    text-align: center;
}

.hotel-reference-room-body h3 {
    color: var(--hotel-reference-navy);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.hotel-reference-room-en {
    color: #273567;
    direction: ltr;
    font-family: Arial, sans-serif;
    font-size: 0.75rem;
    margin: 0.25rem 0 0.75rem;
}

.hotel-reference-room-facts {
    border-bottom: 0.0625rem solid var(--hotel-reference-border);
    display: flex;
    font-size: 0.625rem;
    justify-content: center;
    margin-bottom: 0.75rem;
    min-height: 1.625rem;
    padding-bottom: 0.625rem;
}

.hotel-reference-room-facts span {
    align-items: center;
    display: flex;
    gap: 0.25rem;
    white-space: nowrap;
}

.hotel-reference-room-facts .hotel-reference-icon {
    color: var(--hotel-reference-pink);
    height: 1rem;
    width: 1rem;
}

.hotel-reference-room-description,
.hotel-reference-room-description p {
    color: var(--hotel-reference-muted);
    font-size: 0.6875rem;
    line-height: 1.7;
    margin: 0;
}

.hotel-reference-empty {
    background: #fff6fb;
    border-radius: 0.375rem;
    margin: 0;
    padding: 1.5625rem;
    text-align: center;
}

.hotel-reference-sidebar {
    background: #ffffff;
    border: 0.0625rem solid var(--hotel-reference-border);
    border-radius: 0.375rem;
    margin-top: -1.4375rem;
    padding: 0.6875rem;
    text-align: center;
}

.hotel-reference-sidebar-photo {
    border-radius: 0.25rem;
    display: block;
    height: 7.875rem;
    margin-bottom: 0.625rem;
    object-fit: cover;
    width: 100%;
}

.hotel-reference-sidebar h2 {
    color: var(--hotel-reference-navy);
    font-size: 1.1875rem;
    line-height: 1.45;
    margin: 0;
}

.hotel-reference-sidebar .hotel-reference-english {
    font-size: 0.875rem;
    margin: 0;
}

.hotel-reference-sidebar .hotel-reference-place {
    font-size: 0.6875rem;
    justify-content: center;
    margin: 0.4375rem 0;
    padding: 0;
}

.hotel-reference-sidebar .hotel-reference-place .hotel-reference-icon {
    height: 1rem;
    width: 1rem;
}

.hotel-reference-sidebar-stars {
    font-size: 1.3125rem;
    margin: 0.3125rem 0 0.75rem;
}

.hotel-reference-sidebar > .hotel-reference-primary {
    font-size: 0.75rem;
    padding: 0.5rem 0.3125rem;
    width: 100%;
}

.hotel-reference-sidebar-contact {
    margin-top: 0.75rem;
    text-align: right;
}

.hotel-reference-sidebar-contact .contact-box {
    padding: 0.75rem;
}

.hotel-reference-sidebar-contact .contact-box .heading-orange {
    font-size: 1rem;
}

.hotel-reference-sidebar-contact .contact-box p,
.hotel-reference-sidebar-contact .contact-box address {
    font-size: 0.6875rem;
}

@media (max-width: 800px) {
    .sakkaf-hotel-details {
        font-size: 16px;
        padding-bottom: 1.5rem;
    }

    .hotel-reference-container {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .hotel-reference-frame {
        max-width: 100%;
    }

    .hotel-destination-banner {
        height: 7rem;
    }

    .hotel-destination-banner-copy {
        padding: 0.5rem 0.75rem 0.5rem 0.5rem;
        width: 47%;
    }

    .hotel-destination-banner-copy strong {
        font-size: 0.95rem;
        line-height: 1.35;
    }

    .hotel-destination-banner-copy span {
        font-size: 0.68rem;
        line-height: 1.45;
    }

    .hotel-reference-contact-cta {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .hotel-reference-contact-cta-art {
        height: 7rem;
        min-height: 0;
    }

    .hotel-reference-contact-cta-copy {
        padding: 1rem;
        text-align: center;
    }

    .hotel-reference-contact-cta-copy h2 {
        font-size: 1.05rem;
    }

    .hotel-reference-contact-cta-copy p {
        font-size: 0.8rem;
    }

    .hotel-reference-contact-cta-button {
        justify-self: center;
        margin: 0 0 1rem;
        min-width: 0;
        width: calc(100% - 2rem);
    }

    .hotel-reference-breadcrumb {
        font-size: 0.62rem;
        gap: 0.3rem 0.6rem;
        height: auto;
        margin: 0.25rem 1rem;
        min-height: 2.5rem;
    }

    .hotel-reference-overview-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .hotel-reference-gallery {
        order: -1;
    }

    .hotel-reference-gallery-main,
    .hotel-reference-gallery-empty {
        height: 20rem;
    }

    .hotel-gallery-modal {
        padding: 0.5rem;
    }

    .hotel-gallery-modal-dialog {
        max-height: calc(100vh - 1rem);
        border-radius: 0.75rem;
    }

    .hotel-gallery-modal-header {
        min-height: 3rem;
        padding: 0.4rem 0.7rem 0.4rem 0.5rem;
    }

    .hotel-gallery-modal-header h2 {
        font-size: 1rem;
    }

    .hotel-gallery-modal-close {
        font-size: 1.45rem;
        height: 2.1rem;
        width: 2.1rem;
    }

    .hotel-gallery-modal-viewer {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .hotel-gallery-modal-viewer figure {
        height: min(62vh, 28rem);
        min-height: 12rem;
    }

    .hotel-gallery-modal-prev,
    .hotel-gallery-modal-next {
        height: 2.35rem;
        width: 2.35rem;
    }

    .hotel-gallery-modal-prev {
        right: 0.5rem;
    }

    .hotel-gallery-modal-next {
        left: 0.5rem;
    }

    .hotel-gallery-modal-thumbnail {
        flex-basis: 5.5rem;
        height: 4rem;
    }

    .hotel-gallery-modal-thumbnails {
        justify-content: flex-start;
    }

    .hotel-contact-modal {
        padding: 0.5rem;
    }

    .hotel-contact-modal-content {
        padding: 0.75rem;
    }

    .hotel-contact-modal-header {
        padding: 0.6rem 0.75rem;
    }

    .hotel-contact-modal-header h2 {
        font-size: 1.05rem;
    }

    .hotel-contact-modal-content .contact-box p,
    .hotel-contact-modal-content .contact-box address {
        font-size: 0.78rem;
    }

    .hotel-contact-modal-content .contact-phones a {
        font-size: 0.85rem;
    }

    .hotel-reference-thumbnails {
        height: 6.5rem;
    }

    .hotel-reference-thumbnail {
        flex-basis: calc((100% - 1.125rem) / 4);
        height: 6.5rem;
    }

    .hotel-reference-title h1,
    .hotel-reference-rooms-heading h1 {
        font-size: 1.6rem;
    }

    .hotel-reference-summary .hotel-reference-english {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .hotel-reference-description,
    .hotel-reference-description p {
        font-size: 0.9rem;
        line-height: 1.9;
        padding: 0;
    }

    .hotel-reference-features {
        gap: 0.8rem 0.4rem;
        grid-template-columns: repeat(2, 1fr);
        padding: 0.8rem 0.2rem;
    }

    .hotel-reference-features > div:nth-child(2) {
        border-left: 0;
    }

    .hotel-reference-features h3 {
        font-size: 0.7rem;
    }

    .hotel-reference-features p {
        font-size: 0.65rem;
    }

    .hotel-reference-amenities {
        gap: 0.8rem 0.4rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        min-height: 0;
        padding: 0.9rem 0.4rem;
    }

    .hotel-reference-amenities h2 {
        font-size: 1.1rem;
        grid-column: 1 / -1;
        padding: 0 0.5rem;
        text-align: right;
    }

    .hotel-reference-amenity:nth-child(5),
    .hotel-reference-amenity:nth-child(9) {
        border-left: 0;
    }

    .hotel-reference-amenity > span {
        height: 2.7rem;
        margin-bottom: 0.35rem;
        width: 2.7rem;
    }

    .hotel-reference-amenity > span .hotel-reference-icon {
        height: 1.55rem;
        width: 1.55rem;
    }

    .hotel-reference-amenity p {
        font-size: 0.7rem;
        line-height: 1.55;
    }

    .hotel-reference-summary-ctas {
        gap: 0.5rem;
    }

    .hotel-reference-summary-ctas > * {
        font-size: 0.77rem;
        padding: 0.65rem 0.3rem;
        white-space: normal;
    }

    .hotel-reference-shortcuts article {
        min-height: 10rem;
    }

    .hotel-reference-shortcuts article > div:last-child {
        padding: 1rem 1rem 1rem 0;
        width: 70%;
    }

    .hotel-reference-shortcuts h2 {
        font-size: 0.95rem;
    }

    .hotel-reference-shortcuts p {
        font-size: 0.75rem;
        margin: 0.5rem 1.8rem;
    }

    .hotel-reference-shortcuts .hotel-reference-outline {
        font-size: 0.7rem;
        margin-right: 1.8rem;
        padding: 0.5rem;
    }

    .hotel-reference-rooms-layout {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .hotel-reference-rooms-content,
    .hotel-reference-sidebar {
        width: 100%;
    }

    .hotel-reference-rooms-heading {
        min-height: 0;
        padding: 0.5rem 0 1rem;
    }

    .hotel-reference-rooms-heading h2 {
        font-size: 1.2rem;
    }

    .hotel-reference-rooms-heading h2 .hotel-reference-stars {
        font-size: 1.1rem;
        margin-right: 0.7rem;
    }

    .hotel-reference-rooms-heading .hotel-reference-english {
        font-size: 1rem;
    }

    .hotel-reference-rooms-heading > p:last-child {
        font-size: 0.8rem;
    }

    .hotel-reference-rooms-grid {
        gap: 0.7rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hotel-reference-room-photo {
        height: 9rem;
    }

    .hotel-reference-room-body h3 {
        font-size: 0.86rem;
    }

    .hotel-reference-room-en {
        font-size: 0.7rem;
    }

    .hotel-reference-room-facts {
        font-size: 0.66rem;
    }

    .hotel-reference-room-description,
    .hotel-reference-room-description p {
        font-size: 0.7rem;
    }

    .hotel-reference-sidebar {
        margin-top: 0;
        padding: 1rem;
    }

    .hotel-reference-sidebar-photo {
        height: 12rem;
    }

    .hotel-reference-sidebar h2 {
        font-size: 1.2rem;
    }

    .hotel-reference-sidebar .hotel-reference-english {
        font-size: 1rem;
    }

    .hotel-reference-sidebar .hotel-reference-place {
        font-size: 0.8rem;
    }

    .hotel-reference-sidebar-contact .contact-box {
        padding: 1rem;
    }
}

@media (max-width: 390px) {
    .hotel-destination-banner-copy {
        width: 55%;
    }

    .hotel-reference-title h1,
    .hotel-reference-rooms-heading h1 {
        font-size: 1.4rem;
    }

    .hotel-reference-features {
        grid-template-columns: 1fr 1fr;
    }

    .hotel-reference-rooms-grid {
        grid-template-columns: 1fr;
    }

    .hotel-reference-room-photo {
        height: 12rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sakkaf-hotel-details * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Hotel-detail typography system: keep the shared header and footer outside this content root. */
html body #page-wrapper > .sakkaf-hotel-details {
    --hotel-detail-font-family: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;
    --hotel-detail-body-size: 15px;
    --hotel-detail-body-line-height: 1.8;
    --hotel-detail-supporting-size: 13.5px;
    --hotel-detail-supporting-line-height: 1.6;
    --hotel-detail-button-size: 15px;
    color: var(--hotel-reference-text);
    font-family: var(--hotel-detail-font-family) !important;
    font-size: var(--hotel-detail-body-size) !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    line-height: var(--hotel-detail-body-line-height) !important;
}

html body #page-wrapper > .sakkaf-hotel-details *:not(svg):not(path):not(circle):not(line):not(rect):not(polygon):not(polyline):not(ellipse) {
    font-family: var(--hotel-detail-font-family) !important;
    letter-spacing: normal !important;
}

html body #page-wrapper > .sakkaf-hotel-details :is(h1, h2, h3, h4, h5, h6, p, li, a, label, input, select, textarea, small, span:not([aria-hidden="true"])) {
    font-family: var(--hotel-detail-font-family) !important;
    font-size: var(--hotel-detail-body-size) !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    line-height: var(--hotel-detail-body-line-height) !important;
}

html body #page-wrapper > .sakkaf-hotel-details :is(strong, b) {
    font-family: var(--hotel-detail-font-family) !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    line-height: inherit !important;
}

/* Presentation-layer reset for legacy editor markup; stored hotel content remains unchanged. */
html body #page-wrapper > .sakkaf-hotel-details [style*="font-family"],
html body #page-wrapper > .sakkaf-hotel-details [style*="font-size"],
html body #page-wrapper > .sakkaf-hotel-details [style*="font-weight"],
html body #page-wrapper > .sakkaf-hotel-details [style*="line-height"],
html body #page-wrapper > .sakkaf-hotel-details [style*="letter-spacing"] {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
}

/* One bold heading hierarchy for both the overview and rooms views. */
html body #page-wrapper > .sakkaf-hotel-details :is(h1, h1 a, h1 span:not([aria-hidden="true"])) {
    font-family: var(--hotel-detail-font-family) !important;
    font-size: clamp(28px, 5.2vw, 48px) !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
}

html body #page-wrapper > .sakkaf-hotel-details :is(h2, h2 a, h2 span:not([aria-hidden="true"])) {
    font-family: var(--hotel-detail-font-family) !important;
    font-size: clamp(22px, 2.4vw, 30px) !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
}

html body #page-wrapper > .sakkaf-hotel-details :is(h3, h3 a, h3 span:not([aria-hidden="true"])) {
    font-family: var(--hotel-detail-font-family) !important;
    font-size: clamp(17px, 1.7vw, 21px) !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    line-height: 1.5 !important;
}

html body #page-wrapper > .sakkaf-hotel-details :is(h4, h5, h6) {
    font-family: var(--hotel-detail-font-family) !important;
    font-size: var(--hotel-detail-supporting-size) !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    line-height: 1.7 !important;
}

/* Supporting content and dynamic Rich Text inherit one readable token. */
html body #page-wrapper > .sakkaf-hotel-details :is(
    .hotel-reference-breadcrumb,
    .hotel-reference-breadcrumb a,
    .hotel-reference-breadcrumb span,
    .hotel-reference-english,
    .hotel-reference-place,
    .hotel-reference-description,
    .hotel-reference-description p,
    .hotel-reference-features p,
    .hotel-reference-amenity p,
    .hotel-reference-contact-cta-copy p,
    .hotel-reference-rooms-heading > p:last-child,
    .hotel-reference-room-en,
    .hotel-reference-room-facts,
    .hotel-reference-room-description,
    .hotel-reference-room-description p,
    .hotel-reference-sidebar .hotel-reference-english,
    .hotel-reference-sidebar .hotel-reference-place,
    .hotel-contact-modal-content,
    .hotel-contact-modal-content p,
    .hotel-contact-modal-content address,
    .hotel-contact-modal-content li
) {
    font-family: var(--hotel-detail-font-family) !important;
    font-size: var(--hotel-detail-supporting-size) !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    line-height: var(--hotel-detail-supporting-line-height) !important;
}

/* Sidebar hotel names are card titles, while feature and room names are H3-level titles. */
html body #page-wrapper > .sakkaf-hotel-details .hotel-reference-sidebar h2 {
    font-family: var(--hotel-detail-font-family) !important;
    font-size: clamp(17px, 1.7vw, 21px) !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    line-height: 1.5 !important;
}

html body #page-wrapper > .sakkaf-hotel-details .hotel-destination-banner-copy strong {
    font-family: var(--hotel-detail-font-family) !important;
    font-size: clamp(17px, 1.7vw, 21px) !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    line-height: 1.5 !important;
}

/* Action labels use the same bold button token; icon-only controls retain their existing geometry. */
html body #page-wrapper > .sakkaf-hotel-details :is(
    a.hotel-reference-primary,
    a.hotel-reference-outline,
    a.hotel-reference-subtle,
    button.hotel-reference-primary,
    button.hotel-reference-outline,
    button.hotel-reference-subtle,
    button.hotel-reference-all-photos
) {
    font-family: var(--hotel-detail-font-family) !important;
    font-size: var(--hotel-detail-button-size) !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    line-height: 1.5 !important;
}

/* Star marks are decorative labels, but their text still follows the single font family. */
html body #page-wrapper > .sakkaf-hotel-details :is(.hotel-reference-stars, .hotel-reference-sidebar-stars) {
    font-family: var(--hotel-detail-font-family) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
}

/* Use the full available page width on desktop while preserving the compact layout below. */
@media (min-width: 1100px) {
    .hotel-reference-frame {
        max-width: none;
        width: 100%;
    }
}