/* make the option list itself a solid white panel */
.nice-select .list {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.1) !important;
  z-index: 1000; /* float it above everything else */
}

/* each option */
.nice-select .list .option {
  background: #fff !important;  /* white background */
  color: #333 !important;       /* dark text */
  padding: 8px 12px !important;
  text-transform: none !important;
}

/* hovered option */
.nice-select .list .option:hover {
  background: #f1f1f1 !important;
}

/* the currently selected item in the dropdown */
.nice-select .list .option.selected {
  background: #e9ecef !important;
  color: #333 !important;
  text-transform: none !important;
}

.img-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1;            /* force a 1:1 aspect ratio */
  background-size: cover;
  background-position: center;
}

#generatedCardContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto; /* center it */
}

#generatedCardContainer img {
  /* fill container up to 300px */
  width: 100%;
  max-width: 300px;
  height: auto;
}

#generatedCardContainer > .mt-2 {
  width: 100%;                /* make the button wrapper full-width */
  display: flex;
  justify-content: center;
}
/* Container: flex with wrap and a small gap */
#bgChoices {
  position: relative;
  display: flex;
  flex-wrap: wrap;    /* <-- allow thumbnails to flow onto multiple lines */
  gap: 8px;
  margin-bottom: 1rem;
  justify-content: center; /* optional: center them if there’s leftover space */
}

