/*!
 * Global Hosting: reseller.php page styles (loaded only on /reseller.php via $page['head']).
 * Everything is prefixed gh-rs- and built on the --gh-* tokens from gh-core.css.
 */

/* ==========================================================================
   Hero (split, with illustration) + overlapping trust card
   ========================================================================== */
.gh-rs-hero { padding-bottom: clamp(132px, 12vw, 168px); }
.gh-rs-hero .gh-page-hero__inner { gap: 40px; }
.gh-rs-hero .gh-page-hero__title { font-size: clamp(2.125rem, 1.4rem + 2.5vw, 3.5rem); }
.gh-rs-hero .gh-page-hero__lead { max-width: 600px; }

.gh-rs-art { position: relative; width: 100%; max-width: 540px; margin-left: auto; }
.gh-rs-art > svg { display: block; width: 100%; height: auto; overflow: visible; }
.gh-rs-art text { font-family: var(--gh-font); }

@media (max-width: 1080px) {
  .gh-rs-hero.gh-page-hero--split .gh-page-hero__inner { grid-template-columns: 1fr; }
  .gh-rs-hero .gh-page-hero__aside { display: none; }
}

.gh-rs-trust {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(-112px, -8vw, -84px) 0 0; padding: 10px; list-style: none;
  background: #fff; border: 1px solid var(--gh-line); border-radius: 24px;
  box-shadow: 0 2px 6px rgba(14, 19, 48, .04), 0 40px 80px -30px rgba(14, 19, 48, .35);
  font-family: var(--gh-font);
}
.gh-rs-trust__item { display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px; }
.gh-rs-trust__item + .gh-rs-trust__item { border-left: 1px solid var(--gh-line); }
.gh-rs-trust__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 13px;
  background: var(--gh-red-50); color: var(--gh-red);
}
.gh-rs-trust__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gh-rs-trust__title { color: var(--gh-ink); font: 800 var(--gh-fs-base)/1.3 var(--gh-font); letter-spacing: -.01em; text-decoration: none; }
a.gh-rs-trust__title { text-decoration: underline; text-decoration-color: var(--gh-line-strong); text-underline-offset: 4px; }
a.gh-rs-trust__title:hover { color: var(--gh-red); text-decoration-color: currentColor; }
.gh-rs-trust__text { color: var(--gh-muted); font: 500 var(--gh-fs-sm)/1.5 var(--gh-font); }
@media (max-width: 1100px) {
  .gh-rs-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gh-rs-trust__item:nth-child(3) { border-left: 0; }
  .gh-rs-trust__item:nth-child(n+3) { border-top: 1px solid var(--gh-line); }
}
@media (max-width: 640px) {
  .gh-rs-trust { padding: 4px; border-radius: 20px; }
  .gh-rs-trust__item { flex-direction: column; gap: 10px; padding: 16px 14px; }
  .gh-rs-trust__icon { width: 40px; height: 40px; border-radius: 11px; }
  .gh-rs-trust__title { font-size: var(--gh-fs-sm); }
  .gh-rs-trust__text { display: none; }
}

/* ==========================================================================
   Plans: two groups of three cards
   ========================================================================== */
.gh-rs-plans { margin-top: clamp(56px, 7vw, 88px); }
.gh-rs-group { max-width: 1040px; margin: 0 auto; }
.gh-rs-group + .gh-rs-group { margin-top: clamp(48px, 5vw, 64px); }
.gh-rs-group__head { display: flex; align-items: center; gap: 14px 16px; margin: 0 0 30px; padding-bottom: 18px; border-bottom: 1px solid var(--gh-line); }
.gh-rs-group__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--gh-ink); color: #fff; }
.gh-rs-group + .gh-rs-group .gh-rs-group__icon { background: var(--gh-red); }
.gh-rs-group__title-wrap { min-width: 0; }
.gh-rs-group__title { margin: 0; color: var(--gh-ink); font: 800 var(--gh-fs-xl)/1.2 var(--gh-font); letter-spacing: -.02em; }
.gh-rs-group__text { margin: 4px 0 0; color: var(--gh-muted); font: 500 var(--gh-fs-sm)/1.45 var(--gh-font); }
.gh-rs-group__range {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 8px 14px; border-radius: var(--gh-radius-pill);
  background: #fff; border: 1px solid var(--gh-line); color: var(--gh-ink); font: 700 var(--gh-fs-sm)/1.2 var(--gh-font); white-space: nowrap;
}
.gh-rs-group__range .gh-icon { color: var(--gh-red); }
.gh-rs-group .gh-plan__head { margin-bottom: 16px; }
/* Narrower 3-col cards: 4-digit annual prices ("1,260.00 KM /god.") don't fit on one line next to 3-digit ones, which
   pushed some order buttons lower than others in the same row. Put the period on its own line in every card instead. */
