/* ========================= */
/* Global Styles */
/* ========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Inter',sans-serif;

  background:#F7F4EF;

  color:#111111;

  overflow-x:hidden;

  min-height:100vh;

  position:relative;
}

/* ========================= */
/* Background Blur */
/* ========================= */

.bg-blur{
  position:fixed;

  width:350px;
  height:350px;

  border-radius:50%;

  filter:blur(120px);

  z-index:-1;
}

.blur-1{
  background:#E7D8C9;

  top:-80px;
  left:-120px;
}

.blur-2{
  background:#F3D9D9;

  bottom:-100px;
  right:-100px;
}

/* ========================= */
/* Registration Wrapper */
/* ========================= */

.registration-wrapper{

  padding:30px;
}

.registration-container{

  max-width:1450px;

  margin:auto;

  display:grid;

  grid-template-columns:
  420px 1fr;

  background:
  rgba(255,255,255,0.65);

  backdrop-filter:
  blur(24px);

  border-radius:42px;

  overflow:hidden;

  box-shadow:
  0 20px 50px rgba(0,0,0,0.06);
}

/* ========================= */
/* Sidebar */
/* ========================= */

.registration-sidebar{

  background:#111111;

  color:white;

  padding:42px;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  min-height:900px;
}

/* Logo */

.logo-area{

  display:flex;

  align-items:center;

  gap:12px;

  text-decoration:none;
}

.logo-icon-img{

  height:42px;
  width:auto;

  object-fit:contain;
}

.logo-text{

  font-family:'Poppins',sans-serif;

  font-size:28px;
  font-weight:700;

  color:white;
}

/* Sidebar Content */

.sidebar-content{

  margin-top:50px;
}

.sidebar-label{

  text-transform:uppercase;

  letter-spacing:3px;

  font-size:13px;
  font-weight:600;

  color:rgba(255,255,255,0.6);

  margin-bottom:18px;
}

.sidebar-content h1{

  font-family:'Poppins',sans-serif;

  font-size:48px;

  line-height:1.15;

  margin-bottom:24px;
}

.sidebar-description{

  color:rgba(255,255,255,0.7);

  line-height:1.8;

  font-size:16px;
}

/* ========================= */
/* Steps */
/* ========================= */

.steps-list{

  margin-top:60px;

  display:flex;

  flex-direction:column;

  gap:18px;
}

.step-item{

  display:flex;

  align-items:flex-start;

  gap:18px;

  padding:18px;

  border-radius:24px;

  transition:0.3s ease;
}

.active-step{

  background:
  rgba(255,255,255,0.08);

  border:
  1px solid rgba(255,255,255,0.08);
}

.step-number{

  width:52px;
  height:52px;

  border-radius:18px;

  background:
  rgba(255,255,255,0.08);

  display:flex;

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

  font-size:16px;
  font-weight:700;
}

.step-item h3{

  font-size:18px;

  margin-bottom:6px;
}

.step-item p{

  color:rgba(255,255,255,0.6);

  font-size:14px;
}

/* ========================= */
/* Form Area */
/* ========================= */

.form-area{

  padding:
  60px 70px;

  background:
  rgba(255,255,255,0.55);

  backdrop-filter:
  blur(20px);
}

/* Header */

.form-header{

  margin-bottom:50px;
}

.form-header p{

  text-transform:uppercase;

  letter-spacing:3px;

  font-size:13px;
  font-weight:600;

  color:#777777;

  margin-bottom:14px;
}

.form-header h2{

  font-family:'Poppins',sans-serif;

  font-size:52px;

  line-height:1.15;
}

/* ========================= */
/* Form */
/* ========================= */

.venue-form{

  display:flex;

  flex-direction:column;

  gap:26px;
}

/* Row */

.form-row{

  display:grid;

  grid-template-columns:
  1fr 1fr;

  gap:24px;
}

/* Input Group */

.input-group{

  display:flex;

  flex-direction:column;
}

.input-group label{

  font-size:15px;
  font-weight:600;

  margin-bottom:12px;
}

/* Inputs */

.input-group input,
.input-group select,
.input-group textarea{

  border:none;
  outline:none;

  background:white;

  padding:
  20px 22px;

  border-radius:24px;

  font-size:15px;

  font-family:'Inter',sans-serif;

  color:#111111;

  box-shadow:
  0 10px 25px rgba(0,0,0,0.04);

  transition:0.3s ease;
}

