/*
 * CSS for AI Logo Maker
 * Author: Your Name/Company
 * Version: 1.1
 */

/* 1. ROOT & GENERAL STYLES
-------------------------------------------------- */
:root {
  --bg: #F4F6FA;
  --card: #FFF;
  --primary-text: #1A1F36;
  --secondary-text: #555;
  --accent: #0D6EFD;
  --accent-hover: #0B5ED7;
  --google-blue: #4285F4;
  --border-color: #DDE1E7;
  --radius: 14px;
  --shadow: 0 6px 14px rgba(0, 0, 0, .06);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  background-color: var(--bg);
  color: var(--primary-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

/* 2. LAYOUT & STRUCTURE
-------------------------------------------------- */
main {
  width: 90%;
  max-width: 720px;
  padding: 2.5rem 0;
  flex-grow: 1; /* Pushes footer down */
}

#page-header {
  margin-bottom: 2rem;
}

/* ── REPLACE your existing .page-footer rule with this ───────────────── */
.page-footer {
  display: flex;                         /* horizontal layout */
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem;
  background: var(--card);               /* white background */
  border-top: 1px solid var(--border-color);
}

/* ── ADD this to style the <ul class="footer-nav"> ─────────────────────── */
.footer-nav {
  display: flex;     /* side-by-side links */
  gap: 1.5rem;       /* space between them */
  list-style: none;  /* remove bullets */
  margin: 0 0 0.75rem; /* tighten spacing below nav */
  padding: 0;
}

/* ── ADD these for link colors & hover ─────────────────────────────────── */
.footer-nav a {
  color: var(--secondary-text);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.footer-nav a:hover {
  color: var(--primary-text);
}

/* ── TWEAK copyright text for consistency ───────────────────────────────── */
.page-footer p {
  color: var(--secondary-text);
  font-size: 0.875rem;
  margin: 0;
}


/* 3. TYPOGRAPHY & UTILITIES
-------------------------------------------------- */
h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  text-align: center;
  margin-bottom: 0.5rem;
}

.subtitle {
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
  color: var(--secondary-text);
}

.text-center {
  text-align: center;
}

/* 4. COMPONENTS
-------------------------------------------------- */
.user-welcome {
  text-align: center;
  color: var(--secondary-text);
  margin-bottom: 1.5rem;
}

.user-welcome a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.user-welcome a:hover {
  text-decoration: underline;
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  margin-bottom: 2rem;
  position: relative; /* Needed for loading spinner positioning */
}

.card-header {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.btn-google {
  display: inline-block;
  padding: 1rem 2rem;
  margin-top: 1rem;
  background: var(--google-blue);
  color: #FFF;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s;
}
.btn-google:hover {
  background-color: #1A1F36;
}

/* 5. FORM ELEMENTS
-------------------------------------------------- */
.form-group {
  margin-bottom: 1.25rem;
}

label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

textarea,
input[type=text],
select {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s;
}

textarea {
  min-height: 110px;
  resize: vertical;
}

input[type=color] {
  width: 100%;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.checkbox-label {
  display: flex;
  align-items: center;
  font-weight: normal;
  cursor: pointer;
  margin-top: 0.5rem;
}

.checkbox-label input[type="checkbox"] {
  margin-right: 0.75rem;
  width: 1.15em;
  height: 1.15em;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.form-actions button {
  flex: 1 1 200px;
}

button {
  width: 100%;
  padding: 1rem;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #FFF;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

button:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-2px);
}

button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* 6. PREVIEW & DOWNLOADS
-------------------------------------------------- */
.status-message {
  text-align: center;
  color: var(--secondary-text);
  min-height: 1.6em; /* Prevents layout shift */
}

#preview-container {
  overflow: auto;
  max-height: 65vh;
  min-height: 200px; /* Give space for spinner */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#preview-container svg {
  max-width: 100%;
  max-height: 60vh;
  height: auto;
  width: auto;
}

/* NEW: Loading Spinner Animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.is-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  margin-left: -25px;
  border-radius: 50%;
  border: 5px solid var(--border-color);
  border-top-color: var(--accent);
  animation: spin 1s infinite linear;
  z-index: 10;
}

/* NEW: Enhance Button Dots Animation */
.dots {
    display: inline-flex;
    align-items: flex-end;
    margin-left: 5px;
}

.dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: currentColor;
    border-radius: 50%;
    margin: 0 1px;
    animation: dot-bounce 1.4s infinite ease-in-out both;
}

.dot:nth-of-type(2) {
    animation-delay: -0.16s;
}

.dot:nth-of-type(3) {
    animation-delay: -0.32s;
}

@keyframes dot-bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1.0);
  }
}

