/* Frontend Customer Portal Styling - AMS CarCare */
:root {
    --portal-primary: #3b82f6;
    --portal-primary-hover: #2563eb;
    --portal-primary-text: #ffffff;
    --portal-dark: #0f172a;
    --portal-gray-light: #f8fafc;
    --portal-gray-border: #e2e8f0;
    --portal-success: #22c55e;
    --portal-warning: #f59e0b;
    --portal-danger: #ef4444;
    --portal-text-dark: #1e293b;
    --portal-text-muted: #64748b;
    --portal-gold: #d4af37;
    --portal-gold-dark: #b8860b;
    --portal-radius-lg: 20px;
    --portal-radius-md: 14px;
    --portal-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -8px rgba(15, 23, 42, 0.08);
}

/* Break out of whatever narrow content column the shortcode is embedded in
   (most themes cap post/page content at ~650-700px) so the portal can
   actually use the full page width, then re-center the real content
   inside at a sane max-width via the child-selector below. */
.ams-cc-portal-wrap {
    /* Block themes (e.g. Twenty Twenty-Five) cap the max-width of direct
       children of the content area to their "reading width" global style —
       override it explicitly, since our own rule never competes with it
       otherwise (we intentionally don't set our own max-width here). */
    max-width: none !important;
    /* Deliberately no explicit `width` here. A best-effort calc() fallback
       for width+margin together looks equivalent to negative-margin-only
       breakout, but isn't: whenever the sum is even a pixel off from the
       containing block's width (which it will be — the theme's own root
       padding isn't knowable from CSS alone), the box becomes "over
       constrained" and the browser silently discards one of our declared
       margins to resolve it (which margin gets discarded flips between
       LTR/RTL, which is exactly the kind of bug that only shows up on the
       Arabic side). Leaving width:auto sidesteps that entirely — auto
       width is the one case the spec always solves *for* width, so our
       margins (set precisely in JS below, in px, measured after layout)
       are always honored exactly. */
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 0 24px;
    font-family: 'Inter', 'Cairo', system-ui, -apple-system, sans-serif;
    color: var(--portal-text-dark);
    box-sizing: border-box;
    overflow-x: hidden;
}
.ams-cc-portal-wrap > * {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}
.ams-cc-portal-wrap[dir="rtl"] {
    font-family: 'Cairo', 'Inter', system-ui, -apple-system, sans-serif;
}
@media (max-width: 640px) {
    .ams-cc-portal-wrap {
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 0 14px;
    }
}

/* Browsers don't cascade font-family onto form controls by default (they
   get their own UA stylesheet font, historically Arial) — inherit
   explicitly so buttons/inputs/selects match the rest of the portal. */
.ams-cc-portal-wrap input,
.ams-cc-portal-wrap button,
.ams-cc-portal-wrap select,
.ams-cc-portal-wrap textarea {
    font-family: inherit;
}

/* Guest Language Toggle */
.ams-cc-portal-lang-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
}
.ams-cc-portal-lang-toggle a {
    color: var(--portal-text-muted);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.2s, background-color 0.2s;
}
.ams-cc-portal-lang-toggle a:hover {
    color: var(--portal-primary);
}
.ams-cc-portal-lang-toggle a.active {
    color: var(--portal-primary);
    background-color: var(--portal-gray-light);
}
.ams-cc-portal-lang-toggle span {
    color: var(--portal-gray-border);
}

/* Card Styling */
.ams-cc-portal-card {
    background: #ffffff;
    border: 1px solid var(--portal-gray-border);
    border-radius: var(--portal-radius-lg);
    padding: 32px;
    box-shadow: var(--portal-shadow);
}

