:root{
    --green-900:#0b3d2e;
    --green-800:#0e4a37;
    --green-700:#116345;
    --green-600:#158a5c;
    --green-500:#1a9c66;
    --green-100:#e6f5ee;
    --green-50:#f2faf6;
    --text-dark:#0f2e24;
    --text-muted:#5c6b66;
    --border:#e1e6e3;
    --white:#ffffff;
    --shadow: 0 4px 18px rgba(11,61,46,0.06);
  }
  /* ===== Main layout ===== */
  .page-wrap{
    max-width: 1240px;
    margin: 0 auto;
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr 390px;
    gap: 30px;
    align-items: start;
  }

  /* ===== Form card ===== */
  .form-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:38px 40px;
    box-shadow:var(--shadow);
  }
  .form-card-head{
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin-bottom:28px;
  }
  .form-card-head .icon-circle{
    width:44px;height:44px;
    border-radius:12px;
    background:var(--green-100);
    color:var(--green-700);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;
    flex-shrink:0;
  }
  .form-card-head h2{
    margin:0 0 4px;
    font-size:22px;
    font-weight:700;
    color:var(--text-dark);
  }
  .form-card-head p{
    margin:0;
    font-size:13.5px;
    color:var(--text-muted);
  }

  .form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px 24px;
  }
  .field{display:flex;flex-direction:column;gap:8px;}
  .field.full{grid-column:1 / -1;}
  .field label{
    font-size:13.5px;
    font-weight:600;
    color:#2a3630;
  }
  .field label .req{color:#e0554a;margin-left:2px;}
  .input-wrap{
    display:flex;
    align-items:center;
    border:1.5px solid var(--border);
    border-radius:8px;
    padding:0 12px;
    background:#fbfcfb;
    transition:border-color .15s;
  }
  .input-wrap:focus-within{border-color:var(--green-500);}
  .input-wrap .ic{
    color:#8a9a93;
    font-size:15px;
    margin-right:10px;
    flex-shrink:0;
  }
  .input-wrap input, .input-wrap select, .input-wrap textarea{
    border:none;
    outline:none;
    background:transparent;
    width:100%;
    padding:11px 0;
    font-size:14px;
    font-family:inherit;
    color:var(--text-dark);
  }
  .input-wrap textarea{resize:vertical;padding-top:11px;}
  .phone-wrap{display:flex;align-items:center;}
  .phone-wrap .code{
    display:flex;align-items:center;gap:4px;
    padding-right:10px;margin-right:10px;
    border-right:1px solid var(--border);
    font-size:14px;color:var(--text-dark);
    flex-shrink:0;
  }
  select{appearance:none;-webkit-appearance:none;cursor:pointer;}
  .select-wrap{position:relative;}
  .select-wrap::after{
    content:"▾";
    position:absolute;right:12px;top:50%;
    transform:translateY(-50%);
    color:#8a9a93;font-size:13px;pointer-events:none;
  }

  /* services required toggle */
  .services-row{
    display:flex;
    gap:14px;
    background:#f6f8f7;
    border:1px solid var(--border);
    border-radius:10px;
    padding:6px;
  }
  .service-opt{
    flex:1;
    display:flex;align-items:center;gap:10px;
    padding:12px 16px;
    border-radius:8px;
    font-size:14px;
    font-weight:500;
    color:var(--text-dark);
    cursor:pointer;
  }
  .service-opt.active{
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,0.06);
  }
  .radio-dot{
    width:20px;height:20px;
    border-radius:50%;
    border:2px solid #c4d1cb;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .service-opt.active .radio-dot{
    background:var(--green-600);
    border-color:var(--green-600);
    color:#fff;
    font-size:11px;
  }

  /* captcha */
  .captcha-row{
    display:flex;
    align-items:center;
    gap:16px;
  }
  .captcha-box{
    background:#eef2f0;
    border:1px solid var(--border);
    border-radius:8px;
    padding:12px 26px;
    font-size:22px;
    font-weight:700;
    letter-spacing:3px;
    color:#4a5852;
    font-family: 'Courier New', monospace;
    text-decoration: line-through;
    text-decoration-color: rgba(74,88,82,0.35);
  }
  .captcha-row .input-wrap{flex:1;}
  .refresh-link{
    display:flex;align-items:center;gap:6px;
    color:var(--green-700);
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
  }

  .agree-row{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13.5px;
    color:var(--text-muted);
  }
  .agree-row a{color:var(--green-700);font-weight:600;}
  .checkbox-custom{
    width:18px;height:18px;
    border-radius:5px;
    background:var(--green-600);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:11px;
    flex-shrink:0;
  }

  .submit-btn{
    width:100%;
    padding:16px;
    background:var(--green-700);
    color:#fff;
    border:none;
    border-radius:10px;
    font-size:16px;
    font-weight:600;
    display:flex;align-items:center;justify-content:center;gap:10px;
    cursor:pointer;
    transition:background .15s;
  }
  .submit-btn:hover{background:var(--green-800);}

  /* ===== Sidebar ===== */
  .sidebar h3{
    font-size:21px;
    font-weight:700;
    margin:0 0 8px;
    color:var(--text-dark);
  }
  .sidebar > p{
    font-size:13.5px;
    color:var(--text-muted);
    margin:0 0 26px;
    line-height:1.6;
  }
  .why-item{
    display:flex;
    gap:16px;
    margin-bottom:26px;
  }
  .why-icon{
    width:46px;height:46px;
    border-radius:50%;
    background:var(--green-100);
    color:var(--green-700);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;
    flex-shrink:0;
  }
  .why-item h4{
    margin:0 0 4px;
    font-size:15px;
    font-weight:700;
    color:var(--text-dark);
  }
  .why-item p{
    margin:0;
    font-size:13px;
    color:var(--text-muted);
    line-height:1.5;
  }
  .login-promo{
    background:var(--green-50);
    border:1px solid var(--green-100);
    border-radius:14px;
    padding:24px;
    margin-top:6px;
  }
  .login-promo .icon-circle-sm{
    width:38px;height:38px;
    border-radius:10px;
    background:var(--green-100);
    color:var(--green-700);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:14px;
    font-size:16px;
  }
  .login-promo h4{
    margin:0 0 6px;
    font-size:16px;
    font-weight:700;
    color:var(--text-dark);
  }
  .login-promo p{
    margin:0 0 18px;
    font-size:13px;
    color:var(--text-muted);
    line-height:1.5;
  }
  .login-now-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;
    padding:12px;
    background:#fff;
    border:1.5px solid var(--green-600);
    color:var(--green-700);
    border-radius:8px;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
  }

  /* ===== Select2 override to match input-wrap style ===== */
