/* =================================
   FONTS
================================= */
@font-face {
  font-family: "good-timing";
  src: url("../fonts/geom-graphic-semi-bold-it.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "mont-bold";
  src: url("../fonts/inter-bold.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "mont-med";
  src: url("../fonts/inter-medium.woff2") format("woff2");
  font-display: swap;
}

/* =================================
   CSS VARIABLES & RESET
================================= */

/*
  BREAKPOINTS (desktop-first, max-width):
  Tier 1: >= 2100px        → large desktop (2K and above)
  Tier 2: 1024px – 2099px  → standard desktop / laptop / 1080p
  Tier 3: 700px  – 1023px  → tablet / small laptop
  Tier 4: <= 699px          → mobile (single column)
*/

:root {
  /* ── Colours ── */
  --bg: #0f0914;
  --gold: #eaa40a;
  --purple: #620ca5;
  --box-purple: #21122e;
  --dark-purple: #18142d;
  --border: #2a2241;
  --white: #e8e8e8;
  --grey: #b5a8c8;
  --transition: all 0.3s ease;

  /* ── Shape & Shadow ── */
  --radius-small: 5px;
  --radius-medium: 15px;
  --radius-large: 20px;
  --shadow-purple: 0px 0px 120px -35px rgba(173, 85, 255, 0.8);
  --shadow-gold: 0px 0px 6px rgba(234, 165, 34, 0.7);
  --gradient-box: linear-gradient(180deg, #21122e 0%, #18142d 100%);
  --gradient-box-alt: linear-gradient(90deg, #21122e 0%, #18142d 100%);

  /* ── Typography ── */
  --font-base: 16px;
  --font-family: "mont-med", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ── Container widths per tier ── */
  --wrapper-width: 1400px;       /* Tier 1: >= 2100px */
  --wrapper-width-small: 900px;  /* Tier 1: small variant */
}

/* Tier 2: 1024px – 2099px */
@media (max-width: 2099px) {
  :root {
    --wrapper-width: 1100px;
    --wrapper-width-small: 800px;
  }
}

/* Tier 3: 700px – 1023px */
@media (max-width: 1023px) {
  :root {
    --wrapper-width: 720px;
    --wrapper-width-small: 640px;
  }
}

/* Tier 4: <= 699px */
@media (max-width: 699px) {
  :root {
    --wrapper-width: 100%;
    --wrapper-width-small: 100%;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  color: var(--white);
  background-color: var(--bg);
  font-family: var(--font-family);
  font-size: var(--font-base);
}

main {
  flex: 1;
  padding-bottom: 200px;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  z-index: -1;
}

body.footer-bg-loaded::before {
  background: url("../images/footer/footer-bg.jpg") no-repeat center bottom/100% auto;
}

body.page-myaccount::before,
body.page-forgotpassword::before,
body.page-search::before,
body.page-cart::before,
body.page-checkout::before {
  opacity: 0.2;
}

/* =================================
   TYPOGRAPHY
================================= */
h1, h2, h3, h4, h5 {
  color: var(--white);
  margin: 0;
}

p, a {
  line-height: 1.5;
}

a {
  text-decoration: none;
  transition: var(--transition);
}

/* =================================
   LAYOUT CONTAINERS
================================= */
.content-wrapper,
.content-wrapper-small {
  width: 100%;
  padding: 0 14px;
  margin: 0 auto;
}

.content-wrapper {
  max-width: var(--wrapper-width);
}

.content-wrapper-small {
  max-width: var(--wrapper-width-small);
}

.content-wrapper.error {
  padding: 40px 0;
}


/* =================================
   FORMS & INPUTS
================================= */
.btn {
  border: 0;
  color: #FFFFFF;
  font-size: 16px;
  line-height: 14px;
  font-family: mont-bold;
  box-shadow: 0px 0px 6px 1px rgba(45, 54, 68, 0.15);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-medium);
  padding: 12px 34px;
  background-color: #18142d;
  border: 3px solid var(--gold);
  color: #fff;
  transition: var(--transition);
}

.btn:hover {
  color: var(--gold);
  filter: drop-shadow(var(--shadow-gold));
}

.btn-cart {
  border-color: #4a4468;
}

.btn-cart:hover {
  border-color: #6b5fa8;
  color: var(--gold);
  filter: none;
}

.btn.stripe {
  background-color: #6772e5;
  box-shadow: 0px 0px 6px 1px rgba(45, 54, 68, 0.12);
}

.btn:hover.stripe {
  background-color: #5a66e3;
}

.btn:disabled {
  background: var(--bg);
  border: 2px solid #969391;
  color: #969391;
}

.btn:disabled:hover {
  color: var(--white);
  filter: none;
}

.btn.tab-prev {
  display: none;
}

.link {
  font-family: mont-bold;
  text-decoration: none;
  color: var(--white);
  font-size: 16px;
  transition: var(--transition);
}

.link:hover {
  color: var(--gold);
}

.btn-text {
  color: var(--gold);
  text-decoration: none;
  font-family: mont-bold;
  transition: var(--transition);
}

.btn-text:hover {
  color: var(--white);
}

/* Form Elements */
.form-radio-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.form-radio-checkbox label {
  flex: 0 1 calc(50% - 12px);
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
}

input[type="radio"].option,
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg);
  border: 3px solid var(--purple);
  cursor: pointer;
  transition: var(--transition);
}

input[type="radio"].option {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border-width: 4px;
  margin: 0;
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-small);
  border-width: 3px;
  margin: 0 4px 0 0;
  outline: none;
}

input[type="radio"].option:checked,
input[type="checkbox"]:checked {
  background-color: var(--gold);
  border-color: var(--gold);
}

.custom-checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: var(--bg);
  border: 3px solid var(--purple);
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: var(--transition);
  display: inline-block;
  vertical-align: middle;
}

