:root {
  --cc-alert-primary: #173247;
  --cc-alert-accent: #b89255;
  --cc-alert-success: #16835a;
  --cc-alert-error: #d93445;
  --cc-alert-warning: #d08116;
  --cc-alert-info: #246b94;
}

.cc-alert-open {
  overflow: hidden !important;
}

.cc-alert-overlay[hidden] {
  display: none !important;
}

.cc-alert-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(11, 27, 39, 0.58);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  direction: rtl;
  font-family: "Tajawal", "Cairo", system-ui, sans-serif;
}

.cc-alert-dialog {
  width: min(460px, 100%);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  position: relative;
  border-radius: 26px;
  border: 1px solid rgba(184, 146, 85, 0.35);
  background: #fff;
  color: #17232d;
  padding: 28px 24px 22px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
  text-align: center;
  animation: ccAlertEnter 180ms ease-out both;
}

.cc-alert-close {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f2f1ee;
  color: #43515d;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}

.cc-alert-close:focus-visible,
.cc-alert-button:focus-visible {
  outline: 3px solid rgba(184, 146, 85, 0.45);
  outline-offset: 2px;
}

.cc-alert-icon {
  width: 76px;
  height: 76px;
  margin: 2px auto 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 2rem;
  box-shadow: 0 14px 28px rgba(23, 50, 71, 0.16);
}

.cc-alert-title {
  margin: 0 0 9px;
  color: #173247;
  font-size: clamp(1.25rem, 4.8vw, 1.65rem);
  font-weight: 900;
  line-height: 1.45;
}

.cc-alert-message {
  margin: 0;
  color: #535f68;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.9;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.cc-alert-actions {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.cc-alert-button {
  width: min(260px, 100%);
  min-height: 50px;
  border: 0;
  border-radius: 16px;
  padding: 12px 22px;
  background: linear-gradient(135deg, var(--cc-alert-primary), var(--cc-alert-accent));
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 25px rgba(23, 50, 71, 0.18);
}

.cc-alert-overlay[data-type="success"] .cc-alert-icon { background: var(--cc-alert-success); }
.cc-alert-overlay[data-type="error"] .cc-alert-icon { background: var(--cc-alert-error); }
.cc-alert-overlay[data-type="warning"] .cc-alert-icon { background: var(--cc-alert-warning); }
.cc-alert-overlay[data-type="info"] .cc-alert-icon { background: var(--cc-alert-info); }

.cc-field-invalid {
  border-color: var(--cc-alert-error) !important;
  box-shadow: 0 0 0 3px rgba(217, 52, 69, 0.12) !important;
}

@keyframes ccAlertEnter {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 520px) {
  .cc-alert-overlay { padding: 12px; align-items: center; }
  .cc-alert-dialog { border-radius: 22px; padding: 25px 18px 19px; }
  .cc-alert-icon { width: 66px; height: 66px; font-size: 1.75rem; }
  .cc-alert-message { font-size: 0.96rem; }
  .cc-alert-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-alert-dialog { animation: none; }
}