/**
 * AgenWebsite Subscriptions Frontend Styles
 *
 * Styles for customer-facing subscription management
 *
 * @package AgenWebsite\Subscriptions
 * @version 1.0.0
 */

/* ==========================================================================
   General Subscription Styles
   ========================================================================== */

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

.agenwebsite-subscriptions-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.agenwebsite-subscriptions-filters {
    margin-left: auto;
}

.subscription-filter-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.subscription-filter-form label {
    font-weight: 600;
    margin: 0;
    font-size: 14px;
}

.subscription-filter-form select {
    min-width: 150px;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

/* ==========================================================================
   Subscription Table Styles
   ========================================================================== */

.agenwebsite-subscriptions-table-wrapper {
    overflow-x: auto;
}

.my_account_orders.account-orders-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}

.my_account_orders th,
.my_account_orders td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
}

.my_account_orders th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.my_account_orders tbody tr:hover {
}

/* Subscription-specific table columns */
.subscription-id {
    width: 80px;
}

.subscription-product {
    min-width: 200px;
}

.subscription-status {
    width: 120px;
}

.subscription-next-payment {
    width: 140px;
}

.subscription-total {
    width: 100px;
}

.subscription-actions {
    width: 150px;
}

/* ==========================================================================
   Subscription Status Styles
   ========================================================================== */

.subscription-status-active, .status-active, .subscription-status-trial, .status-trial {
    color: #57a120 !important;
    font-weight: 600;
    margin: 0;
}


.subscription-status-on-hold,
.status-on-hold {
    color: #ffba00 !important;
    font-weight: 600;
    margin: 0;
}

.subscription-status-pending,
.status-pending {
    color: #ffba00 !important;
    font-weight: 600;
    margin: 0;
}

.subscription-status-expired,
.status-expired {
    color: #999 !important;
    font-weight: 600;
    margin: 0;
}

