#znbaq-popups-root,
#znbaq-popups-root *{
    box-sizing:border-box;
}

#znbaq-popups-root{
    direction:rtl;
    position:fixed;
    inset:0;
    z-index:999999;
    font-family:inherit;
}

#znbaq-popups-root[hidden]{
    display:none !important;
}

#znbaq-popups-root .zpop-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.42);
    backdrop-filter:blur(2px);
}

#znbaq-popups-root .zpop-modal{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:min(96vw,1050px);
    max-height:92vh;
    overflow:auto;
    background:#fff;
    border-radius:34px;
    box-shadow:0 20px 60px rgba(0,0,0,.18);
    padding:28px 34px 30px;
    color:#2d2431;
}

#znbaq-popups-root .zpop-close{
    position:absolute;
    top:20px;
    left:20px;
    width:46px;
    height:46px;
    border:0;
    border-radius:50%;
    background:#f2edf3;
    color:#5d5564;
    font-size:34px;
    line-height:1;
    cursor:pointer;
}

#znbaq-popups-root .zpop-main-header,
#znbaq-popups-root .zpop-inner-header{
    text-align:center;
    margin:6px auto 26px;
    max-width:760px;
}

#znbaq-popups-root .zpop-kicker{
    display:block;
    color:#7a368d;
    font-size:18px;
    font-weight:600;
    margin-bottom:8px;
}

#znbaq-popups-root .zpop-main-title,
#znbaq-popups-root .zpop-inner-title{
    margin:0 0 8px;
    color:#2f2436;
    font-size:32px;
    line-height:1.25;
    font-weight:800;
}

#znbaq-popups-root .zpop-main-subtitle,
#znbaq-popups-root .zpop-inner-subtitle{
    margin:0;
    color:#847b87;
    font-size:15px;
    line-height:1.8;
}

#znbaq-popups-root .zpop-guest-card{
    background:#fbf6fb;
    border:2px solid #8b3a96;
    border-radius:28px;
    padding:34px 28px 22px;
    text-align:center;
    margin-bottom:18px;
}

#znbaq-popups-root .zpop-card-title{
    margin:0 0 8px;
    color:#7c2f88;
    font-size:28px;
    font-weight:800;
    line-height:1.3;
}

#znbaq-popups-root .zpop-card-subtitle{
    margin:0 0 20px;
    color:#8a808e;
    font-size:14px;
    line-height:1.8;
}

#znbaq-popups-root .zpop-card-helper{
    margin:14px 0 0;
    color:#938993;
    font-size:13px;
    line-height:1.8;
}

#znbaq-popups-root .zpop-primary,
#znbaq-popups-root .zpop-secondary{
    appearance:none;
    border-radius:18px;
    min-height:62px;
    padding:14px 24px;
    font-size:18px;
    font-weight:800;
    cursor:pointer;
    transition:.15s ease;
}

#znbaq-popups-root .zpop-primary{
    width:100%;
    border:1px solid #8a3797;
    background:#8a3797;
    color:#fff;
}

#znbaq-popups-root .zpop-primary:hover{
    filter:brightness(.96);
}

#znbaq-popups-root .zpop-secondary{
    width:100%;
    border:1.5px solid #8a3797;
    background:#fff;
    color:#7f318d;
}

#znbaq-popups-root .zpop-separator{
    height:1px;
    background:#ece5ee;
    margin:18px 0;
}

#znbaq-popups-root .zpop-login-preview{
    text-align:center;
    max-width:760px;
    margin:0 auto;
}

#znbaq-popups-root .zpop-preview-title{
    margin:0 0 6px;
    color:#43384a;
    font-size:20px;
    font-weight:800;
}

#znbaq-popups-root .zpop-preview-subtitle{
    margin:0 0 16px;
    color:#8a808d;
    font-size:14px;
}

#znbaq-popups-root .zpop-account-view[hidden]{
    display:none !important;
}

#znbaq-popups-root .zpop-back{
    appearance:none;
    border:0;
    background:none;
    color:#8a3797;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    padding:0;
    margin:6px 0 10px auto;
    display:block;
}

#znbaq-popups-root .zpop-form{
    max-width:980px;
    margin:0 auto;
}

#znbaq-popups-root .zpop-field{
    position:relative;
    margin-bottom:18px;
    text-align:right;
}

#znbaq-popups-root .zpop-label{
    display:block;
    margin:0 0 8px;
    color:#4a404e;
    font-size:15px;
    font-weight:700;
}

#znbaq-popups-root .zpop-input{
    width:100%;
    height:54px;
    padding:0 16px;
    border:1px solid #ddd4df;
    border-radius:14px;
    outline:none;
    background:#fff;
    font-size:15px;
    color:#2f2436;
}

#znbaq-popups-root .zpop-input:focus{
    border-color:#8a3797;
    box-shadow:0 0 0 3px rgba(138,55,151,.08);
}

#znbaq-popups-root .zpop-field-password .zpop-input{
    padding-left:110px;
}

#znbaq-popups-root .zpop-password-toggle{
    position:absolute;
    left:8px;
    bottom:8px;
    height:38px;
    min-width:90px;
    padding:0 14px;
    border:1px solid #8a3797;
    background:#fff;
    color:#7e2f8b;
    border-radius:12px;
    cursor:pointer;
    font-size:14px;
    font-weight:700;
}

#znbaq-popups-root .zpop-form-message{
    min-height:24px;
    margin:6px 0 12px;
    font-size:14px;
    line-height:1.6;
    color:#c62828;
    text-align:center;
}

#znbaq-popups-root .zpop-form-message.is-success{
    color:#2e7d32;
}

#znbaq-popups-root .zpop-link{
    appearance:none;
    border:0;
    background:none;
    color:#8a3797;
    font-size:16px;
    font-weight:700;
    text-decoration:none;
    cursor:pointer;
    margin:12px auto 0;
    display:block;
}

#znbaq-popups-root .zpop-cart{
    width:min(92vw,520px);
}

#znbaq-popups-root .zpop-cart-header{
    padding-top:10px;
    margin-bottom:16px;
    border-bottom:1px solid #ece5ee;
}

#znbaq-popups-root .zpop-cart-header h2{
    margin:0 0 14px;
    font-size:26px;
    font-weight:800;
    text-align:right;
}

#znbaq-popups-root .zpop-dev-placeholder{
    border:1px dashed #d8cadb;
    background:#fbf8fb;
    border-radius:18px;
    padding:40px 18px;
    text-align:center;
    color:#7f7483;
}

#znbaq-popups-root .zpop-dev-placeholder strong{
    display:block;
    margin-bottom:8px;
    color:#514559;
    font-size:20px;
}

#znbaq-popups-root .zpop-cart-total{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:18px 0;
    font-size:20px;
    font-weight:700;
}

#znbaq-popups-root .zpop-cart-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

@media (max-width: 767px){
    #znbaq-popups-root .zpop-modal{
        width:min(96vw,96vw);
        border-radius:26px;
        padding:22px 18px 22px;
    }

    #znbaq-popups-root .zpop-close{
        top:14px;
        left:14px;
        width:42px;
        height:42px;
        font-size:30px;
    }

    #znbaq-popups-root .zpop-main-title,
    #znbaq-popups-root .zpop-inner-title{
        font-size:24px;
    }

    #znbaq-popups-root .zpop-card-title{
        font-size:22px;
    }

    #znbaq-popups-root .zpop-primary,
    #znbaq-popups-root .zpop-secondary{
        min-height:56px;
        font-size:17px;
    }

    #znbaq-popups-root .zpop-cart-actions{
        grid-template-columns:1fr;
    }

    #znbaq-popups-root .zpop-password-toggle{
        min-width:78px;
        font-size:13px;
    }
}


