:root {
  --bg-main: #fff;
  --bg-alt: #f4f6f9;
  --text-main: #101828;
  --text-muted: #687386;
  --border-light: #e4e8ee;
  --primary: #e10600;
  --primary-hover: #c10500;
  --primary-glow: rgb(225, 6, 0 / 18%);
  --accent: #e10600;
  --dark: #09111e;
  --font-family: Inter, Arial, Helvetica, sans-serif;
  --font-display: Inter, Arial, Helvetica, sans-serif;
}

.account-portal-header {
  display: none;
  min-height: 76px;
  padding: 0 max(18px, calc((100% - 1240px) / 2));
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #09111e;
  color: #fff;
  border-bottom: 3px solid #e10600;
}

.account-portal-brand {
  color: #fff;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -1.4px;
  text-decoration: none;
  white-space: nowrap;
}

.account-portal-brand span {
  color: #e10600;
}

.account-portal-return {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.account-portal-admin {
  margin-left: auto;
  color: #ff7373;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.account-portal-admin:hover,
.account-portal-admin:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.account-portal-admin[hidden] {
  display: none;
}

.account-portal-return:hover,
.account-portal-return:focus-visible {
  color: #ff7373;
  text-decoration: underline;
}

body:has(.login-container, .register-container, .profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .account-portal-header {
  display: flex;
}

body:has(.login-container, .register-container, .profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .sidebar,
body:has(.login-container, .register-container, .profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .top-search-bar,
body:has(.login-container, .register-container, .profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .mobile-header,
body:has(.login-container, .register-container, .profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .footer {
  display: none !important;
}

body:has(.login-container, .register-container, .profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .content-wrapper {
  margin-left: 0 !important;
  padding-top: 0 !important;
  min-height: calc(100dvh - 76px);
  background: #f4f6f9;
}

body:has(.login-container, .register-container, .profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .main-content {
  padding: 0 !important;
  background: #f4f6f9;
}

body:has(.login-container, .register-container, .profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .login-container,
body:has(.login-container, .register-container, .profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .register-container {
  min-height: calc(100dvh - 76px);
  padding: 42px 18px;
  background: #f4f6f9;
}

body:has(.login-container, .register-container) .login-card,
body:has(.login-container, .register-container) .register-card {
  border: 1px solid #e4e8ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 45px rgb(8 17 30 / 10%);
}

body:has(.login-container, .register-container) .login-header h1,
body:has(.login-container, .register-container) .register-header h1 {
  color: #101828;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-weight: 900;
}

body:has(.login-container, .register-container) .login-header p,
body:has(.login-container, .register-container) .register-header p {
  color: #687386;
}

body:has(.login-container, .register-container) .form-group label {
  color: #101828;
  font-weight: 800;
}

body:has(.login-container, .register-container) .form-input,
body:has(.login-container, .register-container) .form-control {
  min-height: 46px;
  border: 1px solid #cbd2dc;
  border-radius: 8px;
  color: #101828;
  background: #fff;
}

body:has(.login-container, .register-container) .form-input:focus,
body:has(.login-container, .register-container) .form-control:focus {
  border-color: #e10600;
  outline: 3px solid rgb(225, 6, 0 / 18%);
  box-shadow: none;
}

body:has(.login-container, .register-container) .btn.btn-primary,
body:has(.profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .btn.btn-primary {
  border-color: #e10600;
  border-radius: 8px;
  background: #e10600;
  color: #fff;
  font-weight: 900;
}

body:has(.login-container, .register-container) .btn.btn-primary:hover,
body:has(.profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .btn.btn-primary:hover {
  border-color: #c10500;
  background: #c10500;
}

body:has(.login-container, .register-container) .link,
body:has(.profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) a {
  color: #c10500;
}

body:has(.profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .profile-view,
body:has(.profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .orders-page,
body:has(.profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .cart-page,
body:has(.profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .checkout-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 20px 56px;
  color: #101828;
  font-family: Inter, Arial, Helvetica, sans-serif;
}

body:has(.profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .profile-card,
body:has(.profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .cart-item,
body:has(.profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .empty-cart,
body:has(.profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .summary-card,
body:has(.profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .form-section,
body:has(.profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .error-container,
body:has(.profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .empty-container,
body:has(.profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .payment-panel {
  border: 1px solid #e4e8ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(8 17 30 / 6%);
}

body:has(.login-container, .register-container, .profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) :focus-visible {
  outline-color: #e10600;
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .account-portal-header {
    min-height: 64px;
    padding: 0 14px;
  }

  .account-portal-brand {
    font-size: 21px;
  }

  .account-portal-return {
    font-size: 12px;
  }

  .account-portal-admin {
    font-size: 12px;
  }

  body:has(.login-container, .register-container) .login-card,
  body:has(.login-container, .register-container) .register-card {
    padding: 26px 20px;
  }
}