/* customer-pages.css */
/* =====================================================
   CUSTOMER PAGES
===================================================== */

.customer-page,
.tracking-page {
    background: #f5f7f9;
    min-height: 100vh;
    padding-bottom: 50px;
}


/* Breadcrumb */

.customer-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 0;
    font-size: 11px;
    color: #818b96;
}

.customer-breadcrumb a {
    color: #07876b;
    text-decoration: none;
}

.customer-breadcrumb i {
    font-size: 8px;
}


/* =====================================================
   CUSTOMER LAYOUT
===================================================== */

.customer-layout {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 18px;
}


/* Sidebar */

.customer-sidebar {
    background: #fff;
    border: 1px solid #e4e9ec;
    border-radius: 11px;
    height: fit-content;
    position: sticky;
    top: 85px;
    overflow: hidden;
}

.customer-user {
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #edf0f2;
}

.customer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e7f7f2;
    color: #07876b;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 19px;
    font-weight: 700;
}

.customer-user strong {
    display: block;
    font-size: 13px;
}

.customer-user small {
    display: block;
    color: #929ba4;
    font-size: 17px;
    margin-top: 3px;
}


/* Menu */

.customer-menu {
    padding: 8px;
}

.customer-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 10px;
    border-radius: 6px;
    color: #68737e;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 2px;
}

.customer-menu a i {
    font-size: 16px;
}

.customer-menu a:hover,
.customer-menu a.active {
    background: #eaf8f4;
    color: #07876b;
}

.customer-menu a.logout {
    color: #e45b5b;
    margin-top: 10px;
}


/* =====================================================
   CUSTOMER CARD
===================================================== */

.customer-card {
    background: #fff;
    border: 1px solid #e4e9ec;
    border-radius: 11px;
    overflow: hidden;
}

.customer-card-header {
    padding: 19px;
    border-bottom: 1px solid #edf0f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.customer-card-header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 750;
}

.customer-card-header p {
    margin: 4px 0 0;
    color: #8a949e;
    font-size: 10px;
}


/* =====================================================
   PROFILE
===================================================== */

.profile-edit-btn {
    border: 1px solid #07876b;
    color: #07876b;
    background: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
}

.profile-information {
    padding: 25px;
    display: flex;
    gap: 30px;
}

.profile-avatar-large {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #e8f7f3;
    color: #07876b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 700;
    flex-shrink: 0;
}

.profile-fields {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.profile-field label {
    display: block;
    color: #939ca5;
    font-size: 13px;
    margin-bottom: 4px;
}

.profile-field strong {
    font-size: 17px;
    color: #293341;
}


/* Stats */

.profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 15px;
}

.profile-stat {
    background: #fff;
    border: 1px solid #e4e9ec;
    border-radius: 9px;
    padding: 16px;
}

.profile-stat i {
    color: #07876b;
    font-size: 23px;
}

.profile-stat strong {
    display: block;
    font-size: 23px;
    margin-top: 7px;
}

.profile-stat span {
    color: #8a949e;
    font-size: 9px;
}


/* =====================================================
   ORDERS
===================================================== */

.order-tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid #edf0f2;
    padding: 0 17px;
}

.order-tabs button {
    white-space: nowrap;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 13px 15px;
    color: #818b96;
    font-size: 13px;
    font-weight: 600;
}

.order-tabs button.active {
    color: #07876b;
    border-bottom-color: #07876b;
}

.order-card {
    margin: 15px;
    border: 1px solid #e5e9ec;
    border-radius: 8px;
    overflow: hidden;
}

.order-header {
    padding: 12px;
    background: #fafbfb;
    display: flex;
    align-items: center;
    gap: 35px;
}

.order-header div span {
    display: block;
    color: #949da5;
    font-size: 13px;
}

.order-header div strong {
    display: block;
    font-size: 11px;
    margin-top: 3px;
}

.order-status {
    margin-left: auto;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 700;
}

.order-status.delivered {
    background: #e8f7f3;
    color: #07876b;
}

.order-status.shipped {
    background: #eef5ff;
    color: #3676c8;
}

