.btn--sub {
  background-color: var(--color-sub-light);
}

.card {
  border: 2px solid var(--color-light);
}

.card,
.profilecard,
.layout,
.container,
.dashcard {
  position: relative;  /* ✅ enables z-index to work */
  z-index: 1;           /* ✅ ensures it's above z-index: 0 fish */
}

.card.project {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card.project:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--color-sub-light);
}

.card.project:hover .project__thumbnail {
  filter: brightness(1.15);
}

.tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  font-size: 1.5rem;
  white-space: nowrap;
  z-index: 1000;
  left: 100%; /* Place to the right of the button */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Adjust for centering */
  margin-left: 10px;
  pointer-events: none; /* Prevent flickering */
}

img {
  width: 100%;
}

.tag > i.im {
  font-size: 1.5rem;
  margin-right: 0.5rem;
}

.content-box {
  width: 95%;
  max-width: 85rem;
  margin: 0 auto;
}

.indent {
  text-indent: 2em;
}

/*=======================
  Header Section
========================*/
.section-curve-top-dark {
  background: var(--color-sub);
  height: 18px;
  border-top-left-radius: 100% 60px;
  border-top-right-radius: 100% 60px;
  transform: rotate(180deg);
}

.navbar {
  width: 96%;
  margin: 0 auto;
  box-sizing: border-box;
}

.header {
  position: relative;
  z-index: 111;
  background-color: var(--color-sub);
  padding: 1.5rem 0;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.header > .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  margin-top: 0.5em;
  margin-right: 3em;
}

.fixed-size-image {
  width: 180px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.fixed-size-image:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
}

.header__nav > ul {
  display: inline-flex;
  align-items: center;
  list-style: none;
  gap: 6.5rem;
}

.header__menuItem > a:not(.btn--sub) {
  color: var(--color-light);
  font-weight: 400;
  padding: 0.4rem 0.6rem;
  border-radius: 0.3rem;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

.header__menuItem > a:not(.btn--sub):hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-sub-lighter);
  transform: translateY(-1px);
}

.toggle-menu > span {
  display: none;
}

.header__nav input[type="checkbox"] {
  display: none;
}

.header__nav input[type="checkbox"]:checked ~ .header__menu {
  opacity: 1;
  pointer-events: all;
}

.project--thumbnail {
  height: 250px;
  object-fit: cover;
}

/* =========================
   Footer Wrapper
========================= */

.footer-wrapper {
  position: relative;
  overflow: hidden; /* Prevent weird scrolling/overflow from overlay */
}

/* =========================
   Footer Base
========================= */

.footer {
  position: relative;
  background-size: cover;             /* Maintain aspect ratio and fill */
  background-position: 75% 80%;       /* Adjust to align the image */
  background-repeat: no-repeat;
  color: #fff;
  padding-top: 60px;
  padding-bottom: 3em;
  z-index: 2;
  overflow: hidden;                   /* Prevent overflow */
  border-top-left-radius: 100% 60px;  /* Rounded top-left corner */
  border-top-right-radius: 100% 60px; /* Rounded top-right corner */
}


/* =========================
   Top Curve
========================= */

.section-curve-bottom {
  background: var(--color-sub-light); /* Make sure background matches top */
  height: 30px;
  width: 100%;
  border-top-left-radius: 100% 60px;
  border-top-right-radius: 100% 60px;
  top: 0;
  left: 0;
  z-index: 5;
}

/* =========================
   Footer Main Content
========================= */

.footer__logo {
  text-align: center;
  margin-bottom: 20px;
}

@media (max-width: 1600px) {
  .footer__logo {
    margin-bottom: 0px;
  }
}

.footer__logo img {
  max-width: 180px;
}

/* Menu Navigation */
.footer__nav {
  text-align: center;
  margin-bottom: 20px;
}

.footer__menu {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 500px;
}

.footer__menuItem {
  margin: 0 10px;
}

.footer__menuItem a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer__menuItem a:hover {
  color: #ccc; /* Lighten on hover */
}

/* Footer Contact (if needed) */
.footer__contact {
  text-align: center;
  margin-bottom: 20px;
}

/* Social Icons */
.footer__social {
  text-align: center;
  margin-top: 2rem;
}

.footer__socialLink {
  display: inline-block;
  margin: 0 10px;
}

.footer__socialLink img {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.footer__socialLink:hover img {
  transform: scale(1.1);
}

/* =========================
   Footer Overlay (Decoration Image)
========================= */

.footer-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw; /* Full width + extra room to shift */
  transform: translateX(-0.5%); /* Shift left if image has blank space */
  pointer-events: none; /* Let users click links underneath */
  z-index: 1; /* Under everything else */
}

.footer-overlay img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   (Optional) Footer Transition (for SVG Shapes)
========================= */
.footer-transition {
  overflow: hidden;
  margin-top: 2em;
  padding-top: 2em;
}

.footer-transition svg.footer-shape {
  width: 100%;
  height: 200px; /* Customize height if using SVG wave footer */
  display: block;
  object-fit: cover;
  color: transparent; /* Prevent gray color inheritance */
}
/*=======================
  Footer Section Media Query
========================*/

@media (max-width: 768px) {

  .footer__logo {
    margin-bottom: 2px;
  }
  
  /* Make the footer overlay image larger and reposition */
  .footer-overlay {
    width: 120vw;
    bottom: 0;
    height: 100px; /* REDUCED height to avoid extreme cropping */
    overflow: hidden;
  }

  .footer-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% bottom; /* Focus farther to the right */
  }

  /* Move footer menu up closer */
  .footer__nav {
    margin-bottom: 10px;
  }

  .footer__social {
    margin-top: 0rem;
  }

  .footer__socialLink img {
    display: none;
  }
}

