﻿:root{
    color-scheme: light;
    --bg:#0f172a;
    --panel:#ffffff;
    --panel-2:#f8fbff;
    --line:#e5eefb;
    --text:#0f172a;
    --muted:#475569;
    --primary:#2563eb;
    --primary-2:#1d4ed8;
    --accent:#f59e0b;
    --success:#059669;
    --shadow:0 18px 48px rgba(15, 23, 42, 0.12);
}

*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI, Arial, sans-serif;}

html{scroll-behavior:smooth;}

body{
    background:radial-gradient(circle at top, #eef5ff 0%, #f8fafc 38%, #eef2ff 100%);
    color:var(--text);
    line-height:1.5;
}

::selection{background:rgba(37,99,235,0.16);}

a{
    text-decoration:none;
    color:inherit;
}

button{
    border:0;
    cursor:pointer;
}

input,
select,
textarea,
button{
    font:inherit;
}

.hidden{
    display:none!important;
}

.localized-file-picker{display:flex;min-height:52px;align-items:center;gap:12px;padding:8px 14px;border:1px solid #cddbf2;border-radius:14px;background:#fff}
.localized-file-picker input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.localized-file-button{flex:0 0 auto;margin:0;padding:8px 14px;border:1px solid #aebbd0;border-radius:9px;background:#f3f6fb;color:#111827;font-weight:700;cursor:pointer}
.localized-file-button:hover{border-color:#2563eb;color:#1d4ed8}
.localized-file-name{min-width:0;overflow:hidden;color:#526077;text-overflow:ellipsis;white-space:nowrap}

/* HEADER */

.header{
    background:#ffffff;
    position:sticky;
    top:0;
    z-index:20;
    box-shadow:0 8px 28px #00000012;
}

.top{
    max-width:1200px;
    margin:auto;
    padding:12px 14px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    align-items:center;
}

.brand{
    display:flex;
    align-items:center;
    justify-content:center;
}

.logo{
    width:190px;
    height:auto;
    object-fit:contain;
    display:block;
}

.langBtn{
    background:transparent;
    border:1px solid #e5e7eb;
    padding:8px 10px;
    border-radius:12px;
    cursor:pointer;
    font-size:18px;
}

/* modal base used by login and language */
.modal{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.4);align-items:center;justify-content:center;z-index:60}
.modal.show{display:flex}
.modal .box{background:#fff;padding:18px;border-radius:14px;max-width:480px;width:100%;box-shadow:0 12px 40px #00000022}
.modal .close{position:absolute;right:18px;top:18px;background:transparent;border:0;font-size:20px}

/* SEARCH */

.search{
    flex:1;
    display:flex;
    background:white;
    border-radius:18px;
    overflow:hidden;
    border:1px solid #e5e7eb;
    box-shadow:0 6px 18px #0000000a;
}

.search input{
    flex:1;
    border:0;
    padding:14px 16px;
    background:white;
}

.search input:focus{
    outline:none;
}

.search button{
    background:linear-gradient(135deg,#1e5fff,#006edc);
    color:white;
    padding:0 22px;
    font-weight:900;
    transition:.2s;
}

.search button:hover{
    background:linear-gradient(135deg,#004fc4,#1e5fff);
}

/* ACTIONS */

.actions{
    display:flex;
    gap:8px;
    align-items:center;
}

.actions a,
.actions button,
.actions select,
.nav a{
    padding:11px 13px;
    border-radius:14px;
    background:transparent;
    font-weight:900;
    transition:.2s;
}

.actions a:hover,
.actions button:hover,
.nav a:hover{
    background:#eef4ff;
    color:#1e5fff;
}

.actions select{
    border:1px solid #e5e7eb;
}

/* NAV */

.nav{
    max-width:1200px;
    margin:auto;
    padding:0 14px 14px;
    display:flex;
    gap:10px;
    overflow:auto;
}

/* BUTTONS */

.primary,
.secondary,
.success,
.danger{
    padding:13px 18px;
    border-radius:16px;
    font-weight:900;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    transition:.2s;
}

.primary{
    background:linear-gradient(135deg,#1e5fff,#006edc);
    color:white;
    box-shadow:0 8px 18px #1e5fff33;
}

.primary:hover{
    background:linear-gradient(135deg,#004fc4,#1e5fff);
    transform:translateY(-1px);
}

.secondary{
    background:white;
    color:#111827;
    border:1px solid #e5e7eb;
}

.secondary:hover{
    background:#f8fafc;
    color:#1e5fff;
    border-color:#1e5fff;
}

.success{
    background:linear-gradient(135deg,#ff7800,#ff9a1f);
    color:white;
    box-shadow:0 8px 18px #ff780033;
}

.success:hover{
    background:linear-gradient(135deg,#e96800,#ff7800);
}

.danger{
    background:#ef4444;
    color:white;
}

.danger:hover{
    background:#dc2626;
}

.cartBtn{
    background:linear-gradient(135deg,#1e5fff,#006edc)!important;
    color:white!important;
}

.full{
    width:100%;
    margin-top:10px;
}

.mt{
    margin-top:16px;
}

/* CONTAINER */

.container{
    max-width:1200px;
    margin:auto;
    padding:32px 16px;
}

/* HERO */

.hero{
    min-height:420px;
    background:
        linear-gradient(115deg, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0.72) 45%, rgba(30, 64, 175, 0.65) 100%),
        url('https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?q=80&w=1600&auto=format&fit=crop');
    background-size:cover;
    background-position:center;
    color:white;
    display:flex;
    align-items:center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05);
}

.hero .hero-card {
    backdrop-filter: blur(10px);
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 28px;
    box-shadow: var(--shadow);
}

.hero .hero-card{
    max-width:760px;
    margin-left:7%;
    padding:28px;
    background:rgba(15, 23, 42, 0.42);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:28px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(10px);
}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;}

.hero h1{
    font-size:clamp(40px,6vw,72px);
    line-height:.95;
    letter-spacing:-2px;
}

.hero p{
    font-size:19px;
    margin:18px 0;
    line-height:1.5;
}

/* TRUST BAR */

.trust-bar{
    max-width:1200px;
    margin:20px auto;
    padding:16px;
    background:white;
    border-radius:20px;
    box-shadow:0 10px 28px #0000000d;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    text-align:center;
    font-weight:900;
}

/* PAGE */

.pagehead,
.panel,
.product,
.card,
.notice,
.order,
.message,
.stat,
.profile,
.footer,
.drawer,
.modal .box{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:var(--shadow);
}

.pagehead{
    padding:30px;
    margin-bottom:24px;
}

.pagehead h1{
    font-size:40px;
}

.pagehead p{
    color:#64748b;
    margin-top:8px;
}

/* LAYOUT */

.layout{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:22px;
}

.panel{
    padding:24px;
}

/* FORMS */

label{
    display:block;
    margin-top:12px;
    font-weight:900;
}

input,
select,
textarea{
    width:100%;
    padding:13px 14px;
    margin-top:7px;
    border:1px solid #e5e7eb;
    border-radius:15px;
    background:white;
}

input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:#1e5fff;
    box-shadow:0 0 0 4px #1e5fff18;
}

textarea{
    min-height:100px;
}

/* PRODUCTS */

.products{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    grid-auto-rows: 1fr; /* make all grid rows equal height so cards align */
}

.product{
    overflow:hidden;
    transition:.25s;
    display:flex;
    flex-direction:column;
    height:100%; /* ensure product fills the grid cell height */
}

.product:hover,
.card:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 40px rgba(15, 23, 42, 0.15);
}

.product img{
    width:100%;
    height:220px;
    object-fit:cover;
    background:#f1f5f9;
    flex-shrink:0;
}

/* Product detail carousel and thumbnails */
.product-media {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.carousel {
    position:relative;
    width:100%;
    min-height:320px;
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.carousel .slides{
    width:100%;
    height:100%;
    position:relative;
}

.carousel .slide{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    object-fit:contain; /* preserve aspect, avoid stretching/cropping */
    display:none;
    background:#fff;
}

.carousel .prev,
.carousel .next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.05);
    border-radius:50%;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#111;
    border:1px solid rgba(0,0,0,0.05);
}

.carousel .prev{ left:12px; }
.carousel .next{ right:12px; }

.thumbs{
    display:flex;
    gap:8px;
    align-items:center;
}

.thumbs .thumb{
    width:72px;
    height:72px;
    object-fit:cover;
    border-radius:8px;
    border:2px solid transparent;
    cursor:pointer;
}

.thumbs .thumb.active{
    border-color:#ff7800;
}

/* Seller/manage thumbnails */
.manage.card img{
    width:140px;
    height:100px;
    object-fit:cover;
    border-radius:12px;
}

/* Ensure large product images don't overflow the viewport */
.two .panel img,
.product-media .carousel .slide{
    max-width:100%;
    max-height:70vh;
}

.body{
    padding:18px;
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
}

.body small{
    color:#64748b;
    font-weight:900;
}

/* Limit title and description lines to avoid card height jumps */
.body h3{
    margin:8px 0 6px 0;
    font-size:1.05rem;
    line-height:1.2;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.body p{
    color:#374151;
    margin-top:6px;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}

.price{
    font-size:30px;
    font-weight:900;
    margin-top:10px;
    white-space:nowrap; /* avoid price wrapping which changes card height */
}

.rating{
    color:#ff7800;
}

/* GRID */

.row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:auto; /* push actions to bottom of card */
}

/* Prevent action buttons from wrapping and changing card height */
.row button{
    white-space:nowrap;
}

/* Make product card action buttons slightly smaller (about 10%) */
.product .row button,
.product .row .primary,
.product .row .secondary{
    padding: 12px 16px; /* ~10% smaller than 13px 18px */
    font-size: 0.95rem;
}


.two{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.three{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

/* PROFILE */

.profile{
    padding:24px;
    display:flex;
    gap:18px;
    align-items:center;
    justify-content:space-between;
}

.avatar{
    width:92px;
    height:92px;
    background:linear-gradient(135deg,#1e5fff,#ff7800);
    color:white;
    border-radius:24px;
    display:grid;
    place-items:center;
    font-size:46px;
    overflow:hidden;
}

.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.avatar-fallback{
    position:relative;
    width:100%;
    height:100%;
    display:block;
}

.avatar-fallback::before{
    content:"";
    position:absolute;
    left:50%;
    top:25%;
    width:30px;
    height:30px;
    border-radius:50%;
    background:rgba(255,255,255,.94);
    transform:translateX(-50%);
    box-shadow:0 5px 14px rgba(17,24,39,.16);
}

.avatar-fallback::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:19%;
    width:58px;
    height:36px;
    border-radius:999px 999px 24px 24px;
    background:rgba(255,255,255,.94);
    transform:translateX(-50%);
    box-shadow:0 8px 18px rgba(17,24,39,.16);
}

/* PROFILE PHOTO BUTTONS */

.profile-photo-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:12px;
}

.profile-photo-actions button{
    width:160px;
    padding:10px 14px;
    font-size:14px;
    border-radius:12px;
}

/* MANAGE */

.manage{
    display:grid;
    grid-template-columns:140px 1fr auto;
    gap:22px;
    align-items:center;
    padding:16px;
}

.manage img{
    width:140px;
    height:100px;
    object-fit:cover;
    border-radius:16px;
}

/* DRAWER */

/* DRAWER */

.drawer{
    position:fixed;
    right:-460px;
    top:0;
    width:min(440px,100%);
    height:100vh;
    background:#f8fafc;
    z-index:12000;
    box-shadow:-24px 0 70px rgba(15,23,42,.28);
    transition:.3s ease;
    display:flex;
    flex-direction:column;
    border-left:1px solid #e5e7eb;
}

.drawer.open{
    right:0;
}

.drawer-head{
    padding:22px;
    border-bottom:1px solid #e5e7eb;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:white;
}

.drawer-head h2{
    font-size:26px;
    letter-spacing:-.5px;
}

.drawer-head button{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#f1f5f9;
    color:#111827;
    font-size:18px;
    font-weight:900;
}

.drawer-head button:hover{
    background:#fee2e2;
    color:#dc2626;
}

/* CART */

#cartItems{
    padding:18px;
    overflow-y:auto;
    flex:1;
}

.cart-item{
    display:grid;
    grid-template-columns:86px 1fr;
    gap:14px;
    padding:14px;
    margin-bottom:14px;
    border:1px solid #e5e7eb;
    border-radius:22px;
    background:white;
    box-shadow:0 8px 22px rgba(15,23,42,.06);
}

.cart-item img{
    width:86px;
    height:86px;
    object-fit:cover;
    border-radius:18px;
    background:#f1f5f9;
}

.cart-info{
    min-width:0;
}

.cart-info b,
.cart-info strong{
    display:block;
    font-size:16px;
    color:#111827;
    margin-bottom:4px;
}

.cart-info p,
.cart-info small{
    color:#475569;
    font-weight:700;
    margin-top:4px;
}

.qty{
    display:flex;
    align-items:center;
    gap:10px;
    margin:12px 0;
}

.qty button{
    width:34px;
    height:34px;
    background:#eef4ff;
    color:#1e5fff;
    border-radius:12px;
    font-weight:900;
    font-size:18px;
    display:grid;
    place-items:center;
}

.qty button:hover{
    background:#1e5fff;
    color:white;
}

.qty span,
.qty b{
    min-width:24px;
    text-align:center;
    font-weight:900;
}

.cart-info a,
.cart-info button,
.cart-info .remove{
    color:#ef4444;
    background:transparent;
    font-weight:900;
    padding:0;
    margin-top:8px;
    display:inline-flex;
}

.cart-info a:hover,
.cart-info button:hover,
.cart-info .remove:hover{
    text-decoration:underline;
}

.summary{
    margin-top:auto;
    padding:20px;
    border-top:1px solid #e5e7eb;
    background:white;
    box-shadow:0 -10px 30px rgba(15,23,42,.08);
}

.summary div{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
    color:#475569;
    font-weight:800;
}

.summary div:last-of-type{
    border-top:1px dashed #cbd5e1;
    padding-top:14px;
    margin-top:12px;
    font-size:20px;
    color:#111827;
}

.summary b{
    color:#111827;
}

#ship{
    color:#16a34a!important;
    background:#ecfdf5;
    padding:5px 10px;
    border-radius:999px;
    font-size:13px;
}

.summary .success{
    height:58px;
    border-radius:18px;
    font-size:18px;
    margin-top:16px;
}

/* MODAL */

.modal{
    position:fixed;
    inset:0;
    background:#0009;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:100;
    padding:18px;
}

.modal.show{
    display:flex;
}

.box{
    background:white;
    border-radius:26px;
    padding:28px;
    width:min(620px,100%);
    max-height:92vh;
    overflow:auto;
    position:relative;
}

.close{
    position:absolute;
    right:14px;
    top:14px;
    border-radius:99px;
    background:#f1f5f9;
    width:36px;
    height:36px;
}

.tabs{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:16px;
}

.tabs button{
    background:white;
    border:1px solid #e5e7eb;
    border-radius:999px;
    padding:10px 16px;
    font-weight:900;
}

.tabs button.active{
    background:linear-gradient(135deg,#1e5fff,#006edc);
    color:white;
}

/* TEXT */

.err{
    color:#b91c1c;
    font-weight:900;
    margin-top:10px;
}

.ok{
    color:#047857;
    font-weight:900;
    margin-top:10px;
}

/* TOAST */

.toast{
    position:fixed;
    top:16px;
    left:50%;
    transform:translateX(-50%);
    background:#111827;
    color:white;
    padding:12px 18px;
    border-radius:16px;
    display:none;
    z-index:200;
}

.toast.show{
    display:block;
}

/* FOOTER */

.footer{
    background:#159693;
    color:white;
    margin-top:40px;
    padding:35px 7%;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:24px;
}

.footer a,
.footer p{
    color:#eafafa;
    display:block;
    margin-top:8px;
}

/* RESPONSIVE */

@media(max-width:1024px){

    .top{
        flex-wrap:wrap;
    }

    .search{
        order:3;
        flex-basis:100%;
    }

    .layout,
    .two,
    .three{
        grid-template-columns:1fr;
    }

    .products{
        grid-template-columns:repeat(2,1fr);
    }

    .trust-bar{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){

    .products,
    .stats,
    .footer,
    .trust-bar{
        grid-template-columns:1fr;
    }

    .hero h1{
        font-size:38px;
    }

    .row,
    .manage{
        grid-template-columns:1fr;
    }

    .drawer{
        width:100%;
    }

    .logo{
        width:140px;
    }

    .profile{
        flex-direction:column;
        align-items:flex-start;
    }

    .profile-photo-actions button{
        width:100%;
    }
}

/* ===== EZANDOO PROFILE POLISH OVERRIDES ===== */
:root{
    --ez-blue:#1e5fff;
    --ez-blue-dark:#006edc;
    --ez-orange:#ff7800;
    --ez-orange-light:#ff9a1f;
    --ez-teal:#159693;
    --ez-muted:#64748b;
    --ez-border:#e5e7eb;
    --ez-card-shadow:0 10px 28px #0000000d;
}

.profile-page{
    max-width:1120px;
}

.profile-hero-card{
    background:radial-gradient(circle at top left,#eef4ff,#ffffff 42%),#fff;
}

.eyebrow{
    display:inline-flex;
    color:var(--ez-blue);
    background:#eef4ff;
    padding:8px 12px;
    border-radius:999px;
    font-weight:900;
    font-size:13px;
    margin-bottom:12px;
}

.profile-card{
    padding:28px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:26px;
    align-items:center;
    justify-content:initial;
}

.profile-left{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.avatar{
    width:104px;
    height:104px;
    background:linear-gradient(135deg,var(--ez-blue),var(--ez-orange));
    color:white;
    border-radius:28px;
    display:grid;
    place-items:center;
    font-size:46px;
    overflow:hidden;
    box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.profile-photo{
    width:100%;
    height:100%;
    object-fit:cover;
    display:none;
}

.avatar-fallback{
    position:relative;
    width:100%;
    height:100%;
    display:block;
}

.avatar-fallback::before{
    content:"";
    position:absolute;
    left:50%;
    top:24%;
    width:32px;
    height:32px;
    border-radius:50%;
    background:rgba(255,255,255,.94);
    transform:translateX(-50%);
    box-shadow:0 5px 14px rgba(17,24,39,.16);
}

.avatar-fallback::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:18%;
    width:62px;
    height:38px;
    border-radius:999px 999px 24px 24px;
    background:rgba(255,255,255,.94);
    transform:translateX(-50%);
    box-shadow:0 8px 18px rgba(17,24,39,.16);
}

.profile-photo-actions{
    display:flex;
    gap:10px;
    margin-top:14px;
}

.profile-photo-actions button{
    min-width:118px;
    padding:9px 13px;
    font-size:14px;
    border-radius:12px;
}

.compact{
    padding:9px 14px;
    font-size:14px;
    border-radius:12px;
}

.profile-main h1{
    font-size:34px;
    line-height:1;
    letter-spacing:-1px;
}

.profile-main p{
    color:var(--ez-muted);
    margin-top:8px;
    font-weight:700;
}

.profile-label{
    display:block;
    color:var(--ez-blue);
    font-size:13px;
    font-weight:900;
    margin-bottom:8px;
    text-transform:uppercase;
}

.profile-meta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:14px;
}

.profile-meta span{
    background:#eef4ff;
    color:var(--ez-blue);
    padding:8px 10px;
    border-radius:999px;
    font-weight:900;
    font-size:13px;
}

.profile-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

.panel-subtitle{
    margin-top:6px;
    margin-bottom:12px;
    color:var(--ez-muted);
}

.danger-zone{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border:1px solid #fecaca;
    background:#fffafa;
}

.danger-zone p{
    color:#ff0000;
}

.primary{
    background:linear-gradient(135deg,var(--ez-blue),var(--ez-blue-dark));
    color:#fff;
    box-shadow:0 8px 18px #1e5fff33;
}

.success{
    background:linear-gradient(135deg,var(--ez-orange),var(--ez-orange-light));
    color:#fff;
    box-shadow:0 8px 18px #ff780033;
}

.footer{
    background:var(--ez-teal);
}

@media(max-width:1024px){
    .profile-card{
        grid-template-columns:1fr;
        text-align:center;
    }

    .profile-actions,
    .profile-meta{
        justify-content:center;
    }
}

@media(max-width:600px){
    .profile-photo-actions{
        flex-direction:column;
        width:100%;
    }

    .profile-photo-actions button,
    .danger-zone .danger{
        width:100%;
    }

    .danger-zone{
        flex-direction:column;
        align-items:flex-start;
    }
}
.disabled-input{
    background:#f3f4f6!important;
    color:#6b7280!important;
    cursor:not-allowed;
    border:1px solid #d1d5db!important;
    opacity:1;
}
.verified-badge{
    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    )!important;

    color:white!important;

    font-weight:900;

    box-shadow:0 6px 18px #22c55e33;
}
/* EZANDOO BRAND STYLE */

:root{
    --ez-blue:#1e5fff;
    --ez-orange:#ff7800;
    --ez-dark:#159693;
    --ez-black:#111827;
    --ez-light:#f5f7fb;
}

/* Premium header */

.header{
    background:#ffffff;
    border-bottom:4px solid transparent;
    border-image:linear-gradient(90deg,var(--ez-blue),var(--ez-orange)) 1;
}

/* SEARCH */

.search{
    border:2px solid #eef2ff;
    box-shadow:0 10px 25px #1e5fff12;
}

.search button{
    background:linear-gradient(135deg,var(--ez-blue),#006edc);
}

.search button:hover{
    background:linear-gradient(135deg,#004fc4,var(--ez-blue));
}

.primary{
    background:linear-gradient(135deg,var(--ez-blue),#006edc)!important;
    color:white!important;
    box-shadow:0 10px 22px #1e5fff33;
}

.success,
.hero .primary{
    background:linear-gradient(135deg,var(--ez-orange),#ff9a1f)!important;
    color:white!important;
    box-shadow:0 10px 22px #ff780033;
}

.secondary{
    border:2px solid var(--ez-orange);
    color:var(--ez-black);
}

.secondary:hover{
    background:var(--ez-orange);
    color:white;
}

/* HERO CON ESTILO EZANDOO */

.hero{
    background:
        linear-gradient(90deg,#111827ee,#1e5fff55,#ff780033),
        url('https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?q=80&w=1600&auto=format&fit=crop');

    background-size:cover;
    background-position:center;
}

.hero h1{
    text-shadow:0 8px 25px #0008;
}

.hero p{
    max-width:620px;
}

/* CARDS */

.pagehead,
.panel,
.product,
.card,
.profile,
.order,
.notice,
.message{
    border:1px solid #eef2ff;
    box-shadow:0 14px 35px #1e5fff12;
}

/* PRODUCTOS */

.product:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px #1e5fff25;
}

.price{
    color:var(--ez-blue);
}

.rating{
    color:var(--ez-orange);
}

/* FILTROS */

.layout .panel:first-child{
    border-top:5px solid var(--ez-orange);
}

/* TITULOS */

.pagehead h1,
.panel h2,
.body h3{
    color:var(--ez-black);
}

.pagehead h1::after,
.panel h2::after{
    content:"";
    display:block;
    width:60px;
    height:4px;
    margin-top:8px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--ez-blue),var(--ez-orange));
}

/* FOOTER */

.footer{
    background:linear-gradient(135deg,#111827,#159693);
}

/* BADGES */

.verified-badge{
    background:linear-gradient(135deg,#16a34a,#22c55e)!important;
    color:white!important;
}

.profile-meta span{
    background:#eef4ff;
    color:var(--ez-blue);
}

/* INPUTS */

input:focus,
select:focus,
textarea:focus{
    border-color:var(--ez-blue);
    box-shadow:0 0 0 4px #1e5fff20;
}

/* NAV */

.nav a:hover,
.actions a:hover,
.actions button:hover{
    background:#eef4ff;
    color:var(--ez-blue);
}

/* MOBILE */

@media(max-width:600px){
    .hero{
        background:
            linear-gradient(180deg,#111827ee,#1e5fff55,#ff780033),
            url('https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?q=80&w=1600&auto=format&fit=crop');
        background-size:cover;
        background-position:center;
    }
}


/* CART BUTTON FIX */

.cartBtn{
    position:relative;
    background:transparent!important;
    border:none;
    padding:0;
    width:auto;
    height:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:none!important;
}

.cartBtn:hover{
    transform:scale(1.05);
    background:transparent!important;
    box-shadow:none!important;
}

.cartBtn img{
    width:48px;
    height:48px;
    object-fit:contain;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.15));
}

.cartBtn span{
    position:absolute;
    top:-6px;
    right:-8px;
    min-width:22px;
    height:22px;
    padding:0 6px;
    border-radius:999px;
    background:#ff7800;
    color:white;
    font-size:12px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ORDERS PAGE */

.order{
    padding:22px;
    margin-bottom:22px;
}

.order.order-focus-target{
    border-color:#1e5fff;
}

.order.order-focus-active{
    animation:orderFocusPulse 1.4s ease-in-out 3;
    box-shadow:0 22px 55px rgba(30,95,255,.22), 0 0 0 4px rgba(255,120,0,.18);
}

@keyframes orderFocusPulse{
    0%, 100%{
        transform:translateY(0);
        box-shadow:0 14px 35px #1e5fff12, 0 0 0 0 rgba(255,120,0,0);
    }
    50%{
        transform:translateY(-2px);
        box-shadow:0 22px 55px rgba(30,95,255,.22), 0 0 0 5px rgba(255,120,0,.22);
    }
}

.order-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:18px;
}

.order-head h2{
    font-size:22px;
    margin-bottom:4px;
}

.muted{
    color:#64748b;
    font-size:14px;
}

.order-grid{
    display:grid;
    grid-template-columns:1.4fr .9fr;
    gap:18px;
}

.order-box{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:16px;
}

.order-product{
    display:grid;
    grid-template-columns:90px 1fr;
    gap:14px;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #e5e7eb;
}

.order-product:last-child{
    border-bottom:0;
}

.order-product img{
    width:90px;
    height:90px;
    object-fit:cover;
    border-radius:14px;
    background:#f1f5f9;
}

.order-row,
.order-total{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:10px;
}

.order-total{
    padding-top:12px;
    border-top:1px solid #e5e7eb;
    font-size:18px;
}

.order-status{
    padding:8px 12px;
    border-radius:999px;
    font-weight:900;
    font-size:13px;
    background:#eef4ff;
    color:#1e5fff;
}

.order-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
}

.timeline{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.timeline span{
    padding:8px 12px;
    border-radius:999px;
    background:#e5e7eb;
    color:#64748b;
    font-weight:900;
    font-size:13px;
}

.timeline span.active{
    background:#eef4ff;
    color:#1e5fff;
}

.seller-box{
    display:flex;
    gap:12px;
    align-items:center;
}

.seller-avatar{
    width:42px;
    height:42px;
    border-radius:14px;
    background:linear-gradient(135deg,#1e5fff,#ff7800);
    color:white;
    display:grid;
    place-items:center;
    font-weight:900;
}

@media(max-width:700px){
    .order-grid{
        grid-template-columns:1fr;
    }

    .order-product{
        grid-template-columns:70px 1fr;
    }

    .order-product img{
        width:70px;
        height:70px;
    }

    .order-head{
        flex-direction:column;
    }
}

.copy-order-btn{
    margin-left:8px;
    padding:5px 10px;
    border-radius:10px;
    background:#eef4ff;
    color:#1e5fff;
    font-size:12px;
    font-weight:900;
}

.copy-order-btn:hover{
    background:#1e5fff;
    color:white;
}


/* Notification button */
.notifBtn {

    /* Allows badge positioning */
    position: relative;

    /* Removes default link layout problems */
    display: flex !important;

    /* Centers image */
    align-items: center;
    justify-content: center;

    /* Removes large white box */
    background: transparent;
    border: none;
    box-shadow: none;

    /* Removes extra spacing */
    padding: 0;
    margin: 0;

    /* Prevents underline */
    text-decoration: none;
}

/* Notification icon image */
.notifBtn img {

    /* Makes icon larger */
    width: 52px;
    height: 52px;

    /* Keeps proportions */
    object-fit: contain;

    /* Removes inline spacing */
    display: block;
}

/* Notification badge */
.notifBtn #notifCount {

    /* Positioned relative to icon */
    position: absolute;

    /* Places badge on top-right */
    top: -4px;
    right: -2px;

    /* Badge size */
    min-width: 22px;
    height: 22px;

    /* Centers number */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Rounded badge */
    border-radius: 999px;

    /* Orange background */
    background: #ff7a00;

    /* White number */
    color: #fff;

    /* Bold text */
    font-size: 12px;
    font-weight: 800;

    /* Small padding */
    padding: 0 6px;
}

/* PRODUCT DETAIL RESPONSIVE LAYOUT */

.product-detail-layout{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
    gap:22px;
    align-items:start;
}

.product-detail-layout .product-media{
    background:white;
    border-radius:24px;
    box-shadow:0 14px 35px #1e5fff12;
    border:1px solid #eef2ff;
    overflow:hidden;
}

.product-detail-layout .carousel{
    min-height:420px;
    height:clamp(360px,48vw,520px);
    border-radius:24px;
    background:white;
}

.product-detail-layout .carousel .slide{
    object-fit:contain;
    padding:18px;
}

.product-info-panel{
    border-radius:24px;
    padding:24px;
}

.product-info-panel h1{
    font-size:clamp(28px,3vw,38px);
    line-height:1.05;
}

.product-info-panel .price{
    font-size:clamp(30px,4vw,40px);
    color:var(--ez-blue);
}

.product-info-panel .panel.mt{
    border:1px solid #eef2ff;
}

.product-info-panel textarea{
    min-height:120px;
    resize:vertical;
}

@media(max-width:900px){
    .product-detail-layout{
        grid-template-columns:1fr;
    }

    .product-detail-layout .carousel{
        height:420px;
        min-height:360px;
    }
}

@media(max-width:600px){
    .container{
        padding:20px 12px;
    }

    .product-detail-layout{
        gap:16px;
    }

    .product-info-panel{
        padding:18px;
    }

    .product-detail-layout .carousel{
        height:320px;
        min-height:300px;
    }

    .product-detail-layout .carousel .slide{
        padding:10px;
    }

    .thumbs{
        overflow-x:auto;
        padding-bottom:6px;
    }

    .thumbs .thumb{
        width:60px;
        height:60px;
        flex:0 0 auto;
    }
}
.account-delete-box {
    max-width: 520px;
}

.delete-reasons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;

    cursor: pointer;

    transition: 0.2s;
}

.radio-option:hover {
    border-color: var(--primary);
    background: rgba(255,255,255,0.03);
}

.radio-option input[type="radio"] {
    width: 18px;
    height: 18px;

    accent-color: var(--primary);

    cursor: pointer;
}

.radio-option span {
    font-size: 14px;
    line-height: 1.4;
}

#otherDeleteReason {
    margin-top: 14px;
    min-height: 100px;

    resize: vertical;
}

#deleteStepPassword,
#deleteStepQuestions,
#deleteStepReason {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-delete-box h2 {
    margin-bottom: 10px;
}

.account-delete-box .panel-subtitle {
    margin-bottom: 20px;
    line-height: 1.5;
    opacity: 0.85;
}

#deleteErr {
    margin-top: 14px;
}

.soft-warning {
    margin-top: 18px;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(255,122,0,.08));
    border: 1px solid rgba(37,99,235,.15);
}

.soft-warning strong {
    display: block;
    margin-bottom: 6px;
    color: #0f172a;
}

.soft-warning p {
    color: #64748b;
    line-height: 1.5;
}

.verifyPage{

    min-height:70vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:
        clamp(20px, 4vw, 60px);

    width:100%;
}

.verifyCard{

    width:min(100%, 560px);

    background:#fff;

    border-radius:32px;

    padding:
        clamp(28px, 5vw, 56px);

    text-align:center;

    box-shadow:
        0 10px 40px rgba(0,0,0,.08);

    overflow:hidden;
}

.verifyIcon{

    width:
        clamp(70px, 12vw, 95px);

    height:
        clamp(70px, 12vw, 95px);

    margin:
        0 auto 24px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #ff6b00
        );

    color:#fff;

    font-size:
        clamp(30px, 5vw, 46px);

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;
}

.verifyCard h1{

    font-size:
        clamp(28px, 5vw, 42px);

    line-height:1.15;

    margin-bottom:16px;

    color:#111827;

    word-break:break-word;
}

.verifyCard p{

    color:#6b7280;

    font-size:
        clamp(15px, 2vw, 18px);

    line-height:1.7;

    margin-bottom:32px;

    word-break:break-word;
}

.verifyCard button{

    width:100%;

    min-height:52px;

    font-size:
        clamp(15px, 2vw, 17px);
}


/* MOBILE */

@media (max-width:640px){

    .verifyPage{

        padding:20px;
    }

    .verifyCard{

        border-radius:24px;
    }
}

/* SMALL PHONES */

@media (max-width:380px){

    .verifyCard{

        padding:24px 18px;
    }

    .verifyCard h1{

        font-size:24px;
    }

    .verifyCard p{

        font-size:14px;
    }
}

/* LARGE SCREENS */

@media (min-width:1600px){

    .verifyCard{

        max-width:650px;
    }
}

.verifyCard button{

    max-width:320px;

    margin:auto;
}

.verifyCard{

    animation:verifyFade .35s ease;
}

@keyframes verifyFade{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}




/* VERIFY PAGE PREMIUM EFFECTS */

.verifyCard{

    position:relative;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.verifyCard:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 24px 60px rgba(30,95,255,.18);
}

/* Animated glow */

.verifyCard::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:34px;

    padding:2px;

    background:
        linear-gradient(
            135deg,
            #1e5fff,
            #ff7800,
            #1e5fff
        );

    background-size:300% 300%;

    animation:
        verifyGlow 6s ease infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:.5;

    pointer-events:none;
}

@keyframes verifyGlow{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }
}

/* ICON */

.verifyIcon{

    animation:
        iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-6px);
    }

    100%{
        transform:translateY(0px);
    }
}

/* BUTTON */

.verifyCard button{

    position:relative;

    overflow:hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.verifyCard button:hover{

    transform:
        translateY(-2px)
        scale(1.02);

    box-shadow:
        0 14px 30px rgba(30,95,255,.35);
}

.verifyCard button:active{

    transform:scale(.97);
}

/* Shine effect */

.verifyCard button::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:80%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform:skewX(-20deg);

    transition:.7s;
}

.verifyCard button:hover::before{

    left:140%;
}

/* SUCCESS PULSE */

.verifySuccess .verifyIcon{

    animation:
        successPulse 1.8s infinite;
}

@keyframes successPulse{

    0%{
        box-shadow:
            0 0 0 0 rgba(34,197,94,.45);
    }

    70%{
        box-shadow:
            0 0 0 18px rgba(34,197,94,0);
    }

    100%{
        box-shadow:
            0 0 0 0 rgba(34,197,94,0);
    }
}


/* VERIFY SUCCESS CONTENT */

.verifySuccessText{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-bottom:18px;

    font-weight:700;

    color:#111827;

    flex-wrap:wrap;
}

.verifyCheck{

    width:34px;
    height:34px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #22c55e,
        #16a34a
    );

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:900;

    animation:
        verifyBounce 1s ease;
}

