/* سکشنی که فرم + عکس داخلشه */
.gbz-skel-host{
  position: relative;
  
}

/* خود اسکلتون که باید روی کل سکشن بنشینه */
.gbz-skel-host #gbz-pre-skeleton{
  position: absolute;
  inset: 0;                 /* top/right/bottom/left = 0 */
  z-index: 5;
  display: none;            /* در حالت boot با !important → flex می‌شود */
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 16px;
}

/* نکته‌ی طلایی: این دوتا wrapper المنتور، باعث می‌شدن اسکلتون فقط به اندازه ویجت باشه.
   اینجا فقط در حالت boot، positionشون static می‌کنیم تا اسکلتون به خود .gbz-skel-host بچسبه */
html.gbz-boot .gbz-skel-host .elementor-widget-shortcode,
html.gbz-boot .gbz-skel-host .elementor-shortcode{
  position: static !important;
}

/* بقیه استایل‌های داخلی اسکلتون هم مثل قبل: */
#gbz-pre-skeleton .gbz-skeleton-wrap{
  width:100%;
  max-width:1000px;
  margin-inline:auto;
  display:grid;
  gap:20px;
  grid-template-columns:1fr 0.9fr;
  direction:rtl;
  background: #fff;
}
@media (max-width: 820px){
  #gbz-pre-skeleton .gbz-skeleton-wrap{ grid-template-columns:1fr; }
}

.gbz-skel-title{
  height:18px;
  width:140px;
  background:#eee;
  border-radius:8px;
  margin:8px 0;
  position:relative;
  overflow:hidden;
}
.gbz-skel-line{
  height:42px;
  border-radius:10px;
  background:#eee;
  position:relative;
  overflow:hidden;
  margin:8px 0;
}
.gbz-skel-line.out-form{ height:50px;margin:10px 0px; }

.gbz-skel-photo{
  width:100%;
  aspect-ratio: 4 / 3;
  background:#eee;
  border-radius:12px;
  position:relative;
  overflow:hidden;
}
.gbz-skel-header{
  display: flex;
  align-items: center;
  gap: 12px;
}
.gbz-skel-icon{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eee;
  position: relative;
  overflow: hidden;
}
.gbz-skel-button{
  width: 150px;
  height: 38px;
  border-radius: 999px;
  background: #e5e7eb;
  align-self: flex-end;
  position: relative;
  overflow: hidden;
  margin-top:10px;
  display: flex;
  place-self: flex-end;
}
.gbz-button-step{
    display:flex;
}
.gbz-skel-button-step{
  width: 80px;
  height: 38px;
  border-radius: 999px;
  background: #e5e7eb;
  align-self: flex-end;
  position: relative;
  overflow: hidden;
  margin:10px 5px;
}

@keyframes gbz-shimmer { 0% { transform:translateX(-100%);} 100% { transform:translateX(100%);} }
.gbz-skel-title::after,
.gbz-skel-line::after,
.gbz-skel-photo::after,
.gbz-skel-button::after{
  content:"";
  position:absolute;
  inset:0;
  width:50%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%);
  animation:gbz-shimmer 1.2s infinite;
}


/* Base & reset */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { max-width:100%; overflow-x:hidden; }

:root{
  --gbz-bg:#fff;
  --gbz-border:#d1d5db;
  --gbz-primary:#2563eb;
  --gbz-muted:#6b7280;
  --gbz-success:#10b981;
  --gbz-danger:#b91c1c;
  --gbz-gray-100:#f3f4f6;
  --gbz-gray-200:#e5e7eb;
  --gbz-text:#111827;
}

