/* KhmerZoneKH Custom Marketplace Styles */

:root {
    --primary: #f97316;
    --primary-hover: #ea580c;
    --primary-dark: #c2410c;
    --telegram: #229ED9;
    --telegram-hover: #1c88bd;
    --call: #16a34a;
    --call-hover: #15803d;
}

/* ===== Accent Color Themes =====
   Each --brand-NNN variable holds "R G B" (no commas) so it can be
   dropped straight into rgb(var(--brand-NNN)) / rgb(var(--brand-NNN)/alpha). */
:root,
html[data-theme="orange"] {
    --brand-50: 255 247 237;
    --brand-100: 255 237 213;
    --brand-200: 254 215 170;
    --brand-300: 253 186 116;
    --brand-400: 251 146 60;
    --brand-500: 249 115 22;
    --brand-600: 234 88 12;
    --brand-700: 194 65 12;
    --brand-800: 154 52 18;
    --brand-900: 124 45 18;
}

html[data-theme="blue"] {
    --brand-50: 239 246 255;
    --brand-100: 219 234 254;
    --brand-200: 191 219 254;
    --brand-300: 147 197 253;
    --brand-400: 96 165 250;
    --brand-500: 59 130 246;
    --brand-600: 37 99 235;
    --brand-700: 29 78 216;
    --brand-800: 30 64 175;
    --brand-900: 30 58 138;
}

html[data-theme="green"] {
    --brand-50: 240 253 244;
    --brand-100: 220 252 231;
    --brand-200: 187 247 208;
    --brand-300: 134 239 172;
    --brand-400: 74 222 128;
    --brand-500: 34 197 94;
    --brand-600: 22 163 74;
    --brand-700: 21 128 61;
    --brand-800: 22 101 52;
    --brand-900: 20 83 45;
}

html[data-theme="black"] {
    --brand-50: 244 244 245;
    --brand-100: 228 228 231;
    --brand-200: 212 212 216;
    --brand-300: 161 161 170;
    --brand-400: 113 113 122;
    --brand-500: 57 57 63;
    --brand-600: 38 38 41;
    --brand-700: 24 24 27;
    --brand-800: 15 15 17;
    --brand-900: 9 9 11;
}

body {
    font-family: 'Plus Jakarta Sans', 'Kantumruy Pro', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-track {
    background: #1e293b;
}
.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseSubtle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes themeSwitch {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(0.7); }
    100% { transform: rotate(360deg) scale(1); }
}

.animate-fade-in {
    animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-up {
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-pulse-subtle {
    animation: pulseSubtle 2s infinite ease-in-out;
}

.animate-theme-switch {
    animation: themeSwitch 0.5s ease-in-out;
}

/* Smooth modal overlay blur */
.modal-backdrop {
    background-color: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
}

.dark .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.75);
}

/* Card hover glow & lift */
.product-card {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.08), 0 6px 12px -4px rgba(0, 0, 0, 0.04);
}

.dark .product-card:hover {
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.35), 0 6px 12px -4px rgba(249, 115, 22, 0.05);
}

/* Telegram Gradient */
.bg-telegram {
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
}

.bg-telegram:hover {
    background: linear-gradient(135deg, #229ED9 0%, #1a8cc2 100%);
}

/* Call Button Gradient */
.bg-call {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.bg-call:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

/* Khmer24 Price Accent */
.price-tag {
    color: rgb(var(--brand-600));
    font-feature-settings: "tnum";
}

.dark .price-tag {
    color: rgb(var(--brand-400));
}

/* Custom scrollbar for horizontal categories */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Badges */
.badge-featured {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
}

/* Input Focus Ring */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: rgb(var(--brand-500)) !important;
    box-shadow: 0 0 0 3px rgb(var(--brand-500) / 0.15) !important;
}

/* Dark mode form elements */
.dark input, .dark select, .dark textarea {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

.dark input::placeholder, .dark textarea::placeholder {
    color: #64748b !important;
}

/* List view row layout */
.list-view-card {
    display: flex;
    flex-direction: row;
}

@media (max-width: 640px) {
    .list-view-card {
        flex-direction: column;
    }
}

/* Dark mode product card styles */
.dark .product-card {
    background-color: #0f172a;
    border-color: #1e293b;
}

.dark .product-card:hover {
    border-color: rgb(var(--brand-600));
}

/* Location map container */
.location-map-container {
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    transition: border-color 0.2s;
}

.location-map-container:hover {
    border-color: rgb(var(--brand-500));
}

.dark .location-map-container {
    border-color: #334155;
}

.dark .location-map-container:hover {
    border-color: rgb(var(--brand-500));
}

/* Theme toggle button styles */
.theme-toggle-active {
    animation: themeSwitch 0.5s ease-in-out;
}

/* Fixed aspect-ratio helpers.
   NOTE: "aspect-4/3" style Tailwind classes used elsewhere in the markup are
   v4 syntax and don't exist in this project's v3 compiled build, so they were
   silently doing nothing. These plain CSS classes are the real, working versions. */
.aspect-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-2-3 {
    aspect-ratio: 2 / 3;
}

/* Product photo upload preview - matches the forced 4x6 (2:3) portrait crop */
.upload-preview-thumb {
    width: 7rem;
    aspect-ratio: 2 / 3;
}