/* ============================================================
   redesign.css — Premium UI Override
   Image Converter Tool — AdSense-Ready Modern Redesign
   Font: Plus Jakarta Sans | Accent: Indigo-600
   ============================================================ */

/* ---------- 1. GOOGLE FONT IMPORT (fallback if head fails) -- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ---------- 2. CSS DESIGN TOKENS ---------------------------- */
:root {
  --rds-primary:        #4F46E5;
  --rds-primary-hover:  #4338CA;
  --rds-primary-light:  #EEF2FF;
  --rds-primary-ring:   rgba(79, 70, 229, 0.25);
  --rds-bg:             #F8FAFF;
  --rds-surface:        #FFFFFF;
  --rds-border:         #E5E7EB;
  --rds-border-light:   #F3F4F6;
  --rds-text-primary:   #111827;
  --rds-text-secondary: #6B7280;
  --rds-text-muted:     #9CA3AF;
  --rds-success:        #10B981;
  --rds-error:          #EF4444;
  --rds-warning:        #F59E0B;
  --rds-nav-bg:         #FFFFFF;
  --rds-nav-border:     #E5E7EB;
  --rds-footer-bg:      #1E1B4B;
  --rds-footer-text:    #C7D2FE;
  --rds-radius-sm:      6px;
  --rds-radius:         10px;
  --rds-radius-lg:      16px;
  --rds-radius-xl:      24px;
  --rds-shadow-sm:      0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --rds-shadow:         0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --rds-shadow-lg:      0 12px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
  --rds-shadow-card:    0 2px 8px rgba(79,70,229,.08);
  --rds-transition:     all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --rds-font:           'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- 3. GLOBAL RESET & BASE -------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--rds-font) !important;
  background-color: var(--rds-bg) !important;
  color: var(--rds-text-primary) !important;
  line-height: 1.65;
  font-size: 1rem;
}

/* ---------- 4. TYPOGRAPHY ----------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rds-font) !important;
  font-weight: 700;
  line-height: 1.25;
  color: var(--rds-text-primary);
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 600; }

p { color: var(--rds-text-secondary); line-height: 1.7; }

a { transition: var(--rds-transition); }

/* ---------- 5. CUSTOM SCROLLBAR ----------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--rds-bg); }
::-webkit-scrollbar-thumb { background: #C7D2FE; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--rds-primary); }

/* ---------- 6. NAVBAR --------------------------------------- */
.top-nav,
nav.top-nav {
  background: var(--rds-nav-bg) !important;
  border-bottom: 1px solid var(--rds-nav-border) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.06) !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  color: var(--rds-text-primary) !important;
}

.top-nav .container,
nav.top-nav .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Desktop nav */
.top-nav .navbar {
  min-height: 68px;
  padding: 0 !important;
  align-items: center;
}

/* Logo text */
.top-nav .logo-text a,
.top-nav .logo-img a {
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  color: var(--rds-primary) !important;
  letter-spacing: -0.01em;
}

/* Nav menu links */
.top-nav .menu a,
.top-nav .navbar-links a {
  font-family: var(--rds-font) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--rds-text-primary) !important;
  padding: 0.45rem 0.85rem !important;
  border-radius: var(--rds-radius-sm) !important;
  text-decoration: none !important;
  position: relative;
  transition: var(--rds-transition) !important;
  background: transparent !important;
}

.top-nav .menu a:hover {
  color: var(--rds-primary) !important;
  background: var(--rds-primary-light) !important;
}

.top-nav .menu a.active,
.top-nav .navbar-links a.active {
  color: var(--rds-primary) !important;
  background: var(--rds-primary-light) !important;
  font-weight: 700 !important;
}

/* Mobile hamburger button */
.top-nav .btn-ghost,
.top-nav .btn-square {
  background: transparent !important;
  border: 1.5px solid var(--rds-border) !important;
  border-radius: var(--rds-radius-sm) !important;
  color: var(--rds-text-primary) !important;
  padding: 0.4rem !important;
  transition: var(--rds-transition) !important;
}
.top-nav .btn-ghost:hover,
.top-nav .btn-square:hover {
  background: var(--rds-primary-light) !important;
  border-color: var(--rds-primary) !important;
  color: var(--rds-primary) !important;
}

/* Mobile nav list items */
.top-nav .navbar-mobile .menu-vertical a {
  border-radius: var(--rds-radius-sm) !important;
  padding: 0.65rem 1rem !important;
  font-size: 0.95rem !important;
  margin-bottom: 2px;
}

