/* Premium Connect Page Styles - Glassmorphism, gradients, branded colors */
:root{
  --navy:#0b2545;
  --gold:#d4af37;
  --maroon:#7a1f1f;
  --white:#ffffff;
  --glass-bg: rgba(255,255,255,0.08);
  --card-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.12);
}

/* Base */
.connect-body{
  background: linear-gradient(180deg, #fbfcff 0%, #f7f9fc 50%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: var(--navy);
  -webkit-font-smoothing:antialiased;
}
.container{max-width:1100px}

/* Header */
.connect-header{background:transparent}
.connect-logo{width:64px;height:64px;object-fit:contain;border-radius:10px;box-shadow:0 6px 18px rgba(11,37,69,0.12)}
.connect-title{font-weight:800;font-size:1.05rem;margin:0;color:var(--navy)}
.connect-subtitle{color:var(--maroon);font-weight:600}
.connect-kicker{font-weight:700;color:var(--gold);margin-top:6px}
.connect-desc{color:#445569;margin-bottom:0}
.connect-subtitle-2{color:#324a63;font-weight:600;margin-top:6px;margin-bottom:6px}

/* Main card */
.connect-card{
  background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.35));
  border-radius:18px;
  border:1px solid var(--glass-border);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 8px 30px rgba(11,37,69,0.06);
}
/*
.principal-photo-wrap{
  width:160px;
  height:160px;
  border-radius:50%;
  padding:6px;
  background:linear-gradient(135deg,rgba(212,175,55,0.12),rgba(122,31,31,0.06));
} */

.principal-photo-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.principal-photo{
    width:180px;
    height:180px;
    border-radius:50%;
    overflow:hidden;
    border:6px solid #fff;
    box-shadow:0 15px 40px rgba(0,0,0,.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.principal-photo:hover{
    transform: scale(1.03);
    box-shadow: 0 18px 40px rgba(0,0,0,0.22);
}

.principal-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.principal-info h3{font-size:1.05rem;margin-bottom:4px}

/* Actions grid */
.actions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.action-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;border-radius:14px;color:#fff;text-decoration:none;transition:transform .28s ease, box-shadow .28s ease;position:relative;overflow:hidden}
.action-btn .action-icon{font-size:1.6rem;width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;transition:transform .36s cubic-bezier(.2,.9,.2,1)}
.action-btn .action-label{font-weight:700}

/* Individual button styles (gradients) */
.action-btn{background:linear-gradient(135deg, #dc3545, rgb(183 2 2 / 71%));box-shadow:0 8px 20px rgba(11,37,69,0.06);border:1px solid rgba(255,255,255,0.04)}
.action-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg, rgba(255,255,255,0.03), rgba(255,255,255,0));opacity:0;transition:opacity .45s}
.action-btn:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(11,37,69,0.12)}
.action-btn:hover .action-icon{transform:translateY(-6px) rotate(-8deg)}
.action-btn:focus{outline:none;}

/* Specific color accents */
.action-btn.whatsapp{background:linear-gradient(135deg,#25D366,#128C7E)}
.action-btn.email{background:linear-gradient(135deg,#6f7aff,#4a4df9)}
.action-btn.website{background:linear-gradient(135deg,#00c6ff,#0072ff)}
.action-btn.directions{background:linear-gradient(135deg,#ff9b2e,#ff6d4d)}
.action-btn.save-contact{background:linear-gradient(135deg,var(--maroon),#b22a2a)}
.action-btn .action-icon i{font-size:1.3rem}

/* QR section and premium cards */
.qr-section{background:transparent;padding:6px}
.qr-section > .text-center h4{font-weight:800}

.qr-cards{align-items:stretch}
.qr-card{
  background: linear-gradient(135deg, rgba(255,255,255,0.65), rgba(255,255,255,0.28));
  border-radius:16px;
  padding:20px 18px;
  border:2px solid transparent;
  border-image-slice:1;
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 12px 30px rgba(11,37,69,0.08);
  position:relative;
  overflow:hidden;
  transition:transform .28s ease, box-shadow .28s ease, filter .28s ease;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-align:center;
  z-index:0;
}

.qr-card.accent-blue{border-image-source: linear-gradient(135deg,#00c6ff,#0072ff)}
.qr-card.accent-maroon{border-image-source: linear-gradient(135deg,var(--maroon),var(--gold))}

.qr-card-head h5{font-size:1rem;margin:0;font-weight:700;color:var(--navy)}
.qr-figure{min-height:200px}
.qr-image{width:180px;height:180px;object-fit:cover;border-radius:12px;border:8px solid rgba(255,255,255,0.06);box-shadow:0 12px 30px rgba(11,37,69,0.06);transition:transform .36s ease,box-shadow .36s ease}

.qr-card-body p{color:var(--navy);font-weight:600;margin-bottom:0}

.qr-badge{display:inline-block;padding:8px 14px;border-radius:999px;font-weight:700;background:rgba(255,255,255,0.06);box-shadow:inset 0 -2px 8px rgba(0,0,0,0.06);color:var(--navy)}
.qr-badge.offline{background:linear-gradient(135deg,#e6f6ff,#d0f0ff);color:#03445a}
.qr-badge.online{background:linear-gradient(135deg,#fff1e6,#fde6d1);color:#6b2416}

.qr-card:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(11,37,69,0.16);filter:saturate(1.03)}
.qr-card:hover .qr-image{transform:scale(1.06);box-shadow:0 20px 50px rgba(11,37,69,0.14)}

/* Subtle border glow on hover using box-shadow accent */
.qr-card.accent-blue:hover{box-shadow:0 24px 70px rgba(0,118,255,0.12)}
.qr-card.accent-maroon:hover{box-shadow:0 24px 70px rgba(186,90,49,0.12)}

/* Ensure equal height in grid */
.qr-cards .col-12, .qr-cards .col-md-6{display:flex}
.qr-cards .col-12 > .qr-card, .qr-cards .col-md-6 > .qr-card{width:100%}

/* Responsive: smaller QR images on small screens */
@media (max-width: 991px){
  .qr-figure{min-height:180px}
  .qr-image{width:150px;height:150px}
}
@media (max-width: 575px){
  .qr-figure{min-height:140px}
  .qr-image{width:120px;height:120px}
}

/* keep legacy placeholder rule for fallback images */
.qr-placeholder img{width:140px;height:140px;object-fit:cover;border-radius:8px;border:6px solid rgba(255,255,255,0.06)}

/* Map */
.map-wrap{border-radius:16px;overflow:hidden;border:1px solid rgba(11,37,69,0.06);box-shadow:0 12px 30px rgba(11,37,69,0.08)}
.map-wrap iframe{width:100%;height:320px;border:0}

/* Visit Our Campus compact card */
.visit-campus-card{
  max-width:920px;
  margin:0 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.75));
  border-radius:14px;
  padding:22px;
  border:2px solid rgba(212,175,55,0.16); /* gold accent border */
  box-shadow:0 14px 40px rgba(11,37,69,0.08);
  transition:transform .28s ease,box-shadow .28s ease;
}
.visit-campus-card:hover{transform:translateY(-6px);box-shadow:0 28px 70px rgba(11,37,69,0.12)}
.visit-campus-card h4{margin-bottom:8px}
.visit-campus-card p{color:#556775;margin-bottom:12px}

/* Emergency contacts */
.emergency-grid{align-items:stretch}
.emergency-card{
  background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.42));
  border-radius:14px;
  padding:18px;
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 10px 28px rgba(11,37,69,0.06);
  transition:transform .28s ease,box-shadow .28s ease;
}
.emergency-card:hover{transform:translateY(-8px);box-shadow:0 22px 60px rgba(11,37,69,0.12)}
.emergency-card h5{margin-bottom:6px;font-weight:800}
.emergency-card p{color:#556775;margin-bottom:0}

.emergency-icon{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff;box-shadow:0 10px 30px rgba(11,37,69,0.08);transition:transform .36s ease}
.emergency-card:hover .emergency-icon{transform:rotate(6deg) scale(1.04)}

.bg-gradient-primary{background:linear-gradient(135deg,#00c6ff,#0072ff)}
.bg-gradient-gold{background:linear-gradient(135deg,var(--gold),#ffd966);color:var(--navy)}

.emergency-card .btn{min-width:110px}

/* Button ripple-ish effect */
.emergency-card .btn:active{transform:translateY(1px);opacity:0.95}

/* Responsive tweaks */
@media (max-width: 991px){
  .emergency-icon{width:72px;height:72px;font-size:1.4rem}
}
@media (max-width: 575px){
  .visit-campus-card{padding:16px}
  .emergency-icon{width:64px;height:64px;font-size:1.1rem}
}

/* Info cards */
.info-card{background:linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.18));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 8px 18px rgba(11,37,69,0.06);font-weight:700;color:var(--navy)}

/* Stats */
.stat-card{background:linear-gradient(180deg,#fff,#fbfdff);padding:16px;border-radius:12px;box-shadow:0 8px 20px rgba(11,37,69,0.06)}
.stat-value{font-size:1.5rem;font-weight:800;color:var(--maroon)}
.stat-label{font-size:0.85rem;color:#556775}

/* Footer */
.connect-footer{background:transparent;color:#324a63}
.footer-logo{width:84px;height:auto}
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,0.7),#fff);color:var(--navy);box-shadow:0 8px 20px rgba(11,37,69,0.06)}

/* Floating School Connect Button */
.floating-btn{
  position: fixed;
  right: 18px;
  bottom: 22px;
  background: linear-gradient(135deg, #7b2cbf 0%, #d63384 55%, #ff6b35 100%);
  color: white;
  border: none;
  padding: 14px 24px;   /* Increased horizontal padding */
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 16px 40px rgba(11,37,69,0.12);
  z-index: 1200;

  width: 180px;         /* Instead of 12% */
  height: 60px;         /* Instead of 8% */

  white-space: nowrap;  /* Prevents "School" and "Connect" from breaking */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal */
.connect-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:99999}
.connect-modal.show{display:flex}
.connect-modal-backdrop{position:absolute;inset:0;background:rgba(11,37,69,0.45);backdrop-filter:blur(6px);z-index:99998}
.connect-modal-dialog{position:relative;z-index:2;width:min(560px,92%);background:linear-gradient(180deg,rgba(255,255,255,0.95),#fff);border-radius:14px;box-shadow:0 22px 50px rgba(11,37,69,0.18); z-index:100000}
.modal-close{
    position:absolute;
    top:15px;
    right:15px;
    width:38px;
    height:38px;
    border:none;
    border-radius:50%;
    background:#fff;
    color:#333;
    font-size:22px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
    z-index:100001;
    transition:all .25s ease;
}

.modal-close:hover{
    background:#dc3545;
    color:#fff;
    transform:rotate(90deg);
}

.modal-photo{width:76px;height:76px;border-radius:12px;background:linear-gradient(180deg,#fff,#f3f6ff);box-shadow:0 8px 20px rgba(11,37,69,0.08)}
.modal-photo img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}

/* Explore button in modal */
.modal-explore-btn{
  background: linear-gradient(90deg,#7b61ff,#ff6fb5,#ff9a3c);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:14px 18px;
  font-weight:800;
  box-shadow:0 12px 34px rgba(123,97,255,0.12);
  transition:transform .22s ease,box-shadow .22s ease,opacity .12s;
}
.modal-explore-btn:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(255,111,181,0.12)}
.modal-explore-btn:active{transform:translateY(-2px) scale(.995);opacity:.98}
.modal-explore-btn:focus{outline:3px solid rgba(123,97,255,0.14);outline-offset:2px}

.modal-photo{
    width:130px;
    height:130px;
    border-radius:50%;
    overflow:hidden;
    margin:0 auto;
    border:4px solid #fff;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    flex-shrink:0;
}

.modal-photo-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Responsive rules */
@media (max-width: 991px){
  .actions-grid{grid-template-columns:repeat(2,1fr)}
  .principal-photo-wrap{width:140px;height:140px}
}
@media (max-width: 575px){
  .actions-grid{grid-template-columns:1fr}
  .container{padding-left:14px;padding-right:14px}
  .principal-photo-wrap{width:120px;height:120px}
  .principal-photo{width:100px;height:100px}
  .connect-title{font-size:0.95rem}
}

/* Subtle floating icons animation and shine */
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.action-btn .action-icon{animation:floaty 6s ease-in-out infinite}
.action-btn::after{content:"";position:absolute;inset:-20%;background:linear-gradient(120deg,rgba(255,255,255,0.18),rgba(255,255,255,0));transform:rotate(25deg);opacity:0;transition:opacity .6s}
.action-btn:hover::after{opacity:1}

/* small utilities */
.text-muted{color:#6a7b8f}