/* ==========================================================================
   Tiger Solution - Custom CSS Extensions
   Additional styles that complement the main style.css
   ========================================================================== */

/* ==========================================================================
   Elementor Compatibility Overrides
   ========================================================================== */
.elementor-page .ts-header {
    z-index: 10000;
}

.elementor-section {
    font-family: var(--ts-font-primary);
}

/* ==========================================================================
   Page-specific Animations
   ========================================================================== */

/* Staggered fade-in for grid items */
.ts-grid > .ts-animate-fade-up:nth-child(1) { transition-delay: 0s; }
.ts-grid > .ts-animate-fade-up:nth-child(2) { transition-delay: 0.1s; }
.ts-grid > .ts-animate-fade-up:nth-child(3) { transition-delay: 0.2s; }
.ts-grid > .ts-animate-fade-up:nth-child(4) { transition-delay: 0.3s; }

/* Counter animation */
.ts-counter {
    font-size: var(--ts-text-4xl);
    font-weight: 700;
    color: var(--ts-gold);
}

/* ==========================================================================
   Pricing Table Styles
   ========================================================================== */
.ts-pricing-featured {
    border: 2px solid var(--ts-gold);
    position: relative;
    transform: scale(1.05);
}

.ts-pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ts-gold);
    color: var(--ts-charcoal-dark);
    padding: 4px 20px;
    border-radius: 20px;
    font-size: var(--ts-text-xs);
    font-weight: 700;
    white-space: nowrap;
}

/* ==========================================================================
   FAQ Accordion
   ========================================================================== */
.ts-faq-item {
    background: var(--ts-white);
    border-radius: var(--ts-radius-lg);
    padding: 0;
    margin-bottom: 12px;
    box-shadow: var(--ts-shadow-sm);
    overflow: hidden;
}

.ts-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--ts-text-base);
    transition: var(--ts-transition);
}

.ts-faq-question:hover {
    background: var(--ts-gold-light);
}

.ts-faq-question i {
    transition: var(--ts-transition);
    color: var(--ts-gold);
}

.ts-faq-item.active .ts-faq-question i {
    transform: rotate(90deg);
}

.ts-faq-answer {
    padding: 0 24px 20px;
    font-size: var(--ts-text-sm);
    color: var(--ts-dark-grey);
    display: none;
}

.ts-faq-item.active .ts-faq-answer {
    display: block;
}

/* ==========================================================================
   Loading & Skeleton States
   ========================================================================== */
.ts-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s infinite;
    border-radius: var(--ts-radius-md);
}

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

/* ==========================================================================
   Scroll-to-Top Button
   ========================================================================== */
.ts-scroll-top {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 44px;
    height: 44px;
    background: var(--ts-gold);
    color: var(--ts-charcoal-dark);
    border: none;
    border-radius: var(--ts-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    box-shadow: var(--ts-shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: var(--ts-transition);
    z-index: 998;
}

.ts-scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ts-scroll-top:hover {
    background: var(--ts-gold-dark);
    transform: translateY(-2px);
}

/* ==========================================================================
   Thai Text Specific Adjustments
   ========================================================================== */

/* Thai text typically needs more line height */
:lang(th) {
    line-height: 1.8;
}

:lang(th) h1,
:lang(th) h2,
:lang(th) h3 {
    line-height: 1.4;
}

/* Ensure Thai word-breaking works properly */
p, li, span, a {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    .ts-header,
    .ts-footer,
    .ts-cta,
    .ts-whatsapp-float,
    .ts-scroll-top,
    .ts-menu-toggle {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    .ts-hero {
        min-height: auto;
        padding: 40px 0;
        background: #fff !important;
        color: #000;
    }

    .ts-hero-text h1,
    .ts-hero-text p {
        color: #000 !important;
    }

    .ts-section {
        padding: 20px 0;
    }

    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        color: #666;
    }
}

/* ==========================================================================
   WordPress Core Styles
   ========================================================================== */
.wp-block-image img {
    border-radius: var(--ts-radius-md);
}

.wp-block-button__link {
    font-family: var(--ts-font-primary);
    background-color: var(--ts-gold);
    color: var(--ts-charcoal-dark);
    border-radius: var(--ts-radius-md);
    font-weight: 600;
    padding: 12px 28px;
}

.wp-block-button__link:hover {
    background-color: var(--ts-gold-dark);
}

.alignwide {
    max-width: var(--ts-container);
}

.alignfull {
    max-width: 100%;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* ==========================================================================
   Admin Bar Adjustment
   ========================================================================== */
.admin-bar .ts-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .ts-header {
        top: 46px;
    }
}