/* Alert and Notification Styles */
.alert-box {
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

.alert-icon-wrapper {
    margin-right: 1rem !important;
    margin-inline-end: 1rem !important;
}

.alert-danger,
.alert-error {
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #991b1b !important;
}
.alert-danger .alert-icon-wrapper,
.alert-error .alert-icon-wrapper {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
}
.alert-danger .alert-title,
.alert-error .alert-title {
    color: #7f1d1d !important;
}
.alert-danger .alert-text,
.alert-error .alert-text,
.alert-danger li,
.alert-error li {
    color: #b91c1c !important;
}
.alert-danger .alert-bullet,
.alert-error .alert-bullet {
    background-color: #ef4444 !important;
}
.alert-danger .alert-close,
.alert-error .alert-close {
    color: #f87171 !important;
}
.alert-danger .alert-close:hover,
.alert-error .alert-close:hover {
    color: #991b1b !important;
    background-color: #fee2e2 !important;
}

.alert-success {
    background-color: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #065f46 !important;
}
.alert-success .alert-icon-wrapper {
    background-color: #d1fae5 !important;
    color: #059669 !important;
}
.alert-success .alert-title {
    color: #064e3b !important;
}
.alert-success .alert-text,
.alert-success li {
    color: #047857 !important;
}
.alert-success .alert-close {
    color: #34d399 !important;
}
.alert-success .alert-close:hover {
    color: #065f46 !important;
    background-color: #d1fae5 !important;
}

.alert-warning {
    background-color: #fffbeb !important;
    border: 1px solid #fde68a !important;
    color: #92400e !important;
}
.alert-warning .alert-icon-wrapper {
    background-color: #fef3c7 !important;
    color: #d97706 !important;
}
.alert-warning .alert-title {
    color: #78350f !important;
}
.alert-warning .alert-text,
.alert-warning li {
    color: #b45309 !important;
}
.alert-warning .alert-bullet {
    background-color: #f59e0b !important;
}

/* Tailwind fallback color classes */
.bg-red-50, .bg-red-50\/90 { background-color: #fef2f2 !important; }
.bg-red-100 { background-color: #fee2e2 !important; }
.bg-red-500 { background-color: #ef4444 !important; }
.border-red-200 { border-color: #fecaca !important; }
.text-red-400 { color: #f87171 !important; }
.text-red-600 { color: #dc2626 !important; }
.text-red-700 { color: #b91c1c !important; }
.text-red-900 { color: #7f1d1d !important; }

.bg-emerald-50, .bg-emerald-50\/90 { background-color: #ecfdf5 !important; }
.bg-emerald-100 { background-color: #d1fae5 !important; }
.border-emerald-200 { border-color: #a7f3d0 !important; }
.text-emerald-400 { color: #34d399 !important; }
.text-emerald-600 { color: #059669 !important; }
.text-emerald-700 { color: #047857 !important; }
.text-emerald-800 { color: #065f46 !important; }

.bg-amber-50 { background-color: #fffbeb !important; }
.bg-amber-100 { background-color: #fef3c7 !important; }
.border-amber-200 { border-color: #fde68a !important; }
.text-amber-600 { color: #d97706 !important; }
.text-amber-700 { color: #b45309 !important; }
.text-amber-800 { color: #92400e !important; }
.text-amber-900 { color: #78350f !important; }

/* Custom CSS for Variant Selection & Common Styles */

/* Order Status Step Tracker */
.order-tracker-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1.5rem;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
    padding: 1.25rem 0.75rem;
}
@media (min-width: 640px) {
    .order-tracker-card {
        padding: 2rem 1.5rem;
    }
}
@media (min-width: 768px) {
    .order-tracker-card {
        padding: 2.25rem 2rem;
    }
}

.tracker-step-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tracker-step-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}
@media (min-width: 640px) {
    .tracker-step-icon {
        width: 3.25rem;
        height: 3.25rem;
    }
    .tracker-step-icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}
@media (min-width: 768px) {
    .tracker-step-icon {
        width: 3.75rem;
        height: 3.75rem;
    }
    .tracker-step-icon svg {
        width: 1.75rem;
        height: 1.75rem;
    }
}

.tracker-step-icon.is-completed {
    background-color: var(--color-primary-dark, #056d6e) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(5, 109, 110, 0.25);
    border: 2px solid var(--color-primary-dark, #056d6e) !important;
}
.tracker-step-icon.is-completed i,
.tracker-step-icon.is-completed svg,
.tracker-step-icon.is-completed svg path {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
}
.tracker-step-icon.is-active {
    background-color: #e6f3f3 !important;
    color: var(--color-primary-dark, #056d6e) !important;
    box-shadow: 0 0 0 4px rgba(5, 109, 110, 0.2), 0 6px 18px rgba(5, 109, 110, 0.15);
    border: 2px solid var(--color-primary-dark, #056d6e) !important;
    transform: scale(1.05);
}
.tracker-step-icon.is-active i,
.tracker-step-icon.is-active svg,
.tracker-step-icon.is-active svg path {
    color: var(--color-primary-dark, #056d6e) !important;
    stroke: var(--color-primary-dark, #056d6e) !important;
    fill: none;
}
.tracker-step-icon.is-pending {
    background-color: #f3f4f6 !important;
    color: #9ca3af !important;
    border: 2px solid #e5e7eb !important;
}
.tracker-step-icon.is-pending i,
.tracker-step-icon.is-pending svg,
.tracker-step-icon.is-pending svg path {
    color: #9ca3af !important;
    stroke: #9ca3af !important;
}

.tracker-step-arrow-badge {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
@media (min-width: 640px) {
    .tracker-step-arrow-badge {
        width: 1.75rem;
        height: 1.75rem;
    }
}
@media (min-width: 768px) {
    .tracker-step-arrow-badge {
        width: 2rem;
        height: 2rem;
    }
}

.tracker-step-arrow-badge.is-completed {
    background-color: var(--color-primary-dark, #056d6e) !important;
    color: #ffffff !important;
}
.tracker-step-arrow-badge.is-active {
    background-color: #e6f3f3 !important;
    color: var(--color-primary-dark, #056d6e) !important;
    border: 1.5px solid var(--color-primary-dark, #056d6e) !important;
}
.tracker-step-arrow-badge.is-pending {
    background-color: #f9fafb !important;
    color: #9ca3af !important;
    border: 1px solid #e5e7eb !important;
}

.tracker-line-completed {
    background-color: var(--color-primary-dark, #056d6e) !important;
}
.tracker-line-active {
    background: linear-gradient(to right, var(--color-primary-dark, #056d6e), #cbd5e1) !important;
}
[dir="rtl"] .tracker-line-active {
    background: linear-gradient(to left, var(--color-primary-dark, #056d6e), #cbd5e1) !important;
}
.tracker-line-pending {
    background-color: #e5e7eb !important;
}

:root {
    --color-primary: #088178;
    --color-primary-dark: #056d6e;
    --color-warning: #ffc107;
    --color-warning-dark: #b78103;
    --color-white: #ffffff;
    --color-gray-800: #212b36;
}

.product-card-1 .product-content h5 {
    margin-bottom: 1rem;
}

/* Ensure Slick slides stretch to full height */
.sellzy-slider .slick-track {
    display: flex !important;
    align-items: stretch !important;
}

.sellzy-slider .slick-slide {
    height: auto !important;
    display: flex !important;
}

.sellzy-slider .slick-slide > div {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
}

.sellzy-slider .slick-slide > div > div {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.product-card-1 {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.product-card-1 .product-content {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Category Section Carousel Layout */
.category-section .slick-slide {
    display: block !important;
    overflow: visible !important;
}

.category-section .slick-list {
    overflow: hidden;
}

.category-section .slick-slide > .p-3,
.category-section .slick-slide > div > .p-3,
.category-section .p-3.slick-slide,
.category-section .slick-slide.p-3 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
}

.category-section .slick-slide > p,
.category-section .slick-slide > div > p,
.category-section .slick-slide > .p-3 > p,
.category-section .slick-slide > div > .p-3 > p,
.category-section .p-3.slick-slide > p,
.category-section .category-name {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 24px !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    color: #222 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    text-align: center !important;
    overflow: visible !important;
    transform: none !important;
    z-index: 100 !important;
}

.category-section .slick-slide > p > a,
.category-section .slick-slide > div > p > a,
.category-section .slick-slide > .p-3 > p > a,
.category-section .slick-slide > div > .p-3 > p > a,
.category-section .p-3.slick-slide > p > a,
.category-section .category-name a {
    display: block !important;
    color: #222 !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 24px !important;
    font-size: 16px !important;
    line-height: 24px !important;
    text-align: center !important;
    text-decoration: none !important;
    overflow: visible !important;
    z-index: 101 !important;
}

/* Arbitrary Tailwind Class Support */
.bg-\[\#056d6e\],
.\!bg-\[\#056d6e\],
.bg-primary-dark {
    background-color: var(--color-primary-dark, #056d6e) !important;
}

.border-\[\#056d6e\],
.\!border-\[\#056d6e\],
.border-primary-dark {
    border-color: var(--color-primary-dark, #056d6e) !important;
}

.text-\[\#056d6e\],
.\!text-\[\#056d6e\] {
    color: var(--color-primary-dark, #056d6e) !important;
}

.bg-emerald-50\/50,
.bg-emerald-50\/40 {
    background-color: rgba(236, 253, 245, 0.5) !important;
}

.ring-\[\#056d6e\]\/20 {
    --tw-ring-color: rgba(5, 109, 110, 0.2) !important;
}

/* Variant Modal Button Classes */
.variant-size-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    color: #374151;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    text-align: center;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    user-select: none;
}

.variant-size-btn:hover:not(.active):not(:disabled) {
    border-color: #9ca3af;
    background-color: #f9fafb;
    color: #111827;
}

.variant-size-btn.active,
.variant-size-btn.selected {
    background-color: var(--color-primary-dark, #056d6e) !important;
    border-color: var(--color-primary-dark, #056d6e) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.variant-size-btn.disabled,
.variant-size-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Variant Color Buttons */
.variant-color-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    color: #374151;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    user-select: none;
}

.variant-color-btn:hover:not(.active):not(:disabled) {
    border-color: #9ca3af;
    background-color: #f9fafb;
    color: #111827;
}

.variant-color-btn.active,
.variant-color-btn.selected {
    border-color: var(--color-primary-dark, #056d6e) !important;
    background-color: var(--color-primary-lighter, #ecfdf5) !important;
    color: #111827 !important;
    font-weight: 600;
    box-shadow: 0 0 0 2px rgba(5, 109, 110, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.variant-color-btn.disabled,
.variant-color-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Gift Wrap Selection */
.gift-wrap-card {
    position: relative !important;
}

.gift-wrap-checkmark {
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 10 !important;
}

.gift-wrap-input:checked + .gift-wrap-card {
    background-color: rgba(8, 129, 120, 0.2) !important;
    border-color: var(--color-primary, #088178) !important;
}

.gift-wrap-input:checked + .gift-wrap-card .gift-wrap-checkmark {
    display: flex !important;
}

/* Responsive Grid Helpers */
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

@media (min-width: 640px), (width >= 40rem) {
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px), (width >= 48rem) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px), (width >= 64rem) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1280px), (width >= 80rem) {
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}