:root {
  --color-text-default: #323232;
  --font-family-primary: 'Open Sans', sans-serif;
}

/* Base styles */
body {
    margin: 0;
    font-family: var(--font-family-primary);
    color: var(--color-text-default);
}


/* Japanese page override - AFTER body */
html.japanese-page {
  --font-family-primary: 'Noto Sans JP', sans-serif;
}

html.japanese-page body {
  font-family: var(--font-family-primary);
}

html.japanese-page .use-open-sans {
  font-family: 'Open Sans', sans-serif;
}
        
/* Custom styles for mega menu */
.mega-menu {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 100px;
    background: white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-top: 1px solid #e5e7eb;
    z-index: 50;
}
        
.mega-menu.active {
    display: block;
}

/* CSS to position the footer banner correctly */
#newsletter-banner-footer {
/* Position at top of footer, overlapping content above */
  transform: translateY(-50%); /* Move up by half its height so it overlaps both content and footer */
}

/* Add some top padding to footer to account for banner overlap */
footer.relative {
    padding-top: 62.5px; /* Half of banner height (125px / 2) to prevent content overlap */
}


/* Safari-specific scale increase */
@supports (-webkit-hyphens:none) {
    .hero-video-wrapper iframe,
    iframe[src*="youtube.com"] {
        transform: translate(-50%, -50%) scale(1.3) !important;
    }
}

/* Safari-specific to recognized text nowrap */
.text-nowrap {
    white-space: nowrap !important;
}

/* Base header styles - ALWAYS position fixed */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: all 0.3s ease;
}


/* Mobile */
@media (max-width: 1159px) {
    body {
        margin-top: 58px;
    }
    
    #header {
        height: 58px;
        background: rgba(255, 255, 255, 1) !important;
        backdrop-filter: blur(8px) !important;
    }
}

.logo-image {
    transition: opacity 0.3s ease;
}

.logo-image.hidden {
    opacity: 0;
}


@media (min-width: 1160px) {
    body {
        margin-top: 0; /* No margin on desktop */
    }
    
    #header {
        height: 100px;
        background: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }
    
    /* When scrolled or mega menu open on desktop */
    #header.scrolled,
    #header.mega-menu-open {
        background: rgba(255, 255, 255, 1) !important;
        backdrop-filter: blur(8px) !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Target navigation links when header is scrolled */
    #header.scrolled nav a,
    #header.scrolled .nav-link,
    #header.mega-menu-open nav a,
    #header.mega-menu-open .nav-link {
        /* color:#101010 !important; */
    }
    
    /* Target all text elements in header when scrolled */
    #header.scrolled,
    #header.scrolled .nav-menu,
    #header.mega-menu-open,
    #header.mega-menu-open .nav-menu {
        color:#101010 !important;
    }

    #header.mega-menu-open .anchor:hover {
        color: white !important;
    }

    #header.nav-item-with-gradient:hover {
       background: rgba(255, 255, 255, 1) !important;
    }
    
    /* More specific targeting if you have specific classes */
    #header.scrolled .navigation-item,
    #header.scrolled .header-text,
    #header.scrolled .menu-item,
    #header.mega-menu-open .navigation-item,
    #header.mega-menu-open .header-text,
    #header.mega-menu-open .menu-item {
        /* color:#101010 !important; */
    }
    
    /* Target logo text if applicable */
    #header.scrolled .logo,
    #header.scrolled .brand,
    #header.mega-menu-open .logo,
    #header.mega-menu-open .brand {
        /* color:#101010 !important; */
    }
}

/* ===titles====  --- section, card */

/* section */
.section-title {
  font-size: 26px;
}

@media (min-width: 640px) {
  /*.section-title { font-size: 26px; } */
}

@media (min-width: 768px) {
  /* .section-title { font-size: 28px; } */
}

@media (min-width: 1024px) {
  .section-title { font-size: 26px; }
}

@media (min-width: 1160px) {
  .section-title { font-size: 28px; } 
}

@media (min-width: 1440px) {
  .section-title { font-size: 28px; }
}

@media (min-width: 1920px) {
  .section-title { font-size: 28px; }
}


.section-title-ja {
  font-size: 26px;
}

@media (min-width: 640px) {
  /* .section-title-ja { font-size: 25px; } */
}

