p, span, table, li, a, .btn, div{
    font-family: "Rubik", sans-serif;
}

h1, h2, h3, h4{
    font-family: "Rubik", sans-serif;
}
.display-1, .display-2, .display-3, .display-4 {
    font-family: "Rubik", sans-serif;
}

#container {
max-width:1000px;
}


.live-indicator{
position:relative;
display:inline-block;
width:10px;
height:10px;
vertical-align: middle; /* centers vertically within text line */
animation:breathe 2.4s ease-in-out infinite;
}

/* The actual green circle */
.live-indicator::before{
content:"";
position:absolute;
width:10px;
height:10px;
background-color:#22c55e;
border-radius:50%;
top:0;
left:0;
}

/* expanding glow - transform/opacity so the compositor can run it off the
   main thread; an animated box-shadow repaints every frame */
.live-indicator::after{
content:"";
position:absolute;
inset:-6px;                  /* glow size around the dot */
border-radius:50%;
background-color:#22c55e;
/* the ring is drawn by the animation; at rest it is invisible, as the
   0-spread box-shadow this replaced was */
transform:scale(.45);
opacity:0;
animation:pulse 2.4s ease-out infinite;
}

/* gentle scale on the dot itself */
@keyframes breathe{
0%,100%{ transform:scale(1); }
50%{    transform:scale(1.08); }
}

/* outward fading ring */
@keyframes pulse{
0%{   transform:scale(.45); opacity:.55; }
70%{  transform:scale(1.6);  opacity:0;   }
100%{ transform:scale(.45); opacity:0;   }
}


h1 {
    font-weight: bold !important;
}
.obf-blur{
    filter: blur(12px); user-select: none; pointer-events: none;
}


a.black-link {
    text-decoration: none;
    color:#000;
}

.navbar-brand {
    text-transform: uppercase;
    font-weight: bold;
}

.deactivate-links a{
  pointer-events: none;
  cursor: default;
}

.table-clickable tbody tr {
  cursor: pointer;
}

textarea {
   max-width: 100%;
}

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.border.missed_deadline {
    outline: 2px solid red;
    outline-offset: 2px !important;
}

.no_deadline {
    outline: 2px solid #ffc107;
    outline-offset: 2px !important;
}

.has_deadline {
    outline: 2px solid #198754;
    outline-offset: 2px !important;
}

.btn {
    border-radius: 8px !important;
}

.btn.btn-primary:disabled, .btn.btn-primary.disabled{
    background-color: #86c990;
    border-color:#86c990;
}

.btn.btn-lg {
    padding:14px;
}

.btn.btn-primary {
background-color: #37b34a;
border-color: #309a41;
}

.btn.btn-primary:hover, .btn.btn-primary:focus {
color: #fff;
background-color: #309a41;
border-color: #309a41;

}

.btn.btn-primary:active,
.btn.btn-primary.active,
.show > .btn.btn-primary.dropdown-toggle,
.btn-check:checked + .btn.btn-primary,
.btn-check:active + .btn.btn-primary,
.btn.btn-primary:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #309a41;
border-color: #309a41;
}


img.whatsapp-button {
    max-width: 220px;
}
.errorlist,                    /* whole <ul> */
.errorlist li {                /* each <li>  */
color: #dc3545;              /* Bootstrap’s “danger” red */
margin: 0;                   /* tidy spacing             */
padding: 0;
list-style: none;
}

a.btn.btn-dark.disabled {
    color: #000;
    opacity: 1;
    background-color: #fff;
}


a.btn.btn-dark:hover, button.btn.btn-dark:hover {
	color: #000;
	background-color: #fff;
}


#request_card b {
max-width: 500px;
display: block;
}

.primary-color {
color: #37b34a;
}


#period_filters a {
font-size: 15px;
}

.switch {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;  /* Reduced width */
    height: 20px;  /* Reduced height */
    background-color: #ccc;
    border-radius: 20px;  /* Half of height to create rounded edges */
    position: relative;
    outline: none;
    cursor: pointer;
    transition: background-color 0.4s;
}

.switch::before {
    content: "";
    position: absolute;
    left: 2px;  /* Adjusted for smaller size */
    bottom: 2px;  /* Adjusted for smaller size */
    width: 16px;  /* Reduced width */
    height: 16px;  /* Reduced height */
    background-color: white;
    border-radius: 50%;
    transition: transform 0.4s;
}

.switch:checked {
    background-color: #2196F3;
}

.switch:checked::before {
    transform: translateX(20px);  /* Adjusted to match the new width */
}

#day-label-container input {
    top:4px;
}

