/*
Theme Name: BBT Version 1
Theme URI: http://www.madtech.com.my
Description: Custom Theme for Bako Boat Tickets
Version: 4.0
Author: Madtech Systems Company
Tags: two columns, widgets, wordpress 6.8, Bootstrap 5.3 custom

This template is a custom theme for use on Bako Boat Tickets's Official Website
All rights reserved by Madtech Systems Company
*/
/* Variables */
:root {
    /* Base Colors */
    --bs-primary: #2b9dee;
    --bs-primary-rgb: 43, 157, 238;
    --bs-body-bg: #f6f7f8;
    --bs-body-font-family: 'Plus Jakarta Sans', sans-serif;
    --c-primary-dark: #1a8cd8;
    --c-bg-dark: #101a22;
    --c-leaf-50: #f1f8f3;
    --c-leaf-100: #e1f0e5;
    --c-sand-50: #fdfcf8;
    --c-sand-100: #f7f5f0;
    --body-text: #1e293b;
    --body-bold:#000;
    --c-text-secondary: 108,117,125;

    /* Typography */
    --text-xxl: 3.4375rem;   /* 55px */
    --text-xl: 2.8125rem;    /* 45px */
    --text-lg: 1.75rem;      /* 28px */
    --text-md: 1.125rem;     /* 18px */
    --text-base: 1rem;       /* 16px */
    --text-sm: 0.875rem;     /* 14px */

    /* Extended Palette */
    --c-slate-50: #f8fafc;
    --c-slate-100: #f1f5f9;
    --c-slate-200: #e2e8f0;
    --c-slate-300: #cbd5e1;
    --c-slate-400: #94a3b8;
    --c-slate-400-rgb: 148, 163, 184;
    --c-slate-500: #64748b;
    --c-slate-800: #1e293b;
    --c-slate-900: #0f172a;
    --c-green-500: #22c55e;
    --c-green-800: #166534;
}

/* General Styles */
html{height:100%;scroll-behavior: smooth;}
body{background-color:var(--background);margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;            
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
    position:relative;color:var(--body-text);height:100%;position:relative;font-size: var(--text-base);}

/* Typography */
h1 { font-size: var(--text-xxl);font-weight: 800; }
h2 { font-size: var(--text-xl); font-weight: 800;}
h3 { font-size: var(--text-lg); font-weight: 600;}
h4 { font-size: var(--text-md); font-weight: 600;}
h5 { font-size: var(--text-base); font-weight:500;}
h6 { font-size:var(--text-sm); }
p { font-size: var(--text-base); }
small { font-size: var(--text-sm); }
b,em,strong{font-weight:600;color:var(--body-bold);}

/* Responsive Typography - Adjust font sizes for smaller screens */
@media (max-width: 767.98px) {
    h1 { font-size: 2.5rem; } /* 40px */
    h2 { font-size: 2rem; }    /* 32px */
    h3 { font-size: 1.5rem; }  /* 24px */
    h4 { font-size: 1.125rem; }/* 18px */
}

@media (max-width: 575.98px) {
    h1 { font-size: 2rem; }    /* 32px */
    h2 { font-size: 1.75rem; } /* 28px */
}


/* Only hide content if JS is enabled */
.js-enabled .hidden {
  display: none !important;
}


/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Hero Section Base Styles */
#menubar {padding-top:16px;padding-bottom:16px;display:flex;flex-direction: row;justify-content: center;}
#mainmenu {display: flex;flex-direction: column;justify-content: center;}
#mainmenu ul li.bbt-button a {background:var(--bs-primary);color:var(--c-slate-50);border-bottom:0px;font-weight: 400;}
#mainmenu ul li.bbt-button a:hover {background:var(--c-bg-dark);font-weight: 400;}

.hero-section {
    min-height: 700px;
    height: 100vh;
    padding: 60px 0;
}