.order-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
}

.order-product-image {
    width: 65px;
    height: 65px;
    background: #f7f9fa;
    border-radius: 6px;
}

.order-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.order-product-info {
    flex: 1;
}

.order-product-info h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
}

.order-product-info p {
    margin: 0 0 4px;
    color: #8b949d;
    font-size: 13px;
}

.order-product-info span {
    color: #7d8791;
    font-size: 13px;
}

.order-price {
    font-size: 19px;
}

.order-footer {
    padding: 11px 14px;
    border-top: 1px solid #edf0f2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
}

.order-footer div {
    display: flex;
    gap: 15px;
}

.order-footer a {
    color: #07876b;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
}


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

.wishlist-count {
    color: #07876b;
    font-size: 17px;
    font-weight: 700;
}

.wishlist-grid {
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 9px;
}

.wishlist-product {
    position: relative;
    border: 1px solid #e5e9ec;
    border-radius: 8px;
    overflow: hidden;
}

.remove-wishlist {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 2;
    width: 27px;
    height: 27px;
    border: 1px solid #e2e6e9;
    border-radius: 50%;
    background: #fff;
    color: #777;
}

.wishlist-image {
    height: 170px;
    background: #f8fafb;
    position: relative;
}

.wishlist-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wishlist-image span {
    position: absolute;
    left: 7px;
    bottom: 7px;
    background: #e8f7f3;
    color: #07876b;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 600;
}

.wishlist-content {
    padding: 10px;
}

.wishlist-content small {
    color: #929ba4;
    font-size: 13px;
}

.wishlist-content h3 {
    margin: 3px 0;
    font-size: 17px;
    line-height: 1.4;
}

.wishlist-content p {
    margin: 0 0 6px;
    color: #8a949e;
    font-size: 13px;
}

.wishlist-rating {
    display: inline-block;
    background: #07876b;
    color: #fff;
    padding: 3px 5px;
    border-radius: 3px;
    font-size: 12px;
}

.wishlist-price {
    margin: 7px 0;
}

.wishlist-price strong {
    font-size: 19px;
}

.wishlist-price del {
    margin-left: 4px;
    color: #9aa2aa;
    font-size: 13px;
}

.wishlist-cart {
    width: 100%;
    height: 32px;
    border: 1px solid #07876b;
    background: #fff;
    color: #07876b;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
}


/* =====================================================
   INVOICE
===================================================== */

.invoice-page {
    background: #f5f7f9;
    padding: 20px 0 50px;
}

.invoice-actions {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.invoice-actions a,
.invoice-actions button {
    border: 0;
    background: transparent;
    color: #07876b;
    font-size: 10px;
    text-decoration: none;
    font-weight: 700;
}

.invoice-card {
    background: #fff;
    border: 1px solid #e2e7ea;
    padding: 35px;
}

.invoice-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 25px;
    border-bottom: 1px solid #e5e9ec;
}

.invoice-logo {
    font-size: 20px;
    font-weight: 800;
}

.invoice-logo span {
    display: inline-flex;
    width: 31px;
    height: 31px;
    align-items: center;
    justify-content: center;
    background: #07876b;
    color: #fff;
    border-radius: 7px;
    margin-right: 5px;
}

.invoice-header p {
    color: #929ba4;
    font-size: 9px;
}

.invoice-title {
    text-align: right;
}

.invoice-title h1 {
    margin: 0;
    font-size: 25px;
}

.invoice-title span {
    color: #07876b;
    font-size: 10px;
}

.invoice-meta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    padding: 25px 0;
}

.invoice-meta label {
    display: block;
    color: #929ba4;
    text-transform: uppercase;
    font-size: 8px;
    margin-bottom: 7px;
}

.invoice-meta strong,
.invoice-meta span {
    display: block;
    font-size: 9px;
    margin-bottom: 4px;
}

.invoice-meta .paid {
    color: #07876b;
}

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

.invoice-table th {
    background: #f5f7f8;
    padding: 10px;
    text-align: left;
    font-size: 8px;
    text-transform: uppercase;
}

.invoice-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #edf0f2;
    font-size: 9px;
}

