/* ============================================================
   Bukado — Кошик-панель (висувна збоку)
   Файл: catalog/view/theme/default/stylesheet/bukado-cart-panel.css
   Стилі перенесені ТОЧНО з макета Іри (макет.html). Не змінювати
   вигляд без макета. Підключається напряму через <link> у header.twig.

   Як це влаштовано (для майбутнього менеджера):
   - .overlay — затемнення всього сайту (напівпрозоре темне тло).
   - .panel  — сама панель ПРОЗОРА; крізь неї видно затемнення.
   - .card   — три кремові картки (шапка / список / низ), що «плавають»
               на затемненні; між ними видно темні проміжки.
   - Ширина панелі й ширина обкладинки задаються змінними --panelW і
     --coverW нижче (у :root) — міняти розмір тут.
   ============================================================ */

:root{
  --card:#fdfcfa;        /* колір карток-селекцій */
  --cream:#fdfcfa;
  --green:#047a36;
  --dgreen:#083216;
  --red:#e8462d;
  --icon:#283443;
  --muted:#8a8880;
  --title:#23201b;
  --oldprice:#b7b3ab;
  --panelW:540px;        /* ширина панелі */
  --coverW:72px;         /* ширина обкладинки книги */
}

.bkd-serif, .panel .serif{font-family:Georgia,"Times New Roman",serif;}

/* ЗАТЕМНЕННЯ на весь екран — напівпрозоре темне */
.overlay{position:fixed;inset:0;z-index:1200;background:rgba(42,42,42,.5);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;}
.overlay.open{opacity:1;visibility:visible;}

/* ✕ на затемненні, лівіше карток */
.close-x{position:fixed;z-index:1202;top:24px;right:calc(var(--panelW) + 26px);width:34px;height:34px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;pointer-events:auto;opacity:0;visibility:hidden;transition:opacity .28s ease .05s,visibility .28s ease;}
.overlay.open ~ .close-x{opacity:1;visibility:visible;}

/* ПАНЕЛЬ — ПРОЗОРА; крізь неї видно затемнення. Клік по проміжках закриває */
.panel{position:fixed;top:0;right:0;width:var(--panelW);height:100vh;z-index:1201;background:transparent;display:flex;flex-direction:column;padding:14px;gap:8px;pointer-events:none;transform:translateX(110%);transition:transform .32s cubic-bezier(.3,.7,.3,1);}
.panel.open{transform:translateX(0);}

/* картки-селекції — кремові, плавають на темному фоні */
.card{background:var(--card);border-radius:16px;box-shadow:0 3px 16px rgba(0,0,0,.18);pointer-events:auto;}

/* 1 — шапка */
.card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;}
.card-head .title{ font-family:Georgia,"Times New Roman",serif; color:var(--green); font-size:22px; }
.card-head .count{color:var(--muted);font-size:13px;}

