/**
 * Customer portal page styles.
 * Scoped to .portal-page — nothing here touches any other template.
 * Uses only the theme's existing CSS variables (assets/css/main.css).
 */

.portal-page {
    padding-bottom: 64px;
}

/* ---------------------------------------------------- indexable intro */

.portal-hero {
    /* The site header is position:fixed (~78px tall) and this page has no .hero block, so the
       old 64px top padding left the H1 sliced in half behind the header (seen live on both
       portals). Clear the header the same way .hero does. */
    padding: 128px 0 40px;
    text-align: center;
}

.portal-hero h1 {
    margin-bottom: 16px;
}

.portal-hero .portal-hero-subtitle {
    max-width: 720px;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 1.0625rem;
    line-height: 1.65;
}

.portal-intro {
    max-width: 860px;
    margin: 0 auto 48px;
}

.portal-intro-body p {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 16px;
}

.portal-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 28px;
    list-style: none;
    padding: 0;
}

.portal-benefit {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px;
}

.portal-benefit h3 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.portal-benefit p {
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}

.portal-faq {
    max-width: 860px;
    margin: 0 auto 48px;
}

.portal-faq-item {
    border-bottom: 1px solid var(--border-color);
    padding: 18px 0;
}

.portal-faq-item h3 {
    font-size: 1.0625rem;
    margin-bottom: 8px;
}

.portal-faq-item p {
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
}

/* ------------------------------------------------------------- states */

.portal-app {
    max-width: 960px;
    margin: 0 auto;
}

.portal-loading {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}

.portal-unavailable {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    padding: 32px 24px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-secondary);
    color: var(--text-muted);
}

/* --------------------------------------------------------- login card */

/*
 * The portal is a state machine (loading / login / dashboard) driven by the [hidden]
 * attribute. `.portal-login-container { display: flex }` is a class rule, so it BEAT the
 * UA stylesheet's `[hidden] { display: none }` — after a successful login the dashboard
 * appeared while the login card stayed on screen. Scoped, and it must win over any
 * display rule below, so !important is the point rather than a patch.
 */
.portal-app [hidden] {
    display: none !important;
}

.portal-login-container {
    display: flex;
    justify-content: center;
}

.portal-login-card {
    width: 100%;
    max-width: 460px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 32px 28px;
}

.portal-login-header {
    text-align: center;
    margin-bottom: 24px;
}

.portal-login-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
}

.portal-login-title {
    font-size: 1.375rem;
    margin-bottom: 6px;
}

.portal-login-subtitle {
    color: var(--text-muted);
    font-size: 0.9375rem;
    margin: 0;
}

.portal-form-group {
    margin-bottom: 18px;
}

.portal-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.portal-input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
    color: var(--text-heading);
    font-size: 0.9375rem;
    font-weight: 500;
}

.portal-input:focus {
    outline: none;
    border-color: var(--accent-primary, #3b82f6);
}

.portal-input-help {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.portal-error-message {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.12);
    color: var(--accent-red, #ef4444);
    font-size: 0.9375rem;
}

.portal-submit-btn {
    width: 100%;
    justify-content: center;
}

.portal-login-footer,
.portal-forgot-code {
    margin-top: 18px;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--text-muted);
}

.portal-forgot-code summary {
    cursor: pointer;
}

.portal-forgot-code p {
    margin-top: 10px;
}

/* ---------------------------------------------------------- dashboard */

.portal-dash-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.portal-welcome {
    font-size: 1.5rem;
    margin: 0;
    flex: 1 1 auto;
}

.portal-account-code {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.portal-section {
    margin-bottom: 40px;
}

.portal-section-title {
    font-size: 1.25rem;
    margin-bottom: 6px;
}

.portal-section-subtitle {
    color: var(--text-muted);
    font-size: 0.9375rem;
    margin-bottom: 20px;
}

.portal-line-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.portal-line-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 22px;
}

.portal-line-card.is-expired {
    opacity: 0.75;
}

.portal-line-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.portal-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.portal-status-badge.is-expired {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red, #ef4444);
}

.portal-line-expiry {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.portal-field {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.portal-field:last-child {
    border-bottom: none;
}

.portal-field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.portal-field-value {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.portal-field-text {
    flex: 1 1 auto;
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
    color: var(--text-heading);
}

.portal-copy-btn,
.portal-toggle-btn {
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.portal-copy-btn:hover,
.portal-toggle-btn:hover {
    color: var(--text-heading);
}

.portal-line-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.portal-order-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.portal-order-item {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9375rem;
}

.portal-order-code {
    font-weight: 600;
}

.portal-order-amount,
.portal-order-date {
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .portal-hero {
        /* The header stays fixed on mobile too (~78px tall) — 40px of top padding put the H1
           underneath it (measured live at 375px). Keep clearing the header. */
        padding: 104px 0 28px;
    }

    .portal-login-card {
        padding: 24px 20px;
    }

    .portal-line-grid {
        grid-template-columns: 1fr;
    }
}

/* Operational notices from the CRM (e.g. an undeliverable email address). Sits at the
   very top of the dashboard — it is the reason the customer may be missing messages. */
.portal-notices {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

.portal-notice {
    padding: 14px 16px;
    border: 1px solid #e2b203;
    border-left-width: 4px;
    border-radius: 10px;
    background: rgba(226, 178, 3, 0.08);
}

.portal-notice-title {
    display: block;
    margin-bottom: 4px;
}

.portal-notice-text {
    margin: 0;
}

/* Divider between the Xtream block and the M3U URLs on a line card. */
.portal-line-sep {
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    margin: 10px 0;
}