/*
    Nop.Plugin.Misc.PreOrderWorkflow — storefront styles.

    Positioning is written entirely on the CSS *logical* inline axis (inset-inline-start /
    inset-inline-end). The storefront is right-to-left, and the view model has already translated the
    owner's physical corner choice into a start/end class against the active language's direction, so
    nothing here needs to know left from right.
*/

/* ---------------------------------------------------------------------------
   Inquiry ribbon
   --------------------------------------------------------------------------- */

/*
    The two widget zones the ribbon renders into are not themselves over the image:
    productbox_addinfo_before sits in .product-item > .details > .add-info, and
    productdetails_before_pictures sits at the top of .picture-gallery. Establishing a containing
    block on those two ancestors is what lets the ribbon overlay the picture. Both selectors only add
    a stacking context; no theme geometry changes.
*/
.product-item,
.picture-gallery {
    position: relative;
}

.pow-inquiry-ribbon {
    position: absolute;
    z-index: 5;
    display: block;
    width: var(--pow-ribbon-width, 40%);
    max-width: 100%;
    line-height: 0;
    /* the ribbon is decoration over a link: never swallow the click that opens the product */
    pointer-events: none;
}

.pow-inquiry-ribbon img {
    display: block;
    width: 100%;
    height: auto;
}

/* Corner placement, on the logical inline axis. */
.pow-inquiry-ribbon--top-start {
    top: 0;
    inset-inline-start: 0;
}

.pow-inquiry-ribbon--top-end {
    top: 0;
    inset-inline-end: 0;
}

.pow-inquiry-ribbon--bottom-start {
    bottom: 0;
    inset-inline-start: 0;
}

.pow-inquiry-ribbon--bottom-end {
    bottom: 0;
    inset-inline-end: 0;
}

.pow-inquiry-ribbon--center-band {
    top: 50%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    width: 100%;
    transform: translateY(-50%);
}

/*
    The details page image is much larger than a listing thumbnail, so the same percentage would
    produce an oversized badge. Cap it there.
*/
.pow-inquiry-ribbon--details:not(.pow-inquiry-ribbon--center-band) {
    max-width: 220px;
}

/*
    Coexistence with the commercial Nop Product Ribbons plugin (Seven Spikes): its ribbons render into
    their own containers and use much higher stacking values. Keeping this ribbon at a low z-index means
    that where both are configured on the same product, theirs draws on top rather than being hidden by
    ours. Nothing here selects or overrides any of their classes.
*/

/* ---------------------------------------------------------------------------
   Per-destination evidence upload (§11.7)

   Built narrow-first: this step is used mostly on phones. Each destination is a
   self-contained card that stacks by default and only becomes a two-column
   layout when there is genuinely room. All positioning is on the logical inline
   axis, so nothing needs mirroring for RTL.
   --------------------------------------------------------------------------- */

.pow-evidence__intro {
    margin-block-end: 12px;
}

.pow-evidence__fields {
    display: grid;
    gap: 6px;
    margin-block-end: 16px;
}

.pow-evidence__label {
    font-weight: 600;
}

.pow-evidence__hint {
    color: #666;
    display: block;
    margin-block-start: 4px;
}

/* The counter explains the disabled continue button, so it is deliberately prominent. */
.pow-evidence__counter {
    background: #eef4fb;
    border: 1px solid #c7dcf0;
    border-radius: 6px;
    font-weight: 600;
    margin-block-end: 12px;
    padding: 10px 12px;
    text-align: center;
}

.pow-evidence__rows {
    display: grid;
    gap: 12px;
}

.pow-evidence-card {
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    display: grid;
    gap: 12px;
    padding: 12px;
}

/* Two columns only when the viewport can actually carry them. */
@media (min-width: 700px) {
    .pow-evidence-card {
        grid-template-columns: 1fr auto;
        align-items: start;
    }
}

.pow-evidence-card--done {
    border-color: #4a934a;
    background: #f6fbf6;
}

.pow-evidence-card--error {
    border-color: #c0392b;
    background: #fdf3f2;
}

.pow-evidence-card__title {
    font-size: 1rem;
    margin: 0 0 8px;
}

/* Label/value pairs that stay readable when an IBAN wraps on a narrow screen. */
.pow-evidence-card__facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    margin: 0;
}

