/*
 * Safqa fast preview
 *
 * Keeps the native CS-Cart quick-view and variation forms intact while giving
 * both dialogs the compact, editorial product treatment used by the Safqa
 * fashion and books category previews.
 */

html body.theme-safqa {
    --safqa-preview-canvas: #f4f2ed;
    --safqa-preview-surface: #ffffff;
    --safqa-preview-ink: #18231e;
    --safqa-preview-muted: #65716a;
    --safqa-preview-line: #d9ded7;
    --safqa-preview-forest: #214e3d;
    --safqa-preview-sage: #dce4d5;
    --safqa-preview-gold: #ffd814;
    --safqa-preview-gold-hover: #f7ca00;
    --safqa-preview-success: #08785d;
    --safqa-preview-font: "Noto Sans Arabic", sans-serif;
    --safqa-preview-numbers: "Outfit", "Noto Sans Arabic", sans-serif;
}

/* The jQuery UI wrapper receives an inline size from the legacy dialog code. */
html body.theme-safqa .ui-dialog.ui-widget:has(#product_quick_view),
html body.theme-safqa .ui-dialog.ui-widget:has(#ut2_select_variation_wrapper_svw) {
    box-sizing: border-box !important;
    width: min(1040px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: hidden !important;
    border: 1px solid var(--safqa-preview-line) !important;
    border-radius: 14px !important;
    background: var(--safqa-preview-surface) !important;
    box-shadow: 0 24px 70px rgba(24, 35, 30, .24) !important;
    font-family: var(--safqa-preview-font) !important;
    direction: rtl;
}

html body.theme-safqa .ui-dialog.ui-widget:has(#ut2_select_variation_wrapper_svw) {
    width: min(840px, calc(100vw - 32px)) !important;
}

html body.theme-safqa .ui-dialog.ui-widget:has(#product_quick_view)::before,
html body.theme-safqa .ui-dialog.ui-widget:has(#ut2_select_variation_wrapper_svw)::before {
    display: none !important;
}

html body.theme-safqa .ui-dialog.ui-widget:has(#product_quick_view) .ui-dialog-titlebar,
html body.theme-safqa .ui-dialog.ui-widget:has(#ut2_select_variation_wrapper_svw) .ui-dialog-titlebar {
    box-sizing: border-box !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 15px 22px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--safqa-preview-line) !important;
    border-radius: 0 !important;
    background: var(--safqa-preview-surface) !important;
    color: var(--safqa-preview-ink) !important;
}

html body.theme-safqa .ui-dialog.ui-widget:has(#product_quick_view) .ui-dialog-title,
html body.theme-safqa .ui-dialog.ui-widget:has(#ut2_select_variation_wrapper_svw) .ui-dialog-title {
    float: none !important;
    margin: 0 !important;
    color: var(--safqa-preview-ink) !important;
    font-family: var(--safqa-preview-font) !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
}

html body.theme-safqa .ui-dialog.ui-widget:has(#product_quick_view) .ui-dialog-titlebar-close,
html body.theme-safqa .ui-dialog.ui-widget:has(#ut2_select_variation_wrapper_svw) .ui-dialog-titlebar-close {
    top: 15px !important;
    inset-inline-start: 18px !important;
    inset-inline-end: auto !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    border: 1px solid var(--safqa-preview-line) !important;
    border-radius: 50% !important;
    background: var(--safqa-preview-canvas) !important;
    color: var(--safqa-preview-ink) !important;
}

html body.theme-safqa .ui-dialog.ui-widget:has(#product_quick_view) .ui-dialog-titlebar-close:hover,
html body.theme-safqa .ui-dialog.ui-widget:has(#ut2_select_variation_wrapper_svw) .ui-dialog-titlebar-close:hover {
    background: var(--safqa-preview-sage) !important;
}

html body.theme-safqa .ui-dialog.ui-widget:has(#product_quick_view) .ui-dialog-content,
html body.theme-safqa .ui-dialog.ui-widget:has(#ut2_select_variation_wrapper_svw) .ui-dialog-content {
    box-sizing: border-box !important;
    max-height: calc(100dvh - 96px) !important;
    overflow: auto !important;
    background: var(--safqa-preview-surface) !important;
}

/* Quick view: image gallery and purchase panel. */
html body.theme-safqa #product_quick_view .ty-quick-view__wrapper {
    display: block !important;
    width: auto !important;
    padding: 22px !important;
}

html body.theme-safqa #product_quick_view .ut2-pb,
html body.theme-safqa #product_quick_view .ut2-pb__items {
    width: 100% !important;
    min-width: 0 !important;
}

html body.theme-safqa #product_quick_view .ut2-pb__items {
    display: grid !important;
    grid-template-columns: minmax(300px, .95fr) minmax(360px, 1.05fr) !important;
    align-items: start !important;
    gap: 30px !important;
}

html body.theme-safqa #product_quick_view .ut2-pb__img-wrapper {
    position: relative !important;
    top: auto !important;
    flex: initial !important;
    max-inline-size: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--safqa-preview-line) !important;
    border-radius: 12px !important;
    background: var(--safqa-preview-canvas) !important;
}

html body.theme-safqa #product_quick_view .ut2-pb__img,
html body.theme-safqa #product_quick_view .ty-product-img {
    width: 100% !important;
    height: auto !important;
    min-height: 360px !important;
    margin: 0 !important;
    background: var(--safqa-preview-canvas) !important;
}

html body.theme-safqa #product_quick_view .ty-product-img .ty-previewer,
html body.theme-safqa #product_quick_view .ty-product-img .ty-previewer img,
html body.theme-safqa #product_quick_view .ty-product-img .cm-image {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 360px !important;
    object-fit: contain !important;
    padding: 16px !important;
}