/* Nav margin below */
.top-nav + * {
  margin-top: 2.5rem;
}

/* ---------- 7. HERO / PAGE HEADER -------------------------- */
.hero-header,
#home-page > header,
#converter > header {
  background: linear-gradient(135deg, #EEF2FF 0%, #F0FDF4 50%, #FFF7ED 100%) !important;
  border-radius: var(--rds-radius-xl) !important;
  padding: 3.5rem 2rem !important;
  margin-bottom: 2.5rem !important;
  text-align: center;
  border: 1px solid #E0E7FF;
  position: relative;
  overflow: hidden;
}

#home-page > header::before,
#converter > header::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(79,70,229,.10) 0%, transparent 70%);
  border-radius: 50%;
}

#home-page > header h2,
#converter > header h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  font-weight: 800 !important;
  color: var(--rds-text-primary) !important;
  margin-bottom: 0.85rem !important;
  letter-spacing: -0.02em;
}

#home-page > header h4,
#converter > header h4 {
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  color: var(--rds-text-secondary) !important;
  max-width: 560px;
  margin: 0 auto !important;
}

/* ---------- 8. CONVERTER CARDS (HOME) ---------------------- */
#home-page .cards .grid {
  gap: 1.25rem !important;
}

#home-page .cards a.card,
#home-page .cards a {
  background: var(--rds-surface) !important;
  border: 1.5px solid var(--rds-border) !important;
  border-radius: var(--rds-radius-lg) !important;
  padding: 1.75rem 1.25rem !important;
  text-align: center;
  text-decoration: none !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
  box-shadow: var(--rds-shadow-sm) !important;
  position: relative;
  overflow: hidden;
}

#home-page .cards a.card:hover,
#home-page .cards a:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--rds-shadow-lg) !important;
  border-color: var(--rds-primary) !important;
  background: var(--rds-surface) !important;
}

/* Card icon circle */
#home-page .card-icon {
  background: var(--rds-primary-light) !important;
  border-radius: 50% !important;
  width: 72px !important;
  height: 72px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem auto !important;
  transition: var(--rds-transition);
}
#home-page .cards a.card:hover .card-icon {
  background: var(--rds-primary) !important;
}
#home-page .cards a.card:hover .card-icon svg {
  color: white !important;
  stroke: white !important;
}

/* Card title */
#home-page .card-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--rds-text-primary) !important;
  margin-bottom: 0.5rem !important;
}

/* Card subtitle */
#home-page .card-subtitle {
  font-size: 0.82rem !important;
  color: var(--rds-text-secondary) !important;
  line-height: 1.5;
}

/* Card views badge */
#home-page .card-views {
  background: rgba(79,70,229,.08) !important;
  color: var(--rds-primary) !important;
  border: none !important;
  border-radius: 20px !important;
  font-size: 0.72rem !important;
  font-weight: 600;
  padding: 0.2rem 0.5rem !important;
}

/* ---------- 9. AD SLOTS ------------------------------------- */
.top-ad,
.middle-ad,
.bottom-ad,
.sidebar-ad {
  background: var(--rds-surface) !important;
  border: 1.5px dashed #D1D5DB !important;
  border-radius: var(--rds-radius) !important;
  padding: 1.25rem !important;
  text-align: center;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem !important;
  color: var(--rds-text-muted);
  font-size: 0.8rem;
}

/* ---------- 10. UPLOADER SECTION --------------------------- */
.uploader {
  background: var(--rds-surface) !important;
  border-radius: var(--rds-radius-lg) !important;
  border: 1.5px solid var(--rds-border) !important;
  padding: 2rem !important;
  box-shadow: var(--rds-shadow) !important;
  margin-bottom: 2rem !important;
}

