/* =========================================
CHANNEL PARTNER HERO SECTION
========================================= */

.cp-hero-section {
  position: relative;

  min-height: 100vh;

  display: flex;
  align-items: center;

  overflow: hidden;

  padding: 180px 0 120px;

  background:
    linear-gradient(
      90deg,
      rgba(20, 22, 18, 0.56) 0%,
      rgba(20, 22, 18, 0.34) 42%,
      rgba(20, 22, 18, 0.14) 100%
    ),
    url('../img/bg/entrance.webp');

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* =========================================
SOFT OVERLAY
========================================= */

.cp-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.30) 0%,
      rgba(0, 0, 0, 0.12) 100%
    );
  z-index: 1;
}

/* =========================================
CONTAINER
========================================= */

.cp-hero-section .container {
  position: relative;
  z-index: 5;
}

/* =========================================
CONTENT
========================================= */

.cp-hero-content {
  max-width: 760px;
}

/* =========================================
LABEL
========================================= */

.cp-hero-label {
  position: relative;

  display: inline-flex;
  align-items: center;

  padding-left: 54px;

  margin-bottom: 24px;

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

  letter-spacing: 2px;

  text-transform: uppercase;

  color: rgba(255,255,255,0.82);
}

.cp-hero-label::before {
  content: '';

  position: absolute;

  left: 0;
  top: 50%;

  transform: translateY(-50%);

  width: 40px;
  height: 1px;

  background: #d7b37a;
}

/* =========================================
HEADING
========================================= */

.cp-hero-content h1 {
  margin: 0 0 28px;

  font-size: clamp(52px, 6vw, 92px);

  line-height: 0.96;

  font-weight: 700;

  letter-spacing: -3px;

  color: #ffffff;
}

.cp-hero-content h1 span {
  display: block;

  color: #d7b37a;
}

/* =========================================
DESCRIPTION
========================================= */

.cp-hero-content p {
  margin: 0 0 34px;

  max-width: 670px;

  font-size: 17px;

  line-height: 1.9;

  font-weight: 400;

  color: rgba(255,255,255,0.86);
}

/* =========================================
BOTTOM LINES
========================================= */

.cp-hero-lines {
  display: flex;
  flex-direction: column;

  gap: 14px;
}

.cp-line {
  width: fit-content;

  padding: 16px 24px;

  border-radius: 18px;

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

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,0.10);

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

  letter-spacing: -0.2px;

  color: #ffffff;
}

/* =========================================
TABLET
========================================= */

@media (max-width: 991px) {

  .cp-hero-section {
    padding: 160px 0 100px;

    background-position: 58% center;
  }

  .cp-hero-content h1 {
    font-size: 72px;

    letter-spacing: -2px;
  }

  .cp-hero-content p {
    font-size: 16px;
  }
}

/* =========================================
MOBILE
========================================= */

@media (max-width: 767px) {

  .cp-hero-section {
    min-height: 760px;

    align-items: flex-end;

    padding: 130px 0 70px;

    background:
      linear-gradient(
        to top,
        rgba(20,22,18,0.64) 0%,
        rgba(20,22,18,0.34) 44%,
        rgba(20,22,18,0.14) 100%
      ),
      url('../img/bg/entrance.webp');

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .cp-hero-label {
    padding-left: 42px;

    margin-bottom: 18px;

    font-size: 10px;

    letter-spacing: 1.5px;
  }

  .cp-hero-label::before {
    width: 30px;
  }

  .cp-hero-content h1 {
    margin-bottom: 22px;

    font-size: 48px;

    line-height: 1;

    letter-spacing: -1.5px;
  }

  .cp-hero-content p {
    margin-bottom: 28px;

    font-size: 14px;

    line-height: 1.8;
  }

  .cp-hero-lines {
    gap: 12px;
  }

  .cp-line {
    width: 100%;

    padding: 15px 18px;

    border-radius: 16px;

    font-size: 14px;

    line-height: 1.5;
  }
}

/* =========================================
CHANNEL PARTNER REGISTRATION SECTION
PREMIUM ECO CITY VERSION
========================================= */

.cp-register-section{
  position: relative;

  padding: 130px 0;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #f5ede4 0%,
      #eee1d2 34%,
      #e3d0bc 68%,
      #d7bfa7 100%
    );
}

/* =========================================
SOFT TEXTURE OVERLAY
========================================= */

.cp-register-overlay{
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at top right,
      rgba(255,255,255,0.65),
      transparent 34%
    );

  z-index: 1;
}

/* =========================================
CONTAINER
========================================= */

.cp-register-section .container{
  position: relative;
  z-index: 5;
}

/* =========================================
WRAPPER
========================================= */