#downloads {
  display: none; /* Controlled by JS */
  margin-top: 1.5rem;
  text-align: center;
}

/* 7. ACCESSIBILITY FOCUS STATES
-------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

select:focus-visible,
textarea:focus-visible,
input[type=text]:focus-visible {
  border-color: var(--accent);
  outline: none;
}

/* 8. NAVIGATION  – PROFESSIONAL STICKY TOP BAR
   -------------------------------------------------- */

/* ── 8.1  Sticky site header wrapper ───────────────── */
.site-header {
  position: sticky;           /* stays in view when scrolling   */
  top: 0;
  width: 100%;
  background: var(--card);    /* white card colour for contrast */
  box-shadow: var(--shadow);  /* soft elevation                 */
  z-index: 1000;              /* sits above all page elements   */
}

/* ── 8.2  Flex container inside header ─────────────── */
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  height: 64px;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── 8.3  Brand / logo slot ─────────────────────────── */
.brand {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--primary-text);
  text-decoration: none;
  letter-spacing: -0.3px;
}

/* ── 8.4  Main navigation list ─────────────────────── */
.main-nav {
  list-style: none;
  display: flex;
  gap: 1.25rem;
  margin: 0;                 /* override old margin-bottom */
  padding: 0;
}

/* Links: neutral by default, accent underline on hover */
.main-nav a {
  position: relative;
  font-weight: 600;
  color: var(--primary-text);
  text-decoration: none;
  padding: 0.35rem 0;        /* bigger click target         */
  transition: color 0.2s;
}
.nav-login {          /* NEW */
  margin-left: auto;  /* flex “pushes” Log in to the right edge */
}

/* ▸ Compact nav-bar version of the existing .btn-login */
.btn-login--nav {
  /* existing… */
  padding: .55rem 1.35rem;
  font-size: .95rem;
  line-height: 1;

  /* ▼▼ NEW styling ▼▼ */
  font-weight: 700;          /* make it bold */
  text-decoration: underline;/* underline for emphasis */
}
/* override the nav link reset with higher specificity */
.main-nav a.btn-login--nav {
  font-weight: 1000;           /* keep it bold */  
}


.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: var(--accent);
  transition: width 0.25s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--accent);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  width: 100%;
}

/* ── 8.5  Mobile tweak (stack logo & links) ─────────── */
@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    height: auto;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
  }
}

/* ── 8.6  Offset document for sticky header ─────────── */
body {
  padding-top: 64px;          /* prevents content jump-under   */

    background-color: var(--bg);

  /* ① path         ② position   ③ size   ④ repeat */
  background: url("/static/images/bg-pattern.svg")
              center / cover    no-repeat fixed;
}

/* 9. DECORATIVE BACKGROUND -------------------------------------------------- */

/* 9.1  Wrapper occupies full screen behind everything */
.bg-decor {
  position: fixed;          /* stay put while user scrolls  */
  inset: 0;                 /* top:0 right:0 bottom:0 left:0 */
  z-index: -1;              /* sits under the main content  */
  pointer-events: none;     /* doesn’t block clicks         */
  overflow: hidden;         /* hides overflow of big svgs   */
}

/* 9.2  Each SVG becomes a layer using :nth-child(…) trick */
.bg-decor::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("img/bg/logo-12.svg"),
    url("img/bg/logo-21.svg"),
    url("img/bg/logo-15.svg"),
    url("img/bg/logo-18.svg"),
    url("img/bg/logo-20.svg"),
    url("img/bg/logo-13.svg"),
    url("img/bg/logo-6.svg"),
    url("img/bg/logo-23.svg"),
    url("img/bg/logo-24.svg"),
    url("img/bg/logo-27.svg"),
    url("img/bg/logo-26.svg");
  background-repeat: no-repeat;
background-position:
   /* left gutter  ≤10%          */    3%   16%,
                                      19% 28%,
                                       10%  42%,
                                        5%  91%,
   /* right gutter ≥90%          */   82%  14%,
                                       94%  28%,
                                       85%  50%,
                                         94%  3%,
                                         16%  3%,
                                         4%  63%,
                                         96%  68%;

