@import url("https://fonts.googleapis.com/css2?family=Mitr:wght@300;400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap");
:root {
    --color-brow: #553a1e;
    --color-green: #2fba38;
    --bp-color-white: #ffffff;
    --bp-color-black: #593817;
    --bp-color-muted: #6f6f6f;
    --bp-color-border: #d8d8d8;
    --bp-color-bg: #f3f3f3;
    --bp-color-danger: #dc3545;
    --bp-radius-sm: 8px;
    --bp-radius-md: 10px;
    --bp-radius-lg: 12px;
    --bp-radius-xl: 18px;
    --bp-font-title: "Mitr", sans-serif;
    --bp-font-body: "Prompt", sans-serif;
}

a,
a:active,
a:hover {
    text-decoration: none;
    color: inherit;
}

/* ===== Global reusable classes (all pages) ===== */
.bp-font-title {
    font-family: var(--bp-font-title);
}

.bp-font-body {
    font-family: var(--bp-font-body);
}

.bp-text-brow {
    color: var(--color-brow);
}

.bp-text-green {
    color: var(--color-green);
}

.bp-text-muted {
    color: var(--bp-color-muted);
}

.bp-text-danger {
    color: var(--bp-color-danger);
}

.bp-page {
    min-height: 100vh;
    background: var(--bp-color-bg);
    color: var(--color-brow);
    font-family: var(--bp-font-title);
}

.bp-container-mobile {
    width: min(100%, 480px);
    margin: 0 auto;
}

.bp-card {
    background: var(--bp-color-white);
    border-radius: var(--bp-radius-xl);
    padding: 14px;
}

.bp-label {
    display: block;
    margin-bottom: 8px;
    font-size: 16.1px;
    color: var(--color-brow);
    font-family: var(--bp-font-body);
}

.bp-input,
.bp-select,
.bp-textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--bp-color-border);
    border-radius: var(--bp-radius-md);
    background: var(--bp-color-white);
    color: #595959;
    padding: 0 12px;
    font-size: 17.2px;
    font-family: var(--bp-font-body);
}

.bp-input::placeholder,
.bp-textarea::placeholder {
    color: #b0b0b0;
    font-family: var(--bp-font-body);
}

.bp-textarea {
    min-height: 96px;
    padding: 12px;
    resize: vertical;
}

.bp-select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #8f8f8f 50%),
        linear-gradient(135deg, #8f8f8f 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px);
    background-size:
        6px 6px,
        6px 6px;
    background-repeat: no-repeat;
    padding-right: 30px;
}

.bp-btn {
    height: 44px;
    border: 2px solid transparent;
    border-radius: var(--bp-radius-lg);
    padding: 0 16px;
    font-family: var(--bp-font-title);
    font-size: 16.1px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.bp-btn-block {
    width: 100%;
}

.bp-btn-primary {
    border-color: #31c03f;
    background: #31c03f;
    color: #ffffff;
}

.bp-btn-secondary {
    border-color: #31c03f;
    background: #ffffff;
    color: #2fb83c;
}

.bp-btn-muted {
    border-color: #c8cad4;
    background: #c8cad4;
    color: #ffffff;
}

.bp-btn-danger {
    border-color: #e35d6a;
    background: #e35d6a;
    color: #ffffff;
}

.bp-btn:disabled,
.bp-btn[aria-disabled="true"] {
    border-color: #c8cad4;
    background: #c8cad4;
    color: #ffffff;
    cursor: not-allowed;
}

.bp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 12.7px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    font-family: var(--bp-font-body);
}

.bp-badge-sale {
    background: #e02a48;
    color: #ffffff;
}

.bp-badge-muted {
    background: #e9ecef;
    color: var(--bp-color-muted);
}

.bp-row {
    display: flex;
    align-items: center;
}

.bp-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bp-gap-8 {
    gap: 8px;
}

.bp-gap-12 {
    gap: 12px;
}

.bp-order-page {
    min-height: 100vh;
    background: #f3f3f3;
    font-family: "Mitr", sans-serif;
    color: #3f2b18;
    padding-bottom: 24px;
    font-weight: 400;
}

.bp-order-wrapper {
    width: min(100%, 480px);
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.bp-order-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 20px 18px;
    border-bottom: 1px solid #e8e8e8;
    background: #ffffff;
}

.bp-program-back {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #3f2b18;
    text-decoration: none;
}

.bp-order-step-circle {
    /* 3 ขั้นตอน: ขั้นที่ n ตั้ง --bp-step-progress = (n/3)*100 เช่น 1→33.333, 2→66.667, 3→100 */
    --bp-step-progress: 33.333;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

.bp-order-step-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.bp-order-step-ring-arc {
    stroke-dasharray: var(--bp-step-progress)
        calc(100 - var(--bp-step-progress));
}

.bp-order-step-current,
.bp-order-step-total {
    position: relative;
    z-index: 1;
    line-height: 1;
}

.bp-order-step-current {
    font-family: "Prompt", sans-serif;
    font-size: 20.7px;
    color: #35b63d;
    font-weight: 500;
}

.bp-order-step-total {
    margin-left: 2px;
    margin-top: 4px;
    font-size: 17.2px;
    color: #8f8f8f;
}

.bp-order-step-title {
    margin: 0;
    font-size: 17.2px;
    font-weight: 400;
    line-height: 1.25;
    color: #3f2b18;
}

.bp-order-step-subtitle {
    margin: 6px 0 0;
    color: #6f6f6f;
    font-size: 13.8px;
    font-weight: 400;
    line-height: 1.3;
}

.bp-order-content {
    padding: 14px;
    display: grid;
    gap: 12px;
    flex: 1;
    align-content: start;
    grid-auto-rows: max-content;
}

.bp-order-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 14px;
}

.bp-order-card--contact {
    padding: 16px;
}

.bp-order-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 20.7px;
    line-height: 1.2;
    color: #3f2b18;
}

.bp-order-card-title img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.bp-order-contact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.bp-order-contact-header .bp-order-card-title {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

.bp-order-field {
    margin-bottom: 10px;
}

.bp-order-field:last-child {
    margin-bottom: 0;
}

.bp-order-card--contact .bp-order-field {
    margin-bottom: 16px;
}

.bp-order-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14.9px;
    color: #4a4a4a;
}

.bp-order-label--emphasis {
    margin-bottom: 8px;
    font-size: 16.1px;
    color: #3f2b18;
}

.bp-order-input-row {
    display: grid;
    grid-template-columns: 1fr 44px;
    gap: 8px;
    align-items: stretch;
}

.bp-order-input-row--branch {
    grid-template-columns: 1fr 52px;
    align-items: stretch;
}

.bp-order-input,
.bp-order-select {
    width: 100%;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    background: #ffffff;
    padding: 0 12px;
    color: #595959;
}

.bp-order-input-wrap {
    position: relative;
}

.bp-order-input-wrap .bp-order-input--field {
    box-sizing: border-box;
    height: 52px;
    padding: 0 44px 0 14px;
    font-size: 18.4px;
}

.bp-order-input-wrap .bp-order-input--field::placeholder {
    font-size: 14.9px;
    color: #b0b0b0;
    opacity: 1;
}

.bp-order-input-wrap .bp-order-input--field::-webkit-input-placeholder {
    font-size: 14.9px;
    color: #b0b0b0;
}