.footer__menuItem {
  z-index: 10; /* on top of the overlay */
}

@media screen and (min-width: 1280px) and (max-width: 1680px) {
  .footer__menu {
    max-width: 500px;     /* Smaller container width */
    margin: 0 auto;       /* Center it */
    justify-content: center;
    gap: 0.5rem;          /* Optional: tighten spacing */
  }

  .footer__menuItem {
    margin: 0 8px;        /* Reduce item spacing */
  }
}


@media screen and (max-width: 1024px) {

  .header__logo {
    position: relative;
    z-index: 999;
  }

  .toggle-menu {
    position: relative;
  }

  .toggle-menu > span {
    display: block;
    position: fixed;
    top: 1.5rem;
    right: 2.75rem;
    cursor: pointer;
    padding: 1rem;
    background: var(--color-sub-light);
    z-index: 999;
    font-size: 0;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
  }

  .toggle-menu__lines,
  .toggle-menu__lines::before,
  .toggle-menu__lines::after {
    pointer-events: none;
    content: "";
    display: block;
    height: 2px;
    width: 2.5rem;
    position: fixed;
    top: 4rem;
    right: 4rem;
    z-index: 999;
    background: var(--color-light);
    transition: all 0.3s ease-in-out;
  }

  .toggle-menu__lines::before {
    top: 3.4rem;
    transform-origin: 0 0;
  }
  .toggle-menu__lines::after {
    top: 4.6rem;
    transform-origin: 0 0;
  }

  .header__nav
    input[type="checkbox"]:checked
    + .toggle-menu
    > .toggle-menu__lines::before {
    margin-left: 3px;
    transform: rotate(45deg) scaleX(1.2) translateX(-2px) translateY(-4px);
    visibility: visible;
  }

  .header__nav
    input[type="checkbox"]:checked
    + .toggle-menu
    > .toggle-menu__lines {
    visibility: hidden;
  }

  .header__nav
    input[type="checkbox"]:checked
    + .toggle-menu
    > .toggle-menu__lines::after {
    transform: rotate(-45deg) scaleX(1.2) translateX(-2px) translateY(3px);
    visibility: visible;
  }

  .header__nav > ul {
    opacity: 0;
    pointer-events: none;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: var(--color-sub);
    transition: all 0.5s ease-in-out;
    gap: 4.5rem;
  }

  .header__menuItem a {
    transition: all 0.5s ease-in-out;
    padding: 1rem 3rem;
  }

  .header__menuItem a:hover {
    padding: 1rem 3rem;
    border-radius: 3px;
    background: var(--color-sub-light);
  }

}
/*=======================
  Hero Section
========================*/

.section-curve-top {
  background: var(--color-sub-light);
  height: 18px;
  border-top-left-radius: 100% 60px;
  border-top-right-radius: 100% 60px;
  transform: rotate(180deg);
}

.section-flat-top {
  background: var(--color-sub-light);
  height: 18px;
}

.section-curve-top.index-curve {
  background: #006695;
}

.hero-section {
  height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  background: 
    url("/static/images/sea_background.890ab756c7cd.png") no-repeat center center / cover;
  background-blend-mode: overlay;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hero-section__box {
  margin-bottom: 4rem;

}

.hero-section__box > h2,
.hero-section__box > h2 > span {
  font-size: 4rem;
  color: var(--color-sub);
  line-height: 1.3;
  text-transform: uppercase;
}

.hero-section__box > h2 {
  font-weight: 300;
}

.hero-section__box > h2 > span {
  font-weight: 700;
}

.hero-section__search > .form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.hero-section__search > .form label {
  position: absolute;
  left: -9999px;
}

.hero-section__search > .form input.input--text {
  width: 50rem;
}

/* Responsive Typography */
@media screen and (max-width: 1600px){
  
}

@media screen and (max-width: 1000px) {
  .hero-section__box > h2,
  .hero-section__box > h2 > span {
    font-size: 3.4rem;
  }
}

@media screen and (max-width: 800px) {
  .hero-section__box > h2,
  .hero-section__box > h2 > span {
    font-size: 3rem;
    line-height: 1.5;
  }
}

@media screen and (max-width: 500px) {
  .hero-section__box > h2,
  .hero-section__box > h2 > span {
    font-size: 2.4rem;
    line-height: 1.5;
  }
}

@media screen and (max-width: 500px) {
  .hero-section {
      background-position: 68% center;;
    }

  .hero-section__box > h2,
  .hero-section__box > h2 > span {
    font-size: 3.2rem;
    
  }
}

/* Responsive Form */
@media screen and (max-width: 700px) {
  .hero-section__search > .form {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }

  .hero-section__search > .form input.input--text,
  .hero-section__search > .form input {
    width: 100%;
    min-width: 100%;
  }
}

/*=======================
  Tool Section
========================*/
.tool-section-curve {
  margin-top: 4rem;
  padding-top: 2rem;
  background: #f4f4f4;
  height: 85px;
  border-top-left-radius: 100% 60px;
  border-top-right-radius: 100% 60px;
}

.tool-section {
  padding: 10px 0; /* vertical padding */ 
  padding-bottom: 50px;
}

.tool-section__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.tool-section__title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-sub);
  line-height: 1.3;
  margin-bottom: 4rem;
  gap: 2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.tool-section__title::before,
.tool-section__title::after {
  content: "";
  flex: 1;
  height: 2.5px;
  background: var(--color-sub);
  opacity: 0.3;
}

.tool-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
}

.tool-section__card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
  transition: transform 0.3s ease;
}

.tool-section__card:hover {
  transform: translateY(-5px);
}

.tool-section__content {
  padding: 2rem;
}

