/* =========================================================
   Parastooseir Visa Request Page (Luxury UI)
   File: visa-request.css (FINAL MERGED)
   Scope: only request template
   - ادغام کد اول + کد دوم بدون حذف استایل‌ها
   - کد دوم به‌صورت «افزونه/Override» بعد از پایه‌ها آمده تا چیزی از بین نرود
========================================================= */

/* =========================
   Base (Code 1)
========================= */

/* Header */
.ps-visa-single__header{
  background:#fff;
  border-radius:18px;
  margin-bottom:22px;
  box-shadow:0 10px 30px rgba(20,30,60,.06);
}
.ps-visa-single__title{
  font-size:22px;
  font-weight:800;
  color:#1f2d55;
  margin-bottom:10px;
}
.ps-visa-single__meta-item{
  font-size:14px;
  color:#485a85;
}

/* Layout */
.ps-visa-layout{ gap:22px; }

/* Sections */
.ps-visa-section{
  background:#fff;
  border-radius:18px;
  padding:22px 24px;
  margin-bottom:18px;
  box-shadow:0 8px 24px rgba(15,25,50,.05);
  border:1px solid rgba(72,90,133,.08);
}
.ps-visa-section__title{
  font-size:17px;
  font-weight:800;
  margin-bottom:14px;
  color:#1f2d55;
  position:relative;
  padding-right:14px;
}
.ps-visa-section__title::before{
  content:"";
  position:absolute;
  right:0;
  top:6px;
  width:6px;
  height:6px;
  background:#d6a75e;
  border-radius:50%;
}

/* Richtext */
.ps-visa-richtext{
  font-size:15px;
  line-height:1.9;
  color:#2f3b57;
}
.ps-visa-richtext ul{
  margin:14px 0;
  padding-right:18px;
}
.ps-visa-richtext li{
  margin-bottom:8px;
  position:relative;
  padding-right:8px;
}
.ps-visa-richtext li::marker{ color:#d6a75e; }

/* Sidebar Trust Box */
.ps-visa-layout__sidebar .ps-visa-section{
  border:1px solid rgba(214,167,94,.25);
  background:linear-gradient(180deg,#fffdf8 0%,#ffffff 100%);
}
.ps-visa-layout__sidebar .ps-visa-section__title{ color:#7a5b24; }

/* Gravity Forms Styling */
.gform_wrapper{ margin-top:10px; }

.gform_wrapper input,
.gform_wrapper select,
.gform_wrapper textarea{
  border-radius:12px !important;
  border:1px solid rgba(72,90,133,.25) !important;
  padding:10px 12px !important;
  font-size:14px !important;
  transition:all .2s ease;
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus{
  outline:none !important;
  border-color:#d6a75e !important;
  box-shadow:0 0 0 3px rgba(214,167,94,.25);
}

/* Submit Button */
.gform_wrapper .gform_footer input[type="submit"]{
  background:linear-gradient(90deg,#485a85 0%,#2f3b57 100%) !important;
  border:none !important;
  border-radius:14px !important;
  padding:12px 22px !important;
  font-weight:700 !important;
  font-size:15px !important;
  color:#fff !important;
  cursor:pointer;
  transition:all .25s ease;
}
.gform_wrapper .gform_footer input[type="submit"]:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(31,45,85,.18);
}

/* Support Section */
.ps-visa-section:last-of-type{
  border:1px solid rgba(72,90,133,.15);
  background:#f9fbff;
}

/* Responsive */
@media (max-width:980px){
  .ps-visa-layout{ display:block; }
  .ps-visa-layout__sidebar{ margin-top:18px; }
}
@media (max-width:520px){
  .ps-visa-single__header{ padding:18px 16px; }
  .ps-visa-section{ padding:18px 16px; }
  .ps-visa-single__title{ font-size:18px; }
}

/* =========================================================
   ✅ Intl-Tel-Input RTL/LTR FIX (GF #24, Field #3)
   - پایه‌ی CSS برای درست شدن چیدمان در RTL
   - JS (داخل template) هنوز برای override inline padding پلاگین ضروری است
========================================================= */

#field_24_3 label{ direction:rtl; }

#field_24_3 .iti{
  width:100%;
  direction:ltr;
}

/* input تلفن: LTR + جلوگیری از padding-right غلط */
#field_24_3 input.iti__tel-input,
#field_24_3 input[type="tel"]{
  direction:ltr !important;
  text-align:left !important;
  padding-right:14px !important;
  padding-left:96px !important;
  box-sizing:border-box;
}

/* فلگ/کد کشور سمت چپ */
#field_24_3 .iti__flag-container{
  left:0 !important;
  right:auto !important;
}

/* منو از صفحه بیرون نزند */
#field_24_3 .iti__country-list{
  max-width:100vw;
  max-height:280px;
  overflow:auto;
}