/* Skeleton placeholder */
.uploader .skeleton {
  background: linear-gradient(90deg, #F3F4F6 25%, #E9EBF0 50%, #F3F4F6 75%) !important;
  background-size: 200% 100% !important;
  animation: skeleton-shimmer 1.5s infinite !important;
  border-radius: var(--rds-radius) !important;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Convert button */
.convert-btn,
button.convert-btn {
  background: var(--rds-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--rds-radius) !important;
  font-family: var(--rds-font) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 0.75rem 2rem !important;
  cursor: pointer;
  transition: var(--rds-transition) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem !important;
  box-shadow: 0 4px 14px rgba(79,70,229,.35) !important;
}
.convert-btn:hover:not(:disabled) {
  background: var(--rds-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79,70,229,.45) !important;
}
.convert-btn:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Result rows */
.uploader .result {
  border-radius: var(--rds-radius) !important;
  overflow: hidden;
  border: 1.5px solid var(--rds-border) !important;
  background: #fff !important;
}
.uploader .result > div {
  border-bottom: 1px solid var(--rds-border-light);
}
.uploader .result > div:last-child {
  border-bottom: none;
}
.uploader .result > div > div {
  padding: 0.85rem 1rem !important;
  align-items: center;
  gap: 0.65rem;
}

/* Download button */
.download-btn,
a.download-btn {
  background: var(--rds-primary) !important;
  color: #fff !important;
  border-radius: var(--rds-radius) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  padding: 0.5rem 1.1rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem;
  transition: var(--rds-transition) !important;
  border: none !important;
}
.download-btn:hover { background: var(--rds-primary-hover) !important; }

/* Download ZIP button */
.download-zip-btn,
a.download-zip-btn {
  background: #10B981 !important;
  color: #fff !important;
  border-radius: var(--rds-radius) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  padding: 0.5rem 1.1rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem;
  transition: var(--rds-transition) !important;
  border: none !important;
}
.download-zip-btn:hover { background: #059669 !important; }
.download-zip-btn:disabled {
  background: #D1FAE5 !important;
  color: #6EE7B7 !important;
  cursor: not-allowed !important;
}

/* Convert more button */
.more-btn {
  background: transparent !important;
  border: 1.5px solid var(--rds-primary) !important;
  color: var(--rds-primary) !important;
  border-radius: var(--rds-radius) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  padding: 0.5rem 1.1rem !important;
  text-decoration: none !important;
  transition: var(--rds-transition) !important;
}
.more-btn:hover {
  background: var(--rds-primary) !important;
  color: #fff !important;
}

/* Delete button */
.delete-btn {
  background: transparent !important;
  border: 1.5px solid #FCA5A5 !important;
  color: #EF4444 !important;
  border-radius: var(--rds-radius) !important;
  padding: 0.5rem 0.75rem !important;
  transition: var(--rds-transition) !important;
  cursor: pointer;
}
.delete-btn:hover {
  background: #FEF2F2 !important;
  border-color: var(--rds-error) !important;
}

/* Try other images */
.try-btn {
  background: #6366F1 !important;
  color: #fff !important;
  border-radius: var(--rds-radius) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 0.65rem 1.5rem !important;
  transition: var(--rds-transition) !important;
  display: inline-block;
  margin-top: 1rem;
}
.try-btn:hover { background: var(--rds-primary-hover) !important; }

/* Action row below results */
.uploader .result + * {
  padding: 0.85rem 1rem !important;
  background: #F9FAFB !important;
  border-top: 1px solid var(--rds-border);
}

/* Error box */
.error-box {
  border-radius: var(--rds-radius) !important;
  background: #FEF2F2 !important;
  border: 1px solid #FCA5A5 !important;
  color: #B91C1C !important;
  padding: 0.75rem 1rem !important;
}

/* Modal */
.modal-box {
  border-radius: var(--rds-radius-lg) !important;
  border: 1.5px solid var(--rds-border);
  font-family: var(--rds-font) !important;
}

/* Spinner overlay */
.spinner {
  backdrop-filter: blur(4px) !important;
  background: rgba(30, 27, 75, 0.55) !important;
}

/* ---------- 11. TOOL USAGE GUIDE --------------------------- */
.tool-guide {
  background: var(--rds-surface);
  border: 1.5px solid var(--rds-border);
  border-radius: var(--rds-radius-lg);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--rds-shadow-sm);
}

.tool-guide__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--rds-text-primary);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.tool-guide__title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.2em;
  background: var(--rds-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

.tool-guide__steps {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tool-guide__step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--rds-bg);
  border-radius: var(--rds-radius);
  border: 1px solid var(--rds-border-light);
  transition: var(--rds-transition);
}
.tool-guide__step:hover {
  border-color: #C7D2FE;
  background: #F5F3FF;
}

.tool-guide__step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--rds-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}

.tool-guide__step-text {
  font-size: 0.9rem;
  color: var(--rds-text-primary);
  line-height: 1.55;
  padding-top: 0.35rem;
}

