/* SENSHINWAHO TV Display - Brand Consistent CSS */

    /* Import brand fonts */
    @import url('https://fonts.googleapis.com/css2?family=Federo&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');

    /* CSS Variables for Font Sizes */
    :root {
      /* Base font sizes for 4K TV viewing */
      --font-micro: 14px;
      /* For copyright, small notes */
      --font-tiny: 16px;
      /* For copyright, small notes */
      --font-small: 18px;
      /* For meta information */
      --font-base: 20px;
      /* Base body text */
      --font-medium: 24px;
      /* Section subtitles */
      --font-large: 32px;
      /* Section titles */
      --font-xlarge: 42px;
      /* Navigation items */
      --font-xxlarge: 48px;
      /* Main headings */
      --font-huge: 64px;
      /* Hero text */

      /* Specific UI element sizes */
      --nav-item-size: 36px;
      --wifi-title-size: 28px;
      --wifi-text-size: 20px;
      --panel-title-size: 32px;
      --panel-subtitle-size: 36px;
      --panel-description-size: 18px;
      --facility-title-size: 24px;
      --facility-detail-title-size: 36px;
      --facility-detail-desc-size: 20px;
      --facility-qr-text-size: 32px;
      --itinerary-title-size: 52px;
      --itinerary-subtitle-size: 20px;
      --day-title-size: 36px;
      --timeline-time-size: 28px;
      --timeline-activity-size: 22px;
      --sightseeing-text-size: 24px;
      --service-title-size: 36px;
      --service-details-size: 20px;
      --service-subtitle-size: 18px;
      --menu-title-size: 52px;
      --menu-section-size: 24px;
      --menu-subsection-size: 20px;
      --menu-item-size: 20px;
      --terms-main-title-size: 38px;
      --terms-section-title-size: 26px;
      --terms-text-size: 18px;
      --article-number-size: 20px;
      --table-text-size: 18px;
      --note-text-size: 18px;
      --remote-guide-title-size: 24px;
      --remote-guide-text-size: 20px;
      --back-button-size: 20px;
      --lifestyle-desc-title-size: 32px;
      --lifestyle-desc-text-size: 22px;

      /* Line heights for readability */
      --line-height-tight: 1.4;
      --line-height-normal: 1.6;
      --line-height-relaxed: 1.8;
      --line-height-loose: 2;
    }

    /* Media query for even larger displays or closer viewing */
    @media (min-width: 3840px) {
      :root {
        --font-tiny: 18px;
        --font-small: 22px;
        --font-base: 24px;
        --font-medium: 28px;
        --font-large: 36px;
        --font-xlarge: 48px;
        --font-xxlarge: 56px;
        --font-huge: 72px;

        --nav-item-size: 48px;
        --wifi-title-size: 32px;
        --wifi-text-size: 24px;
        --panel-title-size: 36px;
        --panel-subtitle-size: 42px;
        --panel-description-size: 22px;
        --facility-title-size: 28px;
        --facility-detail-title-size: 42px;
        --facility-detail-desc-size: 24px;
        --facility-qr-text-size: 36px;
        --itinerary-title-size: 60px;
        --itinerary-subtitle-size: 24px;
        --day-title-size: 40px;
        --timeline-time-size: 32px;
        --timeline-activity-size: 26px;
        --sightseeing-text-size: 28px;
        --service-title-size: 42px;
        --service-details-size: 24px;
        --service-subtitle-size: 22px;
        --menu-title-size: 60px;
        --menu-section-size: 28px;
        --menu-subsection-size: 24px;
        --menu-item-size: 24px;
        --terms-main-title-size: 44px;
        --terms-section-title-size: 30px;
        --terms-text-size: 22px;
        --article-number-size: 24px;
        --table-text-size: 22px;
        --note-text-size: 20px;
        --remote-guide-title-size: 24px;
        --remote-guide-text-size: 20px;
        --back-button-size: 20px;
        --lifestyle-desc-title-size: 38px;
        --lifestyle-desc-text-size: 26px;
      }
    }

    /* Hide Snow Monkey search overlay */
    .p-overlay-search-box,
    #sm-overlay-search-box,
    .c-search-button,
    .p-global-nav__search-button {
      display: none !important;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Zen Old Mincho', serif, 'Federo', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
      height: 100vh;
      overflow: hidden;
      display: flex;
      color: #333333;
      min-width: 1200px;

    }

    /* Japanese text styling */
    .japanese-text {
      font-family: 'Zen Old Mincho', serif;
    }

    /* Left Sidebar */
    .sidebar {
      width: 600px !important;
      background: #144738;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      padding-top: 40px;
      position: relative;
      z-index: 1000;
      height: 100vh;
      flex-shrink: 0;
      min-width: 600px;
    }

    .logo-section {
      padding: 0 40px;
      margin-bottom: 60px;
      flex-shrink: 0;
    }

    .logo-section img {
      width: 100%;
      max-width: 300px;
      display: block;
    }

    /* Navigation Menu */
    .nav-menu {
      flex: 1;
      padding: 0px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .nav-item {
      display: block;
      color: white;
      text-decoration: none;
      padding: 25px 40px;
      font-size: var(--nav-item-size);
      font-weight: 500;
      font-family: 'Zen Old Mincho', serif;
      transition: all 0.3s ease;
      text-align: left;
      position: relative;
      border-bottom: none;
      z-index: 5;
      margin: 5px 0px;
    }

    .nav-item.active {
      color: #ffffff;
      z-index: 5;
    }

    .nav-item::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 100%;
      background: #ffffff;
      transition: all 0.4s ease;
      opacity: 0.4;
      z-index: 1;
    }

    .nav-item.active::after {
      width: 100%;
      z-index: 1;
      opacity: 0.6;
    }

    .nav-item.focused::after {
      width: 75%;
      z-index: 1;
      opacity: 0.3;
    }

    .nav-item.focused {
      color: white;
    }

    /* Wifi Remote Section */

    .wifi-remote-section {
      display: flex;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      flex-shrink: 0;
      justify-content: space-around;
    }

    /* Remote Control Guide */
    .remote-control-guide {
      width: 275px;
      background: #ffffff;
      padding: 25px;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 1000;
      box-shadow: 0 2px 10px rgba(20, 71, 56, 0.1);
    }

    .remote-control-guide h2 {
      font-size: var(--remote-guide-title-size);
      font-weight: bold;
      color: #144738;
      margin: 0 0 15px 0;
      text-align: center;
      font-family: 'Zen Old Mincho', serif;
    }

    .remote-control-image {
      width: 150px;
      height: 150px;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 15px;
    }

    .remote-control-text {
      font-size: var(--remote-guide-text-size);
      font-weight: bold;
      color: #333333;
      text-align: center;
      line-height: var(--line-height-tight);
    }

    /* Wifi Remote Section */

    .wifi-section {
      display: flex;
      text-align: center;
      padding: 40px;
      margin-top: auto;
      flex-direction: column;
      align-items: center;
    }

    .wifi-title {
      font-size: var(--wifi-title-size);
      margin-bottom: 25px;
      font-weight: bold;
      color: #ffffff;
      font-family: 'Zen Old Mincho', serif;
    }

    .wifi-qr {
      width: 150px;
      height: 150px;
      background: #ffffff;
      margin: 0 0 20px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--font-tiny);
      color: #333333;
      border: 3px solid #ffffff;
    }

    .wifi-qr img {
      width: 100%;
    }

    .wifi-credentials {
      font-size: var(--wifi-text-size);
      line-height: var(--line-height-normal);
      color: #ffffff;
      font-family: 'Federo', sans-serif;
    }

    /* Main Content Area */
    .main-content {
      flex: 1;
      position: relative;
      overflow: hidden;
    }

    /* Content Sections */
    .content-section {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none !important;
    }

    .content-section.active {
      display: block !important;
    }

    /* Main Home Section */
    .main-home-section {
      background: #144738;
      position: relative;
    }

    .hotel-main-image {
      width: 100%;
      height: 100vh;
      background-size: cover;
      background-position: center;
      position: relative;
    }

    .main-logo img {
      position: absolute;
      top: 30px;
      right: 30px;
      width: 450px;
      height: 450px;
      display: block;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #144738;
      font-weight: bold;
    }

    /* Home Section - Lifestyle Panels */
    .home-section {
      background: #f5f5f5;
    }

    .lifestyle-panels {
      display: flex;
      height: 70vh;
      gap: 0;
      position: relative;
    }

    .lifestyle-panel {
      flex: 1;
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 0px 0px;
      transition: transform 0.3s ease, filter 0.3s ease;
      overflow: hidden;
    }

    .lifestyle-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      filter: brightness(0.9);
      z-index: 1;
      transition: filter 0.5s ease, transform 0.5s ease;
    }

    .lifestyle-panel.expanded {
      flex: 3;
      z-index: 2;
    }

    .lifestyle-panel.collapsed {
      flex: 0.5;
    }

    .lifestyle-panel.focused {
      overflow: hidden;
      position: relative;
      z-index: 1;
    }

    .lifestyle-panel.focused::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      animation: pulseFocusRedInward 1.5s ease-in-out infinite;
      z-index: 10;
      /* Make sure it's above the image and text */
    }

    .lifestyle-panel.focused .lifestyle-image {
      transform: scale(1.05);
      filter: brightness(1.4);
      transition: filter 0.5s ease, transform 0.5s ease;
    }

    .panel-text {
      display: flex;
      text-align: center;
      color: #ffffff;
      padding: 20px;
      z-index: 3;
      position: relative;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 0px 25px rgba(0, 0, 0, 0.15);
      width: 100%;
      height: 150px;
      align-content: center;
      justify-content: center;
      flex-wrap: wrap;
    }

    .panel-title {
      font-size: var(--panel-title-size);
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(9, 68, 44, 0.7);
      color: #ffffff;
    }

    .panel-subtitle {
      font-size: var(--panel-subtitle-size);
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
      color: #ffffff;
    }

    .panel-description {
      position: absolute;
      bottom: 20px;
      left: 20px;
      right: 20px;
      background: rgba(20, 71, 56, 0.9);
      color: #ffffff;
      padding: 20px;
      font-size: var(--panel-description-size);
      line-height: var(--line-height-normal);
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.5s ease;
      z-index: 4;
    }

    .lifestyle-panel.expanded .panel-description {
      opacity: 1;
      transform: translateY(0);
    }

    .lifestyle-description {
      padding: 30px 40px;
      background: rgba(255, 255, 255, 0.95);
      color: #333333;
      text-align: center;
      height: 30vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-image: url('../images/tv-display/washi.webp');
    }

    .lifestyle-description h2 {
      font-size: var(--lifestyle-desc-title-size);
      margin-bottom: 20px;
      font-weight: bold;
      color: rgba(20, 71, 56, 0.8);
    }

    .lifestyle-description p {
      font-size: var(--lifestyle-desc-text-size);
      line-height: var(--line-height-relaxed);
      max-width: 800px;
      margin: 0 auto;
      color: #333333;
    }

    /* Remove default browser focus outlines */
    .lifestyle-panel:focus {
      outline: none !important;
    }

    .lifestyle-panel {
      outline: none;
    }

    /* Smooth transitions */
    * {
      transition: outline 1s ease;
    }

    /* Facilities Section - Map Interface */
    .facilities-section {
      background: #ffffffff;
      padding: 0;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    .facilities-section .flex-wrapper-column {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .facilities-map-container {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: fit-content;
    }

    .facilities-map-image-container {
      position: relative;
      height: fit-content;
    }

    .facilities-map-image {
      width: 100%;
      object-fit: contain;
      object-position: center;
      display: block;
    }

    /* location marker */

    .current-location-indicator {
      position: absolute;
      top: 88%;
      left: 11%;
      z-index: 15;
      pointer-events: none;
    }

    .current-location-indicator svg {
      scale: 1;
      width: 150px;
      height: 80px;
      filter: drop-shadow(0 0px 15px rgba(0, 0, 0, 0.1));
      animation: locationPulse 4s ease-in-out infinite;
      transform-origin: center center;
    }

    @keyframes locationPulse {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.2);
      }

      100% {
        transform: scale(1);
      }
    }

    /* facilities list */

    .facility-list-container {
      display: flex;

    }

    .facility-list {
      /* border: solid 1px #ffffff; */
      margin: 1px;
      flex: 1;
      width: 300px;
      height: 55px;
      overflow-y: auto;
      background: rgba(20, 71, 56, 0.9);
      padding: 10px;
      box-shadow: 0 2px 10px rgba(20, 71, 56, 0.1);
      color: #ffffff;
      font-size: var(--font-micro);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .facility-list.focused,
    .facility-marker.focused {
      /* outline: 2px solid #ffffff; */
      /* or your TV focus style */
      z-index: 10;
      animation: pulseFocusInward 1.5s ease-in-out infinite;

    }

    /* Facility markers */
    .facility-marker {
      position: absolute;
      width: 70px;
      height: 70px;
      /* background: rgba(20, 71, 56, 0.9); */
      /* border: 4px solid #ffffff; */
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 10;
      color: white;
      font-weight: bold;
      font-size: 18px;
      text-align: center;
      /* box-shadow: 0 4px 15px rgba(20, 71, 56, 0.4); */
      font-family: 'Zen Old Mincho', serif;
      transform: translate(-50%, -50%);
      /* Center the marker on the point */
      mix-blend-mode: darken;
      opacity: 0.7;
    }

    img.map-icon {
      height: 100%;
      transition: filter 0.3s ease;
    }

    .facility-marker:hover,
    .facility-marker.focused {
      transform: translate(-50%, -50%) scale(1.2);
      /* background: rgba(20, 71, 56, 1); */
      /* box-shadow: 0 6px 25px rgba(20, 71, 56, 0.6); */
      z-index: 20;
      mix-blend-mode: normal;
      opacity: 1;
    }

    .facility-marker:hover,
    .facility-marker.focused img.map-icon {
      filter: drop-shadow(0 0 3px #00000067);

    }



    .facility-marker.focused {
      animation: pulseFocusMarker 1.5s ease-in-out infinite;
    }

    /* Facility labels */
    .facility-label {
      position: absolute;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255, 255, 255, 0.95);
      padding: 10px 20px;
      border-radius: 25px;
      font-size: var(--facility-title-size);
      font-weight: bold;
      color: #144738;
      white-space: nowrap;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      font-family: 'Zen Old Mincho', serif;
    }

    .facility-marker:hover .facility-label,
    .facility-marker.focused .facility-label {
      opacity: 1;
    }

    /* Marker positions - positioned relative to the container that matches image size */
    .marker-umi-no-ie {
      top: 35%;
      left: 53%;
    }

    .marker-nojima-scuola {
      top: 85%;
      left: 35%;
    }

    .marker-oh-sobar {
      top: 35%;
      left: 72%;
    }

    .marker-ao-no-ie {
      top: 35%;
      left: 53%;
    }

    .marker-nijigen-no-mori {
      top: 50%;
      left: 85%;
      /* background-image: url('https://i.etsystatic.com/47742381/r/il/53cf57/5925560566/il_570xN.5925560566_s3ir.jpg');
background-position: center;
background-size: cover; */
    }

    .marker-kaijin-shokutaku {
      top: 61%;
      left: 55%;
    }

    .marker-awaji-hanasajiki {
      top: 18%;
      left: 78%;
    }

    .marker-hello-kitty {
      top: 59%;
      left: 32%;
    }

    .marker-french-no-mori {
      top: 50%;
      left: 69%
    }

    .marker-miele {
      top: 79%;
      left: 22%;
    }

    .marker-grand-chariot {
      top: 57%;
      left: 85%
    }

    .marker-senboseinei {
      top: 57%;
      left: 75%
    }

    .marker-haru-sansan {
      top: 72%;
      left: 59%;
    }

    .marker-lady-bird {
      top: 48%;
      left: 40%;
    }

    .marker-ocean-terrace {
      top: 71%;
      left: 30%;
    }

    .marker-miele-garden {
      top: 71%;
      left: 28%;
    }

    .marker-kitty-apple-house {
      top: 35%;
      left: 60%;
    }

    .marker-chef-garden {
      top: 41%;
      left: 45%;
    }

    .marker-craft-circus {
      top: 28%;
      left: 57%;
    }

    /* Responsive marker sizes */
    @media (min-width: 3840px) {
      .facility-marker {
        width: 90px;
        height: 90px;
        font-size: 22px;
      }

      .facility-label {
        top: 100px;
        font-size: 28px;
        padding: 12px 24px;
      }
    }


    /* Itinerary Detail Views */
    .itinerary-detail {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #f8f9fa;
      display: none;
      flex-direction: column;
      z-index: 20;
      padding: 15px 60px;
      background-image: url('../images/tv-display/washi.webp');
    }

    .itinerary-detail.active {
      display: flex;
    }

    .itinerary-header {
      text-align: center;
      margin-bottom: 40px;
    }

    .itinerary-title {
      font-size: var(--itinerary-title-size);
      color: rgba(20, 71, 56, 0.8);
      margin-bottom: 10px;
      font-weight: 600;
      font-family: 'Zen Old Mincho', serif;
    }

    .itinerary-subtitle {
      font-size: var(--itinerary-subtitle-size);
      color: #666;
      line-height: var(--line-height-relaxed);
      max-width: 1000px;
      margin: 0 auto;
    }

    .itinerary-sub-heading {
      font-size: var(--font-medium);
      color: rgba(29, 29, 29, 0.8);
      margin-bottom: 15px;
      padding-bottom: 15px;
      font-weight: 600;
      display: block;
      letter-spacing: 2.5px;
      border-bottom: 1px solid #ddd;
    }

    .days-container {
      scale: 0.93;
      display: flex;
      gap: 80px;
      /* max-width: 1200px; */
    }

    .day-section {
      flex: 1;
    }

    .day-header {
      text-align: center;
      margin-bottom: 40px;
    }

    .day-title {
      font-size: var(--day-title-size);
      color: #999;
      font-family: 'Federo', sans-serif;
      font-weight: normal;
      margin-bottom: 10px;
      padding-left: 105px;
      text-align: left;
    }

    .timeline-item {
      margin-bottom: 25px;
      display: flex;
      align-items: center;
      gap: 30px;
    }

    .timeline-image {
      color: #ffffff00 !important;
      width: 75px;
      height: 75px;
      background: linear-gradient(45deg, #a8d8ea, #7bb3e0);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--font-tiny);
      color: #fff;
      font-weight: bold;
      box-shadow: 0 4px 12px rgba(20, 71, 56, 0.2);
      border-radius: 100px;
      margin-right: 25px;
    }

    .timeline-content {
      flex: 1;
    }

    .timeline-time {
      font-size: var(--timeline-time-size);
      font-weight: 600;
      color: #144738;
      margin-bottom: 8px;
      font-family: 'Federo', sans-serif;
    }

    .timeline-activity {
      font-size: var(--timeline-activity-size);
      color: #333;
    }

    .special-activity {
      background: linear-gradient(45deg, #f8e5d0, #f5d5ae);
    }

    .onsen-activity {
      background: linear-gradient(45deg, #e8f4f8, #d0e8f0);
    }

    .dining-activity {
      background: linear-gradient(45deg, #ffeaa7, #fdcb6e);
    }

    .relaxation-activity {
      background: linear-gradient(45deg, #d1c4e9, #b39ddb);
    }

    .checkout-activity {
      background: linear-gradient(45deg, #c8e6c9, #a5d6a7);
    }

    .sightseeing-text {
      text-align: right;
      font-size: var(--font-micro);
      color: #144738;
      margin-top: 25px;
      font-weight: 500;
    }

    /* Facility Detail View */
    .facility-detail {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #f5f5f5;
      display: none;
      flex-direction: column;
      z-index: 20;
    }

    .facility-detail.active {
      display: flex;
    }

    .facility-detail-header {
      text-align: center;
      padding: 50px 40px;
      background: #ffffff;
      border-bottom: 1px solid #eee;
    }

    .facility-detail-title {
      font-size: var(--facility-detail-title-size);
      font-weight: bold;
      color: rgba(20, 71, 56, 0.8);
      margin-bottom: 20px;
    }

    .facility-detail-description {
      font-size: var(--facility-detail-desc-size);
      line-height: var(--line-height-relaxed);
      color: #333333;
      max-width: 800px;
      margin: 0 auto;
    }

    .facility-detail-content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .facility-detail-image {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      box-shadow: 0 4px 20px rgba(20, 71, 56, 0.1);
    }

    .facility-qr-section {
      padding: 25px;
      display: flex;
      width: 250px;
      height: 300px;
      background: #ffffff;
      position: absolute;
      bottom: 0px;
      left: 40px;
      align-content: center;
      flex-direction: column;
      flex-wrap: wrap;
      align-items: center;
    }

    .facility-qr-text {
      font-size: var(--facility-qr-text-size);
      font-weight: bold;
      color: #333333;
      margin-bottom: 25px;
    }

    .facility-qr-code {
      width: 150px;
      height: 150px;
      background: #ffffff;
      border: 2px solid #144738;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--font-tiny);
      color: #333333;
    }

    .back-button {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(255, 255, 255, 0.9);
      border: none;
      padding: 10px 20px;
      font-size: var(--back-button-size);
      font-weight: bold;
      transition: all 0.3s;
      z-index: 30;
      color: #144738;
    }

    .back-button.focused {
      background-color: #144738;
      color: #ffffff;
      /* border: 5px solid red; */
      transform: scale(1.05);
    }

    /* Services Section - Room Service Layout */
    .services-section {
      background: #f5f5f5;
      padding: 0;
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
      left: 0;
      width: 100%;
    }

    .room-service-container {
      width: 100%;
      height: 100%;
      background-color: white;
      display: flex;
      flex-direction: column;
    }

    /* Room Service Header */
    .room-service-header {
      display: flex;
      background-color: #4a6b5d;
      color: white;
      height: 300px;
      position: relative;
      overflow: hidden;
    }

    .room-service-image {
      flex: 1;
      background-size: cover;
      background-position: center;
      background-image: url('../images/tv-display/room-service.webp');
    }

    .room-service-info {
      flex: 1;
      padding: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .room-service-title {
      font-size: var(--service-title-size);
      font-weight: 500;
      /* margin-bottom: 15px; */
      letter-spacing: 2px;
      font-family: 'Zen Old Mincho', serif;
    }

    .service-details {
      padding: 25px 15px;
    }

    .service-details-box {
      background-color: white;
      color: #333;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      width: fit-content;
    }

    .service-details-box p {
      margin: 15px;
      font-size: var(--service-details-size);
    }


    .service-details p {
      margin: 8px 0;
      font-size: var(--service-details-size);
    }

    .service-subtitle {
      color: #666;
      font-size: var(--service-subtitle-size) !important;
    }

    /* Room Service Menu */
    .room-service-menu {
      flex: 1;
      padding: 60px 40px 60px 90px;
      overflow-y: auto;
      background-image: url('../images/tv-display/washi.webp');
    }

    .room-menu-title {
      font-size: var(--menu-title-size);
      text-align: center;
      margin-bottom: 35px;
      font-weight: 500;
      letter-spacing: 8px;
      font-family: 'Zen Old Mincho', serif;
    }

    .room-menu-content {
      scale: 0.95;
      display: flex;
      gap: 80px;
      margin: 0 auto;
    }

    .room-menu-column {
      flex: 1;
      margin-right: 50px;
    }

    .room-section-title {
      font-size: var(--menu-section-size);
      font-weight: 600;
      margin-bottom: 25px;
      letter-spacing: 1px;
    }

    .room-subsection {
      margin-bottom: 40px;
    }

    .room-subsection-title {
      font-size: var(--menu-subsection-size);
      font-weight: 500;
      margin-top: 30px;
      margin-bottom: 20px;
    }

    .room-menu-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
      font-size: var(--menu-item-size);
    }

    .room-item-name {
      flex: 1;
    }

    .room-item-name.text-small {
      font-size: 14px;
    }

    .room-item-price {
      margin-left: 20px;
      font-weight: 500;
    }

    /* Complimentary Items */
    .room-complimentary-section {
      display: flex;
      max-width: 1000px;
      margin: 0 auto;
      flex-direction: column;
    }

    .room-complimentary-title {
      font-size: var(--menu-section-size);
      font-weight: 600;
      margin-bottom: 25px;
      letter-spacing: 1px;
    }

    .room-menu-items {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      row-gap: 15px;
      column-gap: 80px;
      max-width: 1000px;
    }

    .room-menu-item {
      display: flex;
      justify-content: space-between;
      font-size: var(--menu-item-size);
    }

    /* Focus states for remote navigation */
    .room-service-menu.focused {
      /* border: 5px solid red; */
    }

    /* Terms Section */
    .terms-section {
      background: #f8f9fa;
      padding: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: scroll;
      left: 0;
      width: 100%;
    }

    .terms-content {
      text-align: left;
    }

    .terms-title {
      font-size: var(--terms-main-title-size);
      font-weight: bold;
      color: rgba(20, 71, 56, 0.8);
      margin-bottom: 40px;
    }

    .terms-text {
      font-size: var(--terms-text-size);
      line-height: var(--line-height-relaxed);
      color: #333333;
    }

    .container {
      background: #ffffff;
      padding: 40px;
      box-shadow: 0 2px 10px rgba(20, 71, 56, 0.1);
    }

    .terms-section h1 {
      text-align: center;
      color: rgba(20, 71, 56, 0.8);
      border-bottom: 2px solid #144738;
      padding-bottom: 15px;
      margin-bottom: 30px;
      font-size: var(--terms-main-title-size);
    }

    .terms-section h2 {
      color: #333333;
      border-left: 4px solid #144738;
      padding-left: 15px;
      margin-top: 30px;
      margin-bottom: 15px;
      font-size: var(--terms-section-title-size);
    }

    .article {
      margin-bottom: 25px;
      padding: 15px;
      background-color: #fbfbfb;
    }

    .article-number {
      font-weight: bold;
      color: rgba(20, 71, 56, 0.8);
      margin-bottom: 10px;
      font-size: var(--article-number-size);
    }

    .subsection {
      margin-left: 20px;
      margin-bottom: 10px;
      font-size: var(--terms-text-size);
    }

    .subsection-number {
      font-weight: bold;
      color: #333333;
    }

    .list-item {
      margin-left: 30px;
      margin-bottom: 8px;
      position: relative;
      color: #333333;
      font-size: var(--terms-text-size);
    }

    .list-item:before {
      content: "①②③④⑤⑥⑦⑧";
      position: absolute;
      left: -20px;
      color: #144738;
      font-weight: bold;
    }

    .list-item.item-1:before {
      content: "①";
    }

    .list-item.item-2:before {
      content: "②";
    }

    .list-item.item-3:before {
      content: "③";
    }

    .list-item.item-4:before {
      content: "④";
    }

    .list-item.item-5:before {
      content: "⑤";
    }

    .list-item.item-6:before {
      content: "⑥";
    }

    .list-item.item-7:before {
      content: "⑦";
    }

    .list-item.item-8:before {
      content: "⑧";
    }

    .sub-list-item {
      margin-left: 40px;
      margin-bottom: 5px;
      position: relative;
      color: #333333;
      font-size: var(--terms-text-size);
    }

    .sub-list-item.item-ro:before {
      content: "2.";
      position: absolute;
      left: -15px;
      color: #144738;
      font-weight: bold;
    }

    .sub-list-item.item-ha:before {
      content: "3.";
      position: absolute;
      left: -15px;
      color: #144738;
      font-weight: bold;
    }

    .sub-list-item.item-i:before {
      content: "1.";
      position: absolute;
      left: -15px;
      color: #144738;
      font-weight: bold;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
      background: #ffffff;
    }

    th,
    td {
      border: solid #ddd;
      border-top-width: 1px;
      border-right-width: 0px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      padding: 12px;
      text-align: center;
      vertical-align: top;
      color: #333333;
      font-size: var(--table-text-size);
    }

    th {
      background-color: #f8f9fa;
      font-weight: bold;
      color: rgba(20, 71, 56, 0.8);
    }

    .note {
      background-color: #fff3cd;
      padding: 35px;
      margin: 15px 0;
      font-size: var(--note-text-size);
      text-align: left !important;
      color: #333333;
    }

    .note li::marker {
      content: "・";
    }

    .appendix {
      border-top: 2px solid #144738;
      margin-top: 30px;
      padding-top: 20px;
    }

    .appendix h3 {
      color: rgba(20, 71, 56, 0.8);
      font-size: var(--terms-section-title-size);
      margin-bottom: 15px;
    }

    /* Focus states for remote navigation */
    .nav-item:focus,
    .facility-card:focus,
    .lifestyle-panel:focus,
    .service-item:focus {
      outline: none;
    }

    /* Remove default browser focus outlines */
    .lifestyle-panel:focus {
      outline: none !important;
    }

    .lifestyle-panel {
      outline: none;
    }

    /* Smooth transitions */
    * {
      transition: outline 1s ease;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .main-title {
        font-size: 2.5em;
      }

      .subtitle {
        font-size: 1.3em;
      }

      .wifi-title {
        font-size: 2em;
      }

      .wifi-item {
        font-size: 1.4em;
      }

      .section-title {
        font-size: 1.8em;
      }

      .facilities-grid-fullwidth {
        grid-template-columns: 1fr;
      }

      .lifestyle-panels {
        flex-direction: column;
        height: auto;
      }

      .services-section {
        margin-left: 0;
        padding: 20px;
      }

      .content-area {
        flex-direction: column;
      }

      .image-section {
        width: 100%;
      }

      .menu-grid {
        grid-template-columns: 1fr;
        gap: 15px;
      }

      .service-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
      }

      .service-info {
        gap: 20px;
      }

      .room-service-header {
        flex-direction: column;
        height: auto;
      }

      .room-service-image {
        height: 200px;
      }

      .room-menu-content {
        flex-direction: column;
        gap: 40px;
      }

      .room-menu-items {
        grid-template-columns: 1fr;
      }
    }

    /* Focus states for remote navigation */
    .menu-section.focused {
      outline: 2px solid #144738;
      outline-offset: 2px;
    }

    /* Inward pulsating focus animation */
    @keyframes pulseFocusInward {
      0% {
        box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9),
          inset 0 0 20px rgba(255, 255, 255, 0.3);
      }

      50% {
        box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 1),
          inset 0 0 30px rgba(255, 255, 255, 0.6);
      }

      100% {
        box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9),
          inset 0 0 20px rgba(255, 255, 255, 0.3);
      }
    }

    /* Red inward pulsating for better visibility */
    @keyframes pulseFocusRedInward {
      0% {
        box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9),
          inset 0 0 20px rgba(255, 255, 255, 0.3);
      }

      50% {
        box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 1),
          inset 0 0 30px rgba(255, 255, 255, 0.6);
      }

      100% {
        box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9),
          inset 0 0 20px rgba(255, 255, 255, 0.3);
      }
    }

    /* Alternative with border pulsating effect */
    @keyframes pulseBorderInward {
      0% {
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8),
          inset 0 0 0 4px rgba(20, 71, 56, 0.6),
          inset 0 0 25px rgba(255, 255, 255, 0.2);
      }

      50% {
        box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 1),
          inset 0 0 0 8px rgba(20, 71, 56, 0.8),
          inset 0 0 35px rgba(255, 255, 255, 0.4);
      }

      100% {
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8),
          inset 0 0 0 4px rgba(20, 71, 56, 0.6),
          inset 0 0 25px rgba(255, 255, 255, 0.2);
      }
    }

    /* Apply to navigation items */
    .nav-item.focused {
      animation: pulseFocusInward 1.5s ease-in-out infinite;
      position: relative;
      z-index: 10;
      overflow: hidden;
    }

    /* For content panels with images */
    .lifestyle-panel.focused,
    .facility-card.focused {
      animation: pulseFocusRedInward 1.5s ease-in-out infinite;
      overflow: hidden;
      position: relative;
    }

    /* Back button special treatment */
    .back-button.focused {
      animation: pulseFocusRedInward 1.2s ease-in-out infinite;
      transform: scale(1.05);
      overflow: hidden;
    }

    /* Remove any outline offset */
    .nav-item.focused {
      outline: none;
    }

    /* Ensure smooth transitions */
    .nav-item,
    .lifestyle-panel,
    .facility-card,
    .back-button {
      transition: transform 0.3s ease;
      /* Removed box-shadow from here */
      overflow: hidden;
    }

    /* Optional: Add an inner overlay effect for stronger visibility */
    .facility-card.focused::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      background: radial-gradient(ellipse at center,
          transparent 0%,
          transparent 50%,
          rgba(255, 0, 0, 0.1) 100%);
      animation: pulseOverlay 1.5s ease-in-out infinite;
      z-index: 1;
    }

    @keyframes pulseOverlay {

      0%,
      100% {
        opacity: 0.3;
      }

      50% {
        opacity: 0.6;
      }
    }

    /* For facility cards, add a subtle inner glow */
    .facility-card.focused .facility-image {
      position: relative;
    }

    .facility-card.focused .facility-image::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      box-shadow: inset 0 0 50px rgba(255, 0, 0, 0.4);
      animation: pulseGlow 1.5s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes pulseGlow {

      0%,
      100% {
        box-shadow: inset 0 0 30px rgba(255, 0, 0, 0.3);
      }

      50% {
        box-shadow: inset 0 0 60px rgba(255, 0, 0, 0.5);
      }
    }

    /* Ensure nav items have proper background for visibility */
    .nav-item.focused {
      background: rgba(255, 255, 255, 0.1);
    }

    /* Remove scale transform from facility cards to keep size consistent */
    .facility-card.focused {
      transform: none;
    }

    /* For the sidebar nav, use a different approach */
    .nav-item.focused::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(90deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.1) 50%,
          rgba(255, 255, 255, 0) 100%);
      animation: slideGlow 1.5s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes slideGlow {

      0%,
      100% {
        transform: translateX(-100%);
      }

      50% {
        transform: translateX(100%);
      }
    }

/* === LANGUAGE SWITCHER === */
.lang-switcher {
  display: flex;
  justify-content: stretch;
  padding: 0 20px;
  gap: 0;
}

.lang-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--font-small, 18px);
  padding: 14px 0;
  cursor: pointer;
  font-family: 'Zen Old Mincho', serif;
  transition: color 0.3s ease, border-color 0.3s ease;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: var(--line-height-tight);
}

.lang-btn.active {
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 2px solid rgba(200, 168, 126, 0.6);
}

.lang-btn.focused {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-bottom: 2px solid #c8a87e;
}