/* ========= Brand Theme ========= */
:root{
  --brand-red:#E0182D; --brand-red-deep:#B61123;
  --brand-peach:#FDE2E1;
  --brand-yellow:#FFD22E; --brand-yellow-deep:#F7B800;
  --canvas:#fff; --ink:#1b1b1b;
  --card-radius:16px; --ring:rgba(0,0,0,.08);
}

/* ========= Page Background ========= */
body.brand-bg{ background:var(--brand-red); min-height:100vh; position:relative; color:#111; }
body.brand-bg::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140' fill='none' stroke='%23FFD22E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
  <g opacity='0.9' transform='translate(18,18)'><circle cx='18' cy='18' r='12' fill='none'/><path d='M18 6 C19 4,22 4,24 6'/><path d='M18 6 l6 -6'/></g>\
  <g opacity='0.8' transform='translate(82,16)'><circle cx='10' cy='28' r='7' fill='none'/><circle cx='26' cy='28' r='7' fill='none'/><path d='M10 21 C15 8,26 8,26 21'/><path d='M18 10 l6 -6'/></g>\
  <g opacity='0.85' transform='translate(30,78)'><path d='M4 16 C 18 0, 44 2, 60 18 C 44 12, 18 12, 4 16 Z' fill='none'/></g>\
</svg>");
  background-repeat:repeat; background-size:140px 140px; opacity:.10;
}
body.brand-bg::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 700px at -10% 90%, rgba(0,0,0,.08), transparent 55%);
}

