/* BulatPlus Side Cart — styles */
:root{
  --bp-yellow:#FFD400;
  --bp-orange:#FFB800;
  --bp-blue:#00A3E0;
  --bp-bg:#ffffff;
  --bp-text:#1f2937;
  --bp-sub:#6b7280;
  --bp-border:#e5e7eb;
  --bp-shadow: 0 12px 30px rgba(0,0,0,.18);
}

/* Trigger button */
.bp-sc-trigger{
  position:relative; display:grid; place-items:center;
  width:38px;height:38px;border-radius:10px;
  background:#1f2937; color:#fff; border:1px solid rgba(255,255,255,.08);
  cursor:pointer; padding:0;
}
.bp-sc-trigger:hover{ background:#242f3a; }
.bp-sc-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 4px;
  background:linear-gradient(180deg,var(--bp-yellow),var(--bp-orange));
  color:#111827; border-radius:999px; display:grid; place-items:center;
  font-size:11px; font-weight:900; border:1px solid rgba(0,0,0,.06);
}

/* Overlay + panel */
.bp-sc-overlay{ position:fixed; inset:0; background:rgba(17,24,39,.45); display:flex; justify-content:flex-end; padding:16px; z-index:999999; }
.bp-sc-hidden{ display:none; }
.bp-sc-panel{ width:min(560px, 100%); background:var(--bp-bg); border-radius:16px; box-shadow:var(--bp-shadow); display:flex; flex-direction:column; overflow:hidden; }
.bp-sc-head{ display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--bp-border); }
.bp-sc-head .title{ font-size:18px; font-weight:800; }
.bp-sc-close{ margin-left:auto; border:0; background:#f3f4f6; width:34px; height:34px; border-radius:10px; cursor:pointer; font-size:18px; line-height:1; }

.bp-sc-items{ max-height:54vh; overflow:auto; padding:6px 0; }
.bp-sc-loader{ padding:24px; text-align:center; color:#6b7280; }
.bp-sc-line{ display:grid; grid-template-columns:84px 1fr auto; gap:14px; align-items:center; padding:12px 18px; border-bottom:1px solid var(--bp-border); background:#fff; }
.bp-sc-thumb{ width:84px; height:84px; border-radius:12px; background:#f3f4f6; display:grid; place-items:center; border:1px solid #edeef0; overflow:hidden; }
.bp-sc-thumb img{ width:100%; height:100%; object-fit:cover; }
.bp-sc-name{ font-weight:700; margin-bottom:4px; }
.bp-sc-meta{ font-size:12px; color:var(--bp-sub); }
.bp-sc-right{ text-align:right; display:flex; flex-direction:column; gap:2px; align-items:flex-end; }
.bp-sc-right .price{ font-weight:800; font-size:15px; }
.bp-sc-remove{ border:0; background:#f3f4f6; padding:4px 8px; border-radius:8px; cursor:pointer; font-size:12px; color:#6b7280; }

/* Qty control */
.bp-sc-qty{ display:inline-flex; align-items:center; gap:6px; border:1px solid #eee; border-radius:10px; padding:6px; }
.bp-sc-qty button{ width:32px; height:32px; border-radius:8px; border:0; background:var(--bp-yellow); font-size:18px; line-height:1; cursor:pointer; }
.bp-sc-qty input{ width:42px; text-align:center; border:none; outline:none; font-weight:600; background:transparent; }

/* Summary & CTA */
.bp-sc-summary{ padding:14px 18px; border-top:1px solid var(--bp-border); }
.bp-sc-row{ display:flex; justify-content:space-between; padding:6px 0; }
.bp-sc-row .label{ color:var(--bp-sub); }
.bp-sc-row.total{ font-weight:900; font-size:16px; border-top:1px dashed var(--bp-border); margin-top:8px; padding-top:10px; }
.bp-sc-cta{ padding:16px 18px; border-top:1px solid var(--bp-border); display:flex; flex-direction:column; gap:10px; }
.bp-sc-checkout{ width:100%; border:0; cursor:pointer; color:#111827; background:linear-gradient(180deg,var(--bp-yellow),var(--bp-orange)); font-weight:900; letter-spacing:.2px; padding:14px; border-radius:12px; }
.bp-sc-continue{ width:100%; border:1px dashed var(--bp-border); background:#fff; cursor:pointer; padding:12px; border-radius:10px; color:#374151; font-weight:600; }

@media (max-width:520px){
  .bp-sc-line{ grid-template-columns:72px 1fr auto; gap:10px; }
  .bp-sc-thumb{ width:72px; height:72px; }
}

/* === Inline mode overrides === */
.bp-sc-inline#bp-sc-inline{
  position:static; inset:auto; background:transparent; display:block; padding:0; z-index:auto;
}
.bp-sc-inline #bp-sc-panel{ width:100%; }
.bp-sc-inline .bp-sc-panel{ width:100%; max-width:1100px; margin:16px auto; }
.bp-sc-inline .bp-sc-items{ max-height:unset; overflow:visible; }


/* === Busy mask (blocks interactions during requests) === */
.bp-sc-panel{ position:relative; }
.bp-sc-mask{ position:absolute; inset:0; background:rgba(17,24,39,.32); display:none; z-index:50; }
.bp-sc-busy .bp-sc-mask{ display:flex; align-items:center; justify-content:center; }
.bp-sc-busy .bp-sc-panel *:not(.bp-sc-mask){ pointer-events:none !important; }
.bp-sc-spinner{ width:34px; height:34px; border-radius:999px; border:3px solid rgba(255,255,255,.55); border-top-color:#fff; animation:bp-spin 1s linear infinite; }
@keyframes bp-spin{ to { transform:rotate(360deg); } }
/* =============================== */
/*     DARK MODE FOR SIDE CART     */
/* =============================== */
.dark-mode .bp-sc-overlay{
    background:rgba(0,0,0,.55) !important;
}

.dark-mode .bp-sc-panel{
    background:#2b2b2b !important;
    color:#fff !important;
    box-shadow:none !important;
    border:1px solid #444 !important;
}

/* Заголовок */
.dark-mode .bp-sc-head{
    background:#2f2f2f !important;
    border-bottom:1px solid #444 !important;
    color:#fff !important;
}

.dark-mode .bp-sc-head .title{
    color:#fff !important;
}

.dark-mode .bp-sc-close{
    background:#3a3a3a !important;
    color:#fff !important;
    border:1px solid #555 !important;
}
.dark-mode .bp-sc-close:hover{
    background:#4a4a4a !important;
}

/* Лінія товару */
.dark-mode .bp-sc-line{
    background:#333 !important;
    border-bottom:1px solid #444 !important;
}

.dark-mode .bp-sc-thumb{
    background:#3a3a3a !important;
    border-color:#555 !important;
}

.dark-mode .bp-sc-name{
    color:#fff !important;
}

.dark-mode .bp-sc-meta{
    color:#bbbbbb !important;
}

.dark-mode .bp-sc-right .price{
    color:#fff !important;
}

/* Видалити */
.dark-mode .bp-sc-remove{
    background:#3c3c3c !important;
    color:#ccc !important;
}
.dark-mode .bp-sc-remove:hover{
    background:#ff3b30 !important;
    color:#fff !important;
}

/* Qty блок */
.dark-mode .bp-sc-qty{
    border:1px solid #555 !important;
    background:#3a3a3a !important;
}
.dark-mode .bp-sc-qty input{
    color:#fff !important;
}
.dark-mode .bp-sc-qty button{
    background:#FFD400 !important;
    color:black !important;
}

/* Summary */
.dark-mode .bp-sc-summary{
    background:#2f2f2f !important;
    border-top:1px solid #444 !important;
}
.dark-mode .bp-sc-row .label{
    color:#ccc !important;
}
.dark-mode .bp-sc-row.total{
    color:#fff !important;
    border-top:1px dashed #555 !important;
}

/* CTA */
.dark-mode .bp-sc-cta{
    background:#2f2f2f !important;
    border-top:1px solid #444 !important;
}

.dark-mode .bp-sc-checkout{
    color:#111 !important;
    /* жовта кнопка лишається жовтою — це добре */
}

.dark-mode .bp-sc-continue{
    background:#3a3a3a !important;
    border-color:#666 !important;
    color:#fff !important;
}