/* =========================================================
   LARPTIERS / EasyDonate — FIRE MINECRAFT THEME
   Safe visual-only override:
   - does NOT change display / position / overflow / width / height
     of EasyDonate product cards, modals, dropdowns, etc.
   - intended to be pasted into EasyDonate Custom CSS
   ========================================================= */

:root {
  --fire-bg: #050000;
  --fire-bg-soft: #0c0100;
  --fire-panel: #170300;
  --fire-panel-2: #260700;

  --fire-border: #5f0d00;
  --fire-border-hot: #a91d00;

  --fire-red: #d83a00;
  --fire-orange: #ff6700;
  --fire-orange-2: #ff8a00;
  --fire-yellow: #ffc400;
  --fire-cream: #fff0bd;

  --fire-text: #f7f1ed;
  --fire-muted: #b9a39a;

  /* Bootstrap / common UI variables, if EasyDonate uses them */
  --bs-body-bg: #050000;
  --bs-body-color: #f7f1ed;
  --bs-primary: #ff6700;
  --bs-secondary: #8b1600;
  --bs-border-color: #5f0d00;
  --bs-link-color: #ff8a00;
  --bs-link-hover-color: #ffc400;
  --bs-card-bg: #170300;
  --bs-modal-bg: #170300;
}


/* =========================================================
   PAGE
   ========================================================= */

html,
body {
  background-color: var(--fire-bg) !important;
  color: var(--fire-text) !important;
}

body {
  background-image:
    radial-gradient(
      circle at 50% 0%,
      rgba(125, 20, 0, 0.18),
      transparent 38%
    ),
    radial-gradient(
      circle at 15% 65%,
      rgba(255, 80, 0, 0.07),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 45%,
      rgba(255, 130, 0, 0.05),
      transparent 30%
    ) !important;

  background-attachment: fixed !important;

  font-family:
    "Courier New",
    Consolas,
    monospace !important;
}


/* =========================================================
   TEXT
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #ffffff !important;
  font-weight: 900 !important;
  letter-spacing: 0.025em;

  text-shadow:
    2px 2px 0 #4d0900,
    0 0 12px rgba(255, 75, 0, 0.22);
}

p,
small,
.text-muted,
.text-secondary {
  color: var(--fire-muted) !important;
}

strong,
b {
  color: var(--fire-cream) !important;
}

::selection {
  color: #170200;
  background: var(--fire-yellow);
}


/* =========================================================
   LINKS
   ========================================================= */

a {
  color: var(--fire-orange-2);
  text-decoration-color: rgba(255, 103, 0, 0.35);
}

a:hover,
a:focus {
  color: var(--fire-yellow);
  text-decoration-color: var(--fire-yellow);

  text-shadow:
    0 0 7px rgba(255, 128, 0, 0.35);
}


/* =========================================================
   HEADER / NAVBAR
   VISUAL PROPERTIES ONLY
   ========================================================= */

header,
nav,
.navbar,
.header {
  background-color: #0b0100 !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(47, 6, 0, 0.96),
      rgba(10, 0, 0, 0.98)
    ) !important;

  border-color: #5b0c00 !important;

  box-shadow:
    0 4px 0 rgba(42, 3, 0, 0.8),
    0 9px 26px rgba(0, 0, 0, 0.45);
}

nav a,
.navbar a,
.nav-link,
.navbar-brand {
  color: #e8dcd6 !important;
}

nav a:hover,
.navbar a:hover,
.nav-link:hover,
.nav-link:focus,
.nav-link.active {
  color: var(--fire-yellow) !important;
}


/* =========================================================
   CARDS / PRODUCTS / PANELS
   IMPORTANT:
   no display, position, transform, width, height or overflow here
   ========================================================= */

.card,
.product,
.product-card,
.product-item,
.shop-item,
.store-item,
.panel,
.box,
.content-box {
  color: var(--fire-text) !important;

  background-color: var(--fire-panel) !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(48, 7, 0, 0.96),
      rgba(18, 2, 0, 0.98)
    ) !important;

  border-color: var(--fire-border) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255, 110, 0, 0.035),
    0 6px 24px rgba(0, 0, 0, 0.32),
    0 0 18px rgba(255, 61, 0, 0.045) !important;
}

.card:hover,
.product:hover,
.product-card:hover,
.product-item:hover,
.shop-item:hover,
.store-item:hover {
  border-color: var(--fire-border-hot) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255, 151, 0, 0.07),
    0 7px 28px rgba(0, 0, 0, 0.38),
    0 0 21px rgba(255, 77, 0, 0.10) !important;
}


/* Card inner text */

.card-title,
.product-title,
.product-name,
.item-title {
  color: #ffffff !important;
}