@media (min-width: 720px) and (max-width: 1100px) {
  .gh-rs-group .gh-price__period { flex-basis: 100%; margin-top: 4px; }
}
/* Tablets (720–900px): gh-core keeps .gh-pricing--3 on one row of compact cards, then stacks them below 720px. */
@media (max-width: 640px) {
  .gh-rs-group__head { flex-wrap: wrap; margin-bottom: 26px; }
  /* title block always shares the row with the icon; the range pill drops below it */
  .gh-rs-group__title-wrap { flex: 1 1 calc(100% - 62px); }
  .gh-rs-group__range { margin-left: 62px; }
}

/* "Svi paketi uključuju" panel */
.gh-rs-included {
  max-width: 1040px; margin: clamp(40px, 5vw, 56px) auto 0; padding: 22px 28px 24px;
  background: #fff; border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg); box-shadow: var(--gh-shadow-sm); font-family: var(--gh-font);
}
.gh-rs-included__label { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--gh-line); color: var(--gh-ink); font: 800 var(--gh-fs-base)/1.3 var(--gh-font); }
.gh-rs-included__label .gh-icon { color: var(--gh-red); }
.gh-rs-included__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin: 0; padding: 0; list-style: none; }
.gh-rs-included__list li { display: flex; align-items: flex-start; gap: 8px; color: var(--gh-text); font: 600 var(--gh-fs-sm)/1.4 var(--gh-font); }
.gh-rs-included__list .gh-icon { flex: none; margin-top: 1px; color: var(--gh-success); }
@media (max-width: 900px) { .gh-rs-included__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .gh-rs-included { padding: 20px; }
  .gh-rs-included__list { grid-template-columns: 1fr; }
}

.gh-rs-note { max-width: 1040px; margin-top: 20px; }
.gh-rs-note .gh-dev-note__icon { background: var(--gh-red-50); color: var(--gh-red); }
@media (max-width: 640px) {
  /* stacked note: icon on the first text line, link aligned with the text column */
  .gh-rs-note .gh-dev-note__text { align-items: flex-start; }
  .gh-rs-note .gh-btn { margin-left: 56px; }
}

.gh-rs-compare-link { margin: 28px 0 0; text-align: center; }
.gh-rs-compare-link a { display: inline-flex; align-items: center; gap: 6px; color: var(--gh-ink); font: 700 var(--gh-fs-sm)/1.3 var(--gh-font); text-decoration: underline; text-decoration-color: var(--gh-line-strong); text-underline-offset: 4px; }
.gh-rs-compare-link a:hover { color: var(--gh-red); text-decoration-color: currentColor; }
.gh-rs-compare-link .gh-icon { color: var(--gh-red); }

/* ==========================================================================
   How it works: "Vaš brend / Naša infrastruktura"
   ========================================================================== */
