/* ============================================================================
   Part 18 / P2 — the buy control on the product page.
   ----------------------------------------------------------------------------
   Before: an <a class="btn_basket" onclick="add(id,3)">. Pressing it fired a
   toast and then rewrote itself into «رفتن به سبد خرید» — a one-way door. To buy
   two of something you pressed it, waited for the swap, and then went to the cart
   page to change the number; to undo a mis-tap you went to the cart page to
   delete the line. Neither was possible from the product page.

   Now the same box has two faces and swaps between them in place:

       افزودن به سبد            →       [ 🗑 ]  ۱ عدد در سبد  [ + ]
                                        [ − ]  ۲ عدد در سبد  [ + ]

   Both faces are in the DOM at once, stacked in a grid cell, so the swap changes
   nothing about the page's layout — no reflow, no jump, and the surrounding
   price block never moves. The measured size of the old button (175×47 on a
   desktop) is what the box is built around, which is what "همون سایز" asks for.
   ========================================================================== */

.sd18-buy {
    --sd18-h: 47px;
    --sd18-teal: var(--sd-teal-600, #0e8a72);
    --sd18-teal-dark: #0b7460;
    --sd18-line: #d8e3e0;
    --sd18-ink: #23312d;
    --sd18-muted: #6d7a76;

    display: inline-grid;
    /* One cell. Both faces occupy it; only one is visible at a time, so the box
       is always as big as the larger of the two and never resizes on swap. */
    grid-template: "face" auto / auto;
    width: 100%;
    max-width: 200px;
    margin-top: 10px;
    text-align: initial;
    direction: rtl;
}

.sd18-buy-add,
.sd18-buy-step {
    grid-area: face;
    width: 100%;
    min-height: var(--sd18-h);
}

/* --- face 1: افزودن به سبد ------------------------------------------------- */

.sd18-buy-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border: 0;
    border-radius: 6px;
    background: var(--sd18-teal);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease, opacity .18s ease;
}

.sd18-buy-add:hover { background: var(--sd18-teal-dark); box-shadow: 0 2px 8px rgba(14, 138, 114, .28); }
.sd18-buy-add i { font-size: 15px; }

/* --- face 2: the stepper --------------------------------------------------- */

.sd18-buy-step {
    display: none;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--sd18-teal);
    border-radius: 6px;
    background: #fff;
}

.sd18-buy-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sd18-teal);
    font-size: 14px;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

.sd18-buy-btn:hover { background: #e7f6f2; }
.sd18-buy-btn:active { background: #d1ebe4; }

/* At a quantity of one the "less" button IS the delete button, so it stops being
   a quiet teal glyph and takes the colour of the thing it does. */
.sd18-buy[data-qty="1"] .sd18-buy-less { color: #c0483c; }
.sd18-buy[data-qty="1"] .sd18-buy-less:hover { background: #fdf0ee; }

/* The + is capped by stock. Disabled rather than hidden: a control that vanishes
   at the limit reads as a bug, one that greys out reads as a limit. */
.sd18-buy-btn[disabled] { opacity: .35; cursor: not-allowed; }
.sd18-buy-btn[disabled]:hover { background: transparent; }

.sd18-buy-mid {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    padding: 4px 2px;
    border-inline: 1px solid #e4efec;
    background: #f6fbfa;
    line-height: 1.25;
    text-align: center;
}

.sd18-buy-qty {
    color: var(--sd18-ink);
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.sd18-buy-word {
    color: var(--sd18-muted);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* The confirmation the brief asked for, in the space between the two buttons.
   It is a FLASH, not the resting state: after ~1.8s cart18.js takes the class off
   and the count comes back, because "۳ عدد در سبد" is the useful thing to keep
   on screen and "به سبد افزوده شد" is only news for a moment. */
.sd18-buy.is-flash .sd18-buy-mid {
    background: #e7f6f2;
}

.sd18-buy.is-flash .sd18-buy-qty { display: none; }

.sd18-buy.is-flash .sd18-buy-word {
    color: var(--sd18-teal);
    font-size: 11.5px;
    font-weight: 800;
}

/* --- swapping the faces ---------------------------------------------------- */

.sd18-buy.is-in-cart .sd18-buy-add { display: none; }
.sd18-buy.is-in-cart .sd18-buy-step { display: flex; }

/* --- the quiet link under it ------------------------------------------------ */

/* Reserved, not toggled. `display:none` here would make the whole control 24px
   shorter before the first add and 24px taller after it, and this box sits in a
   uk-grid row whose height is the taller of its two columns — so adding to the
   cart nudged everything below the price block down the page. It keeps its line
   from the start and only becomes visible when there is something to go to. */
.sd18-buy-gocart {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 7px;
    color: var(--sd18-teal);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    visibility: hidden;
    pointer-events: none;
}

.sd18-buy-gocart:hover { color: var(--sd18-teal-dark); text-decoration: underline; }
.sd18-buy-gocart i { font-size: 11px; }
.sd18-buy.is-in-cart .sd18-buy-gocart { visibility: visible; pointer-events: auto; }

/* --- in flight -------------------------------------------------------------- */

/* Pointer events off rather than [disabled] on each button: it also blocks the
   double-tap that would otherwise send two increments for one intention, and it
   does not move focus the way disabling a focused button does. */
.sd18-buy.is-busy { pointer-events: none; opacity: .65; }

/* --- narrow ----------------------------------------------------------------- */

/* 959px is UIkit's `@m` breakpoint, which is what the product page's
   `uk-width-1-2@m` column collapses at. Above it this control shares a row with
   the price and belongs at the start of its own half-width column; below it the
   column is full width, so the control is alone on its line — and a 200px box
   parked against the right edge of a phone screen reads as misaligned rather
   than as deliberate.

   `display: grid` rather than the `inline-grid` above: `margin-inline: auto` only
   centres a block-level box, and the parent carries `uk-text-left`, so an inline
   box would keep hugging the start edge no matter what margin it was given. */
@media (max-width: 959px) {
    .sd18-buy {
        display: grid;
        margin-inline: auto;
    }
}

@media (max-width: 640px) {
    .sd18-buy { max-width: 220px; }
}

@media (max-width: 380px) {
    /* Under 380px the middle cell is about 70px wide. The number always fits;
       the word does not, and a clipped «عدد در سب» is worse than no word. */
    .sd18-buy-word { display: none; }
    .sd18-buy.is-flash .sd18-buy-word { display: block; font-size: 10px; }
    .sd18-buy-btn { width: 40px; }
}