/*
 * Shop Manager: Getting Started page (includes/Admin/GettingStarted.php).
 * Loaded only on that page; every rule is scoped to .wpkin-sm-gs. Same tokens
 * and green as the Account page (account.css), laid out like Image Hover's
 * Getting Started page.
 */

.wpkin-sm-gs {
    --sm-brand: #2fb44b;
    --sm-brand-strong: #248c3a;
    --sm-brand-soft: #eaf7ed;
    --sm-brand-line: #b5e3bf;
    --sm-brand-ring: rgba(47, 180, 75, 0.28);
    --sm-ink: #101828;
    --sm-ink-2: #475467;
    --sm-ink-3: #667085;
    --sm-line: #eaecf0;
    --sm-line-2: #d0d5dd;
    --sm-surface: #ffffff;
    --sm-warn: #b54708;
    --sm-warn-soft: #fffaeb;
    --sm-pro: #6941c6;
    --sm-pro-soft: #f4f3ff;
    --sm-radius: 14px;
    --sm-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);

    max-width: 1260px;
    margin: 24px auto 48px;
    padding: 0 20px 0 0;
    color: var(--sm-ink);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.wpkin-sm-gs *,
.wpkin-sm-gs *::before,
.wpkin-sm-gs *::after {
    box-sizing: border-box;
}

.wpkin-sm-gs h1,
.wpkin-sm-gs h2,
.wpkin-sm-gs h3,
.wpkin-sm-gs p {
    margin: 0;
    padding: 0;
    color: inherit;
}

.wpkin-sm-gs a:focus-visible {
    outline: 2px solid var(--sm-brand);
    outline-offset: 2px;
    box-shadow: none;
}

/* No notices on this page, as on Account (Admin\Account::remove_other_notices()
   removes other plugins' and WordPress' notices on the server; these catch any
   added later or by script). Nothing is done to a license here, so Freemius'
   own success and info messages (such as "Premium plugin version was
   successfully activated") are hidden too; only its errors show. */

#wpbody-content > .notice:not(.fs-notice),
#wpbody-content > .updated:not(.fs-notice),
#wpbody-content > .error:not(.fs-notice),
#wpbody-content > .update-nag,
.wpkin-sm-gs > .notice:not(.fs-notice),
.wpkin-sm-gs > .updated:not(.fs-notice),
.wpkin-sm-gs > .error:not(.fs-notice),
.wpkin-sm-gs > .update-nag,
#wpbody-content div.fs-notice:not(.error) {
    display: none !important;
}

/* Buttons and links */

.wpkin-sm-gs .wpkin-sm-gs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wpkin-sm-gs .wpkin-sm-gs-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    border: 1px solid var(--sm-line-2);
    border-radius: 8px;
    box-shadow: var(--sm-shadow);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wpkin-sm-gs .wpkin-sm-gs-btn .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.wpkin-sm-gs .wpkin-sm-gs-btn.is-primary {
    color: #ffffff;
    background: var(--sm-brand);
    border-color: var(--sm-brand);
}

.wpkin-sm-gs .wpkin-sm-gs-btn.is-primary:hover {
    color: #ffffff;
    background: var(--sm-brand-strong);
    border-color: var(--sm-brand-strong);
}

.wpkin-sm-gs .wpkin-sm-gs-btn.is-secondary,
.wpkin-sm-gs .wpkin-sm-gs-btn.is-small {
    color: var(--sm-ink);
    background: var(--sm-surface);
}

.wpkin-sm-gs .wpkin-sm-gs-btn.is-secondary:hover,
.wpkin-sm-gs .wpkin-sm-gs-btn.is-small:hover {
    color: var(--sm-brand-strong);
    border-color: var(--sm-brand-line);
}

.wpkin-sm-gs .wpkin-sm-gs-btn.is-small {
    flex: none;
    min-height: 34px;
    padding: 6px 14px;
    font-size: 13px;
}

.wpkin-sm-gs .wpkin-sm-gs-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--sm-brand-strong);
    text-decoration: none;
}

.wpkin-sm-gs .wpkin-sm-gs-link:hover {
    text-decoration: underline;
}

/* Hero: text and buttons on the left, the tour video on the right */

