/*
Theme Name: StreamoreLinks
Theme URI: https://streamorelinks.stream
Author: Alpha Musunko
Author URI: https://streamorelinks.stream
Description: StreamoreLinks is the best for Landing page for Software, programs or any downloadable content, You can easily customise this theme in Customise than using drag and drop, you can create new additional pages for this theme.\n\nCrafted with Vite and React, this WordPress theme is purpose-built for the StreamoreLinks Fast Downloader platform. Designed by Alpha Musunko, it delivers exceptional speed, seamless integration, and a modern, responsive interface optimized for performance.\nPerfect for content-driven websites, the theme ensures a smooth user experience, fast loading times, and full compatibility with WordPress customization tools.\n\nAuthor: Alpha Musunko\nWebsite: https://streamorelinks.stream\nEmail: writiflyingdata@gmail.com
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: streamorelinks
*/

:root {
  --background: 218 100% 4%;
  --foreground: 210 40% 98%;
  --card: 217 91% 8%;
  --card-foreground: 210 40% 98%;
  --popover: 217 91% 8%;
  --popover-foreground: 210 40% 98%;
  --primary: 217 91% 55%;
  --primary-foreground: 210 40% 98%;
  --primary-dark: 217 91% 35%;
  --primary-light: 217 91% 75%;
  --secondary: 217 91% 12%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217 50% 20%;
  --muted-foreground: 217 20% 65%;
  --accent: 217 91% 15%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 217 50% 15%;
  --input: 217 50% 15%;
  --ring: 217 91% 55%;
  --blue-gradient-start: 218 100% 8%;
  --blue-gradient-end: 217 91% 12%;
  --hero-gradient-start: 217 91% 15%;
  --hero-gradient-end: 217 91% 8%;
  --feature-card: 217 91% 10%;
  --feature-border: 217 50% 20%;
  --success: 142 76% 36%;
  --warning: 38 92% 50%;
  --info: 199 89% 48%;
  --radius: 0.75rem;
  --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-dark)));
  --gradient-hero: linear-gradient(135deg, hsl(var(--hero-gradient-start)), hsl(var(--hero-gradient-end)));
  --gradient-background: linear-gradient(180deg, hsl(var(--blue-gradient-start)), hsl(var(--blue-gradient-end)));
  --shadow-feature: 0 10px 40px -10px hsl(var(--primary) / 0.3);
  --shadow-card: 0 4px 20px -4px hsl(217 91% 5% / 0.5);
  --shadow-button: 0 4px 15px -4px hsl(var(--primary) / 0.4);
}