html body.theme-safqa #product_quick_view .ut2-pb__right-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    min-width: 0 !important;
    padding: 4px 0 !important;
}

html body.theme-safqa #product_quick_view .ut2-pb__right-wrapper > div:not(:last-child) {
    margin: 0 !important;
}

html body.theme-safqa #product_quick_view .ut2-pb__title {
    display: block !important;
    order: 0;
}

html body.theme-safqa #product_quick_view .ty-mainbox-title {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 14px !important;
    color: var(--safqa-preview-ink) !important;
    font-family: var(--safqa-preview-font) !important;
    font-size: clamp(20px, 2vw, 28px) !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
}

html body.theme-safqa #product_quick_view .ut2-pb__title__more-link {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    color: var(--safqa-preview-forest) !important;
    font-family: var(--safqa-preview-font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

html body.theme-safqa #product_quick_view .ut2-pb__price-wrap {
    order: 1;
    padding: 15px 0 !important;
    border-top: 1px solid var(--safqa-preview-line) !important;
    border-bottom: 1px solid var(--safqa-preview-line) !important;
}

html body.theme-safqa #product_quick_view .ty-price,
html body.theme-safqa #ut2_select_variation_wrapper_svw .ty-price {
    color: var(--safqa-preview-ink) !important;
    font-family: var(--safqa-preview-numbers) !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

html body.theme-safqa #product_quick_view .ty-price sup,
html body.theme-safqa #ut2_select_variation_wrapper_svw .ty-price sup {
    font-size: .52em !important;
    line-height: 1 !important;
}

html body.theme-safqa #product_quick_view .stock-wrap,
html body.theme-safqa #product_quick_view .ty-qty-in-stock {
    color: var(--safqa-preview-success) !important;
    font-family: var(--safqa-preview-font) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

html body.theme-safqa #product_quick_view .ut2-pb__options,
html body.theme-safqa #product_quick_view .ut2-pb__advanced-options {
    order: 2;
    padding: 0 !important;
}

html body.theme-safqa #product_quick_view .ty-control-group,
html body.theme-safqa #ut2_select_variation_wrapper_svw .ty-control-group {
    margin: 0 0 10px !important;
}

