/* Bejou overlays: luxury bag drawer + auth */

.cart-drawer.bejou-bag,
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  justify-content: flex-end;
}

.cart-drawer.active {
  display: flex;
}

.cart-drawer .cart-overlay,
.bejou-bag__veil {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 16, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.cart-drawer .cart-content.popup-cart-content,
.bejou-bag__panel {
  position: relative;
  z-index: 1;
  width: min(440px, 100vw);
  height: 100%;
  background: #fbfaf8;
  box-shadow: -24px 0 60px rgba(20, 18, 16, 0.14);
  display: flex;
  flex-direction: column;
  padding: 0;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  color: #1a1816;
  font-family: 'Montserrat', 'Poppins', sans-serif;
}

/* ——— Header ——— */
.bejou-bag__header,
.cart-drawer .cart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 28px 22px;
  border-bottom: 1px solid rgba(26, 24, 22, 0.08);
  background: #fbfaf8;
}

.bejou-bag__eyebrow {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9a938c;
}

.bejou-bag__title,
.cart-drawer .cart-header .title {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #1a1816;
  text-transform: none;
}

.bejou-bag__count,
.cart-drawer .cart-header .title sup {
  display: inline-block;
  margin-left: 8px;
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #9a938c;
  vertical-align: middle;
}

.bejou-bag__count::before {
  content: '(';
}

.bejou-bag__count::after {
  content: ')';
}

.bejou-bag__close,
.cart-drawer .cart-close {
  border: 0;
  background: transparent;
  color: #1a1816;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 0;
  cursor: pointer;
  flex-shrink: 0;
}

.bejou-bag__close:hover,
.cart-drawer .cart-close:hover {
  color: #ec6b81;
}

.bejou-bag__close .la,
.cart-drawer .cart-close .la {
  display: none;
}

.bejou-bag__close-label {
  display: inline;
}

/* ——— Body ——— */
.bejou-bag__body,
.cart-drawer .cart-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0;
  background: #fbfaf8;
  -webkit-overflow-scrolling: touch;
}

/* Instant-open loading state — skeleton while Livewire refreshes bag */
.bejou-bag__skeleton {
  display: none;
  flex-direction: column;
  padding: 8px 0 24px;
}

.cart-drawer.is-loading .bejou-bag__skeleton {
  display: flex;
}

.cart-drawer.is-loading .bejou-bag__body > :not(.bejou-bag__skeleton) {
  display: none !important;
}

/* Pending hydrate: count from badge, lines not loaded yet — show skeleton, not empty */
.cart-drawer.active:not(.is-loading) .bejou-bag__body:not(:has(.bejou-bag__line)):not(:has([data-cart-drawer-empty])) .bejou-bag__skeleton {
  display: flex;
}

.cart-drawer.is-loading .bejou-bag__footer {
  opacity: 0.35;
  pointer-events: none;
}

.cart-drawer.is-loading .bejou-bag__count {
  opacity: 0.35;
}

.bejou-bag__skel-line {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  padding: 24px 28px;
  border-bottom: 1px solid rgba(26, 24, 22, 0.06);
}

.bejou-bag__skel-thumb {
  width: 96px;
  height: 96px;
  border-radius: var(--jg-settings-radius, 1px);
  background: linear-gradient(90deg, #efe9eb 18%, #faf6f7 45%, #efe9eb 72%);
  background-size: 220% 100%;
  animation: bejouBagSkelShimmer 1.15s ease infinite;
}

.bejou-bag__skel-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  padding-top: 4px;
}

