:root {
    --saffron: #ff9933;
    --saffron-deep: #d96e16;
    --ivory: #fffdf6;
    --ivory-shadow: #e8e1ce;
    --india-green: #138808;
    --green-deep: #086334;
    --chakra: #000080;
    --chakra-light: #1a237e;
}

* { -webkit-tap-highlight-color: transparent; }

body {
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 7% 18%, rgba(255, 153, 51, .72) 0 9%, transparent 24%),
        radial-gradient(circle at 94% 72%, rgba(19, 136, 8, .68) 0 12%, transparent 28%),
        linear-gradient(135deg, #f9e2c7 0%, var(--ivory) 42%, #d8edda 100%) !important;
    background-size: 130% 130%;
    animation: tricolour-drift 16s ease-in-out infinite alternate;
}

body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: 42vw;
    height: 42vw;
    min-width: 320px;
    min-height: 320px;
    border-radius: 50%;
    opacity: .24;
    filter: blur(8px);
    pointer-events: none;
}

body::before {
    top: 15%; left: -15%;
    background: repeating-radial-gradient(circle, var(--saffron) 0 6px, transparent 7px 17px);
    animation: chakra-turn 45s linear infinite;
}

body::after {
    right: -14%; bottom: 5%;
    background: repeating-radial-gradient(circle, var(--india-green) 0 6px, transparent 7px 17px);
    animation: chakra-turn 55s linear infinite reverse;
}

@keyframes tricolour-drift { to { background-position: 100% 100%; } }
@keyframes chakra-turn { to { transform: rotate(360deg); } }

header {
    background: linear-gradient(145deg, #ffffff, #f2eddf) !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 128, .12), inset 0 1px 0 #fff, inset 0 -3px 0 rgba(255, 153, 51, .16) !important;
}

header img { filter: drop-shadow(2px 3px 2px rgba(0, 0, 128, .18)); }

main > div > div:first-child {
    background: linear-gradient(145deg, #ffbc70, var(--saffron) 55%, #e87920) !important;
    border: 1px solid #ffd49e !important;
    box-shadow: 14px 14px 28px rgba(123, 62, 10, .22), -8px -8px 20px rgba(255,255,255,.65), inset 2px 2px 0 rgba(255,255,255,.42), inset -5px -5px 14px rgba(153,68,0,.18) !important;
}

main > div > div:first-child > div:first-child {
    background: linear-gradient(145deg, #ffe0b7, #f7a24c) !important;
    box-shadow: inset 7px 7px 14px rgba(126, 61, 5, .25), inset -7px -7px 14px rgba(255,255,255,.46) !important;
}

main > div > div:nth-child(2) {
    background: linear-gradient(145deg, #152b91, var(--chakra) 55%, #00005d) !important;
    border: 1px solid #4054af !important;
    box-shadow: 14px 14px 28px rgba(0, 0, 68, .28), -7px -7px 20px rgba(255,255,255,.56), inset 2px 2px 0 rgba(255,255,255,.16), inset -7px -7px 18px rgba(0,0,35,.4) !important;
}

main > div > div:nth-child(2) > div,
#selection-view, #form1-view, #form2-view {
    background: transparent !important;
}

#selection-view, #form1-view, #form2-view { box-shadow: inset 0 12px 20px rgba(0,0,45,.18); }

#global-agent-name, #other-agent-name, #form1 input:not([type="hidden"]), #form2 input, #bank-name {
    background: linear-gradient(145deg, #0b1765, #1d3295) !important;
    border: 1px solid rgba(157, 179, 255, .38) !important;
    box-shadow: inset 4px 4px 8px rgba(0,0,40,.45), inset -2px -2px 5px rgba(255,255,255,.12), 2px 3px 5px rgba(0,0,40,.24) !important;
}

#global-agent-name:focus, #other-agent-name:focus, #form1 input:focus, #form2 input:focus, #bank-name:focus {
    border-color: var(--saffron) !important;
    box-shadow: inset 4px 4px 8px rgba(0,0,40,.45), 0 0 0 3px rgba(255,153,51,.26) !important;
}

/* Keep native dropdown menus legible on every operating system. */
#global-agent-name option,
#bank-name option {
    background: var(--ivory) !important;
    color: var(--chakra) !important;
    font-weight: 600;
}

#global-agent-name option:checked,
#bank-name option:checked {
    background: var(--saffron) !important;
    color: var(--chakra) !important;
}

