/* Container for demo button */
    .page-container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: #333;
      background-color: #f5f7fa;
    }
    
    /* Demo trigger button */
    .trigger-btn {
      background: #0073e6;
      color: #ffffff;
      border: none;
      border-radius: 6px;
      padding: 14px 24px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 115, 230, 0.2);
      transition: all 0.2s;
    }
    
    .trigger-btn:hover {
      background: #0060c0;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 115, 230, 0.25);
    }
    
    /* Modal overlay */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      display: none; /* Hidden by default */
      justify-content: center;
      align-items: center;
      z-index: 9999;
      padding: 15px;
    }
    
    /* Modal content */
    .modal-content {
      background: #ffffff;
      border-radius: 12px;
      width: 100%;
      max-width: 550px;
      position: relative;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      max-height: 90vh;
      display: flex;
      flex-direction: column;
    }
    
    /* Close button */
    .modal-close {
      position: absolute;
      top: 10px;
      right: 10px;
      background: #fff;
      border: none;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      color: #666;
      font-weight: bold;
      transition: all 0.2s;
    }
    
    .modal-close:hover {
      background: #fff;
/*       color: #333; */
    }
    
    /* Form container */
    .form-wrapper {
      padding: 20px;
      overflow-y: auto;
      flex: 1;
      max-height: calc(90vh - 40px);
    }
    
    /* Creating a custom scrollbar */
    .form-wrapper::-webkit-scrollbar {
      width: 6px;
    }
    
    .form-wrapper::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 10px;
    }
    
    .form-wrapper::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 10px;
    }
    
    .form-wrapper::-webkit-scrollbar-thumb:hover {
      background: #a8a8a8;
    }
    
    /* Header */
    .form-header {
      text-align: center;
      margin-bottom: 15px;
    }
    
    .form-header img {
      max-width: 150px;
      max-height: 40px;
      margin-bottom: 10px;
      object-fit: contain;
    }
    
    .form-header h2 {
      margin: 0 0 5px;
      font-size: 22px;
      color: #26445E;
    }
    
    .form-header p {
      margin: 0;
      color: #666;
      font-size: 13px;
    }
    
    /* Divider */
    .form-divider {
      height: 1px;
/*       background: #e0e0e0; */
      margin: 0 0 15px;
    }
    
    /* Steps indicator */
    .form-steps {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      position: relative;
    }
    
    /* Progress bar line */
    .form-steps:before {
      content: '';
      position: absolute;
      top: 14px;
      left: 0;
      right: 0;
      height: 2px;
      background: #e1e5eb;
      z-index: 1;
    }
    
    .progress-bar {
      position: absolute;
      top: 14px;
      left: 0;
      height: 2px;
      width: 0%;
      background: #0073e6;
      z-index: 2;
      transition: width 0.3s ease;
    }
    
    /* Step item */
    .step {
      text-align: center;
      position: relative;
      z-index: 3;
      width: 25%;
    }
    
    /* Step circle */
    .step-circle {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid #e1e5eb;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 5px;
      color: #999;
      font-weight: 600;
      font-size: 12px;
      transition: all 0.3s;
    }
    
    /* Step label */
    .step-label {
      font-size: 11px;
      color: #888;
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 5px;
    }
    
    /* Active step */
    .step.active .step-circle {
      background: #0073e6;
      border-color: #0073e6;
      color: #fff;
      box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.2);
    }
    
    .step.active .step-label {
      color: #0073e6;
      font-weight: 500;
    }
    
    /* Completed step */
    .step.completed .step-circle {
      background: #00cc66;
      border-color: #00cc66;
      color: #fff;
    }
    
    /* Form steps */
    .form-step {
      display: none;
    }
    
    .form-step.active {
      display: block;
    }
    
    /* Form fields */
    .form-step label {
      display: block;
      margin-bottom: 4px;
      font-weight: 600;
      font-size: 13px;
      color: #444;
    }
    
    .form-step .field-group {
      margin-bottom: 15px;
    }
    
    .form-step input,
    .form-step select,
    .form-step textarea {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #d9e1ec;
      border-radius: 6px;
      font-size: 14px;
      color: #333;
      background-color: #f9faff;
      transition: all 0.2s;
      font-family: inherit;
    }
    
    .form-step input:focus,
    .form-step select:focus,
    .form-step textarea:focus {
      outline: none;
      border-color: #0073e6;
      box-shadow: 0 0 0 2px rgba(0, 115, 230, 0.1);
      background-color: #fff;
    }
    
    .form-step input:hover,
    .form-step select:hover,
    .form-step textarea:hover {
      border-color: #b0c0d9;
    }
    
    .form-step select {
      appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg fill='%23666666' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 20px;
      padding-right: 30px;
    }
    
    .form-step textarea {
      min-height: 80px;
      resize: vertical;
      max-height: 150px;
    }
    
    .required-mark {
      color: #ff3366;
      margin-left: 2px;
    }
    
    .field-hint {
      display: block;
      font-size: 11px;
      color: #888;
      margin-top: 3px;
    }
    
    /* Form actions */
    .form-actions {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }
    
    .form-actions button {
      padding: 10px 18px;
      border-radius: 6px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      border: none;
    }
    
    .btn-next {
      background-color: #0073e6;
      color: white;
    }
    
    .btn-next:hover {
      background-color: #0060c0;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 115, 230, 0.2);
    }
    
    .btn-prev {
      background-color: transparent;
      color: #666;
      border: 1px solid #d9e1ec !important;
    }
    
    .btn-prev:hover {
      background-color: #f5f7fa;
      color: #444;
    }
    
    .btn-submit {
      background-color: #0073e6;
      color: white;
      position: relative;
    }
    
    .btn-submit:hover {
      background-color: #0060c0;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 115, 230, 0.2);
    }
    
    /* Error state */
    .field-error {
      border-color: #ff3366 !important;
    }
    
    .error-message {
      color: #ff3366;
      font-size: 11px;
      margin-top: 3px;
      display: none;
    }
    
    .field-error + .error-message {
      display: block;
    }
    
    /* Thank you message */
    .thank-you-message {
      display: none;
      text-align: center;
      padding: 30px 20px;
    }
    
    .thank-you-message h3 {
      color: #0073e6;
      font-size: 24px;
      margin-bottom: 10px;
    }
    
    .thank-you-message p {
      color: #666;
      font-size: 14px;
      margin-bottom: 20px;
      line-height: 1.6;
    }
    
    .thank-you-icon {
      font-size: 50px;
      color: #00cc66;
      margin-bottom: 15px;
    }
    
    /* Preloader styles */
    .preloader-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.8);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 100;
      border-radius: 12px;
    }
    
    .preloader {
      position: relative;
      width: 60px;
      height: 60px;
    }
    
    .preloader:after {
      content: '';
      display: block;
      width: 44px;
      height: 44px;
      margin: 8px;
      border-radius: 50%;
      border: 5px solid #0073e6;
      border-color: #0073e6 transparent #0073e6 transparent;
      animation: preloader 1.2s linear infinite;
    }
    
    @keyframes preloader {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    /* Button with loader */
    .btn-submit.loading {
      color: transparent;
      pointer-events: none;
    }
    
    .btn-submit.loading:after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      top: 50%;
      left: 50%;
      margin-top: -8px;
      margin-left: -8px;
      border: 2px solid rgba(255,255,255,0.3);
      border-radius: 50%;
      border-top-color: white;
      animation: spin 0.8s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    /* Responsive adjustments for small screens */
    @media (max-width: 400px) {
      .modal-overlay {
        padding: 10px;
      }
      
      .modal-content {
        border-radius: 8px;
      }
      
      .form-wrapper {
        padding: 15px;
      }
      
      .form-header h2 {
        font-size: 18px;
      }
      
      .form-header p {
        font-size: 12px;
      }
      
      .step-circle {
        width: 24px;
        height: 24px;
        font-size: 10px;
      }
      
      .step-label {
        display: none;
      }
      
      .form-steps:before {
        top: 12px;
      }
      
      .progress-bar {
        top: 12px;
      }
      
      .form-actions {
        flex-direction: column;
        gap: 8px;
      }
      
      .form-actions button {
        width: 100%;
      }
      
      .btn-prev {
        order: 2;
      }
      
      .btn-next,
      .btn-submit {
        order: 1;
      }
    }






/* Trigger Button Styling - Add to your existing CSS */
.popFormTrigger {
  background: #0073e6;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 115, 230, 0.2);
  transition: all 0.2s;
  display: inline-block; /* So it works on different elements */
  text-decoration: none; /* Remove underline for links */
  text-align: center;
}

.popFormTrigger:hover {
  background: #0060c0;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 115, 230, 0.25);
}

/* You can create different styles for triggers in different contexts */
.footer-cta.popFormTrigger {
  background: transparent;
  border: 2px solid #0073e6;
  color: #0073e6;
}

.footer-cta.popFormTrigger:hover {
  background: rgba(0, 115, 230, 0.1);
}

.banner-cta.popFormTrigger {
  background: #00cc66;
  box-shadow: 0 4px 12px rgba(0, 204, 102, 0.2);
}

.banner-cta.popFormTrigger:hover {
  background: #00aa55;
  box-shadow: 0 6px 16px rgba(0, 204, 102, 0.25);
}



/* === Multi-trigger Popup CSS === */

/* Container for demo button (optional) */
.multi-page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  background-color: #f5f7fa;
}

