/**
 * Railclick — Mobile Responsive (Figma-matched)
 * Version: 2.0.0
 *
 * Matches Figma mobile design. Uses Elementor CSS custom properties
 * (--flex-wrap-mobile, --width, --flex-wrap) to override container behavior.
 *
 * Breakpoints:
 *   ≤ 1024px — Tablet (hamburger activates)
 *   ≤ 767px  — Phone
 *   ≤ 480px  — Small phone
 */


/* ============================================================
   1. HEADER — White bg, single row: Logo ... EUR | Flag | ☰
   ============================================================
   Figma: white header, logo left, right side has currency text,
   language flag+text, and hamburger. All in one line.

   Elementor structure (post-95):
     .e-con-boxed[a237dda] > .e-con-inner
       > .e-child[acac0e4]  (logo)
       > .e-child[9efe972]  (nav / hamburger)
       > .e-child[af223dc]  (currency switcher)
       > .e-child[b3ce161]  (language switcher)
       > .e-child[rc_cart01] (cart)

   Problem: at ≤767px Elementor forces --width:100% + --flex-wrap:wrap
   on all .e-con.e-flex, making children stack vertically.
   Fix: override those custom properties + set direct flex rules.
   ============================================================ */

/* Top bar — visible on Figma desktop, hidden on tight mobile */
@media (max-width: 600px) {
    .elementor-95 .elementor-element.elementor-element-8bef461 {
        display: none !important;
    }
}

