@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round&display=swap');

:root {
    /* Core Colors */
    --vibe-primary: #4F46E5;
    --vibe-primary-dark: #4338CA;
    --vibe-slider-bg: rgba(255, 255, 255, 0.95);
    --vibe-form-text-color: #374151;
    --vibe-input-bg: #F9FAFB;
    /* Slightly off-white for inputs */
    --vibe-input-border: #E5E7EB;
    --vibe-btn-text-color: #FFFFFF;

    /* Helpers */
    --vibe-gray-50: #f9fafb;
    --vibe-gray-100: #f3f4f6;
    --vibe-gray-200: #e5e7eb;
    --vibe-gray-300: #d1d5db;
    --vibe-gray-400: #9ca3af;
    --vibe-gray-900: #111827;
    --vibe-success: #10B981;
    --vibe-danger: #EF4444;

    --vibe-radius: 0.75rem;
    /* 12px for a softer modern look */
    --vibe-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --vibe-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --vibe-shadow-lg: 0 -20px 50px -10px rgba(0, 0, 0, 0.15);
}

#vibe-checkout-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: transparent;
    direction: rtl;
    color: var(--vibe-form-text-color);
}

/* Titles */
.vibe-form-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--vibe-gray-900);
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.vibe-form-title svg {
    color: var(--vibe-primary);
    filter: drop-shadow(0 0 8px rgba(79, 70, 229, 0.3));
}

/* Grid System */
.vibe-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Form Groups - Decreased Spacing */
.vibe-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* Tightened gap label/input */
    margin-bottom: 0.75rem;
    /* Decreased bottom margin */
}

.vibe-form-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--vibe-form-text-color);
    text-align: right;
}

.vibe-form-group label .required {
    color: var(--vibe-danger);
    margin-right: 2px;
}

/* Inputs */
.vibe-input,
.vibe-quantity-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--vibe-input-border);
    border-radius: var(--vibe-radius);
    background-color: var(--vibe-input-bg);
    color: var(--vibe-form-text-color);
    transition: all 0.2s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: right;
}

/* LTR for phones */
#vibe_billing_phone {
    direction: ltr;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.vibe-input:focus,
.vibe-quantity-input:focus {
    outline: none;
    border-color: var(--vibe-primary);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

.vibe-input:disabled {
    background-color: var(--vibe-gray-100);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Select Arrow Fix (RTL) */
select.vibe-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: left 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-left: 2.5rem;
    /* Make room for arrow */
}

/* Variations Section - Under Product Details */
.vibe-variations-section {
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    border-top: 1px dashed var(--vibe-gray-200);
}

/* Variations - Updated for smaller size and spacing */
.vibe-variation-radios {
    margin-bottom: 0.75rem;
    /* Decreased margin */
    background: transparent;
    /* Clean look */
    padding: 0;
    border-radius: var(--vibe-radius);
    border: none;
}

.vibe-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* Decreased gap */
    margin-top: 0.25rem;
}

.vibe-radio-item {
    position: relative;
}

.vibe-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.vibe-radio-label {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    /* Smaller padding */
    border: 1px solid var(--vibe-input-border);
    border-radius: 999px;
    /* Pill shape */
    cursor: pointer;
    font-size: 0.85rem;
    /* Smaller font size */
    font-weight: 500;
    color: var(--vibe-form-text-color);
    background: #fff;
    transition: all 0.2s ease;
}

.vibe-radio-input:checked+.vibe-radio-label {
    background-color: var(--vibe-primary);
    border-color: var(--vibe-primary);
    color: #fff;
    box-shadow: 0 2px 4px -1px rgba(79, 70, 229, 0.3);
    transform: translateY(-1px);
}

/* Quantity */
.vibe-quantity-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    /* Decreased margin */
}

.vibe-quantity {
    display: flex;
    align-items: center;
    background: var(--vibe-input-bg);
    border: 1px solid var(--vibe-input-border);
    border-radius: var(--vibe-radius);
    width: fit-content;
    overflow: hidden;
}

.vibe-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    color: var(--vibe-form-text-color);
    cursor: pointer;
    transition: background 0.2s;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
}

.vibe-qty-btn:hover {
    background-color: var(--vibe-gray-200);
    color: var(--vibe-primary);
}

/* Hide old SVGs */
.vibe-qty-btn svg {
    display: none !important;
}

.vibe-qty-input {
    width: 50px;
    height: 48px;
    border: none;
    background: transparent;
    padding: 0;
    text-align: center;
    font-weight: 700;
    border-radius: 0;
}

.vibe-qty-input:focus {
    box-shadow: none;
}

/* Shipping - Compact Style */
.vibe-shipping-methods {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Reduced gap */
    background-color: var(--vibe-gray-50);
    border: 1px solid var(--vibe-input-border);
    padding: 0.75rem;
    /* Reduced padding */
    border-radius: var(--vibe-radius);
    margin-top: 0.5rem;
}

.vibe-shipping-methods label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    /* Slightly smaller font */
    cursor: pointer;
    text-align: right;
    padding: 0.25rem 0.5rem;
    /* More compact padding */
    border-radius: 0.5rem;
    transition: background 0.2s;
}

.vibe-shipping-methods label:hover {
    background: rgba(0, 0, 0, 0.03);
}

.vibe-shipping-methods input[type="radio"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--vibe-primary);
}

/* Order Summary */
.vibe-order-summary {
    background: var(--vibe-gray-50);
    padding: 1.25rem;
    border-radius: var(--vibe-radius);
    margin-top: 1.25rem;
    border: 1px solid var(--vibe-input-border);
}

.vibe-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    color: var(--vibe-form-text-color);
    margin-bottom: 0.5rem;
}

.vibe-summary-row:last-child {
    margin-bottom: 0;
}

.vibe-summary-row.total {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--vibe-gray-300);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vibe-gray-900);
}

.vibe-summary-row.total .woocommerce-Price-amount {
    color: var(--vibe-primary);
}

/* Buttons */
.vibe-submit-wrapper {
    display: flex;
    flex-direction: column;
    /* Stack them vertically */
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.vibe-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    order: 1;
    /* Default order */
    /* Font for text */
    font-family: 'Inter', sans-serif;
}

/* Hide SVG in main buttons */
.vibe-btn svg {
    display: none !important;
}

/* Insert Google Icons for Open Button */
#vibe-open-checkout-btn::before {
    font-family: 'Material Icons Round';
    content: "shopping_bag";
    font-size: 20px;
    line-height: 1;
    margin-right: 0;
    /* Adjust spacing if needed */
    text-transform: none !important;
    font-weight: normal;
}

/* Specific Order adjustments */
#vibe-submit-btn {
    order: 1;
    /* Buy Now on top */
}

#vibe-add-to-cart-btn {
    order: 2;
    /* Add to Cart below */
}

.vibe-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3);
}

.vibe-btn:active {
    transform: translateY(0);
}

/* Secondary Button (Ghost Style) */
.vibe-btn.vibe-btn-secondary {
    background: transparent;
    border: 2px solid var(--vibe-primary);
    color: var(--vibe-primary);
    box-shadow: none;
}

.vibe-btn.vibe-btn-secondary:hover {
    background: var(--vibe-gray-50);
    transform: translateY(-1px);
}

/* Button Loader */
.vibe-btn-loader {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: vibe-spin 0.8s linear infinite;
}

@keyframes vibe-spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- Slider UI --- */
#vibe-checkout-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    /* Glassmorphism Effect */
    z-index: 99999;
    /* Increased */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

#vibe-checkout-overlay.vibe-active {
    opacity: 1;
    visibility: visible;
}

#vibe-checkout-slider {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    height: auto;
    background: var(--vibe-slider-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 100000;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    box-shadow: var(--vibe-shadow-lg);
    direction: rtl;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
}

#vibe-checkout-slider.vibe-active {
    transform: translateY(0);
}

/* Drag Handle */
.vibe-drag-handle {
    width: 40px;
    height: 5px;
    background: var(--vibe-gray-300);
    border-radius: 3px;
    margin: 12px auto 0;
    cursor: grab;
}

#vibe-slider-header {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--vibe-gray-200);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 100001;
    /* Ensure header is stacked high */
}

/* Close Button - Updated to Google Icon X */
#vibe-close-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    /* No circle background */
    border: none;
    border-radius: 0;
    /* No radius */
    color: #000000 !important;
    /* FORCE BLACK COLOR */
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
    /* No shadow */
    position: relative;
    /* Positioning context */
    z-index: 100002;
    /* Ensure button is on top of everything */
}

#vibe-close-btn:hover {
    color: var(--vibe-danger) !important;
    transform: scale(1.1);
}

/* Hide old SVG */
#vibe-close-btn svg {
    display: none !important;
}

/* Add Material Icon Close */
#vibe-close-btn::before {
    font-family: 'Material Icons Round';
    content: "close";
    font-size: 28px;
    line-height: 1;
    text-transform: none !important;
    /* Critical to prevent 'CLOSE' text */
    font-weight: normal;
    font-style: normal;
    display: inline-block;
}

.vibe-header-branding {
    text-align: center;
}

.vibe-header-branding img {
    height: 40px;
    width: auto;
}

#vibe-slider-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    /* Hide Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--vibe-gray-300) transparent;
    overscroll-behavior: contain;
}

