*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:Inter,Segoe UI,Arial,sans-serif;
    color:#10243b;
    background:
      radial-gradient(circle at 8% 12%,rgba(0,210,255,.20),transparent 25%),
      radial-gradient(circle at 90% 18%,rgba(112,86,255,.24),transparent 28%),
      linear-gradient(135deg,#061d32 0%,#073c52 42%,#151a49 100%);
    min-height:100vh;
}

.premium-nav{
    height:92px;
    padding:0 42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid rgba(18,80,110,.15);
    box-shadow:0 10px 35px rgba(0,0,0,.16);
    position:sticky;
    top:0;
    z-index:20;
}

.brand{display:flex;align-items:center;gap:13px}
.brand-logo{
    width:48px;height:48px;border-radius:14px;
    display:grid;place-items:center;
    color:white;font-weight:900;font-size:17px;
    background:linear-gradient(145deg,#073b58,#08a6c4);
    box-shadow:0 8px 20px rgba(0,150,190,.28)
}
.brand strong{display:block;letter-spacing:2px;font-size:16px}
.brand small{display:block;color:#7990a4;font-size:9px;letter-spacing:1.5px;margin-top:3px}

.nav-links{
    display:flex;align-items:center;gap:7px;
    padding:7px;
    border-radius:20px;
    background:linear-gradient(135deg,#f0f9ff,#eaf4fb);
    box-shadow:inset 0 0 0 1px #d9e9f3,0 8px 25px rgba(10,70,100,.10)
}
.nav-links a{
    text-decoration:none;
    color:#18344d;
    font-weight:750;
    font-size:13px;
    padding:12px 18px;
    border-radius:13px;
    transition:.2s
}
.nav-links a:hover{background:white;transform:translateY(-1px)}
.nav-links a.active{
    color:white;
    background:linear-gradient(135deg,#069fc0,#0874d1);
    box-shadow:0 7px 18px rgba(0,130,200,.28)
}

.shop-shell{max-width:1120px;margin:20px auto 55px;padding:0 20px}

.premium-hero{
    min-height:185px;
    border-radius:25px;
    padding:30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:white;
    background:
      radial-gradient(circle at 80% 20%,rgba(0,220,255,.30),transparent 30%),
      linear-gradient(115deg,#073248,#086d87 48%,#4053d2);
    border:1px solid rgba(255,255,255,.30);
    box-shadow:0 22px 55px rgba(0,0,0,.25);
    overflow:hidden;
}

.eyebrow{
    font-size:10px;
    letter-spacing:2px;
    font-weight:900;
    color:#50e1ed
}
.premium-hero h1{
    margin:9px 0 8px;
    font-size:31px;
    line-height:1.02;
    letter-spacing:-1.1px
}
.premium-hero h1 span{
    background:linear-gradient(90deg,#8cf4ff,#d5faff);
    -webkit-background-clip:text;
    color:transparent
}
.premium-hero p{margin:0;color:#d9f6fa;font-size:13px}

.hero-stats{display:flex;gap:10px}
.hero-stats div{
    min-width:92px;
    padding:18px 13px;
    text-align:center;
    border:1px solid rgba(255,255,255,.30);
    border-radius:17px;
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(10px)
}
.hero-stats b{display:block;font-size:25px}
.hero-stats small{font-size:8px;letter-spacing:1.5px;color:#d5f7ff}

.catalog-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    margin:22px 0 12px
}
.catalog-head h2{color:white;font-size:20px;margin:6px 0 0}
.search-box{
    display:flex;
    width:365px;
    padding:5px;
    border-radius:16px;
    background:white;
    box-shadow:0 12px 28px rgba(0,0,0,.18)
}
.search-box input{
    flex:1;border:0;outline:0;padding:10px 13px;
    font-size:12px;min-width:0
}
.search-box button{
    border:0;border-radius:12px;
    padding:0 18px;color:white;font-weight:800;
    background:#102940
}

.trust-strip{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:rgba(255,255,255,.96);
    border-radius:16px;
    overflow:hidden;
    margin-bottom:13px;
    box-shadow:0 8px 25px rgba(0,0,0,.14)
}
.trust-strip div{
    padding:11px 13px;
    font-size:11px;
    color:#10a4c0;
    border-right:1px solid #dbe8ef;
    font-weight:900
}
.trust-strip div:last-child{border:0}
.trust-strip span{color:#526d80;font-weight:600;margin-left:6px}

.products-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
    align-items:stretch
}

.product-card{
    background:#fff;
    border-radius:17px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.65);
    box-shadow:0 12px 30px rgba(0,0,0,.18);
    transition:.25s;
    min-width:0
}
.product-card:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 42px rgba(0,0,0,.27)
}

.product-image{
    height:116px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#c7f6ff,#b6d9ff 48%,#d9c8ff)
}
.product-image img{
    width:100%;height:100%;
    object-fit:cover;
    display:block
}
.product-number{
    position:absolute;z-index:3;
    top:8px;left:8px;
    width:23px;height:23px;
    border-radius:50%;
    display:grid;place-items:center;
    color:white;font-size:8px;font-weight:900;
    background:linear-gradient(135deg,#08b7dc,#3759df);
    box-shadow:0 4px 12px rgba(0,80,180,.35)
}
.premium-badge{
    position:absolute;z-index:3;right:7px;top:8px;
    background:#132e42;color:white;
    border-radius:20px;padding:5px 8px;
    font-size:7px;font-weight:900;letter-spacing:1px
}
.image-fallback{
    position:absolute;inset:0;
    display:grid;place-content:center;
    text-align:center;
    color:#087c9c;
    background:
      radial-gradient(circle at 30% 20%,#fff6,transparent 35%),
      linear-gradient(135deg,#bff5ff,#c8d8ff,#d9c8ff)
}
.image-fallback b{font-size:14px;letter-spacing:2px}
.image-fallback span{font-size:7px;letter-spacing:1.5px;margin-top:5px}

.product-image:not(.no-image) .image-fallback{display:none}

.product-body{padding:11px}
.category{
    font-size:7px;
    color:#0c9fc0;
    letter-spacing:1.2px;
    text-transform:uppercase;
    font-weight:900
}
.product-body h3{
    margin:5px 0 6px;
    font-size:13px;
    line-height:1.18;
    min-height:30px
}
.sku{
    margin:0 0 8px;
    color:#93a6b4;
    font-size:7px;
    letter-spacing:.7px
}
.price{font-size:15px;font-weight:900;color:#102940}
.stock{
    margin-top:3px;
    font-size:7px;
    font-weight:900;
    color:#078d67
}
.stock.out{color:#c24a4a}

.product-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    margin-top:10px
}
.product-actions form{margin:0}
.details-btn,.cart-btn{
    width:100%;
    min-height:31px;
    border-radius:9px;
    display:grid;
    place-items:center;
    text-decoration:none;
    font-size:8px;
    font-weight:850;
    cursor:pointer
}
.details-btn{
    border:1px solid #d8e6ee;
    background:white;
    color:#34566d
}
.cart-btn{
    border:0;
    color:white;
    background:linear-gradient(135deg,#0aa6c2,#087bd1);
    box-shadow:0 5px 12px rgba(0,130,190,.22)
}
.cart-btn.disabled{background:#aab8c1;box-shadow:none}

.empty-state{
    padding:50px;
    text-align:center;
    background:white;
    border-radius:20px
}

.premium-footer{
    max-width:1180px;
    margin:0 auto 20px;
    padding:18px 28px;
    border-radius:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#d7edf5;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.12)
}
.premium-footer strong{display:block;letter-spacing:2px;font-size:12px}
.premium-footer span{font-size:9px;color:#8eb2c2}
.premium-footer p{font-size:9px;margin:0;color:#a9cfda}

@media(max-width:900px){
    .products-grid{grid-template-columns:repeat(3,1fr)}
    .premium-nav{padding:0 20px}
    .nav-links a{padding:10px}
}
@media(max-width:650px){
    .premium-nav{height:auto;padding:15px;gap:12px;flex-direction:column}
    .catalog-head{align-items:stretch;flex-direction:column;gap:12px}
    .search-box{width:100%}
    .trust-strip{grid-template-columns:1fr 1fr}
    .products-grid{grid-template-columns:repeat(2,1fr)}
    .premium-hero{flex-direction:column;align-items:flex-start;gap:20px}
    .premium-footer{margin:0 10px 15px;flex-direction:column;align-items:flex-start;gap:10px}
}

/* =========================================================
   AQUA MIRA TECH — PREMIUM CUSTOMER DASHBOARD UI
   Scoped only to .dashboard-page
   ========================================================= */

.dashboard-page{
    min-height:100vh;
    margin:0;
    padding:0;
    color:#eaf7ff;
    background:
        radial-gradient(circle at 15% 10%,rgba(52,211,153,.16),transparent 30%),
        radial-gradient(circle at 85% 15%,rgba(96,165,250,.18),transparent 32%),
        linear-gradient(135deg,#062f3d 0%,#0b4050 42%,#18265f 100%);
}

.dashboard-page nav{
    width:calc(100% - 48px);
    margin:24px auto 0;
    padding:16px 24px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    gap:22px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:18px;
    background:rgba(7,24,45,.48);
    box-shadow:0 14px 40px rgba(0,0,0,.22);
    backdrop-filter:blur(14px);
}

.dashboard-page nav b{
    font-size:20px;
    letter-spacing:.5px;
    color:#d9fbff;
}

.dashboard-page nav span{
    flex:1;
    font-size:14px;
    color:#b9dce8;
}

.dashboard-page nav a{
    color:#ffffff;
    text-decoration:none;
    padding:9px 16px;
    border-radius:10px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.14);
    transition:.2s ease;
}

.dashboard-page nav a:hover{
    background:rgba(255,255,255,.20);
    transform:translateY(-1px);
}

.dashboard-page main{
    width:calc(100% - 48px);
    max-width:1400px;
    margin:42px auto 60px;
}

.dashboard-page main h1{
    margin:0 0 28px;
    font-size:36px;
    line-height:1.1;
    color:#ffffff;
    letter-spacing:.2px;
}

.dashboard-page .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.dashboard-page .tile{
    min-height:120px;
    padding:24px;
    box-sizing:border-box;
    display:flex;
    align-items:flex-end;
    text-decoration:none;
    color:#ffffff;
    font-size:19px;
    font-weight:700;
    letter-spacing:.2px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.16);
    background:
        linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.055));
    box-shadow:0 14px 34px rgba(0,0,0,.20);
    backdrop-filter:blur(12px);
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.dashboard-page .tile:hover{
    transform:translateY(-6px);
    border-color:rgba(255,255,255,.34);
    box-shadow:0 20px 44px rgba(0,0,0,.30);
}

@media (max-width:700px){
    .dashboard-page nav{
        width:calc(100% - 24px);
        margin-top:12px;
        padding:14px;
        flex-wrap:wrap;
    }

    .dashboard-page nav span{
        order:3;
        flex-basis:100%;
    }

    .dashboard-page main{
        width:calc(100% - 24px);
        margin-top:28px;
    }

    .dashboard-page main h1{
        font-size:28px;
    }

    .dashboard-page .grid{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   AQUA MIRA TECH - PREMIUM CUSTOMER CART
   ========================================================= */

.cart-page {
    max-width: 1180px;
    margin: 42px auto;
    padding: 0 24px 60px;
}

.cart-page h1 {
    margin: 0 0 28px;
    color: #ffffff;
    font-size: 34px;
    font-weight: 800;
}

.cart-card {
    background: rgba(255,255,255,.97);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 22px 55px rgba(0,0,0,.20);
    overflow-x: auto;
}

.cart-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.cart-table th {
    background: #0d2942;
    color: #ffffff;
    padding: 16px 14px;
    text-align: left;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cart-table th:first-child {
    border-radius: 12px 0 0 12px;
}

.cart-table th:last-child {
    border-radius: 0 12px 12px 0;
}

.cart-table td {
    padding: 18px 14px;
    border-bottom: 1px solid #e7eef4;
    color: #17324a;
    font-weight: 600;
}

.cart-product {
    font-weight: 800;
    color: #0d2942;
}

.cart-sku {
    color: #70869a;
    font-size: 13px;
}

.cart-price,
.cart-total {
    font-weight: 800;
    white-space: nowrap;
}

.cart-qty {
    width: 70px;
    padding: 9px 10px;
    border: 1px solid #cbd9e4;
    border-radius: 9px;
    font-weight: 700;
}

.cart-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cart-btn {
    border: 0;
    border-radius: 9px;
    padding: 9px 14px;
    background: #079bd3;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

.cart-btn:hover {
    transform: translateY(-1px);
}

.cart-btn.remove {
    background: #17324a;
}

.cart-summary {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 28px;
}

.cart-subtotal {
    color: #0d2942;
    font-size: 23px;
    font-weight: 900;
}

.checkout-btn {
    display: inline-block;
    padding: 14px 24px;
    border-radius: 13px;
    background: linear-gradient(135deg,#08a7dc,#1768d8);
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 900;
    box-shadow: 0 10px 25px rgba(0,120,210,.25);
}

.checkout-btn:hover {
    transform: translateY(-2px);
}

.cart-empty {
    background: rgba(255,255,255,.97);
    border-radius: 24px;
    padding: 50px;
    text-align: center;
    color: #17324a;
    box-shadow: 0 22px 55px rgba(0,0,0,.20);
}

/* =========================================================
   CART PAGE - DIRECT PREMIUM OVERRIDE
   Works with existing cart.html structure
   ========================================================= */

body:has(main table) {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 15%, rgba(20,190,210,.16), transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(60,100,230,.18), transparent 32%),
        linear-gradient(135deg,#063f4d 0%,#073e50 42%,#1d326e 100%);
    color: #17324a;
}

body:has(main table) > nav {
    margin: 20px 24px 0;
    padding: 18px 24px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 20px;
    background: linear-gradient(100deg,rgba(5,39,58,.96),rgba(13,51,86,.94));
    box-shadow: 0 14px 35px rgba(0,0,0,.22);
    display: flex;
    align-items: center;
    gap: 20px;
}

body:has(main table) > nav b {
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
}

body:has(main table) > nav span {
    color: #ccecf5;
    font-weight: 700;
}

body:has(main table) > nav a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 800;
    padding: 9px 14px;
    border-radius: 10px;
}

body:has(main table) > nav a:hover {
    background: rgba(255,255,255,.12);
}

body:has(main table) > main {
    max-width: 1180px;
    margin: 42px auto;
    padding: 0 24px 60px;
}

body:has(main table) > main h1 {
    color: #ffffff;
    font-size: 38px;
    font-weight: 900;
    margin-bottom: 28px;
}

body:has(main table) table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(255,255,255,.98);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.22);
}

body:has(main table) th {
    background: linear-gradient(100deg,#0b2942,#123c5d);
    color: #ffffff;
    padding: 17px 15px;
    text-align: left;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

body:has(main table) td {
    padding: 18px 15px;
    color: #17324a;
    font-weight: 650;
    border-bottom: 1px solid #e5edf3;
}

body:has(main table) tr:last-child td {
    border-bottom: 0;
}

body:has(main table) input[type="number"] {
    width: 62px;
    padding: 9px 8px;
    border: 1px solid #c7d7e3;
    border-radius: 9px;
    font-weight: 800;
}

body:has(main table) button {
    border: 0;
    border-radius: 9px;
    padding: 9px 14px;
    background: linear-gradient(135deg,#079ed6,#0878c7);
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

body:has(main table) button:hover {
    transform: translateY(-1px);
}

body:has(main table) main > h2,
body:has(main table) main > h3 {
    color: #ffffff;
    margin-top: 28px;
}

body:has(main table) main > p {
    color: #ffffff;
    font-size: 23px;
    font-weight: 900;
}

body:has(main table) main > a {
    display: inline-block;
    margin-top: 12px;
    padding: 14px 24px;
    border-radius: 13px;
    background: linear-gradient(135deg,#08a7dc,#1768d8);
    color: #ffffff;
    text-decoration: none;
    font-weight: 900;
    box-shadow: 0 10px 25px rgba(0,120,210,.25);
}

body:has(main table) main > a:hover {
    transform: translateY(-2px);
}

/* =========================================================
   AQUA MIRA TECH - PREMIUM CHECKOUT
   ========================================================= */

.checkout-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 12%, rgba(17,205,219,.16), transparent 30%),
        radial-gradient(circle at 88% 16%, rgba(67,103,230,.20), transparent 32%),
        linear-gradient(135deg,#063f4d 0%,#073e50 42%,#1d326e 100%);
    color: #17324a;
}

.checkout-nav {
    margin: 20px 24px 0;
    padding: 16px 22px;
    min-height: 64px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 20px;
    background: linear-gradient(100deg,rgba(5,39,58,.96),rgba(13,51,86,.94));
    box-shadow: 0 14px 35px rgba(0,0,0,.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.checkout-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.checkout-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#08b6df,#1768d8);
    color: #ffffff;
    font-weight: 950;
    box-shadow: 0 7px 18px rgba(0,160,220,.30);
}

.checkout-brand-name {
    color: #ffffff;
    font-size: 16px;
    font-weight: 950;
    letter-spacing: .12em;
}

.checkout-brand-sub {
    color: #a8d7e4;
    font-size: 9px;
    letter-spacing: .14em;
    margin-top: 2px;
}

.checkout-nav-links {
    display: flex;
    align-items: center;
    gap: 7px;
}

.checkout-nav-links a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px 13px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 13px;
}

.checkout-nav-links a:hover {
    background: rgba(255,255,255,.12);
}

.checkout-page {
    max-width: 1180px;
    margin: 40px auto;
    padding: 0 24px 70px;
}

.checkout-title-block {
    color: #ffffff;
    margin-bottom: 26px;
}

.checkout-eyebrow,
.checkout-step {
    color: #39d9ed;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .14em;
}

.checkout-title-block h1 {
    margin: 7px 0 5px;
    color: #ffffff;
    font-size: 38px;
    font-weight: 950;
}

.checkout-title-block p {
    margin: 0;
    color: #c4e5ed;
    font-weight: 600;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 24px;
    align-items: start;
}

.checkout-main {
    display: grid;
    gap: 22px;
}

.checkout-card,
.summary-card {
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 22px;
    padding: 26px;
    box-shadow: 0 22px 55px rgba(0,0,0,.20);
}

.checkout-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.checkout-card h2,
.summary-card h2 {
    margin: 5px 0 0;
    color: #0d2942;
    font-size: 24px;
    font-weight: 950;
}

.checkout-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #e8f7fb;
    font-size: 21px;
}

.checkout-label {
    display: block;
    color: #17324a;
    font-size: 13px;
    font-weight: 850;
    margin-bottom: 8px;
}

.address-select {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border: 1px solid #c8d8e3;
    border-radius: 11px;
    background: #ffffff;
    color: #17324a;
    font-weight: 700;
}

.checkout-primary,
.checkout-secondary {
    margin-top: 17px;
    border: 0;
    border-radius: 12px;
    padding: 13px 22px;
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
}

.checkout-primary {
    background: linear-gradient(135deg,#08a7dc,#1768d8);
    box-shadow: 0 10px 24px rgba(0,120,210,.23);
}

.checkout-secondary {
    background: linear-gradient(135deg,#0a4964,#087f9d);
}

.checkout-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px;
}

.checkout-form label {
    display: grid;
    gap: 7px;
    color: #17324a;
    font-size: 12px;
    font-weight: 850;
}

.checkout-form label.wide,
.checkout-form .wide {
    grid-column: 1 / -1;
}

.checkout-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 13px;
    border: 1px solid #c8d8e3;
    border-radius: 10px;
    background: #ffffff;
    color: #17324a;
    font-size: 14px;
    font-weight: 600;
    outline: none;
}

.checkout-form input:focus,
.address-select:focus {
    border-color: #0ba4d5;
    box-shadow: 0 0 0 3px rgba(11,164,213,.12);
}

.no-address {
    text-align: center;
    padding: 22px 10px 10px;
}

.no-address-icon {
    font-size: 34px;
}

.no-address h3 {
    margin: 10px 0 5px;
    color: #0d2942;
}

.no-address p {
    margin: 0;
    color: #70869a;
}

.summary-card {
    position: sticky;
    top: 20px;
}

.summary-items {
    margin: 18px 0;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 0;
    border-bottom: 1px solid #e5edf3;
}

.summary-item strong {
    display: block;
    color: #0d2942;
    font-size: 13px;
}

.summary-item span {
    display: block;
    margin-top: 4px;
    color: #70869a;
    font-size: 11px;
    font-weight: 700;
}

.summary-item b {
    color: #0d2942;
    white-space: nowrap;
}

.summary-line,
.summary-total {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    color: #506b7d;
    font-weight: 700;
}

.summary-total {
    margin-top: 8px;
    padding-top: 17px;
    border-top: 2px solid #dce8ef;
    color: #0d2942;
    font-size: 21px;
    font-weight: 950;
}

.secure-checkout {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
    padding: 14px;
    border-radius: 13px;
    background: #eef9f5;
}

.secure-checkout > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #159a72;
    color: #ffffff;
    font-weight: 900;
}

.secure-checkout strong {
    display: block;
    color: #17664f;
    font-size: 12px;
}

.secure-checkout small {
    display: block;
    margin-top: 3px;
    color: #638579;
}

@media (max-width: 850px) {
    .checkout-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .checkout-nav-links {
        flex-wrap: wrap;
    }

    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .summary-card {
        position: static;
    }
}

@media (max-width: 600px) {
    .checkout-page {
        padding-left: 15px;
        padding-right: 15px;
    }

    .checkout-form {
        grid-template-columns: 1fr;
    }

    .checkout-form label.wide,
    .checkout-form .wide {
        grid-column: auto;
    }

    .checkout-title-block h1 {
        font-size: 30px;
    }
}

/* =========================================================
   AQUA MIRA TECH - PREMIUM ORDER DETAIL
   ========================================================= */

.order-detail-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 12%, rgba(17,205,219,.16), transparent 30%),
        radial-gradient(circle at 88% 16%, rgba(67,103,230,.20), transparent 32%),
        linear-gradient(135deg,#063f4d 0%,#073e50 42%,#1d326e 100%);
    color: #17324a;
}

.order-nav {
    margin: 20px 24px 0;
    padding: 16px 22px;
    min-height: 64px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 20px;
    background: linear-gradient(100deg,rgba(5,39,58,.96),rgba(13,51,86,.94));
    box-shadow: 0 14px 35px rgba(0,0,0,.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.order-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#08b6df,#1768d8);
    color: #ffffff;
    font-weight: 950;
}

.order-brand-name {
    color: #ffffff;
    font-size: 16px;
    font-weight: 950;
    letter-spacing: .12em;
}

.order-brand-sub {
    color: #a8d7e4;
    font-size: 9px;
    letter-spacing: .14em;
}

.order-nav-links {
    display: flex;
    gap: 7px;
}

.order-nav-links a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 13px;
}

.order-nav-links a:hover {
    background: rgba(255,255,255,.12);
}

.order-detail-page {
    max-width: 1180px;
    margin: 40px auto;
    padding: 0 24px 70px;
}

.order-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 25px;
    color: #ffffff;
}

.order-eyebrow,
.order-section-label {
    color: #39d9ed;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .14em;
}

.order-hero h1 {
    margin: 7px 0 5px;
    color: #ffffff;
    font-size: 38px;
    font-weight: 950;
}

.order-hero p {
    margin: 0;
    color: #c4e5ed;
    font-weight: 600;
}

.order-status-badge {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 18px;
    border-radius: 14px;
    background: rgba(22,154,114,.20);
    border: 1px solid rgba(70,220,175,.30);
    color: #ffffff;
    font-weight: 950;
}

.order-status-badge span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #159a72;
}

.order-status-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 22px;
}

.order-status-card {
    padding: 19px 21px;
    border-radius: 17px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 15px 35px rgba(0,0,0,.17);
}

.status-label {
    display: block;
    color: #71879a;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .12em;
}

.order-status-card strong {
    display: block;
    margin-top: 7px;
    color: #0d2942;
    font-size: 20px;
    font-weight: 950;
}

.payment-status strong {
    color: #b36b00;
}

.order-address-card,
.order-items-card {
    background: rgba(255,255,255,.98);
    border-radius: 22px;
    padding: 26px;
    margin-bottom: 22px;
    box-shadow: 0 22px 55px rgba(0,0,0,.20);
}

.order-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.order-section-heading h2 {
    margin: 5px 0 0;
    color: #0d2942;
    font-size: 24px;
    font-weight: 950;
}

.order-section-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #e8f7fb;
    font-size: 21px;
}

.delivery-details {
    padding: 18px;
    border-radius: 14px;
    background: #f4f9fc;
    border: 1px solid #e2edf3;
}

.delivery-details strong {
    display: block;
    color: #0d2942;
    font-size: 17px;
}

.delivery-details span {
    display: block;
    margin-top: 4px;
    color: #5d778b;
    font-weight: 700;
}

.delivery-details p {
    margin: 14px 0 0;
    color: #36556a;
    line-height: 1.65;
    font-weight: 600;
}

.order-table-wrap {
    overflow-x: auto;
}

.order-items-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.order-items-table th {
    padding: 15px;
    background: #0d2942;
    color: #ffffff;
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.order-items-table th:first-child {
    border-radius: 11px 0 0 11px;
}

.order-items-table th:last-child {
    border-radius: 0 11px 11px 0;
}

.order-items-table td {
    padding: 17px 15px;
    border-bottom: 1px solid #e5edf3;
    color: #36556a;
    font-weight: 650;
}

.order-items-table td strong {
    color: #0d2942;
}

.order-total-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 35px;
    padding-top: 20px;
    color: #0d2942;
    font-size: 21px;
    font-weight: 950;
}

.order-total-row strong {
    font-size: 25px;
}

.order-actions {
    display: flex;
    gap: 14px;
}

.order-actions a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 23px;
    border-radius: 13px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 900;
    box-shadow: 0 10px 25px rgba(0,0,0,.16);
}

.order-payment-btn {
    background: linear-gradient(135deg,#08a7dc,#1768d8);
}

.order-invoice-btn {
    background: linear-gradient(135deg,#0a4964,#087f9d);
}

.order-actions a:hover {
    transform: translateY(-2px);
}

@media (max-width: 800px) {
    .order-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .order-status-row {
        grid-template-columns: 1fr;
    }

    .order-hero {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .order-detail-page {
        padding-left: 15px;
        padding-right: 15px;
    }

    .order-actions {
        flex-direction: column;
    }

    .order-actions a {
        justify-content: center;
    }
}

/* =========================================================
   AQUA MIRA TECH - PREMIUM INVOICE
   ========================================================= */

.invoice-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 10%, rgba(18,205,220,.16), transparent 30%),
        radial-gradient(circle at 90% 15%, rgba(72,105,230,.20), transparent 32%),
        linear-gradient(135deg,#063f4d 0%,#073e50 42%,#1d326e 100%);
    color: #17324a;
}

.invoice-nav {
    margin: 20px 24px 0;
    padding: 16px 22px;
    min-height: 64px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 20px;
    background: linear-gradient(100deg,rgba(5,39,58,.96),rgba(13,51,86,.94));
    box-shadow: 0 14px 35px rgba(0,0,0,.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.invoice-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.invoice-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#08b6df,#1768d8);
    color: white;
    font-weight: 950;
}

.invoice-brand-name {
    color: white;
    font-size: 16px;
    font-weight: 950;
    letter-spacing: .12em;
}

.invoice-brand-sub {
    color: #a8d7e4;
    font-size: 9px;
    letter-spacing: .14em;
}

.invoice-nav-links {
    display: flex;
    gap: 8px;
}

.invoice-nav-links a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 850;
}

.invoice-nav-links a:hover {
    background: rgba(255,255,255,.12);
}

.invoice-page {
    max-width: 1180px;
    margin: 38px auto;
    padding: 0 24px 70px;
}

.invoice-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    color: white;
    margin-bottom: 20px;
}

.invoice-eyebrow,
.invoice-label {
    color: #39d9ed;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .14em;
}

.invoice-header-card h1 {
    margin: 7px 0 5px;
    color: white;
    font-size: 40px;
    font-weight: 950;
}

.invoice-header-card p {
    margin: 0;
    color: #c4e5ed;
    font-weight: 600;
}

.invoice-paid-badge {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 19px;
    border-radius: 14px;
    color: white;
    background: rgba(22,154,114,.22);
    border: 1px solid rgba(70,220,175,.35);
    font-weight: 950;
}

.invoice-paid-badge span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #159a72;
}

.invoice-meta-card {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.invoice-meta-block {
    padding: 18px 20px;
    background: rgba(255,255,255,.97);
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,.17);
}

.invoice-meta-block span {
    display: block;
    color: #71879a;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .1em;
}

.invoice-meta-block strong {
    display: block;
    margin-top: 7px;
    color: #0d2942;
    font-size: 15px;
}

.invoice-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 20px;
}

.invoice-info-card,
.invoice-items-card,
.invoice-footer-card {
    background: rgba(255,255,255,.98);
    border-radius: 21px;
    box-shadow: 0 22px 55px rgba(0,0,0,.20);
}

.invoice-info-card {
    padding: 24px;
}

.invoice-info-card h2 {
    margin: 8px 0 6px;
    color: #0d2942;
    font-size: 20px;
}

.invoice-info-card p {
    margin: 0;
    color: #456276;
    line-height: 1.6;
    font-weight: 600;
}

.invoice-items-card {
    padding: 26px;
    margin-bottom: 20px;
}

.invoice-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 19px;
}

.invoice-section-title h2 {
    margin: 5px 0 0;
    color: #0d2942;
    font-size: 24px;
}

.invoice-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #e8f7fb;
    font-size: 21px;
}

.invoice-table-wrap {
    overflow-x: auto;
}

.invoice-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.invoice-table th {
    padding: 15px;
    background: #0d2942;
    color: white;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.invoice-table th:first-child {
    border-radius: 11px 0 0 11px;
}

.invoice-table th:last-child {
    border-radius: 0 11px 11px 0;
}

.invoice-table td {
    padding: 17px 15px;
    border-bottom: 1px solid #e5edf3;
    color: #36556a;
    font-weight: 650;
}

.invoice-table td strong {
    color: #0d2942;
}

.invoice-summary {
    margin-left: auto;
    max-width: 390px;
    padding-top: 19px;
}

.invoice-summary-row,
.invoice-summary-total {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    color: #547084;
    font-weight: 750;
}

.invoice-summary-total {
    margin-top: 8px;
    padding-top: 17px;
    border-top: 1px solid #dbe6ec;
    color: #0d2942;
    font-size: 23px;
    font-weight: 950;
}

.invoice-footer-card {
    padding: 22px 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.invoice-footer-card > div:first-child strong {
    display: block;
    margin-top: 7px;
    color: #159a72;
    font-size: 18px;
}

.invoice-secure {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 12px;
    background: #eefaf5;
}

.invoice-secure > span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #159a72;
    color: white;
    font-weight: 950;
}

.invoice-secure strong {
    display: block;
    color: #16634f;
    font-size: 13px;
}

.invoice-secure small {
    color: #5b8377;
}

.invoice-actions {
    display: flex;
    gap: 12px;
}

.invoice-actions a,
.invoice-actions button {
    border: 0;
    cursor: pointer;
    text-decoration: none;
    padding: 14px 21px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 14px;
}

.invoice-back-btn {
    color: white;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25) !important;
}

.invoice-print-btn {
    color: white;
    background: linear-gradient(135deg,#08a7dc,#1768d8);
    box-shadow: 0 10px 25px rgba(0,0,0,.16);
}

.invoice-actions a:hover,
.invoice-actions button:hover {
    transform: translateY(-2px);
}

@media (max-width: 800px) {
    .invoice-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .invoice-meta-card,
    .invoice-info-grid {
        grid-template-columns: 1fr;
    }

    .invoice-header-card,
    .invoice-footer-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media print {
    .invoice-body {
        background: white;
    }

    .invoice-nav,
    .invoice-actions {
        display: none !important;
    }

    .invoice-page {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .invoice-header-card {
        color: #000;
    }

    .invoice-header-card h1 {
        color: #000;
    }
}

/* =========================================================
   AQUA MIRA TECH - PREMIUM INVOICE
   ========================================================= */

.invoice-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 10%, rgba(0,210,255,.16), transparent 28%),
        radial-gradient(circle at 85% 20%, rgba(80,100,255,.18), transparent 30%),
        linear-gradient(135deg,#063f4b 0%,#0a3148 45%,#172c63 100%);
    color: #102d49;
}

.invoice-header {
    width: calc(100% - 48px);
    margin: 18px 24px 0;
    padding: 16px 22px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(5,31,54,.78);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
    box-sizing: border-box;
}

.invoice-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.invoice-logo {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#10bde8,#1976e8);
    color: white;
    font-weight: 900;
    box-shadow: 0 8px 22px rgba(0,180,255,.28);
}

.invoice-brand-name {
    color: white;
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 15px;
}

.invoice-brand-sub {
    color: #8fdff3;
    font-size: 8px;
    letter-spacing: 1.5px;
    margin-top: 2px;
}

.invoice-nav {
    display: flex;
    gap: 24px;
}

.invoice-nav a {
    color: white !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
}

.invoice-nav a:hover {
    color: #58dcff !important;
}

.invoice-wrap {
    max-width: 980px;
    margin: 34px auto 70px;
    padding: 0 24px;
}

.invoice-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 24px;
}

.invoice-eyebrow,
.invoice-section-title,
.invoice-label {
    color: #0bbde9;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.7px;
}

.invoice-hero h1 {
    margin: 8px 0 5px;
    color: white;
    font-size: 42px;
    font-weight: 950;
}

.invoice-number {
    margin: 0;
    color: #d7f5ff;
    font-weight: 700;
}

.invoice-status {
    margin-top: 12px;
    padding: 11px 18px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(8,185,145,.16);
    border: 1px solid rgba(34,220,175,.35);
    color: white;
    font-weight: 900;
}

.invoice-check {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #16b88a;
}

.invoice-meta-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.invoice-card {
    background: rgba(255,255,255,.97);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 18px 45px rgba(0,0,0,.12);
    box-sizing: border-box;
}

.invoice-card strong {
    display: block;
    margin-top: 8px;
    color: #102f4d;
}

.invoice-address-card {
    margin-bottom: 16px;
}

.invoice-address {
    margin-top: 14px;
    padding: 18px;
    border-radius: 14px;
    background: #f2f8fc;
    border: 1px solid #dceaf2;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #244d6b;
}

.invoice-address strong {
    margin: 0;
    color: #102f4d;
}

.invoice-items-card {
    margin-bottom: 16px;
}

.invoice-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.invoice-section-heading h2 {
    margin: 5px 0 0;
    color: #102f4d;
    font-size: 23px;
}

.invoice-box-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eaf8fc;
    font-size: 20px;
}

.invoice-table-wrap {
    overflow-x: auto;
}

.invoice-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 15px;
}

.invoice-table th {
    padding: 13px 14px;
    background: #0d2d48;
    color: white;
    text-align: left;
    font-size: 10px;
    letter-spacing: .7px;
}

.invoice-table td {
    padding: 15px 14px;
    background: #fff;
    border-bottom: 1px solid #e4edf2;
    color: #244d6b;
    font-size: 13px;
}

.invoice-table tr:last-child td {
    border-bottom: 0;
}

.invoice-total-card {
    display: flex;
    justify-content: flex-end;
    background: rgba(255,255,255,.97);
    border-radius: 20px;
    padding: 22px 28px;
    margin-bottom: 16px;
    box-shadow: 0 18px 45px rgba(0,0,0,.12);
}

.invoice-total-lines {
    width: 360px;
}

.invoice-total-lines > div {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    color: #557087;
}

.invoice-grand-total {
    margin-top: 8px;
    padding-top: 16px !important;
    border-top: 1px solid #d8e5ec;
    color: #102f4d !important;
    font-size: 21px;
    font-weight: 950;
}

.invoice-footer-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-radius: 18px;
    background: rgba(235,255,249,.96);
}

.invoice-footer-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #16b88a;
    color: white;
    font-weight: 900;
}

.invoice-footer-card strong {
    color: #123f48;
}

.invoice-footer-card p {
    margin: 3px 0 0;
    color: #5d7c80;
    font-size: 12px;
}

@media (max-width: 760px) {
    .invoice-header {
        margin: 10px;
        width: calc(100% - 20px);
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .invoice-nav {
        gap: 14px;
        flex-wrap: wrap;
    }

    .invoice-wrap {
        margin-top: 25px;
        padding: 0 12px;
    }

    .invoice-hero {
        flex-direction: column;
    }

    .invoice-hero h1 {
        font-size: 32px;
    }

    .invoice-meta-grid {
        grid-template-columns: 1fr;
    }

    .invoice-total-lines {
        width: 100%;
    }
}


/* ============================================================
   AQUA MIRA TECH — PREMIUM PAYMENT PAGE
   ============================================================ */

.payment-page {
    min-height: 100vh;
}

.payment-header {
    width: min(1180px, calc(100% - 48px));
    margin: 18px auto 0;
    min-height: 82px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(5, 34, 58, .88);
    border: 1px solid rgba(130, 225, 255, .24);
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
    box-sizing: border-box;
}

.payment-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.payment-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#11b7f3,#1677df);
    color: white;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 8px 22px rgba(15,165,230,.28);
}

.payment-brand-name {
    color: white;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 2px;
}

.payment-brand-sub {
    margin-top: 3px;
    color: #72d9f7;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.payment-nav {
    display: flex;
    gap: 8px;
    align-items: center;
}

.payment-nav a {
    color: white !important;
    text-decoration: none !important;
    padding: 11px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
}

.payment-nav a:hover {
    background: rgba(28,190,238,.16);
}

.payment-shell {
    width: min(1180px, calc(100% - 48px));
    margin: 42px auto 70px;
}

.payment-eyebrow {
    color: #25d1f4;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.payment-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 28px;
}

.payment-title-row h1 {
    margin: 0;
    color: white;
    font-size: 42px;
    line-height: 1.05;
    font-weight: 950;
}

.payment-title-row p {
    margin: 9px 0 0;
    color: #c7eff8;
    font-size: 15px;
}

.payment-status {
    padding: 12px 19px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .7px;
    white-space: nowrap;
}

.payment-status.pending {
    color: #fff;
    background: rgba(245,166,35,.15);
    border: 1px solid rgba(245,166,35,.45);
}

.payment-status.success {
    color: white;
    background: rgba(20,190,135,.16);
    border: 1px solid rgba(20,220,160,.4);
}

.payment-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 22px;
    align-items: start;
}

.payment-main-card,
.payment-summary-card {
    background: rgba(250,252,255,.98);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 20px 55px rgba(0,0,0,.17);
}

.payment-card-label {
    color: #08b9e7;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 2px;
    margin-bottom: 7px;
}

.payment-main-card h2,
.payment-summary-card h2 {
    margin: 0 0 22px;
    color: #092b4b;
    font-size: 25px;
    font-weight: 950;
}

.payment-order-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 18px;
    background: #f1f7fb;
    border: 1px solid #dceaf2;
    border-radius: 16px;
}

.payment-order-box span,
.summary-total span,
.payment-amount-card span,
.provider-row span {
    display: block;
    color: #70879a;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 7px;
}

.payment-order-box strong,
.provider-row strong {
    color: #0a3152;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.payment-amount-card {
    margin: 18px 0;
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(135deg,#e9faff,#edf5ff);
    border: 1px solid #cdeaf5;
}

.payment-amount-card strong {
    display: block;
    color: #082f52;
    font-size: 34px;
    font-weight: 950;
}

.payment-action-box,
.payment-success-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    margin-bottom: 18px;
    border-radius: 17px;
    background: #eefaf7;
    border: 1px solid #d4eee7;
}

.payment-action-box h3,
.payment-success-box h3 {
    margin: 0 0 5px;
    color: #0b3857;
    font-size: 16px;
}

.payment-action-box p,
.payment-success-box p {
    margin: 0;
    color: #668293;
    font-size: 12px;
}

.payment-icon,
.success-circle {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: #dff7f1;
    font-size: 19px;
}

.payment-provider-box {
    margin-bottom: 18px;
    padding: 17px;
    border-radius: 16px;
    background: #f4f8fb;
    border: 1px solid #dce8ef;
}

.provider-row {
    padding: 9px 0;
}

.provider-row + .provider-row {
    border-top: 1px solid #e1eaf0;
}

.payment-primary-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 0;
    border-radius: 14px;
    padding: 15px 20px;
    background: linear-gradient(135deg,#09aee8,#176de0);
    color: white !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(14,125,220,.25);
}

.payment-primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(14,125,220,.34);
}