.verifyCountdown{

    font-size:18px;

    color:#64748b;

    animation:
        pulseText 1.2s infinite;
}

.verifyCountdown strong{

    color:#1e5fff;

    font-size:28px;

    margin:0 4px;
}

@keyframes verifyBounce{

    0%{
        transform:scale(.6);
        opacity:0;
    }

    70%{
        transform:scale(1.15);
    }

    100%{
        transform:scale(1);
        opacity:1;
    }
}

@keyframes pulseText{

    0%{
        opacity:1;
    }

    50%{
        opacity:.6;
    }

    100%{
        opacity:1;
    }
}

body{
    transition:opacity .35s ease;
}


.filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.filter-grid input {
    width: 100%;
}

@media (max-width: 600px) {
    .filter-grid {
        grid-template-columns: 1fr;
    }
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-toggle {
    border: 0;
    background: transparent;
    color: #2563eb;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
}

.filter-panel {
    transition: all .25s ease;
}

.filter-panel.collapsed {
    padding: 18px;
    height: fit-content;
    min-height: 0;
}

.filter-panel.collapsed h2::after {
    display: none;
}

.product-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.product-actions a,
.product-actions button {
    min-width: 82px;
}


.edit-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(15, 23, 42, .65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.edit-modal.hidden {
    display: none !important;
}

.edit-modal .modal-content {
    width: min(460px, 94vw);
    max-height: 82vh;
    overflow-y: auto;
    background: white;
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
}

.edit-modal .modal-content h2 {
    margin-bottom: 14px;
}

.edit-modal textarea {
    min-height: 120px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 14px;
}

@media(max-width:600px) {
    .modal-actions {
        flex-direction: column;
    }

    .modal-actions button {
        width: 100%;
    }
}


.edit-images-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 14px;
}

.edit-image-item {
    position: relative;
    width: 96px;
    height: 96px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    background: #f8fafc;
    flex-shrink: 0;
}

.edit-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.delete-image-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #ef4444;
    color: white;
    font-weight: 900;
    font-size: 13px;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px #0004;
}

