/* Modrá skrinka — brand theme on top of Bootstrap 5.
   Palette: primary #01A5E6, secondary #016d98, dark #011923, text #555,
   bg #fbfeff, tint #e7f8ff. Fonts: Montserrat (headings) + Inter (body). */

:root {
    --ms-primary: #01A5E6;
    --ms-primary-rgb: 1, 165, 230;
    --ms-secondary: #016d98;
    --ms-secondary-rgb: 1, 109, 152;
    --ms-primary-dark: #01597c;
    --ms-dark: #011923;
    --ms-dark-rgb: 1, 25, 35;
    --ms-text: #555555;
    --ms-bg: #fbfeff;
    --ms-tint: #e7f8ff;
    --ms-tint-strong: #cfeefb;
    --ms-success: #2fa36b;
    --ms-warning: #f5a524;
    --ms-danger: #e5484d;
    --ms-border: #e2edf3;

    /* Bootstrap variable overrides (theme without recompiling Sass) */
    --bs-primary: #01A5E6;
    --bs-primary-rgb: 1, 165, 230;
    --bs-link-color: #016d98;
    --bs-link-color-rgb: 1, 109, 152;
    --bs-link-hover-color: #01597c;
    --bs-link-hover-color-rgb: 1, 89, 124;
    --bs-body-color: #555555;
    --bs-body-color-rgb: 85, 85, 85;
    --bs-body-bg: #fbfeff;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-emphasis-color: #011923;
    --bs-heading-color: #011923;
    --bs-border-color: #e2edf3;
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-pill: 0;
}

/* Design choice: no rounded corners anywhere — sharp edges throughout. */
*, *::before, *::after { border-radius: 0 !important; }

body {
    font-family: var(--bs-body-font-family);
    color: var(--ms-text);
    background-color: var(--ms-bg);
}

/* Placeholders are much lighter than real text so the two are never confused. */
::placeholder { color: rgba(var(--ms-dark-rgb), 0.32) !important; opacity: 1 !important; }
.form-control::placeholder,
.form-select::placeholder,
input::placeholder,
textarea::placeholder { color: rgba(var(--ms-dark-rgb), 0.32) !important; opacity: 1 !important; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Montserrat', system-ui, sans-serif;
    color: var(--ms-dark);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    color: var(--ms-dark);
    letter-spacing: -0.02em;
}

/* ---- Buttons ---- */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: 0.6rem;
    --bs-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--ms-primary-rgb), 0.25);
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ms-primary);
    --bs-btn-border-color: var(--ms-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ms-secondary);
    --bs-btn-hover-border-color: var(--ms-secondary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ms-primary-dark);
    --bs-btn-active-border-color: var(--ms-primary-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #7fd0f2;
    --bs-btn-disabled-border-color: #7fd0f2;
}
.btn-outline-primary {
    --bs-btn-color: var(--ms-secondary);
    --bs-btn-border-color: var(--ms-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ms-primary);
    --bs-btn-hover-border-color: var(--ms-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ms-secondary);
    --bs-btn-active-border-color: var(--ms-secondary);
}
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ms-secondary);
    --bs-btn-border-color: var(--ms-secondary);
    --bs-btn-hover-bg: var(--ms-primary-dark);
    --bs-btn-hover-border-color: var(--ms-primary-dark);
    --bs-btn-active-bg: var(--ms-primary-dark);
}

/* ---- Forms ---- */
.form-control, .form-select {
    border-color: #d5e3ec;
    padding: 0.55rem 0.85rem;
}
.form-control:focus, .form-select:focus {
    border-color: #7fd0f2;
    box-shadow: 0 0 0 0.2rem rgba(var(--ms-primary-rgb), 0.18);
}
.form-check-input:checked {
    background-color: var(--ms-primary);
    border-color: var(--ms-primary);
}
.form-check-input:focus {
    border-color: #7fd0f2;
    box-shadow: 0 0 0 0.2rem rgba(var(--ms-primary-rgb), 0.18);
}
.form-label {
    font-weight: 500;
    color: var(--ms-dark);
    margin-bottom: 0.35rem;
}

/* ---- Brand helpers ---- */
.text-ms-primary { color: var(--ms-primary) !important; }
.text-ms-secondary { color: var(--ms-secondary) !important; }
.text-ms-dark { color: var(--ms-dark) !important; }
.bg-ms-dark { background-color: var(--ms-dark) !important; }
.bg-ms-tint { background-color: var(--ms-tint) !important; }
.bg-ms-bg { background-color: var(--ms-bg) !important; }
.border-ms { border-color: var(--ms-border) !important; }

.brand-wordmark {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--ms-dark);
    letter-spacing: -0.02em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.brand-wordmark:hover { color: var(--ms-dark); }
.brand-wordmark .brand-modra { color: var(--ms-primary); }
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.55rem;
    background: var(--ms-primary);
    color: #fff;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}
.brand-mark-img {
    width: 2.2rem;
    height: 2.2rem;
    object-fit: contain;
    display: inline-block;
}

/* ---- Cards ---- */
.card {
    --bs-card-border-color: var(--ms-border);
    --bs-card-border-radius: 0.9rem;
    --bs-card-cap-bg: #fff;
}

/* ---- Auth (guest) ---- */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    background-color: var(--ms-tint);
}
.auth-card {
    width: 100%;
    max-width: 430px;
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: 1.1rem;
    padding: 2.25rem;
    box-shadow: 0 18px 50px rgba(var(--ms-dark-rgb), 0.08);
}

/* ---- Public layout ---- */
.public-navbar {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--ms-border);
}
.public-hero {
    background: var(--ms-tint);
    border-bottom: 1px solid var(--ms-border);
}

