/**
 * MX Trial Module -- shadcn-inspired UI
 * Scoped under .mx-trial to avoid leaking into WHMCS admin chrome.
 */

/* ========================================================================
   Design Tokens
   ======================================================================== */

.mx-trial {
    --mx-bg: #ffffff;
    --mx-bg-muted: #fafafa;
    --mx-border: #e4e4e7;
    --mx-input-border: #d4d4d8;
    --mx-text: #18181b;
    --mx-text-secondary: #3f3f46;
    --mx-text-muted: #71717a;
    --mx-text-placeholder: #a1a1aa;
    --mx-primary: #1a4d80;
    --mx-primary-hover: #153d66;
    --mx-destructive: #ef4444;
    --mx-destructive-hover: #dc2626;
    --mx-radius: 0.5rem;
    --mx-radius-sm: 0.375rem;
    --mx-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --mx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --mx-ring: 0 0 0 2px #fff, 0 0 0 4px #1a4d80;
    --mx-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    font-family: var(--mx-font);
    color: var(--mx-text);
    line-height: 1.5;
}

/* ========================================================================
   Tabs (segmented control style)
   ======================================================================== */

.mx-tabs {
    display: inline-flex;
    background: var(--mx-bg-muted);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius);
    padding: 4px;
    gap: 4px;
    margin-bottom: 24px;
    list-style: none;
}

.mx-tab {
    display: inline-block;
}

.mx-tab a {
    display: inline-block;
    padding: 6px 16px;
    border-radius: calc(var(--mx-radius) - 2px);
    font-size: 14px;
    font-weight: 500;
    color: var(--mx-text-muted);
    text-decoration: none;
    transition: all 0.15s ease;
}

.mx-tab a:hover {
    color: var(--mx-text);
    text-decoration: none;
}

.mx-tab.active a {
    background: var(--mx-bg);
    color: var(--mx-text);
    box-shadow: var(--mx-shadow-sm);
}

/* ========================================================================
   Card
   ======================================================================== */

.mx-card {
    background: var(--mx-bg);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius);
    box-shadow: var(--mx-shadow-sm);
    margin-bottom: 16px;
}

.mx-card-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--mx-border);
}

.mx-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--mx-text);
    line-height: 1.4;
}

.mx-card-body {
    padding: 24px;
}

.mx-card-body p:last-child {
    margin-bottom: 0;
}

/* ========================================================================
   Stat Card
   ======================================================================== */

.mx-stat-card {
    background: var(--mx-bg);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius);
    box-shadow: var(--mx-shadow-sm);
    padding: 20px 24px;
    text-align: center;
}

.mx-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--mx-text);
    line-height: 1.2;
}

.mx-stat-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--mx-text-muted);
    margin-top: 4px;
}

/* ========================================================================
   Badge
   ======================================================================== */

.mx-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
}

.mx-badge-success {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.mx-badge-info {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.mx-badge-muted {
    background: #f4f4f5;
    color: #3f3f46;
    border: 1px solid #e4e4e7;
}

.mx-badge-warning {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.mx-badge-destructive {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* ========================================================================
   Buttons
   ======================================================================== */

.mx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--mx-radius-sm);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
    font-family: var(--mx-font);
}

.mx-btn:hover {
    text-decoration: none;
}

.mx-btn:focus-visible {
    outline: none;
    box-shadow: var(--mx-ring);
}

.mx-btn-primary {
    background: var(--mx-primary);
    color: #fff;
    border-color: var(--mx-primary);
}

.mx-btn-primary:hover {
    background: var(--mx-primary-hover);
    color: #fff;
}

.mx-btn-destructive {
    background: var(--mx-destructive);
    color: #fff;
    border-color: var(--mx-destructive);
}

.mx-btn-destructive:hover {
    background: var(--mx-destructive-hover);
    color: #fff;
}

.mx-btn-outline {
    background: var(--mx-bg);
    color: var(--mx-text);
    border-color: var(--mx-input-border);
}

.mx-btn-outline:hover {
    background: var(--mx-bg-muted);
    color: var(--mx-text);
}

.mx-btn-ghost {
    background: transparent;
    color: var(--mx-text);
}

.mx-btn-ghost:hover {
    background: var(--mx-bg-muted);
    color: var(--mx-text);
}

.mx-btn-link {
    background: transparent;
    color: var(--mx-text-muted);
    padding: 8px 12px;
}

.mx-btn-link:hover {
    color: var(--mx-text);
    text-decoration: underline;
}

.mx-btn-sm {
    padding: 4px 12px;
    font-size: 13px;
}

.mx-btn-block {
    display: flex;
    width: 100%;
}

.mx-btn i {
    font-size: 14px;
}

/* ========================================================================
   Table
   ======================================================================== */

.mx-table-container {
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius);
    overflow: hidden;
}

.mx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.mx-table thead th {
    background: var(--mx-bg-muted);
    padding: 10px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: var(--mx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--mx-border);
}

.mx-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--mx-border);
    color: var(--mx-text);
    vertical-align: middle;
}

