/* ==========================================================================
   GummerCraft: сторінки донату (donate/*.html), поверх assets/style.css.
   ========================================================================== */

body.donate main { display: block; max-width: 1100px; margin: 0 auto; padding: 28px 20px 0; }

/* Банер розділу */
.donate-hero, #zagolovok {
  position: relative; overflow: hidden; margin: 0 0 28px; padding: clamp(28px, 5vw, 48px) 28px;
  border-radius: var(--radius); color: #fff; text-align: center;
  background: linear-gradient(135deg, rgba(24, 154, 78, .94), rgba(34, 192, 112, .88)), url("../donate/haard.webp") center / 520px;
  box-shadow: var(--shadow);
}
.donate-hero h1, #zagolovok h3 { color: #fff; margin: 0 0 6px; font-size: clamp(28px, 4.5vw, 44px); font-weight: 900; }
.donate-hero p, #zagolovok h3 + h3 { margin: 0; font-size: 18px; font-weight: 700; opacity: .95; }
#zagolovok a { color: #fff; text-decoration: underline; }

/* Банер-посилання (donate/dayz.html): увесь банер це кнопка */
a.donate-link { display: block; text-decoration: none !important; transition: transform .2s, box-shadow .2s; }
a.donate-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
a.donate-link:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.donate-link-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 11px 22px; border-radius: 999px;
  background: #fff; color: var(--green-700); font-weight: 800; font-size: 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
  transition: gap .2s;
}
a.donate-link:hover .donate-link-btn { gap: 12px; }

/* Плитки послуг (Усі послуги, Преміум) */
#mainm > section:not(#zagolovok) {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px;
}
.goods {
  position: relative; display: flex; flex-direction: column; margin: 0;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.goods:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.goods .imag { margin: 0; padding: 18px 18px 6px; text-align: center; background: linear-gradient(180deg, var(--green-50), #fff); }
.goods .ima { width: 100%; max-width: 220px; height: auto; border-radius: 10px; }
.goods h6 { margin: 0; padding: 12px 16px 18px; font-size: 17px; font-weight: 800; text-align: center; }
.goods h6 a { color: var(--ink); text-decoration: none; }
.goods h6 a::after { content: ""; position: absolute; inset: 0; } /* уся плитка клікабельна */
.goods:hover h6 a { color: var(--green-700); }

/* Сторінка послуги */
#osnova { display: block; }
#tov {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start;
  padding: clamp(20px, 4vw, 36px); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
}
@media (max-width: 820px) { #tov { grid-template-columns: 1fr; } }
#tov .photo { position: sticky; top: calc(var(--head-h) + 70px); }
@media (max-width: 820px) { #tov .photo { position: static; } }
#tov .imag { margin: 0; text-align: center; }
.imaa { width: 100%; max-width: 420px; height: auto; border-radius: 14px; box-shadow: var(--shadow); }
#tov figure { margin: 0; }
#nazva { font-size: clamp(28px, 4vw, 38px); margin: 0 0 14px; }
.ho, .h { font-size: 19px; margin: 22px 0 8px; }
.ho { margin-top: 0; }
.desc p { margin: 0 0 8px; color: var(--ink-2); }
.com { list-style: none; padding: 0; margin: 10px 0; }
.com h5 { font-size: 17px; margin: 0 0 8px; }
.com li { position: relative; margin: 4px 0; color: var(--ink-2); }

/* Калькулятор */
.quantity { display: inline-flex; align-items: center; gap: 10px; padding: 8px; border-radius: 999px; background: var(--bg); }
.quantity button {
  width: 38px; height: 38px; border: 0; border-radius: 50%; background: #fff; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12); display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.quantity button:hover { background: var(--green-50); }
.quantity button img { width: 16px; height: 16px; border-radius: 0; }
#amount { display: inline; font-size: 22px; font-weight: 800; min-width: 1.4em; text-align: center; }
#month { font-weight: 700; color: var(--ink-2); padding-right: 6px; }
#cost {
  display: inline-block; padding: 10px 18px; border-radius: 14px; font-size: 22px; font-weight: 900;
  color: var(--green-700); background: var(--green-50);
}
.command, .cmds { margin: 0; }
#of { margin-top: 6px; padding: 14px 16px; border-radius: 12px; background: var(--bg); font-size: 14.5px; color: var(--ink-2); }
#of p { margin: 0; }