﻿.creator-play-scope {
    --creator-ink: #171717;
    --creator-muted: #6d7179;
    --creator-line: #e3e4e7;
    --creator-surface: #ffffff;
    --creator-soft: #f4f5f7;
    --creator-accent: #ff7200;
    --creator-yellow: #ffd54a;
    color: var(--creator-ink);
    font-family: Arial, "Microsoft JhengHei", sans-serif;
    letter-spacing: 0;
}

.creator-play-scope *,
.creator-play-scope *::before,
.creator-play-scope *::after {
    box-sizing: border-box;
}

.creator-play-scope img {
    display: block;
    max-width: 100%;
}

.creator-play-scope a {
    color: inherit;
    text-decoration: none;
}

.creator-play-home {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto 72px;
    padding: 42px 0 0;
}

.creator-play-home__heading,
.creator-game-section__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.creator-play-home__heading h2,
.creator-game-section h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.25;
}

.creator-play-home__heading > span,
.creator-game-section__heading > span,
.creator-play-home__eyebrow {
    color: var(--creator-muted);
    font-size: 14px;
}

.creator-play-home__eyebrow {
    margin: 0 0 6px;
    color: var(--creator-accent);
    font-weight: 700;
}

.creator-play-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.creator-play-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--creator-line);
    border-radius: 6px;
    background: var(--creator-surface);
    transition: transform .2s ease, box-shadow .2s ease;
}

.creator-play-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .08);
}

.creator-play-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #ececec;
}

.creator-play-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.creator-play-card:hover .creator-play-card__media img {
    transform: scale(1.025);
}

.creator-play-card__placeholder,
.creator-media-fallback {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(135deg, #f4f0e5 0, #f4f0e5 10px, #ebe6d8 10px, #ebe6d8 20px);
    color: #817b70;
    font-weight: 700;
}

.creator-play-card__body {
    display: flex;
    min-height: 235px;
    flex-direction: column;
    padding: 20px;
}

.creator-play-card__meta,
.creator-game-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.creator-play-card__meta span,
.creator-game-hero__meta span,
.creator-game-hero__type {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border: 1px solid #ffd2b4;
    border-radius: 999px;
    padding: 4px 10px;
    background: #fff5ed;
    color: #d95700;
    font-size: 12px;
    font-weight: 700;
}

.creator-play-card h3 {
    margin: 14px 0 8px;
    font-size: 21px;
    line-height: 1.35;
}

.creator-play-card__body > p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 18px;
    color: var(--creator-muted);
    line-height: 1.7;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.creator-play-card__action {
    margin-top: auto;
    color: var(--creator-accent) !important;
    font-weight: 700;
}

.creator-play-card__modes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}

.creator-play-card__modes span {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    border-radius: 999px;
    padding: 3px 9px;
    background: #f0f1f3;
    color: #555b66;
    font-size: 12px;
    font-weight: 700;
}

.creator-play-empty {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #cfd1d6;
    border-radius: 6px;
    background: var(--creator-soft);
    color: var(--creator-muted);
}

.creator-play-error {
    border-color: #e6b6b6;
    background: #fff4f4;
    color: #a92c2c;
}

.creator-play-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

.creator-play-pager a,
.creator-play-pager span {
    display: inline-flex;
    min-width: 38px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--creator-line);
    border-radius: 4px;
    padding: 7px 11px;
    background: #fff;
}

.creator-play-pager__current {
    border-color: var(--creator-accent) !important;
    background: var(--creator-accent) !important;
    color: #fff;
    font-weight: 700;
}

.creator-play-pager__disabled {
    color: #a6a8ad;
}

.creator-game-detail,
.creator-item-page {
    min-height: 70vh;
    background: #f4f4f4;
}

.creator-game-hero {
    position: relative;
    min-height: clamp(480px, 68vh, 760px);
    overflow: hidden;
    background: #1a1a1a;
}

.creator-game-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.creator-game-hero__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #303030;
    color: rgba(255, 255, 255, .24);
    font-size: clamp(34px, 6vw, 76px);
    font-weight: 700;
    text-align: center;
}

.creator-game-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .42) 54%, rgba(0, 0, 0, .12) 100%);
}

.creator-game-hero__content {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    padding: clamp(110px, 16vh, 180px) 250px 70px 0;
    color: #fff;
}