.bp-order-input-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    pointer-events: none;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #2fba38;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.bp-order-input-icon img {
    width: 20px;
    height: 19px;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.bp-order-select {
    appearance: none;
    box-sizing: border-box;
    min-height: 52px;
    font-size: 18.4px;
    background-image:
        linear-gradient(45deg, transparent 50%, #8f8f8f 50%),
        linear-gradient(135deg, #8f8f8f 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px);
    background-size:
        6px 6px,
        6px 6px;
    background-repeat: no-repeat;
    padding-right: 28px;
}

.bp-order-select--locked:disabled,
.bp-order-select:disabled {
    cursor: not-allowed;
    background-color: #f2f2f2;
    color: #595959;
    opacity: 1;
}

.bp-order-icon-btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.bp-order-icon-btn {
    width: 44px;
    height: 44px;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8f8f8f;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    margin: 0;
}

.bp-order-input-row--branch .bp-order-icon-btn {
    width: 52px;
    height: 52px;
    box-sizing: border-box;
}

.bp-order-icon-btn.bp-order-icon-btn--nearest {
    border: none;
    background: linear-gradient(135deg, #31c03f 0%, #28a835 100%);
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.bp-order-icon-btn.bp-order-icon-btn--nearest:active:not(:disabled) {
    opacity: 0.92;
}

.bp-order-icon-btn.bp-order-icon-btn--nearest img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.bp-order-branch-picker {
    position: relative;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.bp-order-branch-search.bp-branch-map-page__search {
    flex: 1;
    width: 100%;
    min-height: 52px;
    height: 52px;
    box-sizing: border-box;
    border-radius: 10px;
}

.bp-order-branch-results.bp-branch-map-page__results {
    position: absolute;
    left: 0;
    /* picker อยู่คอลัมน์แรกของ grid เท่านั้น — ขยายให้เท่าความกว้างทั้งแถว (ช่องค้นหา + gap + ปุ่มตำแหน่ง) */
    right: auto;
    width: calc(100% + 8px + 52px);
    box-sizing: border-box;
    top: calc(100% + 6px);
    z-index: 30;
    max-height: min(42vh, 280px);
    margin: 0;
    border-radius: 12px;
    border: 1px solid #ebebeb;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    background: #ffffff;
}

.bp-order-branch-results.bp-branch-map-page__results--collapsed {
    display: none;
}

.bp-order-scan-btn {
    width: 100%;
    height: 44px;
    border: 2px solid #31c03f;
    border-radius: 12px;
    background: #ffffff;
    color: #2fb83c;
    font-size: 14.9px;
    font-family: inherit;
}

.bp-order-login-btn {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: #2fba38;
    color: #ffffff;
    font-size: 16.1px;
    font-weight: 400;
    line-height: 1;
    font-family: "Mitr", sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
}

.bp-order-login-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.bp-order-login-btn--header {
    width: auto;
    flex-shrink: 0;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 58%;
    padding: 8px 12px;
    min-height: 36px;
    height: auto;
    font-size: 13.8px;
    line-height: 1.25;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
    white-space: normal;
}

.bp-order-login-btn--header .bp-order-login-label {
    flex: 0 1 auto;
    min-width: 0;
    text-align: center;
}

.bp-order-login-btn--header .bp-order-login-icon {
    flex-shrink: 0;
    display: block;
    width: 16px;
    height: 17px;
    object-fit: contain;
    opacity: 0.98;
}

/* ปุ่มเข้าระบบแบบ outline (เขียวบนพื้นขาว) */
.bp-order-login-btn.bp-order-login-btn--outline {
    border: 1.5px solid #31c03f;
    background: #ffffff;
    color: #2fb83c;
}

.bp-order-login-btn.bp-order-login-btn--outline.bp-order-login-btn--header {
    border-radius: 12px;
}

.bp-order-login-btn.bp-order-login-btn--outline:hover {
    background: rgba(47, 184, 60, 0.06);
}

.bp-order-login-btn.bp-order-login-btn--outline:active {
    background: rgba(47, 184, 60, 0.1);
}

.bp-order-footer {
    position: sticky;
    bottom: 0;
    padding: 12px 14px max(12px, env(safe-area-inset-bottom));
    background: #ffffff;
    border-top: 1px solid #efefef;
}

.bp-order-next-btn {
    width: 100%;
    height: 52px;
    border: 2px solid #31c03f;
    border-radius: 12px;
    background: #31c03f;
    color: #ffffff;
    font-size: 18.4px;
    font-family: "Mitr", sans-serif;
}

.bp-order-next-btn:disabled {
    border-color: #c8cad4;
    background: #c8cad4;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 1;
}

/* Prompt เฉพาะช่องฟอร์ม */
.bp-order-page input,
.bp-order-page select,
.bp-order-page textarea {
    font-family: "Prompt", sans-serif;
}

.bp-order-page input::placeholder,
.bp-order-page textarea::placeholder {
    font-family: "Prompt", sans-serif;
}

.bp-order-page input::-webkit-input-placeholder,
.bp-order-page textarea::-webkit-input-placeholder {
    font-family: "Prompt", sans-serif;
}

/* —— หลายออเดอร์ (เพิ่มออเดอร์ได้เรื่อยๆ) —— */
.bp-multi-order-content {
    padding-bottom: 8px;
}

.bp-multi-order-list {
    display: grid;
    gap: 12px;
}

.bp-order-line-card {
    padding: 14px;
}

.bp-order-line-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bp-order-line-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bp-order-line-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2fba38;
    color: #ffffff;
    font-size: 16.1px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: "Prompt", sans-serif;
}

.bp-order-line-label {
    font-size: 18.4px;
    color: #3f2b18;
}

.bp-order-remove-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.bp-order-remove-btn img {
    width: 17px;
    height: 17px;
    display: block;
}

.bp-order-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 140px;
    border: 3px dashed #c8c8c8;
    border-radius: 14px;
    cursor: pointer;
    padding: 16px;
    text-align: center;
}

.bp-order-upload-text {
    font-size: 16.1px;
    color: #2fb83c;
    font-family: "Prompt", sans-serif;
    line-height: 1.35;
    max-width: 260px;
}

/* การ์ดออเดอร์ที่บันทึกโปรแกรมแล้ว */
.bp-order-line-summary {
    margin-top: 0;
}

.bp-order-line-summary-inner {
    border-radius: 14px;
    padding: 12px;
    cursor: pointer;
    text-align: left;
}

.bp-order-line-main {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.bp-order-line-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #e8e8e8;
}

.bp-order-line-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bp-order-line-meta {
    flex: 1;
    min-width: 0;
}

.bp-order-line-name {
    margin: 0 0 4px;
    font-size: 17.2px;
    font-weight: 600;
    color: #3f2b18;
    font-family: "Prompt", sans-serif;
}

.bp-order-line-id {
    margin: 0;
    font-size: 14.9px;
    color: #6a6a6a;
    font-family: "Prompt", sans-serif;
}

.bp-order-line-items {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    border-top: 1px solid #ededed;
    padding-top: 10px;
}

.bp-order-line-items.bp-order-line-items--flush {
    border-top: 0;
    padding-top: 0;
}

.bp-order-line-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14.9px;
    color: #3f2b18;
    font-family: "Prompt", sans-serif;
    line-height: 1.35;
    margin-bottom: 8px;
}

.bp-order-line-item:last-child {
    margin-bottom: 0;
}

.bp-order-line-item-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.bp-order-line-item-icon img {
    width: 20px;
    height: 20px;
    display: block;
}

.bp-order-line-item-text {
    flex: 1;
    min-width: 0;
}

.bp-order-line-item-price {
    flex-shrink: 0;
    font-weight: 500;
    color: #3f2b18;
}

.bp-order-line-total-row {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 8px;
    border-top: 1px solid #ededed;
    padding-top: 10px;
    margin: 0;
    font-size: 16.1px;
    font-family: "Prompt", sans-serif;
}

.bp-order-line-total-label {
    color: #6a6a6a;
}

.bp-order-line-total-value {
    color: #2fba38;
    font-weight: 600;
}

.bp-order-line-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.bp-order-edit-btn {
    min-width: 46px;
    height: 32px;
    padding: 0 16px;
    border: 1.5px solid #31c03f;
    border-radius: 8px;
    background: #ffffff;
    color: #2fb83c;
    font-size: 16.1px;
    font-family: "Mitr", sans-serif;
    font-weight: 300;
    cursor: pointer;
}

.bp-order-add-card {
    padding: 10px;
    background: #ffffff;
}

.bp-order-add-inner {
    width: 100%;
    min-height: 140px;
    border: 3px dashed #8dd99a;
    border-radius: 16px;
    background: #edffed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    cursor: pointer;
    font-family: inherit;
    color: #2fba38;
}

.bp-order-add-plus {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bp-order-add-plus img {
    width: 40px;
    height: 40px;
    display: block;
}

.bp-order-add-label {
    font-size: 16.1px;
    color: #2fb83c;
    background: #d8fde8;
    border-radius: 8px;
    padding: 8px 18px;
    line-height: 1;
}

.bp-multi-order-footer .bp-multi-order-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bp-multi-order-summary {
    flex: 1;
    min-width: 0;
}

.bp-multi-order-summary-line {
    margin: 0;
    font-size: 14.9px;
    color: #4a4a4a;
    line-height: 1.4;
}

.bp-multi-order-summary-total {
    margin-top: 4px;
    font-size: 16.1px;
    color: #3f2b18;
}

.bp-multi-order-pay-btn {
    flex-shrink: 0;
    min-width: 132px;
    height: 48px;
    padding: 0 16px;
    border: 2px solid #31c03f;
    border-radius: 12px;
    background: #31c03f;
    color: #ffffff;
    font-size: 16.1px;
    font-family: "Mitr", sans-serif;
    cursor: pointer;
    white-space: nowrap;
}

.bp-multi-order-pay-btn:disabled {
    border-color: #c8cad4;
    background: #c8cad4;
    color: #ffffff;
    cursor: not-allowed;
}

/* —— ชำระเงิน BrownyPlus (Step 3) —— */
.bp-checkout-content {
    display: grid;
    gap: 10px;
    padding-bottom: 12px;
}

.bp-checkout-contact-card .bp-order-card-title {
    margin-bottom: 14px;
}

.bp-checkout-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

.bp-checkout-contact-icon img {
    width: 34px;
    height: 34px;
    display: block;
}

.bp-checkout-contact-card .bp-order-input-wrap .bp-order-input--field {
    border-color: #d0d0d0;
    background: #f6f6f6;
    border-radius: 14px;
}

.bp-checkout-contact-card
    .bp-order-input-wrap
    .bp-order-input--field.bp-checkout-input-white {
    background: #ffffff;
}

.bp-checkout-customer-lines {
    display: grid;
    gap: 8px;
    margin-top: 6px;
}

.bp-checkout-customer-line {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: "Prompt", sans-serif;
    font-size: 14.9px;
    color: #5a5a5a;
}

.bp-checkout-customer-line strong {
    color: #3f2b18;
    font-weight: 500;
    text-align: right;
}

.bp-checkout-order-line-card {
    padding: 14px;
}

.bp-checkout-order-close {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.65;
}

.bp-checkout-order-close img {
    width: 16px;
    height: 16px;
    display: block;
}

.bp-checkout-order-divider {
    border-top: 1px solid #ededed;
    margin: 10px 0 12px;
}

.bp-checkout-order-line-card .bp-order-line-summary-inner {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.bp-checkout-order-toggle {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 2px 0 2px;
    color: #6a6a6a;
    font-size: 14.9px;
    font-family: "Prompt", sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.bp-checkout-order-toggle i {
    font-size: 13.8px;
}

.bp-toggle-icon-down {
    display: none;
}

[aria-expanded="true"] .bp-toggle-icon-right {
    display: none;
}

[aria-expanded="true"] .bp-toggle-icon-down {
    display: inline-block;
}

.bp-checkout-order-details[hidden] {
    display: none;
}

.bp-checkout-order-details {
    transition:
        max-height 0.24s ease,
        opacity 0.2s ease;
}

.bp-checkout-order-line-card .bp-order-line-items {
    margin: 8px 0 12px;
    border-top: 0;
    padding-top: 0;
}

.bp-checkout-order-line-card .bp-order-line-item-price {
    color: #4b4b4b;
}

.bp-checkout-order-card {
    padding: 12px;
}

.bp-checkout-order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.bp-checkout-order-title {
    font-size: 18.4px;
    color: #3f2b18;
}

.bp-checkout-order-id {
    font-family: "Prompt", sans-serif;
    color: #8a8a8a;
}

.bp-checkout-order-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.bp-checkout-order-thumb {
    width: 62px;
    height: 62px;
    border-radius: 10px;
    background: #f0f0f0;
    flex-shrink: 0;
    overflow: hidden;
}

.bp-checkout-order-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bp-checkout-order-meta {
    min-width: 0;
    width: 100%;
}

.bp-checkout-order-name {
    margin: 0 0 4px;
    font-family: "Prompt", sans-serif;
    font-size: 14.9px;
    color: #505050;
}

.bp-checkout-order-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.bp-checkout-order-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    font-family: "Prompt", sans-serif;
    font-size: 13.8px;
    color: #505050;
}

.bp-checkout-order-item-left {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.bp-checkout-order-item-left img {
    width: 14px;
    height: 14px;
    margin-top: 1px;
    flex-shrink: 0;
}

.bp-checkout-order-item-left span {
    line-height: 1.3;
}

.bp-checkout-order-item-price {
    white-space: nowrap;
    color: #2fb83c;
    font-weight: 500;
}

.bp-checkout-order-total-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #ececec;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #3f2b18;
    font-family: "Prompt", sans-serif;
    font-size: 14.9px;
}

.bp-checkout-coupon-card {
    padding: 14px;
}

.bp-checkout-coupon-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.bp-checkout-coupon-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #3f2b18;
    font-size: 18.4px;
}

.bp-checkout-coupon-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

.bp-checkout-coupon-title-icon img {
    width: 32px;
    height: 32px;
    display: block;
}

.bp-checkout-coupon-action {
    border: 0;
    background: transparent;
    color: #8f8f8f;
    font-family: "Prompt", sans-serif;
    font-size: 18.4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 0;
    cursor: pointer;
}

.bp-checkout-coupon-action i {
    font-size: 15px;
}

.bp-checkout-coupon-banner-wrap {
    border: 1px solid #d8d8d8;
    border-radius: 14px;
    background: #f5f5f5;
    padding: 8px;
}

.bp-checkout-coupon-banner-link {
    display: block;
}

.bp-checkout-coupon-banner {
    min-height: 70px;
    border-radius: 12px;
    overflow: hidden;
    background: #ebebeb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bp-checkout-coupon-banner img {
    width: 100%;
    max-width: 245px;
    height: auto;
    display: block;
}

.bp-checkout-coin-card {
    padding: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #ebebeb;
}

.bp-checkout-coin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 12px;
    background: #ffffff;
}

.bp-checkout-coin-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #593817;
    font-size: 18.4px;
    line-height: 1.2;
}

.bp-checkout-coin-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

.bp-checkout-coin-title-icon img {
    width: 34px;
    height: 34px;
    display: block;
}

.bp-checkout-coin-switch {
    position: relative;
    width: 54px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bp-checkout-coin-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bp-checkout-coin-switch-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #bfc0c1;
    transition: background-color 0.2s ease;
}

.bp-checkout-coin-switch-slider::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
    transition: transform 0.2s ease;
}

