/**
 * Pathao Kiosk - Reusable UI Components
 * Cards, Headers, Waves, Video Overlay, Touch Animations
 */

/* ----------------------------------------------------
   1. Brand Headers & Logos
   ---------------------------------------------------- */
.kiosk-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding-top: 80px;
  position: relative;
  z-index: 2;
}

.kiosk-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Screen 1 Pathao Logo */
.logo-screen-1 {
  width: 540px;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  margin-bottom: 50px;
}

/* Screen 2 Pathao Commerce Logo */
.logo-screen-2 {
  width: 700px;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  margin-top: 50px;
  margin-bottom: 50px;
}

/* Main Screen Headline */
.kiosk-main-title {
  margin-top: 10px;
  margin-bottom: 78px;
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-title);
  line-height: var(--line-height-title);
  color: var(--color-text-primary);
  text-align: center;
  letter-spacing: -0.025em;
  max-width: 850px;
}

/* Screen 2 "All in one platform" Banner Card */
.commerce-banner-card {
  width: 712px;
  height: var(--banner-height);
  background-color: var(--color-commerce-purple);
  border-radius: var(--banner-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-white);
  font-size: var(--font-size-banner);
  font-weight: var(--font-weight-banner);
  letter-spacing: -0.01em;
  box-shadow: 0 14px 34px var(--color-commerce-purple-glow);
  margin-top: 20px;
  margin-bottom: 46px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: transform var(--touch-transition-fast), filter var(--touch-transition-fast), box-shadow var(--touch-transition-fast);
}

.commerce-banner-card:active,
.commerce-banner-card.is-pressed {
  transform: scale(var(--touch-press-scale));
  background-color: var(--color-commerce-purple-active);
  box-shadow: 0 4px 18px var(--color-commerce-purple-glow);
  filter: brightness(0.95);
}

/* ----------------------------------------------------
   2. Touch Card Grid (2x2)
   ---------------------------------------------------- */
.kiosk-grid-container {
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 2;
}

.kiosk-card-grid {
  display: grid;
  grid-template-columns: repeat(2, var(--card-size));
  grid-template-rows: repeat(2, var(--card-size));
  gap: var(--card-gap);
  width: 712px;
}

/* Individual Touch Button Card */
.kiosk-card-btn {
  width: var(--card-size);
  height: var(--card-size);
  border-radius: var(--card-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-white);
  font-size: var(--font-size-card);
  font-weight: var(--font-weight-card);
  line-height: var(--line-height-card);
  padding: 24px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transform: translateZ(0);
  transition: transform var(--touch-transition-fast), 
              box-shadow var(--touch-transition-fast), 
              filter var(--touch-transition-fast);
  will-change: transform;
}

/* Screen 1 Red Buttons */
.kiosk-card-btn.theme-red {
  background-color: var(--color-pathao-red);
}

.kiosk-card-btn.theme-red:active,
.kiosk-card-btn.theme-red.is-pressed {
  transform: scale(var(--touch-press-scale));
  background-color: var(--color-pathao-red-active);
  box-shadow: 0 4px 18px var(--color-pathao-red-glow);
  filter: brightness(0.95);
}

/* Screen 2 Purple Buttons */
.kiosk-card-btn.theme-purple {
  background-color: var(--color-commerce-purple);
}

.kiosk-card-btn.theme-purple:active,
.kiosk-card-btn.theme-purple.is-pressed {
  transform: scale(var(--touch-press-scale));
  background-color: var(--color-commerce-purple-active);
  box-shadow: 0 4px 18px var(--color-commerce-purple-glow);
  filter: brightness(0.95);
}

.kiosk-card-btn span {
  display: block;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ----------------------------------------------------
   3. Tactile Touch Ripple Effect
   ---------------------------------------------------- */
.kiosk-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
  transform: scale(0);
  animation: ripple-animation 0.55s ease-out;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ----------------------------------------------------
   4. Decorative Bottom Swoop Waves
   ---------------------------------------------------- */
.kiosk-bottom-wave-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1080px;
  height: 290px;
  pointer-events: none;
  z-index: 1;
}

.kiosk-bottom-wave-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.wave-fill-red {
  fill: var(--color-pathao-red);
}

.wave-fill-purple {
  fill: var(--color-commerce-purple);
}

/* ----------------------------------------------------
   5. Secondary Screen Navigation (Back Button)
   ---------------------------------------------------- */
.kiosk-back-btn {
  position: absolute;
  top: 70px;
  left: 60px;
  height: 72px;
  padding: 0 28px;
  border-radius: 36px;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  border: 1.5px solid rgba(108, 53, 216, 0.15);
  color: var(--color-commerce-purple);
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 10;
  cursor: pointer;
  transition: transform var(--touch-transition-fast), background 0.2s ease;
}

.kiosk-back-btn:active {
  transform: scale(0.92);
  background: #F3EEFF;
}

.kiosk-back-btn svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ----------------------------------------------------
   6. Fullscreen Touch Video Overlay Player
   ---------------------------------------------------- */
.kiosk-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 1080px;
  height: 1920px;
  background-color: #000000;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kiosk-video-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.kiosk-video-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000;
}

/* Bottom Controls Bar (Mute/Unmute & Close) */
.video-bottom-controls {
  position: absolute;
  bottom: 80px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  z-index: 1010;
}

/* Touch Control Circular Buttons */
.video-control-btn {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
  transition: transform var(--touch-transition-fast), background 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.video-control-btn svg {
  width: 42px;
  height: 42px;
  stroke: #ffffff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.video-control-btn:active {
  transform: scale(0.90);
  background: rgba(255, 255, 255, 0.25);
}

/* Close Button (Icon Only - Red highlight on active) */
.video-control-btn.close-variant:active {
  background: rgba(244, 35, 57, 0.95);
  border-color: #F42339;
}

/* Video Touch Play / Pause Big Visual Feedback Indicator */
.video-tap-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  z-index: 1005;
}

.video-tap-indicator.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.video-tap-indicator svg {
  width: 60px;
  height: 60px;
  fill: #ffffff;
}

/* Hidden elements per requirements: progress bar, time labels, top title */
.video-timeline-wrap,
.video-title-badge {
  display: none !important;
}