/* Any element with this class will open the popup */
/* .multi-popTrigger {
  background: #0073e6;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,115,230,0.2);
  transition: all 0.2s;
  text-decoration: none;
  display: inline-block;
}
.multi-popTrigger:hover {
  background: #0060c0;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,115,230,0.25);
} */

/* Overlay */
.multi-modalOverlay {
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  padding: 15px;
  z-index: 9999;
}

/* Modal box */
.multi-modalContent {
  background: #fff;
  border-radius: 12px;
  max-width: 550px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Close btn */
.multi-modalClose {
  position: absolute;
  top:10px; right:10px;
  width:28px; height:28px;
  border:none; background:#fff;
  border-radius:50%;
  font-size:16px; font-weight:bold;
  line-height:1;
  cursor:pointer; color:#666;
  display:flex; align-items:center; justify-content:center;
  transition: all .2s;
	overflow:hidden;
}
.multi-modalClose:hover { background-color:#fff !important; }

/* Preloader overlay */
.multi-preloaderOverlay {
  position: absolute; top:0; left:0; right:0; bottom:0;
  background: rgba(255,255,255,0.8);
  display:none; justify-content:center; align-items:center;
  border-radius:12px; z-index:10;
}
.multi-preloaderOverlay .multi-preloader {
  width:60px; height:60px; position:relative;
}
.multi-preloaderOverlay .multi-preloader:after {
  content:''; display:block;
  width:44px; height:44px; margin:8px;
  border:5px solid #0073e6;
  border-color: #0073e6 transparent #0073e6 transparent;
  border-radius:50%;
  animation: multi-spin 1.2s linear infinite;
}
@keyframes multi-spin { to{transform:rotate(360deg);} }

/* Form wrapper & custom scrollbar */
.multi-formWrapper {
  padding:20px; overflow-y:auto; flex:1; max-height:calc(90vh - 40px);
}
.multi-formWrapper::-webkit-scrollbar { width:6px; }
.multi-formWrapper::-webkit-scrollbar-track { background:#f1f1f1; border-radius:10px;}
.multi-formWrapper::-webkit-scrollbar-thumb { background:#c1c1c1; border-radius:10px;}
.multi-formWrapper::-webkit-scrollbar-thumb:hover { background:#a8a8a8; }

/* Header */
.multi-formHeader { text-align:center; margin-bottom:15px; }
.multi-formHeader img { max-width:150px; max-height:40px; margin-bottom:10px; object-fit:contain; }
.multi-formHeader h2 { margin:0 0 5px; font-size:22px; color:#26445E; }
.multi-formHeader p  { margin:0; font-size:13px; color:#666; }

/* Divider */
.multi-formDivider { height:1px; margin:0 0 15px; background:#fff; }

/* Steps bar */
.multi-formSteps { position:relative; display:flex; justify-content:space-between; margin-bottom:20px; }
.multi-formSteps:before {
  content:''; position:absolute; top:14px; left:0; right:0; height:2px; background:#e1e5eb; z-index:1;
}
.multi-progressBar {
  position:absolute; top:14px; left:0; height:2px; width:0%; background:#0073e6; z-index:2;
  transition:width .3s ease;
}
.multi-step { position:relative; z-index:3; width:25%; text-align:center; }
.multi-step .multi-stepCircle {
  width:28px; height:28px; border-radius:50%; background:#fff;
  border:2px solid #e1e5eb; display:flex; align-items:center; justify-content:center;
  margin:0 auto 5px; color:#999; font-size:12px; font-weight:600; transition:.3s;
}
.multi-step .multi-stepLabel {
  font-size:11px; color:#888; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.multi-step.active .multi-stepCircle {
  background:#0073e6; border-color:#0073e6; color:#fff;
  box-shadow:0 0 0 3px rgba(0,115,230,0.2);
}
.multi-step.active .multi-stepLabel { color:#0073e6; font-weight:500; }
.multi-step.completed .multi-stepCircle {
  background:#00cc66; border-color:#00cc66; color:#fff;
}

/* Form steps */
.multi-formStep { display:none; }
.multi-formStep.active { display:block; }

/* Fields */
.multi-formStep label { display:block; margin-bottom:4px; font-size:13px; font-weight:600; color:#444; }
.multi-fieldGroup { margin-bottom:15px; }
.multi-formStep input,
.multi-formStep select,
.multi-formStep textarea {
  width:100%; padding:10px 12px; border:1px solid #d9e1ec; border-radius:6px;
  font-size:14px; background:#f9faff; transition:.2s; font-family:inherit; color:#333;
}
.multi-formStep input:focus,
.multi-formStep select:focus,
.multi-formStep textarea:focus {
  outline:none; border-color:#0073e6;
  box-shadow:0 0 0 2px rgba(0,115,230,0.1); background:#fff;
}
.multi-formStep input:hover,
.multi-formStep select:hover,
.multi-formStep textarea:hover { border-color:#b0c0d9; }
.multi-formStep select {
  appearance:none;
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:20px;
  padding-right:30px;
}
.multi-formStep textarea { min-height:80px; max-height:150px; resize:vertical; }
.multi-requiredMark { color:#ff3366; margin-left:2px; }
.multi-fieldHint { display:block; font-size:11px; color:#888; margin-top:3px; }

/* Actions */
.multi-formActions { display:flex; justify-content:space-between; margin-top:20px; }
.multi-formActions button {
  padding:10px 18px; border:none; border-radius:6px; font-size:14px; font-weight:600;
  cursor:pointer; transition:.2s;
}
.multi-btnNext {
  background:#0073e6; color:#fff;
}
.multi-btnNext:hover {
  background:#0060c0; transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(0,115,230,0.2);
}
.multi-btnPrev {
  background:transparent; color:#666; border:1px solid #d9e1ec;
}
.multi-btnPrev:hover {
  background:#f5f7fa; color:#444;
}
.multi-btnSubmit {
  background:#0073e6; color:#fff; position:relative;
}
.multi-btnSubmit:hover {
  background:#0060c0; transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(0,115,230,0.2);
}

/* Loading state */
.multi-btnSubmit.pop-loading { color:transparent; pointer-events:none; }
.multi-btnSubmit.pop-loading:after {
  content:''; position:absolute; width:16px; height:16px;
  top:50%; left:50%; margin:-8px 0 0 -8px;
  border:2px solid rgba(255,255,255,0.3); border-top-color:#fff;
  border-radius:50%; animation:multi-spin .8s linear infinite;
}

/* Errors */
.multi-fieldError { border-color:#ff3366 !important; }
.multi-errorMessage {
  display:none; font-size:11px; color:#ff3366; margin-top:3px;
}
.multi-fieldError + .multi-errorMessage { display:block; }

/* Thank you */
.multi-thankYou {
  display:none; text-align:center; padding:30px 20px;
}
.multi-thankYou h3 { color:#0073e6; font-size:24px; margin-bottom:10px; }
.multi-thankYou p { font-size:14px; color:#666; line-height:1.6; margin-bottom:20px; }
.multi-thankIcon { font-size:50px; color:#00cc66; margin-bottom:15px; }

/* Responsive tweaks */
@media (max-width:400px) {
  .multi-modalOverlay { padding:10px; }
  .multi-modalContent { border-radius:8px; }
  .multi-formWrapper  { padding:15px; }
  .multi-formHeader h2 { font-size:18px; }
  .multi-formHeader p  { font-size:12px; }
  .multi-stepCircle { width:24px; height:24px; font-size:10px; }
  .multi-stepLabel  { display:none; }
  .multi-formSteps:before { top:12px; }
  .multi-progressBar    { top:12px; }
  .multi-formActions { flex-direction:column; gap:8px; }
  .multi-formActions button { width:100%; }
  .multi-btnPrev { order:2; }
  .multi-btnNext,
  .multi-btnSubmit { order:1; }
}

.button:hover {
	background-color:#fff !important;
}