#day-label-container label {
    margin-left: 7px;
}

.text-very-small {
    font-size:12px;
}

.no-wrap {
    white-space: nowrap;
}

/* form styling */

form input[type="text"],
form input[type="tel"],
form input[type="email"],
form input[type="password"],
form select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius:4px;
    transition: border 0.3s ease;
}

input.currency-input {
    padding-left: 20px;
    max-width:100px;
    border-radius: 5px;
    border: 1px solid #ddd;
}
span.currency-symbol {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #6C757D;
}

div.currency-container {
    position: relative;
    display: inline-block;
}

.grey-pounds-input span, .grey-pounds-input input{
    font-weight: 500 !important;
}

.grey-pounds-input input{
    border-width: 0;
    background-color: #E9E9EC;
    border-radius: 3px;
    padding-left:23px;
    max-width:80px;

}


.pretty-list {
        list-style: none; /* Remove default bullets */
        padding-left: 0; /* Remove default padding */
    }

.pretty-list li {
    display: flex;
    align-items: center; /* Vertically centers the checkmark and text */
    font-size: 18px;
    margin-bottom: 10px;
    position: relative; /* Allows positioning of the ::before element */
    padding-left: 40px; /* Space for the checkmark */
}

.pretty-list li::before {
    content: "\f00c"; /* Unicode for Font Awesome checkmark */
    font-family: 'Font Awesome 5 Free'; /* Ensure Font Awesome is used */
    font-weight: 900; /* Makes sure it's bold */
    font-size: 24px; /* Adjust the size of the checkmark */
    position: absolute;
    left: 0; /* Position the checkmark to the left of the list item */
}

.pretty-list-checkmarks li::before {
    content: "\f14a"; /* Unicode for Font Awesome checkmark */
    color: #00C20B;
}


  .whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #25D366; /* Official WhatsApp green */
    color: #fff;
    font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    text-decoration: none;
    border-radius: 9999px;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35), 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
  }
  .whatsapp-float:hover,
  .whatsapp-float:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45), 0 6px 14px rgba(0,0,0,0.2);
    outline: none;
  }
  .whatsapp-float:active {
    transform: translateY(0);
  }
  .wa-icon {
    display: block;
  }
  /* Compact on very small screens: show just the icon */
  @media (max-width: 480px) {
    .whatsapp-float span { display: none; }
    .whatsapp-float { padding: 14px; }
  }
  /* Respect reduced motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .whatsapp-float { transition: none; }
  }

/* ---------- Support bubble --------------------------------- */
.support-bubble {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.support-bubble-toggle {
  border: 1px solid #00b60a;
  border-radius: 9999px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #00c20b 0%, #00a809 100%);
  color: #fff;
  font: 600 14px/1.2 "Rubik", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0, 194, 11, 0.30), 0 4px 12px rgba(0,0,0,0.12);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.support-bubble-toggle:hover,
.support-bubble-toggle:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 194, 11, 0.40), 0 6px 14px rgba(0,0,0,0.15);
  outline: none;
}

.support-bubble-toggle:active {
  transform: translateY(0);
}

.support-bubble-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  min-width: 210px;
}

.support-bubble-action {
  display: block;
  text-decoration: none;
  color: #222;
  background: #fff;
  border: 1px solid #dbe6dd;
  border-radius: 12px;
  padding: 11px 13px;
  font: 500 14px/1.3 "Rubik", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}

.support-bubble-action:hover,
.support-bubble-action:focus-visible {
  border-color: #00c20b;
  color: #008b08;
  background: #f6fff7;
  outline: none;
}

@media (max-width: 575.98px) {
  .support-bubble {
    right: 14px;
    bottom: 76px;
  }

  .support-bubble-toggle {
    padding: 11px 14px;
  }

  .support-bubble-menu {
    min-width: 185px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-bubble-toggle {
    transition: none;
  }
}

/* ---------- Step indicators (shared onboarding/auth) ------- */
.step { display: none; }
.step.active { display: block; }

/* ============================================================
   Registration & Login — Public pages with modern look
   ============================================================ */
.sp-auth-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f4f6f9 0%, #e8f5ea 100%);
  font-family: "Rubik", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sp-auth-page .navbar {
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  border-bottom: 1px solid #e2e6ed;
}

/* ---------- Auth card -------------------------------------- */
.sp-auth-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
  border: 1px solid #e2e6ed;
  padding: 2.5rem 2rem;
  max-width: 520px;
  margin: 0 auto;
}
@media (max-width: 575.98px) {
  .sp-auth-card {
    padding: 1.75rem 1.25rem;
    border-radius: 12px;
    margin: 0 .5rem;
  }
}

