:root {
    --bg-page: #dcdcdc;
    --bg-card: #dedede;
    --black: #000;
    --white: #fff;
    --text: #111;
    --muted: #5a5a5a;
    --line: #c9c9c9;
    --green: #229455;
    --green-dark: #197242;
    --green-strip-1: #217f48;
    --green-strip-2: #2ca45f;
    --blue: #3b4fd0;
    --navy: #1e3776;
    --cyan: #17bec6;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg-page);
    color: var(--text);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #000;
}

.header-inner {
    max-width: 602px;
    margin: 0 auto;
    min-height: 61px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand img {
    width: 124px;
    height: auto;
}

.menu-toggle {
    width: 38px;
    height: 38px;
    background: transparent;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}

.menu-line {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 999px;
    transition: transform .2s ease, opacity .2s ease;
}

.menu-line-sm { width: 8px; }
.menu-line-md { width: 13px; }
.menu-line-lg { width: 19px; }

.menu-toggle[aria-expanded="true"] .menu-line-sm { transform: translateY(1px); }
.menu-toggle[aria-expanded="true"] .menu-line-lg { transform: translateY(-1px); }

.mobile-menu {
    max-width: 602px;
    margin: 0 auto;
    padding: 0 10px 10px;
    display: grid;
    gap: 8px;
}

.mobile-menu[hidden] { display: none; }

.mobile-menu a {
    background: #141414;
    color: #fff;
    border: 1px solid #2a2a2a;
    padding: 12px 13px;
    border-radius: 10px;
    font-size: 14px;
}

.page-shell {
    padding: 0 0 28px;
}

.campaign-card {
    max-width: 602px;
    margin: 0 auto;
    background: var(--bg-card);
}

.hero-slider {
    position: relative;
    overflow: hidden;
    background: #111;
}

.hero-slide {
    display: none;
    position: relative;
    min-height: 334px;
}

.hero-slide.is-active { display: block; }

.hero-slide img {
    width: 100%;
    height: 334px;
    object-fit: cover;
    object-position: center 45%;
}

.hero-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 14px 10px 10px;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.08));
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    min-height: 21px;
    padding: 0 8px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
}

.hero-overlay h1 {
    margin: 7px 0 2px;
    font-size: 14px;
    line-height: 1.12;
    text-transform: uppercase;
}

.hero-overlay p {
    margin: 0;
    font-size: 12px;
}

.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(0,0,0,.16);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 31px;
    line-height: 1;
}

.hero-arrow-prev { left: 8px; }
.hero-arrow-next { right: 8px; }

.titles-strip {
    min-height: 31px;
    background: #010101;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
}

.titles-strip-icon { font-size: 14px; }

@keyframes moveStripes {
    from { background-position: 0 0; }
    to { background-position: 40px 0; }
}

.progress-bar {
    position: relative;
    height: 21px;
    overflow: hidden;
    background: repeating-linear-gradient(-45deg, var(--green-strip-1), var(--green-strip-1) 8px, var(--green-strip-2) 8px, var(--green-strip-2) 16px);
    background-size: 38px 38px;
    animation: moveStripes .9s linear infinite;
}

.progress-label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

.price-highlight {
    padding: 7px 10px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
}

.price-highlight span { font-size: 12px; }

.price-highlight strong {
    min-height: 26px;
    padding: 0 9px;
    border-radius: 5px;
    background: #4e4e4e;
    color: #fff;
    display: inline-flex;
    align-items: center;
    font-size: 15px;
}

.packages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 0 10px 7px;
}

.package-card {
    position: relative;
    min-height: 67px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid #d8d8d8;
    padding: 9px 4px 7px;
    text-align: center;
    box-shadow: var(--shadow);
}

.package-card strong {
    display: block;
    margin-bottom: 3px;
    font-size: 15px;
    line-height: 1;
    color: #111;
}

.package-card > span:last-child {
    display: block;
    font-size: 11px;
    color: #616161;
}

.package-card.is-featured,
.package-card.is-selected {
    background: #000;
    border-color: #000;
}

.package-card.is-featured strong,
.package-card.is-selected strong,
.package-card.is-featured > span:last-child,
.package-card.is-selected > span:last-child {
    color: #fff;
}

.package-tag {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 7px;
    border-radius: 999px;
    background: #fff;
    color: #5f5f5f;
    border: 1px solid #d8d8d8;
    font-size: 8px;
    line-height: 1;
    white-space: nowrap;
}

.purchase-box {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 7px;
    padding: 0 10px 12px;
}