#btn-qr-payment, #btn-cc-payment {
    background: linear-gradient(145deg, #253b9e, #0c196b) !important;
    border-color: rgba(165, 184, 255, .38) !important;
    box-shadow: 6px 7px 12px rgba(0,0,42,.35), inset 2px 2px 0 rgba(255,255,255,.14), inset -3px -3px 8px rgba(0,0,36,.36) !important;
}

#btn-qr-payment:hover, #btn-cc-payment:hover {
    border-color: var(--saffron) !important;
    box-shadow: 8px 10px 18px rgba(0,0,42,.42), inset 2px 2px 0 rgba(255,255,255,.18), 0 0 0 3px rgba(255,153,51,.16) !important;
}

#btn-qr-payment:active, #btn-cc-payment:active, .submit-btn:active, #back-btn:active, #prev-slide:active, #next-slide:active {
    transform: translateY(2px) !important;
    box-shadow: inset 4px 4px 8px rgba(0,0,0,.3) !important;
}

#prev-slide, #next-slide, #back-btn {
    background: linear-gradient(145deg, #fffefb, #e8e1ce) !important;
    color: var(--chakra) !important;
    border: 1px solid #fff !important;
    box-shadow: 5px 6px 11px rgba(100,62,20,.27), inset 2px 2px 0 #fff, inset -2px -2px 5px rgba(118,88,35,.18) !important;
}

#back-btn:hover { background: linear-gradient(145deg, #ffbf77, var(--saffron)) !important; color: var(--chakra) !important; }

.submit-btn {
    background: linear-gradient(145deg, #20a555, var(--india-green) 58%, var(--green-deep)) !important;
    border: 1px solid #6cd68a !important;
    box-shadow: 6px 7px 13px rgba(0,58,18,.35), inset 2px 2px 0 rgba(255,255,255,.26), inset -3px -3px 8px rgba(0,65,20,.35) !important;
}

.submit-btn:hover { filter: brightness(1.08); box-shadow: 8px 10px 18px rgba(0,58,18,.42), inset 2px 2px 0 rgba(255,255,255,.28) !important; }

#success-modal > div {
    background: linear-gradient(145deg, #fffefb, #eee7d7) !important;
    border: 1px solid #fff !important;
    box-shadow: 18px 18px 38px rgba(0,0,80,.28), -10px -10px 24px rgba(255,255,255,.72), inset 2px 2px 0 #fff !important;
}

footer {
    background: linear-gradient(145deg, #0f217c, #00005e) !important;
    border-top: 5px solid var(--india-green) !important;
    box-shadow: inset 0 4px 0 rgba(255,153,51,.52), 0 -8px 20px rgba(0,0,65,.18) !important;
    overflow: hidden;
}

footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 7px;
    background: linear-gradient(90deg, var(--saffron) 0 33.33%, var(--ivory) 33.33% 66.66%, var(--india-green) 66.66% 100%);
    box-shadow: 0 2px 7px rgba(0,0,0,.3);
}

footer > .grid > div {
    position: relative;
    padding: 1.35rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 1.15rem;
    background: linear-gradient(145deg, rgba(44,65,164,.42), rgba(0,0,57,.42));
    box-shadow: inset 2px 2px 0 rgba(255,255,255,.1), inset -4px -4px 10px rgba(0,0,35,.26), 5px 7px 13px rgba(0,0,42,.24);
}

footer h3 { text-shadow: 1px 2px 2px rgba(0,0,0,.3); }
footer .group > div {
    background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.05)) !important;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.22), 2px 3px 5px rgba(0,0,35,.28);
}

