/* RIMEHOLD theme for EasyDonate.
   Upload this file in the shop's Custom CSS field. */

:root {
  --rime-ink: #17120d;
  --rime-muted: #6f5741;
  --rime-paper: #fff8e9;
  --rime-sand: #ffe2a6;
  --rime-sun: #ffc94d;
  --rime-leaf: #357f48;
  --rime-water: #57c7c9;
  --rime-coral: #ef6c55;
  --rime-line: rgba(116, 77, 26, 0.16);
  --rime-panel: rgba(255, 253, 246, 0.84);
  --rime-shadow: 0 18px 48px rgba(73, 42, 10, 0.13);
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  color: var(--rime-ink) !important;
  background-color: var(--rime-sand) !important;
  background-image:
    linear-gradient(rgba(255, 248, 233, 0.72), rgba(255, 248, 233, 0.72)),
    url("https://rimehold.ru/assets/site-bg.png") !important;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-family: "Nunito", Arial, sans-serif !important;
  font-weight: 600;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(255, 248, 233, 0.18);
}

a {
  color: #8f5816;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover,
a:focus-visible {
  color: #684013;
}

/* Shared page width and translucent panels. */
.container,
.container-fluid,
.content,
.content-wrapper,
.main-content,
.shop-content,
#app {
  position: relative;
  z-index: 1;
}

.container,
.content,
.content-wrapper,
.main-content,
.shop-content {
  width: min(1180px, calc(100% - 32px));
  margin-right: auto;
  margin-left: auto;
}

.card,
.panel,
.block,
.product,
.product-card,
.product-item,
.category,
.category-card,
.news-card,
.top-products,
.shop-block,
.modal-content,
.dropdown-menu {
  border: 1px solid var(--rime-line) !important;
  border-radius: 8px !important;
  background: var(--rime-panel) !important;
  box-shadow: var(--rime-shadow) !important;
  color: var(--rime-ink) !important;
}

.card-header,
.panel-heading,
.product-header,
.category-header {
  border-bottom: 1px solid var(--rime-line) !important;
  background: rgba(255, 226, 166, 0.34) !important;
  color: var(--rime-ink) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.shop-name,
.shop-title,
.page-title {
  color: var(--rime-ink) !important;
  font-family: "Nunito", Arial, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0;
}

h1,
.shop-name,
.shop-title {
  line-height: 1.05;
}

p,
li,
label,
.description,
.shop-description {
  color: var(--rime-muted);
  line-height: 1.55;
}

/* Header, logo and navigation. */
.navbar,
.header,
.shop-header,
header,
nav {
  border: 1px solid rgba(116, 77, 26, 0.13) !important;
  border-radius: 8px !important;
  background: rgba(255, 253, 246, 0.72) !important;
  box-shadow: 0 10px 30px rgba(73, 42, 10, 0.1) !important;
  backdrop-filter: blur(12px);
}

.navbar-brand,
.brand,
.shop-logo,
.logo,
.shop-name {
  color: var(--rime-ink) !important;
  font-weight: 900 !important;
}

.navbar-brand img,
.shop-logo img,
.logo img {
  max-height: 58px;
  width: auto;
  border-radius: 8px;
}

.navbar a,
.nav a,
.navigation a,
.menu a,
.navbar-nav a {
  color: var(--rime-ink) !important;
  font-weight: 800 !important;
}

.navbar a:hover,
.nav a:hover,
.navigation a:hover,
.menu a:hover,
.navbar-nav a:hover,
.navbar .active,
.nav .active,
.navigation .active,
.menu .active {
  color: #8f5816 !important;
  background: rgba(255, 201, 77, 0.2) !important;
}

/* Shop intro and category navigation. */
.shop-description,
.shop-info,
.store-description,
.welcome,
.hero,
.banner {
  border: 1px solid var(--rime-line) !important;
  border-radius: 8px !important;
  background: rgba(255, 253, 246, 0.72) !important;
  box-shadow: var(--rime-shadow) !important;
}

.categories,
.category-list,
.product-categories,
.sidebar,
.side-bar,
aside {
  color: var(--rime-ink) !important;
}

.categories a,
.category-list a,
.product-categories a,
.sidebar a,
.side-bar a,
aside a {
  display: block;
  border-radius: 6px;
  color: var(--rime-muted) !important;
  font-weight: 800;
}

.categories a:hover,
.category-list a:hover,
.product-categories a:hover,
.sidebar a:hover,
.side-bar a:hover,
aside a:hover,
.categories .active,
.category-list .active,
.product-categories .active {
  color: var(--rime-ink) !important;
  background: rgba(255, 201, 77, 0.26) !important;
}

/* Product grid and individual donation cards. */
.products,
.product-list,
.products-list,
.product-grid,
.shop-products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.products > *,
.product-list > *,
.products-list > *,
.product-grid > *,
.shop-products > * {
  min-width: 0;
}

.product,
.product-card,
.product-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product:hover,
.product-card:hover,
.product-item:hover {
  transform: translateY(-3px);
  border-color: rgba(239, 108, 85, 0.4) !important;
  box-shadow: 0 22px 50px rgba(73, 42, 10, 0.18) !important;
}

.product img,
.product-card img,
.product-item img,
.product-image img,
.product-photo img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 6px;
}

