/* ==========================================================================
   RoTunneling — components.css  (UI2 facelift, loaded AFTER facelift.css)
   One system for forms, messages, buttons, payment badges and account UI.
   Tokens live in facelift.css (:root). Markup hooks used here:
     .rt-form, .rt-field, .rt-label, .rt-control, .rt-help, .rt-field-error,
     .rt-alert(--error|--success|--warning|--info), .rt-btn(--secondary),
     .rt-pay-badges, .rt-seg (company/person toggle), .rt-table-wrap
   Legacy ids/classes (#loginWrapper, .inputText, .submit, .alert-*, .error,
   selectBoxIt) are restyled, never renamed — JS/e2e hooks depend on them.
   ========================================================================== */

/* --------------------------------------------------------------------
   Signature: the logo's four colours as a thin rule. Used exactly twice:
   under the dark top bar and on top of form cards.
   -------------------------------------------------------------------- */
div#topBar {
  position: relative;
}

div#topBar::after,
#loginWrapper.rt-card::before,
.rt-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--rt-red) 0 25%, var(--rt-blue) 25% 50%,
    var(--rt-yellow) 50% 75%, var(--rt-green-bright) 75% 100%);
}

div#topBar::after {
  bottom: 0;
}

/* --------------------------------------------------------------------
   Buttons — primary (green), secondary (outline), danger. Covers the
   legacy input.submit / input[type=submit] and Bootstrap .btn variants.
   -------------------------------------------------------------------- */
.rt-btn,
#contentWrapper input[type="submit"],
#contentWrapper button[type="submit"],
#contentWrapper .btn,
div#loginWrapper input.submit,
div#loginWrapper input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  height: auto;
  padding: 10px 22px !important;
  border: 1px solid transparent;
  border-radius: var(--rt-radius);
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  white-space: normal;
  cursor: pointer;
  box-shadow: none;
  filter: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

/* Primary: brand green */
.rt-btn,
#contentWrapper input[type="submit"],
#contentWrapper button[type="submit"].btn-primary,
#contentWrapper .btn-success,
#contentWrapper .btn-primary,
div#loginWrapper input.submit,
div#loginWrapper input[type="submit"] {
  background: var(--rt-green) !important;
  border-color: var(--rt-green) !important;
  color: #fff !important;
}

.rt-btn:hover,
#contentWrapper input[type="submit"]:hover,
#contentWrapper .btn-success:hover,
#contentWrapper .btn-primary:hover,
div#loginWrapper input.submit:hover {
  background: var(--rt-green-dark) !important;
  border-color: var(--rt-green-dark) !important;
  color: #fff !important;
  transform: none;
  box-shadow: var(--rt-shadow);
}

/* Secondary: outline */
.rt-btn--secondary,
#contentWrapper .btn-default,
#contentWrapper .btn-light {
  background: #fff !important;
  border-color: var(--rt-line-strong) !important;
  color: var(--rt-ink) !important;
}

.rt-btn--secondary:hover,
#contentWrapper .btn-default:hover,
#contentWrapper .btn-light:hover {
  background: var(--rt-canvas) !important;
  border-color: var(--rt-ink-soft) !important;
  color: var(--rt-ink) !important;
}

/* Destructive */
#contentWrapper .btn-danger {
  background: #fff !important;
  border-color: var(--rt-error) !important;
  color: var(--rt-error) !important;
}

#contentWrapper .btn-danger:hover {
  background: var(--rt-error) !important;
  color: #fff !important;
}

#contentWrapper .btn-lg {
  min-height: 52px;
  font-size: 17px;
  padding: 12px 28px !important;
}

/* Loading (set by js/forms.js on a real submit; never disables the control,
   so named submit buttons keep posting their value). */
.rt-is-loading,
input.rt-is-loading,
button.rt-is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.75;
  cursor: progress;
}

.rt-btn[disabled],
#contentWrapper input[type="submit"][disabled],
#contentWrapper .btn[disabled],
#contentWrapper .btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Visible focus ring on every button-ish thing */
.rt-btn:focus-visible,
#contentWrapper input[type="submit"]:focus-visible,
#contentWrapper .btn:focus-visible,
div#loginWrapper input.submit:focus-visible {
  outline: 3px solid var(--rt-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------
   Form card (#loginWrapper) — login, register, recover
   -------------------------------------------------------------------- */
div#loginWrapper.rt-card,
.rt-card {
  position: relative;
  overflow: visible;
  background: #fff;
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-shadow);
  padding: 28px 24px 24px;
  margin-top: 24px;
  margin-bottom: 24px;
}

#loginWrapper.rt-card::before,
.rt-card::before {
  top: -1px;
  border-radius: var(--rt-radius-lg) var(--rt-radius-lg) 0 0;
}

/* Secondary card under the login form ("Cont nou") */
.rt-card--quiet {
  margin: 0 0 32px;
  padding: 14px 20px;
  border: 1px dashed var(--rt-line-strong);
  border-radius: var(--rt-radius-lg);
  text-align: center;
  color: var(--rt-ink-soft);
}

.rt-card--quiet a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

.rt-card__title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
  color: var(--rt-ink);
  text-align: left;
  letter-spacing: 0;
}

