/* SMS Storefront — transisi + util di luar Tailwind.
   Komponen @apply (btn-primary, form-input) ada di header.php dalam
   <style type="text/tailwindcss"> — Play CDN tidak memproses @apply di
   stylesheet eksternal. */

[x-cloak] { display: none !important; }
.dark { color-scheme: dark; }

/* Transisi modal (sama dengan sms-modal-* di layout.php sms-core). */
.sms-modal-enter       { transition: opacity .25s ease-out, transform .25s ease-out; }
.sms-modal-enter-start { opacity: 0; transform: scale(.95); }
.sms-modal-enter-end   { opacity: 1; transform: scale(1); }
.sms-modal-leave       { transition: opacity .2s ease-in, transform .2s ease-in; }
.sms-modal-leave-start { opacity: 1; transform: scale(1); }
.sms-modal-leave-end   { opacity: 0; transform: scale(.95); }
.sms-fade-enter        { transition: opacity .25s ease-out; }
.sms-fade-enter-start  { opacity: 0; }
.sms-fade-enter-end    { opacity: 1; }
.sms-fade-leave        { transition: opacity .2s ease-in; }
.sms-fade-leave-start  { opacity: 1; }
.sms-fade-leave-end    { opacity: 0; }

/* Spinner tombol submit. */
.sms-btn-spinner { display: inline-block; width: .9em; height: .9em; margin-right: .45em;
	border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
	animation: sf-spin .6s linear infinite; vertical-align: -0.08em; }
@keyframes sf-spin { to { transform: rotate(360deg); } }

html { scroll-behavior: smooth; }