/* Floating Button */
.vibe-floating-container {
    position: fixed;
    bottom: 64px;
    /* Changed from 24px to 64px (24 + 40) */
    left: 24px;
    right: 24px;
    z-index: 99998;
    pointer-events: none;
    /* Allow clicking through container */
    display: flex;
    justify-content: center;
}

.vibe-floating-cart-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--vibe-primary);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1000;
    pointer-events: auto;
}

.vibe-floating-cart-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.5);
}

.vibe-floating-cart-btn .material-icons-round {
    font-size: 28px;
}

.vibe-cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--vibe-danger);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
}

#vibe-open-checkout-btn {
    pointer-events: auto;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 999px;
    /* Pill shape */
    box-shadow: 0 8px 30px rgba(79, 70, 229, 0.4);
    animation: vibe-float 3s ease-in-out infinite;
}

@keyframes vibe-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Multi-line Button Text */
.vibe-btn-text-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 10px;
    line-height: 1.2;
    text-align: left;
}

.vibe-btn-main-text {
    font-weight: bold;
}

.vibe-btn-sub-text {
    font-size: var(--vibe-open-btn-subtext-size);
    opacity: 0.9;
    font-weight: normal;
}

/* Ensure icon spacing */
#vibe-open-checkout-btn::before {
    margin-right: 0;
    /* Reset if needed, margin is handled by text-group margin-left */
}

/* Mobile Optimizations */
@media (max-width: 640px) {
    .vibe-floating-container {
        bottom: 60px;
        left: 16px;
        right: 16px;
    }

    #vibe-checkout-slider {
        max-width: 100%;
    }

    /* Keep column layout on mobile too for this request */
    .vibe-submit-wrapper {
        flex-direction: column;
    }

    .vibe-btn.vibe-btn-secondary {
        width: 100%;
    }

    #vibe-submit-btn {
        width: 100%;
    }

    /* Smaller field text on mobile */
    .vibe-input,
    .vibe-qty-input,
    select.vibe-input {
        font-size: 0.875rem;
        /* 14px instead of 16px */
    }

    .vibe-form-group label {
        font-size: 0.75rem;
        /* 12px instead of 14px */
    }

    .vibe-summary-row {
        font-size: 0.85rem;
    }

    .vibe-shipping-methods label {
        font-size: 0.8rem;
    }
}

/* -------------------------------------- */
/* --- NEW STYLES: SHIPPING CALCULATOR -- */
/* -------------------------------------- */

#zr-shipping-estimator {
    margin-top: 20px;
    padding: 15px;
    background: var(--vibe-gray-50);
    border: 1px solid var(--vibe-input-border);
    border-radius: var(--vibe-radius);
    color: var(--vibe-form-text-color);
}

#zr-shipping-estimator h4 {
    margin: 0 0 10px 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--vibe-gray-900);
}

#zr-wilaya-select {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 0.95rem;
    border: 1px solid var(--vibe-input-border);
    border-radius: var(--vibe-radius);
    background-color: #fff;
    color: var(--vibe-form-text-color);
    outline: none;
    cursor: pointer;
}

#zr-results {
    display: none;
    margin-top: 10px;
}

#zr-results-list {
    background: #fff;
    border: 1px solid var(--vibe-input-border);
    border-radius: var(--vibe-radius);
    overflow: hidden;
}

.zr-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--vibe-input-border);
    font-size: 0.95rem;
}

.zr-result-row:last-child {
    border-bottom: none;
}

.zr-result-row strong {
    color: var(--vibe-primary);
}

.zr-no-rate {
    padding: 10px 15px;
    color: var(--vibe-danger);
    font-size: 0.9rem;
    text-align: center;
}

/* -------------------------------------- */
/* --- WHATSAPP BUTTON STYLES ----------- */
/* -------------------------------------- */

.vibe-btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--vibe-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    order: 3;
}

.vibe-btn-whatsapp svg {
    display: inline-block !important;
    flex-shrink: 0;
}

.vibe-btn-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
    filter: brightness(1.05);
}

.vibe-btn-whatsapp:active {
    transform: translateY(0);
}

.vibe-btn-whatsapp:disabled,
.vibe-btn-whatsapp.vibe-wa-offline {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.vibe-wa-offline-msg {
    font-size: 0.8rem;
    color: var(--vibe-danger);
    text-align: center;
    margin-top: 0.5rem;
}

/* WhatsApp Account Selector */
.vibe-whatsapp-accounts {
    background: var(--vibe-gray-50);
    border: 1px solid var(--vibe-input-border);
    border-radius: var(--vibe-radius);
    padding: 1rem;
    margin-top: 0.75rem;
}

.vibe-wa-select-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--vibe-form-text-color);
    margin: 0 0 0.75rem 0;
    text-align: right;
}

.vibe-wa-account-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background: #fff;
    border: 1px solid var(--vibe-input-border);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.vibe-wa-account-option:hover {
    border-color: #25D366;
    background: rgba(37, 211, 102, 0.05);
}

.vibe-wa-account-option input[type="radio"] {
    accent-color: #25D366;
}

.vibe-wa-account-option span {
    font-size: 0.9rem;
    color: var(--vibe-form-text-color);
}

.vibe-btn-whatsapp-send {
    width: 100%;
    margin-top: 0.75rem;
    background-color: #25D366;
    color: #fff;
    padding: 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: var(--vibe-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.vibe-btn-whatsapp-send:hover {
    background-color: #20bd5a;
    transform: translateY(-1px);
}

/* Business Hours Notification */
.vibe-wa-notification {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 1px solid #f39c12;
    border-radius: var(--vibe-radius);
    padding: 1rem;
    margin-top: 0.75rem;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.2);
    animation: vibeNotificationPulse 0.5s ease;
}

@keyframes vibeNotificationPulse {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.vibe-wa-notification-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.vibe-wa-notification-text {
    flex: 1;
    font-size: 0.9rem;
    color: #856404;
    line-height: 1.4;
}

.vibe-wa-notification-close {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: #856404;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.vibe-wa-notification-close:hover {
    opacity: 1;
}

/* Rounded corners for buttons */
.vibe-btn,
#vibe-submit-btn,
#vibe-add-to-cart-btn,
#vibe-whatsapp-btn {
    border-radius: 12px !important;
}

/* Button Shape Variations */
.vibe-btn-shape-square {
    border-radius: 0 !important;
}

.vibe-btn-shape-rounded {
    border-radius: 12px !important;
}

.vibe-btn-shape-pill {
    border-radius: 50px !important;
}

/* Button Animations */

/* Pulse Animation */
@keyframes vibe-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5);
    }
}

.vibe-btn-anim-pulse {
    animation: vibe-pulse 2s ease-in-out infinite;
}

.vibe-btn-anim-pulse:hover {
    animation: none;
}

/* Shine Animation */
@keyframes vibe-shine {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

.vibe-btn-anim-shine {
    background: linear-gradient(90deg, var(--vibe-primary) 0%, var(--vibe-primary) 40%, rgba(255, 255, 255, 0.4) 50%, var(--vibe-primary) 60%, var(--vibe-primary) 100%) !important;
    background-size: 200% 100%;
    animation: vibe-shine 3s ease-in-out infinite;
}

.vibe-btn-anim-shine:hover {
    animation: none;
    background: var(--vibe-primary-dark) !important;
}

/* Gradient Wave Animation */
@keyframes vibe-gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.vibe-btn-anim-gradient {
    background: linear-gradient(270deg, var(--vibe-primary), #6366f1, #8b5cf6, var(--vibe-primary)) !important;
    background-size: 300% 300%;
    animation: vibe-gradient 4s ease infinite;
}

.vibe-btn-anim-gradient:hover {
    animation-duration: 1s;
}

/* --- Vibe Checkout 4.0 Enhancements --- */

/* 1. Gradient Buttons */
#vibe-submit-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: var(--vibe-radius) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
    transition: all 0.3s ease !important;
}

#vibe-submit-btn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5) !important;
}

.vibe-btn.vibe-btn-secondary {
    background: rgba(79, 70, 229, 0.08) !important;
    border: 2px solid var(--vibe-primary) !important;
    color: var(--vibe-primary) !important;
    box-shadow: none !important;
}

.vibe-btn.vibe-btn-secondary:hover {
    background: rgba(79, 70, 229, 0.15) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

/* 2. Floating Labels & Input Icons */
.vibe-form-group {
    position: relative;
    margin-bottom: 1.25rem !important;
}

.vibe-form-group label {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    /* RTL */
    background: transparent;
    padding: 0 0.25rem;
    color: var(--vibe-gray-400);
    font-size: 0.95rem;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 10;
}

/* Float label when input has focus or value */
.vibe-form-group.vibe-float label {
    top: -0.6rem;
    right: 3.5rem !important;
    /* Increased spacing */
    font-size: 0.8rem;
    color: var(--vibe-primary);
    background: #fff;
    font-weight: 600;
}

.vibe-input {
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
    padding-right: 1rem !important;
    /* Default padding */
}

/* With Icon */
/* With Icon */
.vibe-input.vibe-has-icon {
    padding-right: 1rem !important;
    /* Reset to normal padding */
}

.vibe-input-icon {
    position: absolute;
    top: 0 !important;
    right: 0.75rem !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    /* Small */
    color: var(--vibe-primary) !important;
    background: #fff;
    padding: 0 2px;
    z-index: 21;
    /* Above label if needed */
    pointer-events: none;
    line-height: 1;
    height: auto;
    width: auto;
}

.vibe-input:focus~.vibe-input-icon {
    color: var(--vibe-primary);
}

/* Update Label Positioning to avoid icon overlap */
.vibe-form-group.vibe-float label,
.vibe-form-group.vibe-float-always label {
    right: 3.5rem !important;
    /* Increased spacing */
    /* Make room for the icon */
}

/* 3. Minimal Header (Remove visible header) */
#vibe-slider-header {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0.5rem 1rem !important;
    min-height: auto !important;
}