/* Portal Login Screen */
.ams-cc-portal-login {
    max-width: 480px;
    margin: 60px auto;
    text-align: center;
}
.portal-login-header span.dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: var(--portal-primary);
    margin-bottom: 16px;
}
.portal-login-header .portal-login-logo {
    max-width: 220px;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto 16px auto;
}
.portal-login-header h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--portal-dark);
}
.portal-login-header .subtitle {
    color: var(--portal-text-muted);
    font-size: 14px;
    margin: 0 0 24px 0;
}
.portal-error-notice {
    background-color: #fef2f2;
    border: 1px solid #fee2e2;
    color: var(--portal-danger);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.portal-login-form {
    text-align: start;
}
.portal-login-form .form-group {
    margin-bottom: 20px;
}
.portal-login-form label {
    font-weight: 600;
    font-size: 14px;
    color: var(--portal-text-dark);
    margin-bottom: 8px;
    display: block;
}
.portal-login-form input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--portal-gray-border);
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
    background-color: #ffffff;
    box-sizing: border-box;
}
.portal-login-form input:focus {
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.portal-submit-btn {
    width: 100%;
    padding: 14px;
    background-color: var(--portal-primary);
    color: var(--portal-primary-text);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}
.portal-submit-btn:hover {
    background-color: var(--portal-primary-hover);
}

/* Dashboard Page */
.ams-cc-portal-dashboard {
    background: #ffffff;
    border: 1px solid var(--portal-gray-border);
    border-radius: var(--portal-radius-lg);
    padding: 36px;
    box-shadow: var(--portal-shadow);
}
@media (max-width: 640px) {
    .ams-cc-portal-dashboard {
        padding: 20px;
        border-radius: var(--portal-radius-md);
    }
}

/* Header */
.portal-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--portal-gray-border);
    padding-bottom: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.customer-welcome {
    display: flex;
    align-items: center;
    gap: 16px;
}
.customer-avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--portal-primary), #6366f1);
    color: var(--portal-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.customer-welcome-text h2 {
    font-size: 21px;
    font-weight: 700;
    color: var(--portal-dark);
    margin: 0 0 4px 0;
}
.customer-welcome-text p {
    color: var(--portal-text-muted);
    font-size: 13px;
    margin: 0;
    direction: ltr;
    text-align: start;
}
.customer-welcome-text .dot-sep {
    margin: 0 4px;
    opacity: 0.6;
}
.portal-btn-logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--portal-text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 10px;
    background-color: var(--portal-gray-light);
    border: 1px solid var(--portal-gray-border);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.portal-btn-logout:hover {
    background-color: #fee2e2;
    border-color: #fecaca;
    color: var(--portal-danger);
}

/* Tab Navigation */
.portal-tabs {
    display: inline-flex;
    gap: 4px;
    background: var(--portal-gray-light);
    border: 1px solid var(--portal-gray-border);
    border-radius: 12px;
    padding: 5px;
    margin-bottom: 30px;
    max-width: 100%;
    overflow-x: auto;
}
.portal-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--portal-text-muted);
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}
.portal-tab-btn:hover {
    color: var(--portal-primary);
}
.portal-tab-btn.active {
    color: var(--portal-primary);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 8px -2px rgba(15, 23, 42, 0.08);
}
@media (max-width: 480px) {
    .portal-tab-btn {
        padding: 8px 12px;
        font-size: 13px;
        gap: 6px;
    }
}

/* Tab Contents */
.portal-tab-content {
    display: none;
}
.portal-tab-content.active {
    display: block;
    animation: portalFadeIn 0.3s ease-in-out;
}

@keyframes portalFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Empty State */
.portal-empty-state {
    text-align: center;
    padding: 48px;
    color: var(--portal-text-muted);
}
.portal-empty-state span.dashicons {
    font-size: 40px;
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
}
.portal-empty-state p {
    font-size: 15px;
    margin: 0;
}