.invoice-table td strong {
    display: block;
}

.invoice-table td small {
    display: block;
    margin-top: 3px;
    color: #929ba4;
    font-size: 7px;
}

.invoice-summary {
    display: flex;
    justify-content: flex-end;
    padding: 20px 0;
}

.invoice-total-box {
    width: 280px;
}

.invoice-total-box div {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 9px;
}

.grand-total {
    border-top: 1px solid #dfe4e7;
    margin-top: 7px;
    padding-top: 12px !important;
    font-size: 13px !important;
}

.grand-total strong {
    color: #07876b;
}

.invoice-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #e5e9ec;
}

.invoice-footer strong,
.invoice-footer span {
    display: block;
    font-size: 9px;
}

.invoice-footer p {
    margin: 5px 0;
    color: #929ba4;
    font-size: 7px;
}


/* =====================================================
   TRACKING
===================================================== */

.tracking-header {
    background: #fff;
    border: 1px solid #e5e9ec;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
}

.tracking-header span,
.tracking-status span {
    display: block;
    color: #9099a3;
    font-size: 9px;
}

.tracking-header h1 {
    margin: 5px 0;
    font-size: 21px;
}

.tracking-header p {
    margin: 0;
    color: #8b949e;
    font-size: 9px;
}

.tracking-status {
    text-align: right;
}

.tracking-status strong {
    display: block;
    color: #07876b;
    margin-top: 5px;
    font-size: 13px;
}


/* Progress */

.tracking-card {
    background: #fff;
    border: 1px solid #e5e9ec;
    border-radius: 10px;
    margin-top: 15px;
    padding: 30px 20px;
}

