/* ═══════════════════════════════════════════════
   LIGHT THEME OVERRIDE — all tool pages
   Loaded AFTER style.css. Each page sets:
   --page-accent and --page-dark via inline <style>.
═══════════════════════════════════════════════ */

:root {
  --bg:           #ffffff;
  --glass:        rgba(255,255,255,1);
  --glass-border: rgba(0,0,0,.09);
  --glass-hover:  rgba(124,58,237,.04);
  --accent:       var(--page-accent, #7c3aed);
  --text:         #1a1a2e;
  --text-muted:   #666;
  --success:      #16a34a;
  --warning:      #d97706;
  --page-accent:  #7c3aed;
  --page-dark:    #6d28d9;
}

/* ── Body & Background ── */
body {
  background: #f8f7ff !important;
  color: #1a1a2e !important;
}

.bg-orbs { display: none !important; }
.files-page-wrap { background: transparent; }

/* ══════════════════════════════════
   HEADER — Logo LEFT, Nav RIGHT
   Logo image clipped to icon only
══════════════════════════════════ */
.files-page-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e8e3f5 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 32px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  gap: 16px !important;
}

/* Logo group — left side */
.files-page-header .logo {
  flex-shrink: 0;
}
.files-page-header .logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* Clip logo image to show ICON ONLY (diamond, no white text) */
.lp-icon-only {
  height: 44px !important;
  width: 44px !important;
  object-fit: cover !important;
  object-position: left center !important;
  display: block !important;
}

/* Brand name next to icon */
.lp-logo-brand {
  font-size: 1.28rem;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: -.03em;
  white-space: nowrap;
}

/* ── Back button — pill style ── */
.files-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  color: #555 !important;
  background: #f4f2ff !important;
  border: 1.5px solid #ddd6fe !important;
  border-radius: 100px !important;
  padding: 7px 16px 7px 12px !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  transition: all .2s !important;
  letter-spacing: .01em !important;
}
.files-back-link:hover {
  background: var(--page-accent) !important;
  border-color: var(--page-accent) !important;
  color: #fff !important;
}

/* ── Completely hide the right nav ── */
.lp-header-nav,
.lp-back-inline { display: none !important; }

/* ══════════════════════════════════
   HERO TITLE — Violet, visible
══════════════════════════════════ */
.files-page-hero {
  color: var(--page-accent) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--page-accent) !important;
  text-shadow: none !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  font-weight: 900 !important;
  text-align: center !important;
  padding: 0 24px !important;
}
.files-page-sub {
  color: #444 !important;
  font-size: 1rem !important;
  text-align: center !important;
}

/* ══════════════════════════════════
   GLASS CARDS → WHITE CARDS
══════════════════════════════════ */
.glass-card {
  background: #ffffff !important;
  border: 1.5px solid #e8e3f5 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.07) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.glass-card:hover {
  background: #faf9ff !important;
  border-color: #c4b5fd !important;
}

/* ══════════════════════════════════
   DROP ZONE
══════════════════════════════════ */
@keyframes fdz-pulse {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: .88; transform: scale(1.012); }
  100% { opacity: 1; transform: scale(1); }
}
.files-dropzone {
  background: var(--page-accent) !important;
  border: 2.5px dashed rgba(255,255,255,.75) !important;
  border-radius: 18px !important;
  opacity: 1 !important;
  box-shadow: 0 6px 32px rgba(0,0,0,.18) !important;
  animation: fdz-pulse 2.4s ease-in-out infinite !important;
}
.files-dropzone .fdz-icon { filter: brightness(0) invert(1) !important; }
.files-dropzone .fdz-text { color: #fff !important; font-weight: 600 !important; text-shadow: 0 1px 4px rgba(0,0,0,.2) !important; }
.files-dropzone.fdz-hover { background: var(--page-dark) !important; animation: none !important; }

/* ══════════════════════════════════
   SECTIONS — each type gets its own
   background color (like the green box
   in smallpdf reference)
══════════════════════════════════ */
.fsec {
  background: #fff !important;
  border-radius: 20px !important;
  border: 1.5px solid #e8e3f5 !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.05) !important;
}

/* ══════════════════════════════════════
   SECTIONS — each a solid deep color,
   white text, dashed white border
══════════════════════════════════════ */
.fsec {
  border-style: none !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.14) !important;
}

/* ── PDF Editor & Tools — deep crimson ── */
.fsec:has(.fsec-pdf) {
  background: #c0392b !important;
}
/* ── Excel / CSV → PDF — deep indigo ── */
.fsec-excel,
.fsec:has(.fsec-excel) {
  background: #1a237e !important;
}
/* ── Image Editor — medium blue ── */
.fsec:has(.fsec-img) {
  background: #3a8ac9 !important;
}
/* ── Audio — medium orange ── */
.fsec:has(.fsec-aud) {
  background: #e8782a !important;
}
/* ── Video — deep violet ── */
.fsec:has(.fsec-vid) {
  background: #7d3c98 !important;
}
/* ── Invoice / Document — medium teal ── */
.fsec:has(.fsec-inv),
.fsec:has(.fsec-doc) {
  background: #1797b5 !important;
}

