/* --- SCOPED CSS FOR APPLY WELFARE SCHEME PAGE --- */

/* Header Section */
.aws-header-container {
    margin-bottom: 24px;
    font-family: 'Inter', sans-serif;
}

    .aws-header-container h1 {
        font-size: 22px;
        font-weight: 700;
        color: #3f3f46; /* Dark gray */
        margin: 0 0 6px 0;
    }

    .aws-header-container p {
        font-size: 14px;
        color: #52525b; /* Muted gray */
        margin: 0;
    }

/* Section Card */
.aws-section-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    font-family: 'Inter', sans-serif;
}

/* Step Header */
.aws-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.aws-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background-color: #3372CF;
    color: #ffffff;
    border-radius: 6px; 
    font-size: 13px;
    font-weight: 700;
}

.aws-section-header h2 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

/* Form Grid */
.aws-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 20px 24px;
}

.aws-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aws-form-label {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

/* Read-only Input Styling */
.aws-input-readonly {
    appearance: none;
    background-color: #F3F3F3;
    border: 1px solid #EEEEEE;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #94a3b8; /* Muted text color */
    font-family: inherit;
    outline: none;
    width: 100%;
    pointer-events: none; /* Prevents interaction */
}

/* Responsive Design */
@media (max-width: 1024px) {
    .aws-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .aws-form-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Form Interactive Inputs --- */

.aws-form-control, .aws-form-select {
    appearance: none;
    background-color: #F3F3F3;
    border: 1px solid #EEEEEE;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #334155;
    font-family: inherit;
    outline: none;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .aws-form-control::placeholder {
        color: #94a3b8;
    }

    .aws-form-control:focus, .aws-form-select:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

/* Custom Dropdown Arrow */
.aws-form-select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' 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");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

/* Two Column Grid for Step 2 */
.aws-form-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px;
    margin-bottom: 20px;
}

/* Info Alert Box */
.aws-alert-info {
    display: flex;
    align-items: flex-start; /* Aligns icon to top if text wraps */
    gap: 12px;
    background-color: #eef2ff; /* Very light blue/indigo background */
    border: 1px solid #e0e7ff;
    border-radius: 8px;
    padding: 16px;
    color: #3730a3; /* Deep blue/indigo text */
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

.aws-alert-icon {
    color: #4f46e5; /* Primary blue/indigo icon color */
    flex-shrink: 0;
    margin-top: 2px; /* Slight tweak to align with text baseline */
}

@media (max-width: 768px) {
    .aws-form-grid-2col {
        grid-template-columns: 1fr;
    }
}

/* Wrapper for inputs with icons (like Date of Birth) */
.aws-input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

    .aws-input-with-icon .aws-form-control {
        padding-right: 36px; /* Make room for the icon on the right */
    }

.aws-input-icon {
    position: absolute;
    right: 12px;
    color: #64748b;
    pointer-events: none;
}
/* --- Specific Styling for Textareas --- */
textarea.aws-form-control {
    resize: none; /* Prevents user from dragging to resize and breaking the layout */
    padding-top: 12px;
    line-height: 1.5;
}
/* --- Document Upload Section --- */
.aws-upload-grid {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 1/3 and 2/3 split */
    gap: 24px;
}

/* Drag & Drop Zone */
.aws-drop-zone {
    border: 2px dashed #bbf7d0; /* Light green dashed border */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    background-color: #ffffff;
    transition: background-color 0.2s;
}

    .aws-drop-zone:hover {
        background-color: #f0fdf4;
    }

.aws-drop-icon-wrap {
    width: 44px;
    height: 44px;
    background-color: #10b981; /* Solid Green */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    margin-bottom: 16px;
}

.aws-drop-title {
    font-size: 14px;
    font-weight: 600;
    color: #15803d; /* Darker Green text */
    margin: 0 0 6px 0;
}

.aws-drop-subtitle {
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
}

/* Document List */
.aws-doc-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aws-doc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
/*    background-color: #f8fafc;*/
    border: 1px solid #f1f5f9;
    border-radius: 8px;
}

.aws-doc-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aws-doc-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

/* Document Specific Icons */
.aws-doc-icon {
    width: 18px;
    height: 18px;
}

.aws-icon-red {
    color: #ef4444;
}

.aws-icon-blue {
    color: #3b82f6;
}

.aws-icon-green {
    color: #10b981;
}

.aws-icon-pink {
    color: #ec4899;
}

/* Document Status & Actions */
.aws-doc-status-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.aws-status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
}

.aws-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.aws-status-uploaded {
    color: #16a34a;
}

    .aws-status-uploaded .aws-status-dot {
        background-color: #16a34a;
    }

.aws-status-required {
    color: #dc2626;
}

    .aws-status-required .aws-status-dot {
        background-color: #dc2626;
    }

.aws-btn-upload-action {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #6366f1; /* Indigo text */
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

    .aws-btn-upload-action:hover {
        background-color: #f8fafc;
        border-color: #94a3b8;
        color: #4f46e5;
    }

/* Responsive */
@media (max-width: 900px) {
    .aws-upload-grid {
        grid-template-columns: 1fr;
    }

    .aws-drop-zone {
        padding: 30px 20px;
    }
}
/* --- Declaration Section & Alerts --- */

.aws-alert-warning {
    display: flex;
    align-items: center; /* Aligns text and icon */
    gap: 12px;
    background-color: #fff7ed; /* Very light orange background */
    border: 1px solid #ffedd5;
    border-radius: 8px;
    padding: 16px;
    color: #d97706; /* Orange text */
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 20px;
}

    .aws-alert-warning svg {
        color: #f59e0b; /* Orange icon */
        flex-shrink: 0;
    }

.aws-declaration-box {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px 20px;
    background-color: #ffffff;
}

.aws-checkbox-large {
    width: 18px;
    height: 18px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px; /* Aligns checkbox with the first line of text */
    transition: all 0.2s;
}

    .aws-checkbox-large:checked {
        background-color: #3372CF;
        border-color: #3372CF;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
    }

.aws-declaration-text {
    font-size: 13px;
    color: #334155;
    line-height: 1.6;
    margin: 0;
}

/* --- Page Action Buttons (Footer) --- */

.aws-page-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    margin-bottom: 40px; /* Gives some breathing room at the bottom of the page */
}

.aws-btn-action {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    border: none;
}

.aws-btn-draft {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #475569;
}

    .aws-btn-draft:hover {
        background-color: #f1f5f9;
        color: #1e293b;
        border-color: #94a3b8;
    }

.aws-btn-primary {
    background-color: #3372CF; /* Matching your blue theme */
    color: #ffffff;
}

    .aws-btn-primary:hover {
        background-color: #2563eb;
    }

/* Responsive */
@media (max-width: 600px) {
    .aws-page-actions {
        flex-direction: column-reverse; /* Stacks buttons on mobile */
    }

    .aws-btn-action {
        width: 100%;
    }
}
/* --- Modal Overlay & Container --- */
.aws-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.aws-modal {
    background-color: #ffffff;
    border-radius: 12px;
    width: 500px; /* Slightly wider to fit the long labels */
    max-width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    font-family: 'Inter', sans-serif;
    animation: awsModalFadeIn 0.2s ease-out;
}

@keyframes awsModalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Modal Header */
.aws-modal-header {
    padding: 20px 24px;
    background-color: #EDF1EF;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.aws-modal-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .aws-modal-title h2 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #1e293b;
    }

    .aws-modal-title p {
        margin: 0;
        font-size: 13px;
        color: #64748b;
    }

.aws-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    transition: opacity 0.2s;
}

    .aws-modal-close:hover {
        opacity: 0.6;
    }