/* 2 — список товарів */
.card-items{flex:0 1 auto;overflow-y:auto;padding:18px 22px;}
.card-items::-webkit-scrollbar{width:5px;}
.card-items::-webkit-scrollbar-thumb{background:#e6e2d8;border-radius:6px;}

.book{ position:relative; }
/* поле = рядок; висоту задає ОБКЛАДИНКА (найвищий елемент). Роздільник між полями. */
.book:not(:last-child){ border-bottom:1px solid #ece7dd; margin-bottom:14px; padding-bottom:14px; }
.book-inner{ display:flex; align-items:flex-start; }

/* смітник — ліворуч, по центру обкладинки по вертикалі */
.book .trash{ width:28px; flex-shrink:0; align-self:center; display:flex; justify-content:center; background:none; border:none; cursor:pointer; color:var(--muted); opacity:0; transition:opacity .18s ease; }
.book:hover .trash{ opacity:1; }

/* обкладинка — ПРИБИТА до верху-ліва, фіксована ширина; вона задає висоту рядка */
.book .cover{ align-self:flex-start; flex-shrink:0; }
.book .cover img{ width:var(--coverW); height:auto; display:block; border-radius:4px; border:none !important; box-shadow:none !important; outline:none !important; padding:0 !important; background:none !important; }

/* тіло — тягнеться на висоту обкладинки; нижній рядок прибитий до НИЗУ обкладинки */
.book .body{ flex:1; min-width:0; margin-left:16px; align-self:stretch; display:flex; flex-direction:column; }

/* ВЕРХНІЙ рядок — назва+автор ліворуч, ціна праворуч, прибитий до верху */
.book .body-top{ display:flex; gap:14px; }
.book .info{ flex:1; min-width:0; }
.book .name{ font-family:Georgia,"Times New Roman",serif; color:var(--title); font-size:14px; line-height:1.32; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.book .author{ color:var(--muted); font-size:12px; margin-top:4px; }

.price{ font-family:Georgia,"Times New Roman",serif; text-align:right; flex-shrink:0; white-space:nowrap; line-height:1.15; }
.price .old{ display:block; color:var(--oldprice); font-size:11px; text-decoration:line-through; margin-bottom:1px; }
.price .now{ font-size:14px; }
.price .now.reg{ color:var(--green); }
.price .now.sale{ color:var(--red); }

/* НИЖНІЙ рядок — прибитий до НИЗУ обкладинки (margin-top:auto притискає до дна .body,
   а .body заввишки як обкладинка). Тип ліворуч, кількість праворуч. */
.book .meta{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
.meta .type{ display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12.5px; }
.meta .type .ic{ color:var(--icon); display:flex; }
.meta .single{ color:var(--muted); font-size:12.5px; }

.stepper{ display:flex; align-items:center; gap:16px; color:var(--title); font-size:14px; }
.stepper button{ background:none; border:none; cursor:pointer; color:var(--title); font-size:17px; line-height:1; width:14px; }
.stepper .qty{ min-width:12px; text-align:center; }

/* 3 — низ (промокод, разом, оформлення) */
.card-foot{padding:16px 22px 18px;}
.promo-label{color:#8a8880;font-size:13px;margin-bottom:22px;}
.promo-label b{color:#8a8880;font-weight:600;}
.foot-row{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.code-input{flex:0 1 140px;min-width:0;background:#fff;border:1px solid #ddd8ce;border-radius:100px;padding:11px 14px;font-size:13px;color:var(--title);}
.code-input::placeholder{color:#b3b0a8;}
.code-input:focus{outline:none;box-shadow:none;border-color:#ddd8ce;}
.apply-btn{flex-shrink:0;background:var(--card);border:1px solid var(--green);border-radius:100px;color:var(--green);padding:10px 15px;font-size:13px;cursor:pointer;transition:background .18s ease,color .18s ease;white-space:nowrap;}
.apply-btn:hover{background:var(--green);color:var(--cream);}
.total{margin-left:auto;color:var(--green);font-size:20px;white-space:nowrap;}
.checkout-btn{width:100%;background:var(--green);color:var(--cream);border:none;border-radius:40px;padding:16px;font-size:17px;cursor:pointer;transition:background .18s ease;}
.checkout-btn:hover{ background:var(--dgreen); color:var(--cream); }
.checkout-btn, .checkout-btn:hover, .checkout-btn:focus, .checkout-btn:active{ color:var(--cream) !important; text-decoration:none; }

/* мобільна — панель на всю ширину, ✕ ліворуч */
@media(max-width:600px){
  :root{--panelW:100vw;}
  .panel{padding:10px;}
  .close-x{right:auto;left:14px;top:16px;}
}


/* ─── Порожній кошик: перекотиполе ─── */
.bkd-empty{ padding:8px 26px 30px; text-align:center; }
.bkd-empty__scene{ position:relative; height:110px; width:100%; overflow:hidden; }
.bkd-empty__ground{ position:absolute; left:4%; right:4%; bottom:28px; height:1.5px; background:linear-gradient(90deg,transparent,#dcd6ca 15%,#dcd6ca 85%,transparent); }
.bkd-tw{ position:absolute; bottom:28px; width:56px; height:56px; left:-70px; animation:bkd-roll 9s linear infinite, bkd-hop 1.6s ease-in-out infinite; }
.bkd-tw__spin{ width:100%; height:100%; animation:bkd-spin 1.6s linear infinite; transform-origin:50% 50%; }
@keyframes bkd-roll{ 0%{left:-70px;} 100%{left:calc(100% + 20px);} }
@keyframes bkd-spin{ from{transform:rotate(0);} to{transform:rotate(360deg);} }
@keyframes bkd-hop{ 0%,100%{margin-bottom:0;} 50%{margin-bottom:6px;} }
.bkd-dust{ position:absolute; bottom:28px; width:4px; height:4px; border-radius:50%; background:#cfc9bd; opacity:0; }
.bkd-dust--1{ animation:bkd-dust1 9s linear infinite; }
.bkd-dust--2{ animation:bkd-dust2 9s linear infinite; animation-delay:.25s; }
.bkd-dust--3{ animation:bkd-dust3 9s linear infinite; animation-delay:.5s; }
@keyframes bkd-dust1{ 0%{left:-40px;bottom:28px;opacity:0;} 8%{opacity:.6;} 100%{left:calc(100% + 40px);bottom:40px;opacity:0;transform:scale(.4);} }
@keyframes bkd-dust2{ 0%{left:-50px;bottom:28px;opacity:0;} 10%{opacity:.5;} 100%{left:calc(100% + 30px);bottom:48px;opacity:0;transform:scale(.3);} }
@keyframes bkd-dust3{ 0%{left:-30px;bottom:28px;opacity:0;} 12%{opacity:.4;} 100%{left:calc(100% + 50px);bottom:34px;opacity:0;transform:scale(.5);} }
.bkd-empty__title{ font-family:Georgia,serif; font-size:19px; color:var(--dgreen); margin:6px 0 8px; font-weight:400; }
.bkd-empty__text{ font-size:13.5px; color:var(--muted); line-height:1.6; margin-bottom:22px; }
.bkd-empty__btn{ display:inline-block; background:var(--green); color:var(--cream); text-decoration:none; border-radius:40px; padding:13px 30px; font-size:14px; transition:background .2s; }
.bkd-empty__btn:hover{ background:var(--dgreen); }
.bkd-empty__btn, .bkd-empty__btn:hover, .bkd-empty__btn:focus, .bkd-empty__btn:visited{ color:var(--cream) !important; text-decoration:none; }


/* прибрати браузерну синю рамку фокуса на елементах кошика (кнопки, посилання, обкладинка) */
.panel button:focus,
.panel a:focus,
.panel .cover:focus,
.panel .cover a:focus,
.panel .book a:focus,
.panel .trash:focus,
.panel .stepper button:focus,
.panel .apply-btn:focus,
.panel .checkout-btn:focus,
.close-x:focus{
  outline:none !important;
  box-shadow:none !important;
}
/* обкладинка та її посилання — гарантовано без рамки/тіні */
.book .cover, .book .cover a, .book .cover img{
  outline:none !important; border:none !important; box-shadow:none !important;
  -webkit-tap-highlight-color:transparent;
}