html body.theme-safqa #product_quick_view .ty-control-group__label,
html body.theme-safqa #ut2_select_variation_wrapper_svw .ty-control-group__label {
    display: block !important;
    margin-bottom: 6px !important;
    color: var(--safqa-preview-muted) !important;
    font-family: var(--safqa-preview-font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

html body.theme-safqa #product_quick_view select,
html body.theme-safqa #ut2_select_variation_wrapper_svw select {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    border: 1px solid var(--safqa-preview-line) !important;
    border-radius: 8px !important;
    background-color: var(--safqa-preview-surface) !important;
    color: var(--safqa-preview-ink) !important;
    font-family: var(--safqa-preview-font) !important;
    font-size: 15px !important;
}

html body.theme-safqa #product_quick_view .ut2-pb__button {
    order: 3;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 4px 0 0 !important;
}

html body.theme-safqa #product_quick_view .ut2-qty__wrap {
    flex: 0 0 auto;
}

html body.theme-safqa #product_quick_view .ty-qty .ty-value-changer {
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
    border: 1px solid var(--safqa-preview-line) !important;
    border-radius: 8px !important;
    background: var(--safqa-preview-canvas) !important;
}

html body.theme-safqa #product_quick_view .ty-value-changer__input {
    width: 42px !important;
    color: var(--safqa-preview-ink) !important;
    background: transparent !important;
    font-family: var(--safqa-preview-numbers) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

html body.theme-safqa #product_quick_view .ty-value-changer__increase,
html body.theme-safqa #product_quick_view .ty-value-changer__decrease {
    width: 34px !important;
    color: var(--safqa-preview-forest) !important;
    font-size: 21px !important;
}

html body.theme-safqa #product_quick_view .ty-btn__add-to-cart,
html body.theme-safqa #ut2_select_variation_wrapper_svw .ty-btn__add-to-cart,
html body.theme-safqa #ut2_select_variation_wrapper_svw .ty-btn__primary {
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 20px !important;
    border: 1px solid #e7b400 !important;
    border-radius: 999px !important;
    background: var(--safqa-preview-gold) !important;
    color: #111 !important;
    box-shadow: 0 7px 18px rgba(24, 35, 30, .12) !important;
    font-family: var(--safqa-preview-font) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
}

html body.theme-safqa #product_quick_view .ty-btn__add-to-cart:hover,
html body.theme-safqa #ut2_select_variation_wrapper_svw .ty-btn__add-to-cart:hover,
html body.theme-safqa #ut2_select_variation_wrapper_svw .ty-btn__primary:hover {
    background: var(--safqa-preview-gold-hover) !important;
}

html body.theme-safqa #product_quick_view .ty-min-qty-description {
    display: none !important;
}

html body.theme-safqa #product_quick_view .ut2-pb__description {
    order: 4;
    margin-top: 4px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--safqa-preview-line) !important;
    color: var(--safqa-preview-muted) !important;
    font-family: var(--safqa-preview-font) !important;
    font-size: 13px !important;
    line-height: 1.9 !important;
}

html body.theme-safqa #product_quick_view .ut2-pb__description-title {
    color: var(--safqa-preview-ink) !important;
    font-weight: 800 !important;
}

/* Select options: a compact product summary above native choices and footer. */
html body.theme-safqa #ut2_select_variation_wrapper_svw {
    box-sizing: border-box !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 22px !important;
}

html body.theme-safqa #ut2_select_variation_wrapper_svw form {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    grid-template-areas:
        "product option"
        "product details"
        "footer footer" !important;
    align-items: start !important;
    gap: 18px 28px !important;
}

html body.theme-safqa #ut2_select_variation_wrapper_svw .ut2_select_variation__product {
    grid-area: product;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 16px !important;
    border: 1px solid var(--safqa-preview-line) !important;
    border-radius: 12px !important;
    background: var(--safqa-preview-canvas) !important;
}

html body.theme-safqa #ut2_select_variation_wrapper_svw .product_icon_lnk {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 150px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    background: var(--safqa-preview-surface) !important;
}

html body.theme-safqa #ut2_select_variation_wrapper_svw .product_icon_lnk img {
    width: 150px !important;
    max-width: 100% !important;
    height: 150px !important;
    object-fit: contain !important;
}

