/* =========================================================
   vietisrael.com — "איך תיראו בווייטנאם?" AI photo tool (TEST BUILD)
   ISOLATED FEATURE: only ai-photo.html loads this file. Removing this
   file + ai-photo.html + js/ai-photo.js fully removes the feature with
   zero effect on any other page. Reuses the site's existing CSS custom
   properties (--green-*, --ink, --radius, --shadow, etc.) defined in
   css/style.css, which must be loaded first.
   ========================================================= */

/* Inline contact/share actions already exist; avoid covering them on phones. */
@media(max-width:759px){body.ai-photo-page #wa-fab{display:none!important;}}

.aip-screen{display:none;}
.aip-screen.active{display:block;}
.aip-narrow{max-width:640px;}

/* ---------- Blocking screens (phone required / unavailable) ---------- */
.aip-block-card{
  text-align:center;padding:48px 20px 70px;
}
.aip-block-icon{font-size:64px;display:block;margin-bottom:14px;}
/* :is(h1,h2) — the two blocking screens use <h2> so the page keeps exactly one
   <h1> (#aip-intro, which matches the <title>). The selector still covers h1 so
   this rule cannot silently stop applying if the markup changes back. */
.aip-block-card :is(h1,h2){font-size:clamp(24px,4vw,32px);margin-bottom:10px;}
.aip-block-lead{color:var(--ink-soft);font-size:16.5px;max-width:480px;margin:0 auto 24px;}
.aip-block-how{
  background:var(--green-50);border-radius:var(--radius);padding:20px 24px;
  max-width:420px;margin:0 auto 24px;text-align:right;
}
.aip-block-how p{margin:0 0 8px;font-size:15px;}
.aip-block-how ol{margin:0;padding-inline-start:20px;color:var(--ink-soft);font-size:14.5px;line-height:1.9;}
.aip-block-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:10px;}
.aip-block-actions .btn{min-width:210px;}
.aip-copy-note{color:var(--green-darker);font-weight:700;font-size:13.5px;margin:6px 0 0;}
.aip-block-alt{margin-top:26px;font-size:14px;color:var(--ink-soft);}
.aip-block-alt .aip-block-wa{display:block;margin-top:10px;}

/* ---------- Intro screen ---------- */
#aip-intro{padding:44px 0 60px;text-align:center;}
#aip-intro .aip-badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0 22px;}
#aip-intro .aip-badge{background:var(--green-100);color:var(--green-darker);border-radius:999px;padding:8px 16px;font-weight:600;font-size:13.5px;}
#aip-intro h1{font-size:clamp(26px,4.5vw,40px);}
#aip-intro .aip-sub{max-width:560px;margin:0 auto 24px;color:var(--ink-soft);font-size:17px;}
.aip-demo-figure{max-width:280px;margin:0 auto 26px;}
.aip-demo-figure img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);}
.aip-demo-figure figcaption{font-size:12px;color:var(--ink-soft);margin-top:8px;}
.aip-privacy-note{margin-top:18px;font-size:12.5px;color:var(--ink-soft);max-width:460px;margin-inline:auto;}

/* ---------- Upload screen ---------- */
#aip-upload{padding:36px 0 90px;}
#aip-upload h2{font-size:22px;margin-bottom:6px;}
.aip-step-intro{color:var(--ink-soft);margin-bottom:20px;}

.aip-upload-box{
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;
  border:2px dashed var(--border);border-radius:var(--radius);background:var(--green-50);
  padding:36px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;
  min-height:180px;color:var(--ink-soft);
}
.aip-upload-box:hover, .aip-upload-box.dragover{border-color:var(--green-dark);background:var(--green-100);}
.aip-upload-icon{font-size:34px;display:block;}
.aip-upload-hint{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:4px;}
#aip-upload-preview{max-height:320px;width:auto;max-width:100%;border-radius:var(--radius-sm);object-fit:contain;}