.quantity-box {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    gap: 8px;
    align-items: center;
}

.qty-btn,
.qty-input {
    min-height: 40px;
    border: 1px solid #d4d4d4;
    border-radius: 7px;
    background: #fff;
}

.qty-btn {
    color: #6c6c6c;
    font-size: 24px;
    line-height: 1;
    padding: 0;
}

.qty-input {
    width: 100%;
    text-align: center;
    font-weight: 700;
    color: #5a5a5a;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.buy-button {
    min-height: 52px;
    border-radius: 7px;
    background: var(--green);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

.buy-button:hover { background: var(--green-dark); }

.buy-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255,255,255,.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.buy-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

.buy-text strong { font-size: 17px; }
.buy-text small { margin-top: 4px; font-size: 13px; font-weight: 700; }

.bonus-section,
.info-box,
.prizes-section,
.share-box {
    padding: 0 16px 8px;
}

.bonus-section .section-title,
.prizes-section .list-header,
.info-box .accordion-trigger,
.info-box .accordion-content,
.share-box .section-title,
.share-box .share-buttons {
    max-width: 548px;
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #000;
    margin: 2px 0 7px;
}

.section-title-icon { font-size: 18px; }
.section-title h2 { margin: 0; font-size: 16px; font-weight: 700; }
.section-title small { font-size: 12px; color: #5c5c5c; font-weight: 400; }

.reward-grid {
    display: grid;
    gap: 6px;
    max-width: 548px;
    margin: 0 auto;
}

.reward-card {
    min-height: 62px;
    padding: 10px 12px;
    border-radius: 6px;
    color: #fff;
    display: grid;
    grid-template-columns: 1.08fr .78fr;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow);
}

.reward-card small,
.reward-card h3,
.reward-card p,
.reward-card strong,
.reward-card span { margin: 0; }

.reward-card small,
.reward-card p,
.reward-card span { font-size: 11px; }
.reward-card h3 { font-size: 15px; line-height: 1.05; }

.reward-side {
    display: grid;
    justify-items: end;
    text-align: right;
    gap: 1px;
}

.reward-side strong { font-size: 15px; line-height: 1.05; }
.reward-side i { font-style: normal; font-size: 22px; line-height: 1; }

.indigo { background: var(--blue); }
.navy { background: var(--navy); }
.cyan { background: linear-gradient(90deg, #32ad47, var(--cyan)); }
.greenblue { background: linear-gradient(90deg, #2dae47, #1dbdc6); }

.accordion-trigger {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px 6px 0 0;
    background: #f2f2f2;
    color: #4a4a4a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
}

.accordion-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #666;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: transform .25s ease;
}

.accordion-trigger.is-open .accordion-icon { transform: rotate(0deg); }
.accordion-trigger:not(.is-open) .accordion-icon { transform: rotate(180deg); }

.accordion-content {
    border: 1px solid var(--line);
    border-top: 0;
    background: #f7f7f7;
    border-radius: 0 0 6px 6px;
}

.info-scroll {
    max-height: 207px;
    overflow: auto;
    padding: 14px 10px;
}

.info-scroll p {
    margin: 0 0 18px;
    font-size: 15px;
    text-transform: uppercase;
}
.info-scroll p:last-child { margin-bottom: 0; }

.list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.section-title.compact h2 { font-size: 16px; }
.counter { font-size: 14px; color: #3e3e3e; }
.prize-list {
    display: grid;
    gap: 4px;
    max-width: 548px;
    margin: 0 auto;
}

.prize-row {
    min-height: 34px;
    padding: 5px 6px;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.prize-row.three-cols {
    display: grid;
    grid-template-columns: 64px 1fr auto;
}

.pill {
    min-width: 88px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    background: #4a4a4a;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.pill.dark { min-width: 64px; background: #3f3f3f; }
.status,
.row-value { font-size: 14px; color: #3f3f3f; }

.see-all {
    width: 100%;
    min-height: 32px;
    margin-top: 10px;
    border-radius: 4px;
    background: #a9a9a9;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.share-box { padding-bottom: 18px; }
.share-title { margin-bottom: 10px; }
.share-buttons { display: flex; gap: 10px; }

.share-btn,
.float-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.share-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
}
.share-btn.facebook { background: #4367b2; }
.share-btn.telegram { background: #2aa9e0; }
.share-btn.twitter { background: #1c9bf0; }
.share-btn.whatsapp { background: #25d366; font-size: 12px; }

.floating-social {
    position: fixed;
    right: 8px;
    bottom: 78px;
    z-index: 25;
    display: grid;
    gap: 8px;
}

.float-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,.14);
}

.float-btn.whatsapp { background: #3da864; }
.float-btn.telegram { background: #4a9de4; }
.float-btn.instagram { background: #cb4ca0; }
.float-btn.support { background: #e8ac3b; color: #513600; }

.site-footer {
    text-align: center;
    color: #000;
    font-size: 13px;
    padding: 25px 10px 40px;
}

@media (max-width: 620px) {
    .header-inner { min-height: 59px; }
    .brand img { width: 118px; }
    .hero-slide,
    .hero-slide img { min-height: 306px; height: 306px; }
    .hero-overlay h1 { font-size: 13px; }
    .purchase-box { grid-template-columns: 1fr 1.45fr; }
}

@media (max-width: 620px) {
    .packages { gap: 5px; }
    .package-card { padding-left: 3px; padding-right: 3px; }
    .package-card > span:last-child { font-size: 10px; }
}

@media (max-width: 480px) {
    .hero-slide,
    .hero-slide img { min-height: 303px; height: 303px; }
    .hero-overlay { padding: 14px 10px 9px; }
    .hero-badge { font-size: 11px; }
    .price-highlight span { font-size: 11px; }
    .package-card strong { font-size: 14px; }
    .buy-text strong { font-size: 15px; }
    .buy-text small { font-size: 12px; }
    .bonus-section,
    .info-box,
    .prizes-section,
    .share-box { padding-left: 12px; padding-right: 12px; }
    .reward-card { grid-template-columns: 1.02fr .74fr; padding: 9px 10px; }
    .reward-card small,
    .reward-card p,
    .reward-card span { font-size: 10px; }
    .reward-card h3,
    .reward-side strong { font-size: 14px; }
    .reward-side i { font-size: 20px; }
}

@media (max-width: 389px) {
    .packages { gap: 5px; }
    .package-card { padding-left: 4px; padding-right: 4px; }
    .purchase-box { grid-template-columns: 1fr; }
    .bonus-section,
    .info-box,
    .prizes-section,
    .share-box { padding-left: 10px; padding-right: 10px; }
    .reward-card { grid-template-columns: 1fr; text-align: center; }
    .reward-side { justify-items: center; text-align: center; }
}


body.modal-open {
    overflow: hidden;
}

.reserve-modal[hidden] {
    display: none;
}

.reserve-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
}

.reserve-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 18, 18, .18);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.reserve-dialog {
    position: relative;
    width: min(94vw, 436px);
    margin: 44px auto 24px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .26);
    overflow: hidden;
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
}

.reserve-header {
    min-height: 44px;
    padding: 12px 16px;
    border-bottom: 1px solid #ececec;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #484848;
    font-size: 15px;
}

.reserve-header strong {
    font-size: 17px;
    font-weight: 500;
}

.reserve-close {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: transparent;
    color: #9a9a9a;
    font-size: 18px;
    line-height: 1;
    padding: 0;
}

.reserve-body {
    padding: 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.reserve-upsell {
    border-radius: 4px;
    background: #f4dc8a;
    border: 1px solid #ecd070;
    padding: 14px 14px 13px;
    text-align: center;
    color: #7e6922;
}

.reserve-upsell-title {
    margin: 0 0 3px;
    font-size: 11px;
    font-weight: 700;
}

.reserve-upsell small {
    display: block;
    font-size: 10px;
    line-height: 1.35;
}

.reserve-upsell-btn {
    min-width: 136px;
    min-height: 30px;
    margin-top: 8px;
    padding: 0 10px;
    border-radius: 4px;
    background: #84cb79;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.reserve-upsell.is-added {
    background: #dff1c8;
    border-color: #c5e4a0;
}

.reserve-summary {
    margin-top: 10px;
    padding: 12px 0 11px;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    color: #555;
    font-size: 12px;
    line-height: 1.45;
}

.reserve-summary strong {
    font-weight: 700;
}

.reserve-fieldset {
    margin-top: 6px;
}

.reserve-label {
    display: block;
    margin-bottom: 6px;
    color: #5b5b5b;
    font-size: 13px;
    font-weight: 700;
}

.reserve-input {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #d6d6d6;
    border-radius: 2px;
    background: #fafafa;
    color: #444;
    font-size: 13px;
}

.reserve-input::placeholder {
    color: #9e9e9e;
}

.reserve-warning {
    min-height: 32px;
    margin-top: 8px;
    padding: 0 12px;
    border-radius: 2px;
    background: #efe1a6;
    color: #9d7d17;
    display: flex;
    align-items: center;
    font-size: 11px;
}

.reserve-continue {
    width: 100%;
    min-height: 42px;
    margin-top: 10px;
    border-radius: 5px;
    background: #d7d7d7;
    color: #a3a3a3;
    font-size: 13px;
    font-weight: 700;
    cursor: not-allowed;
}

.reserve-continue.is-enabled,
.reserve-continue:enabled {
    background: #229455;
    color: #fff;
    cursor: pointer;
}

@media (max-width: 480px) {
    .reserve-dialog {
        width: min(94vw, 400px);
        margin-top: 62px;
    }
}


.reserve-continue.is-enabled,
.reserve-continue:enabled {
    background: #2d7bf7;
    color: #fff;
    cursor: pointer;
}

.reserve-dialog-form {
    width: min(94vw, 474px);
    max-height: calc(100dvh - 24px);
}

.reserve-body-form {
    padding-top: 12px;
}

.register-form {
    margin-top: 10px;
}

.register-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.register-label {
    display: block;
    color: #6a6a6a;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 5px;
}

.register-helper {
    color: #9a9a9a;
    font-size: 10px;
}

.register-input {
    margin-bottom: 8px;
    background: #f9f9f9;
}

.register-grid-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.register-check {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    color: #7a7a7a;
    font-size: 11px;
}

.register-check input {
    width: 13px;
    height: 13px;
    margin: 0;
}

.register-terms {
    margin: 7px 0 10px;
    color: #9b9b9b;
    font-size: 8px;
    line-height: 1.45;
}

.register-submit {
    width: 100%;
    min-height: 40px;
    border-radius: 3px;
    background: #1f9b57;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

.register-submit span {
    font-size: 13px;
}

.register-login {
    width: 100%;
    margin-top: 8px;
    background: transparent;
    color: #9a9a9a;
    font-size: 10px;
    text-align: center;
}

.register-login span {
    font-size: 11px;
}

@media (max-width: 480px) {
    .reserve-dialog-form {
        width: min(94vw, 418px);
    }

    .register-grid-two {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .register-row-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
}

.register-address-block {
    margin-top: 8px;
    padding-top: 4px;
}

.register-address-block[hidden] {
    display: none;
}

.register-label small {
    font-size: 10px;
    color: #9a9a9a;
    font-weight: 400;
}

.register-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%);
    background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px;
}

.payment-dialog {
    width: min(94vw, 430px);
    margin-top: 24px;
    border-radius: 9px;
    background: #ececec;
    max-height: calc(100dvh - 24px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.payment-topbar {
    min-height: 39px;
    padding: 0 12px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.payment-topbar-brand img {
    width: 78px;
    height: auto;
}

.payment-menu-icon {
    pointer-events: none;
    opacity: .95;
    width: 24px;
    height: 24px;
}

.payment-body {
    padding: 10px 8px 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.payment-status-card,
.payment-product-card,
.payment-group-card,
.payment-order-card {
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.payment-status-card {
    padding: 10px;
}

.payment-status-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: #4f4f4f;
}

.payment-status-head strong {
    display: block;
    font-size: 14px;
}

.payment-status-head small {
    display: block;
    font-size: 11px;
    color: #7b7b7b;
}

.payment-status-icon {
    font-size: 21px;
}

.payment-timer-box {
    margin-top: 10px;
    min-height: 28px;
    border-radius: 4px;
    background: #f2f2f2;
    color: #585858;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.payment-timer-box strong {
    margin: 0 4px;
    color: #000;
}

.payment-pix-box {
    margin-top: 8px;
}

.payment-step {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
}

.payment-step span {
    flex: 0 0 16px;
    height: 16px;
    border-radius: 3px;
    background: #11864b;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}

.payment-step p {
    margin: 0;
    color: #595959;
    font-size: 10px;
    line-height: 1.35;
}

.payment-copy-row {
    display: grid;
    grid-template-columns: 1fr 68px;
    gap: 4px;
    margin-top: 7px;
}

.payment-copy-row input {
    width: 100%;
    min-height: 27px;
    padding: 0 8px;
    border: 1px solid #d7d7d7;
    border-radius: 4px;
    background: #fff;
    color: #4e4e4e;
    font-size: 10px;
}

.payment-copy-btn,
.payment-confirm-btn,
.payment-ghost-btn,
.payment-group-btn,
.payment-problem-btn {
    border-radius: 4px;
    font-weight: 700;
}

.payment-copy-btn {
    min-height: 27px;
    background: #2baa5e;
    color: #fff;
    font-size: 11px;
}

.payment-confirm-btn {
    width: 100%;
    min-height: 30px;
    margin-top: 9px;
    background: #229455;
    color: #fff;
    font-size: 11px;
}

.payment-ghost-btn {
    display: block;
    min-width: 94px;
    min-height: 20px;
    margin: 7px auto 0;
    background: #efefef;
    color: #5a5a5a;
    font-size: 8px;
    border: 1px solid #dadada;
}

.payment-alert-box {
    margin-top: 10px;
    padding: 6px 8px;
    border-radius: 4px;
    background: #f4e8b3;
    color: #9a7a14;
    font-size: 8px;
    line-height: 1.28;
}

.payment-product-card,
.payment-group-card,
.payment-order-card {
    margin-top: 6px;
}

.payment-product-card {
    padding: 8px;
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 8px;
    align-items: center;
}

.payment-product-card img {
    width: 42px;
    height: 52px;
    object-fit: cover;
    border-radius: 4px;
}

.payment-product-card strong,
.payment-product-card small,
.payment-product-card span {
    display: block;
}

.payment-product-card strong {
    font-size: 11px;
    line-height: 1.2;
}

.payment-product-card small {
    font-size: 10px;
    color: #5a5a5a;
}

.payment-product-card span {
    margin-top: 3px;
    font-size: 8px;
    color: #fff;
    background: #303030;
    width: fit-content;
    padding: 2px 5px;
    border-radius: 999px;
}

.payment-group-card {
    padding: 16px 12px;
    text-align: center;
}

.payment-group-card strong {
    display: block;
    font-size: 14px;
}

.payment-group-card small {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    color: #6e6e6e;
}

.payment-group-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 102px;
    min-height: 28px;
    margin-top: 12px;
    background: #1f9b57;
    color: #fff;
    font-size: 10px;
}

.payment-order-card {
    padding: 8px;
}

.payment-order-card > small {
    display: block;
    margin-bottom: 6px;
    color: #8a8a8a;
    font-size: 8px;
}

.payment-order-grid {
    display: grid;
    gap: 0;
}

.payment-order-grid div {
    min-height: 22px;
    border-bottom: 1px solid #ececec;
    display: grid;
    grid-template-columns: 84px 1fr;
    align-items: center;
    gap: 8px;
    font-size: 10px;
}

.payment-order-grid span {
    color: #707070;
}

.payment-order-grid strong {
    color: #232323;
    font-weight: 700;
}

.payment-problem-btn {
    margin-top: 8px;
    padding: 0;
    background: transparent;
    color: #8b8b8b;
    font-size: 8px;
}

@media (max-width: 480px) {
    .payment-dialog {
        width: min(95vw, 392px);
        margin-top: 14px;
        max-height: calc(100vh - 28px);
    }

    .payment-body {
        padding: 8px 7px 12px;
    }

    .payment-copy-row {
        grid-template-columns: 1fr 62px;
    }

    .payment-order-grid div {
        grid-template-columns: 78px 1fr;
        gap: 6px;
    }
}


@media (max-width: 480px) {
    .reserve-modal {
        padding: 8px;
    }

    .reserve-dialog,
    .reserve-dialog-form,
    .payment-dialog {
        width: min(96vw, 430px);
        max-height: calc(100dvh - 16px);
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .reserve-header {
        min-height: 42px;
        padding: 10px 12px;
    }

    .reserve-body {
        padding: 12px 10px 14px;
    }

    .payment-body {
        padding: 8px 6px 12px;
    }
}


/* PixUp integration */

.payment-code-helper {
  margin: 10px 0 6px;
  padding: 12px;
  border-radius: 10px;
  background: #f7f7f7;
  border: 1px solid #e2e2e2;
}

.payment-qr-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-qr-image {
  display: block;
  width: min(100%, 220px);
  max-width: 220px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border: 1px solid #dddddd;
  border-radius: 10px;
  padding: 8px;
  box-sizing: border-box;
}

.payment-qr-caption {
  margin: 10px 0 0;
  color: #4b4b4b;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.payment-confirm-btn[disabled],
.register-submit[disabled] {
  opacity: .75;
  cursor: not-allowed;
}

.payment-confirm-btn.is-paid {
  background: #0d8f4f;
}