/* ==========================================================
   TEST MODE - SHOW ONLY REQUESTED POPUP
========================================================== */

#znbaq-popups-root[data-test-target="account"] {
    display: block !important;
}

#znbaq-popups-root[data-test-target="account"] .zpop-account {
    display: block !important;
}

#znbaq-popups-root[data-test-target="account"] .zpop-cart {
    display: none !important;
}


#znbaq-popups-root[data-test-target="cart"] {
    display: block !important;
}

#znbaq-popups-root[data-test-target="cart"] .zpop-cart {
    display: block !important;
}

#znbaq-popups-root[data-test-target="cart"] .zpop-account {
    display: none !important;
}


/* ==========================================================
   ACCOUNT POPUP - FINAL COMPACT POLISH
========================================================== */

#znbaq-popups-root .zpop-account {
    width: min(94vw, 900px);
    padding: 24px 32px 28px;
    border-radius: 28px;
}

#znbaq-popups-root .zpop-main-header {
    margin: 2px auto 22px;
}

#znbaq-popups-root .zpop-kicker {
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 1.4;
}

#znbaq-popups-root .zpop-main-title {
    margin-bottom: 6px;
    font-size: 30px;
    line-height: 1.35;
}

#znbaq-popups-root .zpop-main-subtitle {
    font-size: 14px;
    line-height: 1.6;
}


/* Guest */

#znbaq-popups-root .zpop-guest-card {
    margin-bottom: 16px;
    padding: 24px 26px 18px;
    border-width: 1.5px;
    border-radius: 22px;
}

#znbaq-popups-root .zpop-card-title {
    margin-bottom: 5px;
    font-size: 24px;
}

#znbaq-popups-root .zpop-card-subtitle {
    margin-bottom: 16px;
    font-size: 13px;
}

#znbaq-popups-root .zpop-guest-card .zpop-primary {
    min-height: 54px;
    border-radius: 13px;
    font-size: 17px;
}

#znbaq-popups-root .zpop-card-helper {
    margin-top: 11px;
    font-size: 12.5px;
}


/* Separator */

#znbaq-popups-root .zpop-separator {
    margin: 15px 0 16px;
}


/* Login preview */

#znbaq-popups-root .zpop-login-preview {
    max-width: 720px;
}

#znbaq-popups-root .zpop-preview-title {
    margin-bottom: 3px;
    font-size: 18px;
}

#znbaq-popups-root .zpop-preview-subtitle {
    margin-bottom: 12px;
    font-size: 13px;
}

#znbaq-popups-root .zpop-login-preview .zpop-secondary {
    min-height: 52px;
    border-radius: 13px;
    font-size: 16px;
}


/* Close */

#znbaq-popups-root .zpop-account .zpop-close {
    top: 18px;
    left: 18px;
    width: 42px;
    height: 42px;
    font-size: 28px;
}


/* Login / Forgot inner screens */

#znbaq-popups-root .zpop-account .zpop-inner-header {
    max-width: 650px;
    margin: 4px auto 22px;
}

#znbaq-popups-root .zpop-account .zpop-inner-title {
    font-size: 27px;
}

#znbaq-popups-root .zpop-account .zpop-inner-subtitle {
    font-size: 14px;
}

#znbaq-popups-root .zpop-account .zpop-form {
    max-width: 700px;
}

#znbaq-popups-root .zpop-account .zpop-input {
    height: 50px;
    border-radius: 12px;
}

#znbaq-popups-root .zpop-account .zpop-primary.zpop-full {
    min-height: 52px;
    border-radius: 13px;
}

#znbaq-popups-root .zpop-account .zpop-back {
    margin-top: 4px;
    font-size: 15px;
}


/* Mobile */

@media (max-width: 767px) {

    #znbaq-popups-root .zpop-account {
        width: calc(100vw - 24px);
        padding: 22px 16px 20px;
        border-radius: 22px;
    }

    #znbaq-popups-root .zpop-main-header {
        padding: 0 30px;
        margin-bottom: 17px;
    }

    #znbaq-popups-root .zpop-kicker {
        font-size: 14px;
    }

    #znbaq-popups-root .zpop-main-title {
        font-size: 24px;
    }

    #znbaq-popups-root .zpop-main-subtitle {
        font-size: 13px;
    }

    #znbaq-popups-root .zpop-guest-card {
        padding: 20px 15px 15px;
        border-radius: 18px;
    }

    #znbaq-popups-root .zpop-card-title {
        font-size: 21px;
    }

    #znbaq-popups-root .zpop-guest-card .zpop-primary,
    #znbaq-popups-root .zpop-login-preview .zpop-secondary {
        min-height: 50px;
        font-size: 16px;
    }

    #znbaq-popups-root .zpop-preview-title {
        font-size: 17px;
    }

    #znbaq-popups-root .zpop-account .zpop-close {
        top: 12px;
        left: 12px;
        width: 38px;
        height: 38px;
        font-size: 25px;
    }
}


/* ==========================================================
   ALL POPUPS - COMPACT + ALWAYS CENTERED
========================================================== */

#znbaq-popups-root {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}


/*
 * Every popup stays exactly in viewport center.
 */
#znbaq-popups-root .zpop-modal {
    position: fixed !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    transform: translate(-50%, -50%) !important;

    margin: 0 !important;

    max-height: calc(100vh - 50px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}


/* Account popup */

#znbaq-popups-root .zpop-account {
    width: min(92vw, 720px) !important;

    padding: 22px 26px 24px !important;

    border-radius: 24px !important;
}


/* Header */

#znbaq-popups-root .zpop-main-header {
    margin: 0 auto 16px !important;
}

#znbaq-popups-root .zpop-kicker {
    margin-bottom: 3px !important;

    font-size: 14px !important;
}

#znbaq-popups-root .zpop-main-title {
    margin-bottom: 4px !important;

    font-size: 25px !important;
}

#znbaq-popups-root .zpop-main-subtitle {
    font-size: 13px !important;
}


/* Guest block */

#znbaq-popups-root .zpop-guest-card {
    padding: 18px 20px 14px !important;

    margin-bottom: 12px !important;

    border-radius: 18px !important;
}

#znbaq-popups-root .zpop-card-title {
    margin-bottom: 3px !important;

    font-size: 21px !important;
}

#znbaq-popups-root .zpop-card-subtitle {
    margin-bottom: 12px !important;

    font-size: 12.5px !important;
}

#znbaq-popups-root .zpop-guest-card .zpop-primary {
    min-height: 48px !important;

    padding: 8px 18px !important;

    border-radius: 11px !important;

    font-size: 16px !important;
}

#znbaq-popups-root .zpop-card-helper {
    margin-top: 8px !important;

    font-size: 12px !important;
}


/* Separator */

#znbaq-popups-root .zpop-separator {
    margin: 11px 0 !important;
}


/* Existing account */

#znbaq-popups-root .zpop-preview-title {
    margin-bottom: 2px !important;

    font-size: 16px !important;
}

#znbaq-popups-root .zpop-preview-subtitle {
    margin-bottom: 9px !important;

    font-size: 12.5px !important;
}

#znbaq-popups-root .zpop-login-preview .zpop-secondary {
    min-height: 46px !important;

    padding: 8px 18px !important;

    border-radius: 11px !important;

    font-size: 15px !important;
}


