/* =============================================================================
   csspro-btn — plugin button system
   All properties use !important so no theme stylesheet can override them.
   Every interactive element in the plugin uses csspro-btn instead of the
   WordPress 'button' / 'button-primary' classes.
   ============================================================================= */
.csspro-btn {
    display: inline-block !important;
    padding: 11px 22px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    border: none !important;
    border-radius: 8px !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease !important;
}

/* Primary — purple, used for main actions */
.csspro-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(102,126,234,.35) !important;
}
.csspro-btn-primary:hover,
.csspro-btn-primary:focus {
    background: linear-gradient(135deg, #5568d3 0%, #6a3fa0 100%) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 16px rgba(102,126,234,.45) !important;
    text-decoration: none !important;
}
.csspro-btn-primary:disabled,
.csspro-btn-primary[disabled] {
    opacity: .5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Block — full-width, e.g. Buy Now inside a card */
.csspro-btn-block {
    display: block !important;
    width: 100% !important;
}

/* Small — for table row actions like View */
.csspro-btn-sm {
    padding: 6px 14px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
}

/* =============================================================================
   Credit Support System — Frontend Styles
   ============================================================================= */

/* Full dashboard wrapper */
.css-customer-dashboard { max-width:1200px; margin:0 auto; padding:20px; }

/* =============================================================================
   Login box — shows a single "Log In" button that redirects to wp-login.php.
   Using the standard WordPress login page ensures auth cookies are always set
   correctly and persist to /wp-admin/ without a second login.
   ============================================================================= */
.css-login-wrapper { max-width:480px; margin:40px auto; }
.css-login-box { background:#fff; border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,.12); padding:40px; text-align:center; }
.css-login-box h2 { margin:0 0 14px 0; font-size:26px; font-weight:700; color:#2c3e50; }
.css-login-box > p { margin:0 0 24px 0; color:#555; font-size:15px; line-height:1.6; }
.css-login-btn { display:inline-block; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff !important; border:none !important; padding:14px 36px !important; font-size:16px !important; font-weight:600 !important; border-radius:50px !important; text-decoration:none !important; cursor:pointer; transition:opacity .2s ease,transform .2s ease; box-shadow:0 4px 15px rgba(102,126,234,.4); text-align:center; }
.css-login-btn:hover { opacity:.92; transform:translateY(-2px); color:#fff !important; }
.css-register-link { margin:18px 0 0 0; font-size:14px; color:#555; }
.css-register-link a { color:#667eea; text-decoration:none; font-weight:600; }
.css-register-link a:hover { text-decoration:underline; }

/* =============================================================================
   Credits Widget
   ============================================================================= */
.css-credits-widget { background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; padding:30px; border-radius:12px; margin-bottom:30px; box-shadow:0 10px 30px rgba(0,0,0,.15); }
.css-credits-widget h2 { margin:0 0 20px 0; font-size:24px; font-weight:600; color:#fff; }
.css-credits-display { text-align:center; margin:30px 0; }
.css-credits-amount { display:block; font-size:64px; font-weight:700; line-height:1; margin-bottom:10px; }
.css-credits-label { display:block; font-size:18px; opacity:.9; }
.css-vip-badge { display:inline-block; background:rgba(255,255,255,.2); padding:12px 24px; border-radius:50px; font-size:20px; font-weight:600; border:2px solid rgba(255,255,255,.3); }
.css-buy-credits-link { background:#fff !important; color:#667eea !important; border:none !important; padding:12px 30px !important; font-size:16px !important; font-weight:600 !important; border-radius:50px !important; text-decoration:none !important; display:inline-block; transition:all .3s ease; box-shadow:0 4px 15px rgba(0,0,0,.2); cursor:pointer; text-align:center !important; }
.css-buy-credits-link:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.3); color:#5568d3 !important; }

/* =============================================================================
   Ticket Form Widget
   ============================================================================= */
.css-ticket-form-widget { background:#fff; padding:30px; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.1); margin-bottom:30px; }
.css-ticket-form-widget h2 { margin:0 0 8px 0; font-size:24px; font-weight:600; color:#2c3e50; }
.css-ticket-cost-notice { margin:0 0 24px 0; font-size:14px; color:#856404; background:#fff3cd; border:1px solid #ffd97d; border-radius:6px; padding:10px 14px; display:inline-block; }
.css-inline-ticket-form p { margin-bottom:20px; }
.css-inline-ticket-form label { display:block; margin-bottom:8px; font-weight:600; color:#2c3e50; font-size:14px; text-transform:uppercase; letter-spacing:.4px; }
.css-inline-ticket-form input[type="text"],
.css-inline-ticket-form textarea,
.css-inline-ticket-form select { width:100%; padding:12px 14px; font-size:16px; border:2px solid #ddd; border-radius:8px; box-sizing:border-box; transition:border-color .25s ease; font-family:inherit; color:#2c3e50; background:#fff; }
.css-inline-ticket-form input[type="text"]:focus,
.css-inline-ticket-form textarea:focus,
.css-inline-ticket-form select:focus { outline:none; border-color:#667eea; box-shadow:0 0 0 3px rgba(102,126,234,.12); }
.css-inline-ticket-form textarea { resize:vertical; min-height:160px; line-height:1.6; }
#css-ticket-form-message { margin-top:16px; padding:15px 20px; border-radius:8px; font-size:15px; line-height:1.6; }

/* =============================================================================
   Tickets List Widget
   ============================================================================= */
.css-tickets-widget { background:#fff; padding:30px; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.1); }
.css-tickets-widget h2 { margin:0 0 20px 0; font-size:24px; font-weight:600; color:#2c3e50; }
.css-new-ticket-btn { margin-bottom:20px; }

/* =============================================================================
   Tickets Table
   ============================================================================= */
.css-tickets-table { width:100%; border-collapse:collapse; margin-top:20px; }
.css-tickets-table th, .css-tickets-table td { padding:15px; text-align:left; border-bottom:1px solid #e0e0e0; }
.css-tickets-table th { background:#f8f9fa; font-weight:600; color:#2c3e50; font-size:13px; text-transform:uppercase; letter-spacing:.5px; }
.css-tickets-table tbody tr { transition:background .2s ease; }
.css-tickets-table tbody tr:hover { background:#f8f9fa; }

/* =============================================================================
   Status Badges
   ============================================================================= */
.css-status-badge { display:inline-block; padding:6px 14px; border-radius:20px; font-size:12px; font-weight:600; text-transform:capitalize; white-space:nowrap; }
.css-status-open { background:#d4edda; color:#155724; }
.css-status-estimated         { background:#fff3cd; color:#856404; }
.css-status-estimate_declined { background:#f8d7da; color:#842029; }
.css-status-in_progress, .css-status-in-progress { background:#cce5ff; color:#004085; }
.css-status-completed { background:#d1e7dd; color:#0f5132; }
.css-status-closed { background:#e2e3e5; color:#383d41; }

/* =============================================================================
   Modals
   ============================================================================= */
.css-modal { display:none; position:fixed; z-index:100000; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,.6); backdrop-filter:blur(4px); }
.css-modal-content { background:#fff; margin:3% auto; padding:40px; border-radius:16px; width:80%; max-width:700px; box-shadow:0 20px 60px rgba(0,0,0,.3); position:relative; animation:cssSlideIn .3s ease-out; }
@keyframes cssSlideIn { from { opacity:0; transform:translateY(-40px); } to { opacity:1; transform:translateY(0); } }
.css-modal-close { color:#999; position:absolute; right:20px; top:20px; font-size:32px; font-weight:bold; cursor:pointer; line-height:20px; transition:color .2s ease; }
.css-modal-close:hover { color:#333; }
.css-modal-content h2 { margin:0 0 30px 0; font-size:28px; font-weight:700; color:#2c3e50; }
.css-ticket-detail { max-width:900px; }

/* =============================================================================
   Buy Credits Modal
   ============================================================================= */
.css-credit-packages { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:30px 0; }
.css-package { background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; padding:25px; border-radius:12px; text-align:center; cursor:pointer; transition:all .3s ease; border:3px solid transparent; display:flex; flex-direction:column; align-items:center; }
.css-package:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(102,126,234,.4); }
.css-package h3 { font-size:20px; font-weight:700; margin:0 0 8px 0; color:#fff; }
.css-package-price { font-size:30px; font-weight:800; margin:0 0 18px 0; color:#fff; }
/* Buy Now overrides — white pill on the purple card */
.css-package .csspro-btn-primary { background:#fff !important; color:#667eea !important; box-shadow:0 2px 8px rgba(0,0,0,.15) !important; width:100% !important; display:block !important; border-radius:50px !important; }
.css-package .csspro-btn-primary:hover { background:#f0f0ff !important; color:#5568d3 !important; transform:translateY(-1px) !important; box-shadow:0 4px 12px rgba(0,0,0,.2) !important; }
.css-custom-amount { background:#f8f9fa; padding:25px; border-radius:12px; margin:30px 0; }
.css-custom-amount h3 { margin:0 0 14px 0; font-size:18px; font-weight:600; color:#2c3e50; }

/* The quantity input — styled via class so .css-below-min can override it */
.css-credits-qty-input {
    display: block;
    width: 120px;
    padding: 10px 12px;
    margin-top: 8px;
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    background: #ffffff;
    border: 2px solid #667eea;
    border-radius: 8px;
    box-sizing: border-box;
    transition: color .2s ease, border-color .2s ease;
}
.css-credits-qty-input:focus {
    outline: none;
    border-color: #4f5dd4;
    box-shadow: 0 0 0 2px rgba(102,126,234,.2);
}

/* Grey out when below the configured minimum.
   !important overrides any other rule including theme styles. */
.css-credits-qty-input.css-below-min {
    color: #c0c0c0 !important;
    border-color: #e0a0a0 !important;
    background: #fff8f8 !important;
}

/* Warning message shown when amount is below configured minimum */
.css-min-purchase-warning {
    color: #b32d2e;
    background: #fdf2f2;
    border: 1px solid #f5c6c6;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    margin: 8px 0 4px 0;
}


.css-total-price { margin-top:15px; font-size:20px; font-weight:600; color:#2c3e50; }
.css-total-price span { color:#667eea; font-size:28px; }
.css-payment-methods { margin:30px 0; }
.css-payment-methods h3 { margin:0 0 20px 0; font-size:20px; font-weight:600; color:#2c3e50; }
.css-pay-stripe, #css-paypal-button-container { margin:10px 0; }
#css-stripe-card-element { margin-top:20px; padding:20px; background:#f8f9fa; border-radius:8px; }
#card-element { padding:12px; background:#fff; border:2px solid #ddd; border-radius:8px; margin-bottom:15px; }
#card-errors { color:#d63638; margin:10px 0; font-size:14px; }

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


/* =============================================================================
   Ticket detail (inside modal)
   ============================================================================= */
.css-ticket-view h3 { margin:0 0 16px 0; font-size:22px; font-weight:700; color:#2c3e50; line-height:1.3; }
.css-reply { padding:15px 20px; margin-bottom:12px; border-radius:8px; border-left:4px solid #667eea; background:#f8f9fa; line-height:1.6; }
.css-reply.admin-reply { border-left-color:#28a745; background:#e8f5e9; }

/* =============================================================================
   TOS Agreement Box
   ============================================================================= */
.css-tos-agreement-box { background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.35); border-radius:10px; padding:22px 24px; margin-top:20px; }
.css-tos-title { color:#fff; font-size:16px; font-weight:700; margin:0 0 6px 0; }
.css-tos-intro { color:rgba(255,255,255,.85); font-size:14px; margin:0 0 18px 0; }
.css-tos-field { margin-bottom:16px; }
.css-tos-label { display:block; color:rgba(255,255,255,.9); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.css-tos-input { width:100%; padding:11px 14px; font-size:15px; border:2px solid rgba(255,255,255,.4); border-radius:8px; background:rgba(255,255,255,.15); color:#fff; font-family:inherit; box-sizing:border-box; transition:border-color .2s ease,background .2s ease; }
.css-tos-input::placeholder { color:rgba(255,255,255,.5); font-size:14px; }
.css-tos-input:focus { outline:none; border-color:#fff; background:rgba(255,255,255,.25); }
.css-tos-input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(1); opacity:.7; cursor:pointer; }
.css-tos-check-row { display:flex; align-items:flex-start; gap:12px; margin:18px 0 20px 0; }
.css-tos-checkbox { flex-shrink:0; width:20px; height:20px; margin-top:2px; cursor:pointer; accent-color:#fff; }
.css-tos-check-label { color:rgba(255,255,255,.92); font-size:14px; line-height:1.55; cursor:pointer; }
.css-tos-submit-btn { display:inline-block; background:#fff; color:#667eea; border:none; padding:12px 24px; font-size:15px; font-weight:700; border-radius:50px; cursor:pointer; transition:opacity .2s ease,transform .2s ease; box-shadow:0 4px 14px rgba(0,0,0,.2); }
.css-tos-submit-btn:not(:disabled):hover { opacity:.92; transform:translateY(-2px); }
.css-tos-submit-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.css-tos-error { color:#ffe0e0; background:rgba(220,50,50,.35); border:1px solid rgba(255,100,100,.5); border-radius:6px; padding:10px 14px; margin-top:12px; font-size:14px; font-weight:600; }

/* =============================================================================
   Attachment Picker (file upload widget)
   ============================================================================= */
.css-attachment-picker { margin-top:8px; }
.css-attach-label { display:inline-flex; align-items:center; gap:8px; cursor:pointer; margin-bottom:6px; }
.css-attach-btn { display:inline-block; padding:9px 18px; background:#f0f0f0; border:2px solid #ddd; border-radius:8px; font-size:14px; font-weight:600; color:#2c3e50; transition:all .2s ease; white-space:nowrap; }
.css-attach-btn:hover { background:#e8e8e8; border-color:#667eea; color:#667eea; }
.css-attach-input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.css-attach-hint { display:block; font-size:12px; color:#888; margin-bottom:8px; }
.css-attach-list { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.css-attach-row { display:flex; align-items:center; gap:10px; padding:8px 12px; background:#f8f9fa; border:1px solid #e0e0e0; border-radius:6px; font-size:14px; }
.css-attach-row.css-attach-uploading { background:#fff9e6; border-color:#ffd97d; }
.css-attach-row.css-attach-done { background:#f0fff4; border-color:#c3e6cb; }
.css-attach-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#2c3e50; font-weight:500; }
.css-attach-size { color:#888; font-size:12px; white-space:nowrap; }
.css-attach-status { color:#856404; font-size:12px; font-style:italic; }
.css-attach-remove { background:none; border:none; color:#b32d2e; font-size:18px; line-height:1; cursor:pointer; padding:0 4px; flex-shrink:0; }
.css-attach-remove:hover { color:#7a1f1f; }

/* =============================================================================
   Attachment list (inside ticket detail)
   ============================================================================= */
.css-attachment-list { margin:12px 0; padding:12px 16px; background:#f8f9fa; border:1px solid #e0e0e0; border-radius:8px; }
.css-attachment-list-title { margin:0 0 8px 0; font-size:13px; font-weight:700; color:#2c3e50; text-transform:uppercase; letter-spacing:.4px; }
.css-attachment-item { display:flex; align-items:center; gap:10px; padding:5px 0; border-bottom:1px solid #f0f0f0; }
.css-attachment-item:last-child { border-bottom:none; }
.css-attachment-link { flex:1; color:#667eea; text-decoration:none; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.css-attachment-link:hover { text-decoration:underline; color:#5568d3; }
.css-attachment-size { color:#888; font-size:12px; }
.css-attachment-delete { background:none; border:none; color:#b32d2e; font-size:16px; cursor:pointer; padding:0 4px; flex-shrink:0; }
.css-attachment-delete:hover { color:#7a1f1f; }

/* =============================================================================
   Pagination
   ============================================================================= */
.css-pagination { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:20px; padding-top:16px; border-top:1px solid #e0e0e0; }
.css-page-btn { display:inline-block; min-width:36px; height:36px; line-height:34px; text-align:center; padding:0 10px; border:2px solid #ddd; border-radius:6px; background:#fff; color:#667eea; font-weight:600; font-size:14px; text-decoration:none; transition:all .2s ease; }
.css-page-btn:hover { background:#667eea; border-color:#667eea; color:#fff; }
.css-page-btn.css-page-active { background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); border-color:#667eea; color:#fff; cursor:default; pointer-events:none; }
.css-page-info { margin-left:8px; font-size:14px; color:#666; }

/* =============================================================================
   Responsive
   ============================================================================= */
@media screen and (max-width: 768px) {
    .css-customer-dashboard { padding:15px; }
    .css-credits-widget, .css-ticket-form-widget, .css-tickets-widget { padding:20px; }
    .css-credits-amount { font-size:48px; }
    .css-modal-content { width:95%; padding:25px; margin:8% auto; }
    .css-credit-packages { grid-template-columns:1fr; }
    .css-modal-content { padding:20px 16px !important; max-height:92vh; overflow-y:auto; }
    .css-package { padding:20px 16px; }
    .csspro-btn-block { padding:12px 16px !important; }
    .css-tickets-table { font-size:14px; }
    .css-tickets-table th, .css-tickets-table td { padding:10px 8px; }
    .css-login-box { padding:28px 22px; }
    .css-ticket-view h3 { font-size:18px; }
}

@media screen and (max-width: 480px) {
    .css-tickets-table thead { display:none; }
    .css-tickets-table tr { display:block; margin-bottom:16px; border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; }
    .css-tickets-table td { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #f0f0f0; padding:10px 14px; }
    .css-tickets-table td::before { content:attr(data-label); font-weight:600; font-size:12px; color:#888; text-transform:uppercase; letter-spacing:.4px; margin-right:10px; white-space:nowrap; }
    .css-tickets-table td:last-child { border-bottom:none; }
}

/* =============================================================================
   Welcome Message Box
   ============================================================================= */
.css-welcome-box {
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    border-color: #e8e8e8;
    padding: 3%;
    margin-bottom: 25px;
    background-color: #f6f7f7;
    font-size: 16px;
}

.css-welcome-intro {
    font-weight: bold;
}

.css-welcome-item {
    margin: 0 0 8px 0;
    line-height: 1.6;
}

.css-welcome-item:last-child {
    margin-bottom: 0;
}

/* Decline estimate button */
.css-decline-btn {
    background: transparent;
    color: #b32d2e;
    border: 2px solid #b32d2e;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.css-decline-btn:hover {
    background: #b32d2e;
    color: #fff;
}

.css-decline-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}