.vibe-header-branding {
    display: none !important;
}

#vibe-close-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
}

/* --- Phase 2: UX Improvements --- */

/* 1. Validation Indicators */
.vibe-input.vibe-valid {
    border-color: var(--vibe-success) !important;
    background-image: none !important;
    padding-left: 1rem !important;
    /* Reset to default padding */
}

.vibe-input.vibe-invalid {
    border-color: var(--vibe-danger) !important;
    animation: vibe-shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes vibe-shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* 2. Loading Overlays */
.vibe-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    border-radius: var(--vibe-radius);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

.vibe-loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.vibe-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--vibe-primary);
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: vibe-spin 1s linear infinite;
}

/* 3. Free Shipping Progress */
.vibe-free-shipping-bar {
    margin: 0 0 1rem 0;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(52, 211, 153, 0.05) 100%);
    border-radius: var(--vibe-radius);
    text-align: center;
    font-size: 0.95rem;
    color: var(--vibe-form-text-color);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.vibe-fs-msg {
    display: block;
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: #065f46;
}

.vibe-progress-track {
    height: 10px;
    background: linear-gradient(90deg, #e5e7eb, #f3f4f6);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.vibe-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--vibe-primary), #60a5fa);
    width: 0%;
    border-radius: 5px;
    transition: width 0.5s ease-out, background 0.3s ease;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

/* ====== Flash Deals Banner ====== */
.vibe-flash-deal-banner {
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
    border-radius: var(--vibe-radius);
    text-align: center;
    color: #fff;
    animation: vibe-flash-pulse 2s ease-in-out infinite;
}

@keyframes vibe-flash-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }

    50% {
        transform: scale(1.01);
        box-shadow: 0 0 20px 5px rgba(239, 68, 68, 0.3);
    }
}

.vibe-flash-deal-banner .flash-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.vibe-flash-deal-banner .flash-icon {
    font-size: 1.5rem;
    animation: vibe-flash-shake 0.5s ease-in-out infinite;
}

@keyframes vibe-flash-shake {

    0%,
    100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

.vibe-flash-deal-banner .flash-message {
    font-weight: 600;
    font-size: 0.95rem;
}

.vibe-flash-deal-banner .flash-countdown {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'Courier New', monospace;
}

.vibe-flash-deal-banner .countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.vibe-flash-deal-banner .countdown-unit .num {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

.vibe-flash-deal-banner .countdown-unit .label {
    font-size: 0.65rem;
    opacity: 0.8;
}

.vibe-flash-deal-banner .countdown-sep {
    font-weight: 700;
    font-size: 1.2rem;
}

.vibe-flash-deal-banner .expired {
    font-style: italic;
    opacity: 0.8;
}

/* ====== Bundle Deals ====== */
.vibe-bundle-deals-banner {
    margin: 0 0 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vibe-bundle-deal-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--vibe-radius);
    direction: rtl;
    text-align: right;
}

.vibe-bundle-deal-item.partial {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px dashed rgba(99, 102, 241, 0.3);
}

.vibe-bundle-deal-item.applied {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.vibe-bundle-deal-item .bundle-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.vibe-bundle-deal-item .bundle-text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #374151;
}

.vibe-bundle-deal-item .bundle-missing {
    color: #6366f1;
    font-weight: 600;
}

.vibe-bundle-deal-item .bundle-discount {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8rem;
}

.vibe-bundle-deal-item.partial .bundle-discount {
    background: rgba(99, 102, 241, 0.15);
    color: #4f46e5;
}

.vibe-bundle-deal-item.applied .bundle-discount {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

/* ====== Spending Milestones ====== */
.vibe-milestones-progress {
    margin: 0 0 1rem 0;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(251, 191, 36, 0.05) 100%);
    border-radius: var(--vibe-radius);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.vibe-milestones-progress .milestones-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.vibe-milestones-progress .milestones-icon {
    font-size: 1.25rem;
}

.vibe-milestones-progress .milestones-title {
    font-weight: 600;
    color: #92400e;
    font-size: 0.9rem;
}

.vibe-milestones-progress .milestones-track {
    height: 8px;
    background: linear-gradient(90deg, #fef3c7, #fde68a);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    margin-bottom: 1.5rem;
}

.vibe-milestones-progress .milestones-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    border-radius: 4px;
    transition: width 0.5s ease-out;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.vibe-milestones-progress .milestones-labels {
    position: relative;
    height: 40px;
    margin-top: -1rem;
}

.vibe-milestones-progress .milestone-label {
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
    transition: all 0.3s ease;
}

.vibe-milestones-progress .milestone-label .label-badge {
    display: block;
    background: #f3f4f6;
    border: 2px solid #d1d5db;
    padding: 0.15rem 0.4rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 2px;
}

.vibe-milestones-progress .milestone-label.reached .label-badge {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    border-color: #f59e0b;
    color: #fff;
}

.vibe-milestones-progress .milestone-label .label-amount {
    font-size: 0.65rem;
    color: #9ca3af;
}

.vibe-milestones-progress .milestones-message {
    text-align: center;
    font-size: 0.85rem;
    color: #92400e;
    margin-top: 0.5rem;
}

/* ====== Bulk Buy Calculator ====== */
.vibe-bulk-calculator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(96, 165, 250, 0.05) 100%);
    border-radius: var(--vibe-radius);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.vibe-bulk-calculator .bulk-icon {
    font-size: 1.25rem;
}

.vibe-bulk-calculator .bulk-message {
    font-size: 0.9rem;
    color: #1e40af;
    font-weight: 500;
}

/* ====== Discount Row in Summary ====== */
.vibe-discount-row {
    color: #16a34a;
}

.vibe-discount-row .vibe-label {
    color: #16a34a;
    font-weight: 500;
}

.vibe-discount-row .vibe-discount-value {
    color: #16a34a;
    font-weight: 600;
}

/* 4. Success Celebration (Confetti) */
.vibe-confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #f00;
    animation: vibe-confetti-fall 3s linear forwards;
    z-index: 1000;
    pointer-events: none;
}

@keyframes vibe-confetti-fall {
    0% {
        transform: translateY(-10vh) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

@media (min-width: 768px) {
    #vibe-checkout-slider {
        max-width: 600px;
        left: 50%;
        transform: translate(-50%, 100%);
        border-radius: 24px;
        bottom: 20px;
        /* Floating effect */
        max-height: 85vh;
    }

    #vibe-checkout-slider.vibe-active {
        transform: translate(-50%, 0);
    }
}


/* Override to hide duplicate close icon */
#vibe-close-btn::before {
    display: none !important;
}


/* Fix Label Overlap with Icon in RTL */
.vibe-form-group label {
    right: 3rem !important;
    /* Move label away from icon (icon is at right: 1rem) */
}

/* Reset label position when floating */
.vibe-form-group.vibe-float label {
    right: 0.75rem !important;
}


/* Fix: Restore arrow for valid selects */
select.vibe-input.vibe-valid {
    background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'none\' viewBox=\'0 0 20 20\'%3e%3cpath stroke=\'%236b7280\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'1.5\' d=\'M6 8l4 4 4-4\'/%3e%3c/svg%3e') !important;
    background-position: left 0.5rem center !important;
    padding-left: 2.5rem !important;
}


/* Fix: Text clipping in dropdowns */
.vibe-input {
    line-height: 1.5 !important;
    height: auto !important;
    min-height: 45px;
}

select.vibe-input {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}


/* Fix: Hide placeholders when not focused to prevent mixing with label */
.vibe-input:not(:focus)::placeholder {
    color: transparent;
}

/* Ensure label has white background when floating to cover border */
.vibe-form-group.vibe-float label {
    background: #fff;
    padding: 0 4px;
}


/* Hide Header Background but keep button */
#vibe-slider-header {
    background: transparent !important;
    border: none !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100001;
    pointer-events: none;
    /* Let clicks pass through header area */
    padding: 1rem !important;
    display: flex !important;
    justify-content: flex-end;
    /* Align close button to right (or left in RTL) */
}

#vibe-close-btn {
    pointer-events: auto;
    /* Re-enable clicks on button */
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.vibe-drag-handle {
    display: none !important;
}

/* Product Mini Detail Styling */
.vibe-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.vibe-mini-product {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    padding: 0.5rem;
    border-radius: var(--vibe-radius);
    border: 1px solid var(--vibe-input-border);
    max-width: 60%;
}

.vibe-mini-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    background-color: #fff;
}

