/* ==========================================================================
   HostGuard site layer -- structural + brand skin ON TOP of amava/Bootstrap.
   ALL brand values come from var(--hg-*) tokens (defined in head.tpl :root).
   Pixel rebrands by editing only that token block, never this file.
   ========================================================================== */

/* Self-hosted Inter (Latin, variable weight) -- no external/Google Fonts request
   (GDPR-safe: no visitor IP sent to a third party, consistent with our privacy
   notice; the woff2 is served from our own template/fonts/). */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(../fonts/inter-latin-wght.woff2) format('woff2');
}

body {
    font-family: var(--hg-font-body);
    color: var(--hg-body);
    background: #ffffff;
}

h1, h2, h3, h4, h5, .hg-brand, .hg-footer__brand {
    font-family: var(--hg-font-head);
    color: var(--hg-ink);
}

a { color: var(--hg-primary); }
a:hover { color: var(--hg-primary-dark); }

.hg-section { padding: 72px 0; }
.hg-section--soft { background: var(--hg-bg); }
.hg-section__head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.hg-section__head h2 { margin-bottom: 14px; }
.hg-section__head p { color: var(--hg-muted); margin: 0; }
.hg-eyebrow {
    display: inline-block;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--hg-primary);
    margin-bottom: 12px;
}

/* ---- Buttons ---------------------------------------------------------- */
.hg-btn {
    display: inline-block;
    font-weight: 600;
    padding: 12px 26px;
    border-radius: var(--hg-radius);
    border: 2px solid transparent;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hg-btn--primary {
    background: var(--hg-primary);
    color: #ffffff;
    border-color: var(--hg-primary);
}
.hg-btn--primary:hover {
    background: var(--hg-primary-dark);
    border-color: var(--hg-primary-dark);
    color: #ffffff;
}
.hg-btn--ghost {
    background: transparent;
    color: var(--hg-primary);
    border-color: var(--hg-line);
}
.hg-btn--ghost:hover {
    border-color: var(--hg-primary);
    color: var(--hg-primary-dark);
}
.hg-btn--light {
    background: #ffffff;
    color: var(--hg-primary-dark);
    border-color: #ffffff;
}
.hg-btn--light:hover { background: var(--hg-bg); color: var(--hg-primary-dark); }
.hg-btn--on-dark {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, .6);
}
.hg-btn--on-dark:hover { background: rgba(255, 255, 255, .12); color: #ffffff; border-color: #ffffff; }

/* ---- Header / navbar -------------------------------------------------- */
.hg-header {
    background: #ffffff;
    border-bottom: 1px solid var(--hg-line);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.hg-header .navbar { padding: 12px 0; }
.hg-brand {
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--hg-primary) !important;
    text-decoration: none;
}
.hg-nav .nav-link {
    color: var(--hg-body);
    font-weight: 500;
    padding: 8px 14px;
}
.hg-nav .nav-link:hover,
.hg-nav .nav-link.active { color: var(--hg-primary); }
.hg-header__cta {
    display: flex;
    align-items: center;
    gap: 14px;
}
.hg-header__login {
    color: var(--hg-body);
    font-weight: 500;
    text-decoration: none;
}
.hg-header__login:hover { color: var(--hg-primary); }

/* ---- public language switch (link-based hu/en, header) ---- */
.hg-langswitch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--hg-line);
    border-radius: 999px;
    color: var(--hg-muted);
    line-height: 1;
}
.hg-langswitch__globe { color: var(--hg-muted); flex: 0 0 auto; }
.hg-langswitch__opt {
    font-size: .82rem;
    font-weight: 600;
    color: var(--hg-muted);
    text-decoration: none;
    padding: 1px 2px;
    border-radius: 4px;
}
.hg-langswitch__opt:hover { color: var(--hg-primary); }
.hg-langswitch__opt.is-active { color: var(--hg-ink); font-weight: 700; }
.hg-langswitch__sep { color: var(--hg-line); font-size: .8rem; }

/* ---- Hero ------------------------------------------------------------- */
.hg-hero {
    padding: 96px 0 84px;
    background: linear-gradient(180deg, var(--hg-bg) 0%, #ffffff 100%);
    text-align: center;
}
.hg-hero h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.12;
    margin-bottom: 20px;
}
.hg-hero__lead {
    font-size: 1.15rem;
    color: var(--hg-muted);
    max-width: 680px;
    margin: 0 auto 28px;
}
.hg-hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hg-hero__note { margin-top: 18px; font-size: .9rem; color: var(--hg-muted); }