.rt-card__lead {
  margin: 0 0 20px;
  color: var(--rt-ink-soft);
  font-size: 15px;
}

/* Wider card for register */
.rt-form-col {
  float: none;
  margin: 0 auto;
  max-width: 480px;
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
}

/* Page intro above forms */
.rt-page-intro {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: left;
}

.rt-page-intro h1,
.rt-page-intro h2 {
  text-align: left !important;
  margin-top: 40px !important;
  margin-bottom: 6px !important;
  font-size: clamp(26px, 4vw, 32px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.5px !important;
  color: var(--rt-ink) !important;
}

.rt-page-intro p {
  text-align: left !important;
  color: var(--rt-ink-soft) !important;
  margin: 0 0 8px !important;
}

/* --------------------------------------------------------------------
   Fields: label above control, helper text, inline error
   -------------------------------------------------------------------- */
#contentWrapper .rt-form label,
#contentWrapper .rt-form .rt-field,
div#loginWrapper.rt-card label {
  display: block;
  position: relative;
  width: 100% !important;
  margin: 0 0 18px !important;
  line-height: 1.4;
  font-weight: 400;
  float: none !important;
}

#contentWrapper .rt-form .rt-label,
div#loginWrapper.rt-card .rt-label {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--rt-ink);
  line-height: 1.35;
}

.rt-label .rt-optional {
  font-weight: 400;
  color: var(--rt-ink-soft);
}

.rt-req,
.rt-billing .rt-req {
  color: var(--rt-error);
  font-weight: 700;
  margin-left: 2px;
}

.rt-control {
  position: relative;
  display: block;
}

/* Text inputs inside the new form system */
#contentWrapper .rt-form input[type="text"],
#contentWrapper .rt-form input[type="email"],
#contentWrapper .rt-form input[type="password"],
#contentWrapper .rt-form input[type="tel"],
#contentWrapper .rt-form input.inputText,
#contentWrapper .rt-form select,
#contentWrapper .rt-form textarea,
div#loginWrapper.rt-card input.inputText,
div#loginWrapper.rt-card input[type="password"],
div#loginWrapper.rt-card input[type="text"] {
  display: block;
  float: none !important;
  width: 100% !important;
  height: 46px;
  min-height: 46px;
  margin: 0 !important;
  padding: 10px 14px !important;
  background: #fff !important;
  filter: none !important;
  border: 1px solid var(--rt-line-strong) !important;
  border-radius: var(--rt-radius) !important;
  box-shadow: none !important;
  color: var(--rt-ink) !important;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px !important; /* 16px: no iOS zoom-on-focus */
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#contentWrapper .rt-form textarea {
  height: auto;
  min-height: 120px;
}

/* Inputs that carry a leading icon */
.rt-control--icon input.inputText,
.rt-control--icon input[type="password"],
.rt-control--icon input[type="text"],
div#loginWrapper.rt-card .rt-control--icon input {
  padding-left: 44px !important;
}

.rt-control--icon > span > i,
div#loginWrapper.rt-card .rt-control--icon i {
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 2;
  color: var(--rt-ink-soft);
  font-size: 16px;
  width: 18px;
  text-align: center;
  pointer-events: none;
}

#contentWrapper .rt-form input::placeholder,
div#loginWrapper.rt-card input::placeholder {
  color: #6B7580;
  opacity: 1;
}

#contentWrapper .rt-form input:hover,
div#loginWrapper.rt-card input.inputText:hover {
  border-color: var(--rt-ink-soft) !important;
}

#contentWrapper .rt-form input:focus,
#contentWrapper .rt-form select:focus,
#contentWrapper .rt-form textarea:focus,
div#loginWrapper.rt-card input:focus {
  outline: none;
  border-color: var(--rt-focus) !important;
  box-shadow: 0 0 0 3px rgba(31, 111, 191, 0.25) !important;
}

/* Error state — driven by aria-invalid (set server-side in templates) */
#contentWrapper .rt-form input[aria-invalid="true"],
div#loginWrapper.rt-card input[aria-invalid="true"] {
  border-color: var(--rt-error) !important;
  background: #fff !important;
}

#contentWrapper .rt-form input[aria-invalid="true"]:focus,
div#loginWrapper.rt-card input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.2) !important;
}

.rt-help,
.rt-billing .rt-billing-hint {
  display: block;
  margin: 6px 0 0 !important;
  font-size: 13px;
  line-height: 1.45;
  color: var(--rt-ink-soft) !important;
}

.rt-billing .rt-billing-hint {
  margin: -10px 0 18px !important;
}

/* Inline field error. Keeps .alert-danger for e2e/JS selectors, but drops
   Bootstrap's pink banner look. */
.rt-field-error,
#contentWrapper span.alert-danger.rt-field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  background: none !important;
  border: 0;
  color: var(--rt-error) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.rt-field-error > i {
  flex: 0 0 auto;
  margin-top: 3px;
  font-size: 14px;
}