/* Close */

#znbaq-popups-root .zpop-account .zpop-close,
#znbaq-popups-root .zpop-cart .zpop-close {
    top: 14px !important;
    left: 14px !important;

    width: 38px !important;
    height: 38px !important;

    font-size: 25px !important;
}


/* Login + Forgot */

#znbaq-popups-root .zpop-account .zpop-inner-header {
    margin: 0 auto 17px !important;

    max-width: 580px !important;
}

#znbaq-popups-root .zpop-account .zpop-inner-title {
    font-size: 24px !important;
}

#znbaq-popups-root .zpop-account .zpop-inner-subtitle {
    font-size: 13px !important;
}

#znbaq-popups-root .zpop-account .zpop-form {
    max-width: 580px !important;
}

#znbaq-popups-root .zpop-account .zpop-field {
    margin-bottom: 12px !important;
}

#znbaq-popups-root .zpop-account .zpop-input {
    height: 46px !important;

    border-radius: 10px !important;
}

#znbaq-popups-root .zpop-account .zpop-primary.zpop-full {
    min-height: 47px !important;

    border-radius: 11px !important;

    font-size: 15px !important;
}


/* Mini cart should also remain centered and compact */

#znbaq-popups-root .zpop-cart {
    width: min(92vw, 480px) !important;

    padding: 22px 24px !important;

    border-radius: 24px !important;
}


/* Mobile */

@media (max-width: 767px) {

    #znbaq-popups-root .zpop-modal {
        max-height: calc(100vh - 24px) !important;
    }

    #znbaq-popups-root .zpop-account {
        width: calc(100vw - 24px) !important;

        padding: 20px 15px 18px !important;

        border-radius: 20px !important;
    }

    #znbaq-popups-root .zpop-main-header {
        padding: 0 28px !important;

        margin-bottom: 14px !important;
    }

    #znbaq-popups-root .zpop-main-title {
        font-size: 22px !important;
    }

    #znbaq-popups-root .zpop-guest-card {
        padding: 16px 14px 13px !important;
    }

    #znbaq-popups-root .zpop-card-title {
        font-size: 19px !important;
    }

    #znbaq-popups-root .zpop-cart {
        width: calc(100vw - 24px) !important;
    }
}


/* ==========================================================
   ACCOUNT POPUP - EXTRA COMPACT
========================================================== */

#znbaq-popups-root .zpop-account {
    width: min(92vw, 560px) !important;
    padding: 18px 20px 20px !important;
    border-radius: 20px !important;
}


/* Main heading */

#znbaq-popups-root .zpop-main-header {
    margin: 0 auto 12px !important;
}

#znbaq-popups-root .zpop-kicker {
    margin-bottom: 2px !important;
    font-size: 12px !important;
}

#znbaq-popups-root .zpop-main-title {
    margin: 0 0 3px !important;
    font-size: 21px !important;
    line-height: 1.3 !important;
}

#znbaq-popups-root .zpop-main-subtitle {
    font-size: 11.5px !important;
}


/* Guest card */

#znbaq-popups-root .zpop-guest-card {
    padding: 14px 16px 12px !important;
    margin-bottom: 9px !important;
    border-radius: 15px !important;
}

#znbaq-popups-root .zpop-card-title {
    margin-bottom: 2px !important;
    font-size: 18px !important;
}

#znbaq-popups-root .zpop-card-subtitle {
    margin-bottom: 9px !important;
    font-size: 11px !important;
}

#znbaq-popups-root .zpop-guest-card .zpop-primary {
    min-height: 42px !important;
    padding: 6px 14px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
}

#znbaq-popups-root .zpop-card-helper {
    margin-top: 6px !important;
    font-size: 10.5px !important;
}


/* separator */

#znbaq-popups-root .zpop-separator {
    margin: 8px 0 9px !important;
}


/* login preview */

#znbaq-popups-root .zpop-login-preview {
    max-width: 500px !important;
}

#znbaq-popups-root .zpop-preview-title {
    margin-bottom: 1px !important;
    font-size: 14px !important;
}

#znbaq-popups-root .zpop-preview-subtitle {
    margin-bottom: 7px !important;
    font-size: 11px !important;
}

#znbaq-popups-root .zpop-login-preview .zpop-secondary {
    min-height: 40px !important;
    padding: 6px 12px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
}


/* Close */

#znbaq-popups-root .zpop-account .zpop-close {
    top: 11px !important;
    left: 11px !important;

    width: 32px !important;
    height: 32px !important;

    font-size: 21px !important;
}


/* Login / Forgot screens */

#znbaq-popups-root .zpop-account .zpop-inner-header {
    margin: 0 auto 13px !important;
    max-width: 480px !important;
}

#znbaq-popups-root .zpop-account .zpop-inner-title {
    font-size: 20px !important;
}

#znbaq-popups-root .zpop-account .zpop-inner-subtitle {
    font-size: 11.5px !important;
}

#znbaq-popups-root .zpop-account .zpop-form {
    max-width: 480px !important;
}

#znbaq-popups-root .zpop-account .zpop-field {
    margin-bottom: 9px !important;
}

#znbaq-popups-root .zpop-account .zpop-label {
    margin-bottom: 4px !important;
    font-size: 12px !important;
}

#znbaq-popups-root .zpop-account .zpop-input {
    height: 40px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
}

#znbaq-popups-root .zpop-account .zpop-primary.zpop-full {
    min-height: 41px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
}

#znbaq-popups-root .zpop-account .zpop-link,
#znbaq-popups-root .zpop-account .zpop-back {
    font-size: 12px !important;
}


/* Keep popup exactly centered */

#znbaq-popups-root .zpop-account {
    position: fixed !important;

    top: 50% !important;
    left: 50% !important;

    right: auto !important;
    bottom: auto !important;

    transform: translate(-50%, -50%) !important;

    margin: 0 !important;
}


/* Mobile */

@media (max-width: 767px) {

    #znbaq-popups-root .zpop-account {
        width: calc(100vw - 28px) !important;
        max-width: 520px !important;

        padding: 17px 14px 17px !important;

        border-radius: 18px !important;
    }

    #znbaq-popups-root .zpop-main-title {
        font-size: 20px !important;
    }

    #znbaq-popups-root .zpop-guest-card {
        padding: 13px 12px 11px !important;
    }
}


/* ==========================================================
   ZPOP STRICT HIDDEN FIX
   Hidden always wins inside this module.
   Prevents inactive account/cart/views from being forced
   visible by later display:* !important rules.
   ========================================================== */

#znbaq-popups-root [hidden] {
    display: none !important;
}

/* ===== ZPOP STRICT HIDDEN FIX END ===== */


/* ==========================================================
   ZPOP MINICART PHASE 1
   ========================================================== */

#znbaq-popups-root .zpop-cart {
    width: min(94vw, 560px) !important;
    padding: 20px !important;
}

#znbaq-popups-root .zpop-mini {
    direction: rtl;
}

#znbaq-popups-root .zpop-cart-header {
    padding-left: 42px;
    margin-bottom: 12px;
}

#znbaq-popups-root .zpop-cart-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
}

#znbaq-popups-root .zpop-cart-count {
    margin-top: 4px;
    font-size: 13px;
    opacity: .65;
}

#znbaq-popups-root .zpop-cart-items {
    max-height: 52vh;
    overflow-y: auto;
}

#znbaq-popups-root .zpop-mini-item {
    position: relative;
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
}

