/* TwitSticker Custom CSS - Mobile Optimized */

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

body {
  padding-top: 0;
  padding-bottom: var(--sab);
  padding-left: var(--sal);
  padding-right: var(--sar);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Checkerboard background for transparent media */
.checkerboard-bg {
  background-color: #121824;
  background-image: 
    linear-gradient(45deg, #182232 25%, transparent 25%), 
    linear-gradient(-45deg, #182232 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #182232 75%), 
    linear-gradient(-45deg, transparent 75%, #182232 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

/* WhatsApp Dark Chat Theme Simulation */
.wa-dark-theme {
  background-color: #0b141a !important;
  background-image: radial-gradient(#1f2c34 1px, transparent 1px), radial-gradient(#1f2c34 1px, #0b141a 1px) !important;
  background-size: 20px 20px !important;
  background-position: 0 0, 10px 10px !important;
}

.wa-dark-theme #chatBubble {
  background-color: #005c4b !important;
  border-bottom-right-radius: 4px !important;
}

/* WhatsApp Light Chat Theme Simulation */
.wa-light-theme {
  background-color: #efeae2 !important;
  background-image: radial-gradient(#d1d7db 1px, transparent 1px), radial-gradient(#d1d7db 1px, #efeae2 1px) !important;
  background-size: 20px 20px !important;
  background-position: 0 0, 10px 10px !important;
}

.wa-light-theme #chatBubble {
  background-color: #d9fdd3 !important;
  border-bottom-right-radius: 4px !important;
}

.wa-light-theme #chatBubble span {
  color: #667781 !important;
}

/* Custom Range Slider - Optimized for Touch on Mobile */
.custom-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: #1e293b;
  border-radius: 9999px;
  outline: none;
  cursor: pointer;
  touch-action: pan-y;
}

.custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #25D366;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(37, 211, 102, 0.6);
  border: 2px solid #ffffff;
  transition: transform 0.1s ease;
}

.custom-range::-webkit-slider-thumb:active {
  transform: scale(1.2);
}

.custom-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #25D366;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(37, 211, 102, 0.6);
  border: 2px solid #ffffff;
}

/* Touch friendly button active states */
button:active, a:active {
  transform: scale(0.98);
}

/* Segmented Control on Mobile */
.segmented-nav {
  display: flex;
  background: #070a10;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid #1e293b;
}

/* Keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.25s ease-out forwards;
}

/* Mobile Bottom Sheet Modal */
@media (max-width: 640px) {
  .modal-sheet {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  
  .modal-sheet > div {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    max-height: 90vh !important;
    padding-bottom: max(20px, var(--sab)) !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: #0b0e14;
}

::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 3px;
}

/* Ad slots: Hide completely when no ad is loaded */
.ad-slot-wrapper.hidden {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Pulsing glow animation for the primary Save Sticker button */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.35), 0 0 30px rgba(37, 211, 102, 0.15);
  }
  50% {
    box-shadow: 0 0 24px rgba(37, 211, 102, 0.65), 0 0 45px rgba(37, 211, 102, 0.3);
  }
}

.btn-pulse-glow {
  animation: pulseGlow 2.5s infinite;
}