.success-btn {
    background: linear-gradient(135deg,#08b58c,#087fc4);
}

.invoice-btn {
    background: linear-gradient(135deg,#08a9d8,#1764d9);
}

.payment-success-text {
    color: #07956f !important;
}

.payment-pending-text {
    color: #c27b00 !important;
}

.payment-summary-card {
    position: sticky;
    top: 20px;
}

.summary-total {
    padding: 20px 0;
    border-top: 1px solid #dbe7ee;
    border-bottom: 1px solid #dbe7ee;
}

.summary-total strong {
    display: block;
    color: #092f50;
    font-size: 29px;
    font-weight: 950;
}

.secure-payment {
    margin-top: 20px;
    padding: 16px;
    display: flex;
    gap: 11px;
    align-items: center;
    background: #effaf7;
    border-radius: 15px;
}

.secure-check {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #15aa7e;
    color: white;
    font-weight: 900;
}

.secure-payment strong,
.secure-payment span {
    display: block;
}

.secure-payment strong {
    color: #17634f;
    font-size: 11px;
}

.secure-payment span {
    margin-top: 3px;
    color: #6c8b82;
    font-size: 10px;
}

.back-orders {
    display: inline-block;
    margin-top: 20px;
    color: #bfeefa !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 800px) {
    .payment-header,
    .payment-shell {
        width: min(100% - 24px, 1180px);
    }

    .payment-header {
        min-height: 70px;
        padding: 10px 14px;
    }

    .payment-brand-sub {
        display: none;
    }

    .payment-nav a {
        padding: 8px;
        font-size: 11px;
    }

    .payment-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .payment-title-row h1 {
        font-size: 32px;
    }

    .payment-grid {
        grid-template-columns: 1fr;
    }

    .payment-summary-card {
        position: static;
    }
}


/* =========================================================
   AQUA MIRA TECH - PREMIUM CART UI V2
   ========================================================= */

.cart-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 8% 8%, rgba(20,190,220,.16), transparent 24%),
        radial-gradient(circle at 92% 18%, rgba(60,90,220,.20), transparent 28%),
        linear-gradient(135deg, #063d4c 0%, #082f47 48%, #18295f 100%);
    color: #ffffff;
}

.cart-shell {
    width: min(1180px, calc(100% - 48px));
    margin: 28px auto 70px;
}

.cart-header {
    min-height: 82px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    background: rgba(5,31,52,.90);
    border: 1px solid rgba(130,220,255,.22);
    border-radius: 22px;
    box-shadow: 0 22px 55px rgba(0,0,0,.24);
    backdrop-filter: blur(16px);
}

.cart-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.cart-brand-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg,#16bce8,#1770dd);
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 8px 22px rgba(0,150,230,.30);
}

