/* --- frontend/payment-style.css (FINAL, COMPLETE VERSION WITH INPUT FIX) --- */
:root {
    --brand-blue: #2563EB; --brand-blue-dark: #1E40AF; --brand-blue-light: #EFF6FF; --brand-blue-border: #93C5FD;
    --gray-900: #111827; --gray-800: #1F2937; --gray-700: #374151; --gray-600: #4B5563;
    --gray-500: #6B7280; --gray-400: #9CA3AF; --gray-300: #D1D5DB; --gray-200: #E5E7EB;
    --gray-100: #F3F4F6; --gray-50: #F9FAFB; --white: #FFFFFF;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --radius-lg: 12px; --radius-xl: 16px; --transition-fast: all 0.2s ease-in-out;
}
.payment-wrapper { max-width: 900px; margin: 0 auto; padding: 40px 24px; }
.payment-step-header { text-align: center; margin-bottom: 40px; }
.payment-step-header h2 { font-size: 32px; font-weight: 700; color: var(--gray-900); }
.payment-step-header p { font-size: 18px; color: var(--gray-600); max-width: 600px; margin: 8px auto 0; }
#selection-step .loading-state { text-align: center; color: var(--gray-500); padding: 40px; font-size: 18px; }
#selection-step .loading-state i { margin-right: 8px; }

.project-group { background-color: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-xl); margin-bottom: 24px; box-shadow: var(--shadow-md); overflow: hidden; }
.project-group-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; cursor: pointer; background-color: var(--gray-50); transition: var(--transition-fast); }
.project-group-header:hover { background-color: var(--gray-100); }
.project-group-header-info { display: flex; align-items: center; gap: 16px; }
.project-group-header-info i { font-size: 20px; color: var(--brand-blue); }
.project-group-header-info h3 { font-size: 18px; font-weight: 600; color: var(--gray-800); margin: 0; }
.project-group-header-info .submission-count { font-size: 14px; color: var(--gray-500); margin: 4px 0 0; }
.project-group-toggle i { font-size: 16px; color: var(--gray-500); transition: transform 0.3s ease; }
.project-group.is-open .project-group-toggle i { transform: rotate(180deg); }
.project-submissions-container { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; background-color: var(--white); }
.project-group.is-open .project-submissions-container { max-height: 1000px; }

.submission-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--gray-200); }
.submission-card-info h4 { font-size: 16px; font-weight: 600; color: var(--gray-800); margin: 0 0 4px; }
.submission-card-info p { font-size: 14px; color: var(--gray-500); margin: 0; }
.submission-card-balance strong { font-size: 18px; font-weight: 700; color: var(--brand-blue-dark); }
.submission-card .btn-primary { padding: 8px 16px; font-size: 14px; font-weight: 500; }

#payment-step { position: relative; max-width: 720px; margin: 0 auto; }
.payment-back-btn { position: absolute; top: 0; left: -80px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--gray-200); color: var(--gray-500); cursor: pointer; transition: var(--transition-fast); }
.payment-back-btn:hover { background-color: var(--gray-100); }
.payment-details-box { background-color: var(--white); border: 1px solid var(--gray-200); padding: 40px; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.form-section { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--gray-200); }
.form-section:last-of-type { border-bottom: none; margin-bottom: 0; }
.form-section h3 { font-size: 20px; font-weight: 600; color: var(--gray-900); }
.payment-balance-summary { background-color: var(--gray-50); border: 1px solid var(--gray-200); padding: 20px; border-radius: var(--radius-lg); margin: 24px 0; }
.balance-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 16px; }
.balance-item strong { font-weight: 600; color: var(--gray-800); }
.balance-item.remaining { border-top: 1px solid var(--gray-200); margin-top: 8px; padding-top: 16px; font-size: 18px; }
.balance-item.remaining strong { color: var(--brand-blue-dark); font-size: 20px; font-weight: 700; }
.radio-card-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.radio-card input[type="radio"] { position: absolute; opacity: 0; }
.radio-card .radio-card-label { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px; border: 2px solid var(--gray-200); border-radius: var(--radius-lg); cursor: pointer; transition: var(--transition-fast); }
.radio-card input[type="radio"]:checked + .radio-card-label { border-color: var(--brand-blue); background-color: var(--brand-blue-light); }
.radio-card .radio-card-label .title { font-weight: 600; color: var(--gray-800); }
.radio-card.is-disabled .radio-card-label { background-color: var(--gray-100); cursor: not-allowed; opacity: 0.6; }