.delete-image-btn:hover {
    background: #dc2626;
}

@media(max-width:600px) {
    .edit-image-item {
        width: 82px;
        height: 82px;
    }
}

.edit-modal input,
.edit-modal select,
.edit-modal textarea {
    padding: 10px 12px;
    border-radius: 13px;
}

.edit-modal textarea {
    min-height: 90px;
}


.product-actions{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:flex-end;
}

.manage h3{
    margin-bottom:6px;
    font-size:20px;
}

.manage p{
    color:#111827;
    font-weight:700;
}

@media(max-width:700px){
    .manage{
        grid-template-columns:1fr;
    }

    .manage img{
        width:100%;
        height:190px;
    }

    .product-actions{
        width:100%;
    }

    .product-actions a,
    .product-actions button{
        flex:1;
    }
}


.manage-info{
    min-width:0;
}

.manage-info h3{
    margin-bottom:8px;
    font-size:21px;
    line-height:1.2;
}

.manage-description{
    color:#475569;
    line-height:1.45;
    margin-bottom:10px;
    max-width:620px;

    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.manage-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.manage-meta span{
    background:#eef4ff;
    color:#1e5fff;
    padding:6px 10px;
    border-radius:999px;
    font-size:13px;
    font-weight:900;
}

.manage-description{
    color:#475569;
    line-height:1.45;
    margin-bottom:10px;
    max-width:620px;

    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;

    min-height:66px;
}


/* SECURITY PAGE */

.security-hero {
    background:
        radial-gradient(circle at top left, #eef4ff, #ffffff 48%),
        #ffffff;
}

.security-hero .eyebrow {
    margin-bottom: 14px;
}

.security-hero p {
    max-width: 780px;
    line-height: 1.6;
    font-size: 16px;
}

.security-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.security-card {
    background: white;
    border: 1px solid #eef2ff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 14px 35px #1e5fff12;
    transition: .25s;
}

.security-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px #1e5fff20;
}

.security-card.main,
.security-card.warehouse {
    grid-column: span 2;
}

.security-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 26px;
    background: linear-gradient(135deg, #eef4ff, #fff4e8);
    margin-bottom: 14px;
}

.security-card h2 {
    margin-bottom: 10px;
    font-size: 22px;
}

.security-card p {
    color: #64748b;
    line-height: 1.55;
    margin-bottom: 14px;
}

.security-card ul {
    list-style: none;
    display: grid;
    gap: 10px;
}

.security-card li {
    color: #334155;
    font-weight: 700;
    line-height: 1.4;
    position: relative;
    padding-left: 24px;
}

.security-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ez-blue);
    font-weight: 900;
}

.security-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.security-steps span {
    background: #eef4ff;
    color: var(--ez-blue);
    padding: 9px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.security-card.warning {
    border-color: #fed7aa;
    background: linear-gradient(180deg, #fff7ed, #ffffff);
}

.security-card.warning li::before {
    content: "!";
    color: var(--ez-orange);
}

.support-card {
    display: flex;
    flex-direction: column;
}

.support-card .primary {
    margin-top: 20px;
    width: fit-content;
}

.security-card.support-card {
    height: fit-content;
    align-self: start;
}

@media(max-width:900px) {
    .security-grid {
        grid-template-columns: 1fr 1fr;
    }

    .security-card.main,
    .security-card.warehouse {
        grid-column: span 2;
    }
}

@media(max-width:600px) {
    .security-grid {
        grid-template-columns: 1fr;
    }

    .security-card.main,
    .security-card.warehouse {
        grid-column: span 1;
    }

    .security-card {
        padding: 20px;
    }

    .security-steps {
        flex-direction: column;
    }

    .support-card .primary {
        width: 100%;
    }
}

/* SUPPORT PAGE */

.support-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:24px;
    margin:24px 0;
}

.support-card{
    background:#fff;
    border-radius:24px;
    padding:24px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
    border:1px solid #edf2f7;
}

.support-card h2{
    margin-bottom:12px;
}

.support-icon{
    font-size:34px;
    margin-bottom:14px;
}

.contact-list{
    display:grid;
    gap:14px;
    margin-top:20px;
}

.contact-item{
    background:#f8fafc;
    padding:14px;
    border-radius:14px;
}

.contact-item strong{
    display:block;
    margin-bottom:4px;
}

.contact-item span{
    color:#64748b;
}

.support-card ul{
    list-style:none;
    display:grid;
    gap:10px;
}

.support-card li{
    padding-left:20px;
    position:relative;
}

.support-card li::before{
    content:"✓";
    color:var(--ez-blue);
    font-weight:bold;
    position:absolute;
    left:0;
}

.faq-list{
    display:grid;
    gap:14px;
}

.faq-item{
    background:#fff;
    border-radius:18px;
    padding:18px;
    border:1px solid #edf2f7;
}

.faq-item summary{
    cursor:pointer;
    font-weight:700;
}

.faq-item p{
    margin-top:12px;
    color:#64748b;
}

@media(max-width:900px){

    .support-grid{
        grid-template-columns:1fr;
    }

}

.contact-item a{
    color:#1e5fff;
    font-weight:700;
    text-decoration:none;
    transition:.2s;
}

.contact-item a:hover{
    color:#ff7800;
    text-decoration:underline;
}

/* SUPPORT ASSISTANT */

.support-assistant{
    margin-top:30px;
}

.assistant-card{
    background:#fff;
    border-radius:24px;
    padding:24px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
    border:1px solid #edf2f7;
}

.assistant-head{
    display:flex;
    gap:16px;
    align-items:flex-start;
    margin-bottom:20px;
}

.assistant-icon{
    width:60px;
    height:60px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    background:#eef4ff;
}

.assistant-suggestions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
}

.assistant-suggestions button{
    border:none;
    cursor:pointer;
    background:#eef4ff;
    color:var(--ez-blue);
    padding:10px 16px;
    border-radius:999px;
    font-weight:700;
}

.assistant-chat{
    background:#f8fafc;
    border-radius:18px;
    min-height:120px;
    padding:18px;
    margin-bottom:20px;
}

.assistant-message{
    padding:12px 16px;
    border-radius:14px;
    max-width:800px;
    margin-bottom:10px;
}

.assistant-message.bot{
    background:#eef4ff;
}

.assistant-input{
    display:flex;
    gap:12px;
}

.assistant-input input{
    flex:1;
}

@media(max-width:700px){

    .assistant-input{
        flex-direction:column;
    }

}


/* FLOATING CHATBOT */

.chatbot-float{
    position:fixed;
    right:24px;
    bottom:24px;
    width:64px;
    height:64px;
    border:none;
    border-radius:999px;
    cursor:pointer;
    font-size:28px;
    background:linear-gradient(
        135deg,
        var(--ez-blue),
        var(--ez-orange)
    );
    color:white;
    box-shadow:0 20px 45px rgba(0,0,0,.25);
    z-index:9999;
}

.assistant-widget{
    position:fixed;
    right:24px;
    bottom:100px;
    width:380px;
    max-width:calc(100vw - 32px);
    background:white;
    border-radius:24px;
    overflow:hidden;
    border:1px solid #e5e7eb;
    box-shadow:0 24px 60px rgba(0,0,0,.22);
    z-index:9999;
}

.assistant-widget-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 18px;
    color:white;
    background:linear-gradient(
        135deg,
        var(--ez-blue),
        #0b7fff
    );
}

.assistant-widget-head strong{
    display:block;
}

.assistant-widget-head span{
    font-size:12px;
    opacity:.9;
}

.assistant-widget-head button{
    border:none;
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(255,255,255,.2);
    color:white;
    cursor:pointer;
}

.assistant-chat{
    height:280px;
    overflow-y:auto;
    padding:16px;
    background:#f8fafc;
}

.assistant-message{
    padding:12px 14px;
    border-radius:16px;
    margin-bottom:10px;
    line-height:1.5;
}

.assistant-message.bot{
    background:white;
    border:1px solid #e5e7eb;
}

.assistant-suggestions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:12px;
    border-top:1px solid #eef2f7;
}

.assistant-suggestions button{
    border:none;
    cursor:pointer;
    border-radius:999px;
    padding:8px 12px;
    background:#eef4ff;
    color:var(--ez-blue);
    font-weight:700;
}

.assistant-input{
    display:flex;
    gap:8px;
    padding:12px;
    border-top:1px solid #eef2f7;
}

.assistant-input input{
    flex:1;
}

.assistant-input button{
    width:48px;
    border:none;
    border-radius:14px;
    background:var(--ez-orange);
    color:white;
    cursor:pointer;
}

@media(max-width:768px){

    .assistant-widget{
        width:calc(100vw - 20px);
        right:10px;
    }

}



.assistant-message.user{
    background:linear-gradient(135deg,var(--ez-blue),#006edc);
    color:white;
    margin-left:auto;
    max-width:82%;
}

.typing-dots{
    display:flex;
    gap:5px;
    align-items:center;
    height:18px;
}

.typing-dots i{
    width:7px;
    height:7px;
    background:#94a3b8;
    border-radius:50%;
    animation:typingDot 1s infinite ease-in-out;
}

.typing-dots i:nth-child(2){
    animation-delay:.15s;
}

.typing-dots i:nth-child(3){
    animation-delay:.3s;
}

@keyframes typingDot{
    0%,80%,100%{
        transform:translateY(0);
        opacity:.45;
    }

    40%{
        transform:translateY(-5px);
        opacity:1;
    }
}


.assistant-bot-profile{
    display:flex;
    align-items:center;
    gap:12px;
}

.assistant-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        #111827,
        #1e5fff
    );
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    position:relative;
}

.assistant-avatar span{
    position:absolute;
    right:0;
    bottom:2px;
    width:10px;
    height:10px;
    background:#22c55e;
    border-radius:50%;
    border:2px solid white;
}

.assistant-widget-head small{
    display:block;
    font-size:11px;
    opacity:.9;
}


.chatbot-float{
    position:fixed;
    right:24px;
    bottom:24px;
    width:72px;
    height:72px;

    border:none;

    background:transparent;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    box-shadow:none;

    z-index:9999;
}
.chatbot-float-avatar{
    width:64px;
    height:64px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #111827,
        #1e5fff
    );

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:28px;

    position:relative;

    box-shadow:
        0 12px 25px rgba(0,0,0,.18),
        0 25px 50px rgba(30,95,255,.25);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.chatbot-float-avatar span{
    position:absolute;
    right:0;
    bottom:2px;
    width:11px;
    height:11px;
    border-radius:50%;
    background:#22c55e;
    border:2px solid white;
}


.chatbot-float:hover .chatbot-float-avatar{

    transform:
        translateY(-4px)
        scale(1.05);

    box-shadow:
        0 18px 35px rgba(0,0,0,.22),
        0 35px 65px rgba(30,95,255,.35);
}


.chatbot-float-avatar::before{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(30,95,255,.35),
            transparent 70%
        );

    z-index:-1;

    filter:blur(10px);
}

.chatbot-float,
.assistant-widget{
    z-index:9000;
}

.drawer{
    z-index:12000;
}


.checkout-error-box{
    margin-top:16px;
    padding:16px;
    border-radius:18px;
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#9a3412;
    line-height:1.45;
}

.checkout-error-box strong{
    display:block;
    margin-bottom:8px;
    color:#c2410c;
}

.checkout-error-box p{
    margin-top:6px;
}

.checkout-payment-hint{
    margin:14px 0 18px;
    padding:14px 16px;
    border:1px solid #dbeafe;
    border-radius:18px;
    background:#f8fbff;
    color:#475569;
    font-weight:700;
    line-height:1.45;
}

.checkout-details-grid{
    align-items:stretch;
}

.checkout-payment-launch{
    margin-top:20px;
    padding:20px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border:1px solid #dbe3ef;
    border-radius:22px;
    background:#fff;
    box-shadow:0 14px 34px rgba(15,23,42,.07);
}

.checkout-payment-launch div{
    display:grid;
    gap:5px;
}

.checkout-payment-launch strong{
    color:#0f172a;
    font-size:18px;
}

.checkout-payment-launch span{
    color:#64748b;
}

.checkout-payment-launch button{
    min-width:220px;
}

.checkout-form-error{
    margin-top:14px;
}

body.checkout-payment-open{
    overflow:hidden;
}

.checkout-payment-modal{
    width:min(520px, calc(100vw - 32px));
    max-height:calc(100vh - 32px);
    margin:auto;
    padding:26px;
    border:1px solid #dbe3ef;
    border-radius:24px;
    background:#fff;
    color:#0f172a;
    box-shadow:0 30px 90px rgba(2,6,23,.38);
}

.checkout-payment-modal::backdrop{
    background:rgba(2,6,23,.72);
    backdrop-filter:blur(7px);
}

.checkout-payment-modal-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px;
}

.checkout-payment-modal-head h2{
    margin:4px 0 0;
}

