/* CFT member area theme */
:root {
  --cft-ink: #17191d;
  --cft-muted: #5d636b;
  --cft-line: #dedede;
  --cft-paper: #ffffff;
  --cft-soft: #f6f6f4;
  --cft-yellow: #ffc400;
  --cft-yellow-dark: #e5aa00;
}

body {
  min-height: 100vh;
  background: var(--cft-paper);
  color: var(--cft-ink);
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

a {
  color: var(--cft-ink);
}

a:hover,
a:focus {
  color: var(--cft-yellow-dark);
}

.cft-member-navbar {
  min-height: 72px;
  margin-bottom: 2rem;
  background: #111;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}

.cft-member-navbar .container-fluid {
  max-width: 1320px;
}

.cft-member-navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: 0;
  color: #fff;
  font-size: .9rem;
  font-weight: 900;
  text-transform: uppercase;
}

.cft-member-navbar .navbar-brand img {
  width: 128px;
  max-width: 42vw;
  height: auto;
}

.cft-member-navbar .nav-link {
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cft-member-navbar .nav-link:hover,
.cft-member-navbar .nav-link:focus,
.cft-member-navbar .show > .nav-link {
  color: var(--cft-yellow);
}

.cft-member-navbar .dropdown-menu {
  border: 0;
  border-radius: 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
}

.cft-member-navbar .dropdown-item {
  font-size: .84rem;
  font-weight: 700;
}

.cft-member-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, .55);
}

.container > h2,
.container > h4 {
  font-weight: 900;
}

.container > h2 {
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.container > h4 {
  color: var(--cft-ink) !important;
  font-size: .88rem;
  text-transform: uppercase;
}

.card,
.modal-content {
  border: 1px solid var(--cft-line);
  border-radius: 0;
  box-shadow: none !important;
}

.card {
  color: var(--cft-ink);
  background: #fff;
}

.card-title {
  font-weight: 900;
}

.card-header.bg-primary {
  border-color: #111;
  background: #111 !important;
}

.card small,
.text-muted {
  color: var(--cft-muted) !important;
}

.form-control,
.form-select {
  min-height: 42px;
  border-color: var(--cft-line);
  border-radius: 0;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--cft-yellow);
  box-shadow: 0 0 0 .25rem rgba(255, 196, 0, .25);
}

.form-check-input {
  border: 2px solid var(--cft-muted);
  border-radius: 0;
}

.form-check-input:checked {
  border-color: var(--cft-yellow);
  background-color: var(--cft-yellow);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 42px;
  border-radius: 0;
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.btn-sm {
  min-height: 34px;
  padding: .5rem .75rem;
  font-size: .72rem;
}

.btn-primary,
.btn-warning,
.btn-success {
  border-color: var(--cft-yellow);
  background: var(--cft-yellow);
  color: var(--cft-ink);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-warning:hover,
.btn-warning:focus,
.btn-success:hover,
.btn-success:focus {
  border-color: var(--cft-yellow-dark);
  background: var(--cft-yellow-dark);
  color: var(--cft-ink);
}

.btn-secondary,
.btn-info,
.btn-outline-primary,
.btn-outline-secondary {
  border-color: var(--cft-ink);
  background: transparent;
  color: var(--cft-ink);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-info:hover,
.btn-info:focus {
  border-color: var(--cft-ink);
  background: var(--cft-ink);
  color: #fff;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  border-color: var(--cft-ink);
  background: var(--cft-ink);
  color: #fff;
}

.btn-danger {
  border-color: #b3261e;
  background: #b3261e;
  color: #fff;
}

.btn-danger:hover,
.btn-danger:focus {
  border-color: #8f1e18;
  background: #8f1e18;
  color: #fff;
}

.badge {
  border-radius: 0;
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.badge.bg-success,
.badge.bg-warning,
.badge.bg-info {
  background: var(--cft-yellow) !important;
  color: var(--cft-ink);
}

.badge.bg-secondary {
  background: var(--cft-ink) !important;
}

.alert {
  border-radius: 0;
}

.alert-info,
.alert-success,
.alert-warning {
  border-color: var(--cft-line);
  background: var(--cft-soft);
  color: var(--cft-ink);
}

.text-primary,
.text-info {
  color: var(--cft-ink) !important;
}

.rounded {
  border-radius: 0 !important;
}

.table {
  --bs-table-striped-bg: var(--cft-soft);
  border-color: var(--cft-line);
}

.gallery-container {
  padding: 20px;
}

.gallery-container .card img {
  height: 250px;
  object-fit: cover;
}

.square-image-container {
  position: relative !important;
  width: 100% !important;
  padding-top: 100% !important;
  overflow: hidden !important;
}

.square-image-container img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.corner-overlay {
  position: relative;
  overflow: hidden;
}

.corner-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 0;
  height: 0;
  border-top: 50px solid #fff;
  border-right: 50px solid transparent;
}

.corner-overlay::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 11;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23ffc400' class='bi bi-check-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.97 11.03a.75.75 0 0 0 1.08.02l3.992-4.093a.75.75 0 0 0-1.08-1.04L7.5 9.482 5.52 7.5a.75.75 0 1 0-1.06 1.06z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}

.login-panel {
  max-width: 420px;
  margin-top: 16vh;
}

.login-logo {
  max-height: 150px;
}

.member-area-link {
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
}

@media (max-width: 991.98px) {
  .cft-member-navbar .navbar-collapse {
    padding: 1rem 0;
  }

  .cft-member-navbar .nav-link {
    padding: .65rem 0;
  }
}

@media (max-width: 575.98px) {
  .btn {
    white-space: normal;
  }
}