/**
 * 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 {
    color: #28A745 !important;
    font-weight: 600;
    margin: 0;
}

.subscription-status-trial, .status-trial {
    color: #17A2B8;
    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-next-payment-info {
    display: block;
    color: #888;
    font-size: 12px;
    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;
    flex-wrap: wrap;
}

.license-key .subscription-action-icon {
    flex-shrink: 0;
}

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

.license-key-value.clickable-license {
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: all;
}

.license-key-value.clickable-license:hover {
    background: #e8e8e8;
    color: #0073aa;
}

.license-key-value.clickable-license:active {
    background: #ddd;
}

.license-key-value.clickable-license.copied {
    background: #46b450;
    color: #fff;
    text-align: center;
}

.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;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.domain-item .domain-name {
    flex: 1;
    word-break: break-all;
}

.domain-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.domain-remove-btn:hover {
    color: #dc3545;
}

.domain-remove-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

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

.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;
}

/* Subscription Action Buttons */
.subscription-actions .actions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.subscription-action-btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.subscription-action-btn.pause-subscription {
    background: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.subscription-action-btn.pause-subscription:hover {
    background: #e0a800;
    border-color: #d39e00;
}

.subscription-action-btn.resume-subscription {
    background: #28a745;
    border-color: #28a745;
    color: #fff;
}

.subscription-action-btn.resume-subscription:hover {
    background: #218838;
    border-color: #1e7e34;
}

.subscription-action-btn.reactivate-subscription {
    background: #17a2b8;
    border-color: #17a2b8;
    color: #fff;
}

.subscription-action-btn.reactivate-subscription:hover {
    background: #138496;
    border-color: #117a8b;
}

.subscription-action-btn.convert-trial {
    background: #007bff;
    border-color: #007bff;
    color: #fff;
}

.subscription-action-btn.convert-trial:hover {
    background: #0069d9;
    border-color: #0062cc;
}

.subscription-action-btn.cancel-subscription,
.subscription-action-btn.danger {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

.subscription-action-btn.cancel-subscription:hover,
.subscription-action-btn.danger:hover {
    background: #c82333;
    border-color: #bd2130;
}

.subscription-action-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Cancelled status styling */
.status-cancelled {
    background-color: #dc3545;
    color: #fff;
}

.subscription-status-cancelled {
    color: #dc3545;
    font-weight: bold;
}

/* 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;
    }

    .subscription-actions .actions-list {
        flex-direction: column;
    }

    .subscription-action-btn {
        width: 100%;
    }
}

/* ==========================================================================
   Action Buttons with Text (Minimalist Style)
   ========================================================================== */

.subscription-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.subscription-action-btn:hover {
    background: #f5f5f5;
    color: #333;
    border-color: #ccc;
    text-decoration: none;
}

.subscription-action-btn:focus {
    outline: 2px solid #0073aa;
    outline-offset: 1px;
}

.subscription-action-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}

/* View Details Button */
.subscription-action-btn.view-details-btn {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

.subscription-action-btn.view-details-btn:hover {
    background: #005a87;
    border-color: #005a87;
    color: #fff;
}

/* Copy License Button */
.subscription-action-btn.copy-license-btn {
    background: #fff;
    color: #0073aa;
    border-color: #0073aa;
}

.subscription-action-btn.copy-license-btn:hover {
    background: #0073aa;
    color: #fff;
}

.subscription-action-btn.copy-license-btn.copied {
    background: #46b450;
    color: #fff;
    border-color: #46b450;
}

/* Reset Domains Button */
.subscription-action-btn.reset-domains-btn {
    background: #fff;
    color: #dc3545;
    border-color: #dc3545;
}

.subscription-action-btn.reset-domains-btn:hover {
    background: #dc3545;
    color: #fff;
}

/* Make Payment / Convert Trial Button */
.subscription-action-btn.convert-trial-subscription {
    background: #28a745;
    color: #fff;
    border-color: #28a745;
}

.subscription-action-btn.convert-trial-subscription:hover {
    background: #218838;
    border-color: #218838;
}

/* Subscription Actions Menu (Hamburger Dropdown) */
.subscription-actions-menu {
    position: relative;
    display: inline-block;
}

.subscription-menu-toggle {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    padding: 6px 8px;
    color: #666;
    transition: all 0.2s ease;
    line-height: 1;
}

.subscription-menu-toggle:hover {
    background: #f5f5f5;
    border-color: #ccc;
    color: #333;
}

.subscription-menu-toggle .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.subscription-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    min-width: 160px;
    overflow: hidden;
}

.subscription-menu-dropdown.open {
    display: block;
}

.subscription-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    white-space: nowrap;
}

.subscription-menu-item:hover {
    background: #f5f5f5;
    color: #0073aa;
    text-decoration: none;
}

.subscription-menu-item .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: #888;
}

.subscription-menu-item:hover .dashicons {
    color: #0073aa;
}

/* Subscription Actions Group for Icon Buttons */
.subscription-actions-group {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* Spinner animation for icon buttons */
.subscription-action-icon .dashicons.spin {
    animation: dashicon-spin 1s linear infinite;
}

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

/* Disabled state for icon buttons */
.subscription-action-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive Action Buttons */
@media (max-width: 768px) {
    .subscription-action-btn {
        padding: 8px 14px;
        font-size: 12px;
    }

    .subscription-action-btn .dashicons {
        font-size: 14px;
        width: 14px;
        height: 14px;
    }

    .subscription-actions-group {
        justify-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
    }

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

    .subscription-menu-dropdown {
        right: auto;
        left: 0;
    }
}