/* ---------- Feature badges --------------------------------- */
.sp-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .75rem;
  margin-bottom: 1.5rem;
}
.sp-feature-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  background: #fff;
  border: 1px solid #e2e6ed;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 500;
  color: #1e2a3a;
  white-space: nowrap;
}
.sp-feature-badge i {
  color: #37b34a;
  font-size: .7rem;
}

/* ---------- Progress bar ----------------------------------- */
.sp-auth-card .progress {
  height: 6px;
  border-radius: 3px;
  background: #f0f2f5;
  margin-bottom: 1.75rem;
}
.sp-auth-card .progress-bar {
  background: linear-gradient(90deg, #37b34a, #2e9a3f);
  border-radius: 3px;
  transition: width .4s ease;
}

/* ---------- Step display text ------------------------------ */
.sp-step-display {
  font-size: .85rem;
  font-weight: 500;
  color: #6b7a8d;
  text-align: center;
  margin-bottom: .75rem;
}

/* ---------- Form fields ------------------------------------ */
.sp-auth-card label {
  display: block;
  font-size: .85rem;
  font-weight: 500;
  color: #1e2a3a;
  margin-bottom: .35rem;
}
.sp-auth-card input[type="text"],
.sp-auth-card input[type="email"],
.sp-auth-card input[type="url"],
.sp-auth-card input[type="password"],
.sp-auth-card input[type="number"],
.sp-auth-card select,
.sp-auth-card textarea {
  width: 100%;
  padding: .65rem .85rem;
  border: 1px solid #e2e6ed;
  border-radius: 10px;
  font-size: .95rem;
  color: #1e2a3a;
  background: #fafbfc;
  transition: border-color .2s, box-shadow .2s;
}
.sp-auth-card input:focus,
.sp-auth-card select:focus,
.sp-auth-card textarea:focus {
  border-color: #37b34a;
  box-shadow: 0 0 0 3px rgba(55,179,74,.12);
  outline: none;
  background: #fff;
}
.sp-auth-card input.border-danger {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}

/* ---------- Consent row ------------------------------------ */
.sp-consent {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .75rem;
  background: #f8faf8;
  border: 1px solid #e2e6ed;
  border-radius: 10px;
}
.sp-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #37b34a;
  flex-shrink: 0;
}
.sp-consent span {
  font-size: .8rem;
  color: #6b7a8d;
  line-height: 1.4;
}
.sp-consent a {
  color: #37b34a;
  text-decoration: underline;
}

/* ---------- Auth buttons ----------------------------------- */
.sp-auth-card .btn-primary {
  background: #37b34a;
  border: none;
  border-radius: 10px;
  padding: .7rem 1.5rem;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sp-auth-card .btn-primary .spinner-border {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  vertical-align: middle;
}
.sp-auth-card .btn-primary:hover {
  background: #2e9a3f;
  transform: translateY(-1px);
}
.sp-auth-card .btn-primary:active {
  transform: translateY(0);
}
.sp-auth-card .btn-back {
  background: transparent;
  border: 1px solid #e2e6ed;
  border-radius: 10px;
  padding: .7rem 1.25rem;
  font-size: .95rem;
  text-decoration: none;
  font-weight: 500;
  color: #6b7a8d;
  transition: all .2s;
}
.sp-auth-card .btn-back:hover {
  background: #f4f6f9;
  color: #1e2a3a;
}

/* ---------- Image side panel ------------------------------- */
.sp-auth-image {
  border-radius: 16px;
  overflow: hidden;
  min-height: 400px;
  background-size: cover;
  background-position: 66% center;
}
@media (max-width: 767.98px) {
  .sp-auth-image {
    display: none;
  }
}

/* ---------- Auth page heading ------------------------------ */
.sp-auth-heading {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e2a3a;
  margin-bottom: .35rem;
}
.sp-auth-subtext {
  font-size: .95rem;
  color: #6b7a8d;
  margin-bottom: 1.5rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Auth footer links ------------------------------ */
.sp-auth-footer {
  text-align: center;
  margin-top: 1.25rem;
  font-size: .85rem;
  color: #6b7a8d;
}
.sp-auth-footer a {
  color: #37b34a;
  font-weight: 500;
  text-decoration: none;
}
.sp-auth-footer a:hover {
  text-decoration: underline;
}

/* ---------- Loading state ---------------------------------- */
.sp-auth-card .loading {
  display: none;
  text-align: center;
  margin-top: .75rem;
  font-size: .85rem;
  color: #6b7a8d;
}