.tracking-progress {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.tracking-line {
    position: absolute;
    top: 21px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: #dfe5e7;
}

.tracking-step {
    position: relative;
    z-index: 2;
    width: 19%;
    text-align: center;
}

.tracking-icon {
    width: 43px;
    height: 43px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #f0f3f4;
    color: #929ba3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tracking-step.completed .tracking-icon,
.tracking-step.current .tracking-icon {
    background: #07876b;
    color: #fff;
}

.tracking-step strong {
    display: block;
    font-size: 9px;
}

.tracking-step span {
    display: block;
    margin-top: 4px;
    color: #929ba4;
    font-size: 7px;
}


/* History */

.tracking-history-card,
.tracking-order-card {
    background: #fff;
    border: 1px solid #e5e9ec;
    border-radius: 10px;
    padding: 18px;
}

.tracking-section-title h2,
.tracking-order-card h2 {
    margin: 0 0 17px;
    font-size: 15px;
}

.tracking-history {
    border-left: 1px solid #dfe5e7;
    margin-left: 8px;
}

.tracking-event {
    position: relative;
    padding: 0 0 22px 20px;
}

.event-dot {
    position: absolute;
    left: -5px;
    top: 2px;
    width: 9px;
    height: 9px;
    background: #cfd6d9;
    border-radius: 50%;
}

.tracking-event.active .event-dot {
    background: #07876b;
}

.tracking-event strong {
    font-size: 10px;
}

.tracking-event p {
    margin: 4px 0;
    color: #7e8892;
    font-size: 8px;
}

.tracking-event small {
    color: #9aa2aa;
    font-size: 7px;
}


/* Tracking product */

.tracking-product {
    display: flex;
    gap: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #edf0f2;
}

.tracking-product img {
    width: 55px;
    height: 55px;
    background: #f8fafb;
    object-fit: contain;
}

.tracking-product div {
    flex: 1;
}

.tracking-product strong,
.tracking-product span,
.tracking-product b {
    display: block;
}

.tracking-product strong {
    font-size: 9px;
}

.tracking-product span {
    color: #929ba4;
    font-size: 7px;
    margin: 3px 0;
}

.tracking-product b {
    font-size: 10px;
}

.tracking-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    font-size: 9px;
    color: #78838e;
}

.tracking-summary-total {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #e5e9ec;
    padding-top: 12px;
    font-size: 12px;
}

.tracking-summary-total strong {
    color: #07876b;
}

.tracking-invoice-btn {
    display: block;
    text-align: center;
    margin-top: 15px;
    padding: 10px;
    border: 1px solid #07876b;
    border-radius: 6px;
    color: #07876b;
    text-decoration: none;
    font-size: 9px;
    font-weight: 700;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .customer-page,
    .tracking-page {
        padding-bottom: 30px;
    }

    .customer-breadcrumb {
        padding: 10px 0;
        font-size: 9px;
    }


    /* Customer Layout */

    .customer-layout {
        display: block;
    }

    .customer-sidebar {
        position: static;
        margin-bottom: 10px;
    }

    .customer-user {
        padding: 12px;
    }

    .customer-menu {
        display: flex;
        overflow-x: auto;
        padding: 5px;
        scrollbar-width: none;
    }

    .customer-menu::-webkit-scrollbar {
        display: none;
    }

    .customer-menu a {
        flex: 0 0 auto;
        padding: 8px 10px;
        margin: 0;
        font-size: 8px;
    }

    .customer-menu a i {
        font-size: 13px;
    }

    .customer-menu a.logout {
        margin: 0;
    }


    /* Header */

    .customer-card-header {
        padding: 13px;
    }

    .customer-card-header h1 {
        font-size: 17px;
    }


    /* Profile */

    .profile-information {
        padding: 15px;
        display: block;
    }

    .profile-avatar-large {
        margin-bottom: 18px;
    }

    .profile-fields {
        grid-template-columns: repeat(2, 1fr);
        gap: 13px;
    }

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


    /* Orders */

    .order-card {
        margin: 9px;
    }

    .order-header {
        gap: 12px;
        flex-wrap: wrap;
    }

    .order-status {
        margin-left: 0;
    }

    .order-product {
        padding: 10px;
    }

    .order-product-image {
        width: 55px;
        height: 55px;
    }

    .order-product-info h3 {
        font-size: 9px;
    }

    .order-footer {
        align-items: flex-start;
        gap: 10px;
        flex-direction: column;
    }


    /* Wishlist */

    .wishlist-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 9px;
        gap: 8px;
    }

    .wishlist-image {
        height: 140px;
    }


    /* Invoice */

    .invoice-page {
        padding: 10px 0 30px;
    }

    .invoice-card {
        padding: 15px;
    }

    .invoice-header {
        padding-bottom: 15px;
    }

    .invoice-logo {
        font-size: 15px;
    }

    .invoice-title h1 {
        font-size: 18px;
    }

    .invoice-meta {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 17px 0;
    }

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

    .invoice-table {
        min-width: 600px;
    }

    .invoice-footer {
        flex-direction: column;
        gap: 15px;
    }


    /* Tracking */

    .tracking-header {
        padding: 13px;
    }

    .tracking-header h1 {
        font-size: 17px;
    }

    .tracking-status strong {
        font-size: 10px;
    }

    .tracking-card {
        padding: 20px 7px;
        overflow-x: auto;
    }

    .tracking-progress {
        min-width: 620px;
    }

    .tracking-header {
        gap: 10px;
    }

}

/* cart.css */
/* =========================================
   CART PAGE
========================================= */

.cart-page {
    background: #f7f8fa;
    min-height: 70vh;
    padding-bottom: 30px;
}


/* Breadcrumb */

.cart-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: #777;
}

.cart-breadcrumb a {
    color: #555;
    text-decoration: none;
}

.cart-breadcrumb a:hover {
    color: #e91e63;
}

.cart-breadcrumb i {
    font-size: 10px;
    color: #aaa;
}


/* Header */

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.cart-header h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #202124;
}

.cart-header p {
    margin: 0;
    font-size: 14px;
    color: #777;
}

.continue-shopping {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: .2s;
}

.continue-shopping:hover {
    border-color: #e91e63;
    color: #e91e63;
}


/* Cart Card */

.cart-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    overflow: hidden;
}


/* Cart Header */

.cart-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.select-all {
    display: flex;
    align-items: center;
    gap: 9px;
}