.vibe-mini-info {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.vibe-mini-title {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* Ensure floating label has solid background and z-index */
.vibe-form-group.vibe-float label {
    background-color: #ffffff !important;
    z-index: 20 !important;
    padding: 0 5px !important;
}

/* FINAL OVERRIDE: Remove blur and fix spacing */
#vibe-slider-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
}

#vibe-checkout-form {
    padding-top: 4rem !important;
    /* Push content down below the close button */
}


/* FINAL OVERRIDE: Close Button Position */
#vibe-slider-header {
    display: block !important;
    /* Allow absolute positioning inside */
}

#vibe-close-btn {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    left: auto !important;
    /* Override RTL */
    margin: 0 !important;
}


/* FINAL OVERRIDE: Perfect Border Label Positioning */
.vibe-form-group.vibe-float label {
    top: -0.7rem !important;
    /* Move up to sit on border */
    right: 3.5rem !important;
    /* Increased spacing */
    font-size: 0.75rem !important;
    /* Make it small */
    line-height: 1 !important;
    background: #ffffff !important;
    padding: 0 4px !important;
    z-index: 20 !important;
    color: var(--vibe-primary) !important;
    height: auto !important;
    width: auto !important;
}


/* FINAL OVERRIDE: Persistent Floating Label */
.vibe-form-group.vibe-float-always label {
    top: -0.7rem !important;
    right: 3.5rem !important;
    /* Increased spacing */
    font-size: 0.75rem !important;
    line-height: 1 !important;
    background: #ffffff !important;
    padding: 0 4px !important;
    z-index: 20 !important;
    color: var(--vibe-primary) !important;
    height: auto !important;
    width: auto !important;
    pointer-events: none;
}


/* Inline Variations Styling */
.vibe-variations-inline {
    margin-top: 0.25rem;
}

.vibe-variations-inline .vibe-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.vibe-variations-inline .vibe-radio-item {
    margin-bottom: 0;
}

.vibe-variations-inline .vibe-radio-label {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid var(--vibe-gray-300);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vibe-variations-inline .vibe-radio-input:checked+.vibe-radio-label {
    background: var(--vibe-primary);
    color: #fff;
    border-color: var(--vibe-primary);
}


.vibe-variations-inline .vibe-variation-label {
    display: none;
    /* Hide the label 'Color:' to save space, options are self-explanatory or user can see selected */
}


/* Image Swatches Styling */
.vibe-variations-inline .vibe-radio-label.vibe-has-image {
    padding: 0;
    border: 1px solid var(--vibe-gray-300);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    /* Circular swatches */
    background: #fff;
}

.vibe-variations-inline .vibe-radio-label.vibe-has-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Selected State for Images */
.vibe-variations-inline .vibe-radio-input:checked+.vibe-radio-label.vibe-has-image {
    border-color: var(--vibe-primary);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vibe-primary);
    /* Ring effect */
}

/* Image Variation Specific Styles - Thumbnails */
.vibe-radio-label.vibe-has-image {
    padding: 2px;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    /* Rounded square for images */
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vibe-radio-label.vibe-has-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

/* Selected state for image variations */
.vibe-radio-input:checked+.vibe-radio-label.vibe-has-image {
    background-color: #fff;
    /* Keep background white for images */
    border: 2px solid var(--vibe-primary);
    /* Thicker border to indicate selection */
    padding: 1px;
    /* Adjust padding for border width */
    box-shadow: 0 2px 4px -1px rgba(79, 70, 229, 0.3);
}

/* ========================================= */
/* === NEW UI UPDATES (Horizontal Cards) === */
/* ========================================= */

/* Shipping - Horizontal Cards Style */
.vibe-shipping-methods {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
    margin-top: 0.5rem !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.vibe-shipping-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem;
    background: #fff;
    border: 2px solid var(--vibe-input-border);
    border-radius: var(--vibe-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 0.25rem;
    min-height: auto;
}

.vibe-shipping-card:hover {
    border-color: var(--vibe-primary);
    background: rgba(79, 70, 229, 0.02);
    transform: translateY(-2px);
}

.vibe-shipping-card.selected {
    border-color: var(--vibe-primary);
    background: rgba(79, 70, 229, 0.05);
    box-shadow: 0 4px 12px -2px rgba(79, 70, 229, 0.2);
}

.vibe-shipping-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.vibe-ship-icon {
    color: var(--vibe-primary);
    font-size: 20px;
    background: rgba(79, 70, 229, 0.1);
    padding: 0.35rem;
    border-radius: 8px;
    transition: all 0.2s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vibe-shipping-card.selected .vibe-ship-icon {
    background: var(--vibe-primary);
    color: #fff;
}

.vibe-ship-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.vibe-ship-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--vibe-gray-900);
    line-height: 1.2;
}

.vibe-ship-time {
    display: inline-flex;
    width: fit-content;
    background: rgba(79, 70, 229, 0.1);
    color: var(--vibe-primary);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}

.vibe-ship-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--vibe-primary);
}

/* Order Summary - Simplified */
.vibe-order-summary {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    margin-top: 1rem !important;
}

.vibe-summary-row.total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 1rem !important;
    border: 2px solid var(--vibe-primary);
    border-radius: var(--vibe-radius);
    margin: 0 !important;
    border-top: 2px solid var(--vibe-primary) !important;
    /* Override dashed border */
}

#vibe-summary-total {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--vibe-gray-900);
}

.vibe-cod-badge {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background-color: var(--vibe-success);
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.vibe-cod-badge .material-icons-round {
    font-size: 16px;
}

/* Notes Toggle */
.vibe-toggle-note {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--vibe-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(79, 70, 229, 0.05);
    padding: 0.35rem 0.75rem;
    border-radius: var(--vibe-radius);
    width: 100%;
    justify-content: center;
    border: 1px dashed var(--vibe-primary);
}

.vibe-toggle-note:hover {
    background: rgba(79, 70, 229, 0.1);
}

.vibe-toggle-note .material-icons-round {
    font-size: 18px;
}

/* Product Card */
.vibe-product-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    background: linear-gradient(135deg, #fff 0%, var(--vibe-gray-50) 100%);
    border: 2px solid var(--vibe-gray-200);
    border-radius: var(--vibe-radius);
    margin-bottom: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.vibe-product-image {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--vibe-gray-200);
    background: var(--vibe-gray-50);
}

.vibe-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vibe-product-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: start;
    align-items: flex-start;
}

.vibe-product-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--vibe-gray-900);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vibe-product-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--vibe-gray-700);
}

.vibe-quantity-selector {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--vibe-input-border);
    border-radius: 6px;
    overflow: hidden;
    height: 32px;
}

.vibe-quantity-selector .vibe-qty-btn {
    width: 20px;
    height: 100%;
    font-size: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vibe-gray-600);
}

.vibe-quantity-selector .vibe-qty-btn:hover {
    background: var(--vibe-gray-50);
    color: var(--vibe-primary);
}

.vibe-quantity-selector .vibe-qty-input {
    width: 24px;
    height: 100%;
    border: none;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0;
    background: transparent;
}

/* Side-by-Side Buttons */
.vibe-submit-wrapper {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}

.vibe-submit-wrapper .vibe-btn {
    flex: 1;
    width: auto;
    /* Override full width */
    margin-top: 0 !important;
    /* Remove top margin if any */
}


/* Product Card Refinements */
.vibe-product-card {
    flex-direction: row-reverse;
    /* Force Image Left, Quantity Right in RTL */
}

/* Loading State for Shipping */
.vibe-shipping-methods.vibe-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.1s;
}

/* Variation Cards */
.vibe-variation-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.vibe-variation-card {
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 0;
    /* Override product card margin */
    border: 2px solid var(--vibe-gray-200);
}

.vibe-variation-card:hover {
    border-color: var(--vibe-primary);
    background: #fff;
}

.vibe-variation-card.selected {
    border-color: var(--vibe-primary);
    background: rgba(79, 70, 229, 0.05);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.vibe-variation-card .vibe-product-title {
    font-size: 0.9rem;
    /* Slightly smaller for variations */
}


/* Hide Spinners */
.vibe-quantity-selector .vibe-qty-input::-webkit-outer-spin-button,
.vibe-quantity-selector .vibe-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.vibe-quantity-selector .vibe-qty-input {
    -moz-appearance: textfield;
}

/* ========================================== */
/* --- MINI-CART STYLES -------------------- */
/* ========================================== */

/* Floating Cart Button */
.vibe-floating-cart-btn {
    pointer-events: auto;
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--vibe-slider-bg);
    border: 2px solid var(--vibe-primary);
    color: var(--vibe-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.vibe-floating-cart-btn:hover {
    transform: scale(1.1);
    background: var(--vibe-primary);
    color: #fff;
}

.vibe-floating-cart-btn .material-icons-round {
    font-size: 24px;
}

/* Cart Badge */
.vibe-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    background: var(--vibe-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

/* Mini-Cart Section */
.vibe-mini-cart {
    background: var(--vibe-gray-50);
    border: 1px solid var(--vibe-input-border);
    border-radius: var(--vibe-radius);
    margin-bottom: 1rem;
    overflow: hidden;
}

.vibe-mini-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: #fff;
    cursor: pointer;
    transition: background 0.2s;
}

.vibe-mini-cart-header:hover {
    background: var(--vibe-gray-100);
}

.vibe-mini-cart-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--vibe-form-text-color);
}

