/* Moneeb-e — wordmark, navigation, buttons, cursor */
/* ========== WORDMARK ========== */
.wm{display:inline-flex; align-items:center; gap:7px; direction:ltr; line-height:1; color:var(--text)}
.wm-ar{font-family:var(--f-display); font-weight:500; font-size:1.18em; letter-spacing:.01em}
.wm-en{font-family:var(--f-latin); font-weight:600; font-size:1.06em; letter-spacing:-.005em}
.wm .gem{width:1.02em; height:1.02em}
/* ========== NAVIGATION ========== */
header.nav, .nav{position:sticky !important; top:0 !important; z-index:100 !important; display:block !important; width:100% !important; transition:background-color var(--d-mid) var(--ease), border-color var(--d-mid) var(--ease), backdrop-filter var(--d-mid) var(--ease); border-bottom:1px solid transparent}
header.nav.is-solid, .nav.is-solid{background:color-mix(in oklab,var(--bg) 84%,transparent) !important; backdrop-filter:blur(18px) saturate(140%) !important; -webkit-backdrop-filter:blur(18px) saturate(140%) !important; border-bottom-color:var(--line) !important}
.mb[data-theme="light"] header.nav.is-solid, [data-theme="light"] header.nav.is-solid, .mb[data-theme="light"] .nav.is-solid, [data-theme="light"] .nav.is-solid{background:rgba(251,248,239,.92) !important; border-bottom-color:var(--line) !important}
.nav-in{display:flex !important; align-items:center !important; justify-content:space-between !important; gap:var(--s-5); height:76px}
.nav-brand{font-size:19px; display:inline-flex !important; align-items:center !important; min-height:44px; text-decoration:none !important; color:inherit !important}
header.nav .nav-links, .nav-links{display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; gap:2px !important; list-style:none !important; margin:0 !important; padding:4px !important; border:1px solid var(--line) !important; border-radius:var(--r-pill) !important; background:var(--surface) !important}
header.nav .nav-link, .nav-link{position:relative !important; display:flex !important; align-items:center !important; min-height:38px !important; padding:0 14px !important; border-radius:var(--r-pill) !important; font-size:.92rem !important; color:var(--muted) !important; text-decoration:none !important; transition:color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease) !important}
header.nav .nav-link:hover, .nav-link:hover{color:var(--text) !important}
header.nav .nav-link.is-active, .nav-link.is-active{color:var(--text) !important; background:var(--surface-2) !important}
header.nav .nav-link.is-active::after, .nav-link.is-active::after{content:"" !important; position:absolute !important; bottom:5px !important; left:50% !important; width:4px !important; height:4px !important; margin-left:-2px !important; border-radius:50% !important; background:var(--gold) !important}
.nav-tools{display:flex; align-items:center; gap:var(--s-2)}
.icon-btn{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; transition:border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease)}
.icon-btn:hover{border-color:var(--line-2)}
.icon-btn svg{width:18px; height:18px}
.i-sun{display:none} .i-moon{display:block}
.mb[data-theme="light"] .i-sun, [data-theme="light"] .i-sun{display:block !important} 
.mb[data-theme="light"] .i-moon, [data-theme="light"] .i-moon{display:none !important}
.menu-btn{display:none}
.mnav{position:fixed; inset:76px 0 auto 0; z-index:99; background:color-mix(in oklab,var(--bg) 96%,transparent); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--line); padding:12px var(--gutter) 28px; animation:menu-in var(--d-mid) var(--ease) both}
.mb[data-theme="light"] .mnav, [data-theme="light"] .mnav{background:rgba(251,248,239,.96); border-bottom-color:var(--line)}
.mnav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.mnav a{display:flex; align-items:center; justify-content:space-between; min-height:56px; font-family:var(--f-display); font-size:1.35rem; color:var(--text); border-bottom:1px solid var(--line); text-decoration:none}
.mnav a span{font-family:var(--f-latin); font-size:var(--t-micro); color:var(--gold); letter-spacing:.14em}
@keyframes menu-in{from{opacity:0; transform:translateY(-8px)}}