@media (max-width:420px){
  #field_24_3 input.iti__tel-input,
  #field_24_3 input[type="tel"]{
    padding-left:84px !important;
  }
}

/* =========================================================
   ✅ FINAL MODAL (single source of truth - no duplicates)
========================================================= */

/* hide inline confirmation */
#gform_confirmation_wrapper_24{ display:none !important; }

.ps-gf-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
}
.ps-gf-modal.is-open{ display:block; }

/* backdrop */
.ps-gf-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

/* dialog */
.ps-gf-modal__dialog{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);

  width:min(720px, calc(100% - 28px));
  max-width:720px;
  max-height:calc(100vh - 40px);

  background:#fff;
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow:0 25px 90px rgba(0,0,0,.35);

  direction:rtl;
  color:#1f2a44;
  overflow:hidden;
}

/* close X */
.ps-gf-modal__x{
  position:absolute;
  top:10px;
  left:10px;
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  padding:6px 10px;
  border-radius:10px;
  color:#1f2a44;
}
.ps-gf-modal__x:focus{
  outline:2px solid #d6a75e;
  outline-offset:2px;
}

/* modal content */
.ps-gf-modal__content{ padding-top:6px; }

@media (max-width:768px){
  .ps-gf-modal__dialog{
    width:calc(100% - 18px);
    max-height:calc(100vh - 20px);
    padding:14px 14px 12px;
    border-radius:16px;
  }
}

/* =========================================================
   ✅ VIP++ CONFIRMATION (compact + CSS-only check animation)
========================================================= */

.ps-vip-confirm{
  direction:rtl;
  text-align:right;
  color:#1f2a44;
  max-width:640px;
  margin:0 auto;
}

/* prevent editor injected <br> from breaking layout */
.ps-vip-confirm br{ display:none !important; }

.ps-vip-head{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}

.ps-vip-title{
  font-weight:900;
  font-size:16px;
  line-height:1.25;
  margin:0 0 4px;
}

.ps-vip-sub{
  font-size:12.6px;
  line-height:1.45;
  color:#485a85;
  opacity:.95;
}

/* CSS-only animated golden check */
.ps-vip-check{
  width:52px;
  height:52px;
  flex:0 0 52px;
  position:relative;
}
.ps-vip-check-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px solid rgba(214,167,94,.45);
  box-shadow:0 12px 26px rgba(214,167,94,.18);
  transform:scale(.92);
  opacity:0;
  animation:psRingPop .55s ease forwards;
}
@keyframes psRingPop{ to{ transform:scale(1); opacity:1; } }

.ps-vip-check-tick{
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:12px;
  border-left:4px solid #d6a75e;
  border-bottom:4px solid #d6a75e;
  transform:translate(-50%,-55%) rotate(-45deg) scale(.6);
  opacity:0;
  filter:drop-shadow(0 10px 22px rgba(214,167,94,.22));
  animation:psTickDraw .6s .18s ease forwards;
}
@keyframes psTickDraw{
  to{ transform:translate(-50%,-55%) rotate(-45deg) scale(1); opacity:1; }
}

/* meta chips */
.ps-vip-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:10px 0 10px;
}

.ps-vip-chip{
  border:1px solid rgba(214,167,94,.35);
  background:rgba(214,167,94,.08);
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  min-width:0;
}

.ps-vip-chip-k{
  font-size:12.4px;
  color:#2b3550;
  white-space:nowrap;
}

.ps-vip-chip-v{
  font-size:12.6px;
  font-weight:900;
  color:#1f2a44;
  direction:ltr;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* points */
.ps-vip-points{
  display:grid;
  gap:6px;
  margin:6px 0 12px;
}
.ps-vip-point{
  font-size:13px;
  line-height:1.35;
  color:#1f2a44;
  opacity:.98;
}

/* actions */
.ps-vip-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  margin-top:8px;
}

