/* ===========================
   Theme Variables (Fonts & Colours only)
   =========================== */
:root {
  /* Fonts */
  --font-base: 'Roboto', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-christmas: 'Roboto', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Colours */
  --color-primary: #E3001E;       /* brand red */
  --color-secondary: #458A0E;     /* brand green */
  --color-neutral: #8f8f8f;       /* default button bg */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-text: #000000;
  --color-muted: #919191cc;
  --color-border: #cccccc;
  --color-border-light: #d1d0d0;
  --color-disabled: gray;
  --color-booked-bg: #d7d7d7;
  --color-radio-selected: #007bff;
  --color-primary-30: rgb(255 0 0 / 30%); /* stepper :before */
}

/* ===========================
   Fonts
   =========================== */
body { font-family: var(--font-base);

}

/* ===========================
   Links & Text
   =========================== */
a { color: var(--color-primary) !important; }
p { color: var(--color-text); }

/* ===========================
   Time Slots (colours only)
   =========================== */
.time-slot { border: 1px solid var(--color-border); }
.time-slot:hover,
.time-slot.selected {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.booked .time-slot,
.booked .time-slot:hover {
  background: var(--color-booked-bg);
  color: var(--color-muted);
  border-color: var(--color-booked-bg);
}
input[type="radio"]:checked + .time-slot {
  background-color: var(--color-radio-selected);
  color: var(--color-white);
}

/* ===========================
   Toggles / Minor UI (colour only)
   =========================== */
.toggle-content { color: var(--color-primary); }

/* ===========================
   Validation (colour only)
   =========================== */
label.error { color: var(--color-primary); }
input.error { border: 2px solid var(--color-primary); }
.form-control:focus { border-color: var(--color-secondary) !important; }

/* ===========================
   Buttons (colour only)
   =========================== */
button,
.button {
  background: var(--color-neutral);
  color: var(--color-white);
}
.steps_btn {
  font-family: var(--font-base) !important;
  color: var(--color-white) !important;
  background: var(--color-primary) !important;
}
.steps_btn:hover,
.btn-hover:hover { background: var(--color-secondary) !important; }
.loadMore,
.button { background: var(--color-secondary) !important; }
.make-payment {
  background: var(--color-secondary) !important;
  color: var(--color-white);
}

/* ===========================
   Stepper (colour only)
   =========================== */
#add-event-tab .step-steps>li.active>a>.number,
#add-event-tab .step-steps>li.done>a>.number {
  background-color: var(--color-primary);
}
#add-event-tab .step-steps>li.active>a>.number:before,
#add-event-tab .step-steps>li.done>a>.number:before {
  background-color: var(--color-primary-30);
}
#add-event-tab .step-steps>li.done:before { background-color: var(--color-primary); }

/* ===========================
   Brand / Titles
   =========================== */
.christmas {
  font-family: var(--font-christmas);
  color: var(--color-primary);
}
.confirm-title,
h5 { color: var(--color-primary) !important; }

/* ===========================
   Misc
   =========================== */
.border_top { border-top: 1px solid var(--color-border-light); }
#card-errors { color: var(--color-primary); }
.disabled { background-color: var(--color-disabled) !important; }

/* ===========================
   SweetAlert2 (colour only)
   =========================== */
div:where(.swal2-icon).swal2-error [class^="swal2-x-mark-line"] {
  background-color: var(--color-primary) !important;
}
div:where(.swal2-icon).swal2-error {
  border-color: var(--color-primary) !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
  background-color: var(--color-primary) !important;
}


.main-title h3 {
    font-size: 22px !important;
}

.main-title p { 
    max-width:680px !important;   
    margin: 0px auto !important;
}

.step-footer {
    position:relative;
    
}
.step-footer::after {
    position: absolute !important;
    display: block !important;
    content: '';
    background: url(KVS.png);
    width: 150px;
    height: 106px;
    right: 0px;
    top: -12px;
    background-size: cover;
}



@media only screen and (max-width: 600px) {
    .wizard-steps-block {
        margin-bottom:83px;
    }
    
    
.step-footer::after {
    position: absolute !important;
    display: block !important;
    content: '';
    background: url(KVS.png);
    width: 150px;
    height: 106px;
    right: 97px;
    top: 60px;
    background-size: cover;
}
    
    
}