body.modal-lock-scroll { overflow: hidden; }
.modal-layer {
position: fixed;
inset: var(--app-modal-viewport-top, 0px) 0 auto;
height: var(--app-modal-viewport-height, 100dvh);
z-index: 1070;
padding: 0;
background: rgba(8, 8, 8, .66);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
.modal-layer::before {
content: "";
width: 36px;
height: 3px;
flex: 0 0 3px;
margin-bottom: 7px;
border-radius: 3px;
background: rgba(255, 255, 255, .78);
box-shadow: 0 1px 3px rgba(20, 14, 26, .18);
transform: translateY(18px);
transition: transform .22s ease;
}
.modal-layer.open { opacity: 1; pointer-events: auto; }
.modal-layer.open::before { transform: translateY(0); }
.modal-sheet {
position: relative;
width: 100%;
max-width: 520px;
max-height: 92dvh;
padding: 1px 14px 16px 20px;
border: 1px solid var(--app-line);
border-bottom: 0;
border-radius: 22px 22px 0 0;
background: var(--app-surface-raised);
color: var(--app-text);
box-shadow: 0 -8px 24px rgba(0, 0, 0, .18);
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
transform: translateY(18px);
transition: transform .22s ease;
}
.modal-layer.open .modal-sheet { transform: none; }
.modal-layer .modal-body {
position: relative;
padding: 1rem;
}
.modal-grab {
position: absolute;
inset: 0 66px auto;
z-index: 13;
height: 54px;
margin: 0;
padding: 0;
background: transparent;
cursor: grab;
touch-action: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.modal-grab::after { content: none; }
.modal-layer.is-dragging .modal-grab { cursor: grabbing; }
.modal-layer.is-dragging .modal-sheet { transition: none; user-select: none; }
.modal-layer.is-auto-expanding .modal-sheet { transition: height .24s ease, border-radius .24s ease, transform .22s ease; }
.modal-layer.is-fullscreen { align-items: stretch; padding: 0; }
.modal-layer.is-fullscreen::before { display: none; }
.modal-layer.is-fullscreen .modal-sheet {
width: 100%;
max-width: none;
height: var(--app-modal-viewport-height, 100dvh);
max-height: var(--app-modal-viewport-height, 100dvh);
padding-top: 0;
border-radius: 0;
}
.modal-layer.is-fullscreen .modal-grab { display: none; }
.modal-head {
position: sticky;
top: 0;
z-index: 12;
display: grid;
grid-template-columns: 52px minmax(0, 1fr) 52px;
align-items: center;
gap: 0;
min-height: 54px;
margin: -16px -14px 25px;
padding: 0 6px;
border-bottom: 1px solid var(--app-line);
border-radius: 22px 22px 0 0;
background: var(--app-surface-raised);
isolation: isolate;
cursor: grab;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
.modal-layer.is-fullscreen .modal-head {
margin: 0 -14px 12px;
border-radius: 0;
}
.modal-layer.is-fullscreen.is-dragging .modal-head { cursor: grabbing; }
.modal-head h3 {
grid-column: 2;
min-width: 0;
margin: 0;
color: var(--app-heading);
font-size: 15px;
font-weight: 700;
line-height: 1.2;
text-align: left;
display: flex;
align-items: center;
justify-content: flex-start;
overflow-wrap: anywhere;
}
.modal-back,
.modal-close {
width: 52px;
height: 48px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--app-muted);
box-shadow: none;
display: grid;
place-items: center;
cursor: pointer;
}
.modal-back:hover,
.modal-close:hover,
.modal-back:active,
.modal-close:active,
.modal-back:focus,
.modal-close:focus,
.modal-back:focus-visible,
.modal-close:focus-visible {
border: 0;
outline: 0;
background: transparent;
color: var(--app-muted);
box-shadow: none;
}
.modal-back[hidden] { display: none; }
.modal-back { grid-column: 1; }
.modal-close { grid-column: 3; }
.modal-head:not(:has(.modal-back:not([hidden]))) {
grid-template-columns: minmax(0, 1fr) 52px;
padding-left: 14px;
}
.modal-head:not(:has(.modal-back:not([hidden]))) h3 { grid-column: 1; }
.modal-head:not(:has(.modal-back:not([hidden]))) .modal-close { grid-column: 2; }
.modal-back i,
.modal-close i { font-size: 20px; line-height: 1; pointer-events: none; }
.modal-foot-x {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}
.modal-foot-x > :where(button, a, form),
.modal-foot-x .qa-btn { flex: 1; }
.modal-foot-x > form { display: flex; }
.modal-foot-x > form > :where(button, a) { width: 100%; }
.qa-btn {
min-height: 40px;
padding: 0 14px;
border: 1px solid var(--app-line);
border-radius: var(--app-radius-sm);
background: var(--app-service);
color: var(--app-service-text);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
white-space: nowrap;
font: inherit;
font-size: 13px;
font-weight: 750;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: var(--app-motion);
}
.qa-btn.primary { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); }
.qa-btn.save { border-color: var(--app-blue); background: var(--app-blue); color: #fff; }
.qa-btn.upsell { border-color: var(--app-buy); background: var(--app-buy); color: var(--app-buy-ink); font-weight: 800; }
.qa-btn.danger { border-color: var(--app-danger); background: var(--app-danger); color: #fff; }
.qa-btn:not(:disabled):hover { border-color: var(--app-line-strong); background: var(--app-service-hover); color: var(--app-heading); }
.qa-btn.primary:not(:disabled):hover { border-color: var(--app-accent-hover); background: var(--app-accent-hover); color: var(--app-accent-ink); }
.qa-btn.save:not(:disabled):hover { border-color: var(--app-blue-hover); background: var(--app-blue-hover); color: #fff; }
.qa-btn.upsell:not(:disabled):hover { border-color: var(--app-buy-hover); background: var(--app-buy-hover); color: var(--app-buy-ink); }
.qa-btn.danger:not(:disabled):hover { border-color: var(--app-danger); background: color-mix(in srgb, var(--app-danger) 88%, #000); color: #fff; }
.qa-btn:focus-visible { outline: 2px solid var(--app-field-focus); outline-offset: 2px; }
.modal-sheet button:disabled { opacity: .5; cursor: not-allowed; }
.profile-confirm {
position: absolute;
inset: 0;
z-index: 20;
padding: 14px;
border-radius: inherit;
background: color-mix(in srgb, var(--app-surface-raised) 94%, transparent);
backdrop-filter: blur(4px);
display: grid;
place-items: center;
}
.profile-confirm-card { width: min(100%, 330px); padding: 18px; border: 1px solid var(--app-line); border-radius: var(--app-radius-md, 12px); background: var(--app-surface-raised); color: var(--app-text); text-align: center; }
.profile-confirm-card .decision-icon { width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--app-service); color: var(--app-accent); }
.profile-confirm-card.is-warning .decision-icon { background: var(--app-gold-soft); color: var(--app-gold); }
.profile-confirm-card.is-danger .decision-icon { background: var(--app-danger-soft); color: var(--app-danger); }
.profile-confirm-card h4 { margin: 0; color: var(--app-heading); font-size: 15px; }
.profile-confirm-card p { margin: 7px 0 15px; color: var(--app-muted); font-size: 13px; line-height: 1.55; }
.profile-confirm-detail { margin: -5px 0 15px; padding: 9px 10px; border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); background: var(--app-service); color: var(--app-heading); font-size: 13px; line-height: 1.45; font-weight: 700; }
.profile-confirm-actions { display: flex; justify-content: center; gap: 8px; }
.profile-confirm-actions .qa-btn { flex: 1; min-width: 112px; }
@media (max-width: 390px) {
.profile-confirm-actions { flex-direction: column; align-items: stretch; }
.profile-confirm-actions .qa-btn { width: 100%; }
}
.cookie-preferences__body {
display: grid;
gap: 10px;
padding: 4px 0 16px;
}
.cookie-preferences__item {
padding: 13px;
border: 1px solid var(--app-line);
border-radius: var(--app-radius-sm);
background: var(--app-service);
}
.cookie-preferences__item h4 { margin: 0 0 5px; color: var(--app-heading); font-size: 14px; }
.cookie-preferences__item p { margin: 0 0 9px; color: var(--app-muted); font-size: 13px; line-height: 1.5; }
.cookie-preferences__item label { display: flex; gap: 8px; align-items: center; color: var(--app-text); font-size: 13px; }
@media (max-width: 760px), (pointer: coarse) {
.modal-sheet { max-width: none; }
.modal-sheet:has(.modal-foot-x),
.modal-layer.has-modal-footer .modal-sheet {
padding-bottom: calc(var(--app-modal-footer-height, 63px) + 14px);
scroll-padding-bottom: calc(var(--app-modal-footer-height, 63px) + 14px);
}
.modal-foot-x {
position: fixed;
z-index: 11;
inset: auto 0 var(--app-modal-viewport-bottom, 0px);
margin: 0;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) 20px;
border-top: 1px solid var(--app-line);
background: var(--app-surface-raised);
box-shadow: 0 -8px 16px rgba(0, 0, 0, .06);
}
}
@media (min-width: 761px) and (pointer: fine) {
.modal-layer { align-items: center; justify-content: center; padding: 20px; }
.modal-layer::before { display: none; }
.modal-sheet {
border-bottom: 1px solid var(--app-line);
border-radius: 14px;
box-shadow: 0 16px 42px rgba(0, 0, 0, .22);
}
.modal-grab { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.modal-layer,
.modal-layer::before,
.modal-sheet { transition-duration: .001ms; }
}