.gh-rs-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.gh-rs-role { padding: clamp(26px, 3vw, 36px); background: var(--gh-bg-alt); border: 1px solid var(--gh-line); border-radius: var(--gh-radius-xl); font-family: var(--gh-font); }
.gh-rs-role__head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.gh-rs-role__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 14px; background: #fff; color: var(--gh-red); box-shadow: var(--gh-shadow-sm); }
.gh-rs-role__kicker { margin: 0 0 2px; color: var(--gh-red); font: 700 var(--gh-fs-xs)/1.2 var(--gh-font); letter-spacing: .1em; text-transform: uppercase; }
.gh-rs-role__title { margin: 0; color: var(--gh-ink); font: 800 var(--gh-fs-xl)/1.2 var(--gh-font); letter-spacing: -.02em; }
.gh-rs-role__text { margin: 0 0 22px; color: var(--gh-muted); font: 500 var(--gh-fs-base)/1.6 var(--gh-font); }
.gh-rs-role--dark {
  background: radial-gradient(80% 90% at 100% 0%, rgba(124, 140, 255, .22), transparent 60%), radial-gradient(70% 80% at 0% 100%, rgba(187, 52, 55, .26), transparent 60%), var(--gh-navy-900);
  border-color: var(--gh-navy-900); color: var(--gh-on-dark-muted); box-shadow: var(--gh-shadow-lg);
}
.gh-rs-role--dark .gh-rs-role__icon { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: none; }
.gh-rs-role--dark .gh-rs-role__kicker { color: var(--gh-red-soft); }
.gh-rs-role--dark .gh-rs-role__title { color: #fff; }
.gh-rs-role--dark .gh-rs-role__text { color: var(--gh-on-dark-muted); }
@media (max-width: 900px) { .gh-rs-roles { grid-template-columns: 1fr; gap: 16px; } }

/* ==========================================================================
   Features (dark band)
   ========================================================================== */
.gh-rs-features { overflow: hidden; }
.gh-rs-features .gh-feature { padding: 26px 24px; }
.gh-rs-features .gh-feature__title { font-size: var(--gh-fs-md); }
.gh-rs-features .gh-feature__text { font-size: var(--gh-fs-sm); }
@media (max-width: 640px) {
  .gh-rs-features .gh-features { gap: 12px; }
  .gh-rs-features .gh-feature { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 20px 18px; }
  .gh-rs-features .gh-feature__icon { grid-row: span 2; width: 44px; height: 44px; margin: 0; border-radius: 12px; }
  .gh-rs-features .gh-feature__title { margin-bottom: 4px; }
}

/* ==========================================================================
   Who it's for: persona list + WHM mock
   ========================================================================== */
.gh-rs-who .gh-section-head { margin-bottom: 32px; }
.gh-rs-personas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.gh-rs-persona {
  display: flex; flex-direction: column; gap: 14px; padding: 22px; background: #fff; border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg);
  box-shadow: var(--gh-shadow-sm); font-family: var(--gh-font);
}
.gh-rs-persona__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--gh-red-50); color: var(--gh-red); }
.gh-rs-persona__title { margin: 0 0 4px; color: var(--gh-ink); font: 800 var(--gh-fs-base)/1.3 var(--gh-font); letter-spacing: -.01em; }
.gh-rs-persona__text { margin: 0; color: var(--gh-muted); font: 500 var(--gh-fs-sm)/1.55 var(--gh-font); }
@media (max-width: 640px) {
  .gh-rs-personas { grid-template-columns: 1fr; gap: 10px; }
  .gh-rs-persona { flex-direction: row; align-items: flex-start; padding: 18px; }
}