#znbaq-popups-root .zpop-mini-item.is-removing {
    opacity: .45;
    pointer-events: none;
}

#znbaq-popups-root .zpop-mini-photo img {
    display: block;
    width: 92px;
    height: 92px;
    object-fit: contain;
    border-radius: 10px;
}

#znbaq-popups-root .zpop-mini-info {
    position: relative;
    min-width: 0;
}

#znbaq-popups-root .zpop-mini-name {
    display: block;
    padding-left: 26px;
    color: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
}

#znbaq-popups-root .zpop-mini-delete {
    position: absolute;
    top: -3px;
    left: 0;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
}

#znbaq-popups-root .zpop-mini-options {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.5;
    opacity: .7;
}

#znbaq-popups-root .zpop-mini-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

#znbaq-popups-root .zpop-mini-price {
    font-weight: 800;
}

#znbaq-popups-root .zpop-mini-qty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    direction: ltr;
}

#znbaq-popups-root .zpop-mini-qty button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

#znbaq-popups-root .zpop-mini-qty span {
    min-width: 20px;
    text-align: center;
    font-weight: 700;
}

#znbaq-popups-root .zpop-mini-stock-error {
    margin-top: 5px;
    font-size: 12px;
    color: #b42318;
}

#znbaq-popups-root .zpop-cart-loading {
    padding: 8px 0;
    text-align: center;
    font-size: 12px;
}

#znbaq-popups-root .zpop-cart-empty {
    padding: 40px 10px;
    text-align: center;
}

#znbaq-popups-root .zpop-cart-footer {
    padding-top: 15px;
}

#znbaq-popups-root .zpop-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 16px;
}

#znbaq-popups-root .zpop-cart-total strong {
    font-size: 20px;
}

#znbaq-popups-root .zpop-cart-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#znbaq-popups-root .zpop-cart-actions .zpop-primary,
#znbaq-popups-root .zpop-cart-actions .zpop-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    text-align: center;
    text-decoration: none;
}

@media (max-width: 767px) {
    #znbaq-popups-root .zpop-cart {
        width: calc(100vw - 20px) !important;
        padding: 16px !important;
    }

    #znbaq-popups-root .zpop-mini-item {
        grid-template-columns: 78px 1fr;
        gap: 10px;
    }

    #znbaq-popups-root .zpop-mini-photo img {
        width: 78px;
        height: 78px;
    }

    #znbaq-popups-root .zpop-cart-actions {
        grid-template-columns: 1fr;
    }
}

/* ===== ZPOP MINICART PHASE 1 END ===== */


/* ==========================================================
   ZPOP MINI CART CLOSE BUTTON FIX
   ========================================================== */

#znbaq-popups-root .zpop-cart > .zpop-close {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #f4eef6 !important;
    box-shadow: none !important;

    line-height: 1 !important;
    z-index: 5 !important;
}

#znbaq-popups-root .zpop-cart > .zpop-close span {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    transform: translateY(-1px);
}

#znbaq-popups-root .zpop-cart > .zpop-close:hover {
    transform: scale(1.06);
}

@media (max-width: 767px) {
    #znbaq-popups-root .zpop-cart > .zpop-close {
        top: 12px !important;
        left: 12px !important;
    }
}

/* ===== ZPOP MINI CART CLOSE BUTTON FIX END ===== */


/* ==========================================================
   ZPOP MINICART UI STOCK FIX V1
   ========================================================== */

/*
 * Header:
 * title stays right, item count goes left.
 */
#znbaq-popups-root .zpop-cart-header {
    position: relative !important;
}

#znbaq-popups-root .zpop-cart-header > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 15px !important;
}

#znbaq-popups-root .zpop-cart-header h2 {
    margin: 0 !important;
    order: 1 !important;
}

#znbaq-popups-root .zpop-cart-count {
    margin: 0 !important;
    order: 2 !important;
    margin-right: auto !important;
    text-align: left !important;
    white-space: nowrap !important;
}


/*
 * Product remove X:
 * right side of the product row.
 */
#znbaq-popups-root .zpop-mini-info {
    padding-right: 27px !important;
    padding-left: 0 !important;
}

#znbaq-popups-root .zpop-mini-name {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#znbaq-popups-root .zpop-mini-delete {
    top: -3px !important;
    right: 0 !important;
    left: auto !important;

    width: 24px !important;
    height: 24px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    font-size: 19px !important;
    line-height: 1 !important;
}


/*
 * Product image:
 * give the available source maximum visual clarity.
 * No blur/filter/scaling effects.
 */
#znbaq-popups-root .zpop-mini-photo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#znbaq-popups-root .zpop-mini-photo img {
    width: 100px !important;
    height: 100px !important;
    max-width: 100% !important;

    object-fit: contain !important;

    image-rendering: auto !important;

    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
}


/*
 * Stock-limit feedback.
 */
#znbaq-popups-root .zpop-mini-stock-message {
    display: block;
    margin-top: 6px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;

    color: #d32f2f;
}

#znbaq-popups-root .zpop-mini-stock-message[hidden] {
    display: none !important;
}


/*
 * Keep remove button and product layout tidy on mobile.
 */
@media (max-width: 767px) {

    #znbaq-popups-root .zpop-mini-photo img {
        width: 86px !important;
        height: 86px !important;
    }

    #znbaq-popups-root .zpop-cart-count {
        font-size: 12px !important;
    }
}

/* ===== ZPOP MINICART UI STOCK FIX V1 END ===== */

/* ===== ZPOP MINICART REMOVE LABEL START ===== */
#znbaq-popups-root .zpop-cart-items button[class*="remove"],
#znbaq-popups-root .zpop-cart-items button[class*="delete"]{
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 0;
    color: #8f43a6;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    float: left;
    clear: both;
    margin: 0 0 8px 0;
}

#znbaq-popups-root .zpop-cart-items button[class*="remove"]:hover,
#znbaq-popups-root .zpop-cart-items button[class*="delete"]:hover{
    color: #7d3493;
    background: transparent;
    border-color: transparent;
}

#znbaq-popups-root .zpop-cart-remove-btn-inner{
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

#znbaq-popups-root .zpop-cart-remove-text{
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

#znbaq-popups-root .zpop-cart-remove-icon{
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
}

#znbaq-popups-root .zpop-cart-remove-icon svg{
    width: 16px;
    height: 16px;
    display: block;
}

#znbaq-popups-root .zpop-cart-items button[class*="remove"] > span[aria-hidden="true"],
#znbaq-popups-root .zpop-cart-items button[class*="delete"] > span[aria-hidden="true"]{
    display: none !important;
}
/* ===== ZPOP MINICART REMOVE LABEL END ===== */


/* ==========================================================
   ZPOP DELETE LEFT FINAL FIX
   ========================================================== */

#znbaq-popups-root .zpop-mini-info {
    padding-right: 0 !important;
    padding-left: 74px !important;
}

#znbaq-popups-root .zpop-mini-delete {
    position: absolute !important;

    top: -2px !important;
    left: 0 !important;
    right: auto !important;

    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;

    float: none !important;

    margin: 0 !important;
    padding: 2px 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#znbaq-popups-root .zpop-mini-delete .zpop-cart-remove-btn-inner {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
}

#znbaq-popups-root .zpop-mini-delete .zpop-cart-remove-text {
    font-size: 13px !important;
}

#znbaq-popups-root .zpop-mini-delete .zpop-cart-remove-icon {
    width: 15px !important;
    height: 15px !important;
}

