/* 
 Theme Name:   Ghost Tours
 Theme URI:    https://www.ghosttours.nl/
 Description:  
 Author:       Erik
 Author URI:   https://www.ghosttours.nl
 Template:     enfold
 Version:      2.7
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 /* == Add your own styles below this line ==
--------------------------------------------*/

@font-face {
    font-family: 'Penakut';
    src: url('/wp-content/themes/Ghost-Tours/fonts/penakut.ttf') format('truetype');
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Penakut', serif;
}

@font-face {
    font-family: 'Gotham';
    src: url('/wp-content/themes/Ghost-Tours/fonts/GothamLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('/wp-content/themes/Ghost-Tours/fonts/GothamLightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham';
    src: url('/wp-content/themes/Ghost-Tours/fonts/GothamBook.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('/wp-content/themes/Ghost-Tours/fonts/GothamBookItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham';
    src: url('/wp-content/themes/Ghost-Tours/fonts/GothamMedium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('/wp-content/themes/Ghost-Tours/fonts/GothamMediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham';
    src: url('/wp-content/themes/Ghost-Tours/fonts/GothamBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('/wp-content/themes/Ghost-Tours/fonts/GothamBoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

body {
    font-family: 'Gotham', sans-serif !important;
    font-weight: 400;
}

.amelia-v2-booking #amelia-container input[type="text"].m-input-input {
    padding: 0 1rem !important;
    height: 40px !important;
    line-height: 40px !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* =============================================
   Verplaatst vanuit "Additional CSS" (Customizer) op 18 juli 2026,
   zodat alle stijl centraal in het child theme staat i.p.v. verspreid
   over de Customizer en dit bestand. Inhoud 1-op-1 overgenomen,
   niets functioneel gewijzigd.
   ============================================= */

/* =============================================
   📅 AMELIA BOEKINGSFORMULIER
   ============================================= */
.amelia-v2-booking .am-ec__period-time { font-size: 18px !important; }
.amelia-v2-booking .am-ec__image {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.amelia-v2-booking .am-congrats__main-heading-waiting-list { display: block !important; }
.amelia-v2-booking .am-congrats__main > span { display: none !important; }
.amelia-v2-booking #amelia-container.am-elf { padding: 0 !important; }
.am-input-number {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    width: 100% !important;
}
.el-input-number__decrease, .el-input-number__increase {
    position: static !important;
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #dd2436 !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 28px !important;
    border: none !important;
}
.el-input-number__decrease .el-icon, .el-input-number__increase .el-icon {
    font-size: 24px !important;
    color: #fff !important;
}
.am-input-number .el-input__inner {
    width: 70px !important;
    height: 56px !important;
    font-size: 28px !important;
    text-align: center !important;
    font-weight: bold !important;
}
.el-input-number__decrease { order: 1 !important; }
.am-input-number .el-input { order: 2 !important; }
.el-input-number__increase { order: 3 !important; }
.amelia-v2-booking #amelia-container .am-ec {
    margin-bottom: -2px !important;
    padding: 10px 10px 10px 20px !important;
    border: 2px solid #dd2436 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
}
.amelia-v2-booking .am-ec__actions-price {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}
.amelia-v2-booking .am-ec__actions-price::after {
    content: 'per persoon' !important;
    font-size: 14px !important;
    margin-top: -8px !important;
}

/* =============================================
   HEADER MET ROOKANIMATIE
   ============================================= */
#header {
    position: relative;
    z-index: 1000 !important;
}
#header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    pointer-events: none;
}
@media (min-width: 769px) {
    #header::before {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    }
}
@media (max-width: 768px) {
    #header::before {
        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0.9) 0%,
            rgba(0,0,0,0.75) 35%,
            rgba(0,0,0,0.35) 70%,
            rgba(0,0,0,0) 100%
        );
    }
}
#header_main {
    position: relative;
    z-index: 1001 !important;
}
#header_main::before, #header_main::after {
    content: ''; position: absolute; inset: 0;
    background-repeat: repeat-x;
    background-position: 0 0;
    pointer-events: none;
    background-image: url('https://www.ghosttours.nl/wp-content/uploads/2026/07/smoke2.png');
    background-size: auto 100%;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
}
#header_main::before {
    animation: smoke-drift-1 400s linear infinite;
    z-index: 1;
}
#header_main::after {
    animation: smoke-drift-2 250s linear infinite reverse;
    z-index: 2;
    opacity: 0.8;
}
@keyframes smoke-drift-1 { from { background-position: 0 0; } to { background-position: -1600px 0; } }
@keyframes smoke-drift-2 { from { background-position: 0 0; } to { background-position: -1600px 0; } }
.header_color .header_bg { background-color: transparent !important; }
#top { --enfold-header-color-bg: transparent !important; }
#main {
    position: relative;
    margin-top: -110px !important;
}

