:root { --wpjs-surface:           #ffffff;
--wpjs-surface-hover:     #f8fafc;
--wpjs-scrim:             rgba(15, 23, 42, 0.55); --wpjs-text:              #0f172a;
--wpjs-text-muted:        #475569;
--wpjs-text-subtle:       #94a3b8; --wpjs-border:            #e2e8f0;
--wpjs-border-strong:     #cbd5e1; --wpjs-primary:           #2563eb;
--wpjs-primary-hover:     #1d4ed8;
--wpjs-primary-soft:      #eff6ff;
--wpjs-primary-ring:      rgba(37, 99, 235, 0.25); --wpjs-info:              #2563eb;
--wpjs-success:           #16a34a;
--wpjs-warning:           #d97706;
--wpjs-danger:            #dc2626; --button:                 var(--wpjs-primary);
--button-danger:          var(--wpjs-danger);
--button-secondary:       #f1f5f9;
--button-secondary-text:  #475569;
--separator-color:        var(--wpjs-border); --wpjs-radius-sm:         6px;
--wpjs-radius:            10px;
--wpjs-radius-lg:         16px; --wpjs-shadow-sm:         0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
--wpjs-shadow-md:         0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 10px 25px -3px rgba(15, 23, 42, 0.10);
--wpjs-shadow-lg:         0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 25px 50px -12px rgba(15, 23, 42, 0.16);
--wpjs-shadow-popover:    0 8px 24px -4px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06); --wpjs-ease:              cubic-bezier(0.16, 1, 0.3, 1);
--wpjs-duration:          200ms;
}
@keyframes wpjs-fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes wpjs-pop-in     { from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
to   { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.remodal-bg {
display: none;
justify-content: center;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: var(--wpjs-scrim);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 99999;
animation: wpjs-fade-in var(--wpjs-duration) var(--wpjs-ease);
.remodal {
* {
font: inherit;
font-family: inherit;
box-sizing: border-box;
}
align-self: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 800px;
min-width: 500px;
background: var(--wpjs-surface);
color: var(--wpjs-text);
margin: 0 auto;
padding: 0;
box-sizing: border-box;
border-radius: var(--wpjs-radius-lg);
box-shadow: var(--wpjs-shadow-lg);
overflow: hidden;
animation: wpjs-pop-in var(--wpjs-duration) var(--wpjs-ease);
.remodal-header {
border-bottom: solid 1px var(--wpjs-border);
padding: 20px 24px;
cursor: grab;
background: var(--wpjs-surface);
&.grabbing { cursor: grabbing; }
h2 {
text-align: center;
margin: 0;
font-size: 1.15rem;
font-weight: 600;
color: var(--wpjs-text);
letter-spacing: -0.01em;
}
}
.remodal-body {
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
color: var(--wpjs-text);
p {
margin: 0;
margin-bottom: 12px;
line-height: 1.5;
&[data-remodal-message] {
max-height: calc(100vh - 240px);
overflow: auto;
&.hidden { display: none; }
a {
color: var(--wpjs-primary);
text-decoration: underline;
}
}
}
> p { margin: 0; }
input,
textarea,
select {
width: 100%;
max-width: 100%;
margin: 0;
padding: 9px 12px;
border: 1px solid var(--wpjs-border-strong);
border-radius: var(--wpjs-radius-sm);
background: var(--wpjs-surface);
color: var(--wpjs-text);
font-size: 14px;
line-height: 1.4;
transition: border-color var(--wpjs-duration) var(--wpjs-ease),
box-shadow var(--wpjs-duration) var(--wpjs-ease);
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--wpjs-primary);
box-shadow: 0 0 0 3px var(--wpjs-primary-ring);
}
input,
select { height: 38px; }
input[type='radio'],
input[type='checkbox'] {
width: 1rem;
height: 1rem;
accent-color: var(--wpjs-primary);
}
.radio-option {
display: block;
line-height: 2.2rem;
input[type='radio'] {
height: 1.2rem;
width: 1.2rem;
display: inline-grid;
justify-content: center;
align-content: center;
}
}
}
.remodal-footer {
padding: 16px 24px;
border-top: solid 1px var(--wpjs-border);
display: flex;
gap: 8px;
justify-content: flex-end;
background: var(--wpjs-surface-hover);
.remodal-confirm,
.remodal-cancel { width: auto; min-width: 110px; }
}
button[data-remodal-action] {
cursor: pointer;
text-decoration: none;
outline: 0;
border: 0;
font-weight: 500;
}
.remodal-close { display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 1;
width: 36px;
height: 36px;
top: 12px;
right: 12px;
left: auto;
position: absolute;
background: transparent;
cursor: pointer;
transform: rotate(0deg);
transform-origin: center center;
transition: color var(--wpjs-duration) var(--wpjs-ease),
background-color var(--wpjs-duration) var(--wpjs-ease),
transform var(--wpjs-duration) var(--wpjs-ease);
color: var(--wpjs-text-subtle);
padding: 0;
margin: 0;
border-radius: 50%;
}
.remodal-close:hover {
color: var(--wpjs-text);
background-color: var(--wpjs-surface-hover);
transform: rotate(90deg);
}
.remodal-close:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--wpjs-primary-ring);
}
.remodal-confirm {
color: #fff;
background: var(--wpjs-primary);
&:hover { background: var(--wpjs-primary-hover); }
&:focus-visible { box-shadow: 0 0 0 3px var(--wpjs-primary-ring); }
}
.remodal-cancel {
color: var(--button-secondary-text);
background: var(--button-secondary);
&:hover { background: #e2e8f0; }
&:focus-visible { box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.4); }
}
.remodal-cancel,
.remodal-confirm {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
min-width: 110px;
padding: 10px 18px;
border-radius: var(--wpjs-radius-sm);
transition: background var(--wpjs-duration) var(--wpjs-ease),
box-shadow var(--wpjs-duration) var(--wpjs-ease),
transform var(--wpjs-duration) var(--wpjs-ease);
text-align: center;
margin-left: 0;
cursor: pointer;
font-size: 14px;
font-weight: 500;
}
.remodal-cancel:active,
.remodal-confirm:active { transform: translateY(1px); }
.remodal-form-line {
margin-bottom: 10px;
.remodal-form-line-title {
font-size: 0.875rem;
font-weight: 500;
color: var(--wpjs-text-muted);
margin-bottom: 4px;
}
}
}
}
@media only screen and (max-width: 500px) {
.remodal-bg .remodal {
min-width: 0;
width: calc(100vw - 24px);
max-width: calc(100vw - 24px);
border-radius: var(--wpjs-radius);
.remodal-body { padding: 16px; }
.remodal-header { padding: 16px; }
.remodal-footer { padding: 12px 16px; }
.remodal-confirm,
.remodal-cancel {
min-width: 0;
flex: 1;
font-size: 0.875rem;
margin-left: 0;
}
}
}
@media (prefers-reduced-motion: reduce) {
.remodal-bg,
.remodal-bg .remodal { animation: none; }
}