#znbaq-popups-root .zpop-mini-delete .zpop-cart-remove-icon svg {
    width: 15px !important;
    height: 15px !important;
}

/* ===== ZPOP DELETE LEFT FINAL FIX END ===== */


/* ==========================================================
   ZPOP MINICART DELETE RED + STACKED WITH QTY
   ========================================================== */

#znbaq-popups-root .zpop-mini-item,
#znbaq-popups-root .zpop-minicart-item {
    position: relative !important;
}

/* احجز مساحة يسار العنصر للحذف + الكمية */
#znbaq-popups-root .zpop-mini-info,
#znbaq-popups-root .zpop-minicart-info,
#znbaq-popups-root .zpop-mini-content,
#znbaq-popups-root .zpop-minicart-content {
    padding-left: 118px !important;
    padding-right: 0 !important;
}

/* حذف بالأحمر وعلى اليسار */
#znbaq-popups-root .zpop-mini-delete {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 4px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    color: #d93025 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    z-index: 3 !important;
}

#znbaq-popups-root .zpop-mini-delete *,
#znbaq-popups-root .zpop-mini-delete .zpop-cart-remove-text,
#znbaq-popups-root .zpop-mini-delete .zpop-cart-remove-icon,
#znbaq-popups-root .zpop-mini-delete .zpop-cart-remove-icon svg {
    color: #d93025 !important;
    fill: #d93025 !important;
    stroke: #d93025 !important;
}

#znbaq-popups-root .zpop-mini-delete .zpop-cart-remove-text {
    font-size: 14px !important;
    font-weight: 700 !important;
}

#znbaq-popups-root .zpop-mini-delete .zpop-cart-remove-icon,
#znbaq-popups-root .zpop-mini-delete .zpop-cart-remove-icon svg {
    width: 15px !important;
    height: 15px !important;
}

/* الكمية تحت الحذف */
#znbaq-popups-root .zpop-mini-qty,
#znbaq-popups-root .zpop-mini-qty-wrap,
#znbaq-popups-root .zpop-mini-qty-box,
#znbaq-popups-root .zpop-mini-qty-controls,
#znbaq-popups-root .zpop-qty-controls,
#znbaq-popups-root .zpop-cart-qty {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 44px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    margin: 0 !important;
    z-index: 2 !important;
}

/* لو في wrapper جانبي، خليه عمودي */
#znbaq-popups-root .zpop-mini-side,
#znbaq-popups-root .zpop-mini-left,
#znbaq-popups-root .zpop-mini-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}

/* ===== END FIX ===== */


/* ==========================================================
   ZPOP CART EDIT ICON IN HEADER
   ========================================================== */

#znbaq-popups-root .zpop-cart-title-row {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#znbaq-popups-root .zpop-cart-title-row h2 {
    margin: 0 !important;
}

#znbaq-popups-root .zpop-cart-edit-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 28px !important;
    height: 28px !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 50% !important;
    border: 1px solid #e7d8eb !important;

    background: #fff !important;
    color: #9538a8 !important;

    text-decoration: none !important;
    box-shadow: none !important;

    flex: 0 0 28px !important;
}

#znbaq-popups-root .zpop-cart-edit-icon svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
}

#znbaq-popups-root .zpop-cart-edit-icon:hover {
    background: #f8f1fa !important;
    transform: scale(1.05);
}

/* بعد إزالة زر تعديل العربة، زر إتمام الشراء يأخذ العرض كامل */
#znbaq-popups-root .zpop-cart-actions {
    grid-template-columns: 1fr !important;
}

#znbaq-popups-root .zpop-cart-actions .zpop-primary {
    width: 100% !important;
}

/* ===== END CART EDIT ICON ===== */


/* ==========================================================
   ZPOP MINICART COMPACT CONTROLS V2
   ========================================================== */

/* ----------------------------------------------------------
   EDIT CART ICON:
   icon must appear LEFT of "سلة المشتريات"
   ---------------------------------------------------------- */

#znbaq-popups-root .zpop-cart-title-row {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 7px !important;

    direction: rtl !important;
}

#znbaq-popups-root .zpop-cart-title-row h2 {
    order: 1 !important;
    direction: rtl !important;
}

#znbaq-popups-root .zpop-cart-title-row .zpop-cart-edit-icon {
    order: 2 !important;

    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;

    flex: 0 0 26px !important;

    margin-right: 0 !important;
    margin-left: 0 !important;
}

#znbaq-popups-root .zpop-cart-edit-icon svg {
    width: 14px !important;
    height: 14px !important;
}


/* ----------------------------------------------------------
   LEFT PRODUCT CONTROLS
   Delete + quantity stacked compactly
   ---------------------------------------------------------- */

#znbaq-popups-root .zpop-mini-info {
    padding-left: 92px !important;
    padding-right: 0 !important;
}


/* DELETE */
#znbaq-popups-root .zpop-mini-delete {
    left: 0 !important;
    right: auto !important;
    top: 5px !important;

    width: auto !important;
    min-width: 0 !important;
    height: 22px !important;
    min-height: 22px !important;

    gap: 4px !important;

    padding: 0 !important;
    margin: 0 !important;

    color: #d32f2f !important;
}

#znbaq-popups-root .zpop-mini-delete .zpop-cart-remove-btn-inner {
    gap: 4px !important;
}

#znbaq-popups-root .zpop-mini-delete .zpop-cart-remove-text {
    font-size: 13px !important;
    line-height: 22px !important;
}

#znbaq-popups-root .zpop-mini-delete .zpop-cart-remove-icon,
#znbaq-popups-root .zpop-mini-delete .zpop-cart-remove-icon svg {
    width: 14px !important;
    height: 14px !important;
}


/* ----------------------------------------------------------
   QUANTITY:
   smaller circles + tighter spacing
   ---------------------------------------------------------- */

#znbaq-popups-root .zpop-mini-qty {
    position: absolute !important;

    left: 0 !important;
    right: auto !important;
    top: 38px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 5px !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    direction: ltr !important;
}


/* +/- buttons */
#znbaq-popups-root .zpop-mini-qty button {
    width: 28px !important;
    height: 28px !important;

    min-width: 28px !important;
    min-height: 28px !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 50% !important;

    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 26px !important;
}


/* quantity number */
#znbaq-popups-root .zpop-mini-qty span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 20px !important;
    min-width: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 28px !important;

    text-align: center !important;
}


/* ----------------------------------------------------------
   MOBILE EXTRA COMPACT
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    #znbaq-popups-root .zpop-mini-info {
        padding-left: 84px !important;
    }

    #znbaq-popups-root .zpop-mini-qty {
        gap: 4px !important;
    }

    #znbaq-popups-root .zpop-mini-qty button {
        width: 27px !important;
        height: 27px !important;

        min-width: 27px !important;
        min-height: 27px !important;

        font-size: 16px !important;
        line-height: 25px !important;
    }

    #znbaq-popups-root .zpop-mini-qty span {
        width: 18px !important;
        min-width: 18px !important;

        font-size: 12px !important;
    }
}

/* ===== ZPOP MINICART COMPACT CONTROLS V2 END ===== */


/* ==========================================================
   ZPOP QTY1 TRASH V2
   ========================================================== */

/* ما عاد في منطقة حذف منفصلة */
#znbaq-popups-root .zpop-mini-info {
    padding-left: 0 !important;
}

/* رجع مجموعة الكمية لمكانها الطبيعي */
#znbaq-popups-root .zpop-mini-qty {
    top: auto !important;
    left: auto !important;
    right: auto !important;
    position: static !important;

    display: inline-flex !important;
    align-items: center !important;

    gap: 5px !important;
}

