@charset "UTF-8";
.cart-checkout {
    --mui-primary: #d20931;
    --mui-primary-hover: #b8072a;
    --mui-primary-soft: #fff1f4;
    --mui-secondary: #1976d2;
    --mui-secondary-soft: #eef6ff;
    --mui-success: #2e7d32;
    --mui-success-soft: #edf7ed;
    --mui-warning: #ed6c02;
    --mui-warning-soft: #fff4e5;
    --mui-error: #d32f2f;
    --mui-error-soft: #fdecea;
    --mui-surface: var(--bg-color-2);
    --mui-background: color-mix(in srgb, var(--bg-color) 88%, #f5f5f5);
    --mui-border: color-mix(in srgb, var(--border-color) 72%, transparent);
    --mui-text: var(--text-color);
    --mui-muted: var(--text-color-lighten);
    --mui-radius-xs: 8px;
    --mui-radius-sm: 12px;
    --mui-radius-md: 16px;
    --mui-radius-lg: 20px;
    --mui-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 8px rgba(0, 0, 0, 0.04);
    --mui-elevation-2: 0 4px 16px rgba(0, 0, 0, 0.07);
    --cart-input-bg: var(--input-bg-color);
    --cart-mobile-stepper-top: 0px;
    direction: ltr;
    display: grid;
    grid-template-columns: minmax(290px, 350px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    width: 100%;
    margin: 24px 0 72px;
    color: var(--mui-text);
}

[data-theme=dark] .cart-checkout {
    --mui-primary-soft: rgba(210, 9, 49, 0.12);
    --mui-secondary-soft: rgba(25, 118, 210, 0.14);
    --mui-success-soft: rgba(46, 125, 50, 0.16);
    --mui-warning-soft: rgba(237, 108, 2, 0.14);
    --mui-error-soft: rgba(211, 47, 47, 0.14);
    --mui-background: var(--bg-color);
    --mui-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.32), 0 1px 8px rgba(0, 0, 0, 0.24);
    --mui-elevation-2: 0 4px 16px rgba(0, 0, 0, 0.34);
}

.cart-checkout > * {
    direction: rtl;
}

.cart-checkout.is-empty {
    grid-template-columns: 1fr;
}

.cart-empty-state[hidden],
.cart-products-list[hidden],
.cart-summary-card[hidden],
.cart-step[hidden],
.checkout-error-panel[hidden],
[data-field-error][hidden],
.summary-mobile-fixed-bar[hidden],
.cart-checkout.is-empty .cart-stepper,
.cart-checkout.is-empty .cart-products-toolbar,
.cart-stepper[hidden],
.cart-products-toolbar[hidden] {
    display: none;
}

/* Summary */
.cart-summary-card,
.cart-stepper-item,
.cart-products-list,
.cart-empty-state,
.auth-choice-card,
.checkout-form {
    border: 1px solid var(--mui-border);
    background: var(--mui-surface);
    box-shadow: var(--mui-elevation-1);
}

.cart-summary-card {
    grid-column: 1;
    position: sticky;
    top: 96px;
    border-radius: var(--mui-radius-lg);
    padding: 16px;
}

.summary-head,
.summary-row,
.summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.summary-head {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mui-border);
}

.summary-head span:first-child,
.stepper-text,
.cart-products-toolbar p span,
.cart-product-title,
.cart-price-value,
.summary-total .summary-value,
.summary-mobile-fixed-total span:last-child,
.auth-choice-icon span,
.auth-choice-card h2,
.auth-choice-card li,
.checkout-error-title,
.checkout-error-panel li button span,
.checkout-form label > span,
.cart-empty-state a,
.empty-title,
.summary-submit,
.summary-mobile-fixed-submit,
.login-btn,
.register-btn,
.cart-back-btn,
.cart-clear-all-btn,
.cart-product-remove,
.quantity-control button,
.quantity-control span,
.stepper-index,
.cart-discount-percent {
    font-family: "IranSansBold", "IRANSansWeb_Bold", "IRANSansXFaNum-Bold", "IRANSans-Bold", "IRANSans", sans-serif;
}

.summary-badge {
    border-radius: 999px;
    background: var(--mui-success-soft);
    color: var(--mui-success);
    padding: 5px 10px;
    font-size: 12px;
}

.summary-row {
    min-height: 38px;
    margin-bottom: 4px;
    padding: 0 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--mui-border) 80%, transparent);
}

.summary-label {
    color: var(--mui-muted);
    font-size: 13px;
}

.summary-value {
    color: var(--mui-text);
    font-size: 16px;
    text-align: left;
}

.summary-row.discount .summary-label,
.summary-row.discount .summary-value {
    color: var(--mui-success);
}

.summary-total {
    margin-top: 10px;
    border-radius: var(--mui-radius-sm);
    background: var(--mui-primary-soft);
    padding: 12px;
}

.summary-total .summary-value {
    color: var(--mui-primary);
}

.summary-submit,
.summary-mobile-fixed-submit {
    border: 0;
    cursor: pointer;
    background: var(--mui-primary);
    color: var(--static-white-color);
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.summary-submit {
    width: 100%;
    min-width: 100%;
    min-height: 44px;
    margin-top: 12px;
    border-radius: var(--mui-radius-sm);
    box-shadow: var(--mui-elevation-1);
}

.summary-submit:hover,
.summary-mobile-fixed-submit:hover {
    background: var(--mui-primary-hover);
    box-shadow: var(--mui-elevation-2);
    transform: translateY(-1px);
}

.summary-submit:disabled,
.summary-mobile-fixed-submit:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.summary-note {
    margin: 12px 0 0;
    color: var(--mui-muted);
    font-size: 12px;
    line-height: 1.9;
}

.summary-mobile-fixed-bar {
    display: none;
}

/* Stage + stepper */
.cart-stage-panel {
    grid-column: 2;
    min-width: 0;
}

.cart-stepper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.cart-stepper-item {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--mui-radius-md);
    color: var(--mui-muted);
    cursor: pointer;
}

.cart-stepper-item.is-active {
    border-color: color-mix(in srgb, var(--mui-warning) 42%, var(--mui-border));
    background: linear-gradient(180deg, var(--mui-warning-soft), var(--mui-surface));
    color: var(--mui-warning);
}

.cart-stepper-item.is-done {
    border-color: color-mix(in srgb, var(--mui-success) 42%, var(--mui-border));
    background: linear-gradient(180deg, var(--mui-success-soft), var(--mui-surface));
    color: var(--mui-success);
}

.cart-stepper-item.is-locked {
    opacity: 0.72;
}

.stepper-index {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mui-border);
    border-radius: 50%;
    background: var(--mui-background);
    color: var(--mui-muted);
}

.cart-stepper-item.is-active .stepper-index {
    border-color: var(--mui-warning);
    background: var(--mui-warning);
    color: var(--static-white-color);
}

.cart-stepper-item.is-done .stepper-index {
    border-color: var(--mui-success);
    background: var(--mui-success);
    color: var(--static-white-color);
    font-size: 0;
}

.cart-stepper-item.is-done .stepper-index::before {
    content: "✓";
    font-size: 14px;
}

.stepper-text {
    font-size: 12px;
}

/* Products list */
.cart-products-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.cart-products-toolbar p {
    margin: 0;
    color: var(--mui-muted);
    font-size: 13px;
}

.cart-products-toolbar p span {
    color: var(--mui-text);
}

.cart-clear-all-btn,
.cart-product-remove,
.cart-back-btn,
.login-btn,
.register-btn {
    width: auto;
    min-width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mui-radius-xs);
}