.select-all input,
.product-check {
    width: 17px;
    height: 17px;
    accent-color: #e91e63;
    cursor: pointer;
}

.select-all label {
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.clear-cart {
    border: 0;
    background: transparent;
    color: #777;
    font-size: 13px;
    cursor: pointer;
}

.clear-cart:hover {
    color: #dc3545;
}


/* Cart Item */

.cart-item {
    display: flex;
    gap: 15px;
    padding: 20px;
    border-bottom: 1px solid #eee;
    transition: .25s;
}

.cart-item:last-child {
    border-bottom: 0;
}

.item-check {
    padding-top: 8px;
}


/* Image */

.item-image {
    width: 125px;
    height: 125px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}


/* Details */

.item-details {
    flex: 1;
    min-width: 0;
}

.item-top {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.item-brand {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.item-details h3 {
    margin: 4px 0 4px;
    font-size: 16px;
    font-weight: 650;
}

.item-details h3 a {
    color: #222;
    text-decoration: none;
}

.item-details h3 a:hover {
    color: #e91e63;
}

.item-pack {
    margin: 0;
    font-size: 13px;
    color: #777;
}


/* Remove */

.remove-item {
    border: 0;
    background: transparent;
    color: #999;
    font-size: 17px;
    cursor: pointer;
}

.remove-item:hover {
    color: #dc3545;
}


/* Rating */

.item-rating {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
}

.item-rating span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #138a4b;
    color: #fff;
    border-radius: 4px;
    padding: 3px 7px;
    font-size: 11px;
    font-weight: 600;
}

.item-rating i {
    font-size: 9px;
}

.item-rating small {
    color: #999;
    font-size: 11px;
}


/* Price */

.item-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 13px;
}

.item-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.item-price strong {
    font-size: 19px;
    color: #222;
}

.item-price del {
    color: #999;
    font-size: 13px;
}

.item-price span {
    color: #138a4b;
    font-size: 11px;
    font-weight: 700;
}


/* Quantity */

.quantity-box {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    height: 34px;
}

.quantity-box button {
    width: 32px;
    height: 100%;
    border: 0;
    background: #fff;
    cursor: pointer;
    font-size: 15px;
}

.quantity-box button:hover {
    background: #f5f5f5;
}

.quantity-box input {
    width: 38px;
    height: 100%;
    border: 0;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    outline: none;
}


/* Delivery */

.item-delivery {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    color: #777;
    font-size: 12px;
}

.item-delivery i {
    color: #138a4b;
}

.item-delivery strong {
    color: #333;
}


/* Benefits */

.cart-benefits {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    margin-top: 15px;
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.benefit {
    display: flex;
    align-items: center;
    gap: 10px;
}

.benefit-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff0f5;
    color: #e91e63;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.benefit strong {
    display: block;
    font-size: 12px;
    color: #333;
}

.benefit span {
    display: block;
    font-size: 10px;
    color: #888;
    margin-top: 2px;
}


/* =========================================
   SUMMARY
========================================= */

.summary-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 20px;
}

.summary-card h2 {
    font-size: 18px;
    margin: 0 0 18px;
    font-weight: 700;
}


/* Coupon */

.coupon-section label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.coupon-section label i {
    color: #e91e63;
    margin-right: 4px;
}

.coupon-input {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 7px;
    overflow: hidden;
}

.coupon-input input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    padding: 10px 11px;
    font-size: 12px;
}

.coupon-input button {
    border: 0;
    background: #e91e63;
    color: #fff;
    padding: 0 15px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.coupon-input button:hover {
    background: #d81b60;
}

#couponMessage {
    margin-top: 7px;
    font-size: 11px;
}

.coupon-success {
    color: #138a4b;
}

.coupon-error {
    color: #dc3545;
}


/* Divider */

.summary-divider {
    height: 1px;
    background: #eee;
    margin: 18px 0;
}


/* Price */

.price-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.price-details > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-details span {
    color: #666;
    font-size: 13px;
}

.price-details strong {
    color: #333;
    font-size: 13px;
}

.price-details .discount {
    color: #138a4b;
}

.price-details .free {
    color: #138a4b;
    font-size: 12px;
}


