/* Washlet Plus Unique CSS */
/* This file will be populated with styles from the source files */

/* Override negative margin-top that makes header appear smaller */
[data-namespace='index'] {
    margin-top: 0 !important;
}

/* Override body_inner overflow that might hide content */
body {
    display: block !important;
    visibility: visible !important;
}

#body_inner,
#page,
.global-page {
    overflow: visible !important;
    display: block !important;
    visibility: visible !important;
}

/* Ensure content is visible */
.container-index {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 100vh;
}

.detail.index {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.main__v {
    display: block !important;
    visibility: visible !important;
    width: 100%;
}

.main__v img {
    display: block !important;
    width: 100%;
    height: auto;
}

.container {
    display: block !important;
    visibility: visible !important;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

section {
    display: block !important;
    visibility: visible !important;
}

/* Override animsition hiding behavior */
.animsition,
.animsition-overlay-slide {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.animsition-loading {
    display: none !important;
}

/* Make header navigation text bigger to match washlet page */
/* Override the 13px body font-size from custom.css for header navigation */

/* Set root font-size context for header to make rem calculations use 16px */
header {
    font-size: 16px !important;
}

/* Target all navigation elements */
header nav,
header .nav,
header .navContent,
header .navContentInner,
header .mainNav,
header .mainNavWrapper,
header .mainNavInner {
    font-size: 16px !important;
}

/* Target navigation links with hasSub class (most specific) */
header .hasSub a,
header .hasSub button,
header .hasSub > a,
header .hasSub > button {
    font-size: 16px !important;
}

/* Target all navigation links */
header nav a,
header nav button,
header .nav a,
header .nav button,
header .navContent a,
header .navContent button {
    font-size: 16px !important;
}

/* Override any text-[1rem] or similar Tailwind classes */
header [class*="text-"] {
    font-size: 16px !important;
}

/* Isolate header from Bootstrap CSS - ensure it loads after Bootstrap */
header {
    isolation: isolate;
}

/* Ensure navigation module styles take precedence over Bootstrap */
header .hasSub,
header .noSub {
    position: relative;
}

/* Resize and center the concept image */
.concept-inner h2 {
    text-align: center;
}

.concept-inner h2 img {
    max-width: 75%;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Add subtle background image behind washlet-design-text */
.washlet-design-text {
    position: relative;
}

.washlet-design-text-inner {
    position: relative;
    z-index: 1;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.washlet-design-text-inner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('/assets/global/washletplus/images/clean-synergy-bg.png') no-repeat center center;
    background-size: 45%;
    background-position: center center;
    opacity: 0.35;
    z-index: -1;
    pointer-events: none;
}

.washlet-design-text-inner p {
    position: relative;
    z-index: 1;
    text-align: left !important;
    width: 100% !important;
    margin: 0;
}

.washlet-design-text-inner .watch-video-btn {
    position: relative;
    z-index: 1;
    width: 100% !important;
}

.washlet-design-text-inner .watch-video-btn a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: black !important;
}

/* Video preview - image is clickable */
.washlet-design-movie {
    position: relative;
}

.washlet-design-movie a {
    position: relative;
    display: block;
    cursor: pointer;
}

.washlet-design-movie img {
    width: 100%;
    height: auto;
    display: block;
}

/* Center the washlet-plus-image */
.minimized-image {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.minimized-image img {
    display: block;
    margin: 0 auto;
    max-height: 70vh;
    height: auto;
    width: auto;
    object-fit: contain;
}

/* Make numbers inside circles white and ensure they're visible */
.modal-btn {
    color: white !important;
    cursor: pointer !important;
    z-index: 10 !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.modal-btn.btn,
.btn.btn-lg.modal-btn {
    color: white !important;
    cursor: pointer !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure minimized section doesn't create extra space */
#minimized {
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    margin: 60px 0 120px 0 !important;
    padding: 40px 0 !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}

.minimized-list {
    position: relative !important;
    display: block !important;
    visibility: visible !important;
}

/* Ensure buttons maintain their absolute positioning on the image */
[data-target="#modal01"],
[data-target="#modal02"],
[data-target="#modal03"] {
    position: absolute !important;
}

/* Remove extra space from rows and containers */
.row {
    margin-bottom: 0 !important;
}

.row:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure description boxes are visible when fadeUp class is added */
.minimized-list .description-box {
    display: block !important;
    visibility: visible !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
    background: white !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    overflow: visible !important;
}

/* Override the default opacity: 0 from custom.css when fadeUp is added */
.fadeUp {
    opacity: 1 !important;
    margin-top: 0 !important;
}

.minimized-list .description-box.fadeUp {
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
    z-index: 1000 !important;
    margin-top: -20px !important;
}

/* Move modal03 box up more */
.minimized-list #modal03.fadeUp {
    margin-top: -40px !important;
}

.minimized-list .description-box img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.minimized-list .description-box p {
    display: block !important;
    visibility: visible !important;
    color: #000 !important;
    opacity: 1 !important;
}

.minimized-list [id$="-arrow"] {
    display: block !important;
    visibility: visible !important;
    z-index: 999 !important;
    pointer-events: none !important;
}

.minimized-list [id$="-arrow"].fadeUp {
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
    z-index: 999 !important;
}

/* Ensure header matches washlet page size */
header,
header * {
    font-size: 16px !important;
}

/* Make breadcrumbs black (not blue) to match other pages - override Bootstrap and all other styles */
.bottomBreadcrumbs nav,
.bottomBreadcrumbs nav a,
.bottomBreadcrumbs .breadcrumbs,
.bottomBreadcrumbs .breadcrumbs a,
.bottomBreadcrumbs .breadcrumbs.default,
.bottomBreadcrumbs .breadcrumbs.default a,
.bottomBreadcrumbs [class*="breadcrumb"] a,
.bottomBreadcrumbs [class*="breadcrumb"] {
    color: #000000 !important;
    text-decoration: none !important;
}

.bottomBreadcrumbs .separator {
    color: #000000 !important;
}

/* Make TOP button and arrow bigger */
button[class*="backToTop"],
.backToTop,
[class*="backToTop"] {
    font-size: 1.2rem !important;
}

button[class*="backToTop"] .icon,
.backToTop .icon,
[class*="backToTop"] .icon,
button[class*="backToTop"] [class*="icon"],
.backToTop [class*="icon"] {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

button[class*="backToTop"] .label,
.backToTop .label,
[class*="backToTop"] .label,
button[class*="backToTop"] [class*="label"],
.backToTop [class*="label"] {
    font-size: 1.2rem !important;
}

/* Increase footer text sizes and ensure headings are bold - use high specificity to override CSS modules and custom.css */
/* Use same font family as other pages */
footer [class*="columnTitle"],
footer [class*="globalNetworkTitle"],
footer .footerNavColum [class*="columnTitle"],
footer .footerGlobalNetwork [class*="columnTitle"],
footer .networkColum [class*="columnTitle"] {
    font-size: 1.404rem !important;
    font-weight: 700 !important;
    font-family: "Poppins", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif !important;
    color: #000000 !important;
}

footer [class*="footerNavItem"] span,
footer [class*="footerGlobalNetworkItem"] span,
footer .footerNavColum ul li,
footer .networkColum ul li,
footer .footerNavColum ul li a,
footer .networkColum ul li a,
footer .footerNavColum ul li button,
footer .networkColum ul li button,
footer ul li span,
footer ul li a,
footer ul li button {
    font-size: 1.43rem !important;
    font-family: "Poppins", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif !important;
}

/* TOP button - use default size (removed overrides) */

/* Hide transcript/description bar in video modal - not needed for YouTube videos */
.modal transcript,
.modal .transcript,
.modal .transcript-toggle,
.modal [class*="transcript"],
.modal [id*="transcript"] {
    display: none !important;
    visibility: hidden !important;
}