.checkout-payment-eyebrow{
    color:#2563eb;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.checkout-payment-close{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid #dbe3ef;
    border-radius:50%;
    background:#f8fafc;
    color:#334155;
    font-size:27px;
    line-height:1;
    cursor:pointer;
}

.checkout-payment-modal select{
    width:100%;
}

:root[data-theme="dark"] .checkout-payment-launch,
:root[data-theme="dark"] .checkout-payment-modal{
    background:#111827;
    border-color:#334155;
    color:#f8fafc;
}

:root[data-theme="dark"] .checkout-payment-launch strong,
:root[data-theme="dark"] .checkout-payment-modal h2{
    color:#f8fafc;
}

:root[data-theme="dark"] .checkout-payment-launch span{
    color:#a8b5c7;
}

@media(max-width:700px){
    .checkout-payment-launch{
        align-items:stretch;
        flex-direction:column;
    }

    .checkout-payment-launch button{
        width:100%;
        min-width:0;
    }

    .checkout-payment-modal{
        padding:20px;
    }
}

.payment-result-page{
    min-height:70vh;
    display:grid;
    place-items:center;
}

.payment-result-card{
    width:min(760px, 100%);
    text-align:center;
}

.payment-result-icon{
    width:64px;
    height:64px;
    margin:0 auto 18px;
    display:grid;
    place-items:center;
    border-radius:20px;
    font-weight:900;
    letter-spacing:0;
}

.payment-result-icon.success{
    background:#dcfce7;
    color:#166534;
}

.payment-result-icon.pending{
    background:#fff7ed;
    color:#c2410c;
}