.ps-vip-btn{
  border-radius:14px;
  padding:11px 12px;
  font-weight:900;
  font-size:13.5px;
  line-height:1.15;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
  user-select:none;
}
.ps-vip-btn:active{ transform:scale(.99); }

.ps-vip-btn.primary{
  background:#485a85;
  color:#fff;
}
.ps-vip-btn.primary:hover{ background:#1f2a44; }

.ps-vip-btn.wa{
  background:rgba(72,90,133,.08);
  color:#485a85;
  border-color:rgba(72,90,133,.18);
}
.ps-vip-btn.wa:hover{
  background:rgba(214,167,94,.16);
  border-color:rgba(214,167,94,.55);
}

.ps-vip-btn.ghost{
  background:transparent;
  color:#485a85;
  border-color:rgba(214,167,94,.85);
}
.ps-vip-btn.ghost:hover{
  background:#d6a75e;
  color:#fff;
}

/* mobile */
@media (max-width:520px){
  .ps-vip-check{ width:46px; height:46px; flex-basis:46px; }
  .ps-vip-title{ font-size:15px; }
  .ps-vip-sub{ font-size:12.3px; }

  .ps-vip-meta{
    grid-template-columns:1fr;
    gap:8px;
    margin:8px 0 10px;
  }

  .ps-vip-actions{ grid-template-columns:1fr 1fr; }
  .ps-vip-btn.ghost{ grid-column:1 / -1; }

  .ps-vip-point{ font-size:12.8px; }
}

/* =========================================================
   ✅ OTP Verify -> Modal UI (GF #24, Field #12)
   - only CSS here (JS باید داخل فایل JS باشد، نه CSS)
========================================================= */

/* فیلد OTP را در حالت عادی (داخل فرم) مخفی کن تا فقط داخل مودال دیده شود */
#gform_wrapper_24 #field_24_12{
  display:none !important;
}
/* OTP field hide for GF#27 */
#gform_wrapper_27 #field_27_12{
  display:none !important;
}

/* hide "send code" buttons in GF#27 too */
#gform_wrapper_27 .spf-send-code,
#gform_wrapper_27 .spf_send_code,
#gform_wrapper_27 .send-code,
#gform_wrapper_27 .sendCode,
#gform_wrapper_27 button[data-action*="send"],
#gform_wrapper_27 button[data-action*="otp"],
#gform_wrapper_27 button[class*="send"][class*="code"],
#gform_wrapper_27 button[class*="otp"],
#gform_wrapper_27 input[value*="Send Code"],
#gform_wrapper_27 button[aria-label*="Send"],
#gform_wrapper_27 button[aria-label*="send"]{
  display:none !important;
}
/* مخفی کردن دکمه‌های رایج "ارسال کد" در UI فرم (نه دکمه submit اصلی) */
#gform_wrapper_24 .spf-send-code,
#gform_wrapper_24 .spf_send_code,
#gform_wrapper_24 .send-code,
#gform_wrapper_24 .sendCode,
#gform_wrapper_24 button[data-action*="send"],
#gform_wrapper_24 button[data-action*="otp"],
#gform_wrapper_24 button[class*="send"][class*="code"],
#gform_wrapper_24 button[class*="otp"],
#gform_wrapper_24 input[value*="Send Code"],
#gform_wrapper_24 button[aria-label*="Send"],
#gform_wrapper_24 button[aria-label*="send"]{
  display:none !important;
}


/* =========================================================
   ✅ OTP Modal IDs (GF#24 + GF#27) — FIX
   چون JS الان مودال را با id های ps-otp-modal-24/27 می‌سازد
   باید دقیقاً همان CSS #ps-otp-modal روی آنها هم اعمال شود
========================================================= */

/* 1) خود مودال: حتماً پیش‌فرض مخفی باشد */
#ps-otp-modal-24,
#ps-otp-modal-27{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;            /* ✅ مهم‌ترین خط: جلوگیری از ریختن داخل صفحه */
  direction: rtl;
}
#ps-otp-modal-24.is-open,
#ps-otp-modal-27.is-open{ display:block; }