body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }
.bg-background { background-color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.bg-feature-card { background-color: hsl(var(--feature-card)); }
.border-feature-border { border-color: hsl(var(--feature-border)); }
.bg-gradient-background { background-image: var(--gradient-background); }
.bg-gradient-hero { background-image: var(--gradient-hero); }
.bg-gradient-primary { background-image: var(--gradient-primary); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-success { color: hsl(var(--success)); }
.text-info { color: hsl(var(--info)); }
.text-warning { color: hsl(var(--warning)); }
.shadow-feature { box-shadow: var(--shadow-feature); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-button { box-shadow: var(--shadow-button); }
.bg-accent { background-color: hsl(var(--accent)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
.btn-base { 
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 0.5rem; font-weight: 600; transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.btn-primary { background-image: var(--gradient-primary); color: hsl(var(--primary-foreground)); box-shadow: var(--shadow-button); }
.btn-primary:hover { transform: scale(1.05); box-shadow: 0 10px 25px -10px hsl(var(--primary) / .5); }
.btn-secondary { border: 1px solid hsl(var(--feature-border)); background-color: hsl(var(--feature-card)); color: hsl(var(--foreground)); }
.btn-ghost { background: transparent; color: hsl(var(--foreground)); }
.icon-4 { width: 1rem; height: 1rem; }
.icon-5 { width: 1.25rem; height: 1.25rem; }
.max-w-7xl { max-width: 80rem; }
.transition-smooth { transition: var(--transition-smooth, all .3s cubic-bezier(.4,0,.2,1)); }

/* Motion approximations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .6s ease-out forwards; }

/* Hover helpers */
.hover\:scale-105:hover { transform: scale(1.05); }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }

/* Feature Request Container - Reduced Size */
.feature-request-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background-color: hsl(var(--card));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.feature-request-container h2 {
  margin-bottom: 1.5rem;
  color: hsl(var(--foreground));
  text-align: center;
}

.feature-request-form .form-group {
  margin-bottom: 1rem;
}

.feature-request-form label {
  display: block;
  margin-bottom: 0.5rem;
  color: hsl(var(--foreground));
  font-weight: 500;
}

.feature-request-form input,
.feature-request-form textarea,
.feature-request-form select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  background-color: hsl(var(--input));
  color: hsl(var(--foreground));
  font-size: 0.875rem;
}

.feature-request-form input:focus,
.feature-request-form textarea:focus,
.feature-request-form select:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1);
}

.submit-btn {
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: #ffffff;
  border: none;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
  background: linear-gradient(135deg, #0056b3, #004085);
}

.submit-btn:hover::before {
  left: 100%;
}

.submit-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

/* SharpZinto Internet Manager - Comments Container */
.sharpzinto-wifi-manager {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.comments-section {
  background-color: #ffffff;
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-card);
}

.comments-title {
  color: #000000 !important;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-align: center;
}

.comments-subtitle {
  color: #000000 !important;
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 2rem;
  opacity: 0.8;
}

.comments-closed {
  color: #666;
  text-align: center;
  font-style: italic;
  padding: 2rem;
}

.comments-section h3 {
  color: #333;
  margin-bottom: 1rem;
}

.comments-section .comment-form {
  background-color: #ffffff;
}

.comments-section .comment-form textarea {
  background-color: #ffffff;
  color: #333;
  border: 1px solid #ddd;
}

.comments-section .comment-form input[type="text"],
.comments-section .comment-form input[type="email"],
.comments-section .comment-form input[type="url"] {
  background-color: #ffffff;
  color: #333;
  border: 1px solid #ddd;
}

.comments-section .comment-form input[type="submit"] {
  background-color: hsl(var(--primary));
  color: #ffffff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 600;
}

.comments-section .comment-form input[type="submit"]:hover {
  background-color: hsl(var(--primary-dark));
}

.comments-section .comment-list {
  margin-top: 2rem;
}

.comments-section .comment {
  background-color: #f9f9f9;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  border-left: 3px solid hsl(var(--primary));
}

.comments-section .comment-author {
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
}

.comments-section .comment-date {
  color: #666;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.comments-section .comment-content {
  color: #333;
  line-height: 1.6;
}

/* WiFi Comment Form Styling */
.wifi-comment-form {
  margin-top: 2rem;
  padding: 2rem;
  background-color: #f8f9fa;
  border-radius: var(--radius);
  border: 1px solid #e9ecef;
}

.wifi-comment-form .form-group {
  margin-bottom: 1.5rem;
}

.wifi-comment-form label {
  display: block;
  margin-bottom: 0.5rem;
  color: #333;
  font-weight: 600;
}

.wifi-comment-form input,
.wifi-comment-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  background-color: #ffffff;
  color: #333;
  font-size: 0.875rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.wifi-comment-form input:focus,
.wifi-comment-form textarea:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
}

.wifi-comment-form .submit-btn {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: #ffffff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.wifi-comment-form .submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
  background: linear-gradient(135deg, #0056b3, #004085);
}

.wifi-comments-list {
  margin-top: 2rem;
  padding: 1rem;
  background-color: #ffffff;
  border-radius: var(--radius);
  border: 1px solid #e9ecef;
}

/* Loading Screen Styles */
.streamorelinks-loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, hsl(var(--background)), hsl(var(--card)));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
  margin: 0;
  padding: 0;
}

.streamorelinks-loading-screen.fade-out {
  opacity: 0;
  visibility: hidden;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: loadingFadeIn 1s ease-out;
  position: relative;
}

.loading-logo-container {
  position: relative;
  z-index: 2;
  margin-bottom: 2rem;
}

.loading-logo {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  animation: logoFloat 2s ease-in-out infinite;
}

.loading-text-container {
  position: relative;
  z-index: 2;
  margin: 0 0 2rem 0;
}

.loading-business-name {
  font-size: 35px;
  font-weight: bold;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.2;
  text-align: center;
  min-height: 1.2em;
}

.typing-text {
  color: hsl(var(--primary));
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'Courier New', monospace;
  letter-spacing: 0.1em;
}

.typing-cursor {
  color: hsl(var(--primary));
  font-weight: 100;
  animation: blink 1s infinite;
  margin-left: 2px;
}

/* AI Typing Animation */
.typing-text .word {
  display: inline-block;
  margin-right: 0.5em;
}

.typing-text .word-1 {
  color: hsl(var(--primary));
}

.typing-text .word-2 {
  color: #fbbf24; /* Yellow color for "Mobiles" */
}

.typing-text .word-3 {
  color: hsl(var(--primary-dark));
}

.typing-text .word-4 {
  color: #a855f7; /* Purple light color for "Technology" */
}

/* Progress Bar Styles */
.loading-progress-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

.loading-progress-bar {
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.loading-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, hsl(var(--primary)), #fbbf24, #a855f7);
  border-radius: 2px;
  width: 0%;
  animation: progressFill 2.5s ease-in-out forwards;
}

.loading-progress-text {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  text-align: center;
  font-weight: 500;
}

/* Animations */
@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes progressFill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

@keyframes wordColorChange {
  0%, 20% {
    opacity: 1;
    transform: scale(1);
  }
  25%, 35% {
    opacity: 0.7;
    transform: scale(1.1);
  }
  40%, 100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes loadingFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading screen responsive design */
@media (max-width: 768px) {
  .loading-logo {
    width: 60px;
    height: 60px;
  }
  
  .loading-business-name {
    font-size: 28px !important;
    text-align: center;
  }
  
  .typing-text {
    font-size: 28px !important;
  }
  
  .loading-progress-container {
    max-width: 250px;
  }
}

@media (max-width: 480px) {
  .loading-logo {
    width: 50px;
    height: 50px;
  }
  
  .loading-business-name {
    font-size: 24px !important;
  }
  
  .typing-text {
    font-size: 24px !important;
  }
  
  .loading-progress-container {
    max-width: 200px;
  }
  
  .loading-progress-text {
    font-size: 0.75rem;
  }
}

/* Ensure loading screen is always perfectly centered */
.streamorelinks-loading-screen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.loading-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  max-width: 90vw;
  position: relative;
}

/* Ensure loading screen is always on top */
.streamorelinks-loading-screen {
  z-index: 99999 !important;
}

/* Mobile Menu Drawer Styles */
#mobile-menu-toggle {
  z-index: 1001;
  position: relative;
}