.tool-section__link {
  text-decoration: none;
  color: inherit;
}

.tool-section__profile {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.tool-section__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.tool-section__meta h3 {
  color: var(--color-sub);
  font-size: 2rem;
  font-weight: 700;
}

.tool-section__meta h5 {
  color: var(--color-text);
  font-size: 1.4rem;
  font-weight: 500;
}

.tool-section__description {
  margin-top: 1.5rem;
  font-size: 1.35rem;
  line-height: 1.4;
  text-align: justify;
}


/*=======================
  Index Section "Logged IN"
========================*/
.floating-logo.indexpage {
  margin-top: 40px;
}

#profileDetails {
  display: none;
  margin-top: 1em;
  cursor: pointer;

}

#toggleProfileDetails:hover {
  color: var(--color-accent);
  transform: scale(1.1);
  transition: 0.2s ease;
}

.toggle-image {
  cursor: pointer;
  font-size: 1.5em;
  text-align: center;
  margin: 10px 0;
  height:3rem;
  width: 3rem;
  margin: 0 auto;
  padding: 10px 0;
}

.toggle-image img {
  width: 30px; /* or whatever size you want */
  display: inline-block;
  transition: transform 0.3s ease;
  transform-origin: top center;
  padding-bottom: 2rem;
}

a.remove-inline {
  display: inline !important;  /* ensure it's treated like normal text */
  padding: 0;
  margin: 0;
  font-weight: 500;
  line-height: inherit;
  vertical-align: baseline;
}

/*=======================
Contest Section 
========================*/