.rt-field-error br:last-child {
  display: none;
}

/* Live availability hints (#msgbox / #msgbox1, jQuery-driven classes) */
#contentWrapper .messagebox,
#contentWrapper .messageboxok,
#contentWrapper .messageboxerror {
  display: block;
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--rt-ink-soft);
}

#contentWrapper .messageboxok {
  color: var(--rt-success);
}

#contentWrapper .messageboxerror {
  color: var(--rt-error);
}

/* Person / company segmented toggle. Radios stay real, focusable inputs
   (#type_fizica / #type_juridica); the sibling selector
   `#type_juridica:checked ~ #company-fields` keeps working. */
.rt-type-toggle.rt-seg {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

/* Radios stay real and directly clickable: drawn inside their segment. */
.rt-seg > input[type="radio"] {
  position: absolute;
  top: 13px;
  z-index: 2;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--rt-green-bright);
}

.rt-seg > input#type_fizica { left: 14px; }
.rt-seg > input#type_juridica { left: calc(50% + 14px); }

.rt-seg > label.rt-type-option {
  flex: 1 1 50%;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  width: 50% !important;
  min-height: 44px;
  margin: 0 0 18px !important;
  padding: 8px 10px 8px 42px;
  border: 1px solid var(--rt-line-strong);
  background: #fff;
  color: var(--rt-ink);
  font-size: 15px;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.rt-seg > label.rt-type-option[for="type_fizica"] {
  border-radius: var(--rt-radius) 0 0 var(--rt-radius);
}

.rt-seg > label.rt-type-option[for="type_juridica"] {
  border-radius: 0 var(--rt-radius) var(--rt-radius) 0;
  border-left: 0;
}

.rt-seg > input[type="radio"]:checked + label.rt-type-option {
  background: var(--rt-ink);
  border-color: var(--rt-ink);
  color: #fff;
}

.rt-seg > input[type="radio"]:focus-visible {
  outline: 3px solid var(--rt-focus);
  outline-offset: 2px;
}

.rt-seg > label:not(.rt-type-option),
.rt-seg > div,
.rt-seg > p {
  flex: 1 1 100%;
}

/* Sub-group for company fields */
.rt-seg #company-fields {
  padding: 16px 16px 0;
  margin: 0 0 18px;
  border-left: 3px solid var(--rt-blue);
  background: var(--rt-canvas);
  border-radius: 0 var(--rt-radius) var(--rt-radius) 0;
}

.rt-enterprise-offer {
  margin: -6px 0 18px !important;
  font-size: 14px !important;
}

/* selectBoxIt dropdowns (plan, country) — same box as the text inputs */
#contentWrapper .rt-form .selectboxit-container,
#contentWrapper .rt-form #departmentSelectBoxItContainer,
#contentWrapper .rt-form #taraSelectBoxItContainer {
  display: block;
  float: none !important;
  width: 100% !important;
}

#contentWrapper .rt-form .selectboxit-container .selectboxit,
#contentWrapper .rt-form #departmentSelectBoxIt,
#contentWrapper .rt-form #taraSelectBoxIt {
  display: block;
  float: none !important;
  width: 100% !important;
  height: 46px !important;
  margin: 0 !important;
  padding-left: 4px;
  background: #fff !important;
  filter: none !important;
  border: 1px solid var(--rt-line-strong) !important;
  border-radius: var(--rt-radius) !important;
  box-shadow: none !important;
}

#contentWrapper .rt-form .selectboxit-text,
#contentWrapper .rt-form #departmentSelectBoxItText,
#contentWrapper .rt-form #taraSelectBoxItText {
  line-height: 44px !important;
  height: 44px;
  font-size: 16px !important;
  color: var(--rt-ink) !important;
  max-width: calc(100% - 40px) !important;
}

#contentWrapper .rt-form .selectboxit-arrow-container {
  height: 44px;
}

#contentWrapper .rt-form .selectboxit-arrow {
  top: 20px !important;
}

#contentWrapper .rt-form .selectboxit-options,
#contentWrapper .rt-form #departmentSelectBoxItOptions,
#contentWrapper .rt-form #taraSelectBoxItOptions {
  top: 46px !important;
  width: 100% !important;
  max-height: 280px;
  overflow-y: auto;
  background: #fff !important;
  filter: none !important;
  border: 1px solid var(--rt-line-strong) !important;
  border-radius: var(--rt-radius) !important;
  box-shadow: var(--rt-shadow-lg) !important;
}

#contentWrapper .rt-form .selectboxit-option-anchor {
  min-height: 40px;
  line-height: 40px !important;
  font-size: 15px;
  color: var(--rt-ink) !important;
}

#contentWrapper .rt-form .selectboxit-focus > .selectboxit-option-anchor,
#contentWrapper .rt-form .selectboxit-option .selectboxit-option-anchor:hover {
  background: var(--rt-canvas) !important;
  color: var(--rt-green) !important;
}

