@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import "tailwindcss";

/* Enable class-based dark mode (like Tailwind v3) */
@variant dark (&:where(.dark, .dark *));

@theme {
    --color-primary: #364d6d;
    --color-primary-dark: #2a3b55;
    --color-accent: #DDC393;
    --color-background-light: #fafaf9;
    --color-background-dark: #16181c;
    --color-surface-light: #ffffff;
    --color-surface-dark: #23262b;
    --color-border-light: #e5e7eb;
    --color-border-dark: #374151;
    --color-text-main: #121417;
    --color-text-muted: #647082;
    --font-display: "Inter", sans-serif;
    --font-sans: Inter, sans-serif;

    /* Custom container widths */
    --container-content: 1000px;

    --shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
    --shadow-soft-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.08);

    /* Border radius to match mockup (Tailwind v3 values) */
    --radius-DEFAULT: 0.375rem;
    /* 6px */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 0.75rem;
    /* 12px */
    --radius-xl: 1rem;
    /* 16px - inputs use this */
    --radius-2xl: 1.5rem;
    /* 24px - cards use this */
    --radius-3xl: 2rem;
    /* 32px */
    --radius-full: 9999px;

    --animate-in: fade-in 0.2s ease-out;

    @keyframes fade-in {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }
}

@source "../../views";
@source "../../js";

button:hover {
    cursor: pointer;
}

/* Hide default Dropzone message (we provide custom text) */
.dz-message {
    display: none !important;
}

/* Material Symbols Override */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

/* Fix space-y utilities for Tailwind v4 to match v3 behavior */
/* In v4, space-y applies to container; in v3, it applied to children */
.space-y-1\.5> :not([hidden])~ :not([hidden]) {
    margin-top: 0.375rem;
    /* 6px = 1.5 * 4px */
}

.space-y-5> :not([hidden])~ :not([hidden]) {
    margin-top: 1.25rem;
    /* 20px = 5 * 4px */
}

.space-y-6> :not([hidden])~ :not([hidden]) {
    margin-top: 1.5rem;
    /* 24px = 6 * 4px */
}

.space-y-1> :not([hidden])~ :not([hidden]) {
    margin-top: 0.25rem;
    /* 4px */
}

.space-y-2> :not([hidden])~ :not([hidden]) {
    margin-top: 0.5rem;
    /* 8px */
}

.space-y-3> :not([hidden])~ :not([hidden]) {
    margin-top: 0.75rem;
    /* 12px */
}

.space-y-4> :not([hidden])~ :not([hidden]) {
    margin-top: 1rem;
    /* 16px */
}

@layer utilities {

    /* Typography / Content Styles */
    .prose h2 {
        @apply text-2xl font-bold text-text-main dark:text-white mt-12 mb-6 tracking-tight;
    }

    .prose h3 {
        @apply text-xl font-semibold text-text-main dark:text-white mt-8 mb-4 tracking-tight;
    }

    .prose p {
        @apply text-text-muted dark:text-gray-400 leading-relaxed mb-6;
    }

    .prose ul {
        @apply list-disc list-outside ml-5 mb-6 text-text-muted dark:text-gray-400 space-y-2;
    }

    .prose strong {
        @apply text-text-main dark:text-white font-semibold;
    }

    .prose code {
        @apply bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-primary dark:text-blue-300 font-mono text-sm;
    }

    .prose pre {
        @apply bg-gray-900 text-gray-100 p-6 rounded-xl my-8 overflow-x-auto;
    }

    .prose blockquote {
        @apply border-l-4 border-primary pl-6 italic text-lg text-text-main dark:text-gray-300 my-8;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 20px;
}

.dark ::-webkit-scrollbar-thumb {
    background-color: #475569;
}

/* Custom Scrollbar Utility */
.custom-scrollbar {
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: #94a3b8 transparent;
    /* Firefox thumb/track */
}

.dark .custom-scrollbar {
    scrollbar-color: #475569 transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #94a3b8;
    /* Slate-400 */
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #475569;
}

/* Plan Card Styling */
.plan-radio:checked+.plan-card {
    border-color: #364d6d;
    background-color: rgba(54, 77, 109, 0.02);
    box-shadow: 0 0 0 1px #364d6d;
}

.plan-radio:checked+.plan-card .check-circle {
    background-color: #364d6d;
    border-color: #364d6d;
    color: white;
}

.dark .plan-radio:checked+.plan-card {
    background-color: rgba(54, 77, 109, 0.1);
}

/* Order Status Badges */
.status-completed {
    background-color: rgb(240 253 244);
    color: rgb(21 128 61);
}

.dark .status-completed {
    background-color: rgb(22 101 52 / 0.2);
    color: rgb(74 222 128);
}

.status-completed .status-dot {
    background-color: rgb(22 163 74);
}

.status-pending {
    background-color: rgb(239 246 255);
    color: rgb(29 78 216);
}

.dark .status-pending {
    background-color: rgb(30 64 175 / 0.2);
    color: rgb(96 165 250);
}

.status-pending .status-dot {
    background-color: rgb(37 99 235);
}

.status-processing {
    background-color: rgb(255 251 235);
    color: rgb(180 83 9);
}

.dark .status-processing {
    background-color: rgb(180 83 9 / 0.2);
    color: rgb(251 191 36);
}

.status-processing .status-dot {
    background-color: rgb(217 119 6);
}

.status-refunded {
    background-color: rgb(254 252 232);
    color: rgb(161 98 7);
}

.dark .status-refunded {
    background-color: rgb(161 98 7 / 0.2);
    color: rgb(250 204 21);
}

.status-refunded .status-dot {
    background-color: rgb(202 138 4);
}

.status-failed,
.status-cancelled {
    background-color: rgb(254 242 242);
    color: rgb(185 28 28);
}

.dark .status-failed,
.dark .status-cancelled {
    background-color: rgb(185 28 28 / 0.2);
    color: rgb(248 113 113);
}

.status-failed .status-dot,
.status-cancelled .status-dot {
    background-color: rgb(220 38 38);
}

.status-default {
    background-color: rgb(243 244 246);
    color: rgb(55 65 81);
}

.dark .status-default {
    background-color: rgb(31 41 55);
    color: rgb(156 163 175);
}

.status-default .status-dot {
    background-color: rgb(156 163 175);
}

/* Dropzone Button Visibility Helper Classes */

/* 1. Uploading State: Processing but NOT complete */
/* Hide Delete button, Show Cancel button */
.dz-preview.dz-processing:not(.dz-complete) .delete {
    display: none !important;
}

/* 2. Complete State (Success or Error) */
/* Hide Cancel button, Show Delete button */
.dz-preview.dz-complete .cancel {
    display: none !important;
}

/* 3. Hide Progress Bar when Complete */
.dz-preview.dz-complete .progress {
    display: none !important;
}

/* Error State Styling */
.dz-preview.dz-error {
    @apply border-red-500 bg-red-50 dark:border-red-500/50 dark:bg-red-500/10;
}

/* Error Message Visibility */
.dz-preview:not(.dz-error) .error {
    display: none;
}

.dz-preview.dz-error .error {
    display: block;
}

/* FAQ Animation Polyfill */
.faq-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms ease-out;
}
.faq-item.active .faq-body {
    grid-template-rows: 1fr;
}
.faq-item.active .faq-toggle .material-symbols-outlined {
    transform: rotate(180deg);
}