.bejou-bag__skel-bar {
  height: 12px;
  width: 78%;
  border-radius: 1px;
  background: linear-gradient(90deg, #efe9eb 18%, #faf6f7 45%, #efe9eb 72%);
  background-size: 220% 100%;
  animation: bejouBagSkelShimmer 1.15s ease infinite;
}

.bejou-bag__skel-bar--mid {
  width: 52%;
  height: 10px;
  animation-delay: 0.08s;
}

.bejou-bag__skel-bar--sm {
  width: 34%;
  height: 10px;
  animation-delay: 0.16s;
}

.bejou-bag__skel-line:nth-child(2) .bejou-bag__skel-thumb,
.bejou-bag__skel-line:nth-child(2) .bejou-bag__skel-bar {
  animation-delay: 0.1s;
}

.bejou-bag__skel-line:nth-child(3) .bejou-bag__skel-thumb,
.bejou-bag__skel-line:nth-child(3) .bejou-bag__skel-bar {
  animation-delay: 0.2s;
}

@keyframes bejouBagSkelShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (max-width: 575.98px) {
  .bejou-bag__skel-line {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    padding: 20px 20px;
  }

  .bejou-bag__skel-thumb {
    width: 72px;
    height: 72px;
  }
}

.cart-drawer .cart-empty-msg {
  margin: 48px 24px;
  text-align: center;
  color: #888;
  font-size: 14px;
}

.bejou-bag__empty,
.cart-drawer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 36px 48px;
  min-height: 320px;
}

.bejou-bag__empty-title,
.cart-drawer-empty__title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a1816;
}

.bejou-bag__empty-text,
.cart-drawer-empty__text {
  margin: 0 0 28px;
  max-width: 260px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  color: #7a736c;
}

.bejou-bag__empty-cta,
.cart-drawer-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 14px 28px;
  border-radius: var(--jg-settings-radius, 4px);
  background: #1a1816;
  color: #fbfaf8;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid #1a1816;
  transition: background 0.25s ease, color 0.25s ease;
}

.bejou-bag__empty-cta:hover,
.cart-drawer-empty__cta:hover {
  background: transparent;
  color: #1a1816;
}

.cart-drawer .cart-footer--empty {
  display: none;
}

/* ——— Lines ——— */
.bejou-bag__lines,
.cart-drawer-lines {
  list-style: none;
  margin: 0;
  padding: 8px 0 24px;
}

.bejou-bag__line,
.cart-drawer-line {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  padding: 24px 28px;
  border-bottom: 1px solid rgba(26, 24, 22, 0.07);
}

.bejou-bag__line:last-child,
.cart-drawer-line:last-child {
  border-bottom: 0;
}

.bejou-bag__thumb,
.cart-drawer-line__media {
  display: block;
  width: 96px;
  height: 120px;
  overflow: hidden;
  background: #f0ede8;
  border: 0;
  border-radius: var(--jg-settings-radius, 4px);
  flex-shrink: 0;
  box-shadow:
    0 0 0 1px rgba(26, 24, 22, 0.05),
    0 6px 16px rgba(26, 24, 22, 0.08);
}

.bejou-bag__thumb img,
.cart-drawer-line__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bejou-bag__line-body,
.cart-drawer-line__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}

.bejou-bag__line-top,
.cart-drawer-line__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.bejou-bag__name,
.cart-drawer-line__name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.45;
  color: #1a1816;
  text-decoration: none;
}

.bejou-bag__name:hover,
.cart-drawer-line__name:hover {
  color: #ec6b81;
}

.bejou-bag__remove,
.cart-drawer-line__remove {
  flex: 0 0 auto;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a39c94;
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.bejou-bag__remove:hover,
.cart-drawer-line__remove:hover {
  color: #1a1816;
  border-bottom-color: rgba(26, 24, 22, 0.35);
}

/* Chosen attributes / variations */
.bejou-bag__attrs {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bejou-bag__attr {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  line-height: 1.35;
}

.bejou-bag__attr-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9a938c;
}

.bejou-bag__attr-value {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #3d3833;
}

.bejou-bag__line-foot,
.cart-drawer-line__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
}

.bejou-bag__qty,
.cart-drawer-line__qty {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a938c;
}

