/*
 * Main container styles.  Constrain the width and ensure the wizard takes
 * the full viewport height minus some margin.  Use flexbox to stack
 * child elements vertically.  Hide horizontal overflow to prevent the
 * entire page from scrolling sideways when the progress bar overflows.
 */
#ida-elect-wizard{
  max-width:920px;
  margin:24px auto;
  font-family:inherit;
  min-height:calc(100vh - 120px);
  display:flex;
  flex-direction:column;
  /* Prevent horizontal scroll on the overall page when the progress bar overflows */
  overflow-x:hidden;
  position:relative;
}
.ida-elect-progress{max-width:720px;margin:0 auto 12px;}
/* Allow horizontal scroll on the entire progress container when steps overflow */
.ida-elect-progress{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
/* Steps container: horizontally scrollable on small screens and evenly spaced on desktop */
.ida-elect-progress.pretty .steps{
  display:flex;
  gap:8px;
  font-size:12px;
  color:#444;
  margin:10px auto 14px;
  /* Enable horizontal scroll only within the steps container */
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}
/* Hide scrollbars on WebKit for a cleaner look */
.ida-elect-progress.pretty .steps::-webkit-scrollbar{ display:none; }
.ida-elect-progress.pretty .steps span{flex:0 0 auto;}

/* On small screens the progress bar can overflow horizontally. Enable horizontal
   scrolling and preserve whitespace so that steps remain on one line. */
/* Remove justify-content on mobile; horizontal scrolling is enabled above */
.ida-elect-progress.pretty .steps span{display:flex;align-items:center;gap:6px;background:#f7f8fa;border:1px solid #eceff3;padding:6px 10px;border-radius:999px;white-space:nowrap;cursor:pointer}
.ida-elect-progress.pretty .steps span i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#e5ecff;color:#2f54eb;font-style:normal;font-weight:700}
.ida-elect-progress .bar{height:6px;background:#edf2f7;border-radius:999px;overflow:hidden;margin-bottom:8px}
.ida-elect-progress .bar-inner{display:block;height:6px;background:#134EB3;transition:width .3s ease}
.ida-elect-card{background:#fff;border-radius:14px;box-shadow:0 6px 28px rgba(0,0,0,.08);padding:20px;margin:auto;width:100%;max-width:720px}
.step{display:none}
.step.active{display:block}
.step h3,.step p{text-align:center}
.centered-input{text-align:center;letter-spacing:1px}
.btn{border:1px solid #ddd;background:#f7f7f7;padding:12px 16px;border-radius:10px;cursor:pointer}
.btn.primary{background:#134EB3;color:#fff;border-color:#134EB3}
.btn.block{width:100%}
.btn[disabled]{opacity:.6;pointer-events:none}
.actions{display:flex;justify-content:space-between;margin-top:10px;gap:8px}
.actions.single{justify-content:center}
.cards{
  display:flex;
  flex-direction:column;
  gap:16px;
}
/* Card for title selection.  Use a fixed basis so that cards appear side‑by‑side on
   desktop and stack on smaller screens.  Remove flex:1 to prevent cards
   stretching to full width and causing layout issues. */
/* Each title card fills the available width.  Cards are stacked vertically
   in the .cards container. */
.card{
  border:1px solid #e5e5e5;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  width:100%;
  transition:background-color .3s, color .3s, border-color .3s, box-shadow .3s;
}
.card input{display:none}
.card .card-body{padding:14px}
.card input:checked + .card-body{outline:2px solid #134EB3}

/* When a card is selected, fill it with the primary color and invert the text for
   greater visibility.  The muted text inside will also become lighter. */
.card input:checked + .card-body{
  background:#134EB3;
  color:#fff;
  /* Enhance selection visibility with outline and subtle box shadow */
  outline:2px solid #134EB3;
  box-shadow:0 0 0 3px rgba(19,78,179,0.25);
}
.card input:checked + .card-body .muted{
  color:#e8edff;
}

/* Apply the same highlight styles when a card is manually marked selected via JS.  The
   .selected class is toggled on the parent .card element to reflect selection.
   This ensures the UI remains responsive even if the input:checked selector is
   overridden or fails to match (e.g. due to caching). */
.card.selected .card-body{
  background:#134EB3;
  color:#fff;
  border-color:#134EB3;
  box-shadow:0 0 0 3px rgba(19,78,179,0.25);
}
.card.selected .card-body .muted{
  color:#e8edff;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.grid2{grid-template-columns:1fr}}
input,select{width:100%;padding:12px;border:1px solid #e3e3e3;border-radius:10px;margin-bottom:10px}
.membership{width:100%;border-collapse:collapse}
.membership th,.membership td{padding:10px;border-bottom:1px solid #eee;text-align:right}
.checkbox{display:block;margin:8px 0}

/* Improve the appearance of checkbox rows in the summary step.  Each checkbox
   sits inside a padded container with a subtle border and rounded corners.
   Increase the font size for better readability on mobile. */
.step-6 .checkbox{
  display:block;
  padding:12px;
  border:1px solid #e0e0e0;
  border-radius:12px;
  font-size:15px;
  margin:12px 0;
  cursor:pointer;
}
.step-6 .checkbox input{
  margin-left:8px;
}

/* Style the summary text area with more breathing room and increased line-height. */
.step-6 #summary{
  margin-bottom:16px;
  font-size:14px;
  line-height:1.7;
}
.step-6 .sum{
  margin:6px 0;
}

/* Improve form readability on mobile: add spacing between grid items and lighten inputs */
.grid2 div label{
  font-weight:600;
  margin-bottom:4px;
  display:block;
}
.grid2 div input,
.grid2 div select{
  background:#f9f9fb;
  border-color:#dcdfe7;
}

/* Tweak modal content width for small screens */
@media(max-width:500px){
  .modal .modal-content{
    width:90%;
    max-width:90%;
  }
}
.tracking{font-size:20px;font-weight:700;letter-spacing:1px;background:#f8f9fa;padding:10px;border-radius:8px;display:inline-block}
.muted{color:#6c757d;font-size:12px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:9999}
.modal .modal-content{background:#fff;border-radius:12px;padding:18px;min-width:320px;max-width:480px}
/* OTP like Apple */
.otp-boxes{display:flex;gap:10px;justify-content:center;margin:14px 0}
.otp-digit{width:48px;height:56px;border:1px solid #e2e2e2;border-radius:12px;text-align:center;font-size:22px;outline:none}
.otp-digit:focus{border-color:#134EB3;box-shadow:0 0 0 3px rgba(19,78,179,.12)}

/* Generic switch styling; applies to switches other than gender.  The
   .toggle-gender class will be added to the gender switch markup so these
   generic rules do not apply to it. */
.switch:not(.toggle-gender){
  position:relative;
  display:inline-block;
  width:110px;
  height:34px;
  margin-top:6px;
}
.switch:not(.toggle-gender) input{opacity:0;width:0;height:0;}
.switch:not(.toggle-gender) .slider{
  position:absolute;
  cursor:pointer;
  top:0; left:0; right:0; bottom:0;
  background-color:#ccc;
  transition:.4s;
  border-radius:34px;
}
.switch:not(.toggle-gender) .slider:before{
  position:absolute;
  content:"";
  height:26px;
  width:40px;
  left:4px;
  bottom:4px;
  background-color:white;
  transition:.4s;
  border-radius:50%;
}
.switch:not(.toggle-gender) input:checked + .slider{
  background-color:#134EB3;
}
.switch:not(.toggle-gender) input:checked + .slider:before{
  transform:translateX(60px);
}
.switch-label{
  font-size:12px;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  width:100%;
  text-align:center;
  color:#fff;
}
/* Place male/female labels inside the slider */
.switch-label.male{
  left:0;
}
.switch-label.female{
  right:0;
}

/* Date input styling */
.date-input{
  width:100%;
  padding:12px;
  border:1px solid #e3e3e3;
  border-radius:10px;
  margin-bottom:10px;
  background:#f9f9fb;
  font-size:14px;
  cursor:pointer;
}

/* Generic picker input used for province and branch selection */
.picker-input{
  width:100%;
  padding:12px;
  border:1px solid #e3e3e3;
  border-radius:10px;
  margin-bottom:10px;
  background:#f9f9fb;
  font-size:14px;
  cursor:pointer;
}

/* Datepicker modal styling */
.date-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
}
.date-modal .picker{
  background:#fff;
  border-radius:12px;
  padding:16px;
  min-width:280px;
  max-width:320px;
  text-align:center;
}
.date-modal .picker h4{
  margin-bottom:10px;
}
.date-modal .picker .columns{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-bottom:12px;
}
.date-modal .picker select{
  flex:1;
  height:120px;
  padding:6px;
  font-size:14px;
  border:1px solid #ddd;
  border-radius:8px;
  overflow-y:scroll;
}
.date-modal .picker button{
  margin:4px;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid #134EB3;
  background:#134EB3;
  color:#fff;
  cursor:pointer;
}

/* Enhanced checkbox boxes on summary step */
.step-7 .checkbox{
  display:block;
  position:relative;
  padding:12px;
  border:1px solid #e0e0e0;
  border-radius:12px;
  font-size:14px;
  margin:12px 0;
  cursor:pointer;
  background:#f9f9fb;
  transition:background-color .3s, border-color .3s;
}
.step-7 .checkbox input{
  display:none;
}
.step-7 .checkbox.accepted{
  border-color:#28a745;
  background:#e9f7ec;
  color:#155724;
}
.step-7 .checkbox.rejected{
  border-color:#dc3545;
  background:#f8d7da;
  color:#721c24;
}
.step-7 .checkbox .cb-text{
  display:block;
  padding-left:60px;
}
.step-7 .checkbox .status{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  font-weight:bold;
  white-space:nowrap;
}

/* Loading overlay covering wizard during async operations */
.loading-overlay{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(255,255,255,.8);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:9999;
  font-size:16px;
  color:#134EB3;
}

/*
 * Landing page styles
 *
 * The landing page is shown before the wizard starts.  It features a
 * full‑width section with a configurable background image and a semi‑transparent
 * overlay.  Content (logo, title, description and buttons) is centered
 * vertically and horizontally.  Secondary button uses a light style to
 * contrast against the primary button.  Adjust paddings and font sizes
 * for readability on desktop and mobile.
 */
.landing-page{
  position:relative;
  /* Do not force 100% width so margins apply correctly */
  /* Occupy nearly the full viewport height of the wizard container so that
     the landing page fills the screen on desktop and mobile.  Subtract
     header/footer margins from 100vh to align with the wizard container's
     own min-height definition. */
  min-height:calc(100vh - 120px);
  background-size:cover;
  background-position:center;
  border-radius:14px;
  /* Default horizontal margins for desktop; ensure equal spacing on both sides */
  margin-left:20px;
  margin-right:20px;
  /* Remove bottom margin on desktop; add margin on mobile below */
  margin-bottom:0;
  overflow:hidden;
}
/* Reduce horizontal padding on very small screens so the image is not flush
   against the edges. */
@media(max-width:600px){
  .landing-page{
    margin-left:10px;
    margin-right:10px;
    margin-bottom:12px;
  }
}
.landing-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  color:#fff;
}
.landing-overlay img{
  max-width:120px;
  margin-bottom:16px;
}
.landing-overlay h2{
  font-size:24px;
  margin-bottom:12px;
  line-height:1.4;
}
.landing-overlay p{
  max-width:480px;
  margin-bottom:20px;
  font-size:16px;
  line-height:1.7;
}
.landing-overlay .btn{
  margin:6px 0;
  min-width:200px;
  padding:12px 24px;
  border-radius:12px;
  font-size:16px;
}
.landing-overlay .btn.secondary{
  background:#fff;
  border-color:#fff;
  color:#134EB3;
}
/* Footer text within landing overlay */
.landing-overlay .landing-footer{
  margin-top:16px;
  font-size:12px;
  color:#fff;
  opacity:0.9;
}
.landing-overlay .landing-footer a{
  color:inherit;
  text-decoration:underline;
}
.loading-overlay .spinner{
  border:4px solid #f3f3f3;
  border-top:4px solid #134EB3;
  border-radius:50%;
  width:40px;
  height:40px;
  animation: spin 1s linear infinite;
  margin-bottom:8px;
}
/* Footer styling for copyright information */
.ida-elect-footer{
  text-align:center;
  font-size:11px;
  color:#777;
  margin-top:16px;
  display:none;
}
.ida-elect-footer a{
  color:inherit;
  text-decoration:underline;
}

/* Center the tracking code on the final step */
.step-done .tracking{
  display:block;
  margin:20px auto;
  text-align:center;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*
 * Custom gender switch styles matching the specification.  Wrap the switch in a
 * flex container with left/right labels outside the slider.  The slider itself
 * is narrower than the previous implementation and moves a circular knob when
 * checked.  Use .gender-switch and .switch-container in the HTML to apply
 * these styles.
 */
.gender-switch{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
}
.switch-container{
  display:flex;
  align-items:center;
  gap:10px;
}
/* Generic switch styles (used for plain toggles).  Apply only to switches
   that are not the gender toggle.  This prevents the generic rules from
   overriding the specialised gender styles defined below. */
.switch:not(.toggle-gender){
  position:relative;
  display:inline-block;
  width:80px;
  height:34px;
}
.switch:not(.toggle-gender) input{
  opacity:0;
  width:0;
  height:0;
}
.switch:not(.toggle-gender) .slider{
  position:absolute;
  cursor:pointer;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:#ccc;
  transition:.4s;
  border-radius:34px;
}
.switch:not(.toggle-gender) .slider:before{
  position:absolute;
  content:"";
  height:26px;
  width:26px;
  left:4px;
  bottom:4px;
  background-color:white;
  transition:.4s;
  border-radius:50%;
}
.switch:not(.toggle-gender) input:checked + .slider{
  background-color:#007bff;
}
.switch:not(.toggle-gender) input:checked + .slider:before{
  transform:translateX(46px);
}
.label-left,
.label-right{
  font-weight:600;
}

/* When the gender switch is used (inside .gender-switch), change the default
   and checked colors.  Default (male) is blue; checked (female) is pink. */
.gender-switch .switch .slider{
  background-color:#007bff;
}
.gender-switch .switch input:checked + .slider{
  background-color:#e83e8c;
}

/* For the gender switch, position the knob on the right by default (male).  When
   checked (female), the knob slides to the left.  We achieve this by
   positioning the :before pseudo-element using right instead of left. */
.gender-switch .switch .slider:before{
  right:4px;
  left:auto;
  width:26px;
  height:26px;
}
.gender-switch .switch input:checked + .slider:before{
  transform:translateX(-46px);
}

/* New gender toggle as button group.  Display two options side‑by‑side,
   highlighting the selected option.  The first label corresponds to male
   (blue) and the second to female (pink). */
.gender-toggle{
  display:flex;
  border:1px solid #ddd;
  border-radius:8px;
  overflow:hidden;
  width:100%;
  margin-top:6px;
}
.gender-toggle label{
  flex:1;
  margin:0;
  padding:10px 0;
  text-align:center;
  cursor:pointer;
  font-weight:600;
  color:#444;
  background:#f7f7f7;
}
.gender-toggle label + label{
  border-left:1px solid #ddd;
}
.gender-toggle input{
  display:none;
}
.gender-toggle label:first-child input:checked + span{
  background:#134EB3;
  color:#fff;
}
.gender-toggle label:last-child input:checked + span{
  background:#e83e8c;
  color:#fff;
}

/* iOS-style picker overlay used for province/branch selection.  The picker
 * appears fixed to the bottom of the viewport with a slight slide-up
 * animation.  Each option is rendered as a clickable .picker-item. */
.ios-picker{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#fff;
  border-top:1px solid #ccc;
  box-shadow:0 -2px 8px rgba(0,0,0,0.1);
  max-height:250px;
  overflow-y:auto;
  padding:10px;
  text-align:center;
  animation:slideUp .3s ease;
  z-index:10000;
}
.picker-item{
  padding:10px 0;
  border-bottom:1px solid #eee;
  cursor:pointer;
}
.picker-item:hover{
  background:#f1f1f1;
}
@keyframes slideUp{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}

/* Agreement boxes for summary step.  These boxes behave like toggle buttons
 * indicating whether the user has accepted or rejected the statement. */
.agreement-box{
  border:1px solid #ccc;
  padding:10px;
  margin:10px 0;
  border-radius:6px;
  text-align:center;
  cursor:pointer;
  transition:.3s;
}
.agreement-box.accepted{
  background:#d4edda;
  color:#155724;
  border-color:#c3e6cb;
}
.agreement-box.rejected{
  background:#f8d7da;
  color:#721c24;
  border-color:#f5c6cb;
}

/*
 * Override the default switch styles for the gender toggle.  The toggle displays
 * the selected gender text inside the slider itself and changes color based
 * on the selected state.  When unchecked (male), the slider shows آقا and
 * has a blue background.  When checked (female), it shows خانم and has a
 * pink background.  The knob still animates across the track.
 */
.switch.toggle-gender{
  /* Ensure the internal slider is positioned relative to this container */
  position:relative;
  width:110px;
  height:34px;
}
.switch.toggle-gender input{ opacity:0; width:0; height:0; }
.switch.toggle-gender .slider{
  position:absolute;
  cursor:pointer;
  top:0; left:0; right:0; bottom:0;
  border-radius:34px;
  transition:.4s;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:600;
  font-size:14px;
}
/* Default (male) state */
.switch.toggle-gender input + .slider{
  background-color:#007bff;
}
.switch.toggle-gender input + .slider:after{
  content:'آقا';
}
/* Checked (female) state */
.switch.toggle-gender input:checked + .slider{
  background-color:#e83e8c;
}
.switch.toggle-gender input:checked + .slider:after{
  content:'خانم';
}
.switch.toggle-gender .slider:before{
  /* Hide the moving knob for gender toggle.  The knob caused visual
     glitches on some devices by overflowing the container.  Since the
     text inside the slider clearly indicates the selected gender, the
     knob is redundant and therefore removed. */
  display:none;
}
/* No need to translate knob for gender toggle since the knob is hidden */

/* Prevent zoom on mobile by increasing base font size of inputs and selects */
input, select{
  font-size:16px;
}