/* My Account → Store Connections
 *
 * Inherits the ceeprinto theme's tokens where present so this screen reads as
 * part of the site rather than a bolted-on plugin. Every token carries the
 * plugin's original value as a fallback, so it still renders standalone.
 *
 * Layout note: the theme puts .woocommerce-account .woocommerce on a CSS grid
 * with minmax(0, 1fr) for the content column, which is what lets the tables
 * below scroll internally instead of stretching the page.
 */

.cp-account {
    --cp-border: var(--line, #e2e2e2);
    --cp-muted: var(--ink-2, #6b6b6b);
    --cp-faint: var(--muted, #9a9690);
    --cp-accent: var(--accent, #b23c3c);
    --cp-accent-ink: var(--accent-ink, #b23c3c);
    --cp-good: var(--good, #3f8a4d);
    --cp-bg: var(--bg, #faf7f2);
    font-size: 15px;
    color: var(--ink, inherit);
}

/* ── Tabs ───────────────────────────────────────────────────── */
/* Eight labels need ~950px, which never fit the content column, so the strip
   used to sit permanently side-scrolled with the active tab often out of view.
   Pills that wrap show every tab at every width instead. */
.cp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}

.cp-tab {
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--cp-muted);
    background: transparent;
    border: 1px solid transparent;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.cp-tab:hover {
    color: var(--ink, inherit);
    background: var(--cp-bg);
}

.cp-tab.is-active {
    color: #fff;
    font-weight: 600;
    background: var(--cp-accent);
    border-color: var(--cp-accent);
}

.cp-tab:focus-visible {
    outline: 2px solid var(--cp-accent);
    outline-offset: 2px;
}

/* Sub-tabs for a group (Orders, Developer) with more than one member. */
.cp-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: -12px 0 20px;
    padding-left: 4px;
}

.cp-subtab {
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12.5px;
    color: var(--cp-muted);
    border-bottom: 2px solid transparent;
}

.cp-subtab:hover {
    color: var(--ink, inherit);
}

.cp-subtab.is-active {
    color: var(--cp-accent);
    border-bottom-color: var(--cp-accent);
    font-weight: 600;
}

/* ── Panel ──────────────────────────────────────────────────── */
.cp-tab-panel {
    background: #fff;
    border: 1px solid var(--cp-border);
    border-radius: 16px;
    padding: 24px;
}

/* ── Get Started + Products ─────────────────────────────────── */
/* Custom step badges — keep titles unnumbered so we never show "1. 1." */
.cp-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: cp-step;
}

.cp-steps > li {
    position: relative;
    margin: 0 0 1.5rem;
    padding: 0 0 0 2.75rem;
}

.cp-steps > li:last-child {
    margin-bottom: 0;
}

.cp-steps > li::before {
    counter-increment: cp-step;
    content: counter(cp-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cp-bg);
    border: 1px solid var(--cp-border);
    color: var(--cp-muted);
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.cp-steps > li.is-done::before {
    background: var(--cp-good);
    border-color: var(--cp-good);
    color: #fff;
}

.cp-steps > li.is-current::before {
    background: var(--cp-accent);
    border-color: var(--cp-accent);
    color: #fff;
}

.cp-steps > li > strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 28px;
}

.cp-steps > li.is-done > strong {
    color: var(--cp-good);
}

.cp-steps > li > .cp-hint {
    margin: 0 0 10px;
}

/* Install + key action rows: two CTAs side by side when space allows. */
.cp-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    margin: 4px 0 10px;
}

.cp-cta-disabled {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 260px;
}

.cp-cta-disabled .cee-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.cp-publish-form.cp-form .cp-field {
    max-width: 520px;
}

.cp-publish-form select,
.cp-publish-form input[type='number'] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    color: var(--ink, inherit);
}

.cp-publish-form select:focus,
.cp-publish-form input[type='number']:focus {
    border-color: var(--cp-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 16, 12, 0.1);
}

.cp-publish-designs {
    display: grid;
    gap: 8px;
    margin: 4px 0 0;
}

.cp-publish-design {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--cp-border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.cp-publish-design:hover:not(.is-listed) {
    border-color: color-mix(in srgb, var(--cp-accent) 35%, var(--cp-border));
}

.cp-publish-design.is-listed {
    opacity: 0.65;
    cursor: default;
}

.cp-publish-design img {
    border-radius: 6px;
    object-fit: cover;
    flex: none;
}

.cp-publish-form .cee-btn {
    margin-top: 4px;
}

/* Primary actions that still use .cp-button (matrix / listings links). */
.cp-account a.cp-button,
.cp-account button.cp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--cp-accent);
    background: var(--cp-accent);
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.cp-account a.cp-button:hover,
.cp-account button.cp-button:hover {
    opacity: 0.9;
    color: #fff;
}

.cp-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

/* Specificity under .cp-account so theme/Woo .button and the later
   .cp-inline-form { display: inline-flex } cannot widen Swap past the cell. */
.cp-account .cp-matrix-cell {
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.cp-account .cp-matrix-cell__preview {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--cp-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-account .cp-matrix-cell__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cp-account .cp-matrix-cell__preview-empty {
    font-size: 12px;
    color: var(--cp-faint);
    text-align: center;
    padding: 8px;
}

.cp-account .cp-matrix-cell__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    min-width: 0;
}

.cp-account .cp-matrix-cell__meta strong {
    flex: 1 1 auto;
    min-width: 0;
}

.cp-account .cp-matrix-cell__meta .cp-hint {
    flex: 1 1 100%;
    margin: 0;
}

.cp-account .cp-matrix-cell__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.cp-account .cp-matrix-cell .cp-inline-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 6px;
    margin: 0;
}

.cp-account .cp-matrix-cell .cp-inline-form + .cp-inline-form {
    margin-left: 0;
}

.cp-account .cp-matrix-cell .cp-inline-form select,
.cp-account .cp-matrix-cell .cp-inline-form .cp-button,
.cp-account .cp-matrix-cell .cp-inline-form .cp-button--danger,
.cp-account .cp-matrix-cell .cp-inline-form button,
.cp-account .cp-matrix-cell__actions > .cp-button,
.cp-account .cp-matrix-cell__actions > .cp-button--danger,
.cp-account .cp-matrix-cell__actions > a.cp-button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.cp-account .cp-matrix-cell .cp-inline-form select {
    padding: 8px 10px;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 13.5px;
    color: var(--ink, inherit);
}

.cp-badge {
    display: inline-block;
    width: fit-content;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}

.cp-badge--shared {
    background: #e8f5eb;
    color: var(--cp-good);
}

.cp-badge--custom {
    background: #f7ecec;
    color: var(--cp-accent);
}

.cp-button--small {
    font-size: 13px;
    padding: 6px 10px;
}

/* Sections inside a panel are separated by a rule rather than another box —
   nested cards were eating 16-24px of width per side. */
.cp-tab-panel h3 {
    font-family: var(--display, inherit);
    margin: 28px 0 8px;
    padding-top: 24px;
    border-top: 1px solid var(--cp-border);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.cp-tab-panel h3:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.cp-tab-panel > p:first-of-type {
    margin-top: 0;
}

/* ── Notices ────────────────────────────────────────────────── */
.cp-notice {
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 10px;
    border-left: 3px solid var(--cp-border);
    background: var(--cp-bg);
    font-size: 13.5px;
    line-height: 1.5;
}

.cp-notice--success {
    border-left-color: var(--cp-good);
    background: rgba(20, 120, 74, 0.06);
}

.cp-notice--error {
    border-left-color: var(--cp-accent-ink);
    background: rgba(255, 16, 12, 0.06);
    color: var(--cp-accent-ink);
}

/* ── One-time secret ────────────────────────────────────────── */
/* Tinted band rather than a dashed card, so it is not a box inside a box. */
.cp-secret {
    padding: 16px;
    margin-bottom: 24px;
    border-radius: 12px;
    background: var(--cp-bg);
    border: 0;
}

.cp-secret h3 {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.cp-secret__value {
    display: block;
    padding: 10px 12px;
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 13px;
    word-break: break-all;
    user-select: all;
}

/* Action columns use this on their <th> so the header is announced but not
   drawn. The theme does not define it and relying on WooCommerce core for the
   plugin's own markup would be fragile. */
.cp-account .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Tables ─────────────────────────────────────────────────── */
/* Scroll container: below ~1024 even the widened column cannot hold six
   columns of IDs, URLs and tokens without crushing them. */
.cp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 8px;
}

.cp-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.cp-table th,
.cp-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--cp-border);
    vertical-align: middle;
}

.cp-table th {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cp-faint);
    white-space: nowrap;
}