.bp-checkout-coin-switch input:checked + .bp-checkout-coin-switch-slider {
    background: #2fba38;
}

.bp-checkout-coin-switch
    input:checked
    + .bp-checkout-coin-switch-slider::before {
    transform: translateX(24px);
}

.bp-checkout-coin-switch input:disabled + .bp-checkout-coin-switch-slider {
    opacity: 0.6;
}

.bp-checkout-coin-balance-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding: 0 16px 14px;
    background: #ffffff;
}

.bp-checkout-coin-balance-label {
    color: #969696;
    font-size: 16.1px;
    line-height: 1.25;
}

.bp-checkout-coin-balance-value {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    color: #595959;
    font-family: "Prompt", sans-serif;
    line-height: 1.2;
}

.bp-checkout-coin-balance-value strong {
    font-size: 18.4px;
    font-weight: 600;
}

.bp-checkout-coin-balance-value small {
    margin-top: 4px;
    font-size: 16px;
    color: #8f8f8f;
}

.bp-checkout-coin-use-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #e8e8e8;
}

.bp-checkout-coin-use-row.is-enabled {
    background: #fff6bf;
    background: linear-gradient(to top, #fff6bf 0%, #fffef7 100%);
}

.bp-checkout-coin-use-label {
    color: #6f6f6f;
    font-size: 18.4px;
    line-height: 1.2;
}

.bp-checkout-coin-use-row.is-enabled .bp-checkout-coin-use-label {
    color: #4a4a4a;
}

.bp-checkout-coin-use-value {
    color: #8f8f8f;
    font-size: 18.4px;
    line-height: 1.2;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
}

.bp-checkout-coin-use-row.is-enabled .bp-checkout-coin-use-value {
    color: #d82645;
    font-size: 18.4px;
    font-weight: 600;
}

.bp-checkout-payment-card {
    padding: 14px;
}

.bp-checkout-payment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.bp-checkout-payment-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #3f2b18;
    font-size: 18.4px;
}

.bp-checkout-payment-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

.bp-checkout-payment-title-icon img {
    width: 32px;
    height: 32px;
    display: block;
}

.bp-checkout-payment-view-all {
    border: 0;
    background: transparent;
    color: #8f8f8f;
    font-family: "Prompt", sans-serif;
    font-size: 18.4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 0;
    cursor: pointer;
}

.bp-checkout-payment-view-all i {
    font-size: 15px;
}

.bp-coupon-page,
.bp-payment-gateway-page,
.bp-payment-slip-page {
    min-height: 100vh;
    background: #efefef;
    padding-bottom: 0;
}

.bp-coupon-page {
    background: #efefef;
}

.bp-coupon-wrapper,
.bp-payment-gateway-wrapper,
.bp-payment-slip-wrapper {
    min-height: 100vh;
}

.bp-coupon-header,
.bp-payment-gateway-header,
.bp-payment-slip-header {
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    padding: 14px 16px 10px;
    background: #ffffff;
    border-bottom: 1px solid #ececec;
}

.bp-coupon-back-btn {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3f2b18;
}

.bp-coupon-header-title,
.bp-payment-gateway-title,
.bp-payment-slip-title {
    margin: 0;
    font-size: 22px;
    color: #593817;
    font-weight: 400;
    line-height: 1.2;
}

.bp-coupon-content {
    padding: 16px 0 100px;
    background: #ffffff;
    position: relative;
    z-index: 10;
    min-height: calc(100vh - 120px);
}

.bp-coupon-search-wrapper {
    padding: 0 16px 20px;
    background: #efefef;
}

.bp-payment-slip-content {
    flex: 1 1 auto;
    padding: 12px 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.bp-payment-slip-page {
    background-color: #efefef;
    background-image: none;
}

.bp-payment-slip-header {
    background: #efefef;
    border-bottom: 0;
}

.bp-payment-slip-card {
    width: 100%;
    max-width: 372px;
    border: 1px solid #e3e3e3;
    border-radius: 24px;
    padding: 14px 14px 12px;
    box-shadow: 0 10px 24px rgba(24, 24, 24, 0.12);
}

.bp-payment-slip-card.bp-payment-slip-card-pattern {
    overflow: hidden;
    background-color: #ffffff;
    background-image: url("/imageMobile/slipParttern.png");
    background-repeat: repeat;
    background-size: 246px auto;
    background-position: top left;
}

.bp-payment-slip-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin: 0 auto 6px;
}

