/* ============================================================
   ELOSTORE.RU — Mobile adaptation
   Targets all main pages: index, faceit-boost, premier-boost,
   subcategories, cases, guides, auth/signup, cabinet, about,
   support, become-booster, legal docs.
   Created 2026-05-07. Loaded after styles.css.
   ============================================================ */

/* ---------- Universal anti-scroll & sizing fixes ---------- */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  *, *::before, *::after {
    box-sizing: border-box;
  }
  img, video, iframe, svg {
    max-width: 100% !important;
    height: auto;
  }
  .container,
  .container.calculator-shell,
  .container.faq-shell,
  .container.reviews-shell,
  .container.header__inner,
  .container.process-grid,
  .container.hero-luxury {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Block any horizontally-scrolling decor */
  .cs2-fx,
  .cs2-fx__grid,
  .hero-decor-agent,
  .process-preview__ambient,
  .process-preview__ambient-grid {
    max-width: 100vw;
    overflow: hidden !important;
  }
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
@media (max-width: 768px) {
  .header {
    padding: 10px 0 !important;
  }
  .header__inner {
    flex-wrap: wrap !important;
    gap: 8px !important;
    row-gap: 8px;
  }
  .header__nav {
    order: 3;
    width: 100%;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    padding: 6px 0 !important;
    justify-content: flex-start !important;
  }
  .header__nav::-webkit-scrollbar { display: none; }
  .header__nav a,
  .header__nav .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
  .header__actions {
    gap: 6px !important;
    margin-left: auto;
  }
  .header__actions .btn {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  .brand,
  .brand__text {
    font-size: 16px !important;
  }
  .btn--header-link,
  .btn--header-cabinet {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  .header__nav {
    gap: 4px !important;
  }
  .header__nav a,
  .header__nav .btn {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
  .brand__text {
    font-size: 15px !important;
  }
}

/* ============================================================
   HERO (index, landing pages)
   ============================================================ */
@media (max-width: 768px) {
  .hero,
  .hero--luxury {
    padding: 32px 0 28px !important;
    min-height: auto !important;
  }
  .hero-luxury,
  .container.hero-luxury {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: center;
  }
  .hero-luxury__copy {
    text-align: center;
    align-items: center !important;
  }
  .hero-title-lockup,
  .hero-title-line,
  .hero-title-line--brand,
  .hero-title-dash {
    font-size: 32px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
    text-align: center !important;
  }
  .hero-luxury__lead,
  .hero-luxury__lead--typewriter {
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .hero-luxury__actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .hero-luxury__cta,
  .hero-luxury__cta--mp {
    width: 100% !important;
    min-height: 50px !important;
    font-size: 15px !important;
    padding: 14px 18px !important;
    text-align: center;
    justify-content: center !important;
  }
  .hero-luxury__cta-badge {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }
  .hero-luxury__stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100%;
  }
  .hero-stat-card {
    padding: 14px 12px !important;
    min-width: 0 !important;
  }
  .hero-stat-card__value {
    font-size: 22px !important;
  }
  .hero-stat-card__label {
    font-size: 11px !important;
  }
  .hero-decor-agent,
  .hero-decor-agent--left,
  .hero-decor-agent--right {
    display: none !important;
  }
  .premier-plate-anchor {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .hero-title-lockup,
  .hero-title-line,
  .hero-title-line--brand {
    font-size: 28px !important;
  }
  .hero-luxury__stats {
    grid-template-columns: 1fr !important;
  }
  .hero-luxury__lead {
    font-size: 14px !important;
  }
}

/* ============================================================
   GENERIC SECTIONS / TYPOGRAPHY
   ============================================================ */
@media (max-width: 768px) {
  section,
  .section {
    padding: 32px 0 !important;
  }
  .section-label {
    font-size: 11px !important;
    letter-spacing: 1.4px !important;
  }
  .section-title,
  h2 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
  h3 {
    font-size: 18px !important;
  }
  h1 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }
  p {
    font-size: 15px;
    line-height: 1.55;
  }
}

@media (max-width: 480px) {
  .section-title,
  h2 {
    font-size: 22px !important;
  }
  h1 {
    font-size: 26px !important;
  }
}

/* ============================================================
   CALCULATOR (index.html main feature)
   ============================================================ */
@media (max-width: 768px) {
  .calculator-shell {
    padding: 0 12px !important;
  }
  .calculator-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .calculator-panel {
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }
  .mode-switcher {
    gap: 6px !important;
    padding: 4px !important;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .mode-tab {
    flex: 1 1 0;
    font-size: 13px !important;
    padding: 10px 8px !important;
    min-width: 0 !important;
    text-align: center;
  }
  .calc-screen {
    padding: 0 !important;
  }
  .fields-grid,
  .fields-grid--2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .field-card,
  .field-card--select {
    padding: 14px !important;
    border-radius: 12px !important;
  }
  .field-card label,
  .field-card__label {
    font-size: 13px !important;
  }
  .field-card input,
  .field-card select,
  .field-card textarea {
    font-size: 16px !important; /* iOS no-zoom */
    padding: 10px !important;
  }
  .extras-block {
    padding: 14px !important;
    border-radius: 12px !important;
  }
  .extras-block__head {
    font-size: 14px !important;
  }
  .extras-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .option-pill {
    font-size: 13px !important;
    padding: 10px 12px !important;
  }
  .breakdown-card,
  .breakdown-list {
    padding: 14px !important;
    font-size: 14px !important;
  }
  .breakdown-card__head {
    font-size: 13px !important;
  }
  .level-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* Range slider */
  input[type="range"] {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .calculator-panel {
    padding: 14px 10px !important;
  }
  .mode-tab {
    font-size: 12px !important;
    padding: 8px 6px !important;
  }
  .level-card-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .field-card {
    padding: 12px !important;
  }
}

/* ============================================================
   PROCESS / FEATURES / BENEFIT GRIDS
   ============================================================ */
@media (max-width: 768px) {
  .process-grid,
  .feature-grid,
  .benefit-grid,
  .features-grid,
  .benefits-grid,
  .pricing-grid,
  .cards-grid,
  .info-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .info-card,
  .feature-card,
  .benefit-card,
  .process-step,
  .step-card,
  .pricing-card {
    padding: 18px !important;
    border-radius: 14px !important;
  }
  .process-preview__ambient,
  .process-preview__ambient-grid,
  .process-preview__ambient-orb {
    display: none !important;
  }
  .process-preview__console,
  .process-preview__console-body {
    padding: 12px !important;
    font-size: 12px !important;
    overflow-x: auto;
  }
  .process-preview__chips {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .process-preview__chip {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
}

@media (max-width: 480px) {
  .feature-grid,
  .benefit-grid,
  .info-grid,
  .cards-grid {
    gap: 12px !important;
  }
  .info-card,
  .feature-card,
  .benefit-card {
    padding: 14px !important;
  }
}

/* ============================================================
   REVIEWS
   ============================================================ */
@media (max-width: 768px) {
  .reviews-shell {
    padding: 0 12px !important;
  }
  .reviews-grid,
  .reviews,
  .reviews-list {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .review-card {
    padding: 16px !important;
    border-radius: 14px !important;
    grid-template-columns: 48px 1fr !important;
    gap: 12px !important;
  }
  .review-card__avatar,
  .review-card__avatar img {
    width: 48px !important;
    height: 48px !important;
  }
  .review-card__head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .review-card__text,
  .review-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .review-card__author {
    font-size: 14px !important;
  }
  .review-card__meta,
  .review-card__date {
    font-size: 12px !important;
  }
}

/* ============================================================
   FAQ
   ============================================================ */
@media (max-width: 768px) {
  .faq-shell {
    padding: 0 12px !important;
  }
  .faq-grid,
  .faq-list {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .faq-item {
    padding: 14px 16px !important;
    border-radius: 12px !important;
  }
  .faq-item__head,
  .faq-item__question,
  .faq-item summary {
    font-size: 15px !important;
    line-height: 1.4 !important;
    padding: 0 !important;
  }
  .faq-item__content,
  .faq-item__answer {
    font-size: 14px !important;
    line-height: 1.55 !important;
    padding-top: 10px !important;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
@media (max-width: 768px) {
  .footer,
  .footer--site-minimal,
  .footer--site-luxury-minimal {
    padding: 28px 0 20px !important;
  }
  .footer-site-minimal,
  .footer-site-minimal--luxury {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 0 16px !important;
  }
  .footer-site-minimal__brand,
  .footer-site-minimal__brand--luxury,
  .footer-site-minimal__contacts,
  .footer-site-minimal__contacts--luxury,
  .footer-site-minimal__docs,
  .footer-site-minimal__docs--luxury {
    width: 100% !important;
    text-align: left !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .footer-site-minimal__title {
    font-size: 12px !important;
    letter-spacing: 1.2px !important;
    margin-bottom: 4px;
  }
  .footer-site-minimal__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 16px !important;
    text-align: left !important;
  }
  .footer-site-minimal__bottom-meta {
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
    font-size: 12px !important;
  }
  .footer a,
  .footer-site-minimal a {
    font-size: 14px !important;
    padding: 4px 0 !important;
  }
}

/* ============================================================
   FORMS (auth, signup, become-booster, support, order)
   ============================================================ */
@media (max-width: 768px) {
  .auth-shell,
  .signup-shell,
  .form-shell,
  .form-card,
  .auth-card,
  .signup-card {
    padding: 24px 18px !important;
    border-radius: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px auto !important;
  }
  .auth-form,
  .signup-form,
  form.form,
  form {
    width: 100% !important;
  }
  .form-group,
  .form-row,
  .form-field {
    width: 100% !important;
    margin-bottom: 14px !important;
  }
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  textarea,
  select {
    width: 100% !important;
    font-size: 16px !important; /* iOS no-zoom */
    padding: 12px 14px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }
  textarea {
    min-height: 100px !important;
  }
  label,
  .form-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    display: block;
  }
  .auth-hint,
  .form-hint,
  .order-redirect-card__hint {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .order-redirect-card__lead {
    font-size: 14px !important;
  }
}

/* ============================================================
   BUTTONS — global tweaks
   ============================================================ */
@media (max-width: 768px) {
  .btn,
  button.btn,
  a.btn {
    min-height: 44px;
    font-size: 14px !important;
    padding: 11px 18px !important;
    border-radius: 10px !important;
  }
  .btn--big {
    font-size: 15px !important;
    padding: 14px 20px !important;
  }
  .btn--full,
  .btn--primary.btn--full {
    width: 100% !important;
  }
}

/* ============================================================
   LEGAL DOCS (privacy, refund, offer)
   ============================================================ */
@media (max-width: 768px) {
  .legal-doc,
  .legal-shell,
  .legal-content,
  .doc-shell {
    padding: 18px 14px !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  .legal-doc h1,
  .legal-content h1 {
    font-size: 24px !important;
  }
  .legal-doc h2,
  .legal-content h2 {
    font-size: 19px !important;
    margin-top: 22px !important;
  }
  .legal-doc h3,
  .legal-content h3 {
    font-size: 16px !important;
  }
  .legal-doc table,
  .legal-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
  }
  .legal-doc ul,
  .legal-doc ol {
    padding-left: 22px !important;
  }
}

/* ============================================================
   LANDING / GUIDE PAGES (faceit-boost, premier-boost, cases, guides)
   ============================================================ */
@media (max-width: 768px) {
  .guide-shell,
  .article-shell,
  .case-shell,
  .landing-shell,
  .case-content,
  .article-content {
    padding: 0 14px !important;
    max-width: 100% !important;
  }
  .toc,
  .table-of-contents {
    padding: 14px !important;
    font-size: 14px !important;
  }
  .case-hero,
  .landing-hero,
  .article-hero {
    padding: 28px 0 22px !important;
  }
  .case-hero__title,
  .landing-hero__title,
  .article-hero__title {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }
  .case-hero__lead,
  .landing-hero__lead,
  .article-hero__lead {
    font-size: 15px !important;
  }
  .case-stats,
  .case-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .case-stat,
  .case-stat-card {
    padding: 14px 12px !important;
  }
  .case-stat__value {
    font-size: 22px !important;
  }
  .case-stat__label {
    font-size: 11px !important;
  }
  .price-card,
  .pricing-card,
  .package-card {
    padding: 18px !important;
    border-radius: 14px !important;
  }
  .price-card__price,
  .pricing-card__price {
    font-size: 28px !important;
  }
  pre,
  code {
    font-size: 12px !important;
    overflow-x: auto;
  }
  blockquote {
    margin: 16px 0 !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .case-hero__title,
  .landing-hero__title,
  .article-hero__title {
    font-size: 24px !important;
  }
  .case-stats,
  .case-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   CABINET / CHATS / ORDER (private area)
   ============================================================ */
@media (max-width: 768px) {
  .cabinet-shell,
  .cabinet-layout,
  .chats-shell,
  .order-shell {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    gap: 12px !important;
  }
  .cabinet-side,
  .cabinet-sidebar,
  .chats-sidebar {
    width: 100% !important;
    position: static !important;
    max-width: 100% !important;
  }
  .cabinet-main,
  .chats-main {
    width: 100% !important;
    padding: 14px !important;
  }
  .cabinet-tabs,
  .tabs-list {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cabinet-tabs::-webkit-scrollbar,
  .tabs-list::-webkit-scrollbar { display: none; }
  .cabinet-tab,
  .tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 13px !important;
  }
  .order-card,
  .cabinet-card {
    padding: 16px !important;
    border-radius: 14px !important;
  }
  .chats-list-item,
  .chat-item {
    padding: 12px !important;
  }
  .chat-message,
  .chat-bubble {
    max-width: 88% !important;
    font-size: 14px !important;
  }
}

/* ============================================================
   ABOUT / SUPPORT / BECOME-BOOSTER
   ============================================================ */
@media (max-width: 768px) {
  .about-shell,
  .support-shell,
  .become-booster-shell {
    padding: 24px 14px !important;
  }
  .about-hero,
  .support-hero,
  .become-hero {
    padding: 28px 0 20px !important;
    text-align: center;
  }
  .about-hero__title,
  .support-hero__title,
  .become-hero__title {
    font-size: 28px !important;
  }
  .support-cards,
  .become-cards,
  .about-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .support-card,
  .become-card {
    padding: 18px !important;
  }
  .become-form-shell,
  .support-form-shell {
    padding: 20px 16px !important;
  }
}

/* ============================================================
   SAFETY: hide pure decoration that breaks layout
   ============================================================ */
@media (max-width: 768px) {
  .cs2-fx,
  .cs2-fx__grid,
  .cs2-fx__smoke,
  .cs2-fx__smoke--a,
  .cs2-fx__smoke--b {
    display: none !important;
  }
}

/* ============================================================
   END
   ============================================================ */