/* kiosk-layout.css - Kiosk Device Container & Screen Router Layouts */

#kiosk-wrapper {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 540px;
  max-height: 960px;
  background-color: var(--bg-main);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  border-radius: 16px;
}

html.kiosk-fullscreen #kiosk-wrapper,
html:fullscreen #kiosk-wrapper,
html:-webkit-full-screen #kiosk-wrapper {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

@media (min-width: 541px) and (min-height: 961px) {
  #kiosk-wrapper {
    height: 94vh;
    border: 8px solid #2A2A2A;
  }

  html.kiosk-fullscreen #kiosk-wrapper,
  html:fullscreen #kiosk-wrapper,
  html:-webkit-full-screen #kiosk-wrapper {
    height: 100%;
    border: none;
  }
}

@media (max-width: 540px) {
  #kiosk-wrapper {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
}

/* Header */
#kiosk-header {
  height: var(--header-height);
  background-color: var(--bg-card);
  border-bottom: 2px solid var(--isaac-red);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.brand-logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.brand-logo-img {
  height: 40px;
  object-fit: contain;
}

.brand-logo-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--isaac-red);
  letter-spacing: -0.5px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Screen Container */
#screen-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.screen-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-main);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  transition:
    transform var(--screen-transition-duration, 0.42s) var(--screen-transition-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity var(--screen-transition-duration, 0.42s) var(--screen-transition-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.screen-section[hidden] {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
  transform: translate3d(0, 0, 0);
}

.screen-section.screen-enter-forward {
  z-index: 3;
  opacity: 0;
  transform: translate3d(56px, 0, 0) scale(0.985);
}

.screen-section.screen-enter-forward.screen-enter-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.screen-section.screen-exit-forward {
  z-index: 2;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.screen-section.screen-exit-forward.screen-exit-active {
  opacity: 0;
  transform: translate3d(-56px, 0, 0) scale(0.985);
}

.screen-section.screen-enter-back {
  z-index: 3;
  opacity: 0;
  transform: translate3d(-56px, 0, 0) scale(0.985);
}

.screen-section.screen-enter-back.screen-enter-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.screen-section.screen-exit-back {
  z-index: 2;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.screen-section.screen-exit-back.screen-exit-active {
  opacity: 0;
  transform: translate3d(56px, 0, 0) scale(0.985);
}

.screen-section.screen-enter-fade {
  z-index: 3;
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(0.99);
}

.screen-section.screen-enter-fade.screen-enter-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.screen-section.screen-exit-fade {
  z-index: 2;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.screen-section.screen-exit-fade.screen-exit-active {
  opacity: 0;
  transform: translate3d(0, -8px, 0) scale(0.99);
}

@media (prefers-reduced-motion: reduce) {
  .screen-section {
    transition-duration: 0.01ms !important;
  }
}

/* Screen: Idle */
.idle-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.idle-ad-zone {
  width: 100%;
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  background-color: #000;
}

.ad-slider {
  width: 100%;
  height: 100%;
  position: relative;
}

.ad-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ad-slide.active {
  opacity: 1;
}

.ad-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ad-slider-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.ad-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.ad-dot.active {
  background-color: var(--isaac-red);
  width: 24px;
  border-radius: 12px;
}

.idle-action-zone {
  flex: 1;
  display: flex;
  gap: 16px;
  padding: 16px;
  background-color: var(--bg-card);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
  align-items: center;
  justify-content: center;
}

.btn-eat-in, .btn-take-out {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-lg);
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  padding: 12px;
  background-color: #FFFFFF;
}

.btn-eat-in {
  border: 3px solid var(--isaac-red);
  color: var(--isaac-red);
  box-shadow: 0 4px 16px rgba(227, 30, 36, 0.15);
}

.btn-take-out {
  border: 3px solid var(--isaac-orange);
  color: var(--isaac-orange-dark);
  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.15);
}

.btn-eat-in:active {
  background-color: var(--isaac-red-light);
  transform: scale(0.96);
}

.btn-take-out:active {
  background-color: var(--isaac-orange-light);
  transform: scale(0.96);
}

.btn-eat-in .sub-text, .btn-take-out .sub-text {
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
  opacity: 0.85;
  letter-spacing: 1px;
}