/* ==========================================================
   FRANCHERRY MANAGER PORTAL
   PAYMENTS MODULE
   Clean Final Stylesheet
   Version: 1.2.0
========================================================== */


/* ==========================================================
   1. BASE / VARIABLES
========================================================== */

.fb-payments-wrapper {

    --fb-gold: #C89B3C;
    --fb-black: #111111;
    --fb-text: #222222;
    --fb-muted: #777777;
    --fb-border: #E1E1E1;
    --fb-soft: #F6F7F8;
    --fb-white: #FFFFFF;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 34px 28px 42px !important;

    box-sizing: border-box !important;

    background: var(--fb-soft) !important;
    color: var(--fb-text) !important;

    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.5 !important;

    overflow-x: hidden !important;
}


.fb-payments-wrapper *,
.fb-payments-wrapper *::before,
.fb-payments-wrapper *::after {

    box-sizing: border-box !important;
}


/* ==========================================================
   2. PAGE HEADER
========================================================== */

.fb-payments-header {

    width: 100% !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;

    gap: 28px !important;

    margin: 0 0 28px !important;
}


.fb-payments-header-left {

    min-width: 0 !important;
}


.fb-payments-title {

    margin: 0 0 7px !important;
    padding: 0 !important;

    color: #171717 !important;

    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}


.fb-payments-subtitle {

    margin: 0 !important;
    padding: 0 !important;

    color: #737373 !important;

    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}


.fb-payments-header-summary {

    min-width: 145px !important;
    min-height: 82px !important;

    padding: 14px 18px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    background: var(--fb-white) !important;

    border: 1px solid var(--fb-border) !important;
    border-radius: 14px !important;
}


.fb-payments-header-summary-label {

    display: block !important;

    margin-bottom: 5px !important;

    color: #888888 !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}


.fb-payments-header-summary-value {

    color: #171717 !important;

    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}


/* ==========================================================
   3. SUMMARY / KPI CARDS
========================================================== */

.fb-payments-summary-grid {

    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;

    gap: 14px !important;

    margin: 0 0 18px !important;
}


.fb-payment-summary-card {

    min-width: 0 !important;
    min-height: 118px !important;

    padding: 18px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    background: var(--fb-white) !important;

    border: 1px solid var(--fb-border) !important;
    border-radius: 14px !important;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.02) !important;
}