/* Thumbnails: give each a fixed (or %‑based) basis so they can wrap */
.bg-thumb {
  flex: 0 1 calc(25% - 8px);         /* 4 per row on large screens */
  max-width: calc(25% - 8px);
  height: auto;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.bg-thumb.selected {
  border-color: #007bff;
  flex: 0 1 300px;
  max-width: 300px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .bg-thumb {
    flex: 0 1 calc(50% - 8px);         /* 2 per row on small screens */
    max-width: calc(50% - 8px);
  }

    .letter-form-wrapper {
        padding: 25px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .letter-form-wrapper .main-title {
        font-size: 1.8em;
    }

    .letter-form-wrapper h3 {
        font-size: 1.4em;
    }

    .main-btn {
        width: 100%;
        margin-top: 15px;
        float: none; /* Remove float for full width buttons on small screens */
        margin-left: 0;
    }

    .next-btn, .prev-btn, .generate-btn {
        margin-bottom: 10px; /* Add some space between stacked buttons */
    }
}

@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/Roboto-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'ShadowsIntoLight';
  src: url('/assets/fonts/ShadowsIntoLight-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'MeieScript';
  src: url('/assets/fonts/MeieScript-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Borel';
  src: url('/assets/fonts/Borel-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Amiri';
  src: url('/assets/fonts/Amiri-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Noto Sans Arabic Condensed';
  src: url('/assets/fonts/NotoSansArabic_Condensed-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* make font‐picker look & behave like color‐picker */
.font-picker {
  display: flex;
  flex-wrap: wrap;           /* allow multiple rows if needed */
  justify-content: center;   /* center them horizontally */
  gap: 10px;                 /* same gap as .color-picker */
  margin-top: 5px;           /* same top margin */
  
  border: 1px solid #ddd;    /* same border */
  padding: 0.5rem;           /* same padding */
  border-radius: 4px;        /* same rounding */
  /* remove scroll‐snap/overflow styling */
  overflow-x: visible;
  scroll-snap-type: none;
}

/* each font tile = a 36×36 swatch instead of a free-form block */
.font-option {
  margin: 0;                 /* gap comes from parent’s gap */
  padding: 0;                /* no extra inside padding */
  
  border: 1px solid #e0e0e0; /* same neutral border */
  border-radius: 8px;        /* same rounding */
  
  display: inline-flex;      /* center content */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* hover/focus exactly like color */
.font-option:hover,
.font-option:focus {
  border-color: var(--theme);
  box-shadow: 0 0 0 0.25rem rgba(var(--theme-rgb), 0.25);
}

/* selected state */
.font-option.selected {
  border-color: var(--theme);
}

/* sample text stays inline and centered */
.font-option span {
  margin: 0;
  font-size: 1rem;
  white-space: nowrap;
}


/* spinner */

.spinner {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

#step4 {
  position: relative;
}

/* when the spinner is moved *into* step4, center it there instead */
#step4 .spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* when the spinner is moved *into* bgChoices, center it there instead */
#bgChoices .spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spinner-border {
  /* make the circle bigger */
  width: 3rem;         /* ≈48px diameter */
  height: 3rem;        /* must match width */
  border-width: 0.4em; /* a bit thicker so it’s still visible */
  /* keep the rotation animation */
  animation: spinner-border .75s linear infinite;
}

/* reseller purchase */
.step {
  display: none;
}
.step.active {
  display: block; /* or flex, grid, whatever your layout needs */
}

.step.active[data-step="1"] .prev-btn {
  display: none;
}

/* Style your font picker  */
.font-picker {
  border: 1px solid #ddd;   /* thin neutral border */
  padding: 0.25rem;          /* space between items & border */
  border-radius: 2px;       /* optional rounding */
}

.font-option {
  padding: 0.25rem 0.5rem;
  margin: 0.25rem;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
}
.font-option.selected {
  border-color: #007bff;
}
.font-option span {
  display: block;
  font-size: 1rem;
  margin-top: 0.1rem;
}

/* the semi‑transparent page‑cover */
#noCreditOverlay, #reloadPageOverlay {
  display: none;
  position: fixed; top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.6);
  z-index: 9998;
}

/* the centered popup box */
#noCreditPopup, #reloadPagePopup {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 90%; max-width: 360px;
  padding: 1.5rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
#noCreditPopup h3, #reloadPagePopup h3 {
  margin-top: 0;
  font-size: 1.25rem;
}
#noCreditCloseButton, #reloadPageButton {
  margin-top: 1rem;
}
#reloadPageConfirmButton {
  margin-top: 1rem;
}

/* credit balance */
.theme-creditBalance {
  background-color: var(--theme);
  color: var(--white);
  border-radius: 8px;
  padding: 0.25rem;
}

    /* ─── ICON GRID & CARD STYLES ───────────────────────────────────────────── */
    .icon-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: center;
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
    .icon-card {
      width: 120px;        /* adjust as needed */
      height: 120px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background-color: #fff;
      text-align: center;
      padding: 0.75rem;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .icon-card:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }
    .icon-card.selected {
      border-color: var(--theme) !important;
      background-color: rgba(var(--theme-rgb), 0.1);
    }
    .icon-card i {
      font-size: 2.2rem;
      margin-bottom: 0.5rem;
    }
    .icon-card span {
      font-size: 0.8rem;
      font-weight: 500;
      color: #444;
    }

    /* Gender‐based icon colors */
    .male-icon i {
      color: #1976d2; /* blue */
    }
    .female-icon i {
      color: #c2185b; /* pink */
    }
    .neutral-icon i {
      color: #388e3c; /* green */
    }

	/* Partners (hearts) = deep red */
	.category-partners i {
	  color: #E53935;   /* or whatever shade of red you prefer */
	}
	.category-partners {
	  background-color: rgba(229, 57, 53, 0.1);  /* very light red background */
	  border-color: #E53935;                    /* red border when “.selected” */
	}

	/* Nuclear Family (homes) = forest green */
	.category-nuclearFamily i {
	  color: #388E3C;  /* a green */
	}
	.category-nuclearFamily {
	  background-color: rgba(56, 142, 60, 0.1);  
	  border-color: #388E3C;
	}

	/* Extended Family (trees) = deep teal */
	.category-extendedFamily i {
	  color: #00796B;  /* teal‐ish */
	}
	.category-extendedFamily {
	  background-color: rgba(0, 121, 107, 0.1);
	  border-color: #00796B;
	}

	/* Support (hands) = orange */
	.category-support i {
	  color: #F57C00;  /* orange */
	}
	.category-support {
	  background-color: rgba(245, 124, 0, 0.1);
	  border-color: #F57C00;
	}

	/* Friends (user‐friends) = purple */
	.category-friends i {
	  color: #8E24AA;  /* purple */
	}
	.category-friends {
	  background-color: rgba(142, 36, 170, 0.1);
	  border-color: #8E24AA;
	}

	/* Professional (briefcase) = navy */
	.category-professional i {
	  color: #1565C0;  /* blue */
	}
	.category-professional {
	  background-color: rgba(21, 101, 192, 0.1);
	  border-color: #1565C0;
	}

	/* Others (ellipsis) = gray */
	.category-others i {
	  color: #757575;  /* gray */
	}
	.category-others {
	  background-color: rgba(117, 117, 117, 0.1);
	  border-color: #757575;
	}

	/* When you add .selected to a card, override with a slightly darker tint */
	.category-partners.selected {
	  background-color: rgba(229, 57, 53, 0.2);
	}
	.category-nuclearFamily.selected {
	  background-color: rgba(56, 142, 60, 0.2);
	}
	.category-extendedFamily.selected {
	  background-color: rgba(0, 121, 107, 0.2);
	}
	.category-support.selected {
	  background-color: rgba(245, 124, 0, 0.2);
	}
	.category-friends.selected {
	  background-color: rgba(142, 36, 170, 0.2);
	}
	.category-professional.selected {
	  background-color: rgba(21, 101, 192, 0.2);
	}
	.category-others.selected {
	  background-color: rgba(117, 117, 117, 0.2);
	}

	/* Visual distinction for male/female relationships  */
	.female-relationship {
		background-color: #ffe0f0 !important; /* Light pink for female */
		color: #c2185b !important; /* Darker pink text */
	}

	.male-relationship {
		background-color: #e0f2f7 !important; /* Light blue for male */
		color: #1976d2 !important; /* Darker blue text */
	}

	/* ─── Make a selected relationship-card stand out ─────────────────── */
	.relationship-card.selected {
	  border: 2px solid var(--theme);         /* bold colored border */
	  background-color: rgba(var(--theme-rgb), 0.15);  
	  /* (you can pick any tint you like; this uses the same --theme color) */
	}

	.relationship-card.selected i {
	  color: var(--theme) !important;
	}

	.chosen-category-item {
	  display: none;
	  margin: 0.5rem 0;
	  font-weight: 500;
	}

	.chosen-category-item-label {
	  color: var(--theme);
	  cursor: pointer;
	}

	/* ─── “Back” link inside #relationshipIcons ─────────────────── */

	#relationshipIcons {
	  position: relative; /* so that .subgrid-back can be absolutely positioned */
	}

	/* Ensure the parent (#relationshipIcons) is position:relative */
	.subgrid-container {
	  position: relative;
	}

	.subgrid-back:hover {
	  text-decoration: underline;
	}

	.subgrid-back-inline {
	  display: inline-block;     /* behave like a link/button */
	  margin-bottom: 0.75rem;    /* space between “< Back” and the grid */
	  font-size: 0.9rem;
	  font-weight: 500;
	  color: var(--theme);       /* keep your theme color */
	  cursor: pointer;
	  user-select: none;
	}

	.subgrid-back-inline:hover {
	  text-decoration: underline;
	}

	/* ─── REASON‐CATEGORY ICON COLORS & BACKGROUNDS ─────────────────────── */

	/* Love & Affection (hearts) = deep red */
	.reason-cat-love i {
	  color: #E53935; /* red */
	}
	.reason-cat-love {
	  background-color: rgba(229, 57, 53, 0.1); /* very light red */
	  border-color:    #E53935;                 /* red border when .selected */
	}
	.reason-cat-love.selected {
	  background-color: rgba(229, 57, 53, 0.2);
	}

	/* Family Matters (people) = lime */
	.reason-cat-familymatters i {
	  color: #00FF00; /* lime */
	}
	.reason-cat-familymatters {
	  background-color: rgba(0, 255, 0, 0.1); /* lime */
	  border-color:    #00FF00;                 /* lime border when .selected */
	}
	.reason-cat-familymatters.selected {
	  background-color: rgba(0, 255, 0, 0.2);
	}

	/* Friendship & Just Because (handshake) = purple */
	.reason-cat-friendship i {
	  color: #8E24AA; /* purple */
	}
	.reason-cat-friendship {
	  background-color: rgba(142, 36, 170, 0.1);
	  border-color:    #8E24AA;
	}
	.reason-cat-friendship.selected {
	  background-color: rgba(142, 36, 170, 0.2);
	}

	/* Support & Sympathy (hands‐helping) = forest green */
	.reason-cat-support i {
	  color: #388E3C; /* green */
	}
	.reason-cat-support {
	  background-color: rgba(56, 142, 60, 0.1);
	  border-color:    #388E3C;
	}
	.reason-cat-support.selected {
	  background-color: rgba(56, 142, 60, 0.2);
	}

	/* Thanks & Apologies (thumbs‐up) = golden yellow */
	.reason-cat-thanks i {
	  color: #FBC02D; /* yellow */
	}
	.reason-cat-thanks {
	  background-color: rgba(251, 192, 45, 0.1);
	  border-color:    #FBC02D;
	}
	.reason-cat-thanks.selected {
	  background-color: rgba(251, 192, 45, 0.2);
	}

	/* Celebrations (birthday‐cake) = hot pink */
	.reason-cat-celebrations i {
	  color: #D81B60; /* pink */
	}
	.reason-cat-celebrations {
	  background-color: rgba(216, 27, 96, 0.1);
	  border-color:    #D81B60;
	}
	.reason-cat-celebrations.selected {
	  background-color: rgba(216, 27, 96, 0.2);
	}

	/* Life Events (baby) = teal */
	.reason-cat-lifeEvents i {
	  color: #00796B; /* teal */
	}
	.reason-cat-lifeEvents {
	  background-color: rgba(0, 121, 107, 0.1);
	  border-color:    #00796B;
	}
	.reason-cat-lifeEvents.selected {
	  background-color: rgba(0, 121, 107, 0.2);
	}

	/* Work Events (briefcase) = navy blue */
	.reason-cat-workEvents i {
	  color: #1565C0; /* blue */
	}
	.reason-cat-workEvents {
	  background-color: rgba(21, 101, 192, 0.1);
	  border-color:    #1565C0;
	}
	.reason-cat-workEvents.selected {
	  background-color: rgba(21, 101, 192, 0.2);
	}

	/* Special Days (calendar‐day) = orange */
	.reason-cat-specialDays i {
	  color: #F57C00; /* orange */
	}
	.reason-cat-specialDays {
	  background-color: rgba(245, 124, 0, 0.1);
	  border-color:    #F57C00;
	}
	.reason-cat-specialDays.selected {
	  background-color: rgba(245, 124, 0, 0.2);
	}

	/* My Events (star) = indigo */
	.reason-cat-myEvents i {
	  color: #3949AB; /* indigo */
	}
	.reason-cat-myEvents {
	  background-color: rgba(57, 73, 171, 0.1);
	  border-color:    #3949AB;
	}
	.reason-cat-myEvents.selected {
	  background-color: rgba(57, 73, 171, 0.2);
	}

	/* Other (ellipsis‐h) = gray */
	.reason-cat-otherReasons i {
	  color: #757575; /* gray */
	}
	.reason-cat-otherReasons {
	  background-color: rgba(117, 117, 117, 0.1);
	  border-color:    #757575;
	}
	.reason-cat-otherReasons.selected {
	  background-color: rgba(117, 117, 117, 0.2);
	}

	/* ─── STYLE CHOSEN REASON ICON (selected) ───────────────────────────── */

	.reason-card.selected {
	  border:           2px solid var(--theme);
	  background-color: rgba(var(--theme-rgb), 0.15);
	}
	.reason-card.selected i {
	  color: var(--theme) !important;
	}

	/* “You selected: …” box */
	#chosenReasonDisplay {
	  display: none;
	  margin: 0.5rem 0;
	  font-weight: 500;
	}
	#chosenReasonLabel {
	  color: var(--theme);
	  cursor: pointer;
	}