/* Modal Body & Sections */
.aws-modal-body {
    padding: 0 24px;
    overflow-y: auto;
    flex: 1;
}

.aws-modal-section {
    padding: 18px 0;
    border-bottom: 1px solid #e2e8f0;
}

    .aws-modal-section:last-child {
        border-bottom: none;
    }

    .aws-modal-section h3 {
        margin: 0 0 14px 0;
        font-size: 14px;
        font-weight: 700;
        color: #10b981; /* Green from Figma */
    }

/* Data Rows (Aligned with Grid/Flex) */
.aws-modal-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.4;
}

    .aws-modal-row:last-child {
        margin-bottom: 0;
    }

.aws-modal-label {
    width: 170px; /* Fixed width to keep colons perfectly aligned */
    color: #64748b;
    flex-shrink: 0;
    padding-right: 8px;
}

.aws-modal-colon {
    width: 16px;
    color: #1e293b;
    font-weight: 500;
    flex-shrink: 0;
}

.aws-modal-value {
    color: #1e293b;
    font-weight: 600; /* Bolder text to match design */
    flex: 1;
}

.aws-text-green {
    color: #10b981;
}

/* Modal Footer */
.aws-modal-footer {
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.aws-btn-modal {
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.aws-btn-modal-outline {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
}

    .aws-btn-modal-outline:hover {
        background-color: #f8fafc;
        color: #1e293b;
        border-color: #94a3b8;
    }

.aws-btn-modal-solid {
    background-color: #3372CF;
    border: 1px solid #3372CF;
    color: #ffffff;
}

    .aws-btn-modal-solid:hover {
        background-color: #2563eb;
    }
/* --- Submit Confirmation Modal --- */
.aws-submit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000; /* Higher z-index in case it overlaps the other modal */
    padding: 20px;
}

.aws-submit-modal {
    background-color: #ffffff;
    border-radius: 16px;
    width: 440px;
    max-width: 100%;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    font-family: 'Inter', sans-serif;
    text-align: center;
    animation: awsModalFadeIn 0.2s ease-out;
}

.aws-submit-icon {
    color: #f97316; /* Orange color */
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aws-submit-title {
    font-size: 20px;
    font-weight: 700;
    color: #064e3b; /* Dark Green */
    margin: 0 0 12px 0;
}

.aws-submit-subtitle {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
    margin: 0 0 24px 0;
}

/* Summary Info Box */
.aws-submit-info-box {
    background-color: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 16px 20px;
    width: 100%;
    margin-bottom: 28px;
    text-align: left;
}

.aws-submit-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.aws-submit-info-label {
    color: #64748b;
    font-weight: 500;
}

.aws-submit-info-value {
    color: #334155;
    font-weight: 700;
}

.aws-submit-divider {
    height: 1px;
    background-color: #e2e8f0;
    margin: 12px 0;
}

/* Action Buttons */
.aws-submit-actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

.aws-submit-btn {
    flex: 1;
    padding: 12px 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aws-submit-btn-cancel {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
}

    .aws-submit-btn-cancel:hover {
        background-color: #f8fafc;
        border-color: #94a3b8;
        color: #1e293b;
    }

.aws-submit-btn-confirm {
    background-color: #3b82f6;
    border: 1px solid #3b82f6;
    color: #ffffff;
}

    .aws-submit-btn-confirm:hover {
        background-color: #2563eb;
    }
/* --- Application Submitted Success Modal --- */
.aws-success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001; /* Highest z-index */
    padding: 20px;
}

.aws-success-modal {
    background-color: #ffffff;
    border-radius: 16px;
    width: 520px;
    max-width: 100%;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    font-family: 'Inter', sans-serif;
    text-align: center;
    animation: awsModalFadeIn 0.2s ease-out;
}

.aws-success-icon-wrap {
    width: 48px;
    height: 48px;
    background-color: #d1fae5; /* Light Green bg */
    color: #10b981; /* Green icon */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
}

.aws-success-title {
    font-size: 20px;
    font-weight: 700;
    color: #064e3b; /* Dark Green */
    margin: 0 0 12px 0;
}

.aws-success-subtitle {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 24px 0;
    padding: 0 16px;
}

/* Application ID Box */
.aws-success-id-box {
    background-color: #f8fafc;
    border-radius: 8px;
    padding: 16px;
    width: 100%;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aws-success-id-label {
    font-size: 12px;
    color: #64748b;
}

.aws-success-id-value {
    font-size: 16px;
    font-weight: 700;
    color: #16a34a; /* Green text */
}

/* Progress Timeline */
.aws-success-timeline {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
    margin-bottom: 32px;
    padding: 0 10px;
}

/* Background Lines */
.aws-success-tl-line-bg {
    position: absolute;
    top: 20px; /* Centers line vertically with the circles */
    left: 10%;
    right: 10%;
    height: 2px;
    background-color: #e2e8f0;
    z-index: 1;
}

.aws-success-tl-line-active {
    position: absolute;
    top: 20px;
    left: 10%;
    width: 20%; /* Fills the line only to the first step */
    height: 2px;
    background-color: #10b981;
    z-index: 1;
}

.aws-success-tl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2; /* Sits above the lines */
    width: 60px;
}

.aws-success-tl-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    background-color: #ffffff; /* Fallback */
}

/* Specific Node Colors based on Figma */
.aws-tl-node-submitted {
    background-color: #10b981;
    color: #ffffff;
}

.aws-tl-node-mo {
    background-color: #cffafe;
    color: #0891b2;
}
/* Cyan */
.aws-tl-node-rm {
    background-color: #fce7f3;
    color: #db2777;
}
/* Pink */
.aws-tl-node-sm {
    background-color: #fef9c3;
    color: #ca8a04;
}
/* Yellow */
.aws-tl-node-approved {
    background-color: #cbd5e1;
    color: #ffffff;
}
/* Gray */

.aws-success-tl-label {
    font-size: 11px;
    color: #64748b;
    text-align: center;
    line-height: 1.3;
    font-weight: 500;
}

/* Action Buttons */
.aws-success-actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

.aws-success-btn {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aws-success-btn-back {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
}

    .aws-success-btn-back:hover {
        background-color: #f8fafc;
        border-color: #94a3b8;
    }

.aws-success-btn-download {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    flex: 1; /* Takes up more space */
}

    .aws-success-btn-download:hover {
        background-color: #f8fafc;
    }

.aws-success-btn-track {
    background-color: #3b82f6;
    border: 1px solid #3b82f6;
    color: #ffffff;
    flex: 1;
}

    .aws-success-btn-track:hover {
        background-color: #2563eb;
    }
/* --- Eligibility Conditions Box --- */

.aws-eligibility-box {
    background-color: #fffaf0; /* Very light peach/orange */
    border: 1px solid #fed7aa; /* Peach border */
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
    font-family: 'Inter', sans-serif;
}

.aws-eligibility-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.aws-eligibility-icon {
    color: #c2410c; /* Burnt orange */
    margin-top: 2px;
}

.aws-eligibility-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aws-eligibility-title {
    font-size: 16px;
    font-weight: 700;
    color: #9a3412; /* Dark burnt orange */
    margin: 0;
}

.aws-eligibility-subtitle {
    font-size: 13px;
    color: #c2410c;
    margin: 0;
}

.aws-eligibility-list {
    margin: 0;
    padding-left: 42px; /* Aligns bullets with the text, accounting for the icon */
    color: #9a3412;
    font-size: 13px;
    line-height: 1.6;
}

    .aws-eligibility-list li {
        margin-bottom: 8px;
    }

        .aws-eligibility-list li:last-child {
            margin-bottom: 0;
        }

/* --- SCOPED CSS FOR DEALER INFO OVERVIEW --- */

.di-wrapper {
    /* Gradient: lighter on top, darker on bottom */
    background: linear-gradient(to bottom, #F9FBF8 0%, #EBF4E8 100%);
    border: 1px solid #DCEBD8;
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    font-family: 'Inter', sans-serif;
}

/* Header Area */
.di-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #DCEBD8; /* The horizontal separating line */
}

.di-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.di-main-icon {
    width: 48px;
    height: 48px;
    background-color: #E6F0E4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .di-main-icon img {
        width: 32px;
        height: 32px;
        object-fit: contain;
    }

.di-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.di-title {
    font-size: 18px;
    font-weight: 700;
    color: #274F34;
    margin: 0;
}

.di-subtitle {
    font-size: 12px;
    color: #5A7E64;
    margin: 0;
    font-weight: 500;
}

.di-badge {
    /* Gradient: lighter on left, darker on right */
    background: linear-gradient(to right, #EDF5EA 0%, #E0EFDC 100%);
    color: #387146;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #D5EAD0;
}

/* Cards Container */
.di-cards-container {
    display: flex;
    gap: 24px;
}

/* Individual Card */
.di-card {
    /* Gradient: lighter on top, darker on bottom */
    background: linear-gradient(to bottom, #FFFFFF 0%, #F1F7EF 100%);
    border-radius: 16px;
    flex: 1;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    border: 1px solid #E6EFE4;
}

.di-card-content {
    padding: 20px;
    position: relative;
    z-index: 2;
}

.di-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: #274F34;
    margin: 0 0 16px 0;
}

/* Wavy Background */
.di-wave-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    z-index: 1;
}

/* Info Items */
.di-info-row {
    display: flex;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #E6EFE4;
}

    .di-info-row:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.di-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}

    /* Vertical divider positioning */
    .di-info-item.with-divider {
        border-right: 1px solid #E6EFE4;
        padding-right: 16px;
        margin-right: 16px;
    }

    /* Fix flex values for personal info with dividers */
    .di-info-item.flex-1-5 {
        flex: 1.5;
    }

/* Icon Styling matching Figma exactly */
.di-icon-wrap {
    width: 32px;
    height: 32px;
    background-color: #EBF2E9; /* Soft circle background */
    color: #66876D; /* Muted green stroke color */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .di-icon-wrap img {
        width: 16px;
        height: 16px;
        stroke-width: 1.5;
    }

.di-info-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.di-info-label {
    font-size: 12px;
    color: #6B8B74;
    font-weight: 500;
}

.di-info-value {
    font-size: 13px;
    color: #24412B;
    font-weight: 600;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 1024px) {
    .di-cards-container {
        flex-direction: column;
    }

    .di-info-row {
        flex-wrap: wrap;
    }

    .di-info-item.with-divider {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
        margin-bottom: 16px;
    }
}