@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

/* ===== Theme Variables ===== */
:root {
  --primary-color: #000000;
  --secondary-color: #fff;
  --accent-color: #3a3a3a;
  --font-family: 'Poppins', sans-serif;
  --radius: 0px;
}

/* ===== 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, h6 {
  color: var(--primary-color);
      font-size: 1.8rem;
}

.h5, h5 {
    font-size: 1.1rem;
}

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

a {
    color: var(--accent-color);
}

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

.headline {
  font-size: 2.7rem;

  display: inline-block;
  white-space: nowrap;
  overflow: hidden;

  width: 0;
  animation: typing 3s steps(30, end) forwards;
}

@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

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

/* ===== 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: 40px;
  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);
}

/* Apply the accent color to sliders */
.measurement-controls input[type="range"] {
    accent-color: var(--accent-color);
}

/* ===== Buttons ===== */
.btn-solid-fat,
.btn-outline-dark {
  background: var(--secondary-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: var(--radius) !important;
  font-weight: 500;
}

.btn-dark,
.btn-outline-fat {
  background: var(--primary-color);
  color: var(--secondary-color);
  border-radius: var(--radius) !important;
  font-weight: 500;
}

.btn-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;
}

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

.feedback-btn {
  color: var(--accent-color);
}

#confirmContinueModal .confirm-buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 equal columns */
    gap: 12px;
    width: 100%;
    margin-top: 1rem;
}

/* Make buttons identical in shape */
#confirmContinueModal .confirm-buttons-grid .btn {
    width: 100%;
    padding: 12px 0 !important;
    border-radius: 0 !important;
    text-align: center;
}

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

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

/* Containers */
.content,
.form-container,
.result-container {
  border-radius: 0px;
  padding: 1rem;
}

.form-container p {
    margin-bottom: 12px;
}

/* ===== 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");
}

/* override figure when model-has-png is present on the stack */
.body-model-stack.model-has-png .png-bottom-layer {
    background-image: url("/static/bodyshape/body-base-white.d69d32195b71.png");
}

.body-model-stack.model-has-png .png-top-layer {
    background-image: url("/static/bodyshape/body-top-dark.f6b39f9555de.png");
}

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

#sizemeModalClose {
    background: none;
    color: #000;
    font-size: 3rem;
}

.grid button {
  padding: 6px 8px;     /* smaller interior spacing */
  font-size: 14px;      /* smaller text */
  min-width: 35px;      /* narrower buttons */
  min-height: 35px;     /* shorter buttons */
  border-radius: 0px;
}

.grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* Size Scales*/
.size-scale,
.size-scale * {
    color: #000 !important;
}

/* pointer and track in white */
.size-scale .track {
    background-color: #000;
}

.size-scale .pointer {
  border-top-color: #000; /* or white */
}

.modal-content .btn-primary,
.modal-content button[type="submit"] {
  background-color: var(--secondary-color) !important;
  border: 1px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  border-radius: 0 !important;
}

.modal-content .btn-primary:hover,
.modal-content button[type="submit"]:hover {
  background-color: var(--primary-color) !important;
  color: var(--secondary-color) !important;
  border-color: var(--primary-color) !important;
  transition: all 0.2s ease-in-out;
}

.modal-body {
  text-align: center;
}

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

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

.add-to-cart {
    position: relative;
    font-size: 0;
}

.add-to-cart::after {
    content: "Add to Cart";
    font-size: 1rem;
    font-weight: 500;
}