:root {
     --bg: #f7f7fa;
     --footerbg: #1d1d1d;
     --card: #ffffff;
     --accent: #d62828;
     --accent-dark: #b71c1c;
     --muted: #6b6f76;
     --input-border: #e6e9ee;
     --radius: 12px;
 }

 * {
     box-sizing: border-box;
     font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
 }

 body {
     margin: 0;
     background: linear-gradient(180deg, var(--bg), #fff);
     color: #111827;
 }

.containe_box{
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
}

.logo_area{
    padding: 10px 0px;
    text-align: center;


}

 .wrap {
     max-width: 980px;
     margin: 12px auto;
     display: grid;
     grid-template-columns: 1fr 360px;
     gap: 20px;
     align-items: start;
 }

 .card {
     background: var(--card);
     border-radius: var(--radius);
     padding: 18px;
     box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
     border: 1px solid #eef2f6;
 }

 header.app-head {
     display: flex;
     gap: 12px;
     align-items: center;
     margin-bottom: 10px
 }

 .logo {
     width: 56px;
     height: 56px;
     border-radius: 10px;
     background: linear-gradient(135deg, var(--accent), var(--accent-dark));
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-weight: 700;
     font-size: 20px
 }

 header.app-head h1 {
     font-size: 18px;
     margin: 0
 }

 header.app-head p {
     margin: 0;
     color: var(--muted);
     font-size: 13px
 }

 form .row {
     display: flex;
     gap: 12px;
     margin-top: 10px
 }

 .col {
     flex: 1;
     min-width: 0
 }

 label {
     display: block;
     font-size: 13px;
     color: var(--muted);
     margin-bottom: 6px
 }

 input[type="text"], input[type="number"], input[type="date"], input[type="time"], select {
     width: 100%;
     padding: 10px 12px;
     border-radius: 10px;
     border: 1px solid var(--input-border);
     background: #fff;
     font-size: 14px;
 }

 input:focus, select:focus {
     outline: none;
     box-shadow: 0 6px 18px rgba(22, 163, 74, 0.06);
     border-color: rgba(22, 163, 74, 0.15);
 }

 .small {
     font-size: 13px;
     color: var(--muted)
 }

 .error {
     display: block;
     color: #b45309;
     font-size: 12px;
     margin-top: 6px;
     min-height: 16px
 }

 .inline-note {
     font-size: 12px;
     color: #8b8f96;
     margin-top: 6px
 }

 .checkbox-row {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-top: 12px
 }

 .btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: linear-gradient(90deg, var(--accent), var(--accent-dark));
     color: #fff;
     border: none;
     padding: 12px 16px;
     border-radius: 10px;
     font-weight: 600;
     cursor: pointer;
     margin-top: 12px
 }

 .btn:disabled {
     opacity: .6;
     cursor: not-allowed
 }

 .right {
     position: sticky;
     top: 22px;
     height: max-content
 }

 .donation h3 {
     margin: 0 0 6px 0
 }

 .donation table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 8px
 }

 .donation th, .donation td {
     border: 1px solid #eef2f6;
     padding: 10px;
     text-align: center;
     font-weight: 600
 }

 .donation th {
     background: linear-gradient(90deg, var(--accent), var(--accent-dark));
     color: #fff
 }

 .muted-box {
     font-size: 13px;
     color: var(--muted);
     margin-top: 8px
 }

 .thankyou {
     text-align: center;
     padding: 24px;
     border-radius: 12px
 }

 .footer_section{
    font-size: 12px;
    text-align: center;
    color: var(--muted);
    padding: 5px 0px;
 }

 @media (max-width:980px) {
     .wrap {
         grid-template-columns: 1fr;
         padding: 8px
     }

     .right {
         position: relative;
         top: 0
     }
 }