.contestpic {
  border-radius: 1.5rem;
  margin-top: 1.0em;
  border: 2px solid black;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.joinwss {
  border-radius: 1.5rem;
  margin-top: 1.0em;
  border: 2px solid black;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
}


ul.contest-rules {
  list-style: none;
}

.construction-list {
  list-style: none;
}

.contest-links {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.contest-links a {
  flex: 1;
}

.contest-links img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 1.5rem;
  border: 2px solid black;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/*=======================
  Review Section
========================*/

.star-input {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.star-input .star {
  font-size: 3rem;
  cursor: pointer;
  color: #ccc;
  transition: color 0.2s ease;
}

.star-input .star.hovered,
.star-input .star.selected {
  color: #f5a623;
}

.review-text {
  font-size: 1.7rem;
  font-weight: 400;
  color: black;
}

.review-text strong {
  color: var(--color-sub);
  font-size: 1.8rem;
}

/*=======================
  Zero Section
========================*/

.zero-section {
  height: 10vh;
  align-items: center;
  display: flex;
  background: linear-gradient(to bottom, var(--color-sub) 0%, var(--color-sub) 10%, var(--color-sub-light) 100%);
  color: white;
}

.zero-section.no-bg {
  background: none !important;
}

.zero-section__box {
  margin-bottom: 4rem;
}

.zero-section__box > h2,
.zero-section__box > h2 > span {
  font-size: 4rem;
  color: var(--color-light);
  line-height: 1.3;
  text-transform: uppercase;
}

@media screen and (max-width: 1000px) {
  .zero-section__box > h2,
  .zero-section__box > h2 > span {
    font-size: 3.4rem;
  }
}

@media screen and (max-width: 800px) {
  .zero-section__box > h2,
  .zero-section__box > h2 > span {
    font-size: 3rem;
    line-height: 1.5;
  }
}

@media screen and (max-width: 500px) {
  .zero-section__box > h2,
  .zero-section__box > h2 > span {
    font-size: 2.4rem;
    line-height: 1.5;
  }
}

@media screen and (max-width: 400px) {
  .zero-section__box > h2,
  .zero-section__box > h2 > span {
    font-size: 2rem;
  }
}

.zero-section__box > h2 {
  font-weight: 300;
}

.zero-section__box > h2 > span {
  font-weight: 700;
}

.zero-section__search > .form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.zero-section__search > .form label {
  position: absolute;
  left: -9999px;
}

.zero-section__search > .form input.input--text {
  width: 50rem;
}

@media screen and (max-width: 700px) {
  .zero-section__search > .form {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }

  .zero-section__search > .form input.input--text,
  .zero-section__search > .form input {
    min-width: 100%;
    width: 100%;
  }
}

.zero-section__date-options {
  display: flex;
  justify-content: center;
  gap: 4rem; /* Adjust the gap between buttons as needed */
}

.additional-buttons {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.zero-section__date-options .form__field {
  margin-bottom: 0; /* Remove bottom margin to align items side by side */
}

.zero-section__date-options .btn {
  display: inline-block;
  text-decoration: none;
  color: var(--color-sub-light);
  background-color: var(--color-bg);
  padding: 6px 12px;
  border-radius: 4px;
  border: 2px solid var(--color-sub-light);
  font-size: 12px;
}

@media screen and (max-width: 1260px) {
  .zero-section__date-options {
    display: flex;
    justify-content: center;
    gap: 18rem;
  }
}

@media screen and (max-width: 820px) {
  .zero-section__date-options {
    display: flex;
    justify-content: center;
    gap: 10rem;
  }
}

@media screen and (max-width: 655px) {
  .zero-section {
    height: 9vh;
    align-items: center;
    background-color: var(--color-sub);
  }

  .zero-section__date-options {
    display: flex;
    justify-content: center;
    gap: 2rem;
  }

  #thisMonth,
  #lastMonth,
  #specDate {
    font-size: 1.3rem;
  }
}


/*=======================
  Pagination
========================*/
.pagination {
  margin-top: 8rem;
  margin-bottom: 10rem;
}

.pagination > ul {
  flex-wrap: wrap;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.pagination .btn {
  color: var(--color-sub);
}

.pagination .btn.btn--sub {
  color: var(--color-light);
}

/*=======================
  Profile
========================*/

.profile .card > .dev {
  padding: 4rem;
}

.dev__avatar {
  display: block;
  margin: auto;
  transition: filter 0.3s ease;

}

.dev__avatar:hover {
  filter: brightness(1.2) saturate(1.3);
}

.dev__name {
  color: var(--color-sub);
  font-size: 2.8rem;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.dev__title {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.3;
}

.dev__downbar {
  margin-top: auto; /* Pushes the element to the bottom */
  padding: 1rem; /* Add padding if needed */
  background-color: #f8f8f8; /* Optional: Add background color */
  border-top: 1px solid #ddd; /* Optional: Add top border */
}

.dev__location {
  margin-top: 1rem;
}

.dev__social {
  margin: 3rem 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.devInfo {
  margin-bottom: 3rem;
}

.devInfo__title,
.devInfo__subtitle {
  font-size: 2.6rem;
  color: var(--color-sub);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.devInfo__subtitle {
  font-size: 2rem;
  color: var(--color-sub-light);
}

.devInfo__about,
.devSkill__info {
  font-size: 1.45rem;
  line-height: 1.7;
  text-align: justify;
}

.devSkill {
  margin-bottom: 3rem;
}

.devSkill__title {
  font-size: 1.65rem;
  font-weight: 500;
  color: var(--color-sub-light);
}

@media screen and (min-width: 700px) {
  .devSkill {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .devSkill__info {
    flex-basis: 80%;
  }
}

/*=======================
  Single Projects
========================*/

.singleProject .column--1of3 {
  order: 2;
}

@media screen and (min-width: 1081px) {
  .singleProject .column--1of3 {
    order: 1;
  }
  .singleProject .column--2of3 {
    order: 2;
  }
}

.singleProject__toolStack {
  margin-top: 2rem;
  margin-bottom: 4rem;
}

.singleProject__liveLink {
  font-weight: 500;
  transition: all 0.3s ease-in-out;
  border-bottom: 2px solid transparent;
}

.singleProject__liveLink:hover {
  font-weight: 500;
  border-bottom: 2px solid var(--color-main);
}

.singleProject__liveLink i {
  display: inline-block;
  font-size: 1.6rem;
  margin-right: 1rem;
}

.singleProject__preview {
  height: 50vh;
  object-fit: cover;
  object-position: top center;
  margin-bottom: 3rem;
  border-radius: 0.7rem;
}

.singleProject__developer {
  font-size: 1.8rem;
  font-weight: 500;
}

.singleProject__title {
  font-size: 3.6rem;
  font-weight: 700;
  color: var(--color-sub);
  margin-bottom: 3rem;
}

.project__author {
  font-size: 1.4rem;
  font-style: italic;
}

.project--rating {
  margin-bottom: 1.6em;
  margin-top: 0.5em;
}

.singleProject__subtitle {
  text-transform: uppercase;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-sub-light);
  margin-bottom: 1rem;
}

/*=======================
  Projects Page
========================*/
.projects > .hero-section {
  height: 40vh;
}

.projects .hero-section__box {
  margin-bottom: 2.5rem;
}

.projects .hero-section__box > h2 {
  color: var(--color-sub);
}

.projects .hero-section__box > h2 > span {
  font-weight: 700;
  color: var(--color-sub);
}

.projectsList {
  margin-top: 8rem;
}

@media (max-height: 750px) {
  .hero-section__box {
    margin-bottom: 2px; /* or whatever fits your layout */
  }

  .projects > .hero-section {
    height: 50vh;
  }
}

@media (max-height: 500px) {
  .hero-section__box {
    margin-bottom: 2px; /* or whatever fits your layout */
  }

  .projects > .hero-section {
    height: 50vh;
  }
}


/*========== Projects ==========*/

.project__thumbnail {
  margin-top: 25px;
  height: 25rem;
  object-fit: cover;
  object-position: top center;
}

.project__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-sub);
  white-space: pre-wrap; /* Ensures that the text wraps as per the wordwrap filter */
  overflow-wrap: break-word; /* Breaks long words if necessary */
}

.project__info {
  margin: 1rem 0;
  font-size: 1.4rem;
  text-align: justify;
}

/*========== Comments ==========*/

.comments {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 2px solid var(--color-light);
}

.comments .form label {
  position: absolute;
  margin: -9999px;
}

.commentList {
  margin: 3rem 0;
}

.comment {
  display: flex;
  gap: 2rem;
}

.comment:not(:last-child) {
  margin-bottom: 3rem;
}

.comment__author {
  font-size: 1.8rem;
}

.comment__info {
  font-size: 1.45rem;
}

/*=======================
  Account Settings
========================*/

.settingsPage .dev > .settings__btn {
  display: inline-block;
  margin-bottom: 3rem;
}

.settings {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings__title {
  font-size: 2.4rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-sub);
}

.settings__table {
  margin-top: 3rem;
  margin-bottom: 5rem;
  padding: 0 3rem;
  background: var(--color-white);
}

.settings__table tr {
  width: 100%;
}

.settings__table tr > td {
  padding: 2rem 0;
}

.settings__table tr:not(:last-child) td {
  border-bottom: 2px solid var(--color-white-light);
}

.settings__thumbnail {
  width: 23%;
  min-width: 10rem;
}

.settings__thumbnail img {
  padding-right: 3rem;
  height: 15rem;
  object-fit: contain;
}

.settings__tableInfo {
  width: 100%;
}

.settings__tableInfo h4,
.settings__tableInfo a {
  padding-right: 1rem;
  width: auto;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-sub);
}

.settings__tableInfo p {
  font-size: 1.4rem;
}

.settings__tableActions {
  text-align: right;
}

/*=======================
  Login/SignUp
========================*/

.auth {
  width: 100%;
  position: relative;
  z-index: 1;
  background: transparent;
  height: 99vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth.registration-form {
  height: auto;
  min-height: 90vh;
}

.auth > .card {
  padding: 3rem 4rem;
  width: 95%;
  max-width: 65rem;
}

.login-wrapper{
  margin: 10px;
}

@media screen and (min-width: 650px) {

  .auth > .card {
    padding: 5rem 8rem;
    width: 95%;
    max-width: 65rem;
  }
}

.auth__header h3 {
  color: var(--color-sub);
  font-weight: 700;
  margin-top: 1rem;
}

.auth__header p {
  font-weight: 400;
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

.auth__form {
  margin: 3rem 0;
}

.auth .auth__form label,
.auth .auth__alternative p {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-sub-light);
}

.auth .auth__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2.5rem 0;
}
.auth .auth__actions a {
  text-decoration: underline;
}

.auth .auth__alternative a {
  font-size: 2rem;
  font-weight: 500;
}

/*=======================
  Inbox
========================*/

.inbox {
  height: 90vh;
}

.inbox__title,
.inbox__title span {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-sub);
  text-transform: uppercase;
  text-align: left;
  margin-bottom: 3rem;
}

.inbox__title span {
  color: var(--color-main);
}

.messages {
  list-style: none;
  background: var(--color-white);
  padding: 0.5rem 3rem;
  border: 2px solid var(--color-light);
  border-radius: 0.7rem;
}

.message {
  padding: 2.5rem 0;
}

.message > a span {
  font-size: 1.45rem;
  font-weight: 500;
}

.message.message--unread a span {
  font-weight: 700;
  color: var(--color-sub);
}

.message:not(:last-child) {
  border-bottom: 2px solid var(--color-white-light);
}

.message > a {
  display: flex;
  gap: 1rem;
}

.message__author,
.message__date {
  flex-basis: 25%;
}

.message__subject {
  flex-basis: 50%;
}

.message__date {
  text-align: right;
}

/*=======================
  Single Message
========================*/

.messagePage .message {
  list-style: none;
  background: var(--color-white);
  padding: 3.5rem 5rem;
  border: 2px solid var(--color-light);
  border-radius: 0.7rem;
}

.messagePage .message__subject {
  font-size: 2.8rem;
  color: var(--color-sub);
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.messagePage .message__author {
  font-size: 1.8rem;
  font-weight: 500;
}

.messagePage .message__date {
  font-size: 1.4rem;
  font-weight: 400;
  text-align: left;
  margin-bottom: 3rem;
}

.backButton {
  background: var(--color-main-light);
  color: var(--color-main);
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.backButton i {
  font-size: 1.8rem;
}

/*=======================
  Form Page
========================*/

.formPage .formWrapper {
  list-style: none;
  background: var(--color-white);
  padding: 3.5rem 5rem;
  border: 2px solid var(--color-light);
  border-radius: 0.7rem;
}

.formPage .formWrapper__subject {
  font-size: 2.8rem;
  color: var(--color-sub);
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.underline {
  text-decoration: underline;
}

/* Custom CSS for positioning the "click here" links */

.devlist .card {
  position: relative;
}

.devlist .card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.devlist .dev__skills {
  position: absolute;
  bottom: 10px; /* Adjust this value as needed */
  left: 50%;
  transform: translateX(-50%);
}

/* MY CUSTOM CSS SINGLE_METAL.HTML PAGE*/

.metal_settings {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metal_single {
  background-color: var(--color-white);
  border: 2px solid var(--color-light); /* Distinct blue border */
  border-radius: 10px; /* Rounded edges */
  width: 90%; /* Takes up 90% of its container width */
  min-height: 300px; /* Minimum height */
  padding: 10px; /* Add some padding inside */
  box-sizing: border-box; /* Include padding and border in the width */
  overflow: hidden; /* Hide overflow content */
  word-wrap: break-word; /* Break long words */
  display: flex;
  flex-direction: column;
}

#metal_single2 {
  margin-top: 50px;
}

.metal__title {
  font-size: 2.4rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-sub);
  margin: auto !important;
}

.purchase-price-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.3;
}

.purchase-price-label {
  flex: 1;
  margin-right: 10px; /* Adjust as needed */
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.3;
}

.purchase-price-value {
  flex: 1;
  text-align: right;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.3;
}

.metal__year {
  font-size: 1.6rem;
  font-weight: 1200;
  line-height: 1.3;
  margin-top: 1rem;
}

.metal__title {
  color: var(--color-sub);
  font-size: 2.8rem;
  font-weight: 700;
}

/* CUSTOM UNDERLINE SPAN */

.underline {
  text-decoration: underline;
}

.bold {
  font-weight: var(--font-bold);
}

/* PROFILE PAGE CUSTOM CSS */

.card.text-center.profilecard {
  overflow: visible;
}

.metal_container {
  display: flex; /* Use flexbox layout */
  justify-content: space-between; /* Space items evenly along the main axis */
  align-items: center; /* Center items vertically */
  width: 100%;
}

.metal__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-sub);
  flex: 0 0 auto; /* Let the elements take up their content width */
  margin: 0; /* Remove any default margin */
}

.dca__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-sub);
  flex: 0 0 auto; /* Let the elements take up their content width */
  margin-left: 20rem;
}