.fb-payment-summary-label {

    display: block !important;

    margin: 0 0 8px !important;

    color: #777777 !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}


.fb-payment-summary-value {

    display: block !important;

    margin: 0 0 6px !important;

    color: #171717 !important;

    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}


.fb-payment-summary-note {

    display: block !important;

    color: #999999 !important;

    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}


.fb-payment-summary-card:first-child
.fb-payment-summary-value,
.fb-payment-summary-outstanding
.fb-payment-summary-value {

    color: var(--fb-gold) !important;
}


/* ==========================================================
   4. FILTER PANEL
========================================================== */

.fb-payments-filters {

    width: 100% !important;
    max-width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;

    gap: 13px !important;

    align-items: end !important;

    margin: 0 0 18px !important;
    padding: 18px !important;

    background: var(--fb-white) !important;

    border: 1px solid var(--fb-border) !important;
    border-radius: 14px !important;

    overflow: hidden !important;
}


/* Row 1 */

.fb-payments-filter-search {

    grid-column: span 4 !important;
}


.fb-payments-filter:nth-child(2) {

    grid-column: span 2 !important;
}


.fb-payments-filter:nth-child(3) {

    grid-column: span 2 !important;
}


.fb-payments-filter:nth-child(4) {

    grid-column: span 4 !important;
}


/* Row 2 */

.fb-payments-filter:nth-child(5) {

    grid-column: span 3 !important;
}


.fb-payments-filter:nth-child(6) {

    grid-column: span 3 !important;
}


.fb-payments-filter:nth-child(7) {

    grid-column: span 2 !important;
}


.fb-payments-filter-action:nth-last-child(2) {

    grid-column: span 2 !important;
}


.fb-payments-filter-action:last-child {

    grid-column: span 2 !important;
}


.fb-payments-filter,
.fb-payments-filter-action {

    min-width: 0 !important;
}


.fb-payments-filter label {

    display: block !important;

    margin: 0 0 6px !important;

    color: #666666 !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}


.fb-payments-filter-input,
.fb-payments-filter-select {

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 43px !important;

    margin: 0 !important;
    padding: 0 12px !important;

    background: var(--fb-white) !important;
    color: #171717 !important;

    border: 1px solid #D8D8D8 !important;
    border-radius: 8px !important;

    outline: none !important;
    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: normal !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}


.fb-payments-filter-input:focus,
.fb-payments-filter-select:focus {

    border-color: var(--fb-gold) !important;

    box-shadow: 0 0 0 3px rgba(200, 155, 60, 0.12) !important;
}


.fb-payments-filter-select {

    cursor: pointer !important;
}


/* Search field */

.fb-payments-search-field {

    position: relative !important;

    width: 100% !important;
}


.fb-payments-search-field
.fb-payments-filter-input {

    padding-left: 38px !important;
}


.fb-payments-search-icon {

    position: absolute !important;

    top: 50% !important;
    left: 12px !important;

    z-index: 2 !important;

    transform: translateY(-50%) !important;

    color: #999999 !important;

    font-size: 13px !important;
    line-height: 1 !important;

    pointer-events: none !important;
}


/* Filter buttons */

.fb-payments-filter-action {

    display: flex !important;
    align-items: flex-end !important;
}


.fb-payments-primary-button,
.fb-payments-secondary-button {

    width: 100% !important;
    min-width: 0 !important;
    height: 43px !important;

    margin: 0 !important;
    padding: 0 16px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 7px !important;

    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    cursor: pointer !important;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease !important;
}


.fb-payments-primary-button {

    background: var(--fb-gold) !important;
    color: #000000 !important;

    border: 1px solid var(--fb-gold) !important;
}


.fb-payments-primary-button:hover {

    background: #000000 !important;
    color: var(--fb-gold) !important;

    border-color: #000000 !important;
}


.fb-payments-secondary-button {

    background: #000000 !important;
    color: var(--fb-gold) !important;

    border: 1px solid #000000 !important;
}


.fb-payments-secondary-button:hover {

    background: var(--fb-gold) !important;
    color: #000000 !important;

    border-color: var(--fb-gold) !important;
}


.fb-payments-primary-button:disabled,
.fb-payments-secondary-button:disabled {

    opacity: 0.55 !important;

    cursor: not-allowed !important;
}


/* ==========================================================
   5. MESSAGE
========================================================== */

.fb-payments-message {

    width: 100% !important;

    margin: 0 0 18px !important;
    padding: 12px 14px !important;

    border-radius: 8px !important;

    font-size: 12px !important;
    line-height: 1.45 !important;
}


.fb-payments-message.error {

    background: #FFF2F2 !important;
    color: #A92A2A !important;

    border: 1px solid #F0CACA !important;
}


.fb-payments-message.success {

    background: #EFFAF2 !important;
    color: #287A3B !important;

    border: 1px solid #CDEBD4 !important;
}


/* ==========================================================
   6. PAYMENT INSIGHTS
========================================================== */

.fb-payments-insights-grid {

    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 16px !important;

    margin: 0 0 16px !important;
}


.fb-payment-panel {

    width: 100% !important;
    min-width: 0 !important;

    background: var(--fb-white) !important;

    border: 1px solid var(--fb-border) !important;
    border-radius: 16px !important;

    overflow: hidden !important;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}


.fb-payment-panel-header {

    width: 100% !important;

    padding: 18px 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 18px !important;

    border-bottom: 1px solid #ECECEC !important;
}


.fb-payment-panel-header h2 {

    margin: 0 0 4px !important;
    padding: 0 !important;

    color: #171717 !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}


.fb-payment-panel-header p {

    margin: 0 !important;
    padding: 0 !important;

    color: #888888 !important;

    font-size: 11px !important;
    line-height: 1.45 !important;
}


/* Status breakdown */

.fb-payment-status-list {

    width: 100% !important;
    min-height: 190px !important;

    padding: 16px 20px 18px !important;
}


.fb-payment-status-row {

    width: 100% !important;

    padding: 14px 0 !important;

    border-bottom: 1px solid #F0F0F0 !important;
}


.fb-payment-status-row:last-child {

    border-bottom: 0 !important;
}


.fb-payment-status-row-header {

    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 15px !important;

    margin-bottom: 8px !important;
}


.fb-payment-status-row-header > strong {

    color: #171717 !important;

    font-size: 12px !important;
    font-weight: 700 !important;
}


.fb-payment-status-name {

    display: inline-flex !important;
    align-items: center !important;

    gap: 8px !important;

    color: #444444 !important;

    font-size: 12px !important;
    font-weight: 600 !important;
}


.fb-payment-status-dot {

    width: 8px !important;
    height: 8px !important;

    flex: 0 0 8px !important;

    display: inline-block !important;

    background: #AAAAAA !important;

    border-radius: 50% !important;
}


.fb-payment-status-track {

    width: 100% !important;
    height: 5px !important;

    overflow: hidden !important;

    background: #EEEEEE !important;

    border-radius: 999px !important;
}


.fb-payment-status-progress {

    height: 100% !important;

    min-width: 0 !important;

    background: var(--fb-gold) !important;

    border-radius: 999px !important;
}


.fb-payment-status-meta {

    width: 100% !important;

    margin-top: 6px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 15px !important;
}


.fb-payment-status-meta span {

    color: #999999 !important;

    font-size: 10px !important;
}


.fb-payment-status-meta strong {

    color: #555555 !important;

    font-size: 11px !important;
    font-weight: 600 !important;
}


/* Status colors */

.fb-payment-status-dot.status-paid,
.fb-payment-status-progress.status-paid {

    background: #2F9D62 !important;
}


.fb-payment-status-dot.status-partially-paid,
.fb-payment-status-progress.status-partially-paid {

    background: var(--fb-gold) !important;
}


.fb-payment-status-dot.status-pending,
.fb-payment-status-progress.status-pending,
.fb-payment-status-dot.status-unpaid,
.fb-payment-status-progress.status-unpaid {

    background: #D79A32 !important;
}


.fb-payment-status-dot.status-refunded,
.fb-payment-status-progress.status-refunded,
.fb-payment-status-dot.status-refund,
.fb-payment-status-progress.status-refund {

    background: #6F7D8C !important;
}


.fb-payment-status-dot.status-failed,
.fb-payment-status-progress.status-failed,
.fb-payment-status-dot.status-cancelled,
.fb-payment-status-progress.status-cancelled {

    background: #C94C4C !important;
}


/* Payment methods */

.fb-payment-gateway-list {

    width: 100% !important;
    min-height: 190px !important;

    padding: 16px 20px 18px !important;
}


.fb-payment-gateway-row {

    width: 100% !important;
    min-height: 67px !important;

    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) auto !important;

    align-items: center !important;

    gap: 12px !important;

    padding: 12px 0 !important;

    border-bottom: 1px solid #F0F0F0 !important;
}


.fb-payment-gateway-row:last-child {

    border-bottom: 0 !important;
}


.fb-payment-gateway-number {

    width: 30px !important;
    height: 30px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #F5F1E7 !important;
    color: #9C7628 !important;

    border-radius: 50% !important;

    font-size: 11px !important;
    font-weight: 700 !important;
}


.fb-payment-gateway-main {

    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 2px !important;
}


.fb-payment-gateway-main strong {

    overflow: hidden !important;

    color: #222222 !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}


.fb-payment-gateway-main span {

    color: #888888 !important;

    font-size: 10px !important;
}


.fb-payment-gateway-amount {

    color: var(--fb-gold) !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    white-space: nowrap !important;
}


/* Loading / empty states */

.fb-payment-loading,
.fb-payment-empty {

    width: 100% !important;

    padding: 30px 15px !important;

    color: #888888 !important;

    font-size: 12px !important;

    text-align: center !important;
}


/* ==========================================================
   7. TRANSACTIONS PANEL
========================================================== */

.fb-payment-transactions-panel {

    margin-bottom: 25px !important;
}


.fb-payment-table-header {

    align-items: center !important;
}


.fb-payments-results-meta {

    flex-shrink: 0 !important;

    color: #777777 !important;

    font-size: 11px !important;
    font-weight: 500 !important;

    white-space: nowrap !important;
}


/* ==========================================================
   8. TRANSACTIONS TABLE
========================================================== */

.fb-payment-table-wrapper {

    width: 100% !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch !important;
}


.fb-payment-table {

    width: 100% !important;
    min-width: 1000px !important;

    margin: 0 !important;

    border: 0 !important;

    border-collapse: collapse !important;
    border-spacing: 0 !important;

    background: var(--fb-white) !important;

    table-layout: auto !important;
}


.fb-payment-table thead {

    background: #FAFAFA !important;
}


.fb-payment-table th {

    padding: 12px 14px !important;

    color: #777777 !important;

    border: 0 !important;
    border-bottom: 1px solid #E6E6E6 !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    text-align: left !important;
    text-transform: uppercase !important;

    letter-spacing: 0.04em !important;

    white-space: nowrap !important;
}


.fb-payment-table td {

    padding: 16px 14px !important;

    color: #555555 !important;

    border: 0 !important;
    border-bottom: 1px solid #EEEEEE !important;

    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    text-align: left !important;
    vertical-align: middle !important;
}


.fb-payment-table tbody tr:last-child td {

    border-bottom: 0 !important;
}


.fb-payment-table tbody tr:hover {

    background: #FCFCFC !important;
}


.fb-payment-reference,
.fb-payment-customer,
.fb-payment-service {

    display: block !important;

    color: #222222 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}


.fb-payment-reference {

    color: var(--fb-gold) !important;
}


.fb-payment-subtext {

    display: block !important;

    margin-top: 3px !important;

    max-width: 170px !important;

    overflow: hidden !important;

    color: #999999 !important;

    font-size: 10px !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}


.fb-payment-method {

    display: inline-block !important;

    color: #555555 !important;

    font-size: 12px !important;
    font-weight: 500 !important;
}


/* Payment summary cell */

.fb-payment-money-cell {

    width: 180px !important;
    min-width: 180px !important;
}


.fb-payment-money-stack {

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    gap: 2px !important;
}


.fb-payment-money-label {

    color: #888888 !important;

    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}


.fb-payment-money-paid {

    display: block !important;

    margin: 1px 0 3px !important;

    color: #111111 !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}


.fb-payment-money-outstanding {

    display: block !important;

    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}


.fb-payment-money-outstanding.has-outstanding {

    color: #A87616 !important;
}


.fb-payment-money-outstanding.is-settled {

    color: #287A4D !important;
}


.fb-payment-money-booking-value {

    display: block !important;

    margin-top: 2px !important;

    color: #999999 !important;

    font-size: 10px !important;
    line-height: 1.35 !important;
}


.fb-payment-money-booking-value b {

    color: #666666 !important;

    font-weight: 600 !important;
}


/* ==========================================================
   9. STATUS BADGES
========================================================== */

.fb-payment-status-badge {

    min-height: 27px !important;

    padding: 6px 10px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #F0F0F0 !important;
    color: #555555 !important;

    border-radius: 999px !important;

    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
}


.fb-payment-status-badge.status-paid {

    background: #EAF7F0 !important;
    color: #287A4D !important;
}


.fb-payment-status-badge.status-partially-paid {

    background: #FAF3E3 !important;
    color: #936E22 !important;
}


.fb-payment-status-badge.status-pending,
.fb-payment-status-badge.status-unpaid {

    background: #FFF4DF !important;
    color: #9A691C !important;
}


.fb-payment-status-badge.status-refunded,
.fb-payment-status-badge.status-refund {

    background: #EEF1F4 !important;
    color: #5E6975 !important;
}


.fb-payment-status-badge.status-failed,
.fb-payment-status-badge.status-cancelled {

    background: #FCECEC !important;
    color: #A23D3D !important;
}


/* ==========================================================
   10. VIEW BUTTON
========================================================== */

.fb-payment-view {

    min-width: 72px !important;
    height: 35px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #111111 !important;
    color: #FFFFFF !important;

    border: 1px solid #111111 !important;
    border-radius: 5px !important;

    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    cursor: pointer !important;
}


.fb-payment-view:hover {

    background: var(--fb-gold) !important;
    color: #111111 !important;

    border-color: var(--fb-gold) !important;
}


/* ==========================================================
   11. TABLE LOADING / EMPTY
========================================================== */

.fb-payment-table-loading,
.fb-payment-table-empty {

    padding: 40px 20px !important;

    color: #888888 !important;

    font-size: 12px !important;

    text-align: center !important;
}


/* ==========================================================
   12. PAGINATION
========================================================== */

.fb-payments-pagination {

    width: 100% !important;

    padding: 16px 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 12px !important;

    border-top: 1px solid #EEEEEE !important;
}


.fb-payments-pagination-button {

    min-width: 76px !important;
    height: 34px !important;

    padding: 0 13px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #FFFFFF !important;
    color: #333333 !important;

    border: 1px solid #DADADA !important;
    border-radius: 5px !important;

    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 500 !important;

    cursor: pointer !important;
}


.fb-payments-pagination-button:hover:not(:disabled) {

    background: #111111 !important;
    color: #FFFFFF !important;

    border-color: #111111 !important;
}


.fb-payments-pagination-button:disabled {

    opacity: 0.4 !important;

    cursor: not-allowed !important;
}


.fb-payments-page-info {

    color: #777777 !important;

    font-size: 10px !important;
    font-weight: 500 !important;
}


/* ==========================================================
   13. PAYMENT DETAILS MODAL
========================================================== */

.fb-payment-details-modal {

    position: fixed !important;

    inset: 0 !important;

    z-index: 999999 !important;

    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 24px !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease !important;
}


.fb-payment-details-modal.active {

    opacity: 1 !important;
    visibility: visible !important;
}


.fb-payment-modal-backdrop {

    position: absolute !important;

    inset: 0 !important;

    background: rgba(0, 0, 0, 0.58) !important;

    backdrop-filter: blur(2px) !important;
}


.fb-payment-modal-panel {

    position: relative !important;

    z-index: 2 !important;

    width: min(720px, 100%) !important;
    max-height: calc(100vh - 48px) !important;

    overflow-y: auto !important;

    background: #FFFFFF !important;

    border-radius: 18px !important;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22) !important;

    transform: translateY(12px) !important;

    transition: transform 0.2s ease !important;
}


.fb-payment-details-modal.active
.fb-payment-modal-panel {

    transform: translateY(0) !important;
}


/* Modal header */

.fb-payment-modal-header {

    position: sticky !important;

    top: 0 !important;

    z-index: 5 !important;

    width: 100% !important;

    padding: 20px 22px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 20px !important;

    background: #FFFFFF !important;

    border-bottom: 1px solid #EEEEEE !important;
}


.fb-payment-modal-eyebrow {

    display: block !important;

    margin-bottom: 3px !important;

    color: var(--fb-gold) !important;

    font-size: 10px !important;
    font-weight: 600 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}


.fb-payment-modal-header h2 {

    margin: 0 !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}


/* Modal close button */

.fb-payment-modal-close {

    width: 36px !important;
    height: 36px !important;

    flex: 0 0 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #F5F5F5 !important;
    color: #111111 !important;

    border: 1px solid #E3E3E3 !important;
    border-radius: 50% !important;

    font-family: Arial, sans-serif !important;
    font-size: 23px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    cursor: pointer !important;
}


.fb-payment-modal-close span {

    display: block !important;

    margin: -2px 0 0 !important;

    color: #111111 !important;

    font-size: 23px !important;
    line-height: 1 !important;
}


.fb-payment-modal-close:hover {

    background: #111111 !important;
    color: #FFFFFF !important;

    border-color: #111111 !important;
}


.fb-payment-modal-close:hover span {

    color: #FFFFFF !important;
}


/* Modal body */

.fb-payment-modal-body {

    padding: 22px !important;
}


/* Financial summary */

.fb-payment-financial-summary {

    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 12px !important;

    margin-bottom: 16px !important;
}


.fb-payment-financial-card {

    padding: 15px !important;

    background: #F8F8F8 !important;

    border: 1px solid #EEEEEE !important;
    border-radius: 10px !important;
}


.fb-payment-financial-card span {

    display: block !important;

    margin-bottom: 5px !important;

    color: #777777 !important;

    font-size: 11px !important;
    font-weight: 500 !important;
}


.fb-payment-financial-card strong {

    display: block !important;

    color: #111111 !important;

    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}


.fb-payment-financial-card.paid-value strong {

    color: #287A4D !important;
}


.fb-payment-financial-card
.outstanding-value.has-outstanding strong {

    color: #A86F15 !important;
}


.fb-payment-financial-card
.outstanding-value.is-settled strong {

    color: #287A4D !important;
}


/* Modal payment status line */

.fb-payment-modal-status-line {

    width: 100% !important;

    margin-bottom: 20px !important;
    padding: 11px 13px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 15px !important;

    background: #FAFAFA !important;

    border: 1px solid #EEEEEE !important;
    border-radius: 8px !important;
}


.fb-payment-modal-status-line > span:first-child {

    color: #555555 !important;

    font-size: 11px !important;
    font-weight: 600 !important;
}


/* Modal detail grid */

.fb-payment-modal-grid {

    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 12px !important;
}


.fb-payment-detail-item {

    min-width: 0 !important;

    padding: 13px 14px !important;

    background: #F8F8F8 !important;

    border: 1px solid #EEEEEE !important;
    border-radius: 9px !important;
}


.fb-payment-detail-item span {

    display: block !important;

    margin-bottom: 4px !important;

    color: #888888 !important;

    font-size: 11px !important;
    font-weight: 500 !important;
}


.fb-payment-detail-item strong {

    display: block !important;

    overflow-wrap: anywhere !important;

    color: #222222 !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}


.fb-payment-modal-section {

    margin-top: 24px !important;
}


.fb-payment-modal-section h3 {

    margin: 0 0 11px !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}


/* Modal loading / error */

.fb-payment-modal-loading {

    min-height: 220px !important;

    padding: 40px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #777777 !important;

    font-size: 12px !important;
}


.fb-payment-modal-error {

    min-height: 220px !important;

    padding: 40px 25px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 18px !important;

    text-align: center !important;
}


.fb-payment-modal-error p {

    margin: 0 !important;

    color: #777777 !important;

    font-size: 12px !important;
}


.fb-payment-modal-close-text {

    min-width: 100px !important;
    height: 38px !important;

    padding: 0 18px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #111111 !important;
    color: #FFFFFF !important;

    border: 1px solid #111111 !important;
    border-radius: 5px !important;

    font-size: 11px !important;
    font-weight: 500 !important;

    cursor: pointer !important;
}


.fb-payment-modal-close-text:hover {

    background: var(--fb-gold) !important;
    color: #111111 !important;

    border-color: var(--fb-gold) !important;
}


/* ==========================================================
   14. RESPONSIVE
========================================================== */

@media (max-width: 1200px) {

    .fb-payments-summary-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }


    .fb-payments-filters {

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
    }


    .fb-payments-filter-search {

        grid-column:
            span 2 !important;
    }


    .fb-payments-filter:nth-child(2),
    .fb-payments-filter:nth-child(3),
    .fb-payments-filter:nth-child(4),
    .fb-payments-filter:nth-child(5),
    .fb-payments-filter:nth-child(6),
    .fb-payments-filter:nth-child(7),
    .fb-payments-filter-action:nth-last-child(2),
    .fb-payments-filter-action:last-child {

        grid-column:
            auto !important;
    }
}


@media (max-width: 900px) {

    .fb-payments-summary-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }


    .fb-payments-filters {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }


    .fb-payments-filter-search {

        grid-column:
            1 / -1 !important;
    }


    .fb-payments-insights-grid {

        grid-template-columns:
            1fr !important;
    }
}


@media (max-width: 700px) {

    .fb-payments-wrapper {

        padding:
            24px 16px
            32px !important;
    }


    .fb-payments-header {

        flex-direction: column !important;

        gap: 16px !important;
    }


    .fb-payments-title {

        font-size: 27px !important;
    }


    .fb-payments-subtitle {

        font-size: 13px !important;
    }


    .fb-payments-header-summary {

        width: 100% !important;

        align-items: flex-start !important;
    }


    .fb-payments-summary-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }


    .fb-payments-filters {

        grid-template-columns:
            1fr !important;
    }


    .fb-payments-filter-search {

        grid-column:
            auto !important;
    }


    .fb-payments-filter-action {

        width: 100% !important;
    }


    .fb-payments-primary-button,
    .fb-payments-secondary-button {

        width: 100% !important;
    }


    .fb-payment-panel-header {

        align-items: flex-start !important;
        flex-direction: column !important;

        padding: 16px !important;
    }


    .fb-payment-status-list,
    .fb-payment-gateway-list {

        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    .fb-payments-pagination {

        justify-content: space-between !important;

        gap: 8px !important;

        padding: 14px !important;
    }


    .fb-payment-details-modal {

        padding: 12px !important;

        align-items: flex-end !important;
    }


    .fb-payment-modal-panel {

        width: 100% !important;

        max-height: calc(100vh - 24px) !important;

        border-radius:
            18px
            18px
            10px
            10px !important;
    }


    .fb-payment-modal-header,
    .fb-payment-modal-body {

        padding: 17px !important;
    }


    .fb-payment-financial-summary,
    .fb-payment-modal-grid {

        grid-template-columns:
            1fr !important;
    }
}


@media (max-width: 480px) {

    .fb-payments-summary-grid {

        grid-template-columns:
            1fr !important;
    }
}