.pow-evidence-card__facts dt {
    color: #666;
    font-weight: 600;
}

.pow-evidence-card__facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/*
    Account and identity numbers are Latin digits and read left-to-right even inside a Persian page,
    so they are isolated rather than left to the paragraph direction.
*/
.pow-evidence-card__code {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: monospace;
}

.pow-evidence-card__amount {
    font-weight: 700;
}

.pow-evidence-card__upload {
    display: grid;
    gap: 8px;
    justify-items: center;
    min-width: 160px;
}

/* The real input is hidden; the label is the touch target, sized for a thumb. */
.pow-evidence-card__input {
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 0.1px;
}

.pow-evidence-card__button {
    background: #4a7ebb;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    min-height: 44px;
    line-height: 28px;
    padding: 8px 16px;
    text-align: center;
    width: 100%;
}

.pow-evidence-card__input:focus-visible + .pow-evidence-card__button {
    outline: 2px solid #1b4f8a;
    outline-offset: 2px;
}

.pow-evidence-card__preview img {
    border: 1px solid #ccc;
    border-radius: 4px;
    display: block;
    max-height: 140px;
    max-width: 100%;
    object-fit: contain;
}

.pow-evidence-card__pdf {
    color: #4a934a;
    font-weight: 600;
}

.pow-evidence-card__status {
    font-size: 0.9em;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Per-destination payment review (§11.8)

   The reviewer's job is to compare what was paid against what was owed, per
   destination. Each row therefore carries the destination facts and its document
   side by side, and the document is on screen from the moment the page loads.
   --------------------------------------------------------------------------- */

.pow-review__progress {
    background: #eef4fb;
    border: 1px solid #c7dcf0;
    border-radius: 6px;
    font-weight: 600;
    padding: 8px 12px;
}

.pow-review__rows {
    display: grid;
    gap: 12px;
}

.pow-review-row {
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    display: grid;
    gap: 12px;
    padding: 12px;
}

@media (min-width: 900px) {
    .pow-review-row {
        grid-template-columns: 1fr minmax(220px, 320px);
        align-items: start;
    }
}

.pow-review-row--approved {
    border-color: #4a934a;
    background: #f6fbf6;
}

.pow-review-row__title {
    font-size: 1rem;
    margin: 0 0 8px;
}

.pow-review-row__facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    margin: 0;
}

.pow-review-row__facts dt {
    color: #666;
    font-weight: 600;
}

.pow-review-row__facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Account and identity numbers read left-to-right even on a Persian page. */
.pow-review-row__code {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: monospace;
}

.pow-review-row__amount {
    font-weight: 700;
}

.pow-review-row__document {
    display: grid;
    gap: 8px;
    justify-items: center;
}

.pow-review-row__image {
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: zoom-in;
    display: block;
    max-height: 260px;
    max-width: 100%;
    object-fit: contain;
}

.pow-review-row__pdf {
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 260px;
    width: 100%;
}

.pow-review-row__done {
    color: #4a934a;
    font-weight: 600;
}

/*
    Enlarged view. A receipt photographed on a phone is unreadable at card size and the
    reference number is exactly what has to be checked, so the full image gets the viewport.
*/
.pow-review-zoom {
    align-items: center;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 16px;
    position: fixed;
    /* above the popup (3000): evidence is now zoomed from inside the approve dialog,
       and at 2000 the enlarged receipt opened behind it */
    z-index: 3100;
}

