.swal2-popup .actions,

#campaign-register-form .actions {

  position: relative;

  z-index: 10002;

}

.fixed-footer, .sticky-bar {

  z-index: 9000; 

}

.swal2-popup button[type="submit"] {

  pointer-events: auto !important;

  z-index: 10002;

}

.auth-or-greeting { position: relative; display: inline-block; }

.auth-dropdown { position: relative; }



.auth-trigger {

  display: inline-flex; align-items: center; gap: .4rem;

  background: transparent; border: 1px solid #e0e0e0; border-radius: .5rem;

  padding: .45rem .7rem; cursor: pointer; line-height: 1; font: inherit;

}

.auth-trigger:focus { outline: 2px solid #0099ff40; outline-offset: 2px; }

.auth-caret { font-size: .9em; }



.auth-menu {

  position: absolute; inset-inline-end: 0; margin-top: .35rem; min-width: 180px;

   border-radius: 30px;

    background: #000;

    border: 2px solid transparent;

    background-image: linear-gradient(#000, #000), linear-gradient(180deg, #F5682C 0%, #F509B7 100%);

    color: #fff;

    background-origin: border-box;

    background-clip: padding-box, border-box;

    outline: none;

  box-shadow: 0 10px 25px rgba(0,0,0,.08); padding: .35rem; display: none; z-index: 50;

}

.auth-menu.open { display: block; }

.auth-trigger:hover .auth-menu { display: block; }



a.auth-item {

  display: block; padding: .55rem .65rem; border-radius: .45rem;

  text-decoration: none; 

  color: #fff !important;

}

.auth-item:hover, .auth-item:focus {color:#D80C8C !important; outline: none; }


button.auth-trigger{
  width: 100%;
  padding: 6px 12px;
  border-radius: 30px;
  border: none;
  background: transparent;
  color: #102538;
  position: relative;
  overflow: hidden;
  transition: 0.25s ease;
}

button.auth-trigger:hover,
button.auth-trigger:focus{
  color: #fff;
}

button.auth-trigger:hover::before,
button.auth-trigger:focus::before{
  opacity: 1;
}

button.auth-trigger::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, #2E5F80 0%, #f700a0 100%);
  opacity: 0;
  transition: 0.25s ease;
  z-index: 0;
}

button.auth-trigger > *{
  position: relative;
  z-index: 1;
}

.swal2-container {

  backdrop-filter: blur(10px);

  background-color: rgba(255, 255, 255, 0.4) !important; 

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  z-index: 99999 !important;

}

.swal2-popup {

  animation: none !important;

}


button.auth-by-phone-btn.btn-register {
  background: #fff;
  color: #2E5F80;
  font-size: 20px;
  border-radius: 30px;
  padding: 10px 28px;
  border: 2px solid transparent;

  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(90deg, #2E5F80, #f700a0);

  background-origin: border-box;
  background-clip: padding-box, border-box;

  transition: all 0.3s ease;
}

button.auth-by-phone-btn.btn-register:hover {
  color: #f700a0;
  box-shadow: 0 8px 20px rgba(247, 0, 160, 0.2);
  transform: translateY(-2px);
}
.campaign-apply-actions {

    display: flex;

    flex-direction: column;

    gap: 30px;

}

button.apply-campaign-btn {

  min-width: 170px;
  margin: auto;

background: linear-gradient(90deg, #2E5F80 0%, #f700a0 100%);

  background-size: 150% 100%;
  background-position: 0 0;
  transition: all 0.35s ease-in-out;

  color: #fff;
  border-radius: 24px;
  font-size: 20px;
}



button.apply-campaign-btn.apply-campaign-guest-btn {

    border: 2px solid #2E5F80;
    color:#2E5F80;
    background: #fff;

}



button.apply-campaign-btn:hover {

  background-position: 100% 0;

  transition: all 0.35s ease-in-out;

}



.campaign-popup {

  padding: 16px;

    background: #fff;

  color: #fff;

  border-radius: 24px;

  overflow: hidden;
box-shadow: 0 8px 24px rgba(16, 37, 56, 0.08), 0 2px 6px rgba(16, 37, 56, 0.04);
}



.mh-100.campaign-popup {

  min-height: 70vh;

}

button.next-step_style,

.campaign-popup  button.submit-form,

.registerFormStyle button[type=submit],

.campaign-popup  #send-code-btn,

.campaign-popup button#btn-send-code,

.campaign-popup button#btn-verify-code {

margin-top: 20px;
background: linear-gradient(90deg, #2E5F80 0%, #f700a0 100%);
color: #fff !important;
border-radius: 30px;
border: none; 
padding: 10px 24px;
font-weight: 500;
font-size: 20px;
min-width: 140px;
transition: 0.3s ease-in-out;
display: inline-block; 

}





button.prev-step_style,

button.campaign-cancel,

button.swal2-confirm.swal2-styled {

    margin-top: 20px;

    background-color: transparent !important;

    color: #102538 !important;

    border: 2px solid #102538 !important;

    border-radius: 30px;

    padding: 10px 24px;

    font-weight: 500;

    font-size: 20px;

    min-width: 120px;

    transition: 0.3s ease-in-out;

}

button.swal2-confirm.campaign-confirm,

button.swal2-confirm.campaign-popup__btn--confirm.swal2-styled {
  background: linear-gradient(90deg, #2E5F80 0%, #f700a0 100%);
  background-size: 150% 100%;
  background-position: 0 0;

  color: #fff !important;

  border-radius: 30px;
  border: 2px solid transparent;

  padding: 10px 24px;
  font-weight: 500;
  font-size: 16px;
  min-width: 140px;

  transition: all 0.35s ease-in-out;

}



button.swal2-confirm.campaign-confirm:hover {

  filter: brightness(1.1);

}



button.swal2-cancel.campaign-cancel, 

button.campaign-cancel,

button.campaign-popup__btn--cancel {

  background-color: transparent !important;

  color: #102538 !important;

  border: 2px solid #102538 !important;

  border-radius: 30px;

  padding: 10px 24px;

  font-weight: 500;

  font-size: 16px;

  min-width: 140px;

  transition: 0.3s ease-in-out;

}



button.swal2-cancel.campaign-popup__btn--cancel.mt-20.swal2-styled {

  margin-top:20px;

}



button.swal2-cancel.campaign-cancel:hover {

  background-color: rgba(255, 255, 255, 0.1);

}



.campaign-input {

  margin: 0 auto;

  border-radius: 6px;

  padding: 10px;

  color: #000 !important;

  box-sizing: border-box;

  font-size: 20px;

}



.campaign-popup h2 {

  font-size: clamp(22px, 24px, 24px);
  color: #102538;
}

#campaign-register-popup {

  background: #000;

  padding: 30px;

  max-width: 500px;

  margin: 0 auto;

  border-radius: 16px;

}



.registerFormStyle input,

.registerFormStyle select {

  display: block;

  margin-bottom: 10px;

  padding: 8px;

}

.registerFormStyle .checkbox-item input {

  margin-bottom: 0;

  font-size: 18px;

}

.registerFormStyle .step-9 label.checkbox-item {

    margin-bottom: 16px;

}

.registerFormStyle .form-step {

  display: none;

}



.registerFormStyle .form-step.active {

  display: block;

}

.campaign-popup button.swal2-close {

    background: none;

    border: none;

    color: #102538;

    font-size: 30px;

}





.registerFormStyle h2 {

  margin-bottom: 30px;

  text-align: center;

  font-size: 28px;

  color: #f700a0;

}



form.registerFormStyle {

   padding-top: 50px;

    max-width: 100%;

    min-height: 350px;

    height: 100%;

    margin: auto;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;



}



div#popup-host-guest {

      max-height: 80vh;

  overflow-y: scroll;   /* scrolling works */

  overflow-x: hidden;

  scrollbar-width: none;   /* Firefox */

  -ms-overflow-style: none; /* IE/Edge */

}



select#birthyear {

  width: 100% !important;

  box-sizing: border-box; 

  padding: 12px;     

  font-size: 20px;

  border-radius: 30px;

  color: #000;      

}

select#birthyear:invalid { color: rgba(0,0,0,0.5); }

select#birthyear option { color: #000; }

select#g_birthyear:invalid { color: rgba(0,0,0,0.5); }

select#g_birthyear option { color: #000; }



.registerFormStyle input[type="text"],

.registerFormStyle input[type="tel"],

.registerFormStyle input[type="email"],

.registerFormStyle input[type="date"], 

input#swal-input-phone,

input#swal-input-phone,

input#swal-input-code {
  width: 100%;
  padding: 12px;
  border: 2px solid transparent;
  border-radius: 30px;
  font-size: 20px;

  background: #fff;  
  color: #2E5F80;

  background-image: 
    linear-gradient(#fff, #fff),
    linear-gradient(90deg, #2E5F80 0%, #f700a0 100%);

  background-origin: border-box;
  background-clip: padding-box, border-box;

  outline: none;

}



.input#swal-input-phone {

    width: 80% !important;

}

input[name="instagram_username"] {

    margin-bottom: 30px !important;

}



.registerFormStyle select {

  width: 100% !important;
  padding: 12px;

  font-size: 20px;
  color: #2E5F80;

  border-radius: 30px;
  border: 2px solid transparent;

  background: #fff;
  background-clip: padding-box;

  box-shadow: 
    0 0 0 2px transparent,
    0 0 0 4px transparent;

  outline: none;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.registerFormStyle select option[disabled] {

  color: #000;

  opacity: 0.4;

}



.registerFormStyle input::placeholder {

  direction: rtl;

  text-align: right;

  color: #000;

  opacity: 0.4;

}

.registerFormStyle input:focus::placeholder {

  opacity: 0;

}



.registerFormStyle label {

  margin-top: 20px;

  margin-bottom: 10px;

  padding-right: 8px;

  display: block;

  text-align: right;

  font-size: 20px;
  color:#102538;

}



.registerFormStyle .checkbox-grid  label {

  margin-top: 0;

}

.registerFormStyle label.checkbox-item {

    display: flex;

    gap: 8px;

    font-size: 14px;

}

.section-title {

      width: 100%;

  font-weight: 500;

  margin-top: 25px;

  margin-bottom: 10px;

  font-size: 20px;

  text-align: right;

}



.checkbox-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

  gap: 10px;

  margin-bottom: 20px;

}



.checkbox-item {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 14px;

  text-align: right;

}



.checkbox-item input {

  transform: scale(1.2);

}



.form-step {

  display: none;

}



.form-step.active {

  display: block;

}



#campaign-register-popup button:hover {

  opacity: 0.9;

}



input#campaign-phone::placeholder {

  direction: rtl;

    text-align: right !important;

}

