body.stop-scrolling {
height: 100%;
overflow: hidden; }

.sweet-overlay {
background-color: black;
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
/* IE8 */
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
z-index: 10000; }

.sweet-alert {
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

/* ── Centering — transform keeps the card dead-centre at any size ── */
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, 0%);   /* only horizontal centering */


/* ── Size ── */
width:     300px;                 /* ← card width */
max-width: calc(100vw - 32px);   /* responsive: 16px gap each side    */
max-height: calc(100vh - 48px);  /* never taller than the viewport     */
overflow-y: auto;                /* scroll if content somehow overflows */

/* ── Spacing ── */
padding: 24px 0 22px 0;   /* ← top padding gives breathing room above the title */

/* ── Shape ── */
border-radius: 28px;             /* ← corner roundness               */
overflow: hidden;                /* clips the X watermark bleed       */

/* ── Stacking ── */

z-index: 99999;

/* ── Default background — overridden per type via data-type attribute ── */
background: #888888;

/* ── Shadow ── */
box-shadow: 0 24px 64px rgba(0,0,0,0.28), 0 4px 16px rgba(0,0,0,0.12);
text-align: center;
}
/* Responsive width handled by max-width above — no extra rules needed */
.sweet-alert h2 {
color: #ffffff;
font-size: 16px;             /* ← title size */
font-weight: 800;
text-align: center;
text-transform: none;
text-shadow: 0 1px 6px rgba(0,0,0,0.12);
position: relative;
/* margin-top pushes title below the X watermark */
margin: 42px 14px -20px;         /* ← small gap above title — icon is in the corner, not blocking text */
padding: 0;
line-height: 1.2;
display: block; }
.sweet-alert p {
color: rgba(255,255,255,0.88);
font-size: 15px;
font-weight: 400;
text-align: center;
text-shadow: 0 1px 4px rgba(0,0,0,0.10);
position: relative;
float: none;
margin: 10px 0 0;
padding: 0 28px;
line-height: 1.55; }
.sweet-alert fieldset {
border: none;
position: relative; }
.sweet-alert .sa-error-container {
background-color: #f1f1f1;
margin-left: -17px;
margin-right: -17px;
overflow: hidden;
padding: 0 10px;
max-height: 0;
webkit-transition: padding 0.15s, max-height 0.15s;
transition: padding 0.15s, max-height 0.15s; }
.sweet-alert .sa-error-container.show {
padding: 10px 0;
max-height: 100px;
webkit-transition: padding 0.2s, max-height 0.2s;
transition: padding 0.25s, max-height 0.25s; }
.sweet-alert .sa-error-container .icon {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #9c0000;
color: white;
line-height: 24px;
text-align: center;
margin-right: 3px; }
.sweet-alert .sa-error-container p {
display: inline-block; }
.sweet-alert .sa-input-error {
position: absolute;
top: 29px;
right: 26px;
width: 20px;
height: 20px;
opacity: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.1s;
transition: all 0.1s; }
.sweet-alert .sa-input-error::before, .sweet-alert .sa-input-error::after {
content: "";
width: 20px;
height: 6px;
background-color: #ce0606;
border-radius: 3px;
position: absolute;
top: 50%;
margin-top: -4px;
left: 50%;
margin-left: -9px; }
.sweet-alert .sa-input-error::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.sweet-alert .sa-input-error::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.sweet-alert .sa-input-error.show {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); }
.sweet-alert input {
width: 100%;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid #d7d7d7;
height: 43px;
margin-top: 10px;
margin-bottom: 17px;
font-size: 18px;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06);
padding: 0 12px;
display: none;
-webkit-transition: all 0.3s;
transition: all 0.3s; }
.sweet-alert input:focus {
outline: none;
box-shadow: 0px 0px 3px #c4e6f5;
border: 1px solid #b4dbed; }
.sweet-alert input:focus::-moz-placeholder {
transition: opacity 0.3s 0.03s ease;
opacity: 0.5; }
.sweet-alert input:focus:-ms-input-placeholder {
transition: opacity 0.3s 0.03s ease;
opacity: 0.5; }
.sweet-alert input:focus::-webkit-input-placeholder {
transition: opacity 0.3s 0.03s ease;
opacity: 0.5; }
.sweet-alert input::-moz-placeholder {
color: #bdbdbd; }
.sweet-alert input::-ms-clear {
display: none; }
.sweet-alert input:-ms-input-placeholder {
color: #bdbdbd; }
.sweet-alert input::-webkit-input-placeholder {
color: #bdbdbd; }
.sweet-alert.show-input input {
display: block; }
.sweet-alert .sa-confirm-button-container {
display: inline-block;
position: relative; }
.sweet-alert .la-ball-fall {
position: absolute;
left: 50%;
top: 50%;
margin-left: -27px;
margin-top: 4px;
opacity: 0;
visibility: hidden; }
.sweet-alert button {
background-color: #ffffff !important; /* ← button background — !important overrides JS inline style */
color: inherit;
border: none;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
font-size: 17px;         /* ← button text size */
font-weight: 700;
-webkit-border-radius: 50px;
border-radius: 50px;     /* ← pill shape */
padding: 10px 15px;
width: calc(100% - 56px);
display: block;
box-sizing: border-box;
margin: 28px auto 0;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s; }
.sweet-alert button:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255,255,255,0.5), 0 4px 16px rgba(0,0,0,0.12); }
.sweet-alert button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
opacity: 0.96; }
.sweet-alert button:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.sweet-alert button.cancel {
background-color: rgba(255,255,255,0.20) !important;
color: #ffffff;
box-shadow: none;
margin-top: 10px; }
.sweet-alert button.cancel:hover {
background-color: rgba(255,255,255,0.30) !important; }
.sweet-alert button.cancel:focus {
box-shadow: 0 0 0 3px rgba(255,255,255,0.30) !important; }
.sweet-alert button[disabled] {
opacity: .6;
cursor: default; }
.sweet-alert button.confirm[disabled] {
color: transparent; }
.sweet-alert button.confirm[disabled] ~ .la-ball-fall {
opacity: 1;
visibility: visible;
transition-delay: 0s; }
.sweet-alert button::-moz-focus-inner {
border: 0; }
.sweet-alert[data-has-cancel-button=false] button {
box-shadow: none !important; }
.sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] {
padding-bottom: 40px; }
.sweet-alert .sa-icon {
width: 80px;
height: 80px;
border: 4px solid gray;
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
margin: 20px auto;
padding: 0;
position: relative;
box-sizing: content-box; }
.sweet-alert .sa-icon.sa-error {
border-color: #F27474; }
.sweet-alert .sa-icon.sa-error .sa-x-mark {
position: relative;
display: block; }
.sweet-alert .sa-icon.sa-error .sa-line {
position: absolute;
height: 5px;
width: 47px;
background-color: #F27474;
display: block;
top: 37px;
border-radius: 2px; }
.sweet-alert .sa-icon.sa-error .sa-line.sa-left {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
left: 17px; }
.sweet-alert .sa-icon.sa-error .sa-line.sa-right {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 16px; }
.sweet-alert .sa-icon.sa-warning {
border-color: #F8BB86; }
.sweet-alert .sa-icon.sa-warning .sa-body {
position: absolute;
width: 5px;
height: 47px;
left: 50%;
top: 10px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin-left: -2px;
background-color: #F8BB86; }
.sweet-alert .sa-icon.sa-warning .sa-dot {
position: absolute;
width: 7px;
height: 7px;
-webkit-border-radius: 50%;
border-radius: 50%;
margin-left: -3px;
left: 50%;
bottom: 10px;
background-color: #F8BB86; }
.sweet-alert .sa-icon.sa-info {
border-color: #C9DAE1; }
.sweet-alert .sa-icon.sa-info::before {
content: "";
position: absolute;
width: 5px;
height: 29px;
left: 50%;
bottom: 17px;
border-radius: 2px;
margin-left: -2px;
background-color: #C9DAE1; }
.sweet-alert .sa-icon.sa-info::after {
content: "";
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
margin-left: -3px;
top: 19px;
background-color: #C9DAE1;
left: 50%; }
.sweet-alert .sa-icon.sa-success {
border-color: #A5DC86; }
.sweet-alert .sa-icon.sa-success::before, .sweet-alert .sa-icon.sa-success::after {
content: '';
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
position: absolute;
width: 60px;
height: 120px;
background: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.sweet-alert .sa-icon.sa-success::before {
-webkit-border-radius: 120px 0 0 120px;
border-radius: 120px 0 0 120px;
top: -7px;
left: -33px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 60px 60px;
transform-origin: 60px 60px; }
.sweet-alert .sa-icon.sa-success::after {
-webkit-border-radius: 0 120px 120px 0;
border-radius: 0 120px 120px 0;
top: -11px;
left: 30px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0px 60px;
transform-origin: 0px 60px; }
.sweet-alert .sa-icon.sa-success .sa-placeholder {
width: 80px;
height: 80px;
border: 4px solid rgba(165, 220, 134, 0.2);
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
box-sizing: content-box;
position: absolute;
left: -4px;
top: -4px;
z-index: 2; }
.sweet-alert .sa-icon.sa-success .sa-fix {
width: 5px;
height: 90px;
background-color: white;
position: absolute;
left: 28px;
top: 8px;
z-index: 1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.sweet-alert .sa-icon.sa-success .sa-line {
height: 5px;
background-color: #A5DC86;
display: block;
border-radius: 2px;
position: absolute;
z-index: 2; }
.sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
width: 25px;
left: 14px;
top: 46px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.sweet-alert .sa-icon.sa-success .sa-line.sa-long {
width: 47px;
right: 8px;
top: 38px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.sweet-alert .sa-icon.sa-custom {
background-size: contain;
border-radius: 0;
border: none;
background-position: center center;
background-repeat: no-repeat; }

/*
* Animations
*/
@-webkit-keyframes showSweetAlert {
0%   { opacity: 0; -webkit-transform: translate(-50%, 0%) scale(0.7);  }
45%  { opacity: 1; -webkit-transform: translate(-50%, 0%) scale(1.05); }
80%  {             -webkit-transform: translate(-50%, 0%) scale(0.95); }
100% {             -webkit-transform: translate(-50%, 0%) scale(1);    } }

@keyframes showSweetAlert {
0%   { opacity: 0; transform: translate(-50%, 0%) scale(0.7);  }
45%  { opacity: 1; transform: translate(-50%, 0%) scale(1.05); }
80%  {             transform: translate(-50%, 0%) scale(0.95); }
100% {             transform: translate(-50%, 0%) scale(1);    } }

@-webkit-keyframes hideSweetAlert {
0%   { opacity: 1; -webkit-transform: translate(-50%, 0%) scale(1);   }
100% { opacity: 0; -webkit-transform: translate(-50%, 0%) scale(0.5); } f}

@keyframes hideSweetAlert {
0%   { opacity: 1; transform: translate(-50%, 0%) scale(1);   }
100% { opacity: 0; transform: translate(-50%, 0%) scale(0.5); } }



.showSweetAlert[data-animation=pop] {
-webkit-animation: showSweetAlert 0.3s;
animation: showSweetAlert 0.3s; }

.showSweetAlert[data-animation=none] {
-webkit-animation: none;
animation: none; }

.

@-webkit-keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px; }
54% {
width: 0;
left: 1px;
top: 19px; }
70% {
width: 50px;
left: -8px;
top: 37px; }
84% {
width: 17px;
left: 21px;
top: 48px; }
100% {
width: 25px;
left: 14px;
top: 45px; } }

@keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px; }
54% {
width: 0;
left: 1px;
top: 19px; }
70% {
width: 50px;
left: -8px;
top: 37px; }
84% {
width: 17px;
left: 21px;
top: 48px; }
100% {
width: 25px;
left: 14px;
top: 45px; } }

@-webkit-keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px; }
65% {
width: 0;
right: 46px;
top: 54px; }
84% {
width: 55px;
right: 0px;
top: 35px; }
100% {
width: 47px;
right: 8px;
top: 38px; } }

@keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px; }
65% {
width: 0;
right: 46px;
top: 54px; }
84% {
width: 55px;
right: 0px;
top: 35px; }
100% {
width: 47px;
right: 8px;
top: 38px; } }

@-webkit-keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); }
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); }
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg); }
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg); } }

@keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); }
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); }
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg); }
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg); } }

.animateSuccessTip { /* animation removed */ }

.animateSuccessLong { /* animation removed */ }

.sa-icon.sa-success.animate::after { /* animation removed */ }

@-webkit-keyframes animateErrorIcon {
0% {
transform: rotateX(100deg);
-webkit-transform: rotateX(100deg);
opacity: 0; }
100% {
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
opacity: 1; } }

@keyframes animateErrorIcon {
0% {
transform: rotateX(100deg);
-webkit-transform: rotateX(100deg);
opacity: 0; }
100% {
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
opacity: 1; } }

.animateErrorIcon { /* animation removed */ }

@-webkit-keyframes animateXMark {
0% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0; }
50% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0; }
80% {
transform: scale(1.15);
-webkit-transform: scale(1.15);
margin-top: -6px; }
100% {
transform: scale(1);
-webkit-transform: scale(1);
margin-top: 0;
opacity: 1; } }

@keyframes animateXMark {
0% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0; }
50% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0; }
80% {
transform: scale(1.15);
-webkit-transform: scale(1.15);
margin-top: -6px; }
100% {
transform: scale(1);
-webkit-transform: scale(1);
margin-top: 0;
opacity: 1; } }

.animateXMark { /* animation removed */ }

