/* متجر الكتب — يبني على styles.css */

[hidden]{display:none !important}

.shop{padding-block:18px 40px}
.back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--muted);
  font-size:16px;min-height:44px}
.back svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.back:hover{color:var(--ink)}

.shop-head{margin-block:10px 26px}
.shop-head h1{font-size:37px;font-weight:700}
.shop-head h1 .paper{display:block;font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;
  font-size:16px;font-weight:500;color:var(--muted);margin-block-start:6px;letter-spacing:0}
.lede{font-size:18.5px;color:var(--ink-2);margin-block-start:8px;max-width:34ch}
.hint{font-size:16px;color:var(--muted);margin-block-start:10px;
  border-inline-start:2px solid var(--brass);padding-inline-start:12px}

/* البطاقات */
.books{list-style:none;display:grid;gap:14px}
.book{background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column}
.b-cover{position:relative;height:236px;background:linear-gradient(180deg,#FBFBF8 0%,#F0F0EA 100%);
  display:flex;align-items:center;justify-content:center;border-block-end:1px solid var(--line)}
.b-cover img{max-height:200px;width:auto;border-radius:3px;
  box-shadow:0 10px 24px rgba(28,38,39,.24),0 1px 0 rgba(28,38,39,.12)}
.b-soon{position:absolute;inset-block-start:12px;inset-inline-start:12px;background:var(--night);
  color:var(--cream);font-size:13.5px;border-radius:999px;padding:5px 13px}
.b-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.b-body h2{font-size:22px;font-weight:700;margin:0}
.b-desc{font-size:16.5px;color:var(--ink-2);line-height:1.75}
.b-who{font-size:14.5px;color:var(--muted);line-height:1.7;flex:1;
  border-inline-start:2px solid var(--line);padding-inline-start:10px}
.b-foot{display:flex;align-items:center;gap:12px;margin-block-start:2px}
.b-price{font-family:var(--f-head);font-size:24px;font-weight:700;color:var(--brass-text);
  white-space:nowrap}
.b-price i{font-style:normal;font-size:15.5px;color:var(--muted);font-family:var(--f-body)}
.b-add{flex:1;min-height:52px;border-radius:14px;border:1px solid var(--ink);background:transparent;
  color:var(--ink);font-family:var(--f-body);font-size:17px;font-weight:600;cursor:pointer;
  transition:background .16s ease,color .16s ease,transform .16s ease}
.b-add:hover{background:var(--ink);color:var(--cream);transform:translateY(-2px)}
.b-add.on{background:var(--night);border-color:var(--night);color:var(--cream)}
.b-add[disabled]{opacity:.45;cursor:not-allowed;transform:none;background:transparent;
  color:var(--muted);border-color:var(--line)}
.book.soon .b-cover img{filter:grayscale(.28);opacity:.92}

/* معلومة التوصيل في الصفحة */
.ship-info{margin-block-start:36px}
.ship-info h2{font-size:24px;margin-block-end:12px}
.ship-info ul{list-style:none;display:grid;gap:10px}
.ship-info li{display:flex;align-items:center;gap:14px;background:var(--white);
  border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.ship-info .flag{font-size:28.5px;line-height:1}
.ship-info b{display:block;font-size:18px;font-weight:600}
.ship-info li span:not(.flag){font-size:15.5px;color:var(--muted);line-height:1.7}
.ship-note{font-size:14.5px;color:var(--brass-text);margin-block-start:10px}

/* حقول المشتري */
.who-fields{display:grid;gap:6px}
.who-fields label{font-size:15.5px;color:var(--muted)}
.who-fields input{width:100%;min-height:54px;border:1.5px solid rgba(28,38,39,.28);border-radius:14px;
  padding:10px 14px;font-family:var(--f-body);font-size:17.5px;background:var(--white);color:var(--ink)}
.who-fields input::placeholder{color:rgba(28,38,39,.4)}
.who-fields input:focus{outline:2px solid var(--brass);outline-offset:1px;background:var(--white)}
.who-fields input + label{margin-block-start:8px}
.field-error{font-size:14.5px;color:#B03A3A;margin-block-start:4px}
.pay-msg{background:#FBEDED;border:1px solid #E8C9C9;color:#8A2F2F;border-radius:14px;
  padding:12px 16px;font-size:16px;margin-block-start:10px}

/* ما قيل عن الكتب */
.eyebrow{justify-content:flex-start;font-size:17px}
.eyebrow::after{display:none}
.says{margin-block-start:44px}
.says h2{font-size:24px;margin-block-end:16px}
.say-list{list-style:none;display:grid;gap:14px}
.say-list li{position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:22px;padding:22px 20px 18px;display:flex;flex-direction:column}
.say-mark{display:block;font-family:var(--f-head);font-size:40px;line-height:.55;
  color:rgba(196,162,106,.45);margin-block-end:14px;pointer-events:none}
.say-q{font-family:var(--f-head);font-size:19px;font-weight:700;line-height:1.75}
.say-b{font-size:15.5px;color:var(--muted);line-height:1.85;margin-block-start:10px;flex:1}
.say-s{display:flex;align-items:center;gap:10px;margin-block-start:16px;padding-block-start:14px;
  border-block-start:1px solid var(--line)}
.say-s b{font-size:15.5px;font-weight:600}
.say-s span{font-size:13px;color:var(--brass-text);background:rgba(196,162,106,.15);
  border-radius:999px;padding:4px 12px;margin-inline-start:auto}

/* أول رسالة: بطاقة داكنة بارزة */
.say-list li:first-child{background:var(--night);border-color:var(--night);color:var(--cream);
  padding-block:30px 22px}
.say-list li:first-child .say-mark{color:rgba(196,162,106,.7);font-size:48px}
.say-list li:first-child .say-q{font-size:21px}
.say-list li:first-child .say-b{color:var(--mist)}
.say-list li:first-child .say-s{border-block-start-color:rgba(242,240,234,.16)}
.say-list li:first-child .say-s span{color:var(--brass);background:rgba(196,162,106,.18)}


/* كيف تطلب */
.how{margin-block-start:40px}
.how h2{font-size:24px;margin-block-end:14px}
.steps{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;counter-reset:s}
.steps li{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:16px 14px}
.steps .sn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;background:var(--paper);font-family:var(--f-head);font-size:17.5px;font-weight:700;
  color:var(--brass-text);margin-block-end:10px}
.steps b{display:block;font-size:17px;font-weight:600;line-height:1.6}
.steps span:not(.sn){display:block;font-size:14.5px;color:var(--muted);margin-block-start:2px}

/* شريط السلة */
.bar-cart{position:fixed;inset-inline:12px;inset-block-end:12px;z-index:40;background:var(--night);
  color:var(--cream);border-radius:18px;padding:10px 12px 10px 14px;display:flex;align-items:center;
  gap:12px;box-shadow:0 14px 30px rgba(28,38,39,.28)}
.bc-info{display:flex;align-items:center;gap:8px;font-size:16.5px;padding-inline-start:6px}
.bc-info i{font-style:normal;color:var(--mist)}
.bc-btn{margin-inline-start:auto;background:var(--brass);color:var(--night);border:0;border-radius:13px;
  min-height:44px;padding:0 18px;font-family:var(--f-body);font-size:16.5px;font-weight:600;cursor:pointer}
.bc-btn:hover{background:#D2B27C}

/* لوحة السلة */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg{position:absolute;inset:0;background:rgba(15,22,22,.5)}
.sheet-card{position:relative;width:100%;max-width:560px;background:var(--paper);
  border-start-start-radius:24px;border-start-end-radius:24px;padding:14px 16px 16px;
  max-height:92vh;display:flex;flex-direction:column}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding-block-end:10px}
.sheet-head b{font-family:var(--f-head);font-size:22px}
.x{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--white);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.x svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round}
.sheet-body{overflow:auto;flex:1;padding-block:4px 6px;-webkit-overflow-scrolling:touch}
.cart{list-style:none;display:grid;gap:10px}
.step-n{font-family:var(--f-head);font-size:14px;color:var(--brass-text);margin-block-start:22px}
.step-h{font-family:var(--f-head);font-size:19.5px;font-weight:700;margin-block-end:10px}
.req{display:inline-block;font-style:normal;font-size:13px;font-weight:600;color:var(--brass-text);
  background:rgba(196,162,106,.18);border-radius:999px;padding:3px 10px;vertical-align:middle}
.ship{display:grid;gap:10px}
.ship.ask .ship-opt{border-color:var(--brass);animation:ask .9s ease 2}
@keyframes ask{0%,100%{box-shadow:0 0 0 0 rgba(196,162,106,0)}50%{box-shadow:0 0 0 5px rgba(196,162,106,.28)}}
@media (prefers-reduced-motion:reduce){.ship.ask .ship-opt{animation:none}}
.ship-opt{position:relative;text-align:start;background:var(--white);
  border:1.5px solid rgba(28,38,39,.24);border-radius:16px;
  padding:14px 52px 14px 16px;cursor:pointer;font-family:var(--f-body);color:var(--ink);
  display:grid;grid-template-columns:auto 1fr;gap:2px 12px;
  transition:border-color .16s ease,background .16s ease}
/* دائرة اختيار واضحة في طرف البطاقة */
.ship-opt::after{content:"";position:absolute;inset-inline-start:16px;inset-block-start:50%;
  transform:translateY(-50%);width:24px;height:24px;border-radius:50%;
  border:2px solid rgba(28,38,39,.3);background:var(--white)}
.ship-opt[aria-checked="true"]::after{border-color:var(--brass);
  background:radial-gradient(circle,var(--brass) 0 46%,var(--white) 48%)}
.ship-opt .flag{grid-row:1 / span 2;align-self:center;font-size:24px;line-height:1}
.ship-opt b{font-size:18px;font-weight:600}
.ship-opt span:not(.flag){font-size:14.5px;color:var(--muted)}
.ship-opt[aria-checked="true"]{border-color:var(--brass);background:#FBF5E9;
  box-shadow:0 0 0 1.5px var(--brass) inset}
.sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding-block:9px;border-block-start:1px solid var(--line);font-size:17px}
.sum-row b{font-weight:600}
.sum-row .pick{color:var(--brass-text);font-weight:600;font-size:16px}
.sum-row.total{font-size:18.5px;border-block-start:0;padding-block:6px 4px}
.sum-row.total b{font-family:var(--f-head);font-size:25px;font-weight:700}
.safe{font-size:14px;color:var(--muted);text-align:center;margin-block-start:10px}
.safe.warn{color:var(--brass-text);font-weight:600}
.sum-box{background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:6px 16px;margin-block-start:14px}
.sum-box .sum-row:first-child{border-block-start:0}
.cart li{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);
  border-radius:16px;padding:10px 12px}
