/* ============ CATEGORY PAGE ============ */
.category-web-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    margin: 32px 0;
}

.filter-sidebar-web {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    height: fit-content;
    position: sticky;
    top: 100px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

.filter-title-web {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-clear {
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
}

.filter-group-web {
    margin-bottom: 24px;
}

.filter-group-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.filter-chips-web {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.category-count {
    font-size: 14px;
    color: var(--text-muted);
}

.category-count strong {
    color: var(--text);
    font-weight: 700;
}

.category-sort {
    padding: 10px 16px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    background: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}

/* ============ DETAIL PAGE ============ */
.detail-web-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    margin: 32px 0;
}

.gallery-web {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 16px;
    position: sticky;
    top: 100px;
    height: fit-content;
}

.gallery-thumbs-web {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.thumb-web {
    width: 90px;
    height: 90px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #FCE4EC, #E1BEE7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.thumb-web.active {
    border-color: var(--primary);
}

.gallery-main-web {
    height: 640px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #FCE4EC 0%, #E1BEE7 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 200px;
    overflow: hidden;
}

.gallery-main-web::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), transparent 60%);
}

.gallery-counter {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(10px);
    z-index: 2;
}

.gallery-video-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--primary-deep);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(10px);
    cursor: pointer;
    z-index: 2;
}