/* سلة المهملات مكان زر الناقص */
#znbaq-popups-root .zpop-mini-qty .zpop-mini-qty-trash {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 1px solid #efc5c2 !important;
    border-radius: 50% !important;

    background: #fff !important;
    color: #d32f2f !important;

    box-shadow: none !important;
}

#znbaq-popups-root .zpop-mini-qty .zpop-mini-qty-trash svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;

    color: #d32f2f !important;
}

#znbaq-popups-root .zpop-mini-qty .zpop-mini-qty-trash:hover {
    background: #fff3f2 !important;
    border-color: #d32f2f !important;
}

/* ===== ZPOP QTY1 TRASH V2 END ===== */


/* ==========================================================
   ZPOP CART HEADER SINGLE LINE ALIGNMENT
   ========================================================== */

#znbaq-popups-root .zpop-cart {
    --zpop-cart-head-h: 36px;
}

/* خلي الهيدر كله على نفس المستوى */
#znbaq-popups-root .zpop-cart-header {
    position: relative !important;

    min-height: var(--zpop-cart-head-h) !important;

    display: flex !important;
    align-items: center !important;

    margin: 0 0 10px 0 !important;
    padding: 0 42px 0 42px !important;
}

/* الـ wrapper الداخلي ياخد العرض كله */
#znbaq-popups-root .zpop-cart-header > div {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 10px !important;

    min-height: var(--zpop-cart-head-h) !important;
}

/* العنوان + ايقونة تعديل السلة */
#znbaq-popups-root .zpop-cart-title-row {
    display: inline-flex !important;
    align-items: center !important;

    gap: 7px !important;

    margin: 0 !important;
    padding: 0 !important;

    min-height: var(--zpop-cart-head-h) !important;
}

#znbaq-popups-root .zpop-cart-title-row h2 {
    margin: 0 !important;
    padding: 0 !important;

    line-height: var(--zpop-cart-head-h) !important;
}

/* عدد المنتجات على نفس الخط */
#znbaq-popups-root .zpop-cart-count {
    display: flex !important;
    align-items: center !important;

    height: var(--zpop-cart-head-h) !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: var(--zpop-cart-head-h) !important;

    white-space: nowrap !important;
}

/* ايقونة تعديل السلة */
#znbaq-popups-root .zpop-cart-edit-icon {
    margin: 0 !important;

    align-self: center !important;

    transform: none !important;
}

/* زر X بنفس منتصف السطر */
#znbaq-popups-root .zpop-cart > .zpop-close {
    top: 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    transform: none !important;
}

@media (max-width: 767px) {

    #znbaq-popups-root .zpop-cart-header {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    #znbaq-popups-root .zpop-cart > .zpop-close {
        top: 12px !important;
    }
}

/* ===== ZPOP CART HEADER SINGLE LINE ALIGNMENT END ===== */


/* ==========================================================
   ZPOP CART HEADER OFFSET CORRECTION
   ========================================================== */

/* لا نزيح عنوان السلة من اليمين */
#znbaq-popups-root .zpop-cart-header {
    padding-right: 0 !important;
    padding-left: 46px !important;

    min-height: 36px !important;

    display: flex !important;
    align-items: center !important;
}

/* العنوان يبقى بأقصى اليمين */
#znbaq-popups-root .zpop-cart-header > div {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    min-height: 36px !important;
}

/* سلة المشتريات + أيقونة تعديل السلة */
#znbaq-popups-root .zpop-cart-title-row {
    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;

    line-height: 1 !important;
}

#znbaq-popups-root .zpop-cart-title-row h2 {
    margin: 0 !important;
    padding: 0 !important;

    line-height: 36px !important;
}

/* عدد المنتجات على اليسار وعلى نفس مستوى X */
#znbaq-popups-root .zpop-cart-count {
    height: 36px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 36px !important;
    white-space: nowrap !important;
}

/* X ثابتة مكانها */
#znbaq-popups-root .zpop-cart > .zpop-close {
    left: 14px !important;
    top: 14px !important;

    right: auto !important;
}

/* ===== ZPOP CART HEADER OFFSET CORRECTION END ===== */


/* ==========================================================
   ZPOP AUTO CART SLIDE FINAL
   Only used when cart opens automatically after Add to Cart.
   Manual cart opening keeps normal modal behavior.
   ========================================================== */

/*
 * Initial automatic state:
 * cart starts lower and transparent.
 */
#znbaq-popups-root.zpop-cart-auto-mode
.zpop-modal[data-zpop-modal="cart"] {
    opacity: 0 !important;
    /*
     * Fully below viewport:
     * top:50% + translateY(50vh + half own height)
     * places the entire modal under the screen.
     */
    transform: translate(-50%, calc(50% + 50vh + 24px)) !important;

    transition:
        transform 760ms cubic-bezier(.20,.78,.22,1),
        opacity 420ms ease !important;

    will-change: transform, opacity;
}

/*
 * Smooth entrance upward.
 */
#znbaq-popups-root.zpop-cart-auto-mode.zpop-cart-auto-visible
.zpop-modal[data-zpop-modal="cart"],
#znbaq-popups-root.zpop-cart-auto-mode
.zpop-modal[data-zpop-modal="cart"].zpop-cart-auto-visible {
    opacity: 1 !important;
    transform: translate(-50%, -50%) translateY(0) !important;
}

/*
 * Smooth exit downward.
 */
#znbaq-popups-root.zpop-cart-auto-leaving
.zpop-modal[data-zpop-modal="cart"],
#znbaq-popups-root
.zpop-modal[data-zpop-modal="cart"].zpop-cart-auto-leaving {
    opacity: 0 !important;
    /*
     * Fully below viewport:
     * top:50% + translateY(50vh + half own height)
     * places the entire modal under the screen.
     */
    transform: translate(-50%, calc(50% + 50vh + 24px)) !important;

    transition:
        transform 650ms cubic-bezier(.45,0,.75,.25),
        opacity 480ms ease !important;

    pointer-events: none !important;
}

/*
 * Fade the ZNBAQ overlay with the auto popup.
 */
#znbaq-popups-root.zpop-cart-auto-mode
.zpop-overlay {
    opacity: 0 !important;
    transition: opacity 430ms ease !important;
}

#znbaq-popups-root.zpop-cart-auto-mode.zpop-cart-auto-visible
.zpop-overlay {
    opacity: 1 !important;
}

#znbaq-popups-root.zpop-cart-auto-leaving
.zpop-overlay {
    opacity: 0 !important;
    transition: opacity 480ms ease !important;
}


/*
 * Accessibility:
 * users requesting reduced motion get instant transitions.
 */
@media (prefers-reduced-motion: reduce) {

    #znbaq-popups-root.zpop-cart-auto-mode
    .zpop-modal[data-zpop-modal="cart"],

    #znbaq-popups-root.zpop-cart-auto-mode
    .zpop-overlay {

        transition-duration: 0.01ms !important;
    }
}

/* ===== ZPOP AUTO CART SLIDE FINAL END ===== */


/* ==========================================================
   ZPOP ACCOUNT FULL SLIDE
   Same motion as Mini Cart:
   below viewport -> center -> below viewport
   ========================================================== */

/* Initial position completely below viewport */
#znbaq-popups-root.zpop-account-motion-mode
.zpop-modal[data-zpop-modal="account"] {

    opacity: 0 !important;

    transform:
        translate(
            -50%,
            calc(50% + 50vh + 24px)
        ) !important;

    transition:
        transform 760ms cubic-bezier(.20,.78,.22,1),
        opacity 420ms ease !important;

    will-change:
        transform,
        opacity;
}


