/* ============================================================================
   CRYPTO ATM CSS - Základní stylování pro cryptoAtm.html strukturu
   ============================================================================ */

/* RESET + BASE STYLES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow: hidden; /* Zakázání scrollování */
    touch-action: none; /* Zakázání touch scrollování na mobilech */
    overscroll-behavior: none; /* Zakázání bounce efektu */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, #fdffd5 0%, #bfffda 100%);
    color: #333;
    line-height: 1.6;
    min-height: 100svh; /* Použití nové SVH jednotky! */
    position: relative;
    /*height: 100svh;*/ /* Fixní výška pro zamezení scrollování */
}

/* UNIFIED CSS SYSTEM - pouze data atributy, ŽÁDNÉ @media width breakpointy! */

/* ✅ ZAŘÍZENÍ podle data atributů */
body[data-device="mobile"] {
    --primary-color: #ff6b6b;
    --device-icon: "📱";
}

body[data-device="tablet"] {
    --primary-color: #4ecdc4;
    --device-icon: "📟";
}

body[data-device="desktop"] {
    --primary-color: #45b7d1;
    --device-icon: "🖥️";
}

/* ✅ ORIENTACE podle data atributů */
body[data-orientation="portrait"] {
    --orientation-icon: "🔺";
}

body[data-orientation="landscape"] {
    --orientation-icon: "🔹";
}

/* ============================================================================
   MAIN CONTAINER
   ============================================================================ */
.main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: calc(10px + env(safe-area-inset-top))
             calc(10px + env(safe-area-inset-right))
             calc(10px + env(safe-area-inset-bottom))
             calc(10px + env(safe-area-inset-left));
    min-height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom));

    
}

.marker-animated {
      transition: all 0.3s ease;
  }

  .marker-flyaway {
      transition: all 0.3s ease;
      opacity: 0;
  }