/* 1. Vehicles & Work Orders */
.portal-wo-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 20px;
    align-items: start;
}
.portal-wo-card {
    background: #ffffff;
    border: 1px solid var(--portal-gray-border);
    border-inline-start: 4px solid var(--portal-gray-border);
    border-radius: var(--portal-radius-md);
    padding: 22px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: box-shadow 0.2s, transform 0.2s;
}
.portal-wo-card:hover {
    box-shadow: var(--portal-shadow);
    transform: translateY(-1px);
}
.portal-wo-card:has(.status-pending) { border-inline-start-color: #f59e0b; }
.portal-wo-card:has(.status-progress) { border-inline-start-color: #3b82f6; }
.portal-wo-card:has(.status-ready) { border-inline-start-color: #16a34a; }
.portal-wo-card:has(.status-delivered) { border-inline-start-color: #94a3b8; }
.portal-wo-card:has(.status-cancelled) { border-inline-start-color: #ef4444; }
.portal-wo-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}
.wo-vehicle-details h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--portal-dark);
}
.plate-badge {
    background-color: var(--portal-gray-light);
    border: 1.5px solid var(--portal-gray-border);
    color: var(--portal-text-dark);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    display: inline-block;
    letter-spacing: 1px;
}
.wo-technician {
    margin-top: 10px;
    font-size: 13px;
    color: var(--portal-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}
.wo-technician .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}
.wo-meta {
    text-align: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.wo-id {
    font-size: 12px;
    font-weight: 700;
    color: var(--portal-text-muted);
}
.wo-status-badge {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    display: inline-block;
    white-space: nowrap;
}
.status-pending { background-color: #fef3c7; color: #d97706; }
.status-progress { background-color: #dbeafe; color: #2563eb; }
.status-ready { background-color: #dcfce7; color: #16a34a; }
.status-delivered { background-color: #f1f5f9; color: #475569; }
.status-cancelled { background-color: #fee2e2; color: #dc2626; }

/* Portal Progress Bar */
.portal-progress-container {
    margin-top: 30px;
    position: relative;
    padding-bottom: 20px;
}
.portal-progress-bar-bg {
    width: 100%;
    height: 6px;
    background-color: var(--portal-gray-border);
    border-radius: 3px;
    position: absolute;
    top: 6px;
    inset-inline-start: 0;
    z-index: 1;
}
.portal-progress-bar {
    height: 6px;
    background-color: var(--portal-success);
    border-radius: 3px;
    position: absolute;
    top: 6px;
    inset-inline-start: 0;
    z-index: 2;
    transition: width 0.4s ease;
}
.portal-progress-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 3;
    counter-reset: portal-step;
}
.step-point {
    font-size: 11px;
    font-weight: 600;
    color: var(--portal-text-muted);
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.step-point::before {
    counter-increment: portal-step;
    content: counter(portal-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 11px;
    font-weight: 700;
    color: var(--portal-text-muted);
    background-color: #ffffff;
    border: 2.5px solid var(--portal-gray-border);
    border-radius: 50%;
    margin-bottom: 8px;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.step-point.active {
    color: var(--portal-dark);
}
.step-point.active::before {
    content: '\2713';
    border-color: var(--portal-success);
    background-color: var(--portal-success);
    color: #ffffff;
}

/* Detailing Stages Checklist */
.portal-wo-steps {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px dashed var(--portal-gray-border);
}
.portal-wo-steps h4 {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: var(--portal-text-dark);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.portal-checklist-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
@media (max-width: 480px) {
    .portal-checklist-grid {
        grid-template-columns: 1fr;
    }
}
.portal-checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    opacity: 0.65;
    transition: opacity 0.2s;
}
.portal-checklist-item.is-done {
    opacity: 1;
}
.portal-checklist-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--portal-gray-light);
    color: var(--portal-text-muted);
}
.portal-checklist-item.is-done .portal-checklist-icon {
    background-color: rgba(34, 197, 94, 0.12);
    color: var(--portal-success);
}
.portal-checklist-icon .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}
.portal-checklist-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--portal-text-dark);
}
.portal-checklist-item.is-done .portal-checklist-label {
    text-decoration: line-through;
    color: var(--portal-text-muted);
}

/* 2. Invoices & Portal Table */
.portal-table-wrapper {
    overflow-x: auto;
    border-radius: var(--portal-radius-md);
    border: 1px solid var(--portal-gray-border);
}
.portal-table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
}
.portal-table th, .portal-table td {
    padding: 14px 18px;
    font-size: 14px;
    border-bottom: 1px solid var(--portal-gray-border);
}
.portal-table th {
    background-color: var(--portal-gray-light);
    color: var(--portal-text-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.portal-table tbody tr {
    transition: background-color 0.15s;
}
.portal-table tbody tr:hover {
    background-color: var(--portal-gray-light);
}
.portal-table tr:last-child td {
    border-bottom: none;
}
.status-badge-paid { color: #16a34a; font-weight: 700; }
.status-badge-partially { color: #d97706; font-weight: 700; }
.status-badge-unpaid { color: #dc2626; font-weight: 700; }

/* 3. Warranties Cards Grid */
.portal-warranties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
    align-items: start;
}
.portal-warranty-card {
    background: #ffffff;
    border: 1.5px solid var(--portal-gray-border);
    border-radius: var(--portal-radius-md);
    padding: 22px;
    position: relative;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.portal-warranty-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--portal-shadow);
}
.portal-warranty-card.cert-active {
    border-color: rgba(212, 175, 55, 0.3);
    background: linear-gradient(180deg, #ffffff 0%, rgba(212, 175, 55, 0.03) 100%);
}
.warranty-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--portal-gray-border);
    padding-bottom: 12px;
    margin-bottom: 14px;
}
.certificate-number {
    font-weight: 700;
    color: var(--portal-gold-dark);
    font-size: 16px;
}
.certificate-status-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}
.cert-active .certificate-status-badge {
    background-color: rgba(212, 175, 55, 0.15);
    color: var(--portal-gold-dark);
}
.cert-expired .certificate-status-badge {
    background-color: #fee2e2;
    color: var(--portal-danger);
}
.warranty-card-body p {
    font-size: 13px;
    margin: 0 0 8px 0;
    color: var(--portal-text-dark);
}
.coverage-preview {
    background-color: var(--portal-gray-light);
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--portal-text-muted);
    max-height: 80px;
    overflow-y: auto;
}

/* Frontend Booking Form Styling */
.ams-cc-booking-wrap {
    max-width: 800px;
}
.ams-cc-booking-card {
    background: #ffffff;
    border: 1px solid var(--portal-gray-border);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
}
@media (max-width: 640px) {
    .ams-cc-booking-card {
        padding: 20px;
        border-radius: var(--portal-radius-md);
    }
}
.form-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--portal-primary);
    text-transform: uppercase;
    border-bottom: 2px solid var(--portal-gray-light);
    padding-bottom: 8px;
    margin-top: 30px;
    margin-bottom: 20px;
}
.booking-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
}
.booking-form-row .form-group {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.booking-form-row .form-group.col-12 {
    flex: 0 0 100%;
}
.booking-form-row .form-group.col-6 {
    flex: 0 0 calc(50% - 10px);
}
.booking-form-row .form-group.col-4 {
    flex: 0 0 calc(33.333% - 13.33px);
}

@media (max-width: 768px) {
    .booking-form-row .form-group.col-6,
    .booking-form-row .form-group.col-4 {
        flex: 0 0 100%;
    }
}

.ams-cc-booking-form label {
    font-weight: 600;
    font-size: 13px;
    color: var(--portal-text-dark);
    margin-bottom: 6px;
}
.ams-cc-booking-form input:not([type="hidden"]),
.ams-cc-booking-form select,
.ams-cc-booking-form textarea {
    width: 100%;
    padding: 12px;
    border: 1.5px solid var(--portal-gray-border);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    background-color: #ffffff;
    box-sizing: border-box;
}
.ams-cc-booking-form input:not([type="hidden"]):focus,
.ams-cc-booking-form select:focus,
.ams-cc-booking-form textarea:focus {
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.ams-cc-booking-form textarea {
    min-height: 100px;
    resize: vertical;
}
.ams-cc-booking-form .required {
    color: var(--portal-danger);
}

/* Booking Success View */
.booking-success-header {
    text-align: center;
    margin-bottom: 30px;
}
.booking-success-header span.dashicons-yes-alt {
    font-size: 56px;
    width: 56px;
    height: 56px;
    color: var(--portal-success);
    margin-bottom: 16px;
}
.booking-success-header h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--portal-dark);
    margin: 0 0 8px 0;
}
.booking-success-header .subtitle {
    color: var(--portal-text-muted);
    font-size: 15px;
    margin: 0;
}
.booking-summary-box {
    background-color: var(--portal-gray-light);
    border: 1px solid var(--portal-gray-border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 30px;
}
.booking-summary-box h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 16px 0;
    color: var(--portal-dark);
    border-bottom: 1.5px solid var(--portal-gray-border);
    padding-bottom: 8px;
}
.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 600px) {
    .summary-grid {
        grid-template-columns: 1fr;
    }
}
.summary-item {
    display: flex;
    flex-direction: column;
}
.summary-item .label {
    font-size: 12px;
    font-weight: 600;
    color: var(--portal-text-muted);
    margin-bottom: 4px;
}
.summary-item .value {
    font-size: 15px;
    font-weight: 700;
    color: var(--portal-text-dark);
}
.summary-item .value.highlight {
    color: var(--portal-primary);
}
.booking-success-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
.booking-success-actions .portal-btn-whatsapp {
    width: 100%;
    max-width: 320px;
    padding: 14px;
    background-color: var(--portal-success);
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s;
}
.booking-success-actions .portal-btn-whatsapp:hover {
    background-color: #16a34a;
}
.booking-success-actions .portal-btn-new-booking {
    font-size: 14px;
    color: var(--portal-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}
.booking-success-actions .portal-btn-new-booking:hover {
    color: var(--portal-primary-hover);
    text-decoration: underline;
}

/* Interactive Time Slots Grid */
.ams-cc-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 10px;
}
.ams-cc-slot-btn {
    background: #ffffff;
    border: 1.5px solid var(--portal-gray-border);
    border-radius: 8px;
    padding: 12px 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--portal-text-dark);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
}
.ams-cc-slot-btn:hover:not(.disabled) {
    border-color: var(--portal-primary);
    background-color: rgba(59, 130, 246, 0.04);
    transform: translateY(-1px);
}
.ams-cc-slot-btn.selected {
    background-color: var(--portal-primary);
    border-color: var(--portal-primary);
    color: var(--portal-primary-text);
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2);
}
.ams-cc-slot-btn.disabled {
    background-color: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
}
.ams-cc-slot-btn.disabled .slot-status-label {
    display: block;
    font-size: 10px;
    color: var(--portal-danger);
    font-weight: 700;
    margin-top: 2px;
}



