/* ========================================================
   GOOGLE FONTS - POPPINS FAMILY (ALL WEIGHTS & ITALICS)
======================================================== */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: "Poppins", sans-serif;
}

/* ========================================================
   FONT VARIANTS - NORMAL & ITALIC (Poppins)
======================================================== */

/* Normal */
.poppins-thin {
  font-weight: 100;
  font-style: normal;
}
.poppins-extralight {
  font-weight: 200;
  font-style: normal;
}
.poppins-light {
  font-weight: 300;
  font-style: normal;
}
.poppins-regular {
  font-weight: 400;
  font-style: normal;
}
.poppins-medium {
  font-weight: 500;
  font-style: normal;
}
.poppins-semibold {
  font-weight: 600;
  font-style: normal;
}
.poppins-bold {
  font-weight: 700;
  font-style: normal;
}
.poppins-extrabold {
  font-weight: 800;
  font-style: normal;
}
.poppins-black {
  font-weight: 900;
  font-style: normal;
}

/* Italic */
.poppins-thin-italic {
  font-weight: 100;
  font-style: italic;
}
.poppins-extralight-italic {
  font-weight: 200;
  font-style: italic;
}
.poppins-light-italic {
  font-weight: 300;
  font-style: italic;
}
.poppins-regular-italic {
  font-weight: 400;
  font-style: italic;
}
.poppins-medium-italic {
  font-weight: 500;
  font-style: italic;
}
.poppins-semibold-italic {
  font-weight: 600;
  font-style: italic;
}
.poppins-bold-italic {
  font-weight: 700;
  font-style: italic;
}
.poppins-extrabold-italic {
  font-weight: 800;
  font-style: italic;
}
.poppins-black-italic {
  font-weight: 900;
  font-style: italic;
}

/* ========================================================
   SECTION LAYOUT
======================================================== */
.section-form-area {
  font-family: "Poppins", sans-serif;
  background-image: url("../../images/member/form/bg-primary-area.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 100vh;
  width: 100%;
}

/* ========================================================
   BUTTON STYLES
======================================================== */

/* Transparent link-style button */
.btn-transparent {
  color: #ffffff;
  text-decoration: underline;
  background: none;
  border: none;
}

/* Main gradient button */
.btn-app-primary {
  position: relative;
  cursor: pointer;
  background: linear-gradient(90deg, #3a004b 0%, #cb53ef 100%);
  border: none;
  height: 45px;
  color: #ffffff;
  border-radius: 41px;
  overflow: hidden;
  transition: color 0.5s ease;
  z-index: 1;
}

.btn-app-primary::after {
  content: "";
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #cb53ef 0%, #3a004b 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}

.btn-app-primary-outline {
  position: relative;
  cursor: pointer;
  border: 1px solid #fff;
  background: none;
  height: 45px;
  color: #ffffff;
  border-radius: 41px;
  overflow: hidden;
  transition: color 0.5s ease;
  z-index: 1;
}

.btn-app-primary-outline:hover {
  background: #fff;
  color: #cb53ef;
}

.btn-app-success {
  cursor: pointer;
  position: relative;
  background: #00aa33;
  border: none;
  height: 45px;
  color: #ffffff;
  border-radius: 41px;
  overflow: hidden;
  transition: color 0.5s ease;
  z-index: 1;
}

.btn-app-success:hover {
  cursor: pointer;
  position: relative;
  background: #007c25;
  border: none;
  height: 45px;
  color: #ffffff;
  border-radius: 41px;
  overflow: hidden;
  transition: color 0.5s ease;
  z-index: 1;
}

.btn-app-purple {
  cursor: pointer;
  position: relative;
  background: #7047eb;
  border: none;
  height: 45px;
  gap: 5px;
  color: #ffffff;
  border-radius: 41px;
  overflow: hidden;
  transition: color 0.5s ease;
  z-index: 1;
}

.btn-app-purple:hover {
  cursor: pointer;
  position: relative;
  background: #6432fb;
  border: none;
  height: 45px;
  color: #ffffff;
  border-radius: 41px;
  overflow: hidden;
  transition: color 0.5s ease;
  z-index: 1;
}

.btn-app-danger {
  cursor: pointer;
  position: relative;
  background: #ff5d5d;
  border: none;
  height: 45px;
  color: #ffffff;
  border-radius: 41px;
  overflow: hidden;
  transition: color 0.5s ease;
  z-index: 1;
}

.btn-app-danger:hover {
  cursor: pointer;
  position: relative;
  background: #ff4c4c;
  border: none;
  height: 45px;
  color: #ffffff;
  border-radius: 41px;
  overflow: hidden;
  transition: color 0.5s ease;
  z-index: 1;
}

.btn-app-primary:hover::after {
  opacity: 1;
}

.btn-app-primary:hover {
  color: #f0f0f0;
}

/* Transparent button with border on hover */
.btn-app-transparent {
  background: transparent;
  text-decoration: none;
}

.btn-app-transparent:hover {
  background: transparent;
  text-decoration: none;
  border: 1px solid #fff;
}

/* ========================================================
   FORM INPUTS
======================================================== */

/* Input field style */
.form-app-control {
  border: 1px solid #868686;
  height: 45px;
  color: white;
  font-size: 14px;
  background-color: rgba(255, 255, 255, 0.22);
  border-radius: 5px;
}

.form-app-control:disabled,
.form-app-control[readonly] {
  border: 1px solid #868686;
  height: 45px;
  color: white;
  font-size: 14px;
  background-color: rgb(100 100 100 / 22%);
  border-radius: 5px;
}

/* Input focus style */
.form-app-control:focus {
  border: 1px solid #ffffff;
  background-color: rgba(255, 255, 255, 0.22);
  color: white;
}

/* ========================================================
   FORM WRAPPER
======================================================== */
.app-text-primary {
  color: #3a004b;
}

.form-member {
  width: 364px;
}

/* Input group wrapper with icon */
form .form-app-group {
  position: relative;
}

/* Icon container inside input */
.form-app-group .form-app-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  color: white;
  pointer-events: none;
  /* background: rgb(106 60 126); */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Icon size inside the input group */
.form-app-group .form-app-icon svg {
  width: 20px;
  height: 20px;
}

.form-app-title {
  font-size: 26px;
  line-height: 170%;
  font-weight: 400;
}

.section-break {
  display: flex;
  align-items: center;
  text-align: center;
}

.section-break .line {
  flex: 1;
  height: 1px;
  background: #ccc;
}

.section-break .text {
  padding: 0 1rem;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
}

.profile-image-group {
  width: 70px;
  height: 70px;
  text-align: center;
  color: #fff;
  /* background-color: #aeaeae; */
  border-radius: 50%;
  line-height: 70px;
  margin: 0px auto;
}

.card-app {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 15px;
  color: white;
}

.c-spinning-body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../../images/member/form/bg-primary-area.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.c-spinning-loader {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

/* .c-spinning-body.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 3s ease;
} */

.c-spinning-loader__circle {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border-radius: 100%;
  background: linear-gradient(to right, #c04ae5 10%, #33477e 50%);
  animation: spin 1s infinite linear;
}

.c-spinning-loader__circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  border-radius: 100% 0 0 0;
  background: #0064a6;
}

.c-spinning-loader__circle::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 92%;
  height: 92%;
  margin: auto;
  border-radius: 50%;
  background: #fff;
}

.c-spinning-loader__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  transform: translate(-50%, -50%);
  fill: #0064a6;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}