html, body { height: 100%; }
body { margin: 0; background: #f5f2ed; }

.topbar{ background: #0b1220 !important; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand{ font-weight: 800; letter-spacing: .2px; }
.brand-red{ color: #c50f0f; }
.brand-white{ color: #fff; opacity: .95; }
.navlinks .mud-button-root{ color: rgba(255,255,255,.9) !important; }
.navlinks .mud-button-root:hover{ background: rgba(255,255,255,.06) !important; }
.contact-btn{ border-radius: 14px !important; font-weight: 800 !important; }

.page-pad{ padding-top: 24px; padding-bottom: 24px; }

.hero-shell{ background: #f7f8fb; padding: 22px 0 16px; }
.hero-banner{ border-radius: 18px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.14); }
.hero-banner img{ display:block; width:100%; height:160px; object-fit:cover; object-position:center; }
@media (min-width: 600px){ .hero-banner img{ height:210px; } }
@media (min-width: 960px){ .hero-banner img{ height:260px; } }

.hero-grid{ margin-top: 18px; }
.hero-title{ font-weight: 900; letter-spacing: -0.6px; margin: 0; color: #0b1220; }
.brand-accent{ color: #c50f0f; }
.hero-subtitle{ margin-top: 10px; color: rgba(11,18,32,.78); }
.hero-actions{ margin-top: 16px; display:flex; flex-wrap:wrap; gap: 12px; }
.hero-actions .mud-button-root{ border-radius: 16px !important; font-weight: 800 !important; }
.hero-contactline{ margin-top: 14px; color: rgba(11,18,32,.72); }
.hero-contactline a{ color: inherit; text-decoration: underline; text-decoration-color: rgba(197,15,15,.35); text-underline-offset: 3px; }
.hero-dot{ margin: 0 8px; opacity: .6; }

.hero-checkcard{
  height: 100%;
  border-radius: 18px;
  padding: 22px;
  background: #0b1220;
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}
.hero-checkcard .check-muted{ color: rgba(255,255,255,.75); }
.checklist .mud-list-item{ padding-left: 0; }
.checklist .mud-icon-root{ color: rgba(255,255,255,.75); }

.home-dark{ background: #0b1220; padding: 28px 0 54px; }
.feature-card{
  border-radius: 18px;
  padding: 20px;
  background: #0f1a2c;
  border: 1px solid rgba(255,255,255,.06);
  display:flex;
  gap: 14px;
  align-items:flex-start;
  height: 100%;
}
.feature-photo{ width:56px; height:56px; border-radius:14px; object-fit:cover; flex:0 0 auto; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.feature-body{ min-width: 0; }
.text-muted-on-dark{ color: rgba(255,255,255,.72) !important; }

.panel-card{
  border-radius: 18px;
  padding: 22px;
  background: #0f1a2c;
  border: 1px solid rgba(255,255,255,.06);
}
.mini-card{
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.10) !important;
}

.service-card, .info-card, .gallery-card{
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(11,18,32,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.service-card{ padding: 16px; height: 100%; }
.service-photo{ width: 100%; height: 160px; object-fit: cover; border-radius: 14px; }
.info-card{ padding: 20px; }
.about-list{ margin: 0 0 12px 18px; }
.about-list li{ margin-bottom: 6px; }
.gallery-card{ overflow: hidden; }
.gallery-img{ display:block; width:100%; height: 220px; object-fit: cover; }

.map-placeholder{
  height: 280px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(11,18,32,.06), rgba(197,15,15,.08));
  display:flex; align-items:center; justify-content:center;
  color: rgba(11,18,32,.65);
  font-weight: 700;
}


/* Dark page wrappers (Contact/About) */
.contact-dark{ background:#0b1220; padding: 8px 0 54px; }
.text-on-dark{ color: rgba(255,255,255,.95) !important; }
.dark-card{
  border-radius: 18px;
  padding: 22px;
  background: #0f1a2c;
  border: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.dark-card .label{ color: rgba(255,255,255,.82); }
.dark-card .value{ color: rgba(255,255,255,.95); }
.divider-on-dark{ border-color: rgba(255,255,255,.10) !important; }

/* Hours table */
.hours-table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  color: rgba(255,255,255,.90);
}
.hours-table th, .hours-table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.hours-table th{
  text-align:left;
  color: rgba(255,255,255,.78);
  font-weight: 800;
}

/* Dark text fields */
.dark-field .mud-input-control{
  background: rgba(255,255,255,.03);
  border-radius: 14px;
}
.dark-field .mud-input-root,
.dark-field input,
.dark-field textarea{
  color: rgba(255,255,255,.95) !important;
}
.dark-field label{
  color: rgba(255,255,255,.75) !important;
}
.dark-field .mud-input-outlined-border{ border-color: rgba(255,255,255,.18) !important; }
.dark-field .mud-input-outlined-border:hover{ border-color: rgba(255,255,255,.28) !important; }


/* Quote form */
.quote-form .quote-error{ color: #ff6b6b; }
.quote-dialog .mud-dialog-content,
.quote-dialog.mud-dialog .mud-dialog-content{ padding: 20px !important; }

/* Make placeholders obvious on dark cards */
.dark-field input::placeholder,
.dark-field textarea::placeholder{
  color: rgba(255,255,255,.55) !important;
  opacity: 1;
}
.dark-field .mud-input-slot,
.dark-field .mud-input-root,
.dark-field .mud-input-control-input-container{
  background: transparent !important;
}

/* Prevent browser autofill white blocks on dark background */
.dark-field input:-webkit-autofill,
.dark-field textarea:-webkit-autofill{
  -webkit-text-fill-color: rgba(255,255,255,.95) !important;
  box-shadow: 0 0 0 1000px rgba(255,255,255,.03) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Quote dialog - dark theme so inputs are readable */
.quote-dialog.mud-dialog,
.quote-dialog .mud-dialog{
  background: #0f1a2c !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.45) !important;
}
.quote-dialog .mud-dialog-title,
.quote-dialog.mud-dialog .mud-dialog-title,
.quote-dialog .mud-typography,
.quote-dialog.mud-dialog .mud-typography{
  color: rgba(255,255,255,.92) !important;
}
.quote-dialog .mud-dialog-content,
.quote-dialog.mud-dialog .mud-dialog-content{
  background: transparent !important;
}
.quote-dialog .mud-dialog-actions,
.quote-dialog.mud-dialog .mud-dialog-actions{
  background: transparent !important;
}
.quote-dialog .mud-icon-button,
.quote-dialog.mud-dialog .mud-icon-button{
  color: rgba(255,255,255,.82) !important;
}
.quote-dialog ::selection{ background: rgba(197,15,15,.35); }

.heading-red{ color: #c50f0f !important; }

.site-footer{
  background: #0b1220;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
  padding: 28px 0;
  margin-top: 24px;
}
.site-footer .footer-title{ font-weight: 800; margin-bottom: 8px; }
.site-footer a{ color: rgba(255,255,255,.88); text-decoration: none; }
.site-footer a:hover{ text-decoration: underline; }
.site-footer .footer-muted{ color: rgba(255,255,255,.65); }
.site-footer .footer-bottom{ margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.10); font-size: 0.92rem; }
.map-embed {
    width: 100%;
    height: 340px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
}

@media (max-width: 960px) {
    .map-embed {
        height: 300px;
    }
}

.map-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* Blazor startup loader (shown before WASM boots) */
.app-loader {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    background: #f5f2ee; /* matches your light pages */
}

    .app-loader img {
        width: min(760px, 92vw); /* banner-like */
        max-height: 220px;
        object-fit: cover;
        border-radius: 18px;
        box-shadow: 0 18px 45px rgba(0,0,0,.18);
    }

.app-loader-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(10, 18, 33, .75); /* subtle navy */
    font-weight: 600;
    letter-spacing: .2px;
}

.app-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(10, 18, 33, .18);
    border-top-color: rgba(220, 38, 38, .9); /* red accent */
    animation: appSpin .85s linear infinite;
}

@keyframes appSpin {
    to {
        transform: rotate(360deg);
    }
}