.payment-result-details{
    margin:22px auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

.payment-result-details span{
    padding:9px 12px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    font-weight:900;
}

.payment-result-actions{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

.payment-result-actions a{
    text-decoration:none;
}

.maintenance-overlay{
    position:fixed;
    inset:0;
    z-index:90000;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(15, 23, 42, .52);
    backdrop-filter:blur(10px);
}

.maintenance-dialog{
    width:min(460px, 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:28px;
    border:1px solid #dbeafe;
    border-top:5px solid #ff7800;
    border-radius:24px;
    background:linear-gradient(180deg,#ffffff,#f8fbff);
    box-shadow:0 28px 70px rgba(15, 23, 42, .28);
    text-align:center;
}

.maintenance-mark{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:linear-gradient(135deg,#ff7800,#ff9a1f);
    color:white;
    font-size:26px;
    font-weight:900;
}

.maintenance-dialog strong{
    color:#071225;
    font-size:26px;
    line-height:1.1;
    font-weight:900;
}

.maintenance-dialog span{
    color:#475569;
    font-size:16px;
    line-height:1.55;
}

.maintenance-retry{
    min-height:48px;
    margin-top:6px;
    align-self:center;
    padding:0 22px;
    border:2px solid #ff7800;
    border-radius:16px;
    background:white;
    color:#071225;
    font-weight:900;
    cursor:pointer;
}

.maintenance-retry:hover{
    background:#ff7800;
    color:white;
}

:root[data-theme="dark"] .maintenance-dialog{
    background:linear-gradient(180deg,#111827,#0f172a);
    border-color:#263449;
}

:root[data-theme="dark"] .maintenance-dialog strong{
    color:#e5edf8;
}

:root[data-theme="dark"] .maintenance-dialog span{
    color:#9fb0c7;
}


/* FACEBOOK STYLE NOTIFICATIONS */

.notifications-shell{
    background:white;
    border-radius:26px;
    padding:18px;
    border:1px solid #eef2ff;
    box-shadow:0 14px 35px #1e5fff12;
}

.notifications-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:10px 8px 18px;
    border-bottom:1px solid #e5e7eb;
    margin-bottom:10px;
}

.notifications-head h2{
    font-size:26px;
}

.notifications-head p{
    color:#64748b;
    margin-top:4px;
}

.notifications-limit-note{
    display:inline-flex;
    margin-top:6px;
    color:#64748b;
    font-size:13px;
    font-weight:800;
}

.fb-notification{
    position:relative;
    display:grid;
    grid-template-columns:52px 1fr auto;
    gap:14px;
    align-items:center;
    padding:14px;
    border-radius:18px;
    transition:.2s;
}

.fb-notification:hover{
    background:#f8fafc;
}

.fb-notification.unread{
    background:#eef4ff;
}

.fb-notification-avatar{
    width:52px;
    height:52px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--ez-blue),var(--ez-orange));
    color:white;
    display:grid;
    place-items:center;
    font-weight:900;
    font-size:20px;
}

.fb-notification-text{
    line-height:1.4;
}

.fb-notification-text strong{
    margin-right:5px;
}

.fb-notification-text span{
    color:#334155;
}

.fb-notification-time{
    color:#1e5fff;
    font-size:13px;
    font-weight:800;
    margin-top:4px;
}

.fb-notification-action{
    background:#eef4ff;
    color:#1e5fff;
    font-weight:900;
    padding:9px 14px;
    border-radius:999px;
}

.fb-notification-action:hover{
    background:#1e5fff;
    color:white;
}

.fb-unread-dot{
    position:absolute;
    right:10px;
    top:50%;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#1e5fff;
}

.notifications-empty{
    text-align:center;
    padding:40px;
}

@media(max-width:600px){
    .notifications-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .fb-notification{
        grid-template-columns:44px 1fr;
    }

    .fb-notification-action{
        grid-column:2;
        width:max-content;
    }

    .fb-notification-avatar{
        width:44px;
        height:44px;
    }
}


/* FACEBOOK-LIKE HEADER NOTIFICATIONS */

.notif-wrap{
    position:relative;
    display:flex;
    align-items:center;
}

.notif-wrap .notifBtn{
    position:relative;
}

.notif-dropdown{
    position:absolute;
    top:62px;
    right:0;
    width:420px;
    max-width:calc(100vw - 24px);
    background:white;
    border:1px solid #dbe3f0;
    border-radius:18px;
    box-shadow:0 24px 70px rgba(15,23,42,.28);
    z-index:13000;
    overflow:hidden;
}

.notif-dropdown-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    border:1px solid #dbe4f0;
    border-radius:14px;
    background:#fff;
    color:#475569;
    font-weight:700;
}

.orders-pagination-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.orders-pagination button:disabled{
    opacity:.45;
    cursor:not-allowed;
}

@media(max-width:640px){
    .orders-pagination{
        flex-direction:column;
        align-items:stretch;
    }

    .orders-pagination-actions{
        justify-content:space-between;
    }
}

/* =========================================================
   EZANDOO STORE DARK MODE
   ========================================================= */

:root[data-theme="dark"]{
    color-scheme:dark;
    --panel:#111827;
    --panel-2:#0f172a;
    --line:#263449;
    --text:#e5edf8;
    --muted:#9fb0c7;
    --shadow:0 18px 48px rgba(0,0,0,.34);
}

:root[data-theme="dark"] body{
    background:radial-gradient(circle at top, #111827 0%, #0b1120 42%, #070d1a 100%)!important;
    color:var(--text)!important;
}

:root[data-theme="dark"] .header,
:root[data-theme="dark"] .ez-header,
:root[data-theme="dark"] .ez-header-top,
:root[data-theme="dark"] .pagehead,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .product,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .notice,
:root[data-theme="dark"] .order,
:root[data-theme="dark"] .message,
:root[data-theme="dark"] .stat,
:root[data-theme="dark"] .profile,
:root[data-theme="dark"] .drawer,
:root[data-theme="dark"] .modal .box,
:root[data-theme="dark"] .box,
:root[data-theme="dark"] .trust-bar,
:root[data-theme="dark"] .ez-menu-panel,
:root[data-theme="dark"] .cart-item,
:root[data-theme="dark"] .summary{
    background:#111827!important;
    border-color:#263449!important;
    color:#e5edf8!important;
    box-shadow:var(--shadow)!important;
}

:root[data-theme="dark"] .ez-menu-panel{
    background:linear-gradient(180deg,#111827,#0f172a)!important;
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] strong,
:root[data-theme="dark"] b,
:root[data-theme="dark"] .price,
:root[data-theme="dark"] .cart-info b,
:root[data-theme="dark"] .cart-info strong,
:root[data-theme="dark"] .summary b,
:root[data-theme="dark"] .summary div:last-of-type,
:root[data-theme="dark"] .ez-brand-copy strong,
:root[data-theme="dark"] .ez-menu-head strong{
    color:#f8fafc!important;
}

:root[data-theme="dark"] p,
:root[data-theme="dark"] small,
:root[data-theme="dark"] .body p,
:root[data-theme="dark"] .pagehead p,
:root[data-theme="dark"] .profile-main p,
:root[data-theme="dark"] .summary div,
:root[data-theme="dark"] .ez-brand-copy small,
:root[data-theme="dark"] .ez-menu-head span{
    color:#9fb0c7!important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .search,
:root[data-theme="dark"] .search input,
:root[data-theme="dark"] .ez-search,
:root[data-theme="dark"] .ez-search input,
:root[data-theme="dark"] .secondary,
:root[data-theme="dark"] .tabs button,
:root[data-theme="dark"] .ez-menu-section a,
:root[data-theme="dark"] .ez-menu-tools a,
:root[data-theme="dark"] .ez-action-btn,
:root[data-theme="dark"] .ez-login-btn.auth,
:root[data-theme="dark"] .langBtn,
:root[data-theme="dark"] .close,
:root[data-theme="dark"] .drawer-head button{
    background:#182235!important;
    border-color:#263449!important;
    color:#e5edf8!important;
}

:root[data-theme="dark"] .ez-login-btn,
:root[data-theme="dark"] .cartBtn,
:root[data-theme="dark"] .primary{
    color:#fff!important;
}

:root[data-theme="dark"] .ez-action-btn:hover,
:root[data-theme="dark"] .actions a:hover,
:root[data-theme="dark"] .actions button:hover,
:root[data-theme="dark"] .nav a:hover,
:root[data-theme="dark"] .secondary:hover,
:root[data-theme="dark"] .ez-menu-section a:hover{
    background:#23314a!important;
    color:#93c5fd!important;
}

:root[data-theme="dark"] .drawer-head,
:root[data-theme="dark"] .summary{
    background:#0f172a!important;
    border-color:#263449!important;
}

:root[data-theme="dark"] .product img,
:root[data-theme="dark"] .carousel,
:root[data-theme="dark"] .carousel .slide,
:root[data-theme="dark"] .cart-item img{
    background:#0b1120!important;
}

:root[data-theme="dark"] .orders-pagination{
    background:#111827!important;
    border-color:#263449!important;
    color:#c3d0e4!important;
}

:root[data-theme="dark"] #loginModal .box{
    background:linear-gradient(180deg,#111827,#0f172a)!important;
    border-color:#263449!important;
}

.ez-theme-btn{
    font-size:24px!important;
    font-weight:900!important;
}

.ez-theme-btn span{
    font-size:24px!important;
    line-height:1!important;
}
*,
*::before,
*::after{
    box-sizing:border-box;
}

img{
    max-width:100%;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:3px solid rgba(37,99,235,.42);
    outline-offset:2px;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled{
    cursor:not-allowed;
    opacity:.58;
}

.empty{
    overflow-wrap:break-word;
}

.product img,
.order-product-image img,
.cart-item img{
    object-fit:cover;
}

@media(max-width:760px){
    .ez-header-top,
    .ez-header-actions,
    .row,
    .order-head,
    .orders-pagination,
    .orders-pagination-actions{
        min-width:0;
    }

    .ez-search{
        width:100%;
    }

    .ez-search input{
        min-width:0;
    }

    .order-grid{
        grid-template-columns:1fr!important;
    }

    .order-head-actions,
    .orders-pagination-actions{
        width:100%;
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
    }
}

/* =========================================================
   FINAL RESPONSIVE PASS: STORE, PROFILE, ORDERS, CHECKOUT
   ========================================================= */

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

.container,
.pagehead,
.panel,
.profile-page,
.profile-card,
.order,
.drawer,
.three,
.two,
.products,
.products-pagination,
.products-pagination-top,
.products-pagination-bottom{
    min-width:0;
}

.pagehead h1,
.profile-main h1,
.order-head h2,
.product-info-panel h1,
.panel h2{
    overflow-wrap:anywhere;
}

.three{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:20px;
}

.ez-brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    padding:6px 8px;
    border-radius:18px;
    transition:.2s ease;
}

.ez-brand:hover{
    background:rgba(37, 99, 235, 0.06);
}

.ez-brand-copy{
    display:flex;
    flex-direction:column;
    line-height:1.05;
}

.ez-brand-copy strong{
    font-size:18px;
    color:#0f172a;
}

.ez-brand-copy small{
    font-size:11px;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.18em;
}

.products-pagination,
.products-pagination-top,
.products-pagination-bottom{
    display:flex;
    height:56px;
    border:1px solid #dbe7ff;
    border-radius:18px;
    background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
    overflow:hidden;
    box-shadow:0 12px 30px rgba(30,95,255,.10);
    min-width:0;
}

.ez-search input{
    flex:1;
    border:0;
    margin:0;
    padding:0 18px;
    min-width:0;
    font-size:16px;
    background:white;
}

.ez-search input:focus{
    outline:none;
    box-shadow:none;
}

.ez-search button{
    min-width:118px;
    padding:0 22px;
    background:linear-gradient(135deg,#1e5fff,#2563eb);
    color:white;
    font-weight:900;
    border-radius:0;
    box-shadow:inset -1px 0 0 rgba(255,255,255,.08);
}

.ez-search button:hover{
    filter:brightness(1.05);
}

.products-page-size{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    min-width:0;
}

.order-product-title-link,
.order-seller,
.order-meta,
.order-row span,
.order-total span{
    overflow-wrap:anywhere;
}

.delivery-steps,
.order-progress,
.progress-steps{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.ez-action-link:hover{
    background:#eef4ff;
    color:#1e5fff;
}

.ez-sell-link{
    background:linear-gradient(135deg,#ff7800,#ff9a1f);
    color:white!important;
    box-shadow:0 8px 18px rgba(255,120,0,.25);
}

.ez-icon-btn{
    width:48px;
    height:48px;
    min-width:48px;
    border-radius:16px;
    display:flex!important;
    align-items:center;
    justify-content:center;
    position:relative;
    background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%)!important;
    border:1px solid #e5e7eb!important;
    color:#111827!important;
    font-size:20px;
    padding:0!important;
    box-shadow:0 10px 20px rgba(15,23,42,.06)!important;
    text-decoration:none;
}

.ez-icon-btn:hover{
    background:#eef4ff!important;
    transform:translateY(-1px);
}

.ez-icon-btn img{
    width:30px!important;
    height:30px!important;
    object-fit:contain;
    display:block;
}

.ez-icon-btn span,
.notifBtn #notifCount,
.cartBtn span{
    position:absolute;
    top:-7px;
    right:-7px;
    min-width:22px;
    height:22px;
    padding:0 6px;
    border-radius:999px;
    background:#ff7800;
    color:white;
    font-size:12px;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ez-menu-btn{
    display:none!important;
}

.ez-nav{
    width:min(1440px, calc(100vw - 28px));
    margin:auto;
    padding:0 0 12px;
    display:flex;
    gap:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.ez-nav a{
    flex:0 0 auto;
    padding:10px 14px;
    border-radius:999px;
    background:#f8fafc;
    color:#111827;
    font-weight:900;
    font-size:14px;
    white-space:nowrap;
    border:1px solid transparent;
}

.ez-nav a:hover,
.ez-nav a:focus-visible{
    border-color:#dbe7ff;
    background:linear-gradient(180deg,#eef4ff,#f8fbff);
    color:#1e5fff;
}

.ez-nav a:hover{
    background:#eef4ff;
    color:#1e5fff;
}

/* TABLET */
@media(max-width:1024px){

    .ez-header-top{
        grid-template-columns:auto 1fr auto;
        gap:12px;
    }

    .ez-action-link{
        display:none;
    }

    .ez-search{
        height:50px;
    }
}

/* MOBILE */
@media(max-width:700px){

    .ez-header-top{
        width:100%;
        padding:10px;
        min-height:auto;
        grid-template-columns:auto 1fr auto auto auto;
        gap:8px;
    }

    .ez-logo{
        width:138px;
    }

    .ez-search{
        grid-column:1 / -1;
        grid-row:2;
        height:50px;
        border-radius:16px;
    }

    .ez-search button{
        min-width:86px;
        padding:0 14px;
        font-size:14px;
    }

    .ez-header-actions{
        grid-column:3 / -1;
        gap:6px;
    }

    .ez-lang-btn,
    .ez-action-link{
        display:none!important;
    }

    .ez-icon-btn{
        width:42px;
        height:42px;
        min-width:42px;
        border-radius:14px;
    }

    .ez-icon-btn img{
        width:28px!important;
        height:28px!important;
    }

    .ez-menu-btn{
        display:flex!important;
        font-size:24px;
    }

    .ez-nav{
        width:100%;
        display:none;
        padding:8px 10px 12px;
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:8px;
        background:white;
        border-top:1px solid #eef2ff;
    }

    .ez-nav.show{
        display:grid;
    }

    .ez-nav a{
        width:100%;
        text-align:center;
        border-radius:14px;
        padding:12px 8px;
        background:#f8fafc;
    }

    .hero{
        margin-top:0;
    }
}

/* SMALL PHONES */
@media(max-width:380px){

    .ez-logo{
        width:118px;
    }

    .ez-icon-btn{
        width:38px;
        height:38px;
        min-width:38px;
    }

    .ez-search button{
        min-width:74px;
        padding:0 10px;
    }
}


/* =========================================================
   EZANDOO HEADER FINAL COMPATIBILITY PATCH
   PEGAR AL FINAL DE style.css
   ========================================================= */

.ez-icon-action,
.ez-icon-btn{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    border-radius:16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    background:#f8fafc!important;
    border:1px solid #e5e7eb!important;
    color:#111827!important;
    font-size:20px!important;
    padding:0!important;
    margin:0!important;
    box-shadow:none!important;
    text-decoration:none!important;
}

.ez-icon-action:hover,
.ez-icon-btn:hover{
    background:#eef4ff!important;
    transform:translateY(-1px);
}

.ez-icon-action img,
.ez-icon-btn img{
    width:31px!important;
    height:31px!important;
    object-fit:contain!important;
    display:block!important;
    filter:none!important;
}

.ez-text-action,
.ez-action-link{
    min-height:44px;
    padding:0 14px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    color:#111827;
    font-weight:900;
    white-space:nowrap;
}

.ez-text-action:hover,
.ez-action-link:hover{
    background:#eef4ff;
    color:#1e5fff;
}

.ez-text-action.sell-any,
.ez-action-link.ez-sell-link{
    background:linear-gradient(135deg,#ff7800,#ff9a1f)!important;
    color:white!important;
    box-shadow:0 8px 18px rgba(255,120,0,.25);
}

.ez-header .cartBtn{
    background:#f8fafc!important;
}

.ez-header .cartBtn img{
    width:31px!important;
    height:31px!important;
}

.ez-header .notifBtn img{
    width:31px!important;
    height:31px!important;
}

.ez-menu-btn{
    display:none!important;
}

@media(max-width:1100px){
    .ez-text-action,
    .ez-action-link{
        display:none!important;
    }
}

@media(max-width:700px){

    .ez-header-top{
        width:100%!important;
        padding:10px!important;
        min-height:auto!important;
        grid-template-columns:auto 1fr auto auto auto!important;
        gap:8px!important;
    }

    .ez-logo{
        width:136px!important;
    }

    .ez-search{
        grid-column:1 / -1!important;
        grid-row:2!important;
        height:50px!important;
        border-radius:16px!important;
    }

    .ez-header-actions{
        grid-column:3 / -1!important;
        gap:6px!important;
    }

    .ez-lang-btn,
    .ez-text-action,
    .ez-action-link{
        display:none!important;
    }

    .ez-icon-action,
    .ez-icon-btn{
        width:42px!important;
        height:42px!important;
        min-width:42px!important;
        border-radius:14px!important;
    }

    .ez-icon-action img,
    .ez-icon-btn img{
        width:28px!important;
        height:28px!important;
    }

    .ez-menu-btn{
        display:flex!important;
        font-size:24px!important;
    }

    .ez-nav{
        width:100%!important;
        display:none!important;
        padding:8px 10px 12px!important;
        grid-template-columns:repeat(2, minmax(0,1fr))!important;
        gap:8px!important;
        background:white!important;
        border-top:1px solid #eef2ff!important;
        overflow:visible!important;
    }

    .ez-nav.show{
        display:grid!important;
    }

    .ez-nav a{
        width:100%!important;
        text-align:center!important;
        border-radius:14px!important;
        padding:12px 8px!important;
        background:#f8fafc!important;
    }
}

/* MOBILE LOGIN INSIDE MENU */

.ez-mobile-login{
    display:none;
}

@media(max-width:700px){

    .ez-nav .ez-mobile-login{
        display:flex!important;
        width:100%!important;
        min-height:46px!important;
        align-items:center!important;
        justify-content:center!important;
        border-radius:14px!important;
        background:linear-gradient(135deg,#1e5fff,#006edc)!important;
        color:white!important;
        font-weight:900!important;
        grid-column:1 / -1!important;
    }

}


/* =========================================================
   FINAL POLISH: MODALS + MOBILE HEADER
   PEGAR AL FINAL DE style.css
   ========================================================= */

/* El modal siempre debe estar por encima del header */
.modal{
    z-index:50000!important;
    padding:16px!important;
}

.modal.show{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}

/* Caja del login limpia y centrada */
.modal .box,
#loginModal .box{
    width:min(430px, calc(100vw - 28px))!important;
    max-height:calc(100dvh - 32px)!important;
    overflow-y:auto!important;
    border-radius:24px!important;
    padding:26px 22px!important;
    box-shadow:0 30px 80px rgba(15,23,42,.35)!important;
}

/* El header queda debajo del modal */
.header.ez-header{
    z-index:20000!important;
}

/* El drawer sigue encima del contenido, pero debajo del modal */
.drawer{
    width:min(420px, 100vw);
}

@media(max-width:1024px){
    .three{
        grid-template-columns:1fr 1fr;
    }

    .two{
        grid-template-columns:1fr;
    }
}

@media(max-width:760px){
    .container{
        width:100%;
        padding:18px 12px!important;
    }

    .pagehead,
    .panel,
    .order,
    .profile-hero-card,
    .profile-card{
        border-radius:20px!important;
        padding:18px!important;
    }

    .three,
    .two,
    .products{
        grid-template-columns:1fr!important;
        gap:16px;
    }

    .products-pagination,
    .products-pagination-top,
    .products-pagination-bottom{
        align-items:stretch;
        flex-direction:column;
    }

    .products-pagination button,
    .products-page-size button,
    .orders-pagination button{
        min-height:44px;
    }

    .product .row,
    .product-actions,
    .profile-actions,
    .order-head,
    .order-head-actions{
        display:flex;
        flex-direction:column;
        align-items:stretch!important;
        gap:10px;
    }

    .profile-card{
        text-align:left!important;
    }

    .profile-left,
    .profile-actions,
    .profile-meta{
        width:100%;
        justify-content:flex-start!important;
    }

    .profile-photo-shell{
        width:104px!important;
        height:104px!important;
    }

    .order-product{
        grid-template-columns:76px minmax(0, 1fr)!important;
        gap:14px;
    }

    .order-product-image,
    .order-product-image img,
    .order-product img{
        width:76px!important;
        height:76px!important;
    }

    .order-meta{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }

    .summary{
        padding:16px!important;
    }

    .drawer{
        width:100vw!important;
        max-width:100vw!important;
    }
}

@media(max-width:420px){
    .container{
        padding:14px 10px!important;
    }

    .pagehead h1,
    .profile-main h1{
        font-size:clamp(28px, 10vw, 38px)!important;
        line-height:1.05!important;
    }

    .order-product{
        grid-template-columns:1fr!important;
    }

    .order-product-image,
    .order-product-image img,
    .order-product img{
        width:100%!important;
        height:auto!important;
        aspect-ratio:1 / 1;
    }

    .orders-pagination-actions{
        grid-template-columns:1fr!important;
    }
}

.api-missing-box{
    display:flex;
    flex-direction:column;
    gap:6px;
    width:100%;
    margin:12px 0;
    padding:12px 14px;
    border:1px solid #fca5a5;
    border-radius:12px;
    background:#fef2f2;
    color:#7f1d1d;
    font-size:14px;
    line-height:1.35;
}

.api-missing-box strong{
    color:#b91c1c;
    font-weight:900;
}

.api-missing-box span,
.api-missing-box small{
    color:#7f1d1d;
}

.api-missing-box button{
    align-self:flex-start;
    margin-top:4px;
}

:root[data-theme="dark"] .api-missing-box{
    background:#3f1118!important;
    border-color:#ef4444!important;
    color:#fecaca!important;
}

:root[data-theme="dark"] .api-missing-box strong,
:root[data-theme="dark"] .api-missing-box span,
:root[data-theme="dark"] .api-missing-box small{
    color:#fecaca!important;
}

.fraud-picker-empty{
    border:1px dashed #cbd5e1;
    color:#64748b;
    padding:16px;
    border-radius:18px;
    text-align:center;
}

.fraud-safety-confirm{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin-top:14px;
    padding:14px;
    border-radius:18px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
}

.fraud-safety-confirm input{
    width:18px;
    height:18px;
    margin-top:2px;
}

.fraud-safety-confirm label{
    margin:0;
    color:#475569;
    font-weight:700;
    line-height:1.4;
}

.fraud-submit-btn{
    min-height:54px;
    margin-top:18px!important;
    border-radius:18px!important;
}

.fraud-submit-btn:disabled{
    opacity:.65;
    cursor:not-allowed;
}

@media(max-width:900px){
    .customer-fraud-grid{
        grid-template-columns:1fr;
    }

    .customer-fraud-side{
        position:relative;
        top:auto;
    }
}

@media(max-width:700px){
    .customer-fraud-hero,
    .customer-fraud-panel-head,
    .customer-fraud-card-top,
    .fraud-order-choice{
        flex-direction:column;
    }

    .customer-fraud-hero .primary,
    .customer-fraud-panel-head .secondary{
        width:100%;
    }

    .fraud-order-choice span,
    .fraud-order-choice small{
        text-align:left;
    }
}




/* HEADER EZANDOO CLEAN */

.header.ez-header {
    position: sticky;
    top: 0;
    z-index: 20000;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(16px);
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg,#1e5fff,#ff7800) 1;
    box-shadow: 0 10px 30px rgba(15,23,42,.08);
}

.ez-header-top {
    width: min(1450px, calc(100vw - 32px));
    margin: auto;
    min-height: 86px;
    display: grid;
    grid-template-columns: 340px minmax(360px,1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 12px 0;
}

.ez-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.ez-logo {
    width: 170px;
    height: auto;
    object-fit: contain;
}

.ez-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.ez-brand-copy strong {
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
}

.ez-brand-copy small {
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #64748b;
}

.ez-search {
    height: 56px;
    display: flex;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 28px rgba(37,99,235,.08);
}

.ez-search input {
    flex: 1;
    border: 0 !important;
    outline: 0;
    padding: 0 24px;
    font-size: 16px;
    background: transparent;
}

.ez-search button {
    min-width: 130px;
    border: 0;
    background: linear-gradient(135deg,#2563eb,#1d4ed8);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.ez-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.ez-action-btn {
    position: relative;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .2s ease;
}

.ez-action-btn:hover {
    transform: translateY(-2px);
    background: #eff6ff;
}

.ez-action-btn span {
    font-size: 24px;
}

.ez-cart-btn img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: drop-shadow(0 5px 8px rgba(37,99,235,.22));
}

.ez-action-btn em {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ff7800;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 12px rgba(255,120,0,.35);
}

.ez-login-btn {
    border: 0;
    border-radius: 999px;
    padding: 13px 18px;
    background: #0f172a;
    color: #fff !important;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition: .2s ease;
}

.ez-login-btn:hover {
    transform: translateY(-2px);
    background: #2563eb;
}

.ez-nav {
    width: min(1450px, calc(100vw - 32px));
    margin: 0 auto 12px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.ez-nav a,
.ez-mobile-login {
    border: 0;
    text-decoration: none;
    background: #f8fafc;
    color: #0f172a;
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 900;
    transition: .2s ease;
}

.ez-nav a:hover,
.ez-mobile-login:hover {
    background: #2563eb;
    color: #fff;
    transform: translateY(-2px);
}

/* Dynamic marquee */

.ez-marquee {
    width: 100vw;
    margin: 22px 0 0;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    border-radius: 0;
    background: linear-gradient(135deg,#0f172a,#1e3a8a,#ff7800);
    box-shadow: 0 18px 40px rgba(15,23,42,.16);
    position: relative;
}


.ez-marquee::before,
.ez-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    width: 90px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.ez-marquee::before {
    left: 0;
    background: linear-gradient(90deg,rgba(15,23,42,1),transparent);
}

.ez-marquee::after {
    right: 0;
    background: linear-gradient(270deg,rgba(255,120,0,.95),transparent);
}

.ez-marquee-track {
    display: flex;
    width: max-content;
    gap: 18px;
    padding: 16px 0;
    animation: ezMarqueeMove 26s linear infinite;
}

.ez-marquee:hover .ez-marquee-track {
    animation-play-state: paused;
}

.ez-marquee-track span {
    flex: 0 0 auto;
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: .02em;
    padding: 10px 22px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

@keyframes ezMarqueeMove {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* RESPONSIVE */

@media (max-width: 1050px) {
    .ez-header-top {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ez-brand {
        justify-content: center;
    }

    .ez-header-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .ez-nav {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .ez-logo {
        width: 145px;
    }

    .ez-brand-copy {
        display: none;
    }

    .ez-search {
        height: 52px;
    }

    .ez-search button {
        min-width: 96px;
    }

    .ez-marquee-track span {
        font-size: 14px;
        padding: 9px 16px;
    }
}



#langBtn,
#langBtn::before,
#langBtn::after {
    cursor: pointer;
}

#langBtn {
    position: relative;
    z-index: 20;
}

#langBtn * {
    pointer-events: none;
}




/* FIX FINAL ICONOS HEADER EZANDOO */

.ez-action-btn,
.ez-icon-action,
.ez-icon-btn,
#langBtn,
.notifBtn,
.ez-cart-btn {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    border-radius: 20px !important;
    font-size: 34px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

#langBtn {
    font-size: 34px !important;
    line-height: 1 !important;
}

.notifBtn span {
    font-size: 34px !important;
}

.ez-cart-btn img,
.ez-header .cartBtn img,
.cartBtn img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
}

.ez-action-btn em,
#notifCount,
#cartCount {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 26px !important;
    height: 26px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    border-radius: 999px !important;
    background: #ff7800 !important;
    color: #fff !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 7px !important;
}

#langBtn,
#langBtn * {
    pointer-events: auto !important;
    cursor: pointer !important;
}

@media(max-width:700px) {
    .ez-action-btn,
    .ez-icon-action,
    .ez-icon-btn,
    #langBtn,
    .notifBtn,
    .ez-cart-btn {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        font-size: 28px !important;
    }

    .ez-cart-btn img,
    .ez-header .cartBtn img,
    .cartBtn img {
        width: 46px !important;
        height: 46px !important;
    }
}




/* AUTH MODAL FINAL PREMIUM */

#loginModal .box {
    width: min(520px, calc(100vw - 28px)) !important;
    border-radius: 32px !important;
    padding: 32px 28px !important;
    background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
    border: 1px solid #dbeafe !important;
    box-shadow: 0 34px 90px rgba(15, 23, 42, .38) !important;
}

#loginModal .tabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 26px !important;
}

#loginModal .tabs button {
    height: 48px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #dbe3f0 !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
}

#loginModal .tabs button.active {
    background: linear-gradient(135deg, #2563eb, #0b7fff) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 14px 28px rgba(37, 99, 235, .32) !important;
}

#loginModal h2 {
    font-size: 30px !important;
    letter-spacing: -.7px !important;
    margin-bottom: 8px !important;
}

#loginModal label {
    font-size: 15px !important;
    margin-top: 15px !important;
}

#loginModal input {
    height: 54px !important;
    border-radius: 17px !important;
    border: 1px solid #dbe3f0 !important;
    padding: 0 16px !important;
}

#loginModal .primary.full {
    height: 58px !important;
    border-radius: 18px !important;
    margin-top: 20px !important;
}

#loginModal .close {
    background: transparent !important;
    font-size: 28px !important;
    right: 18px !important;
    top: 18px !important;
}

@media(max-width:520px) {
    #loginModal .tabs {
        grid-template-columns: 1fr !important;
    }
}


/* AUTH TABS FINAL ALIGNMENT */

#loginModal .tabs{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:12px !important;
    margin-bottom:30px !important;
    padding-right:50px !important;
}

#loginModal .tabs button{
    white-space:nowrap !important;
    font-size:14px !important;
    padding:0 10px !important;
    min-height:52px !important;
}

#loginModal .tabs button.active{
    background:linear-gradient(135deg,#2563eb,#0b7fff) !important;
    color:white !important;
}

#loginModal .close{
    position:absolute !important;
    top:18px !important;
    right:18px !important;
    width:34px !important;
    height:34px !important;
    z-index:999 !important;
    background:transparent !important;
    font-size:30px !important;
}


/* MARKETPLACE HEADER MENU FINAL */

.ez-nav {
    display: none !important;
}