.input-wrap .select2-container{
  width:100% !important;
}

/* Single select (Country/State) */
.input-wrap .select2-container--default .select2-selection--single{
  border:none;
  background:transparent;
  height:auto;
  padding:11px 0;
  display:flex;
  align-items:center;
}
.input-wrap .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:0;
  line-height:normal;
  color:var(--text-dark);
  font-size:14px;
}
.input-wrap .select2-container--default .select2-selection--single .select2-selection__placeholder{
  color:#8a9a93;
}
.input-wrap .select2-container--default .select2-selection--single .select2-selection__arrow{
  display:none; /* we already have the ▾ from .select-wrap::after */
}

/* Multiple select (Sector) */
.input-wrap .select2-container--default .select2-selection--multiple{
  border:none;
  background:transparent;
  min-height:auto;
  padding:6px 0;
}
.input-wrap .select2-selection--multiple .select2-selection__rendered{
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.input-wrap .select2-selection--multiple .select2-selection__choice{
  background:var(--green-100);
  border:1px solid var(--green-100);
  color:var(--green-700);
  border-radius:6px;
  padding:2px 8px;
  font-size:13px;
}

/* Remove Select2's blue focus outline, keep your own */
.input-wrap .select2-container--default.select2-container--focus .select2-selection--single,
.input-wrap .select2-container--default.select2-container--focus .select2-selection--multiple{
  border:none;
  outline:none;
}
.input-wrap .select2-container--default .select2-search--dropdown .select2-search__field{
  border:1px solid var(--border);
  border-radius:6px;
}
/* ===== Validation error messages ===== */
.form-error{
  font-size:12.5px;
  color:#dc2626;
  margin-top:4px;
  display:none;
}
.form-error.is-visible{ display:block; }
.input-wrap.field-error,
.services-row.field-error{
  border-color:#dc2626 !important;
}
label.required::after{
  content:" *";
  color:#dc2626;
}
/* ===== intl-tel-input override to match input-wrap ===== */
.phone-wrap .iti{
  width:100%;
  display:flex;
  align-items:center;
}
.phone-wrap .iti input.fld{
  border:none;
  background:transparent;
  padding:11px 0;
  padding-left:90px !important; /* space for the flag/dial-code */
  font-size:14px;
  width:100%;
}
.phone-wrap .iti__flag-container{
  padding:0;
}
.phone-wrap .iti__selected-flag{
  padding-left:0;
  background:transparent;
}
#iti-0__search-input{
      padding-left: 30px;
    padding-top: 10px;
}



/* ==============================
   PACKAGE DETAILS
============================== */

.package-card {
    grid-column: 1 / -1;
    background: #f8faf9;
    border: 1px solid #20b77a;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 8px;
}

.package-title {
    font-size: 17px;
    font-weight: 700;
    color: #006b4a;
    margin-bottom: 16px;
}

.package-field {
    margin-bottom: 14px;
}

.package-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 7px;
    color: #17251f;
}

.package-field select {
    width: 100%;
}

.package-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #17251f;
}

.package-note {
    margin-top: 6px;
    font-size: 12px;
    color: #777;
}



/* =========================================================
   SUBSCRIBE PAGE – RESPONSIVE ONLY
   Ise main subscribe CSS ke BAAD load karein.
   Breakpoints: 1100px | 900px | 768px | 576px | 400px
   ========================================================= */