.bp-payment-slip-mascot {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.bp-payment-slip-brand-name {
    margin: 0;
    color: #5a3a1f;
    font-size: 13px;
    line-height: 1.3;
    font-family: "Prompt", sans-serif;
    font-weight: 600;
}

.bp-payment-slip-brand-sub {
    margin: 2px 0 0;
    color: #979797;
    font-size: 11px;
    line-height: 1.3;
    font-family: "Prompt", sans-serif;
}

.bp-payment-slip-qr {
    width: 96px;
    height: 96px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.bp-payment-slip-qr-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.bp-payment-slip-qr-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    width: 100%;
    height: 100%;
}

.bp-payment-slip-qr-grid span {
    border-radius: 1px;
    background: #f5f5f5;
}

.bp-payment-slip-qr-grid span.is-on {
    background: #101010;
}

.bp-payment-slip-success {
    margin: 0;
    text-align: center;
    color: #4f4f4f;
    font-family: "Prompt", sans-serif;
    font-size: 17px;
    line-height: 1.2;
}

.bp-payment-slip-time {
    margin: 2px 0 0;
    text-align: center;
    color: #969696;
    font-family: "Prompt", sans-serif;
    font-size: 12px;
    line-height: 1.3;
}

.bp-payment-slip-support {
    margin: 4px auto 0;
    width: fit-content;
    max-width: 100%;
    padding: 2px 12px 3px;
    border-radius: 4px;
    background: rgba(226, 226, 226, 0.72);
    text-align: center;
    color: #9a9a9a;
    font-family: "Prompt", sans-serif;
    font-size: 11px;
    line-height: 1.25;
}

.bp-payment-slip-amount {
    margin: 10px 0 0;
    text-align: center;
    color: #2fb83c;
    font-size: 44px;
    line-height: 1;
    font-family: "Mitr", sans-serif;
}

.bp-payment-slip-meta {
    margin-top: 10px;
    display: grid;
    gap: 6px;
}

.bp-payment-slip-meta p {
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.bp-payment-slip-meta span {
    color: #7f7f7f;
    font-size: 13px;
    line-height: 1.3;
    font-family: "Prompt", sans-serif;
}

.bp-payment-slip-meta strong {
    color: #646464;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 400;
    font-family: "Prompt", sans-serif;
    text-align: right;
}

.bp-payment-slip-divider {
    margin: 12px 0 8px;
    border-top: 1px dashed #e2e2e2;
}

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

.bp-payment-slip-order-list-title {
    margin: 0 0 6px;
    color: #656565;
    font-size: 14px;
    line-height: 1.25;
    font-family: "Prompt", sans-serif;
    font-weight: 600;
}

.bp-payment-slip-order {
    padding: 8px 0 10px;
}

.bp-payment-slip-order + .bp-payment-slip-order {
    border-top: 1px solid #d8d8d8;
}

.bp-payment-slip-order-title {
    margin: 0;
    color: #666666;
    font-family: "Prompt", sans-serif;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bp-payment-slip-order-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ececec;
    color: #8d8d8d;
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: "Prompt", sans-serif;
}

.bp-payment-slip-item {
    margin: 3px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.bp-payment-slip-item span {
    color: #6b6b6b;
    font-size: 13px;
    line-height: 1.3;
    font-family: "Prompt", sans-serif;
    font-weight: 400;
}

.bp-payment-slip-item strong {
    color: #6a6a6a;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 400;
    font-family: "Prompt", sans-serif;
    white-space: nowrap;
}

.bp-payment-slip-item-total {
    margin-top: 8px;
}

.bp-payment-slip-item-total span,
.bp-payment-slip-item-total strong {
    color: #666666;
    font-weight: 400;
}

.bp-payment-slip-summary {
    margin-top: 10px;
    border-top: 1px solid #ebebeb;
    padding-top: 8px;
    display: grid;
    gap: 5px;
}

.bp-payment-slip-summary p {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bp-payment-slip-summary span,
.bp-payment-slip-summary strong {
    color: #666666;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 400;
    font-family: "Prompt", sans-serif;
}

.bp-payment-slip-summary p.is-grand span,
.bp-payment-slip-summary p.is-grand strong {
    color: #2fa744;
    font-weight: 600;
}

.bp-payment-slip-lucky-image {
    margin: 12px -14px -12px;
    width: calc(100% + 28px);
    display: block;
}

.bp-payment-slip-share-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.bp-payment-slip-share-btn {
    border: 0;
    background: transparent;
    color: #8f8f8f;
    font-size: 13px;
    line-height: 1.2;
    font-family: "Prompt", sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
}

.bp-payment-gateway-content {
    flex: 1 1 auto;
    padding-bottom: 16px;
}

.bp-coupon-search-card {
    border-radius: 18px;
    background: #ffffff;
    border: none;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.bp-coupon-search-title {
    margin: 0 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17.2px;
    color: #553a1e;
    font-weight: 600;
    font-family: "Prompt", sans-serif;
}

.bp-coupon-search-title-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2fba38;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.bp-coupon-search-row {
    display: flex;
    margin-bottom: 12px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    overflow: hidden;
}

.bp-coupon-search-input {
    flex: 1;
    height: 44px;
    border: none;
    background: #ffffff;
    padding: 0 14px;
    color: #593817;
    font-size: 14.9px;
    font-family: "Prompt", sans-serif;
}

.bp-coupon-redeem-btn-inline {
    height: 44px;
    border: none;
    background: #c8cad4;
    padding: 0 16px;
    color: #ffffff;
    font-size: 14.9px;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bp-coupon-redeem-btn-inline i {
    font-size: 16px;
}

.bp-coupon-scan-btn {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: #e8f9ed;
    color: #2fba38;
    font-size: 16.1px;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bp-coupon-tabs {
    border-bottom: 1px solid #efefef;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: #ffffff;
}

.bp-coupon-tab {
    border: 0;
    background: transparent;
    padding: 8px 4px 10px;
    color: #979797;
    font-size: 18.4px;
    font-family: "Mitr", sans-serif;
    line-height: 1;
    position: relative;
    cursor: pointer;
}

.bp-coupon-tab-active {
    color: #553a1e;
}

.bp-coupon-tab-active::after {
    display: none;
}

.bp-coupon-promo-header {
    margin-top: 20px;
    padding: 0 16px;
}

.bp-coupon-promo-title {
    margin: 0;
    display: inline-block;
    color: #553a1e;
    font-size: 20.7px;
    font-family: "Mitr", sans-serif;
    font-weight: 600;
    line-height: 1.2;
    position: relative;
    padding-bottom: 8px;
}

.bp-coupon-promo-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #2fba38;
    border-radius: 2px;
}

.bp-coupon-group {
    margin-top: 24px;
    padding: 0 16px;
}

.bp-coupon-group-title {
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #553a1e;
    font-size: 18.4px;
    font-weight: 600;
    font-family: "Prompt", sans-serif;
}

.bp-coupon-group-title-between {
    width: 100%;
}

.bp-coupon-group-count {
    margin-left: auto;
    color: #979797;
    font-size: 14.9px;
    font-weight: 400;
}

.bp-coupon-group-title-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #2fba38;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.bp-coupon-item {
    border: 1px solid #d8d8d8;
    border-radius: 12px;
    background: #ffffff;
    min-height: 84px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    cursor: pointer;
    overflow: hidden;
}

.bp-coupon-item.is-selected {
    border-color: #2fba38;
}

.bp-coupon-discount-list {
    display: block;
}

.bp-coupon-discount-card {
    display: block;
    position: relative;
    margin-bottom: 16px;
    cursor: pointer;
    border-radius: 12px;
}

.bp-coupon-discount-card .bp-coupon-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.bp-coupon-discount-card.is-selected .bp-coupon-discount-inner {
    box-shadow: 0 0 0 2px #2fba38;
    border-radius: 12px;
}

.bp-coupon-discount-card.bp-coupon-card-disabled {
    cursor: not-allowed;
    opacity: 0.92;
}

.bp-coupon-discount-inner .postion-bottom {
    position: relative;
}

.bp-coupon-detail-body {
    font-size: 15px;
    padding: 0 4px 8px;
}

.bp-coupon-item-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.bp-coupon-item-icon {
    width: 100px;
    height: 84px;
    background: linear-gradient(135deg, #a4f4b8 0%, #2fba38 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bp-coupon-item-icon img {
    width: 60px;
    height: 60px;
    filter: brightness(0) invert(1);
}

.bp-coupon-item-text {
    flex: 1;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bp-coupon-item-name {
    color: #553a1e;
    font-family: "Prompt", sans-serif;
    font-size: 14.9px;
    font-weight: 600;
    line-height: 1.2;
}

.bp-coupon-item-desc {
    color: #2fba38;
    font-family: "Prompt", sans-serif;
    font-size: 12.7px;
    font-weight: 500;
}

.bp-coupon-item-meta {
    color: #979797;
    font-family: "Prompt", sans-serif;
    font-size: 11.5px;
    line-height: 1.4;
}

.bp-checkout-coupon-selected {
    margin: 10px 2px 0;
    font-family: "Prompt", sans-serif;
    font-size: 14px;
    color: #2fba38;
}

.bp-coupon-radio-wrapper {
    padding-right: 16px;
}

.bp-coupon-radio {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #d8d8d8;
    background: #ffffff;
}

.bp-coupon-item.is-selected .bp-coupon-radio {
    border-color: #2fba38;
    background: #2fba38;
    box-shadow: inset 0 0 0 4px #ffffff;
}

.bp-coupon-expand-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 0;
}

.bp-coupon-expand-text {
    color: #979797;
    font-size: 16.1px;
    font-family: "Prompt", sans-serif;
}

.bp-coupon-expand-icon {
    color: #979797;
    font-size: 20px;
}

.bp-coupon-item.is-disabled {
    background: #f5f5f5;
}

.bp-coupon-item-error {
    margin-top: 2px;
    color: #d65166;
    font-family: "Prompt", sans-serif;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bp-coupon-empty-text {
    margin: 4px 2px 0;
    color: #9a9a9a;
    font-family: "Prompt", sans-serif;
    font-size: 12px;
}

.bp-coupon-tab-count {
    opacity: 0.75;
    font-size: 11px;
}

.bp-coupon-collect-msg {
    margin-top: 8px;
    color: #c44;
    font-size: 12px;
    font-family: "Prompt", sans-serif;
}

#bp-coupon-items-shell.bp-coupon-items-collapsed {
    position: relative;
    max-height: 520px;
    overflow: hidden;
}

/* Collapsed overlay only on "จำนวนเยอะ" เห็นเป็นฉาก fade */
#bp-coupon-items-shell.bp-coupon-items-collapsed::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 56px;
    pointer-events: none;
    background: linear-gradient(transparent, #e9e9e9);
}

#bp-coupon-scan-dialog .bp-scan-dialog-inner {
    max-width: 92vw;
    width: min(360px, 100%);
}

#bp-coupon-scan-dialog .bp-scan-dialog-box {
    padding: 12px;
    text-align: center;
}

#bp-coupon-scan-dialog .bp-scan-dialog-title {
    font-family: "Prompt", sans-serif;
    font-size: 16px;
    color: #50463c;
    margin: 8px 0;
}

.bp-coupon-scan-video {
    width: 100%;
    max-height: 240px;
    border-radius: 10px;
    background: #000;
    display: block;
    margin: 8px auto;
}

#bp-coupon-scan-dialog .bp-scan-dialog-hint {
    font-size: 13px;
    color: #6f6258;
    margin: 10px 0;
}

.bp-coupon-expand-btn {
    width: 100%;
    border: 0;
    background: transparent;
    color: #969696;
    font-family: "Prompt", sans-serif;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
}

.bp-payment-gateway-footer,
.bp-payment-slip-footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: #ffffff;
    border-top: 1px solid #e8e8e8;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
}

.bp-coupon-footer {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 40;
    width: min(100%, 480px);
    transform: translateX(-50%);
    background: #ffffff;
    border-top: 1px solid #e8e8e8;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
}

/* Coupon page visual tuning (match provided mockup) */
.bp-coupon-page {
    background: #e9e9e9;
}

.bp-coupon-header {
    min-height: 56px;
    padding: 16px;
    background: #efefef;
    border-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.bp-coupon-header-title {
    margin: 0;
    font-size: 24.1px;
    color: #553a1e;
    font-family: "Prompt", sans-serif;
    font-weight: 600;
}

.bp-coupon-back-btn {
    position: absolute;
    left: 16px;
    color: #553a1e;
    font-size: 20px;
}

.bp-coupon-content {
    padding: 10px 12px 110px;
}

.bp-coupon-search-card {
    border-radius: 18px;
    background: #ffffff;
    border: none;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.bp-coupon-search-input,
.bp-coupon-scan-btn {
    background: #ececec;
    border: 0;
    height: 36px;
}

.bp-coupon-redeem-btn {
    height: 36px;
    border-radius: 8px;
    background: #b7dcc5;
    color: #2fb83c;
}

.bp-coupon-tabs {
    margin-top: 14px;
}

.bp-coupon-tab {
    font-size: 24px;
}

.bp-coupon-group-title {
    margin-bottom: 10px;
}

.bp-coupon-item {
    min-height: 82px;
    background: #f7f7f7;
    border: 1px solid #9ddca5;
    border-radius: 8px;
}

.bp-coupon-item-name {
    font-size: 16px;
    color: #5c3e22;
}

.bp-coupon-item-desc {
    font-size: 12px;
    color: #2fb83c;
}

.bp-coupon-item-meta {
    font-size: 10px;
}

.bp-coupon-item-error {
    margin-top: 0;
    color: #2fb83c;
    font-size: 10px;
}

.bp-coupon-item.is-disabled {
    opacity: 0.95;
}

.bp-coupon-expand-btn {
    margin: 0;
    color: #8b8b8b;
    font-size: 19px;
}

.bp-coupon-footer {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 100;
    width: min(100%, 480px);
    transform: translateX(-50%);
    background: #ffffff;
    padding: 16px;
}

.bp-coupon-footer .bp-order-next-btn {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 12px;
    background: #2fba38;
    color: #ffffff;
    font-size: 18.4px;
    font-family: "Mitr", sans-serif;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bp-payment-gateway-footer {
    margin-top: auto;
}

.bp-payment-slip-footer {
    margin-top: auto;
    display: grid;
    gap: 10px;
    background: #efefef;
    border-top: 0;
}

.bp-payment-gateway-label {
    margin: 0 0 12px;
    color: #6f6f6f;
    font-size: 15px;
    font-family: "Prompt", sans-serif;
}

.bp-payment-gateway-list {
    display: grid;
    gap: 12px;
}

.bp-payment-gateway-item {
    display: block;
    cursor: pointer;
}

.bp-payment-gateway-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bp-payment-gateway-item-main {
    min-height: 54px;
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    background: #ffffff;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bp-payment-gateway-icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #ecf2ff;
    color: #335c9c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.bp-payment-gateway-name {
    color: #5a3a1f;
    font-size: 17px;
    font-family: "Prompt", sans-serif;
    flex: 1;
}

.bp-payment-gateway-check {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #2fba38;
    color: #ffffff;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.bp-payment-gateway-item input:checked + .bp-payment-gateway-item-main {
    border: 2px solid #2fba38;
}

.bp-payment-gateway-item
    input:checked
    + .bp-payment-gateway-item-main
    .bp-payment-gateway-check {
    opacity: 1;
}

.bp-payment-slip-status-btn {
    border-color: #d7f3dd;
    background: #d7f3dd;
    color: #56a166;
}

.bp-checkout-branch-box {
    min-height: 52px;
    border: 1px solid #d0d0d0;
    border-radius: 14px;
    background: #f6f6f6;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bp-checkout-branch-name {
    font-family: "Prompt", sans-serif;
    color: #656565;
    font-size: 18.4px;
}

a.bp-checkout-branch-edit {
    color: #2fba38 !important;
    text-decoration: underline !important;
    font-size: 17.2px;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    white-space: nowrap;
}

.bp-checkout-methods {
    display: grid;
    gap: 10px;
}

.bp-checkout-method {
    position: relative;
    display: block;
    cursor: pointer;
}

.bp-checkout-method-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 14px;
    border: 2px solid #ececec;
    border-radius: 14px;
    background: #ffffff;
    font-family: "Prompt", sans-serif;
    color: #3f2b18;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.bp-checkout-method input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bp-checkout-method-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #737373;
    font-size: 13px;
    font-family: "Prompt", sans-serif;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bp-checkout-method-text {
    font-size: 19px;
    line-height: 1.3;
    flex: 1;
}

.bp-checkout-method-check {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 2px solid #d8d8d8;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    transform: scale(0.85);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.bp-checkout-method input:checked + .bp-checkout-method-content {
    border-color: #31c03f;
    box-shadow: 0 0 0 1px #31c03f inset;
}

.bp-checkout-method
    input:checked
    + .bp-checkout-method-content
    .bp-checkout-method-check {
    opacity: 1;
    transform: scale(1);
    border-color: #31c03f;
    background: #31c03f;
}

.bp-checkout-method input:focus-visible + .bp-checkout-method-content {
    box-shadow: 0 0 0 2px #9fdba5;
}

.bp-checkout-tip-frame {
    position: relative;
    margin-top: -8px;
    margin-bottom: 10px;
    border-radius: 22px;
    border: none;
    background: transparent;
    overflow: hidden;
}

.bp-checkout-tip-visual {
    position: relative;
    z-index: 1;
}

.bp-checkout-tip-frame img {
    width: 103.5%;
    height: auto;
    display: block;
}

.bp-checkout-tip-controls {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 50px;
    z-index: 2;
    margin: 0;
    display: grid;
    gap: 20px;
}

.bp-checkout-tip-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.bp-checkout-tip-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 2px dashed #cfd3d9;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.74);
    color: #737579;
    font-family: var(--bp-font-body) !important;
    font-size: 19.5px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    padding: 4px;
    cursor: pointer;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.bp-checkout-tip-option-label {
    color: inherit;
}

.bp-checkout-tip-option.is-active {
    border-style: solid;
    border-color: rgba(119, 198, 103, 0.9);
    background: rgba(255, 255, 255, 0.52);
    color: #4d5f42;
    box-shadow: 0 0 0 2px rgba(119, 198, 103, 0.62) inset;
}

.bp-checkout-tip-input-wrap {
    position: relative;
    display: block;
}

.bp-checkout-tip-input {
    width: 100%;
    box-sizing: border-box;
    height: 52px;
    border: 2px solid #c7ccc6;
    border-radius: 14px;
    background: rgba(247, 247, 247, 0.85);
    color: #717171;
    font-family: var(--bp-font-body) !important;
    font-size: 15px;
    padding: 0 64px 0 24px;
}

.bp-checkout-tip-input::placeholder {
    color: #b8b8b8;
    opacity: 1;
    font-family: var(--bp-font-body) !important;
}

.bp-checkout-tip-input::-webkit-input-placeholder {
    color: #b8b8b8;
    font-family: var(--bp-font-body) !important;
}

.bp-checkout-tip-input:focus-visible {
    outline: none;
    border-color: #8dc877;
    box-shadow: 0 0 0 2px rgba(143, 211, 126, 0.35) inset;
}

.bp-checkout-tip-input-icon {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.78;
}

.bp-checkout-tip-input-icon img {
    display: block;
    width: 21px;
    height: 21px;
    object-fit: contain;
    filter: grayscale(1) brightness(0.55);
}

@media (max-width: 420px) {
    .bp-checkout-tip-controls {
        left: 14px;
        right: 14px;
        bottom: 10px;
        gap: 8px;
    }

    .bp-checkout-tip-option {
        min-height: 50px;
        font-size: 18.4px;
    }

    .bp-checkout-tip-input {
        height: 48px;
        padding-left: 18px;
        padding-right: 56px;
    }
}

.bp-checkout-payment-preview {
    margin-top: 10px;
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
    background: #f8f8f8;
}

.bp-checkout-payment-preview img {
    width: 100%;
    height: auto;
    display: block;
}

.bp-checkout-footer {
    display: grid;
    gap: 10px;
}

.bp-checkout-summary-card {
    border-radius: 22px;
    background: #ffffff;
    padding: 14px;
}

.bp-checkout-summary-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #3f2b18;
    font-size: 18.4px;
}

.bp-checkout-summary-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

.bp-checkout-summary-title-icon img {
    width: 32px;
    height: 32px;
    display: block;
}

.bp-checkout-summary-orders {
    display: grid;
    gap: 8px;
    margin: 12px 0 10px;
}

.bp-checkout-summary-order-group {
    display: grid;
    gap: 8px;
}

.bp-checkout-summary-order {
    border: 0;
    background: transparent;
    padding: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #3f2b18;
    font-family: "Prompt", sans-serif;
    cursor: pointer;
}

.bp-checkout-summary-order-left {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.bp-checkout-summary-order-badge {
    width: 33px;
    height: 33px;
    border-radius: 999px;
    background: #2fba38;
    color: #ffffff;
    font-size: 17.2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.bp-checkout-summary-order-label {
    font-size: 16.1px;
    line-height: 1.2;
}

.bp-checkout-summary-order-right {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.bp-checkout-summary-order-price {
    font-size: 16.1px;
    line-height: 1.2;
    color: #2fba38;
}

.bp-checkout-summary-order-right i {
    font-size: 14px;
    color: #b8b8b8;
}

.bp-checkout-summary-order-details[hidden] {
    display: none;
}

.bp-checkout-summary-order-details {
    display: grid;
    gap: 6px;
    transition:
        max-height 0.24s ease,
        opacity 0.2s ease;
}

.bp-checkout-summary-order-group:not(:last-child)
    .bp-checkout-summary-order[aria-expanded="true"]
    + .bp-checkout-summary-order-details {
    padding-bottom: 10px;
    border-bottom: 1px solid #ededed;
}

.bp-checkout-summary-detail-line {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #3f2b18;
    font-size: 16.1px;
    font-family: "Prompt", sans-serif;
}

.bp-checkout-summary-detail-line strong {
    font-weight: 400;
}

.bp-checkout-summary-detail-line-total {
    margin-top: 4px;
}

.bp-checkout-summary-detail-line-total strong {
    color: #2fb83c;
}

.bp-checkout-summary-lines {
    display: grid;
    gap: 8px;
    margin-top: 4px;
}

.bp-checkout-summary-line {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #3f2b18;
    font-size: 16.1px;
    font-family: "Prompt", sans-serif;
}

.bp-checkout-summary-line strong {
    font-weight: 400;
}

.bp-checkout-summary-value-discount {
    color: #d03770;
}

.bp-checkout-summary-line-total {
    margin-top: 2px;
    font-size: 18.4px;
}

.bp-checkout-summary-value-total {
    color: #2fb83c;
}

/* —— หน้าเลือกโปรแกรมออเดอร์ —— */
.bp-program-page {
    background: #e9e9e9;
    color: var(--bp-color-black);
    min-height: 100vh;
}

.bp-program-container {
    max-width: 420px;
    margin: 0 auto;
    background: #efefef;
    min-height: 100vh;
    padding-bottom: calc(var(--bp-program-footer-height, 112px) + 16px);
}

.bp-program-header {
    padding: 16px 14px 12px;
    background: #efefef;
    border-bottom: 1px solid #dfdfdf;
}

.bp-program-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.bp-program-ring {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid #e9ecef;
    border-top-color: var(--color-green);
    border-right-color: var(--color-green);
    display: grid;
    place-items: center;
    font-size: 13.8px;
    font-weight: 400;
    color: var(--color-green);
}

.bp-program-title {
    font-size: 20.7px;
    font-weight: 400;
    margin: 0 0 4px;
    color: var(--color-brow);
}

.bp-program-subtitle {
    margin: 0;
    font-size: 13.8px;
    color: var(--bp-color-muted);
}

.bp-program-order-chip {
    margin-top: 8px;
    background: #eaf8ec;
    color: #208736;
    padding: 4px 10px;
    font-size: 13.8px;
    font-weight: 400;
}

.bp-program-section {
    margin: 10px 10px 0;
    padding: 14px 12px 12px;
    border: 1px solid #e7e7e7;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.bp-program-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.bp-program-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 999px;
    background: #eef7ef;
    color: var(--color-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13.8px;
    font-weight: 400;
}

.bp-program-icon:has(> img) {
    width: 24px;
    height: 24px;
    background: transparent;
}

.bp-program-icon > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bp-program-label {
    font-size: 17.2px;
    font-weight: 400;
}

.bp-program-required {
    color: var(--bp-color-danger);
}

.bp-program-tip {
    margin: 10px 5px 0;
}

.bp-program-tip-image {
    width: 100%;
    height: auto;
    display: block;
    padding: 10px 5px 0;
}

.bp-program-upload {
    border-radius: var(--bp-radius-lg);
    overflow: hidden;
    border: 1px solid #d2d2d2;
    background: #ffffff;
}

.bp-program-upload-preview {
    aspect-ratio: 16 / 10;
    background: #d9d9d9;
    display: grid;
    place-items: center;
    padding: 12px;
}

.bp-program-upload-preview span {
    color: #7c8792;
    font-size: 14.9px;
}

.bp-program-upload-placeholder {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.bp-program-upload-placeholder-icon {
    font-size: 25.3px;
    line-height: 1;
    color: var(--color-green);
}

.bp-program-upload-placeholder-text {
    font-size: 14.9px;
    color: #2fba38;
    background: #d8fde8;
    padding: 10px 18px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.bp-program-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #d0d0d0;
    background: #ffffff;
}

.bp-program-upload-dashed .bp-program-preview-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: none;
    border-radius: 0;
    margin: 0;
}

.bp-program-upload-dashed .bp-program-preview-image:not([hidden]) {
    display: block;
}

.bp-program-upload-bar {
    padding: 12px;
    display: flex;
    justify-content: center;
}

.bp-program-btn-green {
    border-radius: 999px;
    padding: 10px 20px;
    font-weight: 400;
    min-height: 44px;
    height: auto;
}

.bp-program-form-error {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: var(--bp-radius-lg);
    background: #fdeaea;
    color: #c62828;
    font-size: 16.1px;
    line-height: 1.4;
}

.bp-program-api-unavailable {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 16px;
    padding: 16px 18px;
    border-radius: 15px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
}

.bp-program-api-unavailable__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    font-size: 22px;
    line-height: 1;
    color: #b91c1c;
}

.bp-program-api-unavailable__text {
    min-width: 0;
}

.bp-program-api-unavailable__text p {
    margin: 0;
}

.bp-program-api-unavailable__text p + p {
    margin-top: 4px;
}

.bp-program-upload-stack {
    position: relative;
}

.bp-program-upload-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    margin: 0;
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    font-size: 14.9px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.bp-program-upload-remove--icon:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
}

.bp-program-upload-remove--icon .bp-program-upload-remove-icon {
    display: block;
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
    transform: scale(1.12);
    transform-origin: center;
}

.bp-program-upload-remove:hover {
    background: rgba(0, 0, 0, 0.72);
}

.bp-program-upload-remove:focus-visible {
    outline: 2px solid var(--color-green, #37bb3f);
    outline-offset: 2px;
}

.bp-program-upload-dashed {
    position: relative;
    display: block;
    overflow: hidden;
    border: 2px solid #bfc1c4;
    border-radius: var(--bp-radius-lg);
    aspect-ratio: 16 / 10;
    min-height: 180px;
    max-height: 52vh;
    color: var(--color-green);
    background: #ffffff;
    font-weight: 400;
    padding: 0;
    cursor: pointer;
}

.bp-program-upload-dashed .bp-program-upload-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    text-align: center;
}

.bp-program-upload-dashed .bp-program-upload-placeholder[hidden] {
    display: none !important;
}

.bp-program-upload-dashed .bp-order-upload-icon img {
    display: block;
    width: auto;
    height: 40px;
    max-width: 100%;
    object-fit: contain;
}

.bp-program-option-list {
    display: grid;
    gap: 10px;
}

.bp-program-option,
.bp-program-card {
    border: 1px solid #dcdcdc;
    background: var(--bp-color-white);
    cursor: pointer;
}

.bp-program-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--bp-radius-lg);
    transition:
        border-color 0.15s,
        opacity 0.15s;
}

.bp-program-option.selected,
.bp-program-card.selected {
    border-color: #41b551;
    box-shadow: 0 0 0 1px var(--color-green);
}

.bp-program-option.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.bp-program-option-thumb,
.bp-program-drop {
    background: #f3f3f3;
    color: #75828d;
    font-size: 13.8px;
    font-weight: 400;
}

.bp-program-option-thumb {
    width: 56px;
    height: 56px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
}

.bp-program-option-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.bp-program-option.disabled .bp-program-option-thumb img {
    filter: grayscale(1);
}

.bp-program-option-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.bp-program-option-title {
    font-size: 14.9px;
    font-weight: 400;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
}

.bp-program-option-desc {
    margin-top: 0;
    font-size: 12.7px;
    font-weight: 400;
    color: var(--bp-color-muted);
}

.bp-program-programs-empty {
    margin: 0;
}

.bp-program-programs-empty[hidden] {
    display: none !important;
}

.bp-program-programs-empty-box {
    border: 2px dashed #bfc1c4;
    border-radius: var(--bp-radius-lg);
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 16px;
    background: #ffffff;
    text-align: center;
}

.bp-program-programs-empty-icon img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.bp-program-programs-empty-text {
    margin: 0;
    font-size: 14.9px;
    font-weight: 400;
    line-height: 1.45;
    color: #2fba38;
    max-width: 280px;
}

.bp-program-cards[hidden] {
    display: none !important;
}

.bp-program-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.bp-program-card {
    border-radius: var(--bp-radius-lg);
    padding: 8px 6px;
    text-align: center;
    position: relative;
}

.bp-program-drop {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin: 0 auto 6px;
    display: grid;
    place-items: center;
}

.bp-program-card .bp-program-drop {
    width: 50px;
    height: 51px;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 0;
    font-weight: inherit;
}

.bp-program-card .bp-program-drop img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.bp-program-name {
    font-size: 12.7px;
    font-weight: 400;
    margin-bottom: 4px;
}

.bp-program-card .bp-program-badge {
    position: absolute;
    top: 6px;
    right: 6px;
}

.bp-program-card .bp-program-card-sale-badge {
    top: -18px;
    right: 5px;
    left: auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px 2px 4px;
    border-radius: 8px 8px 0 0;
    background: #e02a48;
    color: #ffffff;
    font-size: 10.3px;
    font-weight: 700;
    line-height: 1.15;
    box-shadow: 0 2px 6px rgba(224, 42, 72, 0.35);
}

.bp-program-card-sale-badge__icon {
    display: block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.bp-program-card-sale-badge__text {
    color: #ffffff;
}

.bp-program-price {
    font-size: 12.7px;
}

.bp-program-card .bp-program-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.bp-program-price-old {
    text-decoration: line-through;
    color: var(--bp-color-danger);
    margin-right: 4px;
}

.bp-program-card .bp-program-price-old {
    margin-right: 0;
    font-size: 12.7px;
    font-weight: 400;
}

.bp-program-price-new {
    font-weight: 400;
}

.bp-program-card .bp-program-price-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.5em;
    padding: 5px 12px;
    border-radius: 999px;
    background: #37bb3f;
    color: #ffffff;
    font-size: 14.9px;
    font-weight: 700;
    line-height: 1.2;
}

.bp-program-extra {
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid #e9ecef;
    border-radius: var(--bp-radius-lg);
    margin-bottom: 6px;
    background: #ffffff;
    cursor: pointer;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}

.bp-program-extra.selected {
    border-color: #41b551;
    box-shadow: 0 0 0 1px var(--color-green);
}

.bp-program-pill {
    background: var(--color-green);
    color: #fff;
    font-weight: 400;
    font-size: 14.9px;
    padding: 4px 10px;
    border-radius: 999px;
}

.bp-program-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 420px;
    margin: 0 auto;
    background: #ffffff;
    border-top: 1px solid #d9d9d9;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    z-index: 40;
}

.bp-program-total {
    text-align: center;
    font-size: 13.8px;
    font-weight: 400;
    margin: 0 0 10px;
}

.bp-program-total span {
    color: inherit;
}

.bp-program-submit {
    width: 100%;
    padding: 12px;
    font-size: 16.1px;
    font-weight: 400;
    min-height: 46px;
    height: auto;
    border-radius: 10px;
}

/* Full-screen branch map (Browny+ create order) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bp-branch-map-dialog {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10060;
    flex-direction: column;
    background: #e8e8e8;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
}

.bp-branch-map-dialog--open {
    display: flex;
}

.bp-branch-map-dialog__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.bp-branch-map-dialog__back {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #f3f3f3;
    color: #3f2b18;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bp-branch-map-dialog__search {
    flex: 1;
    min-width: 0;
    height: 40px;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 16.1px;
    color: #333;
}

.bp-branch-map-dialog__map {
    flex: 1;
    min-height: 200px;
    width: 100%;
    position: relative;
}

.bp-branch-map-dialog__locate {
    position: absolute;
    bottom: 118px;
    right: 14px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: #ffffff;
    color: #555;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.bp-branch-map-dialog__card {
    position: absolute;
    bottom: 16px;
    right: 12px;
    left: auto;
    width: min(300px, calc(100% - 24px));
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #31c03f 0%, #28a835 100%);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.bp-branch-map-dialog__card-body {
    flex: 1;
    min-width: 0;
}

.bp-branch-map-dialog__brand {
    font-family: inherit;
    font-size: 23px;
    font-weight: 700;
    color: #5c3d1f;
    letter-spacing: 0.02em;
    display: block;
    line-height: 1.1;
}

.bp-branch-map-dialog__distance {
    margin: 6px 0 2px;
    font-size: 13.8px;
    font-weight: 400;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.98);
}

.bp-branch-map-dialog__store {
    margin: 0;
    font-size: 12.7px;
    font-weight: 400;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.92);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bp-branch-map-dialog__card-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.25);
}

a.bp-order-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

/* Full-page branch map + search list */
.bp-branch-map-page {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    background: #dfe4e8;
}

.bp-branch-map-page__map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.bp-branch-map-page__sheet {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    max-height: none;
    margin: 10px 10px 0;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.14);
}

.bp-branch-map-page__sheet--list-open {
    max-height: min(52vh, 420px);
}

.bp-branch-map-page__banner {
    margin: 0;
    padding: 9px 12px;
    font-size: 13.8px;
    line-height: 1.4;
    color: #7a5a2a;
    background: #fff8e6;
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid #f0e6d0;
}

.bp-branch-map-page__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 8px;
    flex-shrink: 0;
}