/* ---- Cards / features ------------------------------------------------- */
.hg-card {
    height: 100%;
    background: #ffffff;
    border: 1px solid var(--hg-line);
    border-radius: var(--hg-radius);
    padding: 28px;
    transition: box-shadow .18s ease, transform .18s ease;
}
.hg-card:hover {
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
    transform: translateY(-3px);
}
.hg-card__icon {
    font-size: 2rem;
    line-height: 1;
    display: inline-block;
    margin-bottom: 16px;
    color: var(--hg-primary);
}
.hg-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.hg-card p { color: var(--hg-muted); margin: 0; }
.hg-card ul { color: var(--hg-muted); margin: 12px 0 0; padding-left: 18px; }
.hg-card ul li { margin-bottom: 6px; }

/* feature row (icon beside text) */
.hg-feature { display: flex; gap: 18px; }
.hg-feature__icon {
    flex-shrink: 0;
    font-size: 1.8rem;
    color: var(--hg-primary);
    line-height: 1;
}
.hg-feature h3 { font-size: 1.15rem; margin-bottom: 8px; }
.hg-feature p { color: var(--hg-muted); margin: 0; }
.hg-feature ul { color: var(--hg-muted); margin: 10px 0 0; padding-left: 18px; }

/* ---- Steps ------------------------------------------------------------ */
.hg-step { text-align: center; padding: 0 12px; }
.hg-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--hg-primary);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 18px;
}
.hg-step h3 { font-size: 1.15rem; margin-bottom: 8px; }
.hg-step p { color: var(--hg-muted); margin: 0; }

