@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300&family=Oxanium:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');


:root {
  --leftMargin: 40px;
  --rightMargin: 40px;
  --leftMargin1: 40px;
  --rightMargin1: 40px;
  --section-gap: 120px;
  --margin-top: 80px;
  --white: #ffffff;
  --dark: rgba(12, 12, 12, 1);
  --light-dark: rgba(110, 115, 120, 1);
  --yellow: rgba(234, 179, 8, 1);
  --light-orange: rgba(240, 124, 65, 1);
  --h1: 32px;
  --h2: 28px;
  --h3: 24px;
  --h4: 20px;
  --h5: 16px;
  --h6: 12px;
  --p: 14px;
}

.Montserrat-ff {
  font-family: "Montserrat"
}

.PlusJakartaSans-ff {
  font-family: "Plus Jakarta Sans"
}




html,
body {
  margin: 0;
  padding: 0;
  position: relative;
  font-family: "Oxanium", sans-serif;
  background-color: #F3F7FF;
  color: #000;
  font-weight: 500;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media (min-width: 1800px) and (max-width:2000px) {
  :root {
    --h1: 33px;
    --h2: 29px;
    --h3: 25px;
    --h4: 22px;
    --h5: 17px;
    --h6: 13px;
    --p: 15px;
  }
}

@media (min-width: 2001px) {
  :root {
    --h1: 34px;
    --h2: 30px;
    --h3: 26px;
    --h4: 22px;
    --h5: 18px;
    --h6: 14px;
    --p: 16px;
  }
}

h1,
.h1 {
  font-size: var(--h1);
}

h2,
.h2 {
  font-size: var(--h2);
}

h3,
.h3 {
  font-size: var(--h3);
}

h4,
.h4 {
  font-size: var(--h4);
}

h5,
.h5 {
  font-size: var(--h5);
}

h6,
.h6 {
  font-size: var(--h6);
}

.cursor-p {
  cursor: pointer;
}

a {
  text-decoration: none !important;
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}

.fw-900 {
  font-weight: 900;
}

.fs-10 {
  font-size: clamp(8px, 1vw, 10px);
}

.fs-12 {
  font-size: clamp(10px, 1.2vw, 12px);
}

.fs-13 {
  font-size: clamp(11px, 1.3vw, 13px);
}

.fs-14 {
  font-size: clamp(12px, 1.4vw, 14px);
}

.fs-16 {
  font-size: clamp(13px, 1.6vw, 16px);
}

.fs-18 {
  font-size: clamp(14px, 1.8vw, 18px);
}

.fs-20 {
  font-size: clamp(15px, 2vw, 20px);
}

.fs-23 {
  font-size: clamp(16px, 2.3vw, 23px);
}

.fs-24 {
  font-size: clamp(17px, 2.4vw, 24px);
}

.fs-25 {
  font-size: clamp(17.5px, 2.45vw, 25px);
}

.fs-28 {
  font-size: clamp(18px, 2.8vw, 28px);
}

.fs-32 {
  font-size: clamp(20px, 3.2vw, 32px);
}

.fs-40 {
  font-size: clamp(24px, 4vw, 40px);
}

.fs-42 {
  font-size: clamp(26px, 4.2vw, 42px);
}

.custom-container {
  padding-left: var(--leftMargin);
  padding-right: var(--rightMargin);
}

.custom-container1 {
  padding-left: var(--leftMargin1);
  padding-right: var(--rightMargin1);
}

.blue-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px 34px;
  gap: 8px;
  width: 221px;
  height: 48px;
  background: linear-gradient(88.81deg, #1964FA -2.96%, #0337A0 104.11%);
  border: 1.69px solid #259efc;
  box-shadow: inset -8px -8px 16px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  line-height: 35px;
  text-align: center;
  color: #FFFFFF !important;
}

.blue-btn:hover {
  box-shadow: -2px 0px 20px -6px #ABD6FF;
}

a.my-simulation-btn:hover {
  /* box-shadow: 0 3.2px 7.2px 0 rgb(0 0 0 / 13%), 0 0.6px 1.8px 0 rgb(0 0 0 / 11%); */
  box-shadow: 3px 4px 0px rgb(191 219 254);
}

.blue-gradient-text {
  background: linear-gradient(135deg, #6483C1 1.25%, #182237 97.81%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}

/* 🔹 2 lines truncate */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 🔹 3 lines truncate */
.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 🔹 4 lines truncate */
.text-truncate-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {
  :root {
    --leftMargin: 20px;
    --rightMargin: 20px;
    --margin-top: 30px;
    --leftMargin1: 20px;
    --rightMargin1: 20px;
  }
}

@media (min-width: 1300px) {
  .justify-content-3xl-center {
    justify-content: center !important;
  }

  :root {
    --leftMargin1: 80px;
    --rightMargin1: 80px;
  }
}

@media (min-width: 1500px) {
  :root {
    --leftMargin1: 160px;
    --rightMargin1: 160px;
  }
}

@media (min-width: 2000px) {
  :root {
    --leftMargin: calc(80px * 2);
    --rightMargin: calc(80px * 2);
    --leftMargin1: calc(80px * 3);
    --rightMargin1: calc(80px * 3);
  }
}

@media (min-width: 2500px) {
  :root {
    --leftMargin: calc(80px * 3);
    --rightMargin: calc(80px * 3);
    --leftMargin1: calc(80px * 5);
    --rightMargin1: calc(80px * 5);
  }
}

.navbar {
  /* border-radius: 6.74px; */
  background-color: #ffffff;
  backdrop-filter: blur(6.900000095367432px);
  /* backdrop-filter: blur(33.68421173095703px); */
  /* box-shadow: 3.37px 3.37px 13.47px 0px #132F6729; */
}

.navbar-toggler {
  background-color: transparent !important;
  border: none;
  box-shadow: none !important;
  cursor: pointer;
  display: flex;
  --bs-navbar-toggler-padding-x: 0px;
}

.pointer {
  cursor: pointer;
}

nav.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.navbar-tablist {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.navbar-tablist .tab-item {
  display: flex;
  align-items: center;
  padding: 0px 16px;
  gap: 12px;
  width: 240px;
  height: 48px;
  border-radius: 4px;
}

.navbar-tablist .tab-item .tab-link {
  background-color: transparent;
  border: none;
  font-size: 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  color: #666666;
}

.navbar-tablist .tab-item.active {
  background: linear-gradient(278.42deg, #E6744E -39.16%, #6D17EF 79.58%) !important;
  color: white !important;
  /* transition: all ease 1s; */
}

.navbar-tablist .tab-link {
  color: inherit;
}

.navbar-tablist .tab-item.active .tab-link {
  color: white !important;
}

.navbar-tablist .tab-item.active svg path {
  fill: white;
}

.navbar .navbar-nav .nav-link {
  font-size: 13.47px !important;
  color: #000000B0 !important;
  font-weight: 500;
  line-height: 24px;
}

.navbar .navbar-nav .nav-link:hover {
  font-weight: 600;
}

/* .navbar .nav-link.active::before {
  content: "";
  height: 4px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -18px;
  background: linear-gradient(88.39deg, #F07C40 0.27%, #85421E 207.81%);
  transition: 0.5s transform ease;
  transform: scale3d(1, 1, 1);
  transform-origin: 100% 50%;
  border-radius: 4px;
} */

.navbar .nav-link.active {
  color: #10244C !important;
  position: relative;
  font-weight: 600;
  font-size: 16.84px !important;
}

.navbar-collapse.collapse.show .nav-link.active::before {
  bottom: -2px;
}

.nav-wrapper {

  border: 0.84px solid rgb(255, 255, 255);
  color: #000000B0;
  ;
}

.nav-wrapper.wrapped {
  padding-bottom: 1.5rem !important;
}

.navbar-toggler .line {
  fill: none;
  stroke: #000000B0;
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-toggler .line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

.navbar-toggler .line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}

.navbar-toggler .line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

.navbar-toggler.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

.navbar-toggler.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}

.navbar-toggler.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

.navbar .navbar-nav .nav-link {
  font-size: var(--h5);
}

#header.nav-wrapper>div {
  padding-top: 12px;
  flex-wrap: inherit;
  padding-bottom: 12px;

}

.navbar-toggler {
  background-color: transparent !important;
  border: none;
  box-shadow: none !important;
  cursor: pointer;
  display: flex;
  --bs-navbar-toggler-padding-x: 0px;
}

nav .logo {
  height: 33.33px;
}

.navbar .price_toggle_container {
  backdrop-filter: blur(15.347722053527832px);
  border: 0.38px solid #A2C1FF;
  background-color: #BAC6DEB2;
  border-radius: 6px;
  padding: 3px 4px;
}

.navbar .price_toggle_container button {
  background: linear-gradient(135deg, #ffffff 1.25%, #FFFFFF 97.81%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.navbar .price_toggle_container button span {
  background: linear-gradient(135deg, #6483C1 1.25%, #182237 97.81%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.navbar .price_toggle_container button.active span {
  background: linear-gradient(#175FEF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Active: normal blue text on white background */
.navbar .price_toggle_container button.active {
  background-color: #FFFFFF;
  color: #175FEF;
  /* solid text color */
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  box-shadow:
    0px -1.53px 1.53px 0px #0A103212 inset,
    0px 2.3px 4.6px 0px #07006E08;
}

.navbar .dropdownBTn {
  border: 1.2px solid #FFFFFFB0;
  color: white;
}

.navbar .dropdownBTn::after {
  content: none;
}

.navbar .btn-group .dropdownpfile {
  margin: 0;
  width: 180px !important;
  height: fit-content !important;
  max-height: fit-content !important;
}

.navbar .btn-group .dropdownpfile li {
  margin-top: 2px
}

.navbar .btn-group .dropdownpfile li a {
  border-bottom: 1px solid #000000;
  background-color: #FEFEFE;
  border-radius: 4px;
  padding: 10px 16px;
  text-wrap: wrap;
}

.navbar .btn-group .dropdownpfile li:last-child a {
  border-bottom: none;
}

#headerSearchDropdown li {
  border-top: 1px solid #CBD9E7;
  padding: 13px;
  color: #32343A;
  display: flex;
  gap: 22px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

#headerSearchDropdown li img {
  height: 24px;
  width: 24px;
}

#headerSearchDropdown.dropdown-menu {
  max-height: 300px;
  overflow-y: auto;
}

.header-search-container {
  border: 1px solid #CBD9E7;
  width: 100%;
  max-width: 548px;
  height: 36px;
  border-radius: 4px;
  padding: 0 12px;
  display: flex;
  align-items: center;
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-weight: 400;
  font-size: 14px;
  line-height: 189.5%;
  color: #727272B0;
  outline: none;
}

.search-divider {
  width: 1px;
  height: 60%;
  background-color: #C7CEDD;
  margin: 0 20px 0 12px;
}

.search-icon svg {
  cursor: pointer;
}

@media (max-width:548px) {
  .searchbarRes {
    flex-direction: column;
    gap: 10px !important;
    align-items: start !important;
  }

  .search-container {
    max-width: 350px !important;
    width: 100% !important;
  }
}

@media (max-width:1200px) {
  #header.nav-wrapper>div {
    background-color: #F3F7FF;
  }

  #header.nav-wrapper {
    border: none;
  }
}


.sign-in-btn {
  font-size: 11.79px;
  width: fit-content;
  min-width: 64.94px;
  height: 40px;
  border-radius: 6px;
  border: 0.84px solid rgba(231, 231, 231, 1);
  color: rgba(17, 17, 17, 1) !important;
  background-color: rgba(255, 255, 255, 1) !important;
  text-align: center;
}

footer {
  color: #fff;
  font-size: 16px;
  background: rgba(16, 38, 82, 1);
  padding: 30px 24px;
}

.footer-nav a {
  color: rgba(255, 255, 255, 0.69);
  margin: 0 10px;
  font-weight: 700;
}

.footer-nav a.active {
  font-weight: 800;
  color: rgba(255, 255, 255, 1);
}

.social-icons a {
  color: #fff;
  margin-left: 12px;
  font-size: 20px;
  width: 40px;
  background-color: rgba(255, 255, 255, 0.16);
  height: 40px;
  border-radius: 4px;
  align-content: center;
  text-align: center;
}

.newsletter input {
  background: #142F54;
  border: none;
  color: #fff;
  padding: 8px;
  border-radius: 0px;
  box-shadow: 2px 2px 10px 0px #08090DB0;
  width: 320px;

}

.newsletter input:focus {
  outline: none;
  box-shadow: none;
}

.newsletter button {
  background: #0f2342;
  color: #fff;
  border: 1px solid #fff;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  margin-left: 6px;
}

.footer-bottom {
  font-size: 12px;
  margin-top: 10px;
}

.footer-logo img {
  max-height: 30px;
}

footer .subscribe-btn {
  min-width: 128px;
  width: fit-content;
  height: 42px;
  border-radius: 8px;
  border: 1px solid rgb(126, 138, 162);
  color: #fff;
  padding: 4px;
}

footer .subscribe-btn span {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.08) 100%);
  border: 0.4px solid rgba(255, 255, 255, 0.16);
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: grid;
  place-items: center;

}

button .spinner-border {
  display: none;
}

button.loading .spinner-border {
  display: block;
  pointer-events: none;
}

/* stream now popup */
#streamNowModal .btn-close-btn {
  position: absolute;
  box-shadow: 0px -1px 1px 0px #96A1AC1F inset;
  border: 0.5px solid #F1F4F980;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border-width: 0.5px;
  padding: 7px;
  top: 14px;
  right: 18px;
  background-color: rgb(71, 87, 120);
  color: rgb(140, 172, 237) !important;

}