.bp-branch-map-page__back {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3f2b18;
    flex-shrink: 0;
}

.bp-branch-map-page__search {
    flex: 1;
    min-width: 0;
    height: 42px;
    border: 1px solid #d8d8d8;
    border-radius: 12px;
    padding: 0 12px;
    font-size: 17.2px;
    color: #333;
}

.bp-branch-map-page__mic {
    width: 36px;
    color: #8f8f8f;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.45;
    pointer-events: none;
}

.bp-branch-map-page__results {
    flex: 1;
    min-height: 0;
    max-height: 38vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid #eee;
}

.bp-branch-map-page__results--collapsed {
    display: none;
    max-height: 0;
    overflow: hidden;
    border-top: 0;
    flex: 0 0 auto;
}

.bp-branch-map-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding: 11px 12px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

.bp-branch-map-result-row:active {
    background: #f7f7f7;
}

.bp-branch-map-result-row__icon {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    overflow: hidden;
    background: #e8f8ea;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bp-branch-map-result-row__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bp-branch-map-result-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bp-branch-map-result-row__name {
    font-size: 16.1px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
}

.bp-branch-map-result-row__status {
    font-size: 13.8px;
    color: #31c03f;
    font-weight: 600;
}

.bp-branch-map-result-row__status--full {
    color: #999;
    font-weight: 400;
}