.custom-checkbox:checked {
  background-color: var(--purple);
  box-shadow: 0 0 5px rgba(98, 12, 165, 0.6);
}

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-top: 12px;
  padding-left: 5px;
}

.checkbox-inline span {
  color: var(--white);
  font-size: 14px;
  user-select: none;
}

/* Form Inputs */
.form .form-group {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.form .form-group .col {
  width: 100%;
}

.form .form-select {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border: 2px solid var(--border);
  background-color: var(--bg);
  border-radius: 8px;
  font-family: mont-bold;
  color: var(--white);
  font-size: 14px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.form .form-select select {
  padding: 5px 5px 5px 0;
  border: 0;
  font-weight: 500;
  font-size: 14px;
  color: var(--grey);
  background-color: var(--bg);
  outline: none;
  cursor: pointer;
}

.form .form-select select option {
  color: var(--white);
}

.form .form-label {
  display: block;
  padding: 30px 0 10px 3px;
  font-family: mont-bold;
  font-size: 16px;
  color: var(--grey);
}

.form .form-label-2 {
  display: block;
  padding: 14px 0 5px 0;
  font-weight: 500;
  font-size: 16px;
  color: var(--grey);
}

.form .form-label-3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: mont-bold;
  padding: 30px 0 10px 3px;
  color: var(--grey);
}

.form .form-input {
  padding: 10px 16px;
  border: 3px solid var(--border);
  border-radius: var(--radius-medium);
  font-size: 16px;
  font-family: "mont-med";
  background-color: var(--bg);
  color: #fff;
  resize: none;
  transition: var(--transition);
}

textarea.form-input {
  font-family: "mont-med";
}

input[type="number"].form-input {
  padding: 6px;
}

.form .form-input::placeholder {
  color: #949095;
}

.form .form-input.expand {
  width: 100%;
}

select.form-input.expand {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.form .form-input:focus,
.form .form-select:focus,
.form .form-select select:focus {
  border-color: var(--gold);
  outline: none;
}

.form .checkbox-list {
  display: flex;
  flex-wrap: wrap;
}

.form .checkbox-list input:checked {
  background-color: var(--gold);
  border-color: var(--gold);
}

.form .checkbox-list input:disabled {
  border-color: #511d79;
  cursor: not-allowed;
}

.form .checkbox-list label {
  display: inline-flex;
  align-items: center;
  padding: 10px 15px 0 0;
  min-width: 50%;
  color: var(--grey);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.form .checkbox-list label:hover {
  color: var(--gold);
}

.form .form-link {
  color: var(--gold);
  font-weight: 500;
  text-decoration: none;
  font-size: 14px;
  transition: var(--transition);
}

.form .form-link:hover {
  color: var(--white);
}

#type {
  color: #7f7b80;
}

#type option {
  color: #fff;
}

.order-select {
  margin-left: 12px;
}

.info-form {
  margin-top: 50px;
}

/* =================================
   TABLES
================================= */
.specs-table,
.fps-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: sans-serif;
  margin-top: 1em;
}

