/* ============================================
   CUSTOM FONT FACES
   ============================================ */
@font-face {
    font-family: 'Georgia Pro';
    src: url('/fonts/GeorgiaPro-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Montreal';
    src: url('/fonts/NeueMontreal-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   BASE STYLES
   ============================================ */
html {
    scroll-behavior: smooth;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
}

/* ============================================
   CUSTOM FONT FAMILY UTILITIES
   ============================================ */
.font-display {
    font-family: 'Playfair Display', serif !important;
}

.font-georgia-pro {
    font-family: 'Georgia Pro', 'Georgia', serif !important;
}

.font-neue-montreal {
    font-family: 'Neue Montreal', 'Arial', sans-serif !important;
}

/* ============================================
   CUSTOM BACKGROUND COLOR UTILITIES
   ============================================ */
.bg-bg-cream {
    background-color: #fde6c6 !important;
}

.bg-brand-red {
    background-color: #ef4444 !important;
}

.bg-brand-text {
    background-color: #f87171 !important;
}

.bg-footer-bg {
    background-color: #b06d50 !important;
}

.bg-cat-placeholder {
    background-color: #d9d9d9 !important;
}

.bg-primary {
    background-color: #490a0e !important;
}

.bg-secondary {
    background-color: #c49aa8 !important;
}

.bg-test {
    background-color: #faeab1 !important;
}

.bg-teal-200 {
    background-color: #99f6e4 !important;
}

.bg-red-950 {
    background-color: #450a0a !important;
}

.bg-red-900 {
    background-color: #7f1d1d !important;
}

.bg-stone-400 {
    background-color: #a8a29e !important;
}

.bg-orange-200 {
    background-color: #fed7aa !important;
}

.bg-petik-green {
    background-color: #0C2F1B !important;
}

/* ============================================
   CUSTOM TEXT COLOR UTILITIES
   ============================================ */
.text-brand-red {
    color: #ef4444 !important;
}

.text-brand-text {
    color: #f87171 !important;
}

.text-primary {
    color: #490a0e !important;
}

.text-secondary {
    color: #c49aa8 !important;
}

.text-test {
    color: #faeab1 !important;
}

.text-stone-400 {
    color: #a8a29e !important;
}

.text-orange-200 {
    color: #fed7aa !important;
}

.text-petik-green {
    color: #0C2F1B !important;
}

.text-red-950 {
    color: #450a0a !important;
}

.text-red-900 {
    color: #7f1d1d !important;
}

.text-red-500 {
    color: #ef4444 !important;
}

.text-red-400 {
    color: #f87171 !important;
}

/* ============================================
   CUSTOM BORDER COLOR UTILITIES
   ============================================ */
.border-red-950 {
    border-color: #450a0a !important;
}

.border-t-transparent {
    border-top-color: transparent !important;
}

.outline-red-950 {
    outline-color: #450a0a !important;
}

.outline-1 {
    outline-width: 1px !important;
}

/* ============================================
   CUSTOM HOVER STATE UTILITIES
   ============================================ */
.hover\:text-secondary:hover {
    color: #c49aa8 !important;
}

.hover\:bg-secondary:hover {
    background-color: #c49aa8 !important;
}

.hover\:bg-red-950:hover {
    background-color: #450a0a !important;
}

.hover\:opacity-80:hover {
    opacity: 0.8 !important;
}

/* ============================================
   CUSTOM SPACING UTILITIES
   ============================================ */
.gap-105 {
    gap: 105px !important;
}

.gap-132 {
    gap: 132px !important;
}

.gap-28 {
    gap: 7rem !important;
}

.w-154 {
    width: 154px !important;
}

.h-154 {
    height: 154px !important;
}

.w-200 {
    width: 200px !important;
}

.h-200 {
    height: 200px !important;
}

.mt-154 {
    margin-top: 154px !important;
}

.w-40 {
    width: 10rem !important;
}

.h-40 {
    height: 10rem !important;
}

.w-48 {
    width: 12rem !important;
}

.h-48 {
    height: 12rem !important;
}

.h-52 {
    height: 13rem !important;
}

.w-96 {
    width: 24rem !important;
}

.h-12 {
    height: 3rem !important;
}

.w-10 {
    width: 2.5rem !important;
}

.h-10 {
    height: 2.5rem !important;
}

.w-4 {
    width: 1rem !important;
}

.h-4 {
    height: 1rem !important;
}

.w-20 {
    width: 5rem !important;
}

.px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.py-1\.5 {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
}

.gap-2\.5 {
    gap: 0.625rem !important;
}

/* ============================================
   CUSTOM GRADIENT UTILITIES
   ============================================ */
.bg-gradient-to-r {
    background-image: linear-gradient(
        to right,
        var(--tw-gradient-stops)
    ) !important;
}

.from-red-950 {
    --tw-gradient-from: #450a0a !important;
    --tw-gradient-stops: var(--tw-gradient-from),
        var(--tw-gradient-to, rgba(69, 10, 10, 0)) !important;
}

.to-red-900 {
    --tw-gradient-to: #7f1d1d !important;
}

/* ============================================
   CUSTOM TEXT SIZE UTILITIES
   ============================================ */
.text-6xl {
    font-size: 3.75rem !important;
    line-height: 1 !important;
}

.text-base {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
}

.text-4xl {
    font-size: 2.25rem !important;
    line-height: 2.5rem !important;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
@media (min-width: 640px) {
    .sm\:py-16 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    .sm\:py-14 {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }
    .sm\:mt-28 {
        margin-top: 7rem !important;
    }
    .sm\:text-4xl {
        font-size: 2.25rem !important;
        line-height: 2.5rem !important;
    }
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .sm\:flex-row {
        flex-direction: row !important;
    }
    .sm\:items-center {
        align-items: center !important;
    }
    .sm\:px-8 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

@media (min-width: 768px) {
    .md\:text-5xl {
        font-size: 3rem !important;
        line-height: 1 !important;
    }
}

@media (min-width: 1280px) {
    .xl\:mt-36 {
        margin-top: 9rem !important;
    }
}

/* ============================================
   MISCELLANEOUS UTILITIES
   ============================================ */
.brightness-0 {
    filter: brightness(0) !important;
}

.invert {
    filter: invert(1) !important;
}

.brightness-0.invert {
    filter: brightness(0) invert(1) !important;
}

.line-clamp-2 {
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

.animate-spin {
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.max-w-4xl {
    max-width: 56rem !important;
}

.rounded-2xl {
    border-radius: 1rem !important;
}

.rounded-3xl {
    border-radius: 1.5rem !important;
}

.border-4 {
    border-width: 4px !important;
}

.border-gray-100 {
    border-color: rgb(243 244 246) !important;
}

.transition-all {
    transition-property: all !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important;
}

.transition-colors {
    transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important;
}

.hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
        0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
}

.bg-white\/10,
.bg-shiro\/10 {
    background-color: rgb(250 248 241 / 0.1) !important;
}

/* Custom Variables */
:root {
    --choose-needs-circle-size: 154px;
    --choose-needs-gap: 105px;
    --best-choice-circle-size: 200px;
    --best-choice-gap-x: 200px;
    --best-choice-gap-y: 80px;
}

/* Custom white/shiro background override */
.bg-white,
.bg-shiro {
    background-color: #faf8f1 !important;
}

html,
body {
    background-color: #faf8f1;
}

.wrapper {
    background-color: #faf8f1;
}

/* Footer background - hanya apply jika menggunakan class bg-primary atau bg-teal-200 */
/* Hapus !important agar inline styles bisa digunakan */
footer#contacts.bg-primary,
footer.bg-primary {
    background-color: #490a0e;
}

/* Fallback untuk footer dengan bg-teal-200 (jika masih ada) */
footer.bg-teal-200 {
    background-color: #99f6e4;
}

/* Jika tidak ada class bg-*, gunakan primary sebagai default */
footer#contacts:not([class*='bg-']) {
    background-color: #490a0e;
}

/* ============================================
   FOOTER TEXT COLORS - Ensure consistency
   ============================================ */
/* Default color untuk footer (tanpa !important agar bisa di-override dengan class Tailwind) */
footer#contacts {
    color: #faf8f1;
}

/* Default untuk h3 dan link di footer (tanpa !important agar class Tailwind seperti text-black bisa digunakan) */
footer#contacts h3:not([class*='text-']),
footer#contacts a:not([class*='text-']) {
    color: #faf8f1;
}

/* Pastikan text-white/text-shiro di footer selalu digunakan (hanya untuk class spesifik) */
footer#contacts .text-white,
footer#contacts .text-shiro,
footer#contacts h3.text-white,
footer#contacts h3.text-shiro,
footer#contacts a.text-white,
footer#contacts a.text-shiro {
    color: #faf8f1 !important;
}

/* ============================================
   CATEGORY FILTER - Preserve custom text colors
   ============================================ */
/* Memastikan class text color yang di-set di HTML tetap digunakan */
/* Gunakan specificity tinggi untuk memastikan class user tetap digunakan */

/* Text colors - hanya override jika TIDAK ada text-shiro (active state) */
[data-category-filter]
    a[data-category]:not(.text-shiro):not(.text-white).text-secondary {
    color: #c49aa8 !important;
}

[data-category-filter]
    a[data-category]:not(.text-shiro):not(.text-white).text-black {
    color: #000000 !important;
}

[data-category-filter]
    a[data-category]:not(.text-shiro):not(.text-white).text-red-950 {
    color: #450a0a !important;
}

[data-category-filter]
    a[data-category]:not(.text-shiro):not(.text-white).text-red-500 {
    color: #ef4444 !important;
}

/* Hover states */
[data-category-filter]
    a[data-category]:not(.text-shiro):not(
        .text-white
    ).hover\:text-teal-100:hover {
    color: #ccfbf1 !important;
}

[data-category-filter]
    a[data-category]:not(.text-shiro):not(.text-white).hover\:text-shiro:hover,
[data-category-filter]
    a[data-category]:not(.text-shiro):not(.text-white).hover\:text-white:hover {
    color: #faf8f1 !important;
}

/* Border colors - selalu preserve */
[data-category-filter] a[data-category].border-secondary {
    border-color: #c49aa8 !important;
}

[data-category-filter] a[data-category].border-red-950 {
    border-color: #450a0a !important;
}

[data-category-filter] a[data-category].border-red-500 {
    border-color: #ef4444 !important;
}

/* Active state - text-shiro/text-white akan override semua */
[data-category-filter] a[data-category].bg-red-950.text-shiro,
[data-category-filter] a[data-category].bg-red-500.text-shiro,
[data-category-filter] a[data-category].bg-red-950.text-white,
[data-category-filter] a[data-category].bg-red-500.text-white {
    color: #faf8f1 !important;
}

/* ============================================
   SHIRO (Custom White) TEXT COLOR UTILITY
   ============================================ */
.text-white,
.text-shiro {
    color: #faf8f1 !important;
}

.hover\:text-white:hover,
.hover\:text-shiro:hover {
    color: #faf8f1 !important;
}