/* =========================================================
   Sajha Mart Pvt. Ltd. — Preference Share Application
   Modern premium visual system (clean SaaS-style, no certificate motif)
   ========================================================= */

:root{
  --navy:        #1B2340;
  --navy-2:      #2A3562;
  --navy-soft:   #EEF0F8;
  --gold:        #C79A2E;
  --gold-soft:   #F6ECD2;
  --orange:      #E96B22;
  --green:       #2E6B3E;
  --bg:          #F4F5FA;
  --card:        #FFFFFF;
  --border:      #E5E7F0;
  --ink:         #1E2230;
  --muted:       #767C93;
  --danger:      #C4372C;

  --font-display: 'Manrope', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(199,154,46,0.10) 0%, transparent 40%),
    radial-gradient(circle at 95% 100%, rgba(233,107,34,0.08) 0%, transparent 45%),
    var(--bg);
  min-height: 100vh;
}

.certificate-wrap{
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 16px;
}

.certificate{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 44px 48px 40px;
  box-shadow: 0 1px 2px rgba(20,24,45,0.04), 0 24px 48px -16px rgba(20,24,45,0.14);
}

/* ---------- header ---------- */
.cert-header{
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 26px;
  margin-bottom: 8px;
}
.cert-header img{
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
}
.cert-header .company-name{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.15;
}
.cert-header .regd{
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
}
.form-title{
  display:inline-block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-soft);
  border-radius: 30px;
  padding: 5px 14px;
}