.pow-review-zoom img {
    cursor: zoom-out;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Shared popup (§12.4, §12.5)

   Used by every confirmation in the plugin, admin and storefront. Depends on no
   framework so the storefront theme does not have to ship Bootstrap.

   Two rules drive the whole block:
     - the BODY is the only thing that scrolls, and only vertically;
     - the FOOTER is fixed, so the confirm button is never scrolled out of reach.
   Horizontal scrolling is forbidden in every state, so wide content (tables,
   long account numbers) scrolls inside its own container, not the dialog.
   --------------------------------------------------------------------------- */

/*
    The page behind must not scroll while a popup is open — and must not lose its place either.
    The body is pinned at a negative offset (set by the script) so what is behind the backdrop stays
    exactly where the user left it; `overflow: hidden` alone repaints a scrolled page from the top.
*/
.pow-modal-lock {
    overflow: hidden;
}

.pow-modal-lock body {
    position: fixed;
    inset-inline: 0;
    width: 100%;
    overflow-y: scroll;
}

.pow-modal-overlay {
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0;
    padding: 16px;
    position: fixed;
    z-index: 3000;
}

.pow-modal {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    /* §12.4: never taller than 80vh, never wider than the viewport */
    max-height: 80vh;
    max-width: min(960px, 100%);
    width: 100%;
    overflow: hidden;
    text-align: start;
}

.pow-modal__header {
    align-items: center;
    border-block-end: 1px solid #e2e2e2;
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    justify-content: space-between;
    padding: 14px 18px;
}

.pow-modal__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.pow-modal__dismiss {
    background: none;
    border: 0;
    color: #666;
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    /* a thumb-sized target, not a 12px glyph */
    min-height: 44px;
    min-width: 44px;
}

.pow-modal__dismiss:hover {
    color: #000;
}

/* The only scrollable region. */
.pow-modal__body {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 18px;
}

/*
    Anything genuinely wider than the dialog scrolls inside itself. Without this a
    settlement table with nine columns would push the dialog past the viewport.
*/
.pow-modal__body .table-responsive,
.pow-modal__body .pow-modal-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.pow-modal__footer {
    /* fixed: §12.4 says the confirm button never scrolls away */
    background: #fafafa;
    border-block-start: 1px solid #e2e2e2;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: flex-start;
    padding: 12px 18px;
}

.pow-modal__confirm,
.pow-modal__cancel {
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    min-height: 44px;
    padding: 8px 20px;
}

.pow-modal__confirm {
    background: #2e7d32;
    color: #fff;
}

.pow-modal__confirm:hover {
    background: #276b2a;
}

.pow-modal__cancel {
    background: #fff;
    border-color: #c9c9c9;
    color: #333;
}

.pow-modal__cancel:hover {
    background: #f0f0f0;
}

/* The inert holder the popup content lives in until it is opened. */
.pow-modal-source {
    display: none;
}

/*
    Popup content lays out in at most two columns and collapses to one when narrow
    (§12.4). Deliberately not tied to the admin grid so the storefront gets it too.
*/
.pow-modal-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .pow-modal-grid--two {
        grid-template-columns: 1fr 1fr;
    }
}

.pow-modal-grid__full {
    grid-column: 1 / -1;
}

/* Narrow screens: the dialog takes the whole viewport rather than a cramped card. */
@media (max-width: 560px) {
    .pow-modal-overlay {
        padding: 0;
    }

    .pow-modal {
        border-radius: 0;
        max-height: 100vh;
        max-width: 100%;
    }

    .pow-modal__footer {
        flex-wrap: wrap;
    }

    .pow-modal__confirm,
    .pow-modal__cancel {
        flex: 1 1 auto;
    }
}

/* ---------------------------------------------------------------------------
   Pricing case page (§3)

   These pow-* classes were referenced by the case view since Phase 11 but never
   defined anywhere, and the view did not even link this stylesheet — so the grid
   fell back to browser defaults. Both halves of that are fixed in Phase 12.
   --------------------------------------------------------------------------- */

/* Column widths for the pricing entry grid; the note column is the one that
   otherwise steals room from the product name and the amount field. */
.pow-case-lines {
    table-layout: fixed;
}

.pow-case-lines__product     { width: 25%; }
.pow-case-lines__qty         { width: 7%; }
.pow-case-lines__vendor      { width: 18%; }
.pow-case-lines__amount      { width: 15%; }
.pow-case-lines__asked       { width: 12%; }
.pow-case-lines__responsible { width: 12%; }
.pow-case-lines__note        { width: 11%; }

.pow-case-lines td,
.pow-case-lines th {
    overflow-wrap: anywhere;
    vertical-align: top;
}

/* The searchable vendor combo: a text box the user types into over a hidden id. */
.pow-vendor-combo {
    position: relative;
}

.pow-vendor-combo .pow-vendor-search {
    width: 100%;
}

