@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700");

* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100dvh;
    font: 18px/1.4 "Source Sans Pro", Arial, sans-serif;
    color: #333;
    background: #f7f5f0 url("../../images/diwali-registration-page-background.jpg") center / cover fixed;
}
.registration { width: min(720px, calc(100% - 24px)); margin: 24px auto; background: #fff; border: 1px solid #dce3e2; border-radius: 8px; overflow: hidden; box-shadow: 0 12px 32px #2226291a; }
.banner { padding: 18px 24px; background: #222629; border-bottom: 4px solid #ee5e2d; }
h1 { margin: 0; color: #fff; font-size: 32px; line-height: 1.15; font-weight: 600; text-align: center; }
.content { padding: 18px 24px; }
fieldset { min-width: 0; margin: 0; padding: 0 14px 4px; border: 1px solid #dce3e2; border-radius: 6px; }
fieldset + fieldset { margin-top: 14px; }
legend { padding: 3px 8px; font-size: 18px; font-weight: 600; background: #f2f4f4; border-radius: 4px; }
legend span { font-size: 16px; font-weight: 400; color: #666; }
.item-row { display: grid; grid-template-columns: minmax(0, 1fr) 126px 104px; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #dce3e2; }
legend + .item-row { border-top: 0; }
.item-name { font-size: 18px; font-weight: 600; margin: 0; }
.hint { color: #555; font-size: 16px; margin-top: 1px; }
label { display: block; margin-bottom: 3px; font-size: 15px; color: #444; }
input, select, button { font: inherit; }
input, select { width: 100%; min-width: 0; min-height: 42px; padding: 7px 9px; border: 1px solid #b9c2c0; border-radius: 6px; background: #fff; color: #333; }
input:focus, select:focus { outline: 2px solid #ee5e2d; outline-offset: 1px; }
input[aria-invalid="true"] { border-color: #b42318; }
.amount-field { position: relative; }
.amount-field span { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); color: #666; pointer-events: none; }
.amount-field input { padding-left: 26px; }
.line-total { text-align: right; font-weight: 600; font-size: 17px; overflow-wrap: anywhere; }
.total-bar { margin-top: 14px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #f5f7f7; border: 1px solid #dce3e2; border-radius: 6px; color: #000; }
.total-bar strong { font-size: 21px; }
#grand-total { font-size: 27px; font-weight: 600; overflow-wrap: anywhere; }
.checkout { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-top: 14px; }
.checkout img { width: 78px; height: 39px; object-fit: contain; }
button { min-height: 46px; padding: 10px 20px; background: #e95024; border: 0; border-radius: 6px; color: #fff; font-weight: 600; cursor: pointer; }
button:hover { background: #c8411b; }
button:focus-visible { outline: 3px solid #222; outline-offset: 3px; }
.status { margin: 10px 0 0; font-size: 15px; color: #666; text-align: center; }
.status:empty { display: none; }
@media (max-width: 640px) {
    body { background-attachment: scroll; }
    .registration { width: calc(100% - 14px); margin: 8px auto; }
    .banner { padding: 12px; }
    h1 { font-size: 22px; }
    .content { padding: 12px 10px; }
    fieldset { padding: 0 9px 2px; }
    .item-row { grid-template-columns: minmax(0, 1fr) 85px 66px; gap: 7px; padding: 8px 0; }
    .item-name { font-size: 17px; }
    .hint, .line-total { font-size: 15px; }
    .line-total { align-self: center; }
    button { font-size: 17px; padding: 10px 12px; }
}