/**
 * Enhanced styling for the customer subscription page
 * 
 * Features:
 * - Responsive design with modern styling
 * - Font size adjustment controls
 * - Improved information hierarchy
 * - Modern card-based layout
 * - Better visual indicators for subscription status
 * - Print-friendly styling
 */

/* Font size controls */
.ofx-font-size-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 20px;
    padding: 8px 12px;
    background: #f9f9f9;
    border-radius: 8px;
    font-size: 14px;
}

.ofx-font-size-controls label {
    margin-right: 10px;
    font-weight: 600;
}

.ofx-font-size-controls button {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 8px;
    margin: 0 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.ofx-font-size-controls button:hover {
    background: #f0f0f0;
}

.ofx-font-size-controls button.active {
    background: #2271b1;
    color: white;
    border-color: #2271b1;
}

/* Base styles with CSS variables for customization */
.ofx-ri-customer-subscriptions {
    --ofx-base-font-size: 14px;
    --ofx-primary-color: #2271b1;
    --ofx-secondary-color: #135e96;
    --ofx-success-color: #28a745;
    --ofx-warning-color: #ffc107;
    --ofx-danger-color: #dc3545;
    --ofx-info-color: #17a2b8;
    --ofx-light-color: #f8f9fa;
    --ofx-dark-color: #343a40;
    --ofx-border-color: #dee2e6;
    --ofx-border-radius: 8px;
    --ofx-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    
    margin: 20px 0;
    font-size: var(--ofx-base-font-size);
    line-height: 1.5;
    color: #333;
}

/* Font size modifier classes */
.ofx-font-size-small .ofx-ri-customer-subscriptions {
    --ofx-base-font-size: 13px;
}

.ofx-font-size-medium .ofx-ri-customer-subscriptions {
    --ofx-base-font-size: 15px;
}

.ofx-font-size-large .ofx-ri-customer-subscriptions {
    --ofx-base-font-size: 17px;
}

/* Typography */
.ofx-ri-customer-subscriptions h3 {
    font-size: calc(var(--ofx-base-font-size) * 1.6);
    margin-bottom: 20px;
    color: var(--ofx-dark-color);
    font-weight: 600;
}

.ofx-ri-customer-subscriptions h4 {
    font-size: calc(var(--ofx-base-font-size) * 1.4);
    margin: 25px 0 15px 0;
    color: var(--ofx-dark-color);
    font-weight: 600;
    border-bottom: 1px solid var(--ofx-border-color);
    padding-bottom: 8px;
}

.ofx-ri-customer-subscriptions .subscription-navigation {
    margin-bottom: 25px;
}

.ofx-ri-customer-subscriptions .subscription-navigation a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--ofx-primary-color);
    font-weight: 500;
    transition: color 0.2s;
}

.ofx-ri-customer-subscriptions .subscription-navigation a:hover {
    color: var(--ofx-secondary-color);
    text-decoration: none;
}

/* Enhanced table styling */
.ofx-ri-subscriptions {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    padding: 15px;
    margin: 15px auto;
    border: 1px solid var(--ofx-border-color);
    border-radius: var(--ofx-border-radius);
    overflow: hidden;
    box-shadow: var(--ofx-box-shadow);
}

.ofx-ri-subscriptions thead th {
    background-color: #f8f9fa;
    padding: 15px 20px; /* Increased horizontal padding to match cells */
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid var(--ofx-border-color);
    color: var(--ofx-dark-color);
    font-size: calc(var(--ofx-base-font-size) * 1);
    white-space: nowrap;
}

.ofx-ri-subscriptions tbody tr {
    transition: background-color 0.2s;
}

.ofx-ri-subscriptions tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.04);
}

.ofx-ri-subscriptions tbody td {
    padding: 15px 20px; /* Increased horizontal padding */
    vertical-align: middle;
    border-top: 1px solid var(--ofx-border-color);
}

/* Add inner padding to cell content */
.ofx-ri-subscriptions td > * {
    margin-bottom: 8px;
}

.ofx-ri-subscriptions td > *:last-child {
    margin-bottom: 0;
}

