@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Global ---------- */

html,
body,
button,
input,
select,
textarea {
  font-family: 'Vazirmatn', sans-serif !important;
}

body {
  background: #f5f8fc;
  color: #26384f;
}

/* ---------- Header ---------- */

.navbar {
  background: #fff !important;
  border-bottom: 1px solid #e7edf5;
  box-shadow: 0 2px 12px rgba(23, 55, 93, .035);
}

.navbar .small-logo {
  max-height: 40px !important;
  max-width: 175px !important;
  width: auto !important;
  object-fit: contain;
}

/* ---------- Main white areas ---------- */

.wide-white {
  background: #fff !important;
  border-bottom: 1px solid #e7edf5;
}

/* ---------- Cards ---------- */

.card:not(.spad-auth-card) {
  border: 1px solid #e4eaf2 !important;
  border-radius: 14px !important;
  box-shadow: 0 7px 24px rgba(26, 51, 84, .055) !important;
  overflow: hidden;
}

.card:not(.spad-auth-card):hover {
  border-color: #d8e2ef !important;
}

/* ---------- Buttons ---------- */

.btn-brand {
  background: #174f96 !important;
  border-color: #174f96 !important;
  color: #fff !important;
  border-radius: 9px !important;
  font-weight: 500;
  box-shadow: 0 5px 14px rgba(23, 79, 150, .12);
}

.btn-brand:hover,
.btn-brand:focus {
  background: #123f78 !important;
  border-color: #123f78 !important;
}

.btn-brand-outline,
.btn-brand-outline-color {
  color: #174f96 !important;
  background: #fff !important;
  border-color: #cad7e7 !important;
  border-radius: 9px !important;
}

.btn-brand-outline:hover,
.btn-brand-outline-color:hover {
  color: #fff !important;
  background: #174f96 !important;
  border-color: #174f96 !important;
}

/* ---------- Inputs ---------- */

.form-control,
.form-select {
  border: 1px solid #dce4ee !important;
  border-radius: 9px !important;
  background-color: #fff;
  box-shadow: none !important;
}

.form-control:focus,
.form-select:focus {
  border-color: #6f99c8 !important;
  box-shadow: 0 0 0 3px rgba(23, 79, 150, .075) !important;
}

/* ---------- Tabs ---------- */

.nav-tabs {
  border-bottom: 1px solid #e2e8f0 !important;
}

.nav-tabs .nav-link {
  color: #6d798b !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  padding-top: 12px;
  padding-bottom: 12px;
}

.nav-tabs .nav-link:hover {
  color: #174f96 !important;
}

.nav-tabs .nav-link.active {
  color: #174f96 !important;
  border-bottom-color: #174f96 !important;
  font-weight: 600;
}

/* ---------- Links ---------- */

.text-link,
a.text-link {
  color: #245f9f !important;
}

.text-link:hover,
a.text-link:hover {
  color: #123f78 !important;
}

/* ---------- Tables / recordings ---------- */

.table {
  background: #fff;
  color: #34445a;
}

.table > :not(caption) > * > * {
  border-bottom-color: #edf1f5;
  padding-top: 14px;
  padding-bottom: 14px;
}

.table-responsive {
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 14px;
  box-shadow: 0 7px 25px rgba(26, 51, 84, .04);
  overflow: hidden;
}

/* ---------- Labels / badges ---------- */

.badge {
  border-radius: 20px;
  font-weight: 500;
}

/* ---------- Guest Join Page ---------- */

.vertical-center {
  min-height: calc(100vh - 75px);
  padding: 45px 18px;
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(36, 91, 183, .075),
      transparent 28%
    ),
    radial-gradient(
      circle at 12% 85%,
      rgba(84, 121, 199, .055),
      transparent 30%
    ),
    #f5f8fc;
}

.vertical-center .card {
  border: 1px solid #e2e9f2 !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(30, 53, 88, .075) !important;
}

.vertical-center .logo-wrapper {
  height: auto !important;
  min-height: 62px;
}

.vertical-center .logo {
  position: static !important;
  width: auto !important;
  max-width: 180px !important;
  max-height: 68px !important;
  margin: 0 auto !important;
  display: block;
  object-fit: contain;
}

.vertical-center .form-label {
  color: #3f4f65;
  font-weight: 500;
  font-size: 13px;
}

.vertical-center .form-control {
  min-height: 45px;
}

.vertical-center .btn-brand {
  min-height: 44px;
}

/* ---------- RTL Persian UI ---------- */

.vertical-center,
.vertical-center .card {
  direction: rtl;
}

.vertical-center input[type="email"],
.vertical-center input[type="text"] {
  text-align: right;
}

/* Keep email/password input usable */

input[type="email"] {
  direction: ltr;
  text-align: left;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  .card:not(.spad-auth-card) {
    border-radius: 12px !important;
  }

  .vertical-center {
    padding: 25px 12px;
  }

  .navbar .small-logo {
    max-width: 140px !important;
  }
}