.cart-brand-name {
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .12em;
}

.cart-brand-sub {
    margin-top: 3px;
    color: #71d9ef;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .14em;
}

.cart-nav {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px;
    border: 1px solid rgba(145,215,255,.22);
    border-radius: 15px;
    background: rgba(255,255,255,.045);
}

.cart-nav a {
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 10px 13px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    transition: .18s ease;
}

.cart-nav a:hover,
.cart-nav a.active {
    background: linear-gradient(135deg,#079fd4,#176bda);
    box-shadow: 0 7px 18px rgba(0,120,220,.25);
}

.cart-page {
    max-width: none;
    margin: 42px 0 0;
    padding: 0;
}

.cart-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 25px;
}

.cart-eyebrow,
.cart-label {
    color: #20c8ec;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.cart-heading h1 {
    margin: 7px 0 7px;
    color: #ffffff;
    font-size: 38px;
    line-height: 1.05;
    font-weight: 900;
}

.cart-heading p {
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 14px;
}

.cart-continue {
    display: inline-flex;
    align-items: center;
    padding: 12px 17px;
    border: 1px solid rgba(130,220,255,.25);
    border-radius: 12px;
    color: #ffffff !important;
    text-decoration: none !important;
    background: rgba(255,255,255,.07);
    font-weight: 800;
    font-size: 12px;
}

.cart-card {
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 25px 65px rgba(0,0,0,.22);
    overflow: hidden;
}

.cart-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.cart-card-title h2 {
    margin: 5px 0 0;
    color: #0d2942;
    font-size: 24px;
    font-weight: 900;
}

.cart-item-count {
    padding: 9px 13px;
    border-radius: 999px;
    background: #eaf7fb;
    color: #087ca8;
    font-size: 12px;
    font-weight: 900;
}

.cart-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.cart-table {
    width: 100%;
    min-width: 850px;
    border-collapse: separate;
    border-spacing: 0;
}

.cart-table th {
    background: #0d2942;
    color: #ffffff;
    padding: 15px 14px;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.cart-table th:first-child {
    border-radius: 12px 0 0 12px;
}

.cart-table th:last-child {
    border-radius: 0 12px 12px 0;
}

.cart-table td {
    padding: 17px 14px;
    border-bottom: 1px solid #e4edf3;
    color: #17324a;
    vertical-align: middle;
}

.cart-product {
    color: #0d2942;
    font-size: 14px;
    font-weight: 900;
}

.cart-sku {
    color: #70869a;
    font-size: 12px;
    font-weight: 700;
}

.cart-price,
.cart-total {
    color: #0d2942;
    font-weight: 900;
    white-space: nowrap;
}

.cart-total {
    font-size: 15px;
}

.cart-qty-form {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
}

.cart-qty {
    width: 62px;
    height: 38px;
    box-sizing: border-box;
    padding: 7px 8px;
    border: 1px solid #cbd9e4;
    border-radius: 9px;
    background: #ffffff;
    color: #0d2942;
    font-weight: 800;
    outline: none;
}

.cart-qty:focus {
    border-color: #079bd3;
    box-shadow: 0 0 0 3px rgba(7,155,211,.12);
}

.cart-btn {
    border: 0;
    border-radius: 9px;
    padding: 10px 13px;
    background: #079bd3;
    color: #ffffff;
    font-weight: 800;
    font-size: 11px;
    cursor: pointer;
    transition: .18s ease;
}

.cart-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(7,155,211,.22);
}

