/**
 * Cart Progress Bar v2.0 - CSS
 * With weight display and scenario styling
 */

:root {
    --cpb-bar-color: #0a50c3;
    --cpb-bar-bg-color: #e5e7eb;
    --cpb-text-color: #374151;
    --cpb-success-color: #16a34a;
    --cpb-warning-color: #f59e0b;
    --cpb-danger-color: #dc2626;
}

/* ===== WRAPPER ===== */
.cart-progress-bar-wrapper {
    padding: 14px 16px;
    background: #f5f7fa;
    border: 2px solid var(--cpb-bar-color);
    border-radius: 10px;
    margin: 12px 0;
}

/* Scenario: Free shipping */
.cart-progress-bar-wrapper.cpb-scenario--free_shipping {
    background: #f0fdf4;
    border-color: var(--cpb-success-color);
}

/* Scenario: Weight exceeded */
.cart-progress-bar-wrapper.cpb-scenario--weight_exceeded {
    background: #fffbeb;
    border-color: var(--cpb-warning-color);
}

/* ===== MESSAGE ===== */
.cpb-message {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--cpb-text-color);
    margin-bottom: 12px;
}

.cpb-message-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.cpb-message-icon--success {
    background: var(--cpb-success-color);
    color: #fff;
}

.cpb-message-icon--warning {
    background: var(--cpb-warning-color);
    color: #fff;
}

.cpb-message--free_shipping {
    color: var(--cpb-success-color);
}

.cpb-message--weight_exceeded {
    color: #92400e;
}

/* ===== PROGRESS BAR ===== */
.cpb-bar-container {
    position: relative;
    height: 32px;
    display: flex;
    align-items: center;
}

.cpb-bar-background {
    flex: 1;
    height: var(--cpb-bar-height, 8px);
    background: var(--cpb-bar-bg-color);
    border-radius: 4px;
    overflow: hidden;
    margin-right: 10px;
}

.cpb-bar-fill {
    height: 100%;
    background: var(--cpb-bar-color);
    border-radius: 4px;
    transition: width 0.4s ease;
}

.cpb-scenario--free_shipping .cpb-bar-fill {
    background: linear-gradient(90deg, var(--cpb-bar-color) 0%, var(--cpb-success-color) 100%);
}

.cpb-scenario--weight_exceeded .cpb-bar-fill {
    background: var(--cpb-warning-color);
}

/* Bar icon */
.cpb-bar-icon {
    width: 32px;
    height: 32px;
    background: #fff;
    border: 2px solid var(--cpb-bar-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--cpb-bar-color);
}

.cpb-bar-icon--free_shipping {
    background: var(--cpb-success-color);
    border-color: var(--cpb-success-color);
    color: #fff;
}

.cpb-bar-icon--weight_exceeded {
    border-color: var(--cpb-warning-color);
    color: var(--cpb-warning-color);
}

.cpb-bar-icon svg {
    width: 18px;
    height: 18px;
}

/* ===== WEIGHT INFO ===== */
.cpb-weight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px dashed #d1d5db;
    font-size: 12px;
}

.cpb-weight-info {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
}

.cpb-weight-info svg {
    color: #9ca3af;
}

.cpb-weight-value {
    font-weight: 600;
    color: var(--cpb-text-color);
}

.cpb-weight--exceeded .cpb-weight-value {
    color: var(--cpb-warning-color);
}

.cpb-weight-separator {
    color: #d1d5db;
}

.cpb-weight-max {
    color: #9ca3af;
}

/* Weight badge */
.cpb-weight-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.cpb-weight-badge--ok {
    background: #dcfce7;
    color: var(--cpb-success-color);
}

.cpb-weight-badge--warning {
    background: #fef3c7;
    color: #b45309;
}

.cpb-weight-badge--exceeded {
    background: #fee2e2;
    color: var(--cpb-danger-color);
}

/* ===== DROPDOWN VARIANT ===== */
.cart-progress-bar--dropdown,
.cpb-dropdown-injected {
    padding: 12px 14px !important;
    margin: 10px 0 !important;
    overflow: visible !important;
}

.cart-progress-bar--dropdown .cpb-message,
.cpb-dropdown-injected .cpb-message {
    font-size: 12px;
    margin-bottom: 10px;
}

.cart-progress-bar--dropdown .cpb-bar-container,
.cpb-dropdown-injected .cpb-bar-container {
    height: 28px;
}

.cart-progress-bar--dropdown .cpb-bar-icon,
.cpb-dropdown-injected .cpb-bar-icon {
    width: 28px;
    height: 28px;
}

.cart-progress-bar--dropdown .cpb-bar-icon svg,
.cpb-dropdown-injected .cpb-bar-icon svg {
    width: 14px;
    height: 14px;
}

.cart-progress-bar--dropdown .cpb-weight,
.cpb-dropdown-injected .cpb-weight {
    padding-top: 8px;
    margin-top: 8px;
    font-size: 11px;
}

.cart-progress-bar--dropdown .cpb-weight-badge,
.cpb-dropdown-injected .cpb-weight-badge {
    font-size: 10px;
    padding: 2px 6px;
}

/* ===== CHECKOUT VARIANT ===== */
.cart-progress-bar--checkout {
    padding: 12px 14px;
    margin: 10px 0;
}

.cart-progress-bar--checkout .cpb-message {
    font-size: 12px;
}

.cart-progress-bar--checkout .cpb-bar-icon {
    width: 28px;
    height: 28px;
}

/* ===== HIDDEN/SOURCE ===== */
.cart-progress-bar--hidden-container,
.cart-progress-bar--source-container {
    display: none !important;
}

/* ===== ANIMATION ===== */
.cpb-bar-fill.cpb-animated {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .cart-progress-bar-wrapper {
        padding: 12px;
    }
    
    .cpb-message {
        font-size: 12px;
    }
    
    .cpb-weight {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .cpb-weight-status {
        align-self: flex-end;
    }
}