.cp-table tr:last-child td {
    border-bottom: 0;
}

.cp-table__actions {
    text-align: right;
    white-space: nowrap;
}

/* Shopify GIDs, signing secrets, shop domains and webhook URLs have no natural
   break opportunities; without this one cell takes the width of five. */
.cp-table td code,
.cp-break {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cp-table code {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 12.5px;
}

/* Long raw error text from a failed intake. */
.cp-error-detail {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 320px;
    font-size: 13px;
    color: var(--cp-muted);
}

/* Scope pills — replaces a comma-joined string of up to eight scopes. */
.cp-scopes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 150px;
}

/* ── Product mapping ────────────────────────────────────────── */
.cp-mapping__product {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 180px;
}

.cp-mapping__product img {
    width: 44px;
    height: 44px;
    flex: none;
    object-fit: contain;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    background: var(--cp-bg);
}

.cp-mapping__name {
    font-weight: 600;
    line-height: 1.3;
}

.cp-table--mapping input[type='text'] {
    max-width: 220px;
}

.cp-table--mapping .cp-hint {
    display: block;
    margin-top: 4px;
}

/* ── Badges & hints ─────────────────────────────────────────── */
.cp-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
    background: rgba(20, 120, 74, 0.1);
    color: var(--cp-good);
}