.cp-register-wrapper{
  display: grid;

  grid-template-columns: 0.95fr 1.05fr;

  gap: 70px;

  align-items: center;
}

/* =========================================
LEFT CONTENT
========================================= */

.cp-register-content{
  max-width: 560px;
}

/* =========================================
KICKER
========================================= */

.cp-register-kicker{
  position: relative;

  display: inline-flex;
  align-items: center;

  padding-left: 54px;

  margin-bottom: 24px;

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

  letter-spacing: 2px;

  text-transform: uppercase;

  color: rgba(24,57,47,0.75);
}

.cp-register-kicker::before{
  content: '';

  position: absolute;

  left: 0;
  top: 50%;

  transform: translateY(-50%);

  width: 40px;
  height: 1px;

  background: #b9915f;
}

/* =========================================
HEADING
========================================= */

.cp-register-content h2{
  margin: 0 0 24px;

  font-size: clamp(46px,4vw,72px);

  line-height: 1;

  font-weight: 700;

  letter-spacing: -2.5px;

  color: #18392f;
}

.cp-register-content h2 span{
  display: block;

  color: #b9915f;
}

/* =========================================
PARAGRAPH
========================================= */

.cp-register-content p{
  margin: 0 0 38px;

  font-size: 16px;

  line-height: 1.95;

  color: rgba(24,57,47,0.78);
}

/* =========================================
POINTS GRID
========================================= */

.cp-register-points{
  display: grid;

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

  gap: 18px;
}

/* =========================================
POINT CARD
========================================= */

.cp-register-point{
  display: flex;
  align-items: flex-start;

  gap: 14px;

  padding: 20px 18px;

  border-radius: 22px;

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

  border: 1px solid rgba(24,57,47,0.06);

  backdrop-filter: blur(10px);

  transition: 0.35s ease;
}

.cp-register-point:hover{
  transform: translateY(-4px);

  background: rgba(255,255,255,0.72);
}

.cp-register-point i{
  font-size: 16px;

  margin-top: 2px;

  color: #b9915f;
}

.cp-register-point span{
  font-size: 14px;
  font-weight: 500;

  line-height: 1.6;

  color: #18392f;
}

/* =========================================
FORM CARD
========================================= */

.cp-register-form-card{
  position: relative;

  padding: 42px;

  border-radius: 34px;

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

  border: 1px solid rgba(24,57,47,0.08);

  backdrop-filter: blur(18px);

  box-shadow:
    0 20px 60px rgba(88,62,35,0.10);
}

/* =========================================
FORM TOP
========================================= */

.cp-form-top{
  margin-bottom: 28px;
}

.cp-form-top span{
  display: inline-block;

  margin-bottom: 10px;

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

  letter-spacing: 1.5px;

  text-transform: uppercase;

  color: #b9915f;
}

.cp-form-top h3{
  margin: 0;

  font-size: 36px;

  line-height: 1.08;

  font-weight: 600;

  letter-spacing: -1px;

  color: #18392f;
}

/* =========================================
FORM GRID
========================================= */

.cp-form-grid{
  display: grid;

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

  gap: 16px;
}

/* =========================================
FORM GROUP
========================================= */

.cp-form-group{
  position: relative;
}

.cp-full-width{
  grid-column: 1 / -1;
}

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

.cp-form-group input,
.cp-form-group textarea{
  width: 100%;

  border: none;
  outline: none;

  border-radius: 18px;

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

  border: 1px solid rgba(24,57,47,0.08);

  padding: 17px 18px;

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

  color: #18392f;

  transition: 0.35s ease;
}

.cp-form-group textarea{
  resize: none;

  min-height: 120px;
}

/* =========================================
PLACEHOLDER
========================================= */

.cp-form-group input::placeholder,
.cp-form-group textarea::placeholder{
  color: rgba(24,57,47,0.48);
}

/* =========================================
FOCUS
========================================= */

.cp-form-group input:focus,
.cp-form-group textarea:focus{
  border-color: rgba(185,145,95,0.45);

  background: #ffffff;

  box-shadow:
    0 0 0 4px rgba(185,145,95,0.08);
}

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

.cp-submit-btn{
  width: 100%;

  height: 58px;

  border: none;
  outline: none;

  margin-top: 20px;

  border-radius: 100px;

  background: #18392f;

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

  letter-spacing: 0.4px;

  color: #ffffff;

  transition: 0.35s ease;
}

.cp-submit-btn:hover{
  transform: translateY(-2px);

  background: #10271f;
}

/* =========================================
TABLET
========================================= */

