/* Overlay */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.75);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.popup-overlay.active {
  display: flex;
}

/* Popup box */
.enrollPopup {
  position: relative;
  z-index: 1001;
  height: 450px;
  width: 650px;
  background-color: #2b2a33;
  display: flex;
  flex-direction: column;
  padding: 10px;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  border-radius: 12px;
}

/* CSS for termsandconditions */
.enrollPopupHeader {
    width: 410px;
    padding: 0px 5px;
    display: flex;
    justify-content: center;
    align-content: center;
    color: #daa74b;
}
.enrollPopupHeader h2 {
    margin: 0;
}
.TAC_Container {
    width: 410px;
    padding: 0px 5px;
    height: 85%;
    background-color: #1c1b22;
    overflow: hidden;
}
.TAC_Wrapper {
    overflow-y: scroll;
    width: 100%;
    height: 100%;
}
#acceptTAC {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 20px;
  height: 20px;
  border: 1px solid #888;
  border-radius: 3px;
  vertical-align: middle;
  cursor: pointer;
  position: relative;

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

#acceptTAC:checked {
  background-color: #daa74b;
  border-color: #daa74b;
}

#acceptTAC:checked::after {
  content: "✔";
  font-size: 11px;
  color: white;
  line-height: 1;
}
label {
  font-size: 13px;
  vertical-align: middle;
  cursor: pointer;
}
.accept_TAC {
    width: 410px;
    padding: 0px 5px;
    display: flex;
    justify-content: center;
    align-content: center;
}
.procceedAfterTAC {
    width: 410px;
    padding: 0px 5px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex: 1;
    background-color: #daa74b;
    border-radius: 12px;
}
.procceedAfterTAC:hover {
    background-color: #c8923d;   
}
.goldColor {
    color: #daa74b;
}
.red {
    color: red;
}
.goldcolorUnderline {
    color: #daa74b;
    text-decoration: underline;
}

/* CSS for choosepackage */
.packageOptions {
    width: 100%;
    padding: 0px 5px;
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.package {
    width: 200PX;
    height: 374px;
    display: flex;
    padding: 5px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border: 2px solid #daa74b;
}
.package:hover {
    border: 2px solid #c8923d;
}
.packageHeader h1{
    margin: 0;
}
.packageDetails {
    display: flex;
    flex: 1;
}
.packageDetailsList{
    list-style: none; 
    padding: 0; 
    margin: 0;
}
.priceTag {
    width: 100%;
    background-color: #daa74b;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
}
.priceTag:hover {
    color: rgb(28, 243, 28);
    text-shadow: 2px 2px 5px #2b2a33;
}
.priceTag p {
    margin: 0;
    font-size: 29px;
}
.priceTag:hover {
    cursor: pointer;
    background-color:#c8923d;
}
.fullPackage {
    width: 200px;
    height: 374px;
    display: flex;
    padding: 5px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border: 2px solid #daa74b;
    border-radius: 12px; /* optional, for smoother corners */
    animation: borderGlow 3s linear infinite;
}

/* animation keyframes */
@keyframes borderGlow {
    0%   { border-color: #daa74b; }
    25%  { border-color: #f1c46c; }
    50%  { border-color: rgb(28, 243, 28); }
    75%  { border-color: #f1c46c; }
    100% { border-color: #daa74b; }
}
.priceTagMain {
    width: 100%;
    background-color: #daa74b;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    position: relative; /* important for absolute child */
}
.priceTagMain p{
    font-size: 29px;
}
.mainlyBought p{
    margin: 0;
}
.priceTagMain:hover {
    cursor: pointer;
    background-color: #c8923d;
    color: rgb(28, 243, 28);
    text-shadow: 2px 2px 5px #2b2a33;
}
/* Ribbon effect */
.mainlyBought {
    position: absolute;
    top: 1px;
    width: fit-content;
    left: -3px;
    background: rgb(28, 243, 28);
    color: white;
    padding: 3px 4px;
    font-size: 11px;
    font-weight: bold;
    transform: rotate(-45deg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    margin: 0;
    border-radius: 4px;
}

/* CSS for infocollection */
.infocollectionDivider {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}
.welcomeToNea {
    height: 100%;
    padding: 0px 5px 0px 0px;
    width: 210px;
    border-right: 2px solid #daa74b;
    border-radius: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    color: #daa74b;
}
.welcomeText {
    font-size: 22px;
}
.NEAtext {
    font-size: 80;
}
.welcomeText p, .NEAtext p {
    margin: 0;
}
.welcomeImage {
    display: flex;
    flex: 1;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: none;
}
.welcomeImage img{
    height: 100% !important;
    width: 100% !important;
}
.NEAMotto {
    color: #daa74b
}
.fillInUserDetails {
    display: flex;
    align-items: center;
    flex: 1;
    height: 100%;
}
.form-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    height: 100%;
    margin: 0px;
}
.input-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: space-between;
}
.input-space {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.input-space-two {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
input#firstname, input#lastname, input#email, input#username, input#age, input#phonenumber, input#password, input#confirmpassword{
    display: flex;
    flex: 1;
    border: 1px solid #daa74b;
}
.captchaArea {
    width: 100%;
    display: flex;
    flex: 1;
    border: 2px solid #daa74b;
}
.submitDetails {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #daa74b;
    font-size: 17px;
    border-radius: 12px;
}
.submitDetails:hover {
    background-color: #c8923d;
}
.submitDetails p{
    margin: 10px;
}
/* CSS for paymentOptions */
.paymentOptions {
    border-radius: 0px;
    border-bottom: 2px solid #daa74b;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 0px 10px 0px;
}
.paymentOption {
    display: flex;
    flex-direction: row;
    border: 2px solid #daa74b;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px;
    border-radius: 12px;
}
.paymentLogo img{
    height: 30px;
}
.paymentName p{
    margin: 0;
}
.paymentArena {
    display: flex;
    flex: 1;
}
.VerifyComment{
    color: #daa74b;
}
/* CSS for celebrationPopup */
/* [SECTION: Mobile] */
@media (max-width: 768px) {
    .gap {
        width: 95%;
        margin: 10px;
        overflow: hidden;
    }
    .enrollPopup, .TAC_Container, .accept_TAC {
        width: auto;
    }
    .accept_TAC {
        align-items: center;
    }
    .procceedAfterTAC {
        width: 100%;
    }
    .packageOptions {
        overflow-x: scroll;
        width: 100%;
    }
    #choosepackage {
        width: 100%;
    }
    .package {
        min-width: 200PX;
    }
    .enrollPopupHeader {
        width: 100%;
    }
    .welcomeToNea {
       display: none;
    }
    .fillInUserDetails {
        width: 100%;
    }
    input#age {
        width: 40px;
    }
}