.detail-brand-web {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.detail-name-web {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px;
    color: var(--text);
    letter-spacing: -0.5px;
}

.detail-rating-web {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 14px;
    color: var(--text-muted);
}

.detail-rating-web .star {
    color: var(--gold);
}

.detail-rating-web b {
    color: var(--text);
}

.price-panel-web {
    background: linear-gradient(135deg, #FCE4EC 0%, #F3E5F5 100%);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
}

.price-row-web {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
}

.price-row-web:first-child {
    border-bottom: 1px solid rgba(194, 24, 91, 0.15);
    padding-bottom: 16px;
    margin-bottom: 6px;
}

.price-label-web {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.price-value-web {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 800;
    color: var(--primary);
}

.price-value-web small {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 400;
    font-family: var(--font-body);
}

.price-value-md-web {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
    font-family: var(--font-body);
}

.discount-strip-web {
    background: linear-gradient(135deg, #EDE9FE 0%, #FCE4EC 100%);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.discount-text-web {
    font-size: 13px;
    color: var(--secondary);
    font-weight: 600;
}

.discount-icon-web {
    font-size: 24px;
    color: var(--secondary);
}

.section-label-web {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-label-link {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.duration-grid-web {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.duration-item-web {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.duration-item-web.active {
    border-color: var(--primary);
    background: var(--accent-pink-soft);
}

.duration-item-web .dur-name-web {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text);
}

.duration-item-web.active .dur-name-web {
    color: var(--primary-deep);
}

.duration-item-web .dur-extra-web {
    font-size: 11px;
    color: var(--text-muted);
}

.duration-item-web.active .dur-extra-web {
    color: var(--primary);
}

.duration-item-web .popular-tag-web {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #F48FB1, #EC407A);
    color: white;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.size-list-web {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.size-item-web {
    min-width: 60px;
    padding: 12px 20px;
    border-radius: var(--radius-full);
    background: white;
    border: 1.5px solid var(--border);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.size-item-web.active {
    background: var(--accent-pink-soft);
    border-color: var(--primary);
    color: var(--primary-deep);
}

.color-list-web {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.color-dot-web {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.color-dot-web.active {
    border-color: var(--primary);
    transform: scale(1.1);
}

.color-dot-web.active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.desc-web {
    background: white;
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.desc-text-web {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 10px;
}

.desc-more-web {
    font-size: 13px;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.trust-row-web {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.trust-item-web {
    background: var(--accent-pink-soft);
    border-radius: var(--radius-md);
    padding: 16px 12px;
    text-align: center;
}

.trust-icon-web {
    font-size: 22px;
    color: var(--primary);
    margin-bottom: 8px;
}

.trust-text-web {
    font-size: 12px;
    color: var(--primary-deep);
    font-weight: 500;
    line-height: 1.4;
}

.deposit-panel-web {
    background: white;
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.deposit-panel-web .label {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.deposit-panel-web .sub {
    font-size: 12px;
    color: var(--text-muted);
}

.deposit-panel-web .value {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    color: var(--primary);
}

.date-range-web {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 24px;
}

.date-box-web {
    background: white;
    border-radius: var(--radius-md);
    padding: 14px 18px;
    box-shadow: var(--shadow-sm);
}

.date-label-web {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.date-value-web {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.date-arrow-web {
    color: var(--text-muted);
    font-size: 16px;
}

.detail-cta-row-web {
    display: grid;
    grid-template-columns: auto 1fr 1.3fr;
    gap: 12px;
    margin-bottom: 32px;
}

.cta-btn-web {
    border-radius: var(--radius-full);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.2s;
    cursor: pointer;
}

.cta-ai-web {
    background: var(--accent-pink-soft);
    color: var(--primary-deep);
}

.cta-ai-web:hover {
    background: var(--accent-pink);
}

.cta-cart-web {
    background: white;
    border: 1.5px solid var(--primary);
    color: var(--primary);
}

.cta-cart-web:hover {
    background: var(--accent-pink-soft);
}

.cta-rent-web {
    background: linear-gradient(135deg, #7C3AED 0%, #C2185B 100%);
    color: white;
    box-shadow: 0 8px 24px rgba(194, 24, 91, 0.30);
}

.cta-rent-web:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(194, 24, 91, 0.40);
}

/* ============ AI PAGE ============ */
.ai-web-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    margin: 32px 0;
}

.ai-web-panel {
    background: white;
    border-radius: var(--radius-xl);
    padding: 40px;
    box-shadow: var(--shadow-sm);
}

.ai-web-header {
    text-align: center;
    margin-bottom: 32px;
}

.ai-web-title {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 800;
    background: linear-gradient(135deg, #8B0049 0%, #C2185B 50%, #7C3AED 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
    margin-bottom: 8px;
}

.ai-web-sub {
    font-size: 15px;
    color: var(--text-muted);
}

.ai-compare-web {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
    margin-bottom: 32px;
}

.ai-img-box-web {
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    padding: 12px;
    position: relative;
    aspect-ratio: 3/4;
}

.ai-img-inner-web {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #FCE4EC, #E1BEE7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 100px;
    overflow: hidden;
    position: relative;
}

.ai-img-inner-web img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-tag-web {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    z-index: 2;
}

.ai-tag-web.result {
    background: linear-gradient(135deg, #F8BBD0, #E1BEE7);
    color: var(--primary-deep);
    left: auto;
    right: 20px;
}

.ai-arrow-web {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F48FB1, #CE93D8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 8px 24px rgba(194, 24, 91, 0.25);
}

.ai-guide-web {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.guide-card-web {
    background: var(--surface-2);
    border-radius: var(--radius-md);
    padding: 16px 12px;
    text-align: center;
}

.guide-card-web i {
    font-size: 26px;
    color: var(--primary);
    margin-bottom: 8px;
    display: block;
}

.guide-card-web span {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    display: block;
}

.ai-upload-row-web {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.upload-btn-web {
    padding: 16px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #FCE4EC, #E1BEE7);
    color: var(--primary-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

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

.upload-btn-web.primary {
    background: linear-gradient(135deg, #F48FB1, #EC407A);
    color: white;
    box-shadow: 0 6px 20px rgba(236, 64, 122, 0.30);
}

.ai-note-web {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.ai-run-btn-web {
    width: 100%;
    background: linear-gradient(135deg, #7C3AED 0%, #C2185B 100%);
    color: white;
    padding: 18px;
    border-radius: var(--radius-full);
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(194, 24, 91, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.ai-run-btn-web:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(194, 24, 91, 0.40);
}

.ai-sidebar-web {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.ai-outfit-card-web {
    background: white;
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 16px;
    align-items: center;
}

.ai-outfit-img-web {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #FCE4EC, #E1BEE7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

.ai-outfit-name-web {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.ai-outfit-price-web {
    font-size: 16px;
    color: var(--primary);
    font-weight: 800;
    margin-bottom: 8px;
}

.ai-outfit-chips-web {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

/* ============ CART PAGE ============ */
.cart-web-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    margin: 32px 0;
}

.cart-panel-web {
    background: white;
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}

.cart-tabs-web {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 20px;
}

.cart-tab-web {
    padding: 10px 22px;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cart-tab-web.active {
    background: var(--primary);
    color: white;
}

.cart-item-web {
    display: grid;
    grid-template-columns: 100px 1fr auto auto;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-light);
    align-items: center;
}

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

.cart-img-web {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #FCE4EC, #E1BEE7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
}

.cart-info-web h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}

.cart-tags-web {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.cart-tag-web {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.cart-tag-web.pink {
    background: var(--accent-pink-soft);
    color: var(--primary-deep);
    border-color: transparent;
    font-weight: 600;
}

.cart-price-web {
    font-size: 18px;
    color: var(--primary);
    font-weight: 800;
}

.cart-price-web small {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
    display: block;
    margin-top: 2px;
}

.qty-web {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    padding: 4px;
    border-radius: var(--radius-full);
}

.qty-btn-web {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: white;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.qty-btn-web:hover {
    background: var(--primary);
    color: white;
}

.qty-val-web {
    min-width: 28px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}

.cart-remove-web {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.cart-remove-web:hover {
    background: #FEE2E2;
    color: var(--danger);
}

.cart-sidebar-web {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.cart-summary-web {
    background: white;
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

.cart-summary-title-web {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}

.summary-line-web {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
    color: var(--text-muted);
}

.summary-line-web.total-web {
    border-top: 1px solid var(--border-light);
    padding-top: 16px;
    margin-top: 10px;
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
}

.summary-line-web.total-web .value {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--primary);
}

.summary-line-web .value {
    color: var(--text);
    font-weight: 600;
}

.summary-line-web.discount-web .value {
    color: var(--success);
}

.summary-line-web.deposit-web {
    background: var(--accent-pink-soft);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-top: 10px;
    color: var(--primary-deep);
    font-weight: 700;
}

.checkout-section-web {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.checkout-head-web {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}

.checkout-head-web h3 {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.step-num-web {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7C3AED, #C2185B);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.checkout-edit-web {
    font-size: 13px;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
}

.address-card-web {
    background: var(--surface-2);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    gap: 16px;
}

.address-icon-web {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-pink-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.address-info-web {
    flex: 1;
}

.address-name-web {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.address-tag-web {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: white;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.address-line-web {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.payment-grid-web {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.payment-opt-web {
    padding: 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 14px;
}

.payment-opt-web.active {
    border-color: var(--primary);
    background: var(--accent-pink-soft);
    box-shadow: 0 0 0 3px rgba(194, 24, 91, 0.08);
}

.payment-logo-web {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    flex-shrink: 0;
}

.payment-logo-web.momo { background: #A50064; }
.payment-logo-web.visa { background: #1A1F71; }
.payment-logo-web.bank { background: #3B82F6; }
.payment-logo-web.cod { background: #10B981; }

.payment-info-web h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.payment-info-web p {
    font-size: 12px;
    color: var(--text-muted);
}

.payment-check-web {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: white;
    margin-left: auto;
}

.payment-opt-web.active .payment-check-web {
    background: var(--primary);
    border-color: var(--primary);
}

.checkout-btn-web {
    width: 100%;
    background: linear-gradient(135deg, #7C3AED 0%, #C2185B 100%);
    color: white;
    padding: 18px;
    border-radius: var(--radius-full);
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(194, 24, 91, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 24px;
}

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

/* ============ ORDERS PAGE ============ */
.orders-web-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 20px;
}

.order-tab-web {
    padding: 12px 24px;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-tab-web.active {
    background: var(--primary);
    color: white;
}

.order-tab-web .badge-web {
    background: rgba(255, 255, 255, 0.3);
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-tab-web:not(.active) .badge-web {
    background: var(--primary);
    color: white;
}

.order-card-web {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.order-head-web {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 20px;
    margin-bottom: 20px;
}

.order-img-web {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #FCE4EC, #E1BEE7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
}

.order-info-web h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-info-web h4 i {
    font-size: 12px;
    color: var(--text-light);
    cursor: pointer;
}

.order-meta-web {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.order-range-web {
    font-size: 14px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.order-range-web i {
    color: var(--text-light);
    font-size: 12px;
}

.order-status-web {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    height: fit-content;
}

.status-processing-web { background: #FEF3C7; color: #92400E; }
.status-renting-web { background: #DBEAFE; color: #1E40AF; }
.status-done-web { background: #D1FAE5; color: #065F46; }

.progress-web {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 20px 0;
    margin-bottom: 20px;
}

.progress-web::before {
    content: '';
    position: absolute;
    top: 32px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: var(--border);
}

.prog-step-web {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
    flex: 1;
}

.prog-dot-web {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--border);
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.prog-step-web.done .prog-dot-web {
    background: linear-gradient(135deg, #F48FB1, #EC407A);
    color: white;
    border-color: transparent;
}

.prog-step-web.current .prog-dot-web {
    background: var(--primary);
    color: white;
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(194, 24, 91, 0.15);
}

.prog-label-web {
    font-size: 12px;
    color: var(--text-muted);
}

.prog-step-web.done .prog-label-web {
    color: var(--primary-deep);
    font-weight: 600;
}

.order-info-block-web {
    background: var(--accent-pink-soft);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--primary-deep);
    font-weight: 600;
}

.order-info-block-web .paid-tag {
    color: var(--success);
    display: flex;
    align-items: center;
    gap: 6px;
}

.order-track-web {
    background: var(--surface-2);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    margin-bottom: 20px;
    font-size: 13px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.order-track-web i {
    color: var(--primary);
    font-size: 18px;
}

.order-actions-web {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.order-btn-web {
    padding: 12px 24px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-btn-web.outline {
    background: white;
    border: 1.5px solid var(--primary);
    color: var(--primary);
}

.order-btn-web.outline:hover {
    background: var(--accent-pink-soft);
}

.order-btn-web.solid {
    background: linear-gradient(135deg, #7C3AED, #C2185B);
    color: white;
    box-shadow: 0 4px 12px rgba(194, 24, 91, 0.25);
}

.order-btn-web.solid:hover {
    transform: translateY(-2px);
}

/* ============ CONSIGN PAGE ============ */
.consign-web-hero {
    background: linear-gradient(135deg, #FCE4EC 0%, #E1BEE7 60%, #D1C4E9 100%);
    border-radius: var(--radius-xl);
    padding: 48px 60px;
    margin: 32px 0 40px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

.consign-web-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 70%);
}

.consign-web-hero-content {
    position: relative;
    z-index: 2;
}

.consign-web-title {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 700;
    color: var(--primary-deep);
    line-height: 1.15;
    letter-spacing: -1px;
    margin-bottom: 24px;
}

.consign-web-title span {
    display: block;
}

.consign-web-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.consign-web-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--text);
}

.consign-web-feature i {
    color: var(--primary);
    font-size: 16px;
}

.consign-web-visual {
    font-size: 200px;
    text-align: center;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 12px 24px rgba(194, 24, 91, 0.25));
}

.consign-web-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.consign-form-panel {
    background: white;
    border-radius: var(--radius-xl);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}

.upload-area-web {
    background: var(--surface-2);
    border: 2px dashed var(--accent-pink);
    border-radius: var(--radius-lg);
    padding: 40px 24px;
    text-align: center;
    margin-bottom: 24px;
    cursor: pointer;
    transition: all 0.2s;
}

.upload-area-web:hover {
    background: var(--accent-pink-soft);
}

.upload-area-icon-web {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--accent-pink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 32px;
    color: var(--primary);
}

.upload-area-web h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--primary-deep);
}

.upload-area-web p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.upload-action-web {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #F48FB1, #EC407A);
    color: white;
    padding: 12px 24px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(236, 64, 122, 0.30);
}

.form-grid-2-web {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-field-web {
    background: var(--surface-2);
    border-radius: var(--radius-md);
    padding: 14px 18px;
}

.form-field-web label {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}

.form-field-web label .req {
    color: var(--primary);
}

.form-field-web input,
.form-field-web select {
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: transparent;
}

.form-field-web input::placeholder {
    color: var(--text-light);
    font-weight: 400;
}

.consign-submit-web {
    width: 100%;
    background: linear-gradient(135deg, #7C3AED 0%, #C2185B 100%);
    color: white;
    padding: 18px;
    border-radius: var(--radius-full);
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(194, 24, 91, 0.30);
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 8px;
}

.consign-submit-web:hover {
    transform: translateY(-2px);
}

.consign-info-panel {
    background: white;
    border-radius: var(--radius-xl);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}

.process-web-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 24px;
}

.process-steps-web {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.process-step-web {
    background: var(--surface-2);
    border-radius: var(--radius-md);
    padding: 20px 16px;
    text-align: center;
    position: relative;
}

.process-step-web.active {
    background: linear-gradient(135deg, #FCE4EC, #E1BEE7);
}

.process-step-icon-web {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: white;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 18px;
    box-shadow: var(--shadow-sm);
}

.process-step-web.active .process-step-icon-web {
    background: linear-gradient(135deg, #F48FB1, #EC407A);
    color: white;
}

.process-step-web h5 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}

.process-step-web p {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

.consign-items-head-web {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.consign-items-head-web h3 {
    font-size: 16px;
    font-weight: 700;
}

.consign-items-head-web .view-all {
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
}

.consign-item-web {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-light);
    align-items: center;
}

.consign-item-web:last-child {
    border-bottom: none;
}

.consign-img-web {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #FCE4EC, #E1BEE7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    overflow: hidden;
    flex-shrink: 0;
}

.consign-img-web img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.consign-info-web h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 3px;
}

.consign-info-web .brand {
    font-size: 12px;
    color: var(--text);
    margin-bottom: 2px;
}

.consign-info-web .meta {
    font-size: 11px;
    color: var(--text-muted);
}

.consign-status-web {
    text-align: right;
}

.status-pill-web {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 4px;
}

.status-pill-web.waiting {
    background: #FEF3C7;
    color: #92400E;
}

.status-pill-web.selling {
    background: #DBEAFE;
    color: #1E40AF;
}

.status-pill-web.paid {
    background: #D1FAE5;
    color: #065F46;
}

.consign-status-web .price {
    font-size: 14px;
    font-weight: 800;
    color: var(--primary);
}

/* ============ PROFILE PAGE ============ */
.profile-web-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    margin: 32px 0;
}

.profile-sidebar-web {
    background: white;
    border-radius: var(--radius-xl);
    padding: 32px 24px;
    box-shadow: var(--shadow-sm);
    height: fit-content;
    position: sticky;
    top: 100px;
}

.profile-hero-web {
    text-align: center;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 24px;
}

.profile-avatar-web {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F48FB1, #CE93D8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 800;
    margin: 0 auto 16px;
    border: 4px solid white;
    box-shadow: 0 8px 20px rgba(194, 24, 91, 0.20);
    font-family: var(--font-display);
}

.profile-name-web {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.profile-name-web i {
    font-size: 12px;
    color: var(--text-light);
    cursor: pointer;
}

.profile-tier-web {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-pink-soft);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-deep);
    margin-bottom: 10px;
}

.profile-tier-web i {
    color: var(--gold);
}

.profile-tier-bar-web {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--surface-2);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.profile-stats-web {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.stat-web {
    background: var(--surface-2);
    border-radius: var(--radius-md);
    padding: 16px 12px;
    text-align: center;
}

.stat-web i {
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 6px;
    display: block;
}

.stat-web .label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.stat-web .value {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
}

.profile-menu-web {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-menu-item-web {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.profile-menu-item-web:hover {
    background: var(--accent-pink-soft);
}

.profile-menu-item-web i:first-child {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-pink-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.profile-menu-item-web:hover i:first-child {
    background: white;
}

.profile-menu-item-web span {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.profile-menu-item-web i:last-child {
    color: var(--text-light);
    font-size: 12px;
}

.profile-welcome-card {
    background: linear-gradient(135deg, #FCE4EC 0%, #E1BEE7 100%);
    border-radius: var(--radius-xl);
    padding: 32px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.profile-welcome-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 70%);
}

.profile-welcome-card h2 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-deep);
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.profile-welcome-card p {
    font-size: 14px;
    color: var(--text);
    position: relative;
    z-index: 1;
}

.profile-referral-web {
    background: white;
    border-radius: var(--radius-xl);
    padding: 28px 32px;
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 24px;
    align-items: center;
}

.profile-referral-icon-web {
    font-size: 60px;
}

.profile-referral-text-web h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--primary-deep);
}

.profile-referral-text-web p {
    font-size: 13px;
    color: var(--text-muted);
}

.profile-referral-btn-web {
    background: linear-gradient(135deg, #7C3AED, #C2185B);
    color: white;
    padding: 14px 28px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(194, 24, 91, 0.30);
    cursor: pointer;
    white-space: nowrap;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
    .detail-web-layout,
    .ai-web-layout,
    .cart-web-layout,
    .consign-web-layout,
    .profile-web-layout,
    .category-web-layout {
        grid-template-columns: 1fr;
    }

    .gallery-web {
        grid-template-columns: 1fr;
    }

    .gallery-thumbs-web {
        flex-direction: row;
    }

    .gallery-main-web {
        height: 480px;
    }

    .filter-sidebar-web,
    .cart-sidebar-web,
    .ai-sidebar-web,
    .profile-sidebar-web {
        position: static;
    }
}

@media (max-width: 768px) {
    .detail-name-web {
        font-size: 26px;
    }

    .ai-compare-web {
        grid-template-columns: 1fr;
    }

    .ai-arrow-web {
        transform: rotate(90deg);
    }

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

    .cart-item-web {
        grid-template-columns: 80px 1fr;
        gap: 12px;
        position: relative;
    }

    .cart-item-web .qty-web {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .cart-remove-web {
        position: absolute;
        top: 12px;
        right: 12px;
    }

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

    .process-steps-web {
        grid-template-columns: 1fr 1fr;
    }

    .consign-web-hero {
        padding: 32px 24px;
        grid-template-columns: 1fr;
    }

    .consign-web-title {
        font-size: 32px;
    }

    .consign-web-visual {
        font-size: 120px;
    }

    .profile-referral-web {
        grid-template-columns: 1fr;
        text-align: center;
    }

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

    .detail-cta-row-web {
        grid-template-columns: 1fr;
    }

    .order-head-web {
        grid-template-columns: 80px 1fr;
    }

    .order-status-web {
        grid-column: 1 / -1;
        width: fit-content;
    }

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

    .progress-web {
        padding: 12px 0;
    }

    .progress-web::before {
        top: 24px;
    }
}