:root {
  --bs-body-bg: #faf8ed;
}
.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  @media (min-width: 992px) {
    .rounded-lg-3 { border-radius: .3rem; }
  }
  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }

  .b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
  }

  .b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
  }

  .bi {
    vertical-align: -.125em;
    fill: currentColor;
  }

  .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
  }

  .nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
   
  }

  .bd-mode-toggle {
    z-index: 1500;
  }

  .bd-mode-toggle .dropdown-menu .active .bi {
    display: block !important;
  }

  .themed-grid-col {
    padding-top: .75rem;
    padding-bottom: .75rem;
    /* background-color: rgba(112.520718, 44.062154, 249.437846, .15); */
    /* border: 1px solid rgba(112.520718, 44.062154, 249.437846, .3); */
  }

  .themed-container {
    padding: .75rem;
    margin-bottom: 1.5rem;
    /* background-color: rgba(112.520718, 44.062154, 249.437846, .15); */
    /* border: 1px solid rgba(112.520718, 44.062154, 249.437846, .3); */
  }

  body {
    background-image: linear-gradient(180deg, var(--bs-secondary-bg), var(--bs-body-bg) 100px, var(--bs-body-bg));
  }


  @media (max-width: 766px) {
    .typeRange {
      width: 100% !important;
      margin: 0 1rem;
    }
  }

  @media (min-width: 767px) {
    .typeRange {
      width: 25%;
    }
  }

#deleteProfilePictureBtn {
    background-color: #dc3545; /* Bootstrap danger red */
    border: none;
}
#deleteProfilePictureBtn:hover {
    background-color: #c82333;
}

.bg-faf8ed {
  background-color: #FAF8ED !important;
}

.text-brown {
  color: #6b4a2b !important;
}

.btn-brown {
  background-color: #a67643;
  border-color: #a67643;
}
.btn-brown:hover {
  background-color: #8c5f33;
  border-color: #8c5f33;
}

.btn-outline-brown {
  color: #a67643;
  border-color: #a67643;
}
.btn-outline-brown:hover {
  background-color: #a67643;
  color: #fff;
}

h2 {
  font-size: 1.75rem;
}

img.rounded-circle {
  border: 3px solid #a67643;
  padding: 8px;
  background-color: #fff;
}

/* Modern tab style */
.nav-tabs .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}
.nav-tabs .nav-link.active {
  color: #a67643 !important;
  border-bottom: 3px solid #a67643;
  background-color: transparent;
}
.nav-tabs .nav-link:hover {
  color: #8c5f33 !important;
}

/* Smooth fade effect between forms */
.form-section [id^="personalForm"] {
  transition: opacity 0.3s ease-in-out;
}
.form-section [id^="personalForm"].d-none {
  opacity: 0;
  pointer-events: none;
}

/* make the whole contact section match your hero background */
.contact-section {
  background-color: #FAF8ED;
}

/* uniform portrait sizing */
.contact-section .portrait {
  max-width: 200px;    /* adjust as desired */
  width: 100%;
  object-fit: cover;
}

/* style all inputs & textarea */
.contact-input {
  border: 2px solid #0EA5E9 !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem 1rem;
  background-color: #FAF8ED;
}

/* remove default focus shadow and keep blue border */
.contact-input:focus {
  box-shadow: none !important;
  border-color: #0EA5E9 !important;
}

/* ensure the submit button sits flush in its column */
.contact-section .btn-info {
  border-radius: 0.375rem;
  padding: 0.75rem;
}

/* ensure full width on large screens */
.contact-section .form-control {
  width: 100%;
}

/* make all inputs match that background */
.account-settings-section .form-control {
  border: 2px solid #0EA5E9 !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  /* background-color: #FAF8ED !important; */
}

.account-settings-section .form-control:focus {
  box-shadow: none !important;
  border-color: #0EA5E9 !important;
}