html body.theme-safqa #ut2_select_variation_wrapper_svw .ut2_select_variation__product-title {
    min-width: 0 !important;
}

html body.theme-safqa #ut2_select_variation_wrapper_svw .product-title {
    display: block !important;
    overflow: hidden !important;
    color: var(--safqa-preview-ink) !important;
    font-family: var(--safqa-preview-font) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.65 !important;
    text-decoration: none !important;
}

html body.theme-safqa #ut2_select_variation_wrapper_svw .ut2_select_variation__option {
    grid-area: option;
    min-width: 0 !important;
    padding: 5px 0 !important;
}

html body.theme-safqa #ut2_select_variation_wrapper_svw .ut2_extra-link {
    grid-area: details;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--safqa-preview-forest) !important;
    font-family: var(--safqa-preview-font) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

html body.theme-safqa #ut2_select_variation_wrapper_svw .buttons-container.ut2_select_variation__buttons {
    grid-area: footer;
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(200px, .9fr) !important;
    align-items: center !important;
    gap: 16px !important;
    width: auto !important;
    height: auto !important;
    margin: 4px -22px -22px !important;
    padding: 16px 22px !important;
    border-top: 1px solid var(--safqa-preview-line) !important;
    border-radius: 0 !important;
    background: var(--safqa-preview-surface) !important;
}

html body.theme-safqa #ut2_select_variation_wrapper_svw .ut2_select_variation__price {
    padding: 0 !important;
}

html body.theme-safqa #ut2_select_variation_wrapper_svw .ty-inline-block,
html body.theme-safqa #ut2_select_variation_wrapper_svw .ty-inline-block > div {
    margin: 0 !important;
}

html body.theme-safqa #ut2_select_variation_wrapper_svw .ty-btn__tertiary {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    border: 1px solid var(--safqa-preview-line) !important;
    border-radius: 999px !important;
    background: var(--safqa-preview-canvas) !important;
    color: var(--safqa-preview-muted) !important;
    font-family: var(--safqa-preview-font) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

@media (max-width: 767px) {
    html body.theme-safqa .ui-dialog.ui-widget:has(#product_quick_view),
    html body.theme-safqa .ui-dialog.ui-widget:has(#ut2_select_variation_wrapper_svw) {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        border-radius: 10px !important;
    }

    html body.theme-safqa #product_quick_view .ty-quick-view__wrapper,
    html body.theme-safqa #ut2_select_variation_wrapper_svw {
        padding: 16px !important;
    }

    html body.theme-safqa #product_quick_view .ut2-pb__items,
    html body.theme-safqa #ut2_select_variation_wrapper_svw form {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    html body.theme-safqa #product_quick_view .ut2-pb__img,
    html body.theme-safqa #product_quick_view .ty-product-img,
    html body.theme-safqa #product_quick_view .ty-product-img .ty-previewer,
    html body.theme-safqa #product_quick_view .ty-product-img .ty-previewer img,
    html body.theme-safqa #product_quick_view .ty-product-img .cm-image {
        min-height: 260px !important;
        height: 260px !important;
    }

    html body.theme-safqa #product_quick_view .ut2-pb__button {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    html body.theme-safqa #product_quick_view .ut2-qty__wrap,
    html body.theme-safqa #product_quick_view .ty-qty .ty-value-changer {
        width: 100% !important;
    }

    html body.theme-safqa #ut2_select_variation_wrapper_svw .ut2_select_variation__product {
        flex-direction: row !important;
        align-items: center !important;
    }

    html body.theme-safqa #ut2_select_variation_wrapper_svw .product_icon_lnk,
    html body.theme-safqa #ut2_select_variation_wrapper_svw .product_icon_lnk img {
        width: 84px !important;
        min-height: 84px !important;
        height: 84px !important;
    }

    html body.theme-safqa #ut2_select_variation_wrapper_svw .buttons-container.ut2_select_variation__buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        margin: 0 -16px -16px !important;
        padding: 14px 16px !important;
    }

    html body.theme-safqa #ut2_select_variation_wrapper_svw .ut2_select_variation__price {
        flex: 1 1 100%;
    }
}