/* ---------- progress stepper ---------- */
.stepper{
  display:flex;
  align-items:center;
  gap: 6px;
  margin: 26px 0 34px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.step-dot{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy-soft);
  color: var(--navy-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.step-line{
  flex:1;
  height: 2px;
  background: var(--navy-soft);
  min-width: 6px;
}
@media (max-width: 700px){
  .stepper{ display:none; }
}

/* ---------- section blocks ---------- */
.section{
  margin-bottom: 34px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--border);
}
.section:last-of-type{ border-bottom: none; }
.section-head{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-bottom: 20px;
}
.section-num{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.section-title{
  font-family: var(--font-display);
  font-size: 17.5px;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.section-title small{
  display:block;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0;
  text-transform: none;
}
.section-line{ display:none; }

/* ---------- form fields ---------- */
.field-label{
  font-size: 12.5px;
  color: var(--navy);
  font-weight: 600;
  margin-bottom: 7px;
  display:block;
}
.field-label .req{ color: var(--danger); }

.form-control, .form-select{
  border: 1.4px solid var(--border);
  border-radius: var(--radius-sm);
  background: #FCFCFE;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink);
}
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 3.5px rgba(199,154,46,0.18);
  border-color: var(--gold);
  background: #fff;
}
.form-control::placeholder{ color: #A7ACC0; font-size: 13.5px; }

/* --- membership / pricing option cards --- */
.opt-box{
  border: 1.6px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  height: 100%;
  transition: all .15s ease;
  background: #FCFCFE;
}
.opt-box:hover{ border-color: var(--gold); background:#fff; }
.opt-box input{ accent-color: var(--orange); width:18px; height:18px; }
.opt-box .opt-label{ font-weight: 700; color: var(--navy); font-size: 15px; font-family: var(--font-display); }
.opt-box .opt-sub{ font-size: 12px; color: var(--muted); margin-top:2px; }
.opt-box .opt-price{
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--orange);
}
.opt-box.checked{
  border-color: var(--orange);
  background: #FFF6EF;
  box-shadow: 0 4px 14px rgba(233,107,34,0.12);
}

/* ---------- pill radio row ---------- */
.pill-check{
  border: 1.4px solid var(--border);
  border-radius: 30px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy-2);
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  background: #FCFCFE;
  transition: all .15s ease;
}
.pill-check input{ accent-color: var(--orange); }
.pill-check:hover{ border-color: var(--gold); }
.pill-check:has(input:checked){
  border-color: var(--orange);
  background: #FFF6EF;
  color: var(--orange);
}

/* ---------- declaration box ---------- */
.declaration-box{
  background: var(--navy-soft);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-size: 13.5px;
  color: var(--navy-2);
  line-height: 1.65;
}
.declaration-box a{ color: var(--orange); font-weight:700; text-decoration: none; }
.declaration-box a:hover{ text-decoration: underline; }

/* ---------- signature block (modern, no seal) ---------- */
.sig-block{
  border: 1.4px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  height: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sig-block svg{ margin-bottom: 8px; opacity: .55; }

/* ---------- submit button ---------- */
.btn-submit{
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 15px 48px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: all .2s ease;
  box-shadow: 0 10px 24px -8px rgba(27,35,64,0.45);
}
.btn-submit:hover{
  background: linear-gradient(135deg, var(--navy-2), var(--orange));
  color:#fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -8px rgba(233,107,34,0.4);
}

/* ---------- footer strip ---------- */
.cert-footer{
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--muted);
  display:flex;
  justify-content: space-between;
}

/* ---------- error / help text ---------- */
.invalid-feedback{ font-size: 11.5px; }
.form-control.is-invalid{ border-color: var(--danger); }

/* ---------- responsive ---------- */
@media (max-width: 640px){
  .certificate{ padding: 30px 20px 26px; border-radius: 16px; }
  .cert-header{ flex-direction: column; text-align:center; }
  .cert-header .company-name{ font-size: 21px; }
  .cert-footer{ flex-direction: column; gap: 4px; text-align:center; }
}

@media (prefers-reduced-motion: reduce){
  .opt-box, .pill-check, .btn-submit{ transition: none; }
}

/* =========================================================
   SITE HEADER
   ========================================================= */

.site-header{
    background: var(--navy);
    padding: 22px 20px;
    box-shadow: 0 5px 18px rgba(0,0,0,.15);
}

.site-header-inner{
    max-width: 1200px;
    margin: 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.site-brand{
    display:flex;
    align-items:center;
    gap:18px;
    text-decoration:none;
    color:#fff;
}

.site-brand img{
    width:80px;
    height:80px;
    object-fit:contain;
    background:#fff;
    border-radius:12px;
    padding:6px;
    box-shadow:0 4px 15px rgba(0,0,0,.20);
}

.site-brand span{
    font-family:var(--font-display);
    font-size:25px;
    font-weight:800;
    line-height:1.1;
    letter-spacing:.5px;
    color:#fff;
}

.site-brand span em{
    display:block;
    font-size:17px;
    font-style:normal;
    font-weight:600;
    color:var(--gold);
    margin-top:4px;
}

.site-contact{
    display:flex;
    align-items:center;
    gap:20px;
}

.site-contact-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:17px;
    font-weight:600;
    color:#fff;
}

.site-contact-item svg{
    width:20px;
    height:20px;
    color:var(--gold);
}

a.site-contact-item:hover{
    color:#fff;
}

@media(max-width:768px){

    .site-header{
        padding:18px 15px;
    }

    .site-header-inner{
        flex-direction:column;
        text-align:center;
    }

    .site-brand{
        flex-direction:column;
        gap:10px;
    }

    .site-brand img{
        width:70px;
        height:70px;
    }

    .site-brand span{
        font-size:28px;
    }

    .site-brand span em{
        font-size:15px;
    }

    .site-contact{
        justify-content:center;
    }

    .site-contact-item{
        font-size:15px;
    }

}

/* =========================================================
   SITE FOOTER
   ========================================================= */
.site-footer{
  background: var(--navy);
  margin-top: 48px;
  padding: 44px 16px 0;
}
.site-footer-inner{
  max-width: 920px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 28px;
  padding-bottom: 32px;
}
.site-footer-col p{
  font-size: 12.5px;
  color: #A9AEC6;
  line-height: 1.7;
  margin: 0;
}
.site-footer-col a{
  color: #C9CDE0;
  text-decoration: none;
}
.site-footer-col a:hover{ color: var(--gold); }
.site-footer-heading{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gold-soft);
  margin-bottom: 10px;
}
.site-footer-brand{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.site-footer-brand img{
  width: 36px;
  height: 36px;
  object-fit: contain;
  background:#fff;
  border-radius: 8px;
  padding: 3px;
}
.site-footer-brand span{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: #fff;
}
.site-footer-brand span em{
  font-style: normal;
  font-weight: 500;
  color: var(--gold-soft);
}
.site-footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 16px;
  text-align:center;
  font-size: 11.5px;
  color: #8B90AC;
}

@media (max-width: 700px){
  .site-footer-inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px){
  .site-footer-inner{ grid-template-columns: 1fr; text-align:center; }
  .site-footer-brand{ align-items:center; }
}