/* *****************************************************

    RobixHost — Client Area polish pass

    Keeps the theme's original colors and panel styling as-is —
    this file only smooths transitions, adds hover depth, and
    fixes a couple of real layout bugs. It does not recolor
    anything.

***************************************************** */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Real logo (was the template's placeholder demo logo) ---------- */

.logo-menu { height: 60px; width: auto; object-fit: contain; }
.logo-footer { height: 72px; width: auto; object-fit: contain; }

/* ---------- Layout bug fixes (unrelated to color) ---------- */

/* .infonews is position:absolute + width:100% in the stock CSS, which
   measures against the wrong containing block at some breakpoints and
   caused a few px of real horizontal scroll. Pin it to the viewport
   edges directly instead. */
.infonews {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
}
html, body { overflow-x: hidden; max-width: 100%; }

/* Bootstrap's .list-group-item is block-level by default, but something
   in this template's cascade was collapsing it to inline-width on the
   dashboard's account-overview list, making rows sit side-by-side
   instead of stacking. */
.list-group-item { display: block !important; width: 100% !important; }

/* Nav items had zero horizontal breathing room between them. */
.nav-menu .main-menu > .menu-item { margin-left: 4px; margin-right: 4px; }
.nav-menu .main-menu > .menu-item > a { padding-left: 12px; padding-right: 12px; }

/* ---------- Motion / depth polish (same colors, smoother feel) ---------- */

.btn {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn:active { transform: translateY(0) scale(0.97); }

.service-section, .panel {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-section:hover, .panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.35);
}

.header-features-icons .badge.feat {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.header-features-icons .badge.feat:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.4);
}

.footer-menu.classic li a {
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer-menu.classic li a:hover { padding-left: 4px; }

.sub-menu .service { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.sub-menu .service:hover { transform: translateX(4px); }

.payment-list i { transition: transform 0.2s ease, opacity 0.2s ease; }
.payment-list i:hover { transform: translateY(-2px); opacity: 0.85; }

.form-control {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

/* Login card: a touch of lift + a subtle entrance instead of a flat drop-in */
.login-form-container {
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.35);
  animation: rx-rise-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes rx-rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

[data-aos] { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important; }

/* ---------- Dashboard: badge chips on every stat card (was only on 2 of 4) ---------- */

.overview-services .service-section .plans.badge {
  position: absolute;
  top: 20px;
  left: 20px;
}

/* ---------- Dashboard: "Produsele noastre" quick-order cards ---------- */
/* Same .service-section component as the stat cards above, just narrower
   (6 per row instead of 4) so it needs its own compact spacing. */

.clientarea-products-quick .product-quick-card {
  padding: 24px 18px;
  margin-top: 24px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.clientarea-products-quick .product-quick-card .svg {
  height: 40px;
  width: 40px;
}
.clientarea-products-quick .product-quick-card .title {
  font-size: 15px;
  margin-top: 14px;
  margin-bottom: 8px;
}
.clientarea-products-quick .product-quick-card .subtitle {
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 0;
  flex-grow: 1;
}
.clientarea-products-quick .product-quick-card .btn {
  margin-top: 16px !important;
  padding: 6px 20px;
  font-size: 13px;
}

/* ---------- Dashboard: real service/action list (WHMCS panels) readability ---------- */

.rockbox .list-group-item {
  transition: background-color 0.2s ease, padding-left 0.2s ease;
}
.rockbox .list-group-item:hover {
  padding-left: 6px;
}