.specs-table td,
.fps-table th,
.fps-table td {
  padding: 16px;
  font-size: 16px;
  border: 3px solid var(--border);
  vertical-align: top;
}

.specs-table tr td:first-child,
.fps-table thead {
  background-color: #000;
  font-family: mont-bold;
}

.specs-table tr td:first-child {
  width: 50%;
  color: #e0e0e0;
}

.specs-table tr td:last-child,
.fps-table tbody tr:nth-child(odd) {
  background-color: #130c19;
  color: #ffffff;
}

.specs-table tr td:last-child {
  width: 50%;
}

.fps-table th {
  font-family: mont-bold;
  font-size: 18px;
  color: var(--gold);
}

.fps-table th,
.fps-table td {
  padding: 12px;
  text-align: left;
}

.fps-table tbody tr:nth-child(even) {
  background-color: #000;
}


.btn.final-step-bigcenter {
    font-size: 18px;
    padding: 15px 30px;
    width: 100%;
    margin-top: 10px;
}



/* =================================
   UTILITY CLASSES
================================= */
/* Spacing utilities */
.pad-2 { padding: 10px; }

.pad-top-1 { padding-top: 5px; }
.pad-top-2 { padding-top: 10px; }
.pad-top-4 { padding-top: 20px; }
.pad-top-5 { padding-top: 25px; }

.pad-bot-3 { padding-bottom: 15px; }
.pad-bot-5 { padding-bottom: 25px; }

.pad-left-2 { padding-left: 10px; }
.pad-right-2 { padding-right: 10px; }

.pad-y-5 { padding: 25px 0; }

.mar-top-2 { margin-top: 10px; }
.mar-top-3 { margin-top: 15px; }
.mar-top-4 { margin-top: 20px; }
.mar-top-5 { margin-top: 25px; }

.mar-bot-1 { margin-bottom: 5px; }
.mar-bot-5 { margin-bottom: 25px; }

.mar-right-1 { margin-right: 5px; }
.mar-right-2 { margin-right: 10px; }
.mar-right-5 { margin-right: 25px; }

.no-info {
  font-size: 22px;
  text-align: center;
  margin-top: 60px;
}

@media (max-width: 1023px) {
  main {
    padding-bottom: 140px;
  }
}

@media (max-width: 699px) {
  main {
    padding-bottom: 80px;
  }
  .no-info {
    font-size: 18px;
  }
}

/* =================================
   SHARED PAGE STYLES
================================= */
main .page-title,
main .category-title {
  display: block;
  font-family: "good-timing";
  font-weight: bold;
  margin: 0;
  text-align: center;
  width: 100%;
}

main .page-title {
  padding: 90px 0;
  font-size: clamp(32px, 1.6rem + 1.25vw, 42px);
  background: linear-gradient(90deg, #FFFFFF 10%, #996DBD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

main .category-title {
  padding: 0 0 20px 0;
  font-size: clamp(28px, 1.4rem + 1.25vw, 38px); /* 28px → 38px */
  color: var(--gold);
}

main .page-paragraph,
main .category-paragraph {
  display: block;
  margin: 0 auto;
  padding-bottom: 100px;
  font-size: 16px;
  text-align: center;
  width: 100%;
  max-width: 500px;
  color: var(--grey);
}

/* Banner */
.banner {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}

.banner img {
  width: 100%;
  height: auto;
  max-width: var(--wrapper-width);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-purple);
}

main .btns {
  display: flex;
  justify-content: center;
  align-items: center;
}