.input-group textarea{

  min-height:180px;

  resize:none;
}

/* Focus */

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus{

  transform:
  translateY(-2px);

  box-shadow:
  0 15px 30px rgba(0,0,0,0.06);
}

/* Full Width */

.full-width{
  width:100%;
}

/* ========================= */
/* Buttons */
/* ========================= */

.form-navigation{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-top:18px;
}

.primary-btn{

  border:none;

  background:#111111;
  color:white;

  padding:
  18px 32px;

  border-radius:999px;

  font-size:15px;
  font-weight:600;

  cursor:pointer;

  transition:0.3s ease;
}

.primary-btn:hover{

  transform:
  translateY(-2px);

  box-shadow:
  0 15px 30px rgba(0,0,0,0.12);
}

.secondary-btn{

  border:none;

  background:white;

  padding:
  18px 32px;

  border-radius:999px;

  font-size:15px;
  font-weight:600;

  cursor:pointer;

  border:
  1px solid #ECECEC;

  transition:0.3s ease;
}

.secondary-btn:hover{

  transform:
  translateY(-2px);
}

/* ========================= */
/* Responsive */
/* ========================= */

@media(max-width:1400px){
  .registration-container{
    max-width:1300px;
    margin:auto;
  }

  .form-area{
    padding:60px 50px;
  }

  .sidebar-content h1{
    font-size:42px;
  }

  .form-header h2{
    font-size:46px;
  }
}

@media(max-width:1200px){

  .registration-container{

    grid-template-columns:
    1fr;
  }

  .registration-sidebar{

    min-height:auto;
  }

  .form-area{
    padding:50px 40px;
  }

  .sidebar-content h1{
    font-size:40px;
  }

  .form-header h2{
    font-size:42px;
  }
}

@media(max-width:992px){
  .registration-wrapper{
    padding:24px;
  }

  .form-area{
    padding:40px 32px;
  }

  .sidebar-content h1{
    font-size:36px;
  }

  .form-header h2{
    font-size:38px;
  }

  .steps-list{
    margin-top:40px;
  }

  .plan-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .checkbox-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .review-box{
    padding:40px 32px;
  }

  .review-box h2{
    font-size:36px;
  }
}

@media(max-width:768px){

  .registration-wrapper{

    padding:16px;
  }

  .registration-container{
    border-radius:32px;
  }

  .registration-sidebar,
  .form-area{

    padding:32px 24px;
  }

  .sidebar-content h1{

    font-size:36px;
  }

  .form-header h2{

    font-size:38px;
  }

  .form-row{

    grid-template-columns:
    1fr;
  }

  .form-navigation{

    flex-direction:column;

    gap:14px;
  }

  .primary-btn,
  .secondary-btn{

    width:100%;
  }

  .checkbox-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .upload-grid{
    grid-template-columns:1fr;
  }

  .plan-grid{
    grid-template-columns:1fr;
  }

  .sidebar-content{
    margin-top:30px;
  }

  .steps-list{
    margin-top:32px;
    gap:14px;
  }

  .step-item{
    padding:14px;
  }

  .step-number{
    width:44px;
    height:44px;
    font-size:14px;
  }

  .step-item h3{
    font-size:16px;
  }

  .step-item p{
    font-size:13px;
  }

  .form-header{
    margin-bottom:32px;
  }

  .form-header p{
    font-size:12px;
    letter-spacing:2px;
  }

  .venue-form{
    gap:20px;
  }

  .input-group label{
    font-size:14px;
    margin-bottom:10px;
  }

  .input-group input,
  .input-group select,
  .input-group textarea{
    padding:16px 18px;
    font-size:14px;
    border-radius:20px;
  }

  .input-group textarea{
    min-height:140px;
  }

  .checkbox-card{
    padding:18px;
  }

  .checkbox-card span{
    font-size:14px;
  }

  .upload-box{
    padding:28px;
  }

  .upload-box h3{
    font-size:20px;
  }

  .plan-card{
    padding:28px;
  }

  .plan-card h3{
    font-size:22px;
  }

  .plan-card h2{
    font-size:28px;
  }

  .review-box{
    padding:36px 24px;
  }

  .review-box h2{
    font-size:32px;
  }

  .review-item{
    padding:16px;
    font-size:14px;
  }

  .nav-right{
    width:100%;
    flex-direction:column;
  }

  .save-btn,
  #nextBtn{
    width:100%;
  }

  .registration-sidebar{
    padding:28px 24px;
  }

  .logo-text{
    font-size:24px;
  }

  .logo-icon-img{
    height:36px;
  }

  .email-verification-wrapper{
    flex-direction:column;
    gap:10px;
  }

  .verify-email-btn{
    width:100%;
    padding:12px 18px;
    font-size:13px;
  }

  .otp-wrapper{
    flex-direction:column;
    gap:10px;
  }
}