/* Total */

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-row span {
    font-size: 16px;
    font-weight: 650;
}

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


/* Saving */

.saving-message {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #eefaf3;
    color: #138a4b;
    padding: 9px 11px;
    border-radius: 6px;
    margin-top: 15px;
    font-size: 11px;
}


/* Checkout */

.checkout-btn {
    margin-top: 15px;
    width: 100%;
    height: 48px;
    background: #e91e63;
    color: #fff;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
}

.checkout-btn:hover {
    background: #d81b60;
    color: #fff;
}

.secure-checkout {
    text-align: center;
    margin-top: 11px;
    font-size: 10px;
    color: #888;
}

.secure-checkout i {
    color: #138a4b;
    margin-right: 3px;
}


/* Delivery Card */

.delivery-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
}

.delivery-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eefaf3;
    color: #138a4b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delivery-card strong {
    display: block;
    font-size: 13px;
}

.delivery-card p {
    margin: 3px 0 0;
    font-size: 11px;
    color: #888;
}


/* Help */

.help-card {
    display: flex;
    gap: 12px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
}

.help-card > i {
    color: #e91e63;
    font-size: 22px;
}

.help-card strong {
    font-size: 13px;
}

.help-card p {
    margin: 3px 0 5px;
    color: #888;
    font-size: 11px;
}

.help-card a {
    color: #e91e63;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
}


/* Empty Cart */

.empty-cart {
    text-align: center;
    padding: 70px 20px;
}

.empty-cart-icon {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: #fff0f5;
    color: #e91e63;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 18px;
}

.empty-cart h3 {
    font-size: 20px;
    margin-bottom: 7px;
}

.empty-cart p {
    color: #888;
    font-size: 13px;
    margin-bottom: 20px;
}

.empty-cart a {
    display: inline-flex;
    padding: 11px 20px;
    background: #e91e63;
    color: #fff;
    text-decoration: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .cart-header h1 {
        font-size: 24px;
    }

    .cart-benefits {
        grid-template-columns: 1fr;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 575px) {

    .cart-page {
        padding-bottom: 15px;
    }

    .cart-header {
        align-items: flex-start;
    }

    .cart-header h1 {
        font-size: 21px;
    }

    .cart-header p {
        font-size: 12px;
    }

    .continue-shopping {
        padding: 8px 10px;
        font-size: 11px;
    }

    .continue-shopping i {
        font-size: 10px;
    }


    /* Cart Header */

    .cart-card-header {
        padding: 13px;
    }

    .select-all label {
        font-size: 12px;
    }

    .clear-cart {
        font-size: 11px;
    }


    /* Product */

    .cart-item {
        padding: 14px 10px;
        gap: 8px;
    }

    .item-check {
        padding-top: 4px;
    }

    .item-check input {
        width: 15px;
        height: 15px;
    }

    .item-image {
        width: 85px;
        height: 85px;
        border-radius: 7px;
    }

    .item-top {
        gap: 5px;
    }

    .item-brand {
        font-size: 8px;
    }

    .item-details h3 {
        font-size: 12px;
        line-height: 1.35;
        margin-top: 2px;
    }

    .item-pack {
        font-size: 9px;
    }

    .remove-item {
        font-size: 14px;
    }

    .item-rating {
        margin-top: 5px;
        gap: 5px;
    }

    .item-rating span {
        font-size: 8px;
        padding: 2px 5px;
    }

    .item-rating small {
        font-size: 8px;
    }

    .item-price-row {
        margin-top: 7px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .item-price {
        gap: 5px;
    }

    .item-price strong {
        font-size: 15px;
    }

    .item-price del {
        font-size: 9px;
    }

    .item-price span {
        font-size: 8px;
    }

    .quantity-box {
        height: 29px;
    }

    .quantity-box button {
        width: 27px;
        font-size: 12px;
    }

    .quantity-box input {
        width: 30px;
        font-size: 10px;
    }

    .item-delivery {
        margin-top: 6px;
        font-size: 9px;
    }


    /* Benefits */

    .cart-benefits {
        display: none;
    }


    /* Summary */

    .summary-card {
        padding: 15px;
        border-radius: 10px;
    }

    .summary-card h2 {
        font-size: 16px;
        margin-bottom: 14px;
    }

    .coupon-input input {
        padding: 9px;
        font-size: 11px;
    }

    .coupon-input button {
        padding: 0 12px;
        font-size: 10px;
    }

    .price-details {
        gap: 10px;
    }

    .price-details span,
    .price-details strong {
        font-size: 11px;
    }

    .total-row span {
        font-size: 14px;
    }

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

    .checkout-btn {
        height: 45px;
        font-size: 12px;
    }

    .delivery-card,
    .help-card {
        padding: 12px;
    }

}

/* Address pages */
/* =========================================
   ADDRESSES PAGE
========================================= */

.addresses-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.addresses-header h1 {
    margin: 0 0 5px;
    font-size: 26px;
    font-weight: 700;
    color: #202124;
}

.addresses-header p {
    margin: 0;
    font-size: 13px;
    color: #777;
}


/* Add Button */

.add-address-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border: 0;
    border-radius: 8px;
    background: #e91e63;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    transition: .2s;
}

.add-address-btn:hover {
    background: #d81b60;
}


/* Info Bar */

.address-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 16px;
    margin-bottom: 15px;
    border-radius: 9px;
    background: #fff7fa;
    border: 1px solid #f8dce7;
}

