/***********************************************************************/
/*                           WAZOKA EXTRA CSS                          */
/***********************************************************************/

header {
    border-bottom: 0;
}

#supertop-menu {
    position: sticky;
    top: 0;
    z-index: 9999;
    height: 70px;
    padding: 10px 20px 0;
    background-color: #fff;
    border-bottom: 0;
    transition: background 0.3s ease, color 0.3s ease;
    box-shadow: 0 2px 4px #ccc;
}

#supertop-menu .logo {
    height: 43px;
    width: auto;
    margin: 8px 0;
}

.item {
    color: #333;
}

@media (width < 1024px) {
    nav {
        display: none;
    }
    .hamburger-menu {
        position: relative;
        display: inline;
    }
}

.nav-list li a:hover, .item a:hover {
    color: #ff6600;
}

nav li.menu-selected a:hover,
li.menu-selected a:hover {
    color: #333;
    font-weight: bold;
}

/* Scrolled */
#supertop-menu.scrolled {
    background-color: #222;
    box-shadow: 0 2px 4px #ccc;
    height: 70px; /* keep stable */
}

#supertop-menu.scrolled .menu-top-slide, #supertop-menu.scrolled .menu-top-slide ul {
    background-color: #222;
}

#supertop-menu.scrolled a,
#supertop-menu.scrolled .nav-lang {
    color: #fff;
}

#supertop-menu.scrolled a:hover {
    color: #ff6600;
}

#supertop-menu.scrolled nav li.menu-selected a, #supertop-menu.scrolled li.item.menu-selected a {
    color: #ff6600;
}

#supertop-menu.scrolled nav li.menu-selected a:hover, #supertop-menu.scrolled li.item.menu-selected a:hover {
    color: #fff;
}

.menu-top-slide li.item {
    border-bottom: 1px solid #00000050;
}

#supertop-menu.scrolled .menu-top-slide li.item {
    border-bottom: 1px solid #ffffff50;
}

button#menu-button:focus, button#menu-button:hover {
    background-color: #ccc;
}

header.wazoka-header img.logo{
    height: auto;
    margin: 8px 0;
}

.banner-bg {
    height: auto;
    background: url("/assets/images/wazoka/banner-bg.webp") no-repeat 50% 50%;
    background-size: cover;
    margin: 0;
    padding: 1rem 0;
}

@media (width < 1200px) {
    .banner-bg {
        width: 92%;
        padding: 0 4%;
        padding-bottom: 2rem;
    }
}

.banner-home-text, .mini-banner, ul.speed, .my-box, .gray-box, .preview-demo, .ja-cut {
    word-break: keep-all;
}

.banner-text {
    font-size: 1.2rem;
}