.modal-close {
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F4F9 100%);
  color: #395284;
  top: 16px;
  right: 16px;
  font-size: 15px;
  height: 34px;
  width: 34px;
  border: 0.5px solid #F1F4F9;
  box-shadow: 0px -1px 1px 0px #96A1AC1F inset;
  border-radius: 6px;
}

#streamNowModal .appBtn {
  width: 142px;
  height: 107px;
  border-radius: 10px;
  border: 1px solid rgb(96, 128, 190);
  background-color: rgb(48, 64, 95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* gap: 12px; */
  transition: all .3s;
}

#streamNowModal .appBtn:hover {
  border: 2px solid rgb(96, 128, 190);
  box-shadow: 0px 0px 30px 1px rgba(209, 209, 209, 0.3);
}

.contactBtn1 {
  background: linear-gradient(88.31deg, #1964FA 0.28%, #0445C8 98.72%);
  border: 0.84px solid #FFFFFF;
  font-size: var(--h5);
  font-weight: 500;
  border-radius: 8px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff !important;
  width: 168px;
  font-weight: 700 !important;
}

#contactUSPopup form input {
  height: 40px;
  border: 1px solid #ced4da !important;
  background-image: none;
  box-shadow: none !important;
}

#contactUSPopup form select {
  height: 40px;
  border: 1px solid #ced4da !important;
  box-shadow: none !important;
  background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHBhdGggZmlsbD0nbm9uZScgc3Ryb2tlPScjMzQzYTQwJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHN0cm9rZS13aWR0aD0nMicgZD0nbTIgNSA2IDYgNi02Jy8+PC9zdmc+");

}