#contentWrapper .rt-form .selectboxit:focus,
#contentWrapper .rt-form .selectboxit-focus.selectboxit-btn,
#contentWrapper .rt-form .selectboxit-open .selectboxit {
  border-color: var(--rt-focus) !important;
  box-shadow: 0 0 0 3px rgba(31, 111, 191, 0.25) !important;
}

/* Turnstile + submit row */
#contentWrapper .rt-form .cf-turnstile,
div#loginWrapper.rt-card .cf-turnstile {
  margin: 4px 0 18px;
}

.rt-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 4px;
}

.rt-form-actions input[type="submit"],
div#loginWrapper.rt-card .rt-form-actions input.submit {
  width: auto !important;
  min-width: 160px;
  flex: 0 0 auto;
}

.rt-form-actions--full input[type="submit"],
div#loginWrapper.rt-card .rt-form-actions--full input.submit {
  width: 100% !important;
  flex: 1 1 100%;
}

.rt-form-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.rt-divider-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -4px 0 14px;
  color: var(--rt-ink-soft);
  font-size: 13px;
  font-weight: 600;
}

.rt-divider-or::before,
.rt-divider-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rt-line);
}

/* Checkbox rows (newsletter prefs) */
.rt-check {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  margin: 0 0 12px !important;
  line-height: 1.45 !important;
  cursor: pointer;
}

.rt-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0 !important;
  accent-color: var(--rt-green);
}

.rt-meta {
  display: block;
  font-size: 13px;
  color: var(--rt-ink-soft);
}

/* --------------------------------------------------------------------
   Alerts — one component for every server message (templates/_alert.tpl)
   Also normalises legacy Bootstrap .alert blocks still in templates.
   -------------------------------------------------------------------- */
.rt-alert,
#contentWrapper .alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--rt-radius);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  text-shadow: none;
  box-shadow: none;
  background-image: none;
}

#contentWrapper .alert {
  display: block;
}

#contentWrapper .alert.rt-alert {
  display: flex;
}

.rt-alert__icon {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 18px;
  line-height: 1;
}

.rt-alert__body {
  flex: 1 1 auto;
  min-width: 0;
}

.rt-alert__title {
  display: block;
  margin: 0 0 2px;
  font-weight: 700;
}

.rt-alert p,
#contentWrapper .alert p {
  margin: 0 0 6px !important;
  color: inherit !important;
  max-width: none;
}

.rt-alert p:last-child,
#contentWrapper .alert p:last-child {
  margin-bottom: 0 !important;
}

.rt-alert a:not(.btn),
#contentWrapper .alert a:not(.btn) {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.rt-alert .btn,
#contentWrapper .alert .btn {
  margin: 10px 8px 0 0;
}

/* Server-built legacy markup (<div class="error"><b>..</b><div>..</div></div>)
   rendered inside an .rt-alert: keep the .error hook, drop its red/centred look. */
.rt-alert .error {
  text-align: left;
  color: inherit;
}

.rt-alert .error b {
  display: block;
  margin-bottom: 2px;
}

.rt-alert--error,
#contentWrapper .alert-danger:not(.rt-field-error) {
  background: #FDF1F0;
  border-color: #F3C7C2;
  border-left-color: var(--rt-error);
  color: #7A1A12;
}

.rt-alert--error .rt-alert__icon { color: var(--rt-error); }

.rt-alert--success,
#contentWrapper .alert-success {
  background: #EEF7E8;
  border-color: #CFE5BF;
  border-left-color: var(--rt-green);
  color: #1F3D0A;
}

.rt-alert--success .rt-alert__icon { color: var(--rt-green); }

.rt-alert--warning,
#contentWrapper .alert-warning {
  background: #FFF7E6;
  border-color: #F6DDA6;
  border-left-color: var(--rt-yellow);
  color: #5C3B00;
}

.rt-alert--warning .rt-alert__icon { color: #946200; }

.rt-alert--info,
#contentWrapper .alert-info,
#contentWrapper .alert-light {
  background: #EAF2FB;
  border-color: #C6DAF1;
  border-left-color: var(--rt-blue);
  color: #173E6B;
}

.rt-alert--info .rt-alert__icon { color: var(--rt-blue); }

/* Page-level placement */
.rt-alert-slot {
  max-width: 480px;
  margin: 16px auto 0;
  padding: 0 16px;
}

.rt-alert-slot--wide {
  max-width: none;
  padding: 0;
}

/* Bare legacy .error outside alerts (style.css: red centred text) */
.error {
  color: var(--rt-error);
}

/* --------------------------------------------------------------------
   Payment badges (home "Plati" + payment pages) — one height, one baseline
   Fixes v1 regression: `img{height:auto}` overrode the height="35"
   attributes so SVG logos scaled to the full column width.
   -------------------------------------------------------------------- */
.rt-pay-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 12px 0 20px;
  padding: 0;
  list-style: none;
}

.rt-pay-badges img,
#contentWrapper .rt-pay-badges img {
  display: block;
  height: 32px !important;
  width: auto !important;
  max-width: none;
  max-height: 32px;
  object-fit: contain;
  float: none;
  margin: 0;
}

.rt-trust-badge,
#contentWrapper img.rt-trust-badge {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
}

