/* ============================================
   MOBILE BASE STYLES - PORTRAIT ONLY
   Оптимизирано за 360px - 430px portrait mode
   Target: iPhone SE, iPhone 14, Samsung Galaxy, Pixel
   ============================================ */

@media (max-width: 768px) {

/* CSS Variables за Mobile Portrait */
:root {
  --mobile-header-height: 48px;
  --mobile-bottom-nav-height: 60px;
  --mobile-padding: 12px;
  --mobile-touch-target: 36px;
  --mobile-border-radius: 8px;
  --mobile-max-width: 430px;
  --mobile-min-width: 360px;
}

/* Body Adjustments */
body {
  font-size: 16px !important; /* Prevent iOS zoom on input focus */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Disable horizontal scroll */
body,
html {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

/* Container Adjustments */
.container,
.container-fluid {
  padding-left: var(--mobile-padding) !important;
  padding-right: var(--mobile-padding) !important;
}

/* Typography Scaling */
h1, .h1 { font-size: 24px !important; }
h2, .h2 { font-size: 20px !important; }
h3, .h3 { font-size: 18px !important; }
h4, .h4 { font-size: 16px !important; }
h5, .h5 { font-size: 14px !important; }
h6, .h6 { font-size: 13px !important; }

p, .lead {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

small, .small {
  font-size: 13px !important;
}

/* Touch Targets - Mobile Optimized */
button,
.btn,
a.btn,
input[type="button"],
input[type="submit"],
.clickable {
  min-height: 36px !important;
  min-width: 36px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
}

/* Increase clickable area for icons */
.bi,
.icon,
i[class*="bi-"] {
  padding: 0 !important;
  margin: 0 !important;
}

/* Form Controls */
input,
textarea,
select {
  font-size: 16px !important; /* Prevent iOS zoom */
  min-height: var(--mobile-touch-target) !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
}

/* Cards */
.card,
.glass-card {
  border-radius: var(--mobile-border-radius) !important;
  margin-bottom: 16px !important;
}

/* Spacing Utilities */
.section {
  padding: 24px 0 !important;
}

/* Hide Desktop-Only Elements */
.desktop-only {
  display: none !important;
}

/* Show Mobile-Only Elements */
.mobile-only {
  display: block !important;
}

/* Smooth Scrolling */
* {
  -webkit-overflow-scrolling: touch;
}

/* Safe Area Insets (for notched devices) */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* Fix iOS input shadows */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  -webkit-appearance: none;
  appearance: none;
}

/* Improve button tap feedback */
button,
.btn {
  transition: transform 0.1s ease, opacity 0.1s ease;
}

button:active,
.btn:active {
  transform: scale(0.97);
  opacity: 0.8;
}

/* Loading States */
.loading {
  pointer-events: none;
  opacity: 0.6;
}

/* Skeleton Loaders */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Improve scroll performance */
.scroll-container {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Prevent text selection on buttons */
button,
.btn,
a {
  -webkit-user-select: none;
  user-select: none;
}

/* Allow text selection in content areas */
p,
.content,
.description {
  -webkit-user-select: text;
  user-select: text;
}

/* iOS Viewport Height Fix */
html {
  height: -webkit-fill-available;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* Prevent horizontal overflow globally */
*,
*::before,
*::after {
  max-width: 100%;
  box-sizing: border-box;
}

/* Images responsive by default */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* Pre/code blocks word-wrap */
pre,
code {
  overflow-x: auto !important;
  word-wrap: break-word !important;
  white-space: pre-wrap !important;
  max-width: 100% !important;
}

/* Disable pull-to-refresh on specific elements */
.no-pull-refresh {
  overscroll-behavior-y: contain;
}

/* Close portrait-only media query */
}

/* Extra Small Devices (360px and below) */
@media (max-width: 375px) and (orientation: portrait) {
  :root {
    --mobile-padding: 12px;
  }
  
  h1, .h1 { font-size: 22px !important; }
  h2, .h2 { font-size: 18px !important; }
  
  .container,
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Very Small Devices (Samsung Galaxy S21 - 360px) */
@media (max-width: 768px) {
  :root {
    --mobile-padding: 10px;
  }
  
  h1, .h1 { font-size: 20px !important; }
  
  button,
  .btn {
    padding: 10px 16px !important;
  }
}