*{box-sizing:border-box}
:root{
  --green:#087f32;
  --green-dark:#056526;
  --red:#e52d2d;
  --text:#172017;
  --muted:#697269;
  --border:#dfe6df;
  --soft:#f5f8f3;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--soft);
  color:var(--text);
  font-family:Inter,Arial,Helvetica,sans-serif;
}
.registration-page{
  width:min(1500px,100%);
  min-height:100vh;
  margin:auto;
  padding:18px;
  display:grid;
  grid-template-columns:4fr 8fr;
  gap:18px;
}
.offers-panel,.form-panel{
  background:#fff;
  border:1px solid #e5e9e4;
  border-radius:22px;
  box-shadow:0 14px 40px rgba(15,72,35,.08);
}
.offers-panel{
  padding:24px 20px;
  background:linear-gradient(180deg,#fffefb,#f6faef);
}
.brand{text-align:center;margin-bottom:12px}
.brand-mark{
  font-size:2.15rem;
  font-weight:800;
  color:var(--green);
  letter-spacing:-2px;
}
.brand-mark span{color:var(--red)}
.brand-tagline{font:italic 700 1rem Georgia,serif}
.offers-heading{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0 14px;
}
.offers-heading i{height:1px;flex:1;background:#b8cdb7}
.offers-heading h2{
  margin:0;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.offers-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.offer-card{
  display:block;
  overflow:hidden;
  border-radius:16px;
  border:1px solid #dfe9d8;
  background:#edf5e6;
}
.offer-card img{
  display:block;
  width:100%;
  aspect-ratio:3/1;
  object-fit:cover;
}
.offer-card--hidden{display:none}
.mobile-offers{display:none}

.form-panel{
  padding:34px 38px;
  overflow:hidden;
}
.form-header{margin-bottom:22px}
.form-header h1{
  margin:0 0 6px;
  font-size:2rem;
  letter-spacing:-.7px;
}
.form-header h1 span{color:var(--green)}
.form-header p{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
}
.form-row{
  display:grid;
  gap:10px;
  margin-bottom:12px;
}
.row-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{min-width:0}
.field label{
  display:block;
  font-size:.72rem;
  font-weight:600;
  color:#4b554d;
}
.field label b{color:var(--red)}
input,select{
  display:block;
  width:100%;
  height:42px;
  margin-top:5px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#fff;
  color:#293229;
  outline:none;
  font-size:.78rem;
}
input:focus,select:focus{
  border-color:#63a86c;
  box-shadow:0 0 0 3px rgba(8,127,50,.08);
}
select:disabled{
  background:#f3f5f2;
  color:#9ba39b;
}
.referral-field[hidden]{display:none}
.referral-field{
  animation:referralIn .18s ease-out;
}
@keyframes referralIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
.terms{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:13px 0;
  font-size:.68rem;
  line-height:1.45;
  color:#4c554d;
}
.terms input{
  width:15px;
  height:15px;
  margin:1px 0 0;
  accent-color:var(--green);
}
.terms a,.login-link a{
  color:var(--green);
  font-weight:700;
  text-decoration:none;
}
.create-account{
  width:100%;
  height:45px;
  border:0;
  border-radius:9px;
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.create-account span{
  margin-left:10px;
  font-size:1.05rem;
}
.login-link{
  text-align:center;
  margin:10px 0 0;
  color:#666;
  font-size:.76rem;
}
.form-message{
  min-height:18px;
  margin:7px 0 0;
  text-align:center;
  font-size:.72rem;
  color:var(--green);
}
.slider-arrow{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid #dce7d8;
  background:#fff;
  color:var(--green);
  font-size:1.5rem;
  cursor:pointer;
}
.slider-dots{
  grid-column:1/-1;
  display:flex;
  justify-content:center;
  gap:5px;
  margin-top:4px;
}
.slider-dot{
  width:6px;
  height:6px;
  border:0;
  border-radius:50%;
  padding:0;
  background:#cbd7c8;
  cursor:pointer;
}
.slider-dot.active{background:var(--green)}

@media(max-width:1050px){
  .registration-page{grid-template-columns:340px minmax(0,1fr)}
  .form-panel{padding:28px 24px}
}

@media(max-width:820px){
  .registration-page{
    display:flex;
    flex-direction:column;
    padding:8px;
    gap:10px;
  }
  .offers-panel{
    order:1;
    padding:14px;
    border-radius:18px;
  }
  .form-panel{
    order:2;
    padding:22px 16px;
    border-radius:18px;
  }
  .brand{display:none}
  .offers-stack{display:none}
  .mobile-offers{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 34px;
    align-items:center;
    gap:6px;
  }
  .mobile-offer-card{
    display:block;
    overflow:hidden;
    border-radius:13px;
  }
  .mobile-offer-card img{
    display:block;
    width:100%;
    aspect-ratio:3/1;
    object-fit:cover;
  }
}

@media(max-width:560px){
  .row-2,.row-3{grid-template-columns:1fr}
  .form-header h1{font-size:1.5rem}
  .form-header p{font-size:.78rem}
}
.password-show-row {
    margin-top: -8px;
    margin-bottom: 10px;
}

.password-show-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #555;
}

.password-show-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #008c3a;
    cursor: pointer;
}
@media (max-width: 768px) {
  .form-row.row-2 {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   LOGIN PAGE - PROFESSIONAL COMPACT LAYOUT
========================================================= */

.login-page {
    min-height: 100vh;
    align-items: center;
}


/* Left offer panel */

.login-page .offers-panel {
    justify-content: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
}


/* Logo */

.login-page .brand {
    margin-bottom: 1rem;
}


/* Offers heading */

.login-page .offers-heading {
    margin-bottom: 1rem;
}


/* Two desktop offers */

.login-offers-stack {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.login-offers-stack .offer-card {
    width: 100%;
    display: block;
    overflow: hidden;
}

.login-offers-stack .offer-card img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* Right login panel */

.login-page .form-panel {
    justify-content: center;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}


/* Login heading */

.login-page .form-header {
    margin-bottom: 1.25rem;
}

.login-page .form-header h1 {
    margin-bottom: 0.35rem;
}

.login-page .form-header p {
    margin-bottom: 0;
}


/* Form spacing */

.login-page .form-row {
    margin-bottom: 0.8rem;
}


/* Show password */

.login-page .password-show-row {
    margin-top: -0.1rem;
    margin-bottom: 0.8rem;
}


/* Forgot password */

.login-page .login-options {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.8rem;
}

.login-page .forgot-password {
    color: #087f32;
    text-decoration: none;
    font-size: 0.8rem;
}

.login-page .forgot-password:hover {
    text-decoration: underline;
}


/* Login button */

.login-page .login-button {
    width: 100%;
    margin-top: 0.2rem;
}


/* Create account */

.login-page .login-link {
    text-align: center;
    margin-top: 0.8rem;
}


/* =========================================================
   MOBILE OFFER SLIDER
========================================================= */

.login-mobile-offers {
    display: none;
}

@media (max-width: 820px) {

    .login-page {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
    }

    .login-page .offers-panel {
        justify-content: flex-start;
        padding: 1.5rem 1rem;
    }

    .login-page .form-panel {
        justify-content: flex-start;
        padding: 1.5rem 1rem 2rem;
    }

    /* Hide desktop cards */

    .login-page .login-offers-stack {
        display: none;
    }

    /* Show mobile slider */

    .login-page .login-mobile-offers {
        display: grid;
    }

}