/* ─── STYLE CATEGORY ICON COLORS & BACKGROUNDS ───────────────────────── */

	/* Fiery (heart) = deep red */
	.style-cat-fiery i {
	  color: #E53935;
	}
	.style-cat-fiery {
	  background-color: rgba(229,57,53, 0.1);
	  border-color:    #E53935;
	}
	.style-cat-fiery.selected {
	  background-color: rgba(229,57,53, 0.2);
	}

	/* Intimate (kiss) = hot pink */
	.style-cat-intimate i {
	  color: #D81B60;
	}
	.style-cat-intimate {
	  background-color: rgba(216,27,96, 0.1);
	  border-color:    #D81B60;
	}
	.style-cat-intimate.selected {
	  background-color: rgba(216,27,96, 0.2);
	}

	/* Inspirational (lightbulb) = golden */
	.style-cat-inspirational i {
	  color: #FBC02D;
	}
	.style-cat-inspirational {
	  background-color: rgba(251,192,45, 0.1);
	  border-color:    #FBC02D;
	}
	.style-cat-inspirational.selected {
	  background-color: rgba(251,192,45, 0.2);
	}

	/* Mood (smile) = purple */
	.style-cat-mood i {
	  color: #8E24AA;
	}
	.style-cat-mood {
	  background-color: rgba(142,36,170, 0.1);
	  border-color:    #8E24AA;
	}
	.style-cat-mood.selected {
	  background-color: rgba(142,36,170, 0.2);
	}

	/* Family‑oriented (users) = forest green */
	.style-cat-familyOriented i {
	  color: #388E3C;
	}
	.style-cat-familyOriented {
	  background-color: rgba(56,142,60, 0.1);
	  border-color:    #388E3C;
	}
	.style-cat-familyOriented.selected {
	  background-color: rgba(56,142,60, 0.2);
	}

	/* Formal / Polite (briefcase) = navy */
	.style-cat-formalPolite i {
	  color: #1565C0;
	}
	.style-cat-formalPolite {
	  background-color: rgba(21,101,192, 0.1);
	  border-color:    #1565C0;
	}
	.style-cat-formalPolite.selected {
	  background-color: rgba(21,101,192, 0.2);
	}

	/* Voice & Persona (microphone) = teal */
	.style-cat-voicePersona i {
	  color: #00796B;
	}
	.style-cat-voicePersona {
	  background-color: rgba(0,121,107, 0.1);
	  border-color:    #00796B;
	}
	.style-cat-voicePersona.selected {
	  background-color: rgba(0,121,107, 0.2);
	}

	/* ─── STYLE CARD (selected) ───────────────────────────────────────────── */
	.style-card.selected {
	  border:           2px solid var(--theme);
	  background-color: rgba(var(--theme-rgb), 0.15);
	}
	.style-card.selected i {
	  color: var(--theme) !important;
	}

	/* “You selected: …” box for style */
	#chosenStyleDisplay {
	  display: none;
	  margin: 0.5rem 0;
	  font-weight: 500;
	}
	#chosenStyleLabel {
	  color: var(--theme);
	  cursor: pointer;
	}

	/* Container to lay out swatches in a row with consistent spacing */
	.color-picker {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;   /* center them horizontally */
	  gap: 10px;
	  margin-top: 5px;
	  
	  border: 1px solid #ddd;   /* thin neutral border */
	  padding: 0.5rem;          /* space between swatches & border */
	  border-radius: 4px;       /* optional rounding */
	}

	/* Each color "swatch" */
	.color-option {
	  width: 36px;
	  height: 36px;
	  border: 2px solid #e0e0e0;        /* same border as .form-select */
	  border-radius: 8px;               /* same rounding as inputs/selects */
	  cursor: pointer;
	  transition: border-color 0.3s ease, box-shadow 0.3s ease;
	}

	/* Hover/focus state to match .form-select:focus look */
	.color-option:hover,
	.color-option:focus {
	  border-color: var(--theme);
	  box-shadow: 0 0 0 0.25rem rgba(var(--theme-rgb), 0.25);
	}

	/* “Selected” swatch gets a thicker border in the theme color */
	.color-option.selected {
	  border: 4px solid #07e6ff; /* blueish */
	}

	/* If you want a visible focus outline when tabbing */
	.color-option:focus {
	  outline: none; /* we’re using box-shadow to show focus instead */
	}

