/* ========================================
   PURLIV AVOCADO OIL SALEPAGE
   Custom CSS for Tailwind with Libraries
   Only animations and special effects
   ======================================== */

/* Custom Animations */
@keyframes pulse-bg {
    0%, 100% { background: #ef5350; }
    50% { background: #ff1744; }
}

@keyframes badge-glow {
    0%, 100% { box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4); }
    50% { box-shadow: 0 4px 25px rgba(255, 215, 0, 0.7); }
}

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

@keyframes cta-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 25px rgba(249, 199, 79, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 12px 35px rgba(249, 199, 79, 0.6); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes shock-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

@keyframes fill-bar {
    from { width: 0 !important; }
}

@keyframes timeline-flow {
    to { top: 100%; }
}

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

/* Animation Classes */
.animate-pulse-bg {
    animation: pulse-bg 2s ease-in-out infinite;
}

.animate-badge-glow {
    animation: badge-glow 3s ease-in-out infinite;
}

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

.animate-cta-pulse {
    animation: cta-pulse 3s ease-in-out infinite;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-shock-pulse {
    animation: shock-pulse 1s ease-in-out infinite;
}

.animate-timeline-flow::after {
    animation: timeline-flow 3s linear infinite;
}

.animate-timeline-slide {
    animation: slideInTimeline 0.6s ease-out forwards;
}

/* Timeline animation delays */
.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-700 { animation-delay: 0.7s; }

/* Progress bar fill animation */
.animate-fill-bar {
    animation: fill-bar 2s ease-out;
}

/* Custom gradients */
.bg-gradient-hero {
    background: linear-gradient(135deg, #1a4d1a 0%, #2c5f2d 25%, #4a8b4a 75%, #97bc62 100%);
}

.bg-gradient-badge {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
}

.bg-gradient-cta {
    background: linear-gradient(135deg, #ffd700, #f9c74f);
}

.bg-gradient-cta-hover {
    background: linear-gradient(135deg, #ffed4e, #ffd700);
}

.bg-gradient-harvard {
    background: linear-gradient(to bottom, #A51C30, #8B1538);
}

.bg-gradient-science {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
}

.bg-gradient-danger {
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
}

.bg-gradient-warning {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
}

.bg-gradient-alert {
    background: linear-gradient(135deg, #fce4ec, #f8bbd0);
}

.bg-gradient-critical {
    background: linear-gradient(135deg, #fff8e1, #ffecb3);
}

.bg-gradient-timeline {
    background: linear-gradient(to bottom, #e8f5e9, #2c5f2d);
}

.bg-gradient-product {
    background: linear-gradient(135deg, #f9f9f7 0%, #e8f5e9 100%);
}

.bg-gradient-bottle {
    background: linear-gradient(135deg, #f9c74f 0%, #f9b74f 50%, #f9c74f 100%);
}

/* Special effects */
.backdrop-blur-10 {
    backdrop-filter: blur(10px);
}

/* Text shadows */
.text-shadow-hero {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.text-shadow-lg {
    text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
}

/* Custom borders */
.border-gradient-gold {
    position: relative;
}

.border-gradient-gold::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(10px);
}

/* Thai font specific adjustments */
.font-sarabun {
    font-family: 'Sarabun', sans-serif;
}

/* Typed.js specific styles */
.typed-headline {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 1.5em;
    position: relative;
    white-space: nowrap;
}

/* Ensure typed headline is visible */
.typed-headline:empty::before {
    content: '\00a0'; /* Non-breaking space to maintain height */
    visibility: hidden;
}

/* Fixed height container for typed text */
.typed-container {
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .typed-container {
        height: 4rem;
    }
}

@media (min-width: 1024px) {
    .typed-container {
        height: 5rem;
    }
}

/* Typed.js cursor customization */
.typed-cursor {
    color: #ffd700;
    font-weight: bold;
    animation: blink 1s infinite;
    opacity: 1;
}

@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* CSS Fallback animation for Typed.js */
@keyframes textRotate {
    0%, 18% {
        content: "ลดความเสี่ยงโรคหัวใจ 21%";
        opacity: 1;
    }
    19% { opacity: 0; }
    20%, 38% {
        content: "ลดความดันโลหิตสูง 17%";
        opacity: 1;
    }
    39% { opacity: 0; }
    40%, 58% {
        content: "ลดคอเลสเตอรอล 9.4 mg/dL";
        opacity: 1;
    }
    59% { opacity: 0; }
    60%, 78% {
        content: "เพิ่ม HDL (ไขมันดี) 2.84 mg/dL";
        opacity: 1;
    }
    79% { opacity: 0; }
    80%, 98% {
        content: "ลดความเสี่ยงเบาหวาน 25%";
        opacity: 1;
    }
    99% { opacity: 0; }
}

/* Apply fallback if Typed.js fails */
.typed-headline.use-css-fallback::before {
    content: "ลดความเสี่ยงโรคหัวใจ 21%";
    animation: textRotate 15s infinite;
}

/* Scroll progress bar */
.progress-fill {
    transition: width 0.3s ease;
}

/* Swiper customization */
.swiper {
    overflow: visible !important;
}

.swiper-slide {
    height: auto !important;
}

.swiper-pagination-bullet {
    background: #2c5f2d !important;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: #1a4d1a !important;
}

.swiper-button-next,
.swiper-button-prev {
    color: #2c5f2d !important;
}

/* AOS custom animations */
[data-aos="fade-up"] {
    transform: translateY(20px);
}

[data-aos="fade-down"] {
    transform: translateY(-20px);
}

[data-aos="fade-right"] {
    transform: translateX(-20px);
}

[data-aos="fade-left"] {
    transform: translateX(20px);
}

/* Smooth fade transition for Typed.js */
.typed-fade-out {
    opacity: 0;
    transition: opacity 0.5s;
}

/* Remove pulse animation when typing to reduce visual noise */
.typed-headline {
    animation: none !important;
}

/* SweetAlert2 customization */
.swal2-popup {
    font-family: 'Sarabun', sans-serif !important;
}

.swal2-title {
    font-size: 1.5rem !important;
}

.swal2-content {
    font-size: 1rem !important;
}

.swal2-confirm {
    background: #2c5f2d !important;
}

.swal2-cancel {
    background: #6c757d !important;
}

/* Pristine validation styles */
.pristine-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

.has-danger input,
.has-danger textarea,
.has-danger select {
    border-color: #dc3545 !important;
    background-color: #fff5f5;
}

.has-success input,
.has-success textarea,
.has-success select {
    border-color: #28a745 !important;
    background-color: #f0fff4;
}

/* Error message styling */
.form-group .text-red-500 {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

/* Phone input specific */
input[type="tel"]:focus {
    outline: none;
    border-color: #2c5f2d;
    box-shadow: 0 0 0 3px rgba(44, 95, 45, 0.1);
}

/* CountUp styles */
.count-up {
    display: inline-block;
    min-width: 2ch;
}

/* Ensure numbers are visible even before animation */
.count-up:not(.counted) {
    opacity: 1 !important;
}

/* Thailand.js typeahead custom styles */
.tt-menu {
    background: white !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    margin-top: 5px !important;
    width: 100% !important;
    max-height: 250px !important;
    overflow-y: auto !important;
}

.tt-suggestion {
    padding: 0.625rem 0.9375rem !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.tt-suggestion:last-child {
    border-bottom: none !important;
}

.tt-suggestion:hover {
    background-color: #f5f5f5 !important;
}

.tt-suggestion.tt-cursor {
    background-color: #e8f5e9 !important;
}

/* Timeline flow effect */
.timeline-flow-effect {
    position: relative;
    overflow: hidden;
}

.timeline-flow-effect::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.6), transparent);
}

/* Custom bottle shapes */
.bottle-shape {
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

/* Custom animations for result bars */
.result-bar-danger {
    background: linear-gradient(90deg, #ff4444, #ffd700);
}

.result-bar-good {
    background: linear-gradient(90deg, #4caf50, #8bc34a);
}

/* Lazy loading styles */
img.lazyload,
img.lazyloading {
    opacity: 0;
    transition: opacity 0.3s;
}

img.lazyloaded {
    opacity: 1;
}

/* Mobile responsiveness enhancements */
@media (max-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }

    .countdown {
        font-size: 1.5rem !important;
    }

    [data-aos] {
        pointer-events: auto !important;
    }
}

/* Print utilities */
@media print {
    body {
        background: white !important;
    }

    .no-print {
        display: none !important;
    }
}

/* Loading animation for form submission */
.form-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.form-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2c5f2d;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #2c5f2d;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1a4d1a;
}

/* Debug mode styling */
.debug-mode {
    border: 2px dashed red !important;
}

.debug-info {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.9);
    color: #0f0;
    padding: 20px;
    border: 2px solid #0f0;
    font-family: monospace;
    z-index: 9999;
    max-width: 400px;
    max-height: 300px;
    overflow: auto;
}

/* Package selection improvements */
.package-visual-card {
    position: relative;
    cursor: pointer;
}

/* Package selection visual feedback */
.package-visual-card[data-selected="true"] {
    border-color: #059669 !important;
    background: linear-gradient(to bottom, #f0fdf4, #ffffff) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-0.25rem) !important;
}