/* ---- Hero (photo) ---- */
.hero-section {
    background: var(--ms-tint);
    border-bottom: 1px solid var(--ms-border);
    overflow: hidden;
}
.hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--ms-dark);
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid var(--ms-border);
    color: var(--ms-secondary);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 500;
}
.hero-badge .dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ms-primary);
}
.hero-trust span { white-space: nowrap; }
.hero-photo-wrap { position: relative; }
.hero-photo-frame {
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(var(--ms-dark-rgb), 0.14);
    aspect-ratio: 3 / 2;
}
.hero-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-float {
    position: absolute;
    left: -0.75rem;
    bottom: -1.1rem;
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: 1rem;
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    box-shadow: 0 14px 34px rgba(var(--ms-dark-rgb), 0.12);
}
@media (max-width: 575.98px) {
    .hero-float { left: 0.5rem; bottom: 0.5rem; padding: 0.55rem 0.8rem; }
}

/* ---- Homepage sections ---- */
@media (min-width: 992px) {
    .py-lg-6 { padding-top: 7rem; padding-bottom: 7rem; }
}
.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ms-primary);
    margin-bottom: 0.5rem;
}
.section-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--ms-dark);
}
.section-photo-frame {
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(var(--ms-dark-rgb), 0.12);
    aspect-ratio: 3 / 2.1;
}
.section-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.check-item { position: relative; padding-left: 2rem; color: var(--ms-dark); }
.check-item::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--ms-primary);
    color: var(--ms-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
}

.feature-card {
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: 1rem;
    padding: 1.5rem;
    height: 100%;
}
.feature-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    background: var(--ms-tint);
    color: var(--ms-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.step-row { display: flex; gap: 1rem; align-items: flex-start; }
.step-num {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--ms-primary);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.testimonial-card {
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: 1rem;
    padding: 1.75rem;
    height: 100%;
}
.testimonial-quote {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 0.7;
    color: var(--ms-primary);
    opacity: 0.4;
}
.testimonial-avatar {
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--ms-tint);
    color: var(--ms-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.partners-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem 2.75rem;
}
.partner-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #a7bcc7;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: color 0.15s ease;
}
.partner-logo:hover { color: var(--ms-secondary); }

.pdf-band {
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: 1.25rem;
    padding: 1.75rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.pdf-band-icon {
    flex: none;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: var(--ms-tint);
    color: var(--ms-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cta-band {
    background: var(--ms-tint);
    border: 1px solid var(--ms-border);
    border-radius: 1.75rem;
    padding: 4rem 1.5rem;
}

/* ---- Decorative overlaps & shapes ---- */
html, body { overflow-x: hidden; }

/* overflow-x:hidden promotes <html> to the viewport scroll container, so
   Bootstrap's body-only `.modal-open` lock leaks and the background scrolls
   behind an open modal. app.js mirrors the lock onto <html>, padding by the
   scrollbar width it measured so hiding the scrollbar doesn't shift the page. */
html.modal-scroll-lock { overflow: hidden; padding-right: var(--ms-scrollbar-pad, 0px); }

.section-photo-wrap { position: relative; }
.section-photo-wrap .section-photo-frame { position: relative; z-index: 1; }
.accent-blob {
    position: absolute;
    width: 62%;
    height: 68%;
    background: var(--ms-tint-strong);
    border-radius: 2rem;
    z-index: 0;
}
.accent-blob.tr { top: -1.75rem; right: -1.75rem; }
.accent-blob.bl { bottom: -1.75rem; left: -1.75rem; }
.accent-dots {
    position: absolute;
    z-index: 0;
    width: 7rem;
    height: 7rem;
    background-image: radial-gradient(var(--ms-primary) 1.6px, transparent 1.6px);
    background-size: 1.1rem 1.1rem;
    opacity: 0.35;
}

.section-float {
    position: absolute;
    z-index: 2;
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: 1rem;
    padding: 0.95rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    box-shadow: 0 18px 42px rgba(var(--ms-dark-rgb), 0.16);
    max-width: 17.5rem;
}
.section-float.br { right: -1.25rem; bottom: -1.5rem; }
.section-float.bl { left: -1.25rem; bottom: -1.5rem; }
.section-float-icon {
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.75rem;
    background: var(--ms-tint);
    color: var(--ms-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.section-mark {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 0.75rem;
    display: block;
}

@media (max-width: 767.98px) {
    .section-float { position: static; margin-top: 1rem; max-width: none; box-shadow: none; }
    .accent-blob, .accent-dots { display: none; }
}
.public-footer {
    background: var(--ms-dark);
    color: #b8d6e6;
}
.public-footer a { color: #cfe6f2; text-decoration: none; }
.public-footer a:hover { color: #fff; }
.footer-copyright {
    background: rgba(0, 0, 0, 0.22);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #8fb6c9;
}

/* ---- App shell ---- */
.app-topbar {
    background: #fff;
    border-bottom: 1px solid var(--ms-border);
}
.app-main { background-color: var(--ms-bg); min-height: 100vh; }
.app-page-header { border-bottom: 1px solid var(--ms-border); background: #fff; }

/* Small utility */
.fw-medium { font-weight: 500 !important; }

/* Collapsible section chevron (client detail) */
.ms-collapse-chevron { transition: transform .15s ease; }
.collapsed .ms-collapse-chevron { transform: rotate(-90deg); }

/* Prominent "risks & allergies" block on the client detail */
.ms-alert-card { border-left: 4px solid var(--ms-danger); background: rgba(var(--ms-primary-rgb), 0.03); }

/* Emergency numbers (pictograms + tap-to-call) */
.emergency-num { transition: background-color .12s ease; }
.emergency-num:hover { background: var(--ms-tint); }