/* =========================================================================
   GLOBAL
   ========================================================================= */
:root{
  --primary-blue:#41a6fc;
  --primary-blue-dark:#3697e0;
  --dark-blue:#004080;
  --light-gray:#f8f8f8;
  --text-dark:#333;
}

*,
*::before,
*::after{box-sizing:border-box}

html,body{margin:0;padding:0;overflow-x:hidden;scroll-behavior:smooth}
body{
  font-family:'Lato',sans-serif;
  font-size:18px;
  line-height:1.6;
  background:#f0f0f0;
  color:var(--text-dark);
}

/* =========================================================================
   NAVBAR
   ========================================================================= */
nav{
  background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.08)
}
nav ul{list-style:none;margin:0;padding:0;text-align:center}
nav ul li{display:inline-block;margin:0 15px}
nav ul li a{
  color:var(--text-dark);
  font-weight:700;
  padding:8px 12px;
  transition:background .3s,transform .3s
}
nav ul li a:hover,
nav ul li a.active{
  background:rgba(0,64,128,.1);
  border-radius:4px;
  transform:scale(1.05)
}
.navbar-text.navbar-right{color:#666;margin-left:50px}

/* =========================================================================
   HERO (index.html)
   ========================================================================= */
header.hero{position:relative;height:80vh;overflow:hidden}
#hero-video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transition:opacity .5s ease;
  z-index:1;
  pointer-events: none;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,0,0,.6),rgba(0,64,128,.3));
  z-index:1
}
.hero-logo{position:absolute;top:60%;left:0;width:100%;text-align:center;z-index:2}
.hero-logo .container.hero-content{
  max-width:1200px;margin:0 auto;padding:0 20px;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center
}
.hero-logo img{width:480px;max-width:90%}
.support-btn{
  margin-top:20px;padding:12px 24px;
  background:var(--primary-blue);color:#fff;font-weight:700;
  border-radius:4px;text-decoration:none;
  transition:background .3s;box-shadow:0 4px 6px rgba(0,0,0,.1)
}
.support-btn:hover{background:var(--primary-blue-dark)}

/* =========================================================================
   FRONT‑PAGE SECTIONS
   ========================================================================= */
.container{max-width:1200px;margin:30px auto;padding:0 20px}
section{
  background:#fff;padding:30px;margin-bottom:30px;
  border-radius:5px;box-shadow:0 4px 8px rgba(0,0,0,.08);
  scroll-margin-top:120px
}
section h1,section h2{text-align:center;margin-bottom:20px}
.about_n,.service_n{color:var(--primary-blue)}

/* =========================================================================
   FOOTER
   ========================================================================= */
footer{
  background:var(--dark-blue);color:#fff;text-align:center;
  padding:20px;font-size:.9em
}
.container.rights{font-size:.9em;text-align:center;padding:10px 0}

/* =========================================================================
   BOOKING MODAL (index.html)
   ========================================================================= */
#bookingModal .modal-content{
  border-radius:8px;padding:20px;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.15)
}
#bookingModal .modal-title{font-weight:700;font-size:22px;color:var(--dark-blue)}
#bookingModal .btn-primary{
  background:var(--primary-blue);border:none;font-weight:700;
  box-shadow:0 4px 6px rgba(0,0,0,.1)
}
#bookingModal .btn-primary:hover{background:var(--primary-blue-dark)}

/* =========================================================================
   DASHBOARD
   ========================================================================= */
body.dashboard{background:#eee}

/*** Sidebar ***/
.sidebar{
  background:#fff;min-height:100vh;padding:0;border-right:1px solid #e5e5e5
}
.sidebar-logo{padding:25px 10px;margin-bottom:40px}
#dashboardTabs{margin-top:0}
#dashboardTabs>li>a,
#dashboardTabs>li>button{
  display:block;padding:10px 15px;color:var(--text-dark)
}
#dashboardTabs>li.active>a,
#dashboardTabs>li>a:hover{
  background:var(--primary-blue);color:#fff;border-radius:4px
}

/*** Main column ***/
main.main{
  padding:30px;background:#eee;min-height:100vh
}
.tab-pane{padding:0}            /* kill bootstrap’s default 15 px */
.dashboard-header{margin-bottom:25px}
.dashboard-header h2{
  margin:0;font-weight:700;color:var(--text-dark);font-size:28px
}

/* cards */
.dashboard-card,
.dashboard-empty,
.dashboard-action{
  background:#fff;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.05);
  padding:25px
}

/* centred empty‑state msg */
.dashboard-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center
}

/* bookings list item */
#bookings-list ul.list-group{margin:0}
#bookings-list li.list-group-item{
  display:flex;align-items:center;justify-content:space-between
}

/* profile always at top */
#profile .dashboard-header{margin-bottom:10px}
#profile .dashboard-card{margin-top:0}

/* =========================================================================
   MODAL CENTRING (index + dashboard)
   ========================================================================= */
.modal-dialog{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  margin:0;width:90%;max-width:550px
}

/* Center the auth modal on landing page */
#authModal .modal-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* Center the SMS code modal above the auth modal */
#mfaCodeModal .modal-dialog,
#mfaModal .modal-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 90%;
  max-width: 550px;
  z-index: 1060;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:768px){
  .sidebar{position:static;min-height:auto;width:100%}
  main.main{padding:15px}
  .sidebar-logo{margin:10px auto}
  #dashboardTabs{
    display:flex;flex-wrap:wrap;justify-content:center
  }
  #dashboardTabs li{margin:4px}
  .hero-logo{top:55%}
  .hero-logo img{width:180px}
  .support-btn{font-size:16px;padding:10px 20px}
  #hero-video{object-position:center center}
}

/* =========================================================================
   LOADING SPINNER
   ========================================================================= */
#loading-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 12px solid #f3f3f3;
  border-top: 12px solid #007bff;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 1s linear infinite;
  z-index: 1001;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* =========================================================================
   MFA & SMS Code Modal Centering
   ========================================================================= */
#mfaCodeModal .modal-dialog,
#mfaModal .modal-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: 90%;
  max-width: 550px;
  z-index: 1060;
}
/* Center cookieInfoModal modal-dialog exactly like auth modal */
#cookieInfoModal .modal-dialog {
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 auto;
  display: block;
  min-height: auto;
}