.ez-menu-btn {
    display: flex !important;
    font-size: 34px !important;
    color: #0f172a !important;
}

.ez-menu-panel {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: max(24px, calc((100vw - 1450px) / 2)) !important;
    width: 280px !important;
    padding: 12px !important;
    background: #ffffff !important;
    border: 1px solid #dbeafe !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22) !important;
    z-index: 30000 !important;
}

.ez-menu-panel.show {
    display: grid !important;
    gap: 8px !important;
}

.ez-menu-panel a,
.ez-menu-panel .ez-mobile-login {
    width: 100% !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-weight: 900 !important;
    text-align: left !important;
}

.ez-menu-panel a:hover,
.ez-menu-panel .ez-mobile-login:hover {
    background: #eef4ff !important;
    color: #2563eb !important;
    transform: none !important;
}

.ez-header {
    position: sticky !important;
}

.ez-header-top {
    grid-template-columns: 310px minmax(360px, 1fr) auto !important;
}

.ez-header-actions {
    gap: 8px !important;
}

/* Hide admin button from the header if another rule shows it */
.ez-header-actions .admin {
    display: none !important;
}

@media(max-width: 1050px) {
    .ez-header-top {
        grid-template-columns: 1fr !important;
    }

    .ez-menu-panel {
        right: 16px !important;
        top: 100% !important;
    }
}


/* MOBILE HEADER FINAL FIX */

@media(max-width:700px){

    .ez-header-top{
        width:100% !important;
        padding:10px 12px !important;
        display:grid !important;
        grid-template-columns:auto 1fr auto auto auto auto !important;
        gap:8px !important;
        align-items:center !important;
    }

    .ez-brand{
        min-width:0 !important;
    }

    .ez-logo{
        width:108px !important;
    }

    .ez-brand-copy{
        display:none !important;
    }

    .ez-header-actions{
        display:flex !important;
        justify-content:flex-end !important;
        gap:6px !important;
        grid-column:3 / -1 !important;
    }

    .ez-login-btn{
        padding:0 12px !important;
        height:44px !important;
        min-width:auto !important;
        font-size:13px !important;
    }

    .ez-header-actions .sell-any{
        display:none !important;
    }

    .ez-header-actions .admin{
        display:none !important;
    }

    .ez-action-btn,
    #langBtn,
    .notifBtn,
    .ez-cart-btn,
    .ez-menu-btn{
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        font-size:24px !important;
    }

    .ez-cart-btn img,
    .cartBtn img{
        width:40px !important;
        height:40px !important;
    }

    .ez-action-btn em,
    #notifCount,
    #cartCount{
        top:-6px !important;
        right:-5px !important;
        min-width:21px !important;
        height:21px !important;
        font-size:11px !important;
    }

    .ez-search{
        grid-column:1 / -1 !important;
        grid-row:2 !important;
        width:100% !important;
        height:48px !important;
        margin-top:6px !important;
        border-radius:16px !important;
    }

    .ez-search input{
        min-width:0 !important;
        padding:0 12px !important;
    }

    .ez-search button{
        min-width:76px !important;
        padding:0 10px !important;
        font-size:13px !important;
    }

    .ez-menu-panel{
        top:100% !important;
        right:12px !important;
        width:min(290px, calc(100vw - 24px)) !important;
    }

    .drawer{
        width:100vw !important;
        max-width:100vw !important;
        right:-100vw !important;
    }

    .drawer.open{
        right:0 !important;
    }

    body.drawer-open{
        overflow:hidden !important;
    }
}

@media(max-width:420px){

    .ez-logo{
        width:96px !important;
    }

    .ez-login-btn{
        display:none !important;
    }

    .ez-action-btn,
    #langBtn,
    .notifBtn,
    .ez-cart-btn,
    .ez-menu-btn{
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        font-size:22px !important;
    }

    .ez-cart-btn img,
    .cartBtn img{
        width:36px !important;
        height:36px !important;
    }
}



/* ECOMMERCE DROPDOWN MENU - UI/UX PREMIUM */

.ez-nav.ez-menu-panel {
    display: none !important;
}

.ez-menu-panel {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: max(18px, calc((100vw - 1450px) / 2)) !important;
    width: 390px !important;
    max-width: calc(100vw - 22px) !important;
    padding: 18px !important;
    background:
        radial-gradient(circle at top right, rgba(37,99,235,.08), transparent 34%),
        linear-gradient(180deg, #ffffff, #f8fbff) !important;
    border: 1px solid #dbeafe !important;
    border-radius: 28px !important;
    box-shadow:
        0 30px 90px rgba(15, 23, 42, .24),
        inset 0 1px 0 rgba(255,255,255,.9) !important;
    z-index: 40000 !important;
    backdrop-filter: blur(18px) !important;
}

.ez-menu-panel.show {
    display: grid !important;
    gap: 16px !important;
    animation: ezMenuDrop .18s ease-out;
}

@keyframes ezMenuDrop {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ez-menu-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 2px 2px 12px !important;
    border-bottom: 1px solid #e5eefb !important;
}

.ez-menu-head strong {
    display: block !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: #0f172a !important;
    letter-spacing: -.5px !important;
}

.ez-menu-head span {
    display: block !important;
    margin-top: 6px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* Priority services */

.ez-menu-main-actions {
    display: grid !important;
    gap: 12px !important;
}

.ez-menu-action {
    min-height: 86px !important;
    border-radius: 22px !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    align-items: center !important;
    gap: 14px !important;
    text-decoration: none !important;
    transition: .2s ease !important;
    overflow: hidden !important;
    position: relative !important;
}

.ez-menu-action::after {
    content: ">";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    font-weight: 900;
    opacity: .6;
}

.ez-menu-action:hover {
    transform: translateY(-2px) !important;
}

.ez-menu-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255,255,255,.22) !important;
    font-size: 24px !important;
}

.ez-menu-action b {
    display: block !important;
    color: inherit !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    padding-right: 22px !important;
}

.ez-menu-action small {
    display: block !important;
    margin-top: 4px !important;
    color: inherit !important;
    opacity: .9 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    padding-right: 20px !important;
}