.address-info-bar > div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
    font-size: 12px;
}

.address-info-bar > div i {
    color: #e91e63;
    font-size: 15px;
}

.address-info-text {
    color: #999;
    font-size: 11px;
}


/* Address List */

.address-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* Address Card */

.address-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 11px;
    overflow: hidden;
    transition: .2s;
}

.address-card:hover {
    border-color: #ddd;
    box-shadow: 0 4px 18px rgba(0,0,0,.04);
}

.default-address {
    border-color: #f0b8cb;
}


/* Card Top */

.address-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid #eee;
}

.address-type {
    display: flex;
    align-items: center;
    gap: 11px;
}

.type-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fff0f5;
    color: #e91e63;
}

.office-icon {
    background: #f2f5ff;
    color: #5167c8;
}

.address-type strong {
    display: block;
    font-size: 14px;
    color: #333;
}


/* Default Badge */

.default-badge {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 7px;
    border-radius: 20px;
    background: #eaf8f0;
    color: #16854a;
    font-size: 9px;
    font-weight: 700;
}


/* Actions */

.address-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.address-actions button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    color: #555;
    padding: 6px 8px;
    font-size: 11px;
    cursor: pointer;
    border-radius: 5px;
}

.address-actions button:hover {
    background: #f7f7f7;
    color: #e91e63;
}

.address-actions .delete-btn:hover {
    color: #dc3545;
}


/* Body */

.address-body {
    padding: 16px 18px;
}

.address-name {
    display: block;
    margin-bottom: 6px;
    color: #333;
    font-size: 13px;
}

.address-body p {
    max-width: 650px;
    margin: 0 0 10px;
    color: #666;
    font-size: 12px;
    line-height: 1.7;
}

.address-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #555;
    font-size: 11px;
}

.address-phone i {
    color: #e91e63;
}


/* Footer */

.address-footer {
    padding: 10px 18px;
    background: #fafafa;
    border-top: 1px solid #eee;
}

.address-footer span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #16854a;
    font-size: 10px;
    font-weight: 600;
}

.address-footer span i {
    font-size: 12px;
}

.address-footer.non-default {
    text-align: right;
}

.address-footer button {
    border: 0;
    background: transparent;
    color: #e91e63;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}


/* Add Address Card */

.add-address-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    text-align: left;
    padding: 17px 18px;
    border: 1px dashed #e91e63;
    border-radius: 11px;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: .2s;
}

.add-address-card:hover {
    background: #fff7fa;
}

.add-address-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff0f5;
    color: #e91e63;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-address-card strong {
    display: block;
    font-size: 13px;
}

.add-address-card span {
    display: block;
    margin-top: 2px;
    color: #999;
    font-size: 10px;
}