.letter-form-wrapper {
    background-color: #e9f7fb !important; /* Added !important */
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; /* Added !important */
    margin-top: 50px;
    margin-bottom: 50px;
}

.letter-form-wrapper .main-title {
    text-align: center;
    margin-bottom: 30px;
    color: var(--heading-color); /* Assuming --heading-color is defined in your theme */
    font-size: 2.2em;
    font-weight: 700;
    font-family: 'MeieScript', cursive;  /* ← here’s the cursive font */
}

.letter-form-wrapper h3 {
    color: var(--theme); /* Using --theme for step titles */
    margin-bottom: 25px;
    font-size: 1.6em;
    font-weight: 600;
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    font-weight: 500;
    color: var(--paragraph-color); /* Assuming --paragraph-color is defined */
    margin-bottom: 8px;
    display: block;
}

.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    padding: 12px 15px;
    font-size: 1em;
    color: #333;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--theme);
    box-shadow: 0 0 0 0.25rem rgba(var(--theme-rgb), 0.25); /* Assuming --theme-rgb is defined */
}

.main-btn {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 30px;
    border-radius: 8px;
    background-color: var(--theme) !important; /* Added !important */
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
    margin-top: 20px;
}

.main-btn:hover {
    background-color: var(--theme-dark) !important; /* Added !important */
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.next-btn, .prev-btn {
    float: right; /* Position next/prev buttons to the right */
    margin-left: 10px; /* Spacing between buttons */
}

.prev-btn {
    background-color: #6c757d !important; /* Added !important */
}

.prev-btn:hover {
    background-color: #5a6268 !important; /* Added !important */
}

#step2NextBuy.btn.btn-success {
  /* Bootstrap’s green */
  background-color: #28a745 !important;
  border-color:    #28a745 !important;
  color:           #fff     !important;
}