.vibe-mini-cart-title .material-icons-round {
    color: var(--vibe-primary);
    font-size: 20px;
}

.vibe-mini-cart-toggle {
    color: var(--vibe-gray-400);
    font-size: 20px;
    transition: transform 0.3s;
}

.vibe-mini-cart.collapsed .vibe-mini-cart-toggle {
    transform: rotate(-90deg);
}

.vibe-mini-cart-items {
    max-height: 300px;
    overflow-y: auto;
    transition: max-height 0.3s ease;
}

.vibe-mini-cart.collapsed .vibe-mini-cart-items {
    max-height: 0;
    overflow: hidden;
}

/* Cart Item */
.vibe-cart-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--vibe-input-border);
    background: #fff;
    transition: background 0.2s;
}

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

.vibe-cart-item.deselected {
    opacity: 0.5;
    background: var(--vibe-gray-100);
}

.vibe-cart-item-row1 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.vibe-cart-item-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--vibe-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.vibe-cart-item-thumb {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--vibe-input-border);
    flex-shrink: 0;
}

.vibe-cart-item-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--vibe-form-text-color);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vibe-cart-item-remove {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--vibe-gray-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    flex-shrink: 0;
}

.vibe-cart-item-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--vibe-danger);
}

.vibe-cart-item-remove .material-icons-round {
    font-size: 18px;
}

.vibe-cart-item-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 2.5rem;
}

.vibe-cart-item-price {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--vibe-primary);
}

.vibe-cart-item-qty {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--vibe-gray-100);
    border-radius: 8px;
    overflow: hidden;
}

.vibe-cart-item-qty button {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--vibe-form-text-color);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.vibe-cart-item-qty button:hover {
    background: var(--vibe-gray-200);
}

.vibe-cart-item-qty input {
    width: 36px;
    height: 32px;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--vibe-form-text-color);
}

.vibe-cart-item-qty input:focus {
    outline: none;
}

.vibe-mini-cart-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--vibe-gray-400);
}

.vibe-mini-cart-empty .material-icons-round {
    font-size: 48px;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.vibe-cart-item.removing {
    animation: vibe-slide-out 0.3s ease forwards;
}

@keyframes vibe-slide-out {
    to {
        opacity: 0;
        transform: translateX(100%);
        height: 0;
        padding: 0;
        margin: 0;
    }
}

.vibe-floating-container {
    gap: 12px;
    align-items: center;
}

@media (max-width: 640px) {
    .vibe-floating-cart-btn {
        width: 48px;
        height: 48px;
    }

    .vibe-cart-item-thumb {
        width: 40px;
        height: 40px;
    }

    .vibe-cart-item-name {
        font-size: 0.85rem;
    }
}

/* Collapsed View Summary */
.vibe-mini-cart-summary {
    display: none;
    padding: 0 1rem 0.75rem;
    gap: 6px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    /* Firefox */
}

.vibe-mini-cart-summary::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.vibe-mini-cart.collapsed .vibe-mini-cart-summary {
    display: flex;
}

.vibe-summary-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--vibe-input-border);
    transition: all 0.2s;
    flex-shrink: 0;
}

.vibe-summary-thumb.checked {
    opacity: 1;
    border-color: var(--vibe-primary);
    box-shadow: 0 0 0 1px var(--vibe-primary);
}

.vibe-summary-thumb.unchecked {
    opacity: 0.4;
    filter: grayscale(100%);
}

/* New Header Styles */
.vibe-mini-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    gap: 1rem;
}

.vibe-mini-cart-icon-container {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--vibe-primary);
}

.vibe-mini-cart-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: bold;
    height: 16px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px white;
}

/* Adjust Summary in Header */
.vibe-mini-cart-summary {
    flex: 1;
    padding: 0;
    margin: 0;
    align-items: center;
}

/* Adjust thumbnails size for header */
.vibe-summary-thumb {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
}


.vibe-item-updated {
    background-color: #f0f9ff;
    transition: background-color 0.5s ease;
}

/* Mini-Cart Item Layout - AliExpress Style */
.vibe-cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

/* Custom Checkbox (Circle) */
.vibe-ci-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.vibe-ci-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.vibe-ci-checkmark {
    width: 22px;
    height: 22px;
    border: 2px solid #ddd;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.vibe-ci-checkbox input:checked+.vibe-ci-checkmark {
    background: #ff4747;
    border-color: #ff4747;
}

.vibe-ci-checkbox input:checked+.vibe-ci-checkmark::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

/* Product Thumbnail */
.vibe-cart-item-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Details Column (Title + Price) */
.vibe-ci-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    /* Allow text truncation */
}

/* Title */
.vibe-cart-item-name {
    font-size: 14px;
    font-weight: 400;
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Price */
.vibe-cart-item-price {
    font-size: 16px;
    font-weight: 700;
    color: #ff6600;
}

/* Quantity Control (Inline) */
.vibe-cart-item-qty {
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.vibe-cart-item-qty button {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.vibe-cart-item-qty button:hover {
    background: #e8e8e8;
    color: #333;
}

.vibe-cart-item-qty input {
    width: 40px;
    height: 32px;
    border: none;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    background: #fff;
    -moz-appearance: textfield;
}

.vibe-cart-item-qty input:focus {
    outline: none;
}

.vibe-cart-item-qty input::-webkit-outer-spin-button,
.vibe-cart-item-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* RTL Support for Mini-Cart */
[dir="rtl"] .vibe-cart-item,
.vibe-cart-item:lang(ar) {
    flex-direction: row-reverse;
}

[dir="rtl"] .vibe-ci-details,
.vibe-ci-details:lang(ar) {
    text-align: right;
}

[dir="rtl"] .vibe-cart-item-name,
.vibe-cart-item-name:lang(ar) {
    text-align: right;
}

[dir="rtl"] .vibe-cart-item-price,
.vibe-cart-item-price:lang(ar) {
    text-align: right;
}

/* Force LTR layout for Mini-Cart (Override RTL) */
.vibe-cart-item {
    direction: ltr !important;
}

.vibe-ci-details {
    direction: rtl;
    /* Keep text RTL for Arabic */
    text-align: right;
}

.vibe-cart-item-name,
.vibe-cart-item-price {
    direction: rtl;
    text-align: right;
}

/* Refined Quantity Selector (Capsule) & Price */
.vibe-cart-item-price {
    color: #000 !important;
    font-weight: 700 !important;
}

.vibe-cart-item-qty {
    border-radius: 20px !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    height: 32px !important;
}

.vibe-cart-item-qty button {
    background: transparent !important;
    border: none !important;
}

.vibe-cart-item-qty input {
    background: transparent !important;
    border: none !important;
    width: 36px !important;
}

/* Refined Layout - Smaller Sizes & Actions Column */
.vibe-cart-item {
    padding: 8px 0 !important;
    gap: 10px !important;
}

.vibe-cart-item-thumb {
    width: 50px !important;
    height: 50px !important;
}

.vibe-cart-item-name {
    font-size: 13px !important;
}

.vibe-cart-item-price {
    font-size: 14px !important;
}

/* Actions Column (Qty + Remove) */
.vibe-ci-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-left: auto;
    /* Push to right */
}

/* Remove Button (Trash Icon) */
.vibe-cart-item-remove-text {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vibe-cart-item-remove-text:hover {
    color: #ff4d4f;
}

.vibe-cart-item-remove-text .material-icons-round {
    font-size: 18px;
}

/* RTL Support for Actions */
[dir="rtl"] .vibe-ci-actions,
.vibe-ci-actions:lang(ar) {
    margin-left: 0;
    margin-right: auto;
    align-items: flex-start;
    /* Align left in RTL */
}

/* Final Polish - User Requests (Step 663) */

/* 1. Remove Trash Background */
.vibe-cart-item-remove-text {
    background: transparent !important;
    color: #999 !important;
}

.vibe-cart-item-remove-text:hover {
    color: #ff4d4f !important;
    background: transparent !important;
}

/* 2. Much Smaller Quantity Selector */
.vibe-cart-item-qty {
    height: 24px !important;
    border-radius: 12px !important;
}

.vibe-cart-item-qty button {
    width: 24px !important;
    height: 24px !important;
    font-size: 14px !important;
}

.vibe-cart-item-qty input {
    width: 28px !important;
    height: 24px !important;
    font-size: 12px !important;
}

/* 3. Product Name - Show Start (Fix LTR truncation in RTL) */
.vibe-cart-item-name {
    direction: ltr !important;
    /* Treat text as LTR to show start */
    text-align: right !important;
    /* Keep visual alignment */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* 4. Price from Left */
.vibe-cart-item-price {
    display: block !important;
    text-align: left !important;
    width: 100%;
}

/* Final Adjustments (Step 676) */

/* Shift Quantity Down */
.vibe-cart-item-qty {
    margin-top: 12px !important;
}

/* Transparent Trash Icon Button */
.vibe-cart-item-remove-text {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px !important;
    margin-top: 4px !important;
    cursor: pointer !important;
    color: #999 !important;
}

.vibe-cart-item-remove-text:hover {
    color: #ff4d4f !important;
    background: transparent !important;
}

/* Ultra Compact Layout (Step 727) */
.vibe-cart-item {
    padding: 4px 0 !important;
}

.vibe-cart-item-thumb {
    width: 42px !important;
    height: 42px !important;
}

/* Fix Quantity Button Alignment */
.vibe-cart-item-qty button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-bottom: 2px !important;
    /* Slight offset for text alignment */
}


/* Revert Image Size (Step 744) */
.vibe-cart-item-thumb {
    width: 50px !important;
    height: 50px !important;
}

/* Remove Padding & Center Checkbox (Step 757) */
.vibe-cart-item {
    padding: 0 !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    align-items: center !important;
}

/* Center Checkbox */
.vibe-ci-checkbox {
    margin-top: 0 !important;
    align-self: center !important;
}

/* Tighten Actions Column */
.vibe-ci-actions {
    gap: 0 !important;
    margin-bottom: 0 !important;
}

.vibe-cart-item-remove-text {
    margin-top: 0 !important;
}

/* Center Checkbox Horizontally (Step 774) */
.vibe-ci-checkbox {
    margin-left: 8px !important;
    margin-right: 8px !important;
}

/* Center Checkbox Horizontally (Step 774 - Retry) */
.vibe-ci-checkbox {
    margin: 0 8px !important;
    align-self: center !important;
}

/* Undo Toast */
#vibe-undo-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #333;
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 14px;
}

#vibe-undo-toast.show {
    transform: translateX(-50%) translateY(0);
}

#vibe-undo-btn {
    background: transparent;
    border: none;
    color: #4f46e5;
    /* Primary color */
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    text-transform: uppercase;
}

