/* =====================================================
   ecommerce-shop.css — ECommerce Public Pages
   Style inspired by Quiz Home & Pricing pages.
   CSS variables (from style.css):
     --primary-200-color: #2fb362
     --primary-600-color: #1c6d3a
   ===================================================== */

/* ─── Section utilities ──────────────────────────── */
.ec-hero {
    background-image: linear-gradient(rgba(10, 28, 16, 0.72), rgba(10, 28, 16, 0.72)),
        url("/webbg.png");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    padding: 80px 0 64px;
    color: #fff;
}

.ec-hero h1 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.2;
    color: #fff;
}

.ec-hero h1 span {
    color: #47e475;
}

.ec-hero p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 16px;
    margin-bottom: 28px;
}

.ec-dark-section {
    background-image: linear-gradient(rgba(10, 28, 16, 0.75), rgba(10, 28, 16, 0.75)),
        url("/webbg.png");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    padding: 70px 0 60px;
}

.ec-light-section {
    background-color: #f6f9fe;
    padding: 60px 0;
}

.ec-white-section {
    background: #fff;
    padding: 60px 0;
}

/* ─── Section title ──────────────────────────────── */
.ec-section-title {
    text-align: center;
    padding-bottom: 30px;
}

.ec-section-title h2 {
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
    color: var(--primary-600-color, #1c6d3a);
}

.ec-section-title h2::before {
    content: "";
    position: absolute;
    display: block;
    width: 120px;
    height: 1px;
    background: #ddd;
    bottom: 1px;
    left: calc(50% - 60px);
}

.ec-section-title h2::after {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 3px;
    background: var(--primary-200-color, #2fb362);
    bottom: 0;
    left: calc(50% - 20px);
}

.ec-section-title p {
    color: #6c757d;
    margin-bottom: 0;
}

/* Dark variant */
.ec-section-title.dark h2 {
    color: #fff;
}

.ec-section-title.dark h2::before {
    background: rgba(255, 255, 255, 0.2);
}

.ec-section-title.dark p {
    color: rgba(255, 255, 255, 0.75);
}

/* Inline row title (left-aligned, used beside "Xem tất cả") */
.ec-row-title {
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0;
    padding-bottom: 12px;
    position: relative;
    display: inline-block;
}

.ec-row-title::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    bottom: 1px;
    left: 0;
}

.ec-row-title::after {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 3px;
    background: var(--primary-200-color, #2fb362);
    bottom: 0;
    left: 0;
}

/* ─── Search bar ─────────────────────────────────── */
.ec-search-bar-lg {
    display: flex;
    background: #fff;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    max-width: 600px;
}

.ec-search-bar-lg input {
    flex: 1;
    border: 0;
    padding: 14px 22px;
    font-size: 15px;
    outline: none;
    color: #333;
}

.ec-search-bar-lg button {
    background: linear-gradient(135deg, #2fb362, #1c6d3a);
    border: 0;
    padding: 0 24px;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.ec-search-bar-lg button:hover {
    opacity: 0.85;
}

/* ─── Category chips ─────────────────────────────── */
.ec-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f3f9f5;
    border: 1px solid #d4eddd;
    border-radius: 50px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    text-decoration: none;
    transition: background 0.25s, color 0.25s, border 0.25s, transform 0.2s;
    white-space: nowrap;
}

.ec-cat-chip:hover,
.ec-cat-chip.active {
    background: linear-gradient(135deg, #2fb362, #1c6d3a);
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
}

.ec-cat-chip i {
    font-size: 18px;
}

/* ─── Product card ───────────────────────────────── */
.ec-card {
    background: #fff;
    padding: 0 0 16px 0;
    box-shadow: 0 3px 20px -2px rgba(20, 45, 100, 0.12);
    border-top: 4px solid #fff;
    border-radius: 5px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.25s;
}

.ec-card:hover {
    box-shadow: 0 8px 30px rgba(20, 45, 100, 0.2);
    transform: translateY(-4px);
}

.ec-card.featured {
    border-top-color: var(--primary-200-color, #2fb362);
}

/* Card image */
.ec-card-img {
    position: relative;
    padding-top: 75%;
    overflow: hidden;
    background: #f8f8f8;
    display: block;
}

.ec-card-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.ec-card:hover .ec-card-img img {
    transform: scale(1.07);
}

.ec-no-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #ddd;
}

.ec-card-img .ec-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e74c3c;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 1;
}

.ec-card-img .ec-badge-featured {
    background: linear-gradient(135deg, #2fb362, #1c6d3a);
}

/* Card body */
.ec-card-body {
    padding: 14px 16px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ec-card-name {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.ec-card-name a {
    color: inherit;
    text-decoration: none;
}

.ec-card-name a:hover {
    color: var(--primary-200-color, #2fb362);
}

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

.ec-price-current {
    font-size: 16px;
    font-weight: 700;
    color: #e74c3c;
    font-family: "Jost", sans-serif;
}

.ec-price-original {
    font-size: 13px;
    color: #aaa;
    text-decoration: line-through;
}

/* ─── View all link ──────────────────────────────── */
.ec-view-all {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s, gap 0.2s;
    white-space: nowrap;
}

.ec-view-all:hover {
    color: #47e475;
    gap: 8px;
}

.ec-view-all-light {
    color: var(--primary-200-color, #2fb362);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s, gap 0.2s;
}

.ec-view-all-light:hover {
    color: var(--primary-600-color, #1c6d3a);
    gap: 8px;
}

/* ─── Seller trust cards ─────────────────────────── */
.ec-seller-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-top: 4px solid #fff;
    border-radius: 5px;
    padding: 24px 20px;
    text-align: center;
    transition: box-shadow 0.3s, transform 0.25s, border-top-color 0.25s;
    text-decoration: none;
    display: block;
    color: inherit;
    box-shadow: 0 3px 20px -2px rgba(20, 45, 100, 0.1);
}

.ec-seller-card:hover {
    box-shadow: 0 8px 30px rgba(20, 45, 100, 0.18);
    transform: translateY(-3px);
    border-top-color: var(--primary-200-color, #2fb362);
    color: inherit;
}

.ec-seller-logo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 12px;
    border: 3px solid #e8f5e9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f9f5;
    font-size: 32px;
    color: var(--primary-200-color, #2fb362);
}

.ec-seller-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ec-seller-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-600-color, #1c6d3a);
    margin-bottom: 4px;
}

.ec-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    margin-top: 6px;
}

/* ─── Empty state ────────────────────────────────── */
.ec-empty {
    text-align: center;
    padding: 60px 20px;
}

.ec-empty i {
    font-size: 52px;
    color: #ccc;
    display: block;
    margin-bottom: 12px;
}

.ec-empty p {
    font-size: 15px;
    color: #999;
    margin-bottom: 0;
}

.ec-empty.dark i {
    color: rgba(255, 255, 255, 0.2);
}

.ec-empty.dark p {
    color: rgba(255, 255, 255, 0.55);
}

/* ─── Page hero (search/filter pages) ───────────── */
.ec-page-hero {
    background-image: linear-gradient(rgba(10, 28, 16, 0.75), rgba(10, 28, 16, 0.75)),
        url("/webbg.png");
    background-size: cover;
    background-position: center;
    padding: 48px 0 36px;
    color: white;
}

.ec-page-hero h1 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 16px;
}

/* ─── Search sidebar ─────────────────────────────── */
.ec-sidebar {
    background: #fff;
    border-top: 4px solid var(--primary-200-color, #2fb362);
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 3px 20px -2px rgba(20, 45, 100, 0.1);
}

.ec-sidebar-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-600-color, #1c6d3a);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 14px;
}

.ec-filter-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #f5f5f5;
    transition: color 0.2s;
}

.ec-filter-link:hover,
.ec-filter-link.active {
    color: var(--primary-200-color, #2fb362);
    font-weight: 600;
}

.ec-filter-count {
    font-size: 12px;
    background: #f0f0f0;
    color: #888;
    padding: 1px 7px;
    border-radius: 20px;
}

/* ─── Sort bar ───────────────────────────────────── */
.ec-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.ec-result-count {
    font-size: 14px;
    color: #666;
}

.ec-sort-select {
    border: 1.5px solid var(--primary-200-color, #2fb362);
    border-radius: 50px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-600-color, #1c6d3a);
    background: #f3f9f5;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    appearance: auto;
}

.ec-sort-select:focus,
.ec-sort-select:hover {
    background: #e8f5e9;
    border-color: var(--primary-600-color, #1c6d3a);
}

/* ─── Pagination ─────────────────────────────────── */
.ec-pagination .page-link {
    border-radius: 8px !important;
    margin: 0 2px;
    color: #283a5a;
    border-color: #e0e0e0;
    font-size: 14px;
}

.ec-pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #2fb362, #1c6d3a);
    border-color: transparent;
    color: white;
}

.ec-pagination .page-link:hover {
    background: #f3f9f5;
    color: var(--primary-200-color, #2fb362);
}

/* ─── Product detail ─────────────────────────────── */
.ec-detail-wrapper {
    background: #f6f9fe;
    padding: 40px 0 64px;
}

.ec-detail-img-main {
    border-radius: 8px;
    overflow: hidden;
    background: #f8f8f8;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 20px -2px rgba(20, 45, 100, 0.12);
}

.ec-detail-img-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ec-thumb-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.ec-thumb {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s;
    background: #f8f8f8;
}

.ec-thumb.active,
.ec-thumb:hover {
    border-color: var(--primary-200-color, #2fb362);
}

.ec-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Detail info panel — quiz-card style */
.ec-detail-info {
    background: #fff;
    border-radius: 5px;
    padding: 28px;
    box-shadow: 0 3px 20px -2px rgba(20, 45, 100, 0.12);
    border-top: 4px solid var(--primary-200-color, #2fb362);
}

.ec-detail-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-600-color, #1c6d3a);
    margin-bottom: 12px;
    line-height: 1.35;
}

.ec-detail-price-box {
    background: #f6f9fe;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
    border-left: 4px solid var(--primary-200-color, #2fb362);
}

.ec-detail-price {
    font-size: 28px;
    font-weight: 700;
    color: #e74c3c;
    font-family: "Jost", sans-serif;
}

.ec-detail-price-orig {
    font-size: 16px;
    color: #aaa;
    text-decoration: line-through;
    margin-left: 10px;
}

.ec-detail-badge {
    display: inline-block;
    background: #ffeaea;
    color: #e74c3c;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    margin-left: 10px;
}

.ec-stock-ok {
    color: #2e7d32;
    font-weight: 600;
    font-size: 14px;
}

.ec-stock-low {
    color: #f57c00;
    font-weight: 600;
    font-size: 14px;
}

.ec-stock-out {
    color: #c62828;
    font-weight: 600;
    font-size: 14px;
}

/* Add to cart / wishlist buttons */
.ec-buy-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 35px;
    border-radius: 50px;
    background: linear-gradient(135deg, #2fb362, #1c6d3a);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    font-family: "Jost", sans-serif;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 4px 16px rgba(47, 179, 98, 0.35);
    text-decoration: none;
}

.ec-buy-btn:hover {
    opacity: 0.88;
    transform: translateY(-2px);
    color: #fff;
}

.ec-buy-btn:disabled {
    background: #ccc;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.ec-wish-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--primary-200-color, #2fb362);
    color: var(--primary-200-color, #2fb362);
    background: transparent;
    font-size: 22px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.ec-wish-btn:hover {
    background: var(--primary-200-color, #2fb362);
    color: #fff;
}

/* Seller info box (detail page) */
.ec-seller-box {
    border: 1px solid #e8f5e9;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f9fef9;
    text-decoration: none;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.ec-seller-box:hover {
    box-shadow: 0 4px 16px rgba(47, 179, 98, 0.18);
    border-color: var(--primary-200-color, #2fb362);
}

.ec-seller-box-logo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #e8f5e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--primary-200-color, #2fb362);
    flex-shrink: 0;
    overflow: hidden;
}

.ec-seller-box-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ec-seller-box-name {
    font-weight: 700;
    color: var(--primary-600-color, #1c6d3a);
    font-size: 15px;
}

.ec-seller-box-meta {
    font-size: 12px;
    color: #888;
}

/* Description tabs */
.ec-tabs-wrapper {
    background: #fff;
    border-radius: 5px;
    padding: 28px;
    box-shadow: 0 3px 20px -2px rgba(20, 45, 100, 0.1);
    border-top: 4px solid var(--primary-200-color, #2fb362);
}

.ec-nav-tabs {
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
}

.ec-nav-tabs .nav-link {
    font-weight: 600;
    color: #666;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    margin-bottom: -2px;
    padding: 10px 20px;
    transition: color 0.2s;
}

.ec-nav-tabs .nav-link.active,
.ec-nav-tabs .nav-link:hover {
    color: var(--primary-600-color, #1c6d3a);
    border-bottom-color: var(--primary-200-color, #2fb362);
    background: transparent;
}

/* ─── Shop profile header ─────────────────────────── */
.ec-shop-header {
    background-image: linear-gradient(rgba(10, 28, 16, 0.80), rgba(10, 28, 16, 0.80)),
        url("/webbg.png");
    background-size: cover;
    background-position: center;
    padding: 40px 0;
    color: white;
}

.ec-shop-logo-lg {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.ec-shop-logo-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ec-shop-header h1 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 6px;
}

.ec-shop-stat {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

/* ─── Breadcrumb ─────────────────────────────────── */
.ec-breadcrumb {
    background: transparent;
    padding: 0;
}

.ec-breadcrumb .breadcrumb-item a {
    color: var(--primary-200-color, #2fb362);
    text-decoration: none;
}

.ec-breadcrumb .breadcrumb-item a:hover {
    color: var(--primary-600-color, #1c6d3a);
}

.ec-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #aaa;
}

/* ─── Responsive ─────────────────────────────────── */
@media (max-width: 992px) {
    .ec-hero h1 { font-size: 32px; }
    .ec-dark-section { background-attachment: scroll; }
    .ec-hero { background-attachment: scroll; }
}

@media (max-width: 767px) {
    .ec-hero h1 { font-size: 26px; }
    .ec-detail-info { margin-top: 20px; }
    .ec-detail-name { font-size: 20px; }
}

/* =====================================================
   PAGE CONTENT WRAPPER
   ===================================================== */
.ec-page-content {
    background: #f6f9fe;
    padding: 40px 0 64px;
}

/* =====================================================
   PANEL (quiz-card style white box with green top)
   ===================================================== */
.ec-panel {
    background: #fff;
    border-radius: 5px;
    border-top: 4px solid var(--primary-200-color, #2fb362);
    box-shadow: 0 3px 20px -2px rgba(20, 45, 100, 0.12);
    overflow: hidden;
    margin-bottom: 20px;
}

.ec-panel-header {
    padding: 15px 22px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 700;
    color: var(--primary-600-color, #1c6d3a);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ec-panel-header i {
    color: var(--primary-200-color, #2fb362);
    font-size: 20px;
}

/* =====================================================
   CART
   ===================================================== */
.ec-cart-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.15s;
}

.ec-cart-row:last-child { border-bottom: none; }
.ec-cart-row:hover { background: #fafffe; }

.ec-cart-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f0f0f0;
    text-decoration: none;
}

.ec-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }

.ec-cart-info { flex: 1; min-width: 0; }

.ec-cart-name {
    font-weight: 600;
    color: #283a5a;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    display: block;
    transition: color 0.2s;
}

.ec-cart-name:hover { color: var(--primary-200-color, #2fb362); }

.ec-cart-seller { font-size: 12px; color: #999; margin-top: 2px; }

.ec-cart-price {
    font-size: 16px;
    font-weight: 700;
    color: #e74c3c;
    margin-top: 6px;
    font-family: "Jost", sans-serif;
}

.ec-cart-price-orig {
    font-size: 12px;
    color: #aaa;
    text-decoration: line-through;
    margin-left: 6px;
}

/* Qty control */
.ec-qty {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border: 1.5px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
}

.ec-qty-btn {
    width: 32px;
    height: 36px;
    border: 0;
    background: #f8f9fc;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.ec-qty-btn:hover {
    background: var(--primary-200-color, #2fb362);
    color: #fff;
}

.ec-qty-val {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #283a5a;
    border-left: 1.5px solid #e8e8e8;
    border-right: 1.5px solid #e8e8e8;
}

.ec-cart-line-total {
    font-weight: 700;
    color: #283a5a;
    min-width: 90px;
    text-align: right;
    font-size: 15px;
    font-family: "Jost", sans-serif;
    flex-shrink: 0;
}

.ec-remove-btn {
    background: none;
    border: 0;
    color: #ccc;
    font-size: 22px;
    cursor: pointer;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.ec-remove-btn:hover { background: #fce4ec; color: #e74c3c; }

/* =====================================================
   ORDER SUMMARY PANEL
   ===================================================== */
.ec-summary-panel {
    background: #fff;
    border-radius: 5px;
    border-top: 4px solid var(--primary-200-color, #2fb362);
    box-shadow: 0 3px 20px -2px rgba(20, 45, 100, 0.12);
    padding: 24px;
    position: sticky;
    top: 120px;
}

.ec-summary-title {
    font-weight: 700;
    color: var(--primary-600-color, #1c6d3a);
    font-size: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ec-summary-title i { color: var(--primary-200-color, #2fb362); font-size: 20px; }

.ec-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    margin-bottom: 10px;
}

.ec-summary-row span:first-child { color: #666; }
.ec-summary-row span:last-child { font-weight: 600; }

.ec-summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    margin-bottom: 20px;
    margin-top: 6px;
}

.ec-summary-total .ec-total-label { font-weight: 700; color: #283a5a; }

.ec-summary-total .ec-total-val {
    font-weight: 800;
    color: #e74c3c;
    font-size: 22px;
    font-family: "Jost", sans-serif;
}

.ec-back-link {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 14px;
    color: #999;
    text-decoration: none;
    transition: color 0.2s;
}

.ec-back-link:hover { color: var(--primary-200-color, #2fb362); }

/* =====================================================
   CHECKOUT
   ===================================================== */
.ec-form-panel {
    background: #fff;
    border-radius: 5px;
    border-top: 4px solid var(--primary-200-color, #2fb362);
    box-shadow: 0 3px 20px -2px rgba(20, 45, 100, 0.10);
    padding: 24px 28px;
    margin-bottom: 20px;
}

.ec-form-panel-title {
    font-weight: 700;
    color: var(--primary-600-color, #1c6d3a);
    font-size: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ec-form-panel-title i { color: var(--primary-200-color, #2fb362); font-size: 20px; }

/* Payment option */
.ec-payment-option {
    border: 2px solid #eee;
    border-radius: 10px;
    padding: 16px 20px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.ec-payment-option:last-child { margin-bottom: 0; }
.ec-payment-option:hover { border-color: rgba(47,179,98,.4); background: #f9fef9; }
.ec-payment-option.active { border-color: var(--primary-200-color, #2fb362); background: #f9fef9; }

.ec-pm-icon { font-size: 28px; color: var(--primary-200-color, #2fb362); flex-shrink: 0; }
.ec-pm-title { font-weight: 700; color: #283a5a; font-size: 15px; }
.ec-pm-desc { font-size: 13px; color: #888; margin-top: 2px; }

.ec-pm-check {
    font-size: 22px;
    color: var(--primary-200-color, #2fb362);
    margin-left: auto;
    flex-shrink: 0;
}

/* Checkout item in summary */
.ec-checkout-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
}

.ec-checkout-item:last-child { border-bottom: none; }

.ec-checkout-thumb {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f8f8;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ddd;
}

.ec-checkout-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ec-checkout-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #283a5a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-checkout-qty { font-size: 12px; color: #888; margin-top: 2px; }
.ec-checkout-price { font-weight: 700; color: #e74c3c; white-space: nowrap; font-family: "Jost", sans-serif; }

/* =====================================================
   ORDER HISTORY
   ===================================================== */
.ec-status-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }

.ec-status-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: 2px solid #e8e8e8;
    color: #555;
    background: #fff;
    transition: all 0.2s;
    white-space: nowrap;
}

.ec-status-tab:hover { border-color: var(--primary-200-color, #2fb362); color: var(--primary-200-color, #2fb362); }

.ec-status-tab.active {
    background: linear-gradient(135deg, #2fb362, #1c6d3a);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
}

.ec-tab-count {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
    background: rgba(255,255,255,0.25);
}

.ec-status-tab:not(.active) .ec-tab-count { background: #f0f0f0; color: #666; }

/* Order card */
.ec-order-card {
    background: #fff;
    border-radius: 5px;
    border-top: 4px solid #eee;
    box-shadow: 0 3px 20px -2px rgba(20, 45, 100, 0.08);
    margin-bottom: 16px;
    overflow: hidden;
    transition: box-shadow 0.25s, border-top-color 0.25s;
}

.ec-order-card:hover { box-shadow: 0 6px 24px rgba(20, 45, 100, 0.15); border-top-color: var(--primary-200-color, #2fb362); }

.ec-order-header {
    padding: 14px 20px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    background: #fafffe;
}

.ec-order-num { font-weight: 700; color: var(--primary-600-color, #1c6d3a); font-size: 15px; }
.ec-order-date { font-size: 12px; color: #999; margin-left: 8px; }

.ec-order-body {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.ec-order-meta { font-size: 14px; color: #666; }
.ec-order-amount { font-weight: 800; color: #e74c3c; font-size: 18px; font-family: "Jost", sans-serif; }

/* Status badge */
.ec-status-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Inline action buttons */
.ec-btn-detail {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-200-color, #2fb362);
    text-decoration: none;
    border: 1px solid #d4eddd;
    border-radius: 8px;
    padding: 5px 14px;
    transition: background 0.2s, color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ec-btn-detail:hover { background: var(--primary-200-color, #2fb362); color: #fff; border-color: transparent; }

.ec-btn-cancel {
    font-size: 13px;
    color: #c62828;
    background: none;
    border: 1px solid #fce4ec;
    border-radius: 8px;
    padding: 5px 14px;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ec-btn-cancel:hover { background: #fce4ec; }

.ec-pay-tag { font-size: 12px; background: #f5f5f5; color: #666; border-radius: 4px; padding: 2px 8px; margin-left: 10px; }
.ec-paid-tag { font-size: 12px; background: #e8f5e9; color: #2e7d32; font-weight: 600; border-radius: 4px; padding: 2px 8px; margin-left: 5px; }

/* Empty state CTA button */
.ec-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 50px;
    background: transparent;
    color: var(--primary-200-color, #2fb362);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid var(--primary-200-color, #2fb362);
    transition: background 0.2s, color 0.2s;
    margin-top: 12px;
}

.ec-cta-btn:hover { background: var(--primary-200-color, #2fb362); color: #fff; }

/* Responsive */
@media (max-width: 575px) {
    .ec-cart-row { flex-wrap: wrap; }
    .ec-cart-line-total { min-width: auto; }
    .ec-status-tabs { gap: 6px; }
    .ec-status-tab { font-size: 13px; padding: 6px 12px; }
}

/* ──────────────── LIGHT MODE OVERRIDES ──────────────── */
html:not(.dark-mode) .ec-dark-section {
    background-image: none;
    background-color: #f0f8f3;
}

html:not(.dark-mode) .ec-dark-section .ec-row-title {
    color: var(--primary-600-color, #1c6d3a);
}

html:not(.dark-mode) .ec-dark-section .ec-view-all {
    color: var(--primary-200-color, #2fb362);
}

html:not(.dark-mode) .ec-dark-section .ec-empty {
    color: #6c757d;
}

html:not(.dark-mode) .ec-dark-section .ec-empty.dark i {
    color: #bbb;
}

html:not(.dark-mode) .ec-dark-section .ec-empty.dark p {
    color: #555;
}