@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");

/* ===== Theme Variables ===== */
:root {
  --primary-color: #d8ddd8;
  --secondary-color: #18112c;
  --accent-color: #91893e;
  --font-family: 'Mulish', sans-serif;
}

/* ===== Scrollbar Modal ===== */
html, body {
  scrollbar-width: thin;
  scrollbar-color: #2a1f47 #18112c;
}

::-webkit-scrollbar {
  width: 8px;
  background-color: #18112c;
}

::-webkit-scrollbar-thumb {
  background-color: #2a1f47;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #3a2d5f;
}

/* ===== Typography Overrides ===== */
body {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  font-family: var(--font-family);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--primary-color);
  text-transform: lowercase;
}

p {
  color: var(--primary-color);
}

h1,
h2,
.headline {
  font-weight: 300;
}

.or {
  text-transform: lowercase;
}


/* ===== Form Overrides ===== */
.form-control,
.form-select {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  border-color: var(--primary-color);
  box-shadow: none;
}

/* ===== Form Overrides ===== */
.form-control,
.form-select {
  color: var(--primary-color);                   /* light text */
  background-color: var(--secondary-color);      /* dark background */
  border-color: var(--primary-color);            /* light border */
  box-shadow: none;
}

/* ===== Placeholder ===== */
.form-control::placeholder,
.form-select::placeholder {
  color: var(--primary-color) !important;
  opacity: 0.7;
}

/* ===== Input Group (fix cm alignment) ===== */
.input-group .form-control,
.input-group .input-group-text {
  height: 48px;
  border-color: var(--primary-color);
}

.input-group .form-control {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  border-right: none;
  box-shadow: none;
}

.input-group .input-group-text {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  border-left: none;
}

/* ===== Focus state (accent text + accent border) ===== */
.form-control:focus,
.input-group .form-control:focus {
  background-color: var(--secondary-color) !important; /* stay dark */
  color: var(--accent-color) !important;               /* accent text */
  border-color: var(--accent-color) !important;        /* accent border */
  box-shadow: none !important;
  outline: none !important;
}

/* Placeholder while focused */
.form-control:focus::placeholder,
.input-group .form-control:focus::placeholder {
  color: var(--accent-color) !important;
  opacity: 0.7 !important;
}

/* ===== Filled but not focused ===== */
.form-control:not(:focus),
.input-group .form-control:not(:focus),
.form-control:not(:placeholder-shown):not(:focus),
.input-group .form-control:not(:placeholder-shown):not(:focus) {
  background-color: var(--secondary-color) !important; /* dark background */
  color: var(--primary-color) !important;               /* light text */
  border-color: var(--primary-color) !important;        /* light border */
  box-shadow: none !important;
}

/* ===== Prevent Chrome autofill from changing colors ===== */
input:-webkit-autofill,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px var(--secondary-color) inset !important;
  -webkit-text-fill-color: var(--primary-color) !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* ===== Input-group accent handling ===== */
.input-group:focus-within .input-group-text {
  background-color: var(--secondary-color);
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.input-group:not(:focus-within) .input-group-text {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/* ===== Hide number input arrows (cross-browser) ===== */

/* Chrome, Edge, Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* ===== Radio override ===== */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--primary-color);
  background-color: var(--secondary-color); /* color when not checked */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease-in-out;
  vertical-align: middle;
}

/* Hover effect */
input[type="radio"]:hover {
  border-color: var(--accent-color);
}

/* Checked state (perfectly centered inner dot) */
input[type="radio"]:checked::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--accent-color);
  transition: all 0.2s ease-in-out;
}

/* Optional focus ring for accessibility */
input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(145, 137, 62, 0.3);
}

/* ===== Buttons ===== */
.btn-dark,
.btn-solid-fat {
  background: var(--accent-color);
  color: #fff;
  text-transform: lowercase;
}

.btn-outline-dark,
.btn-outline-fat {
  background: var(--primary-color);
  color: var(--secondary-color);
  text-transform: lowercase;
}

.btn-dark:hover,
.btn-solid-fat:hover,
.btn-outline-dark:hover,
.btn-outline-fat:hover {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  transition: all 0.2s ease-in-out;
}

/* ===== Grid Buttons ===== */
.grid-panel button {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.grid-panel button.active {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

/* ===== Misc Elements ===== */
.arrow-icon,
.me-2,
.form-text {
  color: var(--primary-color);
}

.card-body {
    background-color: var(--secondary-color);
}

.measurement-guide img[alt="How to measure adult seat"] {
  display: none !important;
}

.measurement-guide {
  background-image: url("/static/images/adult_seat_moe.4c7cf4c2f8af.png");
}

/* Female body types */
.body-option.body-plum .body-image {
  background-image: url("/static/images/plum_moe.ef3f86c73ad7.png");
}

.body-option.body-pear .body-image {
  background-image: url("/static/images/pear_moe.c336c014a9a3.png");
}

.body-option.body-avocado .body-image {
  background-image: url("/static/images/avocado_moe.955a33b697d2.png");
}

/* Male body type images */
.body-option.body-papaya .body-image {
  background-image: url("/static/images/papaya_moe.1012fdea9120.png");
}

.body-option.body-banana .body-image {
  background-image: url("/static/images/banana_moe.9aa99e00c30a.png");
}

.body-option.body-avocado-male .body-image {
  background-image: url("/static/images/avocado_male_moe.bd85eb2a652f.png");
}

.modal-content {
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

/* ===== Back link ===== */
.back-link {
    color: var(--primary-color) !important;
}

/* ===== Logo Override ===== */
.logo {
  background-image: url("/static/images/logo_icon.ace8d632c923.png");
}