#mobile-menu-overlay {
  z-index: 40;
  backdrop-filter: blur(2px);
}

#mobile-menu-drawer {
  z-index: 50;
  border-radius: 0 0 0 1rem;
  box-shadow: -10px 0 25px rgba(0, 0, 0, 0.15);
}

/* Mobile Menu Items */
.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin: 0.25rem 0;
  border-radius: 0.5rem;
  color: hsl(var(--foreground));
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  border: 1px solid transparent;
}

.mobile-menu-item:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  transform: translateX(4px);
  border-color: hsl(var(--feature-border));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mobile-menu-item:active {
  transform: translateX(2px) scale(0.98);
}

.mobile-menu-item i {
  flex-shrink: 0;
  opacity: 0.8;
  transition: opacity 0.2s ease-in-out;
}

.mobile-menu-item:hover i {
  opacity: 1;
}

.mobile-menu-item span {
  flex: 1;
  font-size: 0.95rem;
}

/* Drawer Header */
#mobile-menu-drawer .flex.items-center.justify-between {
  background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--muted)));
  border-bottom: 1px solid hsl(var(--feature-border));
}

#mobile-menu-close {
  transition: all 0.2s ease-in-out;
}

#mobile-menu-close:hover {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  transform: scale(1.05);
}

/* Drawer Content */
#mobile-menu-drawer nav {
  padding: 1rem;
}

#mobile-menu-drawer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#mobile-menu-drawer nav li {
  margin: 0;
  padding: 0;
}

/* Drawer Footer */
#mobile-menu-drawer .border-t {
  background: linear-gradient(135deg, hsl(var(--muted)), hsl(var(--card)));
  border-top: 1px solid hsl(var(--feature-border));
}

/* Animation Enhancements */
#mobile-menu-drawer {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobile-menu-overlay {
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Mobile Menu Responsive Adjustments */
@media (max-width: 480px) {
  #mobile-menu-drawer {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
  }
  
  .mobile-menu-item {
    padding: 1rem;
    font-size: 1rem;
  }
  
  .mobile-menu-item i {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* Focus States for Accessibility */
.mobile-menu-item:focus {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

#mobile-menu-toggle:focus,
#mobile-menu-close:focus {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* Smooth scrolling for drawer content */
#mobile-menu-drawer .flex-1 {
  scroll-behavior: smooth;
}

/* Custom scrollbar for drawer */
#mobile-menu-drawer .flex-1::-webkit-scrollbar {
  width: 4px;
}

#mobile-menu-drawer .flex-1::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}

#mobile-menu-drawer .flex-1::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground));
  border-radius: 2px;
}

#mobile-menu-drawer .flex-1::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--foreground));
}