/* 2) بک‌دراپ */
#ps-otp-modal-24 .ps-otp-backdrop,
#ps-otp-modal-27 .ps-otp-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 3) دیالوگ */
#ps-otp-modal-24 .ps-otp-dialog,
#ps-otp-modal-27 .ps-otp-dialog{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: min(560px, calc(100% - 26px));
  background: linear-gradient(180deg, #ffffff 0%, #fffdf7 100%);
  border: 1px solid rgba(214,167,94,.35);
  border-radius: 18px;
  padding: 18px 18px 14px;
  box-shadow: 0 28px 120px rgba(0,0,0,.45);
  color:#1f2a44;
}

/* 4) دکمه بستن */
#ps-otp-modal-24 .ps-otp-x,
#ps-otp-modal-27 .ps-otp-x{
  position:absolute;
  top: 10px;
  left: 10px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(72,90,133,.12);
  background: rgba(72,90,133,.06);
  color:#1f2a44;
  cursor:pointer;
  font-size: 20px;
  line-height: 1;
}
#ps-otp-modal-24 .ps-otp-x:hover,
#ps-otp-modal-27 .ps-otp-x:hover{
  background: rgba(214,167,94,.14);
  border-color: rgba(214,167,94,.45);
}
#ps-otp-modal-24 .ps-otp-x:focus,
#ps-otp-modal-27 .ps-otp-x:focus{
  outline: 2px solid #d6a75e;
  outline-offset: 2px;
}

/* 5) عنوان و زیرعنوان */
#ps-otp-modal-24 .ps-otp-title,
#ps-otp-modal-27 .ps-otp-title{
  font-weight: 900;
  font-size: 16px;
  margin: 2px 0 6px;
  color:#1f2a44;
  padding-right: 14px;
  position: relative;
}
#ps-otp-modal-24 .ps-otp-title:before,
#ps-otp-modal-27 .ps-otp-title:before{
  content:"";
  position:absolute;
  right:0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background:#d6a75e;
}
#ps-otp-modal-24 .ps-otp-sub,
#ps-otp-modal-27 .ps-otp-sub{
  font-size: 13px;
  line-height: 1.6;
  color:#485a85;
  margin-bottom: 12px;
}

/* 6) بدنه OTP */
#ps-otp-modal-24 .ps-otp-body,
#ps-otp-modal-27 .ps-otp-body{
  border-radius: 16px;
  border: 1px solid rgba(72,90,133,.10);
  background: #fff;
  padding: 12px;
}

/* 7) استایل ورودی‌های OTP داخل مودال */
#ps-otp-modal-24 input[type="text"],
#ps-otp-modal-24 input[type="tel"],
#ps-otp-modal-24 input[type="number"],
#ps-otp-modal-24 input[type="password"],
#ps-otp-modal-27 input[type="text"],
#ps-otp-modal-27 input[type="tel"],
#ps-otp-modal-27 input[type="number"],
#ps-otp-modal-27 input[type="password"]{
  border-radius: 12px !important;
  border: 1px solid rgba(72,90,133,.22) !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-align: center !important;
  color:#1f2a44 !important;
  transition: all .18s ease;
}
#ps-otp-modal-24 input:focus,
#ps-otp-modal-27 input:focus{
  outline: none !important;
  border-color: #d6a75e !important;
  box-shadow: 0 0 0 3px rgba(214,167,94,.22) !important;
}

/* 8) موبایل */
@media (max-width: 520px){
  #ps-otp-modal-24 .ps-otp-dialog,
  #ps-otp-modal-27 .ps-otp-dialog{
    width: calc(100% - 18px);
    padding: 14px 14px 12px;
    border-radius: 16px;
  }
  #ps-otp-modal-24 .ps-otp-title,
  #ps-otp-modal-27 .ps-otp-title{ font-size: 15px; }
  #ps-otp-modal-24 .ps-otp-sub,
  #ps-otp-modal-27 .ps-otp-sub{ font-size: 12.5px; }
}

/* =========================
   Add-ons / Overrides (Code 2)
   - این بخش عمداً بعد از پایه‌ها آمده تا چیزی override نشود مگر لازم
========================= */

/* فرم 24 - دو ستونه واقعی برای فیلدهای مشخص‌شده */
.ps-visa-request-gf#gform_24 #gform_fields_24{
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 16px !important;
  align-items: start; /* از کد دوم */
}