/* User dropdown on navigation */
.nav-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--d-fast) var(--ease);
}
.nav-user-btn:hover {
    border-color: var(--line-2);
    color: var(--gold);
}
.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    inset-inline-end: 0;
    min-width: 220px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-2);
    padding: 8px;
    box-shadow: var(--shadow);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mb[data-theme="light"] .user-menu-dropdown, [data-theme="light"] .user-menu-dropdown {
    background: #FFFFFF;
    border-color: rgba(18,29,69,.12);
    box-shadow: 0 16px 40px rgba(18,29,69,.12);
}
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--r-1);
    color: var(--muted);
    font-size: 0.92rem;
    text-decoration: none !important;
    transition: all var(--d-fast) var(--ease);
}
.user-menu-item:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* ========== BUTTONS ========== */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:54px; padding:0 26px; border-radius:var(--r-pill); font-weight:500; font-size:1rem; cursor:pointer; border:1px solid transparent; transition:transform var(--d-mid) var(--ease), background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); will-change:transform}
.btn svg{width:18px; height:18px; transition:transform var(--d-mid) var(--ease)}
.btn:hover svg{transform:translateX(-4px)}
.btn-primary{background:var(--gold); color:var(--on-gold); box-shadow:0 12px 40px -12px var(--glow)}
.btn-primary:hover{background:var(--gold-2)}
.mb[data-theme="light"] .btn-primary{background:var(--navy); color:#fff}
.mb[data-theme="light"] .btn-primary:hover{background:#24356a}
.btn-ghost{border-color:var(--line-2); color:var(--text); background:var(--surface)}
.btn-ghost:hover{border-color:var(--gold)}
.btn-sm{min-height:44px; padding:0 18px; font-size:.92rem}
/* ========== CURSOR ========== */
.cur-ring,.cur-dot{position:fixed; left:0; top:0; z-index:100000; pointer-events:none; display:none}
.has-cursor .cur-ring,.has-cursor .cur-dot{display:block}
/* Real OS cursor is ALWAYS visible and sharp - NEVER hide it with cursor:none */
.has-cursor,
.has-cursor * {
    cursor: auto;
}
.has-cursor a,
.has-cursor button,
.has-cursor [role="button"],
.has-cursor select,
.has-cursor input[type="button"],
.has-cursor input[type="submit"],
.has-cursor input[type="checkbox"],
.has-cursor input[type="radio"],
.has-cursor .btn,
.has-cursor .stepper-btn {
    cursor: pointer !important;
}
.has-cursor input[type="text"],
.has-cursor input[type="tel"],
.has-cursor input[type="email"],
.has-cursor input[type="password"],
.has-cursor input[type="number"],
.has-cursor input[type="search"],
.has-cursor textarea,
.has-cursor [contenteditable="true"] {
    cursor: text !important;
}

/* Modals, Popups, and Dialogs MUST ALWAYS use native OS cursors */
.booking-modal-wrapper,
.booking-modal-wrapper *,
.we-modal-wrapper,
.we-modal-wrapper *,
.modal,
.modal *,
.swal2-container,
.swal2-container * {
    cursor: auto !important;
}

.booking-modal-wrapper button,
.booking-modal-wrapper a,
.booking-modal-wrapper [role="button"],
.booking-modal-wrapper .stepper-btn,
.booking-modal-wrapper select,
.booking-modal-close,
.modal-btn-submit,
.modal-btn-cancel,
.we-modal-wrapper button,
.we-modal-wrapper a,
.we-modal-wrapper [role="button"],
.iti__country {
    cursor: pointer !important;
}

.booking-modal-wrapper input,
.we-modal-wrapper input {
    cursor: text !important;
}

/* Hide fake cursor completely when modal or popup is open */
body.modal-open .cur-ring,
body.modal-open .cur-dot,
body:has(.booking-modal-wrapper) .cur-ring,
body:has(.booking-modal-wrapper) .cur-dot,
body:has(.we-modal-wrapper) .cur-ring,
body:has(.we-modal-wrapper) .cur-dot,
body:has(.swal2-container) .cur-ring,
body:has(.swal2-container) .cur-dot {
    display: none !important;
}

.cur-dot{width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--gold)}
.cur-ring{width:36px; height:36px; margin:-18px 0 0 -18px; border-radius:50%; border:1px solid color-mix(in oklab,var(--gold) 70%,transparent); display:none; transition:width var(--d-mid) var(--ease), height var(--d-mid) var(--ease), margin var(--d-mid) var(--ease), background-color var(--d-mid) var(--ease), opacity var(--d-fast) var(--ease)}
.has-cursor .cur-ring{display:grid; place-items:center}
.cur-ring[data-mode="link"]{width:56px; height:56px; margin:-28px 0 0 -28px; background:color-mix(in oklab,var(--gold) 10%,transparent)}
.cur-ring[data-mode="cta"]{width:72px; height:72px; margin:-36px 0 0 -36px; border-color:transparent; background:color-mix(in oklab,var(--gold) 16%,transparent)}
.cur-ring[data-mode="view"]{width:92px; height:92px; margin:-46px 0 0 -46px; background:var(--gold); border-color:var(--gold)}
.cur-ring[data-mode="view"]::after{content:attr(data-label); font-family:var(--f-display); font-weight:500; font-size:.92rem; color:var(--on-gold)}
.mb[data-theme="light"] .cur-ring[data-mode="view"]::after{color:#fff}
.cur-ring[data-mode="hidden"]{opacity:0}

/* ===== Shared navbar helpers (no Bootstrap dependency, same on every page) ===== */
.nav-cart,.nav-account{position:relative}
.foot{border-top:1px solid var(--line); padding-block:36px}
.foot-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-5)}
.foot p,.foot a{font-size:var(--t-small); color:var(--faint)}
.foot a{display:inline-flex; align-items:center; min-height:44px}
.foot a:hover{color:var(--gold)}
.foot nav{display:flex; flex-wrap:wrap; gap:var(--s-5)}
.nav-user-label{display:inline}
.user-menu-logout{padding:0}
.user-menu-logout-btn{width:100%; background:none; border:0; cursor:pointer; text-align:start; color:#E5484D}
.user-menu-logout-btn:hover{background:rgba(229,72,77,.12); color:#E5484D}
.mnav-actions{display:flex; flex-direction:column; gap:8px; margin-top:24px}
.mnav-actions>.btn{width:100%; justify-content:center}
.mnav-account{display:flex; gap:8px; margin-top:8px}
.mnav-account>.btn{flex:1 1 0; justify-content:center}
@media (max-width:575.98px){
  .nav-user-label{display:none}
  .nav-user-btn{width:44px; padding:0; justify-content:center}
}

/* ===== Navbar/footer look identical on every page =====
   Inner pages also load Bootstrap 4 and style.css (`* { font-family: Readex Pro }`),
   which load after this file and would restyle the shared chrome. */
header.nav,header.nav *,.foot,.foot *{font-family:var(--f-body)}
header.nav .fa-solid,.foot .fa-solid{font-family:"Font Awesome 6 Free"; font-weight:900}
header.nav .fa-regular,.foot .fa-regular{font-family:"Font Awesome 6 Free"; font-weight:400}
header.nav .fa-brands,.foot .fa-brands{font-family:"Font Awesome 6 Brands"; font-weight:400}
header.nav .wm-ar,.foot .wm-ar{font-family:var(--f-display)}
header.nav .wm-en,.foot .wm-en,header.nav .lang-btn span{font-family:var(--f-latin)}
header.nav .mnav a{font-family:var(--f-display)}
header.nav .mnav a span{font-family:var(--f-latin)}
header.nav .btn{display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:54px; padding:0 26px; border-radius:var(--r-pill); border:1px solid transparent; font-size:1rem; font-weight:500; line-height:1; text-decoration:none; box-shadow:none}
header.nav .btn-sm{min-height:44px; padding:0 18px; font-size:.92rem; border-radius:var(--r-pill)}
header.nav .btn-primary,header.nav .btn-primary:focus,header.nav .btn-primary:active{background:var(--gold); border-color:transparent; color:var(--on-gold); box-shadow:0 12px 40px -12px var(--glow)}
header.nav .btn-primary:hover{background:var(--gold-2); color:var(--on-gold)}
header.nav .btn-ghost,header.nav .btn-ghost:focus{background:var(--surface); border-color:var(--line-2); color:var(--text)}
header.nav .btn-ghost:hover{border-color:var(--gold); color:var(--text)}
header.nav a:hover,.foot a:hover{text-decoration:none}
header.nav hr{margin:4px 0; border:0; border-top:1px solid var(--line)}

/* ========== PACKAGES ========== */
.pk-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-6); flex-wrap:wrap; margin-bottom:clamp(40px,5vw,72px)}
.pk-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-4)}
.pk{position:relative; display:flex; flex-direction:column; border-radius:var(--r-3); border:1px solid var(--line); background:var(--surface); overflow:hidden; transition:transform var(--d-slow) var(--ease), border-color var(--d-mid) var(--ease), box-shadow var(--d-slow) var(--ease)}
.pk:hover{transform:translateY(-8px); border-color:color-mix(in oklab,var(--gold) 50%,transparent); box-shadow:var(--shadow)}
.pk-vis{position:relative; aspect-ratio:4/3; overflow:hidden; display:grid; place-items:center; isolation:isolate}
.pk-vis .pat{position:absolute; inset:-20%; opacity:.18; transition:transform 1.6s var(--ease)}
.pk:hover .pk-vis .pat{transform:rotate(12deg) scale(1.08)}
.pk-vis .gem{width:42%; height:42%; transition:transform var(--d-slow) var(--ease); filter:drop-shadow(0 18px 40px rgba(0,0,0,.25))}
.pk:hover .pk-vis .gem{transform:rotate(22.5deg) scale(1.08)}
.pk-vis .big{position:absolute; bottom:12px; inset-inline-end:18px; font-family:var(--f-latin); font-weight:700; font-size:4.6rem; line-height:1; opacity:.16; letter-spacing:-.04em}
.v-navy{background:#16234A; color:#E7CF73} .v-olive{background:#6F611D; color:#FBF6E4} .v-cream{background:#F5EDD3; color:#9A7F1E} .v-gold{background:#C9AE3A; color:#16234A}
.v-cream .big{color:#16234A} .v-navy .big,.v-olive .big{color:#FBF6E4}
.pk-body{display:flex; flex-direction:column; gap:var(--s-3); padding:22px 22px 24px; flex:1}
.pk-name{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-3)}
.pk-name h3{font-family:var(--f-display); font-weight:500; font-size:1.3rem}
.pk-name .en{font-family:var(--f-latin); font-size:var(--t-micro); color:var(--faint); letter-spacing:.06em; direction:ltr}
.pk .price{display:flex; align-items:baseline; gap:8px; margin-top:auto}
.pk .price .amt{font-family:var(--f-latin); font-weight:600; font-size:2.3rem; letter-spacing:-.02em; line-height:1; color:var(--text)}
.pk .price .cur{font-size:var(--t-small); color:var(--muted)}
.cnt{--n:var(--to); counter-reset:c var(--n)}
.cnt::after{content:counter(c)}
.pk-cta{display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line); font-size:var(--t-small); color:var(--gold)}
.pk-cta svg{width:18px; height:18px; transition:transform var(--d-mid) var(--ease)}
.pk:hover .pk-cta svg{transform:translateX(-6px)}
.pk-note{margin-top:var(--s-5); font-size:var(--t-small); color:var(--faint)}

