/**
 * Zhik Trade theme — shared styles for the customer-account "table +
 * pager" pattern.
 *
 * Lives in the theme rather than in any individual module because the
 * same visual language now applies across every customer-area page
 * that still uses Magento's `Magento\Theme\Block\Html\Pager` (Saved
 * Orders, Address Book, and any future pages that opt-in to the
 * stock pager instead of a Load-more pattern).
 *
 * Loaded by Magento_Theme/layout/default_head_blocks.xml so it
 * applies on every frontend page automatically. The selectors below
 * are deliberately narrow (`.order-products-toolbar`,
 * `.customer-addresses-toolbar`) so we don't accidentally restyle
 * pagers outside the customer-account scope (cart, catalog, etc.).
 *
 * Page-specific bits (Saved Orders tabs/badges/column widths,
 * Address Book column widths) stay in dealers.css and in this file
 * respectively — only the pager/toolbar/action-button conventions
 * are shared.
 */

/* ============================================================
   Button-sizing reset for the address edit form
   ------------------------------------------------------------
   Luma applies `.form-address-edit .actions-toolbar .action.primary
   { padding: 14px 17px; line-height: 22px }` to the Save Address
   button (specificity 0,0,3,0). That beats the portal-wide
   `.action.primary { padding: 0 20px; line-height: 35px }` rule
   (specificity 0,0,2,0) and the Save button ends up ~15px taller
   than every other primary button on the site. Match the form
   context's specificity and put the sizing back to standard.
   ============================================================ */
.form-address-edit .actions-toolbar .action.primary {
    padding: 0 20px;
    line-height: 35px;
}

/* ============================================================
   Pager toolbar layout
   ------------------------------------------------------------
   Magento's default Luma pager renders the three sections
   (toolbar-amount, pages, limiter) inside a `.pager` flex
   container with absolute positioning for the centre block.
   That pattern doesn't match the dark/light button language
   used everywhere else in the portal. Reflow as a clean 3-way
   flex with everything vertically centred.
   ============================================================ */
.order-products-toolbar.toolbar.bottom > .pager,
.customer-addresses-toolbar.toolbar.bottom > .pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 4px;
    /* The .table-wrapper above already draws a 1px bottom border —
       a border-top here would render a second parallel line. */
    margin-top: 0;
}

.order-products-toolbar .toolbar-amount,
.customer-addresses-toolbar .toolbar-amount {
    margin: 0;
    font-size: 13px;
    color: #555;
}

/* ============================================================
   Page links (.pages)
   ------------------------------------------------------------
   Luma sets `.account .toolbar .pages { position: absolute;
   width: 100% }` inside a `min-width: 769px` media query
   (specificity 0,0,3,0) which pulls .pages out of the flex
   flow and overlaps it with .toolbar-amount. The selectors
   below are 0,0,4,0 to beat that, and also reset the 25px
   bottom margin Luma applies that breaks vertical centring.
   ============================================================ */