/* نام + موبایل (هرکدام 6 ستون از 12) */
.ps-visa-request-gf#gform_24 #gform_fields_24 > .gfield.ps-row1{
  grid-column: span 6 !important;
  width: auto !important;
  clear: none !important;
}

/* تابعیت + کشور مقصد (هرکدام 6 ستون از 12) */
.ps-visa-request-gf#gform_24 #gform_fields_24 > .gfield.ps-row2{
  grid-column: span 6 !important;
  width: auto !important;
  clear: none !important;
}

/* این دو تا اگر می‌خواهید تک‌ستونه بمانند */
.ps-visa-request-gf#gform_24 #gform_fields_24 > .gfield#field_24_6,
.ps-visa-request-gf#gform_24 #gform_fields_24 > .gfield.ps-row3{
  grid-column: span 12 !important;
}

/* صورتحساب: تمام‌عرض مثل فیلد توضیحات */
.ps-visa-request-gf#gform_24 #gform_fields_24 > .ps-invoice{
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-self: stretch !important;
  align-self: start !important;
}

/* موبایل */
@media (max-width: 768px){
  .ps-visa-request-gf#gform_24 #gform_fields_24 > .gfield.ps-row1,
  .ps-visa-request-gf#gform_24 #gform_fields_24 > .gfield.ps-row2{
    grid-column: span 12 !important;
  }
}

/* ردیف دکمه‌ها کنار هم */
.ps-visa-request-gf .gform_footer {
  margin-top: 16px;
}

/* ظرف دکمه‌ها */
.ps-visa-request-gf .gf-footer-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* همسان‌سازی/اطمینان از اعمال حتی اگر کلاس بدون والد بیاید */
.gf-footer-actions{
  display:flex;
  gap:10px;
  justify-content:space-between;
}
.gf-footer-actions .gform_button{
  order: 1;   /* ثبت درخواست */
}
.gf-footer-actions .gf-cancel-btn{
  order: 2;   /* انصراف */
}

/* دکمه انصراف */
.ps-visa-request-gf .gf-cancel-btn {
  background: transparent;
  border: 1px solid #d6a75e;
  color: #485a85;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.25s ease;
}
.ps-visa-request-gf .gf-cancel-btn:hover {
  background: #d6a75e;
  color: #fff;
}

/* =========================
   Phone field (GF#24 Field#3) - merged
   - پایه‌های کد اول حفظ شده
   - منطق CSS-variable کد دوم اضافه شده (آخرش) تا دقیق‌تر padding-left را تنظیم کند
========================= */

/* موبایل: لیبل RTL بماند */
.ps-visa-request-gf #field_24_3 .gfield_label{
  direction: rtl !important;
  text-align: right !important;
}

/* کانتینر تلفن و ورودی LTR */
.ps-visa-request-gf #field_24_3 .ginput_container,
.ps-visa-request-gf #field_24_3 .iti,
.ps-visa-request-gf #field_24_3 input[type="tel"]{
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: plaintext !important;
}

/* کادر طوسی (پرچم/کد) سمت چپ */
.ps-visa-request-gf #field_24_3 .iti__flag-container{
  left: 0 !important;
  right: auto !important;
}

/* ✅ فاصله شروع شماره دقیقاً بعد از کادر طوسی (CSS vars) */
.ps-visa-request-gf #field_24_3 .iti{
  --ps-ccw: 92px;      /* عرض تقریبی کادر طوسی */
  --ps-gap: 10px;      /* فاصله منطقی بعد از آن */
}

/* این rule عمداً بعد از پایه‌ها آمده تا padding-left دقیق‌تر شود */
.ps-visa-request-gf #field_24_3 .iti input[type="tel"]{
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: plaintext !important;
  padding-left: calc(var(--ps-ccw) + var(--ps-gap)) !important;
  padding-right: 12px !important;
}
/* =========================================================
   ✅ Field 6 (services) - force correct single-column cards
   Fixes: vertical letters / collapsed cards
========================================================= */

/* فیلد ۶ همیشه تمام‌عرض بماند */
.ps-visa-request-gf#gform_24 #gform_fields_24 > #field_24_6{
  grid-column: 1 / -1 !important; /* در گرید ۱۲ ستونه */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* مهم‌ترین: چون ps-services-list inline display:grid دارد ولی ستون ندارد */