/* =============================================
   FIX: BANNER ACHTER HEADER
   ============================================= */
.ls-slider,
.ls-container,
#layerslider_1,
div[data-slider-type="layerslider"] {
    z-index: 999 !important;
}

/* =============================================
   FIX: MENU-OVERLAY LAAT PAGINA/FOOTER ERDOORHEEN ZIEN
   ============================================= */
.av-burger-overlay {
    background-color: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
}
.av-burger-overlay,
.av-burger-overlay-scroll,
.av-burger-overlay-inner {
    opacity: 1 !important;
}

/* =============================================
   FIX: WIT STREEPJE IN HEADER
   ============================================= */
#header_main, #header_main > .container { border: none !important; }
#header_main > .container { display: flex !important; align-items: center !important; }

/* =============================================
   LOGO STIJL
   ============================================= */
#logo, #header #logo, .logo, #header .logo {
    overflow: visible !important; padding: 15px !important; display: inline-block !important; z-index: 1002 !important;
}
#logo img, #header #logo img, .logo img, #header .logo img {
    width: 225px !important; height: auto !important;
    filter: drop-shadow(0 0 5px #000) drop-shadow(0 0 15px #000); transition: filter 0.3s ease; z-index: 1003 !important;
}
#logo img:hover, #header #logo img:hover, .logo img:hover, #header .logo img:hover {
    filter: drop-shadow(0 0 5px #000) drop-shadow(0 0 10px #000) drop-shadow(0 0 20px #000);
}
#logo a, #header #logo a, .logo a, #header .logo a { display: inline-block !important; overflow: visible !important; }

/* =============================================
   NIEUWSBRIEF FORMULIER
   ============================================= */
.inf-main_669c35c595fa7abcc0b82d0ba7d90f66 {
    background-color: transparent !important; padding: 20px !important; margin: 25px auto !important;
    max-width: 400px !important; color: #555555 !important; font-size: 14px !important; border: none !important;
}
.inf-main_669c35c595fa7abcc0b82d0ba7d90f66 span {
    font-size: 12px !important; text-align: center !important; color: white !important;
    display: block !important; margin-bottom: 10px !important;
}
.inf-main_669c35c595fa7abcc0b82d0ba7d90f66 input[type="email"] {
    background-color: white !important; color: #000 !important; border: 1px solid #FFF !important;
    height: 35px !important; width: 100% !important; padding-left: 7px !important; margin-bottom: 15px !important;
}
.inf-rgpd {
    font-size: 10px !important; text-align: center !important; color: white !important;
    background-color: #333 !important; padding: 10px !important; margin: 15px 0 !important;
    border-radius: 5px !important; line-height: 1.4 !important;
}
.inf-submit { text-align: center !important; }
.inf-submit input[type="submit"] {
    background-color: #dd2436 !important; color: white !important; border: none !important;
    padding: 10px 20px !important; font-weight: bold !important; cursor: pointer !important;
    margin-top: 10px !important; display: inline-block !important;
}
.sidebar h3, .sidebar h4, .sidebar .widgettitle, .widget h3, .widgettitle {
    font-size: 24px !important; text-align: center !important; color: white !important;
    margin-bottom: 15px !important; font-weight: bold !important;
}
.inf-main_669c35c595fa7abcc0b82d0ba7d90f66 * { margin: 0 !important; padding: 0 !important; }
.inf-main_669c35c595fa7abcc0b82d0ba7d90f66 { padding: 5px !important; }
.inf-main_669c35c595fa7abcc0b82d0ba7d90f66 .inf-success,
.inf-main_669c35c595fa7abcc0b82d0ba7d90f66 .inf-success *,
.inf-main_669c35c595fa7abcc0b82d0ba7d90f66 .inf-success h4,
.inf-main_669c35c595fa7abcc0b82d0ba7d90f66 .inf-success p {
    color: white !important; text-align: center !important; font-size: 12px !important;
}
.inf-main_669c35c595fa7abcc0b82d0ba7d90f66 .inf-success h4 {
    margin: 0 auto 20px !important; padding: 0 20px !important; display: block !important;
}
.inf-btn {
    color: white !important; text-align: center !important; padding: 12px 25px !important;
    font-size: 16px !important; display: inline-block !important; background-color: #dd2436 !important;
    border: 1px solid white !important; border-radius: 4px !important; margin: 10px auto !important;
}

