/* ==========================================================================
   کاکوتی — بهبود UI/UX فرم ایمیل و فیلدهای تسویه‌حساب
   هویت بصری: سبز نفتی #032A2B / #123331 ، طلایی #C79B20 → #F1D87D ، شعاع ۱۲px
   ========================================================================== */

:root{
  --kk-teal:#032A2B;
  --kk-teal-2:#123331;
  --kk-gold:#C79B20;
  --kk-gold-soft:#F1D87D;
  --kk-line:rgba(3,42,43,.14);
  --kk-cream:#FDFBF4;
}

/* ---------- سربرگ بخش «اطلاعات تماس» با اکسان طلایی ---------- */
.wc-block-checkout__contact-fields .wc-block-components-title{
  font-size:1.15rem !important;
  color:var(--kk-teal) !important;
  position:relative;
  padding-bottom:.6rem;
}
.wc-block-checkout__contact-fields .wc-block-components-title::after{
  content:"";
  position:absolute; bottom:0; right:0;
  width:46px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--kk-gold-soft),var(--kk-gold));
}
.wc-block-checkout__contact-fields .wc-block-components-checkout-step__description{
  font-size:.86rem; color:rgba(3,42,43,.6);
}

/* ---------- خوانا کردن همه‌ی فیلدهای تسویه‌حساب ---------- */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-blocks-components-select__select,
.wc-block-checkout .wc-block-components-textarea{
  font-size:16px !important;      /* جلوگیری از زوم خودکار در iOS */
  font-family:inherit !important;
  color:var(--kk-teal) !important;
  border:1.5px solid var(--kk-line) !important;
  border-radius:12px !important;
  background:#fff !important;
  min-height:56px !important;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.wc-block-checkout .wc-block-components-text-input label,
.wc-block-checkout .wc-blocks-components-select__label{
  font-size:13px !important;
  color:rgba(3,42,43,.62) !important;
}
.wc-block-checkout .wc-block-components-text-input input:hover,
.wc-block-checkout .wc-blocks-components-select__select:hover{
  border-color:rgba(3,42,43,.28) !important;
}
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-blocks-components-select__select:focus{
  border-color:var(--kk-gold) !important;
  box-shadow:0 0 0 3px rgba(199,155,32,.18) !important;
  outline:none !important;
}

/* ---------- فیلد ایمیل: ستاره‌ی این فرم ---------- */
.wc-block-components-address-form__email{ position:relative; }

.wc-block-components-address-form__email input#email{
  direction:ltr !important;
  text-align:right !important;        /* هم‌راستا با برچسب و آیکن در چیدمان راست‌چین */
  padding-right:52px !important;      /* جا برای آیکن */
  padding-left:16px !important;
  background-color:var(--kk-cream) !important;
  letter-spacing:.2px;
  font-size:16px !important;
}
.wc-block-components-address-form__email input#email:focus{
  background-color:#fff !important;
}
.wc-block-components-address-form__email input#email::placeholder{
  color:rgba(3,42,43,.34); direction:ltr;
}

/* آیکن پاکت در لبه‌ی راست (سمت شروع در چیدمان راست‌چین) */
.wc-block-components-address-form__email::before{
  content:"";
  position:absolute;
  top:50%; right:16px;
  width:22px; height:22px;
  transform:translateY(-50%);
  pointer-events:none;
  z-index:2;
  background-repeat:no-repeat;
  background-size:contain;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C79B20' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='3'/%3E%3Cpath d='M3.5 7.5l7.6 5.3a1.6 1.6 0 0 0 1.8 0l7.6-5.3'/%3E%3C/svg%3E");
}
/* وقتی فیلد خطا دارد آیکن قرمز شود */
.wc-block-components-address-form__email.has-error::before{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C0392B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='3'/%3E%3Cpath d='M3.5 7.5l7.6 5.3a1.6 1.6 0 0 0 1.8 0l7.6-5.3'/%3E%3C/svg%3E");
}

/* برچسب شناور خواناتر */
.wc-block-checkout .wc-block-components-address-form__email label{
  right:52px !important;
  font-size:13px !important;
}
.wc-block-checkout .wc-block-components-address-form__email.is-active label{
  transform:none !important;
  top:9px !important;
  font-size:11.5px !important;
  color:rgba(3,42,43,.55) !important;
}
/* نگه‌داشتن پلیس‌هولدر تا زمانی که فیلد فعال شود (تداخل با برچسب شناور) */
.wc-block-components-address-form__email:not(.is-active) input#email::placeholder{
  opacity:0 !important;
}

/* ---------- متن راهنما زیر فیلد ایمیل ---------- */
.kk-email-help{
  display:flex; align-items:flex-start; gap:8px;
  margin:10px 2px 0;
  font-size:12.5px; line-height:1.8;
  color:rgba(3,42,43,.62);
}
.kk-email-help svg{ flex:0 0 auto; margin-top:3px; }
.kk-email-help strong{ color:var(--kk-teal-2); font-weight:600; }

/* ---------- حالت خطا با رنگ‌های برند ---------- */
.wc-block-checkout .has-error input,
.wc-block-checkout .has-error .wc-blocks-components-select__select{
  border-color:#C0392B !important;
  background-color:#FDF6F5 !important;
}
.wc-block-checkout .has-error input:focus{
  box-shadow:0 0 0 3px rgba(192,57,43,.15) !important;
}
.wc-block-checkout .wc-block-components-validation-error{
  font-size:12.5px !important;
  color:#C0392B !important;
  margin-top:6px;
}

/* ---------- موبایل ---------- */
@media (max-width:640px){
  .wc-block-checkout .wc-block-components-text-input input,
  .wc-block-checkout .wc-blocks-components-select__select{ min-height:54px !important; }
  .kk-email-help{ font-size:12px; }
}