:root{
    --primary:#1572b6; /* similar to MediNest blue */
    --accent:#1abc9c;
    --muted:#6c757d;
    --bg:#f8f9fa;
    font-family: 'Poppins', sans-serif;
}

/* Base */
body{
    background:var(--bg);
    color:#222;
    font-family: 'Poppins', sans-serif;
}

/* Navbar brand image */
.navbar-brand img{
    height:44px;
    width:auto;
}

/* Hero */
.hero{
    background: linear-gradient(rgba(21,114,182,0.03), rgba(21,114,182,0.02));
    padding:90px 0;
}
.hero .lead{
    max-width:720px;
    margin:auto;
}

/* Services */
.service-card{
    border:0;
    border-radius:12px;
    box-shadow:0 8px 30px rgba(0,0,0,0.06);
}

/* ═══════════════════════════════════════════════════
   Chat Support Agent Widget
   ═══════════════════════════════════════════════════ */
.chat-fab{
    position:fixed;
    right:20px;
    bottom:20px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:linear-gradient(135deg,#0A6ABF,#0d8bf2);
    color:#fff;
    border:none;
    font-size:24px;
    cursor:pointer;
    box-shadow:0 6px 20px rgba(10,106,191,.35);
    z-index:1001;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .2s ease, box-shadow .2s ease;
}
.chat-fab:hover{
    transform:scale(1.08);
    box-shadow:0 8px 28px rgba(10,106,191,.45);
}
.chat-fab .open-icon,
.chat-fab .close-icon{ position:absolute; transition:opacity .2s, transform .2s; }
.chat-fab .close-icon{ opacity:0; transform:rotate(-90deg); }
.chat-fab.active .open-icon{ opacity:0; transform:rotate(90deg); }
.chat-fab.active .close-icon{ opacity:1; transform:rotate(0deg); }

/* Chat window */
.chat-window{
    position:fixed;
    right:20px;
    bottom:82px;
    width:340px;
    max-height:560px;
    background:#fff;
    border-radius:16px;
    box-shadow:0 12px 48px rgba(0,0,0,.18);
    z-index:1000;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    opacity:0;
    transform:translateY(20px) scale(.95);
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
}
.chat-window.open{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

/* Header */
.chat-header{
    background:linear-gradient(135deg,#0A6ABF,#0d8bf2);
    color:#fff;
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:10px;
}
.chat-header-avatar{
    width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2);
    display:flex; align-items:center; justify-content:center; font-size:18px;
}
.chat-header-info{ flex:1; }
.chat-header-info .name{ font-weight:600; font-size:.92rem; }
.chat-header-info .status{ font-size:.72rem; opacity:.8; }

/* Messages area */
.chat-messages{
    flex:1 1 auto;
    overflow-y:auto;
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:10px;
    background:#f7f9fc;
    min-height:200px;
    max-height:320px;
}
.chat-bubble{
    max-width:88%;
    padding:10px 14px;
    border-radius:14px;
    font-size:.84rem;
    line-height:1.5;
    word-wrap:break-word;
}
.chat-bubble.bot{
    align-self:flex-start;
    background:#fff;
    color:#222;
    border:1px solid #e8edf2;
    border-bottom-left-radius:4px;
}
.chat-bubble.user{
    align-self:flex-end;
    background:linear-gradient(135deg,#0A6ABF,#0d8bf2);
    color:#fff;
    border-bottom-right-radius:4px;
}

/* Quick-reply buttons */
.chat-quick-replies{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:0 14px 12px;
    background:#f7f9fc;
}
.chat-quick-btn{
    padding:6px 12px;
    border-radius:20px;
    border:1.5px solid #0A6ABF;
    background:#fff;
    color:#0A6ABF;
    font-size:.78rem;
    font-weight:600;
    cursor:pointer;
    transition:all .15s ease;
    white-space:nowrap;
}
.chat-quick-btn:hover{
    background:#0A6ABF;
    color:#fff;
}

/* WhatsApp CTA inside chat */
.chat-wa-btn{
    display:inline-block;
    margin-top:8px;
    padding:8px 16px;
    background:#25D366;
    color:#fff;
    border-radius:20px;
    text-decoration:none;
    font-size:.82rem;
    font-weight:600;
    transition:background .15s;
}
.chat-wa-btn:hover{ background:#1da851; color:#fff; }

/* Typing indicator */
.chat-typing{
    display:flex;
    gap:4px;
    padding:10px 14px;
    align-self:flex-start;
}
.chat-typing span{
    width:8px; height:8px; border-radius:50%; background:#b0bec5;
    animation: typingDot 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2){ animation-delay:.2s; }
.chat-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes typingDot{
    0%,80%,100%{ transform:scale(.6); opacity:.4; }
    40%{ transform:scale(1); opacity:1; }
}

/* Chat text input area */
.chat-input-area{
    display:flex;
    align-items:center;
    gap:6px;
    padding:10px 12px;
    border-top:1px solid #e8edf2;
    background:#fff;
    border-radius:0 0 16px 16px;
}
.chat-input{
    flex:1;
    border:1.5px solid #dce3ec;
    border-radius:20px;
    padding:8px 14px;
    font-size:.84rem;
    outline:none;
    font-family:inherit;
    transition:border-color .15s;
}
.chat-input:focus{
    border-color:#0A6ABF;
    box-shadow:0 0 0 3px rgba(10,106,191,.1);
}
.chat-input::placeholder{ color:#a0aec0; }
.chat-send-btn{
    width:36px;
    height:36px;
    border-radius:50%;
    border:none;
    background:linear-gradient(135deg,#0A6ABF,#0d8bf2);
    color:#fff;
    font-size:16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:transform .15s, box-shadow .15s;
}
.chat-send-btn:hover{
    transform:scale(1.08);
    box-shadow:0 4px 12px rgba(10,106,191,.3);
}

/* Mobile responsiveness */
@media (max-width:400px){
    .chat-window{ right:8px; left:8px; width:auto; bottom:76px; }
    .chat-fab{ right:12px; bottom:14px; }
}

/* Footer */
footer{
    background:#0b5a86;
    color:#fff;
    padding:28px 0;
}

/* Responsive */
@media (max-width:575px){
    .hero{padding:56px 0}
}

/* Small utilities */
.text-muted { color: #6c757d !important; }

/* Card images (blog) */
.card-img-top { object-fit: cover; height: 200px; }

.emergency-contact {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--surface-color), transparent 50%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.emergency-contact .emergency-icon {
  width: 50px;
  height: 50px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* Blinking cycle: stay visible for 10s, then blink for 1s (cycle = 11s) */
@keyframes blinkCycle {
    /* visible for ~10s (90.909% of 11s) */
    0%, 90.909% { opacity: 1; }
    /* blink sequence during final ~1s */
    92.727% { opacity: 0; }
    94.545% { opacity: 1; }
    96.364% { opacity: 0; }
    98.182% { opacity: 1; }
    100% { opacity: 1; }
}

.phone-blink i, .phone-blink a, .phone-blink a strong {
    /* cycle: 10s visible + 1s blinking = 11s total */
    animation: blinkCycle 11s infinite linear;
}

/* Emergency contact box (aligned to image width) */
.emergency-box {
    max-width: 360px; /* matches image max-width */
    width: 100%;
    margin: 0 auto;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    text-align: center;
}
.emergency-box h5 {
    margin: 0 0 8px;
    font-size: 1rem;
    /* reduce text opacity to 50% */
    color: rgba(17,24,39,0.5);
}
.emergency-box .contact-row { gap: 0.5rem; }
.emergency-box .bi { font-size: 1.5rem; color: var(--primary); }
.emergency-box .number { font-size: 1.125rem; font-weight: 700; font-family: 'Poppins', sans-serif; color: #111; }

/* Slot buttons styling to match MediNest look */
.slot-btn{
    border-radius: 8px;
    padding: 6px 10px;
    min-width: 84px;
}
.slot-item{ display:flex; flex-direction:column; align-items:center; min-width:120px; }
/* Address hover reveal: show only the area by default, reveal full address_line1 on hover or focus */
.slot-address{ position:relative; cursor:default; outline:none; }
.slot-address .area{ color: var(--muted); }
.slot-address .address-line1{ display:none; color: #495057; margin-top:4px; transition:opacity .18s ease-in-out; opacity:0; }
.slot-address:hover .address-line1, .slot-address:focus-within .address-line1, .slot-address:focus { display:block; opacity:1; }
.slot-address:focus { box-shadow: 0 0 0 3px rgba(21,114,182,0.12); border-radius:6px; }

/* Slot card layout: compact horizontal card for time + address */
.slot-card{ background:#fff; border-radius:8px; border:1px solid rgba(0,0,0,0.06); display:flex; gap:12px; align-items:center; min-width:180px; }
.slot-card .me-3{ flex:0 0 auto; }
.slot-card .slot-btn{ white-space:nowrap; }
.slot-item{ display:inline-block; }
@media (max-width:575px){
    .slot-card{ flex-direction:row; gap:10px; }
}
.card .card-body { padding: 1rem 1rem; }
@media (min-width: 768px) {
    .card[style] { max-width: 540px; }
}

/* Appointments styling */
#my-appointments { background: linear-gradient(180deg, #f4fbff 0%, #ffffff 60%); padding: 2.5rem 0; }
.appointment-card {
    /* Darker, richer background for stronger visual weight */
    background: linear-gradient(180deg, #e6f3fb 0%, #d7ecf9 100%);
    border: 1px solid rgba(16,115,199,0.14);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(8,50,90,0.08);
    transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
}
.appointment-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 30px 60px rgba(8,50,90,0.16);
}

@keyframes floatGentle {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}
.appointment-card .card-body { animation: floatGentle 6s ease-in-out infinite; }

.appointment-card .card-title { color: var(--primary); font-weight:600; }

/* Small frame around the appointments section */
.appointments-frame { border: 1px solid rgba(0,0,0,0.04); padding: 18px; border-radius: 14px; background: rgba(255,255,255,0.6); }