/*
 * AK Services premium control system
 * Loaded after page-specific styles so every public service keeps the same
 * input, select and action-button language without affecting admin/auth forms.
 */

body[data-page] .service-form {
    --ak-service-control-height: 48px;
    --ak-service-control-radius: 15px;
    --ak-service-control-border: rgba(var(--brand-primary-rgb, 8, 119, 185), 0.42);
    --ak-service-control-border-hover: rgba(var(--brand-primary-rgb, 8, 119, 185), 0.68);
    --ak-service-control-shadow: 0 3px 10px rgba(var(--brand-deep-rgb, 6, 75, 120), 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    --ak-service-control-shadow-hover: 0 6px 15px rgba(var(--brand-deep-rgb, 6, 75, 120), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    --ak-service-control-ring: 0 0 0 3px rgba(var(--brand-primary-rgb, 8, 119, 185), 0.13),
        0 7px 17px rgba(var(--brand-deep-rgb, 6, 75, 120), 0.1);
}

body[data-page] .service-form .recharge-form :where(
    input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
    select,
    textarea
) {
    width: 100%;
    min-height: var(--ak-service-control-height);
    border: 1px solid var(--ak-service-control-border) !important;
    border-radius: var(--ak-service-control-radius) !important;
    color: var(--brand-ink, #082844) !important;
    background-color: rgba(255, 255, 255, 0.96) !important;
    background-image: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
    box-shadow: var(--ak-service-control-shadow) !important;
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
    outline: 0;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

body[data-page] .service-form .recharge-form :where(
    input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
    select
) {
    padding: 0 15px;
}

body[data-page] .service-form .recharge-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 43px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23075e96' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: right 15px center, center !important;
    background-size: 18px, 100% 100% !important;
}

body[data-page] .service-form .recharge-form textarea {
    min-height: 92px;
    padding: 13px 15px;
    resize: vertical;
}

body[data-page] .service-form .recharge-form :where(input, textarea)::placeholder {
    color: #71829a;
    opacity: 1;
    font-weight: 500;
}

body[data-page] .service-form .recharge-form :where(
    input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
    select,
    textarea
):not(:disabled):not([readonly]):hover {
    border-color: var(--ak-service-control-border-hover) !important;
    background-color: #ffffff !important;
    box-shadow: var(--ak-service-control-shadow-hover) !important;
}

body[data-page] .service-form .recharge-form :where(
    input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
    select,
    textarea
):focus,
body[data-page] .service-form .recharge-form :where(
    input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
    select,
    textarea
):focus-visible {
    border-color: var(--brand-primary, #0877b9) !important;
    background-color: #ffffff !important;
    box-shadow: var(--ak-service-control-ring) !important;
    outline: 0 !important;
}

body[data-page] .service-form .recharge-form :where(input, select, textarea):disabled,
body[data-page] .service-form .recharge-form :where(input, select, textarea)[readonly] {
    cursor: not-allowed;
    opacity: 0.68;
    box-shadow: inset 0 1px 2px rgba(var(--brand-deep-rgb, 6, 75, 120), 0.06) !important;
}

body[data-page] .service-form .recharge-form input:-webkit-autofill,
body[data-page] .service-form .recharge-form input:-webkit-autofill:hover,
body[data-page] .service-form .recharge-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--brand-ink, #082844);
    -webkit-box-shadow: 0 0 0 1000px #f7fbff inset, var(--ak-service-control-ring) !important;
    caret-color: var(--brand-ink, #082844);
}

/* Floating labels need an opaque patch over the outlined field. */
body[data-page] .service-form .floating-field label {
    color: rgba(var(--brand-deep-rgb, 6, 75, 120), 0.84);
    background: #ffffff;
    border-radius: 999px;
    padding-inline: 0.45rem;
}

body[data-page] .service-form .recharge-form :where(
    .btn.primary,
    .btn.secondary,
    .btn.ghost,
    .btn.mini
),
body[data-page] .payment-handshake :where(.btn.primary, .btn.secondary, .btn.ghost),
body[data-page] .checkout-modal :where(.btn.primary, .btn.secondary, .btn.ghost) {
    min-height: 46px;
    border-radius: var(--ak-service-control-radius, 15px) !important;
    padding: 0.66rem 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease, background 0.18s ease;
}

body[data-page] .service-form .recharge-form :where(.btn.primary, .btn.secondary, .btn.ghost, .btn.mini):not(:disabled):hover,
body[data-page] .payment-handshake :where(.btn.primary, .btn.secondary, .btn.ghost):not(:disabled):hover,
body[data-page] .checkout-modal :where(.btn.primary, .btn.secondary, .btn.ghost):not(:disabled):hover {
    transform: translateY(-2px);
    filter: brightness(1.035) saturate(1.04);
}

body[data-page] .service-form .recharge-form :where(.btn.primary, .btn.secondary, .btn.ghost, .btn.mini):not(:disabled):active,
body[data-page] .payment-handshake :where(.btn.primary, .btn.secondary, .btn.ghost):not(:disabled):active,
body[data-page] .checkout-modal :where(.btn.primary, .btn.secondary, .btn.ghost):not(:disabled):active {
    transform: translateY(1px) scale(0.99);
}

body[data-page] .service-form .payment-controls .btn.primary,
body[data-page] .service-form .recharge-form > .btn.primary {
    min-height: 48px;
    border-radius: 16px !important;
    background: var(--brand-control-primary, linear-gradient(135deg, #0877b9, #075e96 55%, #064b78)) !important;
    color: var(--brand-on-primary, #ffffff) !important;
    box-shadow: var(--brand-control-shadow, 0 12px 26px rgba(6, 75, 120, 0.3)) !important;
}

body[data-page] .service-form .payment-controls .btn.primary:not(:disabled):hover,
body[data-page] .service-form .recharge-form > .btn.primary:not(:disabled):hover {
    background: var(--brand-control-primary-hover, linear-gradient(135deg, #075e96, #0877b9 48%, #064b78)) !important;
    box-shadow: 0 16px 32px rgba(var(--brand-deep-rgb, 6, 75, 120), 0.34) !important;
}

body[data-page] .service-form :where(.btn.ghost, .btn.secondary, .check-plans-btn) {
    border: 1px solid rgba(var(--brand-primary-rgb, 8, 119, 185), 0.44) !important;
    border-radius: var(--ak-service-control-radius, 15px) !important;
    color: var(--brand-deep, #064b78) !important;
    background: linear-gradient(180deg, #ffffff 0%, rgba(var(--brand-primary-rgb, 8, 119, 185), 0.07) 100%) !important;
    box-shadow: 0 4px 11px rgba(var(--brand-deep-rgb, 6, 75, 120), 0.08), inset 0 1px 0 #ffffff !important;
}

body[data-page] .service-form :where(.btn.ghost, .btn.secondary, .check-plans-btn):not(:disabled):hover {
    border-color: var(--brand-primary, #0877b9) !important;
    color: #ffffff !important;
    background: var(--brand-control-primary, linear-gradient(135deg, #0877b9, #075e96 55%, #064b78)) !important;
    box-shadow: 0 13px 27px rgba(var(--brand-deep-rgb, 6, 75, 120), 0.26) !important;
}

/* Plan filters and Select actions follow the same radius and header accent. */
body[data-page] .plan-panel :where(.plan-tab, .plan-tags button) {
    min-height: 34px;
    border-radius: 999px !important;
    border-color: rgba(var(--brand-primary-rgb, 8, 119, 185), 0.42) !important;
    color: var(--brand-deep, #064b78);
    background: #ffffff;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body[data-page] .plan-panel :where(.plan-tab, .plan-tags button):hover,
body[data-page] .plan-panel .plan-tab.active {
    border-color: var(--brand-primary, #0877b9) !important;
    color: #ffffff !important;
    background: var(--brand-control-primary, linear-gradient(135deg, #0877b9, #075e96 55%, #064b78)) !important;
    box-shadow: 0 9px 20px rgba(var(--brand-deep-rgb, 6, 75, 120), 0.22);
    transform: translateY(-1px);
}

body[data-page] .plan-panel .btn.mini {
    min-height: 36px;
    min-width: 86px;
    border-radius: 13px !important;
}

body[data-page="fasttag"] .fasttag-amount-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
}

body[data-page="fasttag"] .fasttag-amount-row > label {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

body[data-page="fasttag"] .fasttag-amount-row .js-planapi-fetch {
    flex: 0 0 clamp(132px, 42%, 168px);
    min-width: 0;
    min-height: var(--ak-service-control-height, 48px);
    padding-inline: 12px;
    white-space: normal;
    line-height: 1.15;
}

@media (max-width: 420px) {
    body[data-page="fasttag"] .fasttag-amount-row {
        gap: 7px;
    }

    body[data-page="fasttag"] .fasttag-amount-row .js-planapi-fetch {
        flex-basis: 124px;
        padding-inline: 8px;
        font-size: 0.73rem;
    }
}

/* Quantity is intentionally compact; it still uses the shared finish. */
body[data-page] .service-form .recharge-form .quantity-card input[type="number"] {
    min-height: 42px;
    border-radius: 14px !important;
    padding-inline: 0.45rem;
}

body[data-page] .service-form .recharge-form .qty-btn {
    border-color: rgba(var(--brand-primary-rgb, 8, 119, 185), 0.58);
    color: var(--brand-deep, #064b78);
    background: linear-gradient(180deg, #ffffff, rgba(var(--brand-primary-rgb, 8, 119, 185), 0.1));
    box-shadow: 0 6px 14px rgba(var(--brand-deep-rgb, 6, 75, 120), 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body[data-page] .service-form .recharge-form .qty-btn:hover {
    color: #ffffff;
    background: var(--brand-control-primary, linear-gradient(135deg, #0877b9, #075e96 55%, #064b78));
    box-shadow: 0 9px 18px rgba(var(--brand-deep-rgb, 6, 75, 120), 0.24);
    transform: translateY(-1px);
}

/* Compact mode switch with a clear selected state. */
body[data-page="mobile"].has-ak-public-header .mobile-console-type {
    width: min(274px, 100%);
    min-height: 40px;
    padding: 3px;
    gap: 4px;
    overflow: visible;
    border: 1px solid rgba(var(--brand-primary-rgb, 8, 119, 185), 0.28) !important;
    border-radius: 15px !important;
    background: rgba(var(--brand-primary-rgb, 8, 119, 185), 0.07) !important;
    box-shadow: inset 0 1px 2px rgba(var(--brand-deep-rgb, 6, 75, 120), 0.06),
        0 4px 11px rgba(var(--brand-deep-rgb, 6, 75, 120), 0.08) !important;
}

body[data-page="mobile"].has-ak-public-header .mobile-console-type .toggle-pill {
    border-radius: 11px;
}

body[data-page="mobile"].has-ak-public-header .mobile-console-type .toggle-pill span {
    min-height: 34px;
    padding: 0.42rem 0.8rem;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--brand-deep, #064b78) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.78rem;
    font-weight: 700;
    transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

body[data-page="mobile"].has-ak-public-header .mobile-console-type .toggle-pill span::before {
    width: 14px;
    height: 14px;
    border: 1.5px solid currentColor;
    background: transparent;
    font-size: 0;
    line-height: 1;
}

body[data-page="mobile"].has-ak-public-header .mobile-console-type .toggle-pill:hover span {
    border-color: rgba(var(--brand-primary-rgb, 8, 119, 185), 0.3);
    background: rgba(255, 255, 255, 0.72) !important;
}

body[data-page="mobile"].has-ak-public-header .mobile-console-type input:checked + span {
    border-color: rgba(255, 255, 255, 0.34) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: var(--brand-control-primary, linear-gradient(135deg, #0877b9, #075e96 55%, #064b78)) !important;
    box-shadow: 0 5px 12px rgba(var(--brand-deep-rgb, 6, 75, 120), 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

body[data-page="mobile"].has-ak-public-header .mobile-console-type input:checked + span::before {
    content: "\2713";
    display: grid;
    place-items: center;
    border-color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 900;
}

body[data-page="mobile"].has-ak-public-header .mobile-console-type input:focus-visible + span {
    outline: 3px solid rgba(var(--brand-primary-rgb, 8, 119, 185), 0.24);
    outline-offset: 2px;
}

/* Leading field icons for the continuous mobile recharge form. */
body[data-page="mobile"] .service-form .mobile-console-form input[name="mobile"] {
    padding-left: 43px !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23075e96' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 3.5 10 8l-2.1 2.1a15.6 15.6 0 0 0 6 6L16 14l4.5 2.8-.8 3.1c-.2.8-1 1.4-1.9 1.3C10 20.3 3.7 14 2.8 6.2c-.1-.9.5-1.7 1.3-1.9l3.1-.8Z'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: left 15px center, center !important;
    background-size: 18px, 100% 100% !important;
}

body[data-page="mobile"] .service-form .mobile-console-form input[name="amount"] {
    padding-left: 43px !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Ctext x='5' y='18' fill='%23075e96' font-family='Arial,sans-serif' font-size='18' font-weight='700'%3E%E2%82%B9%3C/text%3E%3C/svg%3E"),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: left 15px center, center !important;
    background-size: 18px, 100% 100% !important;
}

body[data-page="mobile"] .service-form .mobile-console-form select[name="operator"] {
    padding-left: 43px !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23075e96' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21h16M6 21V5l6-2v18M12 7h6v14M9 8v1M9 12v1M9 16v1M15 10v1M18 10v1M15 14v1M18 14v1'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23075e96' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-position: left 15px center, right 15px center, center !important;
    background-size: 18px, 18px, 100% 100% !important;
}

body[data-page="mobile"] .service-form .mobile-console-form select[name="circle"] {
    padding-left: 43px !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23075e96' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23075e96' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-position: left 15px center, right 15px center, center !important;
    background-size: 18px, 18px, 100% 100% !important;
}

@media (max-width: 640px) {
    body[data-page] .service-form {
        --ak-service-control-height: 45px;
        --ak-service-control-radius: 13px;
    }

    body[data-page] .service-form .recharge-form :where(
        input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
        select
    ) {
        padding-left: 14px;
        font-size: 0.82rem;
    }

    body[data-page] .service-form .recharge-form select {
        padding-right: 42px;
        background-position: right 14px center, center !important;
    }

    body[data-page] .service-form .recharge-form :where(
        .btn.primary,
        .btn.secondary,
        .btn.ghost,
        .btn.mini
    ) {
        min-height: 44px;
        border-radius: 13px !important;
    }

    body[data-page] .service-form .payment-controls .btn.primary {
        min-height: 46px;
        border-radius: 14px !important;
    }
}

/*
 * The public-header safety rules are loaded after the page stylesheet and use
 * a stronger selector to restore `display: grid`. On phones that could revive
 * the hidden desktop plan column and leave the recharge card occupying only
 * the left side of the viewport. Keep the phone shell explicitly single-column
 * in this last-loaded stylesheet.
 */
@media (max-width: 820px) {
    body[data-page="mobile"].has-ak-public-header > main.mobile-console > .service-form {
        width: 100% !important;
        max-width: 600px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding: 12px max(12px, env(safe-area-inset-right)) 24px max(12px, env(safe-area-inset-left)) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: minmax(0, 1fr) !important;
        box-sizing: border-box !important;
    }

    body[data-page="mobile"].has-ak-public-header > main.mobile-console > .service-form > .form-card,
    body[data-page="mobile"].has-ak-public-header > main.mobile-console > .service-form > .support-column {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        grid-column: 1 / -1 !important;
        box-sizing: border-box !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page] .service-form .recharge-form :where(input, select, textarea, button),
    body[data-page] .plan-panel button {
        transition: none !important;
    }
}