.metalcard__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 2rem 2.5rem;
}

#gold_title {
  margin-bottom: 0.1em;
}

/* METAL PAGE CUSTOM CSS */

.form-options-button {
  display: inline-block;
  background-color: #3b82f6; /* blue-500 */
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
  padding: 0.5em 1em;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.form-options-button:hover {
  background-color: #2563eb; /* blue-600 */
  transform: scale(1.05);
}

@keyframes bounceIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
    opacity: 1;
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.form-options-button.animate-on-load {
  animation: bounceIn 3.0s ease-out;
}

.premium-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.premium-label {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.3;
  margin-right: 1em;
  white-space: nowrap;
}

.premium-controls {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.premium-input {
  width: 100px;
  padding: 4px 6px;
}

.profit_plus {
  color: green;
  border-radius: 5px;
  font-size: 2rem;
  font-weight: 700;
}

.profit_neutral {
  color: #84E3F2;
  border-radius: 5px;
  font-size: 2rem;
  font-weight: 700;
}

.profit_minus {
  color: red;
  border-radius: 5px;
  font-size: 2rem;
  font-weight: 700;
}

/* Searchreturn.html Custom CSS Also for Gold.html, Silver.html, and Platinum.html */

.metal__thumbnail {
  width: 25rem;
  height: 25rem;
  background-size: cover;
  background-position: top center;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
}


/* Custom Subheader CSS */

#sticky-bar {
  position: relative; /* Initially relative */
  width: 100%;
  margin: 0 auto;
  background-color: var(--color-sub);
  color: white;
  text-align: center;
  transition: top 0.3s;
  z-index: 110; /* Ensure it stays on top */
}

#sticky-bar.sticky {
  position: fixed; /* Change to fixed when sticky */
  top: 0;
  width: 100%;
  z-index: 111;
}