.cart img{flex:0 0 52px;width:52px;height:68px;object-fit:contain;background:var(--paper);
  border-radius:8px}
.ci-t{flex:1;min-width:0}
.ci-t b{display:block;font-size:17px;font-weight:600;line-height:1.5}
.ci-t span{display:block;font-size:14.5px;color:var(--muted)}
.qty{display:flex;align-items:center;gap:2px;background:var(--paper);border-radius:12px;padding:3px}
.qty button{width:34px;height:34px;border:0;background:transparent;border-radius:9px;cursor:pointer;
  font-size:20.5px;line-height:1;color:var(--ink);font-family:var(--f-body)}
.qty button:hover{background:var(--line)}
.qty b{min-width:24px;text-align:center;font-size:16.5px}
.ci-del{width:36px;height:36px;border:0;background:transparent;border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.ci-del svg{width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:1.7;stroke-linecap:round}
.ci-del:hover svg{stroke:#B03A3A}
.cart-empty{text-align:center;color:var(--muted);font-size:16.5px;padding-block:26px}
.sheet-foot{padding-block-start:10px;border-block-start:1px solid var(--line);
  background:var(--paper);position:sticky;inset-block-end:0}
.sheet-foot .btn{width:100%;margin-block-start:10px;font-size:18.5px;min-height:56px}

body.locked{overflow:hidden}
.shop{padding-block-end:96px}

/* الكمبيوتر */
@media (min-width:760px){
  .books{grid-template-columns:repeat(3,1fr);gap:18px}
  .steps{grid-template-columns:repeat(4,1fr)}
  .say-list{grid-template-columns:repeat(3,1fr);gap:18px}
  .say-list li:first-child{grid-column:1 / -1;padding:34px 34px 24px}
  .say-list li:first-child .say-q{font-size:26px;max-width:38ch}

  .ship{grid-template-columns:1fr 1fr}
  .shop-head h1{font-size:48px}
  .b-cover{height:280px}
  .b-cover img{max-height:238px}
  .ship-info ul{grid-template-columns:1fr 1fr}
  .ship{grid-template-columns:1fr 1fr}
  .sheet{align-items:center}
  .sheet-card{border-radius:24px;max-height:80vh}
  .bar-cart{inset-inline:auto 22px;inset-block-end:22px;min-width:320px}
  .shop{padding-block-end:40px}
}

/* ═══ ورقة الطلب: ثلاث خطوات ═══ */
.sheet-head{gap:10px}
.s-ic{width:34px;height:34px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
 border:1px solid var(--line);border-radius:11px;background:var(--white);color:var(--ink,#1C2627);
 cursor:pointer;padding:0}
.s-ic svg{width:17px;height:17px;fill:none;stroke:currentColor}
.s-ic[hidden]{display:none}
.s-steps{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:6px;
 margin:0;padding:0;list-style:none}
.s-steps li{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#9A968C}
.s-steps li::after{content:"";width:14px;height:1px;background:var(--line)}
.s-steps li:last-child::after{display:none}
.s-steps b{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
 border-radius:50%;border:1px solid var(--line);background:var(--white);font-size:12px;font-weight:600;
 transition:background .2s,border-color .2s,color .2s}
.s-steps li[aria-current="true"]{color:var(--brass-text)}
.s-steps li[aria-current="true"] b{background:var(--brass);border-color:var(--brass);color:#fff}
.s-steps li[data-done="1"] b{background:#3E4B4C;border-color:#3E4B4C;color:#fff}
@media (max-width:400px){.s-steps li span{display:none}}

.s-st[hidden]{display:none}
.s-st{min-width:0}
.s-fwd{animation:sF .24s ease both}
.s-bak{animation:sB .24s ease both}
@keyframes sF{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes sB{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.s-fwd,.s-bak{animation:none}}

.f-lbl{display:block;font-size:14.5px;color:var(--muted);margin-block:12px 5px}
.sheet-body textarea,.sheet-body input[type="tel"],.sheet-body input[type="text"],
.sheet-body input[type="email"]{width:100%;border:1px solid var(--line);border-radius:13px;
 padding:10px 13px;font-family:inherit;font-size:16.5px;background:var(--white);
 color:var(--ink,#1C2627);min-height:50px}
.sheet-body textarea{resize:vertical;line-height:1.75;min-height:76px}
.sheet-body textarea:focus,.sheet-body input:focus{outline:2px solid var(--brass);outline-offset:1px}
.f-hint{margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.7}
.f-hint span{display:block}
.field-error{margin-block-start:14px}
.sheet-foot .btn[hidden]{display:none}
.sheet-foot .btn:disabled{opacity:.45;cursor:not-allowed}

/* عدّاد الزيارات: في طرف شريط «الصفحة الرئيسية»، والزر يبقى في الوسط */
.szhome{position:relative}
.sz-visits-books{position:absolute;inset-inline-end:16px;top:50%;transform:translateY(-50%)}