@media (min-width: 768px) {
  /* .section-title-ja { font-size: 26px; } */
}

@media (min-width: 1024px) {
  .section-title-ja { font-size: 26px; }
}

@media (min-width: 1160px) {
  .section-title-ja { font-size: 28px; }
}

@media (min-width: 1440px) {
  .section-title-ja { font-size: 28px; }
}

@media (min-width: 1920px) {
  .section-title-ja { font-size: 28px; }
}


/* cards */

.card-title {
  font-size: 22px;
}

@media (min-width: 640px) {
  .card-title { font-size: 23px; }
}

@media (min-width: 768px) {
  .card-title { font-size: 23px; }
}

@media (min-width: 1024px) {
  .card-title { font-size: 23px; }
}

@media (min-width: 1160px) {
  .card-title { font-size: 24px; }
}

@media (min-width: 1440px) {
  .card-title { font-size: 24px; }
}

@media (min-width: 1920px) {
  .card-title { font-size: 24px; }
}


/* Navigation item gradient underline positioned at nav bottom */
.nav-item-with-gradient {
    position: relative;
}

.nav-item-with-gradient::after {
    content: '';
    position: absolute;
    bottom: -16px; /* Adjust this value to align with nav container bottom */
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg, #CC0000 0%, #EB5514 50%, #FFB900 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.nav-item-with-gradient:hover::after {
    transform: scaleX(1);
}


.mobile-menu {
    position: fixed;
    top: 58px; /* Height of your mobile header */
    left: 0;
    right: 0;
    width: 100vw;
    max-height: calc(100vh - 58px);
    overflow-y: auto;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    /* Remove display: none - use only transform */
    visibility: hidden;
}

.mobile-menu.active {
    transform: translateX(0);
    /* Remove display: block - not needed */
    visibility: visible;
}

.menu-panels {
    display: flex;
    width: 200%; /* Two panels side by side */
    height: 100%;
    transition: transform 0.4s ease;
}

.menu-panels.show-submenu {
    transform: translateX(-50%); /* Slide to show second panel */
}

/* Individual panels */
.menu-panel {
    width: 50%;
    height: 100%;
    overflow-y: auto;
    background: white;
}

.menu-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-panel li {
    border-bottom: 1px solid #ACAAAA;
}

.menu-panel a, .menu-panel button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 65px;
    color: #323232;
    text-decoration: none;
    font-weight: 500;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.menu-panel a:hover, .menu-panel button:hover {
    color: white;
    background: #545454;
}

/* Back button specific styles */
.back-button {
    padding-left: 16px !important;
    font-weight: 600;
}

.back-button span {
    color: #323232;
}

.back-button i {
    margin-right: 8px;
}




.nobg-hover {
    color: #101010 !important;
    background:white !important;
}

/* Submenu specific styles */
.submenu-panel {
    background: #f8f9fa;
}


/*
.submenu-panel .back-button {
    background: #545454;
    color: white;
    border-bottom: 1px solid #545454;
}
*/

.submenu-panel .back-button:hover {
    background: #545454;
    color: white;
}

.submenu-panel .back-button i {
    margin-right: 12px;
}

.submenu-panel .menu-item {
    background: white;
    border-bottom: 1px solid #e5e7eb;
}

.submenu-panel .menu-item:hover {
    background: #e5e7eb;
}

 /* Language section at bottom */
.language-section {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    background: white;
    height: 40vh;
    color: #323232;
    align-items: flex-start;
    padding-top: 40px;
}

.selected-lang {
  text-decoration: none !important; /* remove default underline */
  border-bottom: 1px solid currentColor; /*  */
  /*padding-bottom: 1px; /*  */
}

.non-selected {
  position: relative; /* important! */
  text-decoration: none; /* remove default underline */
}

.non-selected::after {
  content: '';
  position: absolute;
  bottom: -0px; /* distance from text */
  left: 0;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width 0.3s ease;
}

.non-selected:hover::after {
  width: 100%;
}




@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.vertical-line {
  border: none;
  border-left: 1px solid #707070; /* vertical line */
  height: 100px;          /* adjust height */
  width: 0;               /* no width */
  margin: 0 10px;         /* spacing around */
}