.subheader {
  position: sticky;
  z-index: 111;
  background-color: var(--color-sub);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  margin-bottom: 0;
}

.metals-price {
  color: var(--color-sub-root);
}

.subheader__nav > ul {
  display: flex;
  align-items: center;
  list-style: none;
  justify-content: space-between;
  padding-top: 1rem;
}

.subheader__menuItem > a {
  font-weight: 300;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

#goldspot {
  color: var(--color-gold);
  padding: 3px;
}

#silverspot {
  color: var(--color-silver);
  padding: 3px;
}

#platinumspot {
  color: var(--color_platinum);
  padding: 3px;
}

@media screen and (max-width: 550px) {
  .subheader__nav > ul {
    display: inline-flex;
    align-items: center;
    list-style: none;
    gap: 1rem;
  }
}

/* Custom Buttons  */

.last_month_cont {
  display: none;
}

.this_month_cont {
  display: none;
}

.highest_profit_cont {
  display: none;
}

.recently_added_cont {
  display: none;
}

.lowest_cost_per_oz_cont {
  display: none;
}

#paybutton {
  margin-top: 1.5em;
}

/* Modal styles */

.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: var(--color-sub);
  border-radius: 9px;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  position: relative;
}

#startDate,
#endDate {
  padding-left: 0.6em; /* Adjust the value as needed */
  color: black;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 3px;
  right: 15px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#modalbtn {
  background-color: var(--color-sub-light);
  color: white;
  padding: 8px 10px;
  border: none;
  cursor: pointer;
  margin-top: 1em;
}

#input-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

#line-cont2 {
  margin-left: 1em;
}


/* Media query for screen widths of 650px or less */
@media screen and (max-width: 650px) {
  #input-wrapper {
    flex-direction: column;
  }

  #line-cont2 {
    margin-left: 0;
    margin-top: 1em;
  }
}

/* Settings Page */

.btn.active {
  background-color: var(--color-sub-light); /* Change to your desired color */
  color: white; /* Change text color if needed */
  border: 1px solid var(--color-sub-light); /* Change border color if needed */
}

/* Payment page */

.paymentpage {
  width: 100%;
  position: relative;
  z-index: 1;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Align to top to avoid squishing */
  padding: 4rem 0;
  min-height: 100vh; /* Ensures it pushes the bottom down */
}

/* ImportPage */

.importpage {
  width: 100%;
  position: relative;
  z-index: 1;
  background: transparent;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0; /* Adjusted padding for more space */
}

.importpage .card {
  min-height: 60vh;
}

.importauth {
  width: 60%;
  position: relative;
  z-index: 1;
  background: transparent;
  height: 25vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

label[for="id_excel_file"] {
  font-size: 2.2rem;
  font-weight: 400;
}

.download-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 60%; /* same width as form */
  gap: 1rem;
  padding: 1rem 0;
}

.download-section .importfieldtag {
  font-size: 2.2rem; /* or whatever size you want */
  font-weight: 400;
}

.importform {
  height: auto;
  display: flex;
  align-items: center;
}

.btn.btn-primary.importbtn {
  width: 19vw;
  color:white;
  background-color: var(--color-sub);
}

/* Media query for screens 500px wide and smaller */
@media (max-width: 540px) {
  .card__header {
    font-size: 2.5rem; /* Adjust font size if needed */
  }

  .importpage {
    flex-direction: column; /* Stack elements vertically */
    padding: 1rem 0; /* Adjust padding for smaller screens */
  }

  .importauth {
    width: 100%; /* Make the importauth container full width */
    height: auto; /* Adjust height for smaller screens */
  }

  .download-section {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  label[for="id_excel_file"] {
  font-size: 1.4rem;
  font-weight: 300;
}

  .download-section .importfieldtag {
  font-size: 1.4rem; /* or whatever size you want */
  font-weight: 300;
}

  .importform {
    display: flex;
    margin-top: 6rem;
    flex-direction: column; /* Stack form elements vertically */
  }

  .importbtn {
    margin: 2rem; /* Add space between the form and the submit button */
    width: 80vw; /* Make the submit button full width */
    overflow: hidden;
  }

  .importfieldtag {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-sub-light);
  }

  #id_excel_file {
    margin-left: 7.5em;
  }
}