.cart-clear-all-btn,
.cart-product-remove {
    min-height: 34px;
    border: 0;
    background: transparent;
    color: #5b5b5b;
    padding: 0 12px;
}

.cart-clear-all-btn {
    border: 1px solid color-mix(in srgb, var(--mui-error) 26%, var(--mui-border));
    color: var(--mui-error);
}

.cart-clear-all-btn:hover,
.cart-product-remove:hover {
    background: var(--mui-error-soft);
}

.cart-product-remove {
    gap: 6px;
}

.cart-product-remove svg {
    flex: 0 0 auto;
    display: block;
}

.cart-products-list {
    overflow: hidden;
    border-radius: var(--mui-radius-lg);
}

.cart-product-card {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 16px;
    border-bottom: 1px solid var(--mui-border);
    background: var(--mui-surface);
    padding: 16px;
    transition: background var(--transition);
}

.cart-product-card:last-child {
    border-bottom: 0;
}

.cart-product-card:hover {
    background: color-mix(in srgb, var(--mui-background) 55%, var(--mui-surface));
}

.cart-product-media {
    min-height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mui-radius-md);
    background: transparent;
    text-decoration: none;
}

.cart-product-image {
    width: 108px;
    height: 108px;
    object-fit: contain;
}

.cart-discount-badge,
.cart-product-meta {
    display: none;
}

.cart-product-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.cart-product-title-row,
.cart-product-bottom {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.cart-product-title-row {
    align-items: flex-start;
}

.cart-product-bottom {
    align-items: flex-end;
}

.cart-product-title {
    min-width: 0;
    color: var(--mui-text);
    font-size: 14px;
    line-height: 1.9;
    text-decoration: none;
    transition: color var(--transition);
}

.cart-product-title:hover {
    color: var(--mui-primary);
}

.cart-product-price {
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: transparent;
    padding: 0;
    text-align: left;
}

.cart-old-price-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 4px;
}

.cart-discount-percent {
    min-width: 34px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--mui-primary);
    color: var(--static-white-color);
    font-size: 12px;
    line-height: 1;
}

.cart-old-price {
    color: color-mix(in srgb, var(--mui-muted) 58%, transparent);
    font-size: 13px;
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--mui-muted) 58%, transparent);
    text-decoration-thickness: 1px;
}

.cart-price-value,
.cart-product-price:not(.has-discount) .cart-price-value {
    color: var(--mui-text);
}

.cart-price-value {
    font-size: 22px;
    line-height: 1.7;
}

.cart-product-price:not(.has-discount) .cart-price-value {
    font-size: 16px;
    line-height: 1.8;
}

.quantity-control {
    height: 36px;
    display: inline-grid;
    grid-template-columns: 36px 42px 36px;
    border: 1px solid var(--mui-border);
    border-radius: var(--mui-radius-sm);
    overflow: hidden;
    background: var(--mui-surface);
    direction: ltr;
}

.quantity-control button,
.quantity-control span {
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--mui-text);
    font-size: 16px;
}

.quantity-control button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 0;
    cursor: pointer;
}

.quantity-control button:hover {
    background: var(--mui-secondary-soft);
}

/* Empty state */
.cart-empty-state {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--mui-radius-lg);
    background: radial-gradient(circle at 50% 16%, var(--mui-primary-soft), transparent 200px), var(--mui-surface);
    padding: 36px 18px 42px;
    text-align: center;
}

.empty-illustration {
    position: relative;
    width: min(100%, 260px);
    margin: 0 0 10px;
}

.empty-illustration-image {
    display: block;
    width: 100%;
    height: auto;
}

.empty-badge {
    position: absolute;
    left: 18px;
    bottom: 28px;
    display: inline-flex;
    min-width: 58px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: var(--mui-radius-xs);
    background: var(--mui-primary);
    color: var(--static-white-color);
    font-size: 12px;
}

.empty-title {
    margin: 0 0 6px;
    color: var(--mui-text);
    font-size: 17px;
    line-height: 1.8;
}

.cart-empty-state p {
    margin: 0 0 18px;
    max-width: 460px;
    color: var(--mui-muted);
    font-size: 13px;
    line-height: 2;
}

.cart-empty-state a {
    width: auto;
    min-width: 142px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mui-radius-sm);
    background: var(--mui-primary);
    color: var(--static-white-color);
    text-decoration: none;
}

/* Auth cards */
.auth-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 16px;
}

.auth-choice-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--mui-radius-lg);
    padding: 20px;
}

.auth-choice-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--mui-warning);
}

.login-card::before {
    background: var(--mui-success);
}

.auth-choice-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: var(--mui-radius-md);
    background: var(--mui-warning-soft);
    color: var(--mui-warning);
}

.login-card .auth-choice-icon {
    background: var(--mui-success-soft);
    color: var(--mui-success);
}

.auth-choice-card h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--mui-text);
    font-size: 17px;
}

.auth-choice-card h2 span {
    flex: 1;
    height: 1px;
    background: var(--mui-border);
}

.auth-choice-card ul {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 18px;
}

.auth-choice-card li {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: var(--mui-radius-sm);
    background: var(--mui-background);
    padding: 0 12px;
    color: var(--mui-text);
    font-size: 13px;
}

.status {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--static-white-color);
}

.status.ok {
    background: var(--mui-success);
}

.status.wrong {
    background: var(--mui-error);
}

.login-actions,
.form-actions {
    display: flex;
    gap: 12px;
}

.login-card .login-actions,
.login-card .login-btn {
    width: 100%;
}

.login-btn,
.register-btn,
.cart-back-btn {
    min-height: 42px;
    padding: 0 18px;
    text-decoration: none;
}

.login-btn {
    background: var(--mui-success);
    color: var(--static-white-color);
}

.login-btn:hover {
    background: color-mix(in srgb, var(--mui-success) 88%, black);
}

.register-btn,
.cart-back-btn {
    border: 1px solid var(--mui-border);
    background: var(--mui-surface);
    color: var(--mui-text);
}

.cart-back-btn {
    margin-top: 14px;
}

/* Address form */
.address-alert {
    margin-bottom: 12px;
    border: 1px solid color-mix(in srgb, var(--mui-secondary) 20%, var(--mui-border));
    border-radius: var(--mui-radius-md);
    background: var(--mui-secondary-soft);
    color: var(--mui-text);
    padding: 12px 14px;
}

.checkout-form {
    border-radius: var(--mui-radius-lg);
    padding: 18px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 14px;
}

.checkout-form label {
    position: relative;
    border: 1px solid transparent;
    border-radius: var(--mui-radius-sm);
    background: transparent;
    padding: 8px;
}

.checkout-form label > span {
    display: block;
    margin-bottom: 7px;
    color: var(--mui-muted);
    font-size: 12px;
}

.checkout-form input,
.checkout-form select,
.checkout-form textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--mui-border);
    border-radius: var(--mui-radius-xs);
    background: var(--cart-input-bg);
    color: var(--mui-text);
    outline: 0;
    padding: 0 12px;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.checkout-form textarea {
    min-height: unset;
    padding-top: 12px;
    resize: vertical;
}

.checkout-form input:focus:not(.is-invalid),
.checkout-form select:focus:not(.is-invalid),
.checkout-form textarea:focus:not(.is-invalid),
.custom-select-wrapper:not(.has-error) .custom-select-display:focus,
.custom-select-wrapper.open:not(.has-error) .custom-select-display {
    border-color: var(--mui-secondary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mui-secondary) 14%, transparent);
}