.cart-btn.remove {
    background: #17324a;
}

.cart-remove-form {
    margin: 0;
}

.cart-bottom {
    margin-top: 20px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
}

.cart-trust {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid rgba(80,220,190,.22);
    border-radius: 16px;
    background: rgba(230,255,249,.10);
}

.trust-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #15b58a;
    color: #ffffff;
    font-weight: 900;
}

.cart-trust strong {
    display: block;
    color: #ffffff;
    font-size: 12px;
}

.cart-trust span {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.65);
    font-size: 10px;
}

.cart-summary {
    min-width: 390px;
    margin-top: 0;
    padding: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-radius: 17px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

.cart-summary-info span {
    display: block;
    color: #70869a;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.cart-summary-info strong {
    display: block;
    margin-top: 4px;
    color: #0d2942;
    font-size: 23px;
    font-weight: 900;
}

.checkout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg,#08a7dc,#1768d8);
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 900;
    font-size: 12px;
    box-shadow: 0 10px 25px rgba(0,120,210,.25);
    transition: .18s ease;
    white-space: nowrap;
}

.checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0,120,210,.32);
}

.cart-empty {
    padding: 75px 25px;
    text-align: center;
    background: rgba(255,255,255,.97);
    border-radius: 24px;
    box-shadow: 0 25px 65px rgba(0,0,0,.22);
}

.empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: #eaf7fb;
    font-size: 32px;
}

.cart-empty h2 {
    margin: 8px 0;
    color: #0d2942;
    font-size: 27px;
    font-weight: 900;
}

.cart-empty p {
    max-width: 520px;
    margin: 0 auto 25px;
    color: #70869a;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .cart-header,
    .cart-heading,
    .cart-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .cart-nav {
        justify-content: center;
        flex-wrap: wrap;
    }

    .cart-summary {
        min-width: 0;
    }
}

@media (max-width: 560px) {
    .cart-shell {
        width: min(100% - 22px, 1180px);
        margin-top: 12px;
    }

    .cart-header {
        padding: 15px;
    }

    .cart-heading h1 {
        font-size: 30px;
    }

    .cart-card {
        padding: 15px;
    }

    .cart-summary {
        flex-direction: column;
        align-items: stretch;
    }

    .checkout-btn {
        width: 100%;
        box-sizing: border-box;
    }
}

/* =========================================================
   END PREMIUM CART UI V2
   ========================================================= */

/* =========================================================
   FINAL CUSTOMER PORTAL DESIGN SYSTEM
   Aqua Mira Tech
   ========================================================= */

.customer-shell {
    min-height: 100vh;
    width: 100%;
}

.customer-header {
    width: min(1180px, calc(100% - 48px));
    margin: 24px auto 0;
    min-height: 82px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: rgba(5,31,52,.94);
    border: 1px solid rgba(104,218,255,.22);
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(0,0,0,.22);
    backdrop-filter: blur(16px);
}

.customer-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #fff !important;
    text-decoration: none !important;
    min-width: 230px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#18c9ff,#1675e8);
    color: #fff;
    font-weight: 900;
    font-size: 15px;
    box-shadow: 0 8px 22px rgba(0,155,235,.32);
}

.brand-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.brand-copy strong {
    font-size: 15px;
    letter-spacing: .12em;
}

.brand-copy small {
    font-size: 7px;
    letter-spacing: .14em;
    color: #67dfff;
}

.customer-nav {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border: 1px solid rgba(150,220,255,.16);
    border-radius: 15px;
    background: rgba(255,255,255,.04);
}

.customer-nav a {
    padding: 10px 13px;
    border-radius: 10px;
    color: #dcefff !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    transition: .2s ease;
}

.customer-nav a:hover,
.customer-nav a.active {
    background: linear-gradient(135deg,#10a9df,#1768d8);
    color: #fff !important;
    box-shadow: 0 7px 18px rgba(10,150,225,.24);
}

.customer-content {
    width: min(1000px, calc(100% - 48px));
    margin: 38px auto 70px;
}

.customer-kicker,
.section-kicker {
    color: #54dfff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.customer-title-row {
    margin: 9px 0 25px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.customer-title-row h1 {
    margin: 0;
    color: #fff;
    font-size: 38px;
    line-height: 1.05;
    font-weight: 900;
}

.customer-title-row p {
    margin: 8px 0 0;
    color: #b8d5e7;
    font-size: 13px;
}

.customer-status {
    margin-top: 4px;
    padding: 11px 15px;
    border-radius: 12px;
    border: 1px solid rgba(62,226,185,.35);
    background: rgba(23,190,150,.12);
    color: #7ff0ce;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.customer-card {
    background: rgba(249,252,255,.98);
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 22px;
    box-shadow: 0 24px 55px rgba(0,0,0,.20);
    padding: 26px;
    color: #12324e;
}

.customer-card h2 {
    color: #102e49;
    margin: 7px 0 18px;
    font-size: 23px;
}

.account-grid {
    display: grid;
    grid-template-columns: 1.35fr .85fr;
    gap: 18px;
    margin-bottom: 18px;
}

.account-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.account-info > div {
    padding: 15px;
    border: 1px solid #dbe8f1;
    border-radius: 14px;
    background: #f5faff;
}

.account-info span {
    display: block;
    color: #7890a3;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
}

.account-info strong {
    color: #12324e;
    font-size: 14px;
}

.success-text {
    color: #0aa981 !important;
}

.account-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 2px;
    border-bottom: 1px solid #e3edf4;
    color: #12324e !important;
    text-decoration: none !important;
    font-weight: 800;
    font-size: 13px;
}

.account-link:last-child {
    border-bottom: 0;
}

.account-link b {
    color: #078fd0;
    font-size: 17px;
}

.address-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
}

.address-item {
    padding: 17px;
    background: #f5faff;
    border: 1px solid #dbe8f1;
    border-radius: 15px;
}

.address-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.address-item p {
    margin: 4px 0;
    color: #41627b;
    font-size: 13px;
}

.default-badge {
    padding: 5px 8px;
    border-radius: 7px;
    background: #dff8f0;
    color: #079d78;
    font-size: 8px;
    font-weight: 900;
}

.primary-action,
.secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 17px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 900;
    text-decoration: none !important;
    cursor: pointer;
    border: 0;
}

.primary-action {
    color: #fff !important;
    background: linear-gradient(135deg,#08a9dc,#1768dc);
    box-shadow: 0 9px 22px rgba(0,120,210,.22);
}

.secondary-action {
    color: #12324e !important;
    background: #edf6fb;
    border: 1px solid #d3e3ed;
}

.empty-account,
.wishlist-empty,
.orders-empty {
    text-align: center;
    padding: 45px 20px;
}

.empty-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #eaf8ff;
    color: #078fd0;
    font-size: 25px;
}

.empty-account p,
.wishlist-empty p,
.orders-empty p {
    color: #71899e;
    font-size: 13px;
    margin: 7px 0 20px;
}

.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
}

.wishlist-item {
    padding: 17px;
    border: 1px solid #dce9f1;
    border-radius: 16px;
    background: #f8fbfd;
}

.wishlist-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wishlist-code {
    color: #0797cf;
    font-size: 9px;
    font-weight: 900;
}

.wishlist-remove {
    border: 0;
    background: transparent;
    color: #8297a7;
    font-size: 22px;
    cursor: pointer;
}

.wishlist-item h2 {
    margin: 18px 0 10px;
    font-size: 16px;
}

.wishlist-price {
    color: #0e3555;
    font-size: 21px;
    font-weight: 900;
}

.wishlist-stock {
    margin: 7px 0 16px;
    color: #079c7b;
    font-size: 10px;
    font-weight: 800;
}

.wishlist-actions {
    display: flex;
    gap: 7px;
}

.wishlist-actions form {
    flex: 1;
}

.wishlist-actions .primary-action,
.wishlist-actions .secondary-action {
    width: 100%;
}

.orders-table-wrap {
    overflow-x: auto;
}

.customer-orders {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.customer-orders th {
    background: #0d2e4a;
    color: #fff;
    padding: 14px 12px;
    text-align: left;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.customer-orders th:first-child {
    border-radius: 11px 0 0 11px;
}

.customer-orders th:last-child {
    border-radius: 0 11px 11px 0;
}

.customer-orders td {
    padding: 15px 12px;
    border-bottom: 1px solid #e3edf3;
    color: #173b59;
    font-size: 11px;
    white-space: nowrap;
}

.customer-orders tr:last-child td {
    border-bottom: 0;
}

.order-badge,
.payment-badge {
    display: inline-block;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 8px;
    font-weight: 900;
}

.order-badge {
    background: #edf4fa;
    color: #40647f;
}

.payment-badge {
    background: #dff8ef;
    color: #079b78;
}

.order-total {
    font-weight: 900;
}

.view-order {
    color: #087fc2 !important;
    font-weight: 900;
    text-decoration: none !important;
}

@media (max-width: 900px) {

    .customer-header {
        flex-direction: column;
        align-items: stretch;
    }

    .customer-nav {
        overflow-x: auto;
    }

    .customer-nav a {
        flex: 0 0 auto;
    }

    .account-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 620px) {

    .customer-header {
        width: calc(100% - 24px);
        margin-top: 12px;
    }

    .customer-content {
        width: calc(100% - 24px);
        margin-top: 25px;
    }

    .customer-title-row {
        flex-direction: column;
    }

    .customer-title-row h1 {
        font-size: 30px;
    }

    .account-info,
    .address-grid,
    .wishlist-grid {
        grid-template-columns: 1fr;
    }

    .customer-card {
        padding: 18px;
    }
}

/* =========================================================
   END FINAL CUSTOMER PORTAL DESIGN SYSTEM
   ========================================================= */



/* === FINAL CUSTOMER UI CONSOLIDATION V1 === */

/* ---------------------------------------------------------
   GLOBAL CUSTOMER PORTAL
   --------------------------------------------------------- */

body.customer-portal {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 8%, rgba(37, 211, 255, .16), transparent 28%),
        radial-gradient(circle at 90% 10%, rgba(78, 91, 255, .18), transparent 30%),
        linear-gradient(135deg, #063e50 0%, #082f45 45%, #15255a 100%);
    color: #102b43;
    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.customer-portal *,
body.customer-portal *::before,
body.customer-portal *::after {
    box-sizing: border-box;
}

body.customer-portal a {
    color: inherit;
}

body.customer-portal main,
body.customer-portal .customer-content {
    width: min(1180px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

/* ---------------------------------------------------------
   COMMON NAVIGATION
   --------------------------------------------------------- */

body.customer-portal nav {
    width: min(1180px, calc(100% - 40px));
    margin: 20px auto 0;
    min-height: 70px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    background: rgba(5, 27, 47, .88);
    border: 1px solid rgba(126, 225, 255, .20);
    border-radius: 22px;
    box-shadow:
        0 18px 50px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255,255,255,.08);

    color: #fff;
    backdrop-filter: blur(18px);
}

body.customer-portal nav a {
    text-decoration: none;
    font-weight: 700;
    color: #dcefff;
    transition: .18s ease;
}

body.customer-portal nav a:hover {
    color: #fff;
    transform: translateY(-1px);
}

body.customer-portal nav b,
body.customer-portal nav strong {
    color: #fff;
    letter-spacing: .04em;
}

/* ---------------------------------------------------------
   PAGE HEADINGS
   --------------------------------------------------------- */

body.customer-portal h1 {
    color: #fff;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.05;
    letter-spacing: -.025em;
    margin: 32px 0 10px;
}

body.customer-portal h2 {
    color: #102f4b;
    letter-spacing: -.015em;
}

body.customer-portal h3 {
    color: #163a56;
}

body.customer-portal p {
    line-height: 1.65;
}

/* ---------------------------------------------------------
   GENERIC PREMIUM PANELS / CARDS
   --------------------------------------------------------- */

body.customer-portal .panel,
body.customer-portal .card,
body.customer-portal .box,
body.customer-portal .section-card {
    background: rgba(248, 252, 255, .97);
    border: 1px solid rgba(190, 216, 232, .85);
    border-radius: 22px;
    box-shadow:
        0 18px 45px rgba(2, 31, 51, .14),
        inset 0 1px 0 rgba(255,255,255,.8);
}

body.customer-portal .panel {
    padding: 26px;
}

body.customer-portal section {
    border-radius: 22px;
}

/* ---------------------------------------------------------
   BUTTON SYSTEM
   --------------------------------------------------------- */

body.customer-portal button,
body.customer-portal input[type="submit"],
body.customer-portal input[type="button"],
body.customer-portal .btn,
body.customer-portal .primary-action,
body.customer-portal .checkout-btn {
    min-height: 42px;
    padding: 10px 18px;
    border: 0;
    border-radius: 12px;

    background: linear-gradient(135deg, #0aa9e8, #1475df);
    color: #fff;

    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;

    box-shadow: 0 9px 22px rgba(20,117,223,.22);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

body.customer-portal button:hover,
body.customer-portal input[type="submit"]:hover,
body.customer-portal .btn:hover,
body.customer-portal .primary-action:hover,
body.customer-portal .checkout-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 13px 28px rgba(20,117,223,.28);
}

body.customer-portal button:active,
body.customer-portal input[type="submit"]:active {
    transform: translateY(0);
}

/* ---------------------------------------------------------
   FORMS
   --------------------------------------------------------- */

body.customer-portal form {
    margin: 0;
}

body.customer-portal input:not([type="hidden"]):not([type="submit"]):not([type="button"]),
body.customer-portal select,
body.customer-portal textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;

    background: #fff;
    color: #17354f;

    border: 1px solid #c9dce9;
    border-radius: 11px;
    outline: none;

    font: inherit;
    transition: border-color .16s ease, box-shadow .16s ease;
}

body.customer-portal textarea {
    min-height: 110px;
    resize: vertical;
}

body.customer-portal input:focus,
body.customer-portal select:focus,
body.customer-portal textarea:focus {
    border-color: #22aeea;
    box-shadow: 0 0 0 4px rgba(34,174,234,.12);
}

body.customer-portal label {
    display: block;
    margin-bottom: 7px;
    color: #38566e;
    font-size: 13px;
    font-weight: 800;
}

/* ---------------------------------------------------------
   TABLES
   --------------------------------------------------------- */

body.customer-portal table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;

    background: #fff;
    border: 1px solid #d5e4ee;
    border-radius: 16px;
}

body.customer-portal th {
    padding: 13px 15px;
    background: #edf7fc;
    color: #244862;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: left;
}

body.customer-portal td {
    padding: 14px 15px;
    border-top: 1px solid #e5eef4;
    color: #294b65;
    vertical-align: middle;
}

body.customer-portal tr:hover td {
    background: #f8fcff;
}

/* ---------------------------------------------------------
   PRODUCT / SHOP
   --------------------------------------------------------- */

body.customer-portal .product-card,
body.customer-portal .shop-card {
    border-radius: 20px;
    border: 1px solid #d6e5ee;
    background: rgba(255,255,255,.97);
    box-shadow: 0 14px 34px rgba(2,31,51,.11);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

body.customer-portal .product-card:hover,
body.customer-portal .shop-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 42px rgba(2,31,51,.17);
}

body.customer-portal .product-card img,
body.customer-portal .shop-card img {
    max-width: 100%;
}

/* ---------------------------------------------------------
   CART
   --------------------------------------------------------- */

body.customer-portal .cart-page {
    width: min(1180px, calc(100% - 40px));
    margin: 34px auto 70px;
}

body.customer-portal .cart-card,
body.customer-portal .cart-summary {
    background: rgba(255,255,255,.97);
    border: 1px solid #d4e4ee;
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(2,31,51,.13);
}

body.customer-portal .cart-summary {
    padding: 24px;
}

/* ---------------------------------------------------------
   CHECKOUT / PAYMENT / INVOICE
   --------------------------------------------------------- */

body.customer-portal .checkout-page,
body.customer-portal .payment-page,
body.customer-portal .invoice-page,
body.customer-portal .orders-page,
body.customer-portal .wishlist-page,
body.customer-portal .account-page {
    width: min(1180px, calc(100% - 40px));
    margin: 34px auto 70px;
}

body.customer-portal .checkout-card,
body.customer-portal .payment-card,
body.customer-portal .invoice-card,
body.customer-portal .order-card,
body.customer-portal .wishlist-card,
body.customer-portal .account-card {
    background: rgba(255,255,255,.97);
    border: 1px solid #d4e4ee;
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(2,31,51,.13);
}

/* ---------------------------------------------------------
   STATUS BADGES
   --------------------------------------------------------- */

body.customer-portal .status,
body.customer-portal .badge,
body.customer-portal .pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;

    background: #e9f8f3;
    color: #08795c;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
}

/* ---------------------------------------------------------
   LINKS / SECONDARY ACTIONS
   --------------------------------------------------------- */

body.customer-portal a.action,
body.customer-portal .secondary-action {
    color: #087fc0;
    font-weight: 800;
    text-decoration: none;
}

body.customer-portal a.action:hover,
body.customer-portal .secondary-action:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------
   MONEY
   --------------------------------------------------------- */

body.customer-portal .price,
body.customer-portal .amount,
body.customer-portal .total,
body.customer-portal .cart-price,
body.customer-portal .cart-total {
    font-weight: 900;
    color: #0c3855;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 800px) {

    body.customer-portal nav {
        width: calc(100% - 20px);
        margin-top: 10px;
        border-radius: 17px;
        flex-wrap: wrap;
        padding: 11px;
    }

    body.customer-portal main,
    body.customer-portal .customer-content,
    body.customer-portal .cart-page,
    body.customer-portal .checkout-page,
    body.customer-portal .payment-page,
    body.customer-portal .invoice-page,
    body.customer-portal .orders-page,
    body.customer-portal .wishlist-page,
    body.customer-portal .account-page {
        width: calc(100% - 20px);
    }

    body.customer-portal h1 {
        font-size: 32px;
        margin-top: 25px;
    }

    body.customer-portal .panel,
    body.customer-portal .cart-card,
    body.customer-portal .cart-summary {
        padding: 18px;
        border-radius: 17px;
    }

    body.customer-portal table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------
   SMALL SCREEN
   --------------------------------------------------------- */

@media (max-width: 520px) {

    body.customer-portal nav {
        align-items: flex-start;
    }

    body.customer-portal button,
    body.customer-portal .btn,
    body.customer-portal .primary-action,
    body.customer-portal .checkout-btn {
        width: 100%;
    }
}

/* === END FINAL CUSTOMER UI CONSOLIDATION V1 === */



/* === FINAL CUSTOMER NAV CONTRAST FIX === */

/* Customer navigation: readable inactive links */
body.customer-portal nav a {
    color: #18344d !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-weight: 800 !important;
}

/* Inactive navigation items */
body.customer-portal nav a:not(.active):not(.nav-active) {
    color: #d9e8f5 !important;
    opacity: 1 !important;
}

/* Hover */
body.customer-portal nav a:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Active navigation item */
body.customer-portal nav a.active,
body.customer-portal nav a.nav-active {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Shop-style navigation pills/buttons */
body.customer-portal nav a {
    -webkit-text-fill-color: currentColor !important;
}

/* Ensure the navigation container itself remains readable */
body.customer-portal nav {
    color: #ffffff !important;
}

/* === END FINAL CUSTOMER NAV CONTRAST FIX === */



/* === ONE-SHOT FINAL CUSTOMER DESIGN SYSTEM V2 === */

/* =========================================================
   ROOT
   ========================================================= */

body.customer-portal {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 12% 5%,
            rgba(26, 190, 225, .18),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 8%,
            rgba(76, 92, 235, .20),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #063f50 0%,
            #07384b 42%,
            #142b5d 100%
        );

    color: #15354f;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.customer-portal *,
body.customer-portal *::before,
body.customer-portal *::after {
    box-sizing: border-box;
}

/* =========================================================
   GLOBAL CUSTOMER NAVIGATION
   ========================================================= */

body.customer-portal .premium-nav,
body.customer-portal nav.customer-nav,
body.customer-portal nav {

    width: min(1180px, calc(100% - 40px));

    min-height: 70px;

    margin: 18px auto 0;

    padding: 10px 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    background: rgba(4, 28, 47, .94);

    border:
        1px solid
        rgba(120, 222, 255, .22);

    border-radius: 22px;

    box-shadow:
        0 18px 48px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.08);

    backdrop-filter: blur(18px);

    color: #ffffff;

    position: relative;

    z-index: 20;
}

/* =========================================================
   BRAND
   ========================================================= */

body.customer-portal .brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.customer-portal .brand-logo {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #13b7ec,
            #0877c9
        );

    color: #ffffff;

    font-weight: 950;

    box-shadow:
        0 8px 22px rgba(9,154,220,.30);
}

body.customer-portal .brand strong {
    display: block;

    color: #ffffff;

    font-size: 16px;

    font-weight: 900;

    letter-spacing: .04em;
}

body.customer-portal .brand small {
    display: block;

    margin-top: 2px;

    color: #88aabd;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .12em;
}

/* =========================================================
   NAV LINKS
   ========================================================= */

body.customer-portal .nav-links,
body.customer-portal .customer-nav,
body.customer-portal .checkout-nav-links,
body.customer-portal .order-nav-links,
body.customer-portal .invoice-nav-links {

    display: flex;

    align-items: center;

    gap: 5px;

    padding: 5px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #f5fbff,
            #eaf3fa
        );

    border:
        1px solid
        #d7e7f1;

    box-shadow:
        inset 0 1px 0 #ffffff;
}

/* IMPORTANT:
   Light navigation background = DARK inactive text
*/

body.customer-portal .nav-links a,
body.customer-portal .customer-nav a,
body.customer-portal .checkout-nav-links a,
body.customer-portal .order-nav-links a,
body.customer-portal .invoice-nav-links a {

    color: #18344d !important;

    -webkit-text-fill-color: #18344d !important;

    opacity: 1 !important;

    text-decoration: none !important;

    font-size: 12px;

    font-weight: 850;

    padding: 10px 13px;

    border-radius: 11px;

    white-space: nowrap;

    transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease;
}

body.customer-portal .nav-links a:hover,
body.customer-portal .customer-nav a:hover,
body.customer-portal .checkout-nav-links a:hover,
body.customer-portal .order-nav-links a:hover,
body.customer-portal .invoice-nav-links a:hover {

    color: #0a76bd !important;

    -webkit-text-fill-color: #0a76bd !important;

    background: #ffffff;

    transform: translateY(-1px);
}

/* Active */

body.customer-portal .nav-links a.active,
body.customer-portal .customer-nav a.active,
body.customer-portal .checkout-nav-links a.active,
body.customer-portal .order-nav-links a.active,
body.customer-portal .invoice-nav-links a.active {

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #0ca9e2,
            #1475dc
        );

    box-shadow:
        0 7px 18px rgba(10,130,215,.28);
}