.bp-branch-map-result-row__dist {
    font-size: 14.9px;
    color: #555;
    flex-shrink: 0;
    white-space: nowrap;
}

.bp-branch-map-page__empty {
    padding: 18px 14px;
    text-align: center;
    font-size: 14.9px;
    color: #888;
}

.bp-branch-map-page__nearest-card {
    position: absolute;
    bottom: 16px;
    right: 12px;
    left: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    border: none;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background: linear-gradient(135deg, #31c03f 0%, #28a835 100%);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    max-width: 100%;
}

.bp-branch-map-page__nearest-card:active {
    opacity: 0.94;
}

.bp-branch-map-page__nearest-text {
    flex: 1;
    min-width: 0;
}

.bp-branch-map-page__nearest-brand {
    font-size: 23px;
    font-weight: 700;
    color: #5c3d1f;
    letter-spacing: 0.02em;
    display: block;
    line-height: 1.1;
}

.bp-branch-map-page__nearest-distance {
    margin: 6px 0 2px;
    font-size: 13.8px;
    font-weight: 400;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.98);
}

.bp-branch-map-page__nearest-store {
    margin: 0;
    font-size: 12.7px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.92);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bp-branch-map-page__nearest-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.25);
}

.bp-branch-map-page__locate {
    position: absolute;
    bottom: 118px;
    right: 14px;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 999px;
    background: #ffffff;
    color: #555;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    cursor: pointer;
}