.gh-rs-mock__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gh-rs-mock__head strong { display: block; color: var(--gh-ink); font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.gh-rs-mock__head > div > span { display: block; margin-top: 2px; color: var(--gh-muted); font-size: .8125rem; font-weight: 600; line-height: 1.4; }
.gh-rs-mock__btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 12px; border-radius: 10px;
  background: var(--gh-red); color: #fff; font-size: .8125rem; font-weight: 700; box-shadow: var(--gh-shadow-red);
}
.gh-rs-mock__meter { display: block; height: 8px; margin: 16px 0 6px; border-radius: 8px; background: var(--gh-bg-soft); overflow: hidden; }
.gh-rs-mock__meter > span { display: block; width: 36%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #E0474B, #BB3437); }
.gh-rs-mock__rows { display: grid; margin: 10px 0 0; padding: 0; list-style: none; }
.gh-rs-mock__rows li { display: flex; align-items: center; gap: 12px; padding: 12px 2px; }
.gh-rs-mock__rows li + li { border-top: 1px dashed var(--gh-line); }
.gh-rs-mock__avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 10px; color: #fff; font-size: .875rem; font-weight: 800; }
.gh-rs-mock__avatar--red { background: var(--gh-red); }
.gh-rs-mock__avatar--navy { background: var(--gh-navy-700); }
.gh-rs-mock__avatar--indigo { background: #5865D8; }
.gh-rs-mock__avatar--green { background: var(--gh-success); }
.gh-rs-mock__domain { display: flex; flex-direction: column; min-width: 0; }
.gh-rs-mock__domain strong { overflow: hidden; color: var(--gh-ink); font-size: .875rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.gh-rs-mock__domain small { color: var(--gh-muted); font-size: .75rem; font-weight: 600; }
.gh-rs-mock__status { margin-left: auto; padding: 4px 9px; border-radius: var(--gh-radius-pill); background: var(--gh-success-bg); color: var(--gh-success); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.gh-rs-mock .gh-mock__chip--a { bottom: -20px; }
/* narrow phones: let the rows shrink (grid items default to min-width:auto) and keep one-line labels */
.gh-rs-mock__rows { grid-template-columns: minmax(0, 1fr); }
.gh-rs-mock__rows li { min-width: 0; }
.gh-rs-mock__domain small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-rs-mock .gh-mock__url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 360px) {
  .gh-rs-mock__head { align-items: flex-start; }
  .gh-rs-mock__btn { padding: 7px 10px; }
  .gh-rs-mock__status { display: none; }
}

/* ==========================================================================
   Comparison table additions
   ========================================================================== */
.gh-rs-compare .gh-compare__table { --gh-first: 250px; }
.gh-rs-compare__badge {
  display: inline-block; margin: 0 0 6px; padding: 3px 8px; border-radius: var(--gh-radius-pill); background: var(--gh-red); color: #fff;
  font-size: .6875rem; font-weight: 700; letter-spacing: .02em;
}
.gh-rs-compare__price td { color: var(--gh-ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gh-rs-compare td strong { color: var(--gh-ink); font-weight: 800; }
.gh-rs-compare tbody:not(:last-of-type) tr:last-child > * { border-bottom: 1px solid var(--gh-line); }
@media (max-width: 640px) { .gh-rs-compare .gh-compare__table { --gh-first: 150px; } }
.gh-rs-compare-foot { margin-top: 18px; }
@media (min-width: 1240px) { .gh-rs-compare-foot { display: none; } }

/* ==========================================================================
   FAQ aside, cross-sell
   ========================================================================== */
.gh-rs-faq-more { margin-top: 16px; }
@media (max-width: 640px) { .gh-rs-faq-more .gh-btn { width: 100%; } }

.gh-rs-alt-title { margin: 0 0 28px; color: var(--gh-ink); font: 800 var(--gh-fs-xl)/1.2 var(--gh-font); letter-spacing: -.02em; text-align: center; }
.gh-rs-alt { max-width: 1040px; margin: 0 auto; }
.gh-rs-alt .gh-card {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "icon title" "icon text" "foot foot"; column-gap: 20px; align-items: start;
}
.gh-rs-alt .gh-card__icon { grid-area: icon; margin: 0; }
.gh-rs-alt .gh-card__title { grid-area: title; margin-top: 2px; }
.gh-rs-alt .gh-card__text { grid-area: text; }
.gh-rs-alt .gh-card__foot { grid-area: foot; }
@media (max-width: 640px) {
  .gh-rs-alt .gh-card { padding: 22px; grid-template-columns: 1fr; grid-template-areas: "icon" "title" "text" "foot"; }
  .gh-rs-alt .gh-card__icon { margin-bottom: 16px; }
}
.gh-rs-nowrap { white-space: nowrap; }