#field_24_6 .ps-services-list{
  grid-template-columns: 1fr !important;  /* ✅ یک ستون واقعی */
  justify-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* کارت‌ها کامل پهن شوند */
#field_24_6 .ps-services-list > label{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* =========================================================
   ✅ FINAL GRID (GF#24) — stable 12-col, equal widths
   - ps-row1 & ps-row2 = 6/12 (equal)
   - field_24_6 = full width
========================================================= */

/* کانتینر فیلدها: 12 ستون واقعی */
#gform_wrapper_24 form#gform_24 #gform_fields_24{
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}

/* ریست حداقلی برای اینکه width/float دخالت نکنه */
#gform_wrapper_24 form#gform_24 #gform_fields_24 > .gfield{
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* ✅ چهار فیلد دو ستونه: دقیقاً هم‌عرض */
#gform_wrapper_24 form#gform_24 #gform_fields_24 > .gfield.ps-row1,
#gform_wrapper_24 form#gform_24 #gform_fields_24 > .gfield.ps-row2{
  grid-column: span 6 !important;
}

/* ✅ فیلد ۶ همیشه تمام‌عرض */
#gform_wrapper_24 form#gform_24 #gform_fields_24 > #field_24_6{
  grid-column: 1 / -1 !important;
}

/* موبایل: تک ستون */
@media (max-width: 768px){
  #gform_wrapper_24 form#gform_24 #gform_fields_24 > .gfield.ps-row1,
  #gform_wrapper_24 form#gform_24 #gform_fields_24 > .gfield.ps-row2{
    grid-column: 1 / -1 !important;
  }
}

/* ==========================================
   GF#24 FIELD 6 — MOBILE CARD LAYOUT LOCK
   (fix: text area not taking width => vertical letters)
   ========================================== */
@media (max-width:768px){

  /* ظرف کلی */
  #field_24_6 .ps-services-ui{
    direction: rtl !important;
    text-align: right !important;
  }

  /* لیست: ستونی */
  #field_24_6 .ps-services-list{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
  }

  /* هر کارت: ردیفی و معکوس تا checkbox راست باشد */
  #field_24_6 .ps-services-list > label{
    display:flex !important;
    flex-direction:row-reverse !important;  /* ✅ checkbox راست */
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:10px !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /* checkbox ثابت */
  #field_24_6 .ps-services-list > label > input.ps-srv-cb{
    flex:0 0 22px !important;
    width:22px !important;
    margin-top:3px !important;
  }

  /* ✅ متن باید حتماً فضای باقی‌مانده را بگیرد */
  #field_24_6 .ps-services-list > label > div{
    flex:1 1 auto !important;
    width:calc(100% - 32px) !important; /* جلوگیری از collapse */
    min-width:0 !important;
    max-width:100% !important;
    text-align:right !important;
  }

  /* جلوگیری از شکستن حرف‌به‌حرف */
  #field_24_6 .ps-services-list > label > div > div{
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }
}

/* =========================================================
   ✅ EMBASSY APPOINTMENT (GF#27) — CLONE OF GF#24 STYLES
   - این بخش فقط سلکتورهای 24 را برای 27 هم فعال می‌کند
   - ویزا (24) دست نمی‌خورد
========================================================= */

/* -------------------------
   1) GRID 12 COL (GF#27)
------------------------- */
#gform_wrapper_27 form#gform_27 #gform_fields_27{
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}

#gform_wrapper_27 form#gform_27 #gform_fields_27 > .gfield{
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* همان کلاس‌های ps-row1 / ps-row2 در فرم 27 */
#gform_wrapper_27 form#gform_27 #gform_fields_27 > .gfield.ps-row1,
#gform_wrapper_27 form#gform_27 #gform_fields_27 > .gfield.ps-row2{
  grid-column: span 6 !important;
}

/* فیلد خدمات (در فرم شما 27_6) تمام عرض */
#gform_wrapper_27 form#gform_27 #gform_fields_27 > #field_27_6{
  grid-column: 1 / -1 !important;
}