/* Arrive at exact center */
#znbaq-popups-root.zpop-account-motion-mode.zpop-account-motion-visible
.zpop-modal[data-zpop-modal="account"],

#znbaq-popups-root.zpop-account-motion-mode
.zpop-modal[data-zpop-modal="account"].zpop-account-motion-visible {

    opacity: 1 !important;

    transform:
        translate(-50%, -50%) !important;
}


/* Leave fully downward */
#znbaq-popups-root.zpop-account-motion-leaving
.zpop-modal[data-zpop-modal="account"],

#znbaq-popups-root
.zpop-modal[data-zpop-modal="account"].zpop-account-motion-leaving {

    opacity: 0 !important;

    transform:
        translate(
            -50%,
            calc(50% + 50vh + 24px)
        ) !important;

    transition:
        transform 650ms cubic-bezier(.45,0,.75,.25),
        opacity 480ms ease !important;

    pointer-events: none !important;
}


/* Overlay entrance */
#znbaq-popups-root.zpop-account-motion-mode
.zpop-overlay {

    opacity: 0 !important;

    transition:
        opacity 430ms ease !important;
}


#znbaq-popups-root.zpop-account-motion-mode.zpop-account-motion-visible
.zpop-overlay {

    opacity: 1 !important;
}


/* Overlay exit */
#znbaq-popups-root.zpop-account-motion-leaving
.zpop-overlay {

    opacity: 0 !important;

    transition:
        opacity 480ms ease !important;
}


@media (prefers-reduced-motion: reduce) {

    #znbaq-popups-root.zpop-account-motion-mode
    .zpop-modal[data-zpop-modal="account"],

    #znbaq-popups-root.zpop-account-motion-mode
    .zpop-overlay {

        transition-duration:
            0.01ms !important;
    }
}

/* ===== ZPOP ACCOUNT FULL SLIDE END ===== */


/* ==========================================================
   ZPOP EMPTY CART FINAL
   ========================================================== */

#znbaq-popups-root .zpop-cart-empty {
    width: 100% !important;
    padding: 26px 12px 30px !important;
    text-align: center !important;
}

#znbaq-popups-root .zpop-cart-empty-inner {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

#znbaq-popups-root .zpop-cart-empty-icon {
    width: 58px !important;
    height: 58px !important;

    margin: 0 0 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: #faf5fb !important;
    color: #9537a3 !important;
}

#znbaq-popups-root .zpop-cart-empty-icon svg {
    width: 28px !important;
    height: 28px !important;
    display: block !important;
}

#znbaq-popups-root .zpop-cart-empty-title {
    display: block !important;

    margin: 0 0 8px !important;

    font-size: 22px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;

    color: #342a39 !important;
}

#znbaq-popups-root .zpop-cart-empty-text {
    margin: 0 !important;

    max-width: 390px !important;

    font-size: 15px !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;

    color: #817683 !important;
}

/* Footer is completely removed when the cart is empty */
#znbaq-popups-root .zpop-cart-footer[hidden] {
    display: none !important;
}

@media (max-width: 767px) {

    #znbaq-popups-root .zpop-cart-empty {
        padding: 22px 10px 26px !important;
    }

    #znbaq-popups-root .zpop-cart-empty-icon {
        width: 52px !important;
        height: 52px !important;
        margin-bottom: 12px !important;
    }

    #znbaq-popups-root .zpop-cart-empty-icon svg {
        width: 25px !important;
        height: 25px !important;
    }

    #znbaq-popups-root .zpop-cart-empty-title {
        font-size: 20px !important;
    }

    #znbaq-popups-root .zpop-cart-empty-text {
        font-size: 14px !important;
    }
}

/* ===== ZPOP EMPTY CART FINAL END ===== */


/* ==========================================================
   ZPOP EMPTY CART HIDE HEADER
   Empty cart keeps only the popup X at the top.
   ========================================================== */

#znbaq-popups-root .zpop-mini.is-empty .zpop-cart-header {
    display: none !important;
}

/*
 * Give the X its own clean top area now that
 * the cart header is removed.
 */
#znbaq-popups-root .zpop-cart:has(.zpop-mini.is-empty) {
    padding-top: 52px !important;
}

/*
 * Empty message moves slightly upward so the
 * popup stays compact.
 */
#znbaq-popups-root .zpop-mini.is-empty .zpop-cart-empty {
    padding-top: 10px !important;
}

@media (max-width: 767px) {

    #znbaq-popups-root .zpop-cart:has(.zpop-mini.is-empty) {
        padding-top: 48px !important;
    }

    #znbaq-popups-root .zpop-mini.is-empty .zpop-cart-empty {
        padding-top: 6px !important;
    }
}

/* ===== ZPOP EMPTY CART HIDE HEADER END ===== */


/* ==========================================================
   ZPOP ACCOUNT ICON CLEAN MODE

   Account icon:
   keep login + register portion of DEFAULT view.
   Hide only checkout-specific guest content.
   ========================================================== */

/* "كيف بتحب تكمل طلبك؟" */
#znbaq-popups-root
.zpop-account.zpop-account-icon-mode
.zpop-main-header {
    display: none !important;
}

/* "اطلب كزائر" card */
#znbaq-popups-root
.zpop-account.zpop-account-icon-mode
.zpop-guest-card {
    display: none !important;
}

/* separator between guest and login */
#znbaq-popups-root
.zpop-account.zpop-account-icon-mode
.zpop-separator {
    display: none !important;
}

/*
 * Login section becomes the main account content.
 */
#znbaq-popups-root
.zpop-account.zpop-account-icon-mode
.zpop-login-preview {
    margin-top: 0 !important;
}

/*
 * Keep account popup compact when checkout section
 * is not present.
 */
#znbaq-popups-root
.zpop-account.zpop-account-icon-mode
.zpop-account-shell {
    padding-top: 6px !important;
}

/* ===== ZPOP ACCOUNT ICON CLEAN MODE END ===== */

/* ==========================================================
   ZPOP WISHLIST
   ========================================================== */

#znbaq-popups-root .zpop-wishlist {
    width: min(560px, calc(100vw - 28px)) !important;
    max-height: min(720px, calc(100vh - 34px)) !important;
}

#znbaq-popups-root .zpop-wishlist-items {
    max-height: 430px !important;
    overflow-y: auto !important;
}

#znbaq-popups-root .zpop-wishlist-item {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #eee5ef !important;
}

#znbaq-popups-root .zpop-wishlist-image {
    width: 86px !important;
    height: 86px !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    background: #fff !important;
}

#znbaq-popups-root .zpop-wishlist-name {
    display: block !important;
    margin-bottom: 6px !important;
    color: #342a39 !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
}

#znbaq-popups-root .zpop-wishlist-price {
    color: #7a287e !important;
    font-weight: 700 !important;
}

#znbaq-popups-root .zpop-wishlist-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

#znbaq-popups-root .zpop-wishlist-action {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 14px !important;
    border: 1px solid #dcbfe0 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #7a287e !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

#znbaq-popups-root .zpop-wishlist-action.is-cart {
    border-color: #9537a3 !important;
    background: #9537a3 !important;
    color: #fff !important;
}

#znbaq-popups-root .zpop-wishlist-action.is-delete {
    border-color: #efd2d2 !important;
    background: #fffafa !important;
    color: #b33b3b !important;
}