.hero-video-wrapper {
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.hero-section .container {
    position: relative;
    z-index: 5;
}

/* Fallback background image */
.hero-fallback {
    z-index: 1;
}

/* YouTube player base styles */
.hero-youtube {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* Desktop video (landscape 16:9) */
.hero-youtube-desktop {
    width: 100%;
    height: 100vh;
}

@media (min-aspect-ratio: 16/9) {
    .hero-youtube-desktop {
        height: 56.25vw;
    }
}

@media (max-aspect-ratio: 16/9) {
    .hero-youtube-desktop {
        width: 177.78vh;
    }
}

/* Mobile video (portrait 9:16) */
.hero-youtube-mobile {
    width: 100%;
    height: 100vh;
}

@media (min-aspect-ratio: 9/16) {
    .hero-youtube-mobile {
        height: 177.78vw;
    }
}

@media (max-aspect-ratio: 9/16) {
    .hero-youtube-mobile {
        width: 56.25vh;
    }
}

/* Overlay - darker for better text readability */
.hero-overlay {
    background: rgba(0, 0, 0, 0.5);
    z-index: 3;
}

/* Content */
.hero-content {
    z-index: 4;
}

.hero-content h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-content p,
.hero-features li {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-features {
    font-size: 1.1rem;
}

/* Signup Form Card */
.hero-signup-form {
    z-index: 4;
}

.hero-signup-form .card {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
}

.hero-signup-form .form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* When JS loads and video is ready, hide fallback */
.video-loaded .hero-fallback {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Responsive adjustments using Bootstrap breakpoints */

/* Large devices and up */
@media (min-width: 992px) {
    .hero-section {
        min-height: 800px;
    }
    
    .hero-content h1 {
        font-size: 3.5rem;
    }
}

/* Medium devices (tablets) */
@media (max-width: 991.98px) {
    .hero-section {
        min-height: 600px;
        height: auto;
        padding: 40px 0;
    }
    
    .hero-content {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .hero-features {
        display: inline-block;
        text-align: left;
    }
}

/* Small devices (mobile) */
@media (max-width: 767.98px) {
    .hero-section {
        min-height: 500px;
        padding: 30px 0;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-content p {
        font-size: 1rem;
    }
    
    .hero-features {
        font-size: 0.95rem;
    }
    
    .hero-signup-form .card-body {
        padding: 1.5rem !important;
    }
}

@media (max-width: 575.98px) {
    .hero-section {
        min-height: 450px;
    }
    
    .hero-content h1 {
        font-size: 1.75rem;
    }
}

/* Extra large devices */
@media (min-width: 1400px) {
    .hero-section {
        min-height: 900px;
    }
    
    .hero-content h1 {
        font-size: 4rem;
    }
}




/* Booking Card */
.booking-card {
    background: white;
    border-radius: 1rem;
    border: 1px solid var(--c-slate-100);
    box-shadow: 0 25px 50px -12px rgba(16, 26, 34, 0.25);
    padding: 1.5rem;
}

.form-control, .form-select {
    padding: 0.625rem 1rem 0.625rem 2.5rem; /* Left padding for icon */
    border-radius: 0.5rem;
    border-color: var(--c-slate-200);
    background-color: var(--c-slate-50);
    font-size: 1rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(43, 157, 238, 0.25);
}
.input-wrapper {
    position: relative;
}
.input-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-slate-400);
    pointer-events: none;
    font-size: 1.25rem;
}
.form-label-custom {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-slate-500);
    margin-bottom: 0.375rem;
    display: block;
}

div.bbt-form-total input {color:#fff !important;font-size:2rem !important;}

        .badge-pulse {
            background-color: rgba(225, 240, 229, 0.9);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(34, 197, 94, 0.2);
            color: var(--c-green-800);
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .dot-pulse {
            width: 0.5rem;
            height: 0.5rem;
            background-color: var(--c-green-500);
            border-radius: 50%;
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: .5; }
        }

        /* Buttons */
        .btn-primary-custom {
            background-color: var(--bs-primary);
            border: none;
            color: white;
            font-weight: 700;
            padding: 0.875rem 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(43, 157, 238, 0.3);
            transition: all 0.2s;
        }
        .btn-primary-custom:hover {
            background-color: var(--c-primary-dark);
            transform: translateY(-1px);
            color: white;
            box-shadow: 0 15px 20px -3px rgba(43, 157, 238, 0.4);
        }
        .btn-nav {
            padding: 0.625rem 1.5rem;
            border-radius: 9999px;
            font-size: 0.875rem;
        }

        
        /* Footer */

        footer, #footerbot {
            background-color: var(--c-slate-900);
            color: var(--c-slate-300);

            border-top: 1px solid var(--c-slate-800);
        }
        footer{
            padding-top: 3rem;
            padding-bottom: 3rem;
        }
        footer a, #footerbot a{
            color: var(--c-text-secondary);
            text-decoration: none;
            transition: color 0.2s;
        }
        footer a:hover, #footerbot a:hover{
            color: var(--c-slate-300);
        }
        
        div.logo-box {padding:16px;}
        #footerbot p.copyr{}
        #footerbot ul.privacymenu{text-decoration: none;list-style-type: none;font-size:0.875em;}
        #bbt-policies ul.privacymenu li a {color:rgb(var(--c-text-secondary));}
        #bbt-policies ul.privacymenu li a:hover {color:var(--c-slate-400);}
        #footermt {font-size:0.8em;color:var(--c-slate-800) !important;}
        #footermt a:hover {color:var(--c-slate-500) !important;}
        #footer_one h3 {color:#fff;font-size: 1rem;}
        #footer_one ul {list-style-type: none;font-size:1rem;margin-left:0px;margin-right:0px;padding-left:0px;padding-right:0px;padding-top:16px;padding-bottom:16px;}
        #footer_one ul li {margin-left:0px;margin-right:0px;}
        #footer_one ul li a{color:rgb(var(--c-text-secondary));}
        #footer_one ul li a:hover {color:#fff;}
        #footer_two h3 {color:#fff;font-size: 1rem;}
        #footer_two ul {list-style-type: none;font-size:1rem;margin-left:0px;margin-right:0px;padding-left:0px;padding-right:0px;padding-top:16px;padding-bottom:16px;}
        #footer_two ul li {margin-left:0px;margin-right:0px;}
        #footer_two ul li a{color:rgb(var(--c-text-secondary));}
        #footer_two ul li a:hover {color:#fff;}