.data-usage-checker{--kc-purple:#5C2E83;--kc-purple-600:#4A256A;--kc-grey-050:#FBFAFC;--kc-grey-100:#F3F3F5;--kc-grey-200:#E8E7EC}.data-usage-checker .packages,.data-usage-checker .package-list,.data-usage-checker .results{display:flex;flex-direction:column;gap:14px}.data-usage-checker .package,.data-usage-checker .card,.data-usage-checker .result{background:#fff;border:1px solid var(--kc-grey-200);border-radius:14px;padding:16px;margin:0;order:1}.data-usage-checker .packages>*:has(.progress,.progress-bar,.usage,.usage-bar),.data-usage-checker .package.active,.data-usage-checker .package.is-active,.data-usage-checker .package[data-active="true"]{order:0}.data-usage-checker .packages>*:has(.progress,.progress-bar,.usage,.usage-bar),.data-usage-checker .package.active,.data-usage-checker .package.is-active,.data-usage-checker .package[data-active="true"]{background:var(--kc-purple);border-color:transparent;color:#fff}.data-usage-checker .packages>*:has(.progress,.progress-bar,.usage,.usage-bar) *,.data-usage-checker .package.active *,.data-usage-checker .package.is-active *,.data-usage-checker .package[data-active="true"] *{color:#fff!important}.data-usage-checker .packages>*:has(.progress,.progress-bar,.usage,.usage-bar) .progress,.data-usage-checker .package.active .progress{height:14px;background:rgba(255,255,255,.25);border-radius:999px;overflow:hidden;border:none}.data-usage-checker .packages>*:has(.progress,.progress-bar,.usage,.usage-bar) .progress .progress-bar,.data-usage-checker .package.active .progress .progress-bar{background:#fff;height:100%}.data-usage-checker .package.expired,.data-usage-checker .package.is-inactive,.data-usage-checker .package.-inactive{background:var(--kc-grey-050)}.data-usage-checker button,.data-usage-checker .button,.data-usage-checker input[type="submit"]{background:var(--kc-purple)!important;color:#fff!important;border:none!important;border-radius:12px!important;padding:12px 16px!important;font-weight:700!important}.data-usage-checker button:hover,.data-usage-checker .button:hover,.data-usage-checker input[type="submit"]:hover{background:var(--kc-purple-600)!important}.data-usage-checker a{color:var(--kc-purple)}.data-usage-checker a:hover{text-decoration:underline}.data-usage-checker .progress{width:100%;height:12px;border-radius:999px;background:var(--kc-grey-100);overflow:hidden;border:1px solid var(--kc-grey-200)}.data-usage-checker .progress .progress-bar{height:100%;background:var(--kc-purple);transition:width .6s ease}.data-usage-checker form{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}.data-usage-checker label{font-weight:600;margin-right:4px}.data-usage-checker input[type="text"]{flex:1;min-width:220px}.data-usage-checker input[type="submit"],.data-usage-checker button{flex-shrink:0}.data-usage-checker form{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}@media (max-width:600px){.data-usage-checker form{flex-wrap:wrap;justify-content:center}.data-usage-checker label{width:100%;margin-bottom:6px;text-align:center}.data-usage-checker input[type="text"]{flex:1 1 100%;min-width:auto}.data-usage-checker input[type="submit"],.data-usage-checker button{flex:1 1 100%;margin-top:8px}}