/* White text for all section headers */
.fsec-title {
  color: #fff !important;
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.2) !important;
}
.fsec-desc         { color: rgba(255,255,255,.88) !important; }
.fsec-upload-hint  { color: rgba(255,255,255,.75) !important; }
.fsec-hdr          { background: transparent; }

/* ── Format dropdowns — clearly visible ── */
.converter-dropdown-wrap {
  background: rgba(255,255,255,.18) !important;
  border: 1.5px solid rgba(255,255,255,.4) !important;
  border-radius: 14px !important;
}
.fmt-select {
  background: #fff !important;
  border: 2px solid #b0c4de !important;
  border-radius: 10px !important;
  color: #1a1a2e !important;
  font-weight: 700 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .9rem center !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.1) !important;
  cursor: pointer !important;
}
.fmt-select:focus {
  border-color: #667eea !important;
  box-shadow: 0 0 0 3px rgba(102,126,234,.2) !important;
  outline: none !important;
}
.fmt-select option { background: #fff !important; color: #1a1a2e !important; }

/* Section badges — white bg, colored text */
.fsec-badge {
  font-size: .78rem !important;
  font-weight: 700 !important;
  padding: .38rem .9rem !important;
  border-radius: 100px !important;
  border: none !important;
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  backdrop-filter: blur(4px) !important;
}

/* Tool cards inside sections stay white */
.fsec .tool-card,
.fsec .glass-card {
  background: #fff !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.12) !important;
}
.fsec .tool-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.22) !important;
  transform: translateY(-2px);
}

