/* General styles */

.hidden {
    display: none;
}

.scrollingDiv {
    overflow-x: scroll;
    white-space: nowrap;
}
/* styles for home page */

.home-metrics {
    border: 1px solid #dfe3e8;
    padding: 10px;
}
/* Styles for product-container component */

.product-container-notes {
    width: 55%;
    min-width: 260px;
    padding: 20px;
}

.product-container-totals {
    width: 40%;
    min-width: 200px;
    padding: 20px;
}

@media only screen and (max-width: 650px) {
    .product-container-notes {
        width: 100%;
    }

    .product-container-totals {
        width: 100%;
    }
}

/* Styles for product-item component */

.product-item-quantitySelector {
    max-width: 65px;
}

.itemTotal {
    min-width: 60px;
}

/* Styles for Settings components */

.product-settings {
    min-width: 630px;
}

/* Styles for Payment */

.processing-payment {
    min-width: 500px;
    min-height: 350px;
    position: relative;
}

.processing-payment-inner {
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.payment-icon .Polaris-Icon {
    width: 8rem;
    height: 8rem;
}

.StripeElement {
    height: 40px;
    padding: 10px 12px;
    width: 100%;
    color: #000000;
    background-color: white;
    border: 1px solid #c4cdd5;
    border-radius: 3px;
}

.StripeElement--focus {
    border: 2px solid #5c6ac4;
}

.StripeElement--invalid {
    border: 2px solid #fa755a;
}

.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}

/* Styles for Customers */

.popover-loading {
    padding: 10px;
}

.popover-email {
    font-size: 1.2rem;
}

/* Styles for subscription warnings */
.mt-2 {
    margin-top: 2rem;
}

.subscription-cell {
    line-height: 1.3;
    cursor: pointer;
    display: block;
    color: inherit;
    text-decoration: none;
}
.subscription-cell:hover,
.subscription-cell:focus,
.subscription-cell:visited {
    color: inherit;
    text-decoration: none;
}
.subscription-cell__primary {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.subscription-cell__slug {
    color: #8c9196;
    font-weight: 400;
    font-size: 13px;
    white-space: nowrap;
}
.subscription-cell__secondary {
    color: #6d7175;
    font-size: 12px;
    margin-top: 2px;
    margin-left: 22px;
}
.subscription-cell__issues {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 3px;
    margin-top: 2px;
    margin-left: 22px;
}
.subscription-issue-pill {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.subscription-issue-pill--critical {
    background: #fed3d1;
    color: #8e1f0b;
}
.subscription-issue-pill--warning {
    background: #ffd79d;
    color: #5b3d00;
}
.subscription-issue-pill--info {
    background: #a4e8f2;
    color: #00527c;
}
.subscription-cell__pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 10px;
    background: #e4e5e7;
    color: #202223;
    font-weight: 400;
    font-size: 12px;
}

.subscription-row-cell {
    cursor: pointer;
    white-space: nowrap;
    display: block;
    color: inherit;
    text-decoration: none;
}
.subscription-row-cell:hover,
.subscription-row-cell:focus,
.subscription-row-cell:visited {
    color: inherit;
    text-decoration: none;
}

.status-dot {
    display: inline-flex;
    width: 16px;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}
.status-dot--active {
    background: #008060;
}
.status-dot--inactive {
    background: #8c9196;
    color: white;
}
.status-dot--attention {
    background: #ffb82e;
    color: #5b3d00;
    min-width: 18px;
    padding: 0 5px;
    width: auto;
}
.status-dot--cancelled {
    background: #d72c0d;
}

.subscription-status-key {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 14px;
    color: #6d7175;
    font-size: 12px;
}
.subscription-status-key__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.subscription-table-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.subscription-table-summary__pager {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.subscription-table-footer {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr);
    align-items: center;
    gap: 12px;
}

.subscription-table-footer__left {
    justify-self: start;
}

.subscription-table-footer__center {
    justify-self: center;
}

.subscription-table-footer__right {
    justify-self: end;
}

.subscription-table-refresh-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.subscription-table-refresh-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.subscription-table-refresh-icon--spinning {
    animation: subscription-table-refresh-spin 0.8s linear infinite;
    transform-origin: center;
}

.subscription-table-refresh-icon--complete {
    color: #008060;
}

.subscription-table-refresh-icon--failed {
    color: #d72c0d;
}

@keyframes subscription-table-refresh-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 640px) {
    .subscription-table-footer {
        grid-template-columns: 1fr;
    }

    .subscription-table-footer__left,
    .subscription-table-footer__center,
    .subscription-table-footer__right {
        justify-self: stretch;
    }
}