.add-address-card > i {
    margin-left: auto;
    color: #aaa;
}


/* =========================================
   MODAL
========================================= */

.address-modal {
    border: 0;
    border-radius: 13px;
    overflow: hidden;
}

.address-modal .modal-header {
    padding: 20px 22px;
    border-bottom: 1px solid #eee;
}

.address-modal .modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.address-modal .modal-header p {
    margin: 3px 0 0;
    color: #888;
    font-size: 11px;
}

.address-modal .modal-body {
    padding: 22px;
}

.address-modal .modal-footer {
    padding: 14px 22px;
    border-top: 1px solid #eee;
}


/* Form */

.form-label {
    margin-bottom: 6px;
    color: #444;
    font-size: 11px;
    font-weight: 600;
}

.form-control,
.form-select {
    min-height: 42px;
    border-color: #ddd;
    border-radius: 7px;
    font-size: 12px;
}

.form-control:focus,
.form-select:focus {
    border-color: #e91e63;
    box-shadow: 0 0 0 3px rgba(233,30,99,.08);
}


/* Type Options */

.form-section {
    margin-bottom: 20px;
}

.address-type-options {
    display: flex;
    gap: 10px;
}

.type-option {
    cursor: pointer;
}

.type-option input {
    display: none;
}

.type-option span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 7px;
    color: #555;
    font-size: 11px;
    transition: .2s;
}

.type-option input:checked + span {
    border-color: #e91e63;
    background: #fff0f5;
    color: #e91e63;
}


/* Default Checkbox */

.default-address-check {
    margin-top: 20px;
    padding: 12px;
    border-radius: 7px;
    background: #fafafa;
}

.default-address-check label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #555;
    font-size: 11px;
}

.default-address-check input {
    width: 16px;
    height: 16px;
    accent-color: #e91e63;
}


/* Modal Buttons */

.cancel-btn {
    border: 1px solid #ddd;
    background: #fff;
    color: #555;
    border-radius: 7px;
    padding: 9px 17px;
    font-size: 12px;
}

.save-address-btn {
    border: 0;
    background: #e91e63;
    color: #fff;
    border-radius: 7px;
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 600;
}

.save-address-btn:hover {
    background: #d81b60;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .addresses-header {
        align-items: flex-start;
    }

    .addresses-header h1 {
        font-size: 21px;
    }

    .addresses-header p {
        font-size: 11px;
    }

    .add-address-btn {
        padding: 9px 11px;
        font-size: 10px;
        white-space: nowrap;
    }

    .add-address-btn i {
        font-size: 10px;
    }

    .address-info-text {
        display: none;
    }

    .address-info-bar {
        padding: 11px 12px;
    }

    .address-card-top {
        padding: 13px;
        align-items: flex-start;
    }

    .address-type {
        gap: 8px;
    }

    .type-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .address-type strong {
        font-size: 12px;
    }

    .address-actions {
        gap: 0;
    }

    .address-actions button {
        padding: 5px;
        font-size: 0;
    }

    .address-actions button i {
        font-size: 13px;
    }

    .address-body {
        padding: 13px;
    }

    .address-body p {
        font-size: 11px;
        line-height: 1.6;
    }

    .address-footer {
        padding: 9px 13px;
    }

    .add-address-card {
        padding: 14px;
    }

    .address-modal .modal-body {
        padding: 16px;
    }

    .address-modal .modal-header {
        padding: 16px;
    }

    .address-modal .modal-footer {
        padding: 12px 16px;
    }

    .address-type-options {
        gap: 6px;
    }

    .type-option span {
        padding: 7px 10px;
        font-size: 10px;
    }

}


/* Small Mobile */

@media (max-width: 480px) {

    .addresses-header {
        flex-direction: column;
        gap: 10px;
    }

    .add-address-btn {
        width: 100%;
    }

    .address-card-top {
        gap: 5px;
    }

    .address-type {
        min-width: 0;
    }

    .address-actions {
        flex-shrink: 0;
    }

    .address-modal .modal-dialog {
        margin: 8px;
    }

}