/*
 * Conversion quick wins (Aban 1405 / Nov 2026).
 *
 * Small, scoped overrides for the product order pages and the high-traffic
 * guides that link to them. This file is loaded only by those templates, so
 * it can be removed as one unit when the new design system replaces the
 * legacy stylesheet.
 */

/* ---------------------------------------------------------------------
 * Contextual order call-to-action inside guides
 * ------------------------------------------------------------------ */
.order-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
    margin: 28px 0;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-inline-start: 5px solid var(--primary-dark);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgb(22 39 68 / 8%);
}

.order-cta__copy {
    flex: 1 1 280px;
    min-width: 0;
}

.order-cta__title {
    margin: 0 0 4px;
    color: var(--primary-dark);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.7;
}

.order-cta__text {
    margin: 0;
    color: var(--text);
    font-size: .93rem;
    line-height: 1.9;
}

.order-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 22px;
    color: #ffffff;
    background: var(--primary-dark);
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, transform .2s ease;
}

.order-cta__button:hover,
.order-cta__button:focus-visible {
    color: #ffffff;
    background: #082648;
    transform: translateY(-1px);
}

.order-cta__button:focus-visible {
    outline: 3px solid rgb(21 151 236 / 35%);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .order-cta {
        margin: 22px 0;
        padding: 16px;
    }

    .order-cta__button {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------
 * Product order pages
 * ------------------------------------------------------------------ */

/* The total is information, not an action: stop it looking like a button. */
.inline-order-panel .payable-total {
    margin-top: 12px;
    padding: 12px 0 0;
    color: var(--primary-dark);
    background: none;
    border-top: 2px solid var(--line);
    border-radius: 0;
    font-size: 1.05rem;
    font-weight: 900;
    text-align: start;
}

.inline-order-panel .payable-total span {
    font-size: 1.3rem;
}

/* Tell people why "add to cart" is still disabled. */
.add-to-cart-hint {
    display: none;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.8;
}

.inline-order-submit [data-add-to-cart]:disabled ~ .add-to-cart-hint {
    display: block;
}

.inline-order-submit [data-form-message]:not(:empty) ~ .add-to-cart-hint {
    display: none;
}

/* Byline moved below the form. */
.inline-order-panel + .content-meta-bar {
    margin-top: 18px;
}

/* Phones: get to the order form in one screen. */
@media (max-width: 640px) {
    .booklet-page-shell .booklet-hero-media,
    .booklet-page-shell .booklet-hero-points,
    .booklet-page-shell .booklet-hero-actions .button-secondary,
    .booklet-page-shell .booklet-hero-actions .text-link {
        display: none;
    }

    .booklet-page-shell .booklet-hero-actions .product-order-action {
        width: 100%;
    }

    /* Icon only, so the floating Telegram button stops covering buttons. */
    .telegram-support-float__label {
        display: none;
    }
}

/* Sticky shortcut back to the order form, phones only. */
.mobile-order-bar {
    display: none;
}

@media (max-width: 767px) {
    .mobile-order-bar:not([hidden]) {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 85;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: #ffffff;
        border-top: 1px solid var(--line);
        box-shadow: 0 -10px 28px rgb(22 39 68 / 10%);
    }

    .mobile-order-bar__text {
        min-width: 0;
        overflow: hidden;
        color: var(--primary-dark);
        font-size: .92rem;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-order-bar__button {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        min-height: 46px;
        padding: 10px 18px;
        color: #ffffff;
        background: var(--primary-dark);
        border-radius: 999px;
        font-size: .92rem;
        font-weight: 800;
        text-decoration: none;
    }

    .has-mobile-order-bar .telegram-support-float {
        bottom: calc(80px + env(safe-area-inset-bottom));
    }

    /* Keep the floating button off the form fields while ordering. */
    .telegram-support-float {
        transition: opacity .2s ease, transform .2s ease;
    }

    .order-form-in-view .telegram-support-float {
        opacity: 0;
        pointer-events: none;
        transform: translateY(12px);
    }
}

/* Checkout: bank-page rial notice, delivery time, payment-failed help */
.review-items .review-item-delivery {
  display: block;
  color: var(--muted, #5b6b7f);
  font-size: .85rem;
  margin-top: .25rem;
}
.review-rial-note {
  display: grid;
  gap: .25rem;
  margin: 1rem 0;
  padding: .85rem 1rem;
  border-radius: 12px;
  background: #fff8e6;
  border: 1px solid #f3d27a;
  color: #5a4300;
  font-size: .92rem;
  line-height: 1.8;
}
.review-rial-note bdi { font-weight: 700; }
.payment-failed-help {
  margin-top: 1.25rem;
  padding: 1rem;
  border-radius: 12px;
  background: var(--surface-soft, #f4f8fc);
  text-align: start;
  line-height: 1.9;
}
.payment-failed-help ul { margin: .5rem 0; padding-inline-start: 1.25rem; }
.payment-failed-help .button { width: 100%; margin-top: .5rem; }