/* ==========================================================================
   Cart drawer (Figma "عربة التسوق") -- resources/views/front/partials/cart-drawer.blade.php
   Plain CSS on purpose: the drawer is on every storefront page, including the
   classic-header pages that load no Tailwind, and a page-wide Tailwind file
   (its utilities are !important) would restyle those pages' Bootstrap markup.
   Namespaced `cd`; logical properties, so it mirrors: right to left in Arabic, left to right in English.
   ========================================================================== */

#cartSidebar.offcanvas {
    width: min(484px, 100vw);                /* 436 content + 24 each side */
    border: 0;
    font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
    background: #FFFFFF;
}
#cartSidebar .offcanvas-body { padding: 0; display: flex; flex-direction: column; }

.cd {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 100%;
    padding: 24px;
    color: #000000;
    text-align: start; /* right in Arabic, left in English (the drawer carries dir) */
}

/* ---------- Header ---------- */
.cd__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cd__title { margin: 0; font-size: 24px; font-weight: 600; line-height: 1; color: #000000; }
.cd__head-actions { display: flex; align-items: center; gap: 8px; }
.cd__clear {
    padding: 6px 4px; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 15px; font-weight: 600; color: #D32F2F;
}
.cd__clear:hover { text-decoration: underline; }
.cd__clear:disabled { opacity: .6; cursor: progress; }
.cd__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
    background: #F5F4F6; color: #222222; font-size: 15px; cursor: pointer;
}
.cd__close:hover { background: #EDE3E9; color: #532740; }

/* ---------- Lines: 436 × 134, 16px gap ---------- */
.cd__lines { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.cd-line { display: flex; gap: 16px; min-height: 134px; }
.cd-line + .cd-line { padding-top: 16px; border-top: 1px solid #F2F2F2; }
.cd-line__image {
    flex: 0 0 134px; width: 134px; height: 134px; overflow: hidden;
    border-radius: 10px; background: #F5F4F6;
}
.cd-line__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-line__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #BDBDBD; font-size: 24px; }

.cd-line__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.cd-line__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cd-line__info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.cd-line__tag {
    display: inline-block; padding: 4px 10px; border: 1px solid #E5E0E3; border-radius: 6px;
    background: #F7F5F6; color: #555555; font-size: 12px; font-weight: 600; line-height: 1.2;
}
.cd-line__name {
    margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 16px; font-weight: 700; line-height: 1.4; color: #0A0A0A;
}
.cd-line__option { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.3; color: #6B6B6B; }
.cd-line__remove {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
    background: #FDECEC; color: #D32F2F; font-size: 14px; cursor: pointer;
}
.cd-line__remove:hover { background: #D32F2F; color: #FFFFFF; }

.cd-line__bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cd-line__price { font-size: 18px; font-weight: 700; line-height: 1; color: #532740; white-space: nowrap; }
.cd-line__price small { font-size: 13px; font-weight: 600; }
.cd-line__warning { margin: 0; font-size: 12px; color: #B3261E; }

.cd-qty { display: inline-flex; align-items: center; height: 36px; border: 1px solid #E0E0E0; border-radius: 8px; overflow: hidden; }
.cd-qty__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 100%; padding: 0; border: 0; background: #FFFFFF; color: #532740; font-size: 11px; cursor: pointer;
}
.cd-qty__btn:hover:not(:disabled) { background: #F7EFF4; }
.cd-qty__btn:disabled { color: #CCCCCC; cursor: not-allowed; }
.cd-qty__value {
    min-width: 36px; height: 100%; display: inline-flex; align-items: center; justify-content: center;
    border-inline: 1px solid #E0E0E0; font-size: 15px; font-weight: 600;
}

/* ---------- Payment details ---------- */
.cd__summary { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.cd__summary-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; color: #000000; }
.cd__box { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 20px; border-radius: 10px; background: #F9F4F7; }
.cd__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 15px; }
.cd__row dt { font-weight: 500; color: #444444; }
.cd__row dd { margin: 0; font-weight: 600; color: #222222; white-space: nowrap; }
.cd__divider { margin: 0; border: 0; border-top: 1px solid #E3D6DE; opacity: 1; }
.cd__row--total dt, .cd__row--total dd { font-size: 17px; font-weight: 700; color: #000000; }
.cd__note { margin: 0; font-size: 12px; color: #8A8A8A; }

/* ---------- Checkout: 436 × 56, radius 10, padding 24, gap 8 ---------- */
.cd__checkout {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 56px; padding: 24px; border-radius: 10px;
    background: #532740; color: #FFFFFF; text-decoration: none;
    font-size: 16px; font-weight: 700; line-height: 1;
    transition: background-color .2s ease;
}
.cd__checkout:hover { background: #43203A; color: #FFFFFF; }

/* ---------- Empty ---------- */
.cd__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 0; text-align: center; }
.cd__empty > i { font-size: 44px; color: #D9CCD4; margin-bottom: 6px; }
.cd__empty-title { margin: 0; font-size: 18px; font-weight: 700; }
.cd__empty-text { margin: 0; font-size: 14px; color: #6B6B6B; }
.cd__browse {
    margin-top: 10px; padding: 12px 24px; border: 2px solid #532740; border-radius: 10px;
    color: #532740; text-decoration: none; font-weight: 700;
}
.cd__browse:hover { background: #532740; color: #FFFFFF; }

.cd button:focus-visible, .cd a:focus-visible { outline: 2px solid #532740; outline-offset: 2px; }

@media (max-width: 480px) {
    .cd { padding: 20px 16px; }
    .cd-line__image { flex-basis: 100px; width: 100px; height: 100px; }
    .cd-line { min-height: 100px; }
    .cd__title { font-size: 20px; }
}