/* Progress */
.gbz-progress{margin:16px 0 24px;display:flex;flex-direction:column;gap:12px;direction:rtl}
.gbz-progress__bar{position:relative;height:6px;background:var(--gbz-gray-200);border-radius:999px;overflow:hidden}
.gbz-progress__fill{position:absolute;inset-inline-start:0;top:0;bottom:0;width:0%;background:var(--gbz-primary);transition:width .3s ease}
.gbz-progress__steps{display:flex;gap:16px;flex-wrap:wrap}
.gbz-step{font-size:13px;color:#6b7280;padding:6px 10px;border-radius:10px;background:var(--gbz-gray-100)}
.gbz-step.is-active{background:var(--gbz-primary);color:#fff}
.gbz-step.is-done{background:var(--gbz-success);color:#fff}
.gbz-step:hover{color:#CFD0D4}

/* Inputs (display) */
.gbz-car-input,
.gbz-year-display{
  width:100%;
  padding:12px 12px 10px;
  border:1px solid var(--gbz-border);
  border-radius:10px;
  background:var(--gbz-bg);
  cursor:pointer;
}
.gbz-car-input:focus,
.gbz-year-display:focus{
  outline:none;border-color:var(--gbz-primary);
  box-shadow:0 0 0 3px rgba(37,99,235,.10);
}

/* Floating label */
.gbz-float{ position:relative; }
.gbz-float .gbz-input{
  width:100%;
  padding:12px 12px 10px;
  border:1px solid var(--gbz-border);
  border-radius:10px;
  background:var(--gbz-bg);
}
.gbz-float .gbz-input:focus{ outline:none;border-color:var(--gbz-primary);box-shadow:0 0 0 3px rgba(37,99,235,.10); }
.gbz-float .gbz-label {
  position: absolute;
  inset-inline-start: 12px;
  top: 15px;
  padding: 0 6px;
  color: var(--gbz-muted);
  font-size: 16px;
  background: transparent;
  pointer-events: none;
  transition: transform .18s ease, color .18s ease, top .18s ease, background .18s ease, box-shadow .18s ease;
  font-weight: 400;
}
.gbz-float.gbz-focused .gbz-label,
.gbz-float.gbz-filled  .gbz-label{
  font-size: 12px;
  top:-8px; transform:translateY(0) scale(.90); color:var(--gbz-primary);
  background:var(--gbz-bg); border-radius:8px; box-shadow:0 0 0 6px var(--gbz-bg);
}

/* Floating for JetFormBuilder */
.jet-form-builder-row.gbz-float-row{ display:block !important; grid-template-columns:1fr !important; }
.jet-form-builder-row.gbz-float-row > .jet-form-builder__label{ display:none !important; }
.jet-form-builder-row.gbz-float-row .jet-form-builder__field-wrap{ position:relative; }
.jet-form-builder-row.gbz-float-row .jet-form-builder__field{ padding-top:20px; }
.jet-form-builder-row.gbz-float-row .gbz-label{
  position:absolute; inset-inline-start:12px; top:15px; padding:0 6px;
  color:var(--gbz-muted); font-size:16px; background:var(--gbz-bg); pointer-events:none;
  transition:transform .18s ease, color .18s ease, top .18s ease, background .18s ease, box-shadow .18s ease;
}
.jet-form-builder-row.gbz-float-row .jet-form-builder__field-wrap.gbz-focused .gbz-label,
.jet-form-builder-row.gbz-float-row .jet-form-builder__field-wrap.gbz-filled  .gbz-label{
  font-size: 12px;
  top:-8px; transform:translateY(0) scale(.90); color:var(--gbz-primary);
  background:var(--gbz-bg); border-radius:8px; box-shadow:0 0 0 6px var(--gbz-bg);
}

/* Modal */
.gbz-modal{ position:fixed; inset:0; display:none; z-index:1000005; }
.gbz-modal.is-open{ display:flex; align-items: flex-start; justify-content:center; padding:140px; }
.gbz-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35);backdrop-filter: blur(3px); }
.gbz-modal__panel{
  position:relative; width:100%; max-width:720px; background:#fff;
  border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.25); overflow:hidden;
}
.gbz-modal__head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #eee}
.gbz-modal__title{font-weight:700}
.gbz-modal__close{all:unset;cursor:pointer;font-size:22px;line-height:1;padding:4px 8px;border-radius:8px}
.gbz-modal__close:hover{background:var(--gbz-gray-100)}
.gbz-modal__body{padding:16px;display:flex;flex-direction:column;gap:16px}
.gbz-modal__actions{margin-top:12px;display:flex;gap:10px;justify-content:space-between}
.gbz-back{display:inline-flex;align-items:center;gap:2px;padding:8px 12px;border-radius:10px;border:0;cursor:pointer;background:var(--gbz-gray-100);color:var(--gbz-text)}
button.gbz-back {display: flex;}
.gbz-back svg{ width:20px; height:20px; rotate: 180deg;}

/* Tabs (year modal header) */
.gbz-tabs{ display:flex; gap:8px; border-bottom:1px solid #eee; padding:0 6px; }
.gbz-tab{ appearance:none; border:0; background:transparent; cursor:pointer; padding:10px 12px; border-radius:10px 10px 0 0; font-weight:600; color:#6b7280; }
.gbz-tab.is-active{ background:var(--gbz-gray-100); color:#111827; }
.gbz-brand-opt{display:inline-flex;align-items:center;gap:8px}
.gbz-brand-opt img{width:39px;height:39px;object-fit:contain;}
.select2-selection__rendered .gbz-brand-opt img{width:18px;height:18px}
/* Year two panes side-by-side (both visible) */
.gbz-year-sides{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:8px 6px; }
@media (max-width:680px){ .gbz-year-sides{ grid-template-columns:1fr; } }
.gbz-year-pane label{ display:block; margin:0 0 6px; font-weight:600; color:#111827; }
.gbz-year-pane select{ width:100%; }

/* Select2 */
.select2-container{ width:100% !important; max-width:100%; }
.select2-container .select2-selection--single{height:42px}
.select2-selection__rendered{line-height:42px!important}
.select2-selection__arrow{height:42px!important}

/* Numeric helpers */
.gbz-num{ direction:ltr; text-align:left; }
.gbz-price-words,.gbz-mileage-words{ margin-top:6px;font-size:13px;line-height:1.6;color:#374151;direction:rtl; }
.gbz-price-words small,.gbz-mileage-words small{ color:#6b7280; }

/* OTP & Toast */
.gbz-otp-resend{ display:inline-block; margin-top:8px; padding:8px 12px; border-radius:10px; background:var(--gbz-gray-200); color:#374151; border:0 }
.gbz-otp-resend[disabled]{opacity:.75}
.gbz-toast{
  position:fixed; inset-inline-start:50%; top: 104px; right: 0px;
  font-size:12px; transform:translateX(110%) translateY(5px);
  background:#111827; color:#fff; padding:10px 14px; border-radius:10px; opacity:0; transition:all .25s ease; z-index:1000006
}
.gbz-toast.show{opacity:1;transform:translateX(-10%) translateY(5px)}

/* JFB page small grid */
.jet-form-builder-page{ display:grid; gap:10px; }

/* نرم پنهان‌کردن Next در استپ ۲ */
.gbz-hide-soft{position:absolute!important;opacity:0!important;pointer-events:none!important;width:0!important;height:0!important;margin:0!important;padding:0!important;}
input.select2-search__field {
    border: 1px solid #dedede!important;
    border-radius: 15px;
    padding: 8px 15px;
}
input.select2-search__field:focus{
    outline: none;
    box-shadow: 0px 0px 5px #6b6b6b29;
    border-radius: 15px;
    padding: 8px 15px;
}

.select2-results {
    padding: 15px 0px!important;
}
li.select2-results__option {
    height: 40px;
    border-radius: 15px;
    line-height: 30px;
    padding: 5px 15px;
}
.select2-container--open .select2-dropdown--below{border-top-left-radius: unset!important;border-top-right-radius: unset!important;border-top: none !important;}
.select2-dropdown{border: 1px solid #f2efef!important;}

/*mobile-----------*/

@media(max-width:768px){
    .gbz-modal.is-open{ padding: 100px 10px; }
}