/* ---- Tablet: single-row header ---- */
@media (max-width: 1024px) {
    /* Main bar: override Elementor wrap */
    .elementor-95 .elementor-element.elementor-element-a237dda {
        --flex-wrap-mobile: nowrap !important;
        --min-height: 56px !important;
        --padding-left: 16px !important;
        --padding-right: 16px !important;
        --gap: 0px 10px !important;
        --column-gap: 10px !important;
    }

    .elementor-95 .elementor-element.elementor-element-a237dda > .e-con-inner {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* Logo: flex-grow to push others right */
    .elementor-95 .elementor-element.elementor-element-acac0e4 {
        --width: auto !important;
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 160px !important;
        order: 1 !important;
    }

    .elementor-95 .elementor-element.elementor-element-acac0e4 img {
        max-height: 30px !important;
        width: auto !important;
    }

    /* Currency */
    .elementor-95 .elementor-element.elementor-element-af223dc {
        --width: auto !important;
        width: auto !important;
        flex: 0 0 auto !important;
        order: 2 !important;
    }

    /* Language */
    .elementor-95 .elementor-element.elementor-element-b3ce161 {
        --width: auto !important;
        width: auto !important;
        flex: 0 0 auto !important;
        order: 3 !important;
    }

    /* Cart */
    .elementor-95 .elementor-element[data-id="rc_cart01"] {
        --width: auto !important;
        width: auto !important;
        flex: 0 0 auto !important;
        order: 4 !important;
    }

    /* Hamburger (nav container) */
    .elementor-95 .elementor-element.elementor-element-9efe972 {
        --width: auto !important;
        width: auto !important;
        flex: 0 0 auto !important;
        order: 5 !important;
    }
}

/* ---- Phone: compact header matching Figma ---- */
@media (max-width: 767px) {
    .elementor-95 .elementor-element.elementor-element-a237dda {
        --flex-wrap-mobile: nowrap !important;
        --flex-wrap: nowrap !important;
        --width: 100% !important;
        --min-height: 52px !important;
        --padding-left: 16px !important;
        --padding-right: 12px !important;
        --gap: 0px 8px !important;
        --column-gap: 8px !important;
    }

    .elementor-95 .elementor-element.elementor-element-a237dda > .e-con-inner {
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    /* ALL child containers — prevent 100% width */
    .elementor-95 .elementor-element.elementor-element-a237dda .e-child {
        --width: auto !important;
        width: auto !important;
    }

    /* Logo — Figma shows ~100px wide logo */
    .elementor-95 .elementor-element.elementor-element-acac0e4 {
        flex: 1 1 auto !important;
        max-width: 120px !important;
    }

    .elementor-95 .elementor-element.elementor-element-acac0e4 img {
        max-height: 26px !important;
    }

    /* Switcher buttons — Figma shows "EUR ▾" and "English US ▾" as text
       On phone we show shortened text */
    .elementor-95 .rck-sw-btn {
        padding: 6px 10px !important;
        font-size: 13px !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        background: #fff !important;
    }

    /* Hide chevron SVGs to save space */
    .elementor-95 .rck-sw-btn svg {
        display: none !important;
    }

    /* Currency: show "EUR" only (truncate symbol+space+code to just code) */
    .elementor-95 .elementor-element.elementor-element-af223dc .rck-sw-btn > span {
        display: inline-block !important;
        font-size: 13px !important;
        font-weight: 500 !important;
    }

    /* Language: show flag + shortened name */
    .elementor-95 .elementor-element.elementor-element-b3ce161 .rck-sw-btn > span {
        display: inline-block !important;
        max-width: 6ch !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 13px !important;
    }

    .elementor-95 .elementor-element.elementor-element-b3ce161 .rck-sw-btn img {
        width: 20px !important;
        height: 14px !important;
    }

    /* Hamburger — Figma shows a clean icon */
    .elementor-95 .elementor-menu-toggle {
        padding: 8px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--rc-secondary, #002D4B) !important;
    }

    .elementor-95 .elementor-menu-toggle svg {
        width: 22px !important;
        height: 22px !important;
        fill: var(--rc-secondary, #002D4B) !important;
    }

    /* Hide desktop nav */
    .elementor-95 .elementor-nav-menu--main {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .elementor-95 .elementor-element.elementor-element-a237dda {
        --padding-left: 12px !important;
        --padding-right: 8px !important;
        --gap: 0px 5px !important;
        --column-gap: 5px !important;
    }

    .elementor-95 .elementor-element.elementor-element-a237dda > .e-con-inner {
        gap: 5px !important;
    }

    /* On very small screens, hide currency text, show only symbol */
    .elementor-95 .elementor-element.elementor-element-af223dc .rck-sw-btn > span {
        max-width: 2ch !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    /* Language: flag only */
    .elementor-95 .elementor-element.elementor-element-b3ce161 .rck-sw-btn > span {
        display: none !important;
    }

    .elementor-95 .rck-sw-btn {
        padding: 5px 7px !important;
    }

    .elementor-95 .elementor-element.elementor-element-acac0e4 img {
        max-height: 22px !important;
    }
}

/* ---- Nav Drawer ---- */
@media (max-width: 1024px) {
    .elementor-95 .elementor-nav-menu--dropdown {
        width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        position: fixed !important;
        top: auto !important;
        max-height: calc(100vh - 56px) !important;
        overflow-y: auto !important;
        background: #fff !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
        z-index: 99999 !important;
        border-top: 1px solid #eee !important;
    }

    .elementor-95 .elementor-nav-menu--dropdown li a {
        padding: 16px 20px !important;
        font-size: 16px !important;
        border-bottom: 1px solid #f5f5f5 !important;
        min-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        color: var(--rc-secondary, #002D4B) !important;
        font-weight: 500 !important;
    }

    .elementor-95 .elementor-nav-menu--dropdown li:last-child a {
        border-bottom: none !important;
    }
}

/* ---- Sticky header ---- */
.elementor-location-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: #fff !important;
}


/* ============================================================
   2. HERO — Full-width image, dark overlay, stacked cards
   ============================================================
   Figma: large hero image with gradient overlay, two pass cards
   stacked vertically (Global Pass / One Country Pass) with
   rounded corners and a red CTA.
   ============================================================ */

@media (max-width: 767px) {
    .rck-home-hero {
        min-height: 420px !important;
        padding: 30px 16px 24px !important;
        border-radius: 0 !important;
    }

    .rck-home-hero-overlay {
        border-radius: 0 !important;
    }

    /* Cards container — vertical stack, full width */
    .rck-home-hero-cards {
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Individual pass cards */
    .rck-home-hero-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px !important;
        padding: 20px !important;
        backdrop-filter: blur(10px) !important;
    }

    .rck-home-hero-card-title {
        font-size: 20px !important;
        font-weight: 700 !important;
        margin-bottom: 4px !important;
    }

    .rck-home-hero-badge {
        font-size: 11px !important;
    }

    .rck-home-hero-desc {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
    }

    /* CTA button — Figma shows red rounded button */
    .rck-home-hero-btn {
        display: inline-block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 14px 24px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        min-height: 48px !important;
    }
}


/* ============================================================
   3. TRUST BADGES — Horizontal scroll on mobile
   ============================================================
   Figma: 4 badges in a row or wrapping 2x2
   ============================================================ */

@media (max-width: 767px) {
    .railclick-trust-badges {
        padding: 16px !important;
    }

    .railclick-trust-badges-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        flex-direction: initial !important;
    }

    .railclick-trust-badges-item {
        flex: initial !important;
        padding: 12px !important;
        text-align: center !important;
    }

    .railclick-trust-badges-desc {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .railclick-trust-badges-logo svg {
        width: 24px !important;
        height: 24px !important;
    }
}


/* ============================================================
   4. USP SECTION — "Build your Eurail adventure in 4 easy steps"
   ============================================================
   Figma: section title, 4 vertical cards with icon, title, desc,
   and "learn more" link. Full-width stacked.
   ============================================================ */

@media (max-width: 767px) {
    .railclick-usp-section {
        padding: 40px 16px !important;
    }

    .railclick-usp-content {
        padding: 0 !important;
    }

    .railclick-usp-title-1 {
        font-size: 14px !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
    }

    .railclick-usp-title-2 {
        font-size: 26px !important;
        line-height: 1.25 !important;
        margin-bottom: 24px !important;
    }

    .railclick-usp-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .railclick-usp-card {
        flex: 0 0 auto !important;
        width: 100% !important;
        border-radius: 16px !important;
        padding: 20px !important;
    }

    .railclick-usp-card-title {
        font-size: 18px !important;
        font-weight: 600 !important;
    }

    .railclick-usp-card-desc {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .railclick-usp-card-link {
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    /* Bottom CTAs */
    .railclick-usp-title-3 {
        font-size: 14px !important;
    }

    .railclick-usp-title-4 {
        font-size: 22px !important;
        margin-bottom: 16px !important;
    }

    .railclick-usp-actions {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .railclick-usp-btn {
        width: 100% !important;
        text-align: center !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }
}


/* ============================================================
   5. POPULAR PASSES — Cards with price, features, CTA
   ============================================================
   Figma: "Most Popular Rail Passes" title, vertical cards with
   pass name, "from €XXX", feature bullets, "Select your Pass" btn
   ============================================================ */

@media (max-width: 767px) {
    .railclick-popular-passes {
        padding: 40px 16px !important;
    }

    .railclick-popular-passes-title {
        font-size: 26px !important;
        text-align: center !important;
        margin-bottom: 24px !important;
    }

    /* Swiper: single column, no overflow tricks */
    .railclick-passes-wrapper {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .railclick-pass-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px !important;
        padding: 24px 20px !important;
        margin: 0 !important;
    }

    .railclick-pass-header {
        margin-bottom: 8px !important;
    }

    .railclick-pass-title {
        font-size: 20px !important;
        font-weight: 700 !important;
    }

    .railclick-pass-price {
        margin-bottom: 16px !important;
    }

    .railclick-pass-price-prefix {
        font-size: 14px !important;
    }

    .railclick-pass-price-value {
        font-size: 28px !important;
        font-weight: 700 !important;
        color: var(--rc-primary, #F15E5E) !important;
    }

    .railclick-pass-divider {
        margin: 16px 0 !important;
    }

    .railclick-pass-features {
        margin-bottom: 20px !important;
    }

    .railclick-feature-text {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .railclick-pass-btn {
        width: 100% !important;
        text-align: center !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Disable swiper sliding on mobile — stack instead */
    .railclick-passes-slider.swiper {
        overflow: visible !important;
    }

    .railclick-passes-wrapper.swiper-wrapper {
        transform: none !important;
        flex-wrap: wrap !important;
    }

    .railclick-pass-card.swiper-slide {
        flex-shrink: 0 !important;
    }
}


/* ============================================================
   6. PAYMENT ICONS — "Pay Securely with"
   ============================================================
   Figma: title + row of payment icons centered
   ============================================================ */

@media (max-width: 767px) {
    .railclick-payment-section {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 32px 16px !important;
    }

    .railclick-payment-title {
        font-size: 16px !important;
        text-align: center !important;
        font-weight: 600 !important;
    }

    .railclick-payment-icons {
        justify-content: center !important;
        gap: 16px !important;
        flex-wrap: wrap !important;
    }

    .railclick-payment-item {
        font-size: 28px !important;
    }
}


/* ============================================================
   7. TESTIMONIALS — Quote + Image
   ============================================================
   Figma: quote text, author, image below (stacked on mobile)
   ============================================================ */

@media (max-width: 767px) {
    .railclick-testimonial-section {
        padding: 40px 16px !important;
    }

    .railclick-testimonial-slider {
        min-height: auto !important;
    }

    .railclick-testimonial-slide.railclick-active,
    .railclick-testimonial-slide.active {
        flex-direction: column-reverse !important;
        gap: 24px !important;
        text-align: center !important;
    }

    .railclick-testimonial-content {
        max-width: 100% !important;
    }

    .railclick-quote-icon {
        font-size: 32px !important;
    }

    .railclick-testimonial-quote {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    .railclick-testimonial-author {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }

    .railclick-testimonial-nav {
        justify-content: center !important;
    }

    .railclick-testimonial-image {
        max-width: 100% !important;
    }

    .railclick-testimonial-image img {
        border-radius: 16px !important;
        max-height: 280px !important;
        object-fit: cover !important;
        width: 100% !important;
    }
}


/* ============================================================
   8. PARTNERS / LOGO SHOWCASE — "Our Partners"
   ============================================================
   Figma: title + 4 logos in a row, grayscale
   ============================================================ */

@media (max-width: 767px) {
    .railclick-logo-showcase {
        padding: 32px 16px !important;
    }

    .railclick-logo-showcase-title {
        font-size: 22px !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .railclick-logo-showcase-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        justify-items: center !important;
        align-items: center !important;
    }

    .railclick-logo-item img {
        max-height: 30px !important;
        width: auto !important;
    }
}


/* ============================================================
   9. CONDITIONS / ACCORDION — "Conditions of this Pass"
   ============================================================
   Figma: title + vertical accordion items, no side image
   ============================================================ */

@media (max-width: 767px) {
    .railclick-conditions-section {
        padding: 40px 16px !important;
    }

    .railclick-conditions-container {
        max-width: 100% !important;
    }

    .railclick-section-title {
        font-size: 24px !important;
        text-align: center !important;
        margin-bottom: 24px !important;
    }

    .railclick-conditions-layout {
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Hide the image on mobile — Figma doesn't show it */
    .railclick-conditions-image {
        display: none !important;
    }

    .railclick-conditions-accordion {
        width: 100% !important;
    }

    .railclick-accordion-item {
        border-bottom: 1px solid #ddd !important;
    }

    .railclick-accordion-title {
        padding: 18px 0 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        min-height: 48px !important;
        color: var(--rc-secondary, #002D4B) !important;
    }

    .railclick-accordion-content {
        font-size: 14px !important;
        line-height: 1.6 !important;
        padding-bottom: 16px !important;
    }
}


/* ============================================================
   10. TRAVELER SELECTOR — Full-width, large touch targets
   ============================================================ */

@media (max-width: 767px) {
    .railclick-traveler-selector {
        max-width: 100% !important;
        width: 100% !important;
        padding: 16px !important;
        border-radius: 12px !important;
    }

    .railclick-ts-row {
        margin-bottom: 14px !important;
        gap: 8px !important;
    }

    .railclick-ts-type {
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    .railclick-ts-age {
        font-size: 12px !important;
        color: #888 !important;
    }

    .railclick-ts-controls {
        border-radius: 8px !important;
        padding: 4px !important;
        background-color: #f5f5f5 !important;
    }

    .railclick-ts-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 20px !important;
        border-radius: 6px !important;
    }

    .railclick-ts-input {
        width: 44px !important;
        font-size: 16px !important;
    }

    .railclick-ts-apply-btn {
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
        min-height: 48px !important;
    }

    .railclick-ts-header {
        padding: 12px !important;
        margin: -12px !important;
        margin-bottom: 4px !important;
    }

    .railclick-ts-count-badge {
        font-size: 13px !important;
        padding: 4px 10px !important;
    }
}


/* ============================================================
   11. PRODUCT PAGE — Full-width layout
   ============================================================ */

@media (max-width: 1024px) {
    .ttwc-product-wrapper {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .ttwc-selector-section,
    .ttwc-sidebar-section,
    .railclick-product-sidebar {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 767px) {
    .ttwc-product-card-single {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }

    .ttwc-class-option {
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
    }

    .ttwc-duration-option,
    .ttwc-validity-option {
        min-height: 44px !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
    }

    .ttwc-price-display {
        font-size: 24px !important;
    }

    .ttwc-add-to-cart-btn,
    .single_add_to_cart_button {
        width: 100% !important;
        min-height: 52px !important;
        font-size: 17px !important;
        border-radius: 10px !important;
    }
}


/* ============================================================
   12. OCP SELECTOR — Mobile
   ============================================================ */

@media (max-width: 767px) {
    .ocp-selector-container {
        padding: 24px 16px 20px !important;
        border-radius: 16px !important;
    }

    .ocp-selector-title {
        font-size: 20px !important;
    }

    .ocp-popular-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .ocp-allpasses-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .ocp-pass-card {
        padding: 14px !important;
        border-radius: 12px !important;
    }
}

@media (max-width: 480px) {
    .ocp-allpasses-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   13. CHECKOUT — Mobile form
   ============================================================ */

@media (max-width: 767px) {
    .railclick-checkout-steps {
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 0 !important;
        padding: 0 16px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .railclick-checkout-step {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        padding: 10px 16px !important;
    }

    .railclick-form-group.half {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .railclick-form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Prevent iOS zoom on focus */
    .railclick-form-group input,
    .railclick-form-group select {
        min-height: 48px !important;
        font-size: 16px !important;
    }
}


/* ============================================================
   14. CART — Mobile
   ============================================================ */

@media (max-width: 767px) {
    .railclick-cart-container {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .railclick-cart-sidebar {
        width: 100% !important;
        flex: 0 0 100% !important;
        position: static !important;
    }

    .railclick-cart-item {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 16px !important;
        border-radius: 12px !important;
    }
}


/* ============================================================
   15. SPD (Single Product Detail)
   ============================================================ */

@media (max-width: 767px) {
    .railclick-spd-wrapper {
        padding: 24px 16px 32px !important;
    }

    .railclick-spd-section-title {
        font-size: 24px !important;
    }

    .railclick-spd-wrapper .ttwc-product-card-single {
        border-radius: 16px !important;
    }
}


/* ============================================================
   16. FOOTER
   ============================================================ */

@media (max-width: 767px) {
    .site-footer {
        padding: 40px 16px 16px !important;
    }

    .footer-widgets {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .footer-col h3 {
        font-size: 15px !important;
        margin-bottom: 12px !important;
    }
}


/* ============================================================
   17. SWITCHER DROPDOWNS — Bottom sheet on mobile
   ============================================================ */

@media (max-width: 767px) {
    .rck-sw-dd {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        min-width: auto !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2) !important;
        padding: 16px 0 calc(16px + env(safe-area-inset-bottom)) !important;
        z-index: 999999 !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
    }

    .rck-sw-dd a {
        padding: 14px 24px !important;
        font-size: 16px !important;
        min-height: 48px !important;
    }
}


/* ============================================================
   18. GENERAL — Overflow, images, buttons
   ============================================================ */

@media (max-width: 767px) {
    /* Prevent horizontal overflow */
    body {
        overflow-x: hidden !important;
    }

    /* Images */
    .elementor-widget-image img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Headings */
    .elementor-heading-title {
        word-break: break-word !important;
    }

    /* Elementor section padding */
    .e-con-boxed > .e-con-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}


/* ============================================================
   19. iOS SAFE AREA
   ============================================================ */

@supports (padding: env(safe-area-inset-top)) {
    .elementor-location-header {
        padding-top: env(safe-area-inset-top) !important;
    }
}


/* ============================================================
   20. TOUCH IMPROVEMENTS
   ============================================================ */

@media (max-width: 1024px) {
    a, button, [role="button"],
    .rck-sw-btn,
    .railclick-ts-btn,
    .elementor-menu-toggle,
    .railclick-pass-btn,
    .railclick-usp-btn {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
    }

    .elementor-nav-menu--dropdown,
    .rck-sw-dd {
        -webkit-overflow-scrolling: touch;
    }

    html {
        -webkit-text-size-adjust: 100%;
    }
}