/* ======================================================
   v18.0 NEW: Portal Print Invoice Button
   ====================================================== */
.portal-print-invoice-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: var(--portal-text-dark);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}
.portal-print-invoice-btn:hover {
    background-color: var(--portal-primary);
    border-color: var(--portal-primary);
    color: var(--portal-primary-text);
    text-decoration: none;
}
.portal-print-invoice-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Pay Now button (Customer Portal invoices) */
.portal-pay-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background-color: var(--portal-primary);
    color: var(--portal-primary-text);
    border: 1px solid var(--portal-primary);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.portal-pay-btn:hover {
    background-color: var(--portal-primary-hover);
    border-color: var(--portal-primary-hover);
}
.portal-pay-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.portal-pay-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Payment result banner (redirected back from a gateway) */
.portal-payment-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}
.portal-payment-banner.is-success {
    background-color: #dcfce7;
    color: #16a34a;
}
.portal-payment-banner.is-cancelled {
    background-color: #fef3c7;
    color: #b45309;
}

/* ======================================================
   v18.0 NEW: Warranty Sessions Table
   ====================================================== */
.warranty-sessions-table {
    border-top: 1px dashed var(--portal-gray-border);
    margin-top: 18px;
    padding-top: 16px;
}
.sessions-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--portal-text-dark);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sessions-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 14px;
    background: var(--portal-primary);
    border-radius: 2px;
}