#paypalBlock,
#qrBlock {
   color: #7000fe;
  padding: 1rem; 
}

/* Specific style for the Generate Letter button */
.generate-btn {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 30px;
  border-radius: 8px;
  color: #ffffff; /* Ensure the label is white against the gradient */
  background: linear-gradient(90deg, var(--theme) 0%, var(--secondary-color) 100%) !important;
  box-shadow: 0 8px 20px rgba(var(--theme-rgb), 0.3);
  border: none;
  cursor: pointer;
  float: right;
  margin-left: 10px;
  /* If you need it above other elements: */
  position: relative;
  z-index: 1;
}

.generate-btn:hover:not(:disabled) {
  background: linear-gradient(90deg, var(--secondary-color) 0%, var(--theme) 100%) !important;
  box-shadow: 0 10px 25px rgba(var(--theme-rgb), 0.4);
}

/* Optional “disabled” state so you can see it’s not clickable */
.generate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Styles for the output box */
.output-box {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    min-height: 150px;
    white-space: pre-wrap; /* Preserves whitespace and line breaks */
    font-family: 'Inter', sans-serif; /* Consistent font */
    color: #333;
    line-height: 1.6;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

.error-message {
    color: #dc3545; /* Bootstrap danger color */
    font-weight: 500;
    text-align: center;
    margin-top: 15px;
}

/* --- Push Button Radio Set --- */
.radio-push-group {
	display: flex; /* Arrange buttons in a row */
	border: 1px solid #007bff; /* Blue border for the entire group */
	border-radius: 5px;
	overflow: hidden; /* Ensures inner borders are clean */
	margin: 0 auto; /* Center the button group */
	box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2); /* Subtle blue shadow */
	background-color: #fff;     /* ← ensure the entire “row” is solid white */
	width: 100%;        /* <-- fill the parent */
	max-width: 100%;    /* <-- never exceed it */
}

