/* A single navigation surface and a compact footer, sharing the page background. */
.site-header { position: sticky; top: 0; z-index: 1030; background: var(--site-bg); }
.site-header #main-navbar { background: var(--site-bg); padding: 0; border-bottom: 1px solid var(--site-border); }
.site-header #main-navbar .site-header-inner { display: flex; align-items: center; flex-wrap: nowrap; gap: 20px; min-height: 80px; }
.site-header .navbar-brand { flex-shrink: 0; margin: 0 auto 0 0; padding: 0; }
.site-navigation { display: flex; align-items: center; gap: 20px; }
.site-primary-links { flex-direction: row; align-items: center; gap: 4px; }
.site-header #main-navbar .nav-link { display: flex; align-items: center; gap: 6px; padding: 26px 9px; background: transparent; border: 0; font-size: .78rem; font-weight: 600; color: var(--site-muted); white-space: nowrap; }
.site-header #main-navbar .nav-link.active, .site-header #main-navbar .nav-link:hover { color: var(--site-text); }
.site-header #main-navbar .nav-link::before { display: none; }
.site-header #main-navbar .nav-link.active { box-shadow: inset 0 -2px var(--site-brand); }
.site-direct-links { display: flex; align-items: center; gap: 12px; border-left: 1px solid var(--site-border); padding-left: 14px; }
.site-direct-links > a { font-size: .74rem; font-weight: 500; white-space: nowrap; color: var(--site-muted); }
.site-direct-links > a:hover, .site-direct-links > a.active { color: var(--site-text); }
.site-search-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; min-height: 44px; font-size: 1rem; }
.site-search-link > span { display: none; }
.header-account { flex-shrink: 0; }
.header-account-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 14px; border: 1px solid var(--site-border); border-radius: 9px; color: var(--site-text); background: var(--site-surface); font: 600 .78rem var(--font-secundary); white-space: nowrap; }
.header-account-button > i:first-child { font-size: 1.1rem; }
.header-signin-button { border-color: #885027; background: transparent; }
.header-signin-button:hover { background: var(--site-brand-soft); border-color: var(--site-link); }
.site-header .navbar-toggler { display: none; }
.site-dropdown { min-width: 250px; max-width: min(310px, calc(100vw - 32px)); padding: 8px; margin-top: 4px; border-radius: 12px; background: var(--site-surface); border: 1px solid var(--site-border); box-shadow: 0 14px 36px #0005; }
.site-navigation .site-dropdown { position: absolute; }
.site-dropdown li { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.site-dropdown a, .site-dropdown .virtual-links-item a { display: block; padding: 11px 12px !important; border-radius: 6px; color: var(--site-muted); font: 500 .8rem/1.5 var(--font-secundary); white-space: normal; text-transform: none; }
.site-dropdown a:hover, .site-dropdown a:focus-visible { color: var(--site-text); background: var(--site-raised); }
.site-dropdown a i { color: inherit; }
.header-account .site-dropdown a { display: flex; align-items: center; gap: 12px; }
.header-account .site-dropdown .ui-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.site-dropdown .account-logout { border-top: 1px solid var(--site-border) !important; margin-top: 6px !important; padding-top: 6px !important; }
.header-account .site-dropdown { max-height: calc(100dvh - 94px); overflow-y: auto; }
/* Match Botmaker's light document so its transparent canvas stays transparent. */
iframe[title="Botmaker"] { color-scheme: light; }
#footer.site-footer { padding: 16px 0; border-top: 1px solid var(--site-border); color: var(--site-muted); background: var(--site-bg); }
.site-footer-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; }
.site-copyright { font-size: .72rem; white-space: nowrap; }
.site-footer-links { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: .74rem; }
.site-footer-links > a, .footer-legal > summary { color: var(--site-muted); white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.site-footer-links a:hover, .footer-legal > summary:hover { color: var(--site-text); }
.footer-legal { position: relative; }
.footer-legal > summary { cursor: pointer; list-style: none; }
.footer-legal > summary::-webkit-details-marker { display: none; }
.footer-legal[open] > summary i { transform: rotate(180deg); }
.footer-legal-menu { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); width: 250px; height: auto; max-height: min(300px, calc(100dvh - 100px)); overflow-y: auto; padding: 8px; background: var(--site-surface); border: 1px solid var(--site-border); border-radius: 10px; box-shadow: 0 -10px 30px #0005; z-index: 20; }
.footer-legal-menu a { display: block; padding: 12px; border-radius: 6px; color: var(--site-muted); font-size: .8rem; }
.footer-legal-menu a:hover { background: var(--site-raised); }
.site-social-links { display: flex; align-items: center; gap: 2px; }
.site-social-links a { display: grid; place-content: center; width: 30px; height: 40px; color: var(--site-muted); font-size: 1rem; background: none; border: 0; }
.site-social-links a:hover { color: var(--site-text); }
.external-logins-help { color: var(--site-muted); font-size: .86rem; margin: 0 0 20px; }
.profile-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.profile-provider-grid .oauth-provider-button { min-height: 50px; }
.oauth-provider-icon .icon-apple { font-size: 22px; color: var(--site-text); }
.plan-with-details .pricing-title { padding-bottom: 24px !important; min-height: 180px; }
.plan-with-details .pricing-promo { margin: 20px 0 0; padding: 9px 12px; border: 1px solid var(--site-border); border-radius: 7px; color: var(--site-text); background: var(--site-raised); font-size: .74rem; }
.local-link-simulation { padding: 16px; margin-top: 24px; color: var(--site-muted); background: var(--site-surface); border: 1px solid var(--site-border); border-radius: 8px; }
.plan-details { padding: 24px; flex: 1; }
.plan-use-title { font-size: 1rem; line-height: 1.4; margin: 0 0 10px; text-transform: none; letter-spacing: -.02em; }
.plan-use-description { color: var(--site-muted); font-size: .79rem; line-height: 1.6; margin: 0 0 22px; min-height: 3.2em; }
.plan-benefits { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.plan-benefits li { display: flex; align-items: center; gap: 12px; font-size: .78rem; color: var(--site-text); line-height: 1.5; }
.plan-benefits i { display: grid; place-content: center; width: 26px; flex: 0 0 26px; color: var(--site-muted); font-size: 1.05rem; }
.plan-with-details .pricing-content { border-top: 1px solid var(--site-border); margin-top: auto; flex: 0 0 auto; }
@media (max-width: 1199.98px) {
    .site-header #main-navbar .site-header-inner { flex-wrap: wrap; gap: 12px; min-height: 76px; }
    .site-header .navbar-brand { margin-right: auto; }
    .site-header .navbar-toggler { display: grid; place-content: center; width: 44px; height: 44px; }
    .site-navigation { display: none; order: 4; flex-basis: 100%; width: 100%; padding-bottom: 16px; max-height: calc(100dvh - 90px); overflow-y: auto; }
    .site-navigation.is-open { display: block; }
    .site-primary-links { align-items: stretch; flex-direction: column; gap: 0; }
    .site-header #main-navbar .nav-link { padding: 14px 12px; width: 100%; font-size: .9rem; text-align: left; }
    .site-header #main-navbar .nav-link.active { box-shadow: none; background: var(--site-surface); border-radius: 8px; }
    .site-direct-links { border-left: 0; border-top: 1px solid var(--site-border); padding: 14px 12px 0; margin-top: 12px; gap: 24px; flex-wrap: wrap; }
    .site-direct-links .nav-link { flex-basis: 100%; }
    .site-direct-links > a { min-height: 40px; display: inline-flex; align-items: center; font-size: .83rem; }
    .site-search-link { width: auto; gap: 8px; }
    .site-search-link > span { display: inline; font-size: .83rem; }
    .site-navigation .site-dropdown { position: static; box-shadow: none; max-width: none; width: 100%; }
    .site-footer-row { gap: 12px; }
    .site-footer-links { gap: 12px; }
    .site-social-links a { width: 26px; }
}
@media (max-width: 991.98px) {
    .site-footer-row { grid-template-columns: 1fr auto; }
    .site-footer-links { order: -1; grid-column: 1 / -1; justify-content: flex-start; }
    .footer-legal-menu { left: 0; transform: none; }
    .plan-details { padding: 20px; }
}
@media (max-width: 575.98px) {
    .site-header #main-navbar .site-header-inner { min-height: 70px; gap: 8px; }
    .site-header #main-navbar .logo-eternet { width: 135px; }
    .header-account-button { padding: 8px 10px; gap: 6px; font-size: .72rem; }
    .header-account-button > .icon-angle-down { display: none; }
    .site-footer-row { grid-template-columns: 1fr; gap: 12px; justify-items: center; padding-block: 8px; }
    .site-footer-links { justify-content: center; flex-wrap: wrap; gap: 8px 16px; }
    .site-copyright { order: 2; font-size: .72rem; white-space: normal; text-align: center; }
    .site-social-links a { width: 38px; height: 42px; }
    .profile-provider-grid { grid-template-columns: 1fr; }
    .plan-with-details .pricing-title { min-height: 160px; }
}

@media (max-width: 359.98px) {
    .site-header #main-navbar .logo-eternet { width: 110px; }
}

.subscription-other-heading, .subscription-bonus-heading { margin-bottom: 0; }
.subscription-other-heading + .contracted-service-summary { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-top: 20px; }
.subscription-bonus-heading .applied-bonus-heading { margin: 0; font-size: 1.15rem; }
.subscription-bonus-heading .contracted-service-detail { background: none; padding: 0; }
.subscription-bonus-heading dt { text-transform: none; letter-spacing: 0; font-size: .72rem; font-weight: 400; color: var(--site-muted); }
.subscription-bonus-heading .subscription-price strong { color: var(--site-success-text); }
.mobile-plan-catalog .plan-with-details .pricing-title { display: block !important; min-height: 0; padding: 22px 24px 18px !important; }
.mobile-plan-catalog .pricing-title h3 { display: inline-block; font-size: 3.4rem; line-height: 1.1; margin: 0 8px 0 0; }
.mobile-plan-catalog .pricing-unity { display: inline-block; font-size: 1.1rem; }
.mobile-plan-catalog .pricing-type { display: block; margin-top: 10px; }
.mobile-plan-catalog .plan-details { padding: 18px 24px; flex: 0 0 auto; }
.mobile-plan-details { display: flex; align-items: flex-start; gap: 10px; }
.mobile-plan-symbol { display: grid; place-items: center; width: 30px; height: 34px; border-radius: 8px; background: var(--site-brand-soft); color: var(--site-link); flex: 0 0 30px; }
.mobile-plan-symbol .ui-icon { width: 18px; height: 18px; }
.mobile-plan-details h4 { font-size: .85rem; line-height: 1.4; margin: 0 0 4px; }
.mobile-plan-details p { color: var(--site-muted); font-size: .74rem; line-height: 1.5; margin: 0; }
.mobile-plan-catalog .plan-with-details .pricing-content { margin-top: auto; }

/* Mobile navigation: grouped shortcuts over a dismissible backdrop. */
.nav-mobile-icon, .mobile-nav-caption, .mobile-nav-backdrop { display: none; }
.site-search-link > .ui-icon { width: 19px; height: 19px; }
@media (max-width: 1199.98px) {
    .site-header { --navigation-top: 76px; }
    .site-header #main-navbar .site-header-inner { position: relative; z-index: 2; flex-wrap: nowrap; }
    .site-header #main-navbar .navbar-toggler { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--site-text); border-color: var(--site-border); border-radius: 10px; background: var(--site-surface); }
    .site-header .navbar-toggler .ui-icon { width: 22px; height: 22px; }
    .site-header .navbar-toggler[aria-expanded="true"] { color: var(--site-link); background: var(--site-brand-soft); border-color: var(--site-link); }
    .mobile-nav-backdrop { display: block; position: fixed; inset: var(--navigation-top) 0 0; z-index: 1; border: 0; background: #0009; padding: 0; }
    .site-navigation { position: fixed; top: calc(var(--navigation-top) + 8px); left: 16px; right: 16px; width: auto; max-width: 600px; margin-left: auto; padding: 20px; max-height: calc(100dvh - var(--navigation-top) - 24px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--site-border); border-radius: 16px; background: var(--site-surface); box-shadow: 0 20px 60px #0007; scrollbar-width: thin; }
    .site-navigation.is-open { display: grid; gap: 12px; }
    .mobile-nav-caption { display: block; color: var(--site-muted); font-size: .73rem; line-height: 1.5; margin: 0; font-weight: 500; }
    .site-primary-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
    .site-primary-links .nav-item { min-width: 0; }
    .site-primary-links > .nav-item:last-child { grid-column: 1 / -1; }
    .site-primary-links .nav-item.dropdown { grid-column: 1 / -1; order: 1; }
    .site-header #main-navbar .site-navigation .nav-link, .site-header .site-search-link { display: flex; align-items: center; gap: 10px; padding: 14px 12px; min-height: 54px; width: 100%; border: 1px solid var(--site-border); border-radius: 10px; background: var(--site-bg); font-size: .82rem; line-height: 1.45; font-weight: 550; }
    .site-header #main-navbar .site-navigation .nav-link.active { background: var(--site-brand-soft); color: var(--site-link); border-color: var(--site-link); box-shadow: none; }
    .site-header #main-navbar .site-navigation .nav-link:hover, .site-header .site-search-link:hover { background: var(--site-raised); color: var(--site-text); }
    .nav-mobile-icon { display: flex; color: var(--site-link); flex: 0 0 20px; }
    .nav-mobile-icon .ui-icon { width: 20px; height: 20px; }
    .site-direct-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px 0 0; margin: 4px 0 0; border-top: 1px solid var(--site-border); }
    .site-direct-links .mobile-nav-caption, .site-direct-links > .nav-link:first-of-type { grid-column: 1 / -1; }
    .site-direct-links .site-search-link { justify-content: start; }
    .site-search-link > .ui-icon { flex: 0 0 20px; color: var(--site-link); }
    .site-search-link > span { display: inline; font-size: inherit; }
    .site-navigation .site-dropdown { position: static !important; transform: none !important; width: 100%; margin-top: 8px !important; box-shadow: none; border-radius: 10px; }
    .site-navigation .site-dropdown.show { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .site-navigation .site-dropdown a { min-height: 44px; display: flex; align-items: center; padding: 10px; white-space: normal; }
    #main-navbar #admin-menu { min-height: 44px; padding-block: 10px; }
    #admin-menu > .icon-angle-down { margin-left: auto; }
    body:has(.site-header.navigation-open) { overflow: hidden; }
}
@media (max-width: 575.98px) {
    .site-header { --navigation-top: 70px; }
    .site-navigation { left: 12px; right: 12px; padding: 16px; }
    .site-header #main-navbar .site-navigation .nav-link, .site-header .site-search-link { font-size: .78rem; padding: 12px 10px; gap: 8px; min-height: 52px; }
}

@media (min-width: 700px) and (max-width: 1199.98px) and (max-height: 500px) {
    .site-navigation { max-width: 780px; padding: 16px; }
    .site-navigation.is-open { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; align-items: start; }
    .site-navigation > .mobile-nav-caption { grid-column: 1; grid-row: 1; }
    .site-navigation > .site-primary-links { grid-column: 1; grid-row: 2; }
    .site-navigation > .site-direct-links { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0 0 0 16px; border-top: 0; border-left: 1px solid var(--site-border); align-self: stretch; align-content: start; }
    .site-header #main-navbar .site-navigation .nav-link, .site-header .site-search-link { min-height: 44px; padding: 10px; }
}