#contactUSPopup textarea {
  resize: none;
  box-shadow: none !important;
  background-image: none;
}

footer .input-error {
  border: 2px solid #e63946 !important;
  /* red */
}

footer .input-success {
  border: 2px solid #2a9d8f !important;
  /* green */
}

#profile_img {
  object-fit: cover;
  max-width: unset;
}

.cartCount {
  position: absolute;
  color: white;
  background-color: #155ae4;
  min-width: 15px;
  height: 15px;
  font-size: 12px;
  border-radius: 50%;
  margin-bottom: 0;
  line-height: 120%;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
}

#headerSearchDropdown {
  width: 116%;
  left: -62px;
}

.streamnowBtn {
  background: linear-gradient(88.31deg, #0DBF5A 0.28%, #179A50 98.72%) !important;
}

a.my-simulation-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 3px 16px;
  gap: 8px;
  /* font-size: 12px; */
  font-weight: 500;
  /* width: 118px; */
  height: 34px;
  color: #145FF4;
  background: #ECF2FE;
  border-radius: 4px;

  /* 
  background-color: #145FF4;
  border-radius: 4px;
  padding: 3.5px 9px;
  font-size: 14px;
  color: #FFFFFF;
  border: none;
  font-weight: 600;
  height: 31px;
  display: flex;
  width: fit-content;
  align-items: center; */
}
/*switch account modal css*/
        .modal-close {
            background: linear-gradient(180deg, #FFFFFF 0%, #F1F4F9 100%);
            color: #395284;
            top: 16px;
            right: 16px;
            font-size: 15px;
            height: 34px;
            width: 34px;
            border: 0.5px solid #F1F4F9;
            box-shadow: 0px -1px 1px 0px #96A1AC1F inset;
            border-radius: 6px;
        }

        #switchAccountModal .switchCard {
            width: 240px;
            height: 240px;
            border-radius: 8px;
            border: 1px solid #CCCCCC;
            background: #FFFFFF;
            display: flex;
            flex-direction: column;
            gap: 24px;
            justify-content: center;
            align-items: center;
            padding: 12px 20px;
        }
        .green-gradient{
          background: linear-gradient(88.31deg, #0DBF5A 0.28%, #179A50 98.72%) !important;
        }
        #switchAccountModal .switchCard.active {
            border: 2px solid #145FF4;
        }


        .closeOutline {
            border: 0.86px solid transparent;
            background: linear-gradient(#fff, #fff) padding-box,
                linear-gradient(88.31deg, #175FEF 0.28%, #17439A 98.72%);
            color: #17439B;
        }
#headerCurrencyToggle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.viewAllBtn {
  color: #2472E7;
  transition: all 0.3s ease;
  position: relative;
  text-decoration: none;
}

.viewAllBtn:hover {
  color: #17439A;
}

/* Optional underline animation effect */
.viewAllBtn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 0%;
  height: 2px;
  background-color: #2472E7;
  transition: width 0.3s ease;
}