footer > .max-w-6xl:last-child {
    margin-top: 1.5rem !important;
    padding: 1.1rem 1.35rem 0 !important;
    border-top-color: rgba(255,255,255,.2) !important;
}

/* Footer as a complete Tricolour composition rather than a navy-only block. */
footer {
    background: linear-gradient(145deg, #fffef9, #ece5d4) !important;
    border-top: 0 !important;
    box-shadow: 0 -10px 26px rgba(0,0,70,.16), inset 0 2px 0 #fff !important;
}

footer::before { height: 10px; }

footer > .grid > div {
    min-height: 178px;
    border-width: 1px;
    box-shadow: 7px 9px 16px rgba(0,0,55,.18), inset 2px 2px 0 rgba(255,255,255,.76), inset -4px -5px 10px rgba(0,0,50,.1) !important;
}

footer > .grid > div:nth-child(1) {
    background: linear-gradient(145deg, #ffc275, var(--saffron)) !important;
    border-color: #ffe1b8 !important;
    color: var(--chakra) !important;
}

footer > .grid > div:nth-child(2) {
    background: linear-gradient(145deg, #fffefb, #e9e2d0) !important;
    border-color: #fff !important;
    color: var(--chakra) !important;
}

footer > .grid > div:nth-child(3) {
    background: linear-gradient(145deg, #23a85b, var(--india-green) 60%, var(--green-deep)) !important;
    border-color: #77d99b !important;
    color: #fff !important;
}

footer > .grid > div:nth-child(1) h3,
footer > .grid > div:nth-child(1) p,
footer > .grid > div:nth-child(2) h3,
footer > .grid > div:nth-child(2) ul,
footer > .grid > div:nth-child(2) a { color: var(--chakra) !important; }

footer > .grid > div:nth-child(3) h3,
footer > .grid > div:nth-child(3) > div { color: #fff !important; }

footer > .grid > div:nth-child(2) .group > div {
    background: linear-gradient(145deg, #fffdf7, #ead9bd) !important;
    color: var(--chakra) !important;
}

footer > .grid > div:nth-child(3) .group > div {
    background: linear-gradient(145deg, rgba(255,255,255,.3), rgba(255,255,255,.1)) !important;
}

footer > .max-w-6xl:last-child {
    color: var(--chakra) !important;
    border-top-color: rgba(0,0,128,.18) !important;
}

footer > .max-w-6xl:last-child span,
footer > .max-w-6xl:last-child p { color: var(--chakra) !important; }

footer > .max-w-6xl:last-child img {
    filter: none !important;
    opacity: 1 !important;
}

/* Agent selection follows the saffron, white, and green Tricolour order. */
main > div > div:nth-child(2) > div:first-child {
    background: linear-gradient(145deg, #ffc477, var(--saffron)) !important;
    border-bottom-color: rgba(0,0,128,.22) !important;
    box-shadow: inset 2px 2px 0 rgba(255,255,255,.42), inset -4px -4px 10px rgba(154,73,0,.16) !important;
}

main > div > div:nth-child(2) > div:first-child h2,
main > div > div:nth-child(2) > div:first-child p { color: var(--chakra) !important; }

#selection-view {
    background: linear-gradient(145deg, #fffefb, #eee7d7) !important;
    color: var(--chakra) !important;
    box-shadow: inset 5px 5px 12px rgba(99,74,25,.12), inset -2px -2px 6px #fff !important;
}

#selection-view label { color: var(--chakra) !important; }

#selection-view #global-agent-name,
#selection-view #other-agent-name {
    background: linear-gradient(145deg, #2cad62, var(--india-green) 60%, var(--green-deep)) !important;
    border-color: #72d89a !important;
    color: #fff !important;
    box-shadow: inset 4px 4px 8px rgba(0,74,22,.38), inset -2px -2px 5px rgba(255,255,255,.15), 3px 4px 8px rgba(0,70,20,.22) !important;
}

#selection-view #other-agent-name::placeholder { color: rgba(255,255,255,.72) !important; }

#selection-view #btn-qr-payment {
    background: linear-gradient(145deg, #fffefb, #e9e2d0) !important;
    border-color: rgba(255,153,51,.72) !important;
}

#selection-view #btn-qr-payment h3,
#selection-view #btn-qr-payment p { color: var(--chakra) !important; }

#selection-view #btn-cc-payment {
    background: linear-gradient(145deg, #2cad62, var(--india-green)) !important;
    border-color: #72d89a !important;
}

#selection-view #btn-cc-payment h3,
#selection-view #btn-cc-payment p { color: #fff !important; }

/* Carry the page's blended Tricolour field through the full Agent Selection card. */
main > div > div:nth-child(2) {
    background:
        radial-gradient(circle at 9% 9%, rgba(255,153,51,.82) 0 18%, transparent 44%),
        radial-gradient(circle at 93% 91%, rgba(19,136,8,.76) 0 17%, transparent 45%),
        linear-gradient(135deg, #f8e2c9 0%, #fffdf6 47%, #d9eedb 100%) !important;
    border-color: rgba(0,0,128,.48) !important;
}

main > div > div:nth-child(2) > div:first-child {
    background: transparent !important;
    backdrop-filter: none;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

#selection-view {
    background: transparent !important;
    box-shadow: none !important;
}

.carousel-dot:first-child { background: var(--saffron) !important; box-shadow: inset 1px 1px 2px rgba(255,255,255,.5), 0 1px 4px rgba(0,0,0,.3); }

input[type="file"]::file-selector-button {
    background: linear-gradient(145deg, #fffefb, #e8e1ce);
    color: var(--chakra);
    border: 1px solid #fff;
    border-radius: .65rem;
    box-shadow: 2px 3px 5px rgba(0,0,40,.25), inset 1px 1px 0 #fff;
}

@media (max-width: 768px) {
    body::before, body::after { opacity: .13; }
    header { padding: 12px !important; }
    main { padding: 12px !important; }
    #prev-slide, #next-slide { opacity: .92 !important; }
}

/* Responsive square showcase and adaptive page composition. */
main { min-height: calc(100vh - 92px); }

main > div > div:first-child { align-self: center; }
main > div > div:first-child > div:first-child { aspect-ratio: 1 / 1; }
main > div > div:nth-child(2) { min-height: 0 !important; }

@media (min-width: 1024px) {
    main > div {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(390px, 1fr);
        align-items: center !important;
    }

    main > div > div:first-child,
    main > div > div:nth-child(2) { width: 100% !important; }
    main > div > div:first-child { max-width: 620px; justify-self: center; }
    main > div > div:nth-child(2) { min-height: 0 !important; }
}

@media (max-width: 1023px) {
    main { min-height: auto; padding-top: 1.5rem !important; padding-bottom: 2rem !important; }
    main > div { width: min(100%, 680px); margin-inline: auto; }
    main > div > div:first-child { max-width: 620px; margin-inline: auto; }
    main > div > div:nth-child(2) { min-height: 0 !important; }
}

@media (max-width: 640px) {
    header img { height: 3.15rem !important; }
    header .absolute span { font-size: 1.05rem !important; }
    main > div { gap: 1.15rem !important; }
    main > div > div:first-child { padding: .65rem !important; border-radius: 1.35rem !important; }
    main > div > div:nth-child(2) { min-height: 0; border-radius: 1.35rem !important; }
    #selection-view, #form1-view, #form2-view { padding: 1.25rem !important; }
    #payment-options-container { gap: .8rem !important; }
    #btn-qr-payment, #btn-cc-payment { padding: 1rem !important; }
    #prev-slide, #next-slide { width: 2.4rem !important; height: 2.4rem !important; }
    footer { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
}