/* A priced line shows its amount as text, not as an editable field (§11.3). */
.pow-readonly-amount {
    font-weight: 600;
    white-space: nowrap;
}

/*
    The three pricing decisions, side by side directly under the inquiry box.
    Wraps rather than overflowing, so a narrow admin window stacks them.
*/
.pow-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 16px;
}

.pow-action-bar .btn {
    min-height: 44px;
}

/* The primary action reads first in the bar and is visually heavier. */
.pow-action-bar__primary {
    font-weight: 700;
}

.pow-action-bar__reason {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    margin-block-end: 16px;
    padding: 10px 12px;
}

/* ---------------------------------------------------------------------------
   Tabs inside a popup (§3 history)
   --------------------------------------------------------------------------- */

.pow-tabs__strip {
    border-block-end: 2px solid #e2e2e2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-block-end: 12px;
}

.pow-tabs__tab {
    background: none;
    border: 0;
    border-block-end: 3px solid transparent;
    color: #555;
    cursor: pointer;
    font-weight: 600;
    margin-block-end: -2px;
    min-height: 44px;
    padding: 8px 14px;
}

.pow-tabs__tab:hover {
    color: #000;
}

.pow-tabs__tab.is-active {
    border-block-end-color: #4a7ebb;
    color: #1b4f8a;
}

.pow-tabs__panel {
    display: none;
}

.pow-tabs__panel.is-active {
    display: block;
}

/* The proforma preview and settlement grid inside the send popup. */
.pow-preview__title {
    font-size: 1rem;
    font-weight: 700;
    margin-block-end: 4px;
}

.pow-preview-table tfoot th {
    font-weight: 700;
}

.pow-settlement-table {
    min-width: 720px;
}

/* ---------------------------------------------------------------------------
   Payment-deadline countdown (§12.7)

   Three urgency bands plus expired. Colour is a hint, never the only signal —
   the remaining time is always spelled out in words beside it.
   --------------------------------------------------------------------------- */

.pow-deadline {
    border: 1px solid #c9c9c9;
    border-radius: 8px;
    border-inline-start-width: 5px;
    margin-block: 16px;
    padding: 12px 14px;
}

.pow-deadline__heading {
    font-weight: 700;
    margin-block-end: 4px;
}

.pow-deadline__date {
    font-size: 1.05rem;
}

.pow-deadline__remaining {
    font-weight: 700;
    margin-block-start: 6px;
}

.pow-deadline--normal {
    background: #f3f8f3;
    border-color: #cfe3cf;
    border-inline-start-color: #4a934a;
}

.pow-deadline--warning {
    background: #fff8e1;
    border-color: #ffe082;
    border-inline-start-color: #f0ad00;
}

.pow-deadline--danger {
    background: #fdf3f2;
    border-color: #f2c3bd;
    border-inline-start-color: #c0392b;
}

.pow-deadline--expired {
    background: #f2f2f2;
    border-color: #d0d0d0;
    border-inline-start-color: #777;
    color: #555;
}

/* ---------------------------------------------------------------------------
   Storefront tables (§7)

   Wide tables scroll inside their own box; the page itself never scrolls
   sideways at any width.
   --------------------------------------------------------------------------- */

.pow-table-wrapper {
    max-width: 100%;
    overflow-x: auto;
}

/* ---------------------------------------------------------------------------
   D4 — per-line note button. Filled state must be readable at a glance.
   --------------------------------------------------------------------------- */

.pow-note-cell {
    text-align: center;
    vertical-align: middle;
}

.pow-note-button {
    min-width: 72px;
}

.pow-note-button--filled::after {
    content: " ●";
    font-size: 0.7em;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   D11 — the amount field fills its cell; the suffix stays inline.
   The wrapper is a flex row: input flexible, suffix fixed.
   --------------------------------------------------------------------------- */

.pow-case-lines .pow-number.input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    min-width: 130px;
}

.pow-case-lines .pow-number .pow-number-display {
    flex: 1 1 auto;
    width: auto;
    min-width: 90px;
}

