/* Shared Kroqueta branding for the Blade admin and seller panels. */
:root {
    --ink: #241821;
    --muted: #71646d;
    --line: #eee1e8;
    --paper: #fff9fc;
    --green: #fa0469;
    --green-dark: #ce0052;
    --mint: #ffe8f1;
    --yellow: #fdcb11;
    --shadow: 0 18px 50px rgba(74, 18, 47, .09);
}

.sidebar {
    background: #2b1121;
    color: #fff5f9;
}

.brand-logo {
    display: block;
    width: fit-content;
    max-width: 100%;
    line-height: 0;
}

.brand-logo img {
    display: block;
    width: 210px;
    max-width: 100%;
    height: auto;
}

.sidebar-label,
.sidebar-foot small,
.sidebar-shortcuts-label {
    color: #efaccc;
}

.sidebar nav a,
.sidebar-group > summary {
    color: #f4cedf;
}

.sidebar nav a:hover,
.sidebar nav a.active,
.sidebar-group > summary:hover,
.sidebar-group > summary.active {
    background: #68304d;
    color: #fff;
}

.sidebar nav a.active,
.sidebar-group > summary.active {
    box-shadow: inset 3px 0 var(--yellow);
}

.sidebar-foot,
.sidebar-shortcuts {
    border-color: #65334e;
}

.sidebar-group-items {
    border-left-color: #65334e;
}

.avatar {
    background: #ffe4ef;
}

.button.primary,
.button.primary:hover {
    color: #fff;
}

.button.secondary {
    background: var(--yellow);
    color: var(--ink);
}

.button.secondary:hover {
    background: #e7b900;
}

.metric-icon.green {
    background: #ffe5ef;
    color: #ce0052;
}

.metric-icon.yellow {
    background: #fff5ce;
    color: #725600;
}

.tabs a.active {
    background: var(--mint);
    color: var(--green-dark);
}

.page-actions .tabs,
.section-counter,
.wallet-settings-note {
    background: #fff0f6;
    color: var(--green-dark);
}

.editorial-actions {
    justify-content: flex-end;
}

.editorial-toolbar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.editorial-toolbar label {
    width: min(240px, 100%);
}

.editorial-toolbar .button {
    min-height: 41px;
}

@media (max-width: 600px) {
    .editorial-actions .row-actions,
    .editorial-toolbar label,
    .editorial-toolbar .button {
        width: 100%;
    }

    .editorial-actions .row-actions .button {
        flex: 1;
        white-space: normal;
        text-align: center;
    }
}

.payment-intro {
    background: linear-gradient(125deg, #fff 55%, #fff0f6);
}

.marketing-intro {
    background: #fff0f6;
}

.marketing-intro-badge {
    border-color: #f4db75;
    background: #fff8dc;
    color: #705500;
}

.payment-method-card.is-active {
    border-color: #fa92bd;
    box-shadow: 0 10px 34px rgba(250, 4, 105, .09);
}

.payment-switch.primary-switch:has(input:checked),
.finance-switch:has(input:checked),
.wallet-direction-option:has(input:checked) {
    border-color: #fa92bd;
    background: #fff0f6;
    box-shadow: 0 0 0 3px rgba(250, 4, 105, .08);
}

.finance-queue-intro {
    background: radial-gradient(circle at 90% 10%, rgba(250, 4, 105, .11), transparent 30%), #fff;
}

.customer-wallet-head {
    background: #fff7fa;
}

.customer-wallet-icon {
    box-shadow: 0 8px 20px rgba(250, 4, 105, .18);
}

.wallet-credit-widget:not(.low) {
    border-color: #f7c6d9;
    background: linear-gradient(135deg, #fffafd, #fff0f6);
    box-shadow: 0 7px 22px rgba(250, 4, 105, .07);
}

.wallet-credit-widget:not(.low):hover {
    border-color: #fa92bd;
    box-shadow: 0 9px 25px rgba(250, 4, 105, .12);
}

/* Compact, shared record rows for plans, rates and seller stores. */
.record-panel {
    min-width: 0;
    overflow: hidden;
}

.record-list {
    display: grid;
    min-width: 0;
}

.record-row {
    display: grid;
    grid-template-columns: minmax(155px, 1.3fr) minmax(88px, .65fr) minmax(145px, 1fr) minmax(70px, .55fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.record-row:last-child {
    border-bottom: 0;
}

.record-row:hover {
    background: #fffafd;
}

.record-row__main,
.record-row__field {
    min-width: 0;
}

.record-row__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.record-row__title h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.3;
}

.record-row__main p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.record-row__field {
    display: grid;
    align-content: center;
    gap: 3px;
    overflow-wrap: anywhere;
}

.record-row__field > small {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.record-row__field > strong,
.record-row__field > span {
    color: var(--ink);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
}

.record-row__field > strong span {
    color: var(--muted);
    font-size: 10px;
}

.record-row__editor {
    min-width: 0;
    border: 0;
}

.record-row__editor > summary {
    display: flex;
    width: fit-content;
    margin: 0 0 0 auto;
    list-style: none;
    white-space: nowrap;
}

.record-row__editor > summary::-webkit-details-marker {
    display: none;
}

.record-row__editor[open] {
    grid-column: 1 / -1;
    width: 100%;
}

.record-row__editor[open] > form {
    margin-top: 14px;
    padding: 18px 0 2px;
    border-top: 1px solid var(--line);
}

.record-row__editor .inline-form,
.record-row__editor .marketing-edit-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.store-record-row {
    grid-template-columns: minmax(190px, 1.3fr) minmax(110px, .8fr) minmax(150px, 1fr) minmax(120px, .8fr) minmax(80px, .5fr) auto;
}

.store-row__description {
    overflow: hidden;
    max-width: 36ch;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-record-row .store-badges {
    justify-content: flex-start;
}

.record-row__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    white-space: nowrap;
}

@media (max-width: 1400px) {
    .subscription-plans-layout,
    .marketing-admin-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .subscription-plans-layout .form-card,
    .marketing-admin-layout .form-card {
        position: static;
    }
}

@media (max-width: 1150px) {
    .store-record-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .record-row,
    .store-record-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
        padding: 16px;
    }

    .record-row__main {
        grid-column: 1 / -1;
    }

    .record-row__editor,
    .record-row__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .record-row__editor > summary {
        margin-left: 0;
    }

    .record-row__editor .inline-form,
    .record-row__editor .marketing-edit-form {
        grid-template-columns: 1fr;
    }

}

input:focus,
select:focus,
textarea:focus,
.finance-settings-card textarea:focus,
.finance-review-form textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(250, 4, 105, .13);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--green);
}

.login-body {
    background: #2b1121;
}

.login-story {
    background:
        radial-gradient(circle at 80% 20%, rgba(253, 203, 17, .25), transparent 33%),
        linear-gradient(145deg, #2b1121, #8d164c);
}

.login-story .eyebrow,
.login-story small {
    color: #ffd563;
}

.login-story p {
    color: #fbe4ee;
}

.login-panel {
    background: var(--paper);
}

@media (max-width: 760px) {
    .sidebar .brand-logo img {
        width: 184px;
    }
}