.card-text,
.product-description,
.product-desc,
.item-description {
  color: var(--fire-muted) !important;
}

.price,
.product-price,
.item-price {
  color: var(--fire-yellow) !important;
  font-weight: 900 !important;

  text-shadow:
    0 0 8px rgba(255, 160, 0, 0.22);
}


/* =========================================================
   PRODUCT IMAGES
   ONLY IMAGE TREATMENT — NO LAYOUT OVERRIDES
   ========================================================= */

.card img,
.product img,
.product-card img,
.product-item img,
.shop-item img,
.store-item img {
  image-rendering: auto;
  border-color: #591000 !important;

  filter:
    saturate(1.04)
    contrast(1.02)
    drop-shadow(0 5px 9px rgba(0, 0, 0, 0.34));
}


/* =========================================================
   BUTTONS
   Again: styling only, no display/position changes
   ========================================================= */

button,
.btn,
.button,
input[type="submit"],
input[type="button"] {
  color: #ffffff !important;

  background-color: #b82900 !important;
  background-image:
    linear-gradient(
      180deg,
      #e64a00 0%,
      #b72400 54%,
      #761000 100%
    ) !important;

  border-color: #f05a00 !important;

  font-weight: 800 !important;

  text-shadow:
    1px 1px 0 rgba(52, 0, 0, 0.9);

  box-shadow:
    inset 0 1px 0 rgba(255, 210, 0, 0.16),
    0 3px 0 #3d0500,
    0 0 11px rgba(255, 72, 0, 0.10) !important;
}

button:hover,
button:focus,
.btn:hover,
.btn:focus,
.button:hover,
.button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus {
  color: #ffffff !important;

  background-color: #dc3b00 !important;
  background-image:
    linear-gradient(
      180deg,
      #ff7000 0%,
      #d73500 52%,
      #8b1300 100%
    ) !important;

  border-color: var(--fire-orange-2) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 225, 0, 0.2),
    0 3px 0 #420500,
    0 0 16px rgba(255, 83, 0, 0.24) !important;
}


/* Common primary action */

.btn-primary,
.button-primary,
.primary-button {
  color: #1b0200 !important;

  background-color: var(--fire-yellow) !important;
  background-image:
    linear-gradient(
      180deg,
      #ffe000 0%,
      #ffad00 46%,
      #f45b00 100%
    ) !important;

  border-color: #ffd300 !important;

  text-shadow: none !important;

  box-shadow:
    0 3px 0 #7a1100,
    0 0 15px rgba(255, 120, 0, 0.23) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.button-primary:hover,
.button-primary:focus,
.primary-button:hover,
.primary-button:focus {
  color: #150100 !important;

  background-image:
    linear-gradient(
      180deg,
      #fff26d 0%,
      #ffc400 45%,
      #ff7200 100%
    ) !important;

  border-color: #ffe66d !important;
}


/* =========================================================
   INPUTS / FORMS
   NO WIDTH / DISPLAY / POSITION OVERRIDES
   ========================================================= */

input,
textarea,
select,
.form-control,
.form-select {
  color: #ffffff !important;
  caret-color: var(--fire-orange);

  background-color: #0d0100 !important;

  border-color: #541000 !important;

  box-shadow:
    inset 0 1px 5px rgba(0, 0, 0, 0.42) !important;
}

input::placeholder,
textarea::placeholder {
  color: #806760 !important;
  opacity: 1;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
  color: #ffffff !important;

  background-color: #120200 !important;

  border-color: var(--fire-orange) !important;

  box-shadow:
    0 0 0 2px rgba(255, 90, 0, 0.12),
    0 0 13px rgba(255, 70, 0, 0.09) !important;
}

label,
.form-label {
  color: #e8d9d2 !important;
}


/* =========================================================
   MODALS
   Do not change position/display/z-index
   ========================================================= */

.modal-content {
  color: var(--fire-text) !important;

  background-color: var(--fire-panel) !important;
  background-image:
    linear-gradient(
      180deg,
      #290600,
      #100100
    ) !important;

  border-color: #6b1100 !important;

  box-shadow:
    0 16px 60px rgba(0, 0, 0, 0.72),
    0 0 30px rgba(255, 71, 0, 0.08) !important;
}

.modal-header,
.modal-footer {
  border-color: #4b0a00 !important;
}

.modal-title {
  color: #ffffff !important;
}

.modal-backdrop {
  background-color: #000000 !important;
}


/* =========================================================
   DROPDOWNS
   No position changes
   ========================================================= */

.dropdown-menu {
  color: var(--fire-text) !important;

  background-color: #140200 !important;

  border-color: #5c0d00 !important;

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.55) !important;
}

.dropdown-item {
  color: #e8ddd8 !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  color: #ffffff !important;
  background-color: #421000 !important;
}