background-size:
   140px, 110px,  130px,  110px,  129px,   /* left */
   140px, 130px, 120px, 160px, 135px, 136px;                        /* centre-height edges */
  opacity: 1;           /* subtle; tweak as you like */
  /* ↓↓↓  NEW  ↓↓↓ */
  --safe-zone: 750px;  /* diameter of empty circle in the centre */
  mask-image: radial-gradient(
      circle                         /* shape   */
      at 50% 50%,                    /* centre  */
      transparent 0                 /* nothing in the exact centre */
        calc(var(--safe-zone) / 2), /* transparent until radius   */
      black     calc(var(--safe-zone) / 2 + 20px)
  );
}

/* 9.2-bis  EXTRA DECOR BETWEEN HERO AND FOOTER ---------------------------- */
.bg-decor::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  /* reuse any 4-8 SVGs you like (or duplicate some) */
  background-image:
    url("/static/img/bg/logo-11.svg"),
    url("/static/img/bg/logo-14.svg"),
    url("/static/img/bg/logo-19.svg"),
    url("/static/img/bg/logo-25.svg"),
    url("/static/img/bg/logo-16.svg"),
    url("/static/img/bg/logo-17.svg"),
    url("/static/img/bg/logo-29.svg"),
    url("/static/img/bg/logo-30.svg"),
    url("/static/img/bg/logo-31.svg"),
    url("/static/img/bg/logo-32.svg");
    

  background-repeat: no-repeat;

  /* sizes tuned for that mid-lower band */
  background-size: 130px, 140px, 132px, 113px, 155px, 100px, 110px, 120px, 130px, 130px;

  /* positions: centre-ish X, lower Y (65-85 %) so they never cover hero or footer */
  background-position:
      91% 88%,   /* slightly left of centre */
      48% 82%,   /* dead centre, low */
      18% 73%,   /* left-centre */
      62% 70%,   /* right-centre */
      72% 78%,  /* mid */
      32% 76%,
      23% 96%,
      70% 96%,
      38% 95%,
      83% 74%;

  /* subtle opacity to match top layer */
  opacity: 1;
}

/* 10. PRICING PAGE
-------------------------------------------------- */
.pricing-grid {
  display: grid;
  /* instead of auto-fit, make exactly three columns */
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}


.pricing-card {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.pricing-card.featured {
    border: 2px solid var(--accent);
    transform: scale(1.05);
}

.pricing-card .card-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

.pricing-card h2 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.pricing-card .price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent);
}

.pricing-card .card-body {
    flex-grow: 1;
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
}

.pricing-card li {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    color: var(--secondary-text);
}

.pricing-card .credit-count {
    font-weight: 600;
    color: var(--primary-text);
}

.pricing-card .btn-buy {
    width: 100%;
}
/* ---------- PREVIEW GRID ---------- */
.logo-preview-grid{
  display:grid;
  gap:1rem;
  /* responsive columns – min 160 px on mobile, grow to use remaining space */
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}

.logo-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  padding:.75rem;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.logo-card img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  margin-bottom:.5rem;
}

.logo-actions{
  display:flex;
  gap:.5rem;
}

.logo-actions a{
  font-size:.75rem;
  text-decoration:none;
  padding:.3rem .6rem;
  border-radius:4px;
  border:1px solid #1A1F36;
  background:#fff;
  color:#1A1F36;
  transition:background .15s, color .15s;
}

.logo-actions a:hover{
  background:#0D6EFD;
  color:#fff;
  border-color:#0D6EFD;
}

/* single‑logo preview keeps previous size */
.logo-preview{
  max-width:480px;
  width:100%;
  height:auto;
  display:block;
  margin-inline:auto;
}
/* ===========================================================
   11.  MOBILE RESPONSIVE TWEAKS
   =========================================================== */

/* 11.1  Generic fluid typography & spacing ----------------- */
h1       { font-size: clamp(1.8rem, 6vw, 2.6rem); }
.card    { padding: 1.25rem; }
button,
.btn-google { padding: 0.85rem 1.25rem; }

/* 11.2  Breakpoint @ 960 px – tablets & large phones ------- */
@media (max-width: 960px) {
  main            { max-width: 95%; }
  .pricing-grid,
  .logo-preview-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .pricing-card.featured { transform: none; } /* avoid zoomed card overflow */
}