.product-title,
.product-name,
.product h3,
.product-card h3,
.product-item h3 {
  color: #5f3d1d !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}

.product-description,
.product-text,
.product-card p,
.product-item p {
  color: var(--rime-muted) !important;
  font-size: 16px;
}

.product-price,
.price,
.product-cost,
.cost {
  color: #9a5c16 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  white-space: nowrap;
}

/* Buttons keep the amber / coral accent from the main RIMEHOLD site. */
.btn,
button,
input[type="submit"],
input[type="button"],
.button,
.buy,
.buy-button,
.purchase-button,
.product .btn-primary,
.product-card .btn-primary,
.product-item .btn-primary {
  min-height: 42px;
  border: 1px solid rgba(116, 77, 26, 0.16) !important;
  border-radius: 6px !important;
  padding: 10px 18px;
  color: var(--rime-ink) !important;
  background: var(--rime-sun) !important;
  box-shadow: 0 8px 18px rgba(180, 112, 16, 0.18) !important;
  font-family: "Nunito", Arial, sans-serif !important;
  font-weight: 900 !important;
  line-height: 1.2;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
.buy:hover,
.buy-button:hover,
.purchase-button:hover {
  transform: translateY(-2px);
  color: var(--rime-ink) !important;
  background: #ffd873 !important;
  box-shadow: 0 12px 22px rgba(180, 112, 16, 0.24) !important;
}

.btn-secondary,
.button.secondary,
.btn-outline,
.btn-light {
  color: #5f3d1d !important;
  background: rgba(255, 255, 255, 0.78) !important;
}

.btn-danger,
.btn-warning,
.button.danger {
  color: #fff !important;
  background: var(--rime-coral) !important;
}

/* Forms and payment modal. */
input:not([type="submit"]):not([type="button"]),
select,
textarea,
.form-control,
.custom-select {
  min-height: 42px;
  border: 1px solid rgba(116, 77, 26, 0.22) !important;
  border-radius: 6px !important;
  color: var(--rime-ink) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: none !important;
  font: inherit;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.custom-select:focus {
  border-color: var(--rime-sun) !important;
  outline: 3px solid rgba(255, 201, 77, 0.24) !important;
}

.modal-backdrop {
  background: rgba(56, 34, 10, 0.46) !important;
}

.modal-content {
  background: rgba(255, 253, 246, 0.96) !important;
}

/* Small status accents used by online counters and badges. */
.badge,
.label,
.tag,
.status,
.online,
.text-success {
  color: #28683a !important;
  background: rgba(92, 190, 112, 0.18) !important;
}

.text-danger,
.offline {
  color: #a9422e !important;
}

hr,
.divider,
.border-top,
.border-bottom {
  border-color: var(--rime-line) !important;
}

footer,
.footer {
  color: var(--rime-muted) !important;
  background: rgba(255, 248, 233, 0.6) !important;
}

@media (max-width: 720px) {
  body {
    background-attachment: scroll;
    background-position: 58% top;
  }

  .container,
  .content,
  .content-wrapper,
  .main-content,
  .shop-content {
    width: min(100% - 20px, 560px);
  }

  .navbar,
  .header,
  .shop-header,
  header,
  nav {
    border-radius: 6px !important;
  }

  .products,
  .product-list,
  .products-list,
  .product-grid,
  .shop-products {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .card,
  .panel,
  .block,
  .product,
  .product-card,
  .product-item,
  .category,
  .category-card,
  .news-card,
  .top-products,
  .shop-block {
    border-radius: 6px !important;
  }

  .shop-name,
  .shop-title,
  h1 {
    font-size: clamp(28px, 9vw, 44px) !important;
  }

  .product-title,
  .product-name,
  .product h3,
  .product-card h3,
  .product-item h3 {
    font-size: 20px !important;
  }

  .btn,
  button,
  input[type="submit"],
  input[type="button"],
  .button,
  .buy,
  .buy-button,
  .purchase-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Colibri-specific overrides. Keep these selectors close to the template's
   actual markup so the theme remains predictable after EasyDonate updates. */
body.bg-light,
body {
  background-color: var(--rime-sand) !important;
  background-image:
    linear-gradient(rgba(255, 248, 233, 0.72), rgba(255, 248, 233, 0.72)),
    url("https://rimehold.ru/assets/site-bg.png") !important;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

body > div[style*="z-index: 10"] > main.bg-light,
body > div[style*="z-index: 10"] > .main-instruction,
main.bg-light,
.main-instruction {
  background: transparent !important;
}

body > nav.navbar.navbar-theme-light,
nav.navbar {
  min-height: 76px;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 253, 246, 0.78) !important;
  box-shadow: 0 10px 30px rgba(73, 42, 10, 0.1) !important;
}

nav.navbar .navbar-brand img,
nav.navbar .collapse-brand img {
  border-radius: 8px;
}

nav.navbar .nav-link,
nav.navbar .nav-link-inner-text {
  color: var(--rime-ink) !important;
  font-weight: 800 !important;
}

nav.navbar .nav-link:hover,
nav.navbar .nav-link:focus {
  color: #8f5816 !important;
}

#welcome-section {
  min-height: min(620px, 72vh);
  border-radius: 0 0 120px 120px;
  background:
    linear-gradient(90deg, rgba(255, 248, 233, 0.2), rgba(255, 248, 233, 0.04)),
    url("https://rimehold.ru/assets/shop-hero.png") center / cover no-repeat !important;
}

#welcome-section.overlay-dark::before {
  background: rgba(73, 42, 10, 0.18) !important;
}

#welcome-section .shop-title h1.shop-name,
#welcome-section h1.shop-name {
  color: var(--rime-ink) !important;
  font-size: clamp(48px, 7vw, 112px) !important;
  line-height: 0.92 !important;
  text-shadow: 0 4px 0 rgba(255, 255, 255, 0.9), 0 14px 30px rgba(67, 36, 0, 0.16) !important;
}

#welcome-section .general-online p span {
  border-radius: 6px;
  color: #fff8e9 !important;
  background: rgba(62, 37, 10, 0.62) !important;
}

#shop {
  color: var(--rime-ink) !important;
}