.viewAllBtn:hover::after {
  width: 100%;
}

/* ═══════════════════════════════════════════
   SHARED MODAL STYLES
   gs- prefix = getStarted / loginType shared
═══════════════════════════════════════════ */

/* ── Dialog width ── */
.gs-modal-dialog {
  max-width: 1100px;
  width: 100%;
  margin: 1rem auto;
}

/* ── Modal shell ── */
.gs-modal-content {
  border-radius: 10px;
  border: none;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* ── Modal header ── */
.gs-modal-header {
  background: rgb(230, 236, 247);
  border-bottom: none;
  padding: 20px 28px 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Modal title ── */
.gs-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a2e;
  text-align: center;
  width: 100%;
  padding-right: 48px;
  margin: 0;
}

/* ── Close button ── */
.gs-close-btn {
  position: absolute;
  top: 14px;
  right: 20px;
  border: 0.5px solid #a5b7dc;
  box-shadow: 0px -1px 1px 0px #96a1ac1f inset;
  background-color: #ffffff;
  color: rgb(57, 82, 132);
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.gs-close-btn:hover {
  background-color: #eef2f9;
}

/* ── Modal body ── */
.gs-modal-body {
  background: #f4f7fc;
  padding: 28px 28px 24px;
}

/* ── Subtitle ── */
.gs-modal-subtitle {
  text-align: center;
  color: #555555;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 20px;
}

/* ══════════════════════════════════════════
   ROLE CARDS GRID
══════════════════════════════════════════ */

/* ── Cards row ── */
.gs-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
}

/* ── Individual card ── */
.gs-role-card {
  background: #ffffff;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 16px 12px 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* ── Card hover state ── */
.gs-role-card:hover {
  border-color: #1565c0;
  box-shadow: 0 4px 16px rgba(21, 101, 192, 0.13);
  transform: translateY(-2px);
}

/* ── Card selected state ── */
.gs-role-card.gs-card-selected {
  border-color: #15c01d;
  box-shadow: 0 4px 18px rgba(21, 101, 192, 0.18);
}

/* ── Checkmark on selected card ── */
.gs-role-card.gs-card-selected::after {
  content: '✓';
  position: absolute;
  top: 7px;
  right: 10px;
  color: #15c01d;
  font-size: 13px;
  font-weight: 800;
}

/* ── Image wrapper (uniform size) ── */
.gs-card-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  flex-shrink: 0;
  /* background: linear-gradient(135deg, #e3eaf6 0%, #c5d5ee 100%); */
}

/* ── Card image ── */
.gs-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ── Card label ── */
.gs-card-role-label {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
  padding-bottom: 2px;
}

/* ══════════════════════════════════════════
   FOOTER BUTTONS
══════════════════════════════════════════ */

/* ── Footer wrapper ── */
.gs-footer-btns {
  display: flex;
  gap: 14px;
}

/* ── Cancel / Close button ── */
.gs-btn-cancel {
  flex: 1;
  background: #ffffff;
  color: #1a1a2e;
  border: 1.5px solid #c8d0de;
  border-radius: 6px;
  padding: 10px 0;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease;
}

.gs-btn-cancel:hover {
  background: #f0f0f0;
}

/* ── Primary action button ── */
.gs-btn-primary {
  flex: 1;
  background: linear-gradient(88.31deg, #175fef 0.28%, #17439a 98.72%);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 10px 0;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: opacity 0.18s ease, background 0.18s ease;
}

.gs-btn-primary:hover:not(:disabled) {
  background: linear-gradient(88.31deg, #1757d6 0.28%, #102f6e 98.72%);
}

.gs-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════ */

/* ── Large tablets and below (≤ 991px) ── */
@media (max-width: 991px) {
  .gs-modal-dialog {
    max-width: 720px;
  }

  .gs-cards-row {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    justify-content: center;
  }
}

/* ── Tablets and below (≤ 767px) ── */
@media (max-width: 767px) {
  .gs-modal-dialog {
    max-width: 100%;
    margin: 0.5rem;
  }

  .gs-modal-title {
    font-size: 15px;
    padding-right: 44px;
  }

  .gs-modal-body {
    padding: 20px 16px 18px;
  }

  .gs-cards-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* ── Small mobile (≤ 480px) ── */
@media (max-width: 480px) {
  .gs-modal-header {
    padding: 16px 16px 12px;
  }

  .gs-modal-title {
    font-size: 13.5px;
    padding-right: 40px;
  }

  .gs-modal-body {
    padding: 16px 12px 14px;
  }

  .gs-cards-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .gs-footer-btns {
    gap: 10px;
  }

  .gs-btn-cancel,
  .gs-btn-primary {
    font-size: 13px;
    padding: 9px 0;
  }
}