.creator-game-hero__content h1 {
    max-width: 800px;
    margin: 18px 0 12px;
    font-size: clamp(42px, 6vw, 82px);
    line-height: 1.05;
}

.creator-game-hero__subtitle {
    max-width: 760px;
    margin: 0 0 22px;
    font-size: 20px;
    line-height: 1.65;
}

.creator-game-hero__actions {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: max(24px, calc((100vw - 1280px) / 2));
    display: flex;
    width: 210px;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    transform: translateY(-50%);
}

.creator-game-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 4px;
    padding: 10px 18px;
    background: rgba(0, 0, 0, .4);
    color: #fff !important;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}

.creator-game-button--primary {
    border-color: var(--creator-accent);
    background: var(--creator-accent);
}

.creator-game-shell,
.creator-item-page__shell {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    padding: 44px 0 76px;
}

.creator-game-intro,
.creator-game-section,
.creator-item-purchase {
    margin-bottom: 24px;
    border: 1px solid var(--creator-line);
    border-radius: 6px;
    background: var(--creator-surface);
}

.creator-game-intro {
    display: grid;
    grid-template-columns: minmax(180px, 290px) 1fr;
    gap: 32px;
    padding: 30px;
}

.creator-game-intro__cover {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 4px;
    object-fit: cover;
}

.creator-game-intro__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 4px;
    background: #ececec;
}

.creator-game-intro__media .creator-game-intro__cover {
    height: 100%;
}

.creator-game-intro h2,
.creator-game-section h2 {
    margin-top: 0;
}

.creator-game-intro p,
.creator-info-card p,
.creator-item-card p,
.creator-item-purchase__content > p {
    color: var(--creator-muted);
    line-height: 1.75;
}

.creator-game-note,
.creator-game-notice {
    border-left: 4px solid var(--creator-yellow);
    padding: 12px 14px;
    background: #fff9d9;
}

.creator-game-section {
    padding: 30px;
}

.creator-game-gallery,
.creator-info-grid,
.creator-item-grid {
    display: grid;
    gap: 18px;
}

.creator-game-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.creator-game-gallery figure {
    overflow: hidden;
    margin: 0;
    border-radius: 4px;
    background: #ececec;
}

.creator-game-gallery img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    object-fit: cover;
}

.creator-game-gallery figcaption {
    margin-top: 8px;
    color: var(--creator-muted);
    font-size: 13px;
}

.creator-resource-list {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 10px;
    list-style: none;
}

.creator-resource-list a {
    display: block;
    border: 1px solid var(--creator-line);
    border-radius: 4px;
    padding: 12px 14px;
    color: var(--creator-accent);
    font-weight: 700;
    word-break: break-all;
}

.creator-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.creator-info-card,
.creator-item-card {
    overflow: hidden;
    border: 1px solid var(--creator-line);
    border-radius: 5px;
    background: var(--creator-surface);
}

.creator-info-card__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #ececec;
}

.creator-info-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.creator-info-card__body,
.creator-item-card__body {
    padding: 18px;
}

.creator-info-card h3,
.creator-item-card h3 {
    margin: 0 0 8px;
}

.creator-info-card a,
.creator-item-card a {
    color: var(--creator-accent);
    font-weight: 700;
}

.creator-item-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.creator-item-card__media {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: #ececec;
}

.creator-item-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.creator-item-card strong {
    display: block;
    margin-bottom: 12px;
    font-size: 20px;
}

.creator-item-page__backdrop {
    position: absolute;
    width: 100%;
    height: 360px;
    overflow: hidden;
    background: #202020;
}

.creator-item-page__backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .32;
    filter: saturate(.7);
}

.creator-item-page__shell {
    position: relative;
    z-index: 1;
}

.creator-item-page__breadcrumb {
    display: flex;
    gap: 8px;
    margin: 6px 0 22px;
    color: #fff;
}

.creator-item-purchase {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr);
    min-height: 570px;
    overflow: hidden;
}

.creator-item-purchase__visual {
    display: flex;
    min-height: 100%;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #f0f1f3;
}

.creator-item-purchase__visual img {
    width: min(100%, 430px);
    aspect-ratio: 1;
    border-radius: 6px;
    object-fit: cover;
}