.radio-push-group label {
	padding: 10px 20px;
	font-size: 14px;
	background-color: #fff; /* White background for unselected */
	color: #007bff; /* Blue text for unselected */
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
	border-right: 1px solid #007bff; /* Separator line between buttons */
	text-align: center;
	flex-grow: 1; /* Allow buttons to expand evenly */
	min-width: 0;       /* <-- lets the flex items shrink */
}

.radio-push-group label:last-child {
	border-right: none; /* No separator on the last button */
}

.radio-push-group input[type="radio"] {
	display: none; /* Hide the actual radio input */
}

/* Style when a push button is checked */
.radio-push-group input[type="radio"]:checked + label {
	background-color: #007bff; /* Blue background for checked */
	color: #fff; /* White text for checked */
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); /* Inner shadow for depth */
}

/* Hover effect for unselected buttons */
.radio-push-group label:hover:not(.checked) {
	background-color: #e6f0ff; /* Light blue on hover */
}

.radio-push-group input[type="radio"]:checked + label {
  /* …your current checked styles… */
  position: relative;  /* ← add */
  z-index: 1;          /* ← add */
  margin-bottom: -1px; /* ← add */
}

.radio-push-group label:not(:last-child) {
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
}

/* Reports */
.loading-message {
	color: #007BFF;
	margin-top: 10px;
	display: none;
}
#results-container {
	margin-top: 30px;
}
/* Custom header background color for table */
#results-container thead th {
    background-color: #4a4e69; /* Darker blue/grey */
    color: white;
}