/* =============================================
   ARCHIEF: FOTO-OVERLAY
   ============================================= */
.image-overlay {
    top: 0 !important;
    left: 0 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
.avia_transform a:hover .image-overlay {
    opacity: 1 !important;
}
.image-overlay .image-overlay-inside::before {
    content: '' !important;
    background-color: transparent !important;
    background-image: url('https://www.ghosttours.nl/wp-content/uploads/2026/06/GT-Tilbrg-email-logo-wit.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    border-radius: 0 !important;
    width: 120px !important;
    height: 80px !important;
    margin: -40px 0 0 -60px !important;
}

/* =============================================
   SOCIAL BUTTONS
   ============================================= */
.social-buttons { display: flex; gap: 10px; justify-content: center; margin: 20px 0; }
.social-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    color: white !important; text-decoration: none !important; border-radius: 50%; transition: all 0.3s; overflow: hidden;
}
.social-btn svg, .social-btn img { width: 20px; height: 20px; }
.social-btn.facebook { background-color: #3b5998; }
.social-btn.instagram { background-color: #e1306c; }
.social-btn.tripadvisor { background-color: #00af87; }
.social-btn.email { background-color: #dd2436; }
.social-btn:hover { transform: scale(1.1); opacity: 0.9; }

/* =============================================
   MENU STIJLEN
   ============================================= */
@media (min-width: 769px) {
    .av-main-nav {
        transform: translateY(-45px);
    }
}
.av-main-nav a {
    font-family: 'Penakut', serif !important; font-size: 20px !important;
    font-weight: bold !important; letter-spacing: 1.5px !important;
    text-shadow: 0 0 5px #000, 0 0 8px #000; transition: text-shadow 0.3s ease;
}
.av-main-nav a:hover {
    text-shadow: 0 0 5px #dd2436, 0 0 10px #dd2436, 0 0 15px #dd2436;
}
.av-main-nav .current-menu-item a, .av-main-nav .current-menu-ancestor a {
    text-shadow: 0 0 5px #dd2436, 0 0 10px #dd2436, 0 0 15px #dd2436;
}
#menu-item-7471 a {
    font-size: 30px !important; transform: rotate(15deg) !important; display: inline-block !important;
}
#after_layer_slider_1.main_color { border-top: none !important; background: transparent !important; padding-top: 0 !important; }
#after_layer_slider_1 .container.av-section-cont-open { border-top: none !important; }

/* =============================================
   AMELIA PAGINATIE + EVENTS
   ============================================= */
#amelia-container.am-elf {
    --am-c-main-bgr: transparent !important; background-color: transparent !important; background: transparent !important;
}
.am-ec__period {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 6px !important;
}
.am-ec__period-date {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 4px !important;
}
.gt-period-weekday {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: normal !important;
}
.am-ec__period .gt-period-weekday,
.am-ec__period .am-ec__period-date__day,
.am-ec__period .am-ec__period-date__month,
.am-ec__period .am-ec__period-time {
    font-weight: bold !important;
}
@media (min-width: 1367px) {
    .am-ec__period {
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
    }
}
.el-pagination .number, .el-pagination .number a, .el-pagination .btn-prev, .el-pagination .btn-next {
    font-family: 'Penakut', serif !important; font-size: 20px !important; font-weight: bold !important;
    letter-spacing: 1.5px !important; color: white !important;
    text-shadow: 0 0 5px #000, 0 0 8px #000 !important; transition: text-shadow 0.3s ease !important;
    background: transparent !important; border: none !important;
}
.el-pagination .number:hover, .el-pagination .number a:hover, .el-pagination .btn-prev:hover, .el-pagination .btn-next:hover {
    text-shadow: 0 0 5px #dd2436, 0 0 10px #dd2436, 0 0 15px #dd2436 !important;
}
.el-pagination .number.is-active, .el-pagination .number.is-active a {
    text-shadow: 0 0 5px #dd2436, 0 0 10px #dd2436, 0 0 15px #dd2436 !important; color: white !important;
}
.am-ec__info-name {
    font-family: 'Penakut', serif !important; font-size: 20px !important;
    font-weight: bold !important; letter-spacing: 1.5px !important; color: #dd2436 !important;
}
.amelia-v2-booking #amelia-container .am-ec__period-text { display: none !important; }

/* =============================================
   MOBIEL: Alle aanpassingen + MENU FIX
   ============================================= */
@media (max-width: 768px) {
    .el-overlay-dialog {
        padding: 0 !important;
    }
    .el-overlay-dialog .el-dialog {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .el-overlay-dialog .el-dialog__body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #header_main { height: auto !important; min-height: 100px !important; max-height: 120px !important; overflow: visible !important; }
    #header_main::before, #header_main::after { background-size: auto 50% !important; }
    #header #logo img, #logo img, .logo img, #header .logo img {
        height: 60px !important; width: auto !important; max-height: 60px !important; max-width: 250px !important;
        object-fit: contain !important; display: block !important; margin: 0 auto !important;
        filter: drop-shadow(0 0 5px #000) drop-shadow(0 0 15px #000) !important;
    }
    #header #logo, #logo, .logo, #header .logo {
        height: auto !important; min-height: 60px !important; padding: 5px 0 !important;
        overflow: visible !important; margin: 0 auto !important; display: block !important; text-align: center !important;
    }
    #header_main > .container {
        display: flex !important; align-items: center !important; justify-content: center !important;
        flex-wrap: wrap !important; overflow: visible !important;
    }
    #main { margin-top: -60px !important; padding-top: 10px !important; }

    .av-hamburger, .avia-menu-toggle {
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        z-index: 100000 !important;
    }

    .av-burger-overlay-scroll {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
    .av-burger-overlay-inner {
        width: 100% !important;
        min-height: 100%;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    #av-burger-menu-ul, .av-burger-overlay-inner ul {
        width: 100% !important;
        text-align: center !important;
    }
    #av-burger-menu-ul li, .av-burger-overlay-inner li {
        text-align: center !important;
        justify-content: center !important;
        width: 100% !important;
        border: none !important;
    }
    .av-burger-overlay a {
        text-align: center !important;
        justify-content: center !important;
        width: 100% !important;
        border: none !important;
    }

    .av-burger-overlay a {
        font-family: 'Penakut', serif !important;
        font-size: 22px !important;
        font-weight: bold !important;
        letter-spacing: 1.5px !important;
        color: #fff !important;
        text-shadow: 0 0 5px #000, 0 0 8px #000;
        transition: text-shadow 0.3s ease;
        background: transparent !important;
        background-color: transparent !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .av-burger-overlay a:hover,
    .av-burger-overlay a:focus,
    .av-burger-overlay a:active {
        background: transparent !important;
        background-color: transparent !important;
        text-shadow: 0 0 5px #dd2436, 0 0 10px #dd2436, 0 0 15px #dd2436;
    }
    .av-burger-overlay .current-menu-item a,
    .av-burger-overlay .current-menu-ancestor a {
        background: transparent !important;
        background-color: transparent !important;
        text-shadow: 0 0 5px #dd2436, 0 0 10px #dd2436, 0 0 15px #dd2436;
    }

    .amelia-v2-booking #amelia-container .am-ec {
        width: 95% !important; margin: 8px auto !important; padding: 10px !important;
        text-align: center !important; display: flex !important; flex-direction: column !important;
        align-items: center !important; overflow: visible !important;
    }
    .amelia-v2-booking .am-ec__image {
        display: none !important;
    }
    .amelia-v2-booking .am-ec__info-other {
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
    }
    .amelia-v2-booking .am-ec__info-availability,
    .amelia-v2-booking .am-ec__info-capacity {
        width: auto !important;
        white-space: nowrap !important;
    }
    .amelia-v2-booking .el-pagination .number, .amelia-v2-booking .el-pagination .btn-prev, .amelia-v2-booking .el-pagination .btn-next {
        font-size: 16px !important;
    }
}

/* =============================================
   TABLET: Amelia-kaarten net zo compact als op mobiel
   ============================================= */
@media (max-width: 1366px) {
    .amelia-v2-booking #amelia-container .am-ec {
        width: 95% !important; margin: 8px auto !important; padding: 10px !important;
        text-align: center !important; display: flex !important; flex-direction: column !important;
        align-items: center !important; overflow: visible !important;
    }
    .amelia-v2-booking .am-ec__image {
        display: none !important;
    }
    .amelia-v2-booking .am-ec__period {
        margin: 0 0 4px 0 !important;
    }
    .amelia-v2-booking .am-ec__actions {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin: 16px 0 0 0 !important;
    }
    .amelia-v2-booking .am-ec__actions-price {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .amelia-v2-booking .am-ec__info-other {
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
    }
    .amelia-v2-booking .am-ec__info-availability,
    .amelia-v2-booking .am-ec__info-capacity {
        width: auto !important;
        white-space: nowrap !important;
    }
}


/* =============================================
   ALGEMENE VOORWAARDEN POPUP (boekingsformulier)
   ============================================= */
.gt-terms-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100000000;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.gt-terms-box {
    background: #fff;
    width: 100%;
    max-width: 800px;
    height: 85vh;
    height: 85dvh;
    border-radius: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.gt-terms-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #dd2436;
    color: #fff;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gt-terms-iframe {
    flex: 1 1 auto;
    width: 100%;
    border: none;
}
@media (max-width: 768px) {
    .gt-terms-box {
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
    }
    .gt-terms-overlay { padding: 0; }
}


/* =============================================
   E-MAILADRES: waarschuwing bij vermoedelijke typfout
   ============================================= */
.gt-email-warning {
    color: #b8860b;
    background: #fff8e1;
    border: 1px solid #f0d878;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    margin-top: 6px;
    display: none;
}
.gt-email-warning.gt-visible {
    display: block;
}


/* =============================================
   CONTACTFORMULIER: velden onder elkaar op mobiel
   ============================================= */
/* E-mail en telefoonnummer stonden naast elkaar (elk ~48% breed) - op
   mobiel te smal om prettig te typen. Nu, net als de andere velden, over
   de volle breedte gestapeld. */
@media (max-width: 768px) {
    .form_element_half {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }
}


/* Ghost Tours: Gotham lettertype overal toepassen (ook in Amelia en andere plugins), behalve op koppen (h1-h6 blijven Penakut) */
/* Amelia gebruikt overal intern de CSS-variabele --am-font-family; deze overschrijven laat Gotham automatisch overal in Amelia doorwerken, behalve waar Amelia zelf al een expliciete override heeft (zoals .am-ec__info-name, die Penakut blijft houden) */
:where(.amelia-v2-booking *, #amelia-container *, #amelia-app-backend-new *, .m-select-list *, .m-popover-panel *, [id^="MazInputPhoneNumber"] *) {
    font-family: 'Gotham', sans-serif !important;
}


/* Ghost Tours: achtergrond vervagen achter Amelia-popups, zelfde effect als bij het mobiele menu */
.el-overlay {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}


/* Ghost Tours: vaste breedte voor datumkolom in evenementenlijst, zodat rijen niet meer verschuiven door wisselende lengte van de dagnaam (Ma/Di/Woe/Vrij etc.) */
.am-els .am-ec__period {
    min-width: 95px;
    flex-shrink: 0;
}


/* Ghost Tours: hamburgermenu forceren vanaf 850px en kleiner (Enfold-instelling gaat pas bij 768px om) */
@media (max-width: 850px) {
    #top #avia-menu > li:not(.av-burger-menu-main) {
        display: none !important;
    }
    #top #avia-menu > li.av-burger-menu-main {
        display: block !important;
    }
}