/* Overflow safety (grid/select2 ko bahar nikalne se rokta hai) */
.page-wrap{ grid-template-columns:minmax(0,1fr) 390px; }
.form-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-card, .field, .input-wrap, .package-card{ min-width:0; }
.select2-dropdown{ max-width:calc(100vw - 24px); }
.iti__country-list{ max-width:calc(100vw - 40px); }
.package-price{ flex-wrap:wrap; gap:6px 16px; }

/* ---------- Large tablet / small laptop ---------- */
@media (max-width:1100px){
  .page-wrap{
    grid-template-columns:minmax(0,1fr) 320px;
    gap:24px;
    padding:24px;
  }
  .form-card{ padding:30px 28px; }
}

/* ---------- Tablet: sidebar form ke neeche ---------- */
@media (max-width:900px){
  .page-wrap{
    grid-template-columns:1fr;
    max-width:720px;
    gap:24px;
  }
  .sidebar{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 24px;
  }
  .sidebar h3,
  .sidebar > p{ grid-column:1 / -1; }
}

/* ---------- Mobile landscape / small tablet ---------- */
@media (max-width:768px){
  .page-wrap{ padding:18px; }
  .form-card{ padding:26px 22px; border-radius:14px; }
  .form-card-head{ margin-bottom:22px; }
  .form-card-head h2{ font-size:20px; }
  .form-grid{ gap:18px; }
  .package-card{ padding:16px; }
}

/* ---------- Mobile: single column ---------- */
@media (max-width:576px){
  .page-wrap{ padding:12px; gap:16px; }
  .form-card{ padding:22px 16px; border-radius:12px; }
  .form-card-head h2{ font-size:18px; }
  .form-card-head p{ font-size:13px; }

  .form-grid{ grid-template-columns:1fr; gap:16px; }
  .field.full{ grid-column:auto; }
  .package-card{ grid-column:auto; padding:14px; }
  .package-title{ font-size:16px; }
  .package-price{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    font-size:13.5px;
  }

  /* 16px = iPhone par auto-zoom nahi hoga */
  .input-wrap input,
  .input-wrap select,
  .input-wrap textarea,
  .phone-wrap .iti input.fld,
  .phone-wrap .iti input[type="tel"],
  .input-wrap .select2-container--default .select2-selection--single .select2-selection__rendered{
    font-size:16px;
  }

  .submit-btn{ padding:14px; font-size:15px; }

  .sidebar{ display:block; }
  .sidebar h3{ font-size:19px; }
  .why-item{ gap:12px; margin-bottom:20px; }
  .why-icon{ width:40px; height:40px; font-size:16px; }
  .why-item h4{ font-size:14.5px; }
}

/* ---------- Very small phones ---------- */
@media (max-width:400px){
  .page-wrap{ padding:8px; }
  .form-card{ padding:18px 12px; }
  .form-card-head h2{ font-size:17px; }
  .input-wrap{ padding:0 10px; }
  .phone-wrap .iti input.fld,
  .phone-wrap .iti input[type="tel"]{
    padding-left:80px !important;
  }
}

/* ---------- Touch devices ---------- */
@media (hover:none) and (pointer:coarse){
  .input-wrap input,
  .input-wrap select{ min-height:44px; }
  .submit-btn{ min-height:48px; }
}


/* =========================================================
   REGISTER PAGE ADDITIONS
   (Services Required + Captcha section)
   ========================================================= */

/* Base safety */
.services-row{ flex-wrap:wrap; }
.service-opt{ min-width:0; }
.captcha-row{ flex-wrap:wrap; }
.captcha-row .input-wrap{ flex:1 1 180px; min-width:0; }
.captcha-box{ max-width:100%; }
.captcha-box img{ display:block; max-width:100%; height:auto; }
/* error message captcha-row ke andar hai, isliye poori row le */
.captcha-row .form-error{ flex:0 0 100%; margin-top:0; }

/* ---------- Tablet ---------- */
@media (max-width:768px){
  .service-opt{ padding:12px; font-size:13.5px; }
}

/* ---------- Mobile ---------- */
@media (max-width:576px){

  /* Services Required: radio options ek ke neeche ek */
  .services-row{
    flex-direction:column;
    gap:6px;
    padding:6px;
  }
  .service-opt{
    flex:none;
    width:100%;
    padding:12px 14px;
    font-size:14px;
  }

  /* Captcha: image upar, input neeche, full width */
  .captcha-row{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .captcha-box{
    width:100%;
    padding:10px 14px;
    font-size:18px;
    letter-spacing:2px;
    text-align:center;
  }
  .captcha-box img{ margin:0 auto; }
  .captcha-row .input-wrap{ flex:none; width:100%; }
  .captcha-row .form-error{ flex:none; width:100%; }
  .refresh-link{ justify-content:center; }

  /* Sector multiselect tags mobile par wrap ho */
  .input-wrap .select2-selection--multiple .select2-selection__choice{
    font-size:12.5px;
  }
}