/* ensure social input groups have matching blue border around icons and buttons */
.account-settings-section .social-input-group {
  border: 2px solid #0EA5E9 !important;
  border-radius: 0.5rem !important;
  overflow: hidden;
}

.account-settings-section .social-input-group .form-control,
.account-settings-section .social-input-group .social-input-icon,
.account-settings-section .social-input-group .clear-social {
  border: none !important;
}

.account-settings-section .social-input-group .social-input-icon {
  border-right: 2px solid #0EA5E9 !important;
}

.account-settings-section .social-input-group .clear-social {
  border-left: 2px solid #0EA5E9 !important;
}

.about-card {
  max-width: 90%;
  margin: 0 auto;
  border-radius: 1rem;    /* bit of rounding */
  padding: 2rem;          /* if you want a bit more inside padding */
}

/* remove any shadow on the image inside the about-card */
.about-card img {
  box-shadow: none !important;
}

html, body {
  min-height: 100%;
  background-color: #FAF8ED;
}

footer {
  background-color: #fff;
}

/* Brown theme replacements for buttons and form controls */
:root {
  --bs-brown: #6B4423;
}

.btn-brown {
  color: #fff;
  background-color: var(--bs-brown);
  border: 2px solid var(--bs-brown);
  border-radius: 0.5rem;
}

.btn-brown:hover,
.btn-brown:focus {
  color: #fff;
  background-color: #553018;
  border-color: #553018;
}

.btn-outline-brown {
  color: var(--bs-brown);
  border: 2px solid var(--bs-brown);
  border-radius: 0.5rem;
}

.btn-outline-brown:hover {
  color: #fff;
  background-color: var(--bs-brown);
  border-color: var(--bs-brown);
}

.btn-outline-brown.active {
  color: #fff;
  background-color: var(--bs-brown);
  border-color: var(--bs-brown);
}

/* Form section styling similar to contact form */
.form-section .form-control,
.form-section .form-select {
  border: 2px solid #0EA5E9 !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem 1rem;
  background-color: #FAF8ED;
}

.form-section .form-control:focus,
.form-section .form-select:focus {
  box-shadow: none !important;
  border-color: #0EA5E9 !important;
}

.form-section input[type="radio"] {
  accent-color: var(--bs-brown);
}

.form-section input[type="range"] {
  accent-color: var(--bs-brown);
}

input, textarea, select {
  border-radius: 0.5rem !important;
  border: 1px solid #ddd !important;
  padding: 0.6rem 1rem !important;
  font-size: 1rem !important;
}

input:focus, textarea:focus {
  border-color: #a67643 !important;
  box-shadow: 0 0 0 0.2rem rgba(166,118,67,0.25) !important;
}

/* Dropdown tweaks for mobile */
#personalNavBar .dropdown-menu,
#partnerNavBar   .dropdown-menu {
  border: 2px solid var(--bs-brown);
  border-top: none;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  transform-origin: top;
  transform: scaleY(0);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#personalNavBar .dropdown-menu.show,
#partnerNavBar   .dropdown-menu.show {
  transform: scaleY(1);
  opacity: 1;
}

/* Social link styling */
.social-input-icon {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-input-icon.facebook { background-color: #1877F2; color: #fff; }
.social-input-icon.instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  color: #fff;
}
.social-input-icon.snapchat { background-color: #FFFC00; color: #000; }

.social-icon-lg { font-size: 2rem; }
.social-icon-lg.facebook { color: #1877F2; }
.social-icon-lg.instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  color: transparent;
}
.social-icon-lg.snapchat { color: #FFFC00; }

.social-icon-sm.facebook { color: #1877F2; }
.social-icon-sm.instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  color: transparent;
}
.social-icon-sm.snapchat { color: #FFFC00; }

.socials-btn {
  border: 1px solid #000;
  border-radius: 50px;
  background-color: transparent;
  color: #000;
  transition: background-color .3s, color .3s;
}
.socials-btn:hover {
  background-color: #000;
  color: #fff;
}

.socials-menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}