/* ===== Page Base ===== */
.footer-logo {
max-width: 240px;
opacity: 0.85;
margin-top: 15px;
margin-bottom: 10px;
}
body.index {
background-color: #F7F2F9;
font-family: Arial, sans-serif;
margin: 0;
}

/* ===== Main Layout ===== */
body.index main {
display: flex;
justify-content: center;
padding: 40px 20px;
}

/* ===== Card Container ===== */
body.index .card {
background-color: #DACDF2;
border-radius: 16px;
padding: 30px 25px;
max-width: 700px;
width: 100%;
text-align: center;
}

/* ===== Heading ===== */
body.index h1 {
color: #0A1128;
margin-bottom: 25px;
font-size: 1.6rem;
}

/* ===== Office List Grid ===== */
body.index .office-list {
list-style: none;
padding: 0;
margin: 20px 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 15px;
}

/* ===== Buttons ===== */
body.index .btn {
display: block;
background-color: #0A1128;
color: #FFFFFF;
text-decoration: none;
padding: 14px;
border-radius: 10px;
font-weight: bold;
text-align: center;
}
body.index .receipt-btn {
background-color: #EFE745;
color: #000;
display: block;
margin: 25px auto 30px auto;
width: fit-content;
min-width: 180px;
}
body.index .btn,
body.index .receipt-btn {
transition: background-color 0.2s ease, transform 0.1s ease;
}

/* ===== Focus Styles ===== */
body.index a:focus,
body.index a:focus-visible {
outline: 3px solid #775ED3;
outline-offset: 3px;
}
body.index .btn:focus,
body.index .btn:focus-visible,
body.index .receipt-btn:focus,
body.index .receipt-btn:focus-visible {
outline: 3px solid #EFE745;
outline-offset: 3px;
}

/* ===== Skip Link ===== */
.skip-link {
position: absolute;
top: -40px;
left: 10px;
background: #0A1128;
color: #fff;
padding: 8px 12px;
z-index: 1000;
text-decoration: none;
}
.skip-link:focus {
top: 10px;
}

/* ===== Button States ===== */
body.index .btn:hover {
background-color: #5E4BCB;
color: #FFFFFF;
cursor: pointer;
}
body.index .btn:active {
background-color: #5a46b8;
transform: scale(0.98);
}
body.index .receipt-btn:hover {
background-color: #4B3BB5;
color: #FFFFFF;
}
body.index .receipt-btn:active {
transform: scale(0.98);
}

/* ===== Logo ===== */
body.index .main-logo {
max-width: 320px;
margin-bottom: 25px;
}

/* ===== Start Page ===== */
body.start {
background-color: #F7F2F9;
font-family: Arial, sans-serif;
margin: 0;
}
body.start main {
display: flex;
justify-content: center;
padding: 40px 20px;
}
body.start form {
background-color: #DACDF2;
border-radius: 16px;
padding: 30px 25px;
max-width: 500px;
width: 100%;
margin: 0 auto;
text-align: center;
}
body.start #logo {
max-width: 260px;
margin-bottom: 10px;
display: inline-block;
}
body.start .section-title {
font-size: 1.5rem;
font-weight: bold;
color: #0A1128;
text-align: center;
margin: 6px 0 10px 0;
}
body.start .container {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 15px;
}
body.start .lbl {
width: 180px;
text-align: right;
margin-right: 10px;
font-weight: bold;
color: #0A1128;
}
body.start input[type="text"],
body.start textarea,
body.start select {
width: 220px;
padding: 8px;
border-radius: 6px;
border: 2px solid #0A1128;
}
body.start .office-display {
width: 260px;
text-align: left;
font-weight: bold;
color: #0A1128;
}
body.start .button-row {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 15px;
}
body.start .clsButton,
body.start .clsReceipt {
padding: 12px 20px;
border-radius: 8px;
border: none;
transition: background-color 0.2s ease, transform 0.1s ease;
width: 160px;
text-align: center;
}
body.start .clsButton {
background-color: #0A1128;
color: #fff;
}
body.start .clsReceipt {
background-color: #EFE745;
color: #000;
}
body.start .clsButton:hover {
background-color: #5E4BCB;
color: #FFFFFF;
cursor: pointer;
}
body.start .clsReceipt:hover {
background-color: #0A1128;
color: #FFFFFF;
}
body.start .clsButton:active,
body.start .clsReceipt:active {
transform: scale(0.98);
}
body.start .clsButton:focus,
body.start .clsButton:focus-visible,
body.start .clsReceipt:focus,
body.start .clsReceipt:focus-visible {
outline: 3px solid #EFE745;
outline-offset: 2px;
}
body.start input:focus,
body.start select:focus,
body.start textarea:focus {
outline: 3px solid #775ED3;
outline-offset: 2px;
}
body.start .disclaimer {
font-size: 0.9rem;
margin-top: 10px;
color: #0A1128;
}
body.start .logo-container {
text-align: center;
margin-bottom: 20px;
}