.ez-menu-buy {
    background: linear-gradient(135deg, #2563eb, #0b7fff) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(37,99,235,.30) !important;
}

.ez-menu-sell {
    background: linear-gradient(135deg, #ff7800, #ff9a1f) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(255,120,0,.26) !important;
}

/* Sections */

.ez-menu-section {
    display: grid !important;
    gap: 7px !important;
    padding-top: 10px !important;
    border-top: 1px solid #eef2ff !important;
}

.ez-menu-section > span {
    padding: 0 4px 4px !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
}

.ez-menu-section a {
    min-height: 48px !important;
    padding: 0 14px !important;
    border-radius: 15px !important;
    display: grid !important;
    grid-template-columns: 28px 1fr !important;
    align-items: center !important;
    gap: 10px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    border: 1px solid #edf2fb !important;
    transition: .18s ease !important;
}

.ez-menu-section a i {
    font-style: normal !important;
    font-size: 18px !important;
}

.ez-menu-section a:hover {
    background: #eef4ff !important;
    color: #2563eb !important;
    border-color: #dbeafe !important;
    transform: translateX(3px) !important;
}

/* Last tools section visually quieter */

.ez-menu-tools a {
    background: #f8fafc !important;
    color: #475569 !important;
}

.ez-menu-tools a:hover {
    color: #dc2626 !important;
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
}

/* Header buttons cleanup */

.ez-header-actions .sell-any,
.ez-header-actions .admin {
    display: none !important;
}

@media(max-width:700px) {
    .ez-menu-panel {
        top: calc(100% + 8px) !important;
        right: 10px !important;
        width: calc(100vw - 20px) !important;
        border-radius: 24px !important;
        padding: 14px !important;
        max-height: calc(100vh - 96px) !important;
        overflow-y: auto !important;
    }

    .ez-menu-action {
        min-height: 78px !important;
    }
}
.orders-pagination{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin:18px 0;
    padding:14px 16px;
    border:1px solid #dbe4f0;
    border-radius:14px;
    background:#fff;
    color:#475569;
    font-weight:700;
}

.orders-pagination-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.orders-pagination button:disabled{
    opacity:.45;
    cursor:not-allowed;
}

@media(max-width:640px){
    .orders-pagination{
        flex-direction:column;
        align-items:stretch;
    }

    .orders-pagination-actions{
        justify-content:space-between;
    }
}

/* =========================================================
   EZANDOO STORE DARK MODE
   ========================================================= */

:root[data-theme="dark"]{
    color-scheme:dark;
    --panel:#111827;
    --panel-2:#0f172a;
    --line:#263449;
    --text:#e5edf8;
    --muted:#9fb0c7;
    --shadow:0 18px 48px rgba(0,0,0,.34);
}

:root[data-theme="dark"] body{
    background:radial-gradient(circle at top, #111827 0%, #0b1120 42%, #070d1a 100%)!important;
    color:var(--text)!important;
}

:root[data-theme="dark"] .header,
:root[data-theme="dark"] .ez-header,
:root[data-theme="dark"] .ez-header-top,
:root[data-theme="dark"] .pagehead,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .product,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .notice,
:root[data-theme="dark"] .order,
:root[data-theme="dark"] .message,
:root[data-theme="dark"] .stat,
:root[data-theme="dark"] .profile,
:root[data-theme="dark"] .drawer,
:root[data-theme="dark"] .modal .box,
:root[data-theme="dark"] .box,
:root[data-theme="dark"] .trust-bar,
:root[data-theme="dark"] .ez-menu-panel,
:root[data-theme="dark"] .cart-item,
:root[data-theme="dark"] .summary{
    background:#111827!important;
    border-color:#263449!important;
    color:#e5edf8!important;
    box-shadow:var(--shadow)!important;
}

:root[data-theme="dark"] .ez-menu-panel{
    background:linear-gradient(180deg,#111827,#0f172a)!important;
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] strong,
:root[data-theme="dark"] b,
:root[data-theme="dark"] .price,
:root[data-theme="dark"] .cart-info b,
:root[data-theme="dark"] .cart-info strong,
:root[data-theme="dark"] .summary b,
:root[data-theme="dark"] .summary div:last-of-type,
:root[data-theme="dark"] .ez-brand-copy strong,
:root[data-theme="dark"] .ez-menu-head strong{
    color:#f8fafc!important;
}

:root[data-theme="dark"] p,
:root[data-theme="dark"] small,
:root[data-theme="dark"] .body p,
:root[data-theme="dark"] .pagehead p,
:root[data-theme="dark"] .profile-main p,
:root[data-theme="dark"] .summary div,
:root[data-theme="dark"] .ez-brand-copy small,
:root[data-theme="dark"] .ez-menu-head span{
    color:#9fb0c7!important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .search,
:root[data-theme="dark"] .search input,
:root[data-theme="dark"] .ez-search,
:root[data-theme="dark"] .ez-search input,
:root[data-theme="dark"] .secondary,
:root[data-theme="dark"] .tabs button,
:root[data-theme="dark"] .ez-menu-section a,
:root[data-theme="dark"] .ez-menu-tools a,
:root[data-theme="dark"] .ez-action-btn,
:root[data-theme="dark"] .ez-login-btn.auth,
:root[data-theme="dark"] .langBtn,
:root[data-theme="dark"] .close,
:root[data-theme="dark"] .drawer-head button{
    background:#182235!important;
    border-color:#263449!important;
    color:#e5edf8!important;
}

:root[data-theme="dark"] .ez-login-btn,
:root[data-theme="dark"] .cartBtn,
:root[data-theme="dark"] .primary{
    color:#fff!important;
}

:root[data-theme="dark"] .ez-action-btn:hover,
:root[data-theme="dark"] .actions a:hover,
:root[data-theme="dark"] .actions button:hover,
:root[data-theme="dark"] .nav a:hover,
:root[data-theme="dark"] .secondary:hover,
:root[data-theme="dark"] .ez-menu-section a:hover{
    background:#23314a!important;
    color:#93c5fd!important;
}

:root[data-theme="dark"] .drawer-head,
:root[data-theme="dark"] .summary{
    background:#0f172a!important;
    border-color:#263449!important;
}

:root[data-theme="dark"] .product img,
:root[data-theme="dark"] .carousel,
:root[data-theme="dark"] .carousel .slide,
:root[data-theme="dark"] .cart-item img{
    background:#0b1120!important;
}

:root[data-theme="dark"] .orders-pagination{
    background:#111827!important;
    border-color:#263449!important;
    color:#c3d0e4!important;
}

:root[data-theme="dark"] #loginModal .box{
    background:linear-gradient(180deg,#111827,#0f172a)!important;
    border-color:#263449!important;
}

.ez-theme-btn{
    font-size:24px!important;
    font-weight:900!important;
}

.ez-theme-btn span{
    font-size:24px!important;
    line-height:1!important;
}
*,
*::before,
*::after{
    box-sizing:border-box;
}

img{
    max-width:100%;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:3px solid rgba(37,99,235,.42);
    outline-offset:2px;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled{
    cursor:not-allowed;
    opacity:.58;
}

.empty{
    overflow-wrap:break-word;
}

.product img,
.order-product-image img,
.cart-item img{
    object-fit:cover;
}

@media(max-width:760px){
    .ez-header-top,
    .ez-header-actions,
    .row,
    .order-head,
    .orders-pagination,
    .orders-pagination-actions{
        min-width:0;
    }

    .ez-search{
        width:100%;
    }

    .ez-search input{
        min-width:0;
    }

    .order-grid{
        grid-template-columns:1fr!important;
    }

    .order-head-actions,
    .orders-pagination-actions{
        width:100%;
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
    }
}

/* =========================================================
   FINAL RESPONSIVE PASS: STORE, PROFILE, ORDERS, CHECKOUT
   ========================================================= */

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

.container,
.pagehead,
.panel,
.profile-page,
.profile-card,
.order,
.drawer,
.three,
.two,
.products,
.products-pagination,
.products-pagination-top,
.products-pagination-bottom{
    min-width:0;
}

.pagehead h1,
.profile-main h1,
.order-head h2,
.product-info-panel h1,
.panel h2{
    overflow-wrap:anywhere;
}

.three{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:20px;
}

.two{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px;
}

.panel input,
.panel select,
.panel textarea,
.profile-card input,
.profile-card select,
.profile-card textarea,
.modal input,
.modal select,
.modal textarea{
    max-width:100%;
    min-width:0;
}

.products-pagination,
.products-pagination-top,
.products-pagination-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.products-page-size{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.order-product,
.order-product-info,
.order-box,
.order-row,
.order-total{
    min-width:0;
}

.order-product-title-link,
.order-seller,
.order-meta,
.order-row span,
.order-total span{
    overflow-wrap:anywhere;
}

.delivery-steps,
.order-progress,
.progress-steps{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.drawer{
    width:min(420px, 100vw);
}

@media(max-width:1024px){
    .three{
        grid-template-columns:1fr 1fr;
    }

    .two{
        grid-template-columns:1fr;
    }
}

@media(max-width:760px){
    .container{
        width:100%;
        padding:18px 12px!important;
    }

    .pagehead,
    .panel,
    .order,
    .profile-hero-card,
    .profile-card{
        border-radius:20px!important;
        padding:18px!important;
    }

    .three,
    .two,
    .products{
        grid-template-columns:1fr!important;
        gap:16px;
    }

    .products-pagination,
    .products-pagination-top,
    .products-pagination-bottom{
        align-items:stretch;
        flex-direction:column;
    }

    .products-pagination button,
    .products-page-size button,
    .orders-pagination button{
        min-height:44px;
    }

    .product .row,
    .product-actions,
    .profile-actions,
    .order-head,
    .order-head-actions{
        display:flex;
        flex-direction:column;
        align-items:stretch!important;
        gap:10px;
    }

    .profile-card{
        text-align:left!important;
    }

    .profile-left,
    .profile-actions,
    .profile-meta{
        width:100%;
        justify-content:flex-start!important;
    }

    .profile-photo-shell{
        width:104px!important;
        height:104px!important;
    }

    .order-product{
        grid-template-columns:76px minmax(0, 1fr)!important;
        gap:14px;
    }

    .order-product-image,
    .order-product-image img,
    .order-product img{
        width:76px!important;
        height:76px!important;
    }

    .order-meta{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }

    .summary{
        padding:16px!important;
    }

    .drawer{
        width:100vw!important;
        max-width:100vw!important;
    }
}

@media(max-width:420px){
    .container{
        padding:14px 10px!important;
    }

    .pagehead h1,
    .profile-main h1{
        font-size:clamp(28px, 10vw, 38px)!important;
        line-height:1.05!important;
    }

    .order-product{
        grid-template-columns:1fr!important;
    }

    .order-product-image,
    .order-product-image img,
    .order-product img{
        width:100%!important;
        height:auto!important;
        aspect-ratio:1 / 1;
    }

    .orders-pagination-actions{
        grid-template-columns:1fr!important;
    }
}

.api-missing-box{
    display:flex;
    flex-direction:column;
    gap:6px;
    width:100%;
    margin:12px 0;
    padding:12px 14px;
    border:1px solid #dbeafe;
    border-radius:12px;
    background:#f8fbff;
    color:#475569;
    font-size:14px;
    line-height:1.35;
}

.api-missing-box strong{
    color:#1d4ed8;
    font-weight:900;
}

.api-missing-box span,
.api-missing-box small{
    color:#475569;
}

.api-missing-box button{
    align-self:flex-start;
    margin-top:4px;
}

:root[data-theme="dark"] .api-missing-box{
    background:#0f172a!important;
    border-color:#1e3a8a!important;
    color:#cbd5e1!important;
}

:root[data-theme="dark"] .api-missing-box strong,
:root[data-theme="dark"] .api-missing-box span,
:root[data-theme="dark"] .api-missing-box small{
    color:#cbd5e1!important;
}

:root[data-theme="dark"] .api-missing-box strong{
    color:#93c5fd!important;
}

/* Notifications, package timelines and seller inventory refinements */
.notifications-actions,
.fb-notification-actions,
.notifications-pagination,
.notifications-pagination div{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.notifications-pagination{
    justify-content:space-between;
    margin-top:16px;
    padding:14px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#f8fafc;
    font-weight:800;
    color:#475569;
}

.notifications-pagination button:disabled{
    opacity:.5;
    cursor:not-allowed;
}

button.fb-notification-action{
    border:none;
    cursor:pointer;
}

.order-package-timeline{
    margin-top:16px;
    padding:14px;
    border:1px solid #dbe4f0;
    border-radius:14px;
    background:#f8fafc;
}

.order-tracking-note{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:14px;
    padding:12px 14px;
    border:1px solid #dbe4f0;
    border-radius:14px;
    background:#f8fafc;
    color:#475569;
    font-size:14px;
}

.order-tracking-note strong{
    color:#0f172a;
    font-weight:900;
}

.order-tracking-note span{
    color:#64748b;
}

.order-package-timeline-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.order-package-events{
    display:grid;
    gap:10px;
}

.order-package-event{
    padding:12px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    background:white;
}

.order-package-event strong,
.order-package-event span{
    display:block;
}

.order-package-event span,
.order-package-event p,
.order-timeline-empty{
    color:#64748b;
    font-size:14px;
}

.order-package-event p{
    margin-top:6px;
}

.seller-stock-summary{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
    color:#0f172a;
    font-weight:800;
}

.seller-stock-summary strong{
    display:inline-grid;
    place-items:center;
    min-width:34px;
    height:28px;
    border-radius:999px;
    background:#eef4ff;
    color:#1e5fff;
}

.seller-stock-locations{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
}

.seller-stock-locations span,
.seller-stock-note{
    display:inline-flex;
    padding:6px 9px;
    border-radius:999px;
    background:#f1f5f9;
    color:#475569;
    font-size:12px;
    font-weight:800;
}

@media(max-width:640px){
    .notifications-actions,
    .notifications-pagination,
    .notifications-pagination div,
    .order-package-timeline-head{
        width:100%;
        align-items:stretch;
        flex-direction:column;
    }
}

/* Polished Facebook-style header notifications */
.ez-header .notif-wrap{
    position:relative !important;
}

.ez-header .notif-dropdown{
    position:absolute !important;
    top:calc(100% + 10px) !important;
    right:-8px !important;
    width:min(430px, calc(100vw - 24px)) !important;
    max-height:min(620px, calc(100vh - 96px));
    display:flex;
    flex-direction:column;
    background:#fff !important;
    border:1px solid #d9e2ef !important;
    border-radius:14px !important;
    box-shadow:0 18px 48px rgba(15,23,42,.22) !important;
    overflow:hidden !important;
    z-index:30000 !important;
}

.ez-header .notif-dropdown.hidden{
    display:none !important;
}

.ez-header .notif-dropdown::before{
    content:"";
    position:absolute;
    top:-7px;
    right:28px;
    width:14px;
    height:14px;
    background:#fff;
    border-left:1px solid #d9e2ef;
    border-top:1px solid #d9e2ef;
    transform:rotate(45deg);
}

.ez-header .notif-dropdown-head{
    position:relative;
    z-index:1;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px;
    padding:14px 16px 10px !important;
    background:#fff !important;
    border:0 !important;
    border-bottom:1px solid #edf2f7 !important;
    border-radius:0 !important;
}

.ez-header .notif-dropdown-head strong{
    color:#111827 !important;
    font-size:20px !important;
    font-weight:900 !important;
    letter-spacing:0 !important;
}

.ez-header .notif-dropdown-head button{
    width:auto !important;
    min-width:0 !important;
    height:auto !important;
    padding:7px 10px !important;
    border:0 !important;
    border-radius:7px !important;
    background:#f1f5f9 !important;
    color:#111827 !important;
    font-size:13px !important;
    font-weight:800 !important;
    line-height:1.1 !important;
    white-space:nowrap;
    cursor:pointer;
}

.ez-header .notif-dropdown-head button:hover{
    background:#e5e7eb !important;
}

.ez-header .notif-dropdown-list{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:8px;
    max-height:430px;
    overflow-y:auto;
    overscroll-behavior:contain;
}

.ez-header .notif-drop-item{
    position:relative;
    display:grid !important;
    grid-template-columns:48px minmax(0, 1fr) 10px;
    align-items:center;
    gap:10px;
    padding:10px 8px !important;
    border-radius:10px !important;
    color:#111827 !important;
    text-decoration:none !important;
    background:#fff !important;
    min-height:68px;
}

.ez-header .notif-drop-item:hover{
    background:#f3f4f6 !important;
}

.ez-header .notif-drop-item.unread{
    background:#eef4ff !important;
}

.ez-header .notif-drop-avatar{
    width:48px !important;
    height:48px !important;
    border-radius:50% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:linear-gradient(135deg,#2563eb,#f97316) !important;
    color:#fff !important;
    font-size:18px !important;
    font-weight:900 !important;
    flex:0 0 auto;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
}

.ez-header .notif-drop-text{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}

.ez-header .notif-drop-message{
    color:#1f2937 !important;
    font-size:14px !important;
    line-height:1.25 !important;
    letter-spacing:0 !important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.ez-header .notif-drop-message strong{
    color:#111827 !important;
    font-size:14px !important;
    font-weight:900 !important;
    margin-right:4px;
}

.ez-header .notif-drop-time{
    color:#2563eb !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
}

.ez-header .notif-read-dot{
    width:9px !important;
    height:9px !important;
    border-radius:50% !important;
    background:#2563eb !important;
    justify-self:center;
}

.ez-header .notif-empty{
    padding:34px 18px !important;
    color:#64748b !important;
    text-align:center !important;
    font-size:14px !important;
    font-weight:700 !important;
}

.ez-header .notif-view-all{
    display:flex !important;
    align-items:center;
    justify-content:center;
    padding:12px 16px !important;
    border-top:1px solid #edf2f7 !important;
    background:#fff !important;
    color:#2563eb !important;
    font-size:14px !important;
    font-weight:900 !important;
    text-decoration:none !important;
}

.ez-header .notif-view-all:hover{
    background:#f8fafc !important;
}

.ez-header .notifBtn #notifCount.hidden{
    display:none !important;
}

.ez-header .cartBtn #cartCount.hidden{
    display:none !important;
}

:root[data-theme="dark"] .ez-header .notif-dropdown,
:root[data-theme="dark"] .ez-header .notif-dropdown::before,
:root[data-theme="dark"] .ez-header .notif-dropdown-head,
:root[data-theme="dark"] .ez-header .notif-view-all{
    background:#111827 !important;
    border-color:#263449 !important;
}

:root[data-theme="dark"] .ez-header .notif-dropdown-head strong,
:root[data-theme="dark"] .ez-header .notif-drop-message,
:root[data-theme="dark"] .ez-header .notif-drop-message strong{
    color:#f8fafc !important;
}

:root[data-theme="dark"] .ez-header .notif-drop-item{
    background:#111827 !important;
}

:root[data-theme="dark"] .ez-header .notif-drop-item:hover{
    background:#182235 !important;
}

:root[data-theme="dark"] .ez-header .notif-drop-item.unread{
    background:#12264a !important;
}

@media(max-width:760px){
    .ez-header .notif-dropdown{
        position:fixed !important;
        top:76px !important;
        left:12px !important;
        right:12px !important;
        width:auto !important;
        max-height:calc(100vh - 92px);
    }

    .ez-header .notif-dropdown::before{
        display:none;
    }

    .ez-header .notif-dropdown-list{
        max-height:calc(100vh - 190px);
    }
}


/* Page-specific styles moved to css/style-extras.css. */

/* Product catalogue cards */
.products{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    align-items:stretch;
}

.product{
    min-width:0;
    border-radius:22px;
}

.product > a:first-child{
    display:block;
    height:220px;
    padding:12px;
    background:#f8fafc;
    overflow:hidden;
}

.product > a:first-child img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    background:transparent;
}

.product .body{
    min-width:0;
    padding:18px;
}

.product .body small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.product .body h3{
    min-height:2.4em;
}

.product .body h3 a{
    color:inherit;
}

.product .body > p{
    min-height:4.35em;
    line-height:1.45;
}

.product .price{
    margin-top:14px;
    line-height:1.1;
}

.product .row{
    width:100%;
    margin-top:12px;
}

.product .row > *{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:50px;
}

@media(max-width:960px){
    .products{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:600px){
    .products{
        grid-template-columns:1fr;
    }

    .product > a:first-child{
        height:auto;
        aspect-ratio:4 / 3;
    }

    .product .body h3,
    .product .body > p{
        min-height:0;
    }
}

/* Accessible show/hide control for every public password field. */
.password-field-wrap{
    position:relative;
    width:100%;
    min-width:0;
}

.password-field-wrap > input{
    width:100%!important;
    padding-right:54px!important;
}

.password-visibility-toggle{
    position:absolute;
    top:50%;
    right:8px;
    transform:translateY(-50%);
    width:40px;
    min-width:40px;
    height:40px;
    min-height:40px;
    padding:0!important;
    display:grid;
    place-items:center;
    border:0!important;
    border-radius:11px!important;
    background:transparent!important;
    color:#52627a!important;
    box-shadow:none!important;
    cursor:pointer;
    z-index:2;
}

.password-visibility-toggle:hover{
    background:#eef4ff!important;
    color:#075dcc!important;
}

.password-visibility-toggle:focus-visible{
    outline:3px solid rgba(37,99,235,.28)!important;
    outline-offset:1px;
}

.password-visibility-toggle svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
    pointer-events:none;
}

:root[data-theme="dark"] .password-visibility-toggle{
    color:#b7c4d8!important;
}

:root[data-theme="dark"] .password-visibility-toggle:hover{
    background:#1d2b45!important;
    color:#bfdbfe!important;
}

@media(max-width:520px){
    .password-visibility-toggle{
        width:44px;
        min-width:44px;
        height:44px;
        min-height:44px;
        right:5px;
    }

    .password-field-wrap > input{
        padding-right:55px!important;
    }
}

/* Final mobile authentication layout: no tab or close-button overlap. */
@media(max-width:520px){
    #loginModal{
        padding:12px!important;
    }

    #loginModal .box{
        width:min(390px, calc(100vw - 24px))!important;
        max-height:calc(100dvh - 24px)!important;
        padding:20px 16px 24px!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
    }

    #loginModal .tabs{
        display:grid!important;
        grid-template-columns:repeat(2, minmax(0, 1fr))!important;
        gap:7px!important;
        margin:38px 0 24px!important;
        padding:0!important;
    }

    #loginModal .tabs button{
        width:100%!important;
        min-width:0!important;
        min-height:44px!important;
        height:auto!important;
        padding:10px 8px!important;
        white-space:normal!important;
        overflow-wrap:anywhere;
        border-radius:14px!important;
        font-size:12px!important;
        line-height:1.15!important;
    }

    #loginModal .tabs button:nth-child(3){
        grid-column:1 / -1;
    }

    #loginModal .close{
        top:12px!important;
        right:12px!important;
        width:40px!important;
        min-width:40px!important;
        height:40px!important;
        min-height:40px!important;
        padding:0!important;
        display:grid!important;
        place-items:center!important;
        border-radius:50%!important;
        background:#f1f5f9!important;
        font-size:25px!important;
        line-height:1!important;
    }

    #loginModal .password-field-wrap > input{
        padding-right:55px!important;
    }
}

@media(max-width:340px){
    #loginModal .tabs{
        grid-template-columns:1fr!important;
    }

    #loginModal .tabs button:nth-child(3){
        grid-column:auto;
    }
}

/* Cross-device compatibility: phone, tablet, laptop and desktop */
img,
video,
canvas,
svg{
    max-width:100%;
}

button,
input,
select,
textarea{
    font:inherit;
}

.ez-mobile-menu-tool{
    width:100%!important;
    min-height:46px!important;
    padding:0 14px!important;
    border:0!important;
    border-radius:14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    background:#f8fafc!important;
    color:#0f172a!important;
    font-weight:900!important;
    text-align:left!important;
    box-shadow:none!important;
}

.ez-mobile-menu-tool:hover,
.ez-mobile-menu-tool:focus-visible{
    background:#eef4ff!important;
    color:#2563eb!important;
}

.table-wrap,
.table-responsive,
.orders-table-wrap,
.admin-table-wrap{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

table{
    max-width:100%;
}

.modal .box,
.edit-modal .modal-content{
    max-width:calc(100vw - 24px)!important;
    max-height:calc(100dvh - 24px)!important;
    overflow-y:auto;
    overscroll-behavior:contain;
}

@media(max-width:1024px){
    .container{
        width:min(100%, 960px);
        padding-left:18px;
        padding-right:18px;
    }

    .product-detail-layout,
    .checkout-layout,
    .profile-layout{
        min-width:0;
    }
}

@media(max-width:700px){
    body{
        min-width:0;
    }

    .container{
        width:100%;
        padding-left:12px!important;
        padding-right:12px!important;
    }

    .ez-header-top{
        grid-template-columns:minmax(88px, 1fr) auto!important;
    }

    .ez-header-actions{
        grid-column:2!important;
        min-width:0!important;
    }

    .ez-header-actions > .ez-login-btn.auth:not(.hidden){
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        height:40px!important;
        min-width:58px!important;
        padding:0 10px!important;
        border:1px solid #dbe3f0!important;
        border-radius:13px!important;
        background:#ffffff!important;
        color:#0f172a!important;
        font-size:12px!important;
        line-height:1!important;
        box-shadow:none!important;
        transform:none!important;
        white-space:nowrap!important;
    }

    .ez-header-actions > .ez-login-btn.auth:not(.hidden):hover{
        border-color:#2563eb!important;
        background:#eef4ff!important;
        color:#1d4ed8!important;
    }

    .ez-search{
        grid-column:1 / -1!important;
    }

    .ez-menu-panel{
        left:10px!important;
        right:10px!important;
        width:auto!important;
        max-width:none!important;
    }

    button,
    .primary,
    .secondary,
    .success{
        min-height:44px;
    }

    input,
    select,
    textarea{
        width:100%;
        max-width:100%;
    }
}

@media(max-width:520px){
    .ez-header-actions #langBtn,
    .ez-header-actions #themeBtn{
        display:none!important;
    }

    .ez-header-actions{
        gap:4px!important;
    }

    .ez-logo{
        width:94px!important;
    }

    .ez-header-actions > .ez-login-btn.auth:not(.hidden){
        display:flex!important;
        height:38px!important;
        min-width:54px!important;
        padding:0 8px!important;
        font-size:11px!important;
    }

    .ez-header-actions .ez-action-btn,
    .ez-header-actions .notifBtn,
    .ez-header-actions .ez-cart-btn,
    .ez-header-actions .ez-menu-btn{
        width:38px!important;
        height:38px!important;
        min-width:38px!important;
    }

    .ez-header-actions .ez-cart-btn img,
    .ez-header-actions .cartBtn img{
        width:34px!important;
        height:34px!important;
    }

    .ez-menu-panel{
        top:76px!important;
        max-height:calc(100dvh - 88px)!important;
    }

    #loginModal .box{
        padding:22px 16px!important;
        border-radius:22px!important;
    }

    #loginModal .tabs{
        grid-template-columns:1fr!important;
        padding-right:42px!important;
        gap:8px!important;
    }

    .product .row{
        display:grid!important;
        grid-template-columns:1fr!important;
    }
}

