/* SARISARA DIALOG — the Perahera message theme (Chiran, 27 Oct 2026; Design System: Pages → Messages — Perahera
   theme). One box for the whole site, admin and front end; it replaced the browser's boxes on 3 Oct 2026.
   Rules: gradients are 2 shades of one colour, dark on the left (with near-black: colour left, black right); only
   the 45° shine moves; Chiran's butterfly pattern at one size (150px tile), never stretched; icon backgrounds are
   circles; no edge on light boxes. Two-class selectors so the theme's gold buttons and wp-admin's .button never reach it. */
.ssd-wash {
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(9, 9, 32, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    font-family: 'Google Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    animation: ssd-fade .2s ease;
}
.ssd-wash .ssd-box { width: 100%; max-width: 420px; background: #fff; color: #090920; box-shadow: 0 30px 70px -24px rgba(9,9,32,.5); animation: ssd-up .3s ease; text-align: left; }
.ssd-wash .ssd-title { margin: 0; font-weight: 700; font-size: 19px; line-height: 1.3; font-family: inherit; color: #090920; letter-spacing: -.01em; text-transform: none; }
.ssd-wash .ssd-msg { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: #5A5A6E; }

/* the butterfly pattern (Chiran's Affinity artboard "sarisara-pattern"), one size everywhere */
.ssd-pat { position: absolute; inset: 0; pointer-events: none; background: #fff; opacity: .2;
    -webkit-mask: url(../img/pattern/butterfly-line.png) 0 0 / 150px auto repeat; mask: url(../img/pattern/butterfly-line.png) 0 0 / 150px auto repeat; }

/* ARE YOU SURE / TYPE A SHORT ANSWER — the crowned card */
.ssd-wash .ssd-ask { border-radius: 24px; overflow: hidden; }
.ssd-ask__crown { position: relative; height: 88px; display: flex; align-items: flex-end; padding: 0 24px; background: linear-gradient(90deg, #7700FF, #A55CFF); }
/* A warning keeps its red band, but its answer button stays violet: never a red pill (HARD RULE 28 Oct;
   the admin's "Record this cancellation?" box still had red buttons, seen 3 Nov 2026). */
.ssd-ask--danger .ssd-ask__crown { background: linear-gradient(90deg, #B8001A, #FF3B4E) !important; }
.ssd-ask--money .ssd-ask__crown, .ssd-wash .ssd-ask--money .ssd-btn--go { background: linear-gradient(90deg, #1F8A00, #4FCB1C) !important; }
.ssd-ask__chip { position: relative; z-index: 1; transform: translateY(50%); width: 60px; height: 60px; border-radius: 50%; background: #fff; color: #7700FF;
    display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(9,9,32,.35); }
.ssd-ask--danger .ssd-ask__chip { color: #D0001A; }
.ssd-ask--money .ssd-ask__chip { color: #1F8A00; }
.ssd-ask__body { padding: 42px 24px 22px; }
.ssd-wash .ssd-field { display: block; width: 100%; margin-top: 14px; min-height: 88px; box-sizing: border-box; border: 1.5px solid #D9D7E4; border-radius: 14px; padding: 12px 14px;
    font-size: 14.5px; line-height: 1.5; font-family: inherit; color: #090920; background: #fff; resize: vertical; outline: none; box-shadow: none; }
.ssd-wash input.ssd-field { min-height: 0; height: 46px; }
.ssd-wash .ssd-field:focus { border-color: #7700FF; box-shadow: 0 0 0 4px rgba(119,0,255,.12); }
.ssd-count { margin: 4px 0 0; font-size: 12px; color: #8C8AA0; text-align: right; }
.ssd-wash .ssd-actions { display: flex; gap: 10px; margin-top: 20px; }

/* buttons */
.ssd-wash .ssd-btn { position: relative; overflow: hidden; flex: 1; height: 46px; padding: 0 20px; margin: 0; border-radius: 999px; border: 0; cursor: pointer;
    font-weight: 500; font-size: 14.5px; line-height: 1; font-family: inherit; text-transform: none; letter-spacing: 0; box-shadow: none; min-height: 0; }
.ssd-wash .ssd-btn--safe { background: #fff !important; color: #090920 !important; border: 1.5px solid #D9D7E4 !important; }
.ssd-wash .ssd-btn--safe:hover { border-color: #7700FF !important; color: #7700FF !important; }
.ssd-wash .ssd-btn--go { background: linear-gradient(90deg, #7700FF, #A55CFF) !important; color: #fff !important; }
.ssd-wash .ssd-btn--go::after { content: ""; position: absolute; top: -30%; left: 0; width: 42%; height: 160%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent); animation: ssd-shine 3.2s ease-in-out infinite; }
.ssd-wash .ssd-btn--dark { flex: none; align-self: center; height: 38px; padding: 0 18px; background: #090920 !important; color: #fff !important; }
.ssd-wash .ssd-btn:focus-visible { outline: 3px solid rgba(119,0,255,.35); outline-offset: 2px; }

/* INFORMATION — the old alert(): white card, one-family coloured edge, round icon */
.ssd-wash .ssd-info { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px 18px 22px; border-radius: 20px; overflow: hidden; max-width: 460px; }
.ssd-info::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, #7700FF, #A55CFF); }
.ssd-info__ic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #F3ECFF; color: #7700FF; }
.ssd-info__body { flex: 1; min-width: 0; }
.ssd-info--ok::before { background: linear-gradient(180deg, #1F8A00, #4FCB1C); }
.ssd-info--ok .ssd-info__ic { background: #EEF9E8; color: #1F8A00; }
.ssd-info--bad::before { background: linear-gradient(180deg, #B8001A, #FF3B4E); }
.ssd-info--bad .ssd-info__ic { background: #FFF0F1; color: #D0001A; }

/* THE SHORT NOTE — night-blue pill at the bottom, a coloured line runs down as it leaves */
.ssd-notes { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2147482999; display: flex; flex-direction: column; gap: 10px; align-items: center; width: max-content; max-width: calc(100vw - 32px);
    font-family: 'Google Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.ssd-note { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 18px; background: #090920; color: #fff; font-size: 14px; line-height: 1.4;
    box-shadow: 0 18px 40px -16px rgba(9,9,32,.7); animation: ssd-up .3s ease; transition: opacity .3s, transform .3s; }
.ssd-note::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ssd-n, linear-gradient(90deg, #7700FF, #A55CFF)); transform-origin: left; animation: ssd-bar 4s linear forwards; }
.ssd-note__ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ssd-n, linear-gradient(90deg, #7700FF, #A55CFF)); }
.ssd-note--ok { --ssd-n: linear-gradient(90deg, #1F8A00, #4FCB1C); }
.ssd-note--bad { --ssd-n: linear-gradient(90deg, #B8001A, #FF3B4E); }
.ssd-notes .ssd-note__a { margin-left: 4px; padding: 6px 10px; border-radius: 999px; border: 0; background: rgba(201,168,255,.14); color: #C9A8FF; font-weight: 500; font-size: 13.5px; font-family: inherit; cursor: pointer; }

/* THE GREETING — "Ayubowan, Maria", top centre; colour by the visitor's clock; no circle behind the icon */
.ssd-greet { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); z-index: 2147482999; overflow: hidden; display: inline-flex; align-items: center; gap: 12px;
    padding: 12px 24px 12px 18px; border-radius: 999px; color: #fff; cursor: pointer; max-width: calc(100vw - 32px);
    font-family: 'Google Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; animation: ssd-down .45s cubic-bezier(.2,.8,.2,1); transition: opacity .35s, transform .35s; }
.ssd-greet::after { content: ""; position: absolute; top: -30%; left: 0; width: 42%; height: 160%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent); animation: ssd-shine 3.2s ease-in-out infinite; }
.ssd-greet--morning { background: linear-gradient(90deg, #E8A300, #FFD24D); color: #090920; box-shadow: 0 14px 34px -12px rgba(232,163,0,.65); }
.ssd-greet--noon { background: linear-gradient(90deg, #D95600, #FF8A3D); box-shadow: 0 14px 34px -12px rgba(217,86,0,.6); }
.ssd-greet--night { background: linear-gradient(90deg, #5A00C8, #090920); box-shadow: 0 14px 34px -12px rgba(90,0,200,.6); }
.ssd-greet__ic { flex: none; line-height: 0; position: relative; z-index: 1; }
.ssd-greet__t { position: relative; z-index: 1; }
.ssd-greet b { display: block; font-size: 16px; line-height: 1.2; }
.ssd-greet small { display: block; font-size: 12.5px; opacity: .9; }
.ssd-out { opacity: 0 !important; }
.ssd-greet.ssd-out { transform: translate(-50%, -12px); }

/* THE BIG GOOD NEWS — night card (and a white one with --light) */
.ssd-wash .ssd-news { position: relative; overflow: hidden; border-radius: 24px; padding: 30px 26px 22px; text-align: center; max-width: 410px;
    background: linear-gradient(160deg, #1A0A4A, #090920); color: #fff; border: 1px solid #2C2460; box-shadow: 0 30px 70px -20px rgba(119,0,255,.5); }
.ssd-news > *:not(.ssd-pat) { position: relative; }
.ssd-pat--fill { -webkit-mask-image: url(../img/pattern/butterfly-fill.png); mask-image: url(../img/pattern/butterfly-fill.png); background: #E5E5E5; opacity: .035; }
.ssd-news__orb { width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; color: #fff;
    background: linear-gradient(90deg, #1F8A00, #4FCB1C); box-shadow: 0 0 0 8px rgba(79,203,28,.12), 0 0 34px rgba(79,203,28,.45); }
.ssd-wash .ssd-news .ssd-title { color: #fff; font-size: 24px; }
.ssd-wash .ssd-news .ssd-msg { color: rgba(255,255,255,.8); margin-top: 8px; }
.ssd-news .ssd-msg b { color: #fff; }
.ssd-wash .ssd-news .ssd-btn--go { display: block; width: 100%; margin-top: 20px; flex: none; }
.ssd-news__foot { margin: 12px 0 0; font-size: 13px; color: rgba(255,255,255,.65); }
.ssd-wash .ssd-news__link { border: 0; background: none; padding: 0; color: #C9A8FF; font-weight: 500; font-size: 13px; font-family: inherit; cursor: pointer; text-decoration: none; text-transform: none; }
.ssd-wash .ssd-news--light { background: #fff; color: #090920; border: 0; box-shadow: 0 30px 70px -24px rgba(9,9,32,.35); }
.ssd-news--light .ssd-pat--fill { background: #FAFAFA; opacity: 1; }
.ssd-wash .ssd-news--light .ssd-title { color: #090920; }
.ssd-wash .ssd-news--light .ssd-msg { color: #5A5A6E; }

/* A BOX NEEDS A FIX — the red half-pill under the box (replaces the browser's "Please fill in this field") */
.ssd-bad { border-color: #FF0A1F !important; box-shadow: 0 0 0 4px rgba(255,10,31,.08) !important; }
.ssd-tag { display: table; margin: -2px 0 6px 12px; padding: 6px 12px 5px; border-radius: 0 0 12px 12px; white-space: nowrap;
    background: linear-gradient(90deg, #B8001A, #FF3B4E); color: #fff; font: 500 12.5px/1.35 'Google Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-transform: none; letter-spacing: 0; position: relative; z-index: 2; }
@keyframes ssd-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 100% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } }

@keyframes ssd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ssd-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ssd-down { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ssd-shine { 0% { transform: translateX(-120%) skewX(-18deg); } 60%, 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes ssd-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 480px) { .ssd-wash .ssd-actions { flex-direction: column-reverse; } .ssd-greet { top: 84px; } }
@media (prefers-reduced-motion: reduce) { .ssd-wash, .ssd-wash .ssd-box, .ssd-note, .ssd-greet, .ssd-btn--go::after, .ssd-greet::after, .ssd-note::after { animation: none !important; } }

/* Settings: "Change email" / "Change WhatsApp number" (Chiran, 6 Nov 2026) — the small pill under the field, and the
   one 6-digit box in the password window. */
.ss-cc { margin-top: 8px; }
.ss-cc .ss-set-hint { margin: 0 0 8px; }
html body .ss-cc .ss-cc__go { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; font-size: 13.5px; font-weight: 500; border-radius: 999px; text-transform: none; letter-spacing: 0; cursor: pointer; }
html body .ss-cc .ss-cc__go:not(.sdb-btn) { border: 0; background: #7700FF; color: #fff; }
.ssd-wash input.ssd-field.ss-cc__code { letter-spacing: .5em; font-size: 20px; text-align: center; font-variant-numeric: tabular-nums; }