/* ========= Card/Form ========= */
.card{ border:none; border-radius:var(--card-radius); background:linear-gradient(180deg,#fff 0%,#fafafa 100%); box-shadow:0 20px 40px rgba(0,0,0,.25), 0 2px 10px rgba(0,0,0,.12); }
.form-label{ color:#212121; }

/* Range */
.form-range::-webkit-slider-thumb{ background:var(--brand-yellow); border:2px solid #0001; }
.form-range::-moz-range-thumb{ background:var(--brand-yellow); border:2px solid #0001; }
.form-range::-webkit-slider-runnable-track,
.form-range::-moz-range-track{ background:linear-gradient(90deg,var(--brand-yellow) 0%,#ffe77a 100%); }

/* Buttons */
.btn-primary{
  background:linear-gradient(180deg,var(--brand-yellow) 0%,var(--brand-yellow) 100%);
  color:#1a1a1a; border:none; letter-spacing:.02em; text-shadow:0 1px 0 rgba(255,255,255,.35);
  transform:translateY(0); transition:transform .08s ease, filter .12s ease;
}
.btn-primary:hover{ filter:brightness(1.03); transform:translateY(-1px); }
.btn-primary:active{ transform:translateY(2px); }

/* Alerts */
.alert-info{ background:#fff7cc; border:1px solid #ffea85; color:#6b5600; }
.alert-success{ background:#d7ffb8; border:1px solid #bff38e; color:#234a0f; }
.alert-danger{ background:#ffd4d9; border:1px solid #ffb3bc; color:#6b0b17; }

/* Previews */
.preview-wrapper{ position:relative; }
.card-img-top{ border-top-left-radius:var(--card-radius); border-top-right-radius:var(--card-radius); }
.remove-btn{
  position:absolute; top:6px; right:6px; width:28px; height:28px; line-height:26px;
  background:#000B; color:#fff; border:none; border-radius:50%;
  font-size:16px; box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.remove-btn:hover{ background:#ff3b3b; }

/* Footer */
footer{ background:var(--brand-peach); }
footer a{ color:var(--brand-yellow); } footer a:hover{ color:#fff; text-decoration:underline; }

/* Utilities */
.break-word{ word-wrap:break-word; overflow-wrap:break-word; white-space:normal; }

/* Position grid */
.pos-grid{
  --cell:42px; display:grid; grid-template-columns:repeat(3,var(--cell)); grid-template-rows:repeat(3,var(--cell));
  gap:8px; width:max-content; padding:8px; border-radius:12px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.pos-cell{
  width:var(--cell); height:var(--cell); border:2px dashed rgba(0,0,0,.15); border-radius:8px;
  background:radial-gradient(circle at 50% 50%, rgba(0,0,0,.08) 0 3px, transparent 4px) center/100% 100% no-repeat,
             repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 6px, rgba(0,0,0,.06) 6px 12px);
  cursor:pointer; transition:transform .06s ease, box-shadow .12s ease, border-color .12s ease;
}
.pos-cell:hover{ transform:translateY(-1px); }
.pos-cell.active{ border-color:var(--brand-yellow); box-shadow:0 0 0 4px rgba(255,210,46,.35); background:radial-gradient(circle at 50% 50%, var(--brand-yellow) 0 4px, transparent 5px), linear-gradient(180deg,#fff8c8,#fff); }
.pos-disabled{ opacity:.15; pointer-events:none; }

/* Video thumbs */
.video-thumb{ position:relative; }
.video-thumb > .thumb-img, .video-thumb > video.card-img-top{ width:100%; height:140px; object-fit:cover; display:block; }
.video-thumb .play-overlay{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:none; border:none; cursor:pointer; padding:0; }
.video-thumb .play-overlay svg{ width:64px; height:64px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }

/* Dropzones */
.dropzone{
  border:2px dashed #bbb; border-radius:12px; padding:40px 20px;
  background-color:#fafafa; color:#555; text-align:center; cursor:pointer;
  transition:background .2s, border-color .2s;
}
.dropzone.dragover, .dropzone:hover{ border-color:var(--brand-yellow); background-color:#fffce6; }
.dropzone .dz-link{ color:var(--brand-yellow); }
.dropzone .dz-icon{ font-size:36px; color:#888; margin-bottom:8px; }
.dropzone .dz-title{ font-weight:600; font-size:16px; }
.dropzone .dz-sub{ font-size:14px; color:#666; }
.dropzone.dropzone--small{ padding:24px 16px; }

/* ===== Modal / AI Modal ===== */
.linklike{ background:none; border:0; color:var(--brand-yellow); text-decoration:underline; cursor:pointer; font:inherit; padding:0; }
.linklike:hover{ text-decoration:none; }
.ai-logo-cta{ margin:.5rem 0 0; }

.ai-modal-backdrop{
  position:fixed; inset:0; display:grid; place-items:center; padding:1rem; z-index:1000;
  background:rgba(0,0,0,.45); backdrop-filter:saturate(1.1) blur(2px);
}
.ai-modal{
  background:var(--canvas); color:var(--ink); width:100%; max-width:520px;
  border-radius:var(--card-radius); border:1px solid var(--ring);
  box-shadow:0 20px 40px rgba(0,0,0,.25), 0 2px 10px rgba(0,0,0,.12);
  overflow:hidden; animation:aiModalIn .14s ease-out both;
}
@keyframes aiModalIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:translateY(0) } }

.ai-modal-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--ring); }
.ai-modal-header h3{ margin:0; font-size:1.05rem; }
.ai-iconbtn{ background:transparent; border:0; font-size:20px; cursor:pointer; line-height:1; border-radius:10px; padding:2px 6px; }
.ai-iconbtn:focus-visible{ outline:2px solid var(--brand-yellow); outline-offset:2px; }

.ai-modal-body{ display:grid; gap:14px; padding:16px; }
.field{ display:grid; gap:6px; }
.field input, .field select{ padding:.6rem .7rem; border:1px solid var(--ring); border-radius:10px; background:#fff; }
.field input:focus, .field select:focus{ outline:2px solid var(--brand-yellow); outline-offset:1px; }
.field small{ color:#666; }

.ai-actions{ display:flex; gap:10px; margin-top:4px; }
.ai-actions button{ padding:.55rem .9rem; border-radius:10px; cursor:pointer; border:1px solid var(--ring); background:#f7f7f7; }
.ai-actions #aiLogoUseBtn{ background:linear-gradient(180deg,var(--brand-yellow) 0%,var(--brand-yellow) 100%); border:none; color:#1a1a1a; text-shadow:0 1px 0 rgba(255,255,255,.35); }
.ai-actions button[disabled]{ opacity:.5; cursor:not-allowed; }

/* ===== AI Preview (single dashed box + shimmer) ===== */
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes ai-shimmer{ 0%{ background-position:-200% 0 } 100%{ background-position:200% 0 } }

.ai-preview{ margin-top:8px; }
.ai-preview-card{
  position:relative; display:grid; place-items:center;
  min-height:180px; padding:16px; border-radius:12px;
  border:2px dashed #ddd; background:linear-gradient(180deg,#fff,#fafafa);
  overflow:hidden;
}
/* shimmer when JS adds .skeleton */
.ai-preview-card.skeleton::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg,#f6f6f6 25%,#eee 37%,#f6f6f6 63%); background-size:400% 100%;
  animation:ai-shimmer 1.1s ease-in-out infinite;
}
.ai-preview-card.skeleton > *{ opacity:.25; }

/* Placeholder & image */
.ai-placeholder{
  display:grid; place-items:center; width:100%; min-height:140px; padding:24px 16px;
  border:0 !important;
  color:#888; background:linear-gradient(180deg,#fff,#fafafa);
  font-weight:500; letter-spacing:.02em;
}
#aiLogoPreviewImg{ display:none; width:100%; border-radius:12px; } /* JS toggles display */

/* Generate button spinner (text + spinner, no layout shift) */
#aiLogoPreviewBtn{ display:inline-flex; align-items:center; gap:.5rem; position:relative; }
#aiLogoPreviewBtn .btn-label{ line-height:1; }
#aiLogoPreviewBtn .btn-spinner{
  width:1rem; height:1rem; border-radius:50%;
  border:2px solid rgba(0,0,0,.18); border-top-color:var(--brand-yellow);
  animation:spin .8s linear infinite; opacity:0; transition:opacity .12s ease;
}
#aiLogoPreviewBtn.btn-loading .btn-spinner{ opacity:1; }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){ .ai-modal{ animation:none; } }

/* Base button */
#aiLogoPreviewBtn{
  display:inline-flex;
  align-items:center;
  position:relative;
  transition:padding .12s ease; /* optional for smooth growth */
}

/* Label sits normally, no gap by default */
#aiLogoPreviewBtn .btn-label{
  line-height:1;
}

/* Spinner hidden by default, takes no space */
#aiLogoPreviewBtn .btn-spinner{
  display:none;
  width:1rem; height:1rem;
  border-radius:50%;
  border:2px solid rgba(0,0,0,.18);
  border-top-color: var(--brand-yellow);
  animation: spin .8s linear infinite;
  margin-left:.5rem; /* spacing appears only when shown */
}

/* Show spinner only in loading state */
#aiLogoPreviewBtn.btn-loading .btn-spinner{
  display:inline-block;
}

/* Modal: fit viewport and keep header visible */
.ai-modal{
  width: min(520px, 92vw);
  max-height: 92svh;                 /* use svh for mobile address bar */
  display: flex;
  flex-direction: column;
  overflow: hidden;                   /* clip inside; body will scroll */
}

/* Scroll only the contents, not the whole modal */
.ai-modal-body{
  overflow: auto;
  padding: 16px;
  overscroll-behavior: contain;       /* avoid background page pull-to-refresh */
}

/* Give the grid backdrop a bit more breathing room so the modal never touches edges */
.ai-modal-backdrop{ padding: clamp(12px, 3vw, 24px); }

/* Cap the preview area height so a large image can't stretch the modal */
.ai-preview-card{
  max-height: 60svh;                  /* ~60% of viewport height */
  display: grid;
  place-items: center;
}
#aiLogoPreviewImg{
  max-width: 100%;
  height: auto;
  max-height: 60svh;                  /* match card cap */
  object-fit: contain;                /* no cropping */
}

/* Optional: if your placeholder needs the same cap */
.ai-placeholder{ max-height: 60svh; overflow: hidden; }