/* =====================================================
   XASFORM ADVANCED LAYOUTS & STYLES
   - Split Hero Cover (.xsf-layout-split)
   - Top Stepper (.xsf-layout-stepper)
   - Minimal Unboxed (.xsf-layout-minimal)
   - Frosted Glass (.xsf-layout-glass)
   - Style Variants: .style-sharp, .style-rounded, .style-modern, .style-glass, .style-minimal
   ===================================================== */

/* -----------------------------------------------------
   1. STYLE VARIANTS (Modifiers for Cards & Controls)
   ----------------------------------------------------- */
.style-sharp .xsf-card,
.style-sharp .xsf-wiz-side,
.style-sharp .xsf-wiz-body,
.style-sharp .xsf-split-cover,
.style-sharp .xsf-input,
.style-sharp .xsf-control,
.style-sharp .xsf-btn,
.style-sharp .xsf-option,
.style-sharp .xsf-file,
.style-sharp .xsf-number,
.style-sharp .xsf-cselect-trigger,
.style-sharp .xsf-cselect-dropdown,
.style-sharp .xsf-cdate-trigger,
.style-sharp .xsf-ctime-inline,
.style-sharp .xsf-payment,
.style-sharp .xsf-payment-box,
.style-sharp .xsf-payment-btn,
.style-sharp .xsf-payment-icon-bubble,
.style-sharp .xsf-pay-chip {
  border-radius: 6px !important;
}

.style-rounded .xsf-card,
.style-rounded .xsf-split-cover,
.style-rounded .xsf-wiz-body,
.style-rounded .xsf-payment {
  border-radius: 24px !important;
}
.style-rounded .xsf-payment-box {
  border-radius: 18px !important;
}
.style-rounded .xsf-btn,
.style-rounded .xsf-payment-btn {
  border-radius: 9999px !important;
}
.style-rounded .xsf-input,
.style-rounded .xsf-control,
.style-rounded .xsf-option,
.style-rounded .xsf-file,
.style-rounded .xsf-number,
.style-rounded .xsf-cselect-trigger,
.style-rounded .xsf-cselect-dropdown,
.style-rounded .xsf-cdate-trigger,
.style-rounded .xsf-ctime-inline {
  border-radius: 14px !important;
}

