.billing-view[hidden],.billing-modal-layer[hidden]{display:none!important}.billing-view{flex:1;min-height:0;overflow:auto;margin-top:24px;padding:0 0 40px;direction:rtl;color:#0a1f44}.billing-page{max-width:1544px;margin:auto;display:flex;flex-direction:column;gap:40px}.billing-heading{display:flex;align-items:center;gap:16px}.billing-heading h1{font-size:24px;font-weight:600;margin:0}.billing-back,.billing-close{width:40px;height:40px;border:1px solid #f2f2f2;border-radius:12px;background:#fff;display:grid;place-items:center}.billing-back img{width:24px;transform:rotate(180deg)}.billing-summary{height:248px;padding:16px;border:1px solid #f2f2f2;border-radius:16px;background:#fff;display:grid;grid-template-columns:1fr 1fr;gap:16px}.billing-summary article{border:1px solid #f2f2f2;border-radius:16px;padding:24px;display:flex;align-items:center}.billing-current{justify-content:space-between;background:linear-gradient(135deg,#fbfaff,#fff)}.billing-current-copy{display:flex;flex-direction:column;gap:10px}.billing-current small,.billing-stat small{color:#53627c}.billing-current h2{margin:0;font-size:28px;color:#635bff}.billing-current p{margin:0;font-size:13px}.billing-current img{width:170px;max-height:180px}.billing-usage{gap:32px;justify-content:center}.billing-donut{--p:0;width:160px;height:160px;border-radius:50%;background:conic-gradient(#635bff calc(var(--p)*1%),#eeeefd 0);display:grid;place-items:center;position:relative}.billing-donut:after{content:"";position:absolute;inset:18px;background:white;border-radius:50%}.billing-donut span{z-index:1;text-align:center}.billing-donut b{display:block;font-size:24px}.billing-donut small{font-size:11px;color:#53627c}.billing-usage-details{min-width:220px}.billing-usage-details h3{margin:0 0 16px;font-size:16px}.billing-usage-details strong{font-size:26px}.billing-usage-details p{display:flex;justify-content:space-between;gap:20px;margin:12px 0 0;font-size:12px}.billing-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-left:6px;background:#ddd}.billing-dot.used{background:#635bff}.billing-section-title{margin:0 0 -16px;font-size:20px}.billing-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.billing-plan{min-height:514px;padding:24px;border:1px solid #f2f2f2;border-radius:16px;background:#fff;box-shadow:0 8px 28px #0a1f440a;display:flex;flex-direction:column;position:relative;transition:.18s}.billing-plan:hover{border-color:#d7d3ff;transform:translateY(-2px);box-shadow:0 12px 32px #635bff14}.billing-plan.active{border:2px solid #635bff;background:#fcfbff}.billing-plan-badge{position:absolute;top:16px;left:16px;border-radius:20px;background:#fff4d8;color:#a96500;padding:5px 12px;font-size:11px}.billing-plan-head{display:flex;align-items:center;gap:12px}.billing-plan-head img{width:48px;height:48px}.billing-plan h3{font-size:22px;margin:0}.billing-plan-price{min-height:68px;margin:20px 0}.billing-plan-price b{font-size:24px}.billing-plan-price small{color:#53627c;margin-right:5px}.billing-plan ul{padding:0;margin:0 0 24px;list-style:none;display:flex;flex-direction:column;gap:13px;font-size:13px}.billing-plan li{display:flex;align-items:center;gap:9px}.billing-plan li img{width:20px;height:20px}.billing-button{height:48px;border:0;border-radius:12px;background:#635bff;color:#fff;padding:0 20px;margin-top:auto}.billing-button:hover{background:#554bea}.billing-button:disabled{cursor:default;background:#eeecff;color:#635bff}.billing-outline{height:48px;border:1px solid #635bff;border-radius:12px;background:#fff;color:#635bff;padding:0 20px}.billing-banner{min-height:144px;border-radius:16px;padding:24px 32px;background:linear-gradient(110deg,#f2efff,#fbfaff);display:flex;align-items:center;gap:24px}.billing-banner>img{width:96px}.billing-banner-copy{flex:1}.billing-banner h2{font-size:20px;margin:0 0 8px}.billing-banner p{font-size:13px;color:#53627c;margin:0}.billing-sidebar-button{height:48px;flex:none;margin-top:8px;border:1px solid #f2f2f2;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:0 12px;font-size:13px}.billing-sidebar-button img{width:24px;height:24px}.billing-sidebar-button:hover,.billing-sidebar-button.active{background:#f7f6ff;border-color:#dedaff;color:#635bff}
.billing-modal-layer{position:fixed;inset:0;z-index:30;background:#0a1f4466;display:grid;place-items:center;padding:24px;direction:rtl}.billing-modal{width:min(600px,100%);max-height:calc(100vh - 48px);overflow:auto;background:#fff;border-radius:20px;padding:32px;box-shadow:0 24px 70px #0a1f4433}.billing-modal header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.billing-modal header h2{font-size:20px;margin:0}.billing-close{border:0;font-size:26px}.billing-modal footer{display:flex;gap:12px;margin-top:28px}.billing-modal footer>*{flex:1}.billing-balance{display:flex;justify-content:space-between;align-items:center;padding:16px;border-radius:12px;background:#f8f7ff;margin-bottom:24px}.billing-packages{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.billing-package{min-height:126px;border:1px solid #eeeef3;border-radius:14px;background:#fff;padding:12px;text-align:right;display:flex;align-items:center;gap:12px;position:relative}.billing-package:hover,.billing-package.selected{border:2px solid #635bff;background:#fbfaff}.billing-package img{width:72px;height:72px;object-fit:contain}.billing-package b,.billing-package small{display:block}.billing-package small{color:#53627c;margin-top:7px}.billing-custom-input{margin-top:16px}.billing-field-label{display:block;font-size:13px;margin-bottom:8px}.billing-input-row{display:flex;gap:8px}.billing-input{height:48px;width:100%;border:1px solid #e5e6eb;border-radius:12px;padding:0 14px;outline:0}.billing-input:focus{border-color:#635bff}.billing-total-bar{display:flex;justify-content:space-between;margin-top:20px;padding:16px 0;border-top:1px solid #f0f0f3}.billing-checkout{display:flex;flex-direction:column;gap:22px}.billing-coupon{display:grid;grid-template-columns:1fr 105px;gap:8px}.billing-gateways,.billing-periods{display:flex;gap:10px}.billing-gateway,.billing-period{flex:1;height:64px;border:1px solid #eeeef3;border-radius:12px;background:#fff;display:grid;place-items:center}.billing-gateway img{max-width:70px;max-height:36px}.billing-gateway.selected,.billing-period.selected{border:2px solid #635bff;background:#fbfaff}.billing-order{border:1px solid #f0f0f3;border-radius:14px;padding:16px}.billing-order h3{font-size:15px;margin:0 0 12px}.billing-order p{display:flex;justify-content:space-between;margin:10px 0;font-size:13px}.billing-order p.total{border-top:1px solid #eeeef3;padding-top:14px;font-size:15px;font-weight:600}.billing-coupon-status{font-size:12px;color:#d83c3c;margin:6px 0 0}.billing-result{height:100%;min-height:calc(100vh - 140px);display:grid;place-items:center;text-align:center}.billing-result-card{max-width:520px;display:flex;flex-direction:column;align-items:center}.billing-result img{width:260px;max-height:260px;object-fit:contain}.billing-result h1{font-size:26px;margin:20px 0 8px}.billing-result p{color:#53627c;line-height:1.9;margin:0 0 24px}.billing-result .billing-button{min-width:190px}.billing-insufficient{text-align:center}.billing-insufficient>img{width:220px}.billing-insufficient h2{margin:8px 0}.billing-insufficient p{color:#53627c;line-height:1.9}.billing-insufficient-stats{display:flex;gap:12px;margin:20px 0}.billing-insufficient-stats span{flex:1;background:#f8f7ff;border-radius:12px;padding:14px}.billing-insufficient-stats b{display:block;margin-top:6px}.billing-insufficient-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.billing-insufficient-actions button{min-height:110px;border:1px solid #eeeef3;border-radius:14px;background:#fff;padding:12px}.billing-insufficient-actions img{width:44px;display:block;margin:0 auto 8px}
@media(max-width:1100px){.billing-summary{height:auto;grid-template-columns:1fr}.billing-plans{grid-template-columns:1fr}.billing-plan{min-height:460px}.billing-view{margin-top:18px}}@media(max-width:700px){.billing-page{gap:24px}.billing-summary{padding:10px}.billing-summary article{padding:16px}.billing-current img{width:110px}.billing-usage{flex-direction:column}.billing-banner{padding:20px;align-items:flex-start}.billing-banner>img{width:64px}.billing-modal{padding:20px}.billing-packages{grid-template-columns:1fr}.billing-gateways{display:grid;grid-template-columns:1fr 1fr}}

/* Billing screens follow the exact desktop proportions of the linked Figma frames. */
.billing-view{margin-top:16px;padding-bottom:24px}.billing-page{width:100%;max-width:none;gap:40px}.billing-heading{height:40px;justify-content:flex-start}.billing-heading h1{font-size:20px;line-height:32px;font-weight:700}.billing-summary{height:248px;padding:16px;gap:16px;direction:ltr}.billing-summary article{height:214px;padding:16px;direction:rtl;background:#fff}.billing-current{grid-column:1;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between}.billing-usage{grid-column:2;display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:24px}.billing-card-title{display:flex;align-items:center;justify-content:flex-start;gap:8px;color:#53627c;font-size:16px;font-weight:500;line-height:28px}.billing-title-icon{width:40px;height:40px;border-radius:12px;background:#635bff0d;display:grid;place-items:center}.billing-title-icon img{width:20px;height:20px;object-fit:contain}.billing-detail-rows{display:flex;flex-direction:column;gap:16px;width:100%}.billing-detail-rows p{display:flex;align-items:center;justify-content:space-between;margin:0;font-size:16px;line-height:28px}.billing-detail-rows p span{display:flex;align-items:center;gap:8px;color:#53627c}.billing-detail-rows i{width:12px;height:12px;border-radius:50%;background:#635bff}.billing-detail-rows p+ p i{background:#eeecff}.billing-donut{width:217px;height:180px;flex:none;background:conic-gradient(#635bff calc(var(--p)*1%),#eeecff 0);border-radius:50%}.billing-donut:after{inset:28px}.billing-donut b{font-size:24px;line-height:37px}.billing-donut small{font-size:14px;line-height:21px}.billing-usage-details{width:305px;min-width:0;height:180px;display:flex;flex-direction:column;align-items:stretch;gap:8px}.billing-usage-details .billing-card-title{justify-content:flex-start;margin-bottom:8px}.billing-usage-details p{font-size:16px;line-height:28px;margin:0}.billing-dot{width:12px;height:12px}.billing-plans{gap:32px;direction:rtl}.billing-plan{height:514px;min-height:514px;padding:16px;gap:16px;justify-content:flex-start;border:1px solid #f2f2f2;box-shadow:0 0 5.5px #0000000d}.billing-plan:hover{transform:none;border-color:#dcd9ff;box-shadow:0 0 15px #00000012}.billing-plan.active{border:1px solid #635bff;background:#fff}.billing-plan-head{height:56px;gap:8px;align-items:center}.billing-plan-head>img{width:56px;height:56px;order:0}.billing-plan-head>div{flex:1;text-align:right}.billing-plan-head h3{font-size:18px;line-height:28px;font-weight:600}.billing-plan-head small{display:block;color:#8a94a6;font-size:14px;line-height:28px}.billing-plan-price{height:38px;min-height:38px;margin:0;display:flex;align-items:center;justify-content:center;gap:8px}.billing-plan-price b{font-size:24px;line-height:38px}.billing-plan-price small{font-size:16px;color:#8a94a6;margin:0}.billing-plan .billing-button{order:0;flex:none;width:100%;margin:0}.billing-plan ul{margin:0;gap:16px}.billing-plan li{font-size:16px;line-height:28px;font-weight:500}.billing-plan li img{width:24px;height:24px;order:-1}.billing-plan-badge{top:-20px;left:50%;transform:translateX(-50%);height:40px;display:flex;align-items:center;gap:8px;padding:6px 16px;border-radius:12px;background:#fff5e6;color:#0a1f44;font-size:14px;line-height:28px;white-space:nowrap}.billing-plan-badge img{width:20px;height:20px;object-fit:contain}.billing-plan.active .billing-button{background:#635bff0d;border:1px solid #635bff;color:#635bff}.billing-plan:not(.active):last-child .billing-button{background:#ff9e00}.billing-banner{height:168px;min-height:168px;padding:24px;border:1px solid #635bff;border-radius:16px;background:#f3f2ff;overflow:hidden;position:relative;justify-content:flex-end}.billing-banner-bg{position:absolute!important;left:-1px;top:-1px;width:613px!important;height:168px!important;object-fit:cover}.billing-banner-diamond{position:absolute!important;left:103px;top:5px;width:278px!important;height:158px!important;object-fit:cover}.billing-banner-copy{position:relative;z-index:1;width:474px;flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:16px}.billing-banner h2{font-size:18px;line-height:28px;font-weight:600;margin:0}.billing-banner p{font-size:14px;line-height:28px}.billing-banner .billing-outline{display:flex;align-items:center;gap:8px;background:#635bff0d;font-size:16px}.billing-banner .billing-outline img{width:24px;height:24px}
.billing-modal{border-radius:16px}.billing-modal header{height:56px;align-items:flex-start;border-bottom:1px solid #f2f2f2;margin-bottom:32px}.billing-modal header h2{font-size:20px;line-height:32px}.billing-close{width:32px;height:32px}.billing-credit-modal{width:min(800px,100%);padding:32px}.billing-balance{height:64px;margin-bottom:32px;padding:16px;background:#f8f9fb}.billing-balance span{display:flex;align-items:center;gap:8px;color:#53627c}.billing-balance span img{width:32px;height:32px}.billing-field-label{font-size:14px;line-height:21px;color:#53627c}.billing-packages{grid-template-columns:repeat(4,1fr);gap:8px;direction:ltr}.billing-package{height:185px;min-height:185px;padding:16px 12px;display:flex;flex-direction:column;justify-content:center;text-align:center;gap:8px;border-radius:16px;direction:rtl;box-shadow:0 0 15px #00000012}.billing-package:hover{border-color:#d9d6ff}.billing-package.selected{border:1px solid #635bff;background:#fff;box-shadow:0 0 15px #00000012}.billing-package .billing-radio{position:absolute;right:16px;top:16px;width:24px;height:24px;border:1px solid #d7d9df;border-radius:50%}.billing-package.selected .billing-radio{border:6px solid #635bff}.billing-package img{width:auto;height:56px;max-width:124px;object-fit:contain}.billing-package b{font-size:16px;line-height:25px}.billing-package small{font-size:16px;line-height:31px;color:#0a1f44}.billing-custom-input{margin-top:8px}.billing-stepper{height:48px;border:1px solid #e5e6eb;border-radius:12px;display:flex;align-items:center;overflow:hidden}.billing-stepper .billing-input{border:0;text-align:center;border-radius:0}.billing-stepper button{width:48px;height:32px;margin:8px;border:0;border-radius:8px;background:#f3f2ff;color:#635bff;font-size:22px}.billing-total-bar{height:48px;margin-top:32px;padding:16px 0 0;border-top:1px solid #f2f2f2;font-size:16px}.billing-total-bar b{font-size:20px;color:#635bff}.billing-credit-modal footer{gap:16px}.billing-credit-modal footer .billing-button{order:0}.billing-credit-modal footer .billing-outline{flex:0 0 138px}
.billing-checkout{gap:24px}.billing-coupon{grid-template-columns:1fr 138px;direction:ltr}.billing-coupon>*{direction:rtl}.billing-input{font-size:16px}.billing-gateways{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.billing-gateway,.billing-period{height:48px;border-radius:12px;box-shadow:0 0 30px #00000012}.billing-gateway{position:relative}.billing-gateway:after,.billing-period:after{content:"";width:16px;height:16px;border:1px solid #f2f2f2;border-radius:50%;position:absolute;right:16px}.billing-gateway.selected,.billing-period.selected{border:1px solid #635bff;background:#fff;box-shadow:0 0 15px #00000012}.billing-gateway.selected:after,.billing-period.selected:after{border:5px solid #635bff}.billing-gateway img{max-width:63px;max-height:32px}.billing-periods{gap:8px}.billing-period{position:relative;font-size:14px}.billing-order{padding:16px;border:0;background:#f8f9fb;border-radius:16px}.billing-order h3{margin:0 0 16px;color:#53627c;font-size:14px;font-weight:400}.billing-order p{align-items:center;gap:8px;margin:8px 0;color:#8a94a6;line-height:32px}.billing-order p:not(.total):after{content:"";height:1px;background:#e7e8ec;flex:1;order:1}.billing-order p span{order:2}.billing-order p b{order:0;color:#0a1f44;font-size:16px}.billing-order p.total{background:#fff;margin:16px -16px -16px;padding:16px;border-radius:0 0 16px 16px}.billing-modal footer{padding-top:16px;border-top:1px solid #f2f2f2}.billing-modal footer .billing-outline{flex:0 0 138px;order:2}.billing-modal footer .billing-button{order:1}
.billing-result{min-height:calc(100vh - 120px)}.billing-result-card{width:667px;height:523px;max-width:100%;position:relative;filter:drop-shadow(0 0 15px #0000001a)}.billing-receipt-shape{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:fill}.billing-result-content{position:relative;z-index:1;width:619px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}.billing-result-art{width:436px;height:219px;display:flex;align-items:center;justify-content:center}.billing-result-art img{width:100%;height:100%;object-fit:cover}.billing-result-card.failure .billing-result-art img{width:161px;height:161px}.billing-result h1{font-size:24px;line-height:normal;margin:0}.billing-result-card.success h1{color:#0a1f44}.billing-result-card.failure h1{color:#0a1f44}.billing-result p{font-size:18px;line-height:normal;margin:-16px 0 0}.billing-result .billing-button{height:56px;min-width:0;padding:6px 32px;border-radius:16px;font-size:16px}.billing-result-card.failure .billing-button{background:#f05b55}
@media(max-width:1200px){.billing-summary{height:auto;grid-template-columns:1fr}.billing-current,.billing-usage{grid-column:auto}.billing-summary article{height:214px}.billing-plans{grid-template-columns:1fr}.billing-plan{height:auto;min-height:514px}.billing-banner-bg{opacity:.45}.billing-banner-diamond{left:40px}.billing-banner-copy{width:min(474px,60%)}}
@media(max-width:700px){.billing-summary article{height:auto;min-height:200px}.billing-usage{flex-direction:column}.billing-donut{width:180px;height:180px}.billing-usage-details{width:100%;height:auto}.billing-banner{height:auto;min-height:190px}.billing-banner-bg{width:100%!important}.billing-banner-diamond{left:8px;top:24px;width:160px!important;height:110px!important}.billing-banner-copy{width:100%}.billing-banner-copy p{max-width:60%}.billing-credit-modal{padding:20px}.billing-packages{grid-template-columns:repeat(2,1fr)}.billing-gateways{grid-template-columns:repeat(2,1fr)}.billing-result-card{height:auto;aspect-ratio:667/523}.billing-result-content{width:92%;gap:14px}.billing-result-art{width:70%;height:42%}.billing-result h1{font-size:20px}.billing-result p{font-size:14px;padding:0 16px}.billing-result .billing-button{height:48px}}

.billing-usage{direction:ltr;flex-direction:row}.billing-usage-details{direction:rtl}.billing-package[data-package="custom"]{order:1}.billing-package[data-package="5000"]{order:2}.billing-package[data-package="3000"]{order:3}.billing-package[data-package="1000"]{order:4}
@media(max-width:700px){.billing-usage{flex-direction:column}}

.billing-checkout-modal{width:min(600px,100%);max-height:min(900px,calc(100vh - 48px));padding:32px}.billing-checkout-modal .billing-checkout{gap:24px}.billing-checkout-modal .billing-order{margin-top:16px}.billing-checkout-modal .billing-order p{margin:0;min-height:32px}.billing-checkout-modal .billing-order p+p{margin-top:8px}.billing-checkout-modal footer{display:flex;flex-direction:column;gap:16px;margin-top:32px}.billing-payable{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:16px;color:#8a94a6}.billing-payable b{font-size:20px;line-height:32px;color:#635bff}.billing-checkout-actions{width:100%;display:flex;gap:16px}.billing-checkout-actions .billing-button{flex:1;margin:0}.billing-checkout-actions .billing-outline{flex:0 0 138px}.billing-current>img,.billing-current-copy{display:none!important}
@media(max-width:700px){.billing-checkout-modal{padding:20px}.billing-checkout-actions{gap:8px}.billing-checkout-actions .billing-outline{flex-basis:110px}.billing-credit-modal footer{gap:8px}.billing-credit-modal footer .billing-outline{flex-basis:110px}}

.billing-plan{height:auto;min-height:0}.billing-plan ul{margin-bottom:0}.billing-package.selected .billing-radio{border:0;background:#635bff;color:#fff;display:grid;place-items:center}.billing-package.selected .billing-radio:after{content:"✓";font-size:14px;font-weight:700;line-height:1}.billing-gateway:after,.billing-period:after{display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;line-height:1}.billing-gateway.selected:after,.billing-period.selected:after{content:"✓";border:0;background:#635bff}.billing-banner-copy{margin-right:0}.billing-result-content{margin:auto}.billing-result-content .billing-button{margin-top:0}
@media(max-width:1200px){.billing-banner{min-height:190px}.billing-banner-copy{width:58%}.billing-banner-diamond{left:32px}}
@media(max-width:700px){.billing-banner{min-height:310px;align-items:flex-start}.billing-banner-bg{opacity:.3}.billing-banner-copy{width:100%;align-items:flex-start}.billing-banner-copy p{max-width:100%}.billing-banner-diamond{left:12px;top:auto;bottom:4px;width:190px!important;height:110px!important}.billing-packages{overflow:visible}.billing-package{min-width:0}.billing-result{padding:16px}.billing-result-card{width:min(667px,100%)}.billing-result-content{padding:18px 12px}.billing-result-art{min-height:120px}.billing-result-card.failure .billing-result-art img{width:120px;height:120px}}


/* Consolidated layout corrections – scoped to Billing only. */
.billing-page{width:min(100%,1440px);margin-inline:auto;gap:32px;padding-inline:clamp(12px,2vw,28px);box-sizing:border-box}
.billing-page *, .billing-modal-layer *{box-sizing:border-box}
.billing-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
.billing-summary article{min-width:0}
.billing-usage{gap:18px}
.billing-donut{width:170px;height:170px;aspect-ratio:1;flex:0 0 170px}
.billing-usage-details{flex:1;min-width:0;width:auto}
.billing-plans{gap:20px;align-items:stretch}
.billing-plan{min-width:0;height:auto;min-height:0;padding:20px;gap:18px}
.billing-plan-head{height:auto;min-height:56px}
.billing-plan-price{height:auto;min-height:38px}
.billing-plan ul{flex:1;gap:12px}
.billing-plan .billing-button{margin-top:auto}
/* Keep banner art in a dedicated left zone; never overlap copy or CTA. */
.billing-banner{height:auto;min-height:168px;display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,34%);align-items:center;gap:18px;direction:rtl;padding:20px 28px;isolation:isolate}
.billing-banner-bg{position:absolute!important;inset:auto 0 0 auto!important;left:auto!important;top:auto!important;width:48%!important;height:100%!important;object-fit:cover;opacity:.65;z-index:-1;pointer-events:none}
.billing-banner-diamond{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;width:min(100%,240px)!important;height:135px!important;max-height:100%;object-fit:contain;grid-column:2;grid-row:1;justify-self:center;pointer-events:none}
.billing-banner-copy{position:relative;grid-column:1;grid-row:1;min-width:0;width:auto!important;max-width:100%;margin:0;z-index:1;align-items:flex-start;gap:10px}
.billing-banner-copy p{max-width:100%;line-height:1.9}
.billing-banner .billing-outline{flex:none;white-space:nowrap}
.billing-packages{direction:rtl;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.billing-package[data-package]{order:initial;min-width:0}
.billing-package{width:100%;box-shadow:none;overflow:hidden}
.billing-package img{max-width:100%}
.billing-package .billing-radio{width:20px;height:20px;right:12px;top:12px}
.billing-stepper{direction:rtl}
.billing-stepper button{flex:0 0 40px;margin:4px;height:38px;cursor:pointer}
.billing-stepper .billing-input{min-width:0;direction:ltr}
.billing-checkout-modal .billing-checkout{gap:18px}
.billing-checkout-modal .billing-order{margin-top:0}
.billing-gateway:after,.billing-period:after{width:17px;height:17px;right:10px}
.billing-result{min-height:calc(100dvh - 180px);padding:24px 12px}
.billing-result-card{width:min(100%,667px);height:auto;min-height:490px;max-width:667px;filter:drop-shadow(0 8px 18px #0a1f4415);isolation:isolate}
.billing-receipt-shape{z-index:-1;object-fit:fill}
.billing-result-content{width:100%;min-height:490px;height:auto;padding:35px 42px;gap:14px;justify-content:center;margin:0 auto}
.billing-result-art{width:min(100%,330px);height:185px;flex:none}
.billing-result-art img{object-fit:contain}
.billing-result p{margin:0;line-height:1.8;max-width:500px}
.billing-result .billing-button{margin-top:8px;flex:none;min-height:50px}
@media(max-width:1200px){.billing-page{gap:26px}.billing-plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.billing-plan{padding:14px}.billing-plan li{font-size:13px;line-height:1.7}.billing-summary{grid-template-columns:1fr;height:auto}.billing-current,.billing-usage{grid-column:auto}.billing-summary article{height:auto;min-height:190px}.billing-banner-copy{width:auto!important}}
@media(max-width:850px){.billing-plans{grid-template-columns:1fr}.billing-plan{padding:20px}.billing-plan li{font-size:15px}.billing-banner{grid-template-columns:minmax(0,1fr) 130px}.billing-banner-diamond{width:130px!important;height:120px!important}.billing-usage{flex-wrap:wrap}}
@media(max-width:700px){.billing-page{padding-inline:8px}.billing-banner{min-height:0;grid-template-columns:minmax(0,1fr);padding:20px}.billing-banner-copy{grid-column:1;grid-row:1}.billing-banner-diamond{position:relative!important;grid-column:1;grid-row:2;justify-self:center;left:auto!important;top:auto!important;bottom:auto!important;width:150px!important;height:100px!important}.billing-banner-bg{width:100%!important;opacity:.25}.billing-packages{grid-template-columns:repeat(2,minmax(0,1fr))}.billing-result-card{min-height:0;aspect-ratio:auto}.billing-result-content{min-height:430px;padding:28px 18px}.billing-result-art{width:min(100%,240px);height:145px}.billing-result p{font-size:14px;padding:0}.billing-result h1{font-size:20px}.billing-usage{flex-direction:column}}

/* Demo presentation polish: full-size receipt with all content inside. */
.billing-result{display:flex;align-items:center;justify-content:center;min-height:calc(100dvh - 155px);padding:36px 18px}
.billing-result-card{position:relative;display:flex;align-items:stretch;justify-content:center;width:min(100%,620px);max-width:620px;min-height:520px;height:auto;aspect-ratio:auto;filter:drop-shadow(0 12px 28px #0a1f4414);background:#fff;border-radius:22px;overflow:visible;isolation:isolate}
.billing-result-card:before,.billing-result-card:after{content:"";position:absolute;left:12px;right:12px;height:12px;background:radial-gradient(circle at 6px 0,transparent 6px,#fff 6.5px) repeat-x;background-size:12px 12px;z-index:0;pointer-events:none}
.billing-result-card:before{top:-10px;transform:rotate(180deg)}
.billing-result-card:after{bottom:-10px}
.billing-result-card .billing-receipt-shape{display:none!important}
.billing-result-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:520px;height:auto;margin:0;padding:44px 48px 48px;gap:16px}
.billing-result-art{width:min(100%,350px);height:235px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.billing-result-art img,.billing-result-card.failure .billing-result-art img{display:block;width:100%;height:100%;max-height:none;object-fit:contain}
.billing-result-card.failure .billing-result-art img{width:220px;height:220px}
.billing-result h1{font-size:24px;line-height:1.5;margin:0;font-weight:700}
.billing-result p{font-size:15px;line-height:1.9;margin:0;max-width:460px}
.billing-result .billing-button{margin:10px 0 0;min-width:200px;min-height:52px;height:52px;border-radius:12px;flex:none}
.billing-credit-modal .billing-coupon-status:empty{display:none}
.billing-package small{font-size:14px}
@media(max-width:700px){.billing-result{min-height:calc(100dvh - 125px);padding:20px 12px}.billing-result-card{min-height:420px;width:min(100%,520px)}.billing-result-content{min-height:420px;padding:28px 20px 32px;gap:12px}.billing-result-art{width:min(100%,250px);height:170px}.billing-result-card.failure .billing-result-art img{width:160px;height:160px}.billing-result h1{font-size:20px}.billing-result p{font-size:13px;padding:0}.billing-result .billing-button{height:46px;min-height:46px}}

/* HINOVA BILLING — consolidated desktop fidelity pass (2026-10-24) */
.billing-view{margin-top:16px;padding-bottom:48px;scrollbar-gutter:stable}
.billing-page,.billing-page *,.billing-modal-layer *{box-sizing:border-box}
.billing-page{width:100%;max-width:1544px;margin-inline:auto;padding-inline:clamp(16px,2.1vw,32px);gap:36px}
.billing-heading{height:44px}.billing-heading h1{font-size:22px}
.billing-summary{height:230px;grid-template-columns:repeat(2,minmax(0,1fr));padding:14px;gap:14px;direction:ltr}
.billing-summary article{height:200px;min-width:0;padding:20px 24px}
.billing-current{grid-column:1;justify-content:space-between}
.billing-usage{grid-column:2;direction:ltr;flex-direction:row;gap:24px;justify-content:space-between}
.billing-usage-details{direction:rtl;flex:1;min-width:0;width:auto;height:auto;gap:10px}
.billing-card-title{font-size:16px}.billing-detail-rows{gap:16px}
.billing-detail-rows p,.billing-usage-details p{font-size:15px;line-height:27px}
.billing-donut{width:170px;height:170px;flex:0 0 170px;aspect-ratio:1}
.billing-donut:after{inset:26px}.billing-donut b{font-size:25px}
.billing-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;direction:rtl;align-items:stretch}
.billing-plan{min-width:0;min-height:495px;height:auto;padding:22px;gap:18px;border-radius:16px}
.billing-plan-head{height:auto;min-height:58px;gap:12px}
.billing-plan-head>img{width:56px;height:56px}.billing-plan-head h3{font-size:20px;line-height:30px}
.billing-plan-head small{font-size:14px;line-height:24px}
.billing-plan-price{height:auto;min-height:48px;margin:0;gap:8px}
.billing-plan-price b{font-size:26px}.billing-plan-price small{font-size:15px}
.billing-plan .billing-button{width:100%;height:48px;flex:0 0 48px;margin:0;font-size:15px}
.billing-plan ul{flex:1;gap:15px;margin:0;padding:0}.billing-plan li{font-size:15px;line-height:26px;gap:9px}
.billing-plan li img{width:22px;height:22px;flex:none}
.billing-plan-badge{height:36px;top:-19px;font-size:13px}
.billing-banner{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,34%);direction:rtl;min-height:166px;height:auto;gap:20px;padding:22px 30px;border-radius:16px;overflow:hidden;isolation:isolate}
.billing-banner-copy{grid-column:1;grid-row:1;position:relative;z-index:2;width:auto!important;max-width:100%;justify-self:stretch;align-self:center;align-items:flex-start;gap:12px}
.billing-banner h2{font-size:19px;line-height:30px}.billing-banner p{font-size:14px;line-height:26px}
.billing-banner .billing-outline{height:44px;font-size:14px;padding-inline:16px}
.billing-banner .billing-outline img{width:22px;height:22px}
.billing-banner-diamond{position:relative!important;inset:auto!important;grid-column:2;grid-row:1;justify-self:center;align-self:center;width:min(100%,280px)!important;height:148px!important;object-fit:contain;z-index:1}
.billing-banner-bg{position:absolute!important;inset:auto auto 0 0!important;width:48%!important;height:100%!important;object-fit:cover;opacity:.7;z-index:-1;pointer-events:none}
.billing-modal-layer{background:rgba(10,31,68,.43);padding:20px}
.billing-modal{border-radius:16px;box-shadow:0 24px 70px #0a1f442c}
.billing-modal header{margin-bottom:26px}.billing-modal header h2{font-size:21px}
.billing-credit-modal{width:min(850px,calc(100vw - 40px));padding:32px}
.billing-balance{height:66px;margin-bottom:26px}
.billing-packages{display:grid;direction:rtl;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.billing-package[data-package]{order:initial}
.billing-package{height:200px;min-height:200px;width:100%;padding:16px 10px;gap:10px;border:1px solid #e7e7ef;border-radius:16px;box-shadow:0 2px 12px #0a1f440b;overflow:hidden}
.billing-package.selected{border:2px solid #635bff;background:#f9f8ff;box-shadow:0 3px 16px #635bff12}
.billing-package img{height:86px;width:auto;max-width:100%;object-fit:contain}
.billing-package b{font-size:16px}.billing-package small{font-size:14px}
.billing-package .billing-radio{right:12px;top:12px;width:22px;height:22px}
.billing-package.selected .billing-radio{border:0;background:#635bff;color:white}
.billing-custom-input{margin-top:18px}.billing-stepper{direction:rtl;height:50px}
.billing-stepper button{height:36px;flex:0 0 40px;margin:6px}.billing-stepper .billing-input{direction:ltr;text-align:center}
.billing-total-bar{margin-top:26px;height:auto;min-height:58px;align-items:center}
.billing-credit-modal footer{margin-top:16px}
.billing-checkout-modal{width:min(650px,calc(100vw - 40px));padding:32px;max-height:calc(100dvh - 40px)}
.billing-checkout-modal .billing-checkout{gap:22px}.billing-coupon{direction:rtl;grid-template-columns:minmax(0,1fr) 138px}
.billing-gateways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.billing-gateway{height:60px}.billing-gateway img{max-width:110px;max-height:38px}
.billing-period{height:52px}.billing-checkout-modal .billing-order{margin-top:0;padding:18px 20px}
.billing-checkout-modal footer{margin-top:24px}.billing-checkout-actions .billing-button,.billing-checkout-actions .billing-outline{height:50px}
/* The supplied SVG receipt is the source of the jagged edges; avoid synthetic zigzags. */
.billing-result{display:flex;justify-content:center;align-items:center;min-height:calc(100dvh - 145px);padding:28px 20px}
.billing-result-card{position:relative;display:flex;align-items:center;justify-content:center;width:min(100%,667px);max-width:667px;height:523px;min-height:0;aspect-ratio:auto;background:transparent;border-radius:0;overflow:visible;filter:drop-shadow(0 10px 22px #0a1f4415);isolation:isolate}
.billing-result-card:before,.billing-result-card:after{content:none!important}
.billing-result-card .billing-receipt-shape{display:block!important;position:absolute;inset:0;width:100%!important;height:100%!important;max-height:none;object-fit:fill;z-index:-1}
.billing-result-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;margin:0;padding:30px 48px 42px;gap:15px}
.billing-result-art{width:min(100%,390px);height:225px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.billing-result-art img{width:100%;height:100%;max-height:none;object-fit:contain}
.billing-result-card.failure .billing-result-art img{width:195px;height:195px}
.billing-result h1{font-size:24px;line-height:1.5;margin:0;font-weight:700}
.billing-result-emphasis{font-style:normal;color:#26a653}.billing-result-card.failure .billing-result-emphasis{color:#f05b55}
.billing-result p{font-size:16px;line-height:1.85;margin:0;max-width:500px}
.billing-result .billing-button{height:52px;min-height:52px;min-width:170px;margin-top:9px;padding:0 28px;border-radius:12px;font-size:16px;flex:none}
.billing-result-card.failure .billing-button{background:#f05b55}
@media(max-width:1250px){.billing-summary{height:auto;grid-template-columns:1fr}.billing-current,.billing-usage{grid-column:auto}.billing-summary article{height:auto;min-height:185px}.billing-plans{gap:14px}.billing-plan{padding:16px}.billing-plan li{font-size:14px}}
@media(max-width:850px){.billing-plans{grid-template-columns:1fr}.billing-plan{min-height:0;padding:20px}.billing-plan li{font-size:15px}.billing-banner{grid-template-columns:minmax(0,1fr) 145px}.billing-banner-diamond{width:145px!important}.billing-usage{flex-wrap:wrap}}
@media(max-width:700px){.billing-page{padding-inline:8px;gap:24px}.billing-summary{padding:10px}.billing-summary article{padding:16px}.billing-usage{flex-direction:column}.billing-usage-details{width:100%}.billing-banner{grid-template-columns:minmax(0,1fr) 95px;min-height:180px;padding:16px}.billing-banner-diamond{width:95px!important;height:105px!important}.billing-banner-bg{width:75%!important}.billing-packages{grid-template-columns:repeat(2,minmax(0,1fr))}.billing-package{height:180px;min-height:180px}.billing-credit-modal,.billing-checkout-modal{padding:20px}.billing-result{padding:16px}.billing-result-card{height:auto;aspect-ratio:667/523;min-height:380px}.billing-result-content{padding:22px 20px;gap:10px}.billing-result-art{height:155px;width:min(100%,250px)}.billing-result-card.failure .billing-result-art img{width:140px;height:140px}.billing-result h1{font-size:18px}.billing-result p{font-size:12px}.billing-result .billing-button{height:44px;min-height:44px;font-size:14px}}

/* 2026-10-24: screenshot-based visual refinement. Keep changes scoped to Billing. */
.billing-page{gap:28px}
.billing-heading h1{font-size:22px}
.billing-summary{height:220px}
.billing-summary article{height:194px}
.billing-card-title{font-size:15px}
.billing-detail-rows p,.billing-usage-details p{font-size:15px}
.billing-plan{min-height:440px;padding:20px;gap:16px}
.billing-plan-head h3{font-size:20px}
.billing-plan-head small{font-size:14px}
.billing-plan-price b{font-size:25px}
.billing-plan-price small{font-size:15px}
.billing-plan .billing-button{height:46px;flex-basis:46px;font-size:15px}
.billing-plan li{font-size:15px;line-height:25px;gap:9px}
.billing-plan li img{width:21px;height:21px}
.billing-plan ul{gap:10px}
.billing-plan-badge{font-size:13px}
.billing-banner{min-height:150px;height:150px}
.billing-banner h2{font-size:18px}
.billing-banner p{font-size:14px}
.billing-banner .billing-outline{height:40px;font-size:14px}
/* Dialogs: stronger type hierarchy and roomier cards, without changing flows. */
.billing-modal-layer{padding:18px}
.billing-modal header h2{font-size:22px}
.billing-field-label{font-size:15px;line-height:25px}
.billing-credit-modal{width:min(860px,calc(100vw - 36px));padding:32px}
.billing-credit-modal header{margin-bottom:28px}
.billing-balance{height:70px;margin-bottom:26px}
.billing-packages{gap:12px}
.billing-package{height:198px;min-height:198px;padding:16px 10px;gap:10px}
.billing-package img{height:85px}
.billing-package b{font-size:17px}
.billing-package small{font-size:15px}
.billing-total-bar{font-size:17px}
.billing-credit-modal footer .billing-button,.billing-credit-modal footer .billing-outline{height:50px;font-size:15px}
.billing-checkout-modal{width:min(650px,calc(100vw - 36px));padding:32px}
.billing-checkout-modal .billing-checkout{gap:22px}
.billing-gateway{height:62px}
.billing-period{height:54px;font-size:15px}
.billing-order p{font-size:15px}
.billing-order p b{font-size:16px}
.billing-payable{font-size:17px}
.billing-checkout-actions .billing-button,.billing-checkout-actions .billing-outline{font-size:15px}
/* The receipt is a main screen, not a compact alert. */
.billing-result{min-height:calc(100dvh - 110px)}
.billing-result-card{width:min(100%,670px);max-width:670px;height:525px}
.billing-result-content{padding:34px 45px 45px;gap:17px}
.billing-result-art{height:220px}
.billing-result-card.failure .billing-result-art img{width:205px;height:205px}
.billing-result h1{font-size:25px}
.billing-result p{font-size:16px}
.billing-result .billing-button{min-width:185px;height:54px;min-height:54px}
@media(max-width:1250px){.billing-plan{padding:16px}.billing-plan li{font-size:14px}.billing-summary{height:auto}.billing-summary article{height:auto;min-height:185px}}
@media(max-width:850px){.billing-plans{grid-template-columns:1fr}.billing-plan{min-height:0}.billing-banner{height:auto;min-height:155px}}
@media(max-width:700px){.billing-page{gap:22px}.billing-credit-modal,.billing-checkout-modal{padding:18px}.billing-packages{grid-template-columns:repeat(2,minmax(0,1fr))}.billing-package{height:175px;min-height:175px}.billing-package img{height:65px}.billing-result-card{height:auto;min-height:390px;aspect-ratio:667/523}.billing-result-content{padding:22px 16px;gap:10px}.billing-result-art{height:145px}.billing-result-card.failure .billing-result-art img{width:135px;height:135px}.billing-result h1{font-size:19px}.billing-result p{font-size:13px}.billing-result .billing-button{height:46px;min-height:46px}}

/* === Billing presentation pass 2026-10-24: consistent spacing and no clipped content === */
.billing-view{overflow-x:hidden}
.billing-page{gap:30px;padding-bottom:36px}
.billing-plans{align-items:stretch;gap:20px}
.billing-plan{min-height:0!important;height:auto!important;padding:20px 20px 22px;gap:14px;justify-content:flex-start}
.billing-plan-head{min-height:56px;height:auto}
.billing-plan-head h3{font-size:19px;line-height:1.55}
.billing-plan-head small{font-size:13px;line-height:1.8}
.billing-plan-price{margin:0;min-height:44px}
.billing-plan-price b{font-size:25px}
.billing-plan .billing-button{height:46px;flex:0 0 46px;margin:0;font-size:14px}
.billing-plan ul{flex:0 0 auto!important;margin:0!important;gap:9px}
.billing-plan li{font-size:14px;line-height:25px;gap:9px}
.billing-plan li img{width:20px;height:20px;flex:none}
.billing-banner{height:auto!important;min-height:178px!important;overflow:hidden;padding:22px 26px;grid-template-columns:minmax(0,1fr) minmax(150px,32%);align-items:center}
.billing-banner-copy{gap:10px;align-self:center;min-width:0}
.billing-banner h2{font-size:18px;line-height:1.6}
.billing-banner p{font-size:14px;line-height:1.8;margin:0}
.billing-banner .billing-outline{height:42px;min-height:42px;margin:0;padding:0 16px;align-self:flex-start;position:relative;z-index:2}
.billing-banner-diamond{height:150px!important;max-width:100%;object-fit:contain}
.billing-modal{scrollbar-width:thin}
.billing-modal header{align-items:center;min-height:50px;height:auto;padding-bottom:16px;margin-bottom:22px}
.billing-modal header h2{font-size:20px;line-height:1.6}
.billing-field-label{font-size:14px;line-height:1.8;margin-bottom:10px}
.billing-credit-modal{width:min(830px,calc(100vw - 36px));padding:28px 30px}
.billing-balance{height:66px;margin-bottom:22px}
.billing-packages{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.billing-package{height:188px;min-height:188px;gap:9px;padding:15px 10px}
.billing-package img{height:80px;max-width:100%;object-fit:contain}
.billing-package b{font-size:16px;line-height:1.7}
.billing-package small{font-size:13px;line-height:1.6}
.billing-custom-input{margin-top:16px}
.billing-stepper{height:52px;direction:rtl;display:flex;align-items:center}
.billing-stepper button{flex:0 0 38px;width:38px;height:38px;margin:6px;display:grid;place-items:center;font-size:20px;line-height:1;cursor:pointer}
.billing-stepper .billing-input{flex:1;min-width:0;text-align:center!important;direction:ltr}
.billing-total-bar{margin-top:22px;padding-top:18px;height:auto;min-height:52px;align-items:center}
.billing-credit-modal footer{margin-top:14px;padding-top:16px;align-items:center}
.billing-credit-modal footer .billing-button,.billing-credit-modal footer .billing-outline{height:48px;font-size:14px}
.billing-checkout-modal{width:min(630px,calc(100vw - 36px));padding:28px 30px}
.billing-checkout-modal .billing-checkout{gap:18px}
.billing-checkout-modal header{margin-bottom:20px}
.billing-gateways{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.billing-gateway{height:56px}
.billing-period{height:50px}
.billing-checkout-modal .billing-order{padding:16px 18px;margin:0}
.billing-checkout-modal .billing-order p{font-size:14px;line-height:1.8}
.billing-checkout-modal footer{margin-top:20px;gap:12px;padding-top:16px}
.billing-payable{font-size:15px}
.billing-checkout-actions .billing-button,.billing-checkout-actions .billing-outline{height:48px;font-size:14px}
.billing-result{min-height:calc(100dvh - 120px);padding:24px 16px}
.billing-result-card{width:min(100%,600px);max-width:600px;min-height:460px;height:auto!important;aspect-ratio:auto!important}
.billing-result-content{width:100%;min-height:460px;height:auto;padding:34px 38px;gap:14px}
.billing-result-art{width:min(100%,340px);height:200px}
.billing-result-card.failure .billing-result-art img{width:185px;height:185px}
.billing-result h1{font-size:24px;line-height:1.6}
.billing-result p{font-size:15px;line-height:1.8}
.billing-result .billing-button{height:50px;min-height:50px;margin-top:8px}
@media(max-width:1250px){.billing-plans{gap:12px}.billing-plan{padding:16px}.billing-plan li{font-size:13px}.billing-summary{height:auto}.billing-summary article{height:auto;min-height:178px}}
@media(max-width:850px){.billing-plans{grid-template-columns:1fr}.billing-plan{padding:20px}.billing-plan li{font-size:14px}.billing-banner{grid-template-columns:minmax(0,1fr) 145px;min-height:180px!important}.billing-banner-diamond{width:145px!important}}
@media(max-width:700px){.billing-page{padding-inline:8px;gap:22px}.billing-credit-modal,.billing-checkout-modal{padding:20px}.billing-packages{grid-template-columns:repeat(2,minmax(0,1fr))}.billing-package{height:175px;min-height:175px}.billing-package img{height:65px}.billing-banner{grid-template-columns:minmax(0,1fr);min-height:0!important;gap:12px}.billing-banner-copy{grid-column:1;grid-row:1}.billing-banner-diamond{grid-column:1;grid-row:2;width:150px!important;height:100px!important}.billing-result-card{min-height:410px}.billing-result-content{min-height:410px;padding:25px 18px;gap:11px}.billing-result-art{height:155px}.billing-result-card.failure .billing-result-art img{width:145px;height:145px}.billing-result h1{font-size:20px}.billing-result p{font-size:13px}}

/* Billing typography: Dana for Persian, Inter for isolated English runs. */
.billing-view,.billing-modal-layer,.billing-view button,.billing-modal-layer button,.billing-modal-layer input{font-family:Dana,sans-serif}
.billing-view :lang(en),.billing-modal-layer :lang(en),.billing-view .font-inter,.billing-modal-layer .font-inter{font-family:Inter,Arial,sans-serif!important}
.billing-plan li{font-size:15px;line-height:27px}
.billing-plan-head small{font-size:14px;line-height:1.8}
.billing-plan .billing-button{font-size:15px}
.billing-package small{font-size:14px}
.billing-balance,.billing-order p,.billing-checkout-modal .billing-order p{font-size:15px}
.billing-credit-modal footer .billing-button,.billing-checkout-actions .billing-button{font-size:15px}
.billing-result-card{width:min(100%,650px);max-width:650px;min-height:490px}

/* Extra-credit dialog: Figma frames 33:6914 and 77:1401. */
.billing-modal-layer:has(.billing-credit-modal){background:#000b}
.billing-credit-modal{width:min(800px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:32px;box-shadow:0 0 15px #0000001a}
.billing-credit-modal header{height:56px;min-height:56px;margin-bottom:32px;padding:0;align-items:flex-start}
.billing-credit-modal header h2{font-size:18px;line-height:32px;font-weight:700}
.billing-credit-modal .billing-close{width:16px;height:32px;padding:0;align-items:start;border:0}
.billing-credit-modal .billing-close img{width:16px;height:16px}
.billing-credit-modal .billing-balance{height:64px;margin-bottom:32px;padding:16px;border-radius:16px;background:#f8f9fb}
.billing-credit-modal .billing-balance span{gap:8px;font-size:14px;color:#53627c}
.billing-credit-modal .billing-balance span img{width:32px;height:32px}
.billing-credit-modal .billing-balance b{display:flex;direction:rtl;align-items:center;gap:4px;font-weight:400}
.billing-credit-modal .billing-balance b strong{font-size:16px;font-weight:600;color:#0a1f44}
.billing-credit-modal .billing-balance b small{font-size:14px;color:#8a94a6}
.billing-credit-modal>.billing-field-label,.billing-credit-modal .billing-custom-input .billing-field-label{font-size:14px;line-height:21px;margin-bottom:8px;color:#53627c}
.billing-credit-modal .billing-packages{grid-template-columns:repeat(4,minmax(0,1fr));direction:rtl;gap:8px}
.billing-credit-modal .billing-package{height:185px;min-height:185px;padding:24px;gap:8px;justify-content:center;align-items:center;text-align:center;border:1px solid #f2f2f2;border-radius:16px;background:#fff;box-shadow:none;overflow:hidden}
.billing-credit-modal .billing-package:hover{border-color:#d1ccff}
.billing-credit-modal .billing-package.selected{border:1px solid #635bff;background:#635bff0d;box-shadow:none}
.billing-credit-modal .billing-package.is-custom.selected{border-color:#4db757;background:#4db7570d}
.billing-credit-modal .billing-package .billing-radio{top:15px;right:15px;width:24px;height:24px;border:1px solid #e1e4e8;border-radius:50%;background:#fff;display:grid;place-items:center}
.billing-credit-modal .billing-package.selected .billing-radio{border:0;background:#635bff}
.billing-credit-modal .billing-package.is-custom.selected .billing-radio{background:#4db757}
.billing-credit-modal .billing-package .billing-radio:after{content:none}
.billing-credit-modal .billing-package .billing-radio img{width:18px;height:18px;max-width:none;object-fit:contain}
.billing-credit-modal .billing-package .billing-package-art{display:block;width:auto;height:56px;max-width:124px;object-fit:contain;flex:none}
.billing-credit-modal .billing-package[data-package="1000"] .billing-package-art{width:66px}
.billing-credit-modal .billing-package[data-package="3000"] .billing-package-art{width:78px}
.billing-credit-modal .billing-package[data-package="5000"] .billing-package-art{width:64px}
.billing-credit-modal .billing-package[data-package="custom"] .billing-package-art{width:124px}
.billing-credit-modal .billing-package-info{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.billing-credit-modal .billing-package-credit{height:32px;display:flex;direction:rtl;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.billing-credit-modal .billing-package-credit b{font-size:16px;line-height:25px;font-weight:600;color:#0a1f44}
.billing-credit-modal .billing-package-credit em{font-size:14px;line-height:25px;font-style:normal;color:#8a94a6}
.billing-credit-modal .billing-package-price{font-size:20px;line-height:31px;font-weight:500;color:#0a1f44;white-space:nowrap}
.billing-credit-modal .billing-package-custom-title{height:32px;display:flex;align-items:center;font-size:16px;line-height:25px;font-weight:500;color:#0a1f44;white-space:nowrap}
.billing-credit-modal .billing-package.is-custom.selected .billing-package-custom-title{font-weight:600}
.billing-credit-modal .billing-custom-input{margin-top:24px}
.billing-credit-modal .billing-stepper{height:48px;padding:8px 16px;border:1px solid #f2f2f2;border-radius:12px;direction:rtl;overflow:visible}
.billing-credit-modal .billing-stepper button{width:32px;height:32px;flex:0 0 32px;margin:0;padding:0;border-radius:8px;background:#635bff0d}
.billing-credit-modal .billing-stepper button img{width:24px;height:24px;object-fit:contain}
.billing-credit-modal .billing-stepper button[data-billing="custom-minus"] img{width:14px;height:2px}
.billing-credit-modal .billing-stepper .billing-input{height:30px;border:0;background:transparent;font-size:16px;color:#0a1f44;text-align:center}
.billing-credit-modal .billing-total-bar{height:48px;min-height:48px;margin-top:32px;padding:16px 0 0;border-top:1px dashed #e1e4e8;align-items:center;font-size:16px;color:#8a94a6}
.billing-credit-modal .billing-total-bar b{display:flex;direction:rtl;align-items:center;gap:4px;font-weight:400}
.billing-credit-modal .billing-total-bar b strong{font-size:20px;line-height:32px;font-weight:700;color:#635bff}
.billing-credit-modal .billing-total-bar b small{font-size:14px;line-height:28px;color:#8a94a6}
.billing-credit-modal footer{height:48px;margin-top:16px;padding:0;border:0;direction:ltr;gap:16px}
.billing-credit-modal footer .billing-button,.billing-credit-modal footer .billing-outline{height:48px;font-size:16px;font-weight:500}
.billing-credit-modal footer .billing-button{flex:1;order:1}
.billing-credit-modal footer .billing-outline{flex:0 0 138px;order:2}
@media(max-width:700px){.billing-credit-modal{padding:20px}.billing-credit-modal .billing-packages{grid-template-columns:repeat(2,minmax(0,1fr))}.billing-credit-modal .billing-package{padding:16px 8px}.billing-credit-modal footer{gap:8px}.billing-credit-modal footer .billing-outline{flex-basis:110px}}
.billing-result-content{min-height:490px}
.billing-result p{font-size:16px}
@media(max-width:1250px) and (min-width:851px){.billing-plan li{font-size:14px}}
@media(max-width:700px){.billing-plan li{font-size:14px}.billing-result-card,.billing-result-content{min-height:410px}.billing-result p{font-size:13px}}

/* Final billing readability pass — 2026-10-24 */
.billing-plan li{font-size:15px!important;line-height:1.85!important;font-weight:500}
.billing-plan-head small,.billing-banner p{font-size:14px!important;line-height:1.85}
.billing-plan{padding-bottom:25px;gap:15px}
.billing-plan ul{gap:10px}
.billing-field-label,.billing-balance,.billing-total-bar,.billing-payable{font-size:14px!important}
.billing-checkout-modal .billing-order p{font-size:15px!important;line-height:2!important}
.billing-package small{font-size:14px!important}
.billing-package b{font-size:16px!important}
.billing-result-card{width:min(100%,690px)!important;max-width:690px!important;min-height:530px!important}
.billing-result-content{min-height:530px!important;padding:40px 45px!important;gap:16px!important}
.billing-result-art{height:235px!important}
.billing-result h1{font-size:25px!important;line-height:1.6}
.billing-result p{font-size:16px!important;line-height:1.85;text-align:center}
.billing-result .billing-button{min-width:185px;font-size:15px}
.billing-stepper .billing-input{font-family:Dana,sans-serif!important;direction:ltr;unicode-bidi:plaintext;font-size:16px;font-weight:600}
.billing-view [lang=en],.billing-modal-layer [lang=en]{font-family:Inter,Arial,sans-serif!important;direction:ltr;unicode-bidi:isolate}
@media(max-width:700px){.billing-plan li{font-size:14px!important}.billing-result-card{min-height:440px!important}.billing-result-content{min-height:440px!important;padding:24px 18px!important}.billing-result-art{height:160px!important}.billing-result h1{font-size:20px!important}.billing-result p{font-size:14px!important}}

/* Requested Figma alignment: 2026-10-24 — scoped to Billing only. */
/* Keep the content scrollable while removing its redundant visible scrollbar. */
.billing-view{scrollbar-width:none;-ms-overflow-style:none}
.billing-view::-webkit-scrollbar{display:none;width:0;height:0}
/* Current-plan details title sits at the right edge, as in the reference. */
.billing-current>.billing-card-title{align-self:stretch;width:100%;justify-content:flex-start;direction:rtl;text-align:right}
.billing-current>.billing-card-title .billing-title-icon{order:0;flex:0 0 36px}
.billing-current>.billing-card-title>span:first-child{order:1}
/* Figma plan icon tiles and their natural icon dimensions. */
.billing-plan-head{position:relative;direction:rtl;align-items:center}
.billing-plan-head>img{width:52px!important;height:52px!important;flex:0 0 52px;object-fit:contain;padding:9px;border-radius:14px;background:#f7f6ff}
.billing-plan:has(.billing-plan-head img[src*="base"]) .billing-plan-head>img{background:#f3faf5}
.billing-plan:has(.billing-plan-head img[src*="pro"]) .billing-plan-head>img{background:#fff8ef}
/* Current-plan label is a separate status badge; do not move the plan heading. */
.billing-active-label{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:4px 12px;border-radius:999px;background:#f0faf3;color:#32a34d;font-size:13px;font-weight:600;white-space:nowrap}
.billing-plan.active{background:#fff}
.billing-plan.active .billing-button:disabled{background:#fff8ef;color:#f49b18;border:0;opacity:1}
/* Recommended plan badge centered over the card, purple like the reference. */
.billing-plan-badge{position:absolute!important;top:-18px!important;left:50%!important;right:auto!important;transform:translateX(-50%);height:36px!important;padding:6px 16px!important;display:inline-flex!important;align-items:center;justify-content:center;flex-direction:row;gap:7px;white-space:nowrap;border-radius:12px!important;background:#635bff!important;color:#fff!important;font-size:13px!important;font-weight:600;z-index:2}
.billing-plan-badge img{width:16px;height:16px;object-fit:contain;filter:brightness(0) invert(1)}
@media(max-width:700px){.billing-active-label{top:12px;left:12px;font-size:12px}.billing-plan-badge{font-size:12px!important}}

/* Base plan: dedicated leaf icon and no selection action */
.billing-plan-head>.billing-base-leaf{width:52px;height:52px;flex:0 0 52px;padding:9px;border-radius:14px;background:#f3faf5;box-sizing:border-box}
.billing-free-plan-spacer{height:34px;margin:0 0 0 0;pointer-events:none}

/* Requested targeted alignment adjustments */
.billing-plan.active{border-color:#e9eaf1!important;}
.billing-plan:has(.billing-plan-badge){border:1px solid #635bff!important;}
.billing-plan-head>img.billing-base-leaf{width:52px!important;height:52px!important;flex:0 0 52px;box-sizing:border-box;padding:12px!important;border-radius:14px;background:#f3faf5!important;object-fit:contain;}
.billing-banner .billing-outline{display:inline-flex;flex-direction:row;direction:rtl;align-items:center;justify-content:center;gap:8px;}
.billing-banner .billing-outline>img{order:0;flex-shrink:0;}
.billing-usage-details .billing-title-icon img{width:22px;height:19px;object-fit:contain;}
.billing-close{font-size:0}.billing-close img{display:block;width:16px;height:16px}

/* Plans and credit summary — Figma frame 35:8348 */
.billing-heading{height:40px;display:flex;align-items:center;justify-content:flex-start;gap:8px;direction:rtl;flex:none}
.billing-heading h1{order:1;margin:0;font-family:Dana,sans-serif;font-size:20px;line-height:1.4;font-weight:600;color:#0a1f44}
.billing-back{order:0;width:40px;height:40px;min-width:40px;padding:8px 2px;display:grid;place-items:center;background:#fff;border:1px solid #f2f2f2;border-radius:12px}
.billing-back img{width:24px;height:24px;transform:none!important}
.billing-summary{height:248px;min-height:248px;padding:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;direction:ltr;background:#fff;border:1px solid #f2f2f2;border-radius:16px}
.billing-summary article{height:214px;min-height:214px;padding:16px;background:#fff;border:1px solid #f2f2f2;border-radius:16px;box-shadow:none}
.billing-current{grid-column:1;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;direction:rtl}
.billing-current>.billing-card-title{width:auto;align-self:flex-end;justify-content:flex-start;direction:rtl;text-align:right}
.billing-card-title{display:flex;align-items:center;gap:8px;font-family:Dana,sans-serif;font-size:16px;line-height:28px;font-weight:500;color:#53627c}
.billing-card-title .billing-title-icon{order:0!important;width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:12px;background:rgba(99,91,255,.05)}
.billing-card-title .billing-title-icon+span{order:1!important}
.billing-card-title .billing-title-icon img{width:20px;height:20px;object-fit:contain}
.billing-usage-details .billing-title-icon img{width:22px;height:20px}
.billing-detail-rows{width:100%;display:flex;flex-direction:column;gap:16px}
.billing-detail-rows p{height:28px;margin:0;display:flex;align-items:center;justify-content:space-between;direction:rtl;font-family:Dana,sans-serif;font-size:16px;line-height:28px}
.billing-detail-rows p span{display:flex;align-items:center;gap:8px;font-weight:400;color:#53627c}
.billing-detail-rows p b{font-weight:500;color:#0a1f44}
.billing-detail-rows p i{width:12px;height:12px;flex:0 0 12px;border-radius:50%}
.billing-detail-rows .billing-start-row i{background:#4db757}
.billing-detail-rows .billing-end-row i{background:#f05b55}
.billing-usage{grid-column:2;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:24px;direction:ltr}
.billing-donut{width:182px;height:182px;aspect-ratio:1;flex:0 0 182px;align-self:center}
.billing-donut span b{font-family:Dana,sans-serif;font-size:24px;line-height:1.4;font-weight:600;color:#0a1f44}
.billing-donut span small{font-family:Dana,sans-serif;font-size:14px;line-height:1.7;font-weight:400;color:#8a94a6}
.billing-usage-details{width:305px;max-width:calc(100% - 206px);height:100%;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;direction:rtl}
.billing-usage-details>.billing-card-title{align-self:flex-end;margin-bottom:8px;justify-content:flex-start;direction:rtl}
.billing-usage-details p{height:28px;margin:0;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:Dana,sans-serif;font-size:16px;line-height:28px;font-weight:400}
.billing-usage-details p span{display:flex;align-items:center;gap:8px;color:#53627c}
.billing-usage-details p b{font-weight:400;color:#8a94a6;white-space:nowrap}
.billing-dot{width:12px;height:12px;flex:0 0 12px;border-radius:50%;background:#c9c6ff}
.billing-dot.used{background:#635bff}
.billing-dot.extra{background:#4db757}
.billing-usage-details .billing-extra-row{height:45px;margin-top:4px;padding-top:16px;border-top:1px solid #f2f2f2}
@media(max-width:1250px){.billing-summary{height:auto;min-height:0;grid-template-columns:1fr}.billing-summary article{height:214px;min-height:214px}.billing-current{grid-column:1}.billing-usage{grid-column:1}.billing-donut{width:182px;height:182px}.billing-usage-details{max-width:calc(100% - 206px)}}
@media(max-width:700px){.billing-heading h1{font-size:18px}.billing-summary{padding:12px;gap:12px}.billing-summary article{height:auto;min-height:210px;padding:14px}.billing-usage{flex-direction:column-reverse;height:auto!important;gap:16px}.billing-usage-details{width:100%;max-width:none}.billing-donut{width:158px;height:158px;flex-basis:158px}.billing-detail-rows p,.billing-usage-details p{font-size:14px}}

/* Keep the usage chart on the left, independent of the page RTL direction. */
.billing-summary .billing-usage{display:grid;grid-template-columns:182px minmax(0,305px);justify-content:space-between;align-items:center;direction:ltr}
.billing-summary .billing-usage .billing-donut{grid-column:1;grid-row:1}
.billing-summary .billing-usage .billing-usage-details{grid-column:2;grid-row:1;max-width:none;direction:rtl}
@media(max-width:700px){.billing-summary .billing-usage{grid-template-columns:1fr;justify-items:center}.billing-summary .billing-usage .billing-donut{grid-column:1;grid-row:2}.billing-summary .billing-usage .billing-usage-details{grid-column:1;grid-row:1}}

/* Align both card titles with the right edge of their RTL content. */
.billing-current>.billing-card-title,.billing-usage-details>.billing-card-title{width:100%;align-self:stretch;justify-content:flex-start;direction:rtl;text-align:right}
.billing-summary .billing-usage .billing-usage-details{justify-content:flex-start}

/* Checkout modal typography and colors — Figma frame 35:7494 */
.billing-checkout-modal,.billing-checkout-modal button,.billing-checkout-modal input{font-family:Dana,sans-serif!important;color:#0a1f44}
.billing-checkout-modal header h2{font-family:Dana,sans-serif!important;font-size:18px!important;line-height:32px!important;font-weight:700!important;color:#0a1f44!important}
.billing-checkout-modal .billing-field-label{font-family:Dana,sans-serif;font-size:14px!important;line-height:normal;font-weight:400;color:#53627c}
.billing-checkout-modal .billing-input{font-family:Dana,sans-serif!important;font-size:16px!important;line-height:28px!important;font-weight:400!important;color:#0a1f44!important;border-color:#f2f2f2!important}
.billing-checkout-modal .billing-input::placeholder{color:#8a94a6;opacity:1}
.billing-checkout-modal .billing-coupon .billing-outline{font-family:Dana,sans-serif!important;font-size:16px!important;line-height:normal;font-weight:500!important;color:#635bff!important;border-color:#635bff!important;background:#fff!important}
.billing-checkout-modal .billing-gateway,.billing-checkout-modal .billing-period{border-color:#f2f2f2;background:#fff;box-shadow:0 0 30px rgba(0,0,0,.07)}
.billing-checkout-modal .billing-gateway.selected,.billing-checkout-modal .billing-period.selected{border-color:#635bff;background:#fff;box-shadow:0 0 15px rgba(0,0,0,.07)}
.billing-checkout-modal .billing-gateway img{display:block;width:auto!important;height:32px!important;min-height:32px!important;max-width:110px!important;max-height:32px!important;object-fit:contain!important}
.billing-checkout-modal .billing-period{font-family:Dana,sans-serif!important;font-size:14px!important;line-height:normal;font-weight:400!important;color:#53627c!important}
.billing-checkout-modal .billing-period.selected{font-weight:500!important;color:#0a1f44!important}
.billing-checkout-modal .billing-order{background:#f8f9fb;border:0;border-radius:16px}
.billing-checkout-modal .billing-order p{font-family:Dana,sans-serif;font-size:14px!important;line-height:32px!important;font-weight:400;color:#8a94a6}
.billing-checkout-modal .billing-order p:after{background:#e7e8ec}
.billing-checkout-modal .billing-order p b{font-family:Dana,sans-serif!important;font-size:16px!important;line-height:28px!important;font-weight:500!important;color:#0a1f44!important}
.billing-checkout-modal .billing-order p:nth-last-child(2) b{color:#f05b55!important}
.billing-checkout-modal .billing-payable{font-family:Dana,sans-serif;font-size:16px!important;line-height:28px;font-weight:400;color:#8a94a6}
.billing-checkout-modal .billing-payable b{font-size:20px!important;line-height:32px!important;font-weight:700!important;color:#635bff!important}
.billing-checkout-modal .billing-checkout-actions .billing-button,.billing-checkout-modal .billing-checkout-actions .billing-outline{font-family:Dana,sans-serif!important;font-size:16px!important;line-height:normal;font-weight:500!important}
.billing-checkout-modal .billing-checkout-actions .billing-button{background:#635bff;color:#fff}
.billing-checkout-modal .billing-checkout-actions .billing-outline{background:#fff;border-color:#635bff;color:#635bff}

/* Order details: labels on the right, values on the left. */
.billing-checkout-modal .billing-order p{display:grid;grid-template-columns:auto minmax(24px,1fr) auto;align-items:center;direction:rtl}
.billing-checkout-modal .billing-order p span{grid-column:1;order:initial!important;text-align:right}
.billing-checkout-modal .billing-order p:after{grid-column:2;order:initial!important}
.billing-checkout-modal .billing-order p b{grid-column:3;order:initial!important;text-align:left;direction:rtl}

/* The plans page grows with its content and uses the document scroll. The fixed
   app viewport and the nested billing scroller previously obscured its end. */
body:has(#billingView:not([hidden]) .billing-page){height:auto;min-height:100dvh;overflow-y:auto}
body:has(#billingView:not([hidden]) .billing-page) .app-shell{height:auto;min-height:100dvh}
body:has(#billingView:not([hidden]) .billing-page) .workspace{min-height:100dvh;overflow:clip}
body:has(#billingView:not([hidden]) .billing-page) .sidebar{position:sticky;top:0;height:100dvh}
body:has(#billingView:not([hidden]) .billing-page) .billing-view{flex:none;overflow:visible;min-height:0;padding-bottom:0}
body:has(#billingView:not([hidden]) .billing-page) .billing-page{height:auto;min-height:0;padding-bottom:36px}