/* ══════════════════════════════════
   TOOL CARDS
══════════════════════════════════ */
.tool-grid { gap: 14px; }
.tool-card {
  background: #ffffff !important;
  border: 1.5px solid #e8e3f5 !important;
  color: #1a1a2e !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.05) !important;
  transition: all .22s !important;
}
.tool-card:hover {
  background: #faf9ff !important;
  border-color: var(--page-accent) !important;
  box-shadow: 0 8px 28px rgba(124,58,237,.12) !important;
  transform: translateY(-2px);
}
.tool-card-label { color: #1a1a2e !important; font-weight: 700 !important; }
.tool-card-desc  { color: #666 !important; }

.tool-card-featured {
  background: linear-gradient(145deg, rgba(124,58,237,.06), #fff) !important;
  border: 2px solid var(--page-accent) !important;
  color: #1a1a2e !important;
}
.tool-card-featured:hover {
  background: linear-gradient(145deg, rgba(124,58,237,.1), #fff) !important;
  border-color: var(--page-dark) !important;
  box-shadow: 0 12px 36px rgba(124,58,237,.18) !important;
}
.tool-card-featured .tool-card-label { color: var(--page-accent) !important; font-size: 1rem; }

/* ══════════════════════════════════
   UPLOAD OVERLAY
══════════════════════════════════ */
.fupload-overlay { background: rgba(0,0,0,.55) !important; }
.fupload-box {
  background: #ffffff !important;
  border: 1.5px solid #e8e3f5 !important;
  color: #1a1a2e !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
}
.fupload-label { color: #1a1a2e !important; }
.fupload-sub   { color: #666 !important; }

/* ══════════════════════════════════
   MISC
══════════════════════════════════ */
h1, h2, h3 { color: #1a1a2e; }
p { color: #444; }

/* Footer — keep dark */
.site-footer { background: #1a1a2e !important; }
.footer-col-title { color: #fff !important; }
.footer-links a { color: #a0aec0 !important; }
.footer-links a:hover { color: #c4b5fd !important; }
.footer-bottom { color: #555 !important; border-top-color: #2d2d4e !important; }

/* Buttons */
.btn-convert-another { background: var(--page-accent) !important; color: #fff !important; border: none !important; }
.btn-convert-another:hover { opacity: .88 !important; }
.convert-btn, .dl-btn { background: var(--page-accent) !important; color: #fff !important; }
.progress-bar-fill { background: linear-gradient(90deg, var(--page-accent), var(--page-dark)) !important; }

/* Input / Select */
input[type="text"], input[type="number"], select, textarea {
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #1a1a2e !important;
}
input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
  border-color: var(--page-accent) !important;
  outline: none;
}

/* Upload spinner */
.upload-spinner {
  border-color: rgba(124,58,237,.2) !important;
  border-top-color: var(--page-accent) !important;
}

/* ══════════════════════════════════
   INVOICE PAGE
══════════════════════════════════ */

/* ── Invoice type cards — vibrant gradients ── */
.cat-card {
  border: none !important;
  box-shadow: 0 6px 28px rgba(0,0,0,.16) !important;
  transition: transform .22s, box-shadow .22s !important;
  padding: 1.5rem 1rem !important;
}
.cat-card[data-cat="grocery"] {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
}
.cat-card[data-cat="electronics"] {
  background: linear-gradient(135deg, #2980b9 0%, #6dd5fa 100%) !important;
}
.cat-card[data-cat="b2b"] {
  background: linear-gradient(135deg, #834d9b 0%, #d04ed6 100%) !important;
}
.cat-card:hover  { transform: translateY(-5px) !important; box-shadow: 0 18px 40px rgba(0,0,0,.24) !important; }
.cat-card.active { box-shadow: 0 0 0 3.5px #fff, 0 12px 32px rgba(0,0,0,.28) !important; transform: translateY(-3px) !important; }
.cat-card-title  { color: #fff !important; font-weight: 800 !important; text-shadow: 0 1px 4px rgba(0,0,0,.2) !important; }
.cat-card-sub    { color: rgba(255,255,255,.85) !important; }

/* ── Form sections — clean card with gradient pill header ── */
.inner-section {
  background: #fff !important;
  border-radius: 18px !important;
  overflow: visible !important;
  margin-bottom: 22px !important;
  border: none !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.09) !important;
  padding: 0 !important;
}
.inner-section > * { padding-left: 22px; padding-right: 22px; }
.inner-section > *:last-child { padding-bottom: 22px; }

.inv-sec-head {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  padding: 13px 20px !important;
  margin-bottom: 20px !important;
  font-size: .75rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  color: #fff !important;
  border-radius: 18px 18px 0 0 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
}
.inv-sec-head::after { background: rgba(255,255,255,.25) !important; }

/* Each section header its own gradient */
.inner-section:nth-child(1) .inv-sec-head { background: linear-gradient(90deg,#667eea,#764ba2) !important; }
.inner-section:nth-child(2) .inv-sec-head { background: linear-gradient(90deg,#f7971e,#ffd200) !important; color: #3d2800 !important; text-shadow: none !important; }
.inner-section:nth-child(2) .inv-sec-head::after { background: rgba(0,0,0,.12) !important; }
.inner-section:nth-child(3) .inv-sec-head { background: linear-gradient(90deg,#11998e,#38ef7d) !important; color: #003d2e !important; text-shadow: none !important; }
.inner-section:nth-child(3) .inv-sec-head::after { background: rgba(0,0,0,.12) !important; }
.inner-section:nth-child(4) .inv-sec-head { background: linear-gradient(90deg,#2980b9,#6dd5fa) !important; color: #002d4a !important; text-shadow: none !important; }
.inner-section:nth-child(4) .inv-sec-head::after { background: rgba(0,0,0,.12) !important; }
.inner-section:nth-child(5) .inv-sec-head { background: linear-gradient(90deg,#e53935,#e35d5b) !important; }
.inner-section:nth-child(6) .inv-sec-head { background: linear-gradient(90deg,#8e44ad,#c0392b) !important; }
.inner-section:nth-child(n+7) .inv-sec-head { background: linear-gradient(90deg,#1a237e,#283593) !important; }

/* Form inputs */
.inner-section .inv-input {
  background: #f8f7ff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #1a1a2e !important;
  border-radius: 10px !important;
}
.inner-section .inv-input:focus {
  border-color: #667eea !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(102,126,234,.12) !important;
}
.inner-section .inv-input::placeholder { color: #bbb !important; }
.inv-label { color: #555 !important; font-size: .72rem !important; }

/* ── Invoice page title ── */
.page-title-word {
  background: linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.inner-page-badge {
  background: rgba(102,126,234,.1) !important;
  color: #667eea !important;
  border: 1px solid rgba(102,126,234,.3) !important;
}
.inner-page-sub { color: #444 !important; }

/* ── Stamp shape buttons ── */
.stamp-shape-btn {
  color: #1a1a2e !important;
  background: rgba(0,0,0,.04) !important;
  border-color: #d0cfe8 !important;
}
.stamp-shape-btn.active {
  background: rgba(102,126,234,.18) !important;
  border-color: #667eea !important;
  color: #1a1a2e !important;
}
.stamp-shape-btn:hover:not(.active) {
  background: rgba(0,0,0,.07) !important;
  color: #111 !important;
}

/* ── Stamp mode buttons ── */
.stamp-mode-btn {
  color: #1a1a2e !important;
  background: rgba(0,0,0,.04) !important;
  border-color: #d0cfe8 !important;
}
.stamp-mode-btn.active {
  border-color: #667eea !important;
  background: rgba(102,126,234,.12) !important;
  color: #111 !important;
  font-weight: 700 !important;
}
.stamp-mode-btn:hover:not(.active) {
  background: rgba(0,0,0,.07) !important;
  color: #111 !important;
}
/* Rubber Stamp section — more bottom space, no white bg */
.inner-section.stamp-section {
  padding-bottom: 2.4rem !important;
  background: #eef0fb !important;
}