.checkout-form input.is-invalid,
.checkout-form select.is-invalid,
.checkout-form textarea.is-invalid,
.checkout-form label.is-invalid .custom-select-display {
    border-color: var(--mui-error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mui-error) 10%, transparent);
}

.checkout-form small[data-field-error] {
    display: block;
    min-height: 18px;
    margin-top: 6px;
    color: var(--mui-error);
    font-size: 11px;
    line-height: 1.7;
}

.wide-field {
    display: block;
    margin-top: 12px;
}

.checkout-error-panel {
    margin-bottom: 14px;
    border: 1px solid color-mix(in srgb, var(--mui-error) 30%, var(--mui-border));
    border-radius: var(--mui-radius-md);
    background: var(--mui-error-soft);
    padding: 12px;
}

.checkout-error-title {
    margin-bottom: 10px;
    color: var(--mui-error);
}

.checkout-error-panel ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.checkout-error-panel li button {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--mui-error) 22%, var(--mui-border));
    border-radius: var(--mui-radius-xs);
    background: var(--mui-surface);
    color: var(--mui-text);
    padding: 8px 10px;
    cursor: pointer;
    text-align: right;
    font-family: inherit;
}

.checkout-error-panel li button span {
    color: var(--mui-error);
    white-space: nowrap;
}

.checkout-error-panel li button small {
    color: var(--mui-muted);
    line-height: 1.7;
}

.map-placeholder {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 14px 0;
    border: 1px dashed color-mix(in srgb, var(--mui-secondary) 25%, var(--mui-border));
    border-radius: var(--mui-radius-md);
    background: var(--mui-secondary-soft);
    color: var(--mui-secondary);
}

.form-actions {
    justify-content: flex-end;
    border-top: 1px solid var(--mui-border);
    padding-top: 14px;
}

.form-actions .summary-submit {
    width: auto;
    min-width: 160px;
}

/* Custom select */
.custom-select-wrapper {
    position: relative;
}

.custom-select-wrapper select {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 42px;
    opacity: 0;
    pointer-events: none;
}

.custom-select-display {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--mui-border);
    border-radius: var(--mui-radius-xs);
    background: var(--cart-input-bg);
    color: var(--mui-text);
    padding: 0 12px;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.custom-select-selected {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select-arrow {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mui-muted);
    transition: transform var(--transition);
}

.custom-select-wrapper.open .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-select-options {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    max-height: 260px;
    overflow-y: auto;
    display: none;
    border: 1px solid var(--mui-border);
    border-radius: var(--mui-radius-sm);
    background: var(--mui-surface);
    box-shadow: var(--mui-elevation-2);
    padding: 6px;
}

.custom-select-wrapper.open .custom-select-options {
    display: block;
}

.custom-select-options li {
    min-height: 36px;
    display: flex;
    align-items: center;
    border-radius: var(--mui-radius-xs);
    padding: 0 10px;
    cursor: pointer;
    color: var(--mui-text);
    transition: background var(--transition), color var(--transition);
}

.custom-select-options li:hover,
.custom-select-options li.selected {
    background: var(--mui-primary-soft);
    color: var(--mui-primary);
}

.custom-select-options li.disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.custom-select-search-item {
    position: sticky;
    top: 0;
    z-index: 2;
    margin-bottom: 6px;
    padding: 0;
    background: var(--mui-surface);
    cursor: default;
}

.custom-select-search-item:hover,
.custom-select-search-item.selected {
    background: var(--mui-surface);
    color: var(--mui-text);
}

.custom-select-search {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--mui-border);
    border-radius: var(--mui-radius-xs);
    background: var(--cart-input-bg);
    color: var(--mui-text);
    outline: 0;
    padding: 0 10px;
    font-family: inherit;
}

.custom-select-search:focus {
    border-color: var(--mui-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mui-primary) 12%, transparent);
}

.custom-select-no-results[hidden] {
    display: none;
}

.custom-select-no-results {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mui-muted);
    font-size: 12px;
    cursor: default;
}

