:root {
  --primary-color: #7D91B8;
  --text-black: #1D1D1D;
  --text-white: #FAFAFA;
  --bg-color: #F2F2F2;
  --font-family: 'ABCGintoRounded', sans-serif;
}

@font-face {
  font-family: 'ABCGintoRounded';
  src: url('../assets/fonts/ABCGintoRounded-Regular.woff2') format('woff2'),
    url('../assets/fonts/ABCGintoRounded-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'ABCGintoRounded';
  src: url('../assets/fonts/ABCGintoRounded-Bold.woff2') format('woff2'),
    url('../assets/fonts/ABCGintoRounded-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'ABCGintoRounded';
  src: url('../assets/fonts/ABCGintoRounded-Medium.woff2') format('woff2'),
    url('../assets/fonts/ABCGintoRounded-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'ABCGintoRounded';
  src: url('../assets/fonts/ABCGintoRounded-Light.woff2') format('woff2'),
    url('../assets/fonts/ABCGintoRounded-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'ABCGintoRounded';
  src: url('../assets/fonts/ABCGintoRounded-Black.woff2') format('woff2'),
    url('../assets/fonts/ABCGintoRounded-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

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

body {
  font-family: var(--font-family);
  background-color: var(--bg-color);
  color: var(--text-black);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  height: 100dvh;
  /* Dynamic viewport height for execution on mobile browsers */
  overflow: hidden;
  /* Prevent scrolling */
  width: 100vw;
  margin: 0;
  position: fixed;
  /* Fix for mobile bounce/zoom issues */
  touch-action: manipulation;
  /* Disable double-tap zoom on some browsers */
  -webkit-text-size-adjust: 100%;
  /* Prevent font scaling in landscape */
}

.app-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  padding-top: calc(20px + env(safe-area-inset-top));
  /* Handle Dynamic Island/Notch */
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  /* Handle Home Indicator */
  position: relative;
}

/* Views */
.view {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  animation: fadeIn 0.3s ease-in-out;
}

.view.active {
  display: flex;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Home Screen */
h1 {
  font-weight: 900;
  font-size: 2.5rem;
  margin-bottom: 0.5rem; /* Reduced margin to group with subtitle */
  color: var(--primary-color);
  text-align: center;
}

.subtitle {
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 2rem;
  font-weight: 500;
  text-align: center;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 400px;
}

.btn {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  padding: 1rem 2rem;
  font-family: var(--font-family);
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn:hover {
  background-color: var(--primary-color);
  color: var(--text-white);
  transform: scale(1.02);
}

/* Device Selection Buttons */
.device-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 1.5rem;
  gap: 0.3rem;
  line-height: 1.2;
}

.device-name {
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: none; /* Keep capitalization as written */
}

.device-subtext {
  font-size: 0.9rem;
  font-weight: 400;
  color: #7D91B8; /* Use primary color but will inherit or specific style */
  opacity: 0.7;
  text-transform: none;
  text-align: center;
}

.device-btn:hover .device-subtext {
  color: var(--text-white);
  opacity: 0.9;
}


.btn-primary {
  background-color: var(--primary-color);
  color: var(--text-white);
}

.btn-primary:hover {
  background-color: darken(var(--primary-color), 10%);
  /* CSS vars don't support darken function natively this way usually, but opacity works */
  opacity: 0.9;
}

/* Video Player */
.video-container {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16/9;
  background-color: #000;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

.video-placeholder {
  color: #fff;
  font-size: 1.5rem;
  opacity: 0.7;
}

/* Guide Steps */
.step-container {
  width: 100%;
  max-width: 500px;
  /* Bit tighter for phone look on desktop */
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /* Fit within viewport with margin */
  height: calc(100vh - 40px);
  max-height: 900px;
  /* Sanity cap */

  justify-content: space-between;
  position: relative;
  /* For close button positioning */
}

/* Close button for guide */
.close-step-btn {
  position: absolute;
  top: 15px;
  left: 15px;
  /* User said "two arrows on left and right", but usually close is top right. 
                 However, usually back is top left. Since we removed "Retour" from bottom, 
                 we need a way out. Let's put a subtle 'X' or 'Back' arrow topmost left. */
  background: none;
  border: none;
  cursor: pointer;
  color: #ccc;
  transition: color 0.2s;
  padding: 5px;
  z-index: 10;
}

.close-step-btn:hover {
  color: var(--primary-color);
}

.step-image {
  width: auto;
  /* Allow width to adjust based on height constraint or intrinsic ratio */
  max-width: 100%;
  height: auto;

  /* Flexibly take up space, leaving room for text/buttons */
  flex-shrink: 1;
  min-height: 0;
  /* Allow shrinking if needed on very small screens */
  max-height: 65%;
  /* Reserve space for text */

  aspect-ratio: 9/16;
  /* Reserve space for vertical screenshots */
  border-radius: 10px;
  margin-top: 1rem;
  /* Space for close button */
  margin-bottom: 1.5rem;
  background-color: #fff;
  object-fit: contain;
  /* Ensure full screenshot is visible */
}

.step-content {
  margin-bottom: 1rem;
  width: 100%;
  flex-grow: 1;
  /* Allow taking up available space */
  /* Text shouldn't expand indefinitely, image is the hero */
  /* Allow text area to take available space */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Center content vertically if no image pushes it down */
}

.step-text {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #333;
  /* limit text width for readability if needed, but important is height stability */
  min-height: 3.2em;
  /* Approximate for 2 lines */
  text-align: center;
  max-width: 400px;
  /* Limit width to force better wrapping if text is short but wide */
  margin-left: auto;
  margin-right: auto;
}

.step-action-btn-container {
  /* Container to hold the button space if we wanted it fixed, 
       but keeping it simpler: button will appear/disappear. 
       If user wants total stillness, we might need to reserve space.
       For now, let's reserve space or just let it be part of the flow 
       since it's at the bottom.
       Let's actually fix the image height and container min-height which are the biggest culprits.
    */
  height: 50px;
  /* Reserve space for button so it doesn't jump if some have button and others don't?
                  User said "make sure size doesn't jump". 
                  Let's reserve space. */
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--primary-color);
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  transition: transform 0.2s;
}

.step-action-btn:hover {
  transform: translateY(-2px);
}

.step-action-btn.secondary-btn:hover {
  transform: none;
  opacity: 0.8;
}

.navigation-controls {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 1rem;
  z-index: 5;
  /* Ensure above other elements if any overlap */
  position: relative;
}

.nav-arrow {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary-color);
  padding: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  /* Make hit area larger for touch */
  min-width: 44px;
  min-height: 44px;
}

.nav-arrow:hover {
  background-color: rgba(125, 145, 184, 0.1);
}

.nav-arrow:disabled {
  color: #ccc;
  cursor: not-allowed;
  pointer-events: none;
}

.back-btn {
  background: none;
  border: none;
  color: #888;
  font-size: 1rem;
  font-family: var(--font-family);
  cursor: pointer;
  margin-top: 2rem;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}


/* Modal Styles */
/* Bottom Sheet Styles (reusing modal classes) */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  align-items: flex-end;
  /* Align to bottom */
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  display: flex;
  opacity: 1;
}

.modal-content {
  background: #fff;
  padding: 60px 20px 40px;
  /* More padding at bottom */
  border-radius: 20px 20px 0 0;
  /* Top rounded only */
  position: relative;
  width: 100%;
  max-width: 600px;
  /* On larger screens don't stretch too wide */
  height: 90vh;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

.modal-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #f0f0f0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  width: 36px;
  height: 36px;
  z-index: 10;
}

.modal-image {
  max-width: 100%;
  max-height: 85vh;
  /* Maximize space */
  border-radius: 10px;
  object-fit: contain;
  margin-bottom: 0;
  margin-top: 5px;
}

.modal-text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

/* Secondary Button Modification */
.step-action-btn.secondary-btn {
  background-color: transparent;
  color: var(--primary-color);
  border: none;
  margin-top: 10px;
  cursor: pointer;
  text-decoration: none;
  padding: 0.5rem 1rem;
  font-weight: 500;
}

.step-action-btn-container {
  /* Changed to column to support stacking buttons if both present */
  flex-direction: column;
  height: auto;
  gap: 10px;
  min-height: 50px;
}