.swal2-hidden {

  display: none !important;

}





/* new style form  */

.wrapper-from-progress {

  padding: 12% 10% 5% 10%;

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 100%;

  background: rgb(234, 168, 180);

  z-index: 10;

}



.form-progress {

  width: 100%;

  height: 8px;

  background-color: #eee;

  border-radius: 4px;

  overflow: hidden;

}



.form-progress-bar {

  width: 100%;

  height: 100%;

}



.form-progress-fill {

  height: 100%;

  width: 0%;

    background: linear-gradient(180deg, #F5682C 0%, #F509B7 100%);

  transition: width 0.4s ease-in-out;

}





.step-nav {

    margin-top: 16px;

    margin-top: 16px;

    display: flex;

    justify-content: center;

    gap: 12px;

}

.gender-options,

.step-3 .radio-tile-group  {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.gender-tile {

  display: block;

  cursor: pointer;

}



.gender-tile input[type="radio"] {

  position: absolute;

  opacity: 0;

  pointer-events: none;

  width: 1px;

  height: 1px;

  margin: 0;

}





.icon-label {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;

  font-weight: 500;
  font-size: 20px;

  color: #2E5F80;

  border-radius: 12px;
  border: 2px solid transparent;

  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(90deg, #2E5F80 0%, #f700a0 100%);

  background-origin: border-box;
  background-clip: padding-box, border-box;

  transition: all 0.25s ease;
}

.icon-label.font-17 {

  font-size: 17px;

} 







.icon-label img {

  width: 24px;

  height: 24px;

  /* filter: brightness(0) invert(1); */

}





.tile-button {

  display: block;

  cursor: pointer;

  position: relative;

}



.tile-button input[type="radio"],

.tile-button input[type="checkbox"] {

  position: absolute;

  opacity: 0;

  pointer-events: none;

  width: 1px;

  height: 1px;

  margin: 0;

}



.tile-content {

  border: 1px solid #ccc;

  border-radius: 12px;

  padding: 12px 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: #fff;

  transition: 0.3s ease;

  font-weight: 500;

  font-size: 16px;

  color: #111827;

  text-align: center;

  min-height: 48px;

}



.gender-tile input[type="radio"]:checked + .icon-label,

.tile-button input:checked + .icon-label{

  background: #d80c8ce0;

  color: #fff;

}



/* 

.gender-tile input[type="radio"]:checked + .icon-label img,

.tile-button input:checked + .icon-label img {

  filter: brightness(0) invert(1);

} */



.form-group {

    display: flex;

    gap: 12px;

}

/* end new style form  */



.ribbon {

width: 150px;

height: 150px;

overflow: hidden;

position: absolute;

}

.ribbon::before,

.ribbon::after {

position: absolute;

z-index: -1;

content: '';

display: block;

border: 5px solid #D80C8C;

}

.ribbon span {

position: absolute;

display: block;

width: 225px;

padding: 15px 0;

background-color: #D80C8C;

box-shadow: 0 5px 10px rgba(0,0,0,.1);

color: #fff;

font: 700 14px/1 '"ploni"', sans-serif;

text-shadow: 0 1px 1px rgba(0,0,0,.2);

text-transform: uppercase;

text-align: center;

}



/* top left*/

.ribbon-top-left {

top: -10px;

left: -10px;

}

.ribbon-top-left::before,

.ribbon-top-left::after {

border-top-color: transparent;

border-left-color: transparent;

}

.ribbon-top-left::before {

top: 0;

right: 0;

}

.ribbon-top-left::after {

bottom: 0;

left: 0;

}

.ribbon-top-left span {

right: -18px;

top: 31px;

transform: rotate(-45deg);

}

.campaign-application-status {

    padding: 16px 32px;

    color: #fff;

    background: #D80C8C;

    border-radius: 24px;

}



.only-desktop { display: inline-flex; align-items: center; gap: .5rem; }

.only-mobile  { display: none; }



button.swal2-close:focus-visible {

    outline: none;

    box-shadow: none;

}



.auth-or-greeting .btn-account,

.auth-or-greeting .btn-register {

  line-height: 1;

  padding: 10px 14px;

  border: none;

  background: transparent;

  cursor: pointer;

  font-weight: 600;

  font-size: 18px;

  color:#fff;

}



.auth-or-greeting .icon-user {

  display: inline-block;

  width: 26px;

  height: 26px;

}



.auth-or-greeting { color: #fff;}





/* Edit Profile Page */



.form-item.bordered {

    margin: 20px 0;

}

form#campaign-profile-form {

      padding-top: 20px;

}

#campaign-profile-update label {

    margin-top: 5px;

}

#campaign-profile-update .radio-tile-group {

    display: flex;

    gap: 12px;

}



#campaign-profile-update button.submit-form {

    width: 100%;

}

@media (max-width: 768px) {


  .only-desktop { display: none; }

  .only-mobile  { display: inline-flex; align-items: center; }

  
button.auth-by-phone-btn.btn-register {
    font-size: 12px;
    border-radius: 30px;
    padding: 8px 10px;
}
  .swal2-popup.register-popup {

    width: 100% !important;

    height: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    border-radius: 0 !important;

  }

  div#swal2-html-container {

    padding: 14px;

  }

  .swal2-container:has(.register-popup) {

    padding: 0 !important;

  }



  .swal2-popup.register-popup .swal2-html-container {

    height: 100%;

    overflow-y: auto;

  }

    .campaign-popup {

          width: 90%;

    }

    .mh-100.campaign-popup {

      width: 100vw !important;

      height: 100vh;   

      height: 100dvh;            

      height: -webkit-fill-available;

      border-radius: 0 !important;

  }

  .wrapper-from-progress {

      padding: 15% 10% 5% 10%;

  }



  .swal2-container {

    padding: 0;

  }





  .checkbox-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));

    gap: 10px;

    margin-bottom: 20px;

  }



  .auth-menu {

    min-width: 110px;

  }

 

}