/* HoeStoryHub.Org group flow (W42O). Sits inside the Kallyas theme's own
 * WooCommerce pages: its fonts, colours, buttons and panels stay; these rules
 * only lay out the new choices and steps. Brand red as in the site's
 * e-mails and buttons. */

.hsh-grp-label { margin: 14px 0 8px; font-weight: 600; color: #333; font-size: 14px; }
.hsh-grp-help { margin: 8px 0 0; color: #777; font-size: 13px; line-height: 1.5; }
.hsh-grp-error { margin: 8px 0; color: #b00020; font-size: 14px; min-height: 0; }
.hsh-grp-error:empty { display: none; }

/* The steps on the product page */
.hsh-grp-steps { margin: 0 0 18px; }
.hsh-grp-steps ol { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; counter-reset: hshstep; }
.hsh-grp-steps li { counter-increment: hshstep; display: flex; align-items: center; gap: 6px; color: #888; font-size: 13px; }
.hsh-grp-steps li::before { content: counter(hshstep); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; border: 1px solid #ccc; font-size: 12px; color: #888; }
.hsh-grp-steps li.is-now { color: #222; font-weight: 600; }
.hsh-grp-steps li.is-now::before { background: #9a0d0d; border-color: #9a0d0d; color: #fff; }
.hsh-grp-steps li.is-done a { color: #555; text-decoration: underline; }
.hsh-grp-other { margin: 8px 0 0; font-size: 13px; color: #777; }
.hsh-grp-ladies { margin: 6px 0 0; font-size: 13px; color: #555; }
.hsh-grp-ladies a { text-decoration: underline; }

/* Choices: where you live, how long */
.hsh-grp-region { display: flex; flex-wrap: wrap; gap: 8px; }
.hsh-grp-choice { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 8px; padding: 8px 14px; border: 1px solid #d6d6d6; border-radius: 4px; background: #fff; cursor: pointer; font-weight: 400; color: #333; }
.hsh-grp-choice--sm { margin: 0; padding: 6px 14px; }
.hsh-grp-choice input, .hsh-grp-period input { margin: 0; accent-color: #9a0d0d; width: 16px; height: 16px; }
.hsh-grp-choice:has(input:checked) { border-color: #9a0d0d; box-shadow: inset 0 0 0 1px #9a0d0d; }
.hsh-grp-periods { display: grid; gap: 8px; }
.hsh-grp-period { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0; padding: 8px 14px; border: 1px solid #d6d6d6; border-radius: 4px; background: #fff; cursor: pointer; color: #333; font-weight: 400; }
.hsh-grp-period.is-on, .hsh-grp-period:has(input:checked) { border-color: #9a0d0d; box-shadow: inset 0 0 0 1px #9a0d0d; }
.hsh-grp-period__when { flex: 1; display: flex; flex-direction: column; font-size: 15px; }
.hsh-grp-period__when small { color: #2f7d32; font-size: 12px; }
.hsh-grp-period__price { text-align: right; font-weight: 600; font-size: 15px; display: flex; flex-direction: column; }
.hsh-grp-period__price small { font-weight: 400; color: #777; font-size: 12px; }
.hsh-grp-choose { margin: 0 0 18px; }
.hsh-grp-choose ~ .single_variation_wrap .woocommerce-variation-price { display: none; }

/* The checkout in steps */
.hsh-grp-co { margin: 0 0 18px; }
.hsh-grp-co__steps { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 6px; padding: 0; list-style: none; counter-reset: hshco; }
.hsh-grp-co__steps li { counter-increment: hshco; display: flex; align-items: center; gap: 6px; color: #888; font-size: 13px; }
.hsh-grp-co__steps li::before { content: counter(hshco); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; border: 1px solid #ccc; font-size: 12px; }
.hsh-grp-co__steps li.is-now { color: #222; font-weight: 600; }
.hsh-grp-co__steps li.is-now::before { background: #9a0d0d; border-color: #9a0d0d; color: #fff; }
.hsh-grp-co__steps li.is-done::before { border-color: #9a0d0d; color: #9a0d0d; }
.hsh-grp-co__title { margin: 0; font-size: 13px; font-weight: 400; color: #888; text-transform: none; letter-spacing: 0; }
.hsh-grp-co__nav { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 0; }
.hsh-grp-co__nav .button, .hsh-grp-co__back3 .button { min-height: 44px; }
.hsh-grp-co__back3 { margin: 12px 0 0; }
.hsh-grp-lives { margin: 0 0 6px; }
.hsh-grp-lives .hsh-grp-label { margin-top: 0; }

form.checkout.hsh-grp-on .woocommerce-billing-fields > h3,
form.checkout.hsh-grp-on #customer_details .col-2 { display: none !important; }
form.checkout.hsh-grp-on #customer_details .col-1 { width: 100%; float: none; }
form.checkout.hsh-grp-on[data-hsh-step="1"] .hsh-s2,
form.checkout.hsh-grp-on[data-hsh-step="1"] #order_review_heading,
form.checkout.hsh-grp-on[data-hsh-step="1"] #order_review,
form.checkout.hsh-grp-on[data-hsh-step="1"] .hsh-grp-co__back3,
form.checkout.hsh-grp-on[data-hsh-step="2"] .hsh-s1,
form.checkout.hsh-grp-on[data-hsh-step="2"] .hsh-grp-code[style*="none"],
form.checkout.hsh-grp-on[data-hsh-step="2"] #order_review_heading,
form.checkout.hsh-grp-on[data-hsh-step="2"] #order_review,
form.checkout.hsh-grp-on[data-hsh-step="2"] .hsh-grp-co__back3,
form.checkout.hsh-grp-on[data-hsh-step="3"] #customer_details,
form.checkout.hsh-grp-on[data-hsh-step="3"] .hsh-grp-co__nav,
form.checkout.hsh-grp-on[data-hsh-step="3"] > .hsh-grp-error { display: none !important; }
form.checkout.hsh-grp-on .woocommerce-account-fields { display: none; }
form.checkout.hsh-grp-on .description { display: block; margin-top: 4px; color: #777; font-size: 13px; position: static; }

.hsh-grp-code { margin: 4px 0 12px; }
.hsh-grp-code__sent { margin: 0 0 8px; }
.hsh-grp-ref { display: block; color: #222; }
.hsh-grp-bank { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0 12px; }
.hsh-grp-bank dt { font-weight: 400; color: #666; }
.hsh-grp-bank dd { margin: 0; font-weight: 600; word-break: break-word; }
.hsh-grp-receipt-msg { display: block; margin-top: 6px; font-size: 13px; color: #333; }
.hsh-grp-payer { margin: 4px 0 8px; }
.hsh-grp-ticks { margin: 8px 0 12px; }
.hsh-grp-ticks .form-row { margin: 0 0 6px; }
.hsh-grp-ticks label { display: flex; align-items: flex-start; gap: 8px; min-height: 32px; font-weight: 400; }
.hsh-grp-ticks input { margin-top: 3px; accent-color: #9a0d0d; }

/* After paying, the account page, /membership/ */
.hsh-grp-done { margin: 0 0 24px; }
.hsh-grp-done h2 { margin: 0 0 8px; }
.hsh-grp-mine { margin: 0 0 24px; }
.hsh-grp-mine h2 { margin: 0 0 8px; }
.hsh-grp-mine__row { padding: 14px 0; border-top: 1px solid #e6e6e6; }
.hsh-grp-mine__row:first-of-type { border-top: 0; }
.hsh-grp-mine__row h3 { margin: 0 0 4px; font-size: 18px; }
.hsh-grp-mine__row p { margin: 0 0 8px; }
.hsh-grp-mine__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hsh-grp-mine__actions .button, .hsh-grp-done .button { min-height: 44px; display: inline-flex; align-items: center; }
.hsh-grp-links { display: flex; gap: 18px; margin: 8px 0 0; }
.hsh-grp-signin { max-width: 520px; }
.hsh-grp-signin h2 { margin: 0 0 8px; }

@media (max-width: 600px) {
  .hsh-grp-co__nav .button { flex: 1 1 auto; }
  .hsh-grp-bank { grid-template-columns: 1fr; gap: 0; }
  .hsh-grp-bank dd { margin-bottom: 6px; }
}

/* Buttons outside the shop's own templates (the membership page, the old VVIP
 * page, the account dashboard): the site's red and grey, not WooCommerce's
 * default purple. */
.hsh-grp-page .button, .hsh-grp-mine .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border-radius: 3px; border: 2px solid #222; background: #fff; color: #222; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .02em; text-decoration: none; line-height: 1.2; }
.hsh-grp-page .button.alt, .hsh-grp-mine .button.alt { background: #9a0d0d; border-color: #9a0d0d; color: #fff; }
.hsh-grp-page .button:hover, .hsh-grp-mine .button:hover { background: #222; border-color: #222; color: #fff; }
.hsh-grp-page .button.alt:hover, .hsh-grp-mine .button.alt:hover { background: #7a0a0a; border-color: #7a0a0a; }
.hsh-grp-page .input-text { width: 100%; max-width: 420px; min-height: 44px; padding: 8px 12px; border: 1px solid #222; border-radius: 3px; font-size: 16px; }
.hsh-grp-page label { display: block; margin: 0 0 6px; font-weight: 700; color: #222; }