/* --------------------------------------------------------------------
   Home: features block & pricing readability
   -------------------------------------------------------------------- */
div#packageWrapper ul.packageBody .price span[itemprop="price"],
div#packageWrapper ul.packageBody .price span[itemprop="priceCurrency"] {
  color: var(--rt-green) !important;
}

div#packageWrapper ul.packageBody .price .cycle {
  color: var(--rt-ink-soft) !important;
}

div#contentWrapper .features .title,
div#packageWrapper .features .title {
  display: block;
  margin: 0 0 6px;
  color: var(--rt-ink);
  font-size: 16px;
  font-weight: 700;
}

div#contentWrapper .features .featuresImage {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

div#contentWrapper .features p {
  margin-top: 0;
  margin-bottom: 10px;
}

div#contentWrapper h3 {
  color: var(--rt-ink-soft);
}

/* --------------------------------------------------------------------
   Page header band (sub pages)
   -------------------------------------------------------------------- */
div#pageHeaderWrapper {
  height: auto;
  min-height: 100px;
  display: flex;
  align-items: center;
}

div.pageHeader {
  line-height: 1.25;
  padding: 28px 16px;
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 300;
  letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------
   Client area (cont_c2): tabs, cards, tables
   -------------------------------------------------------------------- */
#contentWrapper .nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 16px;
  border-bottom: 1px solid var(--rt-line-strong);
}

#contentWrapper .nav-tabs > li {
  float: none;
  margin-bottom: -1px;
}

#contentWrapper .nav-tabs > li > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--rt-radius) var(--rt-radius) 0 0;
  color: var(--rt-ink-soft);
  font-weight: 600;
}

#contentWrapper .nav-tabs > li > a:hover {
  background: var(--rt-canvas);
  border-color: transparent;
  color: var(--rt-ink);
}

#contentWrapper .nav-tabs > li.active > a,
#contentWrapper .nav-tabs > li.active > a:hover,
#contentWrapper .nav-tabs > li.active > a:focus {
  background: #fff;
  border-color: var(--rt-line-strong) var(--rt-line-strong) #fff;
  color: var(--rt-ink);
  box-shadow: inset 0 3px 0 var(--rt-green-bright);
}

#contentWrapper .tab-pane > h1 {
  margin-top: 32px;
  margin-bottom: 8px;
  font-size: clamp(26px, 4vw, 34px);
}

#contentWrapper .tab-content .firstRow h2,
#contentWrapper .tab-content h2 {
  font-size: 21px;
  font-weight: 600;
  margin-top: 28px;
  margin-bottom: 12px;
  color: var(--rt-ink);
}

/* Account status: small key/value rhythm */
#contentWrapper .card-body > p {
  margin: 0 0 6px;
}

.rt-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.rt-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.rt-status--ok {
  background: #EEF7E8;
  color: var(--rt-green);
}

.rt-status--bad {
  background: #FDF1F0;
  color: var(--rt-error);
}

/* Inline coupon form: input + button on one row */
.rt-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  max-width: 420px;
  margin: 0 0 16px !important;
}

#contentWrapper .rt-inline-form input[type="text"],
#contentWrapper .rt-inline-form .form-control {
  flex: 1 1 180px;
  width: auto !important;
  height: 46px !important;
  margin: 0 !important;
  float: none !important;
  padding: 10px 14px !important;
  background: #fff !important;
  border: 1px solid var(--rt-line-strong) !important;
  border-radius: var(--rt-radius) !important;
  box-shadow: none !important;
  font-size: 16px !important;
  color: var(--rt-ink);
}

#contentWrapper .rt-inline-form .btn,
#contentWrapper .rt-inline-form button {
  flex: 0 0 auto;
  height: 46px !important;
}

/* Tables (invoices, payment summary) */
.rt-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 8px 0 24px;
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius-lg);
  background: #fff;
}

.rt-table-wrap:focus-visible {
  outline: 3px solid var(--rt-focus);
  outline-offset: 2px;
}

.rt-table-wrap > .table {
  margin: 0;
  min-width: 560px;
  background: #fff;
}

#contentWrapper .rt-table-wrap .table > thead > tr > th {
  border-bottom: 1px solid var(--rt-line-strong);
  background: var(--rt-canvas);
  color: var(--rt-ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  padding: 12px 14px;
}

#contentWrapper .rt-table-wrap .table > tbody > tr > td {
  padding: 12px 14px;
  border-top: 1px solid var(--rt-line);
  vertical-align: top;
  font-size: 14px;
}

.rt-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rt-empty {
  color: var(--rt-ink-soft);
  text-align: center;
  padding: 24px 14px !important;
}

/* Profile page (cont_c2 #profile) — stacked label/field layout */
#profile .rt-form label:not(.rt-type-option):not(.rt-check) {
  display: block;
  margin: 0 0 18px !important;
  line-height: 1.4 !important;
  font-weight: 600;
  font-size: 14px;
}

#profile .rt-form label:not(.rt-type-option):not(.rt-check) > input {
  margin-top: 6px !important;
  font-weight: 400;
}