/* Ghost Tours: logo-hitbox in header beperken tot het logo zelf, zodat het onzichtbare gedeelte eromheen (i.v.m. de aangepaste headerhoogte) geen klikken meer wegvangt van content eronder, zoals de eerste FAQ-rij */
.logo.avia-standard-logo {
    pointer-events: none !important;
}
.logo.avia-standard-logo a {
    pointer-events: auto !important;
}


/* Ghost Tours: hamburgermenu-icoon dezelfde rode gloed geven als elders in het menu (bv. RESERVEER-knop / actief menu-item) */
#top .av-hamburger-box {
    filter: drop-shadow(0 0 5px rgb(221, 36, 54)) drop-shadow(0 0 10px rgb(221, 36, 54)) drop-shadow(0 0 15px rgb(221, 36, 54));
}


/* Ghost Tours: BOEK NU-knop in de evenementenlijst dezelfde rode gloed geven als elders op de pagina (bv. RESERVEER-knop, hamburger-icoon) */
#top .am-ec__actions-btn .am-button--primary {
    box-shadow: 0 0 5px rgb(221, 36, 54), 0 0 10px rgb(221, 36, 54), 0 0 15px rgb(221, 36, 54);
}


/* Ghost Tours: nieuwsbrief-knop (BEVESTIGEN) dezelfde stijl geven als de andere CTA-knoppen: afgeronde hoeken + rode gloed */
#top .inf-submit input[type="submit"] {
    border-radius: 6px;
    box-shadow: 0 0 5px rgb(221, 36, 54), 0 0 10px rgb(221, 36, 54), 0 0 15px rgb(221, 36, 54);
}