/* Mobile */
@media (max-width: 992px) {
    .cart-checkout {
        grid-template-columns: 1fr;
        direction: rtl;
    }
    .cart-summary-card {
        grid-column: auto;
        position: static;
        order: 2;
    }
    .cart-stage-panel {
        grid-column: auto;
        order: 1;
    }
    .form-grid {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}
@media (max-width: 768px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
    .cart-checkout {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
        padding-bottom: 108px;
        margin-top: 0;
    }
    .cart-stage-panel,
    .cart-products-list,
    .cart-product-card,
    .cart-summary-card {
        max-width: 100%;
        box-sizing: border-box;
    }
    .cart-stepper {
        position: sticky;
        top: var(--cart-mobile-stepper-top, 0);
        z-index: 9999999;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        width: 100%;
        max-width: 100%;
        margin: 0 0 12px;
        background: var(--mui-surface);
        box-shadow: var(--mui-elevation-1);
    }
    .cart-stepper-item {
        min-width: 0;
        min-height: 48px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        gap: 4px;
        padding: 0 4px;
        position: relative;
        overflow: hidden;
    }
    .cart-stepper-item::after {
        content: "";
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
        height: 3px;
        background: transparent;
    }
    .cart-stepper-item.is-active::after {
        background: var(--mui-warning);
    }
    .cart-stepper-item.is-done::after {
        background: var(--mui-success);
    }
    .stepper-index {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
    .stepper-text {
        overflow: hidden;
        font-size: 11px;
        line-height: 1.6;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .cart-products-toolbar {
        align-items: center;
        margin: 8px 0 0;
        padding: 12px 4px;
        border-bottom: 1px solid var(--mui-border);
    }
    .cart-products-list {
        width: 100%;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        overflow-x: hidden;
        box-shadow: none;
    }
    .cart-product-card {
        display: grid;
        direction: rtl;
        grid-template-columns: 104px minmax(0, 1fr);
        grid-template-rows: auto auto;
        grid-template-areas: "media info" "qty info";
        column-gap: 12px;
        row-gap: 8px;
        align-items: start;
        width: 100%;
        overflow: hidden;
        padding: 16px 4px;
    }
    .cart-product-media {
        grid-area: media;
        width: 104px;
        min-height: 104px;
        justify-self: start;
    }
    .cart-product-image {
        width: 92px;
        height: 92px;
    }
    .cart-product-info {
        grid-area: info;
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        gap: 10px;
        overflow: hidden;
    }
    .cart-product-title-row {
        align-items: flex-start;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }
    .cart-product-title {
        flex: 1 1 auto;
        display: -webkit-box;
        max-width: 100%;
        overflow: hidden;
        font-size: 13px;
        line-height: 2;
        text-align: right;
        text-overflow: ellipsis;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
    .cart-product-remove {
        flex: 0 0 34px;
        width: 34px;
        min-width: 34px;
        min-height: 34px;
        padding: 0;
    }
    .cart-product-remove span {
        display: none;
    }
    .cart-product-remove svg {
        width: 20px;
        height: 20px;
    }
    .cart-product-bottom {
        display: contents;
    }
    .cart-product-bottom .quantity-control {
        grid-area: qty;
        justify-self: center;
        align-self: start;
        width: 104px;
        height: 36px;
        grid-template-columns: 34px 36px 34px;
    }
    .cart-product-price {
        width: 100%;
        min-width: 0;
        align-items: flex-start;
        text-align: right;
    }
    .cart-old-price-row {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .cart-discount-percent {
        min-width: 30px;
        height: 22px;
        font-size: 11px;
    }
    .cart-old-price {
        font-size: 12px;
    }
    .cart-price-value {
        font-size: 18px;
        line-height: 1.8;
    }
    .cart-product-price:not(.has-discount) .cart-price-value {
        font-size: 16px;
    }
    .cart-summary-card {
        position: static;
        width: 100%;
        margin: 16px 0 0;
        border-radius: var(--mui-radius-lg);
        padding: 16px;
    }
    .cart-summary-card .summary-head,
    .cart-summary-card .summary-row {
        display: flex;
    }
    .cart-summary-card .summary-note {
        display: block;
    }
    .summary-mobile-fixed-bar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 99999999;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(132px, 46%);
        gap: 10px;
        align-items: center;
        border: 1px solid var(--mui-border);
        background: var(--mui-surface);
        box-shadow: var(--mui-elevation-2);
        padding: 12px 12px 12px 46px;
    }
    .summary-mobile-fixed-total {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }
    .summary-mobile-fixed-total span:first-child {
        color: var(--mui-muted);
        font-size: 11px;
    }
    .summary-mobile-fixed-total span:last-child {
        color: var(--mui-text);
        font-size: 15px;
        line-height: 1.7;
    }
    .summary-mobile-fixed-submit {
        width: 100%;
        min-height: 44px;
        border-radius: var(--mui-radius-sm);
    }
    .summary-mobile-close {
        position: absolute;
        top: 50%;
        left: 10px;
        z-index: 2;
        width: 28px;
        min-width: 28px;
        min-height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transform: translateY(-50%);
        border: 1px solid var(--mui-border);
        border-radius: 50%;
        background: var(--mui-surface);
        color: var(--mui-muted);
        font-size: 18px;
        line-height: 1;
    }
    .cart-checkout.mobile-checkout-cta-closed {
        padding-bottom: 0;
    }
    .cart-checkout.mobile-checkout-cta-closed .summary-mobile-fixed-bar {
        display: none;
    }
    .auth-choice-grid,
    .form-grid,
    .checkout-error-panel ul {
        grid-template-columns: 1fr;
    }
    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .form-actions .summary-submit,
    .form-actions .cart-back-btn {
        width: 100%;
        min-width: 100%;
    }
    .empty-illustration {
        width: min(100%, 230px);
    }
}
/* Payment, shipping, discount, Senso Coin, gateway and review steps */
.checkout-option-group,
.review-card {
    margin-bottom: 16px;
    border: 1px solid var(--mui-border);
    border-radius: var(--mui-radius-lg);
    background: var(--mui-surface);
    padding: 16px;
}

.checkout-section-title,
.review-card h2 {
    margin: 0 0 14px;
    color: var(--mui-text);
    font-size: 15px;
    font-family: "IranSansBold", "IRANSansWeb_Bold", "IRANSansXFaNum-Bold", "IRANSans-Bold", "IRANSans", sans-serif;
}

.checkout-option-grid,
.checkout-benefit-grid,
.checkout-review-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px;
}

.delivery-options {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.checkout-radio-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 10px;
    align-items: start;
    border: 1px solid var(--mui-border);
    border-radius: var(--mui-radius-md);
    background: var(--mui-background);
    padding: 12px;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.checkout-radio-card:has(input:checked) {
    border-color: color-mix(in srgb, var(--mui-primary) 38%, var(--mui-border));
    background: var(--mui-primary-soft);
}

.checkout-radio-card input {
    width: 18px;
    height: 18px;
    accent-color: var(--mui-primary);
    margin-top: 3px;
}

.checkout-radio-card span {
    color: var(--mui-text);
    font-size: 13px;
    line-height: 1.9;
    font-family: "IranSansBold", "IRANSansWeb_Bold", "IRANSansXFaNum-Bold", "IRANSans-Bold", "IRANSans", sans-serif;
}

.checkout-radio-card small {
    grid-column: 2;
    color: var(--mui-muted);
    font-size: 12px;
    line-height: 1.8;
}

.checkout-inline-field {
    display: block;
    border: 1px solid var(--mui-border);
    border-radius: var(--mui-radius-md);
    background: var(--mui-background);
    padding: 12px;
}

.checkout-inline-field > span,
.senso-earn-box span {
    display: block;
    margin-bottom: 8px;
    color: var(--mui-muted);
    font-size: 12px;
    font-family: "IranSansBold", "IRANSansWeb_Bold", "IRANSansXFaNum-Bold", "IRANSans-Bold", "IRANSans", sans-serif;
}

.checkout-apply-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.checkout-apply-row input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--mui-border);
    border-radius: var(--mui-radius-xs);
    background: var(--cart-input-bg);
    color: var(--mui-text);
    outline: 0;
    padding: 0 12px;
}

.checkout-inline-field small {
    display: block;
    margin-top: 8px;
    color: var(--mui-muted);
    font-size: 11px;
    line-height: 1.7;
}

.senso-earn-box {
    border: 1px solid color-mix(in srgb, var(--mui-success) 26%, var(--mui-border));
    border-radius: var(--mui-radius-md);
    background: var(--mui-success-soft);
    padding: 12px;
}

.senso-earn-box b {
    display: block;
    color: var(--mui-success);
    font-size: 18px;
    font-family: "IranSansBold", "IRANSansWeb_Bold", "IRANSansXFaNum-Bold", "IRANSans-Bold", "IRANSans", sans-serif;
}

.checkout-review-panel {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.review-card dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.review-card dl div {
    display: grid;
    gap: 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--mui-border) 72%, transparent);
    padding-bottom: 8px;
}

.review-card dt {
    color: var(--mui-muted);
    font-size: 12px;
}

.review-card dd {
    margin: 0;
    color: var(--mui-text);
    font-size: 13px;
    line-height: 1.9;
}

.review-payable-row dd {
    color: var(--mui-primary);
    font-size: 17px;
    font-family: "IranSansBold", "IRANSansWeb_Bold", "IRANSansXFaNum-Bold", "IRANSans-Bold", "IRANSans", sans-serif;
}

@media (max-width: 992px) {
    .delivery-options,
    .checkout-review-panel {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}
@media (max-width: 768px) {
    .checkout-option-grid,
    .checkout-benefit-grid,
    .delivery-options,
    .checkout-review-panel {
        grid-template-columns: 1fr;
    }
    .checkout-option-group,
    .review-card {
        padding: 12px;
    }
    .checkout-apply-row {
        grid-template-columns: 1fr;
    }
    .checkout-apply-row .cart-back-btn {
        width: 100%;
        justify-content: center;
    }
}
/* Checkout step visibility and new tab naming */
.cart-stepper-item[hidden] {
    display: none;
}

.cart-stepper {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.payment-step:not([hidden]),
.review-step:not([hidden]) {
    display: block;
}

@media (max-width: 768px) {
    .cart-stepper {
        grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    }
    .stepper-text {
        font-size: 10px;
    }
}
.cart-step:not([hidden]) {
    display: block;
}

/* Selected payment/shipping/gateway options should be blue */
.checkout-radio-card:has(input:checked) {
    border-color: color-mix(in srgb, var(--mui-secondary) 45%, var(--mui-border));
    background: var(--mui-secondary-soft);
}

.checkout-radio-card:has(input:checked) span {
    color: var(--mui-secondary);
}

.checkout-radio-card input {
    accent-color: var(--mui-secondary);
}

/* Rich payment/shipping option cards */
.checkout-media-card {
    grid-template-columns: auto 44px minmax(0, 1fr);
    align-items: start;
}

.checkout-media-card input {
    grid-column: 1;
}

.checkout-option-icon {
    width: 44px;
    height: 44px;
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mui-radius-sm);
    color: var(--mui-secondary);
    font-size: 22px;
    overflow: hidden;
}

.checkout-option-content {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.checkout-option-title {
    color: var(--mui-text);
    font-size: 13px;
    line-height: 1.9;
    font-family: "IranSansBold", "IRANSansWeb_Bold", "IRANSansXFaNum-Bold", "IRANSans-Bold", "IRANSans", sans-serif;
}

.checkout-option-cost {
    width: fit-content;
    border-radius: 999px;
    background: var(--mui-success-soft);
    color: var(--mui-success);
    padding: 3px 9px;
    font-size: 11px;
    font-family: "IranSansBold", "IRANSansWeb_Bold", "IRANSansXFaNum-Bold", "IRANSans-Bold", "IRANSans", sans-serif;
}

.checkout-warning-hint {
    width: fit-content;
    border: 1px solid color-mix(in srgb, var(--mui-warning) 30%, var(--mui-border));
    border-radius: var(--mui-radius-xs);
    background: var(--mui-warning-soft);
    color: var(--mui-warning);
    padding: 6px 8px;
    font-size: 11px;
    line-height: 1.8;
    font-family: "IranSansBold", "IRANSansWeb_Bold", "IRANSansXFaNum-Bold", "IRANSans-Bold", "IRANSans", sans-serif;
}

.checkout-inline-link {
    color: var(--mui-secondary);
    font-size: 12px;
    line-height: 1.8;
    text-decoration: none;
    font-family: "IranSansBold", "IRANSansWeb_Bold", "IRANSansXFaNum-Bold", "IRANSans-Bold", "IRANSans", sans-serif;
}

.checkout-inline-link:hover {
    text-decoration: underline;
}

.senso-coin-field .senso-coin-head,
.senso-earn-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.senso-coin-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-block;
}

.senso-earn-title {
    margin-bottom: 8px;
}

.senso-earn-title span {
    margin-bottom: 0;
}

.checkout-radio-card:has(input:checked) .checkout-option-icon {
    color: var(--mui-secondary);
}

.gateway-options {
    grid-template-columns: minmax(220px, 420px);
}

@media (max-width: 768px) {
    .checkout-media-card {
        grid-template-columns: auto 38px minmax(0, 1fr);
    }
    .checkout-option-icon {
        width: 38px;
        height: 38px;
        font-size: 19px;
    }
    .gateway-options {
        grid-template-columns: 1fr;
    }
}
/* Modernized payment/shipping step UI while preserving site design */
.payment-step .address-alert,
.review-step .address-alert {
    margin-bottom: 18px;
    border: 1px solid color-mix(in srgb, var(--mui-secondary) 18%, var(--mui-border));
    border-radius: 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mui-secondary-soft) 72%, var(--mui-surface)), var(--mui-surface));
    padding: 14px 16px;
    color: var(--mui-text);
    box-shadow: var(--mui-elevation-1);
}