.banner-home-picture {
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid .banner-home-picture img {
    width: 472px;
    height: auto;
}

@media (max-width: 760px) {
    .grid .banner-home-picture img {
        width: 350px;
        height: auto;
    }
}

h1 {
    font-size: 1.7em;
}

a.btn:hover, button:hover {
    color: white;
    background-color: #333;
}

.grid.mini-banner {
    text-align: center;
    padding: 2rem 0;
    border-bottom: 1px dotted #ccc;
}

.full-width {
    width: 100%;
}

ul.speed {
    padding: 0;
    margin: 0;
}

.speed li {
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding-bottom: 0.5rem;
}

h2.home {
    margin-bottom: 2rem !important;
    text-align: center;
    font-size: 1.5rem !important;
}

.grid.three {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

@media (width < 600px) {
    .grid.three {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    }
}

/******************* BOXES WITH MOVING BG IMAGE *******************/

.my-box {
  background-color: #eee;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  height: 200px;
}

@media (width < 600px) {
    .my-box {
        height: auto;
    }
}

/* Make sure the text stays above the image */
.my-box > div {
  position: relative;
  z-index: 2;
  transition: color 0.6s ease;
}

.my-box h3 {
  float: left;
  margin: 0.5rem;
  transition: color 0.6s ease;
  color: #333;  
}

p.text-box-home, p.fake-link {
    width: 100%;
    margin: 0;
    float: left;
    padding-top: 0.5rem;
}

p.text-box-home {
    color: #333;
    transition: color 0.6s ease;
}

.fake-link {
    color: #ff4400;
    text-decoration: underline;
    transition: color 0.6s ease;
}

.my-box:hover > div, .my-box:hover h3, .my-box:hover .text-box-home, .my-box:hover .fake-link {
  color: #fff;
}

/* Hidden image layer */
.my-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #ff6600;
  background-image: url('/assets/images/wazoka/waves.svg');
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center 250px;
  opacity: 0;
  z-index: 1; /* image stays behind the text */
  transition:
    opacity 0.6s ease,
    background-position 0.6s ease;
}

/* Hover: fade in + slide upward */
.my-box:hover::before {
  opacity: 1;
  background-position: center 210px;
  cursor: pointer;
}

@media (width < 600px) {
    .my-box:hover::before {
      background-color: #ff6600;
      background-image: none;
      cursor: pointer;
    }
}


/******************* HOME ICONS *******************/

/* Base icon style */
.concept-icon, .menu-icon, .takeout-icon, .custom-icon, .seo-icon, .fast-icon, .multilanguages-icon, .booking-icon, .notification-icon {
    width: 50px;
    height: 50px;
    margin-top: 0;
    float: left;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Default icon (bottom layer) */
.concept-icon {
    background-image: url('/assets/images/icons/concept.svg');
}
.menu-icon {
    background-image: url('/assets/images/icons/menus.svg');
}
.takeout-icon {
    background-image: url('/assets/images/icons/takeout.svg');
}
.custom-icon {
    background-image: url('/assets/images/icons/code.svg');
}
.seo-icon {
    background-image: url('/assets/images/icons/seo.svg');
}
.fast-icon {
    background-image: url('/assets/images/icons/fast.svg');
}
.multilanguages-icon {
    background-image: url('/assets/images/icons/multilanguage.svg');
}
.booking-icon {
    background-image: url('/assets/images/icons/booking.svg');
}
.notification-icon {
    background-image: url('/assets/images/icons/notification.svg');
}

/* Hover icon (top layer) */
.concept-icon::after,
.menu-icon::after,
.takeout-icon::after,
.custom-icon::after,
.seo-icon::after,
.fast-icon::after,
.multilanguages-icon::after,
.booking-icon::after,
.notification-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Assign hover images */
.concept-icon::after {
    background-image: url('/assets/images/icons/concept2.svg');
}
.menu-icon::after {
    background-image: url('/assets/images/icons/menus2.svg');
}
.takeout-icon::after {
    background-image: url('/assets/images/icons/takeout2.svg');
}
.custom-icon::after {
    background-image: url('/assets/images/icons/code2.svg');
}
.seo-icon::after {
    background-image: url('/assets/images/icons/seo2.svg');
}
.fast-icon::after {
    background-image: url('/assets/images/icons/fast2.svg');
}
.multilanguages-icon::after {
    background-image: url('/assets/images/icons/multilanguage2.svg');
}
.booking-icon::after {
    background-image: url('/assets/images/icons/booking2.svg');
}
.notification-icon::after {
    background-image: url('/assets/images/icons/notification2.svg');
}

/* Fade in on hover */
.my-box:hover .concept-icon::after,
.my-box:hover .menu-icon::after,
.my-box:hover .takeout-icon::after,
.my-box:hover .custom-icon::after,
.my-box:hover .seo-icon::after,
.my-box:hover .fast-icon::after,
.my-box:hover .multilanguages-icon::after,
.my-box:hover .booking-icon::after,
.my-box:hover .notification-icon::after {
    opacity: 1;
}

.color-box, .color-box-link, .gray-box, .gray-box-link {
    align-items: center;
    padding: 1.5rem;
    border-radius: 8px;
    transition: background-color 0.4s ease, color 0.4s ease;
}

.color-box, .color-box-link {
    background-color: #ff6600;
}

.color-box, .color-box h3 {
    color: #fff;
}

.gray-box, .gray-box-link, .gray-box-form {
    background-color: #eee;
    color: #333;
}

.color-box h3, .gray-box h3 {
    margin: 0.5rem 0;
    text-align: center;
}

h3.other-platforms {
    font-size: 2.15rem;
}

@media (width < 900px) {
    h3.other-platforms {
        font-size: 1.5rem;
    }
}

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

ul.comparison li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
}

ul.comparison li.check::before {
  content: "✔";
  color: #2ecc71; /* green */
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

ul.comparison li.cross::before { 
    content: "✖"; 
    color: #e74c3c; /* red */ 
    font-weight: bold; 
    position: absolute; 
    left: 0; 
    top: 0; 
}

p.price {
    font-size: 1.2em;
}

.features-h2 {
    text-align: left;
    margin: 0 !important;
    padding-left: 0.5rem;
    padding-top: 0.5rem;
    display: inline-block;
}

.feature-block {
    margin-top: 2rem;
}

section.features-page ul, section.pricing ul {
    margin: 0;
    padding-left: 1.2rem;
}

.notice-japan-only {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: #b33;
    font-weight: 500;
}

.alert {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 14px;
}

.alert-error {
    background: #ffe5e5;
    color: #b30000;
    border: 1px solid #ffb3b3;
}

.alert-success {
    background: #e6ffe6;
    color: #006600;
    border: 1px solid #99ff99;
}

.status-content {
    text-align: center;
}

.form-error {
    background: #ffe5e5;
    color: #b30000;
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}


/* START PAGE */
.login {
    text-align: center;
}

.login-form {
    align-items: center;
    padding: 12px;
    background: #eee;
    border-radius: 6px;
    border: 1px solid #ddd;
    width: fit-content;
    margin: 2rem auto;
}

.login-form button {
    display: block;
    margin: 2rem auto;
}

.auth-box {
    max-width: 800px;
    margin: 0 auto;
}

.text-start {
    text-align: center;
}

.auth-heading {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.oauth-btn {
    text-align: center;
    padding: 0.9rem;
    border-radius: 8px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.oauth-icon {
    display: flex;
    align-items: center;
}

.google-white-btn {
    background: #ffffff;
    border: 1px solid #ddd;
}

.google-white-btn:hover {
    color: #ccc;
}

.line-green-btn {
    background: #06C755;
    color: #fff;
    border: 1px solid #ddd;
    transition: background 0.3s ease;
    padding: 0.8rem;
}

.line-green-btn:hover {
    background: linear-gradient(
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.1)
    ), #06C755;
    color: #fff;
}

.line-green-btn:active {
    background: linear-gradient(
        rgba(0, 0, 0, 0.3),
        rgba(0, 0, 0, 0.3)
    ), #06C755;
    color: #fff;
}

.oauth-separator {
    text-align: center;
    margin: 1.5rem 0 1rem;
}

.login-container {
    margin-top: 2rem;
    text-align: center;
}

.login-container form {
    margin-top: 1rem;
}


/* FOOTER */
svg.wave {
    margin-bottom: -1rem;
}

footer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

footer li {
    margin: 1rem 0;
}

.copyright {
    width: 100%;
    border-top: 1px solid #aaa;
    padding-top: 20px;
    text-align: center;
    margin-top: 2rem;
}