/*
  Circulê visual theme
  Camada central de identidade para telas internas e publicas.
*/
:root {
  --circule-pink: #ff5e97;
  --circule-pink-600: #e83e7b;
  --circule-yellow: #ffc52e;
  --circule-blue: #25b7e8;
  --circule-green: #52d681;
  --circule-purple: #8b5cf6;
  --circule-cream: #fffbf2;
  --circule-cream-2: #fff4f8;
  --circule-card: #ffffff;
  --circule-dark: #2b124c;
  --circule-ink: #2b124c;
  --circule-muted: #6f5b7b;
  --circule-line: rgba(43, 18, 76, .12);
  --circule-radius: 18px;
  --circule-radius-lg: 28px;
  --circule-shadow: 0 18px 44px rgba(43, 18, 76, .10);
  --circule-shadow-soft: 0 10px 26px rgba(43, 18, 76, .07);

  --brand-primary: var(--circule-pink);
  --brand-primary-600: var(--circule-pink-600);
  --brand-primary-700: #c42f66;
  --brand-accent: #fff0f6;
  --brand-gold: var(--circule-yellow);
  --bs-primary: var(--circule-pink);
  --bs-link-color: var(--circule-pink-600);
  --bs-link-hover-color: var(--circule-dark);
  --bs-body-color: var(--circule-ink);
  --bs-body-bg: var(--circule-cream);
}

html {
  text-size-adjust: 100%;
}

body {
  color: var(--circule-ink) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 94, 151, .13), transparent 28rem),
    radial-gradient(circle at 88% 4%, rgba(37, 183, 232, .12), transparent 24rem),
    linear-gradient(180deg, var(--circule-cream) 0%, var(--circule-cream-2) 100%) !important;
}

body::selection {
  color: #fff;
  background: var(--circule-pink);
}

main.container,
main.container-fluid {
  padding-bottom: calc(38px + env(safe-area-inset-bottom, 0px));
}

.card,
.jd-card,
.metric-card,
.atalho-card,
.mini-card,
.auth-card,
.hero,
.premium-hero,
.jd-premium-card {
  border-color: var(--circule-line) !important;
  border-radius: var(--circule-radius-lg) !important;
  box-shadow: var(--circule-shadow-soft) !important;
}

.card,
.jd-card,
.auth-card {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,250,253,.96)) !important;
}

.btn,
button,
.jd-btn,
.top-link,
.tab,
.badge,
.tag {
  letter-spacing: 0 !important;
}

.btn-primary,
.btn-success,
.jd-btn-primary,
.jd-btn.primary,
.top-link.primary,
.jd-shortcut-primary,
.dept-tab.ativo {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--circule-pink), var(--circule-purple)) !important;
  box-shadow: 0 12px 24px rgba(255, 94, 151, .24) !important;
}

.btn-primary:hover,
.btn-success:hover,
.jd-btn-primary:hover,
.top-link.primary:hover,
.jd-shortcut-primary:hover {
  filter: saturate(1.06) brightness(1.02);
  transform: translateY(-1px);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-light,
.jd-btn-light,
.top-link,
.tab {
  color: var(--circule-ink) !important;
  border-color: var(--circule-line) !important;
  background: rgba(255,255,255,.86) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-light:hover,
.jd-btn-light:hover,
.top-link:hover,
.tab:hover,
.tab.active {
  color: var(--circule-dark) !important;
  border-color: rgba(255, 94, 151, .34) !important;
  background: #fff0f6 !important;
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
  border-color: var(--circule-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--circule-ink) !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--circule-pink) !important;
  box-shadow: 0 0 0 .22rem rgba(255, 94, 151, .18) !important;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 94, 151, .035);
}

.table thead th {
  color: var(--circule-muted) !important;
  background: rgba(255, 255, 255, .66) !important;
  border-bottom-color: var(--circule-line) !important;
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: 0 !important;
}

.table tbody td {
  border-color: rgba(43, 18, 76, .08) !important;
  vertical-align: middle;
}

.badge,
.tag,
.jd-chip,
.pill,
.eyebrow,
.jd-eyebrow,
.jd-badge {
  border: 1px solid rgba(255, 94, 151, .22) !important;
  color: var(--circule-dark) !important;
  background: #fff0f6 !important;
  border-radius: 999px !important;
}

.alert-success,
.badge.bg-success {
  color: #14532d !important;
  background: #dcfce7 !important;
  border-color: rgba(82, 214, 129, .38) !important;
}

.alert-warning,
.badge.bg-warning {
  color: #6b4a00 !important;
  background: #fff7d1 !important;
  border-color: rgba(255, 197, 46, .42) !important;
}

.alert-danger,
.badge.bg-danger {
  color: #7f123d !important;
  background: #ffe1ee !important;
  border-color: rgba(255, 94, 151, .38) !important;
}

.navbar.app {
  border-bottom-color: var(--circule-line) !important;
}

.navbar.app .navbar-brand,
.navbar.app .nav-link.active,
.navbar.app .nav-link:hover {
  color: var(--circule-dark) !important;
}

.brand-logo-nav,
.brand .shop-logo,
.jd-logo,
.jd-hero-brand-badge,
.jd-kpi-icon,
.jd-iconmark,
.jd-shortcut-mark,
.jd-spotlight-icon {
  background: #fff !important;
  border-color: rgba(255, 94, 151, .16) !important;
}

.aside-content main,
.aside-content main.container {
  max-width: 1480px;
}

.aside-app .shop-title,
.aside-app a.item.active,
.aside-app a.item:hover {
  color: #fff !important;
}

.jd-hero,
.jd-premium-hero,
.premium-hero,
.hero-premium {
  border-color: rgba(255, 94, 151, .20) !important;
}

.jd-empty,
.empty-state,
.estado-vazio,
.sem-registros {
  position: relative;
  overflow: hidden;
  padding: 26px 18px !important;
  border: 1px dashed rgba(255, 94, 151, .34) !important;
  border-radius: var(--circule-radius-lg) !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 197, 46, .18), transparent 8rem),
    radial-gradient(circle at 88% 14%, rgba(37, 183, 232, .14), transparent 8rem),
    #fff !important;
  color: var(--circule-muted) !important;
  text-align: center;
}

.jd-empty strong,
.empty-state strong,
.estado-vazio strong,
.sem-registros strong {
  color: var(--circule-dark) !important;
}

.produto-card,
.cat-card,
.jd-home-card,
.jd-public-card {
  border-color: var(--circule-line) !important;
  border-radius: var(--circule-radius-lg) !important;
}

.jd-public-topbar,
.topbar {
  background: rgba(255, 251, 242, .86) !important;
  border-bottom-color: rgba(255, 94, 151, .16) !important;
}

.jd-public-logo,
.topbar__logo-wrap img,
.brand__logo {
  border-radius: 18px;
}

@media (max-width: 760px) {
  main.container,
  main.container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }

  .card,
  .jd-card,
  .auth-card,
  .hero,
  .jd-hero {
    border-radius: 18px !important;
  }

  .table-responsive {
    border: 1px solid var(--circule-line);
    border-radius: 16px;
  }

  .btn,
  .jd-btn,
  .top-link {
    min-height: 44px;
  }
}