.payment-form,
.review-step .checkout-review-panel {
    gap: 18px;
}

.payment-form .checkout-option-group {
    position: relative;
    margin-bottom: 18px;
    border: 1px solid color-mix(in srgb, var(--mui-border) 82%, transparent);
    border-radius: 24px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mui-background) 65%, var(--mui-surface)), var(--mui-surface));
    padding: 22px;
    box-shadow: var(--mui-elevation-1);
}

.payment-form .checkout-option-group::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.payment-form .checkout-section-title,
.review-card h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--mui-text);
    font-size: 16px;
}

.payment-form .checkout-section-title::after,
.review-card h2::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--mui-secondary) 35%, transparent), transparent);
}

.checkout-option-grid,
.checkout-benefit-grid {
    gap: 14px;
}

.checkout-media-card {
    position: relative;
    min-height: 104px;
    border: 1px solid color-mix(in srgb, var(--mui-border) 80%, transparent);
    border-radius: 20px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mui-background) 82%, var(--mui-surface)), var(--mui-surface));
    padding: 16px 16px 16px 18px;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.checkout-media-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--mui-secondary) 18%, var(--mui-border));
    box-shadow: var(--mui-elevation-1);
}

.checkout-radio-card:has(input:checked) {
    border-color: color-mix(in srgb, var(--mui-secondary) 50%, var(--mui-border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--mui-secondary-soft) 82%, var(--mui-surface)), var(--mui-surface));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mui-secondary) 10%, transparent);
}

.checkout-radio-card:has(input:checked)::after {
    content: "";
    position: absolute;
    inset-inline-start: 12px;
    top: 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mui-secondary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mui-secondary) 18%, transparent);
}

.checkout-option-icon {
    width: 50px;
    height: 50px;
    border: 1px solid color-mix(in srgb, var(--mui-secondary) 10%, var(--mui-border));
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    font-size: 24px;
}

.checkout-radio-card:has(input:checked) .checkout-option-icon {
    border-color: color-mix(in srgb, var(--mui-secondary) 35%, var(--mui-border));
}

.checkout-option-title {
    font-size: 14px;
    line-height: 1.8;
}

.checkout-radio-card small {
    color: var(--mui-muted);
    font-size: 12px;
    line-height: 1.9;
}

.checkout-option-cost {
    margin-top: 2px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--mui-success) 16%, var(--mui-border));
    background: color-mix(in srgb, var(--mui-success-soft) 86%, var(--mui-surface));
}

.checkout-warning-hint {
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mui-warning-soft) 90%, var(--mui-surface));
    border-color: color-mix(in srgb, var(--mui-warning) 25%, var(--mui-border));
}

.checkout-inline-field,
.senso-earn-box {
    border: 1px solid color-mix(in srgb, var(--mui-border) 82%, transparent);
    border-radius: 22px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mui-background) 82%, var(--mui-surface)), var(--mui-surface));
    padding: 16px;
    box-shadow: none;
}

.checkout-inline-field > span,
.senso-earn-box span {
    font-size: 13px;
}

.checkout-apply-row {
    gap: 10px;
}

.checkout-apply-row input {
    min-height: 46px;
    border-radius: 14px;
    padding: 0 14px;
}

.checkout-apply-row .cart-back-btn {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--mui-secondary) 26%, var(--mui-border));
    background: color-mix(in srgb, var(--mui-secondary-soft) 72%, var(--mui-surface));
    color: var(--mui-secondary);
}

.senso-coin-field .senso-coin-head {
    margin-bottom: 10px;
}

.senso-coin-icon {
    width: 36px;
    height: 36px;
}

.senso-earn-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 158px;
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--mui-success-soft) 70%, transparent), transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--mui-success-soft) 40%, var(--mui-surface)), var(--mui-surface));
    border-color: color-mix(in srgb, var(--mui-success) 18%, var(--mui-border));
}

.senso-earn-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.senso-earn-title .senso-coin-icon {
    order: 2;
}

.senso-earn-box b {
    margin-top: auto;
    font-size: 28px;
    line-height: 1.4;
}

.gateway-options {
    grid-template-columns: minmax(260px, 460px);
}

.gateway-options .checkout-media-card {
    min-height: 92px;
}

.form-actions {
    margin-top: 6px;
    padding-top: 4px;
    border-top: 0;
}

.form-actions .cart-back-btn {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid color-mix(in srgb, var(--mui-border) 85%, transparent);
    border-radius: 14px;
    background: var(--mui-surface);
    box-shadow: none;
}

.review-card {
    border-radius: 22px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mui-background) 80%, var(--mui-surface)), var(--mui-surface));
    padding: 18px;
}

.review-card dl div {
    padding: 10px 0;
}

.review-total-card {
    border-color: color-mix(in srgb, var(--mui-primary) 16%, var(--mui-border));
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--mui-primary-soft) 50%, transparent), transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--mui-primary-soft) 35%, var(--mui-surface)), var(--mui-surface));
}

