/**
 * Copyright © Wolters Kluwer. All rights reserved.
 * Minicart CTAs for eligible (publication) carts:
 *   - Quick Checkout  = primary, bold, WK blue with a lightning glyph (the fast path)
 *   - Login & Checkout = secondary/outline (the core button, relabelled by speedy-button.js)
 * Loaded on every page via layout/default.xml so it applies wherever the minicart renders.
 */

/* Quick Checkout — primary CTA. WK brand styling: SOLID colour (no gradients), SQUARE
   corners, and the same box model / full width as the core checkout button so the two
   buttons are identical width and stack cleanly. */
.speedy-checkout-action {
    margin: 0 0 10px;
}
.speedy-checkout-action .action.primary.quick-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    background: #006bb4;          /* solid WK blue — no gradient */
    color: #fff;
    border: 1px solid #006bb4;
    border-radius: 0;             /* square corners */
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer;
    transition: background .15s ease;
}
.speedy-checkout-action .action.primary.quick-checkout:hover {
    background: #005a99;
    border-color: #005a99;
}
.speedy-checkout-action .action.primary.quick-checkout .qc-icon {
    font-size: 15px;
    line-height: 1;
}

/* Login & Checkout — the relabelled core button becomes the SECONDARY choice when
   Quick Checkout is present (solid-outline, square). Match width/box model. */
#top-cart-btn-checkout.is-login-checkout {
    background: #fff !important;
    color: #006bb4 !important;
    border: 1px solid #006bb4 !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
}
#top-cart-btn-checkout.is-login-checkout:hover {
    background: #f0f7fc !important;
}

/* ------------------------------------------------------------------------
   GLOBAL: keep the checkout progress step-bar on ONE line.
   The success/checkout progress bar (ul.opc-progress-bar, rendered by
   FlowManager steps.phtml / Magento_Theme processbar.phtml) wraps when there
   are many steps — e.g. step 7 dropping to a second line and eating vertical
   space. Force a single row and let the items shrink evenly instead of wrapping.
   This is a site-wide layout rule (loaded on every page via default.xml).
   ------------------------------------------------------------------------ */
ul.opc-progress-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100%;
    box-sizing: border-box;
}
ul.opc-progress-bar > .opc-progress-bar-item {
    flex: 1 1 0 !important;   /* equal widths, allowed to shrink below content */
    min-width: 0 !important;  /* critical: lets flex items shrink past content size */
    width: auto !important;
}
/* Let long step labels shrink/ellipsize rather than force a wrap. */
ul.opc-progress-bar > .opc-progress-bar-item > span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}
@media (max-width: 600px) {
    /* On phones, keep the numbered circles in a row but hide the wordy labels. */
    ul.opc-progress-bar > .opc-progress-bar-item > span { font-size: 10px; }
}

/* ------------------------------------------------------------------------
   Success-page "finish your profile" prompt (guest, no password set).
   ------------------------------------------------------------------------ */
.speedy-profile-prompt {
    margin: 0 0 24px;
    border: 1px solid #b8d9ee;
    border-left: 4px solid #006bb4;
    background: #eaf4fb;
    border-radius: 0;
    padding: 16px 20px;
}
.speedy-profile-prompt .spp-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}
.speedy-profile-prompt .spp-title {
    font-size: 15px; font-weight: 700; color: #232323; flex: 0 0 100%;
}
.speedy-profile-prompt .spp-text { font-size: 13px; color: #4a4a4a; flex: 1 1 auto; min-width: 220px; }
.speedy-profile-prompt .spp-cta {
    flex: 0 0 auto;
    display: inline-block;
    padding: 10px 18px;
    background: #006bb4; color: #fff; text-decoration: none;
    font-size: 14px; font-weight: 600; border-radius: 0;
}
.speedy-profile-prompt .spp-cta:hover { background: #005a99; }
@media (max-width: 600px) {
    .speedy-profile-prompt .spp-cta { flex: 1 1 100%; text-align: center; margin-top: 8px; }
}