@-webkit-keyframes pulseWarning {
0% {
border-color: #F8D486; }
100% {
border-color: #F8BB86; } }

@keyframes pulseWarning {
0% {
border-color: #F8D486; }
100% {
border-color: #F8BB86; } }

.pulseWarning {
-webkit-animation: pulseWarning 0.75s infinite alternate;
animation: pulseWarning 0.75s infinite alternate; }

@-webkit-keyframes pulseWarningIns {
0% {
background-color: #F8D486; }
100% {
bbackground-color: #F8BB86; } }

@keyframes pulseWarningIns {
0% {
background-color: #F8D486; }
100% {
background-color: #F8BB86; } }

.pulseWarningIns {
-webkit-animation: pulseWarningIns 0.75s infinite alternate;
animation: pulseWarningIns 0.75s infinite alternate; }

@-webkit-keyframes rotate-loading {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }

@keyframes rotate-loading {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }

/* Internet Explorer 9 has some special quirks that are fixed here */
/* The icons are not animated. */
/* This file is automatically merged into sweet-alert.min.js through Gulp */
/* Error icon */
.sweet-alert .sa-icon.sa-error .sa-line.sa-left {
-ms-transform: rotate(45deg) \9; }

.sweet-alert .sa-icon.sa-error .sa-line.sa-right {
-ms-transform: rotate(-45deg) \9; }

/* Success icon */
.sweet-alert .sa-icon.sa-success {
border-color: transparent\9; }

.sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
-ms-transform: rotate(45deg) \9; }

.sweet-alert .sa-icon.sa-success .sa-line.sa-long {
-ms-transform: rotate(-45deg) \9; }

/*!
* Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
* Copyright 2015 Daniel Cardoso <@DanielCardoso>
* Licensed under MIT
*/
.la-ball-fall,
.la-ball-fall > div {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }

.la-ball-fall {
display: block;
font-size: 0;
color: #fff; }

.la-ball-fall.la-dark {
color: #333; }

.la-ball-fall > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor; }

.la-ball-fall {
width: 54px;
height: 18px; }

.la-ball-fall > div {
width: 10px;
height: 10px;
margin: 4px;
border-radius: 100%;
opacity: 0;
-webkit-animation: ball-fall 1s ease-in-out infinite;
-moz-animation: ball-fall 1s ease-in-out infinite;
-o-animation: ball-fall 1s ease-in-out infinite;
animation: ball-fall 1s ease-in-out infinite; }

.la-ball-fall > div:nth-child(1) {
-webkit-animation-delay: -200ms;
-moz-animation-delay: -200ms;
-o-animation-delay: -200ms;
animation-delay: -200ms; }

.la-ball-fall > div:nth-child(2) {
-webkit-animation-delay: -100ms;
-moz-animation-delay: -100ms;
-o-animation-delay: -100ms;
animation-delay: -100ms; }

.la-ball-fall > div:nth-child(3) {
-webkit-animation-delay: 0ms;
-moz-animation-delay: 0ms;
-o-animation-delay: 0ms;
animation-delay: 0ms; }

.la-ball-fall.la-sm {
width: 26px;
height: 8px; }

.la-ball-fall.la-sm > div {
width: 4px;
height: 4px;
margin: 2px; }

.la-ball-fall.la-2x {
width: 108px;
height: 36px; }

.la-ball-fall.la-2x > div {
width: 20px;
height: 20px;
margin: 8px; }

.la-ball-fall.la-3x {
width: 162px;
height: 54px; }

.la-ball-fall.la-3x > div {
width: 30px;
height: 30px;
margin: 12px; }

/*
* Animation
*/
@-webkit-keyframes ball-fall {
0% {
opacity: 0;
-webkit-transform: translateY(-145%);
transform: translateY(-145%); }
10% {
opacity: .5; }
20% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); }
80% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); }
90% {
opacity: .5; }
100% {
opacity: 0;
-webkit-transform: translateY(145%);
transform: translateY(145%); } }

@-moz-keyframes ball-fall {
0% {
opacity: 0;
-moz-transform: translateY(-145%);
transform: translateY(-145%); }
10% {
opacity: .5; }
20% {
opacity: 1;
-moz-transform: translateY(0);
transform: translateY(0); }
80% {
opacity: 1;
-moz-transform: translateY(0);
transform: translateY(0); }
90% {
opacity: .5; }
100% {
opacity: 0;
-moz-transform: translateY(145%);
transform: translateY(145%); } }

@-o-keyframes ball-fall {
0% {
opacity: 0;
-o-transform: translateY(-145%);
transform: translateY(-145%); }
10% {
opacity: .5; }
20% {
opacity: 1;
-o-transform: translateY(0);
transform: translateY(0); }
80% {
opacity: 1;
-o-transform: translateY(0);
transform: translateY(0); }
90% {
opacity: .5; }
100% {
opacity: 0;
-o-transform: translateY(145%);
transform: translateY(145%); } }

@keyframes ball-fall {
0% {
opacity: 0;
-webkit-transform: translateY(-145%);
-moz-transform: translateY(-145%);
-o-transform: translateY(-145%);
transform: translateY(-145%); }
10% {
opacity: .5; }
20% {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
80% {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
90% {
opacity: .5; }
100% {
opacity: 0;
-webkit-transform: translateY(145%);
-moz-transform: translateY(145%);
-o-transform: translateY(145%);
transform: translateY(145%); } }


/* ================================================================
VISUAL OVERRIDES — appended after original sweetalert.css
================================================================

QUICK EDIT GUIDE
─────────────────────────────────────────────────────────────
Card gradient (success)  →  --c-success-a / --c-success-b
Card gradient (error)    →  --c-error-a   / --c-error-b
Card gradient (warning)  →  --c-warning-a / --c-warning-b
Card gradient (info)     →  --c-info-a    / --c-info-b

Card width               →  .sweet-alert  width
Card corner radius       →  .sweet-alert  border-radius
Card shadow              →  .sweet-alert  box-shadow

Title size / weight      →  .sweet-alert h2  font-size / font-weight
Title push-down          →  .sweet-alert h2  margin-top (must clear the X)
Subtitle size            →  .sweet-alert p   font-size

Button background        →  .sweet-alert button  background-color
Button text colour       →  per-type rules at bottom of this file
Button size              →  .sweet-alert button  padding / font-size

X / ✓ watermark size     →  --icon-size  (width and height of icon block)
X / ✓ arm thickness      →  --icon-arm
X / ✓ arm opacity        →  --icon-opacity  (0 = invisible, 1 = solid)
X / ✓ arm roundness      →  --icon-round
X / ✓ position           →  .sweet-alert .sa-icon  top / right / left
================================================================ */


/* ── CSS variables ──────────────────────────────────────────── */
:root {
/* Success gradient — change both stops to shift the green */
--c-success-a: #62cb82;   /* ← top-left colour  */
--c-success-b: #4ca164;   /* ← bottom-right colour */

/* Error gradient */
--c-error-a:   #d97471;
--c-error-b:   #e75765;

/* Warning gradient */
--c-warning-a: #FFD166;
--c-warning-b: #F5A623;

/* Info gradient */
--c-info-a:    #74B9FF;
--c-info-b:    #2E86DE;

/* X / ✓ watermark */
--icon-size:    180px;   /* ← icon block size */
--icon-opacity: 0.22;    /* ← lower = more subtle ghost effect */
--icon-arm:     30px;    /* ← arm thickness */
--icon-round:   15px;    /* ← rounded ends on each arm */
}

.sweet-alert[data-type="success"] {
  background: linear-gradient(150deg, var(--c-success-a), var(--c-success-b)) !important;
}
.sweet-alert[data-type="error"] {
  background: linear-gradient(150deg, var(--c-error-a), var(--c-error-b)) !important;
}
.sweet-alert[data-type="warning"] {
  background: linear-gradient(150deg, var(--c-warning-a), var(--c-warning-b)) !important;
}
.sweet-alert[data-type="info"] {
  background: linear-gradient(150deg, var(--c-info-a), var(--c-info-b)) !important;
}


/* ── Button container ────────────────────────────────────────── */
.sweet-alert .sa-confirm-button-container {
display: block;
padding: 0 28px;   /* ← horizontal gap between button and card edge */
margin-top: 24px;  /* ← gap between subtitle and button             */
position: relative;
}


/* ================================================================
X / ✓ WATERMARK — fills the entire card width
================================================================

The icon block is positioned absolutely and centred horizontally
so the X or ✓ spans the full width of the card.

HOW IT WORKS:
· width/height = --icon-size = same as card width (420px)
· left: 50% + translateX(-50%) centres it horizontally
· top controls how far down from the card top edge it sits
· overflow:hidden on .sweet-alert clips any bleed

To shift watermark up/down: change  top  value below.
To make it larger/smaller:  change  --icon-size in :root.
================================================================ */
.sweet-alert .sa-icon {
width:  var(--icon-size);
height: var(--icon-size);
display: none;

/* Top-right corner bleed */
position: absolute;
top:  -20px;           /* ← bleeds above card top edge */
right: -20px;          /* ← bleeds past card right edge */
left: auto;
transform: none;
-webkit-transform: none;

/* Reset SweetAlert circle defaults */
border:        none  !important;
border-radius: 0     !important;
background:    transparent !important;
box-shadow:    none  !important;
margin:        0     !important;
display: block;
box-sizing: content-box;
overflow: visible;
}


/* ── ERROR ✕ — two crossing arms ─────────────────────────────── */
.sweet-alert .sa-icon.sa-error .sa-x-mark {
position: relative;
display:  block;
}

.sweet-alert .sa-icon.sa-error .sa-line {
background-color: rgba(255,255,255,var(--icon-opacity)) !important;
border-radius: var(--icon-round);
height: var(--icon-arm);
/*
Arm length = icon-size × √2 so it reaches corner-to-corner.
For --icon-size: 420px → √2 ≈ 1.414 → 420 × 1.414 ≈ 594px.
This makes the X span the full diagonal of the square block.
─────────────────────────────────────────────────────────────
Centre maths for a 420×420 block:
top  = (420/2) - (52/2) = 184
left = (420 - 594) / 2  = -87  (negative because arm is wider than block)
*/
width:  255px;   /* ← arm length: icon-size × 1.414 for full diagonal */
top:     75px;   /* ← (icon-size/2) - (arm-thickness/2)               */
left:   -37px;   /* ← (icon-size - arm-length) / 2                    */
display:  block;
position: absolute;
}
.sweet-alert .sa-icon.sa-error .sa-line.sa-left  { transform: rotate(45deg);  -webkit-transform: rotate(45deg);  }
.sweet-alert .sa-icon.sa-error .sa-line.sa-right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }


/* ── SUCCESS ✓ — two legs meeting at a point ─────────────────── */

/* Keep animation masks transparent so card gradient shows through */
.sweet-alert .sa-icon.sa-success::before,
.sweet-alert .sa-icon.sa-success::after {
background:       transparent !important;
background-color: transparent !important;
content: '';
position: absolute;
}
.sweet-alert .sa-icon.sa-success::before {
border-radius: 120px 0 0 120px;
width: 60px; height: 120px;
top: -7px; left: -33px;
transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform-origin: 60px 60px; -webkit-transform-origin: 60px 60px;
}
.sweet-alert .sa-icon.sa-success::after {
border-radius: 0 120px 120px 0;
width: 60px; height: 120px;
top: -11px; left: 30px;
transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform-origin: 0 60px; -webkit-transform-origin: 0 60px;
}
.sweet-alert .sa-icon.sa-success .sa-placeholder { display: none !important; }
.sweet-alert .sa-icon.sa-success .sa-fix         { display: none !important; }

.sweet-alert .sa-icon.sa-success .sa-line {
background-color: rgba(255,255,255,var(--icon-opacity)) !important;
border-radius: var(--icon-round);
height: var(--icon-arm);
display:  block;
position: absolute;
z-index:  2;
}
/* Short leg — bottom-left of ✓ */
.sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
width: 72px;    /* ← short leg length */
left:  10px;
top:   122px;   /* ← join point: must align with sa-long */
transform: rotate(45deg); -webkit-transform: rotate(45deg);
}
/* Long leg — top-right of ✓, bleeds off right */
.sweet-alert .sa-icon.sa-success .sa-line.sa-long {
width: 140px;   /* ← long leg length */
right: -14px;
top:    84px;   /* ← must align with sa-tip join */
transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
}


/* ── WARNING ! ───────────────────────────────────────────────── */
.sweet-alert .sa-icon.sa-warning .sa-body {
position: absolute;
width: var(--icon-arm); height: 220px;
background: rgba(255,255,255,var(--icon-opacity)) !important;
border-radius: var(--icon-round);
left: 50%; top: 40px;
margin-left: calc(var(--icon-arm) / -2);
}
.sweet-alert .sa-icon.sa-warning .sa-dot {
position: absolute;
width: calc(var(--icon-arm) * 1.2); height: calc(var(--icon-arm) * 1.2);
border-radius: 50%;
background: rgba(255,255,255,var(--icon-opacity)) !important;
left: 50%; bottom: 30px;
margin-left: calc(var(--icon-arm) * -0.6);
}


/* ── INFO i ──────────────────────────────────────────────────── */
.sweet-alert .sa-icon.sa-info::before {
content: "" !important;
position: absolute;
width: var(--icon-arm); height: 180px;
left: 50%; bottom: 40px;
border-radius: var(--icon-round);
margin-left: calc(var(--icon-arm) / -2);
background: rgba(255,255,255,var(--icon-opacity)) !important;
}
.sweet-alert .sa-icon.sa-info::after {
content: "" !important;
position: absolute;
width: calc(var(--icon-arm) * 1.2); height: calc(var(--icon-arm) * 1.2);
border-radius: 50%;
top: 48px; left: 50%;
margin-left: calc(var(--icon-arm) * -0.6);
background: rgba(255,255,255,var(--icon-opacity)) !important;
}



/* ── Per-type button text colour ─────────────────────────────── */
.sweet-alert[data-type="success"] button.confirm { color: var(--c-success-b); }
.sweet-alert[data-type="error"]   button.confirm { color: var(--c-error-b);   }
.sweet-alert[data-type="warning"] button.confirm { color: var(--c-warning-b); }
.sweet-alert[data-type="info"]    button.confirm { color: var(--c-info-b);    }