/* SHABAB DIYAFA PRO 1.0.4 extra — styles of the extra features + the powerful search (navy + gold, dark + light, phone first). No inline styles (CSP). */
/* ---------- top search results */
.srch .res { max-height: min(72vh, 620px); overflow-y: auto; }
.srch .res .xsg { position: sticky; top: 0; z-index: 1; padding: 6px 12px 4px; font-size: 11.5px; font-weight: 900; letter-spacing: .3px; text-transform: uppercase; color: var(--gold); background: var(--solid); border-bottom: 1px solid var(--line); }
.srch .res a .xst { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.srch .res a .xst span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch .res a .xst small { color: var(--muted); font-size: 11.5px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.srch .res .xsfoot { padding: 8px 12px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }
.xhl { outline: 3px solid var(--gold) !important; outline-offset: 3px; border-radius: 12px; animation: xpulse 1.2s ease-in-out 2; }
@keyframes xpulse { 50% { box-shadow: 0 0 0 8px rgba(201, 162, 74, .25); } }
@media (prefers-reduced-motion: reduce) { .xhl { animation: none; } }
#pg .ph h2 > .ico:first-child { margin-inline-end: 8px; }
/* ---------- settings: extra features */
.xsetgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.xfeat { border-top: 4px solid var(--line); transition: border-color .2s; } .xfeat.on { border-top-color: var(--gold); }
.xfeat h3 { margin: 0; font-size: 16px; font-weight: 900; color: var(--navy); display: flex; align-items: center; gap: 8px; } [data-theme="dark"] .xfeat h3 { color: var(--gold2); }
.xfeat .row.sp { margin-bottom: 10px; align-items: center; } .xbtns { margin-top: 10px; gap: 8px; flex-wrap: wrap; }
.xswitch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 900; user-select: none; }
.xswitch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.xswitch .xknob { width: 48px; height: 28px; border-radius: 99px; background: #cbd5e1; position: relative; transition: background .2s; flex: none; }
.xswitch .xknob::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: inset-inline-start .2s; }
.xswitch input:checked + .xknob { background: linear-gradient(135deg, var(--gold), var(--gold2)); } .xswitch input:checked + .xknob::after { inset-inline-start: 23px; }
.xswitch input:focus-visible + .xknob { outline: 3px solid var(--navy); outline-offset: 2px; }
.xswitch b { min-width: 44px; color: var(--muted); } .xfeat.on .xswitch b { color: var(--gold); }
.xseg { flex-wrap: wrap; } .xseg button { cursor: pointer; }
/* ---------- booking card panel */
.xpanel h3 { color: var(--navy); } .xsecs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.xsec { background: var(--soft); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); }
.xsec > b { display: flex; align-items: center; gap: 6px; color: var(--navy); } [data-theme="dark"] .xsec > b { color: var(--gold2); }
.xsec .field { margin: 0; } .xpl .row { padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.xsign { height: 54px; max-width: 160px; background: #fff; border-radius: 8px; border: 1px solid var(--line); padding: 2px; }
.xfiles { align-items: center; gap: 8px; }
.xstars { color: var(--gold); letter-spacing: 1px; font-size: 16px; white-space: nowrap; } .xstars i { color: #cbd5e1; font-style: normal; }
.xwatext { white-space: pre-wrap; background: var(--soft); border-radius: 12px; padding: 10px 12px; border: 1px solid var(--line); max-height: 220px; overflow: auto; line-height: 1.6; margin-bottom: 6px; }
.xlink { font-family: var(--fe); direction: ltr; text-align: left; }
.xkey { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .xqr { image-rendering: pixelated; border-radius: 12px; background: #fff; border: 1px solid var(--line); max-width: 100%; height: auto; }
.xcode { font-size: 24px; font-weight: 900; letter-spacing: 1.5px; color: var(--navy); direction: ltr; } [data-theme="dark"] .xcode { color: var(--gold2); }
.xdockey { display: flex; gap: 12px; align-items: center; border: 2px dashed var(--gold); border-radius: 12px; padding: 8px 12px; margin: 10px 0; font-size: 12px; }
.xdockey .xqr { width: 96px; height: 96px; border: 0; }
body.xprint-dlg #app { display: none !important; } @media print { body.xprint-dlg .dlg-back { position: static; background: none; } body.xprint-dlg .modal .mf, body.xprint-dlg .modal .mh .ibtn { display: none; } }
/* ---------- channel manager */
.xprev { padding: 6px 0; border-bottom: 1px dashed var(--line); } .xbars { display: flex; align-items: flex-end; gap: 3px; height: 38px; margin-top: 4px; }
.xbars i { flex: 1; background: linear-gradient(180deg, var(--gold2), var(--gold)); border-radius: 4px 4px 0 0; min-height: 3px; } .xbars i.zero { background: var(--bad); height: 4px !important; opacity: .7; }
.xsteps { margin: 0; padding-inline-start: 20px; line-height: 1.8; } .xmapt select { min-width: 180px; } .xmapt .field { margin: 0; }
/* ---------- export */
.xcolbox summary { cursor: pointer; font-weight: 800; padding: 8px 0; display: flex; align-items: center; gap: 6px; }
.xcols { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin: 6px 0 12px; }
.xcol { display: flex; align-items: center; justify-content: space-between; gap: 4px; background: var(--soft); border-radius: 12px; padding-inline-end: 4px; border: 1px solid transparent; }
.xcol .xup .ico { transform: rotate(180deg); } .xcol.on { border-color: rgba(201, 162, 74, .5); } .xcol .check { margin: 0; flex: 1; background: none; } .xcol .ibtn { width: 32px; height: 32px; } .xcol b.num { color: var(--gold); }
/* ---------- scan key */
.xcam { position: relative; background: #0b1428; border-radius: 16px; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 10px; }
.xcam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.xcam .xframe { position: absolute; inset: 18%; border: 3px solid rgba(233, 196, 106, .85); border-radius: 18px; box-shadow: 0 0 0 999px rgba(6, 19, 49, .35); }
.xcam:not(.live) .xframe { border-style: dashed; }
.xres { margin-top: 14px; } .xverdict { display: flex; align-items: center; gap: 10px; border-radius: 16px; padding: 16px; color: #fff; font-size: 15px; flex-wrap: wrap; }
.xverdict .ico { width: 34px; height: 34px; } .xverdict b { font-size: 26px; font-weight: 900; letter-spacing: .5px; }
.xverdict.good { background: linear-gradient(135deg, #15803d, #16a34a); } .xverdict.bad { background: linear-gradient(135deg, #991b1b, #dc2626); }
.xkinfo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } .xkinfo div { background: var(--soft); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; } .xkinfo span { font-size: 12px; color: var(--muted); } .xkinfo b { font-size: 16px; }
/* ---------- reviews */
.xbig { font-size: 40px; font-weight: 900; font-family: var(--fe); color: var(--navy); line-height: 1.1; } [data-theme="dark"] .xbig { color: #fff; } .xbig.bad-t { color: var(--bad); }
.xdist { display: grid; grid-template-columns: 38px 1fr 34px; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.xdist i { background: var(--soft); border-radius: 99px; height: 10px; overflow: hidden; } .xdist i b { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold2)); border-radius: 99px; width: 0; }
.xcmt { max-width: 420px; white-space: pre-wrap; } .xweb { margin: 4px 0 0; padding: 6px 8px; font-size: 12.5px; }
/* ---------- day-end */
.xstep { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 16px; color: var(--navy); margin: 18px 0 10px; } [data-theme="dark"] .xstep { color: var(--gold2); }
.xstep > b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold), var(--gold2)); color: var(--deep); font-family: var(--fe); }
.xchk.clear { opacity: .85; } .xchk.has { border-inline-start: 4px solid var(--warn); } .xchk h3 .chip { margin-inline-start: auto; }
.xlist { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto; } .xlist .row { font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--line); gap: 6px; }
.xchips { display: flex; flex-wrap: wrap; gap: 6px; } .xchips .chip { font-family: var(--fe); font-weight: 800; } .pricebox .ln.muted { opacity: .75; font-size: 12.5px; } .pricebox .ln.tot { font-size: 16px; }
.xsupcard { border-inline-start: 4px solid #25d366; } .xhg summary { font-size: 15px; }
/* ---------- phone */
@media (max-width: 760px) {
  .xsetgrid { grid-template-columns: 1fr; } .xsecs { grid-template-columns: 1fr; } .xkinfo { grid-template-columns: 1fr 1fr; }
  .xmapt select { min-width: 130px; } .xbig { font-size: 32px; } .xverdict b { font-size: 22px; }
  .srch .res a .xst small { -webkit-line-clamp: 1; }
}
@media print { .xstep.noprint, .xsupcard { display: none; } .xchk .xlist { max-height: none; overflow: visible; } .xbars i { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }
/* 1.0.5 channel manager EASY CONNECT (#/xcmwiz) */
.cmw-steps{display:flex;align-items:center;gap:6px;margin:4px 0 14px;flex-wrap:wrap}
.cmw-st{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--mu,#6b7280)}
.cmw-st b{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--line,#e5e7eb);color:inherit;font-size:14px}
.cmw-st b svg{width:16px;height:16px}
.cmw-st.on{color:var(--tx,#111)}.cmw-st.on b{background:var(--gold,#C9971C);color:#1a1300}
.cmw-st.done b{background:#1E7A45;color:#fff}
.cmw-line{flex:1;min-width:14px;height:2px;background:var(--line,#e5e7eb)}
.cmw-card{padding:18px}
.cmw-card h3{margin:0 0 6px}
.cmw-sites{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:12px 0}
.cmw-site{display:flex;align-items:center;gap:10px;padding:14px 12px;border-radius:14px;border:2px solid var(--line,#e5e7eb);background:var(--card,#fff);cursor:pointer;font:inherit;color:inherit;text-align:start}
.cmw-site i{width:22px;height:22px;border-radius:6px;border:2px solid var(--c);display:inline-flex;align-items:center;justify-content:center;color:#fff;flex:none}
.cmw-site i svg{width:14px;height:14px}
.cmw-site b{color:var(--c)}
.cmw-site.on{border-color:var(--c);box-shadow:0 4px 14px color-mix(in srgb,var(--c) 22%,transparent)}.cmw-site.on i{background:var(--c)}
.cmw-how{margin-top:6px}.cmw-acc{margin-top:8px}
.cmw-nav{justify-content:space-between;margin-top:16px}
.btn.big{min-height:48px;padding:0 22px;font-size:16px}
.cmw-guide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center;margin:10px 0 14px;padding:12px;border-radius:14px;background:color-mix(in srgb,var(--gold,#C9971C) 8%,transparent)}
@media (max-width:720px){.cmw-guide{grid-template-columns:1fr}}
.cmw-pic{border-radius:12px;overflow:hidden;border:1px solid #d5dbe6;background:#fff;color:#1f2937;font-size:12px;direction:ltr}
.cmw-pbar{display:flex;align-items:center;gap:5px;padding:7px 10px;background:#1e293b;color:#fff}.cmw-pbar span{width:8px;height:8px;border-radius:50%;background:#64748b}.cmw-pbar b{margin-left:8px;letter-spacing:.5px}.cmw-pbar em{margin-left:auto;font-style:normal;background:#334155;padding:2px 8px;border-radius:6px}
.cmw-pbody{display:flex;min-height:110px}.cmw-pside{width:38%;background:#f1f5f9;padding:8px;display:flex;flex-direction:column;gap:6px}.cmw-pside i{font-style:normal;padding:4px 6px;border-radius:6px}.cmw-pside i.on{background:#fde68a;font-weight:700;outline:2px solid #f59e0b}
.cmw-pmain{flex:1;padding:10px;display:flex;flex-direction:column;gap:10px}.cmw-pbtn{align-self:flex-start;background:#2563eb;color:#fff;padding:5px 10px;border-radius:6px;font-weight:700;outline:3px solid #f59e0b;outline-offset:2px}
.cmw-pkey{font-family:monospace;background:#f8fafc;border:1px dashed #94a3b8;padding:6px;border-radius:6px}.cmw-pkey u{color:#2563eb;margin-left:6px}
.cmw-ol{margin:0;padding-inline-start:20px;line-height:1.7}
.cmw-props{display:flex;flex-direction:column;gap:8px}
.cmw-prop{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;border:2px solid var(--line,#e5e7eb);background:var(--card,#fff);font:inherit;color:inherit;cursor:pointer;text-align:start}
.cmw-prop.on{border-color:#1E7A45;background:color-mix(in srgb,#1E7A45 8%,transparent)}.cmw-prop i svg{width:18px;height:18px}
.cmw-rows{display:flex;flex-direction:column;gap:8px}
.cmw-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:10px;align-items:center;padding:10px;border:1px solid var(--line,#e5e7eb);border-radius:12px}
.cmw-r{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:720px){.cmw-row{grid-template-columns:1fr}.cmw-r{grid-template-columns:1fr}}
.cmw-check{list-style:none;margin:8px 0 14px;padding:0;display:grid;gap:8px}
.cmw-check li{display:flex;align-items:center;gap:8px;font-weight:600;color:#8A6413}.cmw-check li.ok{color:#1E7A45}.cmw-check li svg{width:18px;height:18px}
.cmw-done{margin:10px 0}
.cmw-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border:2px solid var(--gold,#C9971C)}

/* 1.0.5: site colours by class (the page security policy blocks inline style) */
.cmw-site[data-site=booking]{--c:#003580}.cmw-site[data-site=airbnb]{--c:#FF5A5F}.cmw-site[data-site=expedia]{--c:#1B2B5B}.cmw-site[data-site=agoda]{--c:#5E2CA5}.cmw-site[data-site=trip]{--c:#287DFA}.cmw-site[data-site=almosafer]{--c:#0E7C66}.cmw-site[data-site=other]{--c:#6B7280}
/* ===== 1.0.5 (folder 292): Pro features, smart prices, locks, groups, loyalty, Print Studio, NEXA voice ===== */
.x5part { padding: 0; } .x5part > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; }
.x5part > summary::-webkit-details-marker { display: none; } .x5part > summary b { display: flex; align-items: center; gap: 8px; color: var(--navy); }
[data-theme="dark"] .x5part > summary b { color: var(--gold); } .x5body { padding: 0 16px 16px; display: grid; gap: 10px; } .x5body h4 { margin: 8px 0 0; }
.x5rules td { vertical-align: top; } .x5rules .inp { min-width: 70px; } .x5rules .inp.num { width: 80px; } .x5when { white-space: normal; }
.x5wd { display: inline-flex; align-items: center; gap: 2px; margin: 2px 6px 2px 0; font-size: 12px; }
.x5pre-row { display: flex; flex-wrap: wrap; gap: 8px; } .x5sw { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #d5dbe8; background: var(--bg2, #fff); border-radius: 999px; padding: 6px 10px; cursor: pointer; font: inherit; color: inherit; }
.x5sw i { width: 16px; height: 16px; border-radius: 50%; display: inline-block; border: 1px solid #0002; }
.x5sw[data-preset="navy"] i:first-child { background: #0b1f4f; } .x5sw[data-preset="maroon"] i:first-child { background: #5a1022; } .x5sw[data-preset="green"] i:first-child { background: #0f3d2e; }
.x5sw[data-preset="teal"] i:first-child { background: #0b4f5c; } .x5sw[data-preset="sand"] i:first-child { background: #3d2f1e; } .x5sw[data-preset="charcoal"] i:first-child { background: #1f2937; }
.x5sw i:nth-child(2) { background: #c9a24a; } .x5sw[data-preset="teal"] i:nth-child(2) { background: #e9c46a; } .x5sw[data-preset="sand"] i:nth-child(2) { background: #c08a3e; } .x5sw[data-preset="charcoal"] i:nth-child(2) { background: #f59e0b; }
.x5pics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .x5pic { border: 1px dashed #c9cfdc; border-radius: 12px; padding: 10px; display: grid; gap: 6px; justify-items: start; }
.x5pic img { max-width: 100%; max-height: 90px; object-fit: contain; background: #fff; border-radius: 6px; }
.x5cal td, .x5cal th { text-align: center; white-space: nowrap; } .x5cal td .small { white-space: normal; max-width: 140px; font-size: 10.5px; } .x5cal s { opacity: .55; font-size: 11px; }
.x5cal td.x5up { background: #e8f6ee; } .x5cal td.x5dn { background: #e8f0fb; } .x5cal td.x5man { background: #fbf3df; }
[data-theme="dark"] .x5cal td.x5up { background: #12372a; } [data-theme="dark"] .x5cal td.x5dn { background: #13284a; } [data-theme="dark"] .x5cal td.x5man { background: #3d3216; }
.x5pin { font-size: 34px; font-weight: 800; letter-spacing: 6px; color: var(--navy); } [data-theme="dark"] .x5pin { color: var(--gold); }
.x5bk .xsec { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0; } .x5bk .xsec b { display: inline-flex; align-items: center; gap: 6px; }
.x5gst .info { display: flex; flex-wrap: wrap; gap: 18px; margin: 6px 0 10px; } .x5gst .info span { display: block; font-size: 11px; opacity: .7; }
.x5gst tfoot td { font-weight: 600; } .x5gst .inp { min-width: 120px; }
.x5ans { border-top: 1px solid #0001; padding: 6px 0; display: grid; gap: 4px; justify-items: start; }
.nexa-p .x5mic, .nexa-p .x5spk { min-width: 38px; padding: 0 8px; font-size: 16px; } .nexa-p .x5mic.on { background: #c62828; color: #fff; } .nexa-p .x5spk.on { background: var(--gold); color: var(--navy); }
/* Print Studio on documents */
.doc.x5doc .x5lh-h, .doc.x5doc .x5lh-f { display: block; width: 100%; max-height: 45mm; object-fit: contain; } .doc.x5doc .x5lh-f { margin-top: 10px; }
.doc.x5doc.x5pre .dh, .doc.x5doc.x5pre .df { visibility: hidden; height: 0; padding: 0; margin: 0; border: 0; overflow: hidden; }
.doc.x5doc.x5pre { padding-top: calc(var(--x5-top, 40mm) + 4mm); padding-bottom: calc(var(--x5-bot, 25mm) + 4mm); }
.doc.x5doc { padding-left: max(14mm, var(--x5-side, 14mm)); padding-right: max(14mm, var(--x5-side, 14mm)); }
.doc .x5sign { display: flex; justify-content: flex-end; gap: 18mm; margin: 10mm 0 4mm; text-align: center; font-size: 11px; } .doc .x5sign img { max-height: 28mm; max-width: 55mm; object-fit: contain; display: block; margin: 0 auto 3px; }
.doc .x5foot { font-size: 10.5px; text-align: center; opacity: .8; margin-bottom: 4px; }
@media (max-width: 640px) { .x5rules .inp { min-width: 60px; } .x5pin { font-size: 26px; letter-spacing: 3px; } .x5part > summary { padding: 12px; } .x5body { padding: 0 12px 12px; } }

/* 1.0.8: bigger stamp + signature on every document (SB 11 Nov 2026) */
.doc .x5sign img { max-height: 42mm; max-width: 85mm; }
/* 1.0.8 All settings page (#/allset) */
.as-find { position: sticky; top: 0; z-index: 3; padding: 10px; } .as-find .inp { width: 100%; }
.as-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.as-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line, #e6e9f0); flex-wrap: wrap; } .as-row:last-child { border-bottom: 0; }
.as-n { flex: 1 1 260px; min-width: 0; } .as-n b { font-weight: 600; } .as-l { font-size: 12px; margin-inline-start: 8px; white-space: nowrap; }
.as-v { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .as-in { width: 110px; } .as-v input[type="text"].as-in, .as-v input:not([type]).as-in { width: 170px; } .as-suf { font-size: 12px; opacity: .75; }
.as-sw { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .as-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.as-sw span { width: 44px; height: 24px; border-radius: 12px; background: #c9ced8; position: relative; transition: background .2s; flex: 0 0 auto; }
.as-sw span::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: inset-inline-start .2s; }
.as-sw input:checked + span { background: var(--navy, #0b1f4f); } .as-sw input:checked + span::after { inset-inline-start: 23px; } .as-sw input:focus-visible + span { outline: 2px solid var(--gold, #c9a24a); outline-offset: 2px; }
.as-sw b { font-size: 12px; min-width: 34px; }
.as-row[hidden], .as-sec[hidden] { display: none !important; }
.as-v input[type="time"].as-in { width: 150px; }