.bp-branch-map-page__locate:active {
    opacity: 0.92;
}

/* Store detail sheet (same markup/classes as home map-data; sits above map + nearest card) */
.bp-branch-map-page .bp-branch-map-page__store-panel.map-data {
    z-index: 5;
    pointer-events: auto;
    width: calc(100% - 20px);
    max-width: 100%;
    box-sizing: border-box;
}

/* Home uses #google_map_link img { width: 56px }; branch map uses #bp_map_google_link — fix overflow + clip */
.bp-branch-map-page .bp-branch-map-page__store-panel.map-data .map-store {
    display: flex;
    align-items: flex-start;
    height: auto;
    min-height: 0;
    max-height: min(48vh, 320px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding: 10px;
}

.bp-branch-map-page
    .bp-branch-map-page__store-panel.map-data
    .map-store
    .store-data {
    display: block;
    flex: 1 1 50%;
    min-width: 0;
    width: auto;
    padding: 0 8px;
    vertical-align: top;
    box-sizing: border-box;
}

.bp-branch-map-page
    .bp-branch-map-page__store-panel.map-data
    .map-store
    .store-data:first-of-type {
    border-right: 1px solid #ccc;
}

.bp-branch-map-page .bp-branch-map-page__store-panel .store-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 88px;
    object-fit: cover;
}

.bp-branch-map-page .bp-branch-map-page__store-panel .store-route {
    font-size: 11.5px;
    line-height: 1.4;
    margin-bottom: 8px;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.bp-branch-map-page .bp-branch-map-page__store-panel .star-score {
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 4px;
}

.bp-branch-map-page .bp-branch-map-page__store-panel #bp_map_google_link {
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}

.bp-branch-map-page .bp-branch-map-page__store-panel #bp_map_google_link img {
    width: 56px;
    max-width: min(56px, 100%);
    height: auto;
    display: block;
}

.bp-branch-map-page .bp-branch-map-page__store-panel .store-name {
    word-break: break-word;
    line-height: 1.3;
}

.bp-branch-map-page .bp-branch-map-page__store-panel .store-mac-title {
    font-size: 13.8px;
    line-height: 1.2;
}

.bp-branch-map-page .bp-branch-map-page__store-panel .store-mac-count {
    font-size: 20.7px;
}

.bp-branch-map-page .bp-branch-map-page__store-panel .store-mac-count span {
    font-size: 27.6px;
}

.bp-branch-map-page
    .bp-branch-map-page__store-panel.map-data.active
    ~ .bp-branch-map-page__nearest-card {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}

.bp-branch-map-page .bp-branch-map-page__nearest-card {
    transition: opacity 0.25s ease;
}

/* ราคาในหน้ากลุ่ม resources/views/order ให้ใช้ Prompt */
.bp-order-page [class*="price"],
.bp-order-page .bp-price-main,
.bp-order-page .bp-price-decimal,
.bp-order-page .bp-payment-slip-amount,
.bp-order-page .bp-checkout-summary-value-discount,
.bp-order-page .bp-checkout-summary-value-total,
.bp-order-page .bp-payment-slip-item strong,
.bp-order-page .bp-payment-slip-summary strong,
.bp-order-page .bp-work-price,
.bp-program-page [class*="price"],
.bp-program-page .bp-price-main,
.bp-program-page .bp-price-decimal {
    font-family: "Prompt", sans-serif;
}

/* Browny Plus — หน้าการทำงาน (สถานะซัก อบ พับ) — UI อ้างอิงม็อก 724 */
.bp-work-page {
    --bp-work-page-bg: #f8f8f8;
    --bp-work-card-bg: #ffffff;
    --bp-work-text: #2d2d2d;
    --bp-work-text-secondary: #555555;
    --bp-work-text-muted: #757575;
    --bp-work-border: #eeeeee;
    --bp-work-green: #31c03f;
    --bp-work-green-icon: #2fb83c;
    --bp-work-input-bg: #f2f2f2;
    --bp-work-status-warm: #fff8e8;
    --bp-work-mint: #dff6e5;
    --bp-work-mint-text: #1a6b2e;

    background: var(--bp-work-page-bg);
    padding-bottom: 24px;
    font-family: var(--bp-font-body);
    color: var(--bp-work-text);
    font-weight: 400;
}

.bp-work-page .bp-btn {
    font-family: var(--bp-font-body);
    font-weight: 400;
}

.bp-work-page .bp-coupon-back-btn {
    font-family: var(--bp-font-body);
}

.bp-work-wrapper {
    position: relative;
}

.bp-work-header {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    padding: 10px 4px 8px;
    background: var(--bp-work-card-bg);
    border-bottom: 1px solid var(--bp-work-border);
}

.bp-work-header .bp-coupon-back-btn {
    grid-column: 1;
    justify-self: start;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    color: var(--bp-work-text-secondary);
}

.bp-work-title {
    grid-column: 2;
    margin: 0;
    text-align: center;
    font-size: 19px;
    font-weight: 500;
    color: var(--bp-work-text);
    letter-spacing: 0.01em;
}

.bp-work-hero {
    line-height: 0;
    background: #f0f0f0;
}

.bp-work-hero-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 220px;
}

.bp-work-card {
    position: relative;
    margin: -20px 0 0;
    padding: 22px 16px 28px;
    background: var(--bp-work-card-bg);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.04);
}

.bp-work-service-name {
    margin: 0 0 16px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: var(--bp-work-text);
    letter-spacing: 0.02em;
}

.bp-work-status-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 400;
}

.bp-work-status-pill--pending {
    background: var(--bp-work-input-bg);
    color: var(--bp-work-text-secondary);
}

.bp-work-status-pill--progress {
    background: var(--bp-work-status-warm);
    color: #5c4a28;
}

.bp-work-status-pill--complete {
    background: #e8f5e9;
    color: #1b5e20;
}

.bp-work-status-pill--complete .bp-work-status-pill-icon {
    color: #2e7d32;
}

.bp-work-status-pill-icon {
    display: flex;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    color: #c9a010;
}

.bp-work-status-pill--progress .bp-work-status-pill-icon {
    color: #c9a010;
}

.bp-work-status-pill--pending .bp-work-status-pill-icon {
    color: var(--bp-work-text-muted);
}

.bp-work-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 12px;
    font-size: 17px;
    font-weight: 500;
    color: var(--bp-work-text);
}

.bp-work-section-head:first-of-type {
    margin-top: 4px;
}

.bp-work-section-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: rgba(49, 192, 63, 0.14);
    color: var(--bp-work-green-icon);
    font-size: 13px;
}

.bp-work-section-icon--user {
    font-size: 14px;
}

.bp-work-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 16px 6px;
}

.bp-work-timeline-item {
    position: relative;
    display: flex;
    gap: 14px;
    padding-bottom: 18px;
    min-height: 56px;
}

.bp-work-timeline-item:last-child {
    padding-bottom: 0;
}

.bp-work-timeline-track {
    position: absolute;
    left: 18px;
    top: 42px;
    bottom: -2px;
    width: 2px;
    background: var(--bp-work-border);
    border-radius: 1px;
}

.bp-work-timeline-item:last-child .bp-work-timeline-track {
    display: none;
}

.bp-work-timeline-dot {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #e3e3e3;
    color: #8f8f8f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.bp-work-timeline-item.is-active .bp-work-timeline-dot {
    background: var(--bp-work-green);
    color: #fff;
}

.bp-work-timeline-item.is-done .bp-work-timeline-dot {
    background: #c5eec8;
    color: #1a7a24;
}

.bp-work-timeline-step-label {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--bp-work-text-muted);
    font-weight: 400;
}

.bp-work-timeline-item.is-active .bp-work-timeline-step-label {
    color: var(--bp-work-green);
}

.bp-work-timeline-step-title {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--bp-work-text-secondary);
    line-height: 1.35;
}

.bp-work-timeline-item.is-active .bp-work-timeline-step-title {
    color: var(--bp-work-text);
}

.bp-work-timeline-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 400;
    background: var(--bp-work-input-bg);
    color: var(--bp-work-text-secondary);
    vertical-align: middle;
}