.no-results {
	text-align: center;
	color: #666;
	padding: 20px;
}

/* Style for the total amount display */
.total-amount-display {
	font-size: 1.25em;
	font-weight: bold;
	text-align: right;
	margin-bottom: 20px; /* Added margin-bottom to separate from table/cards */
	padding: 10px;
	background-color: #e9ecef;
	border-radius: 5px;
	border: 1px solid #dee2e6;
}

/* Scope to only the Month and Year dropdowns ; these are needed because on small screens the nice-select down arrow overlaps with the list content */
#month-select + .nice-select,
#year-select  + .nice-select {
  position: relative;
  z-index: 1;
}

/* When open, lift just those two up */
#month-select + .nice-select.open,
#year-select  + .nice-select.open {
  z-index: 9999;
}

/* Also ensure their popup lists float above */
#month-select + .nice-select .list,
#year-select  + .nice-select .list {
  position: absolute; /* should already be */
  z-index: 9999;
}


/* ---  STYLES FOR MOBILE CARD LAYOUT --- */
/* Hide the table on small screens and show cards */
@media (max-width: 767.98px) {
    .table-responsive-md { display: none !important; }

    .mobile-cards .card {
        border: 1px solid #ddd;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        border-radius: 8px;
    }

    .mobile-cards .card-body p {
        margin-bottom: 5px;
        font-size: 0.95em;
    }

    .mobile-cards .card-body strong {
        display: inline;
        min-width: 0;
    }

    .mobile-cards .toggle-details {
        margin-top: 10px;
        font-size: 0.85em;
        padding: 5px 10px;
    }

	.total-cost-display {
		text-align: left; /* Align total amount to left on small screens */
	}
}

/* Show table on medium+ screens, hide cards */
@media (min-width: 768px) {
    .mobile-cards { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────
   Sales‐data table inside #reseller-perf only
────────────────────────────────────────────────────────────── */
#reseller-perf #dataDisplay {
    background-color: navy; /* Sales data table background is navy blue */
    color: white;           /* Text color inside the navy blue container is white */
    padding: 20px;
    border-radius: 8px;     /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 600px;       /* Limit width on large screens */
    box-sizing: border-box; /* Include padding in width */
}

#reseller-perf #dataDisplay table {
    width: 100%;
    border-collapse: collapse;    /* Clean collapsed borders */
    margin-top: 15px;
}

