/* Frontora AI Meet - Dark Theme v2 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif!important;background:#0a0b0f!important}
a{color:#00D4AA!important;text-decoration:none!important}
a:hover{color:#00eebb!important}
.dashboard-section{background:linear-gradient(160deg,#0a0b0f,#0d1520 30%,#0f1a2e 50%,#0d1520 70%,#0a0b0f)!important;min-height:100vh;position:relative}
.dashboard-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(rgba(0,212,170,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,170,.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:-1}
.dashboard-section>*{position:relative;z-index:1}
.left-center{background:transparent!important;width:100%!important;max-width:100%!important;flex:0 0 100%!important;text-align:center!important;padding:40px 20px 10px!important;display:flex;align-items:center;justify-content:center;float:none!important}
.right-center{background:transparent!important;width:100%!important;max-width:100%!important;flex:0 0 100%!important;display:flex;align-items:center;justify-content:center;float:none!important;padding:10px 20px 60px!important}
.left-center .site-detail{color:#e0e0e0!important;text-align:center!important;max-width:700px;margin:0 auto}
.left-center .site-detail h1,.left-center .site-detail h2,.left-center .site-detail h3{color:#fff!important;font-weight:800!important}
.left-center .site-detail p{color:#9ca3af!important;font-size:16px!important;line-height:1.7!important}
.entering-info{background:rgba(17,24,39,.6)!important;border:1px solid rgba(0,212,170,.12)!important;border-radius:20px!important;padding:40px!important;box-shadow:0 20px 60px rgba(0,0,0,.4)!important;backdrop-filter:blur(10px);max-width:480px;width:100%}
#conferenceId{background:#1a2332!important;border:1px solid rgba(0,212,170,.25)!important;border-radius:12px 0 0 12px!important;color:#fff!important;padding:18px 20px!important;font-size:16px!important;height:58px!important}
#conferenceId:focus{border-color:#00D4AA!important;box-shadow:0 0 0 3px rgba(0,212,170,.12)!important}
.form-control-placeholder{color:#6b7a8d!important}
.input-group{flex-wrap:nowrap!important}
#initiate{background:#00D4AA!important;border:none!important;border-radius:0 12px 12px 0!important;color:#0a0b0f!important;font-weight:700!important;padding:18px 24px!important;height:58px!important}
#initiate:hover{background:#00eebb!important}
.entering-info a{color:#00D4AA!important;font-weight:500!important;font-size:15px!important}
.navbar,.nav-bg,nav{background:rgba(10,11,15,.9)!important;border-bottom:1px solid rgba(0,212,170,.08)!important;backdrop-filter:blur(12px)}
.navbar .nav-link,.navbar a,nav a{color:#e0e0e0!important;font-weight:500!important}
.navbar .nav-link:hover,.navbar a:hover,nav a:hover{color:#00D4AA!important}
.page-section{background:#0f1319!important;color:#e0e0e0!important}
.page-section.theme-bg{background:linear-gradient(135deg,#00D4AA,#009977)!important}
.page-section.lighBg{background:#111827!important}
.main-title{color:#fff!important;font-weight:700!important}
.start-btn{background:#00D4AA!important;color:#0a0b0f!important;border-radius:50px!important;padding:16px 44px!important;font-weight:700!important;border:none!important;text-transform:uppercase;letter-spacing:1px}
.start-btn:hover{background:#00eebb!important;color:#0a0b0f!important}
.feature-box,.card{background:#1a2332!important;border:1px solid rgba(0,212,170,.08)!important;border-radius:16px!important;color:#e0e0e0!important;transition:all .3s ease!important}
.feature-box:hover,.card:hover{border-color:rgba(0,212,170,.25)!important;transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.3)!important}
.feature-box h3,.card-title{color:#fff!important}
.feature-box p,.card-text{color:#9ca3af!important}
.feature-box .icon,.feature-icon,.feature-box i{color:#00D4AA!important}
footer,.footer{background:#050507!important;color:#6b7280!important;border-top:1px solid rgba(0,212,170,.06)!important;padding:24px 0!important}
footer a,.footer a{color:#4a9e8c!important}
footer a:hover,.footer a:hover{color:#00D4AA!important}
footer .row,.footer .row{justify-content:center!important;text-align:center!important}
footer .col-md-6,footer .col-sm-6,footer .col-lg-6{flex:0 0 100%!important;max-width:100%!important;text-align:center!important}
footer .text-right,footer .text-end{text-align:center!important}
footer .share-friends,footer [class*="share"],.footer .share-friends,.share-with{display:none!important}
.accordion-item,.faq-item{background:#1a2332!important;border-color:rgba(0,212,170,.08)!important;border-radius:12px!important;margin-bottom:10px!important}
.accordion-button,.faq-question{background:#1a2332!important;color:#fff!important}
.accordion-body,.faq-answer{color:#9ca3af!important}
.rating-section i{color:#D4A843!important}
.meeting-section{background:#0a0b0f!important}
.cookie-consent{background:#111827!important;border-top:1px solid rgba(0,212,170,.08)!important}
.btn-outline-secondary{background:transparent!important;border:2px solid #00D4AA!important;color:#00D4AA!important;border-radius:12px!important;padding:14px 32px!important;font-weight:600!important}
.btn-outline-secondary:hover{background:#00D4AA!important;color:#0a0b0f!important}
@media(max-width:768px){.entering-info{padding:30px 24px!important;margin:0 16px}.left-center{padding:30px 16px 10px!important}}
.entering-info a[href*="login"],.entering-info a[href*="host"],.entering-info>a{display:none!important}


/* ====================================================================
   FRONTORA RECEPTIONIST — CLEAN BUILD
   ==================================================================== */