@media (max-width: 992px) {
    .payment-form .checkout-option-group {
        padding: 18px;
    }
    .gateway-options {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .payment-step .address-alert,
    .review-step .address-alert {
        border-radius: 16px;
        padding: 12px 14px;
    }
    .payment-form .checkout-option-group {
        border-radius: 18px;
        padding: 14px;
    }
    .checkout-media-card {
        min-height: auto;
        border-radius: 16px;
        padding: 14px;
    }
    .checkout-option-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        font-size: 21px;
    }
    .checkout-option-title {
        font-size: 13px;
    }
    .senso-earn-box {
        min-height: 132px;
    }
    .senso-earn-box b {
        font-size: 24px;
    }
}
/* Requested payment group/radio/hint refinement */
.payment-form .checkout-option-group {
    position: relative;
    margin-bottom: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mui-background) 65%, var(--mui-surface)), var(--mui-surface));
    padding: 22px;
}

/* Remove the extra decorative selected dot; keep only the real radio button */
.checkout-radio-card:has(input:checked)::after {
    content: none;
}

.checkout-option-content {
    align-items: flex-start;
}

.checkout-option-content small {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 4px;
    color: color-mix(in srgb, var(--mui-muted) 78%, transparent);
    font-size: 12px;
    line-height: 1.9;
}

.checkout-option-content small::before {
    content: "؟";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mui-secondary-soft) 72%, var(--mui-surface));
    color: color-mix(in srgb, var(--mui-secondary) 72%, var(--mui-muted));
    font-size: 11px;
    line-height: 1;
    margin-top: 3px;
}

.checkout-warning-hint::before {
    content: "!";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mui-warning) 16%, var(--mui-surface));
    color: var(--mui-warning);
    font-size: 11px;
    line-height: 1;
}

@media (max-width: 768px) {
    .payment-form .checkout-option-group {
        border-radius: 18px;
        padding: 14px;
    }
}
/* SnapPay-like checkout card styling */
:root,
:host {
    --checkout-card-border: #d9e2e8;
    --checkout-card-bg: #ffffff;
    --checkout-card-selected-border: #17a7bd;
    --checkout-card-selected-bg: #eef8fb;
    --checkout-icon-bg: #dceaf6;
    --checkout-icon-color: #1d8fb5;
    --checkout-hint-color: #7f8f9c;
    --checkout-muted-bg: #f7fafc;
}

.payment-form .checkout-option-group {
    position: relative;
    margin-bottom: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mui-background) 65%, var(--mui-surface)), var(--mui-surface));
    padding: 22px;
}

.payment-form .checkout-section-title,
.review-card h2 {
    margin-bottom: 18px;
    font-size: 18px;
    color: var(--mui-text);
}

.payment-form .checkout-section-title::after,
.review-card h2::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--checkout-card-selected-border) 35%, transparent), transparent);
}

.checkout-option-grid,
.checkout-benefit-grid {
    gap: 16px;
}

.checkout-media-card {
    min-height: 92px;
    border: 1px solid var(--checkout-card-border);
    border-radius: 18px;
    background: var(--checkout-card-bg);
    padding: 16px 18px;
    box-shadow: none;
    transform: none;
}

.checkout-media-card:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--checkout-card-selected-border) 24%, var(--checkout-card-border));
    box-shadow: none;
}

.checkout-radio-card:has(input:checked) {
    border-color: var(--checkout-card-selected-border);
    background: var(--checkout-card-selected-bg);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--checkout-card-selected-border) 18%, transparent);
}

.checkout-radio-card:has(input:checked)::after {
    content: none;
}

.checkout-media-card {
    grid-template-columns: 24px 52px minmax(0, 1fr);
    gap: 10px 14px;
    align-items: center;
}

.checkout-media-card input {
    grid-column: 1;
    width: 18px;
    height: 18px;
    accent-color: var(--checkout-card-selected-border);
    justify-self: center;
}

.checkout-option-icon {
    width: 52px;
    height: 52px;
    grid-column: 2;
    border: none;
    border-radius: 14px;
    color: var(--checkout-icon-color);
    box-shadow: none;
    font-size: 24px;
}

.checkout-radio-card:has(input:checked) .checkout-option-icon {
    color: var(--checkout-icon-color);
    border: none;
}

.checkout-option-content {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.checkout-option-title {
    color: var(--mui-text);
    font-size: 15px;
    line-height: 1.8;
    font-family: "IranSansBold", "IRANSansWeb_Bold", "IRANSansXFaNum-Bold", "IRANSans-Bold", "IRANSans", sans-serif;
}

.checkout-option-content small {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 2px;
    color: var(--checkout-hint-color);
    font-size: 12px;
    line-height: 1.95;
}

.checkout-option-content small::before {
    content: "؟";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f0f5fa;
    color: #90a1b0;
    font-size: 11px;
    line-height: 1;
    margin-top: 2px;
}

.checkout-option-cost {
    margin-top: 5px;
    padding: 4px 10px;
    border: none;
    border-radius: 999px;
    background: #edf5ef;
    color: #355e3b;
    font-size: 12px;
    font-family: "IranSansBold", "IRANSansWeb_Bold", "IRANSansXFaNum-Bold", "IRANSans-Bold", "IRANSans", sans-serif;
}

.checkout-warning-hint {
    margin-top: 6px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 0;
    border: none;
    background: transparent;
    color: #e08b1f;
    font-size: 12px;
    line-height: 1.95;
    font-family: inherit;
}

.checkout-warning-hint::before {
    content: "!";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff4e1;
    color: #db8a16;
    font-size: 12px;
    line-height: 1;
    margin-top: 2px;
}

.checkout-inline-field,
.senso-earn-box,
.review-card {
    border: 1px solid var(--checkout-card-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: none;
}

.checkout-inline-field {
    padding: 16px;
}

.checkout-inline-field > span,
.senso-earn-box span {
    font-size: 14px;
    color: var(--mui-text);
    margin-bottom: 10px;
}

.checkout-apply-row {
    gap: 12px;
}

.checkout-apply-row input {
    min-height: 48px;
    border: 1px solid var(--checkout-card-border);
    border-radius: 14px;
    background: #fff;
}

.checkout-apply-row .cart-back-btn {
    min-height: 48px;
    min-width: 90px;
    border: 1px solid var(--checkout-card-border);
    border-radius: 14px;
    background: var(--checkout-muted-bg);
    color: var(--checkout-icon-color);
}

.senso-coin-field .senso-coin-head {
    margin-bottom: 10px;
}

.senso-coin-head small {
    color: var(--checkout-hint-color);
    font-size: 12px;
    line-height: 1.9;
}

.senso-earn-box {
    min-height: 146px;
    padding: 18px;
    background: #f3faf4;
    border-color: #cfe4d3;
}

.senso-earn-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.senso-earn-box b {
    color: #2f8a3d;
    font-size: 30px;
}

.gateway-options {
    grid-template-columns: minmax(260px, 460px);
}

.form-actions .cart-back-btn {
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--checkout-card-border);
    border-radius: 14px;
    background: var(--checkout-muted-bg);
    color: var(--mui-text);
}

@media (max-width: 768px) {
    .payment-form .checkout-option-group {
        border-radius: 18px;
        padding: 14px;
    }
    .payment-form .checkout-section-title,
    .review-card h2 {
        font-size: 16px;
    }
    .checkout-media-card {
        grid-template-columns: 22px 44px minmax(0, 1fr);
        min-height: auto;
        padding: 14px;
    }
    .checkout-option-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 20px;
    }
    .checkout-option-title {
        font-size: 14px;
    }
    .checkout-option-content small,
    .checkout-warning-hint {
        font-size: 11px;
    }
    .checkout-apply-row {
        grid-template-columns: 1fr;
    }
    .checkout-apply-row .cart-back-btn {
        width: 100%;
    }
}
/* Final checkout option group and sidebar Senso coin placement */
.payment-form .checkout-option-group {
    position: relative;
    margin-bottom: 18px;
    border: 0;
    border-radius: 24px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mui-background) 65%, var(--mui-surface)), var(--mui-surface));
    padding: 22px;
    box-shadow: none;
}