.creator-item-purchase__content {
    padding: 50px;
}

.creator-item-purchase__work {
    margin-top: 0;
    color: var(--creator-accent) !important;
    font-weight: 700;
}

.creator-item-purchase__content h1 {
    margin: 0 0 18px;
    font-size: 38px;
    line-height: 1.2;
}

.creator-item-purchase__price {
    margin: 28px 0;
    font-size: 32px;
    font-weight: 700;
}

.creator-item-purchase__content label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

.creator-item-purchase__content input {
    width: 100%;
    min-height: 46px;
    border: 1px solid #cfd1d6;
    border-radius: 4px;
    padding: 10px 12px;
    font: inherit;
}

.creator-item-purchase__hint {
    margin: 8px 0 26px;
    font-size: 13px;
}

.creator-item-purchase__status {
    margin-top: 14px;
    color: var(--creator-muted);
    font-size: 13px;
}

.creator-item-commerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 24px;
    align-items: start;
}

.creator-item-main {
    display: grid;
    gap: 20px;
}

.creator-item-panel,
.creator-item-summary {
    border: 1px solid var(--creator-line);
    border-radius: 6px;
    background: var(--creator-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.creator-item-panel__header,
.creator-item-summary__header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--creator-line);
}

.creator-item-panel__header h1,
.creator-item-panel__header h2,
.creator-item-summary__header h2 {
    margin: 0;
    font-size: 22px;
}

.creator-item-product {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 24px;
    padding: 24px;
}

.creator-item-product__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 6px;
    background: #ececec;
}

.creator-item-product__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.creator-item-product__content {
    min-width: 0;
}

.creator-item-product__work {
    margin: 0 0 8px;
    color: var(--creator-accent) !important;
    font-weight: 700;
}

.creator-item-product__content h2 {
    margin: 0 0 14px;
    font-size: 30px;
}

.creator-item-product__description {
    min-height: 52px;
    margin: 0;
    line-height: 1.7;
}

.creator-item-product__price {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-top: 24px;
}

.creator-item-product__price strong {
    font-size: 30px;
}

.creator-item-quantity {
    display: flex;
    width: 120px;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    border: 1px solid var(--creator-line);
    border-radius: 4px;
    padding: 8px 12px;
}

.creator-item-uid-panel {
    padding-bottom: 24px;
}

.creator-item-uid-panel__intro {
    margin: 20px 24px 0;
    line-height: 1.7;
}

.creator-item-uid-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 20px 24px;
}

.creator-item-uid-grid label {
    display: grid;
    gap: 8px;
    font-weight: 700;
}

.creator-item-uid-grid input {
    width: 100%;
    min-height: 46px;
    border: 1px solid #cfd1d6;
    border-radius: 4px;
    padding: 10px 12px;
    background: #fff;
    font: inherit;
}

.creator-item-page__notice {
    margin: 0 24px;
    border: 1px solid #efd173;
    border-radius: 4px;
    padding: 14px 16px;
    background: #fff8dc;
    color: #6a5718 !important;
    line-height: 1.6;
}

.creator-item-summary {
    position: sticky;
    top: 24px;
    overflow: hidden;
}

.creator-item-summary__item,
.creator-item-summary__row {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    margin: 0 24px;
    padding: 18px 0;
    border-bottom: 1px solid var(--creator-line);
}

.creator-item-summary__total {
    font-size: 20px;
}

.creator-item-summary__total strong {
    color: var(--creator-accent);
    font-size: 24px;
}

.creator-item-summary__button {
    width: calc(100% - 48px);
    margin: 24px;
}

.creator-item-summary__back {
    display: block;
    margin: -10px 24px 24px;
    color: var(--creator-muted) !important;
    text-align: center;
    text-decoration: underline;
}

@media (max-width: 980px) {
    .creator-play-grid,
    .creator-info-grid,
    .creator-item-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .creator-item-purchase {
        grid-template-columns: 1fr;
    }

    .creator-item-commerce {
        grid-template-columns: 1fr;
    }

    .creator-item-summary {
        position: static;
    }

    .creator-item-purchase__visual {
        min-height: 420px;
    }

    .creator-game-hero__content {
        padding-right: 220px;
    }

    .creator-game-hero__actions {
        right: 24px;
        width: 185px;
    }
}