.tool-guide__step-text strong {
  color: var(--rds-text-primary);
  font-weight: 700;
}

.tool-guide__note {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: var(--rds-radius);
  font-size: 0.85rem;
  color: #1D4ED8;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.tool-guide__note::before {
  content: 'ℹ';
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: -0.05rem;
}

/* ---------- 12. CONVERTER LINKS SECTION -------------------- */
.converters-links {
  background: var(--rds-surface);
  border: 1.5px solid var(--rds-border);
  border-radius: var(--rds-radius-lg);
  padding: 1.75rem 2rem;
  box-shadow: var(--rds-shadow-sm);
  margin-bottom: 2rem !important;
}

.converters-links h4 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--rds-text-primary);
  margin-bottom: 1.25rem !important;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--rds-border-light);
}

.converter-link {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--rds-primary) !important;
  text-decoration: none !important;
  padding: 0.55rem 0.9rem !important;
  border-radius: var(--rds-radius-sm) !important;
  background: var(--rds-primary-light) !important;
  display: block !important;
  transition: var(--rds-transition) !important;
  opacity: 1 !important;
  text-align: center;
  border: 1px solid transparent;
}
.converter-link:hover {
  background: var(--rds-primary) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--rds-shadow-sm);
}

/* ---------- 13. ABOUT / PROSE SECTION ---------------------- */
.about.prose,
section.about {
  background: var(--rds-surface) !important;
  border: 1.5px solid var(--rds-border) !important;
  border-radius: var(--rds-radius-lg) !important;
  padding: 2rem !important;
  box-shadow: var(--rds-shadow-sm) !important;
  font-size: 0.95rem !important;
  line-height: 1.75 !important;
  max-width: none !important;
}
.about.prose h1, .about.prose h2, .about.prose h3 {
  font-family: var(--rds-font) !important;
  font-weight: 700 !important;
  color: var(--rds-text-primary) !important;
}
.about.prose a {
  color: var(--rds-primary) !important;
  text-decoration: underline;
}

/* ---------- 14. BLOG PAGE ---------------------------------- */
#blog-page header {
  margin-bottom: 2rem !important;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--rds-border-light);
}
#blog-page header h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem) !important;
  font-weight: 800 !important;
  margin-bottom: 0.5rem !important;
}
#blog-page header p {
  color: var(--rds-text-secondary);
  font-size: 1.05rem;
}

#blog-page .entry {
  background: var(--rds-surface) !important;
  border: 1.5px solid var(--rds-border) !important;
  border-radius: var(--rds-radius-lg) !important;
  overflow: hidden !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
  box-shadow: var(--rds-shadow-sm) !important;
}
#blog-page .entry:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--rds-shadow-lg) !important;
  border-color: #C7D2FE !important;
}

#blog-page .entry-thumbnail {
  height: 180px !important;
  background-size: cover !important;
  background-position: center !important;
  transition: transform 0.3s ease;
}
#blog-page .entry:hover .entry-thumbnail {
  transform: scale(1.03);
}

#blog-page .entry > div {
  padding: 1.25rem !important;
}

#blog-page .entry-title {
  margin-bottom: 0.5rem !important;
}
#blog-page .entry-title a {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--rds-text-primary) !important;
  text-decoration: none !important;
  transition: var(--rds-transition) !important;
}
#blog-page .entry-title a:hover {
  color: var(--rds-primary) !important;
}

#blog-page .entry-snippet {
  font-size: 0.85rem !important;
  color: var(--rds-text-secondary) !important;
  line-height: 1.55 !important;
  margin-bottom: 0.85rem !important;
}

.btn-read-more,
a.btn-read-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--rds-primary) !important;
  background: var(--rds-primary-light) !important;
  border: 1.5px solid #C7D2FE !important;
  border-radius: var(--rds-radius-sm) !important;
  padding: 0.45rem 0.9rem !important;
  text-decoration: none !important;
  transition: var(--rds-transition) !important;
  min-height: unset !important;
  height: auto !important;
}
.btn-read-more::after { content: ' →'; }
.btn-read-more:hover {
  background: var(--rds-primary) !important;
  color: #fff !important;
  border-color: var(--rds-primary) !important;
}