.checkout-radio-card:has(input:checked) {
    border-color: var(--mui-secondary);
    background: var(--mui-secondary-soft);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mui-secondary) 14%, transparent);
}

.checkout-radio-card:has(input:checked) .checkout-option-icon {
    background: color-mix(in srgb, var(--mui-secondary-soft) 90%, var(--mui-surface));
    color: var(--mui-secondary);
}

.summary-senso-earn {
    margin: 8px 0 0;
    border-radius: var(--mui-radius-xs);
    background: color-mix(in srgb, var(--mui-success-soft) 58%, var(--mui-surface));
    color: var(--mui-success);
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.8;
    font-family: "IranSansBold", "IRANSansWeb_Bold", "IRANSansXFaNum-Bold", "IRANSans-Bold", "IRANSans", sans-serif;
}

.payment-step .senso-earn-box {
    display: none;
}

@media (max-width: 768px) {
    .payment-form .checkout-option-group {
        border-radius: 18px;
        padding: 14px;
    }
}
/* Final sidebar Senso coin and exact checkout group styling */
.payment-form .checkout-option-group {
    position: relative;
    margin-bottom: 18px;
    border: 0;
    border-radius: 24px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mui-background) 65%, var(--mui-surface)), var(--mui-surface));
    padding: 22px;
    box-shadow: none;
}

.checkout-radio-card:has(input:checked) {
    border-color: var(--mui-secondary);
    background: var(--mui-secondary-soft);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mui-secondary) 14%, transparent);
}

.summary-senso-earn {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0;
    border: 1px solid color-mix(in srgb, #f0b429 28%, var(--mui-border));
    border-radius: var(--mui-radius-sm);
    background: linear-gradient(180deg, #fffaf0, #fff);
    padding: 10px;
}

.summary-senso-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.summary-senso-icon-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.summary-senso-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.summary-senso-value {
    color: #a76500;
    font-size: 13px;
    line-height: 1.8;
    font-family: "IranSansBold", "IRANSansWeb_Bold", "IRANSansXFaNum-Bold", "IRANSans-Bold", "IRANSans", sans-serif;
}

.summary-senso-content small {
    color: var(--mui-muted);
    font-size: 11px;
    line-height: 1.7;
}

.payment-step .senso-earn-box {
    display: none;
}

@media (max-width: 768px) {
    .payment-form .checkout-option-group {
        border-radius: 18px;
        padding: 14px;
    }
    .summary-senso-earn {
        padding: 9px;
    }
}
/* Discount/Senso layout cleanup and fetch loading states */
.delivery-options {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
}

.checkout-discount-senso-group .checkout-benefit-grid {
    align-items: start;
}

.checkout-discount-senso-group .checkout-inline-field {
    min-height: 156px;
}

.checkout-apply-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 10px;
    align-items: center;
}

.checkout-apply-row input {
    height: 48px;
    min-height: 48px;
}

.checkout-apply-row .cart-back-btn {
    height: 48px;
    min-height: 48px;
    margin: 0;
    align-self: stretch;
}

[data-discount-message][hidden] {
    display: none;
}

[data-discount-message] {
    display: block;
    margin-top: 8px;
    color: var(--mui-muted);
    font-size: 11px;
    line-height: 1.8;
}

.senso-coin-field .senso-coin-head {
    display: none;
}

.senso-coin-balance {
    display: block;
    margin-top: 8px;
    color: var(--mui-muted);
    font-size: 11px;
    line-height: 1.8;
}

.cart-back-btn {
    position: relative;
}

.button-loader {
    width: 16px;
    height: 16px;
    display: none;
    border: 2px solid color-mix(in srgb, currentColor 26%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: cartLoadingSpin 0.7s linear infinite;
}

.cart-back-btn.is-loading {
    gap: 8px;
    cursor: wait;
    opacity: 0.82;
}

.cart-back-btn.is-loading .button-loader {
    display: inline-block;
}

.custom-select-wrapper.is-fetching .custom-select-display,
.cart-checkout.is-fetching .cart-products-list {
    position: relative;
    opacity: 0.72;
    cursor: wait;
}

.custom-select-wrapper.is-fetching .custom-select-display::after {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 2px solid color-mix(in srgb, var(--mui-secondary) 24%, transparent);
    border-top-color: var(--mui-secondary);
    border-radius: 50%;
    animation: cartLoadingSpin 0.7s linear infinite;
}

@keyframes cartLoadingSpin {
    to {
        transform: rotate(360deg);
    }
}
@media (max-width: 992px) {
    .delivery-options {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}
@media (max-width: 768px) {
    .delivery-options {
        grid-template-columns: 1fr;
    }
    .checkout-apply-row {
        grid-template-columns: minmax(0, 1fr) 88px;
    }
    .checkout-apply-row .cart-back-btn {
        width: 100%;
    }
}
/* Final requested refinements: normal hints, blue radios, neutral summary total, OSM map */
.checkout-warning-hint,
.checkout-option-content small,
.checkout-option-cost {
    font-family: inherit;
}

.checkout-warning-hint {
    font-size: 12px;
}

.checkout-radio-card input {
    accent-color: var(--mui-secondary);
}

.summary-total {
    background: transparent;
    padding: 10px 4px;
}

.summary-total .summary-value {
    color: var(--mui-text);
}

.checkout-map-field {
    margin: 14px 0;
    border: 1px solid var(--mui-border);
    border-radius: var(--mui-radius-md);
    background: var(--mui-surface);
    padding: 12px;
}

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

.checkout-map-head span {
    color: var(--mui-text);
    font-size: 13px;
    font-family: "IranSansBold", "IRANSansWeb_Bold", "IRANSansXFaNum-Bold", "IRANSans-Bold", "IRANSans", sans-serif;
}

.checkout-map-head small {
    color: var(--mui-muted);
    font-size: 11px;
    line-height: 1.8;
}

.checkout-map {
    width: 100%;
    height: 320px;
    border-radius: var(--mui-radius-sm);
    overflow: hidden;
    background: var(--mui-secondary-soft);
}

.leaflet-container {
    font-family: inherit;
}

@media (max-width: 768px) {
    .checkout-map-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .checkout-map {
        height: 260px;
    }
}
/* Final map zoom and option typography/cost refinements */
.checkout-option-cost {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--mui-success);
    font-size: 12px;
    line-height: 1.8;
}

.checkout-option-title {
    font-size: 16px;
    line-height: 1.75;
}

.checkout-option-content small {
    color: color-mix(in srgb, var(--mui-muted) 68%, transparent);
    font-size: 11px;
    line-height: 1.9;
}

.checkout-warning-hint {
    color: color-mix(in srgb, var(--mui-warning) 82%, var(--mui-muted));
    font-size: 11px;
    line-height: 1.9;
}

@media (max-width: 768px) {
    .checkout-option-title {
        font-size: 15px;
    }
    .checkout-option-content small,
    .checkout-warning-hint {
        font-size: 10.5px;
    }
}
/* Dark mode checkout/review fixes */
[data-theme=dark] .cart-checkout {
    --mui-surface: var(--bg-color-2);
    --mui-background: var(--bg-color);
    --mui-text: var(--text-color);
    --mui-muted: var(--text-color-lighten);
    --mui-border: var(--border-color);
    --mui-secondary-soft: rgba(30, 166, 233, 0.12);
    --checkout-card-bg: var(--bg-color-2);
    --checkout-card-border: var(--border-color);
    --checkout-card-selected-bg: rgba(30, 166, 233, 0.14);
    --checkout-icon-bg: rgba(30, 166, 233, 0.14);
    --checkout-muted-bg: var(--button-bg-color);
    --checkout-hint-color: var(--text-color-lighten);
}

[data-theme=dark] .cart-summary-card,
[data-theme=dark] .cart-stepper-item,
[data-theme=dark] .cart-products-list,
[data-theme=dark] .cart-empty-state,
[data-theme=dark] .auth-choice-card,
[data-theme=dark] .checkout-form,
[data-theme=dark] .checkout-option-group,
[data-theme=dark] .checkout-inline-field,
[data-theme=dark] .review-card,
[data-theme=dark] .checkout-map-field {
    background: var(--bg-color-2);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme=dark] .review-card,
[data-theme=dark] .review-total-card,
[data-theme=dark] .payment-form .checkout-option-group {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-color-2) 86%, var(--bg-color)), var(--bg-color-2));
}