#vibe-undo-btn:hover {
    text-decoration: underline;
}


/* Total Update Animation */
.vibe-highlight {
    color: var(--vibe-primary) !important;
    transform: scale(1.1);
    transition: all 0.2s ease;
    display: inline-block;
}


/* Mini Cart Summary (Collapsed) */
.vibe-mini-cart-summary {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
    height: 32px;
    margin-right: auto;
    /* Push to left if needed, but flex gap handles it */
}

.vibe-summary-thumb {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid var(--vibe-gray-200);
}

.vibe-summary-thumb.checked {
    opacity: 1;
}

.vibe-summary-thumb.unchecked {
    opacity: 0.5;
    filter: grayscale(100%);
}

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

/* Header Button */
.vibe-header-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    color: var(--vibe-gray-400);
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vibe-header-btn:hover {
    background: var(--vibe-gray-100);
    color: var(--vibe-primary);
}

#vibe-wishlist-btn .material-icons-round {
    font-size: 22px;
    color: #EF4444;
}

.vibe-header-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--vibe-primary);
    color: white;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.vibe-header-badge.hidden {
    display: none;
}

/* Wishlist Panel */
#vibe-wishlist-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--vibe-slider-bg);
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

#vibe-wishlist-panel.hidden {
    display: none;
}

.vibe-wishlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--vibe-gray-200);
}

.vibe-wishlist-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--vibe-gray-900);
}

.vibe-wishlist-header h3 .material-icons-round {
    color: #EF4444;
    font-size: 20px;
}

.vibe-wishlist-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    color: var(--vibe-gray-400);
    transition: all 0.2s ease;
}

.vibe-wishlist-close:hover {
    background: var(--vibe-gray-100);
    color: var(--vibe-gray-900);
}

/* Wishlist Items */
#vibe-wishlist-items {
    flex: 1;
    overflow-y: auto;
}

.vibe-wishlist-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--vibe-gray-50);
    border-radius: var(--vibe-radius);
    margin-bottom: 0.5rem;
}

.vibe-wishlist-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--vibe-gray-200);
}

.vibe-wishlist-info {
    flex: 1;
    min-width: 0;
}

.vibe-wishlist-name {
    display: block;
    font-weight: 500;
    color: var(--vibe-gray-900);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vibe-wishlist-price {
    display: block;
    font-size: 0.85rem;
    color: var(--vibe-primary);
    font-weight: 600;
}

.vibe-wishlist-actions {
    display: flex;
    gap: 0.25rem;
}

.vibe-wishlist-actions button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vibe-wishlist-add-to-cart {
    color: var(--vibe-success);
}

.vibe-wishlist-add-to-cart:hover {
    background: rgba(16, 185, 129, 0.1);
}

.vibe-wishlist-remove {
    color: var(--vibe-danger);
}

.vibe-wishlist-remove:hover {
    background: rgba(239, 68, 68, 0.1);
}

.vibe-wishlist-actions .material-icons-round {
    font-size: 20px;
}

/* Empty State */
#vibe-wishlist-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--vibe-gray-400);
}

#vibe-wishlist-empty.hidden {
    display: none;
}

#vibe-wishlist-empty .material-icons-round {
    font-size: 48px;
    margin-bottom: 1rem;
    color: var(--vibe-gray-300);
}

#vibe-wishlist-empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* Loading State */
.vibe-wishlist-loading {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.vibe-wishlist-error {
    text-align: center;
    color: var(--vibe-danger);
    padding: 1rem;
}

/* Enhanced Cart Button Styles */
.vibe-floating-container {
    position: fixed;
    z-index: 99998;
    pointer-events: none;
    display: flex;
    padding: 20px;
}

/* Desktop Positioning */
.vibe-floating-container.pos-d-bottom-left {
    bottom: 0;
    left: 0;
    right: auto;
    justify-content: flex-start;
}

.vibe-floating-container.pos-d-bottom-right {
    bottom: 0;
    right: 0;
    left: auto;
    justify-content: flex-end;
}

.vibe-floating-container.pos-d-bottom-center {
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: center;
}

.vibe-floating-cart-btn {
    width: var(--vibe-cart-btn-size, 60px);
    height: var(--vibe-cart-btn-size, 60px);
    border-radius: var(--vibe-cart-btn-radius, 50%);
    background: var(--vibe-cart-btn-bg, var(--vibe-primary));
    color: var(--vibe-cart-btn-icon-color, #fff);
    border: none;
    box-shadow: var(--vibe-cart-btn-shadow, 0 4px 12px rgba(79, 70, 229, 0.4));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1000;
    pointer-events: auto;
    backdrop-filter: blur(4px);
}

.vibe-floating-cart-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.vibe-floating-cart-btn .material-icons-round {
    font-size: var(--vibe-cart-btn-icon-size, 28px);
}

.vibe-cart-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--vibe-cart-badge-bg, #EF4444);
    color: var(--vibe-cart-badge-text, #fff);
    font-size: 11px;
    font-weight: 800;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Mobile Optimizations */
@media (max-width: 640px) {
    .vibe-floating-container.pos-m-bottom-left {
        bottom: 60px;
        left: 0;
        right: auto;
        justify-content: flex-start;
    }

    .vibe-floating-container.pos-m-bottom-right {
        bottom: 60px;
        right: 0;
        left: auto;
        justify-content: flex-end;
    }

    .vibe-floating-container.pos-m-bottom-center {
        bottom: 60px;
        left: 0;
        right: 0;
        justify-content: center;
    }
}

/* Animations */
.vibe-btn-anim-gradient {
    background: linear-gradient(270deg, var(--vibe-primary), #6366f1, #8b5cf6, var(--vibe-primary)) !important;
    background-size: 300% 300%;
    animation: vibe-gradient 4s ease infinite;
}

@keyframes vibe-bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.vibe-anim-bounce {
    animation: vibe-bounce 2s infinite;
}

@keyframes vibe-float-btn {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0);
    }
}

.vibe-anim-float {
    animation: vibe-float-btn 3s ease-in-out infinite;
}

@keyframes vibe-shake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(10deg);
    }
}

.vibe-anim-shake {
    animation: vibe-shake 2s ease-in-out infinite;
}

@keyframes vibe-pulse-btn {
    0% {
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
    }
}

.vibe-anim-pulse {
    animation: vibe-pulse-btn 2s infinite;
}

/* -------------------------------------- */
/* --- SHIPPING CARD BADGES ------------- */
/* -------------------------------------- */

.vibe-shipping-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem;
    padding-top: 1rem;
    background: #fff;
    border: 2px solid var(--vibe-input-border);
    border-radius: var(--vibe-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.vibe-shipping-card:hover {
    border-color: var(--vibe-primary);
    background: rgba(79, 70, 229, 0.02);
}

.vibe-shipping-card.selected {
    border-color: var(--vibe-primary);
    background: rgba(79, 70, 229, 0.05);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.vibe-shipping-card input[type="radio"] {
    display: none;
}

.vibe-ship-icon {
    font-size: 28px;
    color: var(--vibe-primary);
}

.vibe-ship-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.25rem;
}

.vibe-ship-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--vibe-gray-900);
}

.vibe-ship-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--vibe-primary);
}

/* Estimation Time Badge - Left Upper Corner */
.vibe-ship-time-badge {
    position: absolute;
    top: -10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: #fff;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
    white-space: nowrap;
    z-index: 1;
    line-height: 1.1;
}

.vibe-ship-time-badge .vibe-badge-time {
    font-size: 1em;
    font-weight: 800;
}

.vibe-ship-time-badge .vibe-badge-unit {
    font-size: 0.8em;
    font-weight: 600;
    opacity: 0.9;
}