.ofx-ri-subscriptions .subscription-total,
.ofx-ri-subscriptions .subscription-status-container,
.ofx-ri-subscriptions .subscription-actions {
    padding: 0 10px;
}

.ofx-ri-subscriptions tbody tr:first-child td {
    border-top: none;
}

/* Status pills styling */
.subscription-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 30px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: calc(var(--ofx-base-font-size) * 0.75);
    letter-spacing: 0.5px;
    min-width: 80px;
    text-align: center;
    color: white;
    white-space: nowrap;
    margin: 4px 0;
}

.subscription-status-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 4px 0;
}

.subscription-status.active {
    background-color: var(--ofx-success-color);
}

.subscription-status.paused {
    background-color: #6c757d;
}

.subscription-status.cancelled {
    background-color: var(--ofx-danger-color);
}

.subscription-status.trial {
    background-color: var(--ofx-info-color);
}

.subscription-status.pending {
    background-color: var(--ofx-warning-color);
    color: #212529;
}

/* Style for the "Grouped Invoice" text */
.grouped-invoice-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 30px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: calc(var(--ofx-base-font-size) * 0.75);
    letter-spacing: 0.5px;
    min-width: 80px;
    text-align: center;
    color: white;
    white-space: nowrap;
    background-color: var(--ofx-danger-color); /* Same as unpaid status */
    margin: 8px 0;
    display: inline-block;
}

.payment-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: calc(var(--ofx-base-font-size) * 0.7);
    letter-spacing: 0.5px;
    min-width: 70px;
    text-align: center;
    margin-top: 6px;
    white-space: nowrap;
}

.payment-status-paid {
    background-color: var(--ofx-success-color);
    color: white;
}

.payment-status-unpaid {
    background-color: var(--ofx-danger-color);
    color: white;
}

.payment-status-partial {
    background-color: #fd7e14;
    color: white;
}

.payment-status-failed {
    background-color: var(--ofx-danger-color);
    color: white;
}

.payment-status-paused {
    background-color: #6c757d;
    color: white;
}

.payment-status-cancelled {
    background-color: var(--ofx-danger-color);
    color: white;
}

.payment-status-pending {
    background-color: var(--ofx-warning-color);
    color: #212529;
}

/* Badge styling */
.ofx-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: calc(var(--ofx-base-font-size) * 0.75);
    font-weight: 500;
    margin-top: 6px;
    margin-right: 5px;
    text-decoration: none; /* For when badges are links */
    transition: all 0.2s ease;
}

.ofx-badge-group {
    background: #e3f2fd;
    color: #0d6efd;
    margin: 8px 0;
}

.ofx-badge-group:hover {
    background: #c1e0fd;
    color: #0b5ed7;
    text-decoration: none;
}

.ofx-badge-grouped {
    background: #fff3e0;
    color: #e65100;
    cursor: pointer;
    margin: 8px 0;
}

.ofx-badge-grouped:hover {
    background: #ffe0b2;
    color: #bf360c;
    text-decoration: none;
}

/* Language flag styling */
.language-flag {
    display: inline-block;
    width: 20px;
    height: 15px;
    margin-right: 5px;
    vertical-align: middle;
    border-radius: 2px;
}