/* === DEFINITIVE FIX FOR USER INFO INPUTS === */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 500; font-size: 14px; color: var(--gray-700); margin-bottom: 8px; }
.input-group { position: relative; }
.input-group i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--gray-400); font-size: 16px; }
.form-control { width: 100%; padding: 12px 16px; border: 1px solid var(--gray-300); border-radius: var(--radius-lg); font-size: 16px; }
.input-group .form-control { padding-left: 48px; }
.form-control:read-only {
    background-color: var(--gray-100);
    color: var(--gray-800);
    font-weight: 600;
    cursor: default;
    border-color: var(--gray-200);
    box-shadow: none;
}
.form-control:read-only:focus { outline: none; box-shadow: none; border-color: var(--gray-200); }

.amount-summary { display: flex; justify-content: space-between; align-items: center; padding: 24px; background-color: var(--gray-100); border-radius: var(--radius-lg); margin-top: 24px; }
.amount-summary .label { font-size: 18px; font-weight: 500; color: var(--gray-600); }
.amount-summary .value { font-size: 28px; font-weight: 700; color: var(--gray-900); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; border-radius: var(--radius-lg); padding: 12px 24px; border: none; cursor: pointer; transition: var(--transition-fast); }
.btn-primary { background-color: var(--brand-blue); color: var(--white); }
.btn-primary:disabled { background-color: var(--gray-300); cursor: not-allowed; }
.btn-primary:hover:not(:disabled) { background-color: var(--brand-blue-dark); }
.btn-secondary { background-color: var(--white); color: var(--gray-800); border: 1px solid var(--gray-300); }
.btn-secondary:hover { background-color: var(--gray-50); }