@media (max-width: 768px){
  #gform_wrapper_27 form#gform_27 #gform_fields_27 > .gfield.ps-row1,
  #gform_wrapper_27 form#gform_27 #gform_fields_27 > .gfield.ps-row2{
    grid-column: 1 / -1 !important;
  }
}

/* -------------------------
   2) SERVICES UI (FIELD 27_6)
   - Fix collapsed cards / vertical letters
------------------------- */
.ps-visa-request-gf#gform_27 #gform_fields_27 > #field_27_6{
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#field_27_6 .ps-services-list{
  grid-template-columns: 1fr !important;
  justify-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
}

#field_27_6 .ps-services-list > label{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width:768px){

  #field_27_6 .ps-services-ui{
    direction: rtl !important;
    text-align: right !important;
  }

  #field_27_6 .ps-services-list{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
  }

  #field_27_6 .ps-services-list > label{
    display:flex !important;
    flex-direction:row-reverse !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:10px !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  #field_27_6 .ps-services-list > label > input.ps-srv-cb{
    flex:0 0 22px !important;
    width:22px !important;
    margin-top:3px !important;
  }

  #field_27_6 .ps-services-list > label > div{
    flex:1 1 auto !important;
    width:calc(100% - 32px) !important;
    min-width:0 !important;
    max-width:100% !important;
    text-align:right !important;
  }

  #field_27_6 .ps-services-list > label > div > div{
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }
}

/* -------------------------
   3) PHONE RTL/LTR FIX (FIELD 27_3)
------------------------- */
#field_27_3 label{ direction:rtl; }

#field_27_3 .iti{
  width:100%;
  direction:ltr;
}

#field_27_3 input.iti__tel-input,
#field_27_3 input[type="tel"]{
  direction:ltr !important;
  text-align:left !important;
  padding-right:14px !important;
  padding-left:96px !important;
  box-sizing:border-box;
}

#field_27_3 .iti__flag-container{
  left:0 !important;
  right:auto !important;
}

#field_27_3 .iti__country-list{
  max-width:100vw;
  max-height:280px;
  overflow:auto;
}

@media (max-width:420px){
  #field_27_3 input.iti__tel-input,
  #field_27_3 input[type="tel"]{
    padding-left:84px !important;
  }
}

/* نسخه دقیق‌تر padding-left با CSS vars (مثل 24) */
.ps-visa-request-gf #field_27_3 .gfield_label{
  direction: rtl !important;
  text-align: right !important;
}

.ps-visa-request-gf #field_27_3 .ginput_container,
.ps-visa-request-gf #field_27_3 .iti,
.ps-visa-request-gf #field_27_3 input[type="tel"]{
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: plaintext !important;
}

.ps-visa-request-gf #field_27_3 .iti__flag-container{
  left: 0 !important;
  right: auto !important;
}

.ps-visa-request-gf #field_27_3 .iti{
  --ps-ccw: 92px;
  --ps-gap: 10px;
}

.ps-visa-request-gf #field_27_3 .iti input[type="tel"]{
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: plaintext !important;
  padding-left: calc(var(--ps-ccw) + var(--ps-gap)) !important;
  padding-right: 12px !important;
}

/* -------------------------
   4) MODAL hide inline confirmation (GF#27)
------------------------- */
#gform_confirmation_wrapper_27{ display:none !important; }

/* -------------------------
   5) OTP field hide in-form (GF#27 Field#12)
------------------------- */
#gform_wrapper_27 #field_27_12{
  display:none !important;
}

/* مخفی کردن دکمه‌های send code برای GF#27 هم */
#gform_wrapper_27 .spf-send-code,
#gform_wrapper_27 .spf_send_code,
#gform_wrapper_27 .send-code,
#gform_wrapper_27 .sendCode,
#gform_wrapper_27 button[data-action*="send"],
#gform_wrapper_27 button[data-action*="otp"],
#gform_wrapper_27 button[class*="send"][class*="code"],
#gform_wrapper_27 button[class*="otp"],
#gform_wrapper_27 input[value*="Send Code"],
#gform_wrapper_27 button[aria-label*="Send"],
#gform_wrapper_27 button[aria-label*="send"]{
  display:none !important;
}
/* =========================================================
   ✅ INVOICE (GF#27) — match GF#24 (desktop + mobile)
   - صورتحساب در فرم ۲۷ دقیقاً مثل فرم ۲۴
========================================================= */

