/* Product Lifecycle blocks: Special Order and Replacement V1 / V2 / V3 (design mockups) */

/* ── Callout ─────────────────────────────────────────────────────────── */
.lifecycle-block-root { margin: 18px 0 0; }

.lifecycle-block-attributed .lifecycle-combination-block { display: none; }
.lifecycle-block-attributed .lifecycle-combination-block.is-active { display: block; }

.lifecycle-block__callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #092237;
    font-size: 13px;
    line-height: 1.45;
}

/* The icon is drawn in the variant colour through a mask, so the view needs no per-variant markup */
.lifecycle-block__icon {
    flex: 0 0 auto;
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    background-color: currentColor;
    -webkit-mask: var(--lifecycle-icon) center / contain no-repeat;
    mask: var(--lifecycle-icon) center / contain no-repeat;
}

.lifecycle-block__text { min-width: 0; }
.lifecycle-block__heading { margin: 0 0 2px; font-size: 13px; font-weight: 700; line-height: 1.45; }
.lifecycle-block__message { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.45; }

/* Special Order: warning triangle */
.lifecycle-block--special-order {
    --lifecycle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
.lifecycle-block--special-order .lifecycle-block__callout { background: #fff8e6; border-color: #f4e2b4; }
.lifecycle-block--special-order .lifecycle-block__icon    { color: #d99a00; }

/* V1: replacement arrows */
.lifecycle-block--v1 {
    --lifecycle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 0-15.4-6.3L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M3 12a9 9 0 0 0 15.4 6.3L21 16'/%3E%3Cpath d='M16 16h5v5'/%3E%3C/svg%3E");
}
.lifecycle-block--v1 .lifecycle-block__callout { background: #eaf7f0; border-color: #bfe5d0; }
.lifecycle-block--v1 .lifecycle-block__icon    { color: #1e9e5a; }

/* V2: unavailable package */
.lifecycle-block--v2 {
    --lifecycle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l2-1.2'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='m17 17 5 5'/%3E%3Cpath d='m22 17-5 5'/%3E%3C/svg%3E");
}
.lifecycle-block--v2 .lifecycle-block__callout { background: #f3f4f6; border-color: #dcdfe4; }
.lifecycle-block--v2 .lifecycle-block__icon    { color: #5f6b7a; }

/* V3: information */
.lifecycle-block--v3 {
    --lifecycle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
.lifecycle-block--v3 .lifecycle-block__callout { background: #eaf4fb; border-color: #c4def2; }
.lifecycle-block--v3 .lifecycle-block__icon    { color: #2b7cc1; }

/* ── Divider + CTA ───────────────────────────────────────────────────── */
.lifecycle-block__rule {
    height: 0;
    margin: 20px 0 0;
    border: 0;
    border-top: 1px solid #d5d9de;
}

.lifecycle-block__cta {
    display: inline-block;
    margin-top: 24px;
    padding: 11px 26px;
    border: 2px solid #092237;
    border-radius: 999px;
    background: #092237;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
}

.lifecycle-block__cta:hover,
.lifecycle-block__cta:focus { background: #2f3944; border-color: #2f3944; color: #fff; text-decoration: none; }

/* ── Buy box while a block is active ─────────────────────────────────────
   lifecycle-block.js adds "lifecycle-active lifecycle-active--<variant>" to the product overview.
   A simple product's price and buy button are already removed on the server; these rules cover the
   selected combination of an attributed product and restyle the theme's buttons. */
.overview.lifecycle-active .add-to-cart,
.overview.lifecycle-active .prices.product-price-box,
.overview.lifecycle-active .overview-buttons .add-to-cart-panel {
    display: none !important;
}

/* V1 / V3: the block carries its own link button, so the whole button row goes */
.overview.lifecycle-active--v1 .overview-buttons,
.overview.lifecycle-active--v3 .overview-buttons {
    display: none !important;
}

/* V2: Quick Enquiry only, no wishlist */
.overview.lifecycle-active--v2 .overview-buttons .wishlistWrapper {
    display: none !important;
}

/* Special Order and V2: the theme's enquiry button, styled as the design's Quick Enquiry pill */
.overview.lifecycle-active--special-order .overview-buttons,
.overview.lifecycle-active--v2 .overview-buttons {
    margin-top: 24px;
    gap: 22px;
}

.overview.lifecycle-active--special-order #btnEnquireNow,
.overview.lifecycle-active--v2 #btnEnquireNow {
    display: block !important;
}

.overview.lifecycle-active--special-order #btnEnquireNow .proline-btn,
.overview.lifecycle-active--v2 #btnEnquireNow .proline-btn {
    padding: 11px 26px !important;
    line-height: 1.2;
    border: 2px solid #092237;
    border-radius: 999px;
    background: #092237;
    font-size: 14px;
    font-weight: 600;
    transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
}

.overview.lifecycle-active--special-order #btnEnquireNow .proline-btn span,
.overview.lifecycle-active--v2 #btnEnquireNow .proline-btn span {
    color: #fff;
    font-size: inherit;
}

.overview.lifecycle-active--special-order #btnEnquireNow .proline-btn:hover,
.overview.lifecycle-active--v2 #btnEnquireNow .proline-btn:hover {
    background: #2f3944;
    border-color: #2f3944;
}

/* Wishlist: plain underlined text link, as in the design */
.overview.lifecycle-active--special-order .overview-buttons .wishlistWrapper label {
    margin: 0;
    color: #092237;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

/* ── Mobile: full-width buttons, wishlist underneath ─────────────────── */
@media (max-width: 767px) {
    .lifecycle-block__cta { display: block; width: 100%; padding: 14px 24px; }

    .overview.lifecycle-active--special-order .overview-buttons,
    .overview.lifecycle-active--v2 .overview-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .overview.lifecycle-active--special-order #btnEnquireNow,
    .overview.lifecycle-active--v2 #btnEnquireNow {
        width: 100%;
    }

    .overview.lifecycle-active--special-order #btnEnquireNow .proline-btn,
    .overview.lifecycle-active--v2 #btnEnquireNow .proline-btn {
        width: 100%;
        padding: 14px 24px !important;
    }

    .overview.lifecycle-active--special-order .overview-buttons .wishlistWrapper {
        text-align: center;
    }
}

/* ── Lifecycle ribbons over the product image (listings and product page) ──
   The theme gives every span in .product-ribbon its ribbon shape; only the colours are set here.
   Colours are placeholders until Jera's ribbon design is final. */
.product-ribbon > span.lifecycle-ribbon--special-order,
.product-ribbon > span.lifecycle-ribbon--special-order:after { background: #d99a00; }

.product-ribbon > span.lifecycle-ribbon--end-of-line,
.product-ribbon > span.lifecycle-ribbon--end-of-line:after { background: #5f6b7a; }