#reseller-perf #dataDisplay th,
#reseller-perf #dataDisplay td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

#reseller-perf #dataDisplay th {
    background-color: #001f4d; /* Darker navy for headers */
    font-weight: bold;
}

#reseller-perf #dataDisplay tr:last-child td {
    border-bottom: none;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  #reseller-perf #dataDisplay {
      padding: 15px;
  }
  #reseller-perf #dataDisplay th,
  #reseller-perf #dataDisplay td {
      padding: 8px;
      font-size: 0.9em;
  }
}

/* ──────────────────────────────────────────────────────────────
   grouped name and gender
────────────────────────────────────────────────────────────── */

.input-and-icon-wrapper {
	display: flex;
	align-items: center;
	gap: 10px; /* Space between input and icon */
	flex-grow: 1; /* Allow this wrapper to take available space within .form-group */
	flex-wrap: nowrap; /* Crucial: prevent the input and icon from wrapping within this group */
	min-width: 0; /* Allow flex item to shrink below its content size */
}

.gender-icon-container {
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: transform 0.2s ease;
	padding: 8px; /* Add padding to make it easier to click */
	border-radius: 8px; /* Rounded corners for the clickable area */
	background-color: #f0f2f5; /* Light background for the icon container */
	border: 1px solid #d1d5db;
	flex-shrink: 0; /* Prevent the icon container from shrinking */
}
.gender-icon-container:hover {
	transform: scale(1.05);
	background-color: #e2e4e7;
}
.gender-icon-container i { /* Target Font Awesome icons */
	font-size: 24px; /* Size for Font Awesome icons */
	color: #6b7280; /* Default icon color */
	transition: color 0.3s ease; /* Smooth transition for color */
}
.gender-icon-container.male i.male-icon { /* Specific targeting for male icon when container is male */
	color: #3b82f6; /* Blue for male */
}
.gender-icon-container.female i.female-icon { /* Specific targeting for female icon when container is female */
	color: #ec4899; /* Pink for female */
}

/* Responsive adjustments */
@media (max-width: 480px) {
	.input-and-icon-wrapper {
		width: 100%; /* Ensure the new wrapper takes full width when stacked */
		max-width: 100%; /* Ensure it doesn't exceed parent width */
		justify-content: flex-start; /* Align contents to the start */
	}
	.gender-icon-container {
		/* No specific width needed here, it will size to its content */
		/* Removed the previous media query rule for width: 100% on .gender-icon-container */
		justify-content: center; /* Keep icon centered within its own container */
	}
}

/* ─── Override category color for relationship icons based on gender ─── */
.relationship-card.male-icon i {
  color: #1976d2 !important;    /* blue */
}
.relationship-card.female-icon i {
  color: #c2185b !important;    /* pink */
}
.relationship-card.neutral-icon i {
  color: #388e3c !important;    /* green */
}

/* Cookie Warning */
.cookie-warning {
    background-color: rgba(0, 0, 0, 0.8); /* Dark semi-transparent background */
    color: #ffffff; /* White text for high contrast */
    padding: 20px; /* Slightly larger padding for readability */
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.5); /* Slightly darker shadow for better visibility */
    font-size: 16px; /* Slightly larger font for readability */
    line-height: 1.5; /* Improve line spacing */
}

.cookie-warning a {
    color: #00cfff; /* Bright cyan color for the link */
    text-decoration: underline; /* Ensure the link is noticeable */
}

.cookie-warning a:hover {
    color: #008cba; /* Slightly darker color on hover */
}

.cookie-warning button {
    background-color: #00cfff; /* Match the link color */
    color: #ffffff;
    border: none;
    padding: 10px 25px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
    margin-left: 10px; /* Add space between button and text */
}

.cookie-warning button:hover {
    background-color: #008cba; /* Darker blue on hover */
}