/* =========================================================
   CONTENT
   ========================================================= */

body.customer-portal main,
body.customer-portal .customer-content,
body.customer-portal .shop-page,
body.customer-portal .checkout-page,
body.customer-portal .payment-page,
body.customer-portal .invoice-page,
body.customer-portal .orders-page,
body.customer-portal .wishlist-page,
body.customer-portal .account-page,
body.customer-portal .cart-page {

    max-width: 1180px;

    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   HEADINGS
   ========================================================= */

body.customer-portal h1 {
    color: #ffffff;

    font-size:
        clamp(30px, 4vw, 46px);

    line-height: 1.05;

    letter-spacing: -.03em;
}

body.customer-portal h2 {
    color: #123852;

    letter-spacing: -.02em;
}

body.customer-portal h3 {
    color: #173d59;
}

/* =========================================================
   COMMON CARD
   ========================================================= */

body.customer-portal .panel,
body.customer-portal .card,
body.customer-portal .box,
body.customer-portal .section-card,
body.customer-portal .customer-card,
body.customer-portal .account-card,
body.customer-portal .wishlist-card,
body.customer-portal .order-card,
body.customer-portal .checkout-card,
body.customer-portal .payment-card,
body.customer-portal .invoice-card {

    background:
        rgba(255,255,255,.97);

    border:
        1px solid
        rgba(205,224,235,.95);

    border-radius: 20px;

    box-shadow:
        0 16px 40px rgba(2,31,51,.13),
        inset 0 1px 0 rgba(255,255,255,.9);
}

/* =========================================================
   BUTTONS
   ========================================================= */

body.customer-portal button,
body.customer-portal input[type="submit"],
body.customer-portal input[type="button"],
body.customer-portal .btn,
body.customer-portal .primary-action,
body.customer-portal .checkout-btn {

    min-height: 42px;

    padding: 10px 17px;

    border: 0;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #0ca9e2,
            #1477df
        );

    color: #ffffff;

    font-weight: 850;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(15,125,220,.22);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}

body.customer-portal button:hover,
body.customer-portal input[type="submit"]:hover,
body.customer-portal .btn:hover,
body.customer-portal .primary-action:hover,
body.customer-portal .checkout-btn:hover {

    transform: translateY(-2px);

    filter: brightness(1.04);

    box-shadow:
        0 12px 25px rgba(15,125,220,.28);
}

/* =========================================================
   FORMS
   ========================================================= */

body.customer-portal input:not([type="hidden"]),
body.customer-portal select,
body.customer-portal textarea {

    font-family: inherit;

    border-radius: 10px;

    border:
        1px solid
        #cbdde9;

    background: #ffffff;

    color: #173950;

    outline: none;
}

body.customer-portal input:not([type="hidden"]):focus,
body.customer-portal select:focus,
body.customer-portal textarea:focus {

    border-color: #1aa9df;

    box-shadow:
        0 0 0 4px
        rgba(26,169,223,.12);
}

body.customer-portal label {

    color: #36566c;

    font-size: 13px;

    font-weight: 800;
}

/* =========================================================
   TABLES
   ========================================================= */

body.customer-portal table {

    width: 100%;

    border-collapse: separate;

    border-spacing: 0;

    background: #ffffff;

    border:
        1px solid
        #d5e4ed;

    border-radius: 15px;

    overflow: hidden;
}

body.customer-portal th {

    background: #edf7fc;

    color: #254963;

    padding: 12px 14px;

    font-size: 11px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .06em;
}

body.customer-portal td {

    padding: 13px 14px;

    border-top:
        1px solid
        #e5eef4;

    color: #294b65;
}

/* =========================================================
   SHOP PRODUCT GRID
   ========================================================= */

body.customer-portal .product-grid,
body.customer-portal .products-grid,
body.customer-portal .shop-grid {

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 12px;

    align-items: stretch;
}

body.customer-portal .product-card,
body.customer-portal .shop-card {

    min-width: 0;

    display: flex;

    flex-direction: column;

    background:
        rgba(255,255,255,.98);

    border:
        1px solid
        #d4e4ed;

    border-radius: 19px;

    overflow: hidden;

    box-shadow:
        0 12px 30px rgba(2,31,51,.11);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

body.customer-portal .product-card:hover,
body.customer-portal .shop-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 19px 38px rgba(2,31,51,.16);
}

/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

body.customer-portal .product-card img,
body.customer-portal .shop-card img {

    width: 100%;

    display: block;

    object-fit: cover;
}

/* =========================================================
   STOCK / PRICE
   ========================================================= */

body.customer-portal .stock {

    color: #08795c;

    font-weight: 850;
}

body.customer-portal .stock.out {

    color: #b34b4b;
}

body.customer-portal .price,
body.customer-portal .amount,
body.customer-portal .total,
body.customer-portal .cart-price,
body.customer-portal .cart-total {

    color: #103d59;

    font-weight: 950;
}

/* =========================================================
   STATUS
   ========================================================= */

