/* ============================================================================
   freeimagego — design system
   Premium glassmorphism UI with light/dark theming.
============================================================================ */

:root {
  --brand: #14b8a6;
  --brand-2: #06b6d4;
  --brand-3: #0ea5a4;
  --brand-grad: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%);
  --accent: #06b6d4;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;

  --bg: #f8fafc;
  --bg-soft: #ffffff;
  --surface: rgba(255, 255, 255, 0.78);
  --surface-solid: #ffffff;
  --border: rgba(15, 23, 42, 0.08);
  --text: #0f172a;
  --text-soft: #64748b;
  --shadow: 0 10px 40px -12px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 24px 60px -20px rgba(20, 184, 166, 0.30);
  --radius: 18px;
  --radius-sm: 12px;
}

[data-theme="dark"] {
  --bg: #0b0e1a;
  --bg-soft: #11152a;
  --surface: rgba(28, 33, 56, 0.6);
  --surface-solid: #161b33;
  --border: rgba(255, 255, 255, 0.08);
  --text: #e8ecf8;
  --text-soft: #94a3c0;
  --shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -20px rgba(20,184,166, 0.45);
}

* { box-sizing: border-box; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  transition: background .4s ease, color .3s ease;
  overflow-x: hidden;
}

/* Ambient gradient blobs — subtle teal wash */
body::before, body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .16;
  z-index: -1;
  pointer-events: none;
}
body::before { width: 480px; height: 480px; background: var(--brand); top: -160px; right: -120px; }
body::after  { width: 420px; height: 420px; background: var(--brand-2); bottom: -180px; left: -120px; opacity: .12; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-2); }

.container-xl { max-width: 1240px; }

/* ---------------------------------------------------------------- Glass card */
.glass {
  background: var(--surface);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-premium {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.card-premium:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ----------------------------------------------------------------- Navbar */
.navbar-glass {
  background: var(--surface);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1030;
}
.brand-logo {
  font-weight: 800; font-size: 1.35rem; letter-spacing: -.5px;
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-dot {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--brand-grad); margin-right: 8px; box-shadow: 0 0 14px var(--brand);
}
.nav-link { color: var(--text-soft) !important; font-weight: 600; }
.nav-link:hover, .nav-link.active { color: var(--text) !important; }

/* Tools dropdown */
.dropdown-menu {
  background: var(--surface-solid); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow); padding: .4rem; margin-top: .5rem;
}
.dropdown-item {
  color: var(--text); border-radius: 9px; font-weight: 600; padding: .55rem .8rem;
}
.dropdown-item:hover, .dropdown-item:focus { background: rgba(20,184,166,.1); color: var(--brand); }

.theme-toggle {
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); display: grid; place-items: center;
  cursor: pointer; transition: .25s;
}
.theme-toggle:hover { transform: rotate(20deg) scale(1.05); border-color: var(--brand); }

