/* =================================================================
   MD3 UTILITIES - Material Design 3 Additional Utilities
   Extra utilities không có trong MD3 base
   ================================================================= */

.md3-elevation-0 {
    box-shadow: var(--md3-elevation-level0);
}

.md3-elevation-1 {
    box-shadow: var(--md3-elevation-level1);
}

.md3-elevation-2 {
    box-shadow: var(--md3-elevation-level2);
}

.md3-elevation-3 {
    box-shadow: var(--md3-elevation-level3);
}

.md3-elevation-4 {
    box-shadow: var(--md3-elevation-level4);
}

.md3-elevation-5 {
    box-shadow: var(--md3-elevation-level5);
}

.md3-surface {
    background: var(--md-sys-color-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.md3-surface-variant {
    background: var(--md-sys-color-surface-container-low);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.md3-surface-dim {
    background: var(--md-sys-color-surface-dim);
}

.md3-surface-bright {
    background: var(--md-sys-color-surface-bright);
}

.md3-surface-container {
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.md3-surface-container-low {
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.md3-surface-container-high {
    background: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
}

/* Material Design 3 State Layers */
.md3-state-layer {
    position: relative;
    overflow: hidden;
}

.md3-state-layer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.md3-state-layer:hover::before {
    opacity: 0.08;
}

.md3-state-layer:focus-visible::before {
    opacity: 0.12;
}

.md3-state-layer:active::before {
    opacity: 0.12;
}

/* Material Design 3 Ripple Effect */
.md3-ripple {
    position: relative;
    overflow: hidden;
}

.md3-ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle,
        rgba(63, 77, 238, 0.3) 0%,
        transparent 70%
    );
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

.md3-ripple:active::after {
    transform: scale(4);
    opacity: 1;
    transition: 
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Material Design 3 Shape System */
.md3-shape-none {
    border-radius: 0;
}

.md3-shape-xs {
    border-radius: 0.25rem;
}

.md3-shape-sm {
    border-radius: 0.5rem;
}

.md3-shape-md {
    border-radius: 0.75rem;
}

.md3-shape-lg {
    border-radius: 1rem;
}

.md3-shape-xl {
    border-radius: 1.75rem;
}

.md3-shape-2xl {
    border-radius: 2rem;
}

.md3-shape-full {
    border-radius: 9999px;
}

/* Material Design 3 Motion - Easing */
.md3-ease-standard {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.md3-ease-emphasized {
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.md3-ease-decelerate {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.md3-ease-accelerate {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

/* Material Design 3 Motion - Duration */
.md3-duration-short1 {
    transition-duration: 50ms;
}

.md3-duration-short2 {
    transition-duration: 100ms;
}

.md3-duration-short3 {
    transition-duration: 150ms;
}

.md3-duration-short4 {
    transition-duration: 200ms;
}

.md3-duration-medium1 {
    transition-duration: 250ms;
}

.md3-duration-medium2 {
    transition-duration: 300ms;
}

.md3-duration-medium3 {
    transition-duration: 350ms;
}

.md3-duration-medium4 {
    transition-duration: 400ms;
}

.md3-duration-long1 {
    transition-duration: 450ms;
}

.md3-duration-long2 {
    transition-duration: 500ms;
}

.md3-duration-long3 {
    transition-duration: 550ms;
}

.md3-duration-long4 {
    transition-duration: 600ms;
}

/* Material Design 3 Typography Styles */
.md3-display-large {
    font-size: 3.5rem;
    line-height: 4rem;
    font-weight: 400;
    letter-spacing: -0.015em;
}

.md3-display-medium {
    font-size: 2.8rem;
    line-height: 3.25rem;
    font-weight: 400;
    letter-spacing: 0;
}

.md3-display-small {
    font-size: 2.25rem;
    line-height: 2.75rem;
    font-weight: 400;
    letter-spacing: 0;
}

.md3-headline-large {
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 600;
    letter-spacing: 0;
}

.md3-headline-medium {
    font-size: 1.75rem;
    line-height: 2.25rem;
    font-weight: 600;
    letter-spacing: 0;
}

.md3-headline-small {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    letter-spacing: 0;
}

.md3-title-large {
    font-size: 1.375rem;
    line-height: 1.75rem;
    font-weight: 600;
    letter-spacing: 0;
}

.md3-title-medium {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.md3-title-small {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.md3-body-large {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.03em;
}

.md3-body-medium {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.025em;
}

.md3-body-small {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.md3-label-large {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.md3-label-medium {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.md3-label-small {
    font-size: 0.6875rem;
    line-height: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Material Design 3 Glassmorphism Utilities */
.md3-glass {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.md3-glass-strong {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.md3-glass-subtle {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}


/* Material Design 3 Gradient Utilities */
.md3-gradient-primary {
    background: linear-gradient(135deg, #3f4dee, #5865f2);
}

.md3-gradient-success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.md3-gradient-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.md3-gradient-error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.md3-gradient-surface {
    background: linear-gradient(180deg, #ffffff, #fafafa);
}

.flex.min-h-screen {
    background-color: var(--md-sys-color-surface-container-lowest) !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
}

.main-wrapper {
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
}

.main-wrapper.app-main {
    height: 100vh !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.content-wrapper {
    flex: 1 1 auto !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
}

@media (min-width: 1024px) {
    .floating-nav {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-right: none !important;
        background-color: var(--md-sys-color-surface-container-low) !important;
        box-shadow: none !important;
    }
}

.floating-nav__header {
    padding: 1.5rem 1.5rem 1rem !important;
    border-bottom: none !important;
}

.floating-nav__nav {
    padding: 0 0.75rem !important;
    gap: 0.25rem !important;
}

.floating-nav__nav-link {
    border-radius: var(--md3-shape-full) !important;
    min-height: 3.5rem !important;
    padding: 0 1.5rem !important;
    margin-bottom: 0.25rem !important;
    color: var(--md-sys-color-on-surface-variant) !important;
    font-weight: 500 !important;
    transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}

.floating-nav__nav-link:hover {
    background-color: var(--md-sys-color-surface-container-highest) !important;
    color: var(--md-sys-color-on-surface) !important;
}

.floating-nav__nav-link--active {
    background-color: var(--md-sys-color-secondary-container) !important;
    color: var(--md-sys-color-on-secondary-container) !important;
    font-weight: 600 !important;
}

.floating-nav__nav-link--active .floating-nav__nav-icon {
    color: var(--md-sys-color-on-secondary-container) !important;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

.floating-nav__status-card {
    border-radius: var(--md3-shape-large) !important;
    background-color: var(--md-sys-color-surface-container) !important;
    margin: 1rem !important;
    border: none !important;
    box-shadow: none !important;
}

.main-wrapper .content-wrapper {
    padding: 1.5rem !important;
}

.content-wrapper > nav {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
}

.rounded-3xl.bg-white\/50 {
    background-color: var(--md-sys-color-surface-container-low) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    box-shadow: var(--md3-elevation-level1) !important;
    backdrop-filter: none !important;
    border-radius: var(--md3-shape-extra-large) !important;
}

.product-summary {
    background-color: var(--md-sys-color-surface-container) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    box-shadow: var(--md3-elevation-level1) !important;
    border-radius: var(--md3-shape-extra-large) !important;
    backdrop-filter: none !important;
}

.product-summary .bg-slate-900 {
    background-color: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    box-shadow: var(--md3-elevation-level1) !important;
}

.product-summary .bg-slate-900 .text-white {
    color: var(--md-sys-color-on-primary-container) !important;
}

.product-summary .bg-slate-900 .text-white\/60 {
    color: var(--md-sys-color-on-primary-container) !important;
    opacity: 0.7;
}

.package-option {
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md3-shape-medium) !important;
    background-color: var(--md-sys-color-surface) !important;
    transition: all var(--md3-motion-duration-short2) var(--md3-motion-easing-standard) !important;
}

.package-option:hover {
    background-color: var(--md-sys-color-surface-container-high) !important;
    border-color: var(--md-sys-color-outline) !important;
}

/* Active Package */
.package-option.border-indigo-600 {
    background-color: var(--md-sys-color-secondary-container) !important;
    border-color: transparent !important;
}

.package-option.border-indigo-600 .package-name,
.package-option.border-indigo-600 .package-price {
    color: var(--md-sys-color-on-secondary-container) !important;
}

/* Buttons */
.ui-button--primary {
    border-radius: var(--md3-shape-full) !important;
    background-color: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
    box-shadow: var(--md3-elevation-level1) !important;
    transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}

.ui-button--primary:hover {
    box-shadow: var(--md3-elevation-level2) !important;
}

/* Reviews Section */
#reviews .rounded-2xl.bg-white\/50 {
    background-color: var(--md-sys-color-surface-container-low) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    box-shadow: none !important;
}

/* Mobile Sidebar Layout */
@media (max-width: 1023px) {
    .floating-nav {
        border-radius: 0 var(--md3-shape-large) var(--md3-shape-large) 0 !important;
        box-shadow: var(--md3-elevation-level3) !important;
    }
}