/* Free Badge - Right Upper Corner */
.vibe-ship-free-badge {
    position: absolute;
    top: -8px;
    right: 10px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
    white-space: nowrap;
    z-index: 1;
}

/* Free shipping card styling */
.vibe-shipping-card.vibe-shipping-free {
    border-color: var(--vibe-success);
    background: rgba(16, 185, 129, 0.05);
}

.vibe-shipping-card.vibe-shipping-free:hover {
    border-color: var(--vibe-success);
    background: rgba(16, 185, 129, 0.08);
}

.vibe-shipping-card.vibe-shipping-free.selected {
    border-color: var(--vibe-success);
    background: rgba(16, 185, 129, 0.1);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.vibe-shipping-card.vibe-shipping-free .vibe-ship-icon {
    color: var(--vibe-success);
}

/* -------------------------------------- */
/* --- ORDER SUCCESS POPUP STYLES ------- */
/* -------------------------------------- */

.vibe-success-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
    min-height: 60vh;
    direction: rtl;
}

/* Animated Checkmark */
.vibe-success-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 1.5rem;
}

.vibe-checkmark {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: var(--vibe-success);
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px var(--vibe-success);
    animation: vibe-checkmark-fill 0.4s ease-in-out 0.4s forwards, vibe-checkmark-scale 0.3s ease-in-out 0.9s both;
}

.vibe-checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--vibe-success);
    fill: none;
    animation: vibe-checkmark-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.vibe-checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 3;
    stroke: var(--vibe-success);
    animation: vibe-checkmark-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes vibe-checkmark-stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes vibe-checkmark-scale {

    0%,
    100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes vibe-checkmark-fill {
    100% {
        box-shadow: inset 0px 0px 0px 50px rgba(16, 185, 129, 0.08);
    }
}

/* Success Text */
.vibe-success-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--vibe-gray-900);
    margin: 0 0 0.5rem 0;
    animation: vibe-fade-in-up 0.5s ease-out 0.5s both;
}

.vibe-success-subtitle {
    font-size: 1rem;
    color: var(--vibe-gray-400);
    margin: 0 0 2rem 0;
    animation: vibe-fade-in-up 0.5s ease-out 0.6s both;
}

@keyframes vibe-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Order Details */
.vibe-success-details {
    background: var(--vibe-gray-50);
    border: 1px solid var(--vibe-input-border);
    border-radius: var(--vibe-radius);
    padding: 1.25rem 1.5rem;
    width: 100%;
    max-width: 320px;
    margin-bottom: 2rem;
    animation: vibe-fade-in-up 0.5s ease-out 0.7s both;
}

.vibe-success-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.vibe-success-row:first-child {
    padding-top: 0;
}

.vibe-success-row:last-child {
    padding-bottom: 0;
}

.vibe-success-row:not(:last-child) {
    border-bottom: 1px dashed var(--vibe-gray-200);
}

.vibe-success-label {
    font-size: 0.9rem;
    color: var(--vibe-gray-400);
}

.vibe-success-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--vibe-gray-900);
}

.vibe-success-total {
    color: var(--vibe-primary);
    font-size: 1.1rem;
}

/* Action Buttons */
.vibe-success-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 320px;
    animation: vibe-fade-in-up 0.5s ease-out 0.8s both;
}

.vibe-success-btn-primary,
.vibe-success-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--vibe-radius);
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.vibe-success-btn-primary {
    background: linear-gradient(135deg, var(--vibe-primary) 0%, var(--vibe-primary-dark) 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
}

.vibe-success-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
    color: #fff;
}

.vibe-success-btn-primary .material-icons-round {
    font-size: 20px;
}

.vibe-success-btn-secondary {
    background: transparent;
    color: var(--vibe-gray-400);
    border: 2px solid var(--vibe-gray-200);
}

.vibe-success-btn-secondary:hover {
    background: var(--vibe-gray-50);
    border-color: var(--vibe-gray-300);
    color: var(--vibe-gray-900);
}

.vibe-success-btn-secondary .material-icons-round {
    font-size: 20px;
}

/* Mobile Adjustments */
@media (max-width: 640px) {
    .vibe-success-popup {
        padding: 1.5rem 1rem;
        min-height: 50vh;
    }

    .vibe-success-icon {
        width: 80px;
        height: 80px;
    }

    .vibe-success-title {
        font-size: 1.5rem;
    }

    .vibe-success-subtitle {
        font-size: 0.9rem;
    }

    .vibe-success-details,
    .vibe-success-actions {
        max-width: 100%;
    }
}

/* --- SUCCESS POPUP ENHANCEMENTS --- */

/* Contact Message */
.vibe-success-contact-msg {
    font-size: 0.95rem;
    color: var(--vibe-gray-400);
    margin: 1.5rem 0 0 0;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.05) 0%, rgba(79, 70, 229, 0.02) 100%);
    border-radius: var(--vibe-radius);
    border-right: 3px solid var(--vibe-primary);
    text-align: right;
    animation: vibe-fade-in-up 0.5s ease-out 0.9s both;
}

/* Auto Signup Account Box */
.vibe-success-account {
    margin-top: 1rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
    border-color: rgba(16, 185, 129, 0.3);
    animation: vibe-fade-in-up 0.5s ease-out 0.75s both;
}

.vibe-success-account-header {
    gap: 0.5rem;
    justify-content: flex-start;
}

.vibe-success-account-header .material-icons-round {
    font-size: 1.25rem;
}

.vibe-success-account-header .vibe-success-value {
    font-weight: 700;
    color: var(--vibe-success);
}

/* -------------------------------------- */
/* --- USER INFO CARD COLLAPSE STYLES --- */
/* -------------------------------------- */

/* User Info Section Container */
.vibe-user-info-section {
    margin-bottom: 0.75rem;
}

/* Collapsible User Info Fields */
.vibe-user-info-fields {
    transition: all 0.3s ease;
}

.vibe-user-info-fields.collapsed {
    display: none;
}

/* User Info Card (Summary when collapsed) */
.vibe-user-info-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
    border: 2px solid var(--vibe-success);
    border-radius: var(--vibe-radius);
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vibe-user-info-card:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    transform: translateY(-1px);
}

.vibe-user-info-card-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.vibe-card-icon {
    color: var(--vibe-success);
    font-size: 1.5rem;
}

.vibe-user-info-summary {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.vibe-card-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--vibe-gray-900);
}

.vibe-card-location {
    font-size: 0.8rem;
    color: var(--vibe-gray-400);
}

.vibe-edit-user-info {
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--vibe-gray-400);
    transition: all 0.2s ease;
    border-radius: 50%;
}

.vibe-edit-user-info:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--vibe-primary);
}

.vibe-edit-user-info .material-icons-round {
    font-size: 1.25rem;
}

/* -------------------------------------- */
/* --- GREEN VALIDATION BORDER STATES --- */
/* -------------------------------------- */

/* Valid Field - Green Border */
.vibe-input.vibe-valid,
.vibe-input.vibe-validate-field.vibe-valid {
    border-color: var(--vibe-success) !important;
    background-color: rgba(16, 185, 129, 0.03);
}

