/* ============================================================
   Add-to-cart / edit-cart modal (Figma node 110-16458)
   Shared globally — opened from product cards, details, cart
   edit, and account pages. Loaded after style2.css so the
   modal stepper/buttons win over the legacy quantity styles.
   ============================================================ */
.az-cart-modal .modal-content {
    border-top: 8px solid var(--zino-green); /* Figma green strip */
}

.az-cart-modal .modal-header {
    border-bottom: 1px solid var(--zino-border);
    padding: var(--space-4) var(--space-5);
}

.az-cart-modal .modal-body {
    padding: var(--space-4) var(--space-5);
    text-align: right;
}

/* header: product name + code */
.az-cart-modal .azc-title {
    margin: 0;
    color: var(--zino-text);
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
    line-height: 1.5;
}

.az-cart-modal .azc-code {
    margin: var(--space-1) 0 0;
    color: var(--zino-green);
    font-size: 0.9375rem; /* 15px */
    font-weight: 600;
}

/* row label (gray; bold key words inherit the colour, not Bootstrap accents) */
.az-cart-modal .azc-label {
    color: var(--zino-text);
    font-size: 0.75rem; /* 12px */
    line-height: 1.6;
}

.az-cart-modal .azc-label b {
    font-weight: 700;
}

/* all disabled (read-only) inputs in this modal align left */
.az-cart-modal input:disabled {
    text-align: left !important;
}

/* read-only values rendered as plain text — strip all input chrome.
   Two value types both left-align (see input:disabled above) but need their
   own left offset to line up: number inputs reserve spin-button space on the
   RTL (left) side, so they get a corrective negative margin; price inputs
   (type=text) sit flush. Tune the two margin-left values to taste. */
.az-cart-modal input.azc-value {
    width: auto;
    max-width: 160px;
    margin-left: 38px; /* number values */
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 1rem; /* 16px */
    font-weight: 600;
    color: var(--zino-text);
}

.az-cart-modal input.azc-value:disabled {
    opacity: 1; /* browsers dim disabled inputs; we want full-strength text */
}

.az-cart-modal input.azc-value--muted {
    color: var(--zino-text-muted);
    font-weight: 400;
}

.az-cart-modal input.azc-value--green {
    color: var(--zino-green);
    font-weight: 700;
}

/* price value group: per-unit micro-label + green figure + "تومان".
   Pushed to the left by the row's justify-between, so "تومان" (the leftmost
   item) aligns on one vertical line and the figures stack just to its right. */
.az-cart-modal .azc-priceval {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* green figure (Figma: 16px SemiBold) */
.az-cart-modal .azc-amount {
    color: var(--zino-green);
    font-size: 1rem; /* 16px */
    font-weight: 700;
}

.az-cart-modal .azc-amount--total {
    font-size: 1.125rem; /* 18px */
}

/* micro-labels — per-unit ("هر عدد") and currency ("تومان"): #000, 10px, 300 */
.az-cart-modal .azc-per,
.az-cart-modal .azc-cur {
    color: var(--zino-ink);
    font-size: 0.625rem; /* 10px */
    font-weight: 300;
    text-align: right;
    white-space: nowrap;
}

/* total row: light gray highlight band + bigger green figure */
.az-cart-modal .azc-total {
    background: var(--zino-surface);
    padding: var(--space-2) var(--space-3);
    margin-inline: calc(-1 * var(--space-3));
}

/* divider — Figma: 1px #DDD, sits under the first price row */
.az-cart-modal .azc-sep {
    margin: var(--space-4) 0;
    border: 0;
    border-top: 1px solid var(--zino-border-strong);
    opacity: 1;
}

/* quantity stepper (Figma): plain gray +/- glyphs, number in a green box.
   Scoped to the modal so the site-wide blue/red stepper is untouched. */
.az-cart-modal .quantity.buttons_added {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.az-cart-modal .quantity.buttons_added .minus,
.az-cart-modal .quantity.buttons_added .plus {
    height: auto;
    padding: 0 var(--space-2);
    border: 0;
    background: transparent;
    border-radius: 0;
    color: var(--zino-text);
    font-size: 1.25rem;
    line-height: 1;
}

.az-cart-modal .quantity.buttons_added .minus:hover,
.az-cart-modal .quantity.buttons_added .plus:hover {
    border: 0;
    background: transparent;
    color: var(--zino-green);
}

.az-cart-modal .quantity .input-text.qty {
    width: 56px;
    height: 36px;
    border: 1px solid var(--zino-green);
    border-radius: 0;
    color: var(--zino-text);
    font-size: 0.875rem;
    font-weight: 700;
}

/* "تعداد بیشتری نیاز داری؟" disclosure link */
.az-cart-modal .azc-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--zino-text);
    font-size: 0.85rem;
    font-weight: 600;
}

