/* ============================================================
   CodebyCarter — personalize.css
   Live business-name personalizer in the hero. Visitor types
   their business name, the preview line below updates in
   real-time, and the name persists across reloads.
   ============================================================ */

.personalize{
  margin:36px auto 0;max-width:560px;
  position:relative;z-index:5;
  text-align:center;
}

.personalize-prompt{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(20,20,30,.55);font-weight:700;
  margin-bottom:12px;
}
.personalize-arrow{
  display:inline-block;width:14px;height:14px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  animation:pArrow 1.8s ease-in-out infinite;
}
@keyframes pArrow{
  0%,100%{transform:rotate(45deg) translate(-2px,-2px)}
  50%{transform:rotate(45deg) translate(0,0)}
}

.personalize-form{
  position:relative;
}
.personalize-input{
  width:100%;
  padding:18px 56px 18px 22px;
  font-family:'Instrument Serif',serif;font-style:italic;font-size:22px;
  letter-spacing:-.015em;
  color:#0A0A0F;
  background:#FFFFFF;
  border:1.5px solid rgba(20,20,30,.16);
  border-radius:99px;
  outline:none;
  box-shadow:0 18px 40px -16px rgba(20,20,30,.18);
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
  cursor:text;
  -webkit-appearance:none;appearance:none;
}
.personalize-input::placeholder{
  color:rgba(20,20,30,.35);font-style:italic;
}
.personalize-input:focus{
  border-color:#A855F7;
  box-shadow:0 18px 50px -14px rgba(168,85,247,.35), 0 0 0 4px rgba(168,85,247,.10);
  transform:translateY(-1px);
}
.personalize-icon{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#A855F7,#EC4899);
  display:grid;place-items:center;
  color:#fff;pointer-events:none;
  box-shadow:0 8px 18px -4px rgba(168,85,247,.45);
}

.personalize-feedback{
  margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.10em;text-transform:uppercase;color:rgba(20,20,30,.45);font-weight:600;
}
.personalize-feedback em{
  font-style:italic;font-family:'Instrument Serif',serif;font-size:13px;
  color:rgba(20,20,30,.65);text-transform:none;letter-spacing:0;
  margin:0 4px;
}

/* The PREVIEW LINE that updates as they type */
.personalize-preview{
  margin-top:30px;
  padding:24px 28px;
  background:linear-gradient(135deg,rgba(168,85,247,.06),rgba(236,72,153,.04));
  border:1px dashed rgba(168,85,247,.30);
  border-radius:18px;
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(20px,2.3vw,28px);line-height:1.35;letter-spacing:-.01em;
  color:#0A0A0F;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
  position:relative;
}
.personalize-preview.is-active{
  opacity:1;transform:translateY(0);
}
.personalize-preview::before{
  content:"";position:absolute;top:-1px;left:24px;width:32px;height:1px;
  background:#FFFFFF;
}
.personalize-preview .p-name{
  font-family:'Space Grotesk',sans-serif;font-style:normal;font-weight:700;
  background:linear-gradient(135deg,#A855F7,#EC4899,#FB923C);
  background-size:200% 200%;animation:hue 4s linear infinite;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding:0 4px;
  letter-spacing:-.02em;
}
.personalize-preview-tag{
  display:block;margin-top:14px;
  font-family:'JetBrains Mono',monospace;font-style:normal;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(20,20,30,.45);font-weight:600;
}

/* Dark-stage variant (when hero gets restyled by theme switcher etc.) */
body[data-theme="brutalist"] .personalize-input{
  border-radius:0 !important;border:3px solid #000 !important;
  font-family:'JetBrains Mono',monospace !important;font-style:normal !important;
}
body[data-theme="brutalist"] .personalize-icon{border-radius:0 !important;background:#000 !important}
body[data-theme="brutalist"] .personalize-preview{
  border-radius:0 !important;border:3px solid #000 !important;background:#FFF !important;
}
body[data-theme="brutalist"] .personalize-preview .p-name{
  background:#000 !important;-webkit-background-clip:initial !important;
  background-clip:initial !important;-webkit-text-fill-color:#FFF !important;
  color:#FFF !important;padding:0 8px;font-family:'JetBrains Mono',monospace !important;
}

body[data-theme="neon"] .personalize-input{
  background:rgba(8,8,26,.7) !important;color:#00FF9F !important;
  border-color:#00FF9F !important;font-family:'JetBrains Mono',monospace !important;
  font-style:normal !important;
  box-shadow:0 0 24px rgba(0,255,159,.25) !important;
}
body[data-theme="neon"] .personalize-preview{
  background:rgba(8,8,26,.5) !important;border-color:rgba(0,255,159,.30) !important;
  color:#00FF9F !important;
}
body[data-theme="neon"] .personalize-preview .p-name{
  background:linear-gradient(135deg,#FF006E,#00FF9F) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

body[data-theme="editorial"] .personalize-input{
  background:#FFF8EE !important;color:#1A1816 !important;
  border-color:rgba(192,65,39,.30) !important;
}
body[data-theme="editorial"] .personalize-icon{background:#C04127 !important}
body[data-theme="editorial"] .personalize-preview{
  background:rgba(192,65,39,.05) !important;border-color:rgba(192,65,39,.30) !important;
}
body[data-theme="editorial"] .personalize-preview .p-name{
  background:none !important;-webkit-background-clip:initial !important;
  background-clip:initial !important;-webkit-text-fill-color:#C04127 !important;
  color:#C04127 !important;font-family:'Instrument Serif',serif !important;
  font-style:italic !important;
}

body[data-theme="luxe"] .personalize-input{
  background:rgba(255,255,255,.04) !important;color:#E8DCB0 !important;
  border-color:rgba(200,169,81,.30) !important;font-weight:300 !important;
}
body[data-theme="luxe"] .personalize-icon{
  background:linear-gradient(135deg,#C8A951,#E8DCB0) !important;color:#0A0A0A !important;
}
body[data-theme="luxe"] .personalize-preview{
  background:rgba(200,169,81,.04) !important;border-color:rgba(200,169,81,.30) !important;
  color:#E8DCB0 !important;
}
body[data-theme="luxe"] .personalize-preview .p-name{
  background:linear-gradient(135deg,#C8A951,#E8DCB0) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

/* Mobile */
@media (max-width:600px){
  .personalize{margin-top:28px}
  .personalize-input{font-size:18px;padding:15px 50px 15px 18px}
  .personalize-preview{padding:20px 22px;font-size:18px}
}