.vibe-input.vibe-valid:focus,
.vibe-input.vibe-validate-field.vibe-valid:focus {
    border-color: var(--vibe-success) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

/* Input Icon turns green when valid */
.vibe-form-group:has(.vibe-input.vibe-valid) .vibe-input-icon {
    color: var(--vibe-success);
}

/* Fallback for browsers without :has() - use sibling selector */
.vibe-input.vibe-valid~.vibe-input-icon,
.vibe-input.vibe-valid+.vibe-input-icon {
    color: var(--vibe-success);
}

/* -------------------------------------- */
/* --- MULTI-PROVIDER SHIPPING STYLES --- */
/* -------------------------------------- */

/* Recommended provider badge */
.vibe-recommended-badge {
    position: absolute;
    top: -8px;
    left: 10px;
    font-size: 1rem;
    z-index: 1;
    animation: vibe-star-pulse 2s ease-in-out infinite;
}

@keyframes vibe-star-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

.vibe-shipping-card.vibe-recommended {
    border-color: #F59E0B;
    background: rgba(245, 158, 11, 0.05);
}

.vibe-shipping-card.vibe-recommended.selected {
    border-color: #F59E0B;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

/* Provider subtitle in shipping card */
.vibe-ship-provider {
    font-size: 0.75rem;
    color: var(--vibe-gray-400);
    margin-top: 0.15rem;
    display: block;
}

/* ====================================== */
/* GROUPED SHIPPING CARDS WITH DROPDOWN   */
/* ====================================== */

/* Grouped shipping card styling */
.vibe-shipping-card.vibe-shipping-grouped {
    padding: 0.75rem;
    min-height: 120px;
}

/* Best price badge (star) */
.vibe-best-price-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 16px;
    z-index: 2;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Provider dropdown wrapper */
.vibe-provider-dropdown-wrapper {
    width: 100%;
    margin-top: 0.5rem;
}

/* Provider dropdown select */
.vibe-provider-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--vibe-gray-900);
    background: var(--vibe-gray-50);
    border: 1px solid var(--vibe-gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: left 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-left: 2rem;
    text-align: right;
    direction: rtl;
}

.vibe-provider-select:hover {
    border-color: var(--vibe-primary);
    background-color: #fff;
}

.vibe-provider-select:focus {
    outline: none;
    border-color: var(--vibe-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Selected card - enhance dropdown styling */
.vibe-shipping-card.selected .vibe-provider-select {
    border-color: var(--vibe-primary);
    background-color: #fff;
}

/* Displayed price in grouped card */
.vibe-ship-displayed-price {
    font-size: 1rem !important;
    font-weight: 700 !important;
}

/* Grouped card info section adjustments */
.vibe-shipping-grouped .vibe-ship-info {
    width: 100%;
}

/* Mobile adjustments for grouped cards */
@media (max-width: 640px) {
    .vibe-shipping-card.vibe-shipping-grouped {
        padding: 0.6rem;
        min-height: 100px;
    }

    .vibe-provider-select {
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
        padding-left: 1.75rem;
    }

    .vibe-ship-displayed-price {
        font-size: 0.9rem !important;
    }
}

/* ====================================== */
/* PROVIDER POPUP MODAL STYLES            */
/* ====================================== */

/* "More shipping options" link container - outside cards */
.vibe-more-options-container {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.75rem;
    padding-right: 0.25rem;
}

/* "More shipping options" link - simple clickable label */
.vibe-more-options-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--vibe-primary, #4F46E5);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0.25rem 0;
}

.vibe-more-options-link:hover {
    color: var(--vibe-primary-dark, #4338CA);
}

.vibe-more-options-link .material-icons-round {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.vibe-more-options-link:hover .material-icons-round {
    transform: translateY(2px);
}

/* Row container for shipping options link + coupon toggle */
.vibe-shipping-coupon-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0 0.25rem;
    direction: ltr;
    /* Force LTR for both RTL and LTR pages */
}

/* Coupon toggle in the row - styled to match */
.vibe-shipping-coupon-row .vibe-coupon-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--vibe-gray-600, #4B5563);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0.25rem 0;
}

.vibe-shipping-coupon-row .vibe-coupon-toggle:hover {
    color: var(--vibe-primary, #4F46E5);
}

.vibe-shipping-coupon-row .vibe-coupon-toggle svg {
    width: 18px;
    height: 18px;
}

/* Popup overlay */
.vibe-provider-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.vibe-provider-popup-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Popup container */
.vibe-provider-popup {
    background: #fff;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
    direction: rtl;
}

.vibe-provider-popup-overlay.visible .vibe-provider-popup {
    transform: translateY(0);
}

/* Popup header */
.vibe-provider-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--vibe-gray-200, #E5E7EB);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(99, 102, 241, 0.02) 100%);
}

.vibe-provider-popup-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vibe-gray-900, #111827);
}

.vibe-provider-popup-close {
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--vibe-gray-400, #9CA3AF);
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vibe-provider-popup-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--vibe-gray-900, #111827);
}

.vibe-provider-popup-close .material-icons-round {
    font-size: 22px;
}

/* Popup body */
.vibe-provider-popup-body {
    padding: 1rem 1.25rem 1.5rem;
    overflow-y: auto;
    max-height: calc(80vh - 60px);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Provider card in popup */
.vibe-provider-card {
    background: var(--vibe-gray-50, #F9FAFB);
    border: 2px solid var(--vibe-gray-200, #E5E7EB);
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vibe-provider-card:hover {
    border-color: var(--vibe-primary, #4F46E5);
    background: #fff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
}

.vibe-provider-card.selected {
    border-color: var(--vibe-success, #10B981);
    background: rgba(16, 185, 129, 0.05);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Provider card header */
.vibe-provider-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.vibe-provider-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--vibe-gray-900, #111827);
}

.vibe-provider-check {
    color: var(--vibe-success, #10B981);
    font-size: 22px;
}

/* Provider card prices */
.vibe-provider-card-prices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vibe-provider-price-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.vibe-provider-price-row .material-icons-round {
    font-size: 18px;
    color: var(--vibe-primary, #4F46E5);
}

.vibe-price-label {
    color: var(--vibe-gray-500, #6B7280);
    flex: 1;
}

.vibe-price-value {
    font-weight: 700;
    color: var(--vibe-primary, #4F46E5);
}

/* Current provider display */
.vibe-current-provider {
    font-size: 0.8rem;
    color: var(--vibe-gray-500, #6B7280);
    margin-top: 0.25rem;
}

/* Desktop popup adjustments */
@media (min-width: 641px) {
    .vibe-provider-popup-overlay {
        align-items: center;
    }

    .vibe-provider-popup {
        border-radius: 16px;
        max-height: 70vh;
        transform: translateY(20px) scale(0.95);
        opacity: 0;
    }

    .vibe-provider-popup-overlay.visible .vibe-provider-popup {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Mobile adjustments for more options button */
@media (max-width: 640px) {
    .vibe-more-options-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }

    .vibe-more-options-btn .material-icons-round {
        font-size: 16px;
    }
}

/* Hide original coupon toggle (we cloned it to the row) */
.vibe-coupon-section .vibe-coupon-toggle {
    display: none;
}

/* Force LTR direction for links in the row */
.vibe-shipping-coupon-row .vibe-coupon-toggle,
.vibe-shipping-coupon-row .vibe-more-options-link {
    direction: ltr;
}

/* -------------------------------------- */
/* --- APPLIED PROMOTIONS BADGES -------- */
/* -------------------------------------- */

.vibe-applied-promotions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.03) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--vibe-radius);
}

.vibe-promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    animation: vibe-promo-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vibe-promo-badge.first-order {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.vibe-promo-badge.bundle {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.vibe-promo-badge .promo-icon {
    font-size: 14px;
}

.vibe-promo-badge .promo-amount {
    font-weight: 700;
}

@keyframes vibe-promo-pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* -------------------------------------- */
/* --- QUANTITY DISCOUNT TIER INDICATOR-- */
/* -------------------------------------- */

.vibe-qty-tier-indicator {
    margin-bottom: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(168, 85, 247, 0.04) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--vibe-radius);
    animation: vibe-tier-fade-in 0.4s ease-out;
}

@keyframes vibe-tier-fade-in {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.vibe-tier-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.vibe-tier-icon {
    font-size: 1.2rem;
}

.vibe-tier-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #7C3AED;
}

.vibe-tier-progress {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 0.75rem;
    position: relative;
    padding: 0.5rem 0;
}

.vibe-tier-track {
    flex: 1;
    height: 6px;
    background: rgba(139, 92, 246, 0.15);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.vibe-tier-fill {
    height: 100%;
    background: linear-gradient(90deg, #8B5CF6 0%, #A855F7 100%);
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vibe-tier-dots {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
}

.vibe-tier-dot {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid rgba(139, 92, 246, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(139, 92, 246, 0.5);
    transition: all 0.3s ease;
    z-index: 1;
}

.vibe-tier-dot.reached {
    background: linear-gradient(135deg, #8B5CF6 0%, #A855F7 100%);
    border-color: #8B5CF6;
    color: #fff;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

.vibe-tier-dot.current {
    transform: scale(1.2);
    animation: vibe-tier-pulse 1.5s ease-in-out infinite;
}

@keyframes vibe-tier-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(139, 92, 246, 0);
    }
}

.vibe-tier-dot-label {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: #666;
    white-space: nowrap;
}

.vibe-tier-dot.reached .vibe-tier-dot-label {
    color: #7C3AED;
    font-weight: 600;
}

.vibe-tier-message {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
    padding-top: 0.25rem;
}

.vibe-tier-message .highlight {
    font-weight: 600;
    color: #7C3AED;
}

.vibe-tier-message .savings {
    font-weight: 700;
    color: #10B981;
}

.vibe-tier-current-savings {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-radius: 4px;
    color: #059669;
    font-weight: 600;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

/* RTL Support */
[dir="rtl"] .vibe-tier-dot-label {
    direction: rtl;
}

/* -------------------------------------- */
/* --- FIRST ORDER DISCOUNT BANNER ------- */
/* -------------------------------------- */

.vibe-first-order-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: var(--vibe-radius);
    animation: vibe-fo-slide-in 0.5s ease-out;
}

@keyframes vibe-fo-slide-in {
    0% {
        opacity: 0;
        transform: translateY(-15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.vibe-fo-icon {
    font-size: 2rem;
    line-height: 1;
    animation: vibe-fo-bounce 2s ease-in-out infinite;
}

@keyframes vibe-fo-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.vibe-fo-content {
    flex: 1;
}

.vibe-fo-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #B45309;
    margin-bottom: 0.25rem;
}

.vibe-fo-message {
    font-size: 0.85rem;
    color: #78350F;
    text-align: center;
    width: 100%;
}

.vibe-fo-message .vibe-fo-percent {
    font-weight: 700;
    color: #D97706;
}

.vibe-fo-message .vibe-fo-savings {
    font-weight: 600;
    color: #10B981;
}

/* Ensure hidden promotion containers take no space */
#vibe-applied-promotions:empty,
#vibe-applied-promotions[style*="display: none"],
#vibe-applied-promotions[style*="display:none"],
#vibe-qty-tier-indicator[style*="display: none"],
#vibe-qty-tier-indicator[style*="display:none"],
#vibe-first-order-banner[style*="display: none"],
#vibe-first-order-banner[style*="display:none"] {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}