/* Settings Page */

.card.settings-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  margin: 2rem 2rem;
  padding: 2rem 0rem 6rem 0rem;
}

h1.settings-title {
  font-size: 5rem;
  font-weight: 700;
  color: var(--color-sub);
  margin-bottom: 1rem;
}

h2.color-set {
  display: flex;
  justify-content: center;
}

h2.search-results {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.search_result_buttons {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

h2.metal_types {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.metal_type_buttons {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.color-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem; /* add a little space under the "Color Set" title */
}

@media (max-width: 600px) {
  .color-buttons {
    gap: 1rem;
    margin-top: 1.5rem;
  }
}
/* 
Unique Identifier CSS */

.unique_identifier {
  display: flex;
  margin-left: auto;
  margin-right: 5rem;
  margin-top: 2rem;
  color: red;
  font-weight: 500;
  font-size: 2rem;
}

/* Forms Custom CSS */
.currency-choice {
  display: flex;
  gap: 20px;
}

.currency-choice > div {
  display: flex;
  align-items: center;
  gap: 5px;
}

.xcaution {
  color: red;
  font-size: 1.5rem;
  font-weight: 500;
}

.encryption-disclaimer {
  color: red;
  font-size: 0.85rem;
  margin-left: 0.5rem;
}

.extended_form {
  min-height: 60vh;
}

#id_weight_unit > div {
  color: var(--color-sub);
  display: inline-block;
  margin-right: 10px; /* Adjust spacing as needed */
}

.form_options {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Ensure items are centered vertically */
  gap: 1rem;
}

.form_options > * {
  flex: 0 1 auto; /* Ensure children are flex items */
  gap: 1rem;
}

.form_modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}
.form_modal-content {
  background-color: var(--color-sub-lighter);
  border-radius: 9px;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.form_modal-content button {
  width: 150px;
  height: 60px;
  background-color: var(--color-sub-light); /* Change to your desired color */
  color: white; /* Text color */
  padding: 15px 32px; /* Increase padding for bigger buttons */
  font-size: 16px; /* Increase font size */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  margin: 10px 0; /* Add margin for spacing between buttons */
  display: flex;
  justify-content: center;
  align-items: center;
}

.form_modal-content button:hover {
  background-color: var(--color-sub-light); /* Darker shade on hover */
}

.form_modal-content button.active {
  background-color: var(--color-sub);
}

/* Legal Section CSS */

.legal_header {
  font-weight: 500;
  text-decoration: underline;
}

.about_us_h2 {
  font-weight: 500;
  text-decoration: underline;
  text-align: center;
  margin-bottom: 10px;
}

.about_us_h3 {
  font-weight: 400;
  margin-bottom: 10px;
  text-align: center;
}

.legal_list {
  list-style-type: none;
}

.legal_list li {
  margin-bottom: 10px;
  text-align: left;
}

.legal_list_2 {
  list-style-type: none;
}
.legal_list_2 li {
  margin-bottom: 10px;
}

.text_indent {
  text-indent: 2em;
  text-align: center;
  margin-bottom: 2em;
}

/* Payment Success  CSS */

.payment_success_btn {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  gap: 2rem;
  margin-top: 1rem;
}

/* Confirm Button  CSS */
#confirmButton {
  display: none;
}

/* Dropdown Container */

.dropdown {
  position: relative;
  display: inline-block;
}

/* Button that triggers dropdown */
.dropbtn {
  cursor: pointer;
}

/* Dropdown Links */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--color-bg, #fff); /* fallback white background */
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Dropdown base */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--color-bg, #fff);
  min-width: 180px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.15);
  border-radius: 12px;
  overflow: hidden;
}