.bejou-bag__stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(26, 24, 22, 0.16);
  border-radius: var(--jg-settings-radius, 4px);
  background: #fff;
}

.bejou-bag__stepper.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

.bejou-bag__stepper-btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #1a1816;
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.bejou-bag__stepper-btn:hover:not(:disabled) {
  color: #ec6b81;
}

.bejou-bag__stepper-btn:disabled {
  color: #c8c2bc;
  cursor: default;
}

.bejou-bag__stepper-value {
  min-width: 1.25rem;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #1a1816;
}

.bejou-bag__price,
.cart-drawer-line__pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.bejou-bag__total,
.cart-drawer-line__total {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #1a1816;
  line-height: 1.2;
}

.bejou-bag__compare,
.cart-drawer-line__compare {
  font-size: 11px;
  color: #b0a99f;
  text-decoration: line-through;
  line-height: 1.2;
}

.bejou-bag__unit,
.cart-drawer-line__unit {
  font-size: 10px;
  color: #9a938c;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* Legacy Bejou list (unused) */
.cart-drawer .popup-product-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ——— Footer ——— */
.bejou-bag__footer,
.cart-drawer .cart-footer.price-content {
  border-top: 1px solid rgba(236, 107, 129, 0.16);
  padding: 14px 28px 16px;
  background: #fff7f8;
}

.bejou-bag__promo {
  margin: 0 0 12px;
  border-bottom: 1px solid rgba(236, 107, 129, 0.16);
}

.bejou-bag__promo-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #1a1816;
}

.bejou-bag__promo-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.bejou-bag__promo-chev {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #9a938c;
  border-bottom: 1.5px solid #9a938c;
  transform: rotate(45deg);
  margin-top: -3px;
  flex-shrink: 0;
  transition: transform 0.35s ease, margin-top 0.35s ease;
}

.bejou-bag__promo.is-open .bejou-bag__promo-chev {
  transform: rotate(225deg);
  margin-top: 3px;
}

.bejou-bag__promo-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.bejou-bag__promo.is-open .bejou-bag__promo-panel {
  grid-template-rows: 1fr;
}

.bejou-bag__promo-panel-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.35s ease;
}

.bejou-bag__promo.is-open .bejou-bag__promo-panel-inner > :last-child {
  margin-bottom: 16px;
}

.bejou-bag__promo.is-open .bejou-bag__promo-panel-inner {
  opacity: 1;
  transform: none;
}

.bejou-bag__promo.is-applied .bejou-bag__promo-toggle {
  display: none;
}

.bejou-bag__promo.is-applied .bejou-bag__promo-panel {
  display: block;
}

.bejou-bag__promo.is-applied .bejou-bag__promo-panel-inner {
  overflow: visible;
  opacity: 1;
  transform: none;
}

.bejou-bag__promo.is-applied .bejou-bag__promo-panel-inner > :last-child {
  margin-bottom: 10px;
}

.bejou-bag__promo-combo {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid rgba(26, 24, 22, 0.12);
  border-radius: var(--jg-settings-radius, 4px);
  background: #fff;
}

.bejou-bag__promo-combo:focus-within {
  box-shadow: 0 0 0 1px rgba(236, 107, 129, 0.35);
}

.bejou-bag__promo-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 12px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #1a1816;
}

.bejou-bag__promo-input:focus {
  outline: none;
}

.bejou-bag__promo-input::placeholder {
  color: #9a938c;
}

