html, body {  max-width: 100% !important; overflow-x: hidden !important; overscroll-behavior-x: none; touch-action: pan-y;   margin: 0; padding: 0; }

body { display: flex; flex-direction: column; min-height: 100vh; }

#scroll-container { flex: 1; /* Pushes the footer to the bottom */ display: flex; flex-direction: column; }


/* Modal Dialog - All sizes */
.custom-modal .modal-dialog { max-width: 600px; width: 94vw; margin-left: auto; margin-right: auto; margin-top: 1.2rem; margin-bottom: 1.2rem; /* Remove display: flex and align-items: center! */ /* min-height: calc(100vh - 2.4rem); Remove this! */ }

/* Modal Content */
.custom-modal-content { background: #fff; border-radius: 20px; box-shadow: 0 8px 40px rgba(0,0,0,0.17), 0 1.5px 4px rgba(0,0,0,0.11); padding: 2.7rem 2.8rem 1.5rem 2.8rem; border: none; font-family: 'Inter', 'Arial', sans-serif; width: 100%; max-width: 100vw; max-height: calc(100vh - 2.4rem); /* Never exceed screen */ overflow-y: auto; /* Enable scrolling INSIDE modal if content is tall */ position: relative; display: flex; flex-direction: column; }

/* Ensure close button always visible on scroll */
.btn-close-modal { position: absolute; top: 22px; right: 24px; background: none; border: none; font-size: 2.1rem; color: #111; z-index: 10; width: 38px; height: 38px; line-height: 1; cursor: pointer; }

.custom-modal-title { margin-top: 0.6rem; margin-bottom: 1.1rem; font-size: 2.2rem; font-weight: 800; text-align: left; letter-spacing: -0.01em; }

.custom-modal-subtitle { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.6rem; margin-top: 0.1rem; color: #111; }

.custom-modal-description { color: #232323; font-size: 1rem; line-height: 1.42; margin-bottom: 0.3rem; }

.custom-input { background: #f4f4f4; border: 1.5px solid #e2e2e2; border-radius: 13px; font-size: 1rem; padding: 0.75rem 1rem; height: 50px; font-weight: 500; box-shadow: none !important; outline: none; }
.custom-input:focus { border-color: #bdbdbd; background: #f7f7f7; }

.custom-submit { background: #111; color: #fff; border: none; border-radius: 100px; font-size: 1.17rem; font-weight: 700; height: 52px; margin-top: 0.7rem; box-shadow: none !important; outline: none; transition: background 0.15s; }
.custom-submit:hover,
.custom-submit:focus { background: #000; color: #fff; }

.custom-privacy-note { font-size: 0.95rem; color: #666; opacity: 0.77; margin-top: 1.5rem; text-align: left; margin-bottom: 0; padding-bottom: 0; }

/* Remove default modal header/footer padding */
.custom-modal-content .modal-header,
.custom-modal-content .modal-footer { display: none; }

/* Responsive for mobile */
@media (max-width: 768px) {
    .custom-modal .modal-dialog { max-width: 97vw !important; margin: 0; }
    .custom-modal-content { padding: 1.1rem 0.7rem 1.2rem 0.7rem; border-radius: 12px; }
    .custom-modal-title { font-size: 1.32rem; margin-bottom: 0.6rem; }
}

@media (max-width: 576px) {
    .custom-modal .modal-dialog { max-width: 100vw !important; margin: 0; }
    .custom-modal-content { padding: 1.2rem 0.5rem 1rem 0.5rem; border-radius: 10px; max-height: 100vh; overflow-y: auto; padding-bottom: calc(env(safe-area-inset-bottom, 0) + 1.2rem); /* iOS notch */ }
    .custom-modal-title { font-size: 1.1rem; margin-bottom: 0.5rem; }
    .custom-modal-subtitle { font-size: 1rem; }
    .btn-close-modal { top: 10px; right: 12px; font-size: 1.4rem; width: 30px; height: 30px; }
    .custom-question-block { padding: 0.6rem 0.3rem; }
    .Wedai-footer { padding-top: 42px; padding-bottom: 35px; text-align: center; }
    .Wedai-footer .footer-logo img { height: 46px; }
    .Wedai-footer .footer-social .social-icon { font-size: 1.28rem; margin: 0 6px; }
    .Wedai-footer .footer-email,
    .Wedai-footer .footer-bottom { font-size: 0.97rem; }
}
/* Modal background overlay for full viewport on mobile */
@media (max-width: 576px) {
    .modal-backdrop.show { height: 100vh; min-height: 100vh; }
}


.custom-question-block { background: #f9f9fc; border-radius: 16px; padding: 1.1rem 1.2rem 1.1rem 1.2rem; margin-bottom: 1.4rem; box-shadow: 0 1.5px 9px rgba(30,32,65,0.05); border: 1.2px solid #eee; transition: box-shadow 0.17s; position: relative; }
.custom-question-block:hover { box-shadow: 0 8px 30px rgba(30,32,65,0.11); border-color: #e5e7fb; }

.custom-question-label { font-size: 1.08rem; font-weight: 600; color: #181a24; margin-bottom: 0.7rem; display: block; letter-spacing: -0.005em; }


.custom-radio-group { display: flex; gap: 2.4rem; margin-top: 0.15rem; align-items: center; }


.custom-radio-label { display: flex; align-items: center; border-radius: 9px; padding: 0.36rem 1.45rem 0.36rem 1.2rem; font-size: 1.07rem; font-weight: 600; cursor: pointer; background: #f2f3fa; border: 1.7px solid #e2e2e2; color: #23253a; user-select: none; margin: 0 0.26rem 0 0; transition: border-color 0.13s, background 0.13s, color 0.13s; min-width: 70px; min-height: 39px; box-shadow: none; position: relative; }


/* Yes/No hover and active */
.custom-radio-group input[type="radio"]:checked + .custom-radio-label { background: #eceefd; border-color: #373fbb; color: #191b3a; }
.custom-radio-label:hover { border-color: #b7bcf8; background: #f7f7fe; }

/* Hide the ugly default radio, but keep accessible */
.custom-radio-group input[type="radio"] { opacity: 0; position: absolute; /*left: -9999px;*/ }


.form-select.custom-input { background: #f4f4f4; border-radius: 13px; border: 1.5px solid #e2e2e2; font-size: 1rem; font-weight: 500; height: 50px; box-shadow: none !important; outline: none; color: #242424; }
.form-select.custom-input:focus { border-color: #bdbdbd; background: #f7f7f7; }
.Wedai-footer { background: #D90217; color: #fff; padding-top: 70px; padding-bottom: 60px; margin-bottom: 0; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: 0 -4px 24px 0 rgba(0,0,0,0.04); }

.Wedai-footer .footer-logo img { height: 60px; /* You can adjust size here */ width: auto; filter: drop-shadow(0 0 4px rgba(0,0,0,0.14)); }

.Wedai-footer .footer-link,
.Wedai-footer .footer-link:visited { color: #fff; text-decoration: underline; opacity: 0.96; transition: opacity 0.15s; }
.Wedai-footer .footer-link:hover { opacity: 1; text-decoration: underline; }

.Wedai-footer .footer-social .social-icon { display: inline-block; margin: 0 10px; font-size: 1.7rem; color: #fff; transition: color 0.15s; }
.Wedai-footer .footer-social .social-icon:hover { color: #fffbe5; }



.floating-getintouch { position: fixed; bottom: 18px; right: 18px; z-index: 4000; background: #D90217; color: #fff; padding: 14px 18px; border-radius: 999px; box-shadow: 0 3px 16px 0 rgba(0,0,0,0.14); font-size: 1.2rem; font-weight: 600; transition: background 0.18s; }
.floating-getintouch:hover { background: #a90011; color: #fff; }

@media (min-width: 576px) {
    .floating-getintouch { display: none; }
}

.launch-announcement { font-size: 1.25rem; font-weight: 600; color: #D90217; text-align: center; margin-bottom: 1.2rem; animation: fadeInUp 1.2s ease-out; }

@media (max-width: 768px) {
    .launch-announcement { font-size: 1.05rem; }
}

/* Optional animation */
@keyframes fadeInUp {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.hero-banner .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
.hash-tags-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem; padding: 1.2rem 1rem; margin: 0 auto; max-width: 100%; box-sizing: border-box; list-style: none; }

.hash-tags { max-width: 200px; /* Prevent giant tags */ min-width: 90px; /* Avoid too narrow */ background: #f5f5f5; border-radius: 999px; padding: 0.5rem 1.2rem; font-size: clamp(0.82rem, 2.2vw, 1rem); font-weight: 600; line-height: 1.35; box-shadow: 0 1px 3px rgba(0,0,0,0.08); text-align: center; /* ✅ New fixes */ flex: 0 1 auto; /* Allow tags to shrink only when needed */ max-width: 90vw; /* Prevent overly narrow bubbles */ white-space: normal; word-break: break-word; overflow-wrap: break-word; }

.hash-tags p { margin: 0; padding: 0; font-size: inherit; white-space: normal; word-break: break-word; text-overflow: ellipsis; line-height: 1.25; }

/* Edge fix for very narrow phones */
@media (max-width: 420px) {
    .hash-tags-wrapper { justify-content: flex-start; }
    .hash-tags { padding: 0.4rem 0.9rem; font-size: 0.86rem; }
}

/*@keyframes orbit {
    0% { transform: rotate(0deg) translateX(80px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}*/

.hero-banner .hash-tags-wrapper {
    position: relative;
    width: clamp(320px, 60vw, 800px);
    margin: 0 auto;
    padding: 1.2rem 1rem 1.2rem 1rem;
    height: clamp(120px, 10vw, 180px);  /* <-- this line! */
    /* Remove fixed height! */
    min-height: unset;
    /*height: auto;*/
    box-sizing: border-box;
}
.hero-banner .hash-tags-wrapper .hash-tags { display: inline-flex !important; align-items: center; justify-content: center; padding: clamp(5px, 0.521vw, 20px) clamp(12px, 0.833vw, 32px); border-radius: clamp(28px, 2.5vw, 68px); max-width: 200px;   min-width: 100px;  height: 2.8rem;    white-space: nowrap; font-weight: 600; color: #000; }

/* ✨ Only apply orbit animation on screens smaller than 768px */
@media (max-width: 767px) {
  .hero-banner .hash-tags-wrapper .hash-tags-1 {
    animation: orbit 9s linear infinite;
  }
  .hero-banner .hash-tags-wrapper .hash-tags-2 {
    animation: orbit 10s linear infinite;
    animation-delay: -2s;
  }
  .hero-banner .hash-tags-wrapper .hash-tags-3 {
    animation: orbit 11s linear infinite;
    animation-delay: -4s;
  }
  .hero-banner .hash-tags-wrapper .hash-tags-4 {
    animation: orbit 12s linear infinite;
    animation-delay: -6s;
  }
  .hero-banner .hash-tags-wrapper .hash-tags-5 {
    animation: orbit 10s linear infinite;
    animation-delay: -8s;
  }
  .hero-banner .hash-tags-wrapper .hash-tags-6 {
    animation: orbit 9s linear infinite;
    animation-delay: -10s;
  }
}
@media (min-width: 768px) {
  .hero-banner .hash-tags-wrapper .hash-tags-1 {
    animation: float-bob-y 5.5s ease-in-out infinite;
  }
  .hero-banner .hash-tags-wrapper .hash-tags-2 {
    animation: float-bob-y 6s ease-in-out infinite;
    animation-delay: -0.3s;
  }
  .hero-banner .hash-tags-wrapper .hash-tags-3 {
    animation: float-bob-y 6.5s ease-in-out infinite;
    animation-delay: -0.6s;
  }
  .hero-banner .hash-tags-wrapper .hash-tags-4 {
    animation: float-bob-y 5.7s ease-in-out infinite;
    animation-delay: -0.9s;
  }
  .hero-banner .hash-tags-wrapper .hash-tags-5 {
    animation: float-bob-y 6.3s ease-in-out infinite;
    animation-delay: -1.2s;
  }
  .hero-banner .hash-tags-wrapper .hash-tags-6 {
    animation: float-bob-y 5.9s ease-in-out infinite;
    animation-delay: -1.5s;
  }


}

@keyframes float-bob-y {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
/* Common orbit animation */
@keyframes orbit {
  0% { transform: rotate(0deg) translateX(80px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}

@keyframes float-bob-y {
  0% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

/* MOBILE: Orbit animation */
@media (max-width: 767px) {
 .hero-banner .hash-tags-wrapper {
    position: relative;
    width: 100%;
    /* height: 300px;  REMOVE THIS LINE! */
    padding: 1.2rem 1rem 1.2rem 1rem; /* Use padding for spacing */
    min-height: unset;
    height: auto;
  }

  .hero-banner .hash-tags-wrapper .hash-tags {
    position: absolute;
  }

  .hero-banner .hash-tags-wrapper .hash-tags-1 {
    animation: orbit 9s linear infinite;
  }
  .hero-banner .hash-tags-wrapper .hash-tags-2 {
    animation: orbit 10s linear infinite;
    animation-delay: -2s;
  }
  .hero-banner .hash-tags-wrapper .hash-tags-3 {
    animation: orbit 11s linear infinite;
    animation-delay: -4s;
  }
  .hero-banner .hash-tags-wrapper .hash-tags-4 {
    animation: orbit 12s linear infinite;
    animation-delay: -6s;
  }
  .hero-banner .hash-tags-wrapper .hash-tags-5 {
    animation: orbit 10s linear infinite;
    animation-delay: -8s;
  }
  .hero-banner .hash-tags-wrapper .hash-tags-6 {
    animation: orbit 9s linear infinite;
    animation-delay: -10s;
  }
}

/* DESKTOP: Pyramid layout with float animation */
@media (min-width: 768px) {
  .hero-banner .hash-tags-wrapper {
    /* No height here either */
    min-height: unset;
    height: auto;
    padding-bottom: 1.5rem;
  }

  .hero-banner .hash-tags-wrapper .hash-tags {
    position: absolute;
    margin: 0;
  }

  /* Row 1 */
  .hero-banner .hash-tags-wrapper .hash-tags-1 {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: float-bob-y 5.5s ease-in-out infinite;
  }

  /* Row 2 */
  .hero-banner .hash-tags-wrapper .hash-tags-2 {
    top: 90px;
    left: 36%;
    animation: float-bob-y 6s ease-in-out infinite;
    animation-delay: -0.3s;
  }

  .hero-banner .hash-tags-wrapper .hash-tags-3 {
    top: 90px;
    left: 64%;
    animation: float-bob-y 6.5s ease-in-out infinite;
    animation-delay: -0.6s;
  }

  /* Row 3 */
  .hero-banner .hash-tags-wrapper .hash-tags-4 {
    top: 180px;
    left: 22%;
    animation: float-bob-y 5.7s ease-in-out infinite;
    animation-delay: -0.9s;
  }

  .hero-banner .hash-tags-wrapper .hash-tags-5 {
    top: 180px;
    left: 50%;
    transform: translateX(-50%);
    animation: float-bob-y 6.3s ease-in-out infinite;
    animation-delay: -1.2s;
  }

  .hero-banner .hash-tags-wrapper .hash-tags-6 {
    top: 180px;
    left: 78%;
    animation: float-bob-y 5.9s ease-in-out infinite;
    animation-delay: -1.5s;
  }
}
.hero-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding: 0 1rem;
}

.hash-tags-1 { background-color: #9FE1F5  !Important ;} /* 🔴 Fintech - Wedai Red */
.hash-tags-2 { background-color: #9FF5AF  !Important; } /* 🟢 Environment - Eco Green */
.hash-tags-3 { background-color: #8FFF36  !Important; } /* 🔵 Ecomart - Royal Blue */
.hash-tags-4 { background-color: #F5F456  !Important; } /* 🟣 Business Services - Purple */
.hash-tags-5 { background-color: #F59F9F  !Important; } /* 🟠 Software Solutions - Amber */
.hash-tags-6 { background-color: #EE9FF5  !Important; } /* 🌸 Job Opening - Rose Pink */

.hash-tags p.subtitle {
  color: inherit !important;  /* Force inherit if any previous rule overrides */
}
.hash-tags .subtitle.black {
  color: inherit !important;
}

.hash-tags:hover {
  background-color: currentColor;
  color: #fff;
}


/* --- Survey Modal Improvements --- */
.custom-question-block {
    background: #f9f9fc;
    border-radius: 16px;
    padding: 1.3rem 1.2rem 1.2rem 1.2rem;
    margin-bottom: 1.55rem;
    box-shadow: 0 1.5px 9px rgba(30,32,65,0.07);
    border: 1.2px solid #eee;
    transition: box-shadow 0.17s;
    position: relative;
}

.custom-radio-group, .custom-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.3rem 1.1rem;
    margin-top: 0.2rem;
    align-items: flex-start;
}
.custom-radio-group label,
.custom-checkbox-group label.form-check-label{
  box-sizing: border-box;
  border-width: 1.5px;          /* lock width */
}

.custom-radio-group input[type="radio"]:checked + label,
.custom-checkbox-group input[type="checkbox"]:checked + label.form-check-label{
  border-width: 1.5px;          /* don’t grow on checked */
}

.custom-radio-group label,
.custom-checkbox-group label.form-check-label {
    display: flex;
    align-items: center;
    border-radius: 13px;
    padding: 0.75rem 1.5rem;
    font-size: 1.07rem;
    font-weight: 600;
    cursor: pointer;
    background: #f2f3fa;
    border: 1.5px solid #e2e2e2;
    color: #23253a;
    min-width: 130px;
    min-height: 44px;
    box-shadow: none;
    margin-bottom: 0.3rem;
    margin-right: 0;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
    position: relative;
    user-select: none;
    justify-content: center;
}

/* remove the old rule completely */
.custom-radio-group input[type="radio"],
.custom-checkbox-group input[type="checkbox"]{
  position: absolute !important;
  /*left: -9999px !important;*/
  opacity: 0 !important;
  width: 0; height: 0; margin: 0; padding: 0;
}


.custom-radio-group input[type="radio"]:checked + label,
.custom-checkbox-group input[type="checkbox"]:checked + label.form-check-label {
    background: #eceefd;
    border-color: #373fbb;
    color: #191b3a;
    box-shadow: 0 1px 8px rgba(54,66,181,0.09);
}

.custom-radio-group label:hover,
.custom-checkbox-group label.form-check-label:hover {
    border-color: #b7bcf8;
    background: #f7f7fe;
}

.custom-checkbox-group .form-check {
    margin-right: 0;
    margin-bottom: 0.3rem;
}

.custom-checkbox-group label.form-check-label {
    padding-left: 1.5rem;
    position: relative;
}

.custom-checkbox-group label.form-check-label:before {
    content: '';
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 1.5px solid #bcbcbc;
    border-radius: 4px;
    background: #fff;
}

.custom-checkbox-group input[type="checkbox"]:checked + label.form-check-label:before {
    background: #373fbb;
    border-color: #373fbb;
}
.custom-checkbox-group input[type="checkbox"]:checked + label.form-check-label:after {
    content: '';
    position: absolute;
    left: 1.37rem;
    top: 50%;
    transform: translateY(-55%) rotate(45deg);
    width: 8px;
    height: 14px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    pointer-events: none;
}

/* Mobile stacking and padding for cards */
@media (max-width: 768px) {
    .custom-radio-group, .custom-checkbox-group {
        gap: 1.1rem 0.6rem;
    }
    .custom-radio-group label,
    .custom-checkbox-group label.form-check-label {
        min-width: 105px;
        font-size: 0.97rem;
        padding: 0.62rem 0.7rem;
    }
}

/* Accessibility: focus visible */
.custom-radio-group input[type="radio"]:focus + label,
.custom-checkbox-group input[type="checkbox"]:focus + label.form-check-label {
    outline: 2.5px solid #3536b8;
    outline-offset: 2px;
}
/* --- Minimize popup text and add spacing between icon and label text --- */

/* 1. Minimize all modal popup text sizes (including questions/answers/input) */
.custom-modal-content {
    font-size: 0.98rem !important;
}
.custom-modal-title, .custom-modal-subtitle {
    font-size: 1.16rem !important;
    /* Title size is reduced, but remains larger than body */
}
.custom-question-label {
    font-size: 1.03rem !important;
}

.custom-input,
.form-select.custom-input,
.custom-submit {
    font-size: 0.97rem !important;
    height: 44px !important;
    padding: 0.65rem 0.7rem !important;
}

/* 2. Extra space between checkbox/radio and label text (applies to both) */
.custom-radio-group label,
.custom-checkbox-group label.form-check-label {
    padding-left: 3.2rem !important;    /* Increase padding for icon space */
    font-size: 0.98rem !important;
    letter-spacing: 0.01em;
    line-height: 1.26;
    /* The icon (real/fake) will be on the left, text more to the right */
    justify-content: flex-start !important;
}

/* Fix for radio icon spacing (place after the custom-radio-group input) */
.custom-radio-group label::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #bcbcbc;
    background: #fff;
    margin-right: 0.62em;
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
}

.custom-radio-group input[type="radio"]:checked + label::before {
    background: #373fbb;
    border-color: #373fbb;
    box-shadow: 0 0 0 3px #eceefd;
}

/* Checkmark for checked radio */
.custom-radio-group input[type="radio"]:checked + label::after {
    content: '';
    position: absolute;
    left: 1.49rem;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    background: #fff;
    border-radius: 50%;
    z-index: 2;
}

/* For checkboxes (already has spacing, but let's make it slightly more) */
.custom-checkbox-group label.form-check-label {
    padding-left: 3.3rem !important;
}
.custom-checkbox-group label.form-check-label:before {
    left: 1.2rem !important;
}
.custom-checkbox-group input[type="checkbox"]:checked + label.form-check-label:after {
    left: 1.5rem !important;
}

/* Reduce padding and gap on mobile further */
@media (max-width: 768px) {
    .custom-modal-content { font-size: 0.90rem !important; }
    .custom-radio-group label,
    .custom-checkbox-group label.form-check-label {
        font-size: 0.92rem !important;
        padding-left: 2.6rem !important;
    }
    .custom-question-label { font-size: 0.99rem !important; }
}

/* dialog width: no vw */
.custom-modal .modal-dialog{
  max-width: 600px;
  width: calc(100% - 2.4rem);   /* replaces 94vw */
  margin: 1.2rem auto;
}

/* content: no vw + kill x-overflow */
.custom-modal-content{
  max-height: calc(100dvh - 2.4rem);
  overflow-y: scroll !important;        /* 👈 always reserve space */
  scrollbar-gutter: stable both-edges;  /* nice in modern engines */
  overflow-x: clip !important;
  -webkit-overflow-scrolling: touch;
}
@supports not (scrollbar-gutter: stable) {
  .custom-modal-content { overflow-y: scroll; }
}

/* mobile: also remove vw here */
@media (max-width: 768px){
  .custom-modal .modal-dialog{
    max-width: none !important;
    width: calc(100% - 1rem) !important; /* replaces 97vw */
    margin: 0.5rem auto !important;
  }
}
@media (max-width: 576px){
  .custom-modal .modal-dialog{
    max-width: none !important;
    width: 100% !important;     /* replaces 100vw */
    margin: 0 !important;
  }
  .custom-modal-content{
    max-width: 100% !important; /* keep */
    padding-bottom: calc(env(safe-area-inset-bottom,0) + 1.2rem);
  }
}

/* while modal is open: lock page scroll (kept) */
html.modal-open, body.modal-open{height:100%; overflow:hidden!important;}
.modal-open #scroll-container{height:100vh; overflow:hidden!important;}
.modal { padding-left: 0 !important; padding-right: 0 !important; }
.modal .modal-dialog { background: transparent !important; }

/* Fullscreen loader */
.loader-overlay{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: rgba(16,16,16,0.25);
  backdrop-filter: blur(6px) saturate(120%);
}

/* Card */
.loader-card{
  background: #ffffff;
  border-radius: 18px;
  padding: 26px 28px 22px;
  box-shadow: 0 12px 48px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
  min-width: 260px;
  max-width: min(92vw, 420px);
  text-align: center;
}

/* Spinner */
.spinner{ width: 64px; height: 64px; margin: 0 auto 12px; position: relative; }
.spinner-svg{ width: 100%; height: 100%; transform-origin: center; animation: spin 1.2s linear infinite; }
.spinner-track{ fill: none; stroke: #eaeaea; stroke-width: 6; }
.spinner-head{ fill: none; stroke: #D90217; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 60; animation: dash 1.2s ease-in-out infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dash {
  0%   { stroke-dashoffset: 80; }
  50%  { stroke-dashoffset: 10; }
  100% { stroke-dashoffset: 80; }
}

/* Text */
.loader-text{ font-weight: 800; font-size: 1.06rem; letter-spacing: .01em; color: #111; margin-bottom: 4px; }
.loader-sub{ font-size: .96rem; color: #666; }

/* Respect RTL in the loader too */
html[dir="rtl"] .loader-card{ text-align: center; }


/* Stop Bootstrap's body padding compensation from pushing content in RTL */
html[dir="rtl"] body { padding-right: 0 !important; }
html[dir="rtl"] body.modal-open { padding-right: 0 !important; }

/* Make sure the dialog centers correctly in RTL too */
html[dir="rtl"] .modal-dialog {
  margin-inline: auto;       /* replaces left/right auto */
}
html[dir="rtl"] .modal { direction: rtl; text-align: right; }

/* example: if you have ::before circles placed at left in LTR */
html[dir="rtl"] .custom-radio-label::before { left: auto; right: 1rem; }
html[dir="rtl"] .custom-radio-label { padding-left: 1rem; padding-right: 3rem; }
/* --- Mirror custom radios for RTL when using generic label selector --- */
html[dir="rtl"] .custom-radio-group label {
  padding-left: 1rem !important;
  padding-right: 3.2rem !important;
}
html[dir="rtl"] .custom-radio-group label::before {
  left: auto; right: 1.1rem; margin-right: 0; /* icon moves to the right */
}
html[dir="rtl"] .custom-radio-group input[type="radio"]:checked + label::after {
  left: auto; right: 1.49rem;   /* inner dot */
}

/* --- Mirror custom checkboxes for RTL too --- */
html[dir="rtl"] .custom-checkbox-group label.form-check-label {
  padding-left: 1.2rem !important;
  padding-right: 3.3rem !important;
}
html[dir="rtl"] .custom-checkbox-group label.form-check-label:before {
  left: auto !important; right: 1.2rem !important;
}
html[dir="rtl"] .custom-checkbox-group input[type="checkbox"]:checked + label.form-check-label:after {
  left: auto !important; right: 1.5rem !important;
}
/* Do NOT color the dialog; only the .modal-content should be white */
.modal .modal-dialog,
.custom-modal .modal-dialog {
  background: transparent !important;
  outline: none !important;
  border: 0 !important;
}

/* Keep the background on the content card */
.custom-modal .modal-content,
.modal .modal-content {
  background: #fff !important;
  border-radius: 20px;   /* your design */
  border: 0;
}
/* Center logically in both LTR and RTL */
.custom-modal .modal-dialog {
  margin-inline: auto !important;
  width: min(600px, calc(100% - 2.4rem)) !important; /* replaces any 94vw, 97vw, etc. */
}

/* Content must never cause a horizontal scroll that triggers a recalc */
.custom-modal-content {
  max-width: 100% !important;
  overflow-x: clip !important;
}
/* Radios */
html[dir="rtl"] .custom-radio-group label {
  padding-right: 3.2rem !important;
  padding-left: 1rem !important;
  justify-content: flex-end !important;
}
html[dir="rtl"] .custom-radio-group label::before {
  right: 1.1rem; left: auto; margin-right: 0;
}
html[dir="rtl"] .custom-radio-group input[type="radio"]:checked + label::after {
  right: 1.49rem; left: auto;
}

/* Checkboxes */
html[dir="rtl"] .custom-checkbox-group label.form-check-label {
  padding-right: 3.3rem !important;
  padding-left: 1.2rem !important;
  justify-content: flex-end !important;
}
html[dir="rtl"] .custom-checkbox-group label.form-check-label:before {
  right: 1.2rem !important; left: auto !important;
}
html[dir="rtl"] .custom-checkbox-group input[type="checkbox"]:checked + label.form-check-label:after {
  right: 1.5rem !important; left: auto !important;
}
/* 1) The wrapper must be transparent */
.modal .modal-dialog,
.custom-modal .modal-dialog {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 2) Only the card gets the white background */
.modal .modal-content,
.custom-modal .modal-content,
.custom-modal-content {
  background: #fff !important;
  border: 0 !important;
  border-radius: 20px !important;
}

/* 3) Keep body padding hack from shifting layout in RTL */
html[dir="rtl"] body,
html[dir="rtl"] body.modal-open {
  padding-right: 0 !important;
  padding-left: 0 !important;
  --bs-body-scrollbar-width: 0 !important;
}
/* Use this for both radio & checkbox inputs instead of left:-9999px */
.custom-choice-input {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
  opacity: 0 !important;
}