/* Shared final UI adjustments for the public ordering flow. */
:root{
    --soorena-red:#b32d2d;
    --soorena-black:#000;
    --soorena-gray:#56575a;
    --soorena-white:#fff;
}

/* Shared local Persian webfont. */
html,body,button,input,select,textarea,a{
    font-family:"Vazirmatn",Tahoma,sans-serif!important;
}

/* Unavailable products stay discoverable without looking purchasable. */
.product-card.product-unavailable{
    background:#d4d4d4!important;
    border-color:#8d8d8d!important;
    box-shadow:none!important;
}
.product-card.product-unavailable:hover{transform:none!important;box-shadow:none!important}
.product-card.product-unavailable .product-img{filter:grayscale(1) brightness(.82)}
.product-card.product-unavailable .product-img,
.product-card.product-unavailable .product-img-placeholder,
.product-card.product-unavailable .product-title,
.product-card.product-unavailable .product-desc,
.product-card.product-unavailable .product-price{opacity:.62}
.product-card .btn-unavailable,
.product-card .btn-unavailable:hover{
    background:var(--soorena-red)!important;
    border-color:var(--soorena-red)!important;
    color:#fff!important;
    cursor:not-allowed!important;
    pointer-events:none!important;
    opacity:1!important;
    transform:none!important;
    box-shadow:none!important;
}

/* Review actions: both actions are equally visible, payment remains primary. */
.review-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:1rem}
.review-actions .btn-payment{margin-top:0!important}
.btn-add-more{
    min-height:54px;
    padding:1rem;
    border:1px solid var(--soorena-black);
    border-radius:40px;
    background:var(--soorena-black);
    color:var(--soorena-white)!important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    font-size:1.05rem;
    font-weight:700;
    transition:.2s;
}
.btn-add-more:hover{background:var(--soorena-red);border-color:var(--soorena-red);transform:translateY(-2px)}

/* Keep the checkout card vertically balanced between header and footer. */
body:has(#checkoutForm) .container{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin-block:auto!important;
    padding-block:28px!important;
}
body:has(#checkoutForm) .container>.card{width:min(700px,100%)!important}

@media(max-width:600px){
    .review-actions{grid-template-columns:1fr;gap:8px}
    .review-actions .btn-payment,.btn-add-more{min-height:46px;padding:.75rem;font-size:.92rem}
    body:has(#checkoutForm) .container{min-height:calc(100svh - 136px)!important;padding-block:18px!important}

}