/* Avanteh AI Studio Embed — faithfully ported from the LIVE avanteh-beauty.com/ai
   studio's own design system (assets/ai.css in the avanteh-booking plugin,
   the --aka-* rose token set). Scoped to .avaie-root instead of #akp-ai-feature.
   All colors are CSS custom properties (--avaie-*) computed at runtime from
   ONE salon-picked brand color (see widget.js applyBrandColor()) so any of
   the 10 presets in the plugin's settings page produces the exact same
   card/chip/button shapes as the real site, just retinted. */
.avaie-root {
  --avaie-radius: 25px;
  --avaie-line: #eadde1;
  --avaie-muted: #716268;
  --avaie-ink: #30262a;
  --avaie-success: #167a50;
  --avaie-success-soft: #b9f3d0;
  --avaie-danger: #a33d54;
  --avaie-shadow: 0 14px 35px rgba(75, 31, 48, .08);
  /* --avaie-100/200/300/700/800/950 and --avaie-blush are set inline per
     instance by widget.js from the chosen brand color. Fallback values
     here match the real site's own default rose in case JS hasn't run yet. */
  --avaie-950: #4b1f30;
  --avaie-800: #7c3150;
  --avaie-700: #98415f;
  --avaie-300: #e2adbf;
  --avaie-200: #efcbd6;
  --avaie-100: #f9e9ee;
  --avaie-blush: #fff6f8;

  max-width: 720px;
  margin: 0 auto;
  direction: rtl;
  box-sizing: border-box;
  color: var(--avaie-ink);
  line-height: 1.75;
}
.avaie-root * { box-sizing: border-box; }

/* ===== top bar (mirrors .akp-studio-top) ===== */
.avaie-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 20px; padding: 12px 16px;
  border: 1px solid var(--avaie-200); border-radius: 20px; background: #fffbfc;
  box-shadow: var(--avaie-shadow);
}
.avaie-brand { display: flex; align-items: center; gap: 10px; }
.avaie-brand-mark {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 14px; color: #fff;
  background: linear-gradient(145deg, var(--avaie-950), var(--avaie-700));
  box-shadow: 0 8px 18px rgba(75, 31, 48, .18); flex: 0 0 auto;
}
.avaie-brand-mark svg { width: 18px; height: 18px; }
.avaie-brand strong { display: block; font-size: 13px; color: var(--avaie-950); }

/* ===== category cards (mirrors .akp-category-card) ===== */
.avaie-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.avaie-tab {
  position: relative; min-height: 92px; padding: 16px; overflow: hidden;
  border: 1px solid var(--avaie-line); border-radius: 20px; color: var(--avaie-ink);
  text-align: center; background: #fff; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.avaie-tab:hover { transform: translateY(-2px); border-color: var(--avaie-300); box-shadow: 0 14px 30px rgba(75, 31, 48, .08); }
.avaie-tab.active {
  color: #fff; border-color: var(--avaie-800);
  background: linear-gradient(145deg, var(--avaie-950), var(--avaie-700));
  box-shadow: 0 16px 36px rgba(75, 31, 48, .18);
}
.avaie-tab-icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px;
  color: var(--avaie-800); background: var(--avaie-100);
}
.avaie-tab.active .avaie-tab-icon { color: #fff; background: rgba(255, 255, 255, .16); }
.avaie-tab-label { font-size: 13px; font-weight: 800; }

/* ===== card shell (mirrors .akp-state-card / .akp-card) ===== */
.avaie-card {
  position: relative; border: 1px solid var(--avaie-line); border-radius: var(--avaie-radius);
  background: rgba(255, 255, 255, .96); box-shadow: var(--avaie-shadow);
  padding: clamp(18px, 4vw, 30px); margin-bottom: 16px; overflow: hidden;
}

/* ===== upload (mirrors .akp-dropzone) ===== */
.avaie-upload {
  width: 100%; min-height: 260px; display: grid; place-items: center; padding: 24px;
  border: 1.5px dashed var(--avaie-300); border-radius: var(--avaie-radius); text-align: center;
  background: linear-gradient(145deg, #fff, var(--avaie-blush)); cursor: pointer; overflow: hidden;
  transition: border-color .2s ease, background .2s ease; margin-bottom: 18px;
}
.avaie-upload img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; border-radius: 18px; }
.avaie-upload-symbol {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 20px; color: var(--avaie-800); background: var(--avaie-100);
}
.avaie-upload-symbol svg { width: 26px; height: 26px; }
.avaie-upload-placeholder { color: var(--avaie-950); font-size: 15px; font-weight: 800; }

/* ===== chips (mirrors .akp-chip) ===== */
.avaie-section-label {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 4px 0 10px; font-size: 13px; font-weight: 900; color: var(--avaie-950);
}
.avaie-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.avaie-chip {
  min-height: 39px; padding: 8px 14px; border: 1px solid var(--avaie-line); border-radius: 14px;
  color: var(--avaie-muted); background: #fff; cursor: pointer; font-size: 12px; font-weight: 850;
  font-family: inherit; transition: transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease;
}
.avaie-chip:hover { transform: translateY(-2px); color: var(--avaie-950); border-color: var(--avaie-300); background: var(--avaie-100); }
.avaie-chip.active {
  color: #fff; border-color: var(--avaie-800); background: var(--avaie-800);
  box-shadow: 0 9px 20px rgba(124, 49, 80, .17);
}

/* ===== fields (mirrors .akp-control / .akp-label) ===== */
.avaie-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.avaie-field label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 900; color: var(--avaie-950); }
.avaie-field input {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--avaie-line); border-radius: 15px;
  outline: none; color: var(--avaie-ink); background: #fff; box-shadow: 0 6px 16px rgba(75, 31, 48, .035);
  font-family: inherit; font-size: 14px; transition: border-color .2s ease, box-shadow .2s ease;
}
.avaie-field input:focus { border-color: var(--avaie-700); box-shadow: 0 0 0 4px rgba(152, 65, 95, .12); }