body.customer-portal .status,
body.customer-portal .badge,
body.customer-portal .pill {

    display: inline-flex;

    align-items: center;

    min-height: 27px;

    padding: 5px 10px;

    border-radius: 999px;

    background: #e9f8f3;

    color: #08795c;

    font-size: 10px;

    font-weight: 900;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    body.customer-portal .product-grid,
    body.customer-portal .products-grid,
    body.customer-portal .shop-grid {

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

@media (max-width: 820px) {

    body.customer-portal .product-grid,
    body.customer-portal .products-grid,
    body.customer-portal .shop-grid {

        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    body.customer-portal nav {

        width: calc(100% - 20px);

        flex-wrap: wrap;
    }

    body.customer-portal .nav-links,
    body.customer-portal .customer-nav {

        width: 100%;

        justify-content: center;

        overflow-x: auto;
    }
}

@media (max-width: 520px) {

    body.customer-portal .product-grid,
    body.customer-portal .products-grid,
    body.customer-portal .shop-grid {

        grid-template-columns:
            1fr;
    }

    body.customer-portal nav {

        border-radius: 16px;
    }

    body.customer-portal .nav-links a,
    body.customer-portal .customer-nav a {

        padding: 9px 10px;

        font-size: 11px;
    }

    body.customer-portal button,
    body.customer-portal .btn,
    body.customer-portal .primary-action,
    body.customer-portal .checkout-btn {

        width: 100%;
    }
}

/* =========================================================
   FINAL UTF-8 SAFETY
   ========================================================= */

body.customer-portal {
    unicode-bidi: plaintext;
}

/* === END ONE-SHOT FINAL CUSTOMER DESIGN SYSTEM V2 === */


/* === ONE-SHOT UNIVERSAL CUSTOMER NAV FINAL === */

/* Universal customer navigation container */
body.customer-portal nav.customer-nav,
body.customer-portal nav .customer-nav,
body.customer-portal .customer-nav {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ALL inactive customer navigation links */
body.customer-portal nav.customer-nav a,
body.customer-portal nav .customer-nav a,
body.customer-portal .customer-nav a,
body.customer-portal nav a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
    visibility: visible !important;
    font-weight: 800 !important;
}

/* Active page */
body.customer-portal nav.customer-nav a.active,
body.customer-portal nav .customer-nav a.active,
body.customer-portal .customer-nav a.active,
body.customer-portal nav a.active,
body.customer-portal nav a.nav-active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    background: linear-gradient(135deg,#10a9df,#1768d8) !important;
    box-shadow: 0 7px 18px rgba(10,150,225,.28) !important;
}

/* Hover */
body.customer-portal nav.customer-nav a:hover,
body.customer-portal nav .customer-nav a:hover,
body.customer-portal .customer-nav a:hover,
body.customer-portal nav a:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    background: rgba(16,169,223,.18) !important;
}

/* Prevent old light-nav rules from washing text out */
body.customer-portal .nav-links a:not(.active),
body.customer-portal .customer-nav a:not(.active) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

/* === END ONE-SHOT UNIVERSAL CUSTOMER NAV FINAL === */


/* === SHOP NAV DEFINITIVE CONTRAST FIX === */

body.premium-shop.customer-portal nav.premium-nav .nav-links a:not(.active) {
    color: #18344d !important;
    -webkit-text-fill-color: #18344d !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
}

body.premium-shop.customer-portal nav.premium-nav .nav-links a.active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.premium-shop.customer-portal nav.premium-nav .nav-links a:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: linear-gradient(135deg,#10a9df,#1768d8) !important;
}

/* === END SHOP NAV DEFINITIVE CONTRAST FIX === */


/* AQUA MIRA TECH - UI MASTER V1 */
body.amt-management-ui{min-height:100vh;margin:0;color:#f5f9ff;background:#061426 url("/static/ui/rain_background.jpg") center/cover fixed no-repeat}
body.amt-management-ui:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,12,27,.38),rgba(2,13,27,.78));pointer-events:none}
.amt-shell{max-width:1580px;margin:auto;padding:16px 24px 34px}
.amt-top,.amt-nav,.amt-panel,.amt-actions,.amt-kpi{background:rgba(3,25,48,.76);backdrop-filter:blur(14px);box-shadow:0 12px 30px rgba(0,0,0,.24)}
.amt-top{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;border:1px solid rgba(44,158,255,.5);border-radius:18px}
.amt-brand{font-size:22px;font-weight:800}.amt-role{padding:10px 15px;border:1px solid rgba(78,168,255,.42);border-radius:12px;font-weight:700}
.amt-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px;padding:9px;border:1px solid rgba(29,145,255,.48);border-radius:17px}
.amt-nav a{color:#eef7ff!important;text-decoration:none!important;font-weight:700;padding:10px 12px;border-radius:11px}.amt-nav a:hover,.amt-nav a.active{background:linear-gradient(135deg,#087cff,#00a8ff);box-shadow:0 0 18px rgba(0,143,255,.34)}.amt-nav .logout{margin-left:auto}
.amt-hero{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:27px 4px 18px}.amt-hero h1{margin:0 0 7px;font-size:34px;color:#fff}.amt-hero p{margin:0;color:#c5d6e8}.amt-time{padding:10px 14px;border:1px solid rgba(63,161,255,.45);border-radius:12px;background:rgba(5,30,57,.66)}
.amt-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.amt-kpi{min-height:110px;padding:17px;border:1px solid rgba(31,151,255,.48);border-radius:17px}.amt-kpi .label{color:#c8d9eb;font-size:12px;font-weight:800;text-transform:uppercase}.amt-kpi .value{display:block;margin-top:9px;font-size:28px}.amt-kpi .link{display:block;margin-top:13px;color:#cfe9ff;text-decoration:none;font-size:12px}
.amt-content{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.amt-panel{padding:18px;border:1px solid rgba(31,151,255,.46);border-radius:17px;overflow:auto}.amt-panel h2{margin:0 0 14px;color:#fff}.amt-panel table{width:100%;border-collapse:collapse;color:#eef6ff}.amt-panel th{background:rgba(25,76,119,.5);color:#dbeeff;text-align:left;font-size:12px;padding:10px}.amt-panel td{padding:10px;border-bottom:1px solid rgba(154,201,237,.12);font-size:13px}.amt-status{display:inline-block;padding:5px 9px;border-radius:8px;border:1px solid #168cff;color:#79c7ff;background:rgba(0,117,255,.12);font-weight:800;font-size:11px}
.amt-actions{margin-top:18px;padding:18px;border:1px solid rgba(31,151,255,.46);border-radius:17px}.amt-actions h2{margin:0 0 15px}.amt-action-grid{display:grid;grid-template-columns:repeat(9,minmax(70px,1fr));gap:10px}.amt-action{color:#f5f9ff!important;text-decoration:none!important;text-align:center;padding:13px 7px;border:1px solid rgba(47,158,255,.35);border-radius:14px;background:rgba(8,43,76,.66);font-weight:700;font-size:12px}.amt-action:hover{border-color:#1595ff}
.amt-report-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.amt-form{display:flex;gap:8px;flex-wrap:wrap}.amt-form input,.amt-form select,.amt-form button{min-height:38px;border-radius:8px;border:1px solid rgba(84,167,235,.45);padding:0 10px}.amt-form button{background:#078be8;color:#fff;font-weight:800;border:0;padding:0 16px}.amt-list{color:#e9f5ff}.amt-list li{padding:7px 0}
@media(max-width:1100px){.amt-kpis{grid-template-columns:repeat(3,1fr)}.amt-action-grid{grid-template-columns:repeat(5,1fr)}}@media(max-width:760px){.amt-shell{padding:10px}.amt-content,.amt-report-grid{grid-template-columns:1fr}.amt-kpis{grid-template-columns:repeat(2,1fr)}.amt-action-grid{grid-template-columns:repeat(3,1fr)}.amt-nav .logout{margin-left:0}}


/* =========================================================
   AQUA MIRA TECH - GLOBAL MANAGEMENT RAIN GLASS BACKGROUND
   ========================================================= */

html:has(body.amt-management-ui) {
    min-height: 100%;
    background: #061426;
}

body.amt-management-ui {
    min-height: 100vh !important;
    margin: 0 !important;
    color: #f5f9ff !important;
    background-color: #061426 !important;
    background-image:
        linear-gradient(
            180deg,
            rgba(1,10,24,.22),
            rgba(1,10,24,.52)
        ),
        url("/static/ui/rain_background.jpg") !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

body.amt-management-ui::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(0,170,255,.10),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(40,100,255,.10),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            rgba(0,8,20,.12),
            rgba(0,8,20,.38)
        );
}

body.amt-management-ui nav,
body.amt-management-ui .panel,
body.amt-management-ui .card,
body.amt-management-ui .stat,
body.amt-management-ui .tile,
body.amt-management-ui table {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* ================================================================
   AQUA MIRA TECH - MANAGEMENT UI MASTER V2
   UI ONLY. No backend / DB / permissions changes.
   ================================================================ */
body.amt-management-ui { overflow-x: hidden; }

.amt-master-header,
.amt-master-nav {
    width: min(1280px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.amt-master-header {
    margin-top: 14px;
    min-height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(45,168,255,.55);
    border-radius: 18px;
    background: rgba(5,31,60,.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 12px 32px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
}

.amt-master-brand {
    font-size: 21px;
    font-weight: 900;
    color: #f7fbff;
}

.amt-master-role {
    padding: 10px 16px;
    border: 1px solid rgba(55,173,255,.55);
    border-radius: 12px;
    color: #f7fbff;
    background: rgba(4,24,48,.58);
    font-weight: 800;
    white-space: nowrap;
}

.amt-master-nav {
    margin-top: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    border: 1px solid rgba(45,168,255,.45);
    border-radius: 17px;
    background: rgba(5,31,60,.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 10px 28px rgba(0,0,0,.20);
}

.amt-master-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    color: #f3f8ff !important;
    text-decoration: none !important;
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
}

.amt-master-nav a:hover {
    background: #1688ff;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(22,136,255,.35);
}

.amt-master-nav .amt-master-logout {
    margin-left: auto;
    border: 1px solid rgba(120,190,255,.35);
}

body.amt-management-ui > main {
    width: min(1280px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {
    .amt-master-header,
    .amt-master-nav,
    body.amt-management-ui > main {
        width: calc(100% - 24px);
    }
    .amt-master-nav a {
        font-size: 12px;
        padding: 0 9px;
    }
    .amt-master-nav .amt-master-logout { margin-left: 0; }
}


/* AQUA MIRA TECH - CUSTOMER PREMIUM WATER UI */
body.customer-portal {
    min-height: 100vh !important;
    background-color: #061426 !important;
    background-image:
        linear-gradient(180deg,rgba(1,10,24,.22),rgba(1,10,24,.52)),
        url("/static/ui/rain_background.jpg") !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

body.customer-portal::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: rgba(1,12,28,.08);
    z-index: 0;
}

body.customer-portal > * {
    position: relative;
    z-index: 1;
}

/* AQUA MIRA TECH - CUSTOMER ACCOUNT + TRANSACTION V1 */
.customer-feature-wrap{width:min(1180px,calc(100% - 36px));margin:34px auto 60px}
.customer-feature-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.customer-feature-head h1{margin:0 0 7px;color:#fff}.customer-feature-head p{margin:0;color:rgba(255,255,255,.82)}
.customer-head-actions{display:flex;gap:8px;flex-wrap:wrap}
.customer-glass-card,.customer-address-manager{background:rgba(4,27,52,.78);border:1px solid rgba(45,168,255,.48);border-radius:20px;padding:22px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 42px rgba(0,0,0,.22)}
.customer-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.customer-form-grid label{color:#f4f8ff;font-weight:800}.customer-form-grid label.wide{grid-column:1/-1}
.customer-form-grid input:not([type="checkbox"]){width:100%;box-sizing:border-box;margin-top:7px;padding:12px 14px;border-radius:10px;border:1px solid rgba(60,160,235,.35);background:rgba(245,250,255,.96);color:#10243b}
.check-row{display:flex;align-items:center;gap:9px}.action-row{display:flex;gap:10px}
.customer-primary-btn,.customer-secondary-btn,.customer-back-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 15px;border-radius:10px;text-decoration:none;font-weight:900;cursor:pointer}
.customer-primary-btn{border:0;background:#1688ff;color:#fff}.customer-secondary-btn,.customer-back-btn{border:1px solid rgba(80,180,255,.42);background:rgba(10,48,82,.72);color:#fff}
.transaction-table-wrap{overflow:auto}.transaction-table{width:100%;border-collapse:collapse;color:#f4f8ff}.transaction-table th{text-align:left;padding:13px 12px;background:rgba(18,72,116,.85);font-size:12px}
.transaction-table td{padding:15px 12px;border-bottom:1px solid rgba(120,190,240,.16);vertical-align:middle}.transaction-table td small{display:block;margin-top:4px;opacity:.72}
.txn-badge{display:inline-block;padding:5px 9px;border-radius:999px;background:rgba(22,136,255,.18);border:1px solid rgba(22,136,255,.55);color:#8ed0ff;font-weight:900;font-size:11px}
.invoice-number{font-weight:800}.invoice-pending{opacity:.6}.txn-actions{display:flex;gap:8px;flex-wrap:wrap}.txn-actions a{color:#78c7ff;font-weight:900}
.empty-state{text-align:center;padding:50px 20px;color:#fff}.customer-feature-shortcuts{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.customer-feature-shortcuts a{padding:14px 18px;border-radius:14px;text-decoration:none;color:#fff;font-weight:900;background:rgba(12,57,95,.72);border:1px solid rgba(65,175,255,.42)}
.customer-address-manager{margin-top:24px}.customer-address-manager-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px}
.customer-address-manager h2{color:#fff;margin:0 0 5px}.customer-address-manager p{color:rgba(255,255,255,.78)}.customer-address-list{display:grid;gap:12px}
.customer-address-item{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px;border-radius:14px;background:rgba(7,38,68,.65);border:1px solid rgba(70,170,240,.25);color:#fff}
.customer-address-item p{margin:8px 0 0}
@media(max-width:760px){.customer-form-grid{grid-template-columns:1fr}.customer-form-grid label.wide{grid-column:auto}.customer-feature-head,.customer-address-manager-head,.customer-address-item{align-items:flex-start;flex-direction:column}}


/* CUSTOMER DASHBOARD SHORTCUT VISIBILITY FIX V1 */
body.customer-portal .customer-feature-shortcuts a,
body.customer-portal .customer-feature-shortcuts a:visited,
body.customer-portal .customer-feature-shortcuts a:hover {
    color: #ffffff !important;
    background: rgba(8, 55, 92, 0.88) !important;
    border: 1px solid rgba(80, 190, 255, 0.65) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.55) !important;
    opacity: 1 !important;
}

body.customer-portal .customer-feature-shortcuts a:hover {
    background: rgba(18, 112, 178, 0.95) !important;
    transform: translateY(-1px);
}

/* CUSTOMER TRANSACTION NAV VISIBILITY FIX V2 */
body.customer-portal .customer-head-actions a,
body.customer-portal .customer-head-actions a:visited,
body.customer-portal .customer-head-actions a:hover,
body.customer-portal .customer-back-btn,
body.customer-portal .customer-back-btn:visited,
body.customer-portal .customer-back-btn:hover {
    color: #ffffff !important;
    background: rgba(5, 48, 82, 0.94) !important;
    border: 1px solid rgba(74, 190, 255, 0.72) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.7) !important;
    opacity: 1 !important;
}

body.customer-portal .customer-head-actions a:hover,
body.customer-portal .customer-back-btn:hover {
    background: rgba(18, 120, 190, 0.98) !important;
}

/* AQUA MIRA TECH - CUSTOMER DASHBOARD MASTER V2 */
.customer-dashboard-v2{min-height:100vh;background:#061a31 url("/static/ui/rain_background.jpg") center/cover fixed no-repeat !important;color:#fff}
.customer-dashboard-v2:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,16,35,.18),rgba(2,16,35,.58));pointer-events:none}
.customer-dashboard-shell{width:min(1180px,calc(100% - 36px));margin:22px auto 55px}
.customer-dashboard-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 18px;border-radius:20px;background:rgba(4,28,52,.86);border:1px solid rgba(67,178,255,.48);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 15px 38px rgba(0,0,0,.22)}
.customer-brand{font-size:22px;font-weight:950}.brand-drop{font-size:20px}.customer-role{font-size:12px;color:rgba(255,255,255,.72);margin-top:3px}
.customer-logout-btn{padding:10px 16px;border-radius:11px;color:#fff!important;text-decoration:none!important;background:rgba(30,70,105,.72);border:1px solid rgba(90,190,255,.42);font-weight:900}
.customer-dashboard-hero{display:flex;align-items:end;justify-content:space-between;gap:25px;margin:42px 0 24px}
.customer-eyebrow{font-size:11px;font-weight:900;letter-spacing:1.2px;color:#8fd7ff}
.customer-dashboard-hero h1{margin:6px 0 7px;font-size:42px;line-height:1.05;color:#fff}
.customer-dashboard-hero p{margin:0;color:rgba(255,255,255,.84);font-size:15px}
.customer-shop-cta{display:inline-flex;padding:13px 18px;border-radius:12px;background:#128df0;color:#fff!important;text-decoration:none!important;font-weight:950;border:1px solid rgba(130,220,255,.5)}
.customer-dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.customer-dashboard-tile{min-height:145px;padding:20px;border-radius:19px;text-decoration:none!important;color:#fff!important;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(145deg,rgba(17,82,124,.72),rgba(5,35,63,.82));border:1px solid rgba(87,190,255,.45);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);box-shadow:0 12px 30px rgba(0,0,0,.18);transition:.18s ease}
.customer-dashboard-tile:hover{transform:translateY(-3px);border-color:rgba(120,215,255,.9);background:linear-gradient(145deg,rgba(23,112,166,.86),rgba(5,40,70,.9))}
.customer-dashboard-tile .tile-icon{font-size:25px;margin-bottom:auto;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4))}
.customer-dashboard-tile .tile-title{font-size:18px;font-weight:950;text-shadow:0 2px 5px rgba(0,0,0,.45)}
.customer-dashboard-tile .tile-sub{font-size:12px;margin-top:5px;color:rgba(255,255,255,.76)}
.tile-account,.tile-transactions{background:linear-gradient(145deg,rgba(20,122,125,.76),rgba(6,47,62,.86))}
.tile-invoices,.tile-wishlist{background:linear-gradient(145deg,rgba(55,82,145,.76),rgba(8,35,69,.86))}
.customer-dashboard-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;padding:18px 20px;border-radius:18px;background:rgba(4,28,52,.82);border:1px solid rgba(70,180,250,.38);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
.customer-dashboard-info{display:flex;gap:12px;align-items:center}.customer-dashboard-info>span{font-size:22px}.customer-dashboard-info strong{font-size:14px}.customer-dashboard-info p{margin:3px 0 0;color:rgba(255,255,255,.72);font-size:12px}
@media(max-width:900px){.customer-dashboard-grid{grid-template-columns:repeat(2,1fr)}.customer-dashboard-hero{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.customer-dashboard-shell{width:min(100% - 22px,1180px)}.customer-dashboard-grid{grid-template-columns:1fr}.customer-dashboard-hero h1{font-size:32px}.customer-dashboard-bottom{align-items:flex-start;flex-direction:column}}

/* CUSTOMER DASHBOARD WELCOME V3 */
.customer-welcome-hero{min-height:220px;align-items:center!important;margin:34px 0 22px!important;padding:30px 32px;border-radius:24px;background:linear-gradient(120deg,rgba(4,33,60,.88),rgba(7,66,100,.68));border:1px solid rgba(89,201,255,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 45px rgba(0,0,0,.22)}
.customer-welcome-copy{flex:1}
.customer-welcome-copy h1{font-size:42px!important;margin:7px 0 10px!important}
.customer-greeting{font-size:23px;color:#fff;margin-bottom:9px;text-shadow:0 2px 5px rgba(0,0,0,.45)}
.customer-greeting strong{color:#8fddff}
.greeting-separator{margin:0 9px;color:rgba(255,255,255,.55)}
.customer-welcome-copy p{font-size:15px!important;color:rgba(255,255,255,.84)!important}
.customer-welcome-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.customer-welcome-badges span{padding:7px 11px;border-radius:999px;background:rgba(12,104,157,.52);border:1px solid rgba(101,205,255,.38);font-size:11px;font-weight:850;color:#fff}
.customer-time-card{width:235px;flex:0 0 235px;text-align:center;padding:22px 18px;border-radius:20px;background:rgba(2,25,47,.78);border:1px solid rgba(84,192,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 28px rgba(0,0,0,.2)}
.time-card-label{font-size:11px;letter-spacing:2px;font-weight:950;color:#83d8ff;margin-bottom:8px}
#customerLiveDate{font-size:13px;font-weight:800;color:rgba(255,255,255,.84)}
#customerLiveTime{font-size:30px;font-weight:950;letter-spacing:1px;margin:7px 0;color:#fff}
.time-card-zone{font-size:10px;color:rgba(255,255,255,.56)}
@media(max-width:700px){.customer-welcome-hero{flex-direction:column!important;align-items:stretch!important}.customer-time-card{width:auto;flex:auto}.customer-welcome-copy h1{font-size:32px!important}.customer-greeting{font-size:19px}}


/* Aqua Mira B2B Portal - Plain Background Override */
body.customer-dashboard-v2 {
    background: #f4f8fb !important;
    background-image: none !important;
}

body.customer-dashboard-v2::before {
    background: none !important;
    display: none !important;
}

/* =========================================================
   AQUA MIRA INDIA — PREMIUM B2C HOMEPAGE
   ========================================================= */

body.b2c-home {
    margin: 0;
    background: #f7fbfd;
    color: #102a43;
    font-family: Arial, Helvetica, sans-serif;
}

.b2c-home *,
.b2c-home *::before,
.b2c-home *::after {
    box-sizing: border-box;
}

.b2c-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

/* ---------- Utility ---------- */

.b2c-utility {
    background: #06243d;
    color: #d9e8f2;
    font-size: 13px;
}

.utility-inner {
    min-height: 36px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 28px;
}

/* ---------- Header ---------- */

.b2c-header {
    background: #ffffff;
    border-bottom: 1px solid #e5eef3;
}

.header-inner {
    min-height: 92px;
    display: grid;
    grid-template-columns: 235px 1fr auto;
    align-items: center;
    gap: 30px;
}

.b2c-brand {
    text-decoration: none;
    color: #06243d;
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-name {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 2px;
}

.brand-country {
    color: #0b91b5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    margin-top: 5px;
}

.b2c-brand small {
    color: #718797;
    font-size: 10px;
    margin-top: 8px;
}

.b2c-search {
    display: flex;
    height: 44px;
    border: 1px solid #d8e5eb;
    border-radius: 7px;
    overflow: hidden;
    background: #f9fcfd;
}

.b2c-search input {
    flex: 1;
    border: 0;
    outline: 0;
    padding: 0 16px;
    font-size: 14px;
    background: transparent;
}

.b2c-search button {
    border: 0;
    padding: 0 22px;
    background: #0b91b5;
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

.b2c-header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.b2c-b2b-link {
    color: #06243d;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}

.b2c-cart {
    text-decoration: none;
    background: #06243d;
    color: #ffffff;
    padding: 11px 18px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
}

/* ---------- Navigation ---------- */

.b2c-nav {
    background: #ffffff;
    border-bottom: 1px solid #e5eef3;
}

.nav-inner {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 34px;
}

.nav-inner a {
    text-decoration: none;
    color: #36566b;
    font-size: 14px;
    font-weight: 600;
    transition: color .2s ease;
}

.nav-inner a:hover {
    color: #0b91b5;
}

/* ---------- Hero ---------- */

.b2c-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 35%, rgba(55,190,220,.20), transparent 32%),
        linear-gradient(135deg, #eaf8fc 0%, #f8fcfd 55%, #dff4f8 100%);
}

.hero-grid {
    min-height: 540px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 40px;
}

.hero-eyebrow {
    color: #0b91b5;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.hero-content h1 {
    margin: 16px 0 18px;
    color: #06243d;
    font-size: clamp(44px, 6vw, 70px);
    line-height: 1.02;
    letter-spacing: -2px;
}

.hero-content h1 strong {
    color: #0b91b5;
}

.hero-content > p {
    max-width: 570px;
    color: #526d7e;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 25px;
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    color: #31576d;
    font-size: 14px;
    font-weight: 600;
}

.hero-actions {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.primary-btn,
.secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 23px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.primary-btn {
    background: #0b91b5;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(11,145,181,.20);
}

.secondary-btn {
    background: #ffffff;
    color: #06243d;
    border: 1px solid #cbdde5;
}

.primary-btn:hover,
.secondary-btn:hover {
    transform: translateY(-2px);
}

/* ---------- Hero Visual ---------- */

.hero-visual {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.purifier-placeholder {
    position: relative;
    z-index: 2;
    width: 245px;
    height: 350px;
    border-radius: 24px 24px 34px 34px;
    background:
        linear-gradient(160deg, #ffffff, #dbeaf0);
    border: 1px solid rgba(255,255,255,.9);
    box-shadow:
        0 30px 60px rgba(6,36,61,.18),
        inset 0 0 0 8px rgba(255,255,255,.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.purifier-placeholder::before {
    content: "";
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 10px solid rgba(11,145,181,.14);
    box-shadow: inset 0 0 0 18px rgba(11,145,181,.06);
    margin-bottom: 28px;
}

.purifier-placeholder span {
    color: #06243d;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2px;
}

.purifier-placeholder small {
    color: #0b91b5;
    font-size: 9px;
    letter-spacing: 2px;
    margin-top: 8px;
}

.hero-orbit {
    position: absolute;
    border: 1px solid rgba(11,145,181,.16);
    border-radius: 50%;
}

.orbit-one {
    width: 390px;
    height: 390px;
}

.orbit-two {
    width: 510px;
    height: 510px;
}

/* ---------- Trust ---------- */

.trust-strip {
    background: #06243d;
    color: #ffffff;
}

.trust-grid {
    min-height: 105px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}

.trust-grid > div {
    padding: 8px 25px;
    border-right: 1px solid rgba(255,255,255,.13);
}

.trust-grid > div:last-child {
    border-right: 0;
}

.trust-grid strong,
.trust-grid span {
    display: block;
}

.trust-grid strong {
    font-size: 14px;
    margin-bottom: 7px;
}

.trust-grid span {
    color: #a9c1cf;
    font-size: 12px;
}

/* ---------- Sections ---------- */

.b2c-products-section,
.why-section {
    padding: 90px 0;
}

.section-heading {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 48px;
}

.section-heading > span,
.b2b-label {
    color: #0b91b5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.section-heading h2 {
    margin: 10px 0 12px;
    color: #06243d;
    font-size: 38px;
}

.section-heading p {
    color: #6a8291;
    line-height: 1.7;
}

/* ---------- Products ---------- */

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.b2c-product-card {
    background: #ffffff;
    border: 1px solid #e1edf2;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(6,36,61,.06);
}

.product-image {
    min-height: 245px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f8fa;
}

.product-placeholder {
    width: 130px;
    height: 180px;
    border-radius: 15px;
    background: linear-gradient(160deg,#ffffff,#dbeaf0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b91b5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 18px 30px rgba(6,36,61,.12);
}

.product-info {
    padding: 22px;
}

.product-info h3 {
    margin: 0 0 8px;
    color: #06243d;
    font-size: 19px;
}

.product-info p {
    color: #718797;
    font-size: 13px;
}

.product-card-footer {
    margin-top: 20px;
}

.small-btn {
    min-height: 40px;
    padding: 0 17px;
    font-size: 13px;
}

.collection-empty {
    max-width: 720px;
    margin: auto;
    padding: 55px 35px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e0edf2;
    border-radius: 14px;
    box-shadow: 0 15px 40px rgba(6,36,61,.06);
}

.empty-icon {
    font-size: 42px;
}

.collection-empty h3 {
    color: #06243d;
    margin: 18px 0 10px;
    font-size: 24px;
}

.collection-empty p {
    color: #718797;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* ---------- Why ---------- */

.why-section {
    background: #eef7fa;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.why-card {
    background: #ffffff;
    padding: 34px;
    border-radius: 12px;
    border: 1px solid #deebf0;
}

.why-number {
    color: #0b91b5;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
}

.why-card h3 {
    color: #06243d;
    margin: 15px 0 10px;
    font-size: 21px;
}

.why-card p {
    color: #718797;
    line-height: 1.7;
    font-size: 14px;
}

/* ---------- B2B ---------- */

.b2b-section {
    padding: 70px 0;
    background: #06243d;
    color: #ffffff;
}

.b2b-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
}

.b2b-inner h2 {
    margin: 10px 0;
    font-size: 32px;
}

.b2b-inner p {
    color: #abc1cf;
    max-width: 680px;
    line-height: 1.7;
}

.b2b-inner .primary-btn {
    flex-shrink: 0;
}

/* ---------- Footer ---------- */

.b2c-footer {
    background: #031a2d;
    color: #ffffff;
}

.footer-grid {
    padding: 55px 0;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 45px;
}

.footer-brand {
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 18px;
}

.footer-grid p {
    color: #91aaba;
    font-size: 13px;
}

.footer-grid h4 {
    margin: 0 0 16px;
    font-size: 14px;
}

.footer-grid a {
    display: block;
    margin-bottom: 10px;
    color: #9eb5c4;
    text-decoration: none;
    font-size: 13px;
}

.footer-grid a:hover {
    color: #ffffff;
}

.footer-bottom {
    padding: 18px 20px;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #718b9b;
    font-size: 12px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {

    .header-inner {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 18px 0;
    }

    .b2c-header-actions {
        justify-content: flex-start;
    }

    .nav-inner {
        overflow-x: auto;
        gap: 22px;
        white-space: nowrap;
        padding-bottom: 4px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        padding: 60px 0;
        text-align: center;
    }

    .hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-features,
    .hero-actions {
        justify-content: center;
    }

    .hero-visual {
        min-height: 350px;
    }

    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 20px 0;
    }

    .trust-grid > div {
        border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .product-grid,
    .why-grid {
        grid-template-columns: 1fr;
    }

    .b2b-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    .b2c-container {
        width: min(100% - 28px, 1180px);
    }

    .utility-inner {
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
        padding: 8px 0;
    }

    .brand-name {
        font-size: 21px;
    }

    .b2c-search {
        height: 42px;
    }

    .hero-content h1 {
        font-size: 44px;
    }

    .hero-content > p {
        font-size: 16px;
    }

    .hero-visual {
        min-height: 320px;
    }

    .purifier-placeholder {
        width: 205px;
        height: 300px;
    }

    .orbit-one {
        width: 300px;
        height: 300px;
    }

    .orbit-two {
        width: 370px;
        height: 370px;
    }

    .trust-grid {
        grid-template-columns: 1fr;
    }

    .trust-grid > div {
        border-right: 0;
    }

    .section-heading h2 {
        font-size: 30px;
    }

    .b2b-inner h2 {
        font-size: 27px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}


/* =========================================================
   B2C PRODUCT DETAIL — PREMIUM LAYER
   ========================================================= */

.b2c-site {
    margin: 0;
    background: #f5fbfe;
    color: #062b49;
    font-family: Arial, Helvetica, sans-serif;
}

.b2c-site a {
    text-decoration: none;
}

.b2c-header {
    background: #ffffff;
    border-bottom: 1px solid #dceaf1;
}

.b2c-utility {
    min-height: 30px;
    padding: 0 7%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #062b49;
    color: #ffffff;
    font-size: 12px;
}

.b2c-utility-links {
    display: flex;
    gap: 24px;
}

.b2c-utility-links a {
    color: #ffffff;
}

.b2c-main-header {
    min-height: 78px;
    padding: 0 7%;
    display: flex;
    align-items: center;
    gap: 26px;
}

.b2c-brand {
    width: 200px;
    display: flex;
    flex-direction: column;
    line-height: 1;
    color: #062b49;
}

.b2c-brand strong {
    font-size: 25px;
    letter-spacing: 1.5px;
}

.b2c-brand span {
    margin-top: 3px;
    color: #099bc1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.b2c-brand small {
    margin-top: 7px;
    color: #6a879a;
    font-size: 9px;
}

.b2c-search {
    flex: 1;
    display: flex;
    max-width: 700px;
}

.b2c-search input {
    flex: 1;
    height: 40px;
    padding: 0 15px;
    border: 1px solid #d6e5ec;
    border-radius: 6px 0 0 6px;
    font-size: 14px;
}

.b2c-search button {
    width: 82px;
    border: 0;
    border-radius: 0 6px 6px 0;
    background: #079bc0;
    color: #ffffff;
    font-weight: 700;
}

.b2c-b2b-link {
    color: #062b49;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.b2c-cart-link {
    padding: 11px 18px;
    border-radius: 6px;
    background: #062b49;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
}

.b2c-nav {
    min-height: 44px;
    padding: 0 7%;
    display: flex;
    align-items: center;
    gap: 34px;
    border-top: 1px solid #edf3f6;
}

.b2c-nav a {
    color: #123c59;
    font-size: 13px;
    font-weight: 700;
}

.b2c-product-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 24px 70px;
}

.b2c-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    color: #6b8798;
    font-size: 13px;
}

.b2c-breadcrumb a {
    color: #079bc0;
}

.b2c-product-detail-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 570px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dceaf1;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(6,43,73,.10);
}

.b2c-product-image-panel {
    min-height: 570px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 55px;
    background: linear-gradient(145deg, #eefaff, #dceff6);
}

.b2c-product-image {
    max-width: 100%;
    max-height: 470px;
    object-fit: contain;
    border-radius: 12px;
}

.b2c-product-placeholder {
    width: 310px;
    height: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: linear-gradient(160deg, #ffffff, #eaf6fa);
    box-shadow: 0 20px 45px rgba(6,43,73,.14);
    color: #062b49;
}

.placeholder-drop {
    margin-bottom: 28px;
    font-size: 72px;
}

.b2c-product-placeholder strong {
    font-size: 22px;
    letter-spacing: 2px;
}

.b2c-product-placeholder span {
    margin-top: 8px;
    color: #079bc0;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 700;
}

.b2c-product-info {
    padding: 58px 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.b2c-product-eyebrow {
    margin-bottom: 14px;
    color: #079bc0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.b2c-product-info h1 {
    margin: 0;
    color: #062b49;
    font-size: 40px;
    line-height: 1.12;
}

.b2c-product-subtitle {
    margin: 16px 0 24px;
    color: #6a879a;
    font-size: 16px;
}

.b2c-product-meta {
    display: flex;
    gap: 14px;
    margin-bottom: 26px;
}

.b2c-product-meta > div {
    flex: 1;
    padding: 14px;
    border: 1px solid #e0edf2;
    border-radius: 9px;
    background: #f8fcfe;
}

.b2c-product-meta span {
    display: block;
    margin-bottom: 6px;
    color: #7893a3;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.b2c-product-meta strong {
    color: #123c59;
    font-size: 13px;
    word-break: break-word;
}

.b2c-product-price {
    margin-bottom: 10px;
    color: #062b49;
    font-size: 34px;
    font-weight: 800;
}

.b2c-stock {
    margin-bottom: 22px;
    font-size: 13px;
    font-weight: 700;
}

.b2c-stock.available {
    color: #168052;
}

.b2c-stock.unavailable {
    color: #c0392b;
}

.b2c-compatible {
    margin-bottom: 24px;
    padding-top: 20px;
    border-top: 1px solid #e3edf1;
}

.b2c-compatible h3 {
    margin: 0 0 10px;
    color: #062b49;
    font-size: 15px;
}

.b2c-compatible ul {
    margin: 0;
    padding-left: 19px;
    color: #5d788a;
    font-size: 13px;
}

.b2c-compatible li {
    margin-bottom: 5px;
}

.b2c-add-cart-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.b2c-add-cart-form label {
    color: #36576c;
    font-size: 12px;
    font-weight: 700;
}

.b2c-add-cart-form input {
    width: 65px;
    height: 43px;
    padding: 0 8px;
    border: 1px solid #ccdfe7;
    border-radius: 7px;
    text-align: center;
}

.b2c-add-cart-btn {
    height: 43px;
    padding: 0 25px;
    border: 0;
    border-radius: 7px;
    background: #079bc0;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

.b2c-add-cart-btn:hover {
    background: #057f9f;
}

.b2c-back-btn {
    width: fit-content;
    color: #079bc0;
    font-size: 13px;
    font-weight: 700;
}

.b2c-footer {
    padding: 45px 7%;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    background: #062b49;
    color: #ffffff;
}

.b2c-footer > div {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.b2c-footer strong {
    margin-bottom: 6px;
}

.b2c-footer p,
.b2c-footer a {
    margin: 0;
    color: #b7d2df;
    font-size: 13px;
}

@media (max-width: 800px) {
    .b2c-utility,
    .b2c-main-header,
    .b2c-nav {
        padding-left: 5%;
        padding-right: 5%;
    }

    .b2c-main-header {
        flex-wrap: wrap;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .b2c-search {
        order: 5;
        flex-basis: 100%;
        max-width: none;
    }

    .b2c-nav {
        gap: 15px;
        overflow-x: auto;
    }

    .b2c-product-detail-card {
        grid-template-columns: 1fr;
    }

    .b2c-product-image-panel {
        min-height: 400px;
    }

    .b2c-product-info {
        padding: 38px 28px;
    }

    .b2c-product-info h1 {
        font-size: 30px;
    }

    .b2c-footer {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .b2c-utility-links {
        gap: 10px;
        font-size: 10px;
    }

    .b2c-product-page {
        padding-left: 14px;
        padding-right: 14px;
    }

    .b2c-product-image-panel {
        padding: 30px;
    }

    .b2c-product-meta {
        flex-direction: column;
    }

    .b2c-add-cart-form {
        flex-wrap: wrap;
    }

    .b2c-footer {
        grid-template-columns: 1fr;
    }
}

/* B2C PRODUCT IMAGE */
.b2c-product-card .product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.b2c-product-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.b2c-product-card .product-image img:hover {
    transform: scale(1.02);
    transition: transform .2s ease;
}

/* =========================================================
   B2C FINAL PRODUCT PRESENTATION POLISH
   ========================================================= */

.b2c-product-card {
    overflow: hidden;
}

.b2c-product-card .product-image {
    height: 300px;
    padding: 18px;
    background: linear-gradient(180deg, #f7fcff 0%, #edf8fc 100%);
}

.b2c-product-card .product-image img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 12px;
    transition: transform .25s ease;
}

.b2c-product-card:hover .product-image img {
    transform: scale(1.025);
}

.b2c-product-card .product-info {
    min-height: 175px;
    display: flex;
    flex-direction: column;
}

.b2c-product-card .product-info h3 {
    line-height: 1.3;
}

.b2c-product-card .product-card-footer {
    margin-top: auto;
    padding-top: 18px;
}

.b2c-product-card .small-btn {
    min-width: 120px;
    text-align: center;
}

@media (max-width: 720px) {
    .b2c-product-card .product-image {
        height: 260px;
        padding: 14px;
    }

    .b2c-product-card .product-info {
        min-height: 160px;
    }
}

/* ============================================================
   B2C CART V1
   ============================================================ */

.b2c-cart-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 28px;
}

.b2c-cart-item {
    display: grid;
    grid-template-columns: 110px minmax(180px, 1fr) auto auto auto;
    align-items: center;
    gap: 20px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e0edf2;
    border-radius: 16px;
}

.b2c-cart-image {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5fbfd;
    border-radius: 12px;
    overflow: hidden;
}

.b2c-cart-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.b2c-cart-details h2 {
    margin: 0 0 8px;
    color: #062b49;
    font-size: 18px;
}

.b2c-cart-details p {
    margin: 4px 0;
    color: #718797;
    font-size: 13px;
}

.b2c-cart-qty-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.b2c-cart-qty-form input {
    width: 68px;
    padding: 10px;
    border: 1px solid #d5e5eb;
    border-radius: 8px;
}

.b2c-cart-qty-form button,
.b2c-cart-remove {
    border: 0;
    border-radius: 8px;
    padding: 10px 13px;
    cursor: pointer;
}

.b2c-cart-qty-form button {
    background: #079fc2;
    color: #fff;
}

.b2c-cart-line-total {
    min-width: 110px;
    text-align: right;
    font-weight: 800;
    color: #062b49;
}

.b2c-cart-remove {
    background: #f3f6f8;
    color: #8a3b3b;
}

.b2c-cart-summary {
    display: flex;
    justify-content: flex-end;
    gap: 30px;
    align-items: center;
    margin-top: 24px;
    padding: 22px;
    background: #eef8fb;
    border-radius: 14px;
    color: #062b49;
}

.b2c-cart-summary strong {
    font-size: 26px;
}

.b2c-cart-actions {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 22px;
}

.b2c-cart-message {
    margin-top: 18px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #eef8fb;
    color: #075d72;
}

@media (max-width: 800px) {
    .b2c-cart-item {
        grid-template-columns: 90px 1fr;
    }

    .b2c-cart-image {
        width: 90px;
        height: 90px;
    }

    .b2c-cart-qty-form,
    .b2c-cart-line-total,
    .b2c-cart-item > form:last-child {
        grid-column: 2;
    }

    .b2c-cart-line-total {
        text-align: left;
    }

    .b2c-cart-actions {
        flex-direction: column;
    }
}

.b2c-commerce-shell{max-width:1120px;margin:40px auto;padding:0 20px}.b2c-commerce-card{background:#fff;border-radius:22px;padding:38px;box-shadow:0 18px 55px rgba(5,43,70,.12)}.b2c-commerce-card h1{color:#062d4f}.b2c-commerce-card h2{color:#073b61;margin-top:26px}.b2c-eyebrow{color:#009bc5;font-size:12px;font-weight:800;letter-spacing:2px}.b2c-commerce-card label{display:block;font-weight:700;color:#24445b;margin:12px 0 6px}.b2c-commerce-card input,.b2c-commerce-card textarea{width:100%;box-sizing:border-box;padding:12px;border:1px solid #d7e6ee;border-radius:9px;font:inherit}.secondary-btn{display:inline-block;padding:11px 18px;border:1px solid #bcd8e5;border-radius:8px;text-decoration:none;color:#073b61;background:#fff;font-weight:700}.b2c-confirmation{text-align:center;max-width:720px;margin:auto}.b2c-order-number{font-size:26px;font-weight:800;color:#009bc5;margin:22px}.b2c-order-card{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px;border:1px solid #dcecf2;border-radius:12px;padding:16px;margin:12px 0}@media(max-width:700px){.b2c-commerce-card{padding:24px}.b2c-order-card{grid-template-columns:1fr}}

/* DateX B2C V2 */
.auth-wrap,.account-wrap,.management-wrap{min-height:100vh;padding:48px 20px;display:flex;justify-content:center;align-items:flex-start;background:#f6f8fb}
.auth-card,.panel{width:min(100%,1100px);background:#fff;padding:32px;border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.08)}
.auth-card{max-width:480px}
.auth-card label{display:block;margin:14px 0 6px;font-weight:600}
.auth-card input,.panel input,.panel select{width:100%;box-sizing:border-box;padding:12px;border:1px solid #d7dce5;border-radius:9px}
.auth-card button,.panel button,.btn{display:inline-block;margin-top:18px;padding:11px 18px;border:0;border-radius:9px;background:#123b67;color:#fff;text-decoration:none;cursor:pointer}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.test-otp{padding:14px;background:#fff4cf;border:1px solid #ead27a;border-radius:10px;margin:18px 0}
.panel table{width:100%;border-collapse:collapse;margin-top:20px}
.panel th,.panel td{padding:12px;border-bottom:1px solid #e7eaf0;text-align:left;vertical-align:top}
.timeline{display:grid;gap:12px;margin-top:20px}
.timeline-item{padding:16px;border-left:4px solid #123b67;background:#f7f9fc;border-radius:8px}
.timeline-item span,.timeline-item small{display:block;margin-top:5px;color:#667085}
@media(max-width:800px){.panel{padding:18px;overflow:auto}.panel table{min-width:850px}}

/* =========================================================
   AQUA MIRA INDIA — FINAL B2C FOOTER ALIGNMENT
   ========================================================= */

.b2c-footer{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:56px 0 0 !important;
    box-sizing:border-box !important;
}

.b2c-footer .footer-grid{
    width:min(1200px, calc(100% - 48px)) !important;
    max-width:1200px !important;
    margin:0 auto !important;
    padding:0 0 48px !important;
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:48px !important;
    align-items:start !important;
    box-sizing:border-box !important;
}

.b2c-footer .footer-grid > div{
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
}

.b2c-footer .footer-brand{
    margin:0 0 8px !important;
}

.b2c-footer .footer-grid p{
    margin:0 !important;
}

.b2c-footer .footer-grid h4{
    margin:0 0 14px !important;
}

.b2c-footer .footer-grid a{
    display:block !important;
    width:max-content !important;
    max-width:100% !important;
    margin:0 0 8px !important;
}

.b2c-footer .footer-bottom{
    width:min(1200px, calc(100% - 48px)) !important;
    max-width:1200px !important;
    margin:0 auto !important;
    padding:22px 0 28px !important;
    box-sizing:border-box !important;
    text-align:center !important;
}

@media (max-width:900px){
    .b2c-footer .footer-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:36px 32px !important;
    }
}

@media (max-width:600px){
    .b2c-footer{
        padding-top:40px !important;
    }

    .b2c-footer .footer-grid{
        width:calc(100% - 32px) !important;
        grid-template-columns:1fr !important;
        gap:28px !important;
        padding-bottom:32px !important;
    }

    .b2c-footer .footer-bottom{
        width:calc(100% - 32px) !important;
    }
}


/* =========================================================
   AQUA MIRA INDIA — HERO TRUST STRIP FINAL ALIGNMENT
   ========================================================= */

.b2c-container.trust-strip,
.trust-strip{
    width:min(1200px, calc(100% - 48px)) !important;
    max-width:1200px !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
}

.trust-grid{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:0 !important;
    margin:0 auto !important;
    padding:0 !important;
    box-sizing:border-box !important;
}

.trust-grid > div{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding:22px 24px !important;
    box-sizing:border-box !important;
}

.trust-grid strong{
    display:block !important;
    text-align:center !important;
}

.trust-grid span{
    display:block !important;
    margin:5px 0 0 !important;
    text-align:center !important;
}

@media (max-width:900px){
    .b2c-container.trust-strip,
    .trust-strip{
        width:calc(100% - 36px) !important;
    }

    .trust-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width:600px){
    .b2c-container.trust-strip,
    .trust-strip{
        width:calc(100% - 24px) !important;
    }

    .trust-grid{
        grid-template-columns:1fr !important;
    }

    .trust-grid > div{
        padding:18px 16px !important;
    }
}


/* =========================================================
   AQUA MIRA INDIA — TRUST STRIP ROOT GRID FIX
   ========================================================= */
.trust-strip{
    display:block !important;
}

.trust-strip > .trust-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
}

@media (max-width:900px){
    .trust-strip > .trust-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media (max-width:600px){
    .trust-strip > .trust-grid{
        grid-template-columns:1fr !important;
    }
}

/* =========================================================
   AQUA MIRA INDIA — FULL WIDTH TRUST BAND
   ========================================================= */

.trust-strip{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:0 !important;
    box-sizing:border-box !important;
    background:#06243d !important;
    overflow:hidden !important;
}

.trust-strip > .trust-grid{
    width:min(1200px, calc(100% - 48px)) !important;
    max-width:1200px !important;
    margin:0 auto !important;
    min-height:105px !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    align-items:center !important;
    box-sizing:border-box !important;
}

.trust-strip .trust-grid > div{
    min-width:0 !important;
    padding:22px 24px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    box-sizing:border-box !important;
    border-right:1px solid rgba(255,255,255,.13) !important;
}

.trust-strip .trust-grid > div:last-child{
    border-right:0 !important;
}

@media (max-width:900px){
    .trust-strip > .trust-grid{
        width:calc(100% - 36px) !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media (max-width:600px){
    .trust-strip > .trust-grid{
        width:100% !important;
        grid-template-columns:1fr !important;
    }

    .trust-strip .trust-grid > div{
        border-right:0 !important;
        border-bottom:1px solid rgba(255,255,255,.13) !important;
    }

    .trust-strip .trust-grid > div:last-child{
        border-bottom:0 !important;
    }
}

/* =========================================================
   AQUA MIRA INDIA — TRUST ICONS
   ========================================================= */

.trust-strip .trust-icon{
    width:34px !important;
    height:34px !important;
    margin:0 auto 9px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.trust-strip .trust-icon svg{
    width:30px !important;
    height:30px !important;
    fill:none !important;
    stroke:#22c7ee !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

.trust-strip .trust-grid strong{
    color:#10b8df !important;
}

.trust-strip .trust-grid span{
    color:#d7e7ef !important;
}

/* =========================================================
   AQUA MIRA INDIA — TRUST ICON FINAL OVERRIDE
   ========================================================= */

.trust-strip .trust-grid .trust-icon{
    all:unset !important;
    width:38px !important;
    height:38px !important;
    margin:0 auto 9px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    color:#22c7ee !important;
}

.trust-strip .trust-grid .trust-icon svg{
    display:block !important;
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    max-width:32px !important;
    max-height:32px !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    fill:none !important;
    stroke:#22c7ee !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

.trust-strip .trust-grid .trust-icon svg *,
.trust-strip .trust-grid .trust-icon svg path,
.trust-strip .trust-grid .trust-icon svg circle{
    fill:none !important;
    stroke:#22c7ee !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

.trust-strip .trust-grid > div{
    background:transparent !important;
}

.trust-strip .trust-grid strong{
    color:#10b8df !important;
    font-weight:800 !important;
}

.trust-strip .trust-grid span{
    color:#d7e7ef !important;
}