.cp-badge--off {
    background: var(--cp-bg);
    color: var(--cp-muted);
}

.cp-hint {
    color: var(--cp-muted);
    font-size: 13px;
}

/* ── Forms ──────────────────────────────────────────────────── */
.cp-form .cp-field,
.cp-form .cee-field {
    display: block;
    margin-bottom: 16px;
    max-width: 480px;
}

/* Field labels only. .cp-check labels are also direct children of
   fieldset.cp-field, and they must stay flex rows, not stacked blocks. */
.cp-form .cp-field > label:not(.cp-check) {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cp-muted);
}

.cp-field .cp-hint {
    display: block;
    margin-top: 6px;
}

.cp-form input[type='text'],
.cp-form input[type='url'],
.cp-form input[type='email'],
.cp-form select,
.cp-inline-form input[type='text'],
.cp-table input[type='text'] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    color: var(--ink, inherit);
}

.cp-form input:focus,
.cp-form select:focus,
.cp-inline-form input:focus,
.cp-table input:focus {
    border-color: var(--cp-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 16, 12, 0.1);
}

/* Inputs living inside a table cell need to be denser than form inputs. */
.cp-inline-form input[type='text'],
.cp-table input[type='text'] {
    padding: 8px 10px;
    font-size: 13.5px;
}

/* Tinted band, not another bordered card. */
.cp-form fieldset {
    border: 0;
    border-radius: 12px;
    background: var(--cp-bg);
    padding: 14px 16px;
    margin: 0 0 16px;
}

.cp-form legend {
    padding: 0;
    margin-bottom: 8px;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cp-faint);
}

.cp-check {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    font-weight: 400;
}

.cp-check span {
    color: var(--cp-muted);
    font-size: 13px;
}

/* Was display:block with only margin:0, so the two forms in the Stores action
   cell stacked instead of sitting side by side. */
.cp-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.cp-inline-form + .cp-inline-form {
    margin-left: 6px;
}