#profile .rt-form label.select {
  line-height: 1.4 !important;
}

#profile .rt-form label.select .selectboxit-container {
  margin-top: 6px;
}

#profile .rt-pass-card {
  width: auto !important;
  max-width: 340px;
}

/* --------------------------------------------------------------------
   Payment page (subscription/card/templates/payment*.tpl)
   -------------------------------------------------------------------- */
.rt-total {
  margin: 16px 0 !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--rt-ink) !important;
  text-align: left !important;
  letter-spacing: 0 !important;
}

.rt-period-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin: 8px 0 24px;
}

.rt-period-grid > div,
.rt-period-grid > [class*="col-"] {
  float: none;
  width: auto;
  padding: 0;
}

/* --------------------------------------------------------------------
   Footer — AA link colour + tidier rhythm
   -------------------------------------------------------------------- */
footer ul.footerMenu li a,
footer ul.footerAddress li a,
footer a {
  color: var(--rt-green);
}

footer ul.footerMenu li a:hover,
footer a:hover {
  color: var(--rt-green-dark);
  text-decoration: underline;
}

footer ul.footerMenu li {
  font-size: 13px;
  line-height: 1.5;
  padding: 3px 0;
}

footer ul.footerMenu li.title,
footer .title {
  color: var(--rt-ink);
  font-size: 14px;
  font-weight: 700;
}

footer #footerCopyright {
  font-size: 12px;
  color: var(--rt-ink-soft);
}

footer ul#footerSocial li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--rt-ink-soft);
}

/* --------------------------------------------------------------------
   Newsletter page
   -------------------------------------------------------------------- */
.rt-newsletter {
  max-width: 480px;
}

/* --------------------------------------------------------------------
   Download page icon links: tap target size
   -------------------------------------------------------------------- */
#awin32, #alinux, #adarwin, #aandroid, #aios {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* --------------------------------------------------------------------
   Visually hidden (screen-reader only) text
   -------------------------------------------------------------------- */
.rt-sr-only,
div#contentWrapper label.rt-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------- */
@media (max-width: 480px) {
  div#loginWrapper.rt-card,
  .rt-card {
    padding: 24px 16px 18px;
  }

  .rt-form-actions input[type="submit"],
  div#loginWrapper.rt-card .rt-form-actions input.submit {
    width: 100% !important;
    flex: 1 1 100%;
  }

  .rt-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .rt-form-actions a {
    justify-content: center;
  }

  .rt-pay-badges {
    gap: 12px 16px;
  }

  .rt-pay-badges img,
  #contentWrapper .rt-pay-badges img {
    height: 28px !important;
    max-height: 28px;
  }

  #contentWrapper .nav-tabs > li > a {
    padding: 10px 12px;
  }
}

/* Legacy style.css positions every `#loginWrapper label i` absolutely (input
   icons); icons that belong to messages must stay in flow. */
div#loginWrapper label .rt-field-error i,
div#loginWrapper .rt-alert i,
.rt-field-error > i {
  position: static !important;
  transform: none !important;
}

/* Programmatic focus target (error summary): announced, no keyboard ring. */
.rt-alert[tabindex="-1"]:focus {
  outline: none;
}

/* Icon inputs must win over the generic `#contentWrapper .rt-form input` padding. */
#contentWrapper .rt-form .rt-control--icon input {
  padding-left: 44px !important;
}

/* Plan change form in the account sidebar */
.rt-plan-form {
  margin: 0 0 12px;
}

.rt-plan-form label.select {
  margin-bottom: 12px !important;
}

/* Payment page: billing period cards, discounts, full-width pay button */
.rt-table-wrap--fit > .table {
  min-width: 0;
}

.rt-discount {
  color: var(--rt-green) !important;
  font-weight: 700;
}

.rt-btn--block,
#contentWrapper .btn.rt-btn--block {
  display: flex;
  width: 100%;
  margin: 8px 0 24px;
}

.rt-coupon-q {
  margin: 20px 0 6px !important;
}

.rt-coupon-q label {
  display: inline;
  margin: 0 !important;
  font-weight: 600;
  line-height: 1.4 !important;
}

.rt-period {
  min-width: 0;
}

.rt-period .card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--rt-line);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-shadow);
}

.rt-period .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
}

.rt-period .card-title {
  margin: 0 0 8px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--rt-ink) !important;
}

.rt-period .card-text {
  margin: 0 0 4px !important;
}

.rt-period .btn {
  margin-top: auto;
  align-self: stretch;
}

.rt-period .card-text + .btn,
.rt-period .card-text:last-of-type {
  margin-bottom: 12px !important;
}

/* Legacy style.css floats/stretches every submit in #contentWrapper
   (float:right; width:80%; 12px text). Buttons sit in normal flow. */
div#contentWrapper input[type="submit"],
div#contentWrapper .rt-form input[type="submit"] {
  float: none !important;
  width: auto;
  margin: 8px 0 0 !important;
  font-size: 15px !important;
}

div#contentWrapper .rt-form-actions input[type="submit"] {
  margin: 0 !important;
}