.wpkin-sm-gs .wpkin-sm-gs-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    align-items: center;
    gap: 32px;
    padding: 32px;
    margin-bottom: 24px;
    background:
        radial-gradient(560px 220px at 100% 0%, rgba(47, 180, 75, 0.16), transparent 70%),
        linear-gradient(135deg, #ffffff 0%, #f5fbf6 100%);
    border: 1px solid var(--sm-line);
    border-radius: var(--sm-radius);
    box-shadow: var(--sm-shadow);
}

.wpkin-sm-gs .wpkin-sm-gs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 6px;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sm-brand-strong);
    background: var(--sm-brand-soft);
    border: 1px solid var(--sm-brand-line);
    border-radius: 999px;
}

.wpkin-sm-gs .wpkin-sm-gs-eyebrow img {
    display: block;
    border-radius: 5px;
}

.wpkin-sm-gs .wpkin-sm-gs-title {
    margin-bottom: 10px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.wpkin-sm-gs .wpkin-sm-gs-lead {
    max-width: 560px;
    margin-bottom: 22px;
    font-size: 15px;
    color: var(--sm-ink-2);
}

.wpkin-sm-gs .wpkin-sm-gs-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0b1220;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16);
}

.wpkin-sm-gs .wpkin-sm-gs-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Cards and section heads */

.wpkin-sm-gs .wpkin-sm-gs-card {
    padding: 24px;
    margin-bottom: 24px;
    background: var(--sm-surface);
    border: 1px solid var(--sm-line);
    border-radius: var(--sm-radius);
    box-shadow: var(--sm-shadow);
}

.wpkin-sm-gs .wpkin-sm-gs-section {
    margin-bottom: 24px;
}

.wpkin-sm-gs .wpkin-sm-gs-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.wpkin-sm-gs .wpkin-sm-gs-h2 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.wpkin-sm-gs .wpkin-sm-gs-note {
    margin: -6px 0 14px;
    color: var(--sm-ink-2);
}

/* Your setup */

.wpkin-sm-gs .wpkin-sm-gs-progress {
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sm-brand-strong);
    background: var(--sm-brand-soft);
    border-radius: 999px;
}

.wpkin-sm-gs .wpkin-sm-gs-checklist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wpkin-sm-gs .wpkin-sm-gs-check {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid var(--sm-line);
}

.wpkin-sm-gs .wpkin-sm-gs-check:first-child {
    border-top: 0;
    padding-top: 4px;
}

.wpkin-sm-gs .wpkin-sm-gs-check-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 18px;
    color: var(--sm-warn);
    background: var(--sm-warn-soft);
    border-radius: 50%;
}

.wpkin-sm-gs .wpkin-sm-gs-check-icon.dashicons-marker {
    color: var(--sm-ink-3);
    background: #f2f4f7;
}

.wpkin-sm-gs .wpkin-sm-gs-check.is-done .wpkin-sm-gs-check-icon {
    color: #ffffff;
    background: var(--sm-brand);
}

.wpkin-sm-gs .wpkin-sm-gs-check-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wpkin-sm-gs .wpkin-sm-gs-check-text strong {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
}

.wpkin-sm-gs .wpkin-sm-gs-check-text span {
    color: var(--sm-ink-2);
    overflow-wrap: anywhere;
}

.wpkin-sm-gs .wpkin-sm-gs-tag {
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--sm-ink-3);
    background: #f2f4f7;
    border-radius: 999px;
}

/* Three steps */

.wpkin-sm-gs .wpkin-sm-gs-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.wpkin-sm-gs .wpkin-sm-gs-step {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 20px;
    background: #fafbfc;
    border: 1px solid var(--sm-line);
    border-radius: 12px;
}

.wpkin-sm-gs .wpkin-sm-gs-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-weight: 700;
    color: #ffffff;
    background: var(--sm-brand);
    border-radius: 50%;
}

.wpkin-sm-gs .wpkin-sm-gs-step h3 {
    font-size: 15px;
    font-weight: 700;
}

.wpkin-sm-gs .wpkin-sm-gs-step p {
    flex: 1 1 auto;
    color: var(--sm-ink-2);
}

.wpkin-sm-gs .wpkin-sm-gs-step-link {
    display: inline-flex;
    gap: 6px;
    font-weight: 600;
    color: var(--sm-brand-strong);
    text-decoration: none;
}

.wpkin-sm-gs .wpkin-sm-gs-step-link:hover {
    text-decoration: underline;
}

/* Everything Shop Manager does */