/* ===== submit button (mirrors .akp-button) ===== */
.avaie-submit {
  width: 100%; margin-top: 20px; min-height: 52px; padding: 12px 20px; border: none; border-radius: 17px;
  color: #fff; background: var(--avaie-800); box-shadow: 0 12px 26px rgba(124, 49, 80, .2);
  cursor: pointer; font-size: 15px; font-weight: 900; font-family: inherit;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.avaie-submit:hover:not(:disabled) { transform: translateY(-2px); background: var(--avaie-950); box-shadow: 0 16px 32px rgba(75, 31, 48, .24); }
.avaie-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.avaie-alert { margin-top: 12px; padding: 11px 15px; border-radius: 14px; font-size: 13px; font-weight: 700; }
.avaie-alert.error { color: var(--avaie-danger); background: #fbe0df; border: 1px solid rgba(163, 61, 84, .18); }

/* ===== result (mirrors .akp-result-kicker + comparison card) ===== */
.avaie-result img { width: 100%; border-radius: 18px; cursor: zoom-in; display: block; }
.avaie-result-meta {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 6px 12px;
  border: 1px solid var(--avaie-success-soft); border-radius: 99px; color: var(--avaie-success);
  background: #effbf4; font-size: 12px; font-weight: 900;
}

/* ===== gallery (mirrors .akp-history-card) ===== */
.avaie-gallery-title { margin: 22px 0 12px; font-size: 15px; font-weight: 900; color: var(--avaie-950); }
.avaie-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.avaie-gallery-item {
  position: relative; aspect-ratio: 4/3; overflow: hidden; border: 1px solid var(--avaie-line);
  border-radius: 18px; background: var(--avaie-100); box-shadow: 0 8px 22px rgba(75, 31, 48, .05);
}
.avaie-gallery-item img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .3s ease; }
.avaie-gallery-item:hover img { transform: scale(1.05); }
.avaie-gallery-del {
  position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(75, 31, 48, .6); color: #fff; border: none; cursor: pointer; font-size: 12px; line-height: 1;
  backdrop-filter: blur(6px);
}

/* ===== zoom overlay ===== */
.avaie-zoom-overlay { position: fixed; inset: 0; background: rgba(48, 38, 42, .92); z-index: 99999; display: flex; align-items: center; justify-content: center; }
.avaie-zoom-overlay img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; }
.avaie-zoom-close {
  position: absolute; top: 18px; left: 18px; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; border: none; cursor: pointer; font-size: 18px;
}

.avaie-spinner {
  display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .42);
  border-top-color: #fff; border-radius: 50%; animation: avaie-spin .7s linear infinite; vertical-align: middle;
}
@keyframes avaie-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .avaie-row { grid-template-columns: 1fr; }
  .avaie-tabs { grid-template-columns: 1fr; }
  .avaie-gallery { grid-template-columns: repeat(2, 1fr); }
}