/* Ghost Tours: privacy-tekstblokje onder het nieuwsbrief-e-mailveld iets meer ademruimte geven (stond strak tegen de randen) */
#top .inf-main_669c35c595fa7abcc0b82d0ba7d90f66 .inf-rgpd {
    padding: 12px 14px !important;
}


/* Ghost Tours: sidebar-widgets (Nieuwsbrief, Gene Zijde) iets lager laten beginnen dan de content ernaast */
#top .inner_sidebar {
    margin-top: 50px;
}
#top.home .inner_sidebar {
    margin-top: 0;
}


/* Ghost Tours: social-icoontjes (Gene Zijde) bij hover dezelfde rode gloed geven als elders op de pagina */
#top .social-btn:hover {
    filter: drop-shadow(0 0 5px rgb(221, 36, 54)) drop-shadow(0 0 10px rgb(221, 36, 54)) drop-shadow(0 0 15px rgb(221, 36, 54));
}


/* Ghost Tours: 'Scroll naar bovenzijde'-knop bij hover een rode gloed geven en het pijltje wit maken (stond onzichtbaar: rood pijltje op rode achtergrond) */
#top #scroll-top-link:hover {
    box-shadow: 0 0 5px rgb(221, 36, 54), 0 0 10px rgb(221, 36, 54), 0 0 15px rgb(221, 36, 54);
}
#top #scroll-top-link.avia-svg-icon:hover svg:first-child {
    fill: #fff;
}