/* ----------------------------------------------------------------- Buttons */
.btn-grad {
  background: var(--brand-grad); color: #fff; border: none; font-weight: 700;
  border-radius: 14px; padding: .72rem 1.6rem; position: relative; overflow: hidden;
  box-shadow: 0 10px 30px -8px rgba(20,184,166,.6); transition: transform .2s, box-shadow .2s;
}
.btn-grad:hover { color:#fff; transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(20,184,166,.75); }
.btn-grad:active { transform: translateY(0); }
.btn-ghost {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 14px; padding: .72rem 1.5rem; font-weight: 700; transition: .2s;
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-soft {
  background: rgba(20,184,166,.12); color: var(--brand); border: none;
  border-radius: 12px; padding: .55rem 1.1rem; font-weight: 700;
}

/* ----------------------------------------------------- Tool action bars
   The "New image / format / quality / Download" rows under every tool
   preview. They must never overflow a narrow viewport — on phones they
   stack and the Download button drops to its own full-width line. */
.tool-actions { flex-wrap: wrap; gap: .6rem .75rem; }
.tool-actions-end { flex-wrap: wrap; }
@media (max-width: 575.98px) {
  .tool-actions { flex-direction: column; align-items: stretch; }
  .tool-actions > .btn-ghost,
  .tool-actions > .text-soft { align-self: flex-start; }
  .tool-actions-end { width: 100%; justify-content: flex-end; row-gap: .6rem; }
  .tool-actions-end > .form-select { flex: 1 1 auto; width: auto !important; }
  /* Download drops to its own full-width line (works whether it is a direct
     child of the column bar or nested in the right-hand .tool-actions-end row). */
  .tool-actions .btn-grad { flex: 1 1 100%; width: 100%; display: inline-flex;
    align-items: center; justify-content: center; text-align: center; }
}

/* ----------------------------------------------------------------- Hero */
.hero { padding: 5.5rem 0 4rem; position: relative; }
.hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 800; line-height: 1.05;
  letter-spacing: -1.5px; margin-bottom: 1.2rem;
}
.hero .grad-text {
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { color: var(--text-soft); font-size: 1.22rem; max-width: 620px; }
.pill {
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .9rem; border-radius:999px;
  background: var(--surface); border:1px solid var(--border); font-weight:600; font-size:.85rem; color:var(--text-soft);
}
.pill .dot { width:8px;height:8px;border-radius:50%;background:var(--success); box-shadow:0 0 10px var(--success); }

/* --------------------------------------------------------------- Upload zone */
.dropzone {
  border: 2px dashed var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 3rem 1.5rem; text-align: center;
  transition: .25s; cursor: pointer; position: relative;
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--brand); background: rgba(20,184,166,.06); transform: scale(1.005);
}
.dropzone .up-icon {
  width: 76px; height: 76px; margin: 0 auto 1rem; border-radius: 22px;
  display: grid; place-items: center; font-size: 2rem; color: #fff; background: var(--brand-grad);
  box-shadow: 0 14px 30px -10px rgba(20,184,166,.7);
}

/* Transparent checkerboard (for cutout previews) */
.checker {
  background-image:
    linear-gradient(45deg, #c9cdd6 25%, transparent 25%),
    linear-gradient(-45deg, #c9cdd6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #c9cdd6 75%),
    linear-gradient(-45deg, transparent 75%, #c9cdd6 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
  background-color: #eef0f4;
}

/* --------------------------------------------------------------- Feature icons */
.feature-ico {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  font-size: 1.5rem; color: var(--brand); margin-bottom: 1rem;
  background: rgba(20,184,166,.10);
}
/* Uniform soft-teal tiles (match the brand theme). */
.ico-1, .ico-2, .ico-3, .ico-4, .ico-5, .ico-6 { background: rgba(20,184,166,.10); color: var(--brand); }
/* Solid-teal variant for avatars / accents. */
.ico-solid { background: var(--brand-grad); color: #fff; }

/* --------------------------------------------------------------- Pricing */
.price-card { padding: 2.2rem; height: 100%; }
.price-card.popular { border: 2px solid var(--brand); position: relative; }
.price-badge {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--brand-grad); color:#fff; padding:.25rem 1rem; border-radius:999px; font-size:.78rem; font-weight:700;
}
.price-amount { font-size: 2.8rem; font-weight: 800; letter-spacing:-1px; }

/* --------------------------------------------------------------- Forms */
.form-control, .form-select {
  background: var(--surface-solid); border: 1px solid var(--border); color: var(--text);
  border-radius: 12px; padding: .65rem .9rem;
}
.form-control:focus, .form-select:focus {
  background: var(--surface-solid); color: var(--text);
  border-color: var(--brand); box-shadow: 0 0 0 4px rgba(20,184,166,.15);
}
.form-label { font-weight: 600; font-size: .85rem; color: var(--text-soft); }

/* --------------------------------------------------------------- Dashboard */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 264px; flex-shrink: 0; background: var(--surface-solid);
  border-right: 1px solid var(--border); padding: 1.5rem 1rem; position: sticky; top: 0; height: 100vh; overflow-y:auto;
}
.sidebar .nav-item-link {
  display:flex; align-items:center; gap:.8rem; padding:.7rem .9rem; border-radius:12px;
  color: var(--text-soft); font-weight:600; margin-bottom:.25rem; transition:.2s;
}
.sidebar .nav-item-link:hover { background: rgba(20,184,166,.1); color: var(--text); }
.sidebar .nav-item-link.active { background: var(--brand-grad); color:#fff; box-shadow:0 8px 20px -8px rgba(20,184,166,.6); }
.app-main { flex: 1; padding: 2rem; min-width: 0; }

.stat-card { padding: 1.4rem; border-radius: var(--radius); }
.stat-value { font-size: 1.9rem; font-weight: 800; letter-spacing:-.5px; }
.stat-label { color: var(--text-soft); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing:.5px; }

/* --------------------------------------------------------------- Misc */
.text-soft { color: var(--text-soft) !important; }
.divider { height:1px; background: var(--border); margin: 1.5rem 0; }
.badge-soft { background: rgba(20,184,166,.12); color: var(--brand); font-weight:700; padding:.35rem .7rem; border-radius:8px; }
.status-dot { width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px; }
.s-queued{background:var(--warning);} .s-processing{background:var(--accent);animation:pulse 1.2s infinite;}
.s-completed{background:var(--success);} .s-failed{background:var(--danger);} .s-partial{background:var(--warning);}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

.fade-up { opacity:0; transform: translateY(24px); animation: fadeUp .7s forwards; }
@keyframes fadeUp { to { opacity:1; transform:none; } }

.progress { background: var(--border); border-radius: 999px; height: 8px; overflow: hidden; }
.progress-bar { background: var(--brand-grad); transition: width .25s ease; }

/* AI work-in-progress loader — spinning brand ring with a pulsing icon */
.it-loader {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 1.5rem;
}
.it-loader::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 25%, var(--brand-2) 65%, var(--brand) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  animation: it-spin .9s linear infinite;
}
.it-loader i { animation: it-pulse 1.4s ease-in-out infinite; }
@keyframes it-spin { to { transform: rotate(360deg); } }
@keyframes it-pulse { 0%,100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }

/* Compare slider */
.compare-wrap { position: relative; overflow: hidden; border-radius: var(--radius-sm); user-select: none; }
.compare-wrap img { display:block; width:100%; pointer-events:none; }
.compare-after { position:absolute; inset:0; overflow:hidden; width:50%; }
.compare-handle { position:absolute; top:0; bottom:0; width:3px; background:#fff; left:50%; cursor:ew-resize; box-shadow:0 0 12px rgba(0,0,0,.4); }
.compare-handle::after {
  content:"⟺"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; background:#fff; color:#333; border-radius:50%; display:grid; place-items:center; font-size:.9rem;
}

/* footer */
footer.site-footer { border-top: 1px solid var(--border); margin-top: 4rem; padding: 3rem 0 2rem; color: var(--text-soft); }

/* Responsive */
@media (max-width: 992px) {
  .sidebar { position: fixed; left: -280px; z-index: 1050; transition: left .3s; }
  .sidebar.open { left: 0; }
  .app-main { padding: 1.2rem; }
}

/* ============================================================================
   Mobile app experience — bottom nav + app-style service grid
============================================================================ */
.app-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.app-tile {
  background: var(--surface-solid); border: 1px solid var(--border); border-radius: 18px;
  padding: 16px; display: block; color: var(--text); box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.app-tile:active { transform: scale(.97); }
.app-tile:hover { color: var(--text); box-shadow: var(--shadow-lg); }
.app-tile .app-ico {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  font-size: 1.55rem; color: #fff; margin-bottom: 12px;
  /* Solid brand-gradient tile (overrides the faint .ico-* tint, which on a
     white icon left these almost invisible) + soft glow for app-icon depth. */
  background: var(--brand-grad);
  box-shadow: 0 8px 18px -8px rgba(20,184,166,.6);
}
.app-tile h6 { font-weight: 800; margin: 0 0 2px; font-size: 1.02rem; line-height: 1.2; }
.app-tile .app-sub { color: var(--text-soft); font-size: .78rem; }

.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  background: var(--surface-solid); border-top: 1px solid var(--border);
  display: flex; justify-content: space-around; align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 24px -14px rgba(0,0,0,.3);
}
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--text-soft); font-size: .68rem; font-weight: 700; padding: 8px 4px;
  transition: color .15s;
}
.bottom-nav a i { font-size: 1.3rem; }
.bottom-nav a.active { color: var(--brand); }

@media (max-width: 991.98px) {
  body { padding-bottom: 70px; }              /* clear the fixed bottom nav */
  .hero { padding: 2rem 0 1.25rem; }
  .hero h1 { font-size: 2rem; line-height: 1.15; }
  .hero p.lead { font-size: 1.05rem; }
  .container, .container-xl { padding-left: 16px; padding-right: 16px; }
  section.py-5 { padding-top: 2.2rem !important; padding-bottom: 2.2rem !important; }
  footer.site-footer { margin-top: 2rem; padding: 2rem 0 1.5rem; }
  .glass.p-5 { padding: 1.6rem !important; }
}
@media (max-width: 380px) {
  .app-grid { gap: 10px; }
  .app-tile { padding: 13px; }
  .app-tile h6 { font-size: .95rem; }
}

/* ============================================================================
   Blog
============================================================================ */
.text-brand { color: var(--brand); }

.blog-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-size: .85rem; color: var(--text-soft); }
.blog-crumb a { color: var(--text-soft); }
.blog-crumb a:hover { color: var(--brand); }
.blog-crumb i { font-size: .65rem; opacity: .6; }
.blog-crumb span { color: var(--text); font-weight: 600; }

/* Intro callout box (left brand bar) */
.blog-intro {
  background: rgba(20,184,166,.07); border-left: 4px solid var(--brand);
  border-radius: 12px; padding: 1.1rem 1.3rem; font-size: 1.08rem; line-height: 1.7;
  color: var(--text);
}

/* Article typography */
.blog-body { font-size: 1.05rem; line-height: 1.8; color: var(--text); }
.blog-body > h2 {
  font-size: 1.6rem; font-weight: 800; margin: 2rem 0 .75rem; scroll-margin-top: 90px;
  letter-spacing: -.4px;
}
.blog-body > h3 {
  font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 .6rem; scroll-margin-top: 90px;
}
.blog-body p { margin: 0 0 1.1rem; }
.blog-body ul, .blog-body ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.blog-body li { margin-bottom: .45rem; }
.blog-body a { color: var(--brand); text-decoration: underline; }
.blog-body img { max-width: 100%; height: auto; border-radius: 14px; margin: 1rem 0; }
.blog-body blockquote {
  margin: 1.2rem 0; padding: .6rem 1.2rem; border-left: 4px solid var(--brand);
  background: rgba(20,184,166,.06); border-radius: 8px; color: var(--text-soft); font-style: italic;
}
.blog-body blockquote cite {
  display: block; margin-top: .5rem; font-style: normal; font-weight: 700; font-size: .85rem; opacity: .85;
}
.blog-body .blog-faq-item { margin-bottom: 1.2rem; }
.blog-body .blog-faq-q { font-weight: 700; margin-bottom: .25rem; }
.blog-body .blog-faq-a { color: var(--text-soft); }
.blog-body pre {
  background: var(--surface-solid); border: 1px solid var(--border); border-radius: 10px;
  padding: 1rem; overflow-x: auto; font-size: .9rem;
}

/* Sticky sidebar */
.blog-sticky { position: sticky; top: 90px; }
.blog-side-head {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: var(--text-soft);
  text-transform: uppercase; margin-bottom: .75rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}

/* Table of contents */
.blog-toc { display: flex; flex-direction: column; gap: .15rem; }
.blog-toc .toc-link {
  display: block; padding: .35rem .55rem; border-radius: 8px; font-size: .85rem;
  color: var(--text-soft); border-left: 2px solid transparent; line-height: 1.35;
}
.blog-toc .toc-h3 { padding-left: 1.2rem; font-size: .82rem; }
.blog-toc .toc-link:hover { color: var(--brand); background: rgba(20,184,166,.06); }
.blog-toc .toc-link.active {
  color: var(--brand); font-weight: 700; border-left-color: var(--brand);
  background: rgba(20,184,166,.08);
}

/* Share buttons */
.blog-share {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem .75rem;
  border-radius: 10px; color: var(--text); font-size: .9rem; font-weight: 600;
  border: 1px solid var(--border); margin-bottom: .5rem; transition: .15s; cursor: pointer;
}
.blog-share:last-child { margin-bottom: 0; }
.blog-share:hover { border-color: var(--brand); color: var(--brand); background: rgba(20,184,166,.05); }

/* Related posts */
.blog-related { display: flex; gap: .7rem; align-items: center; padding: .5rem 0; color: var(--text); }
.blog-related + .blog-related { border-top: 1px solid var(--border); }
.blog-related:hover .blog-related-title { color: var(--brand); }
.blog-related-thumb { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex: 0 0 auto; }
.blog-related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-related-title { font-weight: 700; font-size: .85rem; line-height: 1.3; }

/* CTA card */
.blog-cta {
  background: var(--brand-grad); color: #fff; border-radius: 16px; padding: 1.4rem;
  box-shadow: 0 14px 34px -14px rgba(20,184,166,.7);
}
.blog-cta h6 { color: #fff; }

/* Quill editor fits the panel surface */
#qToolbar { border-radius: 12px 12px 0 0; border-color: var(--border) !important; background: var(--surface-solid); }
#qEditor { border-radius: 0 0 12px 12px; border-color: var(--border) !important; font-size: 1rem; }
.ql-editor { min-height: 320px; }

@media (max-width: 991.98px) {
  .blog-sticky { position: static; }
}