/* Dropdown links */
.dropdown-content a {
  color: var(--color-text, #333);
  padding: 12px 18px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover to show dropdown */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Gold/Silver/Platinum hover coloring */
.gold-link:hover {
  color: gold;
  background-color: rgba(255, 215, 0, 0.1); /* subtle gold background */
}

.silver-link:hover {
  color: silver;
  background-color: rgba(192, 192, 192, 0.1); /* subtle silver background */
}

.platinum-link:hover {
  color: #e5e4e2;
  background-color: rgba(229, 228, 226, 0.1); /* subtle platinum background */
}


/* BACKGROUND WRAPPER */

.bg-wrapper {
  position:relative;
  background-image: url("/static/images/footer_backdrop.f8a43cd53dad.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  min-height: 100%;
  margin-top: 0;
  padding-top: 0;
}

/* ONEAUTH QR CODE */

.qr-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.qr-code {
  max-width: 250px;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* wrap everything on your 2-factor login page */
.formWrapper table           { width: 100%; border-collapse: collapse; }

/* cells */
.formWrapper table th,
.formWrapper table td        { padding: .6rem 0; }

/* username box */
.formWrapper input[name="auth-username"] {
    width: 100%;
    max-width: 320px;
    padding: 1.2rem 1.6rem;
    font-size: 1.6rem;
    border: 1px solid #bbb;
    border-radius: 6px;
    display: block;
    margin: 0 auto;          /* centers inside the cell */
}

/* password box */
.formWrapper input[name="auth-password"] {
    width: 100%;
    max-width: 320px;
    padding: 1.2rem 1.6rem;
    font-size: 1.6rem;
    border: 1px solid #bbb;
    border-radius: 6px;
    display: block;
    margin: 0 auto;
}

/* make the whole row centred */
.formWrapper table th        { text-align: center; }

/* the “Next” button */
.formWrapper button[type="submit"] {
    margin-top: 1.2rem;
    padding: 1.0rem 2.4rem;
    font-size: 1.6rem;
    border-radius: 6px;
}

/* 2-factor *token* input — six-digit code */
.formWrapper input[name="token-otp_token"] {
    width: 220px;
    padding: 1.2rem 1.6rem;
    font-size: 2.0rem;
    font-weight: 600;
    letter-spacing: .35rem;      /* spreads the digits */
    text-align: center;

    border: 2px solid var(--color-accent, #3478f6);
    border-radius: 8px;
    margin: 1.2rem auto;         /* centered like the other fields */
}

/* optional: backup-token field (same look, smaller font) */
.formWrapper input[name="backup-otp_token"] {
    width: 260px;
    padding: 1.0rem 1.4rem;
    font-size: 1.6rem;
    text-align: center;
    border: 2px dashed var(--color-accent, #3478f6);
    border-radius: 6px;
    margin: 1.2rem auto;
}

.formWrapper .card {
    padding: 3rem 4rem;
}

/*=======================
  Delete Page
========================*/
/* make any form page’s central card taller */
.formPage .formWrapper {
    min-height: 60vh;        /* try 70 vh if you need more */
    display: flex;           /* keep contents vertically centred */
    flex-direction: column;
    justify-content: center;
}

/*=======================
  Subscription CSS
========================*/
button.locked {
  cursor: not-allowed;
  opacity: 0.6;
}


/*=======================
  Lottie Animations
========================*/
.background-fish-strip {
  position: absolute;
  top: 600px; /* ⬅️ Adjust this to where in the PAGE you want it */
  left: 0;
  width: 100vw;
  height: 150px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.fish {
  position: absolute;
  top: 0;
  left: 100vw;
  width: 250px;
  height: 250px;
  transform: scaleX(1); /* face left */
}

@keyframes swimLeft {
  0%   { transform: scaleX(1) translateX(0); }
  100% { transform: scaleX(1) translateX(-120vw); }
}

.fish.swim {
  animation: swimLeft 20s linear infinite;
}

.strange-wrapper {
  position: absolute;
  bottom: 350px;
  left: -100px; /* start off-screen left */
  width: 300px;
  height: 300px;
  pointer-events: none;
  z-index: 0;
  animation: swimRight 50s linear infinite;
}

.lottie-strange {
  width: 100%;
  height: 100%;
  transform: scaleX(-1); /* flip the player only */
}

@keyframes swimRight {
  0%   { transform: translateX(0); }
  100% { transform: translateX(120vw); }
}

.lottie-bubbles {
  position: absolute;
  bottom: 15vh;
  left: 5vw;
  width: 100px;
  height: 100px;
}

.lottie-jelly {
  position: absolute;
  bottom: 100px;
  right: 10px;
  width: 220px;
  height: 220px;
  z-index: 50; /* Visible but below buttons (which are z-index: 100+) */
  pointer-events: none; /* Prevent any interaction */
}

/* === VERY LARGE SCREENS (e.g. 1920px+) === */
@media (min-width: 1921px) {
  .lottie-bubbles {
  bottom: 15vh;
  left: 5vw;
  width: 100px;
  height: 100px;
}

.lottie-jelly {
  bottom: 130px;
  right: 30px;
  width: 220px;
  height: 220px;
}
}

/* === DESKTOPS / MONITORS (1650px and below) === */
@media (max-width: 1650px) {
  .lottie-bubbles {
  bottom: 11vh;
  left: 4.5vw;
  width: 100px;
  height: 100px;
}

.lottie-jelly {
  bottom: 100px;
  right: 15px;
  width: 220px;
  height: 220px;
}
}

/* === LARGE LAPTOPS / MACBOOKS (1440px and below) === */
@media (max-width: 1440px) {
  .lottie-bubbles {
  bottom: 12vh;
  left: 4.5vw;
  width: 80px;
  height: 80px;
}

.lottie-jelly {
  bottom: 100px;
  right: 10px;
  width: 180px;
  height: 180px;
}
}

/* === MEDIUM SCREENS / 1280px and below === */
@media (max-width: 1280px) {
  .lottie-bubbles {
  bottom: 12vh;
  left: 4.5vw;
  width: 70px;
  height: 35px;
}

.lottie-jelly {
  bottom: 60px;
  right: 8px;
  width: 160px;
  height: 160px;
}
}

/* === SHORT SCREENS / 1280px wide but height under 550px === */
@media (max-width: 1280px) and (max-height: 550px) {
  .lottie-bubbles {
  bottom: 15vh;
  left: 4vw;
  width: 100px;
  height: 100px;
}

.lottie-jelly {
  bottom: 100px;
  right: 10px;
  width: 220px;
  height: 220px;
}
}

/* === SMALL LAPTOPS / TABLETS (1025px and below) === */
@media (max-width: 1025px) {
  .lottie-bubbles {
  bottom: 13vh;
  left: 4vw;
  width: 80px;
  height: 80px;
}

.lottie-jelly {
  bottom: 80px;
  right: 10px;
  width: 140px;
  height: 140px;
}
}

/* === TABLETS & SMALLER (850px and below) === */
@media (max-width: 850px) {
  .lottie-bubbles {
  bottom: 9vh;
  left: 3.7vw;
  width: 80px;
  height: 80px;
}

.lottie-jelly {
  bottom: 80px;
  right: 10px;
  width: 140px;
  height: 140px;
}
}

/* === MOBILE PHONES (480px and below) === */
@media (max-width: 480px) {
  .lottie-bubbles {
  display: none;
}

.lottie-jelly {
  bottom: 100px;
  right: 5px;
  width: 100px;
  height: 100px;
}
}

/* === ULTRA-SMALL SCREENS (360px and below) === */
@media (max-width: 360px) {
  .lottie-jelly {
  bottom: 100px;
  right: 5px;
  width: 100px;
  height: 100px;
}
}