/* Ghost Tours: RESERVEER-knop in het menu — gloed iets groter maken bij hover */
#top #menu-item-7471 a {
    transition: text-shadow 0.2s ease;
}
#top #menu-item-7471 a:hover {
    text-shadow: rgb(221, 36, 54) 0px 0px 8px, rgb(221, 36, 54) 0px 0px 16px, rgb(221, 36, 54) 0px 0px 24px;
}


/* Ghost Tours: tekst-logo (i.p.v. PNG-afbeelding) in de Penakut-font, zelfde stijl als de rest van de site */
.gt-logo-text {
    display: block;
    font-family: 'Penakut', serif;
    line-height: 1;
    text-align: left;
    text-decoration: none;
}
.gt-logo-line1 {
    display: block;
    color: #fff;
    font-size: 34px;
    text-shadow: rgb(0, 0, 0) 0px 0px 5px, rgb(0, 0, 0) 0px 0px 8px;
}
.gt-logo-line2 {
    display: block;
    color: rgb(221, 36, 54);
    font-size: 58px;
    margin-top: 2px;
    text-shadow: rgba(255, 255, 255, 0.55) 0px 0px 5px, rgba(255, 255, 255, 0.4) 0px 0px 10px, rgba(255, 255, 255, 0.3) 0px 0px 15px;
}