.needs-attention-subscription-group {
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.needs-attention-subscription-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: #f6f6f7;
    border-bottom: 1px solid #dfe3e8;
}
.needs-attention-subscription-group__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}
.needs-attention-action {
    padding: 16px;
}
.needs-attention-action + .needs-attention-action {
    border-top: 1px solid #dfe3e8;
}
.needs-attention-action__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.needs-attention-action__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.needs-attention-action__guidance {
    color: #6d7175;
    margin: 8px 0 0;
}
.needs-attention-action__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #6d7175;
    margin-top: 8px;
    font-size: 13px;
}
.needs-attention-action__meta span + span::before {
    content: "•";
    margin-right: 8px;
}
.needs-attention-action__primary-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.needs-attention-action__secondary-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
}
.needs-attention-action__secondary-action {
    text-align: right;
}

/* Subscription history event card */
.event-error {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        'Liberation Mono', 'Courier New', monospace;
    font-size: 12px;
    background: #fbeae5;
    border: 1px solid #f1b4a8;
    border-radius: 4px;
    padding: 8px 10px;
    color: #8a1f11;
    white-space: pre-wrap;
    word-break: break-word;
}
.event-error__code {
    font-weight: 700;
    margin-bottom: 2px;
}
.event-error__message {
    font-weight: 400;
}

.event-metadata-table {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        'Liberation Mono', 'Courier New', monospace;
    font-size: 12px;
    border-collapse: collapse;
    width: 100%;
    background: #f6f6f7;
    border: 1px solid #e1e3e5;
    border-radius: 4px;
    overflow: hidden;
}
.event-metadata-table th,
.event-metadata-table td {
    padding: 4px 8px;
    vertical-align: top;
    border-bottom: 1px solid #e1e3e5;
    text-align: left;
}
.event-metadata-table tr:last-child th,
.event-metadata-table tr:last-child td {
    border-bottom: none;
}
.event-metadata-table__key {
    color: #6d7175;
    font-weight: 600;
    white-space: nowrap;
    width: 1%;
}
.event-metadata-table__value {
    color: #202223;
    white-space: pre-wrap;
    word-break: break-word;
}

.stripe-connection-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.stripe-connection-panel {
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    padding: 20px;
    background: #ffffff;
}

.stripe-connection-panel--highlighted {
    border-color: #635bff;
    box-shadow: inset 4px 0 0 #635bff;
}

.stripe-connection-panel--disabled {
    background: #f6f6f7;
    color: #6d7175;
}

.stripe-connection-panel__header {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: flex-start;
}

.stripe-connection-panel__title {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
}

.stripe-connection-panel__message {
    margin: 8px 0 0;
    color: #637381;
}

.stripe-connection-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.stripe-connection-pill--active {
    background: #bbe5b3;
    color: #225c20;
}

.stripe-connection-pill--error {
    background: #fed3d1;
    color: #8e1f0b;
}

.stripe-connection-pill--inactive {
    background: #dfe3e8;
    color: #454f5b;
}

.stripe-connection-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin: 16px 0 18px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    font-weight: 600;
}

.stripe-connection-status--active {
    background: #effbf4;
    color: #008060;
}

.stripe-connection-status--warning {
    background: #fff5ea;
    color: #8a6116;
}

.stripe-connection-status--error {
    background: #fff4f4;
    color: #bf0711;
}

.stripe-connection-status--inactive {
    background: #edeff2;
    color: #5c5f62;
}

.stripe-connection-status__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.stripe-connection-status--active .stripe-connection-status__icon {
    background: #008060;
}

.stripe-connection-status--warning .stripe-connection-status__icon {
    background: #d9822b;
}

.stripe-connection-status--error .stripe-connection-status__icon {
    background: #d82c0d;
}

.stripe-connection-status--inactive .stripe-connection-status__icon {
    background: #8c9196;
}

.stripe-connection-status__label {
    line-height: 20px;
}

.stripe-connection-details {
    border-top: 1px solid #dfe3e8;
}

.stripe-connection-detail {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #dfe3e8;
}

.stripe-connection-detail:last-child {
    border-bottom: 0;
}

