/**
 * Frontend CSS för Allgot Stripe Designer
 */

/* Stripe Dashboard */
.asd-stripe-dashboard {
    display: grid;
    gap: 20px;
    margin: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.asd-stripe-dashboard.asd-layout-three_boxes {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.asd-stripe-dashboard.asd-layout-two_columns {
    grid-template-columns: 1fr 1fr;
}

.asd-stripe-dashboard.asd-layout-stacked {
    grid-template-columns: 1fr;
}

/* Dashboard Boxes */
.asd-dashboard-box {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8eaed;
    transition: all 0.2s ease;
}

.asd-dashboard-box:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.asd-dashboard-box.asd-full-width {
    grid-column: 1 / -1;
}

/* Subscription Info */
.asd-subscription-info {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8eaed;
    margin: 20px 0;
}

.asd-subscription-info.asd-style-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
}

.asd-subscription-info.asd-style-minimal {
    background: transparent;
    border: 2px solid #f0f0f0;
    box-shadow: none;
}

.asd-subscription-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.asd-plan-name {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: inherit;
}

.asd-status {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.asd-status.asd-active {
    background: #e8f5e8;
    color: #2e7d32;
}

.asd-status.asd-trial {
    background: #fff3e0;
    color: #f57c00;
}

.asd-status.asd-canceling {
    background: #fce4ec;
    color: #c2185b;
}

.asd-subscription-details {
    margin-bottom: 20px;
}

.asd-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.asd-amount {
    font-size: 32px;
    font-weight: 700;
    color: inherit;
}

.asd-interval {
    font-size: 16px;
    color: inherit;
    opacity: 0.7;
}

.asd-renewal-info {
    margin: 0;
    font-size: 14px;
    opacity: 0.8;
}

.asd-renewal-info.asd-canceling {
    color: #d32f2f;
    font-weight: 600;
}

.asd-actions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
}

/* Latest Payment */
.asd-latest-payment {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8eaed;
    margin: 20px 0;
    text-align: center;
}

.asd-latest-payment.asd-style-dashboard {
    margin: 0;
}

.asd-latest-payment h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.asd-payment-amount {
    font-size: 28px;
    font-weight: 700;
    color: #1976d2;
    margin-bottom: 8px;
}

.asd-payment-date {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
}

.asd-payment-status {
    margin-bottom: 16px;
}

.asd-payment-receipt {
    margin-top: 16px;
}

/* Latest Receipt */
.asd-latest-receipt {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8eaed;
    margin: 20px 0;
}

.asd-latest-receipt.asd-style-dashboard {
    margin: 0;
}

.asd-latest-receipt h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.asd-receipt-details {
    margin-bottom: 20px;
}

.asd-receipt-number {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.asd-receipt-amount {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.asd-receipt-date {
    font-size: 14px;
    color: #666;
}

.asd-receipt-actions {
    display: flex;
    gap: 12px;
}

/* Payment History */
.asd-payment-history {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8eaed;
    margin: 20px 0;
}

.asd-payment-history h4 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

/* Payment Table */
.asd-payment-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.asd-payment-table th {
    background: #f8f9fa;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #e9ecef;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.asd-payment-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #e9ecef;
    font-size: 14px;
    color: #333;
}

.asd-payment-table tr:last-child td {
    border-bottom: none;
}

.asd-payment-table tr:hover {
    background: #f8f9fa;
}

/* Payment List */
.asd-payment-history.asd-list-style {
    padding: 20px;
}

.asd-payment-item {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    border-left: 4px solid #1976d2;
}

.asd-payment-item:last-child {
    margin-bottom: 0;
}

.asd-payment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.asd-payment-date {
    font-weight: 600;
    color: #333;
}

.asd-payment-amount {
    font-weight: 700;
    color: #1976d2;
    font-size: 16px;
}

.asd-payment-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.asd-payment-description {
    font-size: 13px;
    color: #666;
    margin-top: 8px;
    font-style: italic;
}

/* Buttons and Links */
.asd-receipt-button,
.asd-receipt-download-button,
.asd-upgrade-button,
.asd-cancel-button,
.asd-custom-button {
    display: inline-block;
    padding: 10px 20px;
    background: #1976d2;
    color: #fff !important;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    text-align: center;
}

.asd-receipt-button:hover,
.asd-receipt-download-button:hover,
.asd-upgrade-button:hover {
    background: #1565c0;
    transform: translateY(-1px);
    color: #fff !important;
}

.asd-cancel-button {
    background: #dc3545;
}

.asd-cancel-button:hover {
    background: #c82333;
    color: #fff !important;
}

.asd-receipt-link,
.asd-receipt-download,
.asd-receipt-view,
.asd-custom-link {
    color: #1976d2;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: color 0.2s ease;
}

.asd-receipt-link:hover,
.asd-receipt-download:hover,
.asd-receipt-view:hover,
.asd-custom-link:hover {
    color: #1565c0;
    text-decoration: underline;
}

/* Status Indicators */
.asd-status.asd-succeeded {
    background: #e8f5e8;
    color: #2e7d32;
}

.asd-status.asd-pending {
    background: #fff3e0;
    color: #f57c00;
}

.asd-status.asd-failed {
    background: #fce4ec;
    color: #c2185b;
}

.asd-status.asd-incomplete {
    background: #f3e5f5;
    color: #7b1fa2;
}

/* Custom Text and Components */
.asd-custom-text {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8eaed;
    margin: 20px 0;
    line-height: 1.6;
}

.asd-custom-text h1,
.asd-custom-text h2,
.asd-custom-text h3,
.asd-custom-text h4 {
    color: #333;
    margin-top: 0;
}

.asd-custom-text p {
    color: #666;
    margin-bottom: 16px;
}

.asd-custom-text p:last-child {
    margin-bottom: 0;
}

/* Error and Info Messages */
.asd-error,
.asd-no-subscription,
.asd-no-data,
.asd-login-required {
    background: #fff3cd;
    color: #856404;
    padding: 16px 20px;
    border-radius: 8px;
    border: 1px solid #ffeaa7;
    margin: 20px 0;
    text-align: center;
    font-weight: 500;
}

.asd-error {
    background: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.asd-no-subscription,
.asd-no-data {
    background: #cce7ff;
    color: #004085;
    border-color: #b3d7ff;
}

/* Responsive Design */
@media (max-width: 768px) {
    .asd-stripe-dashboard.asd-layout-three_boxes,
    .asd-stripe-dashboard.asd-layout-two_columns {
        grid-template-columns: 1fr;
    }
    
    .asd-dashboard-box {
        padding: 20px;
    }
    
    .asd-subscription-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .asd-price {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .asd-amount {
        font-size: 28px;
    }
    
    .asd-actions {
        flex-direction: column;
    }
    
    .asd-payment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .asd-payment-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .asd-receipt-actions {
        flex-direction: column;
    }
    
    /* Mobile Table */
    .asd-payment-table,
    .asd-payment-table thead,
    .asd-payment-table tbody,
    .asd-payment-table th,
    .asd-payment-table td,
    .asd-payment-table tr {
        display: block;
    }
    
    .asd-payment-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .asd-payment-table tr {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        border-left: 4px solid #1976d2;
    }
    
    .asd-payment-table td {
        border: none;
        position: relative;
        padding-left: 25%;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    
    .asd-payment-table td:before {
        content: attr(data-label) ": ";
        position: absolute;
        left: 6px;
        width: 20%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: 600;
        color: #666;
        font-size: 12px;
        text-transform: uppercase;
    }
}

@media (max-width: 480px) {
    .asd-dashboard-box,
    .asd-subscription-info,
    .asd-latest-payment,
    .asd-latest-receipt,
    .asd-payment-history {
        padding: 16px;
        margin: 16px 0;
    }
    
    .asd-amount {
        font-size: 24px;
    }
    
    .asd-payment-amount {
        font-size: 22px;
    }
}

/* Invoice and Receipt History */
.asd-invoice-history,
.asd-receipt-history {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8eaed;
    margin: 20px 0;
}

.asd-invoice-table,
.asd-receipt-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.asd-invoice-table th,
.asd-receipt-table th {
    background: #f8f9fa;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #e9ecef;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.asd-invoice-table td,
.asd-receipt-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #e9ecef;
    font-size: 14px;
    color: #333;
}

.asd-invoice-table tr:last-child td,
.asd-receipt-table tr:last-child td {
    border-bottom: none;
}

.asd-invoice-table tr:hover,
.asd-receipt-table tr:hover {
    background: #f8f9fa;
}

.asd-invoice-actions {
    display: flex;
    gap: 8px;
}

.asd-download-button,
.asd-view-button,
.asd-receipt-download {
    display: inline-block;
    padding: 6px 12px;
    background: #1976d2;
    color: #fff !important;
    text-decoration: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.asd-download-button:hover,
.asd-view-button:hover,
.asd-receipt-download:hover {
    background: #1565c0;
    color: #fff !important;
    transform: translateY(-1px);
}

.asd-view-button {
    background: #43a047;
}

.asd-view-button:hover {
    background: #388e3c;
}

/* Receipt Cards */
.asd-receipt-cards {
    display: grid;
    gap: 16px;
}

.asd-receipt-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    border-left: 4px solid #1976d2;
}

.asd-receipt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.asd-receipt-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.asd-receipt-amount {
    font-size: 18px;
    font-weight: 700;
    color: #1976d2;
}

.asd-receipt-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.asd-receipt-date {
    font-size: 14px;
    color: #666;
}

/* Status Indicators for Invoices */
.asd-status-paid {
    background: #e8f5e8;
    color: #2e7d32;
}

.asd-status-open {
    background: #fff3e0;
    color: #f57c00;
}

.asd-status-draft {
    background: #f3e5f5;
    color: #7b1fa2;
}

.asd-status-void {
    background: #fce4ec;
    color: #c2185b;
}

.asd-status-uncollectible {
    background: #ffebee;
    color: #d32f2f;
}

/* Enhanced Subscription Status */
.asd-active-sub {
    border-left: 4px solid #46b450;
}

.asd-inactive-sub {
    border-left: 4px solid #dc3232;
    opacity: 0.8;
}

.asd-inactive-sub .asd-plan-name {
    text-decoration: line-through;
}

/* Responsive Design for Invoice/Receipt Tables */
@media (max-width: 768px) {
    .asd-invoice-table,
    .asd-receipt-table,
    .asd-invoice-table thead,
    .asd-receipt-table thead,
    .asd-invoice-table tbody,
    .asd-receipt-table tbody,
    .asd-invoice-table th,
    .asd-receipt-table th,
    .asd-invoice-table td,
    .asd-receipt-table td,
    .asd-invoice-table tr,
    .asd-receipt-table tr {
        display: block;
    }
    
    .asd-invoice-table thead tr,
    .asd-receipt-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .asd-invoice-table tr,
    .asd-receipt-table tr {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        border-left: 4px solid #1976d2;
    }
    
    .asd-invoice-table td,
    .asd-receipt-table td {
        border: none;
        position: relative;
        padding-left: 25%;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    
    .asd-invoice-table td:before,
    .asd-receipt-table td:before {
        content: attr(data-label) ": ";
        position: absolute;
        left: 6px;
        width: 20%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: 600;
        color: #666;
        font-size: 12px;
        text-transform: uppercase;
    }
    
    .asd-invoice-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .asd-receipt-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .asd-receipt-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Print Styles */
@media print {
    .asd-stripe-dashboard,
    .asd-subscription-info,
    .asd-latest-payment,
    .asd-latest-receipt,
    .asd-payment-history,
    .asd-invoice-history,
    .asd-receipt-history {
        background: #fff !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    
    .asd-receipt-button,
    .asd-receipt-download-button,
    .asd-upgrade-button,
    .asd-cancel-button,
    .asd-component-controls,
    .asd-download-button,
    .asd-view-button,
    .asd-receipt-download {
        display: none !important;
    }
}