@media(max-width:576px){
  .registration-wrapper{
    padding:12px;
  }

  .registration-container{
    border-radius:24px;
  }

  .registration-sidebar{
    padding:24px 18px;
  }

  .logo-text{
    font-size:20px;
  }

  .logo-icon-img{
    height:32px;
  }

  .logo-area{
    gap:8px;
  }

  .sidebar-content h1{
    font-size:28px;
  }

  .sidebar-description{
    font-size:14px;
  }

  .sidebar-label{
    font-size:11px;
    letter-spacing:2px;
  }

  .steps-list{
    margin-top:24px;
  }

  .step-item{
    padding:12px;
    gap:14px;
  }

  .step-number{
    width:38px;
    height:38px;
    font-size:13px;
    border-radius:14px;
  }

  .form-area{
    padding:28px 18px;
  }

  .form-header h2{
    font-size:30px;
  }

  .form-header p{
    font-size:11px;
  }

  .form-header{
    margin-bottom:24px;
  }

  .venue-form{
    gap:18px;
  }

  .input-group label{
    font-size:13px;
    margin-bottom:8px;
  }

  .input-group input,
  .input-group select,
  .input-group textarea{
    padding:14px 16px;
    font-size:13px;
    border-radius:18px;
  }

  .form-row{
    gap:18px;
  }

  .checkbox-grid{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }

  .checkbox-card{
    padding:14px;
    border-radius:18px;
  }

  .checkbox-card input{
    width:16px;
    height:16px;
  }

  .checkbox-card span{
    font-size:13px;
  }

  .upload-box{
    padding:24px;
  }

  .upload-box h3{
    font-size:18px;
    margin-bottom:18px;
  }

  .plan-card{
    padding:24px;
  }

  .plan-card h3{
    font-size:20px;
  }

  .plan-card h2{
    font-size:26px;
  }

  .review-box{
    padding:28px 20px;
  }

  .review-box h2{
    font-size:26px;
  }

  .review-box p{
    font-size:14px;
  }

  .review-item{
    padding:14px;
    font-size:13px;
  }

  .form-navigation{
    margin-top:12px;
  }

  .primary-btn,
  .secondary-btn{
    padding:14px 24px;
    font-size:14px;
  }

  .parking-grid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }

  .parking-title{
    font-size:14px;
  }

  .label-helper{
    font-size:12px;
  }

  .email-verification-wrapper{
    gap:8px;
  }

  .verify-email-btn{
    padding:10px 16px;
    font-size:12px;
    border-radius:12px;
  }

  .otp-wrapper{
    gap:8px;
  }
}

