/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ============================================
   TRANSFER NICE - COMPLETE STYLES
   Version: 2.0 - Clean & Fixed
   ============================================ */

:root {
    --tn-navy: #1B3A4B;
    --tn-navy-dark: #0A1628;
    --tn-accent: #C41E3A;
    --tn-accent-hover: #A01830;
    --tn-accent-light: #E8354F;
    --tn-white: #FFFFFF;
    --tn-gray-50: #F8FAFC;
    --tn-gray-100: #F1F5F9;
    --tn-gray-200: #E2E8F0;
    --tn-gray-300: #CBD5E1;
    --tn-gray-500: #64748B;
    --tn-gray-600: #475569;
    --tn-gray-700: #334155;
}

/* ============================================
   1. BASE
   ============================================ */
.tn-container { max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important; }
.tn-section { padding: 80px 20px !important; }
.tn-section-sm { padding: 60px 20px !important; }
.tn-bg-white { background: #FFFFFF !important; }
.tn-bg-gray { background: #F8FAFC !important; }
.tn-text-center { text-align: center !important; }
.tn-mb-40 { margin-bottom: 40px !important; }
.tn-mb-60 { margin-bottom: 60px !important; }

/* ============================================
   2. TYPOGRAPHY
   ============================================ */
.tn-label { display: inline-block !important; color: #C41E3A !important; font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-bottom: 12px !important; }
.tn-heading-xl { color: #1B3A4B !important; font-size: 42px !important; font-weight: 700 !important; line-height: 1.2 !important; margin-bottom: 16px !important; }
.tn-heading-lg { color: #1B3A4B !important; font-size: 32px !important; font-weight: 700 !important; line-height: 1.3 !important; margin-bottom: 16px !important; }
.tn-heading-xl.tn-white, .tn-heading-lg.tn-white { color: #FFFFFF !important; }
.tn-text { color: #475569 !important; font-size: 16px !important; line-height: 1.7 !important; }
.tn-text-lg { color: #475569 !important; font-size: 18px !important; line-height: 1.7 !important; }
.tn-text-lg.tn-white { color: #CBD5E1 !important; }

/* ============================================
   3. HERO
   ============================================ */
.tn-hero { background: linear-gradient(135deg, #1B3A4B 0%, #0A1628 100%) !important; padding: 80px 20px !important; text-align: center !important; position: relative !important; overflow: hidden !important; }
.tn-hero::before { content: '' !important; position: absolute !important; top: -50% !important; right: -30% !important; width: 80% !important; height: 200% !important; background: radial-gradient(circle, rgba(196,30,58,0.15) 0%, transparent 60%) !important; pointer-events: none !important; }
.tn-hero-content { position: relative !important; z-index: 1 !important; max-width: 800px !important; margin: 0 auto !important; }

/* ============================================
   4. BADGES
   ============================================ */
.tn-badge-hero { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: rgba(196,30,58,0.2) !important; border: 1px solid rgba(196,30,58,0.4) !important; color: #FFFFFF !important; padding: 8px 20px !important; border-radius: 50px !important; font-size: 14px !important; font-weight: 500 !important; margin-bottom: 24px !important; }
.tn-badge { display: inline-block !important; background: #F1F5F9 !important; color: #475569 !important; padding: 6px 14px !important; border-radius: 20px !important; font-size: 12px !important; font-weight: 500 !important; margin-top: 16px !important; }

/* ============================================
   5. BUTTONS
   ============================================ */
.tn-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 16px 32px !important; font-size: 16px !important; font-weight: 600 !important; border-radius: 8px !important; text-decoration: none !important; transition: all 0.3s ease !important; cursor: pointer !important; border: none !important; }
.tn-btn-primary { background: #C41E3A !important; color: #FFFFFF !important; }
.tn-btn-primary:hover { background: #A01830 !important; color: #FFFFFF !important; transform: translateY(-2px) !important; box-shadow: 0 10px 30px rgba(196,30,58,0.3) !important; }
.tn-btn-outline-white { background: transparent !important; color: #FFFFFF !important; border: 2px solid #FFFFFF !important; }
.tn-btn-outline-white:hover { background: #FFFFFF !important; color: #1B3A4B !important; }
.tn-btn-lg { padding: 18px 36px !important; font-size: 18px !important; }

/* ============================================
   6. CONTACT CARDS
   ============================================ */
.tn-contact-cards { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 30px !important; margin-top: -100px !important; position: relative !important; z-index: 10 !important; }
.tn-contact-card { background: #FFFFFF !important; border-radius: 16px !important; padding: 40px 30px !important; text-align: center !important; box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important; transition: all 0.3s ease !important; border: 1px solid transparent !important; }
.tn-contact-card:hover { transform: translateY(-5px) !important; border-color: #C41E3A !important; }
.tn-contact-card h3 { color: #1B3A4B !important; font-size: 20px !important; font-weight: 700 !important; margin: 24px 0 12px !important; }
.tn-contact-card p { color: #64748B !important; font-size: 14px !important; margin-bottom: 16px !important; }
.tn-contact-card a { color: #1B3A4B !important; font-size: 18px !important; font-weight: 600 !important; text-decoration: none !important; }
.tn-contact-card a:hover { color: #C41E3A !important; }
.tn-contact-card .tn-icon-circle { margin: 0 auto !important; }

/* ============================================
   7. ICON CIRCLES - CSS BACKGROUND ICONS
   ============================================ */
.tn-icon-circle { width: 70px !important; height: 70px !important; background: linear-gradient(135deg, #C41E3A 0%, #A01830 100%) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.tn-icon-circle::after { content: '' !important; display: block !important; width: 32px !important; height: 32px !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; }

/* Phone Icon */
.tn-icon-phone::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") !important; }

/* Email Icon */
.tn-icon-email::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") !important; }

/* Location Icon */
.tn-icon-location::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") !important; }

/* Clock Icon */
.tn-icon-clock::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") !important; }

/* Shield Icon */
.tn-icon-shield::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") !important; }

/* Car Icon */
.tn-icon-car::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E") !important; }

/* Flight Icon */
.tn-icon-flight::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E") !important; }

/* ============================================
   8. FORM - Uses plugin default styles
   ============================================ */
.tn-form-full { max-width: 900px !important; margin: 0 auto !important; }

/* ============================================
   9. FEATURE CARDS
   ============================================ */
.tn-grid-4 { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; }
.tn-feature-card-v { text-align: center !important; padding: 30px 20px !important; background: #FFFFFF !important; border-radius: 16px !important; transition: all 0.3s ease !important; }
.tn-feature-card-v:hover { transform: translateY(-5px) !important; box-shadow: 0 15px 40px rgba(0,0,0,0.1) !important; }
.tn-feature-card-v .tn-icon-circle { margin: 0 auto 20px !important; }
.tn-feature-card-v h4 { color: #1B3A4B !important; font-size: 18px !important; font-weight: 700 !important; margin: 0 0 10px !important; }
.tn-feature-card-v p { color: #64748B !important; font-size: 14px !important; margin: 0 !important; line-height: 1.6 !important; }

/* ============================================
   10. AREA CHIPS
   ============================================ */
.tn-areas-row { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; margin-bottom: 40px !important; }
.tn-area-chip { display: inline-block !important; background: #FFFFFF !important; color: #334155 !important; padding: 14px 24px !important; border-radius: 50px !important; font-size: 15px !important; font-weight: 500 !important; border: 1px solid #E2E8F0 !important; transition: all 0.2s ease !important; }
.tn-area-chip:hover { border-color: #C41E3A !important; color: #C41E3A !important; }

/* ============================================
   11. MAP
   ============================================ */
.tn-map-full { border-radius: 20px !important; overflow: hidden !important; box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important; }
.tn-map-full iframe { width: 100% !important; height: 400px !important; border: none !important; display: block !important; }

/* ============================================
   12. FAQ
   ============================================ */
.tn-faq-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
.tn-faq-item { background: #FFFFFF !important; border-radius: 12px !important; padding: 28px !important; border: 1px solid #E2E8F0 !important; transition: all 0.3s ease !important; }
.tn-faq-item:hover { box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important; border-color: #C41E3A !important; }
.tn-faq-item h4 { color: #1B3A4B !important; font-size: 16px !important; font-weight: 600 !important; margin: 0 0 12px !important; display: flex !important; align-items: flex-start !important; gap: 12px !important; }
.tn-faq-item h4 span { color: #C41E3A !important; font-size: 20px !important; font-weight: 700 !important; }
.tn-faq-item p { color: #475569 !important; font-size: 14px !important; line-height: 1.7 !important; margin: 0 !important; padding-left: 32px !important; }

/* ============================================
   13. CTA
   ============================================ */
.tn-cta { background: linear-gradient(135deg, #1B3A4B 0%, #0A1628 100%) !important; padding: 80px 20px !important; text-align: center !important; position: relative !important; overflow: hidden !important; }
.tn-cta::before { content: '' !important; position: absolute !important; top: -50% !important; left: -30% !important; width: 80% !important; height: 200% !important; background: radial-gradient(circle, rgba(196,30,58,0.12) 0%, transparent 60%) !important; pointer-events: none !important; }
.tn-cta-content { position: relative !important; z-index: 1 !important; max-width: 700px !important; margin: 0 auto !important; }
.tn-cta h2 { color: #FFFFFF !important; font-size: 32px !important; font-weight: 700 !important; margin: 0 0 16px !important; }
.tn-cta p { color: #CBD5E1 !important; font-size: 18px !important; margin: 0 0 32px !important; }
.tn-cta-buttons { display: flex !important; justify-content: center !important; gap: 16px !important; flex-wrap: wrap !important; }

/* ============================================
   14. RESPONSIVE
   ============================================ */
@media (max-width: 992px) {
    .tn-contact-cards { grid-template-columns: repeat(2, 1fr) !important; }
    .tn-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .tn-faq-grid { grid-template-columns: 1fr !important; }
    .tn-heading-xl { font-size: 36px !important; }
    .tn-heading-lg { font-size: 28px !important; }
}

@media (max-width: 768px) {
    .tn-hero { padding: 60px 20px !important; }
    .tn-section { padding: 60px 20px !important; }
    .tn-contact-cards { grid-template-columns: 1fr !important; margin-top: -60px !important; }
    .tn-grid-4 { grid-template-columns: 1fr !important; }
    .tn-heading-xl { font-size: 28px !important; }
    .tn-heading-lg { font-size: 24px !important; }
    .tn-form-full { padding: 24px !important; }
    .tn-map-full iframe { height: 300px !important; }
    .tn-cta h2 { font-size: 24px !important; }
    .tn-cta-buttons { flex-direction: column !important; align-items: center !important; }
    .tn-btn { width: 100% !important; max-width: 300px !important; }
}

/* ============================================
   HKD BOOKING FORM - MOBILE & STYLE FIXES
   ============================================ */

/* Форма шире на мобильном */
.hkd-booking-form-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 15px !important;
}

.hkd-form-body {
    padding: 20px 15px !important;
}

/* Поля - легкий rounded */
.hkd-form-input,
.hkd-form-select,
.hkd-form-textarea {
    border-radius: 8px !important;
    width: 100% !important;
}

/* Кнопка - малиновый цвет */
.hkd-btn-primary,
.hkd-form-body button[type="submit"],
.hkd-booking-form-wrapper .hkd-btn-primary {
    background: #C41E3A !important;
    background-color: #C41E3A !important;
    border: none !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    padding: 16px 32px !important;
    font-weight: 600 !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.hkd-btn-primary:hover,
.hkd-form-body button[type="submit"]:hover {
    background: #A01830 !important;
    background-color: #A01830 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(196,30,58,0.3) !important;
}

/* Mobile - форма на всю ширину */
@media (max-width: 768px) {
    .hkd-booking-form-wrapper {
        padding: 10px !important;
        border-radius: 12px !important;
    }
    
    .hkd-form-header {
        padding: 20px 15px !important;
        border-radius: 12px 12px 0 0 !important;
    }
    
    .hkd-form-body {
        padding: 20px 10px !important;
    }
    
    .hkd-form-input,
    .hkd-form-select,
    .hkd-form-textarea {
        padding: 14px 12px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    .tn-form-full {
        padding: 0 !important;
        margin: 0 -10px !important;
        max-width: calc(100% + 20px) !important;
    }
}

/* Placeholder полностью виден */
.hkd-form-input,
.hkd-form-select {
    padding: 14px 16px !important;
    font-size: 15px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

.hkd-form-input::placeholder {
    font-size: 14px !important;
    color: #94A3B8 !important;
    opacity: 1 !important;
}

/* Select text полностью виден */
.hkd-form-select {
    padding-right: 40px !important;
    background-position: right 12px center !important;
}

/* Fix: Select placeholder/text видимый */
.hkd-form-select {
    color: #64748B !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #FFFFFF !important;
}

.hkd-form-select option {
    color: #334155 !important;
    padding: 10px !important;
}

.hkd-form-select option:first-child {
    color: #94A3B8 !important;
}

/* Если select пустой - показать placeholder цвет */
.hkd-form-select:invalid,
.hkd-form-select option[value=""] {
    color: #94A3B8 !important;
}

/* Selected value - темный цвет */
.hkd-form-select:valid {
    color: #334155 !important;
}