/* Omanzil components: the website, the booking page and any other web page.
Load tokens.css first (this file imports it). Every class starts with "om-".
Rules that keep the brand (brand/kit.html sections 4, 5 and 11):
- one copper button per screen (.om-btn--primary); everything else is secondary, tertiary or a link
- at most two Oman elements per screen (peaks, contours, arch, falaj steps, bilingual label, ridge, grain)
- right-to-left works by setting dir="rtl" on : the file uses logical properties throughout */
@import url("tokens.css");
/* ---------- base ---------- */
.om-page {
margin: 0;
background: var(--om-bg);
color: var(--om-text);
font: var(--om-weight-text) var(--om-size-body)/1.6 var(--om-font);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.om-page *, .om-page *::before, .om-page *::after { box-sizing: border-box; }
[dir="rtl"] .om-page, .om-page[dir="rtl"], .om-ar { font-family: var(--om-font-arabic); }
[dir="rtl"] .om-page, .om-page[dir="rtl"] { font-size: 17px; line-height: 1.75; }
.om-wrap { max-width: var(--om-page-max); margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.om-section { padding-block: var(--om-space-8); }
.om-section--white { background: var(--om-white); }
.om-section--deep { background: var(--om-sea-deep); color: var(--om-on-deep-text); }
.om-h1, .om-h2, .om-h3, .om-h4 { font-weight: var(--om-weight-heading); margin: 0; letter-spacing: -.015em; text-wrap: balance; }
.om-h1 { font-size: var(--om-size-display); line-height: 1.08; }
.om-h2 { font-size: var(--om-size-h2); line-height: 1.15; }
.om-h3 { font-size: var(--om-size-h3); line-height: 1.25; }
.om-h4 { font-size: 16px; line-height: 1.3; }
[dir="rtl"] .om-h1, [dir="rtl"] .om-h2, [dir="rtl"] .om-h3 { letter-spacing: 0; line-height: 1.35; }
.om-lead { font-size: 18px; color: var(--om-text-muted); max-width: 46ch; margin: var(--om-space-3) 0 0; }
.om-muted { color: var(--om-text-muted); }
.om-small { font-size: var(--om-size-small); }
.om-num { font-variant-numeric: tabular-nums; }
.om-link { color: var(--om-brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.om-link:hover { text-decoration-thickness: 2px; }
/* uppercase label; the bilingual version puts the Arabic word at the other end of the line (element 5) */
.om-label { font-size: var(--om-size-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--om-text-muted); }
.om-bilabel { display: flex; justify-content: space-between; align-items: baseline; gap: var(--om-space-4); }
.om-bilabel .om-ar { letter-spacing: 0; text-transform: none; font-size: 13px; }
/* ---------- logo ---------- */
.om-logo { display: block; height: auto; width: 150px; color: var(--om-ink); }
.om-logo--white { color: var(--om-white); }
.om-logo--sea { color: var(--om-sea); }
/* ---------- buttons ---------- */
.om-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--om-space-2);
min-height: 44px; padding: 12px 20px; border-radius: var(--om-radius); border: 1.5px solid transparent;
font-family: inherit; font-size: 15px; font-weight: var(--om-weight-button); line-height: 1.2; text-decoration: none; white-space: nowrap;
cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.om-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--om-cream), 0 0 0 5px var(--om-focus); }
.om-btn--primary { background: var(--om-action); color: #fff; }
.om-btn--primary:hover { background: var(--om-action-hover); }
.om-btn--secondary { background: transparent; color: var(--om-sea); border-color: var(--om-sea); font-weight: 500; }
.om-btn--secondary:hover { background: var(--om-shallows); }
.om-btn--tertiary { background: transparent; color: var(--om-sea); font-weight: 500; padding-inline: 4px; text-decoration: underline; text-underline-offset: 3px; }
.om-btn--whatsapp { background: var(--om-white); color: var(--om-ink); border-color: var(--om-sand); font-weight: 500; }
.om-btn--on-deep { background: var(--om-white); color: var(--om-sea); }
.om-btn--sm { min-height: 36px; padding: 8px 14px; font-size: 14px; }
.om-btn--block { display: flex; width: 100%; }
.om-btn:disabled, .om-btn[aria-disabled="true"] { background: var(--om-sand); color: var(--om-stone); border-color: transparent; cursor: not-allowed; }
.om-btn .om-icon { width: 18px; height: 18px; }
/* ---------- forms ---------- */
.om-field { display: grid; gap: 6px; font-size: 14px; }
.om-field > label, .om-field > .om-field__label { font-weight: 500; color: var(--om-ink); }
.om-input, .om-select, .om-textarea {
width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--om-input-border); border-radius: var(--om-radius);
background: var(--om-white); color: var(--om-ink); font: inherit; font-size: 16px; /* 16px stops phones zooming in */
}
.om-textarea { min-height: 110px; resize: vertical; }
.om-input::placeholder, .om-textarea::placeholder { color: #8C8377; }
.om-input:focus, .om-select:focus, .om-textarea:focus { outline: none; border-color: var(--om-sea); box-shadow: 0 0 0 3px var(--om-shallows); }
.om-input[aria-invalid="true"], .om-select[aria-invalid="true"], .om-textarea[aria-invalid="true"] { border-color: var(--om-error); }
.om-help { font-size: 13px; color: var(--om-stone); }
.om-help--error { color: var(--om-error); }
.om-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.om-check input { accent-color: var(--om-sea); width: 18px; height: 18px; margin: 2px 0 0; }
/* phone with country code */
.om-phone { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: var(--om-space-2); }
/* ---------- tags, chips, badges ---------- */
.om-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 3px; border: 1px solid transparent;
font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: var(--om-cream); color: var(--om-sea); }
[dir="rtl"] .om-tag { letter-spacing: 0; font-size: 12px; }
.om-tag--sea { background: var(--om-sea); color: #fff; }
.om-tag--outline { background: transparent; border-color: var(--om-sand); color: var(--om-stone); }
.om-tag--sold { background: var(--om-sand); color: var(--om-stone); }
.om-tag--new { background: var(--om-copper); color: #fff; } /* launches only; never next to a copper button */
.om-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 14px; border-radius: 999px;
border: 1px solid var(--om-input-border); background: var(--om-white); color: var(--om-ink); font: inherit; font-size: 14px; cursor: pointer; }
.om-chip[aria-pressed="true"], .om-chip--on { background: var(--om-sea); border-color: var(--om-sea); color: #fff; }
/* ---------- booking: days and time slots ---------- */
.om-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.om-day { display: grid; place-items: center; gap: 2px; padding: 8px 2px; border-radius: var(--om-radius); border: 1px solid transparent;
background: transparent; color: var(--om-ink); font: inherit; font-size: 13px; cursor: pointer; }
.om-day b { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.om-day[aria-pressed="true"] { background: var(--om-sea); color: #fff; }
.om-day:disabled { color: #B9B1A7; cursor: default; }
.om-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--om-space-2); }
.om-slot { min-height: 44px; padding: 10px 6px; border: 1px solid var(--om-input-border); border-radius: var(--om-radius);
background: var(--om-white); color: var(--om-sea); font: inherit; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; }
.om-slot:hover { border-color: var(--om-sea); }
.om-slot[aria-pressed="true"] { background: var(--om-sea); border-color: var(--om-sea); color: #fff; }
.om-slot:disabled { color: #B9B1A7; border-style: dashed; cursor: default; }
/* ---------- price and figures ---------- */
.om-price { font-size: 20px; font-weight: 600; color: var(--om-sea); font-variant-numeric: tabular-nums; }
.om-price small { font-size: 13px; font-weight: 400; color: var(--om-stone); margin-inline-start: 6px; }
.om-stat { display: grid; gap: 2px; }
.om-stat b { font-size: 28px; font-weight: 500; letter-spacing: -.015em; color: var(--om-sea); font-variant-numeric: tabular-nums; }
.om-stat span { font-size: 13px; color: var(--om-stone); }
.om-facts { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 14px; color: var(--om-stone); }
.om-facts b { color: var(--om-ink); font-weight: 600; }
/* price and payment tables */
.om-table { width: 100%; border-collapse: collapse; background: var(--om-white); font-size: 14px; font-variant-numeric: tabular-nums; }
.om-table th, .om-table td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--om-sand); }
.om-table th { font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--om-stone); }
.om-table .om-num, .om-table td.num, .om-table th.num { text-align: end; }
.om-table tr.om-total td { font-weight: 600; color: var(--om-sea); border-top: 1.5px solid var(--om-sea); border-bottom: 0; }
.om-table-scroll { overflow-x: auto; }
/* ---------- the falaj line: every step-by-step (element 4) ---------- */
.om-steps { list-style: none; margin: 0; padding: 0; padding-inline-start: 28px; position: relative; display: grid; }
.om-steps::before { content: ""; position: absolute; inset-inline-start: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--om-sea); border-radius: 1px; }
.om-step { position: relative; padding-block-end: 20px; font-size: 15px; }
.om-step:last-child { padding-block-end: 0; }
.om-step::before { content: ""; position: absolute; inset-inline-start: -25px; top: 6px; width: 12px; height: 12px; border-radius: 50%;
background: var(--om-cream); border: 2px solid var(--om-sea); }
.om-step--done::before { background: var(--om-sea); }
.om-step b { display: block; font-weight: 600; }
.om-step span { color: var(--om-stone); font-size: 14px; }
@media (min-width: 900px) {
.om-steps--row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--om-space-4); padding-inline-start: 0; padding-top: 28px; }
.om-steps--row::before { inset-inline: 6px; top: 13px; bottom: auto; width: auto; height: 2px; }
.om-steps--row .om-step::before { inset-inline-start: 0; top: -21px; }
.om-steps--row .om-step { padding-block-end: 0; }
}
/* questions and answers: Question
Answer