@media(max-width:420px){
  .registration-wrapper{
    padding:8px;
  }

  .registration-container{
    border-radius:20px;
  }

  .registration-sidebar{
    padding:20px 14px;
  }

  .logo-text{
    font-size:18px;
  }

  .logo-icon-img{
    height:28px;
  }

  .sidebar-content h1{
    font-size:24px;
    margin-bottom:18px;
  }

  .sidebar-description{
    font-size:13px;
    line-height:1.6;
  }

  .steps-list{
    gap:10px;
  }

  .step-item h3{
    font-size:14px;
  }

  .step-item p{
    font-size:12px;
  }

  .form-area{
    padding:22px 14px;
  }

  .form-header h2{
    font-size:26px;
    line-height:1.1;
  }

  .form-header p{
    font-size:10px;
    margin-bottom:10px;
  }

  .form-header{
    margin-bottom:20px;
  }

  .input-group{
    gap:4px;
  }

  .input-group label{
    font-size:12px;
    margin-bottom:6px;
  }

  .input-group input,
  .input-group select,
  .input-group textarea{
    padding:12px 14px;
    font-size:12px;
    border-radius:16px;
  }

  .input-group textarea{
    min-height:100px;
  }

  .checkbox-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .checkbox-card{
    padding:12px 10px;
    border-radius:14px;
  }

  .checkbox-card span{
    font-size:12px;
  }

  .upload-grid{
    gap:16px;
  }

  .upload-box{
    padding:20px;
  }

  .upload-box h3{
    font-size:16px;
    margin-bottom:16px;
  }

  .plan-grid{
    gap:16px;
  }

  .plan-card{
    padding:20px;
  }

  .plan-card h3{
    font-size:18px;
  }

  .plan-card h2{
    font-size:22px;
  }

  .plan-card p{
    font-size:13px;
  }

  .review-box{
    padding:24px 16px;
    border-radius:28px;
  }

  .review-box h2{
    font-size:24px;
  }

  .review-box p{
    font-size:13px;
    margin-bottom:24px;
  }

  .review-points{
    gap:12px;
  }

  .review-item{
    padding:12px;
    font-size:12px;
    border-radius:16px;
  }

  .primary-btn,
  .secondary-btn{
    padding:12px 20px;
    font-size:13px;
    border-radius:50px;
  }

  .form-navigation{
    gap:10px;
  }

  .parking-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .bg-blur{
    width:180px;
    height:180px;
    filter:blur(70px);
  }

  .blur-1{
    top:-40px;
    left:-80px;
  }

  .blur-2{
    bottom:-50px;
    right:-60px;
  }

  .verify-email-btn{
    font-size:11px;
    padding:8px 14px;
  }

  .disabled-btn{
    font-size:12px;
  }
}
/* ========================= */
/* Multi Step Form */
/* ========================= */

.form-step{

  display:none;

  animation:
  fadeSlide 0.5s ease;
}

.active-form-step{

  display:flex;

  flex-direction:column;

  gap:26px;
}

/* Animation */

@keyframes fadeSlide{

  from{

    opacity:0;

    transform:
    translateY(20px);
  }

  to{

    opacity:1;

    transform:
    translateY(0px);
  }

}

/* ========================= */
/* Checkbox Grid */
/* ========================= */

.checkbox-grid{

  display:grid;

  grid-template-columns:
  repeat(4,1fr);

  gap:20px;
}

.checkbox-card{

  background:white;

  border-radius:24px;

  padding:24px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:12px;

  cursor:pointer;

  box-shadow:
  0 10px 25px rgba(0,0,0,0.04);

  transition:0.3s ease;
}

.checkbox-card:hover{

  transform:
  translateY(-4px);

  box-shadow:
  0 15px 30px rgba(0,0,0,0.06);
}

.checkbox-card input{

  width:18px;
  height:18px;

  accent-color:#111111;
}

.checkbox-card span{

  font-size:15px;
  font-weight:600;
}

/* ========================= */
/* Upload Grid */
/* ========================= */

.upload-grid{

  display:grid;

  grid-template-columns:
  1fr 1fr;

  gap:24px;

  margin-top:12px;
}

.upload-box{

  background:white;

  padding:36px;

  border-radius:32px;

  box-shadow:
  0 10px 25px rgba(0,0,0,0.04);

  text-align:center;
}

.upload-box h3{

  font-size:22px;

  margin-bottom:24px;

  font-family:'Poppins',sans-serif;
}

.upload-box input{

  width:100%;
}

/* ========================= */
/* Pricing Plans */
/* ========================= */

.plan-grid{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:24px;
}

.plan-card{

  background:white;

  padding:36px;

  border-radius:32px;

  position:relative;

  cursor:pointer;

  border:
  2px solid transparent;

  transition:0.3s ease;

  box-shadow:
  0 10px 25px rgba(0,0,0,0.04);
}

.plan-card:hover{

  transform:
  translateY(-6px);
}

.active-plan{

  border:
  2px solid #111111;
}

.popular-tag{

  position:absolute;

  top:18px;
  right:18px;

  background:#111111;
  color:white;

  padding:
  8px 14px;

  border-radius:999px;

  font-size:12px;
  font-weight:600;
}