/* ===== PACKAGE CARDS WITH REAL PRODUCT IMAGES ===== */
.pk-vis .pk-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform 1.2s var(--ease)}
.pk-vis.has-img::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,transparent 45%,rgba(9,15,32,.55) 100%)}
.pk-vis.has-img .pat,.pk-vis.has-img .gem{display:none}
.pk:hover .pk-vis .pk-img{transform:scale(1.06)}
.pk-vis .pk-tag{position:absolute; z-index:2; top:14px; inset-inline-start:14px; padding:5px 12px; border-radius:var(--r-pill); font-size:var(--t-micro); font-weight:600; color:var(--gold); background:rgba(9,15,32,.72); border:1px solid color-mix(in oklab,var(--gold) 45%,transparent); backdrop-filter:blur(6px)}
.mb .pk-desc{font-size:.86rem; color:var(--muted); margin:2px 0 8px; line-height:1.55}

.pk{height:100%; min-width:0; text-align:start}
.pk-row > *{min-width:0}
.pk .pk-cta{width:100%; border:0; border-top:1px solid var(--line); padding-inline:0; padding-bottom:0; background:transparent; color:var(--gold); font:inherit; font-size:var(--t-small); text-align:start; text-decoration:none; cursor:pointer; white-space:normal; transition:color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease)}
.pk:hover .pk-cta,.pk .pk-cta:focus-visible{color:var(--gold-2); border-top-color:var(--gold); text-decoration:none}
.pk .pk-cta::after{content:""; position:absolute; inset:0}
.pk .pk-cta:focus-visible{outline-offset:-4px}
.pk:focus-within{border-color:var(--gold)}
.pk-empty{grid-column:1 / -1}
.mb .pk-body,.mb .pk-desc,.mb .pk-cta,.mb .pk-cta span,.mb .pk .cur{font-family:var(--f-body)}
.pk .price{flex-wrap:wrap}
.pk-name h3,.pk-desc,.pk-tag{overflow-wrap:anywhere}
.pk-vis .pk-tag{max-width:calc(100% - 28px)}