@media (max-width: 680px) {
    .creator-play-home,
    .creator-game-hero__content,
    .creator-game-shell,
    .creator-item-page__shell {
        width: min(100% - 28px, 1280px);
    }

    .creator-play-grid,
    .creator-game-gallery,
    .creator-info-grid,
    .creator-item-grid,
    .creator-game-intro {
        grid-template-columns: 1fr;
    }

    .creator-play-home__heading,
    .creator-game-section__heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .creator-game-hero {
        min-height: 560px;
    }

    .creator-game-hero__overlay {
        background: linear-gradient(0deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .25));
    }

    .creator-game-hero__content {
        padding: 90px 0 150px;
    }

    .creator-game-hero__actions {
        top: auto;
        right: 14px;
        bottom: 28px;
        left: 14px;
        width: auto;
        flex-direction: row;
        flex-wrap: wrap;
        transform: none;
    }

    .creator-game-button {
        width: auto;
        flex: 1 1 140px;
    }

    .creator-game-intro,
    .creator-game-section,
    .creator-item-purchase__content {
        padding: 22px;
    }

    .creator-item-purchase__visual {
        min-height: 300px;
        padding: 28px;
    }

    .creator-item-product,
    .creator-item-uid-grid {
        grid-template-columns: 1fr;
    }

    .creator-item-product__media {
        width: min(100%, 220px);
    }
}

/* Creator homepage cards reuse the original play-page art components. */
article.page-play .creator-work-wrap {
    padding-top: 25px;
}

article.page-play .creator-work-section {
    margin-bottom: 0;
}

article.page-play .creator-work-section .grid-row dl.creator-work-card {
    min-width: 0;
}

article.page-play .creator-work-section .grid-row dl .img strong {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #817b70;
    font-size: 14px;
    transform: translate(-50%, -50%);
}

article.page-play .creator-work-section .grid-row dl dt,
article.page-play .creator-work-section .grid-row dl dd:not(.img) {
    min-width: 0;
}

article.page-play .creator-work-section .grid-row dl .row {
    flex-wrap: wrap;
}

article.page-play .creator-work-section .grid-row dl .row a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
    white-space: nowrap;
}

article.page-play .creator-work-section .creator-play-empty {
    margin-bottom: 30px;
}

article.page-play .creator-work-section .creator-play-pager {
    margin: 0 0 30px;
}

/* 熱血三國角色確認區專用，不覆寫共用美術樣式或其他遊戲的 UID 欄位。 */
.page-store-content .sc-scope .rxsg-checkout {
    min-width: 0;
    border: 1px solid #ebe7e2;
    padding: 28px;
    color: #333a43;
    line-height: 1.6;
}

.rxsg-checkout,
.rxsg-checkout *,
.rxsg-checkout *::before,
.rxsg-checkout *::after {
    box-sizing: border-box;
}

.rxsg-checkout .rxsg-checkout__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.rxsg-checkout .rxsg-checkout__icon {
    display: flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff2e7;
    color: #d96300;
}

.rxsg-checkout .rxsg-checkout__icon svg {
    width: 25px;
    height: 25px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-store-content .rxsg-checkout .sc-title {
    margin: 0;
    color: #333a43;
    font-size: 20px;
    line-height: 1.4;
}

.rxsg-checkout .rxsg-checkout__subtitle {
    margin: 4px 0 0;
    color: #707782;
    font-size: 13px;
    line-height: 1.6;
}

.rxsg-checkout .rxsg-checkout__notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
    border: 1px solid #f4dfb8;
    border-radius: 8px;
    padding: 13px 15px;
    background: #fffbf2;
    color: #805719;
    font-size: 13px;
    line-height: 1.7;
}

.rxsg-checkout .rxsg-checkout__notice p {
    margin: 0;
}

.rxsg-checkout .rxsg-checkout__badge {
    flex: 0 0 auto;
    margin-top: 1px;
    border-radius: 4px;
    padding: 2px 7px;
    background: #f9e8c6;
    color: #79501b;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: .5px;
}

.rxsg-checkout .rxsg-checkout__sample {
    padding-top: 3px;
    color: #876c45;
    font-size: 12px;
}