.plan-card h3{

  font-size:24px;

  margin-bottom:14px;

  font-family:'Poppins',sans-serif;
}

.plan-card h2{

  font-size:34px;

  margin-bottom:18px;

  font-family:'Poppins',sans-serif;
}

.plan-card p{

  color:#666666;

  line-height:1.7;
}

/* ========================= */
/* Review Box */
/* ========================= */

.review-box{

  background:white;

  padding:50px;

  border-radius:36px;

  box-shadow:
  0 10px 25px rgba(0,0,0,0.04);
}

.review-box h2{

  font-size:42px;

  margin-bottom:20px;

  font-family:'Poppins',sans-serif;
}

.review-box p{

  color:#666666;

  line-height:1.8;

  margin-bottom:32px;
}

.review-points{

  display:flex;

  flex-direction:column;

  gap:18px;
}

.review-item{

  background:#F7F4EF;

  padding:20px;

  border-radius:20px;

  font-weight:600;
}

/* ========================= */
/* Navigation */
/* ========================= */

.nav-right{

  display:flex;

  align-items:center;

  gap:14px;
}

.save-btn{

  border:none;

  background:transparent;

  color:#666666;

  font-size:15px;
  font-weight:600;

  cursor:pointer;
}

/* ========================= */
/* Responsive */
/* ========================= */

@media(max-width:1100px){

  .checkbox-grid{

    grid-template-columns:
    repeat(2,1fr);
  }

  .plan-grid{

    grid-template-columns:
    1fr;
  }

}

@media(max-width:768px){

  .checkbox-grid,
  .upload-grid{

    grid-template-columns:
    1fr;
  }

  .review-box{

    padding:36px 24px;
  }

  .review-box h2{

    font-size:32px;
  }

  .nav-right{

    width:100%;

    flex-direction:column;
  }

  .save-btn,
  #nextBtn{

    width:100%;
  }

}
/* ========================= */
/* Parking Section */
/* ========================= */

.parking-section{

  display:flex;

  flex-direction:column;

  gap:18px;
}

.parking-title{

  font-size:16px;
  font-weight:600;
}

.parking-grid{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:24px;

  margin-top:12px;
}
.parking-section{

  width:100%;
}

.parking-title{

  display:block;

  margin-bottom:10px;

  font-size:16px;
  font-weight:600;
}

/* Number Input */

.number-input::-webkit-outer-spin-button,
.number-input::-webkit-inner-spin-button{

  -webkit-appearance:none;

  margin:0;
}

.number-input{
  appearance:textfield;
}
.label-helper{

  display:block;

  margin-top:6px;

  font-size:13px;

  font-weight:500;

  color:#777777;
}
@media(max-width:768px){

  .parking-grid{

    grid-template-columns:1fr;
  }

}
.email-verification-wrapper {

    display: flex;
    gap: 12px;
    align-items: center;

}

.verify-email-btn {

    border: none;
    outline: none;

    padding: 14px 20px;

    border-radius: 14px;

    background: #111;

    color: white;

    font-family: 'Inter', sans-serif;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.3s ease;

    white-space: nowrap;

}

.verify-email-btn:hover {

    opacity: 0.85;

    transform: translateY(-2px);

}

#emailStatus {

    margin-top: 10px;

    font-size: 14px;

    font-weight: 500;

}
.otp-wrapper {

    display: flex;

    gap: 12px;

    margin-top: 14px;

}

.otp-wrapper input {

    flex: 1;

}
.disabled-btn {

    opacity: 0.5;

    cursor: not-allowed;

    pointer-events: none;

}
.resend-otp-btn{

    background:#f3f3f3;

    color:#111;

    border:none;

    padding:14px 18px;

    border-radius:14px;

    font-weight:600;

    cursor:pointer;

    transition:0.3s ease;

}

.resend-otp-btn:hover{

    background:#e4e4e4;

}

.resend-disabled{

    opacity:0.6;

    pointer-events:none;

}
.professional-options {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin: 20px 0;

}

.radio-option {

    display: flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

}

.radio-option input {

    cursor: pointer;

}

.radio-option span {

    display: flex;

    justify-content: space-between;

    width: 100%;

}