/* 1. Import Cormorant Garamond from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&display=swap');

/* 2. Sari Headings ko target karein */
#pif-ultra-wrapper h1,
#pif-ultra-wrapper .brand-title{
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 700 !important;
    color: #151509 !important; /* Deep Green color */
    letter-spacing: 0.5px !important;
    text-transform: none !important; /* Serif fonts usually look better in normal case */
}
#pif-ultra-wrapper h2, 
#pif-ultra-wrapper h3,
#pif-ultra-wrapper .brand-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 700 !important;
    color: #2d3b2d !important; /* Deep Green color */
    letter-spacing: 0.5px !important;
    text-transform: none !important; /* Serif fonts usually look better in normal case */
}

/* 3. Specific font sizes for better hierarchy */
#pif-ultra-wrapper h1 {
    font-size: 42px !important;
    line-height: 1.1 !important;
    margin-bottom: 20px !important;
}

#pif-ultra-wrapper h2 {
    font-size: 34px !important;
    margin-bottom: 25px !important;
}

/* 4. Side panel headings ka color cream hi rakhein */
.pif-side-panel h1 {
    color: #fffbef !important;
}

/* 5. Labels ke liye ham wahi clean 'Inter' ya sans-serif hi rakhenge 
      taake form readable rahe, lekin headings classic serif ho jayengi */
.label-modern {
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
}




#pif-ultra-wrapper {
    display: flex !important;
    width: 1140px !important;
    margin: 50px auto !important;
    background: #ffffff !important;
    border-radius: 40px !important;
    overflow: hidden !important;
box-shadow: 
    0 0 60px rgba(45, 59, 45, 0.15),
    0 0 120px rgba(45, 59, 45, 0.1) !important;    border: none !important;
}

/* SIDE PANEL */
.pif-side-panel {
    flex: 0 0 360px !important;
    background: #fffaee !important;
    color: #151509 !important;
    padding: 60px 40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.pif-side-panel h1 { font-size: 32px !important; color: #fffbef !important; margin: 20px 0 !important; border: none !important; }

/* FORM PANEL - Background Color: #faefde */
.pif-form-panel {
    flex: 1 !important;
    padding: 50px 60px !important;
    background: #faefde !important; /* MAIN BACKGROUND */
    border: none !important;
}

#multiStepForm, #multiStepForm fieldset {
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pif-step { display: none !important; }
.pif-step.active { display: block !important; animation: fadeInPIF 0.5s ease !important; }

@keyframes fadeInPIF { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* PROGRESS BAR */
.pif-progress-rail { background: rgba(45, 59, 45, 0.1) !important; height: 8px !important; border-radius: 10px !important; margin-bottom: 30px !important; }
#progressBar { background: #F7F664 !important; height: 100% !important; border-radius: 10px !important; transition: width 0.4s ease !important; }
.pif-step-label { text-align: right !important; font-size: 13px !important; font-weight: 700 !important; color: #2d3b2d !important; margin-bottom: 30px !important; }

/* INPUT STACK & SPACING */
.pif-input-stack { display: flex !important; flex-direction: column !important; gap: 20px !important; }
.input-field-wrap { margin-bottom: 5px !important; }

.label-modern {
    display: block !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #2d3b2d !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
    letter-spacing: 1px !important;
}

/* FIELD BACKGROUND: #fffbef */
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea {
    width: 100% !important;
    padding: 14px 18px !important;
    background: #fffbef !important; /* FIELD BACKGROUND */
    border: 1px solid rgba(45, 59, 45, 0.1) !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    color: #2d3b2d !important;
    outline: none !important;
}

/* RADIO CARDS */
.pif-grid-options { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 15px !important; margin: 20px 0 !important; }
.pif-option-card { cursor: pointer !important; position: relative !important; display: block !important; }
.pif-option-card input { position: absolute !important; opacity: 0 !important; width: 0 !important; }

.card-inner {
    background: #fffbef !important; /* BOX BACKGROUND */
    border: 2px solid rgba(45, 59, 45, 0.1) !important;
    padding: 25px 15px !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: 0.3s ease !important;
}

.card-circle { width: 20px !important; height: 20px !important; border: 1px solid #00000000 !important; border-radius: 50% !important; position: relative !important; }
.card-label { font-size: 15px !important; font-weight: 700 !important; color: #2d3b2d !important; }

/* Active States */
.pif-option-card input:checked + .card-inner { background: #F7F664 !important; border-color: #2d3b2d !important; }
.pif-option-card input:checked + .card-inner .card-label { color: #141413 !important; }
.pif-option-card input:checked + .card-inner .card-circle { background: #fff !important; border-color: #fff !important; }

/* CHECKBOX PILLS (CONCERNS) */
.pif-concern-grid-modern { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 12px !important; }
.pif-check-card input { position: absolute !important; opacity: 0 !important; }
.check-ui { background: #fffbef !important; border: 1.5px solid rgba(45, 59, 45, 0.1) !important; padding: 15px !important; border-radius: 15px !important; display: flex !important; align-items: center !important; gap: 10px !important; }
.pif-check-card input:checked + .check-ui { background: #F7F664 !important; border-color: #2d3b2d !important; }
.pif-check-card input:checked + .check-ui * { color: #141413 !important; }

/* BUTTONS - PILL SHAPE */
.btn-footer { display: flex !important; justify-content: space-between !important; margin-top: 40px !important; padding-top: 25px !important; border-top: 1.5px solid rgba(45, 59, 45, 0.1) !important; }
.pif-action-btn { background: #F7F664 !important; color: #000000 !important; padding: 16px 45px !important; border-radius: 50px !important; font-weight: 700 !important; border: solid !important; cursor: pointer !important; }
.pif-link-btn { background: transparent !important; color: #2d3b2d !important; border: 2.5px solid #2d3b2d !important; padding: 14px 40px !important; border-radius: 50px !important; font-weight: 700 !important; text-decoration: none !important; }

/* MOBILE RESPONSIVE */
@media (max-width: 850px) {
    #pif-ultra-wrapper { flex-direction: column !important; margin: 0 !important; border-radius: 0 !important; }
    .pif-side-panel { flex: none !important; padding: 30px !important; text-align: center !important; }
    .pif-form-panel { padding: 30px 20px !important; }
    .pif-grid-options { grid-template-columns: 1fr !important; }
}


/* ADD/UPDATE THESE STYLES IN YOUR CSS FILE */

/* 1. Alignment & Spacing for Agreements */
.compliance-box-modern {
    background: #fffbef !important;
    padding: 25px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(45, 59, 45, 0.1) !important;
    margin-top: 25px !important;
}

.comp-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
    cursor: pointer !important;
}

.comp-row input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin-top: 3px !important;
    accent-color: #2d3b2d !important;
}

.comp-text {
    font-size: 14px !important;
    color: #2d3b2d !important;
    line-height: 1.5 !important;
}

.comp-text a {
    color: #2d3b2d !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

/* 2. Signature Input Specific */
.sig-input-wrap input {
    background: #ffffff !important;
    border: 1.5px solid #2d3b2d !important;
}

/* 3. Center reCAPTCHA */
.captcha-container {
    display: flex !important;
    justify-content: center !important;
    margin: 30px 0 !important;
    width: 100% !important;
}

/* 4. Fix Select Menus to match inputs */
select {
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d3b2d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 15px !important;
    padding-right: 40px !important;
}

/* 5. Button Alignment Fix */
.btn-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 30px !important;
    border-top: 1px solid rgba(45, 59, 45, 0.1) !important;
    width: 100% !important;
}