/* Compact catalogue pagination on phones. */
@media(max-width:520px){
    .products-pagination-top,
    .products-pagination-bottom{
        display:grid!important;
        grid-template-columns:minmax(0, 1fr) auto!important;
        gap:10px 8px!important;
        min-height:0!important;
        padding:11px!important;
        border-radius:16px!important;
    }

    .products-pagination-info{
        grid-column:1 / -1!important;
        justify-content:center!important;
        font-size:13px!important;
        line-height:1.3!important;
    }

    .products-pagination-controls{
        display:grid!important;
        grid-template-columns:38px minmax(78px, 1fr) 38px!important;
        gap:5px!important;
        width:100%!important;
    }

    .products-pagination-controls .page-btn{
        width:38px!important;
        min-width:38px!important;
        min-height:38px!important;
        height:38px!important;
        padding:0!important;
        font-size:0!important;
        border-radius:11px!important;
    }

    .products-pagination-controls .page-btn:first-child::before{
        content:"‹";
        font-size:24px;
        line-height:1;
    }

    .products-pagination-controls .page-btn:last-child::before{
        content:"›";
        font-size:24px;
        line-height:1;
    }

    .products-page-current{
        width:auto!important;
        min-width:0!important;
        min-height:38px!important;
        padding:8px!important;
        font-size:12px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
    }

    .products-page-size{
        justify-content:flex-end!important;
        flex-wrap:nowrap!important;
        gap:4px!important;
    }

    .products-page-size span{
        font-size:12px!important;
    }

    .products-page-size button{
        width:34px!important;
        min-width:34px!important;
        height:38px!important;
        min-height:38px!important;
        border-radius:10px!important;
    }
}

@media(max-width:360px){
    .products-pagination-top,
    .products-pagination-bottom{
        grid-template-columns:1fr!important;
    }

    .products-page-size{
        justify-content:center!important;
    }
}

/* Compact authentication modal on phones. */
@media(max-width:520px){
    #loginModal{
        padding:12px!important;
        align-items:center!important;
    }

    #loginModal .box{
        width:min(390px, calc(100vw - 24px))!important;
        max-height:calc(100dvh - 24px)!important;
        padding:20px 16px!important;
        border-radius:24px!important;
        overflow-y:auto!important;
    }

    #loginModal .tabs{
        display:grid!important;
        grid-template-columns:repeat(3, minmax(0, 1fr))!important;
        gap:6px!important;
        margin:0 42px 22px 0!important;
        padding:0!important;
    }

    #loginModal .tabs button{
        width:100%!important;
        min-width:0!important;
        min-height:44px!important;
        height:44px!important;
        padding:0 6px!important;
        border-radius:14px!important;
        font-size:12px!important;
        white-space:nowrap!important;
    }

    #loginModal .close{
        top:19px!important;
        right:15px!important;
        width:34px!important;
        height:44px!important;
        font-size:28px!important;
        line-height:1!important;
    }

    #loginModal h2{
        margin:0 0 6px!important;
        font-size:27px!important;
    }

    #loginModal label{
        margin-top:12px!important;
    }

    #loginModal input{
        height:50px!important;
    }

    #loginModal .primary.full{
        height:52px!important;
        margin-top:16px!important;
    }
}

/* Header preferences live in the main menu. */
.ez-header-actions > #langBtn,
.ez-header-actions > #themeBtn{
    display:none!important;
}

/* Cleaner responsive account menu. */
.ez-menu-panel{
    width:min(380px, calc(100vw - 24px))!important;
    padding:18px!important;
    gap:0!important;
    border-radius:24px!important;
}

.ez-menu-panel .ez-menu-head{
    margin:0 0 14px!important;
    padding:0 2px 14px!important;
    border-bottom:1px solid #e2e8f0!important;
}

.ez-menu-panel .ez-menu-head strong{
    font-size:20px!important;
}

.ez-menu-panel .ez-menu-head span{
    margin-top:4px!important;
    line-height:1.35!important;
}

.ez-menu-panel .ez-menu-section{
    margin:0!important;
    padding:13px 0!important;
    border-bottom:1px solid #e2e8f0!important;
}

.ez-menu-panel .ez-menu-section:last-child{
    border-bottom:0!important;
    padding-bottom:0!important;
}

.ez-menu-panel .ez-menu-section > span{
    display:block!important;
    margin:0 2px 9px!important;
    color:#64748b!important;
    font-size:11px!important;
    font-weight:900!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
}

.ez-menu-panel .ez-menu-section a,
.ez-menu-panel .ez-mobile-menu-tool{
    min-height:48px!important;
    margin-top:7px!important;
    border:1px solid #edf2f7!important;
    border-radius:14px!important;
    background:#f8fafc!important;
}

.ez-menu-panel .ez-menu-section a:first-of-type,
.ez-menu-panel .ez-menu-section > span + .ez-mobile-menu-tool{
    margin-top:0!important;
}

.ez-menu-panel .ez-menu-main-actions:not(:has(> :not(.hidden))),
.ez-menu-panel .ez-menu-section:not(:has(> a:not(.hidden), > button:not(.hidden))){
    display:none!important;
}

@media(max-width:520px){
    .ez-menu-panel{
        top:146px!important;
        left:12px!important;
        right:12px!important;
        width:auto!important;
        grid-template-columns:1fr!important;
        padding:16px!important;
        border-radius:22px!important;
        max-height:calc(100dvh - 158px)!important;
        overflow-y:auto!important;
    }

    .ez-menu-panel .ez-menu-head,
    .ez-menu-panel .ez-menu-main-actions,
    .ez-menu-panel .ez-menu-section{
        grid-column:1!important;
        width:100%!important;
        min-width:0!important;
    }
}

:root[data-theme="dark"] .ez-header-actions > .ez-login-btn.auth:not(.hidden){
    background:#182235!important;
    border-color:#334155!important;
    color:#f8fafc!important;
}

/* Authentication visibility must override the menu card layout. */
.ez-menu-panel .hidden{
    display:none!important;
}

@media(max-width:520px){
    .ez-logo{
        width:128px!important;
        max-width:none!important;
    }

    .ez-header-actions .ez-menu-btn{
        width:44px!important;
        height:44px!important;
        min-width:44px!important;
        font-size:28px!important;
    }
}

@media(min-width:1440px){
    .container,
    .ez-header-top{
        width:min(100% - 48px, 1400px);
    }

    .products{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

/* Smart sticky header and back-to-top control. */
.ez-header{
    position:sticky!important;
    top:0!important;
    z-index:50!important;
    transition:transform .24s ease, box-shadow .24s ease!important;
    will-change:transform;
}

/* Trusted seller verification check. */
.verified-badge,
.seller-verified-check{
    width:21px!important;
    height:21px!important;
    min-width:21px!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:transparent!important;
    line-height:1!important;
    vertical-align:middle!important;
    box-shadow:none!important;
}

.verified-badge.hidden{
    display:none!important;
}

.product-seller-meta,
.product-seller-name,
.product-detail-seller-name{
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    min-width:0;
}

.product-seller-name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.seller-verified-check{
    flex:0 0 21px!important;
}

.seller-verified-check-large{
    width:21px!important;
    height:21px!important;
    min-width:21px!important;
    flex-basis:21px!important;
    font-size:13px!important;
}

.product-detail-seller-name{
    font-size:22px;
    font-weight:900;
}

.verified-check-image,
.product .verified-check-image,
.seller-verified-check .verified-check-image{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:contain!important;
    background:transparent!important;
    border-radius:0!important;
}

.back-to-top{
    position:fixed;
    right:27px;
    bottom:112px;
    z-index:55;
    width:44px;
    height:44px;
    min-width:44px;
    padding:0;
    border:1px solid #dbe7ff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:#2563eb;
    font-size:0;
    font-weight:900;
    box-shadow:0 8px 22px rgba(15,23,42,.16);
    cursor:pointer;
    transition:transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

.back-to-top::before{
    content:"↑";
    display:block;
    font-size:21px;
    font-family:Arial, sans-serif;
    font-weight:700;
    line-height:1;
}

/* Registration success confirmation. */
.registration-success-modal{
    padding:20px!important;
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
    background:rgba(15,23,42,.66)!important;
}

.registration-success-box{
    width:min(520px, calc(100vw - 32px))!important;
    max-height:calc(100dvh - 32px)!important;
    padding:38px 34px 32px!important;
    overflow-x:hidden!important;
    text-align:center;
    border:1px solid rgba(37,99,235,.16)!important;
    border-radius:28px!important;
    box-shadow:0 30px 90px rgba(15,23,42,.35)!important;
}

.registration-success-close{
    position:absolute;
    top:16px;
    right:16px;
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    background:#f1f5f9;
    color:#334155;
    font-size:27px;
    line-height:1;
    cursor:pointer;
}

.registration-success-icon{
    width:86px;
    height:86px;
    margin:0 auto 18px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(145deg,#2563eb,#0ea5e9);
    box-shadow:0 15px 34px rgba(37,99,235,.3);
}

.registration-success-icon span{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border:3px solid #fff;
    border-radius:50%;
    color:#fff;
    font-size:28px;
    font-weight:900;
}

.registration-success-eyebrow{
    display:block;
    margin-bottom:8px;
    color:#2563eb;
    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.registration-success-box h2{
    margin:0;
    color:#0f172a;
    font-size:clamp(24px,4vw,32px);
    line-height:1.15;
}

.registration-success-lead{
    margin:14px auto 0;
    color:#52627a;
    font-size:16px;
    line-height:1.55;
}

.registration-success-email{
    margin:16px auto 0;
    padding:11px 14px;
    max-width:100%;
    overflow-wrap:anywhere;
    border:1px solid #bfdbfe;
    border-radius:13px;
    background:#eff6ff;
    color:#075dcc;
    font-weight:800;
}

.registration-success-note{
    margin:18px 0 22px;
    padding:15px 16px;
    display:flex;
    align-items:flex-start;
    gap:12px;
    border:1px solid #fed7aa;
    border-radius:16px;
    background:#fff7ed;
    color:#7c3e12;
    text-align:left;
}

.registration-success-note > span{
    flex:0 0 auto;
    font-size:24px;
    line-height:1;
}

.registration-success-note p{
    margin:0;
    font-size:14px;
    line-height:1.5;
}

.registration-success-action{
    min-height:52px;
    border-radius:15px!important;
    font-size:16px!important;
}

:root[data-theme="dark"] .registration-success-box{
    background:#111c33!important;
    border-color:#27456f!important;
}

:root[data-theme="dark"] .registration-success-box h2{color:#f8fafc}
:root[data-theme="dark"] .registration-success-lead{color:#b7c4d8}
:root[data-theme="dark"] .registration-success-close{background:#22304a;color:#f8fafc}
:root[data-theme="dark"] .registration-success-email{background:#102449;border-color:#1d4ed8;color:#bfdbfe}
:root[data-theme="dark"] .registration-success-note{background:#392516;border-color:#9a5a20;color:#fed7aa}

@media(max-width:600px){
    .registration-success-modal{padding:12px!important}
    .registration-success-box{
        width:calc(100vw - 24px)!important;
        max-height:calc(100dvh - 24px)!important;
        padding:32px 18px 22px!important;
        border-radius:22px!important;
    }
    .registration-success-icon{width:72px;height:72px;margin-bottom:15px}
    .registration-success-icon span{width:42px;height:42px;font-size:24px}
    .registration-success-note{padding:13px;margin:16px 0 18px}
}

.back-to-top:hover{
    transform:translateY(-2px);
    background:#2563eb;
    color:#fff;
    box-shadow:0 11px 26px rgba(37,99,235,.28);
}

.back-to-top:focus-visible{
    outline:3px solid rgba(37,99,235,.25);
    outline-offset:3px;
}

.back-to-top.hidden{
    display:none!important;
}

@media(max-width:700px){
    .ez-header.ez-header-hidden{
        transform:translateY(-100%)!important;
    }

    .back-to-top{
        right:20px;
        bottom:108px;
        width:42px;
        height:42px;
        min-width:42px;
    }
}

:root[data-theme="dark"] .back-to-top{
    border-color:#334155;
    background:#111827;
    color:#60a5fa;
    box-shadow:0 8px 22px rgba(0,0,0,.34);
}

:root[data-theme="dark"] .back-to-top:hover{
    border-color:#2563eb;
    background:#2563eb;
    color:#fff;
}

@media(prefers-reduced-motion:reduce){
    .ez-header,
    .back-to-top{
        transition:none!important;
    }

    html{
        scroll-behavior:auto!important;
    }
}

/* Mobile auth override — intentionally last. */
@media(max-width:520px){
    #loginModal{padding:12px!important}
    #loginModal .box{
        width:min(390px, calc(100vw - 24px))!important;
        max-height:calc(100dvh - 24px)!important;
        padding:20px 16px 24px!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
    }
    #loginModal .tabs{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:7px!important;
        margin:38px 0 24px!important;
        padding:0!important;
    }
    #loginModal .tabs button{
        width:100%!important;
        min-width:0!important;
        height:auto!important;
        min-height:44px!important;
        padding:10px 8px!important;
        white-space:normal!important;
        overflow-wrap:anywhere;
        border-radius:14px!important;
        font-size:12px!important;
        line-height:1.15!important;
    }
    #loginModal .tabs button:nth-child(3){grid-column:1 / -1}
    #loginModal .close{
        top:12px!important;
        right:12px!important;
        width:40px!important;
        min-width:40px!important;
        height:40px!important;
        min-height:40px!important;
        padding:0!important;
        display:grid!important;
        place-items:center!important;
        border-radius:50%!important;
        background:#f1f5f9!important;
        font-size:25px!important;
        line-height:1!important;
    }
    #loginModal .password-field-wrap > input{padding-right:55px!important}
}

@media(max-width:340px){
    #loginModal .tabs{grid-template-columns:1fr!important}
    #loginModal .tabs button:nth-child(3){grid-column:auto}
}

/* Calm and professional customer fraud center */
.fraud-customer-head{margin-bottom:18px;padding:30px 32px!important;border:1px solid #e2e8f0;box-shadow:0 14px 36px rgba(30,64,175,.06)}
.fraud-customer-head h1{margin:14px 0 10px;font-size:clamp(30px,4vw,42px);line-height:1.12}
.fraud-customer-head p{max-width:850px;color:#52647c;line-height:1.7}
.customer-fraud-shell{display:grid;gap:20px;margin-bottom:42px}
.customer-fraud-hero{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:28px 30px;border:1px solid #dbe7f5;border-radius:22px;background:linear-gradient(135deg,#fff 0%,#f4f8ff 100%);box-shadow:0 16px 40px rgba(30,64,175,.07)}
.customer-fraud-hero>div{max-width:720px}
.customer-fraud-hero h1{margin:12px 0 8px;font-size:clamp(25px,3vw,34px);line-height:1.2;color:#14233b}
.customer-fraud-hero p,.customer-fraud-panel-head p{margin:0;color:#607087;line-height:1.65}
.customer-fraud-hero .primary{flex:0 0 auto;min-height:48px;padding:0 20px;border-radius:13px;box-shadow:0 10px 22px rgba(37,99,235,.18)}
.customer-fraud-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);gap:20px;align-items:start}
.customer-fraud-panel,.customer-fraud-side{padding:26px;border:1px solid #e2e8f0;border-radius:22px;background:#fff;box-shadow:0 12px 32px rgba(15,23,42,.055)}
.customer-fraud-panel-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #edf2f7}
.customer-fraud-panel h2,.customer-fraud-side h3{margin:0 0 6px;color:#17243a}
.customer-fraud-panel-head .secondary{min-height:42px;padding:0 16px;border-color:#bfd0e8;color:#35506f;background:#fff}
.customer-fraud-side{display:grid;gap:8px}.customer-fraud-side>h3{margin-bottom:10px}
.fraud-help-topic{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid #eef2f7}
.fraud-help-topic>strong,.fraud-help-topic>span{grid-column:2}
.fraud-help-topic::before{content:"";grid-column:1;grid-row:1/span 2;width:34px;height:34px;border-radius:50%;background:#edf4ff;box-shadow:inset 0 0 0 1px #dbeafe}
.fraud-help-topic strong{color:#27364b;font-size:14px;line-height:1.35}.fraud-help-topic span{color:#68788e;font-size:13px;line-height:1.5}
.fraud-safe-box{margin-top:10px;padding:17px 18px;border:1px solid #cce8dc;border-radius:16px;background:#f1faf6}
.fraud-safe-box strong{color:#176245}.fraud-safe-box p{margin:6px 0 0;color:#43675a;font-size:13px;line-height:1.55}
.customer-fraud-empty{padding:34px 22px!important;border:1px dashed #cbd9ea;border-radius:18px;background:#f8fbff;text-align:center}
@media(max-width:900px){.customer-fraud-grid{grid-template-columns:1fr}}
@media(max-width:700px){.fraud-customer-head,.customer-fraud-hero,.customer-fraud-panel,.customer-fraud-side{padding:20px!important}.customer-fraud-hero,.customer-fraud-panel-head{align-items:stretch}}