#shop .filter-items {
  color: var(--rime-ink) !important;
}

#shop .filter-items .text-black,
#shop .filter-items .text-muted {
  color: var(--rime-muted) !important;
}

#help {
  width: min(1180px, calc(100% - 32px));
  margin: 24px auto 0;
  padding: 42px 48px !important;
  border: 1px solid var(--rime-line);
  border-radius: 8px;
  background: rgba(255, 253, 246, 0.78) !important;
  box-shadow: var(--rime-shadow);
}

#help h2,
#help p,
#help .text-black {
  color: var(--rime-ink) !important;
}

#help p.mt-0 {
  color: var(--rime-muted) !important;
}

.footer {
  border-radius: 0 !important;
  background: rgba(111, 87, 65, 0.94) !important;
}

.fixed-bottom-right .basket-button {
  border: 1px solid rgba(116, 77, 26, 0.2) !important;
  border-radius: 50% !important;
  background: var(--rime-sun) !important;
  box-shadow: 0 10px 24px rgba(73, 42, 10, 0.2) !important;
}

@media (max-width: 720px) {
  #welcome-section {
    min-height: 520px;
    border-radius: 0 0 56px 56px;
    background-position: 58% center !important;
  }

  #welcome-section .shop-title h1.shop-name,
  #welcome-section h1.shop-name {
    font-size: clamp(40px, 13vw, 72px) !important;
  }

  #help {
    width: calc(100% - 20px);
    padding: 28px 22px !important;
  }
}

/* External RIMEHOLD navigation inserted through the purchase instructions. */
.rimehold-external-nav {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 10000;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: calc(100vw - 140px);
  padding: 6px;
  border: 1px solid rgba(105, 77, 42, 0.2);
  border-radius: 8px;
  background: rgba(255, 250, 239, 0.82);
  box-shadow: 0 8px 24px rgba(67, 36, 0, 0.12);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
}

.rimehold-external-nav a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  border-radius: 6px;
  color: var(--rime-ink, #2f241a) !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
}

.rimehold-external-nav a:hover,
.rimehold-external-nav a:focus-visible {
  color: #8f5816 !important;
  background: rgba(244, 184, 74, 0.2);
}

@media (max-width: 720px) {
  .rimehold-external-nav {
    top: auto;
    bottom: 12px;
    max-width: calc(100vw - 24px);
    overflow-x: auto;
  }

  .rimehold-external-nav a {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12px;
  }
}