/* Status badges for subscription details */
.status-label {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-label.status-active {
    background: #7ad03a;
    color: white;
}


.status-label.status-on-hold {
    background: #ffba00;
    color: white;
}

.status-label.status-pending {
    background: #ffba00;
    color: white;
}

.status-label.status-expired {
    background: #999;
    color: white;
}

/* ==========================================================================
   Subscription Product Styles
   ========================================================================== */

.subscription-billing {
    display: block;
    color: #666;
    font-style: italic;
    font-size: 13px;
    margin-top: 3px;
}

.subscription-product-deleted,
.product-deleted {
    color: #999;
    font-style: italic;
}

/* ==========================================================================
   Action Button Styles
   ========================================================================== */

.subscription-actions-group {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.subscription-actions-group .button,
.actions-list .button {
    font-size: 12px;
    padding: 4px 8px;
    min-height: auto;
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.subscription-actions-group .button.view {
    background: #ef6c00;
    color: white;
    border: 1px solid #ef6c00;
}

.subscription-actions-group .button.view:hover {
    background: #c35c07;
    border-color: #c35c07;
}


.subscription-actions-group .button.reactivate-subscription,
.reactivate-subscription {
    background: #28a745;
    color: white;
    border: 1px solid #28a745;
}

.subscription-actions-group .button.reactivate-subscription:hover,
.reactivate-subscription:hover {
    background: #218838;
    border-color: #218838;
}

/* ==========================================================================
   Subscription Details Page
   ========================================================================== */

.agenwebsite-subscription-details {
    max-width: 800px;
}

.subscription-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.subscription-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.subscription-navigation .button {
    font-size: 14px;
    padding: 6px 12px;
    text-decoration: none;
}

.subscription-overview {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 30px;
}

.subscription-status-badge {
    text-align: center;
    margin-bottom: 20px;
}

.subscription-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.detail-item label {
    font-weight: 600;
    color: #333;
    font-size: 14px;
    margin: 0;
}

.detail-value {
    font-size: 16px;
    color: #666;
}

.detail-value a {
    color: #0073aa;
    text-decoration: none;
}

.detail-value a:hover {
    text-decoration: underline;
}

.billing-interval {
    display: block;
    font-size: 14px;
    color: #999;
    font-style: italic;
    margin-top: 3px;
}

/* ==========================================================================
   Subscription Actions Section
   ========================================================================== */

.subscription-actions {
    margin-bottom: 30px;
}

.subscription-actions h3 {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
}

.actions-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.reactivation-notice {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
    font-style: italic;
}

/* ==========================================================================
   Billing History Section
   ========================================================================== */

.subscription-billing-history h3 {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
}

.billing-history-table-wrapper {
    overflow-x: auto;
}

.billing-history-table {
    min-width: 600px;
}

.order-actions-group {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.order-actions-group .button {
    font-size: 12px;
    padding: 4px 8px;
    min-height: auto;
}

.order-actions-group .button.view {
    background: #0073aa;
    color: white;
}

.order-actions-group .button.download {
    background: #6c757d;
    color: white;
}

.order-actions-group .button.invoice {
    background: #17a2b8;
    color: white;
}

/* Order status styles */
.order-status-completed {
    color: #7ad03a;
    font-weight: 600;
}

.order-status-processing {
    color: #ffba00;
    font-weight: 600;
}

.order-status-on-hold {
    color: #ffba00;
    font-weight: 600;
}


.order-status-refunded {
    color: #999;
    font-weight: 600;
}

.order-status-failed {
    color: #a00;
    font-weight: 600;
}

.order-status-pending {
    color: #ffba00;
    font-weight: 600;
}

.no-orders {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 5px;
}

/* ==========================================================================
   Pagination Styles
   ========================================================================== */

.agenwebsite-subscriptions-pagination {
    margin-top: 20px;
    text-align: center;
}

.agenwebsite-subscriptions-pagination .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 2px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #0073aa;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.agenwebsite-subscriptions-pagination .page-numbers:hover,
.agenwebsite-subscriptions-pagination .page-numbers.current {
    background: #0073aa;
    color: white;
    border-color: #0073aa;
}

/* ==========================================================================
   Loading and Message Styles
   ========================================================================== */

.subscription-loading {
    text-align: center;
    padding: 20px;
    color: #666;
}

.subscription-loading::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #0073aa;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    .agenwebsite-subscriptions-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .agenwebsite-subscriptions-filters {
        margin-left: 0;
        width: 100%;
    }

    .subscription-filter-form {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .subscription-filter-form select {
        width: 100%;
    }

    .subscription-actions-group {
        flex-direction: column;
        width: 100%;
    }

    .subscription-actions-group .button {
        width: 100%;
        margin: 2px 0;
        text-align: center;
    }

    .subscription-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .subscription-details-grid {
        grid-template-columns: 1fr;
    }

    .actions-list {
        flex-direction: column;
        width: 100%;
    }

    .actions-list .button {
        width: 100%;
        text-align: center;
    }

    .order-actions-group {
        flex-direction: column;
        width: 100%;
    }

    .order-actions-group .button {
        width: 100%;
        margin: 2px 0;
        text-align: center;
    }

    /* Make tables responsive */
    .shop_table_responsive {
        border: 0;
    }

    .shop_table_responsive thead {
        display: none;
    }

    .shop_table_responsive tbody,
    .shop_table_responsive tr,
    .shop_table_responsive td {
        display: block;
        width: 100%;
    }

    .shop_table_responsive tr {
        border: 1px solid #ccc;
        margin-bottom: 10px;
        padding: 15px;
        border-radius: 5px;
        background: #f9f9f9;
    }

    .shop_table_responsive td {
        border: none;
        padding: 5px 0;
        text-align: left;
    }

    .shop_table_responsive td::before {
        content: attr(data-title) ": ";
        font-weight: 600;
        margin-right: 10px;
        color: #333;
    }
}

@media (max-width: 480px) {
    .agenwebsite-subscription-details {
        margin: 0 -15px;
    }

    .subscription-overview {
        margin: 0 -15px 20px -15px;
        border-radius: 0;
    }

    .subscription-header h2 {
        font-size: 20px;
    }

    .detail-value {
        font-size: 14px;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .subscription-actions,
    .subscription-navigation,
    .agenwebsite-subscriptions-filters,
    .agenwebsite-subscriptions-pagination {
        display: none !important;
    }

    .agenwebsite-subscription-details {
        max-width: none;
    }

    .subscription-overview {
        background: white;
        border: 1px solid #ccc;
    }
}

.woocommerce table.shop_table th.product-quantity, .woocommerce table.shop_table td.product-quantity {
    /* display: none; */
}

.variation-Trial {
    display: none !important;
}

/* ==========================================================================
   License Styles (from my-subscriptions.php)
   ========================================================================== */

.subscription-license {
    min-width: 150px;
}

.license-info {
    font-size: 0.9em;
    line-height: 1.4;
}

.license-key {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.license-key-value {
    font-family: monospace;
    background: #f5f5f5;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 0.85em;
    flex: 1;
    word-break: break-all;
}

.copy-license-btn {
    background: #0073aa;
    color: white;
    border: none;
    padding: .618em 1em;
    border-radius: 3px;
    cursor: pointer;
    text-align: left;
    font-size: 12px;
    transition: all 0.2s ease;
    font-weight: normal;
    line-height: 1.4;
}

.copy-license-btn:hover {
    background: #005a87;
    color: white;
}

.copy-license-btn:active {
    background: #004a6b;
}

.copy-license-btn.copied {
    background: #46b450;
}

.copy-license-btn.copied:hover {
    background: #3ba644;
}

.license-status {
    margin-bottom: 3px;
}

.license-status-active {
    color: #2e8b57;
    font-weight: 600;
}

.license-status-expired {
    color: #dc3545;
    font-weight: 600;
}

.license-status-cancelled {
    color: #6c757d;
    font-weight: 600;
}

.license-status-suspended {
    color: #fd7e14;
    font-weight: 600;
}

.license-expiry {
    color: #666;
    font-size: 0.85em;
}

.no-license {
    color: #999;
    font-style: italic;
}

/* Status badge for Free subscriptions */
.status-label.status-free,
.subscription-status-free,
.status-free {
    color: #5C68E2;
    font-weight: 600;
    margin: 0;
}

/* Responsive License Styles */
@media (max-width: 768px) {
    .license-info {
        display: block;
    }

    .license-key, .license-status, .license-expiry {
        display: block;
        margin-bottom: 3px;
    }

    .license-key {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .license-key-value {
        flex: none;
        width: 100%;
        font-size: 0.8em;
    }

    .copy-license-btn {
        align-self: flex-end;
    }
}

/* ==========================================================================
   Domain Usage Styles
   ========================================================================== */

.subscription-domains {
    min-width: 150px;
}

.domain-info {
    font-size: 0.9em;
    line-height: 1.4;
}

.domain-list {
    margin-bottom: 5px;
}

.domain-item {
    background: #f5f5f5;
    padding: 4px 8px;
    border-radius: 3px;
    margin-bottom: 3px;
    font-size: 0.85em;
    color: #333;
    word-break: break-all;
}

.domain-count {
    color: #666;
    font-size: 0.85em;
    margin-top: 5px;
    font-weight: 600;
}

.no-domains {
    color: #999;
    font-style: italic;
    display: block;
    margin-bottom: 5px;
}

/* Reset Domains Button */
.reset-domains-btn {
    background: #dc3545;
    color: white;
    border: 1px solid #dc3545;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
    font-weight: normal;
    line-height: 1.4;
    text-align: center;
}

.reset-domains-btn:hover {
    background: #c82333;
    border-color: #bd2130;
    color: white;
}

.reset-domains-btn:active {
    background: #bd2130;
    border-color: #b21f2d;
}

.reset-domains-btn:disabled {
    background: #6c757d;
    border-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.65;
}

/* Responsive Domain Styles */
@media (max-width: 768px) {
    .domain-info {
        display: block;
    }

    .domain-list {
        max-height: 150px;
        overflow-y: auto;
    }

    .reset-domains-btn {
        width: 100%;
        margin-top: 5px;
    }
}