.wpkin-sm-gs .wpkin-sm-gs-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.wpkin-sm-gs .wpkin-sm-gs-feature {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: var(--sm-surface);
    border: 1px solid var(--sm-line);
    border-radius: 12px;
    box-shadow: var(--sm-shadow);
}

.wpkin-sm-gs .wpkin-sm-gs-feature-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wpkin-sm-gs .wpkin-sm-gs-feature-head h3 {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 700;
}

.wpkin-sm-gs .wpkin-sm-gs-feature-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 18px;
    color: var(--sm-brand-strong);
    background: var(--sm-brand-soft);
    border-radius: 10px;
}

.wpkin-sm-gs .wpkin-sm-gs-pro {
    flex: none;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sm-pro);
    background: var(--sm-pro-soft);
    border-radius: 999px;
}

.wpkin-sm-gs .wpkin-sm-gs-feature p {
    flex: 1 1 auto;
    color: var(--sm-ink-2);
}

.wpkin-sm-gs .wpkin-sm-gs-feature-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 10px;
    border-top: 1px solid var(--sm-line);
}

.wpkin-sm-gs .wpkin-sm-gs-feature-links a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sm-brand-strong);
    text-decoration: none;
}

.wpkin-sm-gs .wpkin-sm-gs-feature-links a:hover {
    text-decoration: underline;
}

.wpkin-sm-gs .wpkin-sm-gs-feature-links .dashicons,
.wpkin-sm-gs .wpkin-sm-gs-help-link .dashicons {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

/* Help and resources */

.wpkin-sm-gs .wpkin-sm-gs-help {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.wpkin-sm-gs .wpkin-sm-gs-help-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 20px;
    color: var(--sm-ink);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpkin-sm-gs .wpkin-sm-gs-help-card:hover {
    color: var(--sm-ink);
    border-color: var(--sm-brand-line);
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
}

.wpkin-sm-gs .wpkin-sm-gs-help-card h3 {
    font-size: 15px;
    font-weight: 700;
}

.wpkin-sm-gs .wpkin-sm-gs-help-card p {
    flex: 1 1 auto;
    color: var(--sm-ink-2);
}

.wpkin-sm-gs .wpkin-sm-gs-help-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sm-brand-strong);
}

/* Plan */

.wpkin-sm-gs .wpkin-sm-gs-plan {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #ffffff 0%, var(--sm-pro-soft) 100%);
    border: 1px solid #d9d6fe;
    border-radius: var(--sm-radius);
}

.wpkin-sm-gs .wpkin-sm-gs-plan.is-pro {
    background: linear-gradient(135deg, #ffffff 0%, var(--sm-brand-soft) 100%);
    border-color: var(--sm-brand-line);
}

.wpkin-sm-gs .wpkin-sm-gs-plan-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 20px;
    color: var(--sm-pro);
    background: #ffffff;
    border-radius: 50%;
    box-shadow: var(--sm-shadow);
}

.wpkin-sm-gs .wpkin-sm-gs-plan.is-pro .wpkin-sm-gs-plan-icon {
    color: var(--sm-brand-strong);
}

.wpkin-sm-gs .wpkin-sm-gs-plan-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wpkin-sm-gs .wpkin-sm-gs-plan-text span {
    color: var(--sm-ink-2);
}

/* Smaller screens */

@media (max-width: 1100px) {
    .wpkin-sm-gs .wpkin-sm-gs-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .wpkin-sm-gs .wpkin-sm-gs-help {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 782px) {
    .wpkin-sm-gs {
        margin-top: 12px;
        padding-right: 10px;
    }

    .wpkin-sm-gs .wpkin-sm-gs-hero,
    .wpkin-sm-gs .wpkin-sm-gs-card {
        padding: 20px;
    }

    .wpkin-sm-gs .wpkin-sm-gs-title {
        font-size: 24px;
    }

    .wpkin-sm-gs .wpkin-sm-gs-steps,
    .wpkin-sm-gs .wpkin-sm-gs-help {
        grid-template-columns: minmax(0, 1fr);
    }

    .wpkin-sm-gs .wpkin-sm-gs-check {
        flex-wrap: wrap;
    }

    .wpkin-sm-gs .wpkin-sm-gs-check .wpkin-sm-gs-btn {
        margin-left: 44px;
    }

    .wpkin-sm-gs .wpkin-sm-gs-plan {
        flex-wrap: wrap;
    }
}