div#contentWrapper .rt-form-actions--full input[type="submit"] {
  width: 100% !important;
}

.rt-empty {
  text-align: left !important;
}

footer ul#footerSocial li {
  margin-left: 8px;
  height: auto;
}

.rt-plan-form {
  max-width: 360px;
}

/* Guideline polish: balanced headings, tabular figures, snappy taps */
.rt-page-intro h1,
.rt-page-intro h2,
div.pageHeader,
.rt-card__title,
#contentWrapper .tab-pane > h1 {
  text-wrap: balance;
}

.rt-table-wrap td,
.rt-total,
#packageWrapper .price {
  font-variant-numeric: tabular-nums;
}

.rt-btn,
#contentWrapper input[type="submit"],
#contentWrapper .btn,
.rt-seg > label.rt-type-option,
#contentWrapper .nav-tabs > li > a {
  touch-action: manipulation;
}

/* ==========================================================================
   UI3 — proportion pass (2026-09)
   One type scale (tokens in facelift.css :root), one button component for
   every CTA, one reading width. Overrides legacy style.css sizes that were
   set per page (40px/200-weight h1, 15px green h4 titles, 10–12px meta).
   ========================================================================== */

/* ---------- Type scale inside page content ---------- */
div#contentWrapper,
div#packageWrapper {
  font-size: var(--rt-fs-body);
  line-height: var(--rt-lh-body);
}

div#contentWrapper p,
div#contentWrapper li,
div#contentWrapper dd {
  font-size: var(--rt-fs-body);
  line-height: var(--rt-lh-body);
}

div#contentWrapper h1,
div#packageWrapper h1 {
  font-size: var(--rt-fs-h1);
  font-weight: 300;
  letter-spacing: 0;
  line-height: var(--rt-lh-tight);
  margin-top: var(--rt-section-y);
  margin-bottom: 20px;
  color: var(--rt-ink);
}

div#contentWrapper h2,
div#packageWrapper h2 {
  font-size: var(--rt-fs-h2);
  font-weight: 400;
  line-height: 1.3;
  margin-top: 36px;
  margin-bottom: 12px;
  color: var(--rt-ink);
}

/* Legacy h3 is used as a lead/sub-title under section headings (home,
   download): keep it a quiet lead line; real sub-headings inside content
   (.rt-readable) get the heading weight. */
div#contentWrapper h3,
div#packageWrapper h3 {
  font-size: var(--rt-fs-lead);
  font-weight: 400;
  line-height: 1.5;
  margin-top: 16px;
  margin-bottom: 10px;
  color: var(--rt-ink-soft);
}
div#contentWrapper .rt-readable h3 {
  font-size: var(--rt-fs-h3);
  font-weight: 600;
  line-height: 1.35;
  margin-top: 28px;
  color: var(--rt-ink);
}

div#contentWrapper h4 {
  font-size: var(--rt-fs-h4);
  font-weight: 600;
  line-height: 1.35;
  color: var(--rt-ink);
}

div#contentWrapper h5 {
  font-size: var(--rt-fs-h4);
  font-weight: 700;
  line-height: 1.35;
  color: var(--rt-ink);
}

/* Home pricing heading keeps its legacy !important size: align it to h2 */
div#packageWrapper h1#register {
  font-size: var(--rt-fs-h1) !important;
  font-weight: 300 !important;
  letter-spacing: 0;
}

/* Sub-page band title */
div.pageHeader {
  font-size: var(--rt-fs-h1);
  font-weight: 300;
  letter-spacing: 0;
}

/* Reading width for single-column pages (contact, terms, guides) */
.pageContent .rt-readable {
  max-width: var(--rt-w-text);
}
.pageContent .rt-readable > h2:first-child,
.pageContent .rt-readable > h1:first-child { margin-top: 8px; }

/* ---------- Header nav ---------- */
div#topBar nav { font-size: 14px; }
div#topBar nav ul li a.login {
  font-size: 14px;
  text-transform: none;
}

/* ---------- One button component: every CTA ---------- */
.rt-btn,
a.rt-btn,
div#contentWrapper a.rt-btn,
div#packageWrapper ul.packageBody li.last a.order,
#packageWrapper ul.packageBody li.last a.order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 28px;
  border: 1px solid var(--rt-green);
  border-radius: var(--rt-radius);
  background: var(--rt-green) !important;
  color: #fff !important;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  float: none;
  width: auto;
  height: auto;
  filter: none;
  box-shadow: none;
}

.rt-btn:hover,
a.rt-btn:hover,
div#packageWrapper ul.packageBody li.last a.order:hover {
  background: var(--rt-green-dark) !important;
  border-color: var(--rt-green-dark);
  color: #fff !important;
  text-decoration: none;
}

.rt-btn--lg,
a.rt-btn--lg,
div#contentWrapper a.rt-btn--lg { min-height: 52px; padding: 14px 36px; font-size: 17px; }

/* Pricing card CTA fills its card, one line */
div#packageWrapper ul.packageBody li.last a.order {
  display: flex;
  width: 100%;
  padding: 12px 16px;
}