@media (max-width: 1159px) {

.vertical-line {
  border: none;
  border-left: 1px solid #707070;
  height: 100px;       
  width: 0;             
  margin: 0px 0px;        
}

}



/* for header */

header a {
    position: relative;
    text-decoration: none;
    /* display: inline-block; */
}

header a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: currentColor;
    transition: width 0.3s ease;
}

header a:hover::after {
    width: 100%;
}

header .space-y-2 a::after,
header .space-y-3 a::after {
    bottom: -1px;
}

/* Exception: Remove underline effect for specific class */
header a.no-underline::after {
    display: none;
}

/* for footer */

footer a {
    position: relative;
    text-decoration: none;
    display: inline-block;
}

footer a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: currentColor;
    transition: width 0.3s ease;
}

footer a:hover::after {
    width: 100%;
}

footer .space-y-2 a::after,
footer .space-y-3 a::after {
    bottom: -1px;
}

/* Exception: Remove underline effect for specific class */
footer a.no-underline::after {
    display: none;
}

/* for about us anchor */

.nav_link a {
    position: relative;
    text-decoration: none;
    /* display: inline-block; */
}

.nav_link a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: currentColor;
    transition: width 0.3s ease;
}

.nav_link a:hover::after {
    width: 90%;
}

.nav_link .space-y-2 a::after,
.nav_link .space-y-3 a::after {
    bottom: -1px;
}


.reservation_contact a {
    position: relative;
    text-decoration: none;
    display: inline-block; 
    /* display: inline-block; */
}

.reservation_contact a::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 0;
    height: 0.5px;
    background-color: currentColor;
    transition: width 0.3s ease;
}

.reservation_contact a:hover::after {
    width: 100%;
}

.reservation_contact .space-y-1 a::after,
.reservation_contact .space-y-1 a::after {
    bottom: 2px;
}


.reservation_contact a.no-underline::after {
    display: none;
}


/* about us anchor */
#jtbusa, #message, #our-services, #company-profile, #branch-info {
  scroll-margin-top: 120px;
}

/* legal */
#ContactUs {
  scroll-margin-top: 120px;
}

/* Legal Page */


.accordion-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: auto;
    transition: all 0.3s ease;
}

.accordion-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.accordion-header {
    background: #e5e7eb;
    padding: 20px 24px;
    cursor: pointer;
    display: flex;
    justify-content: between;
    align-items: center;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

.accordion-header:hover {
    background: #d2d5d8;
}

.accordion-header.active {
    background: #d2d5d8;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.accordion-title {
    font-size: 18px;
    font-weight: 600;
    flex-grow: 1;
    margin: 0;
}

.accordion-icon {
    font-size: 16px;
    transition: transform 0.3s ease;
    margin-left: 16px;
}

.accordion-header.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: white;
}

.accordion-content.active {
     max-height: 2000px; /* need adjust when large conten */ 
}

.accordion-body {
    padding: 24px;
    line-height: 1.7;
    color: var(--jtb-gray-darkest);
    font-size: 16px;
}

.terms-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(183, 180, 180, 0.2);
    color: black;
    border-radius: 50%;
    font-weight: 600;
    font-size: 14px;
    margin-right: 16px;
    flex-shrink: 0;
}

.accordion-header.active .terms-number {
    background: #b7b8ba;
}

.hero-gradient {
    /* background: linear-gradient(135deg, var(--jtb-red) 0%, #d63447 50%, var(--jtb-orange) 100%); */
}

.breadcrumb-link {
    color: var(--jtb-red);
    text-decoration: none;
}

.breadcrumb-link:hover {
    text-decoration: underline;
}

/* Quick scroll animations */
/* Custom animation classes */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}
        
.fade-in-up.animate {
    opacity: 1;
    transform: translateY(0);
}
        
.fade-in-down {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.6s ease-out;
}
        
.fade-in-down.animate {
    opacity: 1;
    transform: translateY(0);
}
        
.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s ease-out;
}
        
.fade-in-left.animate {
    opacity: 1;
    transform: translateX(0);
}
        
.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s ease-out;
}
        
.fade-in-right.animate {
    opacity: 1;
    transform: translateX(0);
}
        
.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.7s ease-out;
}
        
.scale-in.animate {
    opacity: 1;
    transform: scale(1);
}
        
.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}
        
.fade-in.animate {
    opacity: 1;
}