/* Post meta (date, author) */
.post-meta {
  font-size: 0.78rem;
  color: var(--rds-text-muted);
  margin-bottom: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Pagination */
nav[role=navigation] {
  margin-top: 2rem;
}
nav[role=navigation] span,
nav[role=navigation] a {
  border-radius: var(--rds-radius-sm) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  transition: var(--rds-transition) !important;
}
nav[role=navigation] a {
  color: var(--rds-primary) !important;
}
nav[role=navigation] a:hover {
  background: var(--rds-primary-light) !important;
}

/* ---------- 15. POST PAGE ---------------------------------- */
#post {
  max-width: 760px;
  margin: 0 auto;
}
.post-title {
  font-size: clamp(1.5rem, 3.5vw, 2rem) !important;
  font-weight: 800 !important;
  margin-bottom: 1rem !important;
  color: var(--rds-text-primary) !important;
  line-height: 1.3 !important;
}
.post-thumbnail img {
  border-radius: var(--rds-radius-lg) !important;
  box-shadow: var(--rds-shadow) !important;
}
.post-content.prose {
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: var(--rds-text-primary) !important;
  max-width: none !important;
}
.post-content.prose a {
  color: var(--rds-primary) !important;
}
.post-content.prose h2, .post-content.prose h3 {
  font-family: var(--rds-font) !important;
  font-weight: 700 !important;
}
.post-content.prose img {
  border-radius: var(--rds-radius) !important;
}
.post-content.prose code {
  background: var(--rds-primary-light);
  color: var(--rds-primary);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.88em;
}
.post-content.prose pre {
  background: #1E1B4B !important;
  border-radius: var(--rds-radius) !important;
  padding: 1.25rem !important;
}

/* ---------- 16. CONTACT PAGE ------------------------------- */
#contact-page {
  max-width: 640px;
  margin: 0 auto;
}

.contact-card {
  background: var(--rds-surface);
  border: 1.5px solid var(--rds-border);
  border-radius: var(--rds-radius-lg);
  padding: 2rem;
  box-shadow: var(--rds-shadow);
}

#contact-page .email,
#contact-page .facebook,
#contact-page .twitter,
#contact-page .instagram,
#contact-page .whatsapp,
#contact-page .telegram {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  background: var(--rds-bg) !important;
  border: 1px solid var(--rds-border-light) !important;
  border-radius: var(--rds-radius) !important;
  margin-top: 0.75rem !important;
  font-size: 0.9rem !important;
  color: var(--rds-text-primary) !important;
  transition: var(--rds-transition) !important;
}
#contact-page .email:hover,
#contact-page .facebook:hover,
#contact-page .twitter:hover,
#contact-page .instagram:hover,
#contact-page .whatsapp:hover,
#contact-page .telegram:hover {
  border-color: #C7D2FE !important;
  background: var(--rds-primary-light) !important;
}
#contact-page .email svg,
#contact-page .facebook svg,
#contact-page .twitter svg,
#contact-page .instagram svg,
#contact-page .whatsapp svg,
#contact-page .telegram svg {
  color: var(--rds-primary) !important;
  flex-shrink: 0;
}

/* ---------- 17. SIDEBAR ------------------------------------ */
#sidebar aside,
.recent-posts {
  background: var(--rds-surface) !important;
  border: 1.5px solid var(--rds-border) !important;
  border-radius: var(--rds-radius-lg) !important;
  padding: 1.5rem !important;
  box-shadow: var(--rds-shadow-sm) !important;
  margin-bottom: 1.5rem;
}

.recent-posts h2 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--rds-text-primary) !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--rds-border-light);
}

.recent-posts ul li a {
  font-size: 0.88rem !important;
  color: var(--rds-text-primary) !important;
  text-decoration: none !important;
  padding: 0.45rem 0.6rem !important;
  border-radius: var(--rds-radius-sm) !important;
  display: block;
  transition: var(--rds-transition) !important;
  font-weight: 500;
}
.recent-posts ul li a:hover {
  color: var(--rds-primary) !important;
  background: var(--rds-primary-light) !important;
}

.meta-views {
  font-size: 0.72rem !important;
  color: var(--rds-text-muted) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

/* ---------- 18. FOOTER ------------------------------------- */
footer.footer {
  background: var(--rds-footer-bg) !important;
  color: var(--rds-footer-text) !important;
  padding: 3rem 1.5rem 2rem !important;
  margin-top: auto;
}

footer.footer .bottom-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.35rem 1.25rem !important;
  margin-bottom: 1.75rem;
}