@media (max-width:991px){

  .cp-register-section{
    padding: 100px 0;
  }

  .cp-register-wrapper{
    grid-template-columns: 1fr;

    gap: 54px;
  }

  .cp-register-content{
    max-width: 100%;
  }

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

}

/* =========================================
MOBILE
========================================= */

@media (max-width:767px){

  .cp-register-section{
    padding: 80px 0;
  }

  .cp-register-kicker{
    padding-left: 42px;

    margin-bottom: 18px;

    font-size: 10px;

    letter-spacing: 1.5px;
  }

  .cp-register-kicker::before{
    width: 30px;
  }

  .cp-register-content h2{
    font-size: 40px;

    line-height: 1.04;

    letter-spacing: -1.4px;
  }

  .cp-register-content p{
    margin-bottom: 30px;

    font-size: 14px;

    line-height: 1.8;
  }

  .cp-register-points{
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .cp-register-point{
    padding: 18px 16px;

    border-radius: 18px;
  }

  .cp-register-point span{
    font-size: 14px;
  }

  .cp-register-form-card{
    padding: 26px 20px;

    border-radius: 24px;
  }

  .cp-form-top{
    margin-bottom: 22px;
  }

  .cp-form-top h3{
    font-size: 28px;
  }

  .cp-form-grid{
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .cp-form-group input,
  .cp-form-group textarea{
    padding: 16px;

    border-radius: 16px;

    font-size: 14px;
  }

  .cp-form-group textarea{
    min-height: 110px;
  }

  .cp-submit-btn{
    height: 54px;

    margin-top: 18px;

    font-size: 14px;
  }

}

/* =========================================
CHECKBOX
========================================= */

.cp-checkbox-group{
  margin-top: 4px;
}

.cp-checkbox-label{
  display: flex;
  align-items: flex-start;
  gap: 12px;

  font-size: 14px;
  line-height: 1.6;

  color: #18392f;

  cursor: pointer;
}

.cp-checkbox-label input{
  margin-top: 4px;

  width: 18px;
  height: 18px;

  accent-color: #18392f;
}

/* =========================================
LOGIN TEXT
========================================= */

.cp-login-text{
  margin-top: 18px;

  text-align: center;

  font-size: 14px;

  color: rgba(24,57,47,0.75);
}

.cp-login-text a{
  color: #18392f;

  font-weight: 600;

  text-decoration: none;
}

.cp-login-text a:hover{
  text-decoration: underline;
}


/* =========================================
CHANNEL PARTNER TERMS MODAL
========================================= */

.cp-terms-backdrop{
  position:fixed;
  inset:0;
  z-index:99999;

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

  padding:20px;

  background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px);
}

.cp-terms-modal{

  width:100%;
  max-width:900px;

  max-height:90vh;

  overflow:hidden;

  border-radius:24px;

  background:#ffffff;

  box-shadow:
  0 25px 80px rgba(0,0,0,.25);

  display:flex;
  flex-direction:column;
}

.cp-terms-header{

  padding:30px;

  text-align:center;

  border-bottom:1px solid #eaeaea;
}

.cp-terms-header h2{

  margin:0;

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

  color:#18392f;
}

.cp-terms-header span{

  display:block;

  margin-top:6px;

  font-size:14px;
  letter-spacing:2px;

  text-transform:uppercase;

  color:#b28a4d;
}

.cp-terms-body{

  padding:30px;

  overflow-y:auto;

  max-height:55vh;
}

.cp-terms-body p{

  margin-bottom:16px;

  font-size:15px;

  line-height:1.9;

  color:#444;
}

.cp-terms-footer{

  padding:25px 30px;

  border-top:1px solid #eaeaea;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.cp-terms-check{

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

  font-size:14px;
  color:#333;

  cursor:pointer;
}

.cp-terms-check input{
  margin-top:4px;
}

#acceptTermsBtn{

  border:none;

  padding:14px 34px;

  border-radius:50px;

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

  background:#18392f;
  color:#fff;

  transition:.3s;
}

#acceptTermsBtn:disabled{

  opacity:.45;
  cursor:not-allowed;
}

#acceptTermsBtn:not(:disabled):hover{

  transform:translateY(-2px);
}

body.modal-lock{
  overflow:hidden;
}

/* =========================================
MOBILE
========================================= */

@media(max-width:767px){

  .cp-terms-modal{

    max-height:95vh;
  }

  .cp-terms-header{

    padding:20px;
  }

  .cp-terms-header h2{

    font-size:24px;
  }

  .cp-terms-body{

    padding:20px;
  }

  .cp-terms-body p{

    font-size:14px;
  }

  .cp-terms-footer{

    flex-direction:column;
    align-items:flex-start;
  }

  #acceptTermsBtn{

    width:100%;
  }
}