/* 
    Thaki Light - Global Variables & Base Styles
    Lego Architecture - Core Stylesheet
*/

/* Global Italics & Skew Reset */
*,
*::before,
*::after {
    font-style: normal !important;
    font-synthesis: none !important;
}

:root {
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-shadow: #3b82f6;

    --dark-950: #020617;
    --dark-900: #0f172a;
    --dark-800: #1e293b;

    --glass-bg: #0f172a;
    --glass-border: #334155;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Base Styles */
body {
    background-color: var(--body-bg) !important;
    color: var(--body-text) !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* System-wide Font Size Increases for Readability */
.text-\[8px\] { font-size: 11px !important; }
.text-\[9px\] { font-size: 12px !important; }
.text-\[10px\] { font-size: 13px !important; }
.text-\[11px\] { font-size: 14px !important; }
.text-xs { font-size: 14px !important; line-height: 1.5 !important; }
.text-sm { font-size: 15px !important; line-height: 1.6 !important; }

/* Force all gray text to white for readability across the system */
.text-dark-200, .text-dark-300, .text-dark-400, .text-dark-500, .text-dark-600 {
    color: var(--forced-white) !important;
}
.placeholder-dark-500::placeholder, .placeholder-dark-600::placeholder,
.placeholder-dark-400::placeholder, .placeholder-dark-300::placeholder {
    color: var(--forced-white) !important;
    opacity: 0.7;
}


/* Global Custom Scrollbar (The Thaki Light Flow) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--body-bg);
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-500);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #475569 #020617;
}

/* Scrollbar Utility */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Glassmorphism */
.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--primary-500);
    transform: translateY(-4px);
}

/* Effects */
.glow-orange {
    filter: drop-shadow(0 0 8px var(--primary-shadow));
}

.text-gradient {
    background: linear-gradient(to right, #3b82f6, #fb923c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Selection */
::selection {
    background: var(--primary-500);
    color: white;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out forwards;
}

/* Swiper overrides */
.swiper-pagination-bullet-active {
    background: var(--primary-500) !important;
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(-90deg, #1e293b 0%, #334155 50%, #1e293b 100%);
    background-size: 400% 400%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: -135% 0%;
    }
}

/* Swiper Pagination Customization */
.hero-swiper .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    background: #475569 !important;
    opacity: 1 !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 5px !important;
    margin: 0 5px !important;
    border: 1px solid #64748b;
}

.hero-swiper .swiper-pagination-bullet-active {
    width: 32px !important;
    background: var(--primary-500) !important;
    /* Brand Blue */
    border-color: transparent;
}

.hero-swiper .swiper-pagination {
    bottom: 40px !important;
}

/* 404 Stroke Text */
.stroke-text {
    -webkit-text-stroke: 1px #334155;
}

/* 4. Map Utility - Tactical Inversion */
.thakilight-map-iframe {
    border: 0;
    border-radius: 2.8rem;
}

option { background-color: #1e293b; color: #fff; }

/* Center product description images */
#tab-desc img {
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 0.75rem;
    display: block;
}

/* Hero Animations */
.hero-elem {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.swiper-slide-active .hero-elem {
    opacity: 1;
    transform: translateY(0);
}

.swiper-slide-active .hero-subtitle {
    transition-delay: 0.3s;
}

.swiper-slide-active .hero-title {
    transition-delay: 0.5s;
}

.swiper-slide-active .hero-btn {
    transition-delay: 0.7s;
}

/* ----------------------------------
   QUILL EDITOR DARK MODE FIX
----------------------------------- */
.ql-toolbar.ql-snow {
    background-color: #1e293b;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 0 !important;
    padding: 1rem;
    outline: none !important;
}
.ql-container.ql-snow {
    border: none !important;
    border-radius: 0 !important;
    background-color: rgba(30,41,59,0.5);
    color: #f8fafc;
    font-size: 15px !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    outline: none !important;
}
.ql-snow .ql-stroke { stroke: #94a3b8; }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: #94a3b8; }
.ql-snow .ql-picker { color: #94a3b8; outline: none !important; }
.ql-snow .ql-picker-options {
    background-color: #1e293b;
    border: 1px solid rgba(255,255,255,0.05) !important;
    outline: none !important;
}
.ql-editor {
    min-height: 400px;
    padding: 1.5rem;
    line-height: 1.6;
    outline: none !important;
    border: none !important;
}
.ql-editor.ql-blank::before {
    color: #475569;
    font-style: normal;
}
.ql-clipboard {
    outline: none !important;
}

/* ----------------------------------
   CHAT WIDGET SHAKE ANIMATION
----------------------------------- */
@keyframes chat-shake {
    0% { transform: rotate(0deg) scale(1) skew(1deg); }
    10% { transform: rotate(-25deg) scale(1) skew(1deg); }
    20% { transform: rotate(25deg) scale(1) skew(1deg); }
    30% { transform: rotate(-25deg) scale(1) skew(1deg); }
    40% { transform: rotate(25deg) scale(1) skew(1deg); }
    50% { transform: rotate(0deg) scale(1) skew(1deg); }
    100% { transform: rotate(0deg) scale(1) skew(1deg); }
}

/* Target the most common classes used for floating contact widgets (Zalo, Messenger) */
.phone-vr-img-circle, 
.zalo-vr-img-circle,
.messenger-vr-img-circle,
.chat-btn-shake,
.zalo-chat-widget,
.fb_dialog {
    animation: chat-shake 2s infinite ease-in-out !important;
    transform-origin: center center;
}

/* ----------------------------------
   CHAT WIDGET RIPPLE ANIMATION
----------------------------------- */
.chat-ripple-bg {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0, 132, 255, 0.8);
    z-index: 2147483639; /* Right below the chat widget */
    pointer-events: none;
    animation: chat-wave 2s infinite ease-out;
}
.chat-ripple-bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    background: rgba(0, 132, 255, 0.8);
    animation: chat-wave 2s infinite ease-out;
    animation-delay: 1s;
}

@keyframes chat-wave {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}
/* Fix text color for primary backgrounds due to Light Mode color inversion hack */
.bg-primary-500,
.bg-primary-600,
.hover\:bg-primary-500:hover,
.hover\:bg-primary-600:hover,
.active\:bg-primary-500:active,
.active\:bg-primary-600:active {
    color: #ffffff !important;
}
::selection {
    color: #ffffff !important;
}

/* Remove all shadow utilities */
* {
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    --tw-drop-shadow: drop-shadow(0 0 0 #0000) !important;
}

/* Reduce border radius and enhance border for glass cards in light mode */
.rounded-\[3rem\] { border-radius: 1.5rem !important; }
.rounded-\[2\.5rem\] { border-radius: 1.25rem !important; }
.rounded-\[2rem\] { border-radius: 1rem !important; }
.glass-card { border-color: rgba(0, 0, 0, 0.05) !important; }

/* Fix dropdown options contrast */
option {
    color: var(--body-text) !important;
    background-color: var(--body-bg) !important;
}