/* =========================================================
   KOMIKSAN STEP 17 REPLACE
   Mobile footer polish: spacing, lighter text, WhatsApp button, map/login buttons
   Soubor: komiksan-step17-replace-mobile-footer-polish.css
   FTP: /upload/komiksan-step17-replace-mobile-footer-polish.css
   WEB: /user/documents/upload/komiksan-step17-replace-mobile-footer-polish.css

   Pozn.:
   - Nahrazuje starý step17.
   - Platí pouze pro mobil do 767px.
   - Desktop footer nechává beze změny.
   - WhatsApp tlačítko doplňuje JS soubor:
     komiksan-step17-footer-whatsapp-button.js
   ========================================================= */

@media (max-width: 767px) {
  :root {
    --ks-footer-pink: #FF00D8;
    --ks-footer-blue: #1806FD;
    --ks-footer-green: #08C55F;
    --ks-footer-yellow: #FFD600;
    --ks-footer-white: #FFFFFF;
    --ks-footer-radius: 999px;
  }

  /* Celkový prostor footeru */
  #footer,
  .footer,
  footer {
    padding-top: 34px !important;
    padding-bottom: 18px !important;
  }

  #footer .container,
  .footer .container,
  footer .container {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* Vzdušnější sekce */
  #footer .custom-footer > *,
  #footer .footer-row > *,
  #footer .footer-rows > *,
  #footer .footer-in > *,
  #footer .footer-inner > *,
  #footer .box,
  #footer .box-wrapper,
  #footer .contact-box,
  #footer .footer-contact,
  #footer .footer-links,
  #footer .footer-newsletter,
  #footer .footer-login,
  .footer .custom-footer > *,
  .footer .footer-row > *,
  .footer .footer-rows > *,
  .footer .footer-in > *,
  .footer .footer-inner > *,
  .footer .box,
  .footer .box-wrapper,
  .footer .contact-box,
  .footer .footer-contact,
  .footer .footer-links,
  .footer .footer-newsletter,
  .footer .footer-login {
    margin-bottom: 30px !important;
  }

  /* Nadpisy: Kontakt, Kamenný obchod, Informace pro vás, Přihlášení */
  #footer h2,
  #footer h3,
  #footer h4,
  #footer .title,
  #footer .footer-title,
  #footer .box-title,
  #footer .contact-title,
  #footer strong:first-child,
  .footer h2,
  .footer h3,
  .footer h4,
  .footer .title,
  .footer .footer-title,
  .footer .box-title,
  .footer .contact-title,
  .footer strong:first-child,
  footer h2,
  footer h3,
  footer h4 {
    font-weight: 900 !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }

  /* Běžné texty méně tučné */
  #footer p,
  #footer span,
  #footer li,
  #footer address,
  #footer .text,
  #footer .description,
  #footer .footer-text,
  .footer p,
  .footer span,
  .footer li,
  .footer address,
  .footer .text,
  .footer .description,
  .footer .footer-text,
  footer p,
  footer span,
  footer li,
  footer address {
    font-weight: 400 !important;
    line-height: 1.52 !important;
  }

  /* Běžné odkazy: Jak nakupovat / Obchodní podmínky / GDPR atd. */
  #footer a:not(.ks-footer-whatsapp-btn):not([href*="maps"]):not([href*="google"]),
  .footer a:not(.ks-footer-whatsapp-btn):not([href*="maps"]):not([href*="google"]),
  footer a:not(.ks-footer-whatsapp-btn):not([href*="maps"]):not([href*="google"]) {
    font-weight: 500 !important;
    line-height: 1.55 !important;
    text-decoration: none !important;
  }

  #footer ul,
  .footer ul,
  footer ul {
    padding-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #footer li,
  .footer li,
  footer li {
    margin-bottom: 8px !important;
  }

  /* Kontaktové odkazy necháme o něco výraznější */
  #footer a[href^="mailto:"],
  #footer a[href^="tel:"],
  .footer a[href^="mailto:"],
  .footer a[href^="tel:"],
  footer a[href^="mailto:"],
  footer a[href^="tel:"] {
    font-weight: 700 !important;
  }

  /* Instagram + WhatsApp tlačítko vedle sebe */
  #footer a[href*="instagram.com"],
  .footer a[href*="instagram.com"],
  footer a[href*="instagram.com"] {
    display: inline-flex !important;
    vertical-align: middle !important;
    margin-right: 10px !important;
    margin-top: 8px !important;
  }

  .ks-footer-whatsapp-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 38px !important;
    padding: 0 16px !important;
    margin-top: 8px !important;
    vertical-align: middle !important;
    border-radius: var(--ks-footer-radius) !important;
    background: var(--ks-footer-green) !important;
    background-color: var(--ks-footer-green) !important;
    color: var(--ks-footer-white) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  .ks-footer-whatsapp-btn:hover,
  .ks-footer-whatsapp-btn:focus {
    background: var(--ks-footer-pink) !important;
    background-color: var(--ks-footer-pink) !important;
    color: var(--ks-footer-white) !important;
  }

  .ks-footer-whatsapp-btn svg {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
    fill: currentColor !important;
  }

  /* Google Maps tlačítko: růžový text a vycentrovat pod mapou */
  #footer a[href*="maps"],
  #footer a[href*="google.com/maps"],
  #footer a[href*="goo.gl/maps"],
  .footer a[href*="maps"],
  .footer a[href*="google.com/maps"],
  .footer a[href*="goo.gl/maps"],
  footer a[href*="maps"],
  footer a[href*="google.com/maps"],
  footer a[href*="goo.gl/maps"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 12px auto 0 auto !important;
    padding: 10px 18px !important;
    width: fit-content !important;
    max-width: 100% !important;
    border-radius: var(--ks-footer-radius) !important;
    color: var(--ks-footer-pink) !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  /* Wrapper kolem mapy/odkazu vycentrovat, pokud existuje */
  #footer [class*="map"],
  .footer [class*="map"],
  footer [class*="map"] {
    text-align: center !important;
  }

  /* Přihlášení - inputy */
  #footer input[type="text"],
  #footer input[type="email"],
  #footer input[type="password"],
  .footer input[type="text"],
  .footer input[type="email"],
  .footer input[type="password"],
  footer input[type="text"],
  footer input[type="email"],
  footer input[type="password"] {
    min-height: 44px !important;
    border-radius: var(--ks-footer-radius) !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #footer input::placeholder,
  .footer input::placeholder,
  footer input::placeholder {
    font-size: 12px !important;
    font-weight: 400 !important;
    opacity: 0.72 !important;
  }

  /* Přihlášení - tlačítko */
  #footer button,
  #footer input[type="submit"],
  #footer .btn,
  .footer button,
  .footer input[type="submit"],
  .footer .btn,
  footer button,
  footer input[type="submit"],
  footer .btn {
    border-radius: var(--ks-footer-radius) !important;
  }

  /* Ale běžné login tlačítko necháme hezky růžové */
  #footer input[type="submit"],
  #footer button[type="submit"],
  #footer .btn-primary,
  #footer .btn-conversion,
  .footer input[type="submit"],
  .footer button[type="submit"],
  .footer .btn-primary,
  .footer .btn-conversion,
  footer input[type="submit"],
  footer button[type="submit"],
  footer .btn-primary,
  footer .btn-conversion {
    background: var(--ks-footer-pink) !important;
    background-color: var(--ks-footer-pink) !important;
    border-color: var(--ks-footer-pink) !important;
    color: var(--ks-footer-white) !important;
    font-weight: 800 !important;
    min-height: 44px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Spodní Shoptet/copyright část - menší, ale čitelná */
  #footer .footer-bottom,
  #footer .copyright,
  #footer .signature,
  #footer .created-by,
  #footer .powered-by,
  #footer [class*="copyright"],
  #footer [class*="shoptet"],
  .footer .footer-bottom,
  .footer .copyright,
  .footer .signature,
  .footer .created-by,
  .footer .powered-by,
  .footer [class*="copyright"],
  .footer [class*="shoptet"],
  footer .footer-bottom,
  footer .copyright,
  footer .signature,
  footer .created-by,
  footer .powered-by,
  footer [class*="copyright"],
  footer [class*="shoptet"] {
    margin-top: 20px !important;
    padding-top: 14px !important;
    padding-bottom: 8px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    opacity: 0.82 !important;
    text-align: center !important;
    color: rgba(255,255,255,0.78) !important;
  }

  #footer .footer-bottom *,
  #footer .copyright *,
  #footer .signature *,
  #footer .created-by *,
  #footer .powered-by *,
  #footer [class*="copyright"] *,
  #footer [class*="shoptet"] *,
  .footer .footer-bottom *,
  .footer .copyright *,
  .footer .signature *,
  .footer .created-by *,
  .footer .powered-by *,
  .footer [class*="copyright"] *,
  .footer [class*="shoptet"] *,
  footer .footer-bottom *,
  footer .copyright *,
  footer .signature *,
  footer .created-by *,
  footer .powered-by *,
  footer [class*="copyright"] *,
  footer [class*="shoptet"] * {
    font-size: 10px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.78) !important;
    opacity: 1 !important;
  }

  /* Malé Shoptet logo/ikonku nenechat dělat nečitelnou mezeru */
  #footer .footer-bottom img,
  #footer .copyright img,
  #footer .signature img,
  #footer .created-by img,
  #footer .powered-by img,
  #footer [class*="shoptet"] img,
  .footer .footer-bottom img,
  .footer .copyright img,
  .footer .signature img,
  .footer .created-by img,
  .footer .powered-by img,
  .footer [class*="shoptet"] img,
  footer .footer-bottom img,
  footer .copyright img,
  footer .signature img,
  footer .created-by img,
  footer .powered-by img,
  footer [class*="shoptet"] img {
    max-height: 10px !important;
    width: auto !important;
    margin: 0 3px !important;
    vertical-align: baseline !important;
    opacity: 0.8 !important;
  }
}