[data-theme=dark] .review-card h2,
[data-theme=dark] .review-card dd,
[data-theme=dark] .checkout-section-title,
[data-theme=dark] .checkout-option-title,
[data-theme=dark] .summary-label,
[data-theme=dark] .summary-value {
    color: var(--text-color);
}

[data-theme=dark] .review-card dt,
[data-theme=dark] .checkout-option-content small,
[data-theme=dark] .checkout-warning-hint,
[data-theme=dark] .summary-note,
[data-theme=dark] .checkout-map-head small {
    color: var(--text-color-lighten);
}

[data-theme=dark] .checkout-radio-card,
[data-theme=dark] .checkout-media-card {
    background: var(--bg-color-2);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme=dark] .checkout-radio-card:has(input:checked),
[data-theme=dark] .checkout-media-card:has(input:checked) {
    background: rgba(30, 166, 233, 0.14);
    border-color: var(--link-color);
    box-shadow: 0 0 0 1px rgba(30, 166, 233, 0.18);
}

[data-theme=dark] .checkout-option-icon {
    background: rgba(30, 166, 233, 0.14);
    color: var(--link-color);
    border-color: rgba(30, 166, 233, 0.18);
}

[data-theme=dark] .checkout-radio-card input {
    accent-color: var(--link-color);
}

[data-theme=dark] .checkout-option-cost {
    background: transparent;
    color: var(--success-color);
}

[data-theme=dark] .checkout-inline-field input,
[data-theme=dark] .checkout-form input,
[data-theme=dark] .checkout-form select,
[data-theme=dark] .checkout-form textarea,
[data-theme=dark] .custom-select-display,
[data-theme=dark] .custom-select-options,
[data-theme=dark] .custom-select-search {
    background: var(--input-bg-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme=dark] .checkout-apply-row .cart-back-btn,
[data-theme=dark] .form-actions .cart-back-btn {
    background: var(--button-bg-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme=dark] .address-alert {
    background: linear-gradient(180deg, rgba(30, 166, 233, 0.12), var(--bg-color-2));
    color: var(--text-color);
    border-color: rgba(30, 166, 233, 0.22);
}

[data-theme=dark] .summary-total {
    background: transparent;
}

[data-theme=dark] .summary-total .summary-value,
[data-theme=dark] .review-payable-row dd {
    color: var(--text-color);
}

[data-theme=dark] .review-payable-row dd {
    color: var(--theme-color);
}

[data-theme=dark] .summary-senso-earn {
    background: rgba(255, 193, 7, 0.08);
    border-color: rgba(255, 193, 7, 0.28);
}

[data-theme=dark] .summary-senso-value {
    color: #ffc857;
}

[data-theme=dark] .summary-senso-content small {
    color: var(--text-color-lighten);
}

[data-theme=dark] .checkout-map {
    background: var(--bg-color);
}

[data-theme=dark] .leaflet-container {
    background: var(--bg-color);
}

/* Shipping methods: motorbike, Tipax and freight details */
.delivery-options {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
}

.shipping-detail-list {
    display: grid;
    gap: 4px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.shipping-detail-list li {
    color: var(--mui-muted);
    font-size: 11px;
    line-height: 1.9;
    font-family: inherit;
}

.checkout-warning-hint,
.checkout-option-content small {
    font-family: inherit;
}

@media (max-width: 768px) {
    .delivery-options {
        grid-template-columns: 1fr;
    }
}
/* Gateway visibility, shorter shipping text and full-width empty cart */
[data-gateway-section][hidden] {
    display: none;
}

.cart-checkout.is-empty {
    display: block;
    width: 100%;
}

.cart-checkout.is-empty .cart-stage-panel {
    width: 100%;
    max-width: 100%;
    grid-column: 1/-1;
}

.cart-checkout.is-empty .cart-step[data-cart-step=products] {
    display: block;
    width: 100%;
}

.cart-checkout.is-empty .cart-empty-state {
    width: 100%;
    max-width: 100%;
}

.delivery-options {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
}

.checkout-option-content small {
    max-width: 100%;
}

@media (max-width: 768px) {
    .cart-checkout.is-empty {
        display: block;
        margin-top: 50px;
    }
    .delivery-options {
        grid-template-columns: 1fr;
    }
}
/* Required payment groups and Senso coin balance refinement */
.payment-error-panel[hidden] {
    display: none;
}

[data-payment-group].is-invalid {
    border-color: var(--mui-error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mui-error) 10%, transparent);
}

.senso-coin-balance {
    color: var(--mui-muted);
    font-size: 12px;
    line-height: 1.9;
}

/* Final cleanup: Senso balance, mobile stepper readability, auth full-width mobile */
.senso-coin-balance {
    color: var(--mui-muted);
    font-size: 12px;
    line-height: 1.9;
}

.senso-coin-balance-value {
    color: #27b66f;
    font-size: 16px;
    line-height: 1.8;
    font-family: "IranSansBold", "IRANSansWeb_Bold", "IRANSansXFaNum-Bold", "IRANSans-Bold", "IRANSans", sans-serif;
}

@media (max-width: 768px) {
    .cart-stage-panel,
    .cart-step,
    .auth-step,
    .auth-choice-grid,
    .auth-choice-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .auth-choice-grid {
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
    }
    .auth-choice-card {
        min-width: 0;
    }
}
@media (max-width: 380px) {
    .cart-stepper {
        grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
    }
    .cart-stepper-item {
        min-height: 46px;
        gap: 0;
        padding: 4px 2px;
    }
    .cart-stepper-item .stepper-index {
        display: none;
    }
    .stepper-text {
        overflow: visible;
        font-size: 10px;
        line-height: 1.45;
        text-align: center;
        text-overflow: clip;
        white-space: normal;
    }
}
/* Checkout option icons use img tags; replace each img src in cart.html with the final icon path. */
.checkout-option-icon {
    overflow: hidden;
}

.checkout-option-icon img {
    width: 50px;
    height: 50px;
    display: block;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 768px) {
    .checkout-option-icon img {
        width: 22px;
        height: 22px;
    }
}
.d-none{
    display: none !important;
}
.checkout-option-icon svg,.checkout-option-icon path{
    fill:temp !important;
}