/* =========================================================
   TABS / PILLS / CATEGORIES
   ========================================================= */

.nav-tabs,
.nav-pills {
  border-color: #4c0a00 !important;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
  color: #c9b4ac !important;
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
  color: var(--fire-yellow) !important;

  border-color: #721300 !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  color: #170200 !important;

  background-color: var(--fire-orange) !important;

  border-color: var(--fire-orange) !important;
}


/* =========================================================
   BADGES / TAGS
   ========================================================= */

.badge,
.tag,
.label {
  color: #ffd9a2 !important;

  background-color: #3a0800 !important;

  border-color: #7c1600 !important;
}

.badge.bg-primary,
.badge.text-bg-primary {
  color: #1a0200 !important;
  background-color: var(--fire-yellow) !important;
}


/* =========================================================
   TABLES
   ========================================================= */

table,
.table {
  color: var(--fire-text) !important;
  background-color: #0e0100 !important;

  border-color: #4e0b00 !important;
}

th,
.table th {
  color: var(--fire-cream) !important;

  background-color: #260500 !important;

  border-color: #5b0d00 !important;
}

td,
.table td {
  color: var(--fire-text) !important;
  border-color: #451000 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  color: var(--fire-text) !important;
  background-color: rgba(255, 70, 0, 0.025) !important;
}


/* =========================================================
   ALERTS / NOTIFICATIONS
   ========================================================= */

.alert,
.notification,
.toast {
  color: #f5dfd5 !important;

  background-color: #250500 !important;

  border-color: #711200 !important;

  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.30) !important;
}

.alert-success {
  border-color: #9e5b00 !important;
}

.alert-danger {
  border-color: #b01f00 !important;
}


/* =========================================================
   ACCORDIONS
   ========================================================= */

.accordion-item {
  color: var(--fire-text) !important;

  background-color: var(--fire-panel) !important;

  border-color: #520d00 !important;
}

.accordion-button {
  color: #ffffff !important;

  background-color: #210400 !important;

  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  color: var(--fire-yellow) !important;

  background-color: #351000 !important;

  box-shadow:
    inset 0 -1px 0 #5c1000 !important;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.page-link {
  color: var(--fire-orange-2) !important;

  background-color: #150200 !important;

  border-color: #531000 !important;
}

.page-link:hover,
.page-link:focus {
  color: var(--fire-yellow) !important;

  background-color: #2a0600 !important;

  border-color: #8a1700 !important;
}

.page-item.active .page-link {
  color: #160100 !important;

  background-color: var(--fire-orange) !important;

  border-color: var(--fire-orange) !important;
}


/* =========================================================
   SEPARATORS
   ========================================================= */

hr {
  border-color: transparent !important;

  background-image:
    linear-gradient(
      90deg,
      transparent,
      #5c0d00,
      #ff4d00,
      #ffc400,
      #ff4d00,
      #5c0d00,
      transparent
    ) !important;

  box-shadow:
    0 0 8px rgba(255, 80, 0, 0.18);
}


/* =========================================================
   FOOTER
   ========================================================= */

footer,
.footer {
  color: #89736b !important;

  background-color: #050000 !important;

  border-color: #3b0700 !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #070000;
}

::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      180deg,
      #f05c00,
      #8d1700
    );

  border: 3px solid #070000;
}

::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      180deg,
      #ffc000,
      #d93700
    );
}

* {
  scrollbar-color: #a42200 #070000;
  scrollbar-width: thin;
}


/* =========================================================
   OPTIONAL CLASSES YOU CAN USE IN EASYDONATE HTML/TEXT BLOCKS
   ========================================================= */

.fire-text {
  color: transparent !important;

  background:
    linear-gradient(
      180deg,
      #7a0f00 4%,
      #dc3400 35%,
      #ff7000 61%,
      #ffca00 82%,
      #fff0a0 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-stroke:
    1px rgba(86, 7, 0, 0.72);

  filter:
    drop-shadow(3px 3px 0 #250000)
    drop-shadow(0 0 7px rgba(255, 68, 0, 0.28));
}

.fire-box {
  color: var(--fire-text) !important;

  background:
    linear-gradient(
      180deg,
      #260500,
      #0c0100
    ) !important;

  border: 2px solid #691000 !important;

  box-shadow:
    inset 0 0 0 1px #210300,
    0 6px 24px rgba(0, 0, 0, 0.38),
    0 0 20px rgba(255, 72, 0, 0.06) !important;
}


/* =========================================================
   MOBILE
   Only typography tweaks — no product-grid overrides
   ========================================================= */

@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  h1 {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  h2 {
    font-size: clamp(1.5rem, 7vw, 2.3rem);
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}