/* Ghost Tours: realtime maanfase-badge in de header (zie functions.php voor de berekening). Positie in de foggy/zwarte zone rechtsboven, onder de RESERVEER-knop. */
#gt-moon-badge {
    position: absolute;
    right: 32px;
    width: 112px;
    height: 112px;
    pointer-events: none;
    z-index: 0;
    --gt-moon-top: 138px;
}
#gt-moon-badge svg {
    display: block;
    width: 100%;
    height: 100%;
}
@media only screen and (max-width: 989px) {
    #gt-moon-badge { right: 18px; width: 88px; height: 88px; --gt-moon-top: 114px; }
}
@media only screen and (max-width: 767px) {
    #gt-moon-badge { right: 8px; width: 70px; height: 70px; --gt-moon-top: 102px; }
}

/* Nieuwsbrief-inschrijfformulier: afgeronde hoeken op het e-mailveld, zelfde radius
   als de knoppen elders op de site. */
#top .inf-form input[type="email"] {
    border-radius: 6px;
}



/* Ghost Tours: maakt de sluitknop (het kruisje) van de Amelia boekings-popup groter, duidelijker
   en makkelijker te raken: een rood rondje met een wit kruisje, passend bij de rest van de huisstijl
   (zelfde rood als de "Sluit"/"BOEK NU!" knoppen: #dd2436). Het kruisje-icoon wordt gerenderd via een
   los lettertype-icoon (.am-icon-close::before) met een eigen, zeer specifieke Amelia-kleurregel,
   dus die moet apart overschreven worden naast de kleur van de omliggende knop. */
#top .el-dialog__headerbtn {
    width: 36px !important;
    height: 36px !important;
    top: 2px !important;
    right: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #dd2436 !important;
    border-radius: 50% !important;
}
#top .el-dialog__headerbtn .el-icon {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
}
#top .el-dialog__headerbtn .el-dialog__close {
    color: #fff !important;
}
#top .el-dialog__headerbtn .am-icon-close::before {
    color: #fff !important;
}


/* Ghost Tours: maakt de tekst van de annuleringsmelding (onder het aantal-veld in de Amelia
   boekingsflow, .gt-booking-cancel-notice) in zijn geheel wat kleiner/compacter, en zorgt dat
   "Let op:" ook echt vetgedrukt wordt weergegeven - de <strong> tag alleen was niet genoeg omdat
   Amelia/Enfold's eigen basisstijlen het font-gewicht van tekst in dit gebied resetten. */
.gt-booking-cancel-notice {
    font-size: 11.5px !important;
}
.gt-booking-cancel-notice strong {
    font-weight: 700 !important;
}


/* Ghost Tours: de annuleringsmelding (.gt-booking-cancel-notice) had een max-breedte van
   slechts 480px, terwijl de omliggende ruimte in de boekings-popup ca. 650px breed is. Daardoor
   werd de tekst onnodig smal afgebroken - bijvoorbeeld "theaterkaartjes) -" kwam in zijn eentje
   op een regel te staan. Door de max-breedte te vergroten past de eerste zin nu compleet op een
   regel en verdwijnen de lelijke afbrekingen, bij elk aantal stervelingen. */
.gt-booking-cancel-notice {
    max-width: 620px !important;
}


/* Ghost Tours: soms (bijvoorbeeld na het wisselen van tabblad/venster terwijl de Amelia
   boekings-popup open staat) blijft het interne "slide up"-paneel van Amelia (waarin de
   stap-inhoud, zoals het aantal-veld, wordt getoond) net iets hoger positioneren dan normaal.
   Dat paneel heeft zelf een z-index (1000) en de sluitknop had dat niet (z-index:auto), waardoor
   de browser volgens de CSS-stackingregels het paneel ALTIJD boven de sluitknop tekent zodra ze
   elkaar raken - ook al staat de knop er visueel wel "overheen". Gevolg: het kruisje is dan wel
   zichtbaar, maar klikken erop doet niets, omdat de klik eigenlijk op het paneel eronder terecht-
   komt. Door de sluitknop een hogere z-index te geven dan het paneel, wint de knop altijd, wat er
   ook met de positie van het paneel gebeurt - en blijft sluiten via het kruisje altijd werken. */
