/* Listing category page — colors grid, popovers, item cards, quick-buy bar */

.color-choose {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.color-choose .col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.owl-theme .owl-nav {
    margin-top: unset !important;
}

.popover-title {
    text-align: center;
}

.custom-popover li {
    /*color: #666!important;*/
}

.popover-body {
    padding: 0 !important;
}

.popover {
    filter: opacity(0.96);
    padding: 2px !important;
}

.custom-popover li {
    border: none !important;
    text-align: center;
    font-size: 0.90em !important;
    font-weight: 400 !important;
}

.available-stock {
    color: #009100 !important;
}

.not-available-stock {
    color: #e50000 !important;
}

.custom-popover li:nth-child(2) {
    border-top: 1px solid #ccc !important;
}

.custom-popover li:last-child {
    border-top: 1px solid #ccc !important;
}

.mb-0 {
    margin-bottom: 0;
}

.item-prices {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.image-column {
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-icon-block {
    width: auto;
    margin: 0px;
    padding: 0;
    height: 60px;
    margin-bottom: 0px;
}

.flickity-slider {
    white-space: nowrap;
}

.custom-flex-distribution-items {
    min-width: 150px;
    max-width: 250px;
}

.listing-stock-line {
    margin-top: 3px;
}

.listing-stock-line .popover-item {
    display: inline-block;
}

.listing-item-actions {
    --listing-action-row-h: 35.88px;
    --listing-icon-btn-w: 40px;
    /* Details labels: same visual weight; cap max so long copy still fits the row */
    --listing-details-label-font-min: 9px;
    --listing-details-label-font-max: 11px;
    display: flex;
    align-items: stretch;
    align-content: stretch;
    flex-direction: row;
    direction: ltr;
    margin-top: 0 !important;
    min-height: var(--listing-action-row-h);
    height: var(--listing-action-row-h);
    border-radius: 8px;
    overflow: hidden;
    gap: 0;
}

.listing-item-actions--details-only .listing-details-action {
    flex: 1 1 100%;
}

.listing-item-actions--details-only .listing-details-submit {
    border-radius: 8px !important;
}

.listing-purchase-actions {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    align-self: stretch;
    align-items: stretch;
}

/* Full-width «للتفاصيل والطلب» + cart flush beside it (LTR so cart sits against the details button) */
.listing-order-details-row {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    min-height: var(--listing-action-row-h);
    height: var(--listing-action-row-h);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    align-self: stretch;
}

.listing-order-details-row--ltr {
    direction: ltr;
}

.listing-order-details-row .listing-details-form {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.listing-item-actions .listing-order-stock-alert {
    flex: 0 0 var(--listing-icon-btn-w) !important;
    width: var(--listing-icon-btn-w) !important;
    min-width: var(--listing-icon-btn-w) !important;
    max-width: var(--listing-icon-btn-w) !important;
    height: var(--listing-action-row-h) !important;
    min-height: var(--listing-action-row-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0 !important;
    background: #6a9dc4 !important;
    color: #fff;
    font-size: 14px !important;
    line-height: 1 !important;
}

.listing-item-actions .listing-order-stock-alert:hover {
    background: #5a8db4 !important;
    color: #fff;
}

.listing-item-actions .listing-order-stock-alert i.listing-alert-inline-icon,
.listing-item-actions .listing-order-stock-alert i.listing-alert-inline-icon::before {
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1;
}

.listing-order-details-row.is-loading .listing-add-to-cart-btn {
    pointer-events: none;
    opacity: 0.65;
}

/* These use display:flex !important — inline display:none from Blade/jQuery cannot hide them.
   Use .listing-purchase-btn--hidden (display:none !important) from Blade + listing.js. */
.listing-item-actions .listing-buy-now-btn.listing-purchase-btn--hidden,
.listing-item-actions .listing-add-to-cart-btn.listing-purchase-btn--hidden,
.listing-item-actions .listing-order-stock-alert.listing-purchase-btn--hidden {
    display: none !important;
}

.listing-item-actions .listing-buy-now-btn,
.listing-item-actions .listing-add-to-cart-btn {
    flex: 0 0 var(--listing-icon-btn-w);
    width: var(--listing-icon-btn-w);
    min-width: var(--listing-icon-btn-w);
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #fff;
    display: flex !important;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-height: var(--listing-action-row-h);
    height: var(--listing-action-row-h);
    /* Fixed px so theme rules like `.btn i { font-size: 0.85714286em }` don’t drive icon size */
    font-size: 14px !important;
    line-height: 1;
}

/* Icon sizes: theme.css uses ~0.85714286em on .btn i (12/14 of button text) — higher specificity needed to override */
.listing-item-actions .listing-add-to-cart-btn i.listing-add-cart-icon,
.listing-item-actions .listing-add-to-cart-btn i.listing-add-cart-icon::before,
.listing-item-actions .listing-add-to-cart-btn i.listing-add-cart-spinner,
.listing-item-actions .listing-add-to-cart-btn i.listing-add-cart-spinner::before {
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1;
}

.listing-item-actions .listing-buy-now-btn .btn__text i.listing-bolt-icon,
.listing-item-actions .listing-buy-now-btn .btn__text i.listing-bolt-icon::before {
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1;
}

.listing-add-cart-spinner {
    display: none;
}

/* Mint / green / blue — darker than pastel, still muted (not neon) */
.listing-item-actions .listing-buy-now-btn {
    background: #8ec892 !important;
}

.listing-item-actions .listing-buy-now-btn:hover {
    background: #7db882 !important;
    color: #fff;
}

.listing-item-actions .listing-add-to-cart-btn {
    background: #6bab6e !important;
}

.listing-item-actions .listing-add-to-cart-btn:hover {
    background: #5d9b5f !important;
    color: #fff;
}

.listing-details-action {
    flex: 1 1 0%;
    min-width: 0;
    min-height: var(--listing-action-row-h);
    height: var(--listing-action-row-h);
    display: flex;
    flex-direction: column;
    direction: rtl;
    align-self: stretch;
    justify-content: stretch;
    overflow: hidden;
}

.listing-details-mode {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: var(--listing-action-row-h);
    height: var(--listing-action-row-h);
    min-width: 0;
}

.listing-details-split {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    align-items: stretch;
    width: 100%;
    min-height: var(--listing-action-row-h);
    height: var(--listing-action-row-h);
    direction: rtl;
    gap: 0;
}

.listing-details-form--split {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-self: stretch;
    height: 100%;
}

.listing-details-submit--split {
    flex: 1 1 auto;
    width: 100%;
}

.listing-item-actions .btn.btn--primary.listing-alert-inline-btn {
    flex: 0 0 var(--listing-icon-btn-w);
    width: var(--listing-icon-btn-w);
    min-width: var(--listing-icon-btn-w);
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-height: var(--listing-action-row-h);
    height: var(--listing-action-row-h);
    font-size: 17px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    background: #6a9dc4 !important;
    color: #fff;
}

.listing-item-actions .btn.btn--primary.listing-alert-inline-btn:hover {
    background: #5a8db4 !important;
    color: #fff;
}

.listing-alert-inline-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.listing-item-actions .listing-alert-inline-btn i.listing-alert-inline-icon,
.listing-item-actions .listing-alert-inline-btn i.listing-alert-inline-icon::before {
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1;
}

.listing-details-form {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
    min-height: var(--listing-action-row-h);
    height: var(--listing-action-row-h);
}

.listing-item-actions .listing-details-submit {
    margin: 0 !important;
    flex: 1 1 auto;
    width: 100%;
    min-height: var(--listing-action-row-h);
    height: var(--listing-action-row-h);
    align-self: stretch;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #2b2b2b !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 2px 6px !important;
    white-space: normal !important;
    text-align: center !important;
    font-size: clamp(
        var(--listing-details-label-font-min),
        0.62rem + 0.35vw,
        var(--listing-details-label-font-max)
    ) !important;
    line-height: 1.2 !important;
}

.listing-item-actions .listing-details-submit .btn__text {
    font-size: inherit !important;
    line-height: inherit !important;
}

.listing-item-actions .listing-details-submit:hover {
    opacity: 0.92;
    color: #fff;
}

.wrap-rest-items {
    flex-basis: 100% !important;
    height: 0;
}