/* Mobile payment + order reference; design-only. Keep gateway and form logic in backend. */
@layer pop {
html[data-design="armufa-modern"] body .sy-pay-page{padding:17px 0 26px!important;width:calc(100% - 22px)!important;max-width:610px!important;color:#15284b!important}
html[data-design="armufa-modern"] body .sy-pay-header{display:flex;align-items:center;gap:12px;margin:5px 0 18px}
html[data-design="armufa-modern"] body .sy-pay-header-icon{width:50px;height:50px;flex:0 0 50px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(150deg,#fff,#eef5ff);border:1px solid #d7e5f8;color:#1d65d9;font-size:22px;box-shadow:0 8px 20px #225fbd13}
html[data-design="armufa-modern"] body .sy-pay-header-title{min-width:0}
html[data-design="armufa-modern"] body .sy-pay-header-title h1{font-size:21px;color:#13294d;margin:0;line-height:1.3;font-weight:900}
html[data-design="armufa-modern"] body .sy-pay-header-title p{font-size:11px;color:#7c8aa1;margin:2px 0 0;overflow-wrap:anywhere}
html[data-design="armufa-modern"] body .sy-pay-card{background:#fff!important;border:1px solid #dfe8f6!important;border-radius:19px!important;box-shadow:0 9px 24px #1a4f9810!important;margin:0 0 13px;padding:21px 17px;color:#15284b!important;overflow:hidden}
html[data-design="armufa-modern"] body .sy-pay-outcome{text-align:center;padding:23px 13px 24px;min-height:212px}
html[data-design="armufa-modern"] body .sy-pay-outcome h2{font-size:17px!important;font-weight:900;color:#12294d!important;margin:4px 0 6px}
html[data-design="armufa-modern"] body .sy-pay-outcome p{font-size:11.5px!important;color:#7587a0!important;line-height:1.45;margin:0}
html[data-design="armufa-modern"] body .sy-pay-outcome .sy-pay-small-note{font-size:10px!important;color:#7d8fa7!important;max-width:310px;margin:7px auto 0}
html[data-design="armufa-modern"] body .sy-pay-ring{width:94px;height:94px;border:3px solid #d5e4ff;border-radius:50%;margin:0 auto 12px!important;display:grid;place-items:center;position:relative;isolation:isolate}
html[data-design="armufa-modern"] body .sy-pay-ring::before,html[data-design="armufa-modern"] body .sy-pay-ring::after{content:"";position:absolute;inset:-3px;border:2px solid #afcaff;border-radius:50%;z-index:-1;animation:syPayWave 2.4s ease-out infinite;pointer-events:none}
html[data-design="armufa-modern"] body .sy-pay-ring::after{animation-delay:1.2s}
html[data-design="armufa-modern"] body .sy-pay-ring-center{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-size:28px;background:#feeeee;color:#c73240!important}
html[data-design="armufa-modern"] body .sy-pay-cross{font:300 39px/1 "Nunito",system-ui,sans-serif;display:block;transform:translateY(-2px)}
html[data-design="armufa-modern"] body .sy-pay-ring--closed .sy-pay-cross{color:#c73240!important;-webkit-text-fill-color:#c73240!important}
html[data-design="armufa-modern"] body .sy-pay-ring--paid .sy-pay-cross{color:#11865d!important;-webkit-text-fill-color:#11865d!important}
html[data-design="armufa-modern"] body .sy-pay-ring--paid .sy-pay-ring-center{background:#e3f8f0;color:#11865d!important}
html[data-design="armufa-modern"] body .sy-pay-ring--paid::before,html[data-design="armufa-modern"] body .sy-pay-ring--paid::after{border-color:#8bdcc2}
@keyframes syPayWave{0%{opacity:.55;transform:scale(.89)}100%{opacity:0;transform:scale(1.57)}}
html[data-design="armufa-modern"] body .sy-pay-receipt{padding:13px 17px 8px}
html[data-design="armufa-modern"] body .sy-pay-receipt-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:57px;border-bottom:1px dashed #e2eaf5;font-size:12px;font-weight:800}
html[data-design="armufa-modern"] body .sy-pay-receipt-row:last-child{border-bottom:0}
html[data-design="armufa-modern"] body .sy-pay-receipt-row>span:first-child{color:#7586a0!important;flex:0 0 auto}
html[data-design="armufa-modern"] body .sy-pay-receipt-row strong{color:#15284b;font-size:13px;text-align:right;line-height:1.35}
html[data-design="armufa-modern"] body .sy-pay-receipt-row strong.sy-pay-total{color:#1d60cf;font-size:14px}
html[data-design="armufa-modern"] body .sy-pay-receipt-value{display:flex;align-items:center;gap:8px}
html[data-design="armufa-modern"] body .sy-pay-copy{width:35px;height:35px;flex:0 0 35px;border-radius:10px;border:1px solid #d9e5f6;background:#fff;color:#2666c9;box-shadow:0 3px 8px #173e7510}
html[data-design="armufa-modern"] body .sy-pay-badge{display:inline-block;border-radius:99px;padding:5px 10px;font-size:11px;font-weight:900;white-space:nowrap}
html[data-design="armufa-modern"] body .sy-pay-badge.is-closed{color:#a9343c;background:#fcecee;border:1px solid #f5ced4}
html[data-design="armufa-modern"] body .sy-pay-badge.is-paid{color:#086e4c;background:#e4f8ee;border:1px solid #b8e8d0}
html[data-design="armufa-modern"] body .sy-pay-badge.is-pending{color:#995c0e;background:#fff3d8;border:1px solid #f7dfaa}
html[data-design="armufa-modern"] body .sy-pay-actions{display:grid;gap:9px;margin:12px 0 9px}
html[data-design="armufa-modern"] body .sy-pay-button{min-height:48px;display:flex;align-items:center;justify-content:center;gap:11px;text-align:center;width:100%;padding:11px 13px;border-radius:13px;border:1px solid transparent;font-size:14px;font-weight:900;line-height:1.2;text-decoration:none;transition:transform .2s, box-shadow .2s;color:#fff}
html[data-design="armufa-modern"] body .sy-pay-button:active{transform:scale(.989)}
html[data-design="armufa-modern"] body .sy-pay-button--blue{background:linear-gradient(180deg,#3686ff,#1253d9)!important;border-color:#1b55ce!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 7px 18px #1456cf25}
html[data-design="armufa-modern"] body .sy-pay-button--blue :is(i,span){color:#fff!important}
html[data-design="armufa-modern"] body .sy-pay-button--outline{background:#fff!important;border:1px solid #d5e3f3!important;color:#1e56ac!important;margin:8px 0 0;box-shadow:0 4px 14px #19478c0a}
html[data-design="armufa-modern"] body .sy-pay-button--cancel{background:#fff!important;border-color:#f2c9ce!important;color:#b52e3c!important;box-shadow:0 4px 14px #971f2c0a}
html[data-design="armufa-modern"] body .sy-pay-button:disabled{opacity:.58;cursor:wait}
html[data-design="armufa-modern"] body .sy-pay-footnote{margin:4px 0 10px;font-size:10px;line-height:1.45;color:#71829b;text-align:center}
html[data-design="armufa-modern"] body .sy-pay-inline-link{display:block;font-size:12px;font-weight:900;color:#1f62ce;margin:0 0 12px}
html[data-design="armufa-modern"] body .sy-history-link{float:right;font-size:11px;color:#1e63d3;font-weight:900;text-decoration:none}
html[data-design="armufa-modern"] body .sy-pay-invoice{text-align:center;padding:18px 13px}
html[data-design="armufa-modern"] body .sy-pay-eyebrow{font-size:13px;font-weight:900;color:#142b50;margin:0 0 13px}
html[data-design="armufa-modern"] body .sy-pay-qr{display:grid;place-items:center;margin:auto;width:min(230px,75%);background:#fff;border:1px solid #e4eaf3;border-radius:12px;padding:9px;box-shadow:0 4px 18px #173c7516;animation:syQrFloat 3.1s ease-in-out infinite}
html[data-design="armufa-modern"] body .sy-pay-qr img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
html[data-design="armufa-modern"] body .sy-pay-no-qr{display:grid;justify-items:center;gap:7px;padding:25px 10px;color:#8494a9;font-size:12px}
html[data-design="armufa-modern"] body .sy-pay-no-qr i{font-size:35px;color:#a4bde4}
html[data-design="armufa-modern"] body .sy-pay-instructions{max-width:380px;margin:12px auto 6px;color:#70819a;font-size:11px;line-height:1.5}
html[data-design="armufa-modern"] body .sy-pay-amount{display:block;font-size:22px;font-weight:900;color:#1d5ccc!important;margin:8px 0}
html[data-design="armufa-modern"] body .sy-pay-expiry{display:inline-flex;align-items:center;gap:4px;background:#fff4da;color:#96611b;border:1px solid #f5e3b4;border-radius:99px;font-weight:900;font-size:10px;padding:4px 9px}
/* Order services and countries in one compact mobile list, without hiding original live data */
html[data-design="armufa-modern"] body .sy-order-services{margin:0 0 16px!important}
html[data-design="armufa-modern"] body .sy-service-tools,html[data-design="armufa-modern"] body .sy-country-tools{padding:11px 13px 8px}
html[data-design="armufa-modern"] body .sy-order-services .sy-service-list-row{min-height:59px!important;padding:8px 13px!important}
html[data-design="armufa-modern"] body .sy-order-services .sy-reference-row__icon{width:37px;height:37px;flex-basis:37px;border-radius:10px!important;font-size:17px}
html[data-design="armufa-modern"] body .sy-order-services .sy-reference-row__text{font-size:13px!important}
html[data-design="armufa-modern"] body .sy-service-tools .mc-search,html[data-design="armufa-modern"] body .sy-country-tools .mc-search{margin:0!important}
html[data-design="armufa-modern"] body .sy-order-countries{margin:0 0 13px}
html[data-design="armufa-modern"] body .sy-order-countries .mc-tabs{margin:8px 0 6px!important}
html[data-design="armufa-modern"] body .sy-order-countries .mc-country-item{border-radius:0!important;margin:0!important;border-top:0!important;border-left:0!important;border-right:0!important;box-shadow:none!important}
html[data-design="armufa-modern"] body .sy-order-countries .mc-country-header{min-height:62px;padding:11px 12px!important;gap:8px!important}
html[data-design="armufa-modern"] body .sy-order-countries .mc-country-flag{width:36px!important;height:36px!important;flex:0 0 36px!important;border:0!important;background:#e9f2ff!important;border-radius:10px!important;font-size:15px!important;color:#1b60c9!important}
html[data-design="armufa-modern"] body .sy-order-countries .mc-country-name{font-size:13px!important;flex:1!important;color:#13274b!important;min-width:0!important}
html[data-design="armufa-modern"] body .sy-order-countries .mc-badge{display:none!important}
html[data-design="armufa-modern"] body .sy-order-countries .mc-toggle-icon{font-size:10px!important}
html[data-design="armufa-modern"] body .sy-order-countries .mc-country-header>span[style]{font-size:10px!important;max-width:92px!important;text-align:right!important}
@media(max-width:360px){html[data-design="armufa-modern"] body .sy-pay-header-title h1{font-size:19px!important}html[data-design="armufa-modern"] body .sy-pay-receipt-row strong{font-size:11px!important}html[data-design="armufa-modern"] body .sy-pay-card{padding-left:13px;padding-right:13px}}
@media(prefers-reduced-motion:reduce){html[data-design="armufa-modern"] body .sy-pay-ring::before,html[data-design="armufa-modern"] body .sy-pay-ring::after,html[data-design="armufa-modern"] body .sy-pay-qr{animation:none!important}}
}