/* PK Core — Plugin-specific styles (design system base is in pk-design-system.css) */

.pk-profile-wrap,
.pk-taxonomy-wrap { margin: 20px 0; }

.pk-section-title {
    font-size: 1.4em;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--pk-primary, #6366f1);
    padding-bottom: 8px;
    color: var(--pk-text, #1e293b);
    font-family: var(--pk-font-sans, 'Inter', sans-serif);
}

/* ── Auth pages (Login / Register) — modern centered card ─────────────
   Eduma's default page template reserves a Bootstrap col-sm-9/col-sm-3
   sidebar-right split on #main.site-main regardless of whether the
   sidebar actually has widgets — that reserved-but-empty ~25% is exactly
   what pushed the form off to one side. `pk-auth-page-body` is added by
   PK_Core_Shortcodes::add_auth_page_body_class() (shortcode-detection
   based, not slug/ID, so it survives the page being renamed/duplicated).
   #main is specific enough to beat the .col-sm-9 Bootstrap class. ── */
body.pk-auth-page-body #main.site-main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
/* .row is Eduma's Bootstrap grid row (negative side margins) — with the
   sidebar column gone, its own left/right margins can still nudge the
   full-width #main off-center by a few pixels. Neutralize on this page only. */
body.pk-auth-page-body #main.site-main + .widget-area,
body.pk-auth-page-body .site-content .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.pk-auth-page {
    display: flex;
    justify-content: center;
    padding: 40px 16px;
}

.pk-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--pk-surface, #fff);
    border: 1px solid var(--pk-border, #e2e8f0);
    border-radius: var(--pk-radius-lg, 16px);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    padding: 32px 28px;
}
.pk-auth-card .pk-section-title {
    text-align: center;
    border-bottom: none;
    padding-bottom: 0;
    font-size: 1.6em;
    font-weight: 700;
}

/* ── Registration / Login Form ─────────────────────────── */
.pk-form { max-width: 100%; }
.pk-form-row { margin-bottom: 16px; }
.pk-form-row label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--pk-text, #1e293b); font-size: .92em; }
.pk-form-row-half { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) {
    .pk-form-row-half { grid-template-columns: 1fr; }
}
.pk-form-row-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pk-checkbox-label { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: .9em; color: var(--pk-text-secondary, #64748b); cursor: pointer; }
.pk-checkbox-label input { margin: 0; }
.pk-forgot-link { font-size: .9em; color: var(--pk-primary, #6366f1); text-decoration: none; }
.pk-forgot-link:hover { text-decoration: underline; }
.pk-required { color: var(--pk-danger, #ef4444); }
.pk-form-message { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.pk-form-message.pk-success { background: var(--pk-success-bg, #ecfdf5); color: #065f46; border: 1px solid var(--pk-success, #10b981); }
.pk-form-message.pk-error { background: var(--pk-danger-bg, #fef2f2); color: #991b1b; border: 1px solid var(--pk-danger, #ef4444); }
.pk-phone-otp-row { display: flex; gap: 8px; }
.pk-phone-otp-row input { flex: 1; }
.pk-phone-otp-row .pk-btn { white-space: nowrap; }

/* ── Optional fields (collapsed by default — keeps the register form short) ── */
.pk-form-optional { margin: 4px 0 16px; }
.pk-form-optional summary {
    cursor: pointer;
    font-size: .88em;
    color: var(--pk-text-secondary, #64748b);
    font-weight: 600;
    padding: 4px 0;
}
.pk-form-optional[open] summary { margin-bottom: 8px; }

.pk-auth-switch {
    text-align: center;
    margin: 20px 0 0;
    font-size: .92em;
    color: var(--pk-text-secondary, #64748b);
}
.pk-auth-switch a { color: var(--pk-primary, #6366f1); font-weight: 600; text-decoration: none; margin-left: 4px; }
.pk-auth-switch a:hover { text-decoration: underline; }

/* ── Profile Card ─────────────────────────────────────── */
.pk-profile-card { display: flex; gap: 20px; align-items: flex-start; }
.pk-avatar-img { border-radius: 50%; }
.pk-profile-info h3 { margin: 0 0 8px; font-size: 1.2em; color: var(--pk-text, #1e293b); }
.pk-profile-email, .pk-profile-username { color: var(--pk-text-secondary, #64748b); font-size: .9em; margin: 4px 0; }

/* ── Avatar upload / profile edit / referral / complete cards ─────── */
.pk-avatar-block { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pk-avatar-upload-label { cursor: pointer; }
.pk-avatar-status { font-size: .8em; min-height: 1.2em; }
.pk-profile-loading { color: var(--pk-text-secondary, #64748b); font-size: .9em; margin: 12px 0; }
.pk-referral-card, .pk-complete-card, .pk-edit-card { margin-top: 20px; max-width: 520px; }
.pk-referral-code-display { font-size: 1.3em; font-weight: 700; letter-spacing: 1px; color: var(--pk-primary, #6366f1); background: var(--pk-primary-bg, #eef2ff); padding: 10px 14px; border-radius: 6px; display: inline-block; margin: 0 0 10px; }
.pk-referral-note { font-size: .85em; color: var(--pk-text-secondary, #64748b); margin-top: 8px; }

/* ── Taxonomy Grid ────────────────────────────────────── */
.pk-taxonomy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.pk-taxonomy-card { text-align: center; }
.pk-taxonomy-name { margin: 0 0 8px; font-size: 1em; color: var(--pk-primary, #6366f1); }
.pk-taxonomy-count { font-size: .85em; color: var(--pk-text-muted, #94a3b8); }

/* ── State messages ───────────────────────────────────── */
.pk-already-logged-in { color: var(--pk-text-secondary, #64748b); font-style: italic; }

/* ── Social Login ──────────────────────────────────────── */
.pk-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
    color: var(--pk-text-muted, #94a3b8);
    font-size: 14px;
    max-width: 480px;
}
.pk-divider::before,
.pk-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--pk-border, #e2e8f0);
}

.pk-social-login {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 480px;
}

.pk-btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    background: #fff;
    border: 2px solid var(--pk-border, #e2e8f0);
    border-radius: var(--pk-radius, 8px);
    color: var(--pk-text, #1e293b);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--pk-transition, 200ms);
}
.pk-btn-google:hover { border-color: #4285f4; box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2); }
.pk-btn-google:disabled { opacity: .6; cursor: not-allowed; }

.pk-btn-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    background: var(--pk-primary, #6366f1);
    border: none;
    border-radius: var(--pk-radius, 8px);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--pk-transition, 200ms);
}
.pk-btn-phone:hover { background: var(--pk-primary-dark, #4f46e5); transform: translateY(-1px); }
.pk-btn-phone:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ── Loading Spinner (register / social-login buttons) ───── */
.pk-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pk-spin 0.6s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}
@keyframes pk-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .pk-spinner { animation-duration: 1.2s; }
}

/* ── Phone OTP Modal ──────────────────────────────────── */
.pk-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.pk-modal-content {
    background: #fff;
    padding: 32px;
    border-radius: var(--pk-radius-lg, 16px);
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.pk-modal-close {
    float: right;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--pk-text-muted, #94a3b8);
}
.pk-modal-content .pk-input {
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--pk-border, #e2e8f0);
    border-radius: var(--pk-radius, 8px);
    font-size: 15px;
    box-sizing: border-box;
}
.pk-modal-content .pk-btn { width: 100%; }
.pk-error { color: var(--pk-danger, #ef4444); font-size: 14px; margin-top: 12px; }