/* ── Buttons ────────────────────────────────────────────────── */
.cp-button--danger {
    background: transparent;
    color: var(--cp-accent-ink);
    border: 1px solid var(--cp-border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 150ms ease;
}

.cp-button--danger:hover {
    border-color: var(--cp-accent-ink);
}

/* ── Code blocks ────────────────────────────────────────────── */
.cp-code {
    padding: 12px 16px;
    margin: 0 0 16px;
    background: var(--cp-bg);
    border: 1px solid var(--cp-border);
    border-radius: 10px;
    overflow-x: auto;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 13px;
    user-select: all;
}

/* Empty states sit inside the panel card, so they must not be a second card. */
.cp-tab-panel .cee-empty-state--panel {
    background: transparent;
}

/* ── Tablet ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .cp-tab-panel {
        padding: 20px;
    }
}

/* ── Mobile: tables become stacked cards ────────────────────── */
/* A six-column table cannot be usefully scrolled on a phone. Each row becomes
   its own card and each cell is labelled from the column header, which the PHP
   supplies as data-label on every <td>. */
@media (max-width: 768px) {
    .cp-tab-panel {
        padding: 16px;
        border-radius: 14px;
    }

    .cp-tabs {
        gap: 4px;
        margin-bottom: 20px;
    }

    .cp-table-wrap {
        overflow-x: visible;
    }

    .cp-table,
    .cp-table tbody,
    .cp-table tr,
    .cp-table td {
        display: block;
        width: 100%;
    }

    /* Headers are conveyed by data-label instead; keep them for screen readers. */
    .cp-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .cp-table tr {
        border: 1px solid var(--cp-border);
        border-radius: 12px;
        padding: 6px 14px;
        margin-bottom: 12px;
        background: #fff;
    }

    .cp-table tr:last-child {
        margin-bottom: 0;
    }

    .cp-table td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        padding: 8px 0;
        border-bottom: 1px solid var(--cp-border);
        text-align: right;
    }

    .cp-table tr td:last-child,
    .cp-table tr:last-child td {
        border-bottom: 0;
    }

    .cp-table td::before {
        content: attr(data-label);
        flex: none;
        font-family: var(--mono, ui-monospace, monospace);
        font-size: 10.5px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--cp-faint);
        text-align: left;
    }

    /* Cells with no label (action columns) get the full row width. */
    .cp-table td:not([data-label])::before,
    .cp-table td[data-label='']::before {
        content: none;
    }

    .cp-table td.cp-table__actions {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 12px;
        text-align: left;
        white-space: normal;
    }

    .cp-table__actions .cp-inline-form,
    .cp-table__actions .cp-inline-form + .cp-inline-form {
        margin-left: 0;
    }

    /* Right-aligned values need to be able to wrap back under their label. */
    .cp-table td > .cp-scopes,
    .cp-table td > .cp-mapping__product {
        justify-content: flex-end;
        min-width: 0;
    }

    .cp-error-detail {
        max-width: none;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .cp-table--mapping input[type='text'],
    .cp-form input[type='text'],
    .cp-form input[type='url'],
    .cp-form input[type='email'],
    .cp-form select {
        max-width: none;
    }

    .cp-form .cp-field,
    .cp-form .cee-field {
        max-width: none;
    }
}

@media (max-width: 420px) {
    .cp-tab {
        padding: 7px 12px;
        font-size: 13px;
    }

    .cp-tab-panel {
        padding: 14px;
    }

    /* Label above value once there is no room for both on one line. */
    .cp-table td {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        text-align: left;
    }

    .cp-table td::before {
        text-align: left;
    }

    .cp-table td > .cp-scopes,
    .cp-table td > .cp-mapping__product {
        justify-content: flex-start;
    }
}

.cp-jobs {
    margin: 24px 0 0;
    padding: 16px;
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    background: var(--cp-bg);
}

.cp-jobs h4 {
    margin: 0 0 12px;
}

.cp-job {
    margin: 0 0 12px;
}

.cp-job.is-current {
    outline: 2px solid var(--cp-accent);
    outline-offset: 4px;
    border-radius: 8px;
}

.cp-job__head {
    font-size: 14px;
}

.cp-job__items {
    margin: 6px 0 0 1.2em;
    color: var(--cp-muted);
}