.rxsg-checkout .rxsg-checkout__sample code {
    display: inline-block;
    border-radius: 4px;
    padding: 0 5px;
    background: #f9eddb;
    color: #714b15;
    font: inherit;
    font-weight: 700;
}

.rxsg-checkout .rxsg-checkout__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;
}

.rxsg-checkout .rxsg-checkout__field {
    min-width: 0;
}

.rxsg-checkout .rxsg-checkout__field label {
    display: block;
    margin: 0 0 8px;
    color: #444b55;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.rxsg-checkout .rxsg-checkout__control {
    display: block;
    width: 100%;
    min-width: 0;
    height: 48px;
    margin: 0;
    border: 1px solid #d8dce1;
    border-radius: 7px;
    padding: 11px 13px;
    background: #fff;
    color: #333a43;
    font: inherit;
    font-size: 14px;
    line-height: 24px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.rxsg-checkout .rxsg-checkout__control::placeholder {
    color: #868c95;
    opacity: 1;
}

.rxsg-checkout .rxsg-checkout__control:focus {
    outline: none;
    border-color: #fb7400;
    box-shadow: 0 0 0 3px rgba(251, 116, 0, .12);
}

.rxsg-checkout .rxsg-checkout__select {
    position: relative;
}

.rxsg-checkout .rxsg-checkout__select::after {
    position: absolute;
    top: 19px;
    right: 16px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #7b828c;
    border-bottom: 1.5px solid #7b828c;
    transform: rotate(45deg);
    pointer-events: none;
    content: "";
}

.rxsg-checkout select.rxsg-checkout__control {
    padding-right: 36px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    text-overflow: ellipsis;
}

.rxsg-checkout .rxsg-checkout__control:disabled {
    background: #f5f6f7;
    color: #818792;
    cursor: not-allowed;
}

.rxsg-checkout .rxsg-checkout__verify {
    min-width: 116px;
    height: 48px;
    margin: 0;
    border-radius: 7px;
    padding: 0 20px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}

.rxsg-checkout .rxsg-checkout__verify:focus-visible {
    outline: 3px solid #f4b878;
    outline-offset: 3px;
}

.rxsg-checkout .rxsg-checkout__verify:disabled,
.rxsg-checkout .rxsg-checkout__verify:disabled:hover {
    border-color: #e1e4e8;
    background: #e9ecf0;
    color: #757d88;
    cursor: not-allowed;
}

.rxsg-checkout .rxsg-checkout__status {
    position: relative;
    margin: 20px 0 0;
    border: 1px solid #e6e9ed;
    border-radius: 8px;
    padding: 13px 16px 13px 36px;
    background: #f6f7f9;
    color: #626b78;
    font-size: 13px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.rxsg-checkout .rxsg-checkout__status::before {
    position: absolute;
    top: 20px;
    left: 16px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.rxsg-checkout .rxsg-checkout__status[data-state="success"] {
    border-color: #cce5d7;
    background: #f0f9f4;
    color: #28764d;
}

.rxsg-checkout .rxsg-checkout__status[data-state="error"] {
    border-color: #f0d1cd;
    background: #fff5f3;
    color: #a34236;
}

.rxsg-checkout .rxsg-checkout__status[data-state="loading"]::before {
    top: 18px;
    left: 14px;
    width: 11px;
    height: 11px;
    border: 2px solid #e6c9af;
    border-top-color: #d96300;
    background: transparent;
    animation: rxsg-checkout-spin .8s linear infinite;
}

.rxsg-checkout .rxsg-checkout__help {
    margin: 12px 0 0;
    color: #737b87;
    font-size: 12px;
    line-height: 1.8;
}

@keyframes rxsg-checkout-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 700px) {
    .page-store-content .sc-scope .rxsg-checkout {
        padding: 22px 20px;
    }

    .rxsg-checkout .rxsg-checkout__fields {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .rxsg-checkout .rxsg-checkout__control {
        font-size: 16px;
    }

    .rxsg-checkout .rxsg-checkout__verify {
        width: 100%;
    }

    .rxsg-checkout .rxsg-checkout__notice {
        flex-direction: column;
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rxsg-checkout .rxsg-checkout__status[data-state="loading"]::before {
        animation: none;
    }

    .rxsg-checkout .rxsg-checkout__control,
    .rxsg-checkout .rxsg-checkout__verify {
        transition: none;
    }
}