.bp-work-block {
    margin-top: 0;
    padding-top: 18px;
    padding-bottom: 2px;
    border-top: 1px solid var(--bp-work-border);
}

.bp-work-block--flush {
    padding-top: 12px;
    border-top: none;
}

.bp-work-label {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: var(--bp-work-text-muted);
    margin-bottom: 6px;
}

.bp-work-required {
    color: #e53935;
    margin-left: 2px;
}

.bp-work-input-readonly {
    background: var(--bp-work-input-bg);
    border: none;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 16px;
    font-weight: 400;
    color: var(--bp-work-text-secondary);
}

.bp-work-field + .bp-work-field {
    margin-top: 12px;
}

.bp-work-photo-placeholder {
    border: 1px dashed #d8d8d8;
    border-radius: 12px;
    background: #fafafa;
    padding: 28px 20px;
    text-align: center;
    color: var(--bp-work-text-muted);
    font-size: 15px;
    line-height: 1.45;
}

.bp-work-photo-placeholder-icon {
    display: flex;
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: 10px;
    background: var(--bp-work-input-bg);
    align-items: center;
    justify-content: center;
    color: var(--bp-work-text-muted);
    font-size: 22px;
}

.bp-work-basket-photo {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--bp-work-border);
    background: #f5f5f5;
}

.bp-work-basket-photo img {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
}

.bp-work-details {
    margin: 0;
    padding: 18px 0 0;
    border: none;
    border-radius: 0;
    border-top: 1px solid var(--bp-work-border);
    background: transparent;
}

.bp-work-details-static-title {
    margin: 0 0 4px;
    padding: 0 0 12px;
    font-size: 17px;
    font-weight: 500;
    color: var(--bp-work-text);
    border-bottom: 1px solid var(--bp-work-border);
}

.bp-work-details--static .bp-work-details-body {
    padding-top: 4px;
}

.bp-work-details-summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--bp-work-text-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bp-work-details-summary::-webkit-details-marker {
    display: none;
}

.bp-work-details-chevron {
    font-size: 13px;
    color: var(--bp-work-text-muted);
    transition: transform 0.2s ease;
}

.bp-work-details[open] > .bp-work-details-summary .bp-work-details-chevron {
    transform: rotate(180deg);
}

.bp-work-details-body {
    padding: 0 0 8px;
}

.bp-work-details--nested {
    margin: 12px 0 0;
    border: 1px solid var(--bp-work-border);
    border-radius: 12px;
    background: #fafafa;
}

.bp-work-details-summary--small {
    font-size: 15px;
    padding: 12px 14px;
}

.bp-work-nested-panel {
    padding: 0 12px 12px;
}

.bp-work-block--flush + .bp-work-block--flush {
    margin-top: 0;
    padding-top: 20px;
    border-top: none;
}

.bp-work-kv-stack {
    margin: 0;
}

.bp-work-kv-group + .bp-work-kv-group {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bp-work-border);
}

.bp-work-kv-group--block-end {
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--bp-work-border);
}

.bp-work-kv-group--nested {
    margin: 0;
    padding: 0;
    border: none;
}

.bp-work-kv {
    margin: 0;
}

.bp-work-kv-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: none;
    font-size: 15px;
}

.bp-work-kv-row:first-child {
    padding-top: 0;
}

.bp-work-kv-row:last-child {
    padding-bottom: 0;
}

.bp-work-kv-row dt {
    margin: 0;
    flex: 0 0 46%;
    color: var(--bp-work-text-muted);
    font-weight: 400;
}

.bp-work-kv-row dd {
    margin: 0;
    text-align: right;
    color: var(--bp-work-text);
    font-weight: 400;
}

.bp-work-kv-row--order dd {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.bp-work-order-ref {
    word-break: break-all;
}

.bp-work-copy-btn {
    flex-shrink: 0;
    border: none;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 400;
    background: var(--bp-work-mint);
    color: var(--bp-work-mint-text);
    cursor: pointer;
}

.bp-work-payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 15px;
}

.bp-work-payment-label {
    color: var(--bp-work-text-muted);
    font-weight: 400;
}

.bp-work-payment-value {
    font-weight: 400;
    color: var(--bp-work-text);
}

.bp-work-payment-actions {
    margin: 8px 0 4px;
    display: flex;
    justify-content: flex-end;
}

.bp-work-receipt-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 400;
    background: var(--bp-work-mint);
    color: var(--bp-work-mint-text);
    text-decoration: none;
}

.bp-work-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px;
    font-size: 16px;
    font-weight: 400;
    color: var(--bp-work-text);
    text-decoration: none;
    border-top: 1px solid var(--bp-work-border);
}

.bp-work-tip-banner {
    margin: 18px 0 0;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
    border: none;
    background: transparent;
}

.bp-work-tip-banner-img {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
}

.bp-work-footer {
    margin-top: 20px;
}

.bp-work-home-btn {
    border-radius: 12px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    font-size: 17.2px !important;
    font-weight: 400 !important;
    background: var(--bp-work-green) !important;
    border-color: var(--bp-work-green) !important;
}

.bp-work-secondary-btn {
    margin-top: 10px;
    border-radius: 12px !important;
    background: #fff !important;
    border: 1px solid var(--bp-work-border) !important;
    color: var(--bp-work-text-secondary) !important;
}

.bp-work-cancel-btn {
    margin-bottom: 10px;
    border-radius: 12px !important;
    background: #fff !important;
    border: 1px solid #e57373 !important;
    color: #c62828 !important;
    font-weight: 500 !important;
}

.bp-work-status-pill--compact {
    flex-shrink: 0;
    padding: 4px 10px;
    font-size: 11px;
    gap: 4px;
}

.bp-work-status-pill--compact .bp-work-status-pill-icon {
    display: none;
}

.bp-work-batch-parent {
    margin-top: 16px;
    border: 1px solid var(--bp-work-border);
    border-radius: 12px;
    overflow: hidden;
}

.bp-work-batch-parent-summary {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 14px 16px;
    cursor: pointer;
    background: var(--bp-work-input-bg);
}

.bp-work-batch-parent-summary::-webkit-details-marker {
    display: none;
}

.bp-work-batch-parent[open] > .bp-work-batch-parent-summary .bp-work-details-chevron {
    transform: rotate(180deg);
}

.bp-work-batch-parent-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.bp-work-batch-parent-label {
    font-size: 12px;
    color: var(--bp-work-text-muted);
}

.bp-work-batch-parent-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 12px;
    color: var(--bp-work-text-secondary);
}

.bp-work-batch-parent-total {
    font-weight: 600;
    color: var(--bp-work-text);
}

.bp-work-sub-order-list {
    border-top: 1px solid var(--bp-work-border);
}

.bp-work-sub-order-row,
.bp-work-detail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--bp-work-border);
}

.bp-work-sub-order-row:last-child,
.bp-work-detail-row:last-child {
    border-bottom: 0;
}

.bp-work-sub-order-badge,
.bp-work-detail-row-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bp-work-mint);
    color: var(--bp-work-mint-text);
    font-size: 13px;
    font-weight: 600;
}

.bp-work-detail-row-icon {
    background: var(--bp-work-input-bg);
    color: var(--bp-work-green-icon);
}

.bp-work-sub-order-body,
.bp-work-detail-row-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bp-work-sub-order-title,
.bp-work-detail-row-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--bp-work-text);
}

.bp-work-sub-order-sub,
.bp-work-detail-row-sub {
    font-size: 12px;
    color: var(--bp-work-text-muted);
}

.bp-work-sub-order-chevron {
    flex-shrink: 0;
    color: var(--bp-work-text-muted);
    font-size: 12px;
}

.bp-work-detail-list {
    border: 1px solid var(--bp-work-border);
    border-radius: 12px;
    overflow: hidden;
}

.bp-work-block--flush-top {
    padding-top: 16px;
    margin-top: 8px;
    border-top: 0;
}

.bp-work-detail-context {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--bp-work-text-secondary);
}

.bp-work-link-row--batch {
    margin-top: 12px;
    border: 1px solid var(--bp-work-border);
    border-radius: 12px;
    border-top: 1px solid var(--bp-work-border);
}

.bp-checkout-order-close {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.bp-remove-confirm-open {
    overflow: hidden;
}

.bp-remove-confirm-dialog {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bp-remove-confirm-dialog.is-open {
    display: flex;
}

.bp-remove-confirm-dialog__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.bp-remove-confirm-dialog__card {
    position: relative;
    z-index: 1;
    width: min(90vw, 425px);
    max-width: 100%;
    border-radius: 24px;
    background: #fff;
    padding: 22px 16px 14px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
    transform: scale(0.9);
    transform-origin: center center;
}

.bp-remove-confirm-dialog__mascot {
    width: clamp(120px, 30vw, 170px);
    height: auto;
    display: block;
    margin: 0 auto 8px;
}

.bp-remove-confirm-dialog__title {
    margin: 8px 0 0;
    color: #593817;
    font-size: clamp(16px, 4.3vw, 25px);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: 0.2px;
}

.bp-remove-confirm-dialog__subtitle {
    margin: 16px auto 0;
    max-width: 94%;
    padding: 10px 12px;
    border-radius: 12px;
    background: transparent;
    color: #7c7c7c;
    font-size: clamp(12px, 3.1vw, 16px);
    font-weight: 400;
    line-height: 1.4;
}

.bp-remove-confirm-dialog__actions {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.bp-remove-confirm-dialog__btn {
    width: 100%;
    border-radius: 10px;
    border: 2px solid #2dbf3a;
    padding: 11px 10px;
    font-size: clamp(15px, 3.9vw, 19px);
    line-height: 1.2;
    font-weight: 400;
    cursor: pointer;
}

.bp-remove-confirm-dialog__btn--primary {
    background: #2dbf3a;
    color: #fff;
}

.bp-remove-confirm-dialog__btn--ghost {
    background: #fff;
    color: #2fb83c;
}

@media (max-width: 576px) {
    .bp-remove-confirm-dialog__card {
        width: min(88vw, 425px);
        padding: 16px 12px 12px;
        border-radius: 18px;
    }

    .bp-remove-confirm-dialog__subtitle {
        max-width: 100%;
        padding: 9px 8px;
        border-radius: 10px;
    }

    .bp-remove-confirm-dialog__btn {
        border-radius: 14px;
        padding: 10px 8px;
    }
}