.style-glass .xsf-card,
.style-glass .xsf-wiz-side,
.style-glass .xsf-split-cover {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}
.xsf-wrap.dark.style-glass .xsf-card,
.xsf-wrap.dark.style-glass .xsf-wiz-side,
.xsf-wrap.dark.style-glass .xsf-split-cover,
.style-glass.xsf-wrap.dark .xsf-card,
.style-glass.xsf-wrap.dark .xsf-wiz-side,
.style-glass.xsf-wrap.dark .xsf-split-cover {
  background: rgba(15, 23, 42, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 25px rgba(56, 189, 248, 0.1) !important;
}

.style-minimal .xsf-card {
  box-shadow: none !important;
  border: 1px solid #e5e7eb !important;
}
.xsf-wrap.dark.style-minimal .xsf-card,
.style-minimal.xsf-wrap.dark .xsf-card {
  border-color: #27272a !important;
}

/* -----------------------------------------------------
   2. SPLIT HERO COVER LAYOUT (.xsf-layout-split)
   ----------------------------------------------------- */
.xsf-wrap.xsf-layout-split {
  max-width: 1100px !important;
  width: 95% !important;
  padding: 40px 20px;
}

.xsf-split-wrap {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 32px;
  width: 100%;
  margin: 0 auto;
  align-items: stretch;
}

.xsf-split-cover {
  position: relative;
  background: linear-gradient(145deg, var(--xsf-primary, #0f172a) 0%, color-mix(in srgb, var(--xsf-primary, #0f172a) 40%, #000) 100%);
  color: #ffffff;
  border-radius: 20px;
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  min-height: 480px;
}

.xsf-split-glow {
  position: absolute;
  top: -20%;
  right: -20%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

.xsf-split-cover-body {
  position: relative;
  z-index: 2;
}

.xsf-split-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: #ffffff;
}

.xsf-split-desc {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.xsf-split-form-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.xsf-split-form-wrap .xsf-card {
  margin: 0;
  padding: 36px;
  height: 100%;
  box-sizing: border-box;
}

/* -----------------------------------------------------
   3. TOP STEPPER PRO LAYOUT (.xsf-layout-stepper)
   ----------------------------------------------------- */
.xsf-stepper-wrap {
  max-width: 660px;
  margin: 0 auto;
}

.xsf-stepper-head {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.xsf-wrap.dark .xsf-stepper-head {
  background: #161b22;
  border-color: #30363d;
}

.xsf-stepper-bar-bg {
  height: 5px;
  background: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.xsf-wrap.dark .xsf-stepper-bar-bg {
  background: #27272a;
}
.xsf-stepper-bar-fill {
  height: 100%;
  background: var(--xsf-primary, #0066ff);
  border-radius: 9999px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.xsf-stepper-pills {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.xsf-step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.xsf-wrap.dark .xsf-step-pill {
  color: #9ca3af;
}
.xsf-step-pill.active {
  color: var(--xsf-primary, #0066ff);
}
.xsf-wrap.dark .xsf-step-pill.active {
  color: #60a5fa;
}

.xsf-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: #f3f4f6;
  color: #4b5563;
  transition: all 0.2s ease;
}
.xsf-wrap.dark .xsf-step-num {
  background: #27272a;
  color: #9ca3af;
}
.xsf-step-pill.active .xsf-step-num {
  background: var(--xsf-primary, #0066ff);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.35);
}
.xsf-step-pill.done .xsf-step-num {
  background: #10b981;
  color: #ffffff;
}

.xsf-step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
}
.xsf-wrap.dark .xsf-step-nav {
  border-color: #30363d;
}

/* -----------------------------------------------------
   4. MINIMAL UNBOXED LAYOUT (.xsf-layout-minimal)
   ----------------------------------------------------- */
.xsf-layout-minimal .xsf-wrap {
  max-width: 580px;
}

.xsf-layout-minimal .xsf-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.xsf-layout-minimal .xsf-input,
.xsf-layout-minimal .xsf-control,
.xsf-layout-minimal .xsf-cselect-trigger,
.xsf-layout-minimal .xsf-cdate-trigger,
.xsf-layout-minimal .xsf-ctime-inline {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}
.xsf-wrap.dark .xsf-layout-minimal .xsf-input,
.xsf-wrap.dark .xsf-layout-minimal .xsf-control,
.xsf-wrap.dark .xsf-layout-minimal .xsf-cselect-trigger,
.xsf-wrap.dark .xsf-layout-minimal .xsf-cdate-trigger,
.xsf-wrap.dark .xsf-layout-minimal .xsf-ctime-inline {
  background: #18181b;
  border-color: #27272a;
}
.xsf-layout-minimal .xsf-input:focus,
.xsf-layout-minimal .xsf-control:focus {
  background: #ffffff;
  border-color: var(--xsf-primary, #111827);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}
.xsf-wrap.dark .xsf-layout-minimal .xsf-input:focus,
.xsf-wrap.dark .xsf-layout-minimal .xsf-control:focus {
  background: #111827;
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.xsf-layout-minimal .xsf-intro {
  margin-bottom: 32px;
  border-bottom: 2px solid #f1f5f9;
  padding-bottom: 20px;
}
.xsf-wrap.dark .xsf-layout-minimal .xsf-intro {
  border-color: #27272a;
}

/* -----------------------------------------------------
   5. FROSTED GLASS LAYOUT (.xsf-layout-glass)
   ----------------------------------------------------- */
.xsf-layout-glass .xsf-wrap {
  position: relative;
}
.xsf-glass-ambient {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--xsf-primary, #0066ff) 25%, transparent) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
.xsf-layout-glass .xsf-card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08) !important;
}
.xsf-wrap.dark .xsf-layout-glass .xsf-card {
  background: rgba(15, 23, 42, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important;
}

/* -----------------------------------------------------
   6. RESPONSIVE ADAPTATIONS
/* -----------------------------------------------------
   6. RESPONSIVE ADAPTATIONS
   ----------------------------------------------------- */
@media (max-width: 860px) {
  .xsf-wrap.xsf-layout-split {
    width: 100% !important;
    padding: 20px 14px !important;
  }
  .xsf-split-wrap {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .xsf-split-cover {
    min-height: auto;
    padding: 28px 22px;
    border-radius: 16px;
  }
  .xsf-split-title {
    font-size: 22px;
  }
  .xsf-step-pill span.xsf-step-text {
    display: none;
  }
}

/* Mobile preview inside Theme Editor device-frame */
.mobile-preview .xsf-split-wrap {
  grid-template-columns: 1fr;
  gap: 14px;
}
.mobile-preview .xsf-split-cover {
  min-height: auto;
  padding: 22px 18px;
  border-radius: 14px;
}
.mobile-preview .xsf-split-title {
  font-size: 20px;
}
.mobile-preview .xsf-step-pill span.xsf-step-text {
  display: none;
}

/* -----------------------------------------------------
   7. DYNAMIC THEME COLOR ENFORCEMENT
   Ensure custom primary/secondary colors override kit hardcoded defaults
   ----------------------------------------------------- */
.xsf-wrap .xsf-btn-primary,
.xsf-wrap.kit-clean .xsf-btn-primary,
.xsf-wrap.kit-clean .xsf-w-footer .xsf-btn-primary,
.xsf-wrap.kit-minimal .xsf-btn-primary,
.xsf-wrap.kit-ocean .xsf-btn-primary,
.xsf-wrap.kit-forest .xsf-btn-primary,
.xsf-wrap.kit-sunset .xsf-btn-primary,
.xsf-wrap.kit-midnight .xsf-btn-primary {
  background: var(--xsf-primary) !important;
  border-color: var(--xsf-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--xsf-primary) 35%, transparent) !important;
}

.xsf-wrap .xsf-btn-primary:hover,
.xsf-wrap.kit-clean .xsf-btn-primary:hover,
.xsf-wrap.kit-clean .xsf-w-footer .xsf-btn-primary:hover {
  background: color-mix(in srgb, var(--xsf-primary) 85%, #000) !important;
  border-color: color-mix(in srgb, var(--xsf-primary) 85%, #000) !important;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--xsf-primary) 45%, transparent) !important;
}

/* Stepper & Active Elements */
.xsf-wrap .xsf-stepper-bar-fill {
  background: var(--xsf-primary) !important;
}
.xsf-wrap .xsf-step-pill.active {
  border-color: var(--xsf-primary) !important;
  color: var(--xsf-primary) !important;
  background: color-mix(in srgb, var(--xsf-primary) 8%, transparent) !important;
}
.xsf-wrap .xsf-step-pill.active .xsf-step-num {
  background: var(--xsf-primary) !important;
  color: #fff !important;
}
.xsf-wrap .xsf-step-pill.done .xsf-step-num {
  background: var(--xsf-primary) !important;
  color: #fff !important;
}

/* Wizard Active Step */
.xsf-wrap .xsf-w-step.active,
.xsf-wrap.kit-clean .xsf-w-step.active {
  background: var(--xsf-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--xsf-primary) 30%, transparent) !important;
}

/* Options / Checkbox / Radio Active Highlight */
.xsf-wrap .xsf-option:has(input:checked),
.xsf-wrap.kit-clean .xsf-option:has(input:checked) {
  border-color: var(--xsf-primary) !important;
  background: color-mix(in srgb, var(--xsf-primary) 6%, transparent) !important;
  box-shadow: inset 0 0 0 1px var(--xsf-primary) !important;
}
.xsf-wrap .xsf-option input[type="radio"]:checked,
.xsf-wrap .xsf-option input[type="checkbox"]:checked {
  background: var(--xsf-primary) !important;
  border-color: var(--xsf-primary) !important;
}

/* Input Focus Glow */
.xsf-wrap .xsf-input:focus,
.xsf-wrap .xsf-control:focus,
.xsf-wrap.kit-clean .xsf-input:focus,
.xsf-wrap.kit-clean .xsf-control:focus,
.xsf-wrap .xsf-number:focus-within {
  border-color: var(--xsf-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--xsf-primary) 15%, transparent) !important;
}

/* Custom Select & Dropdown Color Enforcement */
.xsf-wrap .xsf-cselect-trigger.open,
.xsf-wrap.kit-clean .xsf-cselect-trigger.open,
.xsf-wrap.kit-clean.xsf-wrap.dark .xsf-cselect-trigger.open,
.xsf-wrap .xsf-wrap.dark .xsf-cselect-trigger.open {
  border-color: var(--xsf-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--xsf-primary) 18%, transparent) !important;
}

.xsf-wrap .xsf-cselect-option.xsf-cselect-selected,
.xsf-wrap.kit-clean .xsf-cselect-option.xsf-cselect-selected,
.xsf-wrap.kit-clean.xsf-wrap.dark .xsf-cselect-option.xsf-cselect-selected,
.xsf-wrap .xsf-wrap.dark .xsf-cselect-option.xsf-cselect-selected {
  background: var(--xsf-primary) !important;
  color: #ffffff !important;
}

.xsf-wrap .xsf-cselect-option:hover:not(.xsf-cselect-selected) {
  background: color-mix(in srgb, var(--xsf-primary) 10%, transparent) !important;
  color: var(--xsf-primary) !important;
}

/* Custom Date Picker Color Enforcement */
.xsf-wrap .xsf-cdate-trigger.open,
.xsf-wrap.kit-clean .xsf-cdate-trigger.open,
.xsf-wrap.kit-clean.xsf-wrap.dark .xsf-cdate-trigger.open,
.xsf-wrap .xsf-wrap.dark .xsf-cdate-trigger.open {
  border-color: var(--xsf-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--xsf-primary) 18%, transparent) !important;
}

.xsf-wrap .xsf-cdate-day.selected,
.xsf-wrap.kit-clean .xsf-cdate-day.selected,
.xsf-wrap.kit-clean.xsf-wrap.dark .xsf-cdate-day.selected,
.xsf-wrap .xsf-wrap.dark .xsf-cdate-day.selected {
  background: var(--xsf-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--xsf-primary) 35%, transparent) !important;
}

.xsf-wrap .xsf-cdate-day.today {
  color: var(--xsf-primary) !important;
  font-weight: 700;
}

.xsf-wrap .xsf-cdate-foot button {
  color: var(--xsf-primary) !important;
}

/* Custom Time Picker Color Enforcement */
.xsf-wrap .xsf-ctime-inline:focus-within,
.xsf-wrap.kit-clean .xsf-ctime-inline:focus-within,
.xsf-wrap.kit-clean.xsf-wrap.dark .xsf-ctime-inline:focus-within {
  border-color: var(--xsf-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--xsf-primary) 18%, transparent) !important;
}

.xsf-wrap .xsf-ctime-inp:focus,
.xsf-wrap.kit-clean .xsf-ctime-inp:focus {
  border-color: var(--xsf-primary) !important;
}

.xsf-wrap .xsf-ctime-apbtn.active,
.xsf-wrap.kit-clean .xsf-ctime-apbtn.active,
.xsf-wrap.kit-clean.xsf-wrap.dark .xsf-ctime-apbtn.active {
  background: var(--xsf-primary) !important;
  color: #ffffff !important;
}

/* File Upload & Success State */
.xsf-wrap .xsf-file:hover,
.xsf-wrap.kit-clean .xsf-file:hover {
  border-color: var(--xsf-primary) !important;
  background: color-mix(in srgb, var(--xsf-primary) 4%, transparent) !important;
  color: var(--xsf-primary) !important;
}

.xsf-wrap .xsf-file.xsf-file-has {
  border-color: var(--xsf-primary) !important;
  background: color-mix(in srgb, var(--xsf-primary) 8%, transparent) !important;
  color: var(--xsf-primary) !important;
}

.xsf-wrap .xsf-payment-icon-bubble {
  background: color-mix(in srgb, var(--xsf-primary) 12%, transparent) !important;
  color: var(--xsf-primary) !important;
}

.xsf-wrap .xsf-payment-badge {
  background: color-mix(in srgb, var(--xsf-primary) 10%, transparent) !important;
  color: var(--xsf-primary) !important;
  border-color: color-mix(in srgb, var(--xsf-primary) 22%, transparent) !important;
}

.xsf-wrap .xsf-payment-btn {
  background: var(--xsf-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--xsf-primary) 35%, transparent) !important;
}
.xsf-wrap .xsf-payment-btn:hover {
  background: color-mix(in srgb, var(--xsf-primary) 85%, #000) !important;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--xsf-primary) 45%, transparent) !important;
}

.xsf-wrap .xsf-success-mark {
  background: var(--xsf-primary) !important;
}