/* --- Modal & Popup Styling --- */
.modal-overlay { position: fixed; inset: 0; background-color: rgba(17, 24, 39, 0.8); backdrop-filter: blur(8px); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.modal-overlay.is-visible { opacity: 1; visibility: visible; }
.info-modal { background-color: var(--white); border-radius: var(--radius-xl); max-width: 550px; width: 90%; text-align: center; overflow: hidden; transform: scale(0.95); transition: transform 0.3s ease; }
.modal-overlay.is-visible .info-modal { transform: scale(1); }
.modal-header { padding: 32px 32px 16px; }
.modal-icon-wrapper { width: 60px; height: 60px; border-radius: 50%; background-color: var(--brand-blue-light); color: var(--brand-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 20px; }
.modal-header h2 { font-size: 24px; font-weight: 700; color: var(--gray-900); margin: 0; }
.modal-body { padding: 0 32px 24px; }
.modal-body p { color: var(--gray-600); font-size: 16px; line-height: 1.6; margin: 0 0 24px; }
.reasons-list { list-style: none; padding: 0; margin: 0; text-align: left; }
.reasons-list li { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.reasons-list li:last-child { margin-bottom: 0; }
.reason-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--white); }
.reason-icon.status-pending { background-color: #f59e0b; }
.reason-icon.status-rejected { background-color: #ef4444; }
.reason-icon.status-paid { background-color: #22c55e; }
.reason-text { font-size: 15px; color: var(--gray-700); }
.reason-text strong { color: var(--gray-900); font-weight: 600; }
.modal-footer { background-color: var(--gray-50); padding: 24px 32px; border-top: 1px solid var(--gray-200); display: flex; justify-content: flex-end; gap: 12px; }

/* ================================================= */
/*   DARK THEME FOR REDESIGNED PAYMENT PAGE          */
/* ================================================= */
body.dark-theme .payment-wrapper { background-color: var(--gray-900); }
body.dark-theme .payment-step-header h2 { color: var(--gray-100); }
body.dark-theme .payment-step-header p, body.dark-theme #selection-step .loading-state { color: var(--gray-400); }
body.dark-theme .project-group { background-color: var(--gray-800); border-color: var(--gray-700); }
body.dark-theme .project-group-header { background-color: #111C2E; }
body.dark-theme .project-group-header:hover { background-color: var(--gray-800); }
body.dark-theme .project-group-header-info h3 { color: var(--gray-200); }
body.dark-theme .project-group-header-info .submission-count, body.dark-theme .project-group-toggle i { color: var(--gray-400); }
body.dark-theme .project-submissions-container { background-color: var(--gray-800); }
body.dark-theme .submission-card { border-color: var(--gray-700); }
body.dark-theme .submission-card-info h4 { color: var(--gray-200); }
body.dark-theme .submission-card-info p { color: var(--gray-400); }
body.dark-theme .submission-card-balance strong { color: var(--brand-blue-border); }
body.dark-theme .payment-details-box { background-color: var(--gray-800); border-color: var(--gray-700); }
body.dark-theme .form-section { border-bottom-color: var(--gray-700); }
body.dark-theme .form-section h3 { color: var(--gray-100); }
body.dark-theme .payment-balance-summary { background-color: var(--gray-900); border-color: var(--gray-700); }
body.dark-theme .balance-item { color: var(--gray-400); border-color: var(--gray-700); }
body.dark-theme .balance-item strong { color: var(--gray-200); }
body.dark-theme .balance-item.remaining span { color: var(--gray-100); }
body.dark-theme .balance-item.remaining strong { color: var(--brand-blue-border); }
body.dark-theme .radio-card .radio-card-label { background-color: var(--gray-900); border-color: var(--gray-700); }
body.dark-theme .radio-card-label .title { color: var(--gray-200); }
body.dark-theme .radio-card-label .subtitle { color: var(--gray-500); }
body.dark-theme .radio-card input[type="radio"]:checked + .radio-card-label { background-color: #1E3A8A; border-color: var(--brand-blue); }
body.dark-theme .radio-card input[type="radio"]:checked + .radio-card-label .title { color: var(--white); }
body.dark-theme .radio-card.is-disabled .radio-card-label { background-color: var(--gray-700); opacity: 0.5; }

/* === DEFINITIVE DARK THEME FIX FOR USER INFO INPUTS === */
body.dark-theme .form-group label { color: var(--gray-300); }
body.dark-theme .input-group i { color: var(--gray-500); }
body.dark-theme .form-control:read-only {
    background-color: var(--gray-900);
    color: var(--gray-200);
    border-color: var(--gray-700);
}

body.dark-theme .amount-summary { background-color: var(--gray-900); }
body.dark-theme .amount-summary .label { color: var(--gray-400); }
body.dark-theme .amount-summary .value { color: var(--gray-100); }
body.dark-theme .modal-overlay { background-color: rgba(10, 10, 20, 0.7); backdrop-filter: blur(8px); }
body.dark-theme .info-modal { background-color: var(--gray-800); }
body.dark-theme .modal-header h2, body.dark-theme .reason-text strong { color: var(--gray-100); }
body.dark-theme .modal-body p, body.dark-theme .reason-text { color: var(--gray-400); }
body.dark-theme .modal-footer { background-color: var(--gray-900); border-top-color: var(--gray-700); }
body.dark-theme .btn-secondary { background-color: var(--gray-700); color: var(--gray-100); border-color: var(--gray-600); }
body.dark-theme .btn-secondary:hover { background-color: var(--gray-600); }