/* Common language flags */
.flag-en { background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjM1IDY1MCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KPGRlZnM+DQo8ZyBpZD0idW5pb24iPg0KPHVzZSB5PSItLjA4NiIgeGxpbms6aHJlZj0iI3giLz4NCjx1c2UgeD0iLS4wMjUiIHhsaW5rOmhyZWY9IiN5Ii8+DQo8dXNlIHg9Ii0uMDgiIHk9Ii0uMDI2IiB4bGluazpocmVmPSIjWiIvPg0KPC9nPg0KPGcgaWQ9IngiPg0KPHBvbHlnb24gcG9pbnRzPSIwLC0xIDAuNTg3NzgzMiwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDEzIDAuOTUxMDU3LC0wLjMwOTAxMyAtMC41ODc3ODMyLDAuODA5MDE3IiBmaWxsPSIjZmZmIi8+DQo8L2c+DQo8ZyBpZD0ieSI+DQo8cG9seWdvbiBwb2ludHM9IjAsLTEgMC45NTEwNTcsLTAuMzA5MDEzIDAuNTg3NzgzMiwwLjgwOTAxNyAtMC41ODc3ODMyLDAuODA5MDE3IC0wLjk1MTA1NywtMC4zMDkwMTMiIGZpbGw9IiNmZmYiLz4NCjwvZz4NCjxnIGlkPSJaIj4NCjxwb2x5Z29uIHBvaW50cz0iMCwtMSAwLjU4Nzc4MzIsMC44MDkwMTcgLTAuOTUxMDU3LC0wLjMwOTAxMyAwLjk1MTA1NywtMC4zMDkwMTMgLTAuNTg3NzgzMiwwLjgwOTAxNyIgZmlsbD0iI2ZmZiIvPg0KPC9nPg0KPC9kZWZzPg0KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiBmaWxsPSIjMDAyMTVCIi8+DQo8dXNlIHk9IjE1MCIgeD0iMTg1IiB4bGluazpocmVmPSIjdW5pb24iLz4NCjx1c2UgeT0iMTQwIiB4PSIyMDAiIHhsaW5rOmhyZWY9IiN4Ii8+DQo8dXNlIHk9IjE3MCIgeD0iMjAwIiB4bGluazpocmVmPSIjeCIvPg0KPHVzZSB5PSIxNjAiIHg9IjIxNSIgeGxpbms6aHJlZj0iI3kiLz4NCg0KPHVzZSB5PSIxNTAiIHg9IjM2NSIgeGxpbms6aHJlZj0iI3VuaW9uIi8+DQo8dXNlIHk9IjE0MCIgeD0iMzgwIiB4bGluazpocmVmPSIjeCIvPg0KPHVzZSB5PSIxNzAiIHg9IjM4MCIgeGxpbms6aHJlZj0iI3giLz4NCjx1c2UgeT0iMTYwIiB4PSIzOTUiIHhsaW5rOmhyZWY9IiN5Ii8+DQoNCjx1c2UgeT0iMTUwIiB4PSI1NDUiIHhsaW5rOmhyZWY9IiN1bmlvbiIvPg0KPHVzZSB5PSIxNDAiIHg9IjU2MCIgeGxpbms6aHJlZj0iI3giLz4NCjx1c2UgeT0iMTcwIiB4PSI1NjAiIHhsaW5rOmhyZWY9IiN4Ii8+DQo8dXNlIHk9IjE2MCIgeD0iNTc1IiB4bGluazpocmVmPSIjeSIvPg0KDQo8dXNlIHk9IjE1MCIgeD0iNzI1IiB4bGluazpocmVmPSIjdW5pb24iLz4NCjx1c2UgeT0iMTQwIiB4PSI3NDAiIHhsaW5rOmhyZWY9IiN4Ii8+DQo8dXNlIHk9IjE3MCIgeD0iNzQwIiB4bGluazpocmVmPSIjeCIvPg0KPHVzZSB5PSIxNjAiIHg9Ijc1NSIgeGxpbms6aHJlZj0iI3kiLz4NCg0KPHVzZSB5PSIxNTAiIHg9IjkwNSIgeGxpbms6aHJlZj0iI3VuaW9uIi8+DQo8dXNlIHk9IjE0MCIgeD0iOTIwIiB4bGluazpocmVmPSIjeCIvPg0KPHVzZSB5PSIxNzAiIHg9IjkyMCIgeGxpbms6aHJlZj0iI3giLz4NCjx1c2UgeT0iMTYwIiB4PSI5MzUiIHhsaW5rOmhyZWY9IiN5Ii8+DQoNCjx1c2UgeT0iMTUwIiB4PSIxMDg1IiB4bGluazpocmVmPSIjdW5pb24iLz4NCjx1c2UgeT0iMTQwIiB4PSIxMTAwIiB4bGluazpocmVmPSIjeCIvPg0KPHVzZSB5PSIxNzAiIHg9IjExMDAiIHhsaW5rOmhyZWY9IiN4Ii8+DQo8dXNlIHk9IjE2MCIgeD0iMTExNSIgeGxpbms6aHJlZj0iI3kiLz4NCg0KPHVzZSB5PSIyODAiIHg9IjE4NSIgeGxpbms6aHJlZj0iI3VuaW9uIi8+DQo8dXNlIHk9IjI3MCIgeD0iMjAwIiB4bGluazpocmVmPSIjeCIvPg0KPHVzZSB5PSIzMDAiIHg9IjIwMCIgeGxpbms6aHJlZj0iI3giLz4NCjx1c2UgeT0iMjkwIiB4PSIyMTUiIHhsaW5rOmhyZWY9IiN5Ii8+DQoNCjx1c2UgeT0iMjgwIiB4PSIzNjUiIHhsaW5rOmhyZWY9IiN1bmlvbiIvPg0KPHVzZSB5PSIyNzAiIHg9IjM4MCIgeGxpbms6aHJlZj0iI3giLz4NCjx1c2UgeT0iMzAwIiB4PSIzODAiIHhsaW5rOmhyZWY9IiN4Ii8+DQo8dXNlIHk9IjI5MCIgeD0iMzk1IiB4bGluazpocmVmPSIjeSIvPg0KDQo8dXNlIHk9IjI4MCIgeD0iNTQ1IiB4bGluazpocmVmPSIjdW5pb24iLz4NCjx1c2UgeT0iMjcwIiB4PSI1NjAiIHhsaW5rOmhyZWY9IiN4Ii8+DQo8dXNlIHk9IjMwMCIgeD0iNTYwIiB4bGluazpocmVmPSIjeCIvPg0KPHVzZSB5PSIyOTAiIHg9IjU3NSIgeGxpbms6aHJlZj0iI3kiLz4NCg0KPHVzZSB5PSIyODAiIHg9IjcyNSIgeGxpbms6aHJlZj0iI3VuaW9uIi8+DQo8dXNlIHk9IjI3MCIgeD0iNzQwIiB4bGluazpocmVmPSIjeCIvPg0KPHVzZSB5PSIzMDAiIHg9Ijc0MCIgeGxpbms6aHJlZj0iI3giLz4NCjx1c2UgeT0iMjkwIiB4PSI3NTUiIHhsaW5rOmhyZWY9IiN5Ii8+DQoNCjx1c2UgeT0iMjgwIiB4PSI5MDUiIHhsaW5rOmhyZWY9IiN1bmlvbiIvPg0KPHVzZSB5PSIyNzAiIHg9IjkyMCIgeGxpbms6aHJlZj0iI3giLz4NCjx1c2UgeT0iMzAwIiB4PSI5MjAiIHhsaW5rOmhyZWY9IiN4Ii8+DQo8dXNlIHk9IjI5MCIgeD0iOTM1IiB4bGluazpocmVmPSIjeSIvPg0KDQo8dXNlIHk9IjI4MCIgeD0iMTA4NSIgeGxpbms6aHJlZj0iI3VuaW9uIi8+DQo8dXNlIHk9IjI3MCIgeD0iMTEwMCIgeGxpbms6aHJlZj0iI3giLz4NCjx1c2UgeT0iMzAwIiB4PSIxMTAwIiB4bGluazpocmVmPSIjeCIvPg0KPHVzZSB5PSIyOTAiIHg9IjExMTUiIHhsaW5rOmhyZWY9IiN5Ii8+DQoNCjx1c2UgeT0iNDEwIiB4PSIxODUiIHhsaW5rOmhyZWY9IiN1bmlvbiIvPg0KPHVzZSB5PSI0MDAiIHg9IjIwMCIgeGxpbms6aHJlZj0iI3giLz4NCjx1c2UgeT0iNDMwIiB4PSIyMDAiIHhsaW5rOmhyZWY9IiN4Ii8+DQo8dXNlIHk9IjQyMCIgeD0iMjE1IiB4bGluazpocmVmPSIjeSIvPg0KDQo8dXNlIHk9IjQxMCIgeD0iMzY1IiB4bGluazpocmVmPSIjdW5pb24iLz4NCjx1c2UgeT0iNDAwIiB4PSIzODAiIHhsaW5rOmhyZWY9IiN4Ii8+DQo8dXNlIHk9IjQzMCIgeD0iMzgwIiB4bGluazpocmVmPSIjeCIvPg0KPHVzZSB5PSI0MjAiIHg9IjM5NSIgeGxpbms6aHJlZj0iI3kiLz4NCg0KPHVzZSB5PSI0MTAiIHg9IjU0NSIgeGxpbms6aHJlZj0iI3VuaW9uIi8+DQo8dXNlIHk9IjQwMCIgeD0iNTYwIiB4bGluazpocmVmPSIjeCIvPg0KPHVzZSB5PSI0MzAiIHg9IjU2MCIgeGxpbms6aHJlZj0iI3giLz4NCjx1c2UgeT0iNDIwIiB4PSI1NzUiIHhsaW5rOmhyZWY9IiN5Ii8+DQoNCjx1c2UgeT0iNDEwIiB4PSI3MjUiIHhsaW5rOmhyZWY9IiN1bmlvbiIvPg0KPHVzZSB5PSI0MDAiIHg9Ijc0MCIgeGxpbms6aHJlZj0iI3giLz4NCjx1c2UgeT0iNDMwIiB4PSI3NDAiIHhsaW5rOmhyZWY9IiN4Ii8+DQo8dXNlIHk9IjQyMCIgeD0iNzU1IiB4bGluazpocmVmPSIjeSIvPg0KDQo8dXNlIHk9IjQxMCIgeD0iOTA1IiB4bGluazpocmVmPSIjdW5pb24iLz4NCjx1c2UgeT0iNDAwIiB4PSI5MjAiIHhsaW5rOmhyZWY9IiN4Ii8+DQo8dXNlIHk9IjQzMCIgeD0iOTIwIiB4bGluazpocmVmPSIjeCIvPg0KPHVzZSB5PSI0MjAiIHg9IjkzNSIgeGxpbms6aHJlZj0iI3kiLz4NCg0KPHVzZSB5PSI0MTAiIHg9IjEwODUiIHhsaW5rOmhyZWY9IiN1bmlvbiIvPg0KPHVzZSB5PSI0MDAiIHg9IjExMDAiIHhsaW5rOmhyZWY9IiN4Ii8+DQo8dXNlIHk9IjQzMCIgeD0iMTEwMCIgeGxpbms6aHJlZj0iI3giLz4NCjx1c2UgeT0iNDIwIiB4PSIxMTE1IiB4bGluazpocmVmPSIjeSIvPg0KDQo8dXNlIHk9IjU0MCIgeD0iMTg1IiB4bGluazpocmVmPSIjdW5pb24iLz4NCjx1c2UgeT0iNTMwIiB4PSIyMDAiIHhsaW5rOmhyZWY9IiN4Ii8+DQo8dXNlIHk9IjU2MCIgeD0iMjAwIiB4bGluazpocmVmPSIjeCIvPg0KPHVzZSB5PSI1NTAiIHg9IjIxNSIgeGxpbms6aHJlZj0iI3kiLz4NCg0KPHVzZSB5PSI1NDAiIHg9IjM2NSIgeGxpbms6aHJlZj0iI3VuaW9uIi8+DQo8dXNlIHk9IjUzMCIgeD0iMzgwIiB4bGluazpocmVmPSIjeCIvPg0KPHVzZSB5PSI1NjAiIHg9IjM4MCIgeGxpbms6aHJlZj0iI3giLz4NCjx1c2UgeT0iNTUwIiB4PSIzOTUiIHhsaW5rOmhyZWY9IiN5Ii8+DQoNCjx1c2UgeT0iNTQwIiB4PSI1NDUiIHhsaW5rOmhyZWY9IiN1bmlvbiIvPg0KPHVzZSB5PSI1MzAiIHg9IjU2MCIgeGxpbms6aHJlZj0iI3giLz4NCjx1c2UgeT0iNTYwIiB4PSI1NjAiIHhsaW5rOmhyZWY9IiN4Ii8+DQo8dXNlIHk9IjU1MCIgeD0iNTc1IiB4bGluazpocmVmPSIjeSIvPg0KDQo8dXNlIHk9IjU0MCIgeD0iNzI1IiB4bGluazpocmVmPSIjdW5pb24iLz4NCjx1c2UgeT0iNTMwIiB4PSI3NDAiIHhsaW5rOmhyZWY9IiN4Ii8+DQo8dXNlIHk9IjU2MCIgeD0iNzQwIiB4bGluazpocmVmPSIjeCIvPg0KPHVzZSB5PSI1NTAiIHg9Ijc1NSIgeGxpbms6aHJlZj0iI3kiLz4NCg0KPHVzZSB5PSI1NDAiIHg9IjkwNSIgeGxpbms6aHJlZj0iI3VuaW9uIi8+DQo8dXNlIHk9IjUzMCIgeD0iOTIwIiB4bGluazpocmVmPSIjeCIvPg0KPHVzZSB5PSI1NjAiIHg9IjkyMCIgeGxpbms6aHJlZj0iI3giLz4NCjx1c2UgeT0iNTUwIiB4PSI5MzUiIHhsaW5rOmhyZWY9IiN5Ii8+DQoNCjx1c2UgeT0iNTQwIiB4PSIxMDg1IiB4bGluazpocmVmPSIjdW5pb24iLz4NCjx1c2UgeT0iNTMwIiB4PSIxMTAwIiB4bGluazpocmVmPSIjeCIvPg0KPHVzZSB5PSI1NjAiIHg9IjExMDAiIHhsaW5rOmhyZWY9IiN4Ii8+DQo8dXNlIHk9IjU1MCIgeD0iMTExNSIgeGxpbms6aHJlZj0iI3kiLz4NCg0KPHBhdGggZD0iTTAgMCBMIDEyMzUgMCBMIDEyMzUgNjUwIEwgMCA2NTAgTCAwIDAgeiBNIDYxNy41IDMyNSBMIDEyMzUgNjUwIEwgMTIzNSAwIEwgeiBNIDAgMzI1IEwgNjE3LjUgMzI1IEwgMCAwIEwgeiBNIDAgNjUwIEwgNjE3LjUgMzI1IEwgMCAwIHoiIGZpbGw9InJlZCIgZmlsbC1ydWxlPSJldmVub2RkIi8+DQoNCjxyZWN0IHg9IjQ5NCIgeT0iMCIgd2lkdGg9IjI0NyIgaGVpZ2h0PSI2NTAiIGZpbGw9IndoaXRlIi8+DQo8cmVjdCB4PSIwIiB5PSIyMTciIHdpZHRoPSIxMjM1IiBoZWlnaHQ9IjIxNiIgZmlsbD0id2hpdGUiLz4NCjxyZWN0IHg9IjUzNiIgeT0iMCIgd2lkdGg9IjE2NCIgaGVpZ2h0PSI2NTAiIGZpbGw9InJlZCIvPg0KPHJlY3QgeD0iMCIgeT0iMjQzIiB3aWR0aD0iMTIzNSIgaGVpZ2h0PSIxNjQiIGZpbGw9InJlZCIvPg0KPC9zdmc+') no-repeat center/cover; }
.flag-de { background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSI2MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cmVjdCB3aWR0aD0iMTAwMCIgaGVpZ2h0PSI2MDAiIGZpbGw9IiNmZmQiLz4NCjxyZWN0IHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0iI2QwMCIvPg0KPHJlY3Qgd2lkdGg9IjEwMDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjMDAwIi8+DQo8L3N2Zz4=') no-repeat center/cover; }
.flag-fr { background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNjAwIiB2aWV3Qm94PSIwIDAgMzogMjAiPg0KPHJlY3Qgd2lkdGg9IjMwIiBoZWlnaHQ9IjIwIiBmaWxsPSIjRUQyOTM5Ii8+DQo8cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IiNGRkZGRkYiLz4NCjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIyMCIgZmlsbD0iIzAwMjM5NSIvPg0KPC9zdmc+') no-repeat center/cover; }
.flag-es { background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgMTUgMTAiPg0KPHJlY3Qgd2lkdGg9IjE1IiBoZWlnaHQ9IjEwIiBmaWxsPSIjRkZDNDAwIi8+DQo8cmVjdCB3aWR0aD0iMTUiIGhlaWdodD0iMi41IiBmaWxsPSIjQzYwQjFFIiB5PSIwIi8+DQo8cmVjdCB3aWR0aD0iMTUiIGhlaWdodD0iMi41IiBmaWxsPSIjQzYwQjFFIiB5PSI3LjUiLz4NCjwvc3ZnPg==') no-repeat center/cover; }
.flag-it { background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAwIiBoZWlnaHQ9IjEwMDAiIHZpZXdCb3g9IjAgMCAzIDIiPg0KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMiIgZmlsbD0iIzAwOTI0NiIvPg0KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMiIgZmlsbD0iI2ZmZmZmZiIgeD0iMSIvPg0KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMiIgZmlsbD0iI2NlMmIzNyIgeD0iMiIvPg0KPC9zdmc+') no-repeat center/cover; }

/* Card-based layout for subscription info */
.subscription-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.card {
    background: #fff;
    border-radius: var(--ofx-border-radius);
    box-shadow: var(--ofx-box-shadow);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.card-header {
    padding: 15px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--ofx-border-color);
    font-weight: 600;
    font-size: calc(var(--ofx-base-font-size) * 1.1);
    color: var(--ofx-dark-color);
}

.card-body {
    padding: 15px;
}

/* Payment summary cards */
.payment-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.payment-card {
    background: #f8f9fa;
    padding: 15px;
    border-radius: var(--ofx-border-radius);
    transition: transform 0.2s;
}

.payment-card:hover {
    transform: translateY(-3px);
}

.payment-card-label {
    font-size: calc(var(--ofx-base-font-size) * 0.85);
    font-weight: 600;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 5px;
}

.payment-card-value {
    font-size: calc(var(--ofx-base-font-size) * 1.3);
    font-weight: 600;
    color: #333;
}

.payment-card-total {
    border-left: 4px solid var(--ofx-primary-color);
}

.payment-card-paid {
    border-left: 4px solid var(--ofx-success-color);
}

.payment-card-open {
    border-left: 4px solid var(--ofx-danger-color);
}

.payment-card-failed {
    border-left: 4px solid var(--ofx-warning-color);
}

/* Button styling */
.ofx-ri-customer-subscriptions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: var(--ofx-primary-color);
    border: 1px solid var(--ofx-primary-color);
    border-radius: 4px;
    padding: 8px 12px;
    font-weight: 500;
    text-transform: none;
    font-size: calc(var(--ofx-base-font-size) * 0.9);
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
}

.ofx-ri-customer-subscriptions .button:hover {
    background-color: var(--ofx-primary-color);
    color: white;
    text-decoration: none;
}

.ofx-ri-customer-subscriptions .button-small {
    padding: 5px 10px;
    font-size: calc(var(--ofx-base-font-size) * 0.8);
}

/* Button with language flags */
.ofx-ri-customer-subscriptions .button-with-flag {
    position: relative;
    padding-left: 30px;  /* Extra space for the flag */
}

.ofx-ri-customer-subscriptions .button-with-flag .language-flag {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

.ofx-ri-customer-subscriptions .button-primary {
    background-color: var(--ofx-primary-color);
    color: white;
    border-color: var(--ofx-primary-color);
}

.ofx-ri-customer-subscriptions .button-primary:hover {
    background-color: var(--ofx-secondary-color);
    border-color: var(--ofx-secondary-color);
}

.ofx-ri-customer-subscriptions .button-danger {
    background-color: white;
    color: var(--ofx-danger-color);
    border-color: var(--ofx-danger-color);
}

.ofx-ri-customer-subscriptions .button-danger:hover {
    background-color: var(--ofx-danger-color);
    color: white;
}

.ofx-ri-customer-subscriptions .button-success {
    background-color: white;
    color: var(--ofx-success-color);
    border-color: var(--ofx-success-color);
}

.ofx-ri-customer-subscriptions .button-success:hover {
    background-color: var(--ofx-success-color);
    color: white;
}

/* Actions column styling */
.subscription-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 5px 0;
    padding: 5px 0;
}

/* Empty state styling */
.woocommerce-Message {
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: var(--ofx-border-radius);
    box-shadow: var(--ofx-box-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

/* Responsive styles */
@media (max-width: 768px) {
    .ofx-ri-subscriptions,
    .invoice-list table {
        border: 0;
        box-shadow: none;
    }
    
    .ofx-ri-subscriptions thead,
    .invoice-list table thead {
        display: none;
    }
    
    .ofx-ri-subscriptions tbody tr,
    .invoice-list table tbody tr {
        display: block;
        margin-bottom: 20px;
        border-radius: var(--ofx-border-radius);
        border: 1px solid var(--ofx-border-color);
        box-shadow: var(--ofx-box-shadow);
    }
    
    .ofx-ri-subscriptions tbody td,
    .invoice-list table tbody td {
        display: block;
        text-align: right;
        position: relative;
        padding: 15px 20px 15px 45%;
        border-top: 0;
        border-bottom: 1px solid var(--ofx-border-color);
    }
    
    .ofx-ri-subscriptions tbody td:before,
    .invoice-list table tbody td:before {
        content: attr(data-title);
        position: absolute;
        left: 20px;
        top: 15px;
        width: 40%;
        padding-right: 10px;
        text-align: left;
        font-weight: 600;
    }
    
    .ofx-ri-subscriptions .subscription-total,
    .ofx-ri-subscriptions .subscription-status-container,
    .ofx-ri-subscriptions .subscription-actions {
        padding: 0;
        margin-right: 0;
    }
    
    .ofx-ri-subscriptions td > * {
        margin-bottom: 10px;
    }
    
    .ofx-ri-subscriptions tbody td:last-child,
    .invoice-list table tbody td:last-child {
        border-bottom: 0;
    }
    
    .subscription-info {
        grid-template-columns: 1fr;
    }
    
    .payment-summary {
        grid-template-columns: 1fr;
    }
}

/* Print styling */
@media print {
    .ofx-font-size-controls,
    .subscription-navigation,
    .subscription-actions .button:not(.button-print) {
        display: none !important;
    }
    
    .ofx-ri-customer-subscriptions {
        font-size: 12pt;
    }
    
    .ofx-ri-subscriptions {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .payment-card:hover {
        transform: none;
    }
}

/* Animation for loading state */
.ofx-loading {
    position: relative;
}

.ofx-loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.ofx-loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(0, 123, 255, 0.2);
    border-top-color: #0d6efd;
    z-index: 11;
    animation: ofx-spinner 1s linear infinite;
}

@keyframes ofx-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Invoice list styling */
.invoice-list table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--ofx-border-color);
    border-radius: var(--ofx-border-radius);
    overflow: hidden;
    margin: 15px 0;
}

.invoice-list table thead th {
    background-color: #f8f9fa;
    padding: 12px 20px; /* Increased horizontal padding */
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid var(--ofx-border-color);
}

.invoice-list table tbody td {
    padding: 12px 20px; /* Increased horizontal padding */
    border-top: 1px solid var(--ofx-border-color);
}

.invoice-list table tbody tr:first-child td {
    border-top: none;
}

/* Notes styling */
.subscription-note {
    padding: 12px 15px;
    margin-bottom: 10px;
    background: #f8f9fa;
    border-left: 3px solid var(--ofx-primary-color);
    border-radius: 4px;
}

.note-meta {
    margin-bottom: 5px;
    color: #666;
    font-size: calc(var(--ofx-base-font-size) * 0.9);
}

.note-content {
    color: #333;
}

/* Customer details in view subscription */
.subscription-meta table {
    width: 100%;
    border-collapse: collapse;
}

.subscription-meta table th {
    width: 35%;
    text-align: left;
    padding: 10px;
    vertical-align: top;
}

.subscription-meta table td {
    padding: 10px;
}

.subscription-meta table tr:nth-child(odd) {
    background-color: #f8f9fa;
}