/* Home sign-up CTA (was the signup-button.png sprite) */
a.rt-cta { margin: 0 auto; }

/* Pricing small print */
div#packageWrapper ul.packageBody li.price .cycle {
  font-size: 12px;
  line-height: 1.4;
}

/* ---------- Blog / reviews: byline row + wide body + quiet sidebar ---------- */
div.blogPost { margin-bottom: 32px; }
div.blogPost .rt-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
div.blogPost .rt-byline img.blogAuthor {
  width: 48px;
  height: 48px;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 48px;
}
div.blogPost .rt-byline span.blogName,
div.blogPost .rt-byline span.blogDate {
  display: inline;
  width: auto;
  margin: 0;
  text-align: left !important;
  text-transform: none;
  font-size: var(--rt-fs-sm);
  color: var(--rt-ink-soft);
}
div.blogPost .rt-byline span.blogName { font-weight: 600; color: var(--rt-ink); }
div.blogPost .rt-byline span.blogDate::before { content: "\00B7"; margin-right: 8px; color: var(--rt-ink-soft); }
div#contentWrapper div.blogPost .rt-post-body h4 {
  font-size: var(--rt-fs-h3);
  font-weight: 600;
  margin: 0 0 8px;
}
div.blogPost .rt-post-body h4 a { color: var(--rt-ink); }
div.blogPost .rt-post-body h4 a:hover { color: var(--rt-green); }
hr.blogHr { margin-bottom: 32px; }

/* Article page: title is the page's h1-level heading visually */
div#contentWrapper div.rt-article .rt-post-body h4[itemprop="name"] {
  font-size: var(--rt-fs-h1);
  font-weight: 400;
  line-height: var(--rt-lh-tight);
  margin: 4px 0 16px;
  color: var(--rt-ink);
}
div.rt-article .rt-readable { max-width: none; }
div.rt-article .rt-readable p,
div.rt-article .rt-readable li { font-size: var(--rt-fs-body); line-height: 1.7; }

.rt-aside { padding-top: 8px; }
div#contentWrapper .rt-aside h5 {
  font-size: var(--rt-fs-h4);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rt-line);
}
ul#blogPosts { color: var(--rt-ink); }
ul#blogPosts li { margin-bottom: 18px; font-size: var(--rt-fs-body); line-height: 1.4; }
ul#blogPosts li a { color: var(--rt-green); font-weight: 600; }
ul#blogPosts .readMore {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  font-size: var(--rt-fs-sm);
  line-height: 1.5;
  color: var(--rt-ink-soft);
}

/* Blog pagination: legible tap targets */
#blogPagination a,
#blogPagination span { display: inline-block; min-width: 36px; padding: 6px 8px; font-size: var(--rt-fs-body); }

/* ---------- Download page OS switcher: JS paints the active label with the
   legacy #88b73e (2.5:1). Keep the hook, lift the colour to AA green. ---------- */
#awin32[style*="88b73e"], #alinux[style*="88b73e"], #adarwin[style*="88b73e"],
#aios[style*="88b73e"], #aandroid[style*="88b73e"], #arouters[style*="88b73e"] {
  color: var(--rt-green) !important;
}

/* ---------- Footer: one size for all columns ---------- */
footer p,
footer ul.footerMenu li,
footer ul.footerAddress li {
  font-size: var(--rt-fs-sm);
  line-height: 1.6;
}
footer ul.footerMenu li.title,
footer ul.footerAddress li.title,
footer .title {
  font-size: 15px;
  font-weight: 700;
  color: var(--rt-ink);
}
footer #footerCopyright { font-size: var(--rt-fs-xs); }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  :root { --rt-section-y: 32px; }
  .rt-aside { margin-top: 24px; }
  .rt-btn--lg, a.rt-btn--lg, div#contentWrapper a.rt-btn--lg { width: 100%; padding: 14px 20px; white-space: normal; }
  div#packageWrapper ul.packageBody li.last a.order { padding: 12px 8px; font-size: 15px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  #contentWrapper .row.firstRow > .col-sm-8,
  #contentWrapper .row.firstRow > .rt-aside { width: 100%; }
}
footer ul.footerMenu li.title { padding-top: 0; }
@media (max-width: 480px) {
  div#packageWrapper ul.packageBody li.price { font-size: 26px; white-space: nowrap; }
}
/* Centered copy: the 70ch paragraph measure must centre with its text */
p.text-center,
.text-center > p,
[style*="text-align:center"] p { margin-left: auto; margin-right: auto; }
/* Account tabs: each .tab-pane is also a Bootstrap .container nested in the
   page .container, so it was 30px wider than its parent and the right
   column overhung the content edge. */
#contentWrapper .tab-content > .tab-pane.container { width: auto; max-width: 100%; }
/* Reviews sidebar: the title is plain text and "Citeste articolul" is the link */
ul#blogPosts a.readMore {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  color: var(--rt-green);
  font-weight: 600;
}
ul#blogPosts a.readMore:hover { color: var(--rt-green-dark); }