#znbaq-popups-root .zpop-wishlist-action-icon {
    font-size: 18px !important;
    line-height: 1 !important;
}

#znbaq-popups-root .zpop-wishlist-action:only-child {
    grid-column: 1 / -1 !important;
}

#znbaq-popups-root .zpop-wishlist-all {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

@media (max-width: 520px) {
    #znbaq-popups-root .zpop-wishlist-item {
        grid-template-columns: 70px minmax(0, 1fr) !important;
    }

    #znbaq-popups-root .zpop-wishlist-image {
        width: 70px !important;
        height: 70px !important;
    }

}

/* Wishlist uses the same bottom-up entrance and downward exit. */
#znbaq-popups-root.zpop-wishlist-motion-mode
.zpop-modal[data-zpop-modal="wishlist"] {
    opacity: 0 !important;
    transform: translate(-50%, calc(50% + 50vh + 24px)) !important;
    transition:
        transform 760ms cubic-bezier(.20,.78,.22,1),
        opacity 420ms ease !important;
    will-change: transform, opacity;
}

#znbaq-popups-root.zpop-wishlist-motion-mode.zpop-wishlist-motion-visible
.zpop-modal[data-zpop-modal="wishlist"],
#znbaq-popups-root.zpop-wishlist-motion-mode
.zpop-modal[data-zpop-modal="wishlist"].zpop-wishlist-motion-visible {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
}

#znbaq-popups-root.zpop-wishlist-motion-leaving
.zpop-modal[data-zpop-modal="wishlist"],
#znbaq-popups-root
.zpop-modal[data-zpop-modal="wishlist"].zpop-wishlist-motion-leaving {
    opacity: 0 !important;
    transform: translate(-50%, calc(50% + 50vh + 24px)) !important;
    transition:
        transform 650ms cubic-bezier(.45,0,.75,.25),
        opacity 480ms ease !important;
    pointer-events: none !important;
}

#znbaq-popups-root.zpop-wishlist-motion-mode .zpop-overlay {
    opacity: 0 !important;
    transition: opacity 430ms ease !important;
}

#znbaq-popups-root.zpop-wishlist-motion-mode.zpop-wishlist-motion-visible
.zpop-overlay {
    opacity: 1 !important;
}

#znbaq-popups-root.zpop-wishlist-motion-leaving .zpop-overlay {
    opacity: 0 !important;
    transition: opacity 480ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
    #znbaq-popups-root.zpop-wishlist-motion-mode
    .zpop-modal[data-zpop-modal="wishlist"],
    #znbaq-popups-root.zpop-wishlist-motion-mode .zpop-overlay {
        transition-duration: 0.01ms !important;
    }
}

/* ===== ZPOP WISHLIST END ===== */

/* ==========================================================
   ZPOP LOGGED-IN ACCOUNT MENU
   ========================================================== */

#znbaq-popups-root .zpop-account-menu {
    width: min(620px, calc(100vw - 28px)) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#znbaq-popups-root .zpop-account-menu-shell {
    padding: 32px !important;
}

#znbaq-popups-root .zpop-account-menu > .zpop-close {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    z-index: 5 !important;
}

#znbaq-popups-root .zpop-account-menu > .zpop-close span {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    transform: translateY(-1px);
}

#znbaq-popups-root .zpop-account-menu-header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 4px 46px 22px 0 !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #eee5ef !important;
    text-align: right !important;
}

#znbaq-popups-root .zpop-account-menu-avatar {
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 58px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 18px !important;
    background: #f6edf7 !important;
    color: #7a287e !important;
    font-size: 29px !important;
}

#znbaq-popups-root .zpop-account-menu-kicker {
    margin: 0 0 3px !important;
    color: #9537a3 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

#znbaq-popups-root .zpop-account-menu-header h2 {
    margin: 0 0 4px !important;
    color: #342a39 !important;
    font-size: 24px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

#znbaq-popups-root .zpop-account-menu-header p:last-child {
    margin: 0 !important;
    color: #817683 !important;
    font-size: 14px !important;
}

#znbaq-popups-root .zpop-account-menu-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

#znbaq-popups-root .zpop-account-menu-link {
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 13px 15px !important;
    border: 1px solid #eadbeb !important;
    border-radius: 13px !important;
    background: #fff !important;
    color: #4b3b50 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease !important;
}

#znbaq-popups-root .zpop-account-menu-link:hover {
    border-color: #9537a3 !important;
    background: #fbf7fc !important;
    color: #7a287e !important;
    transform: translateY(-1px) !important;
}

#znbaq-popups-root .zpop-account-menu-icon {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: #f6edf7 !important;
    color: #7a287e !important;
    font-size: 17px !important;
}

#znbaq-popups-root .zpop-account-menu-link.is-logout {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
    border-color: #f0d6d6 !important;
    color: #a33b3b !important;
    background: #fffafa !important;
}

/* Logged-in account menu: below viewport -> center -> below viewport. */
#znbaq-popups-root.zpop-account-menu-motion-mode
.zpop-modal[data-zpop-modal="account-menu"] {
    opacity: 0 !important;
    transform: translate(-50%, calc(50% + 50vh + 24px)) !important;
    transition:
        transform 760ms cubic-bezier(.20,.78,.22,1),
        opacity 420ms ease !important;
    will-change: transform, opacity;
}

#znbaq-popups-root.zpop-account-menu-motion-mode.zpop-account-menu-motion-visible
.zpop-modal[data-zpop-modal="account-menu"],
#znbaq-popups-root.zpop-account-menu-motion-mode
.zpop-modal[data-zpop-modal="account-menu"].zpop-account-menu-motion-visible {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
}

#znbaq-popups-root.zpop-account-menu-motion-leaving
.zpop-modal[data-zpop-modal="account-menu"],
#znbaq-popups-root
.zpop-modal[data-zpop-modal="account-menu"].zpop-account-menu-motion-leaving {
    opacity: 0 !important;
    transform: translate(-50%, calc(50% + 50vh + 24px)) !important;
    transition:
        transform 650ms cubic-bezier(.45,0,.75,.25),
        opacity 480ms ease !important;
    pointer-events: none !important;
}

#znbaq-popups-root.zpop-account-menu-motion-mode .zpop-overlay {
    opacity: 0 !important;
    transition: opacity 430ms ease !important;
}

#znbaq-popups-root.zpop-account-menu-motion-mode.zpop-account-menu-motion-visible
.zpop-overlay {
    opacity: 1 !important;
}

#znbaq-popups-root.zpop-account-menu-motion-leaving .zpop-overlay {
    opacity: 0 !important;
    transition: opacity 480ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
    #znbaq-popups-root.zpop-account-menu-motion-mode
    .zpop-modal[data-zpop-modal="account-menu"],
    #znbaq-popups-root.zpop-account-menu-motion-mode .zpop-overlay {
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 560px) {
    #znbaq-popups-root .zpop-account-menu > .zpop-close {
        top: 12px !important;
        left: 12px !important;
    }

    #znbaq-popups-root .zpop-account-menu-shell {
        padding: 24px 18px 20px !important;
    }

    #znbaq-popups-root .zpop-account-menu-header {
        padding: 2px 38px 18px 0 !important;
    }

    #znbaq-popups-root .zpop-account-menu-grid {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    #znbaq-popups-root .zpop-account-menu-link.is-logout {
        grid-column: auto !important;
    }
}

/* ===== ZPOP LOGGED-IN ACCOUNT MENU END ===== */