/* Responsive Design */
@media (max-width: 1024px) {
  /* Tablet styles */
  .max-w-7xl {
    max-width: 90%;
  }
  
  .px-6 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (max-width: 768px) {
  /* Mobile styles */
  .max-w-7xl {
    max-width: 95%;
  }
  
  .px-6 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  /* Typography adjustments */
  .text-xl {
    font-size: 1.125rem;
  }
  
  .text-2xl {
    font-size: 1.5rem;
  }
  
  .text-3xl {
    font-size: 1.875rem;
  }
  
  .text-4xl {
    font-size: 2.25rem;
  }
  
  .text-5xl {
    font-size: 2.5rem;
  }
  
  /* Button adjustments */
  .btn-base {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }
  
  /* Grid adjustments */
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .grid-cols-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  /* Flex adjustments */
  .flex-col {
    flex-direction: column;
  }
  
  .items-center {
    align-items: flex-start;
  }
  
  .text-center {
    text-align: left;
  }
  
  /* Spacing adjustments */
  .space-y-4 > * + * {
    margin-top: 1rem;
  }
  
  .space-y-6 > * + * {
    margin-top: 1.5rem;
  }
  
  .space-y-8 > * + * {
    margin-top: 2rem;
  }
  
  .space-y-12 > * + * {
    margin-top: 3rem;
  }
  
  /* Padding adjustments */
  .py-12 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  .py-16 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  
  .py-20 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  
  .py-24 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  
  /* Margin adjustments */
  .my-12 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  
  .my-16 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  
  .my-20 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  
  /* Feature cards mobile */
  .feature-card {
    margin-bottom: 1.5rem;
  }
  
  /* Hero section mobile */
  .hero-section {
    padding: 2rem 0;
  }
  
  .hero-title {
    font-size: 2rem;
    line-height: 1.2;
  }
  
  .hero-subtitle {
    font-size: 1rem;
    line-height: 1.5;
  }
  
  /* Comments dialog mobile */
  .streamorelinks-comment-dialog-content {
    width: 95%;
    margin: 20px;
  }
  
  .streamorelinks-comment-dialog-header,
  .streamorelinks-comment-dialog-body {
    padding: 16px;
  }
  
  .streamorelinks-comments-form-container {
    padding: 24px;
  }
  
  .streamorelinks-comments-header h1 {
    font-size: 24px;
  }
  
  /* WiFi comments mobile */
  .wifi-comment-form {
    padding: 1.5rem;
    margin: 1rem 0;
  }
  
  .wifi-comments-list {
    padding: 1rem;
  }
  
  /* Feature request mobile */
  .feature-request-container {
    padding: 1.5rem;
    margin: 1rem;
  }
  
  /* SharpZinto WiFi Manager mobile */
  .sharpzinto-wifi-manager {
    padding: 1rem;
  }
  
  .comments-section {
    padding: 1.5rem;
  }
  
  .comments-title {
    font-size: 1.5rem;
  }
  
  .comments-subtitle {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  /* Small mobile styles */
  .px-4 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  .py-4 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  
  /* Typography for small screens */
  .text-lg {
    font-size: 1rem;
  }
  
  .text-xl {
    font-size: 1.125rem;
  }
  
  .text-2xl {
    font-size: 1.25rem;
  }
  
  .text-3xl {
    font-size: 1.5rem;
  }
  
  .text-4xl {
    font-size: 1.75rem;
  }
  
  .text-5xl {
    font-size: 2rem;
  }
  
  /* Button adjustments for small screens */
  .btn-base {
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
  }
  
  /* Hero section small mobile */
  .hero-title {
    font-size: 1.75rem;
  }
  
  .hero-subtitle {
    font-size: 0.9375rem;
  }
  
  /* Form adjustments */
  .form-group input,
  .form-group textarea {
    padding: 0.625rem;
    font-size: 0.875rem;
  }
  
  /* Comments mobile small */
  .streamorelinks-comment-dialog-content {
    width: 98%;
    margin: 10px;
  }
  
  .streamorelinks-comment-dialog-header,
  .streamorelinks-comment-dialog-body {
    padding: 12px;
  }
  
  .streamorelinks-comments-form-container {
    padding: 16px;
  }
  
  .streamorelinks-comments-header h1 {
    font-size: 20px;
  }
  
  /* WiFi comments small mobile */
  .wifi-comment-form {
    padding: 1rem;
  }
  
  .wifi-comments-list {
    padding: 0.75rem;
  }
  
  /* Feature request small mobile */
  .feature-request-container {
    padding: 1rem;
    margin: 0.5rem;
  }
  
  /* SharpZinto WiFi Manager small mobile */
  .sharpzinto-wifi-manager {
    padding: 0.75rem;
  }
  
  .comments-section {
    padding: 1rem;
  }
  
  .comments-title {
    font-size: 1.25rem;
  }
  
  .comments-subtitle {
    font-size: 0.875rem;
  }
}

/* Landscape mobile adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-section {
    padding: 1.5rem 0;
  }
  
  .py-12 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  
  .py-16 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  .py-20 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  
  .py-24 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .icon-4, .icon-5 {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Print styles */
@media print {
  .mobile-menu,
  #mobile-menu-toggle,
  .streamorelinks-comment-dialog,
  .wifi-floating-comment-btn,
  .wifi-comment-modal {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  .bg-gradient-background,
  .bg-gradient-hero,
  .bg-card {
    background: white !important;
  }
  
  .text-foreground,
  .text-card-foreground {
    color: black !important;
  }
}