.pow-case-lines .pow-number .input-group-text,
.pow-case-lines .pow-number .pow-number-suffix {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   D11 — theme-grade buttons on the plugin's customer pages.

   DefaultClean styles .button-1/.button-2 only under page-specific parents, so on
   these plugin-owned account pages they fell back to the native browser button.
   These rules mirror the theme's own metrics and colors (via its CSS variables),
   scoped to the account-page wrapper the plugin views render into.
   --------------------------------------------------------------------------- */

.account-page .pow-table-wrapper .button-1,
.account-page .pow-table-wrapper .button-2,
.account-page .pow-actions .button-1,
.account-page .pow-actions .button-2,
.account-page .pow-deadline ~ * .button-1,
.account-page form .button-1,
.account-page form .button-2,
.account-page .button-2[data-pow-modal-open],
.account-page .button-1[data-pow-modal-open] {
    display: inline-block;
    border: none;
    padding: 8px 18px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    text-transform: none;
}

/* primary: the theme's accent blue family */
.account-page .pow-table-wrapper .button-1,
.account-page .pow-actions .button-1,
.account-page form .button-1,
.account-page .button-1[data-pow-modal-open] {
    min-width: 140px;
    padding: 10px 30px;
    font-size: 15px;
    background-color: var(--accent-blue-color, #4ab2f1);
    color: #fff;
}

.account-page .pow-table-wrapper .button-1:hover,
.account-page .pow-actions .button-1:hover,
.account-page form .button-1:hover,
.account-page .button-1[data-pow-modal-open]:hover {
    background-color: var(--accent-blue-active-color, #248ece);
}

/* secondary: the theme's neutral family */
.account-page .pow-table-wrapper .button-2,
.account-page .pow-actions .button-2,
.account-page form .button-2,
.account-page .button-2[data-pow-modal-open] {
    background-color: #eee;
    color: #444;
}

.account-page .pow-table-wrapper .button-2:hover,
.account-page .pow-actions .button-2:hover,
.account-page form .button-2:hover,
.account-page .button-2[data-pow-modal-open]:hover {
    background-color: #e3e3e3;
}

/* E8: list-page action buttons (`مشاهده` on the proformas + pending lists) get the same
   secondary treatment as every other plugin button — no more naked native buttons */
.account-page .data-table .button-2,
.account-page .table-wrapper .button-2 {
    display: inline-block;
    border: none;
    background-color: #eee;
    color: #444;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
}

.account-page .data-table .button-2:hover,
.account-page .table-wrapper .button-2:hover {
    background-color: #e3e3e3;
}

/* per-item row buttons stay compact so the table breathes */
.account-page .pow-table-wrapper td .button-2 {
    min-width: 0;
    padding: 6px 12px;
    font-size: 13px;
    margin-inline-end: 4px;
}

/* D5 — returned-for-correction notice: unmistakably a warning, unmistakably first. */
.pow-correction-notice {
    background: #fdf3e3;
    border: 1px solid #e0a532;
    border-inline-start: 5px solid #e0a532;
    border-radius: 6px;
    padding: 14px 16px;
    margin-block-end: 16px;
}

.pow-correction-notice__reason {
    margin-block-start: 8px;
    font-weight: 600;
}

.pow-correction-notice__hint {
    margin-block-start: 8px;
    color: #6b5215;
}

/*
    D12/E7 — summary rows are ONE line: label beside value, never an orphaned value below.
    The theme's stylesheet loads after this one and floats/zeroes these elements, so the
    row layout is pinned with !important — layout only, no colors.
*/
.account-page .pow-summary .form-fields .inputs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline;
    gap: 8px;
    white-space: normal;
    text-align: start;
}

.account-page .pow-summary .form-fields .inputs label {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0;
    font-weight: 600;
}

/* the theme zeroes .inputs span width on account pages; inside the flex summary the value flexes */
.account-page .pow-summary .form-fields .inputs span {
    display: inline-block !important;
    width: auto !important;
    flex: 1 1 auto;
    text-align: start !important;
}

/* ---------------------------------------------------------------------------
   E1/خ-33 — long unbreakable strings never blow a column open.
   .pow-truncate for one-line ellipsis cells; plugin tables wrap-anywhere as a net.
   --------------------------------------------------------------------------- */

.pow-truncate {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pow-table-wrapper td,
.pow-review-row__facts dd,
.pow-evidence-card__facts dd,
.account-page .data-table td {
    overflow-wrap: anywhere;
}