#top .el-dialog__headerbtn {
    z-index: 1001 !important;
}


/* Ghost Tours: verbeteringen voor de mobiele (telefoon) header:
   1) Het hele logo - dus ook "Tilburg" - krijgt een zwarte gloed in plaats van de witte gloed die
      op desktop gebruikt wordt. Tegen de lichte/mistige achtergrond bovenin op mobiel geeft zwart
      meer contrast en laat de tekst beter opvallen.
   2) De maanfase-badge wordt naar linksboven verplaatst (stond rechts, vlak naast het hamburger-
      menu-icoon) zodat hij niets meer in de weg zit op kleine schermen. */
@media only screen and (max-width: 767px) {
    .gt-logo-line2 {
        text-shadow: rgb(0, 0, 0) 0px 0px 5px, rgb(0, 0, 0) 0px 0px 10px, rgb(0, 0, 0) 0px 0px 15px !important;
    }
    #gt-moon-badge {
        left: 8px;
        right: auto;
    }
}


/* Ghost Tours: de maanfase-badge (linksboven, sinds de vorige aanpassing) hing op mobiel te laag
   en viel daardoor deels over de eerste evenementen-kaart heen. Schuift de maan flink omhoog, terug
   de donkere/mistige kopzone in, zodat hij weer volledig los staat van de content eronder. */
@media only screen and (max-width: 767px) {
    #gt-moon-badge {
        --gt-moon-top: 20px;
    }
}


/* Ghost Tours: "GHOST TOURS" (regel 1 van het logo) had op mobiel nog de oorspronkelijke, vrij
   dunne zwarte gloed (maar 2 lagen). Tegen de lichte mistige achtergrond bovenin was dat te zwak
   om goed leesbaar te zijn. Zelfde, sterkere zwarte gloed als "Tilburg" (regel 2) gebruiken. */
@media only screen and (max-width: 767px) {
    .gt-logo-line1 {
        text-shadow: rgb(0, 0, 0) 0px 0px 4px, rgb(0, 0, 0) 0px 0px 6px, rgb(0, 0, 0) 0px 0px 6px, rgb(0, 0, 0) 0px 0px 12px, rgb(0, 0, 0) 0px 0px 18px, rgb(0, 0, 0) 0px 0px 26px !important;
    }
}


/* Ghost Tours: aantal-blok in de boeking gecentreerd stapelen (kop boven, teller eronder, alles gecentreerd) */
.amelia-v2-booking .am-elf__bringing-main{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}
.amelia-v2-booking .am-elf__bringing-heading{
    text-align: center !important;
    width: 100% !important;
}

/* Ghost Tours: checkbox-vinkje in Amelia-boekingswidget was onzichtbaar (transparant) omdat het dezelfde kleurvariabele gebruikte als de widget-achtergrond. Vinkje geforceerd wit. */
.amelia-v2-booking #amelia-container.am-elf .am-checkbox-wrapper .el-checkbox__inner::after {
	border-color: #ffffff !important;
}


/* Ghost Tours: mobiele header-indeling (logo gecentreerd, maan links) doortrekken tot de hamburger-breakpoint van 850px. Onder 768px doet Enfold dit al zelf. */
@media only screen and (min-width: 768px) and (max-width: 850px) {
	.logo.avia-standard-logo {
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
	}
	#gt-moon-badge {
		left: 8px !important;
		right: auto !important;
		--gt-moon-top: 20px !important;
		top: 20px !important;
		width: 70px !important;
		height: 70px !important;
	}
}



/* Ghost Tours: slider verbergen op de hamburger-breakpoint (850px), exact gelijk met het menu. Alleen een verberg-regel (geen force-show), zodat de desktop-initialisatie van LayerSlider niet wordt verstoord. */
@media only screen and (max-width: 850px) {
	#layer_slider_1 { display: none !important; }
}