/*

 * ZOOPEM GLOBAL ALERT SYSTEM

 *

 * Shared modal styles for:

 * - Warning

 * - Error

 * - Success

 * - Information

 * - Confirmation

 *

 * Used across Zoopem pages so all alerts

 * have the same visual language.

 */





.zp-alert-backdrop {

  position: fixed;

  inset: 0;

  z-index: 20000;



  display: none;

  align-items: center;

  justify-content: center;



  padding: 20px;



  background: rgba(2, 8, 14, .78);

  backdrop-filter: blur(5px);

}





.zp-alert-backdrop[data-open="true"] {

  display: flex;

}





.zp-alert-modal {

  width: min(540px, 100%);



  padding: 22px;



  border:

    1px solid var(--zp-border-strong, rgba(255,255,255,.14));



  border-radius: 16px;



  background:

    var(--zp-surface, #0d1824);



  box-shadow:

    0 24px 80px rgba(0,0,0,.48);

}





.zp-alert-title-row {

  display: flex;

  align-items: center;

  gap: 10px;

}





.zp-alert-icon {

  flex: 0 0 auto;



  font-size: 20px;

  line-height: 1;

}





.zp-alert-title {

  margin: 0;



  font-size: 18px;

  font-weight: 800;



  color:

    var(--zp-text, #f4f7fb);

}





.zp-alert-copy {

  margin-top: 14px;



  color:

    var(--zp-text-soft, #b8c3cf);



  font-size: 13px;

  line-height: 1.65;

}





.zp-alert-copy strong {

  color:

    var(--zp-text, #f4f7fb);

}





.zp-alert-actions {

  display: flex;

  justify-content: flex-end;

  gap: 8px;

  flex-wrap: wrap;



  margin-top: 20px;

}





/*

 * ALERT TYPES

 */





.zp-alert-modal[data-type="warning"]

.zp-alert-icon,

.zp-alert-modal[data-type="warning"]

.zp-alert-title {

  color: #ffcc66;

}





.zp-alert-modal[data-type="error"]

.zp-alert-icon,

.zp-alert-modal[data-type="error"]

.zp-alert-title {

  color: #ff7777;

}





.zp-alert-modal[data-type="success"]

.zp-alert-icon,

.zp-alert-modal[data-type="success"]

.zp-alert-title {

  color: #63d7c9;

}





.zp-alert-modal[data-type="info"]

.zp-alert-icon,

.zp-alert-modal[data-type="info"]

.zp-alert-title {

  color: #6fb5ff;

}





/*

 * BUTTON VARIANTS

 */





.zp-alert-button {

  min-height: 38px;



  padding: 8px 13px;



  border:

    1px solid var(--zp-border, rgba(255,255,255,.12));



  border-radius: 8px;



  background:

    rgba(255,255,255,.04);



  color:

    var(--zp-text, #f4f7fb);



  font: inherit;

  font-size: 11px;

  font-weight: 700;



  cursor: pointer;

}





.zp-alert-button:hover {

  background:

    rgba(255,255,255,.08);

}





.zp-alert-button-primary {

  border-color:

    var(--zp-primary, #59a6ff);



  background:

    var(--zp-primary, #59a6ff);



  color: #fff;

}





.zp-alert-button-danger {

  border-color:

    rgba(255,88,88,.55);



  background:

    rgba(255,70,70,.14);



  color: #ff7777;

}





.zp-alert-button-danger:hover {

  background:

    rgba(255,70,70,.23);

}





.zp-alert-button-success {

  border-color:

    rgba(72,215,197,.45);



  background:

    rgba(72,215,197,.12);



  color: #63d7c9;

}





/*

 * RESPONSIVE

 */





@media (max-width: 600px) {



  .zp-alert-modal {

    padding: 18px;

  }





  .zp-alert-actions {

    flex-direction: column-reverse;

  }





  .zp-alert-button {

    width: 100%;

  }



}


dialog.zp-alert-backdrop{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;box-sizing:border-box;color:var(--zp-text,#e5eefb);overscroll-behavior:contain;overflow:auto}
dialog.zp-alert-backdrop:not([open]){display:none!important}dialog.zp-alert-backdrop[open]{display:flex}dialog.zp-alert-backdrop::backdrop{background:transparent}
.zp-alert-brand{display:flex;align-items:center;gap:8px;color:#b9c9dd;font:700 12px/1.4 system-ui,sans-serif;letter-spacing:.4px;margin-bottom:18px}.zp-alert-brand-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#ff9a38,#ffd06c);color:#3b260c;font-weight:900;font-size:16px}
.zp-alert-modal{box-sizing:border-box;max-height:calc(100dvh - 40px);overflow:auto;color:var(--zp-text,#e5eefb);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.zp-alert-modal[data-type=warning]{border-color:#a77b31}.zp-alert-title{margin:0;color:inherit}.zp-alert-copy{color:inherit;white-space:pre-wrap;overflow-wrap:anywhere}.zp-alert-actions{margin-top:22px}.zp-alert-button:focus-visible{outline:3px solid #7dd3fc;outline-offset:3px}.zp-alert-icon{flex:none}.zp-warning-note{border-left:3px solid #e9ad45;padding:12px 14px;background:#c7902412}.zp-warning-note::before{content:'⚠ ';color:#e9ad45;font-weight:800}
@media(max-width:560px){dialog.zp-alert-backdrop{padding:14px}.zp-alert-modal{padding:20px;max-height:calc(100dvh - 28px)}.zp-alert-actions{flex-wrap:wrap}.zp-alert-actions button{min-height:42px;flex:1}}
.billing-note:not(.zp-warning-note)::before,.alert-warning::before,[data-kind="warning"]:not(:empty)::before,[data-kind="error"]:not(:empty)::before{content:'⚠ ';color:#e9ad45;font-weight:800}