.aip-consent-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer;margin-top:18px;color:var(--ink-soft);}
.aip-consent-check input{margin-top:3px;width:18px;height:18px;flex-shrink:0;cursor:pointer;}

.aip-quota-note{text-align:center;font-size:12.5px;color:var(--warn-text);margin-top:10px;}

/* ---------- Loading overlay ---------- */
#aip-loading-overlay{
  position:fixed;inset:0;background:rgba(251,253,251,.94);z-index:200;
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;text-align:center;padding:20px;
}
#aip-loading-overlay.open{display:flex;}

/* Animated Vietnam waiting scene — pure CSS, no libraries.
   A sampan boat rocks on water in front of Ha Long Bay limestone
   karsts, with drifting birds and a sun. Kept lightweight so it never
   competes with the generation request for resources. */
.aip-scene{
  position:relative;width:280px;height:170px;margin:0 auto;overflow:hidden;
  border-radius:var(--radius);
  background:linear-gradient(180deg,#dff1fb 0%,#eaf7fb 55%,#cfe8f2 100%);
  box-shadow:var(--shadow);
}
.aip-sun{
  position:absolute;top:22px;left:34px;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle,#ffd98a 0%,#ffc45c 70%);
  box-shadow:0 0 22px rgba(255,196,92,.75);animation:aip-sun-pulse 3s ease-in-out infinite;
}
@keyframes aip-sun-pulse{0%,100%{transform:scale(1);opacity:.95;}50%{transform:scale(1.09);opacity:1;}}

/* Karst rock formations — the signature Ha Long Bay silhouette */
.aip-karst{position:absolute;bottom:52px;background:#7fa88f;border-radius:48% 48% 12% 12%/70% 70% 10% 10%;opacity:.95;}
.aip-karst-1{right:26px;width:56px;height:80px;background:#6b9a7e;}
.aip-karst-2{right:74px;width:78px;height:104px;background:#5c8a70;}
.aip-karst-3{right:140px;width:48px;height:66px;background:#7fa88f;}

.aip-bird{position:absolute;font-size:13px;opacity:.8;}
.aip-bird-1{top:34px;animation:aip-fly 7s linear infinite;}
.aip-bird-2{top:52px;font-size:10px;animation:aip-fly 9s linear infinite 1.4s;}
@keyframes aip-fly{
  0%{transform:translateX(300px) translateY(0);opacity:0;}
  12%{opacity:.85;}
  88%{opacity:.85;}
  100%{transform:translateX(-40px) translateY(-14px);opacity:0;}
}

/* The boat — rocks gently, as if on real water */
.aip-boat{
  position:absolute;bottom:34px;left:50%;margin-left:-30px;width:60px;text-align:center;
  animation:aip-rock 2.6s ease-in-out infinite;transform-origin:50% 90%;z-index:3;
}
.aip-boat-emoji{font-size:40px;display:block;line-height:1;}
.aip-hat{
  position:absolute;top:-13px;left:50%;margin-left:-9px;font-size:17px;
  animation:aip-hat-bob 2.6s ease-in-out infinite;
}
@keyframes aip-rock{
  0%,100%{transform:rotate(-5deg) translateY(0);}
  50%{transform:rotate(5deg) translateY(-4px);}
}
@keyframes aip-hat-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-2px);}}

.aip-water{position:absolute;bottom:0;left:0;right:0;height:56px;background:linear-gradient(180deg,#8fc9dd 0%,#63aec9 100%);overflow:hidden;}
.aip-wave{
  position:absolute;left:-50%;width:200%;height:14px;border-radius:50%;
  background:rgba(255,255,255,.42);
}
.aip-wave-1{top:6px;animation:aip-wave-move 3.4s ease-in-out infinite;}
.aip-wave-2{top:22px;opacity:.6;animation:aip-wave-move 4.6s ease-in-out infinite reverse;}
@keyframes aip-wave-move{0%,100%{transform:translateX(-14px);}50%{transform:translateX(14px);}}

.aip-loading-title{font-weight:700;font-size:18px;color:var(--green-darker);margin:4px 0 0;}
.aip-loading-msg{color:var(--ink-soft);font-size:14.5px;margin:0;min-height:22px;transition:opacity .3s;}

/* Indeterminate progress bar — communicates "working", not a fake % */
.aip-progress{width:220px;height:6px;background:var(--green-100);border-radius:999px;overflow:hidden;}
.aip-progress span{
  display:block;width:40%;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--green-pastel),var(--green-dark));
  animation:aip-progress-slide 1.5s ease-in-out infinite;
}
@keyframes aip-progress-slide{
  0%{transform:translateX(-110%);}
  100%{transform:translateX(260%);}
}

/* Respect users who ask for reduced motion */
@media(prefers-reduced-motion:reduce){
  .aip-boat,.aip-hat,.aip-wave,.aip-bird,.aip-sun,.aip-progress span{animation:none;}
}

/* ---------- Result screen ---------- */
#aip-result{padding:36px 0 90px;}
#aip-result h2{font-size:22px;text-align:center;margin-bottom:16px;}
.aip-result-image-wrap{
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--ink);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
#aip-result-canvas{width:100%;height:auto;display:block;max-height:70vh;}

.aip-result-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:8px;}
.aip-result-actions .btn{flex:1;min-width:140px;}
.aip-share-hint{text-align:center;font-size:12.5px;color:var(--ink-soft);margin:10px 0 0;opacity:.9;}
/* Deliberately small and quiet — a footnote, not a warning banner. */
.aip-result-quota{text-align:center;font-size:12px;color:var(--ink-soft);margin:6px 0 0;opacity:.75;}
.aip-share-fallback-note{text-align:center;font-size:13px;color:var(--ink-soft);background:var(--green-50);border-radius:var(--radius-sm);padding:12px 14px;margin-top:10px;line-height:1.7;}
.aip-share-fallback-note .aip-wa-text-link{display:inline-block;margin-top:8px;color:var(--green-darker);font-weight:700;text-decoration:underline;}
.aip-share-fallback-note .aip-share-tip{display:block;margin-top:8px;font-size:12px;opacity:.85;}

/* ---------- Qualifying question ---------- */
.aip-qualify{margin-top:32px;border-top:1px solid var(--border);padding-top:24px;}
.aip-qualify h3{font-size:17px;margin-bottom:4px;}
.aip-qualify > p{color:var(--ink-soft);margin-bottom:14px;}
.aip-qualify-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;}
.aip-qualify-chip{
  display:block;background:var(--white);border:2px solid var(--border);border-radius:var(--radius-sm);
  padding:12px 14px;text-align:center;cursor:pointer;font-weight:600;font-size:14px;color:var(--ink);
  transition:border-color .15s,background .15s;position:relative;
}
.aip-qualify-chip input{position:absolute;opacity:0;pointer-events:none;}
.aip-qualify-chip:hover{border-color:var(--green-pastel);}
.aip-qualify-chip.selected{border-color:var(--green-dark);background:var(--green-50);color:var(--green-darker);}

#aip-followup-area{margin-top:20px;}
.aip-followup-card{background:var(--green-50);border-radius:var(--radius);padding:18px;text-align:center;}
.aip-followup-card p{margin-bottom:14px;color:var(--ink-soft);}
.aip-followup-card.aip-followup-quiet{background:var(--white);border:1px solid var(--border);}

/* Light-touch lead step (single question + one WhatsApp button) */
.aip-followup-card h4{font-size:19px;margin-bottom:8px;color:var(--green-darker);}
.aip-followup-fineprint{font-size:12.5px;color:var(--ink-soft);margin:12px 0 0 !important;opacity:.85;}

.aip-more-link{background:none;border:none;color:var(--green-darker);font-weight:700;text-decoration:underline;cursor:pointer;padding:6px 0;font-size:14px;}

@media(max-width:480px){
  .aip-result-actions .btn{min-width:100%;}
}