.az-cart-modal .azc-more:hover {
    color: var(--zino-green);
}

    .az-cart-modal .azc-more i {
        font-size: 0.95rem;
        font-weight: bolder;
    }

.az-cart-modal .azc-help {
    border-radius: 0;
    border-color: var(--zino-border);
    color: var(--zino-text);
    font-size: 0.6875rem;
    line-height: 2;
    text-align: justify;
}

.az-cart-modal .azc-lastorder {
    border: 1px solid var(--zino-border);
    padding: var(--space-2);
    color: var(--zino-text);
    font-size: 0.75rem;
}

/* footer: flat rectangular buttons — green save, gray cancel (Figma).
   modal-footer is flex-end → in RTL the pair sits at the left edge. */
.az-cart-modal .modal-footer {
    border-top: 0;
    padding: var(--space-4) var(--space-5);
    gap: var(--space-3);
}

.az-cart-modal .azc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 var(--space-5);
    border: 0;
    border-radius: 0;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

/* save: slanted green CTA (cut top-left corner) like .pc-cart-btn. The green
   lives on a ::before layer so the slant can't clip the label. */
.az-cart-modal .azc-btn--save {
    position: relative;
    isolation: isolate;
    z-index: 0;
    min-width: 140px;
    background: transparent;
    overflow: hidden;
}

.az-cart-modal .azc-btn--save::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--zino-green);
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
    transition: background 0.2s ease;
}

.az-cart-modal .azc-btn--save:hover::before {
    background: var(--zino-green-hover);
}

.az-cart-modal .azc-btn--cancel {
    min-width: 72px;
    background: var(--zino-text-sub);
}

.az-cart-modal .azc-btn--cancel:hover {
    background: #7f8285;
}

/* confirm-remove-from-cart modal (shared via _Layout) */
.az-confirm-modal .modal-content {
    border-top: 8px solid var(--zino-warn);
}

.az-confirm-modal .modal-header {
    border-bottom: 1px solid var(--zino-border);
    padding: var(--space-4) var(--space-5);
}

.az-confirm-modal .modal-title {
    margin: 0;
    color: var(--zino-text);
    font-size: 1.125rem;
    font-weight: 700;
}

.az-confirm-modal .modal-body {
    padding: var(--space-4) var(--space-5);
    text-align: right;
    color: var(--zino-text);
    font-size: 0.9375rem;
}

.az-confirm-modal .modal-body p {
    margin: 0;
}

.az-confirm-modal .modal-footer {
    border-top: 0;
    padding: var(--space-4) var(--space-5);
    gap: var(--space-3);
}

.az-confirm-modal .azc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 var(--space-5);
    border: 0;
    border-radius: 0;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.az-confirm-modal .azc-btn--cancel {
    min-width: 72px;
    background: var(--zino-text-sub);
}

.az-confirm-modal .azc-btn--cancel:hover {
    background: #7f8285;
}

.az-confirm-modal .azc-btn--danger {
    position: relative;
    isolation: isolate;
    z-index: 0;
    min-width: 100px;
    background: transparent;
    overflow: hidden;
}

.az-confirm-modal .azc-btn--danger:disabled {
    opacity: 0.7;
    cursor: default;
}

.az-confirm-modal .azc-btn--danger::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--zino-warn);
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
    transition: background 0.2s ease;
}

.az-confirm-modal .azc-btn--danger:hover::before,
.az-confirm-modal .azc-btn--danger:focus::before {
    background: var(--zino-warn-hover);
}

.az-confirm-modal .modal-content,
.az-confirm-modal .azc-btn {
    border-radius: 0;
}