.stripe-connection-detail span {
    color: #637381;
}

.stripe-connection-detail strong {
    text-align: right;
}

.stripe-connection-panel__actions {
    margin-top: 16px;
}

.stripe-connect-actions {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.stripe-connect-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 6px;
    background: #533afd;
    color: #ffffff;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.stripe-connect-button:hover,
.stripe-connect-button:focus {
    background: #3f2bd8;
    color: #ffffff;
    text-decoration: none;
}

.stripe-connect-button--muted {
    background: #6b7280;
    box-shadow: none;
}

.stripe-connect-button--muted:hover,
.stripe-connect-button--muted:focus {
    background: #4b5563;
}

.stripe-connect-button--disabled {
    background: #c9cccf;
    color: #ffffff;
    cursor: default;
    box-shadow: none;
}

.stripe-connect-button--disabled:hover,
.stripe-connect-button--disabled:focus {
    background: #c9cccf;
}

.stripe-connect-button__wordmark {
    display: block;
    width: 52px;
    height: auto;
}

.stripe-connect-signup {
    margin: 0;
    color: #637381;
    font-size: 13px;
}

.stripe-upgrade-help-link {
    display: inline-block;
    font-weight: 600;
}

.stripe-revert-link {
    display: block;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8c9196;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    text-align: left;
    text-decoration: underline;
}

.stripe-revert-link:hover,
.stripe-revert-link:focus {
    color: #6d7175;
}

.stripe-revert-link:disabled {
    cursor: default;
    opacity: 0.7;
}

@media (max-width: 640px) {
    .stripe-connection-panel__header,
    .stripe-connection-detail {
        flex-direction: column;
    }

    .stripe-connection-detail {
        gap: 4px;
    }

    .stripe-connection-detail strong {
        text-align: left;
        word-break: break-word;
    }
}

/* Product-map thumbnails. Polaris pins the image to all four edges of the
   frame, so wine bottles sit hard against the border. These inset it —
   padding inside the thumbnail rather than around it. The frame itself is
   drawn by Polaris on ::after, so it stays put. */
.product-map-thumb .Polaris-Thumbnail__Image {
    top: 6px;
    right: 6px;
    bottom: 6px;
    left: 6px;
    max-width: calc(100% - 12px);
    max-height: calc(100% - 12px);
}

/* Product-mapping rows whose mapping is BROKEN — a slot points at a product
   or variant that no longer exists in Shopify. The row orders nothing until
   it is fixed, so its Edit button takes Polaris's destructive red rather than
   the amber below, which is reserved for rows that still order successfully. */
.mapping-critical-edit .Polaris-Button {
    background: #d53417;
    border-color: #b02b13;
    box-shadow: none;
}

.mapping-critical-edit .Polaris-Button:hover,
.mapping-critical-edit .Polaris-Button:focus {
    background: #bf2e14;
    border-color: #b02b13;
}

.mapping-critical-edit .Polaris-Button .Polaris-Icon__Svg {
    fill: #ffffff;
}

/* Product Substitution table (products page). The thumbnail makes the
   product cell taller than the numeric cells, so centre every cell
   vertically, and give the title more breathing room than the 6px the
   shared subscription-cell gap provides. */
.product-substitution-table .Polaris-DataTable__Cell {
    vertical-align: middle;
}

.product-substitution-table .subscription-cell__primary {
    gap: 16px;
}

/* Product substitution picker. The flow requires exactly one variant, so
   the ResourceList bulk-select header ("Select all N variants" / the
   selected-count bar) is noise — hide it in this context only. */
.single-select-product-search .Polaris-ResourceList__HeaderOuterWrapper {
    display: none;
}

/* Substitution modal footer. Polaris gives modal footers a 6.4rem
   min-height sized for a bare action row; with a warning banner in the
   footer that minimum leaves dead space, so drop it for this modal only
   (scoped via :has on the footer content's class). */
.Polaris-Modal-Footer:has(.substitution-modal-footer) {
    min-height: 0;
    /* The modal dialog is a flex column; without this the footer gets
       squeezed below its own content and the banner overflows the
       footer's padding. */
    flex-shrink: 0;
}

.docs-footer {
    padding-bottom: 4rem;
}

.docs-footer .Polaris-Icon svg {
    fill: #5c6ac4;
}

.docs-footer .Polaris-Icon--hasBackdrop::before {
    background-color: #f4f5fa;
}