/* ======================================================
   v18.0 NEW: Book Session Button
   ====================================================== */
.portal-book-session-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    background: linear-gradient(135deg, var(--portal-primary), #6366f1);
    border: none;
    border-radius: 6px;
    color: var(--portal-primary-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.portal-book-session-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}
.portal-book-session-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* ======================================================
   v18.0 NEW: Session Booking Modal
   ====================================================== */
.portal-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.portal-modal-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 500px;
    overflow: hidden;
    animation: modalSlideUp 0.25s ease;
}
@keyframes modalSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.portal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfc;
}
.portal-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--portal-text-dark);
}
.portal-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}
.portal-modal-close:hover { color: #ef4444; }
.portal-modal-body {
    padding: 24px;
}
.portal-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
    display: flex;
    justify-content: flex-end;
}

/* Time Slot Buttons in Modal */
.portal-slot-btn {
    padding: 8px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: var(--portal-text-dark);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.portal-slot-btn:hover {
    border-color: var(--portal-primary);
    background: rgba(59, 130, 246, 0.04);
}
.portal-slot-btn.selected {
    background: var(--portal-primary);
    border-color: var(--portal-primary);
    color: var(--portal-primary-text);
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.25);
}

/* Custom alert modal (replaces native browser alert()) */
.ams-cc-alert-card {
    max-width: 400px;
}
.ams-cc-alert-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding-top: 32px;
}
.ams-cc-alert-icon {
    font-size: 44px;
    width: 44px;
    height: 44px;
}
.ams-cc-alert-icon.is-success { color: #22c55e; }
.ams-cc-alert-icon.is-error { color: #ef4444; }
.ams-cc-alert-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--portal-text-dark);
}
.ams-cc-alert-ok-btn {
    width: 100%;
    justify-content: center;
}

/* ======================================================
   v18.0 NEW: Admin CSV Export Button style fix
   ====================================================== */
.ams-cc-btn-secondary {
    background-color: transparent;
    border: 1.5px solid var(--ams-primary, #4361ee);
    color: var(--ams-primary, #4361ee);
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}
.ams-cc-btn-secondary:hover {
    background-color: var(--ams-primary, #4361ee);
    color: #ffffff;
}