/* 11.3  Breakpoint @ 640 px – typical phone portrait -------- */
@media (max-width: 640px) {
  body            { padding-inline: 4vw; }      /* small side gutters */
  .nav-container  { gap: 0.25rem; }
  .main-nav       { flex-direction: column; gap: 0.25rem; }
  .main-nav a     { font-size: 0.95rem; text-align: center; }

  .pricing-grid,
  .logo-preview-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
  }

  .card           { margin-bottom: 1.25rem; }
  .logo-card      { padding: 0.6rem; }
  .logo-actions a { padding: 0.25rem 0.5rem; }

  /* tame the decorative layer */
  .bg-decor::before,
  .bg-decor::after {
    background-size: 80px, 70px, 75px, 70px, 72px,
                     80px, 75px, 70px, 85px, 75px, 75px;
    --safe-zone: 550px;
  }
}

/* 11.4  Breakpoint @ 480 px – small phones ----------------- */
@media (max-width: 480px) {
  h1        { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .subtitle { font-size: 0.95rem; }

  .form-actions { flex-direction: column; }
  button,
  .btn-google { font-size: 0.95rem; padding: 0.75rem 1rem; }

  #preview-container {
    max-height: 55vh;
    padding: 0.5rem;
  }

  /* ensure footer links wrap gracefully */
  .footer-nav      { flex-wrap: wrap; gap: 1rem 0.75rem; justify-content: center; }
}

/* 11.5  Accessibility refinement: bigger tap targets ------- */
@media (hover: none) and (pointer: coarse) {
  .main-nav a,
  .footer-nav a { padding-block: 0.6rem; }
}
/* ===========================================================
   11.X  MOBILE NAV BAR POLISH  (≤ 640 px)
   =========================================================== */
@media (max-width: 640px) {

  /* A) Header container ───────────── */
  .site-header {
    box-shadow: none;                       /* lighter aesthetic        */
    border-bottom: 1px solid var(--border-color);
  }

  .nav-container {
    flex-direction: row;                    /* back to a single row     */
    align-items: center;
    height: 56px;                           /* slimmer than desktop     */
    gap: 0;                                 /* remove extra spacing     */
    padding: 0 0.75rem;
  }

  /* B) Brand / logo ───────────────── */
  .brand {
    font-size: 1.15rem;                     /* down from 1.35rem        */
    flex: 0 0 auto;
  }

  /* C) Main nav list ──────────────── */
  .main-nav {
    flex: 1 1 auto;                         /* fill remaining width     */
    flex-direction: row;                    /* horizontal links         */
    flex-wrap: nowrap;                      /* stay on one line         */
    overflow-x: auto;                       /* swipe if too many links  */
    -webkit-overflow-scrolling: touch;      /* smooth iOS scrolling     */
    gap: 0.75rem;
    margin-left: 1rem;                      /* little breathing room    */
  }

  /* Hide mobile scrollbar (optional)  */
  .main-nav::-webkit-scrollbar { display: none; }

  /* D) Links in the list ──────────── */
  .main-nav a {
    font-size: 0.95rem;
    padding: 0.45rem 0.25rem;               /* ≥44 px touch target Y    */
    white-space: nowrap;                    /* prevent text wrap        */
  }

  /* E) “Log in” link stays rightmost */
  .nav-login { margin-left: auto; }
}

/* ===========================================================
   11.6  MOBILE ACTION BAR  (≤ 480 px)
   =========================================================== */
@media (max-width: 480px) {

  /* ----- A. sticky container -------------------------------- */
  .form-actions {
    position: sticky;              /* floats just above footer   */
    bottom: 0;                     /* pinned to viewport bottom  */
    left: 0; right: 0;
    z-index: 1200;

    flex-direction: column;        /* already in your CSS, but   */
    gap: .55rem;                   /* …smaller gap for phones    */

    padding: .75rem 1rem .9rem;    /* generous finger space      */
    background: rgba(255,255,255,.96);  /* frosted card          */
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 12px rgba(0,0,0,.06);
  }

  /* ----- B. individual buttons ------------------------------ */
  .form-actions .action-btn {
    flex: 0 0 auto;        /* ignore the old 200 px basis      */
    width: 100%;           /* each takes the full row          */
    min-height: 52px;      /* WCAG‑friendly 48 px + padding    */

    font-size: 1.05rem;    /* readable but not shouty          */
    line-height: 1.2;
    padding: 0.9rem 1.15rem;
    border-radius: 10px;
  }

  /* slight colour difference helps users distinguish           */
  #enhance-btn { background: var(--secondary-text); }
  #enhance-btn:hover:not(:disabled) { background: #444; }

  /* ----- C. nudge body down so content isn’t hidden ---------- */
  body { padding-bottom: 96px; }    /* equals .form-actions height */
}