.mx-table tbody tr:last-child td {
    border-bottom: none;
}

.mx-table tbody tr:hover {
    background: var(--mx-bg-muted);
}

.mx-table a {
    color: var(--mx-text);
    text-decoration: underline;
    text-decoration-color: var(--mx-input-border);
    text-underline-offset: 2px;
}

.mx-table a:hover {
    text-decoration-color: var(--mx-text);
}

/* Detail table variant (no container needed) */
.mx-table-detail {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.mx-table-detail th {
    padding: 8px 0;
    text-align: left;
    font-weight: 500;
    color: var(--mx-text-muted);
    width: 180px;
    vertical-align: top;
}

.mx-table-detail td {
    padding: 8px 0;
    color: var(--mx-text);
}

.mx-table-detail tr + tr th,
.mx-table-detail tr + tr td {
    border-top: 1px solid var(--mx-border);
}

.mx-table-detail a {
    color: var(--mx-text);
    text-decoration: underline;
    text-decoration-color: var(--mx-input-border);
    text-underline-offset: 2px;
}

.mx-table-detail a:hover {
    text-decoration-color: var(--mx-text);
}

/* ========================================================================
   Forms
   ======================================================================== */

.mx-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--mx-text);
    margin-bottom: 6px;
}

.mx-input,
.mx-select {
    display: block;
    padding: 8px 12px;
    border: 1px solid var(--mx-input-border);
    border-radius: var(--mx-radius-sm);
    font-size: 14px;
    font-family: var(--mx-font);
    color: var(--mx-text);
    background: var(--mx-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mx-input::placeholder {
    color: var(--mx-text-placeholder);
}

.mx-input:focus,
.mx-select:focus,
.mx-textarea:focus {
    outline: none;
    border-color: var(--mx-primary);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(26, 77, 128, 0.2);
}

.mx-select {
    appearance: auto;
}

.mx-textarea {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--mx-input-border);
    border-radius: var(--mx-radius-sm);
    font-size: 14px;
    font-family: var(--mx-font);
    color: var(--mx-text);
    background: var(--mx-bg);
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mx-help {
    font-size: 13px;
    color: var(--mx-text-muted);
    margin-top: 4px;
    margin-bottom: 0;
}

.mx-form-group {
    margin-bottom: 16px;
}

.mx-form-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mx-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 400;
    color: var(--mx-text);
    cursor: pointer;
}

.mx-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--mx-primary);
    cursor: pointer;
}

/* ========================================================================
   Alerts
   ======================================================================== */

.mx-alert {
    padding: 12px 16px;
    border-radius: var(--mx-radius-sm);
    font-size: 14px;
    margin-bottom: 16px;
    border: 1px solid;
    border-left-width: 4px;
}

.mx-alert-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    border-left-color: #22c55e;
    color: #15803d;
}

.mx-alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    border-left-color: #ef4444;
    color: #b91c1c;
}

.mx-alert-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    border-left-color: #3b82f6;
    color: #1d4ed8;
}

.mx-alert-warning {
    background: #fffbeb;
    border-color: #fde68a;
    border-left-color: #f59e0b;
    color: #b45309;
}

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

.mx-pagination {
    display: inline-flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.mx-pagination li a,
.mx-pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--mx-text);
    text-decoration: none;
    transition: all 0.15s ease;
}

.mx-pagination li a:hover {
    background: var(--mx-bg-muted);
    text-decoration: none;
}