/* تمام‌عرض مثل فرم ۲۴ */
.ps-visa-request-gf#gform_27 #gform_fields_27 > .ps-invoice{
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-self: stretch !important;
  align-self: start !important;
  min-width: 0 !important;
}

/* اگر داخل صورتحساب، المانی عرض ثابت دارد، در موبایل مجبورش کن 100% شود */
@media (max-width:768px){
  #gform_wrapper_27 .ps-invoice,
  #gform_wrapper_27 .ps-invoice *{
    max-width: 100% !important;
  }
}
/* =========================================================
   ✅ OTP Modal for GF#29 — International Driving License
========================================================= */

#gform_confirmation_wrapper_29{
  display:none !important;
}

#gform_wrapper_29 #field_29_12{
  display:none !important;
}

#gform_wrapper_29 .spf-send-code,
#gform_wrapper_29 .spf_send_code,
#gform_wrapper_29 .send-code,
#gform_wrapper_29 .sendCode,
#gform_wrapper_29 button[data-action*="send"],
#gform_wrapper_29 button[data-action*="otp"],
#gform_wrapper_29 button[class*="send"][class*="code"],
#gform_wrapper_29 button[class*="otp"],
#gform_wrapper_29 input[value*="Send Code"],
#gform_wrapper_29 button[aria-label*="Send"],
#gform_wrapper_29 button[aria-label*="send"]{
  display:none !important;
}

#ps-otp-modal-29{
  position:fixed;
  inset:0;
  z-index:100000;
  display:none;
  direction:rtl;
}

#ps-otp-modal-29.is-open{
  display:block;
}

#ps-otp-modal-29 .ps-otp-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

#ps-otp-modal-29 .ps-otp-dialog{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(560px, calc(100% - 26px));
  background:linear-gradient(180deg, #ffffff 0%, #fffdf7 100%);
  border:1px solid rgba(214,167,94,.35);
  border-radius:18px;
  padding:18px 18px 14px;
  box-shadow:0 28px 120px rgba(0,0,0,.45);
  color:#1f2a44;
}

#ps-otp-modal-29 .ps-otp-x{
  position:absolute;
  top:10px;
  left:10px;
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(72,90,133,.12);
  background:rgba(72,90,133,.06);
  color:#1f2a44;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}

#ps-otp-modal-29 .ps-otp-x:hover{
  background:rgba(214,167,94,.14);
  border-color:rgba(214,167,94,.45);
}

#ps-otp-modal-29 .ps-otp-title{
  font-weight:900;
  font-size:16px;
  margin:2px 0 6px;
  color:#1f2a44;
  padding-right:14px;
  position:relative;
}

#ps-otp-modal-29 .ps-otp-title:before{
  content:"";
  position:absolute;
  right:0;
  top:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#d6a75e;
}

#ps-otp-modal-29 .ps-otp-sub{
  font-size:13px;
  line-height:1.6;
  color:#485a85;
  margin-bottom:12px;
}

#ps-otp-modal-29 .ps-otp-body{
  border-radius:16px;
  border:1px solid rgba(72,90,133,.10);
  background:#fff;
  padding:12px;
}

#ps-otp-modal-29 input[type="text"],
#ps-otp-modal-29 input[type="tel"],
#ps-otp-modal-29 input[type="number"],
#ps-otp-modal-29 input[type="password"]{
  border-radius:12px !important;
  border:1px solid rgba(72,90,133,.22) !important;
  box-shadow:none !important;
  padding:10px 12px !important;
  font-size:16px !important;
  font-weight:900 !important;
  text-align:center !important;
  color:#1f2a44 !important;
  transition:all .18s ease;
}

#ps-otp-modal-29 input:focus{
  outline:none !important;
  border-color:#d6a75e !important;
  box-shadow:0 0 0 3px rgba(214,167,94,.22) !important;
}

@media (max-width:520px){
  #ps-otp-modal-29 .ps-otp-dialog{
    width:calc(100% - 18px);
    padding:14px 14px 12px;
    border-radius:16px;
  }

  #ps-otp-modal-29 .ps-otp-title{
    font-size:15px;
  }

  #ps-otp-modal-29 .ps-otp-sub{
    font-size:12.5px;
  }
}