/* ===== Shared ===== */
.help-text {
font-size: 0.85rem;
color: #0A1128;
margin-top: 4px;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
}

/* ===== GetInfo ===== */
body.getinfo {
background-color: #F7F2F9;
font-family: Arial, sans-serif;
margin: 0;
}
.getinfo main {
display: flex;
justify-content: center;
padding: 20px 16px;
}
.getinfo .card {
width: 100%;
max-width: 900px;
background-color: #DACDF2;
border-radius: 12px;
padding: 24px 28px;
}
.getinfo .header-bar {
display: grid;
grid-template-columns: 30% 40% 30%;
align-items: center;
min-height: 120px;
margin-bottom: 5px;
}
.getinfo .header-left { justify-self: start; }
.getinfo .header-right { justify-self: end; }
.getinfo .header-center {
text-align: center;
font-weight: 700;
color: #0A1128;
font-size: 1.6rem;
letter-spacing: 0.5px;
justify-self: center;
}
.getinfo .header-left img,
.getinfo .header-right img {
display: block;
height: auto;
max-width: 100%;
}
.getinfo .header-left img { max-height: 100px; }
.getinfo .header-right img { max-height: 125px; max-width: 125px; }

.getinfo .form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.getinfo .container {
display: grid;
grid-template-columns: 130px 1fr;
align-items: center;
gap: 6px;
}
.getinfo .container.empty { visibility: hidden; }

.getinfo input[type="text"],
.getinfo input[type="email"],
.getinfo input[type="tel"] {
width: 100%;
padding: 10px;
border-radius: 8px;
border: 1px solid #0A1128;
box-sizing: border-box;
}
.getinfo input[readonly] { background-color: #EFEFEF; }

.getinfo .action-row {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 10px;
flex-wrap: wrap;
}
.getinfo .clsButton {
background-color: #0A1128;
color: #F7F2F9;
padding: 14px 22px;
border-radius: 10px;
border: none;
cursor: pointer;
}
.getinfo .acknowledgement {
margin-top: 25px;
padding-top: 15px;
border-top: 1px solid rgba(10,17,40,0.2);
font-size: 0.85rem;
color: #0A1128;
}

/* ===== Error / Validation ===== */
.getinfo .error-summary {
max-width: 350px;
margin: 0 auto;
background-color: #FFF5F5;
border: 2px solid #B00020;
color: #B00020;
padding: 10px 12px;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
line-height: 1.4;
}
.getinfo .error-summary ul { margin: 0; padding-left: 18px; }
.getinfo .error-summary li { margin-bottom: 6px; }
.getinfo .error-summary:focus {
outline: 3px solid #B00020;
outline-offset: 2px;
}
.getinfo input[aria-invalid="true"] {
border: 2px solid #B00020;
background-color: #FFF5F5;
}

/* ===== Mobile Rules ===== */
@media (max-width: 700px) {
.getinfo .form-grid { grid-template-columns: 1fr; }
.getinfo .container { grid-template-columns: 1fr; }
.getinfo label { margin-bottom: 4px; }
.getinfo .container.empty { display: none; }
}

@media (max-width: 600px) {

/* Start Page */
body.start .container {
flex-direction: column;
align-items: stretch;
}
body.start .lbl {
width: 100%;
text-align: left;
margin-bottom: 4px;
}
body.start input,
body.start textarea,
body.start select {
width: 100%;
max-width: 220px;
}
body.start .office-display { width: 100%; }
body.start .button-row { flex-direction: column; }
body.start .clsButton,
body.start .clsReceipt {
display: block;
width: 100%;
box-sizing: border-box;
padding: 12px 20px;
font-size: 0.95rem;
text-align: center;
}

/* GetInfo Page */
.getinfo .header-bar {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.getinfo .header-left,
.getinfo .header-center,
.getinfo .header-right {
width: 100%;
justify-self: unset;
}
.getinfo .card {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 16px 12px;
overflow-x: hidden;
}
.getinfo .container {
grid-template-columns: 1fr;
width: 100%;
}
.getinfo label {
width: 80%;
margin: 0 auto 4px auto;
}
.getinfo input[type="text"],
.getinfo input[type="email"],
.getinfo input[type="tel"],
.getinfo #ccnumber,
.getinfo #ccexp,
.getinfo #cvv {
width: 100%;
max-width: 260px;
margin: 0 auto;
box-sizing: border-box;
}
.getinfo .g-recaptcha {
transform: scale(0.9);
transform-origin: center;
}
}