/* ------------------------------------------------------------------
   1. GLOBAL: Dark theme for all pages
   ------------------------------------------------------------------ */
body {
  background-color: rgb(10, 11, 15) !important;
  color: #ffffff !important;
}

/* Grid background — covers entire page */
body::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background:
    linear-gradient(rgba(0,212,170,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,170,0.03) 1px, transparent 1px) !important;
  background-size: 60px 60px !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Navbar: transparent everywhere */
.application-header,
.navbar {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  z-index: 1030 !important;
}
.nav-link,
.navbar-nav .nav-link {
  color: #ffffff !important;
}

/* Hamburger: white */
.navbar-toggler {
  border-color: rgba(255,255,255,0.3) !important;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.navbar-collapse {
  background: rgba(10,11,15,0.95) !important;
  border-radius: 8px !important;
  padding: 10px !important;
}

/* Dropdown menus */
.dropdown-menu {
  z-index: 9999 !important;
  background: rgba(15, 17, 24, 0.98) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
}
.navbar .dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item,
.dropdown-menu a {
  color: #ffffff !important;
  background: transparent !important;
}
.dropdown-menu .dropdown-item:hover {
  color: rgb(0, 212, 170) !important;
  background: rgba(255,255,255,0.05) !important;
}

/* Main: NO stacking context so modals work */
main {
  position: relative !important;
  z-index: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Modals */
.modal {
  z-index: 1050 !important;
}
.modal-backdrop {
  z-index: 1040 !important;
}
.modal-content {
  background: rgb(20, 22, 30) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
}
.modal-header {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.modal-header .close,
.modal-header .btn-close {
  color: #ffffff !important;
  opacity: 0.8 !important;
  filter: invert(1) !important;
}
.modal-body {
  color: #ffffff !important;
}
.modal-body input,
.modal-body .form-control {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
}
.modal-footer {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* Footer: both .application-footer and .app-footer */
.application-footer,
.app-footer,
footer.app-footer {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding: 10px 0 !important;
  position: relative !important;
  z-index: 1 !important;
}
.application-footer .row,
.app-footer .row {
  justify-content: center !important;
}
.application-footer .col-12.col-md-9,
.app-footer .col-12.col-md-9 {
  text-align: center !important;
}
.application-footer .col-12.col-md-3,
.app-footer .col-12.col-md-3 {
  display: none !important;
}
.footer-links a,
.application-footer a,
.app-footer a {
  color: #ffffff !important;
}
.application-footer,
.application-footer p,
.application-footer span,
.application-footer .col-12,
.app-footer,
.app-footer p,
.app-footer span,
.app-footer .col-12 {
  color: rgba(255,255,255,0.6) !important;
}
.social-data,
.social-links,
.social-data * {
  display: none !important;
}


/* ------------------------------------------------------------------
   2. HOMEPAGE
   ------------------------------------------------------------------ */

/* No scroll on homepage */
body:has(.dashboard-section) {
  overflow: hidden !important;
  height: 100vh !important;
  max-height: 100vh !important;
}

/* Hide homepage grid overlay (using body::before instead) */
.dashboard-section::before {
  display: none !important;
}

/* Hide nav logo on homepage */
.navbar-brand img {
  display: none !important;
}
.navbar-brand {
  visibility: hidden !important;
  width: 0 !important;
  overflow: hidden !important;
}

.dashboard-section {
  position: relative !important;
  display: block !important;
  height: calc(100vh - 150px) !important;
  min-height: auto !important;
  padding: 20px 8% !important;
  margin-top: 0 !important;
  background: transparent !important;
}

.left-center {
  position: static !important;
  width: 50% !important;
  height: auto !important;
  background: transparent !important;
  background-image: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.site-detail {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  text-align: left !important;
  width: 100% !important;
}
.site-detail h1,
.site-detail p,
.site-detail span,
.site-detail * {
  text-align: left !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.right-center {
  position: absolute !important;
  left: 58% !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30% !important;
  max-width: 380px !important;
  height: auto !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.entering-info {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  padding: 20px !important;
}


/* ------------------------------------------------------------------
   3. LOGIN PAGE
   ------------------------------------------------------------------ */
section.auth-section {
  background: transparent !important;
  min-height: calc(100vh - 100px) !important;
  position: relative !important;
  z-index: 1 !important;
}
.auth-section .auth-container {
  max-width: 850px !important;
}
.auth-section .main-authsection {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
}

/* Left side */
.auth-section .auth-container .main-authsection .table-display .col-12.col-md-6.auth-text-section,
.auth-text-section.col-md-6 {
  background: linear-gradient(135deg, rgba(0,212,170,0.06), rgba(10,11,15,0.95)) !important;
  background-color: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
}
.auth-section .table-display,
.auth-section .main-authsection .table-display {
  display: flex !important;
}
.auth-text-section .text-center::before {
  content: "" !important;
  display: block !important;
  width: 200px !important;
  height: 70px !important;
  background: url("/storage/images/PRIMARY_LOGO.png") no-repeat center / contain !important;
  margin: 0 auto 25px auto !important;
}
section.auth-section .auth-text-section .text-center::before {
  content: "" !important;
  display: block !important;
  width: 200px !important;
  height: 70px !important;
  background: url("/storage/images/PRIMARY_LOGO.png") no-repeat center / contain !important;
  margin: 0 auto 25px auto !important;
}
.auth-text-section h3.white-text {
  color: #ffffff !important;
  font-size: 1.5rem !important;
  font-weight: 300 !important;
}
.bg-set {
  display: none !important;
}

/* Right side */
.col-12.col-md-6.auth-enterdata.h-100 {
  background: rgba(15, 17, 24, 0.95) !important;
}
.auth-section .card.auth-info {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.auth-section .card-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.auth-section .card-header,
.auth-section .card-header * {
  color: #ffffff !important;
}
.auth-section .card-body {
  background: transparent !important;
}
.auth-section .form-control {
  background-color: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}
.auth-section .form-control:focus {
  border-color: rgba(0,212,170,0.5) !important;
  box-shadow: 0 0 0 3px rgba(0,212,170,0.1) !important;
}
.auth-section .form-control:-webkit-autofill,
.auth-section .form-control:-webkit-autofill:hover,
.auth-section .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px rgb(15, 17, 24) inset !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.auth-section label,
.auth-section .form-check-label {
  color: rgba(255,255,255,0.7) !important;
}
.auth-section .btn-primary {
  background: rgb(0, 212, 170) !important;
  border-color: rgb(0, 212, 170) !important;
  color: #000 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 10px 35px !important;
}
.auth-section .btn-primary:hover {
  background: rgb(0, 190, 150) !important;
}
.auth-section .btn-link,
.auth-section a {
  color: rgb(0, 212, 170) !important;
}
.auth-section .form-check-input {
  background-color: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.2) !important;
}


/* ------------------------------------------------------------------
   4. PROFILE PAGE
   ------------------------------------------------------------------ */

/* Hide tabs */
.nav-tabs a.nav-link[href*="/profile/plan"],
.nav-tabs a.nav-link[href*="/profile/payments"],
.nav-tabs a.nav-link[href*="/profile/api"],
.nav-tabs a.nav-link[href*="/profile/contact"],
.nav-tabs a.nav-link[href*="/profile/tfa"] {
  display: none !important;
}

/* Profile nav-tabs styling */
.nav-tabs,
.nav.flex-column.nav-tabs {
  border: none !important;
  background: transparent !important;
}
.nav-tabs .nav-link {
  background: transparent !important;
  color: rgba(255,255,255,0.7) !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  padding: 10px 15px !important;
}
.nav-tabs .nav-link.active {
  background: rgba(0,212,170,0.1) !important;
  color: #ffffff !important;
  border-left: 3px solid rgb(0,212,170) !important;
}
.nav-tabs .nav-link:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #ffffff !important;
}

/* Profile forms — scoped to profile URLs only via parent */
.tab-content .card,
.tab-content .card-body,
.tab-content .card-header {
  background: transparent !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}
.tab-content .form-control {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
}
.tab-content .form-control:focus {
  border-color: rgba(0,212,170,0.5) !important;
  box-shadow: 0 0 0 3px rgba(0,212,170,0.1) !important;
}
.tab-content label {
  color: rgba(255,255,255,0.8) !important;
}


/* ------------------------------------------------------------------
   5. MOBILE
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  body:has(.dashboard-section) {
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
  }
  .dashboard-section {
    height: auto !important;
    min-height: calc(100vh - 160px) !important;
    padding: 20px 5% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .left-center {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  .site-detail,
  .site-detail h1,
  .site-detail p,
  .site-detail * {
    text-align: center !important;
  }
  .site-detail img {
    margin: 0 auto !important;
    display: block !important;
  }
  .right-center {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 90% !important;
    max-width: 350px !important;
    margin: 20px auto 0 !important;
  }
  /* Login mobile */
  .auth-text-section {
    border-radius: 16px 16px 0 0 !important;
    padding: 30px 20px !important;
    min-height: auto !important;
    height: auto !important;
  }
  .col-12.col-md-6.auth-enterdata.h-100 {
    border-radius: 0 0 16px 16px !important;
    height: auto !important;
  }
  .auth-section .main-authsection,
  .auth-section .main-authsection .row {
    height: auto !important;
  }
  .application-footer,
  .app-footer {
    padding: 15px 10px !important;
  }
  .footer-links {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 !important;
  }
}

@media (max-width: 480px) {
  .site-detail h1 {
    font-size: 1.6rem !important;
  }
  .site-detail p {
    font-size: 0.85rem !important;
  }
}

/* === Select/dropdown in modals === */
.modal select,
.modal select.form-control,
.modal .form-control option,
.modal select option {
  background: rgb(20, 22, 30) !important;
  color: #ffffff !important;
}
.modal textarea,
.modal textarea.form-control {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
}

/* ====================================================================
   FRONTORA RECEPTIONIST — CLEAN BUILD
   ==================================================================== */

/* ------------------------------------------------------------------
   1. GLOBAL: Dark theme for all pages
   ------------------------------------------------------------------ */
body {
  background-color: rgb(10, 11, 15) !important;
  color: #ffffff !important;
}

/* Grid background — covers entire page */
body::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background:
    linear-gradient(rgba(0,212,170,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,170,0.03) 1px, transparent 1px) !important;
  background-size: 60px 60px !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Navbar: transparent everywhere */
.application-header,
.navbar {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  z-index: 1030 !important;
}
.nav-link,
.navbar-nav .nav-link {
  color: #ffffff !important;
}

/* Hamburger: white */
.navbar-toggler {
  border-color: rgba(255,255,255,0.3) !important;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.navbar-collapse {
  background: rgba(10,11,15,0.95) !important;
  border-radius: 8px !important;
  padding: 10px !important;
}

/* Dropdown menus */
.dropdown-menu {
  z-index: 9999 !important;
  background: rgba(15, 17, 24, 0.98) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
}
.navbar .dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item,
.dropdown-menu a {
  color: #ffffff !important;
  background: transparent !important;
}
.dropdown-menu .dropdown-item:hover {
  color: rgb(0, 212, 170) !important;
  background: rgba(255,255,255,0.05) !important;
}

/* Main: NO stacking context so modals work */
main {
  position: relative !important;
  z-index: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Modals */
.modal {
  z-index: 1050 !important;
}
.modal-backdrop {
  z-index: 1040 !important;
}
.modal-content {
  background: rgb(20, 22, 30) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
}
.modal-header {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.modal-header .close,
.modal-header .btn-close {
  color: #ffffff !important;
  opacity: 0.8 !important;
  filter: invert(1) !important;
}
.modal-body {
  color: #ffffff !important;
}
.modal-body input,
.modal-body .form-control {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
}
.modal-footer {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* Footer: both .application-footer and .app-footer */
.application-footer,
.app-footer,
footer.app-footer {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding: 10px 0 !important;
  position: relative !important;
  z-index: 1 !important;
}
.application-footer .row,
.app-footer .row {
  justify-content: center !important;
}
.application-footer .col-12.col-md-9,
.app-footer .col-12.col-md-9 {
  text-align: center !important;
}
.application-footer .col-12.col-md-3,
.app-footer .col-12.col-md-3 {
  display: none !important;
}
.footer-links a,
.application-footer a,
.app-footer a {
  color: #ffffff !important;
}
.application-footer,
.application-footer p,
.application-footer span,
.application-footer .col-12,
.app-footer,
.app-footer p,
.app-footer span,
.app-footer .col-12 {
  color: rgba(255,255,255,0.6) !important;
}
.social-data,
.social-links,
.social-data * {
  display: none !important;
}


/* ------------------------------------------------------------------
   2. HOMEPAGE
   ------------------------------------------------------------------ */

/* No scroll on homepage */
body:has(.dashboard-section) {
  overflow: hidden !important;
  height: 100vh !important;
  max-height: 100vh !important;
}

/* Hide homepage grid overlay (using body::before instead) */
.dashboard-section::before {
  display: none !important;
}

/* Hide nav logo on homepage */
.navbar-brand img {
  display: none !important;
}
.navbar-brand {
  visibility: hidden !important;
  width: 0 !important;
  overflow: hidden !important;
}

.dashboard-section {
  position: relative !important;
  display: block !important;
  height: calc(100vh - 150px) !important;
  min-height: auto !important;
  padding: 20px 8% !important;
  margin-top: 0 !important;
  background: transparent !important;
}

.left-center {
  position: static !important;
  width: 50% !important;
  height: auto !important;
  background: transparent !important;
  background-image: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.site-detail {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  text-align: left !important;
  width: 100% !important;
}
.site-detail h1,
.site-detail p,
.site-detail span,
.site-detail * {
  text-align: left !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.right-center {
  position: absolute !important;
  left: 58% !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30% !important;
  max-width: 380px !important;
  height: auto !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.entering-info {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  padding: 20px !important;
}


/* ------------------------------------------------------------------
   3. LOGIN PAGE
   ------------------------------------------------------------------ */
section.auth-section {
  background: transparent !important;
  min-height: calc(100vh - 100px) !important;
  position: relative !important;
  z-index: 1 !important;
}
.auth-section .auth-container {
  max-width: 850px !important;
}
.auth-section .main-authsection {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
}

/* Left side */
.auth-section .auth-container .main-authsection .table-display .col-12.col-md-6.auth-text-section,
.auth-text-section.col-md-6 {
  background: linear-gradient(135deg, rgba(0,212,170,0.06), rgba(10,11,15,0.95)) !important;
  background-color: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
}
.auth-section .table-display,
.auth-section .main-authsection .table-display {
  display: flex !important;
}
.auth-text-section .text-center::before {
  content: "" !important;
  display: block !important;
  width: 200px !important;
  height: 70px !important;
  background: url("/storage/images/PRIMARY_LOGO.png") no-repeat center / contain !important;
  margin: 0 auto 25px auto !important;
}
section.auth-section .auth-text-section .text-center::before {
  content: "" !important;
  display: block !important;
  width: 200px !important;
  height: 70px !important;
  background: url("/storage/images/PRIMARY_LOGO.png") no-repeat center / contain !important;
  margin: 0 auto 25px auto !important;
}
.auth-text-section h3.white-text {
  color: #ffffff !important;
  font-size: 1.5rem !important;
  font-weight: 300 !important;
}
.bg-set {
  display: none !important;
}

/* Right side */
.col-12.col-md-6.auth-enterdata.h-100 {
  background: rgba(15, 17, 24, 0.95) !important;
}
.auth-section .card.auth-info {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.auth-section .card-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.auth-section .card-header,
.auth-section .card-header * {
  color: #ffffff !important;
}
.auth-section .card-body {
  background: transparent !important;
}
.auth-section .form-control {
  background-color: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}
.auth-section .form-control:focus {
  border-color: rgba(0,212,170,0.5) !important;
  box-shadow: 0 0 0 3px rgba(0,212,170,0.1) !important;
}
.auth-section .form-control:-webkit-autofill,
.auth-section .form-control:-webkit-autofill:hover,
.auth-section .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px rgb(15, 17, 24) inset !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.auth-section label,
.auth-section .form-check-label {
  color: rgba(255,255,255,0.7) !important;
}
.auth-section .btn-primary {
  background: rgb(0, 212, 170) !important;
  border-color: rgb(0, 212, 170) !important;
  color: #000 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 10px 35px !important;
}
.auth-section .btn-primary:hover {
  background: rgb(0, 190, 150) !important;
}
.auth-section .btn-link,
.auth-section a {
  color: rgb(0, 212, 170) !important;
}
.auth-section .form-check-input {
  background-color: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.2) !important;
}


/* ------------------------------------------------------------------
   4. PROFILE PAGE
   ------------------------------------------------------------------ */

/* Hide tabs */
.nav-tabs a.nav-link[href*="/profile/plan"],
.nav-tabs a.nav-link[href*="/profile/payments"],
.nav-tabs a.nav-link[href*="/profile/api"],
.nav-tabs a.nav-link[href*="/profile/contact"],
.nav-tabs a.nav-link[href*="/profile/tfa"] {
  display: none !important;
}

/* Profile nav-tabs styling */
.nav-tabs,
.nav.flex-column.nav-tabs {
  border: none !important;
  background: transparent !important;
}
.nav-tabs .nav-link {
  background: transparent !important;
  color: rgba(255,255,255,0.7) !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  padding: 10px 15px !important;
}
.nav-tabs .nav-link.active {
  background: rgba(0,212,170,0.1) !important;
  color: #ffffff !important;
  border-left: 3px solid rgb(0,212,170) !important;
}
.nav-tabs .nav-link:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #ffffff !important;
}

/* Profile forms — scoped to profile URLs only via parent */
.tab-content .card,
.tab-content .card-body,
.tab-content .card-header {
  background: transparent !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}
.tab-content .form-control {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
}
.tab-content .form-control:focus {
  border-color: rgba(0,212,170,0.5) !important;
  box-shadow: 0 0 0 3px rgba(0,212,170,0.1) !important;
}
.tab-content label {
  color: rgba(255,255,255,0.8) !important;
}


/* ------------------------------------------------------------------
   5. MOBILE
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  body:has(.dashboard-section) {
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
  }
  .dashboard-section {
    height: auto !important;
    min-height: calc(100vh - 160px) !important;
    padding: 20px 5% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .left-center {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  .site-detail,
  .site-detail h1,
  .site-detail p,
  .site-detail * {
    text-align: center !important;
  }
  .site-detail img {
    margin: 0 auto !important;
    display: block !important;
  }
  .right-center {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 90% !important;
    max-width: 350px !important;
    margin: 20px auto 0 !important;
  }
  /* Login mobile */
  .auth-text-section {
    border-radius: 16px 16px 0 0 !important;
    padding: 30px 20px !important;
    min-height: auto !important;
    height: auto !important;
  }
  .col-12.col-md-6.auth-enterdata.h-100 {
    border-radius: 0 0 16px 16px !important;
    height: auto !important;
  }
  .auth-section .main-authsection,
  .auth-section .main-authsection .row {
    height: auto !important;
  }
  .application-footer,
  .app-footer {
    padding: 15px 10px !important;
  }
  .footer-links {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 !important;
  }
}

@media (max-width: 480px) {
  .site-detail h1 {
    font-size: 1.6rem !important;
  }
  .site-detail p {
    font-size: 0.85rem !important;
  }
}


/* === Public pages — match frontora.ai style === */

/* Remove card box, make it seamless */
.text-justify .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}
.text-justify .card-header {
  background: transparent !important;
  border: none !important;
  padding: 40px 0 10px !important;
}
.text-justify .card-header h4,
.text-justify .card-header .mb-0 {
  font-size: 2rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-align: left !important;
}
.text-justify .card-body {
  padding: 10px 0 40px !important;
}

/* Section headings: teal, smaller */
.text-justify .card-body h2,
.text-justify .card-body h3,
.text-justify .card-body h4 {
  color: rgb(0, 212, 170) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  margin-top: 35px !important;
  margin-bottom: 12px !important;
  border: none !important;
  padding: 0 !important;
}

/* Body text: soft gray */
.text-justify .card-body p,
.text-justify .card-body span,
.text-justify .card-body {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.95rem !important;
  line-height: 1.8 !important;
}

/* Links */
.text-justify .card-body a {
  color: rgb(0, 212, 170) !important;
}


/* === All public pages — frontora.ai style === */
.text-justify .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 40px 20px !important;
}
.text-justify .card-header {
  background: transparent !important;
  border: none !important;
  padding: 20px 0 10px !important;
  text-align: left !important;
}
.text-justify .card-header h4,
.text-justify .card-header .mb-0 {
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-align: left !important;
}
.text-justify .card-body {
  padding: 10px 0 40px !important;
  text-align: left !important;
}
.text-justify .card-body h2,
.text-justify .card-body h3,
.text-justify .card-body h4 {
  color: rgb(0, 212, 170) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin-top: 30px !important;
  margin-bottom: 10px !important;
  border: none !important;
  padding: 0 !important;
}
.text-justify .card-body p {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.92rem !important;
  line-height: 1.85 !important;
  margin-bottom: 18px !important;
  text-align: left !important;
}
.text-justify .card-body strong {
  color: rgba(255,255,255,0.85) !important;
}
.text-justify .card-body a {
  color: rgb(0, 212, 170) !important;
}

/* === Page polish — bold callouts in teal === */
.text-justify .card-body strong {
  color: rgb(0, 212, 170) !important;
  font-weight: 600 !important;
}
.text-justify .card-body p:first-of-type {
  font-size: 1.05rem !important;
  color: rgba(255,255,255,0.75) !important;
}
.text-justify .card-header h4,
.text-justify .card-header .mb-0 {
  font-size: 1.6rem !important;
  letter-spacing: -0.5px !important;
}