/* JAS Hospital - app styles */
:root {
  --jas-primary: #0b79bf;
  --jas-primary-dark: #07517f;
  --jas-accent: #0aa86b;
}
body { background: #f4f7fb; font-family: system-ui, "Segoe UI", Roboto, sans-serif; }
.bg-jas { background: var(--jas-primary) !important; }
.btn-jas { background: var(--jas-primary); border-color: var(--jas-primary); color: #fff; }
.btn-jas:hover, .btn-jas:focus { background: var(--jas-primary-dark); border-color: var(--jas-primary-dark); color: #fff; }
.text-jas { color: var(--jas-primary) !important; }

.hero {
  background: linear-gradient(135deg, #0b79bf 0%, #07517f 100%);
  color: #fff; border-radius: 1rem; padding: 3rem 2rem;
}
.hero .btn { border-radius: 2rem; padding: .6rem 1.6rem; }

.home-hero { position: relative; overflow: hidden; background: linear-gradient(120deg, #07517f 0%, #0b79bf 55%, #19a58a 100%); color: #fff; border-radius: 1.25rem; padding: clamp(2rem, 5vw, 4.5rem); box-shadow: 0 16px 40px rgba(7, 81, 127, .2); }
.home-hero:after { content: ''; position: absolute; width: 360px; height: 360px; border: 45px solid rgba(255,255,255,.08); border-radius: 50%; right: -120px; top: -130px; }
.home-hero > .row { position: relative; z-index: 1; }
.home-hero h1 span { color: #b9f2dc; }
.home-hero-tagline { color: #b9f2dc; font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; line-height: 1.15; }.home-hero-tagline span { color: #fff; }
.home-kicker, .eyebrow { color: #0a8b70; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.home-kicker { color: #b9f2dc; }
.home-trust-row { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .8rem; color: rgba(255,255,255,.86); }
.home-trust-row i { color: #b9f2dc; margin-right: .25rem; }
.booking-card { background: #fff; color: #1c2a38; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 14px 30px rgba(4, 42, 68, .2); }
.booking-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 15px; background: #e2f5ef; color: #098566; font-size: 1.4rem; margin-bottom: 1rem; }
.booking-card-note { color: #718096; font-size: .75rem; margin-top: 1rem; text-align: center; }
.feature-card { display: flex; align-items: flex-start; gap: 1rem; height: 100%; padding: 1.25rem; background: #fff; border-radius: .9rem; box-shadow: 0 2px 10px rgba(11, 60, 93, .07); }
.feature-card h5 { font-size: 1rem; margin: .15rem 0 .35rem; }
.feature-card p { color: #718096; font-size: .85rem; margin: 0; }
.feature-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; border-radius: 13px; font-size: 1.15rem; }
.feature-icon.blue { background: #e3f0fb; color: #0b79bf; }.feature-icon.green { background: #e0f7ec; color: #0a7a4d; }.feature-icon.orange { background: #fff0db; color: #bc6b00; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.section-heading h3 { color: #1c526e; font-weight: 800; margin: .2rem 0 0; }
.section-heading .eyebrow { color: #0a8b70; }
.doctor-card { overflow: hidden; position: relative; }
.doctor-card:before { content: ''; display: block; height: 5px; background: linear-gradient(90deg, #0b79bf, #0aa86b); }
.doctor-avatar { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: #e7f4fb; color: #0b79bf; font-size: 1.45rem; }
.department-chip { display: flex; align-items: center; gap: .5rem; min-height: 58px; padding: .75rem; background: #fff; border: 1px solid #e5edf3; border-radius: .75rem; color: #35566a; font-size: .85rem; font-weight: 600; box-shadow: 0 2px 8px rgba(11, 60, 93, .04); }
.department-chip i { color: #0aa86b; }
.how-it-works { background: #eaf6f5; border-radius: 1rem; padding: 2rem; }
.step-number { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #0b79bf; color: #fff; font-size: 1.1rem; font-weight: 800; margin-bottom: .75rem; }
.how-it-works h5 { color: #1c526e; }.how-it-works p { color: #617b88; font-size: .88rem; margin-bottom: 0; }
.gallery-showcase { background: #fff; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 3px 14px rgba(11, 60, 93, .06); }
.gallery-feature, .gallery-tile, .gallery-strip { position: relative; overflow: hidden; border-radius: .75rem; background: #dfeaf0; }
.gallery-feature { height: 100%; min-height: 360px; }
.gallery-feature img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.gallery-tile { height: 174px; }.gallery-tile img, .gallery-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gallery-tile img { height: 174px; }.gallery-strip { height: 145px; margin-top: .75rem; }.gallery-strip img { height: 145px; }
.gallery-feature:after, .gallery-tile:after, .gallery-strip:after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(5, 31, 49, .72)); pointer-events: none; }
.gallery-caption, .gallery-tile span, .gallery-strip span { position: absolute; z-index: 1; color: #fff; font-weight: 700; }
.gallery-caption { left: 1.25rem; right: 1.25rem; bottom: 1.1rem; display: flex; flex-direction: column; gap: .15rem; }.gallery-caption span { font-size: .8rem; font-weight: 400; opacity: .9; }
.gallery-tile span, .gallery-strip span { left: .8rem; bottom: .7rem; font-size: .82rem; }
.gallery-feature:hover img, .gallery-tile:hover img, .gallery-strip:hover img { transform: scale(1.06); }
.seo-intro { max-width: 900px; margin-left: auto; margin-right: auto; text-align: center; }.seo-intro h2 { color: #1c526e; font-weight: 800; margin: .35rem 0 .75rem; }.seo-intro p { color: #617b88; line-height: 1.75; margin: 0; }
.faq-section { background: #fff; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 3px 14px rgba(11, 60, 93, .06); }.faq-section .accordion-item { border-color: #e3edf2; }.faq-section .accordion-button { color: #1c526e; font-weight: 700; }.faq-section .accordion-button:not(.collapsed) { color: #0b79bf; background: #edf8fb; box-shadow: none; }.faq-section .accordion-body { color: #617b88; line-height: 1.7; }

.card { border: none; box-shadow: 0 2px 10px rgba(11, 60, 93, .08); border-radius: .8rem; }
.card-header-jas { background: #fff; border-bottom: 2px solid #eef3f8; font-weight: 700; color: var(--jas-primary); padding: 1rem 1.25rem; border-radius: .8rem .8rem 0 0 !important; }

.slot-btn { min-width: 86px; margin: .25rem; }
.slot-btn:disabled { text-decoration: line-through; opacity: .55; }

.token-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--jas-primary); color: #fff; font-weight: 700; font-size: 1.15rem;
}
.status-pill { font-size: .78rem; padding: .3em .7em; border-radius: 2rem; }
.st-booked { background: #e3f0fb; color: #0b79bf; }
.st-pending_payment { background: #fff4d6; color: #9a6b00; }
.st-checked_in { background: #fff4d6; color: #9a6b00; }
.st-in_consultation { background: #e0f7ec; color: #0a7a4d; }
.st-completed { background: #e7e9ee; color: #4a5468; }
.st-cancelled { background: #fde3e3; color: #b02a2a; }
.st-no_show { background: #f3e3fd; color: #7a2ab0; }

.queue-now {
  font-size: 4rem; font-weight: 800; color: var(--jas-accent); line-height: 1;
}
.board-card { border-radius: 1rem; }
.board-card .display-6 { font-weight: 700; }

.stat-card { text-align: center; padding: 1.2rem .5rem; }
.stat-card .num { font-size: 1.9rem; font-weight: 800; color: var(--jas-primary); }
.stat-card .lbl { color: #6b7a90; font-size: .85rem; }

.table > :not(caption) > * > * { vertical-align: middle; }
.required::after { content: " *"; color: #d33; }

@media print {
  nav, footer, .no-print { display: none !important; }
  main.container { width: 100%; max-width: 100%; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}