/* ================================================================
   PORTAL CLOUD 9 — GETTING STARTED PAGE  (v8.6.4 redesign)
   ================================================================ */

/* ── Page scaffold ───────────────────────────────────────────── */
.pc9-gs-wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 1160px;
    margin: 24px 0 60px;
    color: #1e293b;
}

/* ── Hero banner ─────────────────────────────────────────────── */
.pc9-gs-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0c4a6e 100%);
    border-radius: 20px;
    padding: 48px 52px;
    margin-bottom: 36px;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.pc9-gs-hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 360px; height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30,144,255,.25) 0%, transparent 70%);
    pointer-events: none;
}
.pc9-gs-hero::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -60px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16,185,129,.15) 0%, transparent 70%);
    pointer-events: none;
}
.pc9-gs-hero-inner { position: relative; z-index: 1; }
.pc9-gs-hero h1 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 10px;
    letter-spacing: -0.5px;
    line-height: 1.25;
}
.pc9-gs-hero p {
    margin: 0 0 20px;
    font-size: 15px;
    color: rgba(255,255,255,.75);
    max-width: 620px;
    line-height: 1.7;
}
.pc9-gs-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.pc9-gs-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
}
.pc9-gs-badge-green  { background: rgba(16,185,129,.2); color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); }
.pc9-gs-badge-blue   { background: rgba(30,144,255,.2); color: #93c5fd; border: 1px solid rgba(30,144,255,.3); }
.pc9-gs-badge-amber  { background: rgba(245,158,11,.2); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }
.pc9-gs-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    padding: 10px 20px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
    backdrop-filter: blur(8px);
}
.pc9-gs-hero-link:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ── Section wrapper ─────────────────────────────────────────── */
.pc9-gs-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px 36px;
    margin-bottom: 28px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.pc9-gs-section-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px;
    padding-bottom: 14px;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pc9-gs-section-subtitle {
    font-size: 13.5px;
    color: #64748b;
    margin: 0 0 24px;
    line-height: 1.6;
}

/* ── Steps grid ──────────────────────────────────────────────── */
.pc9-gs-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.pc9-gs-step {
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px 20px;
    position: relative;
    transition: border-color .2s, box-shadow .2s;
}
.pc9-gs-step:hover {
    border-color: #1e90ff;
    box-shadow: 0 4px 16px rgba(30,144,255,.1);
}
.pc9-gs-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e90ff, #0c4a6e);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 12px;
}
.pc9-gs-step h4 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}
.pc9-gs-step p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
}
.pc9-gs-step a { color: #1e90ff; text-decoration: none; font-weight: 600; }
.pc9-gs-step a:hover { text-decoration: underline; }

/* ── Feature grid ────────────────────────────────────────────── */
.pc9-gs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.pc9-gs-card {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px;
    background: #fafafa;
    transition: border-color .2s, box-shadow .2s;
}
.pc9-gs-card:hover {
    border-color: #1e90ff;
    box-shadow: 0 4px 14px rgba(30,144,255,.09);
    background: #fff;
}
.pc9-gs-card-icon {
    font-size: 22px;
    margin-bottom: 10px;
    display: block;
}
.pc9-gs-card h4 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}
.pc9-gs-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pc9-gs-card ul li {
    font-size: 13px;
    color: #475569;
    padding: 5px 0 5px 18px;
    position: relative;
    line-height: 1.5;
}
.pc9-gs-card ul li::before {
    content: '✓';
    position: absolute; left: 0;
    color: #10b981;
    font-weight: 700;
    font-size: 11px;
    top: 7px;
}