.bejou-bag__promo-apply,
.bejou-bag__promo-remove {
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.bejou-bag__promo-apply {
  flex-shrink: 0;
  margin: 4px;
  padding: 10px 14px;
  border-radius: var(--jg-settings-radius, 4px);
  background: #1a1816;
  color: #fbfaf8;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}

.bejou-bag__promo-apply:hover {
  background: #ec6b81;
  color: #fff;
}

.bejou-bag__promo-apply:disabled {
  opacity: 0.6;
  cursor: default;
}

.bejou-bag__promo-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid rgba(26, 24, 22, 0.1);
  border-radius: var(--jg-settings-radius, 4px);
  background: #fff;
}

.bejou-bag__promo-applied-label {
  display: inline;
  margin-right: 6px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a938c;
}

.bejou-bag__promo-applied-code {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1a1816;
}

.bejou-bag__promo-remove {
  padding: 0;
  font-size: 10px;
  font-weight: 500;
  color: #ec6b81;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bejou-bag__promo-remove:disabled {
  opacity: 0.6;
  cursor: default;
}

.bejou-bag__promo-error {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #b42318;
}

.bejou-bag__row--discount .value {
  color: #ec6b81;
}

@media (prefers-reduced-motion: reduce) {
  .bejou-bag__promo-panel,
  .bejou-bag__promo-panel-inner,
  .bejou-bag__promo-chev {
    transition: none;
  }
}

.bejou-bag__sums,
.cart-drawer .cart-subtotals {
  margin: 0;
}

.bejou-bag__row,
.cart-drawer .cart-subtotals .products,
.cart-drawer .cart-total,
.bejou-bag__grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.bejou-bag__grand,
.cart-drawer .cart-total {
  margin-top: 10px;
  margin-bottom: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(236, 107, 129, 0.16);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bejou-bag__row .label,
.bejou-bag__grand .label,
.cart-drawer .cart-subtotals .label,
.cart-drawer .cart-total .label {
  color: #7a736c;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.16em;
}

.bejou-bag__grand .label {
  color: #1a1816;
  font-size: 11px;
}

.bejou-bag__row .value,
.bejou-bag__grand .value,
.cart-drawer .cart-subtotals .value,
.cart-drawer .cart-total .value {
  color: #1a1816;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 13px;
}

.bejou-bag__actions,
.cart-drawer .checkout {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.bejou-bag__actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}

.bejou-bag__checkout,
.cart-drawer .checkout .btn-Checkout {
  display: block;
  text-align: center;
  background: #1a1816;
  color: #fbfaf8 !important;
  text-decoration: none;
  padding: 13px 18px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid #1a1816;
  border-radius: var(--jg-settings-radius, 4px);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.bejou-bag__checkout:hover,
.cart-drawer .checkout .btn-Checkout:hover {
  background: #ec6b81;
  border-color: #ec6b81;
  color: #fff !important;
}

.bejou-bag__view,
.bejou-bag__share,
.cart-drawer .checkout .btn-view-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  color: #1a1816;
  text-decoration: none;
  padding: 10px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid rgba(26, 24, 22, 0.22);
  border-radius: var(--sf-radius, 1px);
  background: transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.bejou-bag__view:hover,
.bejou-bag__share:hover,
.cart-drawer .checkout .btn-view-cart:hover {
  color: #ec6b81;
  border-color: #ec6b81;
}

.bejou-bag__share {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
}

.bejou-bag__share:disabled {
  opacity: 0.65;
  cursor: wait;
}

@media (max-width: 480px) {
  .bejou-bag__panel,
  .cart-drawer .cart-content.popup-cart-content {
    width: 100vw;
  }

  .bejou-bag__header,
  .bejou-bag__line,
  .bejou-bag__footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .bejou-bag__thumb,
  .cart-drawer-line__media {
    width: 80px;
    height: 100px;
  }

  .bejou-bag__line,
  .cart-drawer-line {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 14px;
  }
}

.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  background: #fff;
  display: none;
  overflow-y: auto;
}

.login-overlay.active {
  display: block;
}

.bejou-auth-shell {
  min-height: 100%;
  background: #fff;
}

.bejou-auth-shell__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #ebebeb;
}

.bejou-auth-shell__logo img {
  display: block;
  max-height: 40px;
  width: auto;
}

.bejou-auth-shell__close {
  color: #0f0f0f;
  font-size: 14px;
  font-weight: 300;
  text-decoration: none;
}

.bejou-auth-shell__close:hover {
  color: #ec6b81;
}

.bejou-auth-panel {
  padding-bottom: 48px;
}

.bejou-auth-section .container {
  max-width: 720px;
}

.bejou-auth-panel .auth-panel-error {
  color: #c0392b;
  font-size: 12px;
  font-weight: 400;
}

.register-form-content .register-form .pass-content {
  display: flex;
  gap: 12px;
}

/* Storefront notices — replaces native alert() / confirm() */
.bejou-notices {
  position: fixed;
  z-index: 5000;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(440px, calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.bejou-notice {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 16px 12px 16px 16px;
  background: #fbfaf8;
  color: #1a1816;
  border: 1px solid rgba(26, 24, 22, 0.1);
  border-radius: 0;
  box-shadow: 0 18px 50px rgba(20, 18, 16, 0.16);
  font-family: 'Montserrat', 'Poppins', sans-serif;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.bejou-notice.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.bejou-notice.is-out {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
}

.bejou-notice--error {
  border-inline-start: 3px solid #1a1816;
}

.bejou-notice--success {
  background: linear-gradient(135deg, #fff 0%, #fffafb 45%, #ffe8ee 100%);
  color: #3a1f28;
  border: 1px solid rgba(236, 107, 129, 0.18);
  box-shadow:
    0 18px 44px rgba(236, 107, 129, 0.12),
    0 2px 0 rgba(255, 255, 255, 0.7) inset;
}

.bejou-notice--success.bejou-notice--rich {
  align-items: center;
  gap: 14px;
  padding: 14px 12px 14px 14px;
}

.bejou-notice--success .bejou-notice__close {
  color: #c45a6d;
}

.bejou-notice--success .bejou-notice__close:hover,
.bejou-notice--success .bejou-notice__close:focus {
  color: #3a1f28;
}

.bejou-notice--info {
  border-inline-start: 3px solid #9a938c;
}

.bejou-notice__media {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(236, 107, 129, 0.18);
  box-shadow: 0 6px 16px rgba(58, 31, 40, 0.08);
}

.bejou-notice__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bejou-notice__content {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 1px;
}

.bejou-notice__eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ec6b81;
}

.bejou-notice__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #2a151c;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bejou-notice__detail {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  color: #7a4554;
}

.bejou-notice__text {
  margin: 0;
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.01em;
  white-space: pre-line;
}

.bejou-notice__close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: -2px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #9a938c;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.bejou-notice__close:hover,
.bejou-notice__close:focus {
  color: #1a1816;
  background: transparent;
}

.bejou-confirm {
  position: fixed;
  inset: 0;
  z-index: 5100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.bejou-confirm__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(20, 18, 16, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
}

.bejou-confirm__panel {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  background: #fbfaf8;
  color: #1a1816;
  padding: 32px 28px 24px;
  border-radius: 1px;
  box-shadow: 0 24px 60px rgba(20, 18, 16, 0.18);
  font-family: 'Montserrat', 'Poppins', sans-serif;
}

.bejou-confirm__eyebrow {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9a938c;
}

.bejou-confirm__text {
  margin: 0 0 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.bejou-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.bejou-confirm__btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 1px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.bejou-confirm__btn--ghost {
  background: transparent;
  border: 1px solid rgba(26, 24, 22, 0.28);
  color: #1a1816;
}

.bejou-confirm__btn--ghost:hover,
.bejou-confirm__btn--ghost:focus {
  background: transparent;
  border-color: #1a1816;
  color: #1a1816;
}

.bejou-confirm__btn--solid {
  background: #1a1816;
  border: 1px solid #1a1816;
  color: #fbfaf8;
}

.bejou-confirm__btn--solid:hover,
.bejou-confirm__btn--solid:focus {
  background: #000;
  border-color: #000;
  color: #fbfaf8;
}

body.bejou-confirm-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .bejou-notice {
    transition: none;
  }
}