.order-products-toolbar.toolbar.bottom .pager .pages,
.customer-addresses-toolbar.toolbar.bottom .pager .pages {
    position: static;
    width: auto;
    z-index: auto;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.order-products-toolbar .pages > .label,
.customer-addresses-toolbar .pages > .label {
    /* Hide the literal "Page" prefix Magento prepends */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.order-products-toolbar .pages .items.pages-items,
.customer-addresses-toolbar .pages .items.pages-items {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.order-products-toolbar .pages .item,
.customer-addresses-toolbar .pages .item {
    margin: 0;
}

/* Page number + next/prev arrow buttons — light outlined boxes */
.order-products-toolbar .pages .item .page,
.order-products-toolbar .pages .item a.page,
.order-products-toolbar .pages .item a.action,
.customer-addresses-toolbar .pages .item .page,
.customer-addresses-toolbar .pages .item a.page,
.customer-addresses-toolbar .pages .item a.action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: normal;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    line-height: 1;
}

.order-products-toolbar .pages .item a:hover,
.customer-addresses-toolbar .pages .item a:hover {
    background: #f5f5f5;
    border-color: #000;
    color: #000;
}

/* Current page — filled dark, matches the active-tab language */
.order-products-toolbar .pages .item.current .page,
.order-products-toolbar .pages .item.current strong.page,
.customer-addresses-toolbar .pages .item.current .page,
.customer-addresses-toolbar .pages .item.current strong.page {
    background: #000;
    color: #fff;
    border-color: #000;
    font-weight: bold;
}

/* Hide the screen-reader-only nested <span> labels Magento wraps
   inside each .page link so only the digit / arrow shows. */
.order-products-toolbar .pages .item .page > .label,
.order-products-toolbar .pages .item strong.page > .label,
.order-products-toolbar .pages .item.pages-item-next a span,
.order-products-toolbar .pages .item.pages-item-previous a span,
.customer-addresses-toolbar .pages .item .page > .label,
.customer-addresses-toolbar .pages .item strong.page > .label,
.customer-addresses-toolbar .pages .item.pages-item-next a span,
.customer-addresses-toolbar .pages .item.pages-item-previous a span {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* ============================================================
   "Show N per page" limiter
   ============================================================ */
.order-products-toolbar .limiter,
.customer-addresses-toolbar .limiter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
    margin: 0;
}

.order-products-toolbar .limiter .limiter-label,
.customer-addresses-toolbar .limiter .limiter-label {
    font-weight: normal;
}

.order-products-toolbar .limiter-options,
.customer-addresses-toolbar .limiter-options {
    height: 32px;
    padding: 0 28px 0 10px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    min-width: 64px;
}

.order-products-toolbar .limiter-options:focus,
.customer-addresses-toolbar .limiter-options:focus {
    border-color: #000;
    outline: none;
}

/* Mobile: stack the three sections, centre everything */
@media (max-width: 768px) {
    .order-products-toolbar.toolbar.bottom > .pager,
    .customer-addresses-toolbar.toolbar.bottom > .pager {
        justify-content: center;
        text-align: center;
    }
    .order-products-toolbar .toolbar-amount,
    .customer-addresses-toolbar .toolbar-amount {
        width: 100%;
    }
    .order-products-toolbar .limiter,
    .customer-addresses-toolbar .limiter {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   Address Book — Additional Address Entries table
   ------------------------------------------------------------
   Default cells split equally which leaves the Street Address
   column cramped and the Actions column oversized. Reweight
   the columns so the address text gets room and the action
   icons sit in a compact, centred slot.
   ============================================================ */
.block-addresses-list .additional-addresses .col.firstname,
.block-addresses-list .additional-addresses .col.lastname     { width: 9%;  }
.block-addresses-list .additional-addresses .col.streetaddress { width: 22%; }
.block-addresses-list .additional-addresses .col.city,
.block-addresses-list .additional-addresses .col.state        { width: 12%; }
.block-addresses-list .additional-addresses .col.country      { width: 10%; }
.block-addresses-list .additional-addresses .col.zip          { width: 8%;  }
.block-addresses-list .additional-addresses .col.phone        { width: 11%; }
.block-addresses-list .additional-addresses .col.actions {
    width: 14%;
    text-align: center;
    vertical-align: middle;
}
.block-addresses-list .additional-addresses .col.actions .action {
    margin: 0 4px;
}
.block-addresses-list .additional-addresses .col.actions .action i {
    margin-right: 6px;
}

/* ============================================================
   Address Book — phones (table reflows to stacked cards at 639px)
   ============================================================ */
@media (max-width: 639px) {
    /* Default billing + shipping cards stack full width (50% columns on desktop). */
    .block-addresses-default .block-content .box {
        flex-basis: 100%;
    }

    /* Reset the desktop column widths (and the firstname min-width) so each
       stacked cell spans the row instead of being squeezed to a sliver. */
    .block-addresses-list .additional-addresses .col.firstname,
    .block-addresses-list .additional-addresses .col.lastname,
    .block-addresses-list .additional-addresses .col.streetaddress,
    .block-addresses-list .additional-addresses .col.city,
    .block-addresses-list .additional-addresses .col.state,
    .block-addresses-list .additional-addresses .col.country,
    .block-addresses-list .additional-addresses .col.zip,
    .block-addresses-list .additional-addresses .col.phone,
    .block-addresses-list .additional-addresses .col.actions {
        width: auto;
        min-width: 0;
        text-align: left;
        white-space: normal;
    }

    /* Edit + Delete sit side by side at normal height; in a sliver cell they wrap
       and the 999px radius rounds them into tall ovals. */
    .block-addresses-list .additional-addresses .col.actions {
        display: flex;
        gap: 8px;
        padding-top: 4px;
    }
    .block-addresses-list .additional-addresses .col.actions .action {
        flex: 1;
        margin: 0;
        text-align: center;
        white-space: nowrap;
    }
}

/* ============================================================
   Shared portal "open" link + pulsing icon badge — ONE source of truth.
   Loaded globally (default_head_blocks → customer-account-tables.css), so the
   same affordance is reused consistently across the Order / Invoice / Backorder
   Arrivals / Recent Orders tables, the Incoming Stock page, and the Forward
   Order page cross-links.
   ============================================================ */

/* Open-row link: black (never browser-blue), underline under the TEXT only
   (not the arrow), trailing arrow nudges right on hover. */
.portal-open-link,
.portal-open-link:link,
.portal-open-link:visited,
.portal-open-link:hover,
.portal-open-link:focus,
.portal-open-link:active {
    color: #111;
    text-decoration: none;
}
.portal-open-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
}
.portal-open-link__text {
    border-bottom: 1px solid rgba(17, 17, 17, .28);
    transition: border-color .15s ease;
}
.portal-open-link:hover .portal-open-link__text { border-bottom-color: #111; }
.portal-open-link__arrow {
    font-size: .85em;
    display: inline-block;
    transition: transform .18s ease;
    flex: 0 0 auto;
}
.portal-open-link:hover .portal-open-link__arrow { transform: translateX(3px); }

/* Cell-as-link: stretch the reference link across its whole cell so the entire
   TD is clickable. The overlay is a child of the anchor, so the hover affordance
   (underline + arrow) stays on the reference text and native ctrl/middle-click
   still open a new tab. Scoped to the cell (not the row) so sibling-cell controls
   (invoice pay checkbox, pay amount + Add) stay clickable. Do NOT position
   .portal-open-link itself, or the overlay collapses back to the text. */
.cell-link { position: relative; }
.cell-link .portal-open-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Trailing "open" column: a narrow black cell whose arrow opens the same
   document as the reference link. The whole cell is the click target (stretched
   link) and the arrow nudges on hover, mirroring .portal-open-link. Rendered
   identically in the skeleton and loaded rows so the AJAX swap doesn't shift. */
.cell-open {
    width: 28px;
    text-align: center;
    vertical-align: middle;
    /* !important: the table's own `td` background rule (dealers.css / _extend.less)
       is more specific and would otherwise win. */
    background: #f4f4f4 !important;
    position: relative;
    padding: 0;
}
/* Fill the cell and flex-center the arrow so it sits dead-centre in the narrow
   column regardless of glyph metrics. */
.cell-open .portal-open-arrow,
.cell-open .portal-open-arrow:link,
.cell-open .portal-open-arrow:visited,
.cell-open .portal-open-arrow:hover,
.cell-open .portal-open-arrow:focus,
.cell-open .portal-open-arrow:active {
    color: #111;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.cell-open .portal-open-arrow::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cell-open .portal-open-arrow .fa-arrow-right { transition: transform .18s ease; }
.cell-open .portal-open-arrow:hover .fa-arrow-right { transform: translateX(3px); }
/* Placeholder arrow in the skeleton row (no link) — same glyph, dimmed. */
.cell-open > .fa-arrow-right { color: rgba(0, 0, 0, .4); }

/* Circular icon badge with a composited ring pulse (mirrors the How-to-Order
   badge; golden to match it). The glyph itself never repaints. */
.portal-pulse-badge {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--status-warning, #c77f00);
    color: #fff;
    flex: 0 0 auto;
}
.portal-pulse-badge i { font-size: 13px; }
.portal-pulse-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: var(--status-warning, #c77f00);
    transform: scale(1);
    opacity: .5;
    pointer-events: none;
    animation: portal-pulse-ring 1.2s ease-in-out infinite;
}
@keyframes portal-pulse-ring {
    0%   { transform: scale(1);   opacity: .5; }
    70%  { transform: scale(1.7); opacity: 0;  }
    100% { transform: scale(1.7); opacity: 0;  }
}
@media (prefers-reduced-motion: reduce) {
    .portal-pulse-badge::before { display: none; }
}