/* ── Role cards ──────────────────────────────────────────────── */
.pc9-gs-roles { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.pc9-gs-role {
    border-radius: 14px;
    padding: 22px 24px;
    border: 1px solid transparent;
}
.pc9-gs-role-admin  { background: rgba(245,158,11,.05); border-color: rgba(245,158,11,.25); }
.pc9-gs-role-mgr    { background: rgba(139,92,246,.05); border-color: rgba(139,92,246,.25); }
.pc9-gs-role-cust   { background: rgba(14,165,233,.05); border-color: rgba(14,165,233,.25); }
.pc9-gs-role-staff  { background: rgba(16,185,129,.05); border-color: rgba(16,185,129,.25); }
.pc9-gs-role-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.pc9-gs-role-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pc9-gs-role-admin .pc9-gs-role-dot  { background: #f59e0b; }
.pc9-gs-role-mgr   .pc9-gs-role-dot  { background: #8b5cf6; }
.pc9-gs-role-cust  .pc9-gs-role-dot  { background: #0ea5e9; }
.pc9-gs-role-staff .pc9-gs-role-dot  { background: #10b981; }
.pc9-gs-role h4 { margin: 0; font-size: 15px; font-weight: 700; color: #0f172a; }
.pc9-gs-role-desc { font-size: 13px; color: #64748b; margin: 0 0 12px; line-height: 1.5; }
.pc9-gs-role-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pc9-gs-pill {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 50px;
    background: rgba(30,144,255,.08);
    color: #1e40af;
    border: 1px solid rgba(30,144,255,.15);
    font-weight: 500;
}
.pc9-gs-role-admin  .pc9-gs-pill { background: rgba(245,158,11,.1);  color: #92400e; border-color: rgba(245,158,11,.2); }
.pc9-gs-role-mgr   .pc9-gs-pill { background: rgba(139,92,246,.1); color: #4c1d95; border-color: rgba(139,92,246,.2); }
.pc9-gs-role-cust  .pc9-gs-pill { background: rgba(14,165,233,.1);  color: #0c4a6e; border-color: rgba(14,165,233,.2); }
.pc9-gs-role-staff .pc9-gs-pill { background: rgba(16,185,129,.1);  color: #064e3b; border-color: rgba(16,185,129,.2); }
.pc9-gs-role-note {
    margin-top: 10px;
    font-size: 12px;
    color: #64748b;
    font-style: italic;
}

/* ── Info / info-callout box ─────────────────────────────────── */
.pc9-gs-info {
    background: rgba(30,144,255,.05);
    border-left: 4px solid #1e90ff;
    border-radius: 0 10px 10px 0;
    padding: 14px 18px;
    margin: 16px 0 0;
    font-size: 13px;
    color: #334155;
    line-height: 1.6;
}
.pc9-gs-info strong { color: #0f172a; }
.pc9-gs-warn {
    background: rgba(245,158,11,.06);
    border-left: 4px solid #f59e0b;
    border-radius: 0 10px 10px 0;
    padding: 14px 18px;
    margin: 12px 0 0;
    font-size: 13px;
    color: #78350f;
    line-height: 1.6;
}

/* ── Code / shortcode ────────────────────────────────────────── */
.pc9-gs-code {
    display: inline-block;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 2px 9px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 13px;
    color: #0f766e;
}
.pc9-gs-code-block {
    background: #0f172a;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 12px 0;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 12.5px;
    color: #7dd3fc;
    line-height: 1.8;
    overflow-x: auto;
}
.pc9-gs-code-block .cmt { color: #64748b; }
.pc9-gs-code-block .str { color: #86efac; }

/* ── Shortcodes layout ───────────────────────────────────────── */
.pc9-gs-sc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 8px;
}
.pc9-gs-sc-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
    background: #fff;
}
.pc9-gs-sc-card h4 { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: #0f172a; }
.pc9-gs-sc-card p  { margin: 6px 0 0; font-size: 12.5px; color: #64748b; line-height: 1.5; }

/* ── Support cards ───────────────────────────────────────────── */
.pc9-gs-support {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 8px;
}
.pc9-gs-support-card {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px 18px;
    text-align: center;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.pc9-gs-support-card:hover {
    border-color: #1e90ff;
    box-shadow: 0 4px 14px rgba(30,144,255,.09);
}
.pc9-gs-support-card .dashicons {
    font-size: 28px;
    width: 28px; height: 28px;
    color: #1e90ff;
    margin-bottom: 10px;
    display: block;
    margin: 0 auto 10px;
}
.pc9-gs-support-card h4 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #0f172a; }
.pc9-gs-support-card p  { margin: 0 0 14px; font-size: 12.5px; color: #64748b; }
.pc9-gs-support-card .button { font-size: 13px; }

/* ── License box ─────────────────────────────────────────────── */
.pc9-gs-license {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 22px 24px;
    font-size: 13px;
    color: #475569;
    line-height: 1.8;
    margin-top: 8px;
}
.pc9-gs-license strong { color: #0f172a; }
.pc9-gs-license a { color: #1e90ff; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 782px) {
    .pc9-gs-hero { padding: 32px 24px; }
    .pc9-gs-hero h1 { font-size: 22px; }
    .pc9-gs-section { padding: 24px 20px; }
    .pc9-gs-steps, .pc9-gs-grid, .pc9-gs-sc-grid, .pc9-gs-support { grid-template-columns: 1fr; }
}

/* Force white on hero headings — overrides WP admin default h1 color */
.pc9-gs-hero h1,
.pc9-gs-hero .pc9-gs-hero-inner h1 {
    color: #ffffff !important;
}