footer.footer .bottom-nav a,
footer.footer a {
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: var(--rds-footer-text) !important;
  text-decoration: none !important;
  opacity: 0.85;
  transition: var(--rds-transition) !important;
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
}
footer.footer .bottom-nav a:hover,
footer.footer a:hover {
  opacity: 1 !important;
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.3);
}

footer.footer .attribution {
  font-size: 0.8rem !important;
  color: rgba(199,210,254,.65) !important;
  text-align: center;
  margin-top: 0.5rem !important;
}

/* Converts counter */
.converts-count {
  font-size: 0.92rem;
  font-weight: 600;
  color: #A5B4FC !important;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
}

/* ---------- 19. SCROLL TO TOP BUTTON ----------------------- */
.to-up-btn {
  background: linear-gradient(135deg, var(--rds-primary), #818CF8) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  box-shadow: 0 4px 14px rgba(79,70,229,.40) !important;
  transition: var(--rds-transition) !important;
  border: none !important;
}
.to-up-btn:hover {
  transform: translateY(-2px) scale(1.08) !important;
  box-shadow: 0 8px 24px rgba(79,70,229,.55) !important;
}

/* ---------- 20. OFFLINE ALERT ------------------------------ */
#alert-offline .alert {
  background: var(--rds-error) !important;
  border: none !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* ---------- 21. NO-SCRIPT ALERT ---------------------------- */
noscript .alert-warning {
  background: #FFFBEB !important;
  border: none !important;
  border-bottom: 2px solid #FCD34D !important;
  color: #92400E !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

/* ---------- 22. SHARE BUTTONS ------------------------------ */
.share-buttons {
  background: var(--rds-surface);
  border: 1.5px solid var(--rds-border);
  border-radius: var(--rds-radius-lg);
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--rds-shadow-sm);
  margin-top: 1.5rem;
}
.share-buttons h4 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--rds-text-primary) !important;
  margin-bottom: 1rem !important;
}

/* ---------- 23. LANG SWITCHER ------------------------------ */
.lang-switcher select,
.lang-switcher button {
  border-radius: var(--rds-radius-sm) !important;
  border: 1.5px solid var(--rds-border) !important;
  font-family: var(--rds-font) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--rds-text-primary) !important;
  background: var(--rds-surface) !important;
  transition: var(--rds-transition) !important;
}
.lang-switcher select:hover,
.lang-switcher button:hover {
  border-color: var(--rds-primary) !important;
  color: var(--rds-primary) !important;
}

/* ---------- 24. GENERAL BUTTON OVERRIDES ------------------- */
.btn {
  font-family: var(--rds-font) !important;
  font-weight: 600 !important;
  border-radius: var(--rds-radius) !important;
  transition: var(--rds-transition) !important;
  letter-spacing: 0.01em;
}
.btn-info {
  background: var(--rds-primary) !important;
  border-color: var(--rds-primary) !important;
  color: #fff !important;
}
.btn-info:hover {
  background: var(--rds-primary-hover) !important;
  border-color: var(--rds-primary-hover) !important;
}

/* ---------- 25. MAIN CONTAINER SPACING --------------------- */
.container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

/* Main flex layout gap */
body > .container,
body > div.container {
  padding-top: 2rem;
}

/* ---------- 26. RESPONSIVE --------------------------------- */
@media (max-width: 768px) {
  #home-page > header,
  #converter > header {
    padding: 2.25rem 1.25rem !important;
    border-radius: var(--rds-radius-lg) !important;
  }

  .uploader {
    padding: 1.25rem !important;
    border-radius: var(--rds-radius) !important;
  }

  .converters-links {
    padding: 1.25rem !important;
  }

  .tool-guide {
    padding: 1.25rem !important;
  }

  .contact-card {
    padding: 1.25rem !important;
  }

  .about.prose,
  section.about {
    padding: 1.25rem !important;
  }

  .top-nav .navbar {
    min-height: 60px;
  }
}

@media (max-width: 480px) {
  #home-page .cards .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.85rem !important;
  }

  #home-page .cards a.card {
    padding: 1.25rem 0.85rem !important;
  }

  .card-icon {
    width: 56px !important;
    height: 56px !important;
  }
}

@media (min-width: 1024px) {
  .converters-links .grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ---------- 27. FOCUS STYLES (Accessibility) --------------- */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2.5px solid var(--rds-primary) !important;
  outline-offset: 2px !important;
}

/* ---------- 28. SELECTION COLOR ---------------------------- */
::selection {
  background: var(--rds-primary-light);
  color: var(--rds-primary);
}