/* ---- CTA band --------------------------------------------------------- */
.hg-band {
    background: var(--hg-primary);
    border-radius: var(--hg-radius);
    padding: 56px 32px;
    text-align: center;
    color: #ffffff;
}
.hg-band h2 { color: #ffffff; margin-bottom: 12px; }
.hg-band p { color: rgba(255, 255, 255, .9); max-width: 620px; margin: 0 auto 24px; }
.hg-band__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- Prose (about) ---------------------------------------------------- */
.hg-prose { max-width: 760px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.hg-prose h2 { font-size: 1.5rem; margin: 32px 0 12px; }
.hg-prose p { margin-bottom: 16px; line-height: 1.7; }

/* ---- FAQ accordion (amava accordion-style01 skin) --------------------- */
.hg-faq { max-width: 820px; margin: 0 auto; }
.hg-faq .card {
    border: 1px solid var(--hg-line);
    border-radius: var(--hg-radius) !important;
    margin-bottom: 12px;
    overflow: hidden;
}
.hg-faq .card-header { background: #ffffff; border: 0; padding: 0; }
.hg-faq .btn-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 18px 22px;
    font-family: var(--hg-font-head);
    font-weight: 600;
    color: var(--hg-ink);
    text-decoration: none;
    cursor: pointer;
}
.hg-faq .btn-link .counts {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--hg-bg);
    color: var(--hg-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
}
.hg-faq .card-body { padding: 0 22px 20px 64px; color: var(--hg-muted); }

/* ---- Footer ----------------------------------------------------------- */
.hg-footer {
    background: var(--hg-ink);
    color: #cbd5e1;
    padding-top: 56px;
}
.hg-footer__cols { row-gap: 32px; }
.hg-footer__brand {
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff !important;
    text-decoration: none;
}
.hg-footer__blurb { margin-top: 12px; color: #94a3b8; max-width: 420px; }
.hg-footer__title {
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 16px;
}
.hg-footer__list { list-style: none; padding: 0; margin: 0; }
.hg-footer__list li { margin-bottom: 10px; }
.hg-footer__list a { color: #94a3b8; text-decoration: none; }
.hg-footer__list a:hover { color: #ffffff; }
.hg-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin-top: 48px;
    padding: 20px 0;
    text-align: center;
}
.hg-footer__bottom p { margin: 0; color: var(--hg-muted); font-size: .9rem; }

/* ---- pricing plans (migrated from hgw_) ---- */
.hg-intro { color: var(--hg-body); margin-bottom: 24px; }
.hg-plan {
	position: relative; background: #fff; border: 1px solid var(--hg-line);
	border-radius: var(--hg-radius); padding: 28px 22px; height: 100%;
	display: flex; flex-direction: column; text-align: center;
}
.hg-plan--featured { border-color: var(--hg-primary); box-shadow: 0 10px 30px rgba(15,23,42,.08); }
.hg-plan__ribbon {
	position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
	background: var(--hg-primary); color: #fff; font-size: .72rem; font-weight: 600;
	padding: 4px 14px; border-radius: 999px; letter-spacing: .02em;
}
.hg-plan__name { font-family: var(--hg-font-head); font-weight: 600; font-size: 1.2rem; color: var(--hg-ink); }
.hg-plan__price { font-family: var(--hg-font-head); font-weight: 700; font-size: 1.7rem; color: var(--hg-ink); margin: 10px 0 2px; }
.hg-plan__price span { display: block; font-size: .8rem; font-weight: 500; color: var(--hg-muted); }
.hg-plan__meta { font-size: .82rem; color: var(--hg-muted); margin-bottom: 18px; }
.hg-plan__feats { list-style: none; padding: 0; margin: 0 0 22px; text-align: left; flex: 1; }
.hg-plan__feats li { padding: 7px 0; border-bottom: 1px solid var(--hg-line); font-size: .92rem; color: var(--hg-body); }
.hg-plan__feats li.hg-no { color: var(--hg-muted); }
.hg-btn--block { display: block; width: 100%; text-align: center; }
.hg-pricing__hint { text-align: center; color: var(--hg-muted); margin-top: 28px; font-size: .95rem; }

/* ---- contact form (migrated from hgw_) ---- */
.hg-form { background: #fff; border: 1px solid var(--hg-line); border-radius: var(--hg-radius); padding: 26px; }
.hg-field { margin-bottom: 16px; }
.hg-field label { display: block; font-weight: 600; font-size: .9rem; color: var(--hg-ink); margin-bottom: 6px; }
.hg-input, .hg-textarea {
	width: 100%; padding: 11px 13px; border: 1px solid var(--hg-line);
	border-radius: 10px; font: inherit; color: var(--hg-ink); background: var(--hg-bg);
}
.hg-input:focus, .hg-textarea:focus { outline: none; border-color: var(--hg-primary); background: #fff; }
.hg-textarea { min-height: 130px; resize: vertical; }
.hg-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--hg-body); font-weight: 400; }
.hg-consent input { margin-top: 3px; }
.hg-note { padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-size: .92rem; }
.hg-note--ok { background: #dcfce7; color: #15803d; }
.hg-note--err { background: #fee2e2; color: #b91c1c; }
.hg-contact-info { padding: 8px 0; }
.hg-contact-info h3 { font-family: var(--hg-font-head); color: var(--hg-ink); }
.hg-muted-note { color: var(--hg-muted); font-size: .9rem; margin: 12px 0 0; }

/* ---- auth pages (portalLogin: login + signup) ------------------------- */
.hg-auth { padding: 34px; }
.hg-auth__head { text-align: center; margin-bottom: 26px; }
.hg-auth__title { font-family: var(--hg-font-head); color: var(--hg-ink); font-size: 1.7rem; margin: 0 0 6px; }
.hg-auth__sub { color: var(--hg-muted); margin: 0; font-size: .95rem; }
.hg-auth__foot { text-align: center; margin-top: 20px; font-size: .92rem; color: var(--hg-muted); }
.hg-auth__foot p { margin: 0; }
.hg-field__help { display: block; color: var(--hg-muted); font-size: .82rem; margin-top: 5px; }
.hg-field__err { display: block; color: #b91c1c; font-size: .82rem; margin-top: 5px; }
.hg-field__status { display: block; font-size: .82rem; margin-top: 5px; }
.pl_tax_status--checking { color: var(--hg-muted); }
.pl_tax_status--ok { color: #15803d; }
.pl_tax_status--warn { color: #b45309; }
.pl_tax_status--err { color: #b91c1c; }
.hg-input--card { padding: 12px 13px; }

/* select uses the shared .hg-input look + native arrow */
select.hg-input { appearance: auto; cursor: pointer; }

/* divider with centered "or" label */
.hg-divider { display: flex; align-items: center; text-align: center; color: var(--hg-muted); font-size: .85rem; margin: 22px 0; }
.hg-divider::before, .hg-divider::after { content: ""; flex: 1; height: 1px; background: var(--hg-line); }
.hg-divider span { padding: 0 14px; }

/* google button */
.hg-btn--google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.hg-gicon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: #fff; border: 1px solid var(--hg-line);
	font-family: var(--hg-font-head); font-weight: 700; color: #4285f4; font-size: .9rem;
}

/* plan selector (radio cards) */
.pl_plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pl_plan {
	position: relative; display: flex; flex-direction: column; gap: 3px;
	border: 1px solid var(--hg-line); border-radius: var(--hg-radius);
	padding: 14px 16px; cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.pl_plan:hover { border-color: var(--hg-primary); }
.pl_plan input { position: absolute; opacity: 0; pointer-events: none; }
.pl_plan--active { border-color: var(--hg-primary); box-shadow: 0 0 0 2px rgba(13,148,136,.18); }
.pl_plan_name { font-family: var(--hg-font-head); font-weight: 600; color: var(--hg-ink); }
.pl_plan_price { font-family: var(--hg-font-head); font-weight: 700; color: var(--hg-primary); font-size: 1.05rem; }
.pl_plan_feat { font-size: .82rem; color: var(--hg-muted); }

/* billing sub-block */
.hg-billing { border-top: 1px solid var(--hg-line); margin-top: 6px; padding-top: 18px; }
.hg-billing__head { font-family: var(--hg-font-head); font-weight: 600; color: var(--hg-ink); margin-bottom: 14px; }

/* searchable country select (enhanceSearchableSelect widget) */
.ss_wrap { position: relative; }
.ss_input {
	width: 100%; padding: 11px 13px; border: 1px solid var(--hg-line);
	border-radius: 10px; font: inherit; color: var(--hg-ink); background: var(--hg-bg);
}
.ss_input:focus { outline: none; border-color: var(--hg-primary); background: #fff; }
.ss_list {
	display: none; position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
	max-height: 260px; overflow-y: auto; background: #fff;
	border: 1px solid var(--hg-line); border-radius: 10px; box-shadow: 0 12px 30px rgba(15,23,42,.12);
}
.ss_list.open { display: block; }
.ss_item { padding: 9px 13px; cursor: pointer; font-size: .95rem; color: var(--hg-body); }
.ss_item:hover { background: var(--hg-bg); color: var(--hg-primary-dark); }

/* async status note (JS sets className to "pl_note pl_note--ok|error") */
.pl_hide { display: none !important; }
.pl_note { padding: 12px 14px; border-radius: 10px; margin-top: 16px; font-size: .92rem; }
.pl_note--ok { background: #dcfce7; color: #15803d; }
.pl_note--error { background: #fee2e2; color: #b91c1c; }

/* ---- FAQ accordion (amava default was hardcoded blue #292dc2/#0084e9) - */
.accordion-style01 .card .counts,
.accordion-style01 .btn-link,
.accordion-style01 .btn:not(:disabled):not(.disabled).active,
.accordion-style01 .btn:not(:disabled):not(.disabled):active {
	background: var(--hg-primary);
	background: linear-gradient(-45deg, var(--hg-primary), var(--hg-accent));
}

/* ---- form-control-sm / form-select-sm height fix (sitewide) -----------
   Vendor bug: bootstrap.min.css re-declares a plain .form-control{min-height:
   calc(1.5em + .75rem + ...)} AFTER .form-control-sm's smaller min-height, so
   it wins the cascade and every small text input renders ~50px instead of the
   intended ~31px. .form-select-sm has no such collision and already renders
   correctly, which is what makes a same-row <select> look "too short" next to
   its (actually oversized) sibling <input>s. Pin the correct compact height
   explicitly on both -- element-qualified so a textarea can never match, even
   if one picks up a *-sm class by accident later. Applies everywhere this
   template is loaded (public site + the authenticated portalApp dashboard). */
input.form-control-sm,
select.form-select-sm {
    height: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));
    min-height: 0;
    padding-top: .25rem;
    padding-bottom: .25rem;
    line-height: 1.5;
    box-sizing: border-box;
}

/* Same collision at the base (non -sm/-lg) size tier: .form-control renders
   taller than .form-select in the same row. Pin both to Bootstrap's own base
   formula explicitly so they agree, regardless of which vendor rule wins. */
input.form-control:not(.form-control-sm):not(.form-control-lg),
select.form-select:not(.form-select-sm):not(.form-select-lg) {
    height: calc(1.5em + .75rem + calc(var(--bs-border-width) * 2));
    min-height: 0;
    padding-top: .375rem;
    padding-bottom: .375rem;
    line-height: 1.5;
    box-sizing: border-box;
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 991.98px) {
    .hg-header__cta { margin-top: 12px; }
    .hg-nav { margin: 12px 0; }
    .hg-hero { padding: 64px 0 56px; }
    .hg-section { padding: 56px 0; }
}
@media (max-width: 575.98px) {
    .hg-auth { padding: 24px; }
    .pl_plans { grid-template-columns: 1fr; }
}