.mx-pagination li.active a,
.mx-pagination li.active span {
    background: var(--mx-primary);
    color: #fff;
    border-color: var(--mx-primary);
}

/* ========================================================================
   Utility
   ======================================================================== */

.mx-trial .mx-text-muted {
    color: var(--mx-text-muted);
    font-size: 14px;
}

.mx-trial .mx-text-center {
    text-align: center;
}

.mx-trial .mx-separator {
    border: none;
    border-top: 1px solid var(--mx-border);
    margin: 24px 0;
}

.mx-trial .mx-empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--mx-text-muted);
}

/* ========================================================================
   Client Area: Countdown Widget
   ======================================================================== */

.mx-trial-widget {
    background: var(--mx-bg, #ffffff);
    border: 1px solid #e4e4e7;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    margin-bottom: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.mx-trial-widget-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e4e4e7;
    font-size: 15px;
    font-weight: 600;
    color: #18181b;
}

.mx-trial-widget-header i {
    margin-right: 6px;
    color: #71717a;
}

.mx-trial-widget-body {
    padding: 20px;
}

.mx-trial-widget-body p {
    margin: 0 0 12px;
    font-size: 14px;
    color: #3f3f46;
}

.mx-trial-progress {
    height: 6px;
    background: #f4f4f5;
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: 12px;
}

.mx-trial-progress-bar {
    height: 100%;
    background: #3b82f6;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.mx-trial-widget .mx-trial-days {
    font-size: 14px;
    font-weight: 600;
    color: #18181b;
}

.mx-trial-widget .mx-trial-hint {
    font-size: 13px;
    color: #71717a;
}

.mx-trial-widget .mx-trial-cancel-link {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    margin-top: 8px;
    border-radius: 0.375rem;
    font-size: 13px;
    font-weight: 500;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    text-decoration: none;
    transition: all 0.15s ease;
}

.mx-trial-cancel-link:hover {
    background: #fee2e2;
    text-decoration: none;
    color: #b91c1c;
}

/* ========================================================================
   Client Area: Cancel Page
   ======================================================================== */

.mx-trial-cancel-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 40px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.mx-trial-cancel-card {
    max-width: 480px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e4e4e7;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    padding: 32px;
    text-align: center;
}

.mx-trial-cancel-card h2 {
    font-size: 18px;
    font-weight: 600;
    color: #18181b;
    margin: 0 0 8px;
}

.mx-trial-cancel-card p {
    font-size: 14px;
    color: #71717a;
    margin: 0 0 24px;
}

.mx-trial-cancel-card .mx-trial-error-text {
    color: #b91c1c;
}

.mx-trial-cancel-card a.mx-trial-return-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 0.375rem;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: #1a4d80;
    text-decoration: none;
    transition: all 0.15s ease;
}

.mx-trial-cancel-card a.mx-trial-return-link:hover {
    background: #153d66;
    color: #fff;
}

/* ========================================================================
   Client Area: Checkout Trial Notice
   ======================================================================== */

.mx-trial-checkout-notice {
    margin: 16px 0;
    background: #ffffff;
    border: 1px solid #e4e4e7;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.mx-trial-checkout-notice-header {
    padding: 14px 20px;
    background: #f0fdf4;
    border-bottom: 1px solid #bbf7d0;
    font-size: 15px;
    font-weight: 600;
    color: #15803d;
}

.mx-trial-checkout-notice-header i {
    margin-right: 6px;
}

.mx-trial-checkout-terms {
    list-style: none;
    padding: 16px 20px;
    margin: 0;
}

.mx-trial-checkout-terms li {
    padding: 6px 0;
    font-size: 14px;
    color: #3f3f46;
    line-height: 1.5;
}

.mx-trial-checkout-terms li i {
    width: 20px;
    text-align: center;
    margin-right: 10px;
    color: #15803d;
    font-size: 13px;
}

.mx-trial-checkout-terms li i.fa-times-circle {
    color: #71717a;
}

.mx-trial-checkout-terms li i.fa-credit-card,
.mx-trial-checkout-terms li i.fa-calendar {
    color: #1d4ed8;
}

/* ========================================================================
   Spinner (kept from original)
   ======================================================================== */

.mx-trial-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: mx-trial-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes mx-trial-spin {
    to { transform: rotate(360deg); }
}