:root{--bench:#d2d9e8;--paper:var(--tc1,#fbf7ea);--ink:var(--tc2,#0e1d3e);--green:var(--tc3,#132651);--lime:var(--tc4,#f6d259);--muted:#5b6578;--tint:var(--tc5,#f9e08d);--pr:var(--tc2,#0e1d3e);--g1:var(--tc6,#f6e3a1);--g2:var(--tc7,#d8a938);--g3:var(--tc8,#a87a1d);--gut:20px;--ease:cubic-bezier(.16,1,.3,1);} @property --sx{syntax:'';inherits:true;initial-value:100%} *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth}html.lock{overflow:hidden} body{margin:0;background:var(--bench);color:var(--ink);font:400 16px/1.6 'Noto Sans Arabic',system-ui,sans-serif} .wash{display:none} :focus-visible{outline:2px solid var(--ink);outline-offset:3px} .wrap{width:min(1160px,calc(100% - 2*var(--gut)));margin-inline:auto} /* V20: mobile-first customer category navigation. The existing header is replaced in-place after a small scroll, then remains sticky while the customer browses package sections. No package/card rendering is changed by this layer. */ header#siteHeader{position:sticky;top:0;z-index:50;height:136px;background:#d2d9e8ee;backdrop-filter:blur(12px);border-bottom:1px solid var(--tc9,#0e1c3d26);isolation:isolate;transition:height .24s cubic-bezier(.16,1,.3,1)} #siteHeader .nav-main,#siteHeader .category-nav-shell{position:absolute;left:0;right:0;height:68px} #siteHeader .nav-main{top:0;opacity:1;transform:translateY(0);transition:opacity .18s ease,transform .22s ease;z-index:2;background:inherit} #siteHeader .category-nav-shell{top:68px;display:flex;align-items:center;opacity:1;transform:translateY(0);pointer-events:auto;transition:top .24s cubic-bezier(.16,1,.3,1),opacity .18s ease,transform .22s ease;z-index:3;background:inherit;border-top:1px solid #12392a18} #siteHeader.category-mode{height:68px} #siteHeader.category-mode .nav-main{opacity:0;transform:translateY(-8px);pointer-events:none} #siteHeader.category-mode .category-nav-shell{top:0;opacity:1;transform:translateY(0);pointer-events:auto;border-top:0} .category-nav-viewport{width:100%;min-width:0} .category-nav{display:flex;align-items:center;gap:5px;overflow-x:auto;overflow-y:hidden;padding:7px 2px;scrollbar-width:none;direction:rtl;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x;white-space:nowrap} .category-nav::-webkit-scrollbar{display:none} .category-nav-btn{appearance:none;flex:0 0 auto;border:1px solid transparent;background:#ffffffb8;color:var(--ink);padding:9px 13px;border-radius:999px;font:700 13px/1.2 'Noto Sans Arabic';cursor:pointer;white-space:nowrap;box-shadow:0 1px 0 #fff8 inset;transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .12s ease} .category-nav-btn:active{transform:scale(.975)} .category-nav-btn--golden{background:var(--tc10,#F8E3A1);border-color:var(--tc11,#E7CB68);color:var(--tc12,#6E5010)} .category-nav-btn--general{background:var(--tc13,#FFF1A8);border-color:var(--tc14,#E6D06A);color:var(--tc15,#6D5A00)} .category-nav-btn--female{background:#F7D1DB;border-color:#E7A8B9;color:#8D3D59} .category-nav-btn--male{background:#CFE2FA;border-color:#A9C8ED;color:#2F5F91} .category-nav-btn--exclusive{background:#E7D8F7;border-color:#CDB1E7;color:#654083} .category-nav-btn--temporary{background:#D9EFD8;border-color:#AFD6AD;color:#3F6D3B} .category-nav-btn--tests{background:#E1E9DF;border-color:#C1D0BF;color:#35533A} .category-nav-btn--branches{background:#DCE9D8;border-color:#B8CEB3;color:#356044} .category-nav-btn.is-active{box-shadow:inset 0 0 0 1px currentColor,0 2px 8px rgba(24,55,38,.10);transform:translateY(-1px)} .category-nav-btn--golden.is-active{background:var(--tc16,#D9B94C);border-color:var(--tc17,#B9931E);color:var(--tc18,#4C3505)} .category-nav-btn--general.is-active{background:var(--tc19,#E8CB3F);border-color:var(--tc20,#C5A90E);color:var(--tc21,#4D4100)} .category-nav-btn--female.is-active{background:#EFA5B8;border-color:#D67F99;color:#6E2740} .category-nav-btn--male.is-active{background:#9FC5F1;border-color:#72A7E1;color:#214D7B} .category-nav-btn--exclusive.is-active{background:#C8A9E4;border-color:#A67ACB;color:#4A2B62} .category-nav-btn--temporary.is-active{background:#ADD5A9;border-color:#7EB579;color:#2E562B} .category-nav-btn--tests.is-active{background:#BFD1BC;border-color:#91AC8D;color:#244228} .category-nav-btn--branches.is-active{background:#AFCDA9;border-color:#82AA7C;color:#254A31} .category-nav-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px} .category-nav-choice{appearance:none;flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:58px;border:0;background:transparent;color:var(--tc22,#725513);padding:1px 1px 0;border-radius:0;font:800 11.5px/1.02 'Noto Sans Arabic';cursor:pointer;white-space:nowrap;box-shadow:none;transition:color .18s ease,transform .12s ease} .category-nav-choice:active{transform:scale(.96)} .category-nav-choice:focus-visible{outline:2px solid var(--tc23,#b58a24);outline-offset:3px;border-radius:8px} .category-nav-choice .choice-label{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.02;letter-spacing:0;direction:rtl;transform:translateY(-2px)} .category-nav-choice .choice-arrow{position:relative;display:flex;flex:0 0 22px;width:22px;height:22px;align-items:center;justify-content:center;transform:rotate(90deg) translateX(-1px);cursor:pointer;margin-top:1px} .category-nav-choice .choice-arrow > span{position:absolute;display:block;width:10.4px;height:10.4px;border-bottom:4px solid var(--tc24,#8B6512);border-right:4px solid var(--tc24,#8B6512);transform:rotate(45deg);margin:0;animation:categoryChoiceArrow 2.8s infinite} .category-nav-choice .choice-arrow > span:nth-child(2){animation-delay:-.28s} .category-nav-choice .choice-arrow > span:nth-child(3){animation-delay:-.56s} @keyframes categoryChoiceArrow{0%{opacity:0;transform:rotate(45deg) translate(-13px,-13px)}45%{opacity:1}70%{opacity:1}100%{opacity:0;transform:rotate(45deg) translate(13px,13px)}} #goldenRail,#allRail,#femaleRail,#maleRail,#exclusiveRail,#temporaryRail,#testsSec{scroll-margin-top:78px} @media(max-width:700px){ header#siteHeader{height:136px} #siteHeader .nav-main{height:68px} #siteHeader .category-nav-shell{height:68px;top:68px} #siteHeader.category-mode{height:68px} #siteHeader.category-mode .category-nav-shell{top:0} .category-nav{gap:4px;padding:6px 1px} .category-nav-btn{padding:8px 12px;font-size:12.5px} .category-nav-choice{min-width:58px;padding:1px 0 0;font-size:11.5px} .category-nav-choice .choice-arrow{width:22px;height:22px} .category-nav-choice .choice-arrow > span{width:10.4px;height:10.4px;border-width:4px;margin:0} } .hidden,[hidden]{display:none!important} header{position:sticky;top:0;z-index:20;background:#d2d9e8ee;backdrop-filter:blur(12px);border-bottom:1px solid var(--tc9,#0e1c3d26)} .nav{height:76px;display:flex;align-items:center;justify-content:space-between} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font:700 17px/1.25 'Noto Sans Arabic'} .brand small{display:block;font:400 12px 'Noto Sans Arabic';color:var(--muted)} .logo{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--lime);font:700 27px/1 'Noto Sans Arabic';outline:1px solid var(--ink);outline-offset:3px;margin:3px} .actions{display:flex;gap:14px;align-items:center}.actions a{color:var(--ink);text-decoration:none;font-size:14px} .btn{border:1.5px solid var(--ink);padding:12px 20px;border-radius:2px;font:600 15px 'Noto Sans Arabic';cursor:pointer;display:inline-flex;justify-content:center;align-items:center;gap:8px;transition:transform .12s,background .25s,color .25s} .btn:active{transform:translateY(1px) scale(.975)} .btn-gold{background:linear-gradient(135deg,var(--g1),var(--g2));color:var(--tc25,#2f2107);border-color:var(--tc26,#7c5a14);box-shadow:inset 0 1px 0 #fff9} .btn-green{background:var(--ink);color:#fff}.btn-ghost{background:transparent;color:var(--ink)} main{padding:34px 0 70px} .kicker{margin-block:0;font:500 clamp(23px,5.6vw,42px)/1.3 'Noto Sans Arabic';text-wrap:balance}.kicker:empty{display:none} .promises{display:flex;gap:12px 28px;padding:16px 0 22px;margin-block:0;font-size:15px;color:var(--ink);flex-wrap:wrap;align-items:center} .promises li{list-style:none;white-space:nowrap;display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.01em;opacity:.32;transition:opacity .45s ease,font-weight .45s ease} .promises li i{flex:none;width:16px;height:16px;border:1.6px solid currentColor;display:grid;place-items:center;border-radius:2px} .promises li i:after{content:"";font-size:11px;font-weight:800;line-height:1} .promises li.on{opacity:1;font-weight:800} .promises li.on i:after{content:"✓";animation:pcheck .28s ease} .promises li.slim{font-weight:500;opacity:.62} @keyframes pcheck{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}} .rail-sec{margin-top:0} #allRail{margin-top:8px;margin-bottom:0;padding-bottom:6px} #femaleRail,#maleRail,#exclusiveRail,#temporaryRail{margin-top:0;padding-top:10px} .theme-y,.theme-f,.theme-m{background:var(--bench);box-shadow:0 0 0 100vmax var(--bench);clip-path:inset(0 -100vmax);padding-block:18px 8px} .theme-y{--bench:var(--tc27,#f0e6b0)} .theme-f{--bench:#f0d4d8;--tint:#f4c4cc;--pr:#7a2a3c} .theme-m{--bench:#c5d6ea;--tint:#b7d0ea;--pr:#1a4a73} .gender-stack{margin-top:0} .gender-stack .rail-sec{margin-top:0} .gender-stack .theme-f{padding-bottom:12px} .gender-stack .theme-m{padding-top:8px} .hero-offer{background:transparent;box-shadow:none} .rail-head{display:flex;align-items:end;justify-content:space-between;padding-bottom:12px} .rail-head h2,.sec-title,.cathead h2{font:700 30px/1.2 'Noto Sans Arabic';margin:0;color:var(--pr)} .hint-swipe{font-size:12px;color:var(--muted)}.hint-swipe:after{content:'←';display:inline-block;margin-inline-start:6px;animation:nudge 1.4s ease-in-out 3} @keyframes nudge{50%{transform:translateX(-7px)}} .rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:10px var(--gut) 36px;margin-inline:calc(var(--gut)*-1);scroll-padding-inline:var(--gut);scrollbar-width:none;direction:rtl} .rail::-webkit-scrollbar{display:none}.rail.drag{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none} .rail{scroll-behavior:auto;-webkit-overflow-scrolling:touch} .offer{flex:0 0 min(310px,78vw);scroll-snap-align:start;scroll-snap-stop:normal;position:relative;backface-visibility:hidden;overflow:hidden;border-radius:3px 5px 3px 4px;background:var(--paper);box-shadow:0 1px 0 #fff9 inset,0 1px 1px var(--tc28,#0b152d30),0 9px 16px -8px var(--tc29,#0b152d55),0 24px 30px -20px var(--tc29,#0b152d55)} .offer:before{content:'';position:absolute;inset-block-start:10px;inset-inline-start:10px;width:11px;height:11px;border:1px solid var(--pr);border-radius:50%;opacity:.55;background:linear-gradient(var(--pr),var(--pr)) 50%/1px 17px no-repeat,linear-gradient(var(--pr),var(--pr)) 50%/17px 1px no-repeat;z-index:2} .tk-top{position:relative;padding:30px 24px 22px;min-height:210px;color:var(--pr);background:var(--tint)} /* V12.10: all package PNGs use the same contained artwork logic as the golden cards. */ .tk-top .shot,.has-shot .tk-top .shot{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);transform:none;object-fit:contain;object-position:center;z-index:1;pointer-events:none;opacity:1;display:block;mix-blend-mode:normal} .has-shot .tk-top:before{display:none} .has-shot .tk-top:after{z-index:1;opacity:1;background:linear-gradient(180deg,#ffffff70 0%,#ffffff26 45%,#ffffff59 100%);-webkit-mask:none;mask:none} .theme-f .has-shot .tk-top:after{background:linear-gradient(180deg,#f1c3c680 0%,#f1c3c62b 45%,#f1c3c66b 100%)} .theme-m .has-shot .tk-top:after{background:linear-gradient(180deg,#bcd6ec80 0%,#bcd6ec2b 45%,#bcd6ec6b 100%)} .tk-top:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.16;background:radial-gradient(var(--pr) 1px,#0000 1.5px) 0 0/6px 6px;-webkit-mask:linear-gradient(200deg,#000,#0000 70%);mask:linear-gradient(200deg,#000,#0000 70%)} .tk-top>*{position:relative;z-index:1} .has-shot .tk-top>*{z-index:2} .sn{display:flex;gap:12px;align-items:center;font:500 12px 'Noto Sans Arabic';letter-spacing:1.5px;opacity:.85;margin-bottom:16px;padding-inline-end:26px} .cat{font-size:12.5px;opacity:.8;margin-bottom:4px} .offer h2{font:700 20px/1.28 'Noto Sans Arabic';margin:0 0 12px;display:-webkit-box;width:100%;max-width:calc(100% - 20px);background:#ffffff99;padding:4px 9px 5px;border-radius:6px;white-space:normal;overflow:hidden;text-overflow:clip;-webkit-line-clamp:2;-webkit-box-orient:vertical} .golden h2{background:var(--tc30,#fff8e8cc)} .price{display:flex;align-items:baseline;gap:12px} .now{font:700 36px/1 'Noto Sans Arabic'}.now small{font:500 13px 'Noto Sans Arabic';margin-inline-start:4px} .old{ display:inline-block; opacity:1; color:#5c4630; font:600 14px/1.2 'Noto Sans Arabic'; text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:#8a3a3a; background:#fff9; padding:3px 8px; border-radius:4px } .stamp{position:absolute!important;inset-inline-end:20px;bottom:16px;width:62px;height:62px;border-radius:50%;display:grid;place-content:center;text-align:center;font:500 12px/1.15 'Noto Sans Arabic';border:2px solid var(--pr);outline:1px solid var(--pr);outline-offset:-6px;transform:rotate(-9deg);opacity:.82;mix-blend-mode:multiply} .stamp b{display:block;font-size:15px} .perf,.tperf{position:relative;height:8px;background:radial-gradient(circle at 4px 4px,var(--bench) 3.2px,#0000 3.4px) 0 0/16px 8px repeat-x} .perf:before,.perf:after,.tperf:before,.tperf:after{content:'';position:absolute;width:20px;height:20px;border-radius:50%;background:var(--bench);box-shadow:inset 0 2px 3px var(--tc31,#0b152d35);top:-6px} .perf:before,.tperf:before{right:-10px}.perf:after,.tperf:after{left:-10px} .tk-bot{padding:20px 24px 24px} .list{list-style:none;margin:0 0 18px;padding:0} .list li{display:flex;align-items:center;gap:11px;padding:8px 0;font-size:14px;border-bottom:1px solid #12392a1c} .ticon{flex:none;width:44px;height:44px;object-fit:contain;background:transparent;padding:0;margin-inline-start:auto} .tcard .ticon{position:absolute;left:8px;top:46px;width:72px;height:72px;margin:0;object-fit:contain} .tcard .tsel{padding-left:84px;min-height:128px;padding-bottom:8px} .check{order:-1;flex:none;width:15px;height:15px;border:1.5px solid var(--ink);display:grid;place-items:center;font-size:12px;font-weight:700;line-height:1} .check{color:var(--ink)!important;transition:none!important;transform:none!important;animation:none!important} .inked .check{color:var(--ink)!important;animation:none!important;transform:none!important} @keyframes ink{from{color:var(--ink)}to{color:var(--ink)}} .giftbox{margin:4px 0 16px;padding:13px;border:1.5px dashed var(--pr);background:#fff8} .giftbox strong{display:block;font:700 15px 'Noto Sans Arabic';margin-bottom:6px;color:var(--pr)} .pick{position:relative;display:flex;align-items:center;gap:10px;font-size:13.5px;padding:8px 10px;margin:3px 0;cursor:pointer;border:1px solid transparent;border-radius:2px;transition:background .2s} .pick input{position:absolute;opacity:0;pointer-events:none} .dot{flex:none;width:16px;height:16px;border:1.5px solid var(--ink);display:grid;place-items:center;font-size:12px;line-height:1;background:#fff8} .pick input:checked+.dot{background:var(--ink);animation:thunk .4s var(--ease)}.pick input:checked+.dot:after{content:'✓';color:#fff} .pick:has(input:checked){background:var(--tint);border-color:var(--pr)} .pick input:focus-visible+.dot{outline:2px solid var(--ink);outline-offset:2px} @keyframes thunk{0%{transform:scale(1.7)}100%{transform:none}} .offer .book{width:100%} .offer:not(.ready) .book{background:transparent;color:var(--ink);border:1.5px dashed var(--ink);box-shadow:none} .offer.ready .book{animation:thunk .4s var(--ease)} .nudge .giftbox{animation:shake .45s;border-style:solid}.nudge .giftbox strong{color:#a12b2b} @keyframes shake{25%{transform:translateX(6px)}50%{transform:translateX(-6px)}75%{transform:translateX(3px)}} .golden{flex:none;width:100%;display:grid;grid-template-columns:minmax(0,.95fr) 6px minmax(0,1.05fr);margin-bottom:8px;box-shadow:0 1px 0 #fff9 inset,0 2px 2px var(--tc32,#3a290a33),0 18px 30px -12px var(--tc33,#3a290a66),0 40px 50px -30px var(--tc33,#3a290a66)} .golden .tk-top{--pr:var(--tc34,#3b2806);min-height:300px;padding:38px 34px 30px;outline:1px solid var(--tc35,#6d4c1180);outline-offset:-10px;background:linear-gradient(105deg,#0000 38%,#fffd 48%,#fff0 58%) var(--sx) 0/260% 100% no-repeat,repeating-linear-gradient(88deg,#0000 0 2px,var(--tc36,#7a55121a) 2px 3px),linear-gradient(135deg,var(--g1),var(--g2) 38%,var(--g1) 58%,var(--g3))} .golden.has-shot .tk-top{background:linear-gradient(105deg,#0000 38%,#fffd 48%,#fff0 58%) var(--sx) 0/260% 100% no-repeat,repeating-linear-gradient(88deg,#0000 0 2px,var(--tc36,#7a55121a) 2px 3px),linear-gradient(135deg,var(--g1),var(--g2) 38%,var(--g1) 58%,var(--g3))!important} .golden.has-shot .shot{z-index:2;mix-blend-mode:normal;object-fit:contain;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px)} .golden.has-shot .tk-top .sn,.golden.has-shot .tk-top .tag,.golden.has-shot .tk-top h2,.golden.has-shot .tk-top .price,.golden.has-shot .tk-top .stamp{position:relative;z-index:4} .golden .tk-top:after{opacity:.07} .golden.has-shot .tk-top:after{z-index:1;opacity:.18;background:linear-gradient(180deg,var(--tc37,#f6e3a150) 0%,var(--tc38,#f6e3a112) 45%,var(--tc39,#f6e3a138) 100%);-webkit-mask:none;mask:none} .golden.inked{animation:sweep 1.7s .35s cubic-bezier(.3,.6,.2,1) backwards} @keyframes sweep{from{--sx:0%}to{--sx:100%}} @media (hover:none){ .golden.inked{animation:sweep 1.25s .15s cubic-bezier(.3,.6,.2,1) both} } .foil{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(105deg,#0000 36%,#fff9 48%,#fff0 60%) var(--sx,100%) 0/240% 100% no-repeat;mix-blend-mode:soft-light} .golden h2{font-size:clamp(26px,4vw,34px);line-height:1.18;max-width:calc(100% - 18px);color:#2a1c08;background:#fff4;padding:4px 10px 6px;-webkit-text-fill-color:#2a1c08;text-shadow:0 1px 0 #fff6} .golden .now{font-size:56px;color:#f4f7fb;-webkit-text-fill-color:#f4f7fb;-webkit-text-stroke:.8px var(--tc40,#1c1408);paint-order:stroke fill;text-shadow:0 1px 1px #0000004d} .golden .now small{color:#2a1c08;-webkit-text-fill-color:#2a1c08;font-size:14px;text-shadow:0 1px 0 #fff8} .golden .old{color:#3d2a10;font-size:15px} .gold-label{font:700 12px 'Noto Sans Arabic';letter-spacing:0;border:0;padding:4px 9px;border-radius:999px;background:#111;color:var(--tc41,#f3d36a);text-shadow:none} .golden .stamp{width:76px;height:76px} .golden .tk-bot{background:var(--tc42,#fff9e5);padding:30px 30px 28px} .golden .perf{height:auto;width:6px;background:radial-gradient(circle,var(--bench) 1.6px,#0000 2px) 0 0/6px 8px repeat-y} .golden .perf:before,.golden .perf:after{inset:auto;left:50%;translate:-50% 0}.golden .perf:before{top:-11px}.golden .perf:after{bottom:-11px} .dots{display:flex;justify-content:center;gap:8px;margin-top:-16px} .dots i{width:7px;height:7px;border-radius:50%;background:var(--bench);box-shadow:inset 0 1px 2px var(--tc43,#0b152d66);transition:width .4s var(--ease),background .3s} .dots i.on{width:22px;border-radius:7px;background:var(--pr);box-shadow:none} .catalog{margin-top:72px;padding-top:26px;border-top:3px double var(--ink)} .cathead{display:flex;justify-content:space-between;align-items:center;gap:12px} .cats{display:flex;gap:6px;flex-wrap:wrap;margin:20px 0} .chip{border:1.5px solid var(--ink);background:transparent;padding:7px 14px;border-radius:2px;font:500 13px 'Noto Sans Arabic';cursor:pointer;color:var(--ink)} .chip.on{background:var(--ink);color:#fff} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px} .card,.testrow{background:var(--paper);box-shadow:0 1px 1px var(--tc28,#0b152d30),0 8px 14px -8px var(--tc44,#0b152d50);padding:14px 16px;border-radius:2px;transition:transform .3s var(--ease),box-shadow .3s} .testrow{display:flex;align-items:center;gap:12px;border:1px solid transparent} .testrow:has(input:checked){transform:translateY(-3px);background:var(--tint);border-color:var(--ink);box-shadow:0 12px 18px -10px var(--tc45,#0b152d70)} .testrow .price .now{font-size:20px} .mixbar{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom));z-index:10;margin-top:16px} .mixinner{background:var(--ink);color:#fff;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-radius:3px;box-shadow:0 14px 30px -8px var(--tc46,#0b152d99);animation:rise .5s var(--ease)} .mixinner .btn-green{background:var(--lime);color:var(--ink);border-color:var(--lime)}.mixinner .info{color:#d5dce8} .info{color:var(--muted);font-size:13px} #branches,#insurance{margin-top:64px} .branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:14px} .bcard{border-top:2px solid var(--ink);padding:14px 0}.bcard span{display:block;color:var(--muted);font-size:13px;margin-top:6px} .info a{color:var(--ink)} footer{border-top:3px double var(--ink);padding:28px 0 36px}.footgrid{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap} .sheet{position:fixed;inset:0;z-index:100;display:grid;align-items:end} .sheet-bg{position:absolute;inset:0;background:#0f2a1f7a;backdrop-filter:blur(5px);animation:fade .35s} .sheet-card{position:relative;background:var(--paper);border-radius:18px 18px 0 0;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;padding:0 0 calc(16px + env(safe-area-inset-bottom));box-shadow:0 -1px 0 #fff inset,0 -18px 44px #0006;animation:rise .6s var(--ease)} .sheet-card:before{display:none} .sheet-handle{flex:none;display:grid;justify-items:center;gap:4px;padding:10px 16px 6px;cursor:grab;touch-action:none} .sheet-handle i{width:46px;height:4px;border-radius:4px;background:#c5ccb8;box-shadow:inset 0 1px 2px var(--tc44,#0b152d50)} .sheet-down{border:1.5px solid var(--ink);background:#fff;width:36px;height:36px;border-radius:50%;font:700 18px/1 sans-serif;cursor:pointer} .sheet-scroll{overflow:auto;padding:8px max(22px,calc((100% - 600px)/2)) 12px;-webkit-overflow-scrolling:touch} .sheet-x{position:absolute;left:16px;top:14px;border:0;background:none;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;padding:6px;z-index:2} .sheet-sum{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:6px 0 18px;margin-bottom:20px;border-bottom:3px double var(--ink);font:700 20px/1.3 'Noto Sans Arabic'} .sheet-sum small{display:block;font:400 13px 'Noto Sans Arabic';color:var(--muted)} .sheet-sum.done b{border:2px solid var(--green);padding:2px 12px;color:var(--green);animation:stamp .5s var(--ease) both} @keyframes stamp{0%{transform:scale(2.2) rotate(-12deg);opacity:0}100%{transform:rotate(-3deg)}} .form{display:grid;gap:16px}.form label{display:grid;gap:2px;font-size:13px;color:var(--muted)} .form input:not([type=checkbox]),.form select{width:100%;padding:10px 2px;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;background:transparent;font:500 16px 'Noto Sans Arabic';color:var(--ink)} .form input:focus,.form select:focus{outline:0;background:var(--tint)} .dates{display:flex;gap:8px}.stepper{display:flex;gap:8px}.stepper button{width:46px;border:1.5px solid var(--ink);background:transparent;font-size:20px;border-radius:2px;color:var(--ink)}.stepper input{text-align:center} .hint,.err{font-size:13px}.err{color:#a12b2b} @keyframes rise{from{transform:translateY(100%)}}@keyframes fade{from{opacity:0}} @media(max-width:760px){:root{--gut:14px}.nav{height:64px}.brand{font-size:15px}.actions a:first-child{display:none}main{padding-top:22px} .rail-head h2,.sec-title,.cathead h2{font-size:25px}.rail-sec{margin-top:40px} .golden{display:block}.golden .perf{height:6px;width:auto;background:radial-gradient(circle,var(--bench) 1.6px,#0000 2px) 0 0/8px 6px repeat-x} .golden .perf:before,.golden .perf:after{inset:auto;translate:none;top:-8px}.golden .perf:before{right:-11px}.golden .perf:after{left:-11px;bottom:auto} .golden .tk-top{min-height:250px;padding:34px 24px 26px}.golden h2{font-size:29px}.golden .now{font-size:50px}.golden .tk-bot{padding:22px 24px 24px}} @media(prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.check{color:var(--ink)}} .form label.pick{display:flex;gap:10px;color:var(--ink);font-size:14px} .rail-sec:empty,.hero-offer:empty{display:none} #testsSec{scroll-margin-top:78px} .fits .hint-swipe,.fits .dots{display:none} body{overflow-x:clip} .sheet-card:focus{outline:0} .loaderr{display:grid;gap:10px;justify-items:start;padding:26px;background:var(--paper);border:1.5px dashed var(--ink);border-radius:3px}.loaderr b{font:700 20px 'Noto Sans Arabic'}.loaderr span{color:var(--muted);font-size:14px} /* ---- text on package PNGs: theme color + hairline edge only ---- */ .has-shot .tk-top .sn,.has-shot .tk-top .cat,.has-shot .tk-top h2,.has-shot .tk-top .now,.has-shot .tk-top .now small{color:var(--pr);-webkit-text-fill-color:currentColor;-webkit-text-stroke:.6px #ffffffb3;paint-order:stroke fill;text-shadow:0 0 1px #ffffffd9,0 0 2px #ffffff59} .has-shot .tk-top .old{background:#ffffffe0;color:#4a3826} .golden.has-shot .tk-top .sn,.golden.has-shot .tk-top .cat,.golden.has-shot .tk-top h2{color:#2a1c08} .golden.has-shot .tk-top .now{color:#f4f7fb;-webkit-text-stroke:.8px var(--tc40,#1c1408);text-shadow:0 1px 1px #0000004d} .golden.has-shot .tk-top .now small{color:#2a1c08} /* ---- individual tests: ticket cards ---- */ .cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:18px calc(var(--gut)*-1);padding:2px var(--gut)} .cats::-webkit-scrollbar{display:none} .chip{flex:none;min-height:44px;padding-inline:18px} .tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-bottom:6px} .tcard{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:3px 5px 3px 4px;background:var(--paper);box-shadow:0 1px 0 #fff9 inset,0 1px 1px var(--tc28,#0b152d30),0 9px 16px -10px var(--tc29,#0b152d55);transition:transform .3s var(--ease),box-shadow .3s} .tsel{position:relative;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:16px 14px 14px;min-height:118px;cursor:pointer;color:var(--pr);transition:background .25s} .tsel input{position:absolute;opacity:0;pointer-events:none} .tcheck{position:absolute;inset-block-start:12px;inset-inline-end:12px;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink);opacity:.35;display:grid;place-items:center;color:#fff;font:700 15px/1 'Noto Sans Arabic';transition:opacity .2s,background .2s} .tsel input:checked+.tcheck{opacity:1;background:var(--ink);animation:thunk .4s var(--ease)} .tsel input:checked+.tcheck:after{content:'✓'} .tsel input:focus-visible+.tcheck{opacity:1;outline:2px solid var(--ink);outline-offset:3px} .tcat{font-size:12px;color:var(--muted);padding-inline-end:36px} .tname{font:700 17px/1.4 'Noto Sans Arabic';padding-inline-end:36px;text-wrap:balance} .tfast{margin-top:6px;padding:1px 10px;border:1.5px solid var(--pr);border-radius:999px;font:600 12px/1.6 'Noto Sans Arabic';transform:rotate(-2deg)} .tnote{margin-top:auto;padding-top:8px;font-size:12px;color:var(--muted)} .tperf{position:relative;height:6px;background:radial-gradient(circle,var(--bench) 1.6px,#0000 2px) 0 0/8px 6px repeat-x} .tperf:before,.tperf:after{content:'';position:absolute;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--bench);box-shadow:inset 0 2px 3px var(--tc47,#0b152d40)} .tperf:before{right:-8px}.tperf:after{left:-8px} .tfoot{display:grid;gap:10px;padding:10px 14px 14px} .tprice{display:flex;align-items:baseline;gap:4px;color:var(--pr)}.tprice b{font:700 26px/1 'Noto Sans Arabic'}.tprice small{font:500 12px 'Noto Sans Arabic'} .tone{width:100%;min-height:44px;padding:8px} .tcard.on{transform:translateY(-3px);outline:2px solid var(--ink);box-shadow:0 1px 0 #fff9 inset,0 14px 20px -10px var(--tc45,#0b152d70)} .tcard.on .tsel{background:var(--tint)} @media(min-width:720px){.tgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.cats{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}} /* sticky total bar */ .mixbar{position:fixed;inset-inline:0;bottom:calc(10px + env(safe-area-inset-bottom));margin:0;z-index:30;pointer-events:none} .mixinner{pointer-events:auto;gap:10px} .mixtxt{flex:1;min-width:0;display:grid;line-height:1.35;font-size:13px}.mixtxt b{font:700 22px/1.2 'Noto Sans Arabic'} .mixclear{min-height:44px;padding:0 8px;border:0;background:none;color:#d5dce8;font:500 13px 'Noto Sans Arabic';text-decoration:underline;cursor:pointer} body.has-mix{padding-bottom:96px} /* tap targets in the booking sheet */ .btn,.stepper button,.form select,.form input:not([type=checkbox]){min-height:44px} .sheet-x,.sheet-down{min-height:44px;min-width:44px} .sheet-card{max-height:80vh;max-height:80dvh} .tk-top .sn,.tk-top .cat,.tk-top h2,.tk-top .now,.tk-top .old,.tk-top .gold-label{position:relative;z-index:4} .tk-top .cat{display:inline-block;background:var(--tc48,#fff9e8d9);color:var(--pr);padding:2px 8px;border-radius:5px;opacity:1} .offer h2{background:#ffffff8f;color:var(--pr);padding:3px 9px 4px;border-radius:6px;margin:4px 0 10px;max-width:calc(100% - 70px);font:700 20px/1.25 'Noto Sans Arabic';white-space:nowrap} .now{display:inline-flex;align-items:baseline;gap:4px;background:var(--tc49,#fff8e8ee);color:var(--pr);padding:4px 10px 6px;border-radius:8px;-webkit-text-fill-color:var(--pr);-webkit-text-stroke:0;text-shadow:none} .golden h2{background:var(--tc50,#fff6d89c);color:var(--tc34,#3b2806)} .golden .now,.golden.has-shot .tk-top .now,.has-shot .tk-top .now{ background:var(--tc51,#f3e2b6f2);color:var(--tc34,#3b2806);-webkit-text-fill-color:var(--tc34,#3b2806);-webkit-text-stroke:0;text-shadow:none;font-size:40px } .golden .now small,.golden.has-shot .tk-top .now small{color:var(--tc34,#3b2806);-webkit-text-fill-color:var(--tc34,#3b2806);text-shadow:none} .tk-top .gold-label{background:var(--tc34,#3b2806);color:var(--tc41,#f3d36a)} .golden .stamp{width:56px;height:56px;inset-inline-end:14px;bottom:12px;z-index:4} .tfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 12px} .pick-btn{flex:1;min-height:40px;border:1.5px solid var(--ink);background:#fff0;color:var(--ink);font:700 15px 'Noto Sans Arabic';border-radius:4px} .tcard.on .pick-btn{background:var(--ink);color:#fff} .tprice{display:flex;align-items:baseline;gap:4px;font:700 22px 'Noto Sans Arabic';white-space:nowrap} .tprice small{font:500 12px 'Noto Sans Arabic'} .theme-y{padding-bottom:18px} .gender-stack .theme-f{padding-top:16px} .offer:not(.golden){height:min(620px,78vh);display:flex;flex-direction:column} .offer:not(.golden) .tk-top{flex:none;min-height:150px;padding:22px 18px 16px} .offer:not(.golden) .tk-bot{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 14px 14px} .offer:not(.golden) .list-wrap{flex:0 1 auto;max-height:210px;min-height:0;overflow-y:hidden;overflow-x:hidden;touch-action:pan-x} .offer:not(.golden) [data-book]{flex:none;margin-top:auto} .more-in{display:block;width:100%;margin:4px 0 8px;border:0;background:transparent;color:var(--pr);font:700 13px 'Noto Sans Arabic';text-decoration:underline;text-underline-offset:3px;cursor:pointer} .more-in[hidden]{display:none} .offer:not(.golden) .list-wrap{flex:0 1 auto;max-height:210px;overflow-y:auto} .offer.split .list{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;position:relative;margin:0} .offer.split .list:before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:1px;background:var(--tc9,#0e1c3d26)} .offer.split .list li{padding:6px 4px;font-size:13px;gap:7px} .offer.split .list .ticon{display:none} .offer.gift-split .gift-wrap{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;max-height:76px;overflow-y:auto} .offer.gift-split .pick{margin:0;padding:6px 4px;font-size:12.5px} .offer:not(.golden) .list-wrap{position:relative;max-height:248px} .offer.split .list{display:grid;grid-template-columns:1fr 1fr;column-gap:12px} .offer.split .list .ticon{display:none} .pulse-more{position:sticky;bottom:4px;left:50%;transform:translateX(-50%);z-index:3;width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:var(--pr);font:700 18px/1 sans-serif;box-shadow:0 2px 8px var(--tc52,#0b152d33);display:grid;place-items:center;animation:pump 1.1s ease-in-out infinite} .pulse-more[hidden]{display:none} @keyframes pump{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.18)}} .gift-wrap{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;max-height:64px;overflow:auto;margin:6px 0 4px;padding:0 2px} .bookrow{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;border:1.5px dashed var(--pr);border-radius:6px;padding:5px 8px;min-height:42px;background:#fff8} .bookrow .book,.bookrow .book-mini{width:auto!important;flex:0 0 auto;margin:0;padding:7px 12px;font:700 13px 'Noto Sans Arabic';border:0;border-radius:4px;background:linear-gradient(135deg,var(--g1),var(--g2));color:var(--tc25,#2f2107)} .gift-cta{flex:1;text-align:start;font:700 13px 'Noto Sans Arabic';color:var(--pr);line-height:1.3} .nudge .gift-wrap,.nudge .bookrow{animation:shake .45s} .nudge .gift-cta{color:#a12b2b} .nudge .gift-wrap{outline:2px solid #a12b2b;outline-offset:2px;border-radius:6px} .offer.ready .bookrow{box-shadow:0 0 0 2px #2f9e5a55} .offer.ready .book-mini,.offer.ready .book{animation:thunk .4s var(--ease)} .gift-wrap.giftbox{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;max-height:72px;overflow:auto;margin:6px 0 4px;padding:8px;border:1.5px dashed var(--pr);background:#fff8} .nudge .gift-wrap.giftbox{animation:shake .45s;border-style:solid;border-color:#a12b2b} .nudge .bookrow{animation:shake .45s;border-color:#a12b2b} .offer.ready .book-mini,.offer.ready .bookrow .book{animation:thunk .4s var(--ease)} .book.wait-gift{background:#c5c0b4!important;color:#3a3428!important;border-color:#8a8478!important;box-shadow:none} .offer.ready .book.wait-gift{background:linear-gradient(135deg,var(--g1),var(--g2))!important;color:var(--tc25,#2f2107)!important;border-color:var(--tc26,#7c5a14)!important} .nudge .book{animation:shake .45s} .offer:not(.golden) .book{width:100%} .bookrow{display:none} .offer:not(.golden) .giftbox.gift-wrap{display:grid;grid-template-columns:1fr 1fr} .gift-list{margin:8px 0 10px;padding:0;list-style:none;border-top:1px dashed #b07a2a88} .gift-list li{padding:6px 4px;font-size:13px;border-bottom:1px solid #b07a2a22} .gpick{display:flex;align-items:center;gap:7px;cursor:pointer;color:#8a4a12;font-weight:700} .gpick input{position:absolute;opacity:0;pointer-events:none} .gbox{flex:none;width:15px;height:15px;border:1.6px solid #c47a16;background:#fff0;display:grid;place-items:center;animation:ghint 1.2s ease-in-out infinite} .gpick input:checked + .gbox{background:#c47a16;animation:none;color:#fff} .gpick input:checked + .gbox:after{content:"✓";font:700 11px/1 sans-serif} @keyframes ghint{0%,100%{transform:translateX(0) scale(1);box-shadow:0 0 0 0 #c47a1600}18%{transform:translateX(-2px) scale(1.02)}36%{transform:translateX(3px) scale(1.04);box-shadow:0 0 0 3px #c47a161f}54%{transform:translateX(-2px) scale(1.02)}72%{transform:translateX(1px) scale(1.01)}100%{transform:translateX(0) scale(1);box-shadow:0 0 0 0 #c47a1600}} .offer.split .gift-list{display:grid;grid-template-columns:1fr 1fr;column-gap:12px} .gift-list,.gift-wrap.giftbox,.gift-list.giftbox{border:0!important;background:transparent!important;padding:0!important;margin:2px 0 8px!important;max-height:none!important;box-shadow:none!important;outline:none!important} .gift-list li{border-bottom:1px solid #12392a14} /* ---- package rail consistency + long-title fixes ---- */ .offer, .golden{ flex:0 0 min(310px,78vw)!important; width:auto!important; height:min(620px,78vh)!important; display:flex!important; flex-direction:column!important; } .offer .tk-top{flex:none} .offer .tk-bot{flex:1;min-height:0;display:flex;flex-direction:column} .golden .tk-top{min-height:150px!important;height:180px!important;padding:22px 18px 16px!important} .golden .tk-bot{flex:1;min-height:0;padding:14px 14px 14px!important} .golden .perf{height:8px!important;width:auto!important;background:radial-gradient(circle at 4px 4px,var(--bench) 3.2px,#0000 3.4px) 0 0/16px 8px repeat-x!important} /* Two-line package names: keep the header compact while allowing long names to remain readable. */ .offer h2{ white-space:normal!important; display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; overflow:hidden!important; text-overflow:clip!important; width:100%!important; max-width:calc(100% - 18px)!important; min-height:0!important; margin:4px 0 10px!important; padding:0!important; font:700 clamp(17px,5vw,20px)/1.22 'Noto Sans Arabic'!important; } .offer h2 .title-badge{ display:inline!important; padding:.08em .34em .14em!important; border-radius:7px!important; background:rgba(255,255,255,.45)!important; -webkit-box-decoration-break:clone; box-decoration-break:clone; -webkit-text-fill-color:currentColor; } .golden h2{ font-size:clamp(17px,5vw,21px)!important; line-height:1.22!important; min-height:0!important; max-width:calc(100% - 18px)!important; } .golden h2 .title-badge{ background:var(--tc53,rgba(255,248,232,.55))!important; text-shadow:0 1px 0 rgba(255,255,255,.38)!important; } /* The golden rail can still have multiple tickets on wider screens; keep the affordance visible. */ #goldenRail.fits .hint-swipe{display:inline!important} #goldenRail.fits .dots{display:flex!important} @media(max-width:760px){ .offer,.golden{flex-basis:min(310px,78vw)!important;height:min(620px,78vh)!important} .golden .tk-top{height:170px!important;min-height:170px!important;padding:20px 18px 14px!important} .golden .tk-bot{padding:12px 14px 14px!important} } /* ===== FINAL PACKAGE CARD LAYOUT: one authoritative rule set ===== */ .rail{align-items:stretch!important} .offer,.golden{ flex:0 0 min(310px,78vw)!important; width:min(310px,78vw)!important; height:620px!important; min-height:620px!important; max-height:620px!important; display:flex!important; flex-direction:column!important; align-self:stretch!important; overflow:hidden!important; } .offer .tk-top,.golden .tk-top{ flex:0 0 180px!important; height:180px!important; min-height:180px!important; max-height:180px!important; position:relative!important; } .offer .tk-bot,.golden .tk-bot{ flex:1 1 auto!important; min-height:0!important; display:flex!important; flex-direction:column!important; overflow:hidden!important; } .offer .list-wrap,.golden .list-wrap{ flex:1 1 auto!important; min-height:0!important; max-height:none!important; overflow-y:auto!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch!important; overscroll-behavior:contain!important; } .offer .list-wrap .pulse-more,.golden .list-wrap .pulse-more{z-index:5} .offer .list,.golden .list{margin:0!important} .offer [data-book],.golden [data-book]{ flex:0 0 auto!important; width:100%!important; min-height:44px!important; margin:12px 0 0!important; } /* A gift chooser occupies only its real content. The test list gets all remaining room. */ .offer .gift-wrap,.golden .gift-wrap{ flex:0 0 auto!important; max-height:84px!important; overflow-y:auto!important; overflow-x:hidden!important; } /* The title background belongs only to the text itself, never the full heading box. */ .offer h2,.golden h2{ background:transparent!important; padding:0!important; border-radius:0!important; width:100%!important; max-width:calc(100% - 18px)!important; margin:4px 0 10px!important; white-space:normal!important; display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; overflow:hidden!important; text-overflow:clip!important; font:700 clamp(16px,4.9vw,20px)/1.22 'Noto Sans Arabic'!important; } .offer h2 .title-badge,.golden h2 .title-badge{ display:inline!important; background:rgba(255,255,255,.46)!important; padding:.08em .38em .14em!important; border-radius:7px!important; -webkit-box-decoration-break:clone!important; box-decoration-break:clone!important; -webkit-text-fill-color:currentColor!important; box-shadow:none!important; } .golden h2 .title-badge{background:var(--tc54,rgba(255,248,232,.48))!important} /* Keep the gold ticket visually special without changing its geometry. */ .golden .tk-bot{padding:14px 14px 14px!important} .golden .list-wrap{padding-inline:0!important} .golden [data-book]{margin-top:12px!important} /* Stable compositing for ticket artwork while scrolling. */ .tk-top .shot{transform:translateZ(0);backface-visibility:hidden;will-change:auto} .golden .foil{will-change:auto} /* Do not animate/relayout the cards while a user is scrolling horizontally. */ .rail{contain:layout style!important} .offer{contain:layout style!important} @media(max-width:760px){ .offer,.golden{ flex-basis:min(310px,78vw)!important; width:min(310px,78vw)!important; height:620px!important; min-height:620px!important; max-height:620px!important; } .offer .tk-top,.golden .tk-top{ flex-basis:180px!important; height:180px!important; min-height:180px!important; max-height:180px!important; padding:20px 18px 14px!important; } .offer h2,.golden h2{font-size:clamp(16px,4.9vw,20px)!important;line-height:1.22!important} } /* ===== FINAL PACKAGE GEOMETRY + GESTURE LAYER ===== */ .offer,.golden{ box-sizing:border-box!important; flex:0 0 min(310px,78vw)!important; width:min(310px,78vw)!important; height:620px!important; min-height:620px!important; max-height:620px!important; display:flex!important; flex-direction:column!important; align-self:stretch!important; overflow:hidden!important; } .rail{align-items:stretch!important;touch-action:pan-y!important;} .offer .tk-top,.golden .tk-top{ flex:0 0 180px!important; height:180px!important; min-height:180px!important; max-height:180px!important; } .offer .tk-bot,.golden .tk-bot{ flex:1 1 auto!important; min-height:0!important; display:flex!important; flex-direction:column!important; overflow:hidden!important; } .offer .list-wrap,.golden .list-wrap{ flex:1 1 auto!important; min-height:0!important; max-height:none!important; overflow-y:auto!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch!important; overscroll-behavior-x:contain!important; touch-action:pan-y!important; } .offer [data-book],.golden [data-book]{ flex:0 0 auto!important; width:100%!important; min-height:44px!important; margin:12px 0 0!important; } .offer .gift-wrap,.golden .gift-wrap{ flex:0 0 auto!important; max-height:84px!important; overflow-y:auto!important; overflow-x:hidden!important; } /* One background box around the entire title. It wraps naturally to two lines without cloning/overlapping a background on each line. */ .offer h2,.golden h2{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; width:fit-content!important; max-width:calc(100% - 18px)!important; min-width:0!important; white-space:normal!important; overflow:hidden!important; text-overflow:clip!important; margin:4px 0 10px!important; padding:4px 10px 6px!important; border-radius:7px!important; background:rgba(255,255,255,.38)!important; line-height:1.22!important; font:700 clamp(17px,4.9vw,21px)/1.22 'Noto Sans Arabic'!important; box-decoration-break:slice!important; -webkit-box-decoration-break:slice!important; } .golden h2{background:var(--tc55,rgba(255,248,232,.44))!important;color:#2a1c08!important;} /* Prevent the artwork itself from being re-rasterized/animated during scroll. */ .tk-top .shot{ transform:translate3d(0,0,0)!important; backface-visibility:hidden!important; -webkit-backface-visibility:hidden!important; will-change:auto!important; } .golden .foil{will-change:auto!important;} .offer,.golden{contain:layout style!important;} @media(max-width:760px){ .offer,.golden{ flex-basis:min(310px,78vw)!important; width:min(310px,78vw)!important; height:620px!important; min-height:620px!important; max-height:620px!important; } .offer .tk-top,.golden .tk-top{ flex-basis:180px!important; height:180px!important; min-height:180px!important; max-height:180px!important; } } /* ===== FINAL V4 PACKAGE GEOMETRY ===== */ .rail{align-items:stretch!important;touch-action:pan-y!important;} .offer,.golden{ box-sizing:border-box!important; flex:0 0 310px!important; width:310px!important; height:620px!important; min-height:620px!important; max-height:620px!important; display:flex!important; flex-direction:column!important; align-self:stretch!important; overflow:hidden!important; touch-action:pan-y!important; } .offer .tk-top,.golden .tk-top{ flex:0 0 180px!important; width:100%!important; height:180px!important; min-height:180px!important; max-height:180px!important; overflow:hidden!important; touch-action:pan-y!important; } .offer .tk-bot,.golden .tk-bot{ flex:1 1 auto!important; min-height:0!important; display:flex!important; flex-direction:column!important; overflow:hidden!important; touch-action:pan-y!important; } .offer .list-wrap,.golden .list-wrap{ flex:1 1 auto!important; min-height:0!important; max-height:none!important; overflow-y:auto!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch!important; overscroll-behavior:contain!important; touch-action:pan-y!important; } .offer .list,.golden .list{margin:0!important;} /* Booking controls live in one fixed footer area on every ticket. */ .offer .card-bottom,.golden .card-bottom{ flex:0 0 auto!important; min-height:0!important; display:flex!important; flex-direction:column!important; width:100%!important; margin:0!important; padding:0!important; } .offer .card-bottom .gift-wrap,.golden .card-bottom .gift-wrap{ flex:0 0 auto!important; max-height:84px!important; overflow-y:auto!important; overflow-x:hidden!important; margin:0 0 8px!important; } .offer .card-bottom [data-book],.golden .card-bottom [data-book]{ flex:0 0 48px!important; width:100%!important; min-height:48px!important; max-height:48px!important; margin:0!important; } /* A package without free tests gives all spare vertical room to the test list. */ .offer:not(.golden) .card-bottom:has(.gift-wrap:empty), .offer.golden .card-bottom:has(.gift-wrap:empty){padding:0!important;} /* Single translucent title box; long names wrap inside the same box. */ .offer h2,.golden h2{ display:inline-block!important; vertical-align:top!important; box-sizing:border-box!important; width:auto!important; max-width:calc(100% - 18px)!important; min-width:0!important; margin:4px 0 10px!important; padding:4px 10px 6px!important; border-radius:7px!important; background:rgba(255,255,255,.40)!important; white-space:normal!important; overflow:hidden!important; text-overflow:clip!important; overflow-wrap:anywhere!important; word-break:normal!important; font:700 clamp(17px,4.9vw,21px)/1.22 'Noto Sans Arabic'!important; -webkit-line-clamp:2!important; text-align:right!important; box-shadow:none!important; } .golden h2{background:var(--tc56,rgba(255,248,232,.46))!important;color:#2a1c08!important;} .offer h2 .title-badge,.golden h2 .title-badge{ display:inline!important; background:transparent!important; padding:0!important; box-shadow:none!important; } /* Do not let a touch on the artwork/title steal vertical scrolling. */ .offer .sn,.offer .gold-label,.offer h2,.offer .price,.offer .stamp,.golden .sn,.golden .gold-label,.golden h2,.golden .price,.golden .stamp{touch-action:pan-y!important;} /* Keep the artwork stable and avoid raster/paint churn while swiping. */ .tk-top .shot{transform:translate3d(0,0,0)!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;will-change:auto!important;} .golden .foil{will-change:auto!important;} .rail,.offer,.golden{contain:layout style!important;} @media(max-width:760px){ .offer,.golden{ flex-basis:310px!important; width:310px!important; height:620px!important; min-height:620px!important; max-height:620px!important; } } /* ===== RESTORED ORIGINAL PACKAGE RAIL / CARD BEHAVIOUR ===== Keep the browser in charge of touch scrolling. The rail accepts both horizontal and vertical gestures, while each package keeps one stable footer at the bottom. No pointer-driven scrollLeft manipulation. */ .rail { overflow-x:auto!important; overflow-y:visible!important; scroll-snap-type:x mandatory!important; scroll-snap-stop:normal!important; scroll-behavior:auto!important; -webkit-overflow-scrolling:touch!important; touch-action:pan-x pan-y!important; overscroll-behavior-x:contain!important; overscroll-behavior-y:auto!important; } .offer,.golden { scroll-snap-align:start!important; scroll-snap-stop:normal!important; touch-action:pan-x pan-y!important; } .offer .tk-top,.golden .tk-top, .offer .tk-bot,.golden .tk-bot, .offer .list,.golden .list, .offer li,.golden li, .offer .list-wrap,.golden .list-wrap { touch-action:pan-x pan-y!important; } .offer .list-wrap,.golden .list-wrap { overscroll-behavior:auto!important; } .rail.drag { scroll-snap-type:x mandatory!important; scroll-behavior:auto!important; cursor:default!important; } /* The test area fills the card; the booking footer therefore stays at the exact same bottom position on every package regardless of test count. */ .offer .included-tests,.golden .included-tests { flex:1 1 auto!important; min-height:0!important; display:flex!important; flex-direction:column!important; } .offer .included-tests-title,.golden .included-tests-title { flex:0 0 auto!important; } /* V32: single-line package counts + compact free-choice heading. */ .included-tests-title{ display:flex!important; align-items:center!important; justify-content:center!important; flex-wrap:nowrap!important; white-space:nowrap!important; overflow:hidden!important; font-size:11px!important; line-height:1.2!important; gap:2px!important; } .included-tests-title .included-count{ flex:0 0 auto!important; min-width:1.45em!important; padding:1px 5px!important; margin:0!important; font-size:1em!important; line-height:1.15!important; } .included-tests-title .included-free-text{ display:inline-flex!important; align-items:center!important; gap:2px!important; white-space:nowrap!important; flex:0 0 auto!important; } .gift-selection{ padding:7px 10px!important; margin-top:8px!important; } .gift-selection-title{ display:block!important; margin:0 0 4px!important; white-space:nowrap!important; } .gift-selection-title b{ display:block!important; font-size:12px!important; line-height:1.2!important; white-space:nowrap!important; } .gift-selection-title span{display:none!important;} /* V31: compact package test count, eye-catching numbers without increasing the heading size. */ .included-tests-title { white-space:normal!important; font-size:inherit!important; line-height:1.35!important; } .included-tests-title .included-count { display:inline-block!important; min-width:1.55em!important; padding:1px 6px!important; margin:0 2px!important; border-radius:8px!important; font-size:1.08em!important; font-weight:900!important; line-height:1.25!important; color:var(--tc2,#0e1d3e)!important; background:#eef4d8!important; border:1px solid rgba(18,58,41,.18)!important; vertical-align:middle!important; text-align:center!important; } .included-tests-title .included-free-text { white-space:nowrap!important; } .included-tests-title .included-free-count { background:var(--tc57,#fff1bf)!important; border-color:var(--tc58,rgba(170,125,20,.25))!important; } .included-tests-title .included-total-count { background:#e5f2e9!important; } .offer .included-tests .list-wrap,.golden .included-tests .list-wrap { flex:1 1 auto!important; min-height:0!important; } .offer .card-bottom,.golden .card-bottom { flex:0 0 auto!important; margin-top:auto!important; width:100%!important; } .offer .card-bottom [data-book],.golden .card-bottom [data-book] { flex:0 0 48px!important; height:48px!important; min-height:48px!important; max-height:48px!important; width:100%!important; margin:0!important; } /* FINAL CHECKMARK RULES */ .check,.offer .check,.golden .check{color:var(--ink)!important;opacity:1!important;visibility:visible!important;animation:none!important;transition:none!important;transform:none!important;} .inked .check{color:var(--ink)!important;animation:none!important;transform:none!important;} /* Only the free-test chooser gets the attention animation. */ .gpick .gbox{animation:ghint 1.35s ease-in-out infinite!important;transform-origin:center;} .gpick input:checked + .gbox{animation:none!important;transform:none!important;box-shadow:none!important;color:#fff!important;} /* New package-row themes + temporary offer countdown */ .theme-e,.theme-t{background:var(--bench);box-shadow:0 0 0 100vmax var(--bench);clip-path:inset(0 -100vmax);padding-block:28px 22px} .theme-e{--bench:#ddd4f0;--tint:#d4c6ef;--pr:#5c3f86} .theme-t{--bench:var(--tc59,#f3e2b4);--tint:var(--tc60,#f0d89a);--pr:var(--tc26,#7c5a14)} .theme-e .has-shot .tk-top:after{background:linear-gradient(180deg,#d8c9ef88 0%,#d8c9ef33 45%,#d8c9ef70 100%)} .theme-t .has-shot .tk-top:after{background:linear-gradient(180deg,var(--tc61,#f0d89a88) 0%,var(--tc62,#f0d89a33) 45%,var(--tc63,#f0d89a70) 100%)} .temporary-badge{position:absolute!important;inset-inline-start:16px;bottom:14px;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:92px;padding:6px 10px;border:1.5px solid var(--pr);border-radius:9px;background:var(--tc64,#fff9e8e8);color:var(--pr);font:700 11px/1.2 'Noto Sans Arabic';box-shadow:0 3px 10px var(--tc65,#0b152d22);transform:rotate(-2deg)} .temporary-badge b{font:800 15px/1.25 'Noto Sans Arabic';letter-spacing:.4px} /* V10 branch direction action */ .branch-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.branch-direction{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 11px;border:1px solid #D7DFD2;border-radius:10px;background:#F8FAF5;color:#344238;box-shadow:none;font:700 11px/1.2 'Noto Sans Arabic';transition:background .18s ease,border-color .18s ease,transform .18s ease}.branch-direction:hover{background:#EEF3E9;border-color:#C6D1C0;transform:translateY(-1px)}.branch-direction:active{transform:translateY(0)}.branch-direction-icon{font-size:15px;line-height:1;opacity:.78}.bcard>.branch-card-top>div{min-width:0} /* V11: separate package components from customer-selectable free options */ .included-tests-title{font-size:12px;font-weight:800;color:var(--muted);margin:0 0 6px}.gift-selection{margin-top:10px;padding:10px 12px;border:1px solid #B9E6CA;background:#F7FCF8;border-radius:13px}.gift-selection-title{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:5px}.gift-selection-title span{font-size:11px;color:var(--muted)} /* ===== RESTORED ORIGINAL PACKAGE FOOTER POSITION ===== */ .offer .included-tests,.golden .included-tests { flex:1 1 auto!important; min-height:0!important; display:flex!important; flex-direction:column!important; } .offer .included-tests-title,.golden .included-tests-title { flex:0 0 auto!important; } .offer .included-tests .list-wrap,.golden .included-tests .list-wrap { flex:1 1 auto!important; min-height:0!important; } .offer .card-bottom,.golden .card-bottom { flex:0 0 auto!important; margin-top:auto!important; width:100%!important; } .offer .card-bottom [data-book],.golden .card-bottom [data-book] { flex:0 0 48px!important; height:48px!important; min-height:48px!important; max-height:48px!important; width:100%!important; margin:0!important; } /* V12.3: free-test overflow affordance */ .gift-selection .gift-more{margin:2px auto 0!important;position:relative!important;bottom:auto!important;transform:none!important;} /* ===== V13: one header/body logic for every card + lightweight skeleton + entrance ===== */ /* --- Header: artwork fills the 180px panel; badges float at the top, title+price sit together in one caption anchored to the bottom. Works the same whether the card has a PNG (.has-shot) or a plain tinted background. */ .tk-top{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;padding:14px 16px 12px!important} .tk-badges{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:6px!important;margin:0!important;padding:0!important} .tk-caption{margin-top:auto!important;padding-top:8px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:4px!important;max-width:100%!important;min-width:0!important} .tk-caption h2,.tk-caption .price{margin:0!important} /* Badges: one pill language for serial / gold / temporary / fasting-stamp */ .tk-badges .sn{display:inline-flex!important;align-items:center!important;gap:0!important;margin:0!important;padding:3px 9px!important;border-radius:999px!important;background:#ffffffb3!important;font:600 11px/1.1 'Noto Sans Arabic'!important;letter-spacing:.3px!important;opacity:1!important} .golden .tk-badges .sn{background:var(--tc66,#fff8e0b8)!important} .tk-badges .gold-label{margin:0!important;padding:3px 9px!important} .tk-badges .temporary-badge{position:static!important;inset:auto!important;flex-direction:row!important;min-width:0!important;gap:4px!important;padding:3px 9px!important;margin:0!important;border-radius:999px!important;transform:none!important;box-shadow:none!important;font:700 11px/1.1 'Noto Sans Arabic'!important} .tk-badges .temporary-badge b{font:800 11px/1.1 'Noto Sans Arabic'!important;letter-spacing:.2px!important} .tk-badges .stamp{position:static!important;inset:auto!important;width:auto!important;height:auto!important;border-radius:999px!important;outline:none!important;transform:none!important;mix-blend-mode:normal!important;opacity:1!important;padding:3px 9px!important;margin:0!important;display:inline-flex!important;align-items:center!important;gap:4px!important;font:600 11px/1.1 'Noto Sans Arabic'!important;background:#ffffffb3!important;border:1.5px solid var(--pr)!important} .golden .tk-badges .stamp{background:var(--tc66,#fff8e0b8)!important} .tk-badges .stamp b{display:inline!important;font-size:11px!important} .has-shot .tk-top .tk-badges .sn,.has-shot .tk-top .tk-badges .stamp{-webkit-text-stroke:0!important;text-shadow:none!important;color:var(--pr)!important;-webkit-text-fill-color:var(--pr)!important} /* --- One scrollable test list for every card: real inertial scroll, and once you hit the top/bottom of the list the gesture hands off to the page. */ .offer .list-wrap,.golden .list-wrap{-webkit-overflow-scrolling:touch!important;overscroll-behavior:auto!important;scroll-behavior:auto!important} .offer .gift-wrap,.golden .gift-wrap{-webkit-overflow-scrolling:touch!important;overscroll-behavior:auto!important} /* Individual test cards keep their own grid size — only the offer/golden cards are forced to one shared footprint. */ .tgrid .tcard{height:auto} /* --- Skeleton placeholders shown instantly (pure HTML/CSS, no JS timing) so the first paint never looks frozen; they are simply overwritten the moment real content is rendered, so there is nothing to toggle or observe. */ @keyframes skeletonPulse{0%,100%{opacity:.5}50%{opacity:1}} .skeleton-rail{display:flex;gap:16px;overflow:hidden;padding:10px var(--gut) 36px;margin-inline:calc(var(--gut)*-1)} .skeleton-card{flex:0 0 310px;width:310px;height:620px;border-radius:3px 5px 3px 4px;background:linear-gradient(180deg,var(--tc67,#0b152d14),var(--tc68,#0b152d08));box-shadow:0 1px 1px var(--tc28,#0b152d30),0 9px 16px -8px var(--tc29,#0b152d55);animation:skeletonPulse 1.4s ease-in-out infinite} .skeleton-card.is-golden{background:linear-gradient(135deg,var(--tc69,#f6e3a166),var(--tc70,#a87a1d33))} .skeleton-tcard{border-radius:3px 5px 3px 4px;min-height:190px;background:linear-gradient(180deg,var(--tc67,#0b152d14),var(--tc68,#0b152d08));box-shadow:0 1px 1px var(--tc28,#0b152d30);animation:skeletonPulse 1.4s ease-in-out infinite} /* --- A calm, one-shot entrance for freshly rendered cards. This is a plain CSS mount animation (fires once when the element is inserted) — nothing is re-triggered by scrolling or swiping, so it cannot flicker or fight touch gestures. */ @keyframes cardMount{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .rail .offer,.tgrid .tcard{animation:cardMount .4s cubic-bezier(.16,1,.3,1) both} @media(prefers-reduced-motion:reduce){.skeleton-card,.skeleton-tcard{animation:none!important}} /* V14: uploaded site logo is a real PNG, not a circular letter badge */ .logo-slot{display:grid!important;place-items:center!important;overflow:hidden!important;outline:none!important;border:0!important}.logo-slot img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}.logo-slot:has(img:not([hidden])){background:transparent!important}.logo-slot:has(img:not([hidden])) .logo-letter{display:none} /* V24: full-screen boot loader — replaces the small inline note + emoji trio. Pure SVG/CSS (no images, no external assets): a soft glass card with a spinning gradient ring and a heartbeat/EKG line drawing itself on loop, bigger Arabic copy underneath. Fades out the moment the catalog resolves (success or error) via .boot-done, then app.js removes it from the DOM. */ .boot-loader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;background:radial-gradient(120% 120% at 50% 40%,#fff 0%,var(--bench) 70%);transition:opacity .45s ease,visibility .45s ease} .boot-loader.boot-done{opacity:0;visibility:hidden;pointer-events:none} .boot-orb{position:relative;width:132px;height:132px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:#ffffffc9;box-shadow:0 1px 1px var(--tc71,#0b152d20),0 24px 48px -20px var(--tc47,#0b152d40),inset 0 0 0 1px #ffffff;backdrop-filter:blur(6px)} .boot-ring{position:absolute;inset:0;width:100%;height:100%;animation:bootSpin 1.6s linear infinite} .boot-ring circle{fill:none;stroke:url(#bootGrad);stroke-width:5;stroke-linecap:round;stroke-dasharray:66 198;transform-origin:50px 50px} .boot-pulse{width:74%;overflow:visible} .boot-pulse polyline{fill:none;stroke:#ff6f61;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:176;stroke-dashoffset:176;animation:bootPulse 2.6s ease-in-out infinite} @keyframes bootSpin{to{transform:rotate(360deg)}} @keyframes bootPulse{0%{stroke-dashoffset:176}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-176}} .boot-brand{margin:0;display:flex;flex-direction:column;align-items:center;gap:5px} .boot-brand b{font:800 22px/1.3 'Noto Sans Arabic';color:var(--pr)} .boot-brand span{font:500 14px/1.5 'Noto Sans Arabic';color:var(--muted)} .boot-text{margin:0;text-align:center;font:700 16px/1.6 'Noto Sans Arabic';color:var(--pr);opacity:.82} .boot-text span{display:block;margin-top:3px;font:500 13px/1.5 'Noto Sans Arabic';color:var(--muted)} @media(max-width:480px){.boot-orb{width:108px;height:108px}.boot-brand b{font-size:19px}.boot-text{font-size:14px}.boot-text span{font-size:12px}} @media(prefers-reduced-motion:reduce){.boot-ring,.boot-pulse polyline{animation:none!important}.boot-pulse polyline{stroke-dashoffset:0!important}} @media(prefers-reduced-motion:reduce){.category-nav-choice .choice-arrow{animation:none}} /* V33: package count line. Free-test variant is deliberately smaller so the entire message stays on one line. */ .included-tests-title{ white-space:nowrap!important; overflow:hidden!important; text-overflow:clip!important; display:flex!important; align-items:center!important; justify-content:center!important; flex-wrap:nowrap!important; font-size:11px!important; line-height:1.15!important; gap:2px!important; } .included-tests-title.has-free{ font-size:9.5px!important; line-height:1.1!important; } .included-tests-title .included-count{ flex:0 0 auto!important; white-space:nowrap!important; min-width:1.35em!important; padding:0 4px!important; margin:0 1px!important; font-size:1em!important; line-height:1.15!important; } .included-tests-title .included-free-text{ display:inline-flex!important; align-items:center!important; white-space:nowrap!important; flex:0 0 auto!important; gap:1px!important; } /* V34: slightly larger free-count line without allowing a second line. Gently compress the line horizontally so it remains one line on mobile. */ .included-tests-title.has-free{ font-size:13.5px!important; line-height:1.18!important; white-space:nowrap!important; transform:scaleX(.86)!important; transform-origin:center center!important; width:116.28%!important; margin-inline:-8.14%!important; overflow:visible!important; } .included-tests-title.has-free .included-count{ font-size:1.05em!important; min-width:1.45em!important; padding:1px 5px!important; } /* V37: home collection booking */ .book-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}.book-options .btn{width:100%;justify-content:center}.btn-home-book{background:var(--tc72,#f4f1e2);color:var(--tc2,#0e1d3e);border:1px solid var(--tc73,#d8c98f);font-weight:800}.home-location-box{border:1px solid var(--line);background:#f7f9fc;border-radius:16px;padding:13px;margin:6px 0 4px}.home-location-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}.home-location-head span{font-size:11px;color:var(--muted)}.home-gps{width:100%;justify-content:center}.home-location-status{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.6}.home-location-divider{display:flex;align-items:center;gap:8px;margin:12px 0;color:var(--muted);font-size:11px}.home-location-divider:before,.home-location-divider:after{content:"";height:1px;background:var(--line);flex:1}.home-whatsapp-choice{display:grid!important;grid-template-columns:auto 1fr;align-items:start;gap:8px!important;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;margin:7px 0!important}.home-whatsapp-choice input{width:auto!important;margin:3px 0 0!important}.home-whatsapp-choice span{display:grid;gap:2px}.home-whatsapp-choice b{font-size:12px}.home-whatsapp-choice small{font-size:11px;color:var(--muted);line-height:1.5}.home-success{display:grid;gap:10px;text-align:center;padding:5px 0}.home-success p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}.home-success .btn{justify-content:center}.home-wa-redirect{width:100%;justify-content:center;text-decoration:none}@media(max-width:600px){.book-options{grid-template-columns:1fr}} /* V40: home collection location method choices */ .home-location-options{display:grid;gap:8px;margin:10px 0}.home-location-choice{display:flex!important;align-items:flex-start;gap:9px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}.home-location-choice input{margin:3px 0 0;width:auto}.home-location-choice span{display:grid;gap:3px}.home-location-choice b{font-size:13px}.home-location-choice small{font-size:11px;color:var(--muted);line-height:1.6}.home-location-choice:has(input:checked){border-color:#9dd6ae;background:#f0faf3} /* V41 UX: taller booking ticket, compact header, less internal crawling on phones */ .sheet-card{height:min(94dvh,900px);max-height:94dvh} .sheet-handle{padding:7px 16px 4px} .sheet-sum{padding:4px 0 10px;margin-bottom:12px;font-size:18px} @media(max-width:600px){.sheet-card{height:calc(94dvh - env(safe-area-inset-bottom));max-height:calc(94dvh - env(safe-area-inset-bottom))}.sheet-scroll{padding-top:5px}.sheet-sum{margin-bottom:10px}} /* V41 UX: individual-test booking actions mirror package booking */ .mix-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end} .mix-actions .btn{min-height:44px} @media(max-width:600px){.mixinner{align-items:stretch;flex-wrap:wrap}.mixtxt{flex:1 1 100%}.mix-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:7px}.mix-actions .mixclear{grid-column:1/-1;justify-self:center}.mix-actions .btn{width:100%}} /* V41 UX: compact location choices */ .home-location-box{padding:10px;margin:4px 0}.home-location-head{margin-bottom:7px}.home-location-options{gap:6px;margin:7px 0}.home-location-choice{padding:8px 10px;gap:7px}.home-location-choice b{font-size:12.5px}.home-location-choice small{font-size:10.5px;line-height:1.45}.home-location-status{margin-top:6px;font-size:11.5px} /* ===== CHAPTER SCRUBBER: one small, independent control layer ===== The package rail itself remains native horizontal scrolling. This line is a second control surface that maps directly to the same rail, so cards and scrubber always stay in sync without taking over the page gesture. */ .rail-title-wrap{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:stretch} .chapter-block{width:min(100%,560px);margin-top:2px;direction:rtl;user-select:none;-webkit-user-select:none} .chapter-kicker{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:10px;color:var(--muted);height:38px;white-space:nowrap} .chapter-meta{display:flex;align-items:baseline;gap:7px;direction:ltr;white-space:nowrap;min-width:max-content} .chapter-meta b{font:700 34px/.95 'Noto Sans Arabic';letter-spacing:.02em;color:var(--ink)} .chapter-meta>span{font:500 14px/1 sans-serif;opacity:.55} .chapter-meta em{font:600 12px/.9 sans-serif;letter-spacing:1.8px;font-style:normal;opacity:.62;margin-inline-start:2px} .chapter-name{min-width:0;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:right;font:700 22px/1.1 'Noto Sans Arabic';color:var(--ink)} .chapter-scrubber{--chapter-progress:0;position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:30px;margin-bottom:-4px;direction:rtl;touch-action:none;cursor:ew-resize;outline:none} .chapter-track-label,.chapter-track-total{flex:0 0 27px;font:700 14px/1 sans-serif;color:var(--ink);text-align:center;opacity:.82} .chapter-track{position:relative;flex:1 1 auto;height:28px;display:flex;align-items:center;min-width:70px;direction:rtl;touch-action:none} .chapter-track-line,.chapter-track-progress{position:absolute;left:0;right:0;height:1px;top:50%;transform:translateY(-50%);pointer-events:none} .chapter-track-line{background:linear-gradient(270deg,var(--tc74,#0e1d3e40),var(--tc75,#0e1d3e17))} .chapter-track-progress{left:auto;right:0;width:calc(var(--chapter-progress)*100%);background:var(--ink);height:2px} .chapter-track-thumb{position:absolute;right:calc(var(--chapter-progress)*100%);top:50%;width:62px;height:14px;transform:translate(50%,-50%);display:flex;align-items:center;justify-content:center;pointer-events:none} .chapter-track-thumb i{display:block;width:62px;height:7px;border-radius:999px;background:var(--ink);box-shadow:0 1px 0 #fff7 inset,0 2px 5px var(--tc76,#0e1d3e1f);transition:width .16s ease,height .16s ease} .chapter-scrubber:focus-visible{outline:2px solid var(--ink);outline-offset:5px;border-radius:4px} .chapter-scrubber:active .chapter-track-thumb i,.chapter-scrubber[data-dragging="1"] .chapter-track-thumb i{width:72px;height:9px} .rail.chapter-dragging{scroll-snap-type:none!important;scroll-behavior:auto!important} @media(max-width:700px){ .rail-head{align-items:flex-start;gap:10px} .chapter-block{width:min(100%,430px);margin-top:1px} .chapter-kicker{height:31px;gap:7px} .chapter-meta{gap:5px} .chapter-meta b{font-size:29px} .chapter-meta em{font-size:10px;letter-spacing:1.4px} .chapter-name{font-size:18px} .chapter-scrubber{gap:8px;min-height:28px;margin-bottom:-5px} .chapter-track-label,.chapter-track-total{flex-basis:24px;font-size:12px} .chapter-track-thumb{width:54px} .chapter-track-thumb i{width:54px;height:6px} } @media(prefers-reduced-motion:reduce){.chapter-track-thumb i{transition:none}} .booking-bar{width:100%;min-height:42px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;overflow:hidden;border:1px solid var(--tc77,rgba(14,29,62,.16));border-radius:10px;background:#fff;box-shadow:0 1px 2px var(--tc78,rgba(14,29,62,.06))} .booking-methods{min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;background:transparent;padding:0} .booking-methods.one{grid-template-columns:1fr} .booking-method{min-width:0;min-height:40px;padding:8px 10px;border:1px solid var(--tc11,#E7CB68);background:var(--tc10,#F8E3A1);color:var(--tc12,#6E5010);border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 0 #fff8 inset;transition:opacity .22s ease,transform .12s ease} .booking-method span{font:700 12px/1.2 'Noto Sans Arabic',system-ui,sans-serif;white-space:nowrap} .booking-method.is-active{background:var(--tc10,#F8E3A1);color:var(--tc12,#6E5010);box-shadow:0 1px 0 #fff8 inset} .booking-bar.wait-gift .booking-method{opacity:.42} .booking-cta{min-width:88px;padding:0 10px;border:0;background:var(--tc79,#ffd23f);color:var(--tc2,#0e1d3e);font:800 12px/1.15 'Noto Sans Arabic',system-ui,sans-serif;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:4px} .booking-cta.wait-gift{background:var(--tc80,#fff6d4);color:var(--tc81,#6a4d00);white-space:normal;max-width:108px;font-size:11px} .mix-book-bar{flex:1;min-width:0} .mix-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap} @media(max-width:600px){.mix-actions{width:100%;flex-wrap:wrap}.mix-book-bar{flex:1 1 100%}.mixclear{margin-inline:auto}} /* ===== modern skin from theme worker: colors/surfaces only, no card geometry ===== */ :root{ --navy:var(--tc82,#0c1a3a);--navy-2:var(--tc83,#1a2a55);--slate:#65738f;--canvas:#f5f7fb;--surface:#fff; --line:var(--tc84,rgba(12,26,58,.09));--line-2:var(--tc85,rgba(12,26,58,.16)); --sun:var(--tc79,#ffd23f);--sun-2:var(--tc86,#f7b900);--sun-3:var(--tc87,#c98f00);--sun-soft:var(--tc80,#fff6d4);--sun-ink:var(--tc81,#6a4d00); --leaf:#22a06b;--leaf-2:#178553;--leaf-soft:#e8f7ef;--leaf-ink:#0f6a45; --gloss:linear-gradient(180deg,#fff 0%,#fbfcff 55%,#f3f6fc 100%); --sun-grad:linear-gradient(180deg,var(--tc88,#ffe36e) 0%,var(--tc79,#ffd23f) 50%,var(--tc89,#fab914) 100%); --hi:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 var(--tc90,rgba(12,26,58,.04)); --bench:#f5f7fb;--paper:#fff;--ink:var(--tc82,#0c1a3a);--green:var(--tc82,#0c1a3a);--lime:var(--tc79,#ffd23f); --muted:#65738f;--pr:var(--tc82,#0c1a3a);--g1:var(--tc91,#ffe98a);--g2:var(--tc86,#f7b900);--g3:var(--tc87,#c98f00); } html,body{background:#f6f8fc} body{color:var(--navy);background: radial-gradient(60% 420px at 88% 0,var(--tc92,rgba(255,210,63,.20)),transparent 70%), radial-gradient(40% 380px at 4% 6%,rgba(34,160,107,.07),transparent 70%), linear-gradient(180deg,#fff 0,#f6f8fc 620px,#f6f8fc 100%) !important} .wash{opacity:.18} header#siteHeader{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.86)) !important;border-bottom:1px solid var(--line);box-shadow:0 1px 0 #fff inset,0 12px 30px -22px var(--tc93,rgba(12,26,58,.28))} .logo.logo-slot{background:var(--sun-grad)} .btn-gold,.booking-cta{background:var(--sun-grad)!important;color:var(--tc82,#0c1a3a)!important;border-color:var(--tc94,rgba(201,143,0,.35))} .btn-green{background:var(--navy)!important;color:#fff!important} /* section benches stay gendered, softer modern washes */ .theme-y{--bench:var(--tc95,#f4ecc0);--tint:var(--tc96,#fff4c8);--pr:var(--tc82,#0c1a3a)} .theme-f{--bench:#f3d6dc;--tint:#fde8ee;--pr:#7a2a3c} .theme-m{--bench:#cfe0f3;--tint:#e7f1fb;--pr:#1a4a73} .theme-e{--bench:#ddd4f0;--tint:#eee8fa;--pr:#5c3f86} .theme-t{--bench:var(--tc59,#f3e2b4);--tint:var(--tc97,#fff1d4);--pr:var(--tc26,#7c5a14)} .offer,.golden{background:var(--gloss);border:1px solid var(--line);box-shadow:var(--hi),0 1px 2px var(--tc98,rgba(12,26,58,.05)),0 24px 46px -26px var(--tc99,rgba(12,26,58,.32))} .golden{border-color:var(--tc100,rgba(247,185,0,.55));box-shadow:var(--hi),0 1px 2px var(--tc98,rgba(12,26,58,.05)),0 28px 54px -26px var(--tc101,rgba(247,185,0,.45))} .tk-top{background:linear-gradient(160deg,var(--tint,var(--tc80,#fff6d4)) 0%,#fff 130%);color:var(--pr)} .tk-bot{background:linear-gradient(180deg,#fff,#f9fbff);color:var(--navy)} .offer:before{opacity:.28} .tcard{background:var(--gloss);border:1px solid var(--line);box-shadow:var(--hi),0 1px 2px var(--tc98,rgba(12,26,58,.05)),0 18px 34px -22px var(--tc93,rgba(12,26,58,.28))} .tsel{color:var(--navy)} .category-nav-btn{background:#fff;border:1px solid var(--line);color:var(--navy);box-shadow:var(--hi)} .category-nav-btn.is-active,.category-nav-btn--golden.is-active{background:var(--sun-grad);border-color:var(--tc101,rgba(247,185,0,.45));color:var(--tc82,#0c1a3a)} .promises li{color:var(--slate)} .promises li.on{color:var(--navy);font-weight:800} .promises li i{border-color:var(--navy);background:#fff} .promises li.on i{background:var(--sun);border-color:var(--sun-2)} .mixbar{background:transparent} .mixinner{background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(248,250,254,.94));box-shadow:var(--hi),0 22px 46px -18px var(--tc102,rgba(12,26,58,.36));border:1px solid var(--line);border-radius:16px} .booking-bar{border-color:var(--line-2);box-shadow:var(--hi)} .booking-methods{background:#eef2f8} .booking-method.is-active{background:var(--sun-soft);color:var(--navy);box-shadow:inset 0 -2px 0 var(--sun-2)} .booking-cta{background:var(--sun-grad)!important} .sheet-bg{background:var(--tc103,rgba(12,26,58,.46));backdrop-filter:blur(8px)} .sheet-card{background:#fff;color:var(--navy);box-shadow:0 -24px 60px -20px var(--tc104,rgba(12,26,58,.45))} .boot-loader{background:radial-gradient(120% 120% at 50% 38%,var(--tc105,#fffbe6) 0%,#fff 46%,#f3f6fc 100%);color:var(--navy)} .boot-brand,.boot-brand b{color:var(--navy)} .boot-text{color:var(--slate)} .bcard{background:var(--gloss);border:1px solid var(--line);box-shadow:var(--hi)} .branch-direction{background:#fff;color:var(--leaf-ink);border:1px solid rgba(34,160,107,.35)} .rail-head h2,.sec-title,.cathead h2,.kicker{color:var(--navy)} footer{color:var(--slate)} /* ===== FINAL SAFE PATCH: package cards / golden edge / gesture handoff ===== */ /* Golden cards keep the exact existing 310x620 footprint and use the same white card surface as the regular cards. Gold is now only a thin luminous edge treatment. */ .offer,.golden,.tcard,.skeleton-card,.skeleton-tcard{border-radius:10px!important} .golden{ border:1px solid var(--tc106,rgba(247,185,0,.82))!important; box-shadow: 0 0 0 1px var(--tc107,rgba(255,224,120,.48)), 0 0 9px var(--tc108,rgba(255,197,45,.58)), 0 0 22px var(--tc109,rgba(255,193,38,.24)), var(--hi), 0 24px 46px -26px var(--tc99,rgba(12,26,58,.32))!important; } .golden .tk-top,.golden.has-shot .tk-top{ --tint:#fff!important; background:linear-gradient(160deg,#fff 0%,#fbfcff 100%)!important; outline:none!important; } .golden .tk-bot{background:linear-gradient(180deg,#fff,#f9fbff)!important} .golden .foil{display:none!important} .golden.inked{animation:none!important} /* Remove the side notches while preserving the thin perforated divider itself. */ .offer .perf:before,.offer .perf:after, .golden .perf:before,.golden .perf:after, .tcard .tperf:before,.tcard .tperf:after{display:none!important} /* The internal checklist must hand vertical motion back to the page naturally. */ .offer .list-wrap,.golden .list-wrap{ scroll-behavior:auto!important; overscroll-behavior-y:auto!important; } /* The header mode switch should be atomic: no animated height/top geometry to fight the browser's scroll position around the threshold. */ header#siteHeader, #siteHeader .nav-main, #siteHeader .category-nav-shell{ transition:none!important; } /* ===== FIX 1: header flicker ===== Cause: the header changed its own height (136px <-> 68px) at a scroll threshold. Scroll anchoring then moved scrollY back across the threshold, so the two states toggled hundreds of times. The header now keeps ONE constant layout height and simply slides its top row out of view (sticky with a negative top), so nothing in the page layout changes when the top row disappears. */ header#siteHeader, header#siteHeader.category-mode{height:136px} header#siteHeader{top:-68px} header#siteHeader:has(#categoryNavShell[hidden]){top:0} #siteHeader.category-mode .nav-main{opacity:1;transform:none;pointer-events:auto} header#siteHeader.category-mode .category-nav-shell{top:68px;border-top:1px solid #12392a18} @media(max-width:700px){ header#siteHeader, header#siteHeader.category-mode{height:136px} header#siteHeader.category-mode .category-nav-shell{top:68px} } /* ===== FIX 2: chapter slider thumb no longer covers the 01 / 02 numbers ===== The thumb is centred on the track ends, so half of it used to overhang onto the numbers. Insetting the track by the thumb's half-width (plus its enlarged drag state) keeps the whole thumb between the two numbers. */ .chapter-track{margin-inline:38px} /* ===== FIX 3: package card caption (title + price + old price) ===== One clean panel anchored to the bottom of the card header. Only the caption changes: card size, header height, artwork, badges and scrolling are untouched. */ .offer{--cap-accent:var(--pr);--cap-title:var(--pr)} .offer.golden{--cap-accent:var(--tc110,#8a5a00);--cap-title:#2a1c08} .offer .tk-caption{ position:relative!important;z-index:6!important; display:grid!important;grid-template-columns:minmax(0,1fr) auto!important; align-items:center!important;column-gap:12px!important; width:100%!important;max-width:100%!important;box-sizing:border-box!important; margin-top:auto!important;padding:9px 10px!important;padding-inline-start:18px!important; border-radius:14px!important; background:linear-gradient(135deg,#ffffff,#f4f7fc)!important; border:1px solid var(--tc111,rgba(12,26,58,.10))!important; box-shadow:0 1px 0 #fff inset,0 12px 24px -14px var(--tc112,rgba(12,26,58,.55))!important; } .offer .tk-caption::before{ content:"";position:absolute;inset-inline-start:7px;top:10px;bottom:10px; width:4px;border-radius:4px;background:var(--cap-accent); } /* theme-matched panel tint */ .theme-y .offer .tk-caption{background:linear-gradient(135deg,#fffef7,var(--tc96,#fff4c8))!important;border-color:var(--tc113,rgba(160,120,0,.22))!important} .theme-f .offer .tk-caption{background:linear-gradient(135deg,#fffafb,#fde8ee)!important;border-color:rgba(122,42,60,.20)!important} .theme-m .offer .tk-caption{background:linear-gradient(135deg,#fbfdff,#e7f1fb)!important;border-color:rgba(26,74,115,.20)!important} .theme-e .offer .tk-caption{background:linear-gradient(135deg,#fdfbff,#eee8fa)!important;border-color:rgba(92,63,134,.20)!important} .theme-t .offer .tk-caption{background:linear-gradient(135deg,#fffdf7,var(--tc97,#fff1d4))!important;border-color:var(--tc114,rgba(124,90,20,.22))!important} .offer.golden .tk-caption{background:linear-gradient(135deg,#fffdf5,var(--tc115,#fdf0c8))!important;border-color:var(--tc116,rgba(201,143,0,.50))!important} /* title: solid dark text on the panel, no outline/shadow tricks */ .offer .tk-caption h2{ margin:0!important;padding:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important; display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important; width:auto!important;max-width:none!important;min-width:0!important; overflow:hidden!important;white-space:normal!important;text-align:start!important; font:800 clamp(15.5px,4.6vw,18px)/1.32 'Noto Sans Arabic'!important; color:var(--cap-title)!important;-webkit-text-fill-color:var(--cap-title)!important; -webkit-text-stroke:0!important;text-shadow:none!important; } /* price column: old price above, current price below */ .offer .tk-caption .price{ display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important; gap:2px!important;margin:0!important;min-width:72px;padding-inline-start:12px!important; border-inline-start:1.5px dashed var(--tc117,rgba(12,26,58,.22))!important; } .offer .tk-caption .old{ order:-1!important;display:inline-block!important;margin:0!important;padding:0!important;border-radius:0!important;background:transparent!important; font:600 12px/1.25 'Noto Sans Arabic'!important;white-space:nowrap!important; color:#66718c!important;-webkit-text-fill-color:#66718c!important;-webkit-text-stroke:0!important;text-shadow:none!important; text-decoration:line-through!important;text-decoration-color:#d64545!important;text-decoration-thickness:1.8px!important; } .offer .tk-caption .now{ display:inline-flex!important;align-items:baseline!important;gap:3px!important;margin:0!important;padding:0!important;border-radius:0!important;background:transparent!important; font:800 34px/1.05 'Noto Sans Arabic'!important;letter-spacing:-.5px!important; color:var(--cap-accent)!important;-webkit-text-fill-color:var(--cap-accent)!important;-webkit-text-stroke:0!important;text-shadow:none!important; } .offer .tk-caption .now small{ margin:0!important;font:700 12px/1 'Noto Sans Arabic'!important;letter-spacing:0!important; color:var(--cap-accent)!important;-webkit-text-fill-color:var(--cap-accent)!important;text-shadow:none!important;opacity:.9; } /* ===== Booking bar: slightly larger + faded until a method is chosen ===== */ .booking-bar{min-height:50px} .booking-method,.booking-cta{min-height:50px;font-size:13.5px} .booking-method span{font-size:13.5px} .booking-cta{min-width:100px} .booking-cta.wait-gift{font-size:11px} .booking-cta:disabled,.booking-cta[disabled]{ opacity:.45;filter:saturate(.55);cursor:not-allowed;box-shadow:none; } /* ===== Individual tests: header, search, filters, 2-up cards, load-more ===== */ #testsSec.catalog{border-top:0;margin-top:52px;padding-top:6px} #testsSec .cathead{align-items:flex-end} #testsSec .cathead-txt{min-width:0} #testsSec .cathead h2{margin:0} .cathead-sub{margin:4px 0 0;font:500 13px/1.5 'Noto Sans Arabic',system-ui,sans-serif;color:var(--slate)} #testsSec .cathead .info{flex:none;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--hi);font:700 12px/1 'Noto Sans Arabic',system-ui,sans-serif;color:var(--slate);white-space:nowrap} .tsearch{position:relative;display:flex;align-items:center;margin:16px 0 0} .tsearch svg{position:absolute;inset-inline-start:14px;width:19px;height:19px;color:var(--slate);pointer-events:none} .tsearch input{width:100%;box-sizing:border-box;min-height:50px;padding:0 46px;border:1px solid var(--line-2);border-radius:14px;background:#fff;box-shadow:var(--hi),0 10px 22px -18px var(--tc118,rgba(12,26,58,.4));font:600 16px 'Noto Sans Arabic',system-ui,sans-serif;color:var(--navy);-webkit-appearance:none;appearance:none} .tsearch input::placeholder{color:var(--slate);font-weight:500} .tsearch input:focus{outline:none;border-color:var(--sun-2);box-shadow:0 0 0 3px var(--tc119,rgba(247,185,0,.28))} .tsearch input::-webkit-search-cancel-button,.tsearch input::-webkit-search-decoration{display:none;-webkit-appearance:none} .tsearch .tclear{position:absolute;inset-inline-end:9px;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#eef2f8;color:var(--navy);font:700 19px/1 system-ui,sans-serif;cursor:pointer;display:grid;place-items:center} .tsearch .tclear[hidden]{display:none} #cats.cats{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;margin:12px calc(var(--gut)*-1) 2px;padding:2px var(--gut) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch} #cats.cats::-webkit-scrollbar{display:none} .tchip{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 8px 0 14px;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--navy);box-shadow:var(--hi);font:700 13px/1 'Noto Sans Arabic',system-ui,sans-serif;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s} .tchip i{font:700 11px/1 'Noto Sans Arabic',system-ui,sans-serif;font-style:normal;min-width:22px;padding:4px 6px;border-radius:999px;background:#eef2f8;color:var(--slate);text-align:center} .tchip.on{background:var(--sun-grad);border-color:var(--tc100,rgba(247,185,0,.55))} .tchip.on i{background:rgba(255,255,255,.7);color:var(--sun-ink)} @media(min-width:720px){#cats.cats{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}} #packs.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:8px 0 4px;align-items:stretch} @media(min-width:720px){#packs.tgrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}} .tc{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:18px;background:var(--gloss);border:1.5px solid var(--line);box-shadow:var(--hi),0 1px 2px var(--tc98,rgba(12,26,58,.05)),0 16px 30px -22px var(--tc120,rgba(12,26,58,.35));transition:border-color .2s,box-shadow .2s,background .2s;animation:tcIn .35s var(--ease) both} .tc-sel{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:12px 10px 8px;cursor:pointer;color:var(--navy);-webkit-tap-highlight-color:transparent} .tc-sel input{position:absolute;opacity:0;pointer-events:none} .tc-check{position:absolute;top:10px;inset-inline-start:10px;z-index:2;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-2);background:#fff;display:grid;place-items:center;color:transparent;font:800 13px/1 system-ui,sans-serif;transition:background .2s,border-color .2s} .tc-sel input:checked+.tc-check{background:var(--sun-grad);border-color:var(--sun-2);color:var(--tc82,#0c1a3a)} .tc-sel input:checked+.tc-check::after{content:"✓"} .tc-sel input:focus-visible+.tc-check{outline:2px solid var(--navy);outline-offset:2px} .tc-art{width:68px;height:68px;margin-bottom:3px;border-radius:20px;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#fff 0,var(--sun-soft) 100%);box-shadow:inset 0 0 0 1px var(--tc121,rgba(12,26,58,.06))} .tc-art img{width:54px;height:54px;object-fit:contain} .tc-art svg{width:30px;height:30px;color:var(--sun-3)} .tc-cat{font:600 11px/1.3 'Noto Sans Arabic',system-ui,sans-serif;color:var(--slate)} .tc-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:2.8em;font:800 14.5px/1.4 'Noto Sans Arabic',system-ui,sans-serif;color:var(--navy);text-wrap:balance;overflow-wrap:anywhere} .tc-fast{margin-top:2px;padding:3px 10px;border-radius:999px;background:var(--sun-soft);border:1px solid var(--tc122,rgba(247,185,0,.4));color:var(--sun-ink);font:700 11px/1.3 'Noto Sans Arabic',system-ui,sans-serif} .tc-note{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:2px;font:500 11.5px/1.45 'Noto Sans Arabic',system-ui,sans-serif;color:var(--slate)} .tc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 10px;border-top:1px dashed var(--tc85,rgba(12,26,58,.16));background:linear-gradient(180deg,rgba(255,255,255,0),var(--tc123,rgba(12,26,58,.03)))} .tc-price{display:flex;align-items:baseline;gap:3px;color:var(--navy);white-space:nowrap} .tc-price b{font:800 21px/1 'Noto Sans Arabic',system-ui,sans-serif} .tc-price small{font:700 11px/1 'Noto Sans Arabic',system-ui,sans-serif;color:var(--slate)} .tc-btn{flex:none;min-height:38px;padding:0 12px;display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--navy);border-radius:12px;background:#fff;color:var(--navy);font:800 13px/1 'Noto Sans Arabic',system-ui,sans-serif;cursor:pointer} .tc-btn::before{content:"+";font-size:17px;line-height:1;margin-top:-2px} .tc.on{border-color:var(--sun-2);background:linear-gradient(180deg,#fffdf3,var(--sun-soft));box-shadow:0 0 0 3px var(--tc124,rgba(247,185,0,.22)),0 16px 30px -20px var(--tc125,rgba(201,143,0,.55))} .tc.on .tc-btn{background:var(--navy);border-color:var(--navy);color:#fff} .tc.on .tc-btn::before{content:"✓";font-size:12px;margin-top:0} .tmore{display:grid;place-items:center;margin:16px 0 4px} .tmore[hidden]{display:none} .tmore-btn{min-height:48px;padding:0 26px;border:1.5px solid var(--navy);border-radius:14px;background:#fff;color:var(--navy);box-shadow:var(--hi);font:800 14px 'Noto Sans Arabic',system-ui,sans-serif;cursor:pointer} .tmore-btn span{margin-inline-start:6px;color:var(--slate);font-weight:700} .t-empty{grid-column:1/-1;display:grid;justify-items:center;gap:12px;padding:32px 16px;border:1.5px dashed var(--line-2);border-radius:16px;background:#fff;color:var(--slate);font:600 14px/1.7 'Noto Sans Arabic',system-ui,sans-serif} .t-empty p{margin:0} @keyframes tcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.tc{animation:none}} /* ===== Selection bar: tidier on phones, readable text (was white on white), assistant button kept clear of it ===== */ .mixinner{color:var(--navy)} .mixinner .info{color:var(--slate);font-weight:700} .mixtxt b{color:var(--navy)} .mixclear{color:var(--slate);font-weight:700;text-decoration:none;border:1px solid var(--line-2);border-radius:12px;background:#fff;padding:0 14px;min-height:50px} @media(max-width:600px){ .mixinner{padding:10px 12px;gap:8px} .mixtxt{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px} .mixtxt b{font-size:18px} .mix-actions{flex-wrap:nowrap;align-items:stretch;gap:8px} .mix-actions .mix-book-bar{flex:1 1 auto;min-width:0} .mix-actions .mixclear{flex:none;margin:0} body.has-mix{padding-bottom:150px} } .mixinner{background:linear-gradient(180deg,#fff,#f8fafe)!important} /* ===== Lazy package slots: same box as a real card, drawn as a quiet skeleton ===== */ .offer.offer-ph{pointer-events:none;background:linear-gradient(180deg,#eef2f9,#f6f8fc)!important;border:1px solid var(--line)!important;box-shadow:none!important} .offer.offer-ph::before,.offer.offer-ph::after{display:none!important} .offer.golden.offer-ph{background:linear-gradient(135deg,var(--tc126,#fff3c4),var(--tc127,#fdf7e3))!important;border-color:var(--tc122,rgba(247,185,0,.4))!important} /* ===== المساعد نَبض (Nabd) v2: وجه معبّر + رسالة بدل الاسم + يد مشيرة + اختيارات بالأزرار فقط ===== */ .lab-bot-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .lab-bot-fab{--nb-bottom:18px;position:fixed;inset-inline-start:18px;top:auto;bottom:calc(var(--nb-bottom) + env(safe-area-inset-bottom,0px));z-index:1200;display:inline-flex;align-items:center;gap:0;min-height:48px;max-width:calc(100vw - 36px);padding:8px 14px 8px 10px;border:1px solid var(--tc128,rgba(247,185,0,.6));border-radius:999px;background:#fff;color:var(--tc82,#0c1a3a);box-shadow:0 14px 30px -14px var(--tc104,rgba(12,26,58,.45)),0 2px 8px rgba(0,0,0,.07);cursor:pointer;font:inherit;font-weight:700;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:box-shadow .2s ease,border-radius .3s ease} .lab-bot-fab.is-up{bottom:auto;top:calc(78px + env(safe-area-inset-top,0px))} .lab-bot-fab.is-speaking{border-radius:26px} @media(hover:hover){.lab-bot-fab:hover{box-shadow:0 18px 36px -14px var(--tc129,rgba(12,26,58,.5)),0 3px 10px rgba(0,0,0,.09)}} .lab-bot-fab:active{filter:brightness(.98)} .lab-bot-fab:focus-visible,.lab-bot-close:focus-visible,.lab-bot-ok:focus-visible,.lab-bot-choice:focus-visible{outline:3px solid var(--tc130,#b98b2e);outline-offset:3px} .has-mix .lab-bot-fab{--nb-bottom:94px} .booking-sheet-open .lab-bot-fab{--nb-bottom:150px;z-index:90} @media(max-width:600px){.lab-bot-fab{inset-inline-start:12px;min-height:45px;padding-inline:10px 12px;max-width:calc(100vw - 24px)}.has-mix .lab-bot-fab{--nb-bottom:132px}} /* التسمية: اسم نَبض، وتنفتح لتكتب الرسالة مكان الاسم ثم تنغلق */ .lab-bot-label{display:inline-block;margin-inline-start:9px;overflow:hidden;white-space:nowrap;line-height:1.35;text-align:start;vertical-align:middle;min-width:0} .lab-bot-label.is-speaking{white-space:normal} .lab-bot-say{font-size:13.5px;line-height:1.55;font-weight:800;color:var(--tc82,#0c1a3a)} .lab-bot-say .w{display:inline-block;opacity:0;transform:translateY(5px);transition:opacity .22s ease,transform .26s ease} .lab-bot-say .w.on{opacity:1;transform:none} /* اليد التي تشير للأسفل وتتحرك قليلًا */ .lab-bot-hand{position:absolute;inset-inline-start:6px;top:calc(100% - 4px);width:30px;height:44px;pointer-events:none;opacity:0;transform:translateY(-12px) scale(.55);transform-origin:top center;transition:opacity .3s ease,transform .45s cubic-bezier(.2,1.5,.4,1)} .lab-bot-hand svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 5px 6px var(--tc93,rgba(12,26,58,.28)))} .lab-bot-fab.show-hand .lab-bot-hand{opacity:1;transform:none;animation:nabdPoint .8s ease-in-out .45s infinite} @keyframes nabdPoint{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(10px) rotate(3deg)}} /* الوجه: عينان وحاجبان وفم وخدّان — كل حالة مزاجية تغيّر المتغيّرات فقط */ .nabd-face{--eye-w:.15em;--eye-h:.19em;--eye-dx:0em;--eye-dy:0em;--eye-sy:1;--brow-y:0em;--brow-lr:0deg;--brow-rr:0deg;--brow-o:.5;--cheek-o:0;--m-w:.32em;--m-h:.1em;--m-top:.59em;--m-bb:.05em;--m-bt:0em;--m-bs:0em;--m-rad:0 0 50% 50%;--m-bg:transparent;--m-tx:-50%;--tongue:0;position:relative;display:inline-block;flex:0 0 auto;width:1em;height:1em;border-radius:50%;background:linear-gradient(145deg,var(--tc91,#ffe98a),var(--tc79,#ffd23f));border:1px solid var(--tc131,rgba(201,143,0,.45));box-shadow:inset 0 1px 2px rgba(255,255,255,.9),0 3px 10px rgba(0,0,0,.08)} .lab-bot-face.nabd-face{font-size:31px} .lab-bot-face-large.nabd-face{font-size:46px} .lab-bot-mini-face.nabd-face{font-size:26px;margin-top:2px} .nabd-face>*{position:absolute;display:block;margin:0;padding:0;border:0;font-weight:400;font-style:normal;text-decoration:none;pointer-events:none} .nabd-face .eye{top:.34em;width:var(--eye-w);height:var(--eye-h);border-radius:50%;background:#252525;transform-origin:center;animation:nabdEyes 7.2s ease-in-out infinite} .nabd-face .eye::after{content:"";position:absolute;width:32%;height:30%;left:46%;top:14%;border-radius:50%;background:#fff;opacity:.9} .nabd-face .eye.l{left:calc(.5em - var(--eye-w) - .1em)} .nabd-face .eye.r{right:calc(.5em - var(--eye-w) - .1em)} .nabd-face .brow{top:.2em;width:.2em;height:.036em;border-radius:.03em;background:#252525;opacity:var(--brow-o);transition:opacity .2s ease} .nabd-face .brow.l{left:.2em;transform:translateY(var(--brow-y)) rotate(var(--brow-lr))} .nabd-face .brow.r{right:.2em;transform:translateY(var(--brow-y)) rotate(var(--brow-rr))} .nabd-face .cheek{top:.54em;width:.14em;height:.09em;border-radius:50%;background:rgba(255,96,96,.42);opacity:var(--cheek-o);transition:opacity .25s ease} .nabd-face .cheek.l{left:.08em} .nabd-face .cheek.r{right:.08em} .nabd-face .mouth{left:50%;top:var(--m-top);width:var(--m-w);height:var(--m-h);translate:var(--m-tx) 0;border-style:solid;border-color:#252525;border-width:var(--m-bt) var(--m-bs) var(--m-bb) var(--m-bs);border-radius:var(--m-rad);background:var(--m-bg);overflow:hidden;transition:width .2s ease,height .2s ease,top .2s ease,border-radius .2s ease} .nabd-face .mouth::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:52%;border-radius:50% 50% 0 0;background:#ff8a96;opacity:var(--tongue);transition:opacity .2s ease} @keyframes nabdEyes{ 0%,17%,21%,48%,52%,92%,96%,100%{transform:translate(var(--eye-dx),var(--eye-dy)) scaleY(var(--eye-sy))} 19%,50%,94%{transform:translate(var(--eye-dx),var(--eye-dy)) scaleY(.12)} 30%,38%{transform:translate(calc(var(--eye-dx) + .03em),calc(var(--eye-dy) - .012em)) scaleY(var(--eye-sy))} 72%,80%{transform:translate(calc(var(--eye-dx) - .03em),var(--eye-dy)) scaleY(var(--eye-sy))} } /* الحالات المزاجية */ .nabd-face[data-mood="happy"]{--cheek-o:.85;--brow-o:0;--m-w:.38em;--m-h:.17em;--m-bb:0em;--m-bg:#3b1d1d;--m-rad:0 0 .38em .38em;--tongue:.9} .nabd-face[data-mood="happy"] .eye,.nabd-face[data-mood="wink"] .eye.r{background:transparent;border-top:.06em solid #252525;border-radius:50% 50% 0 0;width:.18em;height:.1em;top:.38em;animation:none} .nabd-face[data-mood="happy"] .eye::after,.nabd-face[data-mood="wink"] .eye.r::after,.nabd-face[data-mood="love"] .eye::after{display:none} .nabd-face[data-mood="wink"]{--cheek-o:.7;--brow-o:1;--brow-rr:-10deg;--m-w:.38em;--m-h:.17em;--m-bb:0em;--m-bg:#3b1d1d;--m-rad:0 0 .38em .38em;--tongue:1} .nabd-face[data-mood="excited"]{--eye-w:.19em;--eye-h:.23em;--brow-y:-.05em;--brow-o:1;--cheek-o:.9;--m-w:.44em;--m-h:.25em;--m-bb:0em;--m-bg:#3b1d1d;--m-rad:0 0 .44em .44em;--tongue:1;animation:nabdHop .5s ease-in-out infinite} .nabd-face[data-mood="surprised"]{--eye-w:.2em;--eye-h:.24em;--eye-dy:-.01em;--brow-y:-.06em;--brow-o:1;--cheek-o:.2;--m-w:.15em;--m-h:.17em;--m-bb:.05em;--m-bt:.05em;--m-bs:.05em;--m-rad:50%;--m-top:.6em} .nabd-face[data-mood="thinking"]{--eye-dx:.035em;--eye-dy:-.04em;--brow-o:1;--brow-lr:-16deg;--brow-rr:4deg;--brow-y:-.02em;--m-w:.15em;--m-h:0em;--m-bb:.055em;--m-rad:0;--m-tx:-10%} .nabd-face[data-mood="love"]{--cheek-o:1;--brow-o:0;--m-w:.3em;--m-h:.14em;--m-bb:0em;--m-bg:#3b1d1d;--m-rad:0 0 .3em .3em} .nabd-face[data-mood="love"] .eye{background:#e5484d;width:.21em;height:.18em;top:.32em;border-radius:0;clip-path:polygon(50% 100%,0 42%,0 18%,22% 0,50% 22%,78% 0,100% 18%,100% 42%);animation:nabdBeat .8s ease-in-out infinite} .nabd-face[data-mood="sleepy"]{--brow-o:.7;--brow-y:.02em;--m-w:.14em;--m-h:.12em;--m-bb:.05em;--m-bt:.05em;--m-bs:.05em;--m-rad:50%;--m-top:.62em} .nabd-face[data-mood="sleepy"] .eye{animation:none;transform:scaleY(.14);top:.38em} .nabd-face[data-mood="sleepy"] .mouth{animation:nabdSnore 2.8s ease-in-out infinite} .nabd-face[data-mood="oops"]{--brow-o:1;--brow-lr:-18deg;--brow-rr:18deg;--brow-y:-.01em;--eye-dy:.02em;--m-w:.26em;--m-h:.1em;--m-bb:0em;--m-bt:.06em;--m-rad:50% 50% 0 0;--m-top:.66em} .nabd-face.is-talking .mouth{width:.24em;border:.05em solid #252525;border-radius:50%;background:#3b1d1d;animation:nabdTalk .34s ease-in-out infinite} .nabd-face.is-talking .mouth::after{opacity:0} @keyframes nabdTalk{0%,100%{height:.05em}35%{height:.17em}65%{height:.09em}} @keyframes nabdSnore{0%,100%{width:.12em;height:.1em}50%{width:.17em;height:.16em}} @keyframes nabdBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}} @keyframes nabdHop{0%,100%{transform:translateY(0)}50%{transform:translateY(-.07em)}} /* نافذة نَبض */ .lab-bot-modal{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:18px} .lab-bot-modal[hidden],.lab-bot-typing[hidden]{display:none} .lab-bot-backdrop{position:absolute;inset:0;background:rgba(20,20,20,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:labBotBackdropIn .2s ease both} .lab-bot-card{position:relative;z-index:1;width:min(460px,100%);height:min(680px,90vh);height:min(680px,90dvh);overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.24),0 8px 25px rgba(0,0,0,.12);animation:labBotCardIn .28s cubic-bezier(.2,.8,.2,1) both} .lab-bot-chat-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.07);background:linear-gradient(180deg,#fff,#faf9f6)} .lab-bot-chat-identity{display:flex;align-items:center;gap:12px} .lab-bot-chat-identity>div:last-child{display:flex;flex-direction:column;gap:3px} .lab-bot-chat-identity strong{font-size:15px;line-height:1.2} .lab-bot-chat-identity span{display:flex;align-items:center;gap:5px;font-size:11px;color:#858585} .lab-bot-chat-identity span i{width:7px;height:7px;border-radius:50%;background:var(--tc132,#c49b41);box-shadow:0 0 0 3px var(--tc133,rgba(196,155,65,.12))} .lab-bot-close{width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.045);color:#555;font-size:23px;line-height:1;cursor:pointer;transition:background .18s ease,transform .18s ease} .lab-bot-close:hover{background:rgba(0,0,0,.08);transform:rotate(4deg)} .lab-bot-chat-body{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 14px 18px;background:radial-gradient(circle at top right,var(--tc134,rgba(196,155,65,.06)),transparent 38%),#f8f7f4;scroll-behavior:smooth} .lab-bot-chat-welcome{width:fit-content;margin:0 auto 14px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.045);color:#777;font-size:10px} .lab-bot-message{display:flex;align-items:flex-start;gap:7px;margin:0 0 12px;opacity:0;transform:translateY(9px) scale(.985);transition:opacity .32s ease,transform .32s ease} .lab-bot-message.is-in{opacity:1;transform:none} .lab-bot-bubble{max-width:calc(100% - 36px);padding:10px 13px;border:1px solid var(--tc135,rgba(196,155,65,.14));border-radius:4px 17px 17px 17px;background:#fff;color:#303030;font-size:13px;line-height:1.75;white-space:pre-line;box-shadow:0 3px 12px rgba(0,0,0,.045)} .lab-bot-message--user{justify-content:flex-end} .lab-bot-message--user .lab-bot-bubble{max-width:86%;border-radius:17px 4px 17px 17px;background:linear-gradient(180deg,var(--tc88,#ffe36e),var(--tc79,#ffd23f));border-color:var(--tc136,rgba(201,143,0,.4));color:var(--tc82,#0c1a3a);font-weight:700} .lab-bot-message--medical-note .lab-bot-bubble{color:#b42318;background:#fff7f6;border-color:#efb4b0;font-weight:700} .lab-bot-typing{align-items:center;gap:4px;width:fit-content;margin-inline-start:33px;margin-bottom:10px;padding:10px 12px;border-radius:15px;background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.045)} .lab-bot-typing:not([hidden]){display:flex} .lab-bot-typing i{width:5px;height:5px;border-radius:50%;background:#999;animation:labBotTyping 1.15s infinite ease-in-out} .lab-bot-typing i:nth-child(2){animation-delay:.15s} .lab-bot-typing i:nth-child(3){animation-delay:.3s} .lab-bot-offer{display:grid;gap:7px;white-space:normal} .lab-bot-offer>b{font-size:14px;line-height:1.45;color:var(--tc82,#0c1a3a)} .lab-bot-offer-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px} .lab-bot-offer-price strong{font-size:21px;line-height:1.1;color:var(--tc110,#8a5a00)} .lab-bot-offer-price s{font-size:12px;color:#65738f;text-decoration-color:#d64545;text-decoration-thickness:1.8px} .lab-bot-offer-price em{font-style:normal;font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px;background:#eaf0fb;color:var(--tc82,#0c1a3a)} .lab-bot-offer-tags{display:flex;flex-wrap:wrap;gap:6px} .lab-bot-offer-tags span{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--tc80,#fff6d4);color:var(--tc81,#6a4d00);border:1px solid var(--tc122,rgba(247,185,0,.4))} /* الاختيارات: الزبون يجيب بالضغط فقط */ .lab-bot-choices{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px 12px;border-top:1px solid rgba(0,0,0,.07);background:#fff;max-height:42vh;max-height:42dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .lab-bot-choice{display:inline-flex;align-items:center;gap:6px;min-height:42px;max-width:100%;padding:8px 14px;border:1.5px solid var(--tc137,rgba(12,26,58,.18));border-radius:999px;background:#fff;color:var(--tc82,#0c1a3a);font:700 13px/1.35 'Noto Sans Arabic',system-ui,sans-serif;text-align:start;text-decoration:none;cursor:pointer;touch-action:manipulation;animation:nabdChoiceIn .35s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i,0) * 45ms);transition:background .2s ease,border-color .2s ease,transform .12s ease} .lab-bot-choice:hover{background:var(--tc80,#fff6d4);border-color:var(--tc86,#f7b900)} .lab-bot-choice:active{transform:scale(.96)} .lab-bot-choice.is-primary{background:linear-gradient(180deg,var(--tc88,#ffe36e),var(--tc79,#ffd23f));border-color:var(--tc138,rgba(201,143,0,.5))} .lab-bot-choice.is-back{background:#eef2f8;border-color:transparent;color:#65738f} @keyframes nabdChoiceIn{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}} .lab-bot-chat-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(0,0,0,.07);background:#fff} .lab-bot-chat-foot>span{color:#737373;font-size:10px;line-height:1.5} .lab-bot-ok{flex:0 0 auto}.lab-bot-chat-foot:not(:has(form:not([hidden]))){display:none} body.lab-bot-open{overflow:hidden} @keyframes labBotCardIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes labBotBackdropIn{from{opacity:0}to{opacity:1}} @keyframes labBotTyping{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}} @media(max-width:560px){.lab-bot-modal{padding:10px;align-items:end}.lab-bot-card{width:100%;height:88vh;height:88dvh;border-radius:22px}.lab-bot-bubble{font-size:12.5px}.lab-bot-chat-foot>span{max-width:210px}} /* إبراز العرض أو شريط الحجز بعد أن يرشدك نَبض إليه */ .offer.nabd-spot{outline:3px solid var(--tc86,#f7b900)!important;outline-offset:4px;animation:nabdSpot 1.2s ease-in-out 3} #mixbar.nabd-spot .mixinner{outline:3px solid var(--tc86,#f7b900);outline-offset:3px;animation:nabdSpot 1.2s ease-in-out 3} @keyframes nabdSpot{0%,100%{outline-color:var(--tc86,#f7b900)}50%{outline-color:var(--tc124,rgba(247,185,0,.22))}} @media(prefers-reduced-motion:reduce){.nabd-face *,.nabd-face,.lab-bot-hand,.lab-bot-choice,.lab-bot-card,.lab-bot-backdrop,.lab-bot-message,.lab-bot-typing i,.offer.nabd-spot,#mixbar.nabd-spot .mixinner{animation:none!important;transition:none!important}.lab-bot-say .w{opacity:1;transform:none;transition:none}} body.nabd-off #labBotFab,body.nabd-off #labBotModal{display:none!important} body.nabd-no-chat #labBotModal{display:none!important} .lab-bot-form{display:flex;gap:8px;width:100%;margin:0 0 8px} .lab-bot-form[hidden]{display:none!important} .lab-bot-form input{flex:1;min-width:0;border:1px solid var(--tc85,rgba(12,26,58,.16));border-radius:12px;padding:10px 12px;font:16px "Noto Sans Arabic",sans-serif} .lab-bot-form button{border:0;border-radius:12px;background:linear-gradient(180deg,var(--tc88,#ffe36e),var(--tc79,#ffd23f));color:var(--tc82,#0c1a3a);font:800 13px "Noto Sans Arabic";padding:0 12px;cursor:pointer} .nabd-face[data-mood="dizzy"]{--brow-o:1;--brow-lr:22deg;--brow-rr:-22deg;--brow-y:-.03em;--cheek-o:.35;--m-w:.22em;--m-h:.08em;--m-bb:.05em;--m-rad:40%;--m-top:.61em} .nabd-face[data-mood="dizzy"] .eye{animation:nabdDizzy .45s linear infinite;--eye-w:.16em;--eye-h:.16em} .nabd-face[data-mood="doze"]{--brow-o:0;--cheek-o:.25;--m-w:.18em;--m-h:.07em;--m-bb:.045em;--m-bt:0;--m-bs:0;--m-top:.63em;--m-rad:0 0 50% 50%;--m-bg:transparent} .nabd-face[data-mood="doze"] .eye{animation:none;background:transparent;border:0;border-top:.045em solid #252525;border-radius:50% 50% 0 0;width:.2em;height:.08em;top:.4em} .nabd-face[data-mood="doze"] .eye::after{display:none} .nabd-face[data-mood="doze"]::after{content:"z z";position:absolute;left:70%;top:-.28em;font:.32em/1 ui-sans-serif,system-ui,sans-serif;font-weight:700;color:#6b5a2a;letter-spacing:.04em;opacity:.85;animation:nabdZz 1.6s ease-in-out infinite;pointer-events:none;white-space:nowrap} @keyframes nabdDizzy{0%{transform:rotate(0)}50%{transform:rotate(18deg) translate(.03em,-.02em)}100%{transform:rotate(0)}} .lab-bot-fab.is-drag{cursor:grabbing;transition:none;z-index:1300} .lab-bot-fab.is-drag .nabd-face{transform:scale(1.06)} .lab-bot-fab{touch-action:none} .lab-bot-fab.is-drag{will-change:transform} .booking-bar{display:flex;align-items:stretch;gap:6px;flex-wrap:nowrap} .booking-bar .booking-methods{flex:1;min-width:0} .booking-bar .nabd-ask{flex:0 0 36px;width:36px;min-width:36px;height:auto;align-self:stretch;border:1px solid var(--tc139,rgba(12,26,58,.12));background:#fff;border-radius:12px;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer} .booking-bar .nabd-ask-face{font-size:22px} .booking-bar .nabd-ask:active{transform:scale(.96)} .list-col{display:flex;align-items:stretch;gap:0;min-height:0;flex:0 1 auto} .list-col .list-wrap{flex:1 1 auto;min-width:0} .list-scrub{flex:0 0 22px;display:flex;align-items:stretch;justify-content:center;touch-action:none} .list-scrub-track{position:relative;width:22px;align-self:stretch;cursor:pointer} .list-scrub-line{position:absolute;left:50%;top:8px;bottom:8px;width:1px;background:var(--tc140,#0c1a3a33);transform:translateX(-50%)} .list-scrub-bar{position:absolute;left:50%;width:7px;height:18px;margin-left:-3.5px;border-radius:99px;background:var(--tc82,#0c1a3a);top:calc(8px + var(--list-p,0) * (100% - 34px));pointer-events:none} .gift-wrap{overflow-y:hidden!important;touch-action:pan-x} .gift-scrub{flex:0 0 20px} .gift-col{display:flex;align-items:stretch;min-height:0} .gift-col .gift-wrap{flex:1 1 auto;min-width:0} .offer .list-wrap,.golden .list-wrap,.offer .gift-wrap,.golden .gift-wrap{ scrollbar-width:none!important; -ms-overflow-style:none!important; } .offer .list-wrap::-webkit-scrollbar,.golden .list-wrap::-webkit-scrollbar, .offer .gift-wrap::-webkit-scrollbar,.golden .gift-wrap::-webkit-scrollbar{ display:none!important;width:0!important;height:0!important; } .list-scrub-line{opacity:0!important} /* ===== نَبض v3: ألوان وإكسسوارات وتعابير وخط الشات ===== */ @property --skin1{syntax:'';inherits:true;initial-value:#ffe98a} @property --skin2{syntax:'';inherits:true;initial-value:#ffd23f} .nabd-face{--skin1:var(--tc91,#ffe98a);--skin2:var(--tc79,#ffd23f);--rim:var(--tc131,rgba(201,143,0,.45));background:linear-gradient(145deg,var(--skin1),var(--skin2));border-color:var(--rim);transition:--skin1 .7s ease,--skin2 .7s ease,rotate .35s ease,border-color .5s ease} .nabd-face[data-skin=pink]{--skin1:#ffd6e7;--skin2:#ff9ec5;--rim:rgba(214,51,132,.5)} .nabd-face[data-skin=blue]{--skin1:#d4e8ff;--skin2:#8cbcf2;--rim:var(--tc141,rgba(40,100,180,.5))} .nabd-face[data-skin=gold]{--skin1:var(--tc142,#fff0a8);--skin2:var(--tc143,#f5b700);--rim:var(--tc144,rgba(160,110,0,.6))} .nabd-face[data-skin=violet]{--skin1:#e6dcff;--skin2:#b79cf0;--rim:rgba(100,60,170,.5)} .nabd-face[data-skin=amber]{--skin1:#ffdcb0;--skin2:#ff9a4d;--rim:rgba(190,80,10,.5)} .nabd-face[data-skin=mint]{--skin1:#d2f5e4;--skin2:#7fdcae;--rim:rgba(20,130,80,.5)} /* الإكسسوارات */ .nabd-face::before{content:"";position:absolute;z-index:3;pointer-events:none;right:-.12em;top:-.16em;width:.42em;height:.42em;background:var(--acc-img,none) center/contain no-repeat;opacity:0;transform:scale(.3) rotate(-25deg);transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.6,.5,1)} .nabd-face[data-acc]::before{opacity:1;transform:none} .nabd-face[data-acc=ribbon]{--acc-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22L12 13C15 9.5 17 7.5 17 5.5C17 3.5 15 2.2 12 2.2C9 2.2 7 3.5 7 5.5C7 7.5 9 9.5 12 13L18 22' stroke='%23fff' stroke-width='5.4'/%3E%3Cpath d='M6 22L12 13C15 9.5 17 7.5 17 5.5C17 3.5 15 2.2 12 2.2C9 2.2 7 3.5 7 5.5C7 7.5 9 9.5 12 13L18 22' stroke='%23e8318a' stroke-width='3.2'/%3E%3C/svg%3E")} .nabd-face[data-acc=crown]{--acc-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 19L2 7l6 5 4-8 4 8 6-5-1 12z' fill='%23ffc928' stroke='%238a5a00' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='14.5' r='1.7' fill='%23e8318a'/%3E%3C/svg%3E")} .nabd-face[data-acc=cap]{--acc-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cpath d='M4 13a10 10 0 0 1 20 0z' fill='%231f6fd6'/%3E%3Cpath d='M2 13h25c0 1.8-1.8 2.8-4.5 2.8H6.5C3.800 15.800 2 14.800 2 13z' fill='%23174f9e'/%3E%3Ccircle cx='14' cy='4' r='1.5' fill='%23ffd23f'/%3E%3C/svg%3E")} .nabd-face[data-acc=sparkle]{--acc-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.500 8.500L23 12l-8.500 2.500L12 23l-2.500-8.500L1 12l8.500-2.500z' fill='%23ffd23f' stroke='%23b8860b' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E")} .nabd-face[data-acc=hourglass]{--acc-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12v3c0 3-3 5-4 7 1 2 4 4 4 7v3H6v-3c0-3 3-5 4-7-1-2-4-4-4-7z' fill='%23fff3d6' stroke='%23b45309' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8.500 19h7l1.500 2H7z' fill='%23ff9a4d'/%3E%3C/svg%3E")} .nabd-face[data-acc=flask]{--acc-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6M10 2v7l-5 9a2 2 0 0 0 1.800 3h10.400A2 2 0 0 0 19 18l-5-9V2' fill='%23fff' stroke='%230f766e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.500 15h9l2 3.600a1 1 0 0 1-.9 1.400H6.400a1 1 0 0 1-.9-1.400z' fill='%2334d399'/%3E%3C/svg%3E")} .nabd-face[data-acc=pin]{--acc-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-6.500 7-12a7 7 0 0 0-14 0c0 5.500 7 12 7 12z' fill='%23ef4444' stroke='%23fff' stroke-width='1.6'/%3E%3Ccircle cx='12' cy='10' r='2.600' fill='%23fff'/%3E%3C/svg%3E")} .nabd-face[data-acc=ribbon]::before{right:auto;left:-.14em;top:-.14em;width:.48em;height:.48em;transform:rotate(-14deg)} .nabd-face[data-acc=crown]::before{right:auto;left:50%;top:-.3em;width:.54em;height:.42em;margin-left:-.27em;transform:rotate(-7deg)} .nabd-face[data-acc=cap]::before{right:auto;left:50%;top:-.27em;width:.72em;height:.42em;margin-left:-.36em;transform:rotate(-5deg)} .nabd-face[data-acc=sparkle]::before{animation:nabdTwinkle 1.8s ease-in-out infinite} .nabd-face[data-acc=hourglass]::before{width:.36em;height:.46em;animation:nabdSand 3.2s ease-in-out infinite} @keyframes nabdTwinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.22) rotate(14deg)}} @keyframes nabdSand{0%,40%{transform:rotate(0)}55%,95%{transform:rotate(180deg)}100%{transform:rotate(360deg)}} /* حركة أنعم للعينين والحاجبين + تتبّع النظر */ .nabd-face .eye{translate:var(--look-x,0em) var(--look-y,0em);transition:translate .2s ease-out,width .2s ease,height .2s ease,top .2s ease,border-radius .2s ease} .nabd-face .brow.l,.nabd-face .brow.r{transition:transform .28s cubic-bezier(.3,1.4,.5,1),opacity .2s ease} /* تعابير جديدة */ .nabd-face[data-mood=shy]{--cheek-o:1;--brow-o:1;--brow-lr:-8deg;--brow-rr:8deg;--eye-dx:-.03em;--eye-dy:.03em;--m-w:.2em;--m-h:.07em;--m-bb:.05em;rotate:6deg} .nabd-face[data-mood=cool]{--eye-sy:.62;--brow-o:1;--brow-lr:-12deg;--brow-rr:2deg;--brow-y:-.015em;--cheek-o:.1;--m-w:.27em;--m-h:.08em;--m-bb:.05em;--m-tx:-28%;rotate:-5deg} .nabd-face[data-mood=hurry]{--eye-w:.19em;--eye-h:.24em;--brow-o:1;--brow-lr:-14deg;--brow-rr:14deg;--brow-y:-.05em;--m-w:.15em;--m-h:.14em;--m-bb:.05em;--m-bt:.05em;--m-bs:.05em;--m-rad:50%;--m-top:.6em;animation:nabdHop .3s ease-in-out infinite} .nabd-face[data-mood=hurry]::after{content:"";position:absolute;right:-.04em;top:.12em;width:.09em;height:.14em;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:#6cc4ff;animation:nabdSweat 1s ease-in infinite;pointer-events:none} .nabd-face[data-mood=laugh]{--cheek-o:1;--brow-o:0;--m-w:.44em;--m-h:.26em;--m-bb:0em;--m-bg:#3b1d1d;--m-rad:0 0 .44em .44em;--tongue:1;animation:nabdHop .35s ease-in-out infinite} .nabd-face[data-mood=laugh] .eye{background:transparent;border-top:.06em solid #252525;border-radius:50% 50% 0 0;width:.18em;height:.1em;top:.38em;animation:none} .nabd-face[data-mood=laugh] .eye::after{display:none} @keyframes nabdSweat{0%{transform:translateY(-.03em);opacity:0}30%{opacity:1}100%{transform:translateY(.16em);opacity:0}} /* خط الشات */ .lab-bot-fab,.lab-bot-card,.lab-bot-choice,.lab-bot-form input,.lab-bot-form button,.lab-bot-ok{font-family:'Readex Pro','Noto Sans Arabic',system-ui,sans-serif} .lab-bot-bubble{font-size:14px;line-height:1.9;font-weight:400;padding:11px 14px;text-wrap:pretty} .lab-bot-message--user .lab-bot-bubble{font-weight:600} .lab-bot-choice{font-size:13.5px;font-weight:500;line-height:1.45;padding:9px 15px} .lab-bot-choice.is-primary{font-weight:600} .lab-bot-chat-identity strong{font-size:16px;font-weight:700} .lab-bot-say{font-size:13.5px;font-weight:600} .lab-bot-offer>b{font-weight:600} @media(prefers-reduced-motion:reduce){.nabd-face::before,.nabd-face::after{animation:none!important;transition:none!important}} /* ===== خيارات نَبض: بطاقات شبكية + شريط تنقّل سفلي ===== */ .lab-bot-choices{display:block;padding:10px 12px 8px} .lab-bot-choices-body{display:grid;grid-template-columns:1fr;gap:8px} .lab-bot-choices-body.is-grid{grid-template-columns:1fr 1fr} .lab-bot-choices-body .lab-bot-choice{width:100%;min-height:46px;justify-content:flex-start;border-radius:14px} .lab-bot-choices-body .lab-bot-choice.is-wide{grid-column:1/-1} .lab-bot-choice .ce{flex:none;font-size:17px;line-height:1} .lab-bot-choices-foot{display:flex;gap:8px;margin-top:9px;padding-top:9px;border-top:1px dashed var(--tc145,rgba(12,26,58,.14))} .lab-bot-choices-foot:empty{display:none} .lab-bot-choices-foot .lab-bot-choice{flex:1;min-height:38px;justify-content:center;border-radius:12px;font-size:12.5px} /* ===== عدّاد الفحوصات المختارة ===== */ .lab-bot-count{position:absolute;top:-8px;left:-6px;z-index:4;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#e11d48;color:#fff;font:700 12px/22px 'Readex Pro','Noto Sans Arabic',sans-serif;text-align:center;box-shadow:0 2px 8px rgba(225,29,72,.45),0 0 0 2px #fff;pointer-events:none} .lab-bot-count[hidden]{display:none} .lab-bot-count.bump{animation:nabdBadge .5s cubic-bezier(.3,1.6,.5,1)} @keyframes nabdBadge{0%{transform:scale(.3)}60%{transform:scale(1.35)}100%{transform:scale(1)}} /* ===== شريط الحجز v2: نفس الكلمات ونفس المنطق بتصميم أنظف ===== */ .booking-bar{min-height:54px;gap:8px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible} .booking-bar .booking-methods{padding:0;gap:8px;background:transparent;grid-template-columns:1.25fr 1fr} .booking-bar .booking-methods.one{grid-template-columns:1fr} .booking-bar .booking-method{min-height:54px;padding:8px 12px;border-radius:15px;border:1.5px solid var(--tc11,#e7cb68);background:#fff;color:var(--tc12,#6e5010);box-shadow:0 1px 2px var(--tc146,rgba(110,80,16,.08));transition:transform .12s ease,box-shadow .2s ease,background .2s ease,opacity .22s ease,filter .22s ease} .booking-bar .booking-method span{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:700 13px/1.2 'Readex Pro','Noto Sans Arabic',system-ui,sans-serif;white-space:nowrap} .booking-bar .booking-method span::before{content:"";flex:none;width:17px;height:17px;background:currentColor;-webkit-mask:var(--bk-ico) center/contain no-repeat;mask:var(--bk-ico) center/contain no-repeat} .booking-bar [data-book-method=branch]{--bk-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 22s7-6.500 7-12a7 7 0 0 0-14 0c0 5.500 7 12 7 12zm0-15a3 3 0 1 1 0 6 3 3 0 0 1 0-6z'/%3E%3C/svg%3E")} .booking-bar [data-book-method=home]{--bk-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h5v-5h4v5h5v-8h3z'/%3E%3C/svg%3E")} .booking-bar .booking-method:first-child,.booking-bar .booking-method[aria-pressed=true],.booking-bar .booking-method.is-active{background:linear-gradient(145deg,var(--tc91,#ffe98a),var(--tc79,#ffd23f));border-color:var(--tc131,rgba(201,143,0,.45));color:var(--tc82,#0c1a3a);box-shadow:0 5px 12px -5px var(--tc147,rgba(201,143,0,.6)),inset 0 1px 0 rgba(255,255,255,.7)} .booking-bar .booking-methods:has([aria-pressed=true]) .booking-method[aria-pressed=false]{background:#fff;border-color:var(--tc11,#e7cb68);color:var(--tc12,#6e5010);box-shadow:0 1px 2px var(--tc146,rgba(110,80,16,.08))} .booking-bar .booking-method:active{transform:scale(.97)} .booking-bar.wait-gift .booking-method{opacity:.45;filter:saturate(.6)} .booking-bar .nabd-ask{flex:0 0 54px;width:54px;min-width:54px;border-radius:15px;border:1.5px solid var(--tc148,#f0d77a);background:linear-gradient(145deg,#fffef6,var(--tc149,#fff1bd));box-shadow:0 2px 8px -3px var(--tc94,rgba(201,143,0,.35))} .booking-bar .nabd-ask-face{font-size:28px} /* ===== شريط الحجز v3: شريط واحد بثلاث خانات يفصلها خط ===== */ .booking-bar{display:flex;align-items:stretch;gap:0;min-height:60px;padding:0;border:1.5px solid var(--tc11,#e7cb68);border-radius:16px;background:#fffdf6;box-shadow:0 3px 10px -6px var(--tc131,rgba(201,143,0,.45));overflow:hidden} .booking-bar .booking-methods{flex:1;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;background:transparent} .booking-bar .booking-methods.one{grid-template-columns:1fr} .booking-bar .booking-methods .booking-method{min-width:0;min-height:60px;padding:6px 4px;border:0;border-radius:0;background:transparent;color:var(--tc12,#6e5010);box-shadow:none;display:flex;align-items:center;justify-content:center} .booking-bar .booking-method + .booking-method{border-inline-start:1px solid var(--tc11,#e7cb68)} .booking-bar .booking-method span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;white-space:normal;text-align:center;font:700 12.5px/1.3 'Readex Pro','Noto Sans Arabic',system-ui,sans-serif} .booking-bar .booking-method span::before{width:19px;height:19px} .booking-bar .booking-methods .booking-method[aria-pressed=true],.booking-bar .booking-methods .booking-method.is-active{background:linear-gradient(145deg,var(--tc91,#ffe98a),var(--tc79,#ffd23f));color:var(--tc82,#0c1a3a);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)} .booking-bar .booking-methods:has([aria-pressed=true]) .booking-method[aria-pressed=false]{background:transparent;color:var(--tc12,#6e5010);box-shadow:none} .booking-bar .nabd-ask{flex:0 0 58px;width:58px;min-width:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;border-inline-start:1px solid var(--tc11,#e7cb68);border-radius:0;background:linear-gradient(145deg,#fffef6,var(--tc149,#fff1bd));box-shadow:none} .booking-bar .nabd-ask-face{font-size:26px} .booking-bar .nabd-ask::after{content:"نَبض";font:700 11px/1 'Readex Pro','Noto Sans Arabic',sans-serif;color:var(--tc12,#6e5010)} /* ===== شريط حجز الفحوصات المفردة: نفس شريط الباقات (أقرب فرع | سحب منزلي | احجز الآن) ===== */ .booking-bar [data-mix-method=branch]{--bk-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 22s7-6.500 7-12a7 7 0 0 0-14 0c0 5.500 7 12 7 12zm0-15a3 3 0 1 1 0 6 3 3 0 0 1 0-6z'/%3E%3C/svg%3E")} .booking-bar [data-mix-method=home]{--bk-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h5v-5h4v5h5v-8h3z'/%3E%3C/svg%3E")} .mix-book-bar .booking-cta{flex:0 0 36%;min-width:0;min-height:60px;margin:0;padding:6px 8px;display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-inline-start:1px solid var(--tc11,#e7cb68);border-radius:0;background:linear-gradient(145deg,var(--tc150,#1b2b4f),var(--tc82,#0c1a3a));color:#fff;box-shadow:none;font:800 13.5px/1.25 'Readex Pro','Noto Sans Arabic',system-ui,sans-serif;text-align:center;transition:filter .2s ease,transform .12s ease} .mix-book-bar .booking-cta:active:not(:disabled){transform:scale(.98)} .mix-book-bar .booking-cta:disabled{background:var(--tc151,#f3ecd2);color:#a39565;cursor:not-allowed} .mixclear{min-height:60px;border-radius:16px;padding:0 14px;font-size:12.5px} .mixtxt{align-items:center} /* ========================================================================== فروعنا v2 — «أين أذهب الآن؟» كل القواعد مقيّدة بـ #branches / #branchList كي لا تتأثر قائمة التأمين (#insList تستعمل .branches و .bcard نفسيهما). ========================================================================== */ /* رأس القسم: العنوان يمينًا و«خريطة الفروع» يسارًا كزر صغير. */ #branches{scroll-margin-top:78px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:end} #branches>*{grid-column:1/-1;min-width:0} #branches>.sec-title{grid-column:1} #branches>#mapHint{grid-column:2;margin:0 0 3px} #mapHint:empty{display:none} #mapHint a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--navy);box-shadow:var(--hi);font:700 12.5px/1 'Noto Sans Arabic',system-ui,sans-serif;text-decoration:none;white-space:nowrap} /* أيقونات بالقناع (mask) فتأخذ لون النص ولا تحتاج ملفات. */ .br-ico{flex:none;display:inline-block;width:19px;height:19px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat} .br-i-locate{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4'/%3E%3C/svg%3E")} .br-i-nav{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4.5 20.3l.7.7 6.8-3 6.8 3 .7-.7z'/%3E%3C/svg%3E")} .br-i-tel{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E")} .br-i-clock{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")} /* الشريط العلوي */ .br-tools{margin-top:14px} .br-find{display:grid;grid-template-columns:minmax(0,1fr);gap:8px} .br-find.two{grid-template-columns:minmax(0,1fr) auto} .br-find:empty{display:none} .br-locate,.br-call{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;border-radius:16px;font:800 14px/1.2 'Noto Sans Arabic',system-ui,sans-serif;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,filter .2s ease,background .2s ease} .br-locate b,.br-call b{font-weight:800} .br-locate{border:1px solid var(--tc100,rgba(247,185,0,.55));background:var(--sun-grad);color:var(--navy);box-shadow:var(--hi),0 12px 22px -16px var(--tc152,rgba(201,143,0,.75))} .br-locate.is-done{background:#fff;border:1.5px solid var(--navy);box-shadow:var(--hi)} .br-locate[disabled]{cursor:progress;filter:saturate(.8)} .br-locate[aria-busy="true"] .br-ico{animation:brSpin 1s linear infinite} .br-call{border:1.5px solid var(--navy);background:#fff;color:var(--navy);box-shadow:var(--hi)} .br-locate:active,.br-call:active{transform:scale(.97)} @keyframes brSpin{to{transform:rotate(360deg)}} .br-live{margin:12px 2px 0;font:600 13.5px/1.8 'Noto Sans Arabic',system-ui,sans-serif;color:var(--navy)} .br-live:empty,.br-fine:empty{display:none} .br-live b{font-weight:800} .br-fine{margin:2px 2px 0;font:500 12px/1.6 'Noto Sans Arabic',system-ui,sans-serif;color:var(--slate)} .br-link{min-height:36px;padding:0 6px;border:0;background:none;color:var(--slate);font:700 12.5px/1 'Noto Sans Arabic',system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer} .br-dot{flex:none;display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--st,#b6bfd0);box-shadow:0 0 0 3px var(--st-ring,rgba(101,115,143,.15))} .br-live .br-dot{--st:#b6bfd0;margin-inline-end:9px;vertical-align:middle} .br-live .br-dot.is-on{--st:var(--leaf);--st-ring:rgba(34,160,107,.2)} /* شرائح المدن (نفس شكل شرائح الفحوصات) */ .br-chips{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;margin:10px calc(var(--gut)*-1) 0;padding:2px var(--gut) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .br-chips::-webkit-scrollbar{display:none} @media(min-width:720px){.br-chips{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}} /* القائمة: عمود واحد على الهاتف */ #branchList.branches{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:6px;align-items:stretch} @media(min-width:760px){#branchList.branches{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}} @media(min-width:1060px){#branchList.branches{grid-template-columns:repeat(3,minmax(0,1fr))}} .br-more{grid-column:1/-1;display:grid;place-items:center;margin-top:2px} /* البطاقة: شريط جانبي بلون الحالة (أخضر مفتوح · ذهبي يُغلق قريبًا · رمادي مغلق) */ #branchList .bcard{--st:#b6bfd0;--st-ink:var(--slate);--st-ring:rgba(101,115,143,.15);position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--gloss);color:var(--navy);box-shadow:var(--hi),0 1px 2px var(--tc98,rgba(12,26,58,.05)),0 16px 30px -22px var(--tc120,rgba(12,26,58,.35));animation:tcIn .35s var(--ease) both} #branchList .bcard::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:5px;background:var(--st)} #branchList .bcard[data-st="open"]{--st:var(--leaf);--st-ink:var(--leaf-2);--st-ring:rgba(34,160,107,.18)} #branchList .bcard[data-st="soon"]{--st:var(--sun-2);--st-ink:var(--tc110,#8a5a00);--st-ring:var(--tc153,rgba(247,185,0,.25))} #branchList .bcard[data-st="na"]{--st:#d5dbe8} #branchList .bcard.has-d{grid-template-columns:minmax(0,1fr) 78px} .br-main{min-width:0;padding:13px 16px 11px;padding-inline-start:21px} .br-tag{display:inline-flex;align-items:center;margin:0 0 8px;padding:3px 11px;border-radius:999px;background:var(--navy);color:var(--sun);font:800 11.5px/1.5 'Noto Sans Arabic',system-ui,sans-serif} .br-tag.is-open{background:var(--leaf-soft);color:var(--leaf-ink);box-shadow:inset 0 0 0 1px rgba(34,160,107,.35)} .br-name{margin:0;font:800 clamp(17px,4.9vw,19px)/1.3 'Noto Sans Arabic',system-ui,sans-serif;color:var(--navy);overflow-wrap:anywhere} .br-state{margin:4px 0 0;display:flex;align-items:center;gap:8px;font:800 13px/1.5 'Noto Sans Arabic',system-ui,sans-serif;color:var(--st-ink)} .br-addr{margin:4px 0 0;font:500 13px/1.7 'Noto Sans Arabic',system-ui,sans-serif;color:var(--slate)} .br-addr b{font-weight:700;color:var(--navy)} .br-hours{margin:7px 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font:700 13px/1.5 'Noto Sans Arabic',system-ui,sans-serif;color:var(--navy)} .br-hours .br-ico{width:16px;height:16px;color:var(--slate)} .br-note{font-style:normal;padding:1px 10px;border-radius:999px;background:var(--sun-soft);box-shadow:inset 0 0 0 1px var(--tc101,rgba(247,185,0,.45));color:var(--sun-ink);font:700 11.5px/1.7 'Noto Sans Arabic',system-ui,sans-serif} /* «العقب» المثقّب: المسافة بعد تحديد الموقع (نفس لغة تذاكر العروض) */ .br-stub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;margin:12px 0;padding:0 6px;border-inline-start:2px dotted var(--tc117,rgba(12,26,58,.22));text-align:center} .br-stub b{direction:ltr;font:800 24px/1 'Noto Sans Arabic',system-ui,sans-serif;letter-spacing:-.5px;color:var(--navy)} .br-stub em{font:700 11.5px/1 'Noto Sans Arabic',system-ui,sans-serif;font-style:normal;color:var(--slate)} #branchList .bcard.is-near{border-color:var(--tc106,rgba(247,185,0,.82));box-shadow:0 0 0 1px var(--tc107,rgba(255,224,120,.48)),0 0 9px var(--tc154,rgba(255,197,45,.45)),0 0 22px var(--tc155,rgba(255,193,38,.2)),var(--hi),0 24px 46px -26px var(--tc99,rgba(12,26,58,.32))} .is-near .br-stub{margin:0;padding:12px 6px;background:var(--sun-grad);border-inline-start-color:var(--tc156,rgba(138,90,0,.45))} /* الأزرار: اتجاهات (أساسي) + اتصال */ .br-acts{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:9px 12px 11px;padding-inline-start:17px;border-top:1.5px dashed var(--tc85,rgba(12,26,58,.16));background:linear-gradient(180deg,rgba(255,255,255,0),var(--tc123,rgba(12,26,58,.03)))} .br-acts.two{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} .br-go,.br-tel{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;font:800 14px/1.2 'Noto Sans Arabic',system-ui,sans-serif;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,filter .2s ease,background .2s ease} .br-go{background:linear-gradient(145deg,var(--tc150,#1b2b4f),var(--tc82,#0c1a3a));color:#fff;border:1.5px solid var(--navy)} .br-tel{background:#fff;color:var(--navy);border:1.5px solid var(--line-2)} .br-go:active,.br-tel:active{transform:scale(.97)} @media(hover:hover){.br-go:hover{filter:brightness(1.18)}.br-tel:hover,.br-call:hover{background:var(--sun-soft)}} /* fasting stamp + home booking */ .tk-badges .stamp{white-space:nowrap!important}.tk-badges .stamp b{margin-inline-start:2px} .hb-step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;margin:0 0 10px;display:grid;gap:8px} .hb-head{display:flex;align-items:center;gap:8px} .hb-head i{font-style:normal;flex:0 0 24px;height:24px;border-radius:50%;background:var(--pr);color:#fff;display:grid;place-items:center;font:700 12px/1 'Noto Sans Arabic',system-ui,sans-serif} .hb-head strong{font-size:14px}.hb-head span{margin-inline-start:auto;font-size:11px;color:var(--muted)} .hb-opts{margin:0}.hb-opts .home-location-choice{align-items:center} .hb-ic{flex:0 0 36px;width:36px;height:36px;border-radius:12px;background:var(--sun-soft);display:grid!important;place-items:center;font-size:19px} .hb-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:12.5px;line-height:1.7} .hb-list .hb-fast{background:var(--sun-soft);border:1px solid var(--tc122,rgba(247,185,0,.4));border-radius:10px;padding:6px 10px;font-weight:700} .gfast{font-style:normal;font-size:10.5px;font-weight:700;color:var(--sun-ink);background:var(--sun-soft);border-radius:999px;padding:1px 7px;margin-inline-start:4px;white-space:nowrap} /* ===== Booking sheet — ticket style ===== */ .sheet .sheet-card{background:#fff!important} .sheet .sheet-x{top:12px;left:14px;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border-radius:50%;background:#f2f4f8;color:transparent;font-size:0;overflow:hidden} .sheet .sheet-x:after{content:'×';color:var(--navy);font:400 22px/36px sans-serif;display:block;text-align:center} .sheet .sheet-down{display:none} .sheet .sheet-handle{padding:10px 16px 6px} .sheet .sheet-scroll{padding-top:6px} .sheet .sheet-sum:not(.done){position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 18px;padding:16px 16px 18px;border:0;border-radius:18px;background:radial-gradient(120% 140% at 100% 0,var(--tc157,#1c2f5e) 0,var(--navy) 60%);color:#fff;box-shadow:0 14px 30px -18px var(--tc158,rgba(12,26,58,.7));font-size:inherit} .sheet .sheet-sum:not(.done):after{content:'';position:absolute;inset-inline:14px;bottom:-1px;height:8px;background:radial-gradient(circle at 6px 8px,#fff 4px,transparent 4.5px) 0 0/16px 8px repeat-x} .ss-main{display:grid;gap:4px;min-width:0} .ss-mode{justify-self:start;font:700 11px/1 'Noto Sans Arabic',sans-serif;color:var(--navy);background:var(--sun-grad);padding:5px 9px;border-radius:999px} .ss-main b{font:800 17px/1.35 'Noto Sans Arabic',sans-serif;color:#fff} .ss-main small{font:500 12px/1.5 'Noto Sans Arabic',sans-serif;color:var(--tc159,#ffe9a3)} .ss-price{flex:none;display:grid;place-items:center;min-width:74px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.08);border:1px dashed var(--tc160,rgba(255,210,63,.6));font:800 24px/1 'Noto Sans Arabic',sans-serif;color:var(--sun)} .ss-price small{font:600 11px/1.4 'Noto Sans Arabic',sans-serif;color:#fff} .sheet .form{gap:12px} .bk-group{display:grid;gap:0;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 6px 18px -14px var(--tc120,rgba(12,26,58,.35))} .bk-branch,.sheet .home-location-box{gap:10px;padding:12px;margin:0} .sheet .form label.bk-field{display:flex;align-items:center;gap:12px;padding:10px 14px;margin:0;color:var(--navy);transition:background .2s} .sheet .form label.bk-field+label.bk-field{border-top:1px solid var(--line)} .sheet .form label.bk-field:focus-within{background:var(--sun-soft)} .bk-ic{flex:0 0 38px;height:38px;border-radius:12px;background:#f2f4f8;display:grid;place-items:center;font-size:17px} .bk-field:focus-within .bk-ic{background:var(--sun-grad)} .bk-in{flex:1;display:grid;gap:1px;min-width:0} .bk-in small{font:600 11px/1.3 'Noto Sans Arabic',sans-serif;color:var(--muted)} .sheet .form .bk-in input{padding:3px 0!important;border:0!important;background:transparent!important;font:600 16px/1.4 'Noto Sans Arabic',sans-serif!important;color:var(--navy)!important;box-shadow:none!important;outline:0!important;text-align:right} .bk-in input::placeholder{color:#a6adbb;font-weight:400} .bk-row{display:flex;align-items:center;justify-content:space-between;gap:10px} .bk-title{display:flex;align-items:center;gap:6px;font:800 14px/1 'Noto Sans Arabic',sans-serif;color:var(--navy)} .bk-title i{font-style:normal} .bk-near{border:1px solid var(--tc161,rgba(250,185,20,.55));background:var(--sun-soft);color:var(--sun-ink);border-radius:999px;padding:7px 12px;font:700 12px/1 'Noto Sans Arabic',sans-serif;cursor:pointer;min-height:34px} .bk-near:active{transform:scale(.97)} .sheet .form .bk-select{position:relative;display:block;margin:0} .sheet .form .bk-select:after{content:'';position:absolute;left:16px;top:50%;width:8px;height:8px;border-left:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:translateY(-70%) rotate(-45deg);pointer-events:none} .sheet .form .bk-select select{appearance:none;-webkit-appearance:none;width:100%;padding:13px 14px 13px 40px!important;border:1.5px solid var(--line)!important;border-radius:12px!important;background:#f7f8fb!important;font:700 15px/1.3 'Noto Sans Arabic',sans-serif!important;color:var(--navy)!important} .sheet .form .bk-select select:focus{border-color:var(--sun)!important;background:#fff!important} .bk-hint{font:500 12px/1.5 'Noto Sans Arabic',sans-serif;color:var(--muted)} .bk-hint:empty{display:none} .sheet .hb-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0} .sheet .hb-opts.one{grid-template-columns:1fr} .sheet .hb-opts .home-location-choice{position:relative;display:grid!important;justify-items:center;text-align:center;gap:3px;padding:14px 8px 12px;margin:0;border:1.5px solid var(--line);border-radius:14px;background:#f7f8fb;cursor:pointer;transition:border-color .2s,background .2s,transform .15s} .sheet .hb-opts .home-location-choice input{position:absolute;opacity:0;pointer-events:none} .sheet .hb-opts .home-location-choice b{font:800 13px/1.3 'Noto Sans Arabic',sans-serif;color:var(--navy)} .sheet .hb-opts .home-location-choice small{font:500 11px/1.3 'Noto Sans Arabic',sans-serif;color:var(--muted)} .sheet .hb-opts .hb-ic{width:40px;height:40px;flex:none;border-radius:12px;background:#fff;display:grid!important;place-items:center;font-size:19px;box-shadow:0 2px 6px var(--tc162,rgba(12,26,58,.08))} .sheet .hb-opts .home-location-choice:has(input:checked){border-color:var(--sun);background:var(--sun-soft)} .sheet .hb-opts .home-location-choice:has(input:checked) .hb-ic{background:var(--sun-grad)} .sheet .hb-opts .home-location-choice:has(input:checked):after{content:'✓';position:absolute;top:8px;inset-inline-start:8px;width:18px;height:18px;border-radius:50%;background:var(--navy);color:#fff;font:700 11px/18px sans-serif} .sheet .hb-opts .home-location-choice:has(input:focus-visible){outline:3px solid var(--sun);outline-offset:2px} .sheet .home-gps{justify-self:start} .sheet .hb-list{margin:0;padding:0;list-style:none;display:grid;gap:6px;font:600 12.5px/1.6 'Noto Sans Arabic',sans-serif;color:var(--navy)} .sheet .hb-list li{padding:9px 12px;border-radius:12px;background:#f7f8fb} .sheet .hb-list .hb-fast{background:var(--sun-soft);border:1px solid var(--tc163,rgba(250,185,20,.45))} .sheet .hint:empty{display:none} .sheet .bk-submit{width:100%;min-height:54px;border-radius:16px!important;font:800 16px/1.2 'Noto Sans Arabic',sans-serif!important;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 12px 24px -14px var(--tc164,rgba(12,26,58,.8))} .sheet .bk-submit:after{content:'←';display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sun);color:var(--navy);font-size:15px} .sheet .bk-submit:disabled{opacity:.7} .bk-foot{display:flex;justify-content:center;gap:14px;margin:-2px 0 0;font:600 11px/1.4 'Noto Sans Arabic',sans-serif;color:var(--muted)} .sheet .err:empty{display:none} .sheet .err{padding:8px 12px;border-radius:10px;background:#fdecec} /* ===== Insurance 3D ring ===== */ .ins-ring-stage{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:6px calc(var(--gut,20px) * -1) 0;perspective:1850px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;background:radial-gradient(60% 55% at 50% 60%,var(--tc165,rgba(255,210,63,.18)),transparent 70%)} .ins-ring-stage.is-drag{cursor:grabbing} .ins-ring-stage:after{content:'';position:absolute;left:50%;bottom:14px;width:62%;height:16px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,var(--tc117,rgba(12,26,58,.22)),transparent);pointer-events:none} .ins-ring-tilt{transform-style:preserve-3d;transform:rotateX(-10deg)} .ins-ring{position:relative;transform-style:preserve-3d;will-change:transform} .ins-face-wrap{position:absolute;inset:0;transform-style:preserve-3d} .ins-face,.ins-back{position:absolute;inset:0;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden} .ins-face{display:grid;grid-template-rows:auto auto 1fr;justify-items:center;align-content:start;gap:6px;padding:12px 10px;text-align:center;background:#fff;border:1.5px solid var(--tc161,rgba(250,185,20,.55));box-shadow:0 10px 26px -12px var(--tc104,rgba(12,26,58,.45))} .ins-back{transform:rotateY(180deg);background:linear-gradient(160deg,var(--tc157,#1c2f5e),var(--navy,var(--tc82,#0c1a3a)));opacity:.9} .ins-logo{width:78px;height:62px;display:grid;place-items:center;border-radius:14px;background:#f7f8fb;overflow:hidden} .ins-logo img{max-width:88%;max-height:88%;object-fit:contain;pointer-events:none} .ins-logo-fb{font-size:28px;background:var(--sun-soft,var(--tc80,#fff6d4))} .ins-face b{font:800 13px/1.3 'Noto Sans Arabic',sans-serif;color:var(--navy,var(--tc82,#0c1a3a));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ins-face small{font:600 10.5px/1.35 'Noto Sans Arabic',sans-serif;color:var(--sun-ink,var(--tc81,#6a4d00));background:var(--sun-soft,var(--tc80,#fff6d4));border-radius:999px;padding:2px 8px;align-self:start;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* ===== Nabd: props (tube / syringe), summary card, burst ===== */ .lab-bot-chat-identity{position:relative} .nb-prop{position:absolute;inset-inline-start:30px;top:-30px;width:24px;height:50px;pointer-events:none;opacity:0;transform:translateY(10px) rotate(-8deg) scale(.4);transform-origin:50% 80%;transition:opacity .25s ease,transform .45s cubic-bezier(.2,1.6,.4,1);z-index:3} .nb-prop svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 5px var(--tc166,rgba(12,26,58,.3)))} .nb-prop.on{opacity:1;transform:rotate(-14deg);animation:nbPropWiggle 1.1s ease-in-out .45s infinite} .lab-bot-chat-identity .nb-prop{inset-inline-start:34px;top:-8px;width:20px;height:42px} .nb-prop-mini{position:absolute;inset-inline-start:62%;top:-38%;width:42%;height:88%;opacity:1;transform:rotate(-14deg);animation:none} .lab-bot-mini-face{position:relative} @keyframes nbPropWiggle{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(-2deg) translateY(-2px)}} .nb-sum{display:grid;gap:5px;min-width:210px} .nb-sum-h{font-size:13.5px;margin-bottom:2px} .nb-sum-r{display:grid;grid-template-columns:22px 1fr;gap:6px;align-items:start;padding:5px 8px;border-radius:10px;background:var(--tc167,rgba(12,26,58,.045));font-size:12.5px;line-height:1.5} .nb-sum-r.is-fast{background:var(--tc80,#fff6d4);border:1px solid var(--tc168,rgba(250,185,20,.5));font-weight:700} .nb-burst{position:fixed;z-index:1300;width:0;height:0;pointer-events:none} .nb-burst i{position:absolute;font-style:normal;font-size:16px;animation:nbBurst 1.25s cubic-bezier(.15,.8,.3,1) forwards} @keyframes nbBurst{0%{transform:translate(0,0) scale(.3);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.1) rotate(160deg);opacity:0}} @media(prefers-reduced-motion:reduce){.nb-prop,.nb-prop.on{animation:none!important;transition:none!important}} .sheet .sheet-scroll{padding-top:30px} .sheet .sheet-x{top:10px} .ss-price s{display:block;font:600 12px/1.2 "Noto Sans Arabic",sans-serif;color:#ffffffb3;text-decoration-thickness:1.5px;margin-bottom:3px} /* ===== عروض المواسم ===== */ .season-sec{--bench:#efe2c8;--tint:#fbf3e2;--pr:#7a5626;position:relative;isolation:isolate;background:var(--bench);box-shadow:0 0 0 100vmax var(--bench);clip-path:inset(0 -100vmax);padding-block:22px 18px} .season-sec[hidden]{display:none} .season-sec::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;pointer-events:none;background:var(--deco,none)} .season-banner{display:flex;align-items:center;gap:12px;margin:0 0 8px;padding:12px 16px;border-radius:18px;background:#ffffffcc;border:1px solid #0c1a3a14;box-shadow:0 12px 26px -20px #0c1a3a99} .season-banner .sb-emo{font-size:34px;line-height:1;animation:sbFloat 3.2s ease-in-out infinite} .season-banner .sb-txt{flex:1;min-width:0} .season-banner b{display:block;font:700 18px/1.35 'Noto Sans Arabic',sans-serif;color:var(--pr)} .season-banner small{display:block;font:500 13px/1.4 'Noto Sans Arabic',sans-serif;color:#0c1a3a99} .season-banner .sb-deco{font-size:20px;letter-spacing:2px;opacity:.9} @keyframes sbFloat{50%{transform:translateY(-4px) rotate(-6deg)}} .season-sec .offer .tk-caption{background:linear-gradient(135deg,#fff,var(--tint))!important} .season-sec.is-dark .rail-head{--ink:#fff;--muted:#ffffffbf} .season-sec.is-dark .chapter-track-line{background:linear-gradient(270deg,#ffffff66,#ffffff22)} .season-sec.is-dark .dots i{background:#ffffff40} .season-sec.is-dark .dots i.on{background:var(--pr)} .season-sec.is-dark .season-banner{background:#ffffff1c;border-color:#ffffff33} .season-sec.is-dark .season-banner b{color:#fff} .season-sec.is-dark .season-banner small{color:#ffffffcc} .season-ramadan{--bench:#1b1f4a;--tint:#f8ecc4;--pr:#f4c542;--deco:radial-gradient(circle at 20% 30%,#ffffffcc 0 1px,#fff0 2px) 0 0/170px 130px,radial-gradient(circle at 70% 75%,#ffe9a6cc 0 1.3px,#ffe9a600 2.3px) 0 0/210px 160px,radial-gradient(circle at 50% 50%,#ffffff99 0 .8px,#fff0 1.6px) 40px 20px/120px 110px} .season-ramadan .season-banner b{color:#f4c542} .season-adha{--bench:#efe2c8;--tint:#fbf3e2;--pr:#7a5626;--deco:radial-gradient(circle,#7a56261c 1.6px,#0000 2.2px) 0 0/22px 22px} .season-hijri{--bench:#d4ede6;--tint:#eefaf6;--pr:#0f6b5c;--deco:repeating-linear-gradient(45deg,#0f6b5c10 0 2px,#0000 2px 16px)} .season-mawlid{--bench:#dcefdc;--tint:#f3fbf3;--pr:#1d6b3a;--deco:radial-gradient(circle,#c9a22740 2px,#0000 2.6px) 0 0/26px 26px} .season-independence{--bench:#f3f4f1;--tint:#ffffff;--pr:#007a3d;--deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Cpath d='M0 0L42 21.0L0 42z' fill='%23ce1126'/%3E%3Cpolygon points='14.00,14.80 15.35,18.21 18.85,17.13 17.02,20.31 20.04,22.38 16.42,22.93 16.69,26.59 14.00,24.10 11.31,26.59 11.58,22.93 7.96,22.38 10.98,20.31 9.15,17.13 12.65,18.21' fill='%23fff'/%3E%3C/svg%3E") left top/42px 42px no-repeat,linear-gradient(#000 0 14px,#fff 14px 28px,#007a3d 28px 42px,#0000 42px)} .season-independence .season-banner{border-inline-start:7px solid #ce1126} .season-christmas{--bench:#b3121f;--tint:#fdeaea;--pr:#ffffff;--deco:radial-gradient(circle,#fff 0 1.6px,#fff0 2.3px) 0 0/34px 34px,radial-gradient(circle,#ffffffaa 0 1px,#fff0 1.7px) 17px 17px/34px 34px} .season-christmas::before{top:-34px;animation:snowDrop 1.4s linear infinite;will-change:transform;backface-visibility:hidden} @keyframes snowDrop{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,34px,0)}} @media(prefers-reduced-motion:reduce){.season-christmas::before,.season-banner .sb-emo{animation:none}} /* نَبض: إيموجي لكل قسم + أشكال المواسم */ .lab-bot-emo{position:absolute;top:-12px;inset-inline-end:-8px;font-size:20px;line-height:1;pointer-events:none;filter:drop-shadow(0 2px 3px var(--tc169,#0c1a3a40));opacity:0;transform:scale(.3)} .lab-bot-emo.on{animation:nbEmo .55s cubic-bezier(.3,1.6,.5,1) forwards} @keyframes nbEmo{from{opacity:0;transform:scale(.3) rotate(-30deg)}to{opacity:1;transform:none}} .nabd-face[data-skin=santa]{--skin1:#ffe6d4;--skin2:#f6c3a1;--rim:rgba(179,18,31,.45);background:radial-gradient(ellipse 60% 44% at 50% 102%,#fff 0 95%,#fff0 100%),linear-gradient(145deg,var(--skin1),var(--skin2))} .nabd-face[data-acc=santa]{--acc-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M5 19C7 9 14 3 22 4c4 .5 6 3.5 6 7.5l-3 .5c-.5-2-2-3-3.5-2.5C23 12 24.5 15.5 26 19z' fill='%23d62839' stroke='%238f0f1c' stroke-width='1.2' stroke-linejoin='round'/%3E%3Crect x='2.5' y='17' width='26' height='6' rx='3' fill='%23fff' stroke='%23e3d7d7' stroke-width='.8'/%3E%3Ccircle cx='27.5' cy='11.5' r='3.2' fill='%23fff' stroke='%23e3d7d7' stroke-width='.8'/%3E%3C/svg%3E")} .nabd-face[data-acc=santa]::before{right:auto;left:50%;top:-.44em;width:.86em;height:.62em;margin-left:-.43em;transform:rotate(-6deg)} .nabd-face[data-acc=emo]::before{content:attr(data-acc-emoji);background:none;width:auto;height:auto;font-size:.42em;line-height:1;right:-.24em;top:-.3em} /* ذاكرة الزبون */ .mem-bar{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top,0px));transform:translate(-50%,-20px);z-index:1150;display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 32px);padding:8px 8px 8px 14px;border-radius:999px;background:var(--tc82,#0c1a3a);color:#fff;font:600 13.5px/1.35 'Noto Sans Arabic',sans-serif;box-shadow:0 16px 36px -16px var(--tc170,#0c1a3acc);opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.2,.9,.25,1);pointer-events:none} .mem-bar.on{opacity:1;transform:translate(-50%,0);pointer-events:auto} .mem-bar span{padding-inline-start:4px} .mem-bar button{flex:0 0 auto;border:0;border-radius:999px;padding:7px 12px;font:700 12.5px 'Noto Sans Arabic',sans-serif;cursor:pointer} .mem-bar [data-mem-reset]{background:var(--tc79,#ffd23f);color:var(--tc82,#0c1a3a)} .mem-bar [data-mem-x]{background:#ffffff22;color:#fff;padding:6px 10px} /* المواسم الداكنة: نص البطاقة بلون غامق مقروء */ .season-christmas .offer{--pr:#9b0f1b} .season-ramadan .offer{--pr:#232766} /* المواسم: خلفية كاملة العرض بدون clip-path/box-shadow (يمنع الوميض أثناء التمرير) */ .season-sec{box-shadow:none!important;clip-path:none!important;overflow:hidden;contain:paint;padding-inline:calc((100% - min(1160px,calc(100% - 2*var(--gut))))/2)} .season-sec::before{inset:0!important} .season-christmas::before{top:-34px!important} .season-independence{padding-top:58px!important} .season-independence::before{border-top:0} /* ===== سهولة التصفح (لكبار السن) — بدون تغيير طريقة عمل الموقع ===== */ /* سحبة واحدة = بطاقة واحدة، فلا يتجاوز الزبون العروض بالخطأ */ .rail>.offer{scroll-snap-stop:always!important} /* أقسام المواسم تظهر كاملة تحت الشريط العلوي عند الضغط على اسمها */ .season-sec,#seasonRail{scroll-margin-top:78px} /* لا تكبير مزدوج بالخطأ ولا تأخير عند الضغط */ a,button,label,input,select,.offer{touch-action:manipulation} /* إحساس واضح بالضغط */ a,button,label{-webkit-tap-highlight-color:var(--tc124,rgba(247,185,0,.22))} button:active,.booking-method:active,.gpick:active{filter:brightness(.93)} /* مساحة ضغط أكبر لاختيار الفحوصات المجانية */ .gpick{min-height:44px;align-items:center} /* إطار واضح عند التنقل بلوحة المفاتيح */ :focus-visible{outline:3px solid var(--tc86,#f7b900)!important;outline-offset:2px} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}} /* ===== أعلى الصفحة: بدون فراغ، والملاحظة بجانب الشعار ===== */ main{padding-top:0!important} main>.first-sec{margin-top:0!important} main>.first-sec:not(.season-stack){padding-top:14px} .season-stack>.season-sec:first-child{margin-top:0} .top-note{flex:0 1 auto;min-width:0;max-width:46vw;padding:7px 12px;border-radius:999px;background:linear-gradient(135deg,var(--tc171,#fff6cf),var(--tc172,#ffe27a));border:1px solid var(--tc173,#e9b200);color:var(--tc174,#4a3200);font:700 14px/1.25 'Readex Pro','Noto Sans Arabic',sans-serif;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 6px 14px -10px var(--tc175,#8a5a0099)} .top-note:empty{display:none} .top-note:not(:empty)~#wa{display:none!important} @media(max-width:420px){.top-note{font-size:12.5px}} /* موعد اختياري + فترات السحب المنزلي */ .bk-two{display:grid;grid-template-columns:1.4fr 1fr;gap:8px} .bk-opt{font-weight:500;opacity:.65;font-size:.85em} .bk-when select:disabled{opacity:.5} .hb-periods{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .hb-per{flex:1 1 auto} .hb-per input{position:absolute;opacity:0;pointer-events:none} .hb-per span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 12px;border-radius:12px;border:1.5px solid #dfe3ea;background:#fff;font-weight:700;cursor:pointer} .hb-per input:checked+span{border-color:var(--tc173,#e9b200);background:var(--tc171,#fff6cf);box-shadow:0 0 0 3px var(--tc176,#ffd23f55)} /* ===== نموذج الحجز المضغوط: الفرع والسحب المنزلي بدون تمرير ===== */ .sheet .sheet-scroll{padding-top:20px!important} .sheet .sheet-sum:not(.done){margin:0 0 10px!important;padding:11px 14px 13px!important;border-radius:16px!important} .sheet .ss-main b{font-size:15px;line-height:1.3} .sheet .ss-price{min-width:62px;padding:6px 8px;font-size:20px} .sheet .form{gap:8px!important} .sheet .form label.bk-field{padding:6px 12px!important;gap:10px!important} .sheet .bk-ic{flex-basis:30px;height:30px;width:30px;font-size:14px;border-radius:10px} .sheet .form .bk-in input{font-size:15px!important} .sheet .bk-branch{padding:9px 12px!important;gap:6px!important} .sheet .bk-row{margin:0!important} .sheet .bk-title{font-size:13.5px} .sheet .bk-select select{min-height:42px!important;padding-block:6px!important;font-size:14.5px!important} .sheet .bk-hint{font-size:11.5px!important;margin:0!important;line-height:1.4} .sheet .bk-hint:empty{display:none} .sheet .home-location-box{padding:9px 12px!important;gap:6px!important} .sheet .hb-opts .home-location-choice{display:flex!important;flex-direction:row;justify-items:start;justify-content:center;text-align:start;gap:8px;padding:8px 10px!important} .sheet .hb-opts .home-location-choice small{display:none} .sheet .hb-opts .hb-ic{width:30px!important;height:30px!important;font-size:15px!important} .sheet .hb-opts .home-location-choice:has(input:checked):after{top:-6px;inset-inline-start:-4px} .sheet .hb-per span{min-height:38px;padding:6px 10px;font-size:13.5px} .sheet .hb-periods{margin-top:2px} .sheet .hb-list li{padding:6px 10px} .sheet .bk-submit{min-height:48px!important} .sheet .bk-foot{margin:4px 0 0!important;font-size:11.5px} .sheet .sheet-card{height:auto!important;min-height:0!important;max-height:94vh} .sheet .bk-foot{display:none!important} .sheet .home-when{grid-template-columns:auto 1fr;align-items:center;column-gap:10px} .sheet .home-when>:not(.bk-row):not(.bk-select){grid-column:1/-1} .sheet .home-when .bk-title{white-space:nowrap} /* لا تُظهر أيقونة صورة مكسورة إذا لم يُرفع شعار */ .logo-slot img[hidden]{display:none!important} /* ===================================================================== v6 — شريط تنقّل سفلي، فحوصات مجانية بدون تمرير داخلي، أزرار حجز أنحف ===================================================================== */ /* الشريط العلوي (الشعار) يختفي مع التمرير؛ التنقّل انتقل للأسفل */ header#siteHeader,header#siteHeader.category-mode{position:relative!important;top:auto!important;height:68px!important} #seasonRail,.season-sec,#goldenRail,#allRail,#femaleRail,#maleRail,#exclusiveRail,#temporaryRail,#testsSec,#branches,#insurance{scroll-margin-top:12px!important} :root{--dock-h:64px;--dock-space:0px} body.has-dock{--dock-space:calc(var(--dock-h) + env(safe-area-inset-bottom,0px));padding-bottom:var(--dock-space)} body.has-dock.has-mix{padding-bottom:calc(var(--dock-space) + 96px)} body.has-dock .mixbar{bottom:calc(var(--dock-space) + 10px)} /* نَبض: مكانه الافتراضي أعلى اليمين، تحت شريط الشعار ما دام ظاهرًا */ html body .lab-bot-fab,html body .lab-bot-fab.is-up{top:calc(var(--nb-top,78px) + env(safe-area-inset-top,0px));bottom:auto} .dock{position:fixed;inset-inline:0;bottom:0;z-index:45;display:flex;align-items:stretch;gap:2px;height:var(--dock-space);padding:5px 6px env(safe-area-inset-bottom,0px);box-sizing:border-box;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-top:1px solid var(--line,#e3e7ef);box-shadow:0 -12px 30px -20px var(--tc102,rgba(12,26,58,.4))} .dock[hidden],.dock [hidden]{display:none!important} .dock-btn{appearance:none;position:relative;flex:1 1 0;min-width:0;height:calc(var(--dock-h) - 10px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;border:0;border-radius:14px;background:transparent;color:var(--slate,#5b6476);font:600 11px/1.15 'Noto Sans Arabic',system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s ease,background .2s ease,transform .12s ease} .dock-btn:active{transform:scale(.95)} .dock-btn:focus-visible{outline:2px solid var(--tc82,#0c1a3a);outline-offset:-2px} .dock-btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .dock-btn .dock-lbl{display:block;max-width:100%;overflow:visible;white-space:normal;text-align:center;line-height:1.2;font-size:11px} .dock-offers .dock-lbl{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dock-btn.is-active{color:var(--tc82,#0c1a3a);background:linear-gradient(145deg,var(--tc91,#ffe98a),var(--tc79,#ffd23f));box-shadow:inset 0 0 0 1px var(--tc131,rgba(201,143,0,.45)),0 6px 14px -8px var(--tc94,rgba(201,143,0,.6));font-weight:700} /* زر العروض هو الزر الرئيسي: أعرض قليلًا وبلون الثيم */ .dock-offers{flex:1.25 1 0;background:#fffdf6;box-shadow:inset 0 0 0 1px var(--tc148,#f0d77a);color:var(--tc12,#6e5010)} .dock-offers.is-active{background:linear-gradient(145deg,var(--tc91,#ffe98a),var(--tc79,#ffd23f));box-shadow:inset 0 0 0 1px var(--tc131,rgba(201,143,0,.45)),0 6px 14px -8px var(--tc94,rgba(201,143,0,.6));color:var(--tc82,#0c1a3a)} .dock-offers[aria-expanded=true]{box-shadow:inset 0 0 0 2px var(--tc82,#0c1a3a)} .dock-row{display:flex;align-items:center;justify-content:center;gap:4px;max-width:100%;min-width:0} .dock-offers .dock-lbl{font-weight:700;font-size:11.5px;font-family:'Readex Pro','Noto Sans Arabic',system-ui,sans-serif} .dock-caret{flex:none;width:6px;height:6px;border-top:2px solid currentColor;border-left:2px solid currentColor;transform:translateY(1.5px) rotate(45deg);opacity:.75;transition:transform .25s ease} .dock-offers[aria-expanded=true] .dock-caret{transform:translateY(-1.5px) rotate(225deg)} .dock-lbl.swap{animation:dockSwap .34s cubic-bezier(.2,.9,.25,1)} @keyframes dockSwap{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} /* «اختر العروض» مع السهم المتحرك — يشير الآن إلى زر العروض */ .dock .dock-choice{flex:0 0 auto;min-width:50px;align-self:center;height:calc(var(--dock-h) - 10px);padding:0 2px;font-size:11px} /* القوائم المنبثقة فوق الشريط (نَبض يتنحّى أثناء فتحها) */ body.dock-pop-open .lab-bot-fab{opacity:0!important;visibility:hidden!important;pointer-events:none!important} .dock-scrim{position:fixed;inset:0;z-index:44;background:rgba(12,26,58,.22);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:dockFade .2s ease} .dock-scrim[hidden]{display:none} .dock-pop{position:fixed;inset-inline:10px;bottom:calc(var(--dock-space) + 10px);z-index:46;max-height:min(66vh,560px);display:flex;flex-direction:column;border-radius:22px;background:#fff;border:1px solid var(--line,#e3e7ef);box-shadow:0 26px 60px -24px var(--tc102,rgba(12,26,58,.5));overflow:hidden;transform-origin:50% 100%;animation:dockPop .3s cubic-bezier(.2,.9,.25,1)} .dock-pop[hidden]{display:none} @keyframes dockPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}} @keyframes dockFade{from{opacity:0}to{opacity:1}} .dock-pop-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 8px;font:700 15px/1.3 'Readex Pro','Noto Sans Arabic',sans-serif;color:var(--tc82,#0c1a3a)} .dock-x{appearance:none;width:32px;height:32px;border:0;border-radius:50%;background:#f1f3f8;color:var(--tc82,#0c1a3a);font:400 22px/1 sans-serif;cursor:pointer} .dock-menu{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 12px 14px;overflow:auto} .dk-item{appearance:none;position:relative;display:grid;gap:2px;justify-items:start;text-align:start;min-width:0;padding:11px 14px 11px 12px;border:1px solid var(--line,#e3e7ef);border-inline-start:4px solid var(--acc,var(--tc79,#ffd23f));border-radius:14px;background:#fff;color:var(--tc82,#0c1a3a);cursor:pointer;font:inherit;transition:transform .12s ease,background .2s ease,box-shadow .2s ease} .dk-item b{font:700 13.5px/1.3 'Readex Pro','Noto Sans Arabic',sans-serif;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dk-item small{font:500 11.5px/1.2 'Noto Sans Arabic',sans-serif;color:var(--slate,#5b6476)} .dk-item:active{transform:scale(.97)} .dk-item.is-active{background:linear-gradient(145deg,#fffdf3,var(--tc149,#fff1bd));box-shadow:0 6px 16px -10px var(--tc94,rgba(201,143,0,.6))} .dk-item.is-active::after{content:"أنت هنا";position:absolute;bottom:9px;left:10px;font:700 10px/1 'Noto Sans Arabic',sans-serif;color:var(--tc12,#6e5010);background:var(--tc91,#ffe98a);padding:3px 6px;border-radius:999px} @media(max-width:600px){ body.has-dock.has-mix{padding-bottom:calc(var(--dock-space) + 150px)} } @media(max-width:360px){.dock-btn{font-size:10.5px}.dock .dock-choice{min-width:44px}} @media(min-width:901px){ body.has-dock{--dock-space:calc(var(--dock-h) + 14px)} .dock{left:50%;right:auto;bottom:14px;transform:translateX(-50%);width:min(620px,calc(100% - 32px));height:var(--dock-h);padding:5px 8px;border:1px solid var(--line,#e3e7ef);border-radius:20px} .dock-pop{left:50%;right:auto;width:min(560px,calc(100% - 32px));transform:translateX(-50%);animation:dockPopD .3s cubic-bezier(.2,.9,.25,1)} @keyframes dockPopD{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%)}} .dock-btn{font-size:12px} .dock-offers .dock-lbl{font-size:12.5px} } @media(prefers-reduced-motion:reduce){.dock-pop,.dock-scrim,.dock-lbl.swap{animation:none!important}} /* الفحوصات المجانية: كل الخيارات ظاهرة بدون تمرير داخلي، والعنوان أقرب لما تحته */ .offer .gift-wrap,.golden .gift-wrap,.offer .card-bottom .gift-wrap,.golden .card-bottom .gift-wrap,.gift-wrap.giftbox,.gift-col .gift-wrap{max-height:none!important;overflow:visible!important} .gift-col .gift-scrub,.gift-scrub{display:none!important} .gift-selection-title{margin:0!important} .gift-selection .gift-wrap,.gift-selection .gift-list{margin-top:0!important} .gift-selection .gift-list li{padding-top:2px!important;padding-bottom:2px!important} .gift-selection .gpick{min-height:36px!important} /* أزرار الحجز: بدون أيقونتي الموقع والبيت، وارتفاع أصغر */ .booking-bar .booking-method span::before{display:none!important} .booking-bar{min-height:48px!important} .booking-bar .booking-methods .booking-method{min-height:48px!important;padding:5px 6px!important} .booking-bar .booking-method span{flex-direction:row!important;gap:0!important;font-size:12.5px!important;line-height:1.25!important} .booking-bar .nabd-ask{flex-basis:52px!important;width:52px!important;min-width:52px!important;gap:1px!important} .booking-bar .nabd-ask-face{font-size:22px!important} .booking-bar .nabd-ask::after{font-size:10.5px!important} /* الاسم الإنجليزي للفحص عند اختيار عرض الاسمين */ .t-en{display:block;font:600 .78em/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;opacity:.72;margin-top:2px;text-align:start;unicode-bidi:isolate} /* ===== المشهد الافتتاحي (المجهر) ===== */ .lab-intro{position:relative;overflow:hidden;background:var(--paper);transition:height .62s var(--ease)} .lab-intro.li-closing{height:0!important} .lab-intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .li-stage{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;padding:16px 16px 22px;pointer-events:none} .li-slot{grid-row:1;position:relative;justify-self:center;align-self:center;aspect-ratio:1;height:100%;max-height:100%;max-width:min(88vw,100%)} .li-copy{grid-row:2;text-align:center;display:grid;gap:10px;color:var(--ink)} .li-l1{margin:0;font:700 clamp(25px,7.4vw,48px)/1.25 'Readex Pro','Noto Sans Arabic',system-ui,sans-serif;text-wrap:balance;overflow-wrap:anywhere} .li-l2{margin:0;display:flex;align-items:center;justify-content:center;gap:8px;font:600 clamp(15px,4.3vw,21px)/1.45 'Noto Sans Arabic','Readex Pro',system-ui,sans-serif;color:var(--g3,#a87a1d)} .li-arrow{width:1.35em;height:1.35em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .4s .9s} .li-copy.on .li-arrow{opacity:1;animation:liBob 1s ease-in-out .9s infinite} @keyframes liBob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}} .li-w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(8px);transition:opacity .5s var(--ease),transform .65s var(--ease),filter .55s var(--ease)} .li-copy.on .li-w{opacity:1;transform:none;filter:blur(0)} .li-copy.out .li-w,.li-copy.out .li-arrow{opacity:0;transform:translateY(-.3em);filter:blur(6px);transition-duration:.3s;transition-delay:0s!important;animation:none} .li-scale{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);font:600 11px/1 system-ui,sans-serif;direction:ltr;color:var(--ink);opacity:0;transition:opacity .5s} .lab-intro.li-cells .li-scale{opacity:.6} .li-skip{position:absolute;top:10px;left:10px;z-index:2;border:1px solid rgba(14,29,62,.18);background:rgba(255,255,255,.7);color:var(--ink);border-radius:999px;padding:5px 12px;font:600 12.5px 'Noto Sans Arabic',sans-serif;cursor:pointer} .lab-intro.li-nogl .li-stage{grid-template-rows:1fr}.lab-intro.li-nogl .li-slot{display:none}.lab-intro.li-nogl .li-copy{grid-row:1;align-self:center} .li-lift > section:not(.lab-intro){animation:liLift .8s var(--ease) both} @keyframes liLift{from{transform:translateY(40px);opacity:.25}to{transform:none;opacity:1}} @media (min-width:760px){ .li-stage{grid-template-columns:1fr 1fr;grid-template-rows:1fr;align-items:center;gap:32px;padding:26px max(24px,calc((100% - 1100px)/2 + 16px))} .li-copy{grid-row:1;grid-column:1;text-align:right} .li-l2{justify-content:flex-start} .li-slot{grid-row:1;grid-column:2;height:86%;max-width:100%} } /* ===== تعديلات: عنوان الفحوصات، أسماء الفحوصات، نَبض ===== */ html body .included-tests-title{font-size:15px!important;font-weight:800!important;color:var(--ink)!important;white-space:normal!important;flex-wrap:wrap!important;overflow:visible!important;gap:4px!important;line-height:1.5!important;letter-spacing:0} html body .included-tests-title .included-count{font-size:1.05em!important} html body .list li{padding-block:6px} html body .list .ticon{width:32px;height:32px} html body .list .t-en,html body .gift-list .t-en{display:inline;margin:0;margin-inline-start:6px;font-size:.78em;opacity:.65;white-space:nowrap} html body .lab-bot-fab{inset-inline-start:auto;inset-inline-end:18px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} @media(max-width:600px){html body .lab-bot-fab{inset-inline-end:12px}} .lab-bot-fab.swipe .lab-bot-hand{animation:nabdSwipe 1.3s ease-in-out .3s infinite} @keyframes nabdSwipe{0%{transform:translateX(-14px) rotate(-8deg);opacity:0}15%{opacity:1}70%{transform:translateX(26px) rotate(10deg);opacity:1}100%{transform:translateX(30px) rotate(10deg);opacity:0}} @media(prefers-reduced-motion:reduce){.lab-bot-fab.swipe .lab-bot-hand{animation:none}} /* ===== اسم الفحص في سطر واحد: عربي يمين، إنجليزي يسار مع … ===== */ html body .offer .list li .tn,html body .golden .list li .tn{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap;overflow:hidden} html body .list .tn-ar{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html body .list .tn-en{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:left;font-size:.8em;opacity:.62;unicode-bidi:isolate} html body .offer .list:not(.gift-list) li[data-tid]{cursor:pointer} html body .gift-list .gpick{min-width:0;overflow:hidden} html body .gift-list .gpick .tn{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:6px;overflow:hidden} .tinfo-bg{position:fixed;inset:0;background:rgba(12,26,58,.35);z-index:3000;animation:tinfoFade .2s ease both} .tinfo-pop{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:3001;max-width:460px;margin:auto;background:#fff;border-radius:22px;padding:20px 18px 18px;box-shadow:0 24px 60px -20px rgba(12,26,58,.5);max-height:70vh;overflow:auto;animation:tinfoUp .35s cubic-bezier(.16,1,.3,1) both;color:var(--ink)} .tinfo-pop img{float:left;width:56px;height:56px;object-fit:contain;margin:0 0 6px 8px} .tinfo-pop h3{margin:0 0 4px;font:700 19px/1.4 'Readex Pro','Noto Sans Arabic',sans-serif;padding-inline-end:30px} .tinfo-en{margin:0 0 12px;font-size:14px;opacity:.65;text-align:left} .tinfo-pop dl{margin:0;display:grid;gap:4px;clear:both} .tinfo-pop dt{font-weight:700;font-size:13px;margin-top:8px} .tinfo-pop dd{margin:0;font-size:14px;line-height:1.6;color:#3d4a63;white-space:pre-line} .tinfo-x{position:absolute;top:10px;inset-inline-end:10px;width:34px;height:34px;border-radius:50%;border:0;background:#f1f3f7;font-size:20px;cursor:pointer;color:var(--ink)} @keyframes tinfoFade{from{opacity:0}} @keyframes tinfoUp{from{transform:translateY(30px);opacity:0}} /* ===== عنوان البطاقة: سطران كحد أقصى، وخلفية شفافة قليلًا من الوسط ===== */ .offer .tk-caption{--cap-bg:linear-gradient(135deg,#ffffff,#f4f7fc)} .theme-y .offer .tk-caption{--cap-bg:linear-gradient(135deg,#fffef7,var(--tc96,#fff4c8))} .theme-f .offer .tk-caption{--cap-bg:linear-gradient(135deg,#fffafb,#fde8ee)} .theme-m .offer .tk-caption{--cap-bg:linear-gradient(135deg,#fbfdff,#e7f1fb)} .theme-e .offer .tk-caption{--cap-bg:linear-gradient(135deg,#fdfbff,#eee8fa)} .theme-t .offer .tk-caption{--cap-bg:linear-gradient(135deg,#fffdf7,var(--tc97,#fff1d4))} .offer.golden .tk-caption{--cap-bg:linear-gradient(135deg,#fffdf5,var(--tc115,#fdf0c8))} .season-sec .offer .tk-caption{--cap-bg:linear-gradient(135deg,#fff,var(--tint))} html body .offer .tk-caption{background:transparent!important} html body .offer .tk-caption::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--cap-bg);pointer-events:none; -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.5) 50%,#000 100%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.5) 50%,#000 100%)} html body .offer .tk-caption h2{-webkit-line-clamp:2!important} /* رمش أقل لنَبض: رمشة واحدة كل 12 ثانية تقريبًا */ @keyframes nabdEyesCalm{ 0%,45%,47.5%,100%{transform:translate(var(--eye-dx),var(--eye-dy)) scaleY(var(--eye-sy))} 46.2%{transform:translate(var(--eye-dx),var(--eye-dy)) scaleY(.12)} 20%,30%{transform:translate(calc(var(--eye-dx) + .03em),calc(var(--eye-dy) - .012em)) scaleY(var(--eye-sy))} 70%,80%{transform:translate(calc(var(--eye-dx) - .03em),var(--eye-dy)) scaleY(var(--eye-sy))} } html body .nabd-face .eye{animation-name:nabdEyesCalm;animation-duration:12s} /* لا رمش أثناء الابتسام أو أي تعبير: الرمش فقط في الوجه العادي */ html body .nabd-face[data-mood]:not([data-mood="neutral"]):not([data-mood=""]):not([data-mood="love"]):not([data-mood="dizzy"]) .eye{animation-name:none} /* خانة السؤال الدائمة لنَبض الذكي */ .lab-bot-ask{margin:6px 0 8px} .lab-bot-ask input{font-size:16px} .lab-bot-ask button{white-space:nowrap} /* تعبير نَبض أثناء البحث عن جواب: حاجبان مرفوعان وعينان تتنقلان يمينًا ويسارًا */ .nabd-face[data-mood="searching"]{--brow-o:1;--brow-y:-.05em;--brow-lr:-6deg;--brow-rr:6deg;--m-w:.12em;--m-h:.1em;--m-bb:.05em;--m-bt:.05em;--m-bs:.05em;--m-rad:50%;--m-top:.62em} html body .nabd-face[data-mood="searching"] .eye{animation:nabdScan 1.4s ease-in-out infinite!important} @keyframes nabdScan{0%,100%{transform:translate(-.05em,-.01em)}50%{transform:translate(.05em,-.01em)}} @media(prefers-reduced-motion:reduce){html body .nabd-face[data-mood="searching"] .eye{animation:none!important}} /* الشريط السفلي أوضح بدون تغيير الحجم أو المكان: خط علوي بلون الثيم، ظل أوضح، وخلفية خفيفة للأزرار حتى تبدو أزرارًا */ .dock{box-shadow:0 -14px 32px -18px var(--tc102,rgba(12,26,58,.5))} .dock::before{content:"";position:absolute;top:-1px;inset-inline:12%;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,transparent,var(--tc79,#ffd23f) 18%,var(--tc79,#ffd23f) 82%,transparent);pointer-events:none} .dock-btn:not(.is-active):not(.dock-offers){background:rgba(12,26,58,.045);box-shadow:inset 0 0 0 1px rgba(12,26,58,.06)} .dock-btn:not(.is-active) svg{color:var(--tc82,#0c1a3a)} .dock.wave .dock-btn,.dock.wave .dock-choice{animation:dockWave .9s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(var(--wi,0) * .13s)} @keyframes dockWave{0%,100%{transform:none}35%{transform:translateY(-5px)}60%{transform:translateY(1px)}} @media (prefers-reduced-motion:reduce){.dock.wave .dock-btn,.dock.wave .dock-choice{animation:none}} .top-note{text-overflow:clip} .top-note.two{white-space:normal;text-align:center;line-height:1.15;border-radius:16px;padding:4px 10px} /* الفحوصات المجانية: الاسم الإنجليزي الطويل لا يخرج من البطاقة — يُختصر بـ … داخل عموده */ html body .gift-wrap.giftbox,html body .offer .giftbox.gift-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important} html body .gift-list li{min-width:0;max-width:100%;overflow:hidden} html body .gift-list .gpick .tn-ar{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html body .gift-list .gpick .tn-en{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ===== نَبض على الجوال: ارتفاع أكبر، يتبع لوحة المفاتيح، وأزرار مضغوطة ===== */ @media(max-width:560px){ .lab-bot-modal{padding:6px;align-items:end} .lab-bot-card{height:calc(var(--nb-vh,100dvh) - 12px)!important;max-height:none!important;border-radius:20px} .lab-bot-chat-head{flex:none} .lab-bot-choices{max-height:30dvh;padding:8px 10px 6px} .lab-bot-choices-body,.lab-bot-choices-body.is-grid{display:flex!important;flex-wrap:wrap;gap:6px} .lab-bot-choices-body .lab-bot-choice{width:auto!important;flex:1 1 auto;min-height:38px;padding:7px 12px;border-radius:12px;font-size:13px;justify-content:center} .lab-bot-choices-body .lab-bot-choice.is-primary{flex-basis:100%} .lab-bot-choices-foot{margin-top:6px;padding-top:6px} .lab-bot-choices-foot .lab-bot-choice{min-height:34px} /* أثناء الكتابة: نخفي الأزرار ليظهر الحديث ووجه نَبض */ .lab-bot-modal.kb-open .lab-bot-choices{display:none!important} } .lab-bot-ask textarea{flex:1;min-width:0;height:46px;resize:none;overflow:hidden;border:1px solid var(--tc85,rgba(12,26,58,.16));border-radius:12px;padding:11px 12px;font:16px/1.4 'Readex Pro','Noto Sans Arabic',sans-serif;white-space:nowrap;box-sizing:border-box} .lab-bot-ask textarea:focus{outline:2px solid var(--tc79,#ffd23f);outline-offset:1px} /* صندوق المجانيات لا يتمدد مع النص الطويل: كل الحاويات تلتزم بعرض البطاقة */ html body .gift-selection,html body .gift-col{min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box} html body .gift-col>.gift-list{flex:1 1 auto;min-width:0;width:100%;max-width:100%;box-sizing:border-box} html body .gift-list li,html body .gift-list .gpick{min-width:0;max-width:100%;box-sizing:border-box} /* عناصر الباقة الإضافية (للعرض فقط) */ .extras-box{margin:8px 0 4px;padding:10px 12px;border:1px dashed var(--line,#e3e7ef);border-radius:14px;background:#fbfbfd} .extras-title{font:700 13px/1.4 'Readex Pro','Noto Sans Arabic',sans-serif;margin-bottom:8px} .extras-cloud{display:flex;flex-wrap:wrap;gap:5px;max-height:132px;overflow:auto;overscroll-behavior:contain} .xchip{font-size:12px;line-height:1.3;padding:4px 9px;border-radius:999px;background:#fff;border:1px solid var(--line,#e3e7ef);white-space:nowrap} .xchip i{font-style:normal;opacity:.65;font-size:.92em} /* حسابات التواصل: نفس الشكل لكل الأيقونات، والألوان من ثيم المختبر */ .social-sec{padding-bottom:10px} .social-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 18px;margin-top:6px} .soc{display:grid;justify-items:center;gap:6px;text-decoration:none;color:var(--tc82,#0c1a3a);font:600 12px/1.2 'Readex Pro','Noto Sans Arabic',sans-serif;min-width:58px} .soc svg{width:26px;height:26px;padding:14px;box-sizing:content-box;border-radius:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;background:linear-gradient(145deg,var(--tc91,#ffe98a),var(--tc79,#ffd23f));box-shadow:inset 0 0 0 1px var(--tc131,rgba(201,143,0,.45)),0 10px 20px -14px var(--tc94,rgba(201,143,0,.8));transition:transform .2s ease} .soc:active svg{transform:scale(.92)} .soc span{opacity:.8} /* المواد الإضافية: عنصران في كل سطر، نص بسيط بدون تمرير داخلي */ .extras-cloud{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 12px;max-height:none!important;overflow:visible!important} .xchip{background:none;border:0;border-bottom:1px dotted var(--line,#e3e7ef);border-radius:0;padding:4px 2px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .ins-ring-stage.ins-many .ins-back{display:none} /* عناصر الباقة الإضافية داخل قائمة الفحوصات */ html body .list li.xhead{font:700 13px/1.4 'Readex Pro','Noto Sans Arabic',sans-serif;padding-top:10px;cursor:default} html body .list li.xrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;cursor:default;font-size:13.5px} html body .list li.xrow span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gift-selection:not(.open) li.gx{display:none!important} .gift-more{display:block;width:100%;margin:2px 0 8px;padding:7px 10px;border:1px dashed var(--tc137,rgba(12,26,58,.18));border-radius:12px;background:#fff;color:var(--tc82,#0c1a3a);font:700 12.5px 'Readex Pro','Noto Sans Arabic',sans-serif;cursor:pointer} /* الفحوصات المجانية: فحص واحد في كل سطر حتى يظهر الاسم كاملًا */ html body .gift-wrap.giftbox,html body .offer .giftbox.gift-wrap,html body .offer:not(.golden) .giftbox.gift-wrap{grid-template-columns:minmax(0,1fr)!important} html body .gift-list .gpick .tn-ar{flex:0 1 auto;overflow:visible;white-space:normal} /* نَبض في الزاوية العليا اليسرى للبطاقة، ومكانه بالأسفل زر الحجز باتصال */ .tk-top{position:relative} .tk-top .nabd-corner{position:absolute;top:10px;left:10px;z-index:4;width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;border:1px solid var(--tc139,rgba(12,26,58,.12));background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -12px rgba(12,26,58,.5);cursor:pointer} .tk-top .nabd-corner .nabd-face{width:32px;height:32px} .booking-bar .booking-call{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:62px;padding:4px 8px;border-radius:12px;border:1px solid var(--tc139,rgba(12,26,58,.12));background:#fff;color:var(--tc82,#0c1a3a);text-decoration:none;font:700 11.5px/1.2 'Readex Pro','Noto Sans Arabic',sans-serif;text-align:center} .booking-bar .booking-call .bc-ico{font-size:17px;line-height:1} .booking-bar .booking-call:active{transform:scale(.96)} /* عند توسيع المجانيات: تبقى داخل صندوقها بارتفاع محدود وتتمرر بداخله، وزر «عرض أقل» يبقى ظاهرًا */ html body .gift-selection.open .gift-col .gift-wrap.giftbox,html body .gift-selection.open .gift-list{max-height:172px!important;overflow-y:auto!important;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch} html body .gift-selection .gift-more{position:relative;z-index:2} /* الحجز عبر واتساب */ .wa-book{display:grid;gap:12px} .wa-prev{display:grid;gap:6px;padding:12px;border-radius:16px;background:color-mix(in srgb,#25d366 8%,transparent);border:1px solid color-mix(in srgb,#25d366 35%,transparent)} .wa-prev small{font-weight:700;opacity:.85} .wa-prev pre{margin:0;max-height:34vh;overflow:auto;white-space:pre-wrap;word-break:break-word;font:inherit;font-size:13.5px;line-height:1.7;text-align:start;overscroll-behavior:contain} .wa-go,.bk-wa-alt{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;text-decoration:none} .wa-go{background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;font-weight:800;min-height:52px;border:0;box-shadow:0 8px 20px -10px #128c7e} .wa-go svg{width:22px;height:22px} .bk-wa-alt{margin-top:8px;background:transparent;color:#128c7e;border:1.5px dashed color-mix(in srgb,#25d366 60%,transparent);font-weight:700;min-height:44px} .booking-bar.call-only .booking-methods{display:none} .booking-bar.call-only .booking-call{flex:1;justify-content:center} /* يد نَبض متزامنة مع تزحزح البطاقة: تنزلق مع البطاقة، تثبت أثناء ظهور الطرف، ثم ترجع */ .lab-bot-fab.swipe.swipe-sync .lab-bot-hand{animation:nabdSwipeSync 2.6s linear 0s 2} @keyframes nabdSwipeSync{0%{transform:translateX(-14px) rotate(-6deg);opacity:0;animation-timing-function:cubic-bezier(.22,.61,.36,1)}8%{opacity:1}30%{transform:translateX(24px) rotate(8deg);opacity:1}62%{transform:translateX(24px) rotate(8deg);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}90%{transform:translateX(-10px) rotate(-4deg);opacity:.9}100%{transform:translateX(-14px) rotate(-6deg);opacity:0}} @media(prefers-reduced-motion:reduce){.lab-bot-fab.swipe.swipe-sync .lab-bot-hand{animation:none}} /* أزرار الحجز: خلفية متوهجة بلون الثيم + خط أوضح وأقوى حتى يُعرف أنها للحجز */ html body .booking-bar .booking-method, html body .booking-bar .booking-methods:has([aria-pressed=true]) .booking-method[aria-pressed=false], html body .booking-bar .booking-call{ position:relative;isolation:isolate; background:radial-gradient(120% 140% at 50% 0%,#fff 0%,var(--tc91,#ffe98a) 55%,var(--tc79,#ffd23f) 100%); border:1.5px solid var(--tc79,#ffd23f); color:var(--tc82,#0c1a3a); box-shadow:0 0 0 1px rgba(255,255,255,.6) inset,0 6px 16px -6px var(--tc147,rgba(201,143,0,.7)),0 0 14px -2px var(--tc79,#ffd23f); } html body .booking-bar .booking-method span, html body .booking-bar .booking-call span:not(.bc-ico){font-weight:800;color:var(--tc82,#0c1a3a);text-shadow:0 1px 0 rgba(255,255,255,.75)} html body .booking-bar .booking-method span::before{background:var(--tc82,#0c1a3a)} html body .booking-bar .booking-method:nth-child(2),html body .booking-bar .booking-call{animation-delay:.6s} html body .booking-bar .booking-call{animation-delay:1.2s} html body .booking-bar .booking-method[aria-pressed=true]{background:linear-gradient(145deg,var(--tc91,#ffe98a),var(--tc79,#ffd23f));box-shadow:0 0 0 2px var(--tc82,#0c1a3a) inset,0 0 18px 0 var(--tc79,#ffd23f)} @keyframes bkGlow{ from{box-shadow:0 0 0 1px rgba(255,255,255,.6) inset,0 6px 16px -8px var(--tc147,rgba(201,143,0,.6)),0 0 8px -4px var(--tc79,#ffd23f)} to{box-shadow:0 0 0 1px rgba(255,255,255,.6) inset,0 8px 20px -6px var(--tc147,rgba(201,143,0,.8)),0 0 20px 1px var(--tc79,#ffd23f)} } html body .booking-bar.wait-gift .booking-method,html body .booking-bar.wait-gift .booking-call{animation:none} @media(prefers-reduced-motion:reduce){html body .booking-bar .booking-method,html body .booking-bar .booking-call{animation:none}} /* ===== قائمة الفحوصات: السحب فوق الأسماء يحرّك الصفحة، والشريط الأيسر (الأيقونات + المقبض) يحرّك القائمة ===== */ html body .offer .list-wrap,html body .golden .list-wrap{overflow-y:hidden!important;touch-action:auto!important} html body .gift-wrap,html body .gift-selection.open .gift-col .gift-wrap.giftbox,html body .gift-selection.open .gift-list{touch-action:auto!important} html body .gift-selection.open .gift-col .gift-wrap.giftbox,html body .gift-selection.open .gift-list{overflow-y:hidden!important} html body .gift-selection.open .gift-col .gift-scrub:not([hidden]){display:flex!important} .has-grip{position:relative} .list-grip{position:absolute;left:0;top:0;bottom:0;width:max(64px,22%);z-index:6;touch-action:pan-x;cursor:ns-resize;border-radius:14px; background:linear-gradient(to right,color-mix(in srgb,var(--tc79,#ffd23f) 16%,transparent),color-mix(in srgb,var(--tc79,#ffd23f) 4%,transparent) 70%,transparent);transition:background .2s ease} .list-grip.is-drag{background:linear-gradient(to right,color-mix(in srgb,var(--tc79,#ffd23f) 30%,transparent),color-mix(in srgb,var(--tc79,#ffd23f) 8%,transparent) 75%,transparent)} .list-grip[hidden]{display:none} /* المسار والمقبض ▲▼ */ html body .list-scrub{flex:0 0 30px!important;padding-block:4px} html body .list-scrub-track{width:30px!important;border-radius:99px;background:color-mix(in srgb,var(--tc79,#ffd23f) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc79,#ffd23f) 45%,transparent)} html body .list-scrub-bar{width:26px!important;height:44px!important;margin-left:-13px!important;border-radius:99px!important;top:calc(2px + var(--list-p,0) * (100% - 48px))!important; background:linear-gradient(160deg,var(--tc91,#ffe98a),var(--tc79,#ffd23f))!important;border:1.5px solid var(--tc131,rgba(201,143,0,.55));box-sizing:border-box; box-shadow:0 4px 10px -3px var(--tc147,rgba(201,143,0,.7)),inset 0 1px 0 rgba(255,255,255,.7)} html body .list-scrub-bar::before{content:"";position:absolute;inset:5px 4px;background:var(--tc82,#0c1a3a); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 30'%3E%3Cpath d='M3 10l5-5 5 5M3 20l5 5 5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 30'%3E%3Cpath d='M3 10l5-5 5 5M3 20l5 5 5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } @keyframes scrubHint{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.12)}} .list-grip.is-drag~.list-scrub .list-scrub-bar::before,.has-grip:has(.list-grip.is-drag) .list-scrub-bar::before{animation:none} @media(prefers-reduced-motion:reduce){html body .list-scrub-bar::before{animation:none}} /* ===== واجهة الرفّ ===== */ .shelf{position:fixed;inset:0;z-index:1100;background:var(--paper,#fbf7ea);opacity:0;transition:opacity .28s ease;direction:rtl} .shelf.in{opacity:1}.shelf.out{opacity:0;transition:opacity .42s ease;pointer-events:none} .sh-top{position:absolute;top:0;left:0;right:0;height:calc(env(safe-area-inset-top,0px) + 70px);z-index:3;background:linear-gradient(var(--paper,#fbf7ea) 70%,transparent);pointer-events:none} .sh-x{position:absolute;z-index:4;top:calc(env(safe-area-inset-top,0px) + 80px);left:14px;width:42px;height:42px;border-radius:50%;border:1px solid color-mix(in srgb,var(--tc2,#0e1d3e) 14%,transparent);background:#fff;color:var(--tc2,#0e1d3e);font:400 26px/1 system-ui,sans-serif;box-shadow:0 4px 12px -6px rgba(14,29,62,.35);cursor:pointer} .sh-body{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:calc(env(safe-area-inset-top,0px) + 74px) 16px calc(env(safe-area-inset-bottom,0px) + 28px);box-sizing:border-box;transform-origin:50% 30%} .sh-head{padding-left:56px;margin-bottom:10px} .sh-head h2{margin:0;font:800 24px/1.2 'Readex Pro','Noto Sans Arabic',sans-serif;color:var(--tc2,#0e1d3e)} .sh-head p{margin:3px 0 0;font:500 13.5px/1.4 'Noto Sans Arabic',sans-serif;color:var(--tc2,#0e1d3e);opacity:.7} .sh-rows{display:flex;flex-direction:column;gap:16px} .sh-row{border-radius:18px;padding:6px 0 2px;opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1),background .3s ease,box-shadow .3s ease;transition-delay:calc(var(--d) * 70ms + 80ms),calc(var(--d) * 70ms + 80ms),0s,0s} .shelf.in .sh-row{opacity:1;transform:none} .sh-title{display:flex;align-items:baseline;gap:7px;width:100%;padding:2px 2px 7px;border:0;background:none;text-align:start;font:700 16px/1.25 'Readex Pro','Noto Sans Arabic',sans-serif;color:var(--tc2,#0e1d3e);cursor:pointer} .sh-title b{font-size:19px} .sh-title small{margin-inline-start:auto;font:700 11.5px/1 'Readex Pro',sans-serif;padding:5px 9px;border-radius:99px;background:color-mix(in srgb,var(--tc79,#ffd23f) 40%,#fff);color:var(--tc82,#0c1a3a);white-space:nowrap} .sh-cards{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;margin-inline:-16px;padding:2px 16px 10px;scroll-padding-inline:16px;scrollbar-width:none} .sh-cards::-webkit-scrollbar{display:none} .sh-card{flex:0 0 calc((100% - 22px) / 3.25);scroll-snap-align:start;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 6px 8px;border-radius:14px;background:#fff;border:1.5px solid color-mix(in srgb,var(--tc79,#ffd23f) 55%,transparent);box-shadow:0 6px 14px -9px rgba(14,29,62,.4);cursor:pointer;font:inherit;color:inherit;transition:transform .12s ease} .sh-card:active{transform:scale(.96)} .sh-row.gold .sh-card{border-color:#e9b949;background:linear-gradient(180deg,#fffaf0,#fff)} .sh-card img{width:100%;aspect-ratio:6/5;object-fit:contain;pointer-events:none} .sh-ph{font-size:32px;line-height:2.1} .sh-name{font:700 11px/1.3 'Noto Sans Arabic',sans-serif;color:var(--tc2,#0e1d3e);text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em} .sh-price{font:800 11px/1 'Readex Pro',sans-serif;color:var(--tc82,#0c1a3a);background:color-mix(in srgb,var(--tc79,#ffd23f) 35%,#fff);padding:4px 8px;border-radius:99px} .sh-row.sh-glow{background:color-mix(in srgb,var(--tc79,#ffd23f) 14%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--tc79,#ffd23f) 55%,transparent)} .sh-hot{animation:shHot 1.2s ease-in-out 2} @keyframes shHot{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 4px var(--tc79,#ffd23f),0 0 22px 2px var(--tc79,#ffd23f)}} .sh-nabd{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 14px} .sh-nabd[hidden]{display:none} .sh-nabd button{border:1.5px solid var(--tc79,#ffd23f);background:linear-gradient(160deg,#fff,var(--tc91,#ffe98a));color:var(--tc82,#0c1a3a);font:700 13px/1 'Noto Sans Arabic',sans-serif;padding:10px 13px;border-radius:99px;cursor:pointer} .sh-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:20px} .sh-quick button{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 12px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--tc2,#0e1d3e) 12%,transparent);background:#fff;font:700 13.5px/1.2 'Noto Sans Arabic',sans-serif;color:var(--tc2,#0e1d3e);cursor:pointer} .sh-quick button span{font-size:19px} .sh-skip{display:block;margin:18px auto 0;border:0;background:none;font:700 14px/1 'Noto Sans Arabic',sans-serif;color:var(--tc2,#0e1d3e);opacity:.75;padding:12px;cursor:pointer} .sh-fly{position:fixed;z-index:1150;margin:0;transform-origin:0 0;pointer-events:none} .offer.sh-landed{animation:shLand 1.6s ease-out} @keyframes shLand{0%{box-shadow:0 0 0 4px var(--tc79,#ffd23f),0 0 30px 4px var(--tc79,#ffd23f)}100%{box-shadow:0 0 0 0 transparent}} html body.shelf-open .lab-bot-fab,html body.shelf-open .lab-bot-fab.is-up{top:calc(env(safe-area-inset-top,0px) + 12px)!important;bottom:auto!important} @media(prefers-reduced-motion:reduce){.sh-row{transition:none;opacity:1;transform:none}.sh-hot,.offer.sh-landed{animation:none}} /* واجهة الرفّ: انتقالات أنعم + الصفحة تحتها لا تُرسم أثناء ظهوره */ .shelf{transition:opacity .5s ease} .shelf.picking .sh-head,.shelf.picking .sh-title,.shelf.picking .sh-quick,.shelf.picking .sh-skip,.shelf.picking .sh-nabd,.shelf.picking .sh-x,.shelf.picking .sh-card:not(.sh-picked){opacity:0;transition:opacity .22s ease} .shelf.picking{background:color-mix(in srgb,var(--paper,#fbf7ea) 92%,transparent)} /* (أُلغي إخفاء الصفحة تحت الرفّ: إعادة رسمها كاملة عند الإغلاق كانت تُظهر البطاقات ناقصة لثوانٍ) */ html.intro-on .lab-bot-fab{opacity:0!important;pointer-events:none!important;transition:opacity .4s ease} /* الرفّ: شريط الموقع العلوي (الشعار) ظاهر، والباقي يبدأ تحته */ .shelf .sh-top{height:auto;background:var(--paper,#fbf7ea);pointer-events:none;box-shadow:0 6px 14px -12px rgba(14,29,62,.4)} .shelf .sh-brand{position:static!important;transform:none!important;margin:0!important;visibility:visible!important;opacity:1!important} .shelf .sh-body{padding-top:calc(var(--sh-h,0px) + 78px)} .shelf .sh-x{top:calc(var(--sh-h,0px) + 84px)} html body.shelf-open .lab-bot-fab,html body.shelf-open .lab-bot-fab.is-up{top:calc(var(--sh-h,0px) + 12px)!important} .bk-extra{display:flex;gap:10px;align-items:flex-start;margin:4px 0 10px;padding:10px 12px;border-radius:14px;border:1.5px dashed var(--tc79,#ffd23f);background:color-mix(in srgb,var(--tc79,#ffd23f) 10%,#fff);cursor:pointer} .bk-extra input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--tc82,#0c1a3a)} .bk-extra b{display:block;font:700 13.5px/1.3 'Noto Sans Arabic',sans-serif;color:var(--tc2,#0e1d3e)} .bk-extra small{display:block;margin-top:2px;font:500 12px/1.4 'Noto Sans Arabic',sans-serif;color:var(--tc2,#0e1d3e);opacity:.75} /* الافتتاحية: قراءة التكبير بأرقام ثابتة العرض حتى لا يهتز النص عند التبديل */ html body .li-scale{font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap} /* الافتتاحية: المجهر الكامل داخل خانة العدسة، يُكبَّر من مركز عدسته العينية */ html body .li-scope{position:absolute;inset:0;width:100%;height:100%;display:block;transform-origin:50% 22%;opacity:0;overflow:visible} /* ===== الافتتاحية داخل شاشة الرفوف: تملأ الشاشة تحت الشعار، ثم تتلاشى وتدخل البطاقات ===== */ html body .shelf > .lab-intro{position:absolute;left:0;right:0;top:var(--sh-h,0px);bottom:0;height:auto!important;z-index:3;transition:opacity .5s ease} html body .shelf > .lab-intro.li-closing{height:auto!important;opacity:0;pointer-events:none} html body .shelf.intro .sh-head,html body .shelf.intro .sh-quick,html body .shelf.intro .sh-skip,html body .shelf.intro .sh-x,html body .shelf.intro .sh-nabd{opacity:0;pointer-events:none} html body .shelf .sh-head,html body .shelf .sh-quick,html body .shelf .sh-skip{transition:opacity .45s ease .25s} html body .shelf.intro .sh-row{opacity:0;transform:translateY(16px)} @media (min-width:760px){html body .shelf > .lab-intro .li-stage{padding-top:20px}} html body .shelf > .lab-intro .li-stage{grid-template-columns:minmax(0,1fr)} html body .shelf > .lab-intro .li-copy{min-width:0} @media (max-width:759px){html body .shelf > .lab-intro .li-slot{height:auto;width:min(86vw,100%,54svh);max-height:none}} @media (min-width:760px){html body .shelf > .lab-intro .li-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} html body .shelf.intro{transition:none} /* الافتتاحية: اسم المختبر وشعاره فوق النص (من إعدادات كل مختبر) */ .li-brand{display:flex;align-items:center;justify-content:center;gap:10px;opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)} .li-copy.on .li-brand{opacity:1;transform:none} .li-copy.out .li-brand{opacity:0;transform:translateY(-.3em);transition-duration:.3s} .li-logo{width:46px;height:46px;flex:none;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:#fff;box-shadow:0 6px 18px -10px rgba(14,29,62,.45)} .li-logo img{width:100%;height:100%;object-fit:contain} .li-logo.li-letter{background:var(--tc79,var(--g2,#d8a938));color:#fff;font:800 24px/1 'Readex Pro','Noto Sans Arabic',sans-serif} .li-name{font:800 clamp(19px,5.4vw,28px)/1.25 'Readex Pro','Noto Sans Arabic',sans-serif;color:var(--tc2,var(--ink,#0e1d3e))} @media (min-width:760px){.li-brand{justify-content:flex-start}} /* ===== شاشة الرفوف (تنظيم جديد): شريط علوي بشعار المختبر واسمه + «اسأل نَبض»، وشريط سفلي ثابت ===== */ html body .shelf .sh-bar{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px;background:color-mix(in srgb,var(--paper,#fbf7ea) 94%,transparent);box-shadow:0 10px 22px -18px rgba(14,29,62,.5);transition:opacity .45s ease} html body .shelf.intro .sh-bar,html body .shelf.intro .sh-foot{opacity:0;pointer-events:none} html body .shelf .sh-lab{display:flex;align-items:center;gap:10px;min-width:0} html body .shelf .sh-logo{width:44px;height:44px;border-radius:13px;flex:none;overflow:hidden;display:grid;place-items:center;background:var(--tc79,#ffd23f);color:var(--tc82,#0c1a3a);font:800 22px/1 'Readex Pro','Noto Sans Arabic',sans-serif;box-shadow:0 6px 14px -8px rgba(14,29,62,.45)} html body .shelf .sh-logo img{width:100%;height:100%;object-fit:contain;background:#fff} html body .shelf .sh-labt{display:grid;min-width:0} html body .shelf .sh-labt b{font:800 17px/1.25 'Readex Pro','Noto Sans Arabic',sans-serif;color:var(--tc2,#0e1d3e);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body .shelf .sh-labt small{font:500 12.5px/1.35 'Noto Sans Arabic',sans-serif;color:var(--tc2,#0e1d3e);opacity:.65} html body .shelf .sh-ask{flex:none;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 7px;border-radius:99px;border:0;background:var(--tc82,#0c1a3a);color:#fff;font:700 13.5px/1 'Noto Sans Arabic',sans-serif;cursor:pointer;box-shadow:0 10px 20px -12px rgba(14,29,62,.7)} html body .shelf .sh-face{position:relative;width:31px;height:31px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#fff6b8,#ffd23f 60%,#f0a800)} html body .shelf .sh-face i{position:absolute;top:10px;width:4px;height:7px;border-radius:3px;background:#2a1a08} html body .shelf .sh-face i:first-child{left:9px}html body .shelf .sh-face i:nth-child(2){right:9px} html body .shelf .sh-face u{position:absolute;left:50%;top:18px;width:11px;height:6px;margin-left:-5.5px;border:2.5px solid #2a1a08;border-top:0;border-radius:0 0 8px 8px} html body .shelf .sh-body{padding-top:calc(var(--sh-h,72px) + 16px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 150px)} html body .shelf .sh-foot{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:22px 16px calc(env(safe-area-inset-bottom,0px) + 8px);background:linear-gradient(color-mix(in srgb,var(--paper,#fbf7ea) 0%,transparent),var(--paper,#fbf7ea) 34%);transition:opacity .45s ease .2s} html body .shelf .sh-foot .sh-quick{display:flex;gap:8px;margin:0} html body .shelf .sh-foot .sh-quick button{flex:1 1 0;justify-content:center;min-height:46px;padding:6px 8px;font-size:13px} html body .shelf .sh-foot .sh-skip{margin:6px auto 0;padding:9px 12px} html body .shelf.picking .sh-bar,html body .shelf.picking .sh-foot{opacity:0;transition:opacity .22s ease} /* الافتتاحية تملأ الشاشة كلها، واسم المختبر يبقى ظاهرًا حتى يطير إلى الشريط */ html body .shelf > .lab-intro{top:0} html body .shelf .li-copy.out .li-brand{opacity:1;transform:none} .sh-brandfly{position:fixed;z-index:1200;margin:0;pointer-events:none;opacity:1;transform-origin:50% 50%} /* زر نَبض العائم لا يتكرر فوق الرفوف (الشريط فيه «اسأل نَبض») */ html body.shelf-open .lab-bot-fab,html body.shelf-open .lab-bot-fab.is-up{opacity:0!important;pointer-events:none!important} /* بطاقة الباقة: فراغ أقل أعلى البطاقة (تصغير لا إزالة)، ومربع السعر شفاف قليلًا لتظهر صورة الباقة خلفه */ html body .offer .tk-top,html body .golden .tk-top{height:136px!important;min-height:136px!important;max-height:136px!important} html body .offer .tk-caption::after{opacity:.72} html body .offer.has-shot .tk-caption{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} html body .offer{height:556px!important;min-height:556px!important;max-height:556px!important} /* كل الأنواع (الذهبية والمواسم…): خلفية المربع نفسه شفافة، والطبقة الخلفية شفافة قليلًا من الجوانب وأكثر في الوسط */ html body .offer.offer .tk-caption.tk-caption{background:transparent!important} /* عنوان القسم (CHAPTER + الاسم) وشريط التنقل: مساحة أقل، وطرفا الخط على شكل سهم */ html body .rail-head{padding-bottom:2px!important} html body .chapter-kicker{min-height:0!important} html body .chapter-meta b{font-size:26px!important;line-height:.95!important} html body .chapter-name{font-size:16px!important} html body .chapter-scrubber{min-height:20px!important;margin-bottom:-2px!important} html body .chapter-track{height:20px!important} html body .rail[data-rail]{padding-top:6px!important} html body .chapter-track::before,html body .chapter-track::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-top:1.5px solid var(--tc74,#0e1d3e66);pointer-events:none} html body .chapter-track::before{left:-1px;border-left:1.5px solid var(--tc74,#0e1d3e66);transform:translateY(-50%) rotate(-45deg)} html body .chapter-track::after{right:-1px;border-right:1.5px solid var(--tc74,#0e1d3e66);transform:translateY(-50%) rotate(45deg)} html body .season-sec.is-dark .chapter-track::before,html body .season-sec.is-dark .chapter-track::after{border-color:#ffffff88} /* مربع الاسم والسعر: الوسط أكثر شفافية لتظهر صورة الباقة بوضوح، والجوانب كما هي */ html body .offer .tk-caption::after{-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.18) 50%,#000 100%)!important;mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.18) 50%,#000 100%)!important} /* الوسط شبه شفاف تمامًا ومنطقة الشفافية أعرض، والتمويه أخف حتى تظهر صورة الباقة بوضوح */ html body .offer .tk-caption::after{-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.04) 32%,rgba(0,0,0,.04) 68%,#000 100%)!important;mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.04) 32%,rgba(0,0,0,.04) 68%,#000 100%)!important} html body .offer.has-shot .tk-caption{-webkit-backdrop-filter:blur(1px)!important;backdrop-filter:blur(1px)!important} /* خلفية خفيفة خلف اسم الباقة فقط وبحجم الاسم نفسه (قصيرًا أو طويلًا) حتى يبقى مقروءًا فوق الصورة */ html body .offer .tk-caption h2{width:fit-content!important;max-width:100%!important;background:rgba(255,255,255,.72)!important;border-radius:10px!important;padding:1px 8px 3px!important;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:0 2px 10px rgba(255,255,255,.55)} /* «اسألني»: يد نَبض تشير إلى نفسه */ .lab-bot-fab.self-point .lab-bot-hand{opacity:1;transform:translate(30px,-6px) rotate(105deg);animation:nabdSelf .9s ease-in-out .3s 3} @keyframes nabdSelf{0%,100%{transform:translate(30px,-6px) rotate(105deg)}50%{transform:translate(25px,-6px) rotate(100deg)}} @media(prefers-reduced-motion:reduce){.lab-bot-fab.self-point .lab-bot-hand{animation:none}} /* أسهم خط التنقل: أبعد قليلًا عن الخط، أوضح، ونبض خفيف للخارج */ html body .chapter-track::before,html body .chapter-track::after{width:9px;height:9px;border-top-width:2px;border-color:var(--tc82,#0c1a3a);opacity:.7;will-change:transform,opacity} html body .chapter-track::before{left:-22px;border-left-width:2px;animation:chapArrL 2.4s ease-in-out infinite} html body .chapter-track::after{right:-22px;border-right-width:2px;animation:chapArrR 2.4s ease-in-out infinite} @keyframes chapArrL{0%,100%{transform:translate(0,-50%) rotate(-45deg);opacity:.55}50%{transform:translate(-3px,-50%) rotate(-45deg) scale(1.12);opacity:.95}} @keyframes chapArrR{0%,100%{transform:translate(0,-50%) rotate(45deg);opacity:.55}50%{transform:translate(3px,-50%) rotate(45deg) scale(1.12);opacity:.95}} html body .season-sec.is-dark .chapter-track::before,html body .season-sec.is-dark .chapter-track::after{border-color:#fff} @media(prefers-reduced-motion:reduce){html body .chapter-track::before,html body .chapter-track::after{animation:none}} /* الجزء المتحرك من خط التنقل: نقطة بدل الخط الغامق حتى لا يغطي الأسهم */ html body .chapter-track-thumb{width:14px!important} html body .chapter-track-thumb i{width:12px!important;height:12px!important;border-radius:50%!important;box-shadow:0 0 0 3px #fff,0 2px 6px var(--tc76,#0e1d3e33)!important} html body .chapter-scrubber:active .chapter-track-thumb i,html body .chapter-scrubber[data-dragging="1"] .chapter-track-thumb i{width:15px!important;height:15px!important} /* الأسهم: أوضح، والسهم في جهة الطرف الذي وصلت إليه يختفي (أول القسم يختفي الأيمن، آخره يختفي الأيسر) */ html body .chapter-track::before,html body .chapter-track::after{border-top-width:2.5px;transition:opacity .25s ease} html body .chapter-track::before{border-left-width:2.5px;opacity:clamp(0,calc((1 - var(--chapter-progress,0)) * 25),.95);animation-name:chapArrL2} html body .chapter-track::after{border-right-width:2.5px;opacity:clamp(0,calc(var(--chapter-progress,0) * 25),.95);animation-name:chapArrR2} @keyframes chapArrL2{0%,100%{transform:translate(0,-50%) rotate(-45deg)}50%{transform:translate(-3px,-50%) rotate(-45deg) scale(1.12)}} @keyframes chapArrR2{0%,100%{transform:translate(0,-50%) rotate(45deg)}50%{transform:translate(3px,-50%) rotate(45deg) scale(1.12)}} /* الرفّ: نَبض الحقيقي في مكانه بالشريط العلوي (يسار الشعار والاسم) */ html body .shelf .sh-nabd-slot{flex:none;display:block;margin-inline-start:auto} html body.shelf-open .lab-bot-fab,html body.shelf-open .lab-bot-fab.is-up{opacity:1!important;pointer-events:auto!important;inset-inline-start:auto!important;inset-inline-end:auto!important;top:var(--shf-top,12px)!important;left:var(--shf-left,12px)!important;right:auto!important;bottom:auto!important;transform:none!important;visibility:visible!important} html body.shelf-open:has(.shelf.intro) .lab-bot-fab{opacity:0!important;pointer-events:none!important} /* بعد الحجز: موقع المختبر بوضوح + اقتراح التذكير (اختياري) */ .ab-card{display:flex;flex-direction:column;gap:10px;margin:0 0 12px;text-align:right;direction:rtl} .ab-loc{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:linear-gradient(135deg,#fff,var(--tc80,#fff6d4));border:1.5px solid var(--tc79,#ffd23f);box-shadow:0 6px 18px -10px var(--tc82,#0c1a3a)} .ab-pin{flex:none;position:relative;width:52px;height:52px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--tc82,#0c1a3a);box-shadow:0 6px 12px -4px var(--tc82,#0c1a3a)} .ab-pin::after{content:"";position:absolute;inset:16px;border-radius:50%;background:var(--tc79,#ffd23f)} .ab-where{display:flex;flex-direction:column;gap:3px;min-width:0} .ab-where small{font-size:12px;font-weight:700;color:var(--tc82,#0c1a3a);opacity:.7} .ab-where b{font-size:20px;line-height:1.25;color:var(--tc2,#0e1d3e)} .ab-where span{font-size:14px;color:var(--tc2,#0e1d3e);opacity:.8;line-height:1.45} .ab-where .ab-hrs{font-size:12.5px;opacity:.7} .ab-map{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:16px;background:var(--tc82,#0c1a3a);color:#fff!important;font-weight:800;font-size:17px;text-decoration:none} .ab-rem{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px 12px;border-radius:14px;border:1px dashed var(--tc74,#0e1d3e40);background:#ffffffaa} .ab-rem span{font-size:13.5px;font-weight:700;color:var(--tc2,#0e1d3e)} .ab-rem-btn{border:1px solid var(--tc82,#0c1a3a);background:#fff;color:var(--tc82,#0c1a3a);border-radius:99px;padding:7px 12px;font:inherit;font-size:13px;font-weight:800;cursor:pointer} .lab-bot-bubble .ab-card{margin:0;min-width:min(250px,62vw)} /* حركة ناعمة للنقطة عند الضغط على الأسهم (أثناء السحب تبقى فورية) */ html body .chapter-scrubber:not([data-dragging="1"]) .chapter-track-thumb{transition:right .5s cubic-bezier(.3,.8,.3,1)} html body .chapter-scrubber:not([data-dragging="1"]) .chapter-track-progress{transition:width .5s cubic-bezier(.3,.8,.3,1)} @media(prefers-reduced-motion:reduce){html body .chapter-scrubber .chapter-track-thumb,html body .chapter-scrubber .chapter-track-progress{transition:none}} /* أداء التمرير: بلا تمويه خلفي (backdrop-filter) ولا قناع (mask) في البطاقات. 1) الاسم: خلفية أوضح قليلًا بدل التمويه، وهالة خفيفة حول الحروف، والصورة تبقى ظاهرة حوله */ html body .offer .tk-caption,html body .offer.has-shot .tk-caption,html body .offer .tk-caption h2{-webkit-backdrop-filter:none!important;backdrop-filter:none!important} html body .offer .tk-caption h2{background:rgba(255,255,255,.84)!important;text-shadow:0 0 6px rgba(255,255,255,.9)} /* 3) مربع السعر: تدرّج لوني عادي (نفس الشكل: جوانب أوضح ووسط شفاف) بدل القناع */ html body .offer .tk-caption{--cap-c:#ffffff} html body .theme-y .offer .tk-caption{--cap-c:var(--tc96,#fff4c8)} html body .theme-f .offer .tk-caption{--cap-c:#fde8ee} html body .theme-m .offer .tk-caption{--cap-c:#e7f1fb} html body .theme-e .offer .tk-caption{--cap-c:#eee8fa} html body .theme-t .offer .tk-caption{--cap-c:var(--tc97,#fff1d4)} html body .offer.golden .tk-caption{--cap-c:var(--tc115,#fdf0c8)} html body .season-sec .offer .tk-caption{--cap-c:var(--tint,#ffffff)} html body .offer .tk-caption::after{-webkit-mask-image:none!important;mask-image:none!important;opacity:1!important; background:linear-gradient(90deg,color-mix(in srgb,var(--cap-c) 72%,transparent) 0%,color-mix(in srgb,var(--cap-c) 4%,transparent) 32%,color-mix(in srgb,var(--cap-c) 4%,transparent) 68%,color-mix(in srgb,var(--cap-c) 72%,transparent) 100%)!important} /* 2) أسهم خط التنقل: تنبض 3 مرات فقط عندما يظهر القسم على الشاشة، ثم تهدأ */ html body .chapter-track::before,html body .chapter-track::after{animation-play-state:paused;animation-iteration-count:3;will-change:auto} html body .chapter-scrubber.arr-live .chapter-track::before,html body .chapter-scrubber.arr-live .chapter-track::after{animation-play-state:running} /* ===== تخفيف عمل الرسوميات (GPU) أثناء التمرير — بدون تغيير أي منطق ===== */ /* 1) الشريط العلوي والسفلي وزر نَبض: خلفية شبه معتمة بدل التمويه الخلفي (يُعاد حسابه كل إطار مع العناصر الثابتة) */ html body header#siteHeader{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(255,255,255,.95))!important} html body .dock{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(255,255,255,.985)!important} html body .lab-bot-fab{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(255,255,255,.97)!important} /* 2) الحبيبات: جزء من خلفية الصفحة (بنفس الشفافية مدمجة في النقش) بدل طبقة ثابتة فوق كامل الشاشة */ html body .wash{display:none!important} html body{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .22 0 0 0 0 .16 0 0 0 .09 -.0306'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(60% 420px at 88% 0,var(--tc92,rgba(255,210,63,.20)),transparent 70%), radial-gradient(40% 380px at 4% 6%,rgba(34,160,107,.07),transparent 70%), linear-gradient(180deg,#fff 0,#f6f8fc 620px,#f6f8fc 100%) !important} /* 3) ظلال أخف ضبابية بنفس الألوان والاتجاه */ html body .offer{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 color-mix(in srgb,var(--tc82,#0c1a3a) 4%,transparent),0 1px 2px color-mix(in srgb,var(--tc82,#0c1a3a) 5%,transparent),0 16px 22px -18px color-mix(in srgb,var(--tc82,#0c1a3a) 34%,transparent)!important} html body .offer.golden{box-shadow:0 0 0 1px rgba(255,224,120,.48),0 0 9px rgba(255,197,45,.58),0 0 14px rgba(255,193,38,.24),inset 0 1px 0 rgba(255,255,255,.95),0 16px 22px -18px color-mix(in srgb,var(--tc82,#0c1a3a) 34%,transparent)!important} html body .tc,html body .bcard{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 color-mix(in srgb,var(--tc82,#0c1a3a) 4%,transparent),0 1px 2px color-mix(in srgb,var(--tc82,#0c1a3a) 5%,transparent),0 10px 16px -14px color-mix(in srgb,var(--tc82,#0c1a3a) 35%,transparent)!important} html body .offer .tk-caption{box-shadow:inset 0 1px 0 #fff,0 10px 14px -10px color-mix(in srgb,var(--tc82,#0c1a3a) 50%,transparent)!important} html body header#siteHeader{box-shadow:inset 0 1px 0 #fff,0 8px 14px -12px color-mix(in srgb,var(--tc82,#0c1a3a) 28%,transparent)!important} html body .lab-bot-fab{box-shadow:0 10px 16px -10px color-mix(in srgb,var(--tc82,#0c1a3a) 45%,transparent),0 2px 6px rgba(0,0,0,.07)!important} /* 4) الأقسام البعيدة لا تُرسم حتى يقترب منها الزبون */ html body #testsSec,html body #branches,html body #insurance{content-visibility:auto;contain-intrinsic-size:auto 900px} /* الشريط الأصفر العامودي بجانب قائمة الفحوصات: أنحف بنحو 40% */ html body .list-scrub{flex:0 0 18px!important} html body .list-scrub-track{width:18px!important} html body .list-scrub-bar{width:16px!important;margin-left:-8px!important} html body .list-scrub-bar::before{inset:6px 2px!important} /* ضمان ظهور صورة الباقة والسعر: أعلى البطاقة (الصورة + مربع السعر) طبقة واحدة ثابتة بدل طبقة منفصلة للصورة، وتُعاد رسمها بعد تحميل الصورة وبعد توقف السحب (بعض متصفحات التطبيقات كانت تتركها فارغة أحيانًا) */ html body .offer .tk-top .shot{transform:none!important;backface-visibility:visible!important;-webkit-backface-visibility:visible!important} html body .offer .tk-top{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden} html body .offer .tk-top.rp{transform:translateZ(0) scale(1.0001)} /* أزرار الرفّ السفلية: أيقونات خطية احترافية بلون الثيم */ html body .shelf .sh-quick .sh-qi{flex:none;width:22px;height:22px;fill:none;stroke:var(--tc82,#0c1a3a);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} html body .shelf .sh-quick button{color:var(--tc2,#0e1d3e)} /* بلا نقاط تحت الصفوف (خط التنقل في الأعلى يكفي)، والأقسام أقرب لبعضها */ html body .rail-sec .dots,html body section .dots{display:none!important} html body .rail[data-rail]{padding-bottom:14px!important} html body .rail-sec + .rail-sec,html body section.rail-sec{padding-top:8px!important} /* الفحوصات بدون سعر (السعر عند الاتصال) */ .unp{margin-top:14px;border:1.5px dashed color-mix(in srgb,var(--tc79,#ffd23f) 70%,transparent);border-radius:16px;background:color-mix(in srgb,var(--tc79,#ffd23f) 7%,#fff);overflow:hidden} .unp-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:13px 14px;border:0;background:none;font:700 14.5px/1.3 'Noto Sans Arabic',sans-serif;color:var(--tc2,#0e1d3e);cursor:pointer;text-align:start} .unp-toggle b{font:800 12px/1 'Readex Pro',sans-serif;padding:4px 8px;border-radius:99px;background:var(--tc79,#ffd23f);color:var(--tc82,#0c1a3a)} .unp-toggle i{margin-inline-start:auto;font-style:normal;font-size:12.5px;opacity:.75;white-space:nowrap} .unp-list{list-style:none;margin:0;padding:0 10px 4px;max-height:420px;overflow-y:auto;overscroll-behavior:contain} .unp-list li{display:flex;align-items:center;gap:8px;padding:9px 4px;border-top:1px solid color-mix(in srgb,var(--tc2,#0e1d3e) 10%,transparent)} .unp-name{flex:1;min-width:0;font:600 13.5px/1.35 'Noto Sans Arabic',sans-serif;color:var(--tc2,#0e1d3e)} .unp-name .tn{display:flex;flex-wrap:wrap;gap:0 6px}.unp-name .tn-en{opacity:.6;font-size:.85em} .unp-fast{display:block;font-size:11px;opacity:.7} .unp-pick,.unp-book{flex:none;min-height:36px;padding:6px 12px;border-radius:10px;font:700 12.5px/1 'Noto Sans Arabic',sans-serif;cursor:pointer} .unp-pick{border:1.5px solid color-mix(in srgb,var(--tc2,#0e1d3e) 18%,transparent);background:#fff;color:var(--tc2,#0e1d3e)} .unp-pick.on{background:var(--tc2,#0e1d3e);color:#fff;border-color:var(--tc2,#0e1d3e)} .unp-book{border:0;background:linear-gradient(145deg,var(--tc91,#ffe98a),var(--tc79,#ffd23f));color:var(--tc82,#0c1a3a)} .unp-empty{justify-content:center;opacity:.7;font-size:13px} .unp-note{margin:0;padding:8px 14px 12px;font:500 12px/1.5 'Noto Sans Arabic',sans-serif;color:var(--tc2,#0e1d3e);opacity:.75} .ss-price.ss-call{font-size:15px;line-height:1.1;text-align:center}.ss-price.ss-call small{display:block;font-size:11px} /* البطاقات الطويلة لا تُرفع كطبقة مستقلة (كانت تُرسم على دفعات فتظهر ناقصة لثوانٍ على الجوالات) */ html body .offer,html body .golden{backface-visibility:visible!important;-webkit-backface-visibility:visible!important} .tc-price.tc-call{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15} .tc-price.tc-call b{font-size:13px}.tc-price.tc-call small{font-size:10.5px;opacity:.7} /* وضوح السعر السابق والحالي: خلفية لكل منهما */ html body .offer .tk-caption .price{background:linear-gradient(180deg,#fffffff2,#fff8e6f2)!important;border:1.5px solid #0000001f!important;border-radius:16px!important;padding:8px 14px 9px!important;min-width:92px!important;gap:5px!important;box-shadow:0 2px 8px #0000001a!important} html body .offer .tk-caption .old{background:#fde7e7!important;color:#8a2323!important;-webkit-text-fill-color:#8a2323!important;font:700 13px/1.3 'Noto Sans Arabic'!important;padding:3px 10px!important;border-radius:999px!important;text-decoration-color:#c62828!important;text-decoration-thickness:2px!important} html body .offer .tk-caption .now{background:transparent!important;font-size:38px!important;font-weight:800!important} html body .offer .tk-caption .now small{font-size:13px!important;font-weight:700!important} /* زر التقييم أعلى الموقع وتذكير التقييم */ html body .top-note.top-note-link{cursor:pointer;text-decoration:none;font-weight:800} .rev-nudge{position:fixed;inset-inline:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 96px);z-index:2500;max-width:420px;margin-inline:auto;background:#fff;color:#1d1d1d;border:1px solid rgba(0,0,0,.08);border-radius:18px;box-shadow:0 12px 34px rgba(0,0,0,.18);padding:14px 16px;display:flex;flex-direction:column;gap:6px;font:500 14px/1.6 'Noto Sans Arabic',sans-serif;opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s} .rev-nudge.on{opacity:1;transform:none} .rev-nudge b{font-size:16px} .rev-nudge-b{display:flex;gap:8px;margin-top:4px} .rev-nudge-b button{flex:1;border:0;border-radius:12px;padding:10px;font:700 14px 'Noto Sans Arabic',sans-serif;cursor:pointer} .rev-nudge .rev-yes{background:var(--tc79,#ffd23f);color:var(--tc82,#0c1a3a)} .rev-nudge .rev-no{background:#f1f1f1;color:#444} .ab-rev{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:8px;border-radius:16px;background:#fff;color:var(--tc82,#0c1a3a)!important;border:1.5px solid var(--tc79,#ffd23f);font-weight:800;font-size:16px;text-decoration:none} /* باقة «صورة»: صورة المحتوى بدل القائمة */ html body .offer .pk-cimage{display:block;width:100%;padding:0;margin:4px 0 10px;border:0;border-radius:16px;background:#fff;position:relative;cursor:zoom-in;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.08)} html body .offer .pk-cimage img{display:block;width:100%;height:auto;max-height:62vh;object-fit:contain;background:#fff} html body .offer .pk-cimg-hint{position:absolute;inset-inline-start:10px;bottom:10px;background:rgba(0,0,0,.6);color:#fff;font:700 12px/1 'Noto Sans Arabic',sans-serif;padding:7px 10px;border-radius:999px} .cimg-view{position:fixed;inset:0;z-index:4000;background:rgba(10,12,18,.92);display:flex;flex-direction:column} .cimg-sc{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom;display:flex;align-items:flex-start;justify-content:center;padding:56px 8px 40px} .cimg-sc img{width:100%;max-width:900px;height:auto;cursor:zoom-in;transition:width .2s} .cimg-sc img.z{width:220%;max-width:none;cursor:zoom-out} .cimg-x{position:absolute;top:12px;inset-inline-end:12px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:#111;font-size:20px;font-weight:800;cursor:pointer} .cimg-tip{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);color:#fff;opacity:.75;font:600 12px 'Noto Sans Arabic',sans-serif} html.cimg-lock,html.cimg-lock body{overflow:hidden} /* /embed/offers (patient result page): only the offer cards, on a transparent page */ html.lv-embed,html.lv-embed body{background:transparent!important;min-height:0!important;overflow:hidden} html.lv-embed body>*:not(#lvEmbed){display:none!important} html.lv-embed #lvEmbed{--gut:4px;padding:2px 0} html.lv-embed #lvEmbed .rail{margin:0;padding:6px 4px 10px;scrollbar-width:none} html.lv-embed #lvEmbed .rail::-webkit-scrollbar{display:none} html.lv-embed #lvEmbed .offer{animation:none}