/* Component styles for the GUI Razor controls. Served from _content/GUI.Web.Razor/gui-web-blazor.css,
   so every consuming site shares this one copy.

   No palette lives here: every color comes from a --gui-* token that the consuming site defines in its own
   theme stylesheet (each project may have a different theme). The literals below are only the fallbacks that
   keep a control readable when a site has not defined that token yet. */
.gui-theme { font-family: var(--gui-font); color: var(--gui-text); }

/* ============================== Buttons ============================== */
.gui-button { border: var(--gui-button-border-width, 1px) solid var(--gui-button-border, #ffffff33); border-radius: var(--gui-button-radius, 24px); min-height: var(--gui-button-min-height, 50px); padding: var(--gui-button-padding-y, 14px) var(--gui-button-padding-x, 28px); color: var(--gui-button-text, white); font: 600 var(--gui-button-font-size, 16px)/1 var(--gui-font); cursor: pointer; box-shadow: var(--gui-button-shadow, 0 8px 16px #4f7cfa59); transition: transform var(--gui-animation-duration) ease, opacity var(--gui-animation-duration) ease; }
.gui-button:hover:not(:disabled) { transform: scale(var(--gui-button-hover-scale, 1.015)); }
.gui-button:active:not(:disabled) { transform: scale(var(--gui-button-pressed-scale, .97)); opacity: var(--gui-button-pressed-opacity, .92); }
.gui-button:disabled { opacity: var(--gui-button-disabled-opacity, .45); cursor: default; }
.gui-button--ok { background: linear-gradient(135deg, var(--ok-button-bg-start, var(--gui-primary)), var(--ok-button-bg-end, var(--gui-accent, #a15cfa))); }
.gui-button--cancel { background: var(--cancel-button-bg, var(--gui-danger)); }
.gui-button--neutral { background: var(--neutral-button-bg, var(--gui-secondary)); }
.gui-button--custom1 { --gui-button-radius: 999px; background: linear-gradient(135deg, var(--custom1-button-bg-start, #4fd8c0), var(--custom1-button-bg-end, #4f9dfa)); }
.gui-button--custom2 { --gui-button-radius: 8px; --gui-button-min-height: 46px; background: linear-gradient(135deg, var(--custom2-button-bg-start, #ffa24f), var(--custom2-button-bg-end, #ff6f4f)); }
.gui-button--custom3 { --gui-button-radius: 16px; --gui-button-min-height: 56px; font-size: 18px; background: linear-gradient(135deg, var(--custom3-button-bg-start, #4ffa9b), var(--custom3-button-bg-end, #2ecc71)); }

/* ============================== Inputs ============================== */
.gui-input, .gui-phone { position: relative; display: flex; align-items: center; width: min(100%, 430px); border: var(--gui-input-border-width, 1px) solid var(--gui-input-border, var(--gui-border)); border-radius: var(--gui-input-radius, var(--gui-radius)); background: var(--gui-input-background, var(--gui-surface)); box-shadow: var(--gui-input-shadow, var(--gui-shadow)); transition: border-color var(--gui-animation-duration) ease; }
.gui-input.is-focused, .gui-phone.is-focused { border-color: var(--gui-input-focus-border, var(--gui-focus)); }
.gui-input.is-error { border-color: var(--gui-input-error-border, var(--gui-danger)); }
.gui-input.is-disabled, .gui-phone.is-disabled { opacity: var(--gui-input-disabled-opacity, .5); }
.gui-input--secondary { --gui-input-background: var(--gui-surface-alt); --gui-input-border: #e1e1e1; --gui-input-focus-border: var(--gui-secondary); }
.gui-input input, .gui-input textarea, .gui-phone input { box-sizing: border-box; width: 100%; min-height: var(--gui-input-min-height, 44px); border: 0; outline: 0; background: transparent; color: var(--gui-input-text, var(--gui-text)); padding: var(--gui-input-padding-y, 12px) var(--gui-input-padding-x, 16px); font: var(--gui-input-font-size, 16px)/1.35 var(--gui-font); }
.gui-input textarea { resize: vertical; }
.gui-input__icon { display: inline-flex; padding-left: var(--gui-input-padding-x, 16px); color: var(--gui-muted); }
.gui-input__icon + input { padding-left: 8px; }
.gui-input__reveal { display: inline-flex; border: 0; background: transparent; color: var(--gui-muted); padding: 0 12px; cursor: pointer; }
.gui-input__suggestions { position: absolute; z-index: 4; top: calc(100% + 4px); left: 0; width: 100%; margin: 0; padding: 0; list-style: none; border: 1px solid var(--gui-border); border-radius: 8px; background: var(--gui-surface); box-shadow: var(--gui-shadow); }
.gui-input__suggestions button { display: block; width: 100%; padding: 8px 12px; border: 0; text-align: left; background: transparent; color: var(--gui-text); cursor: pointer; }
.gui-input__suggestions button:hover { background: var(--gui-surface-alt); }
.gui-phone__country { flex: none; align-self: stretch; border: 0; border-right: 1px solid var(--gui-border); background: transparent; color: var(--gui-input-text, var(--gui-text)); padding: 0 12px; font: var(--gui-input-font-size, 16px)/1.35 var(--gui-font); white-space: nowrap; cursor: pointer; }
.gui-phone__country:disabled { cursor: default; }

.gui-picker { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: min(100%, 430px); min-height: 44px; padding: 12px 16px; border: 1px solid var(--gui-input-border, var(--gui-border)); border-radius: var(--gui-input-radius, var(--gui-radius)); background: var(--gui-input-background, var(--gui-surface)); color: var(--gui-text); text-align: left; box-shadow: var(--gui-shadow); cursor: pointer; }
.gui-picker:disabled { opacity: var(--gui-input-disabled-opacity, .5); cursor: default; }
.gui-picker.is-open { border-color: var(--gui-input-focus-border, var(--gui-focus)); }
.gui-picker__value--placeholder, .gui-picker__chevron { color: var(--gui-muted); }

/* ============================== Labels ============================== */
.gui-label { color: var(--gui-label-color, var(--gui-text)); }
.gui-label--title { font-size: var(--gui-title-size, 28px); font-weight: 700; }
.gui-label--subtitle { font-size: var(--gui-subtitle-size, 20px); font-weight: 600; }
/* Content text keeps its full length: the visible height stops at --gui-label-lines and the rest scrolls inside. */
.gui-label--content { line-height: 1.3; max-height: calc(var(--gui-label-lines, 6) * 1.3em); overflow-y: auto; }
/* MaxVisibleLines <= 0: no line limit, the text grows with its content. */
.gui-label--content.gui-label--auto-height { max-height: none; overflow-y: visible; }
.gui-label--custom1 { color: var(--custom1-label-color, var(--gui-primary)); }
.gui-label--custom2 { color: var(--custom2-label-color, #f59e0b); }
.gui-label--custom3 { color: var(--custom3-label-color, #10b981); }

/* ============================== Dialogs ============================== */
.gui-dialog-backdrop { position: fixed; z-index: 1000; inset: 0; display: flex; align-items: end; justify-content: center; padding: var(--gui-dialog-sheet-top-inset, 24px) var(--gui-dialog-sheet-horizontal-margin, 16px) 0; background: var(--gui-dialog-backdrop); -webkit-backdrop-filter: blur(var(--gui-dialog-backdrop-blur, 3px)); backdrop-filter: blur(var(--gui-dialog-backdrop-blur, 3px)); animation: gui-dialog-backdrop-enter var(--gui-dialog-animation-duration, 420ms) var(--gui-dialog-animation-easing, cubic-bezier(.215, .61, .355, 1)); }
.gui-dialog-backdrop--leaving { animation: gui-dialog-backdrop-leave var(--gui-dialog-animation-duration, 200ms) var(--gui-dialog-animation-easing, cubic-bezier(.215, .61, .355, 1)) forwards; }
.gui-dialog-backdrop--nested { z-index: 1002; }
.gui-dialog { box-sizing: border-box; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(100%, var(--gui-dialog-sheet-max-width, 720px)); height: min(var(--gui-dialog-sheet-height, 95dvh), calc(100dvh - var(--gui-dialog-sheet-top-inset, 24px))); max-height: min(var(--gui-dialog-sheet-height, 95dvh), calc(100dvh - var(--gui-dialog-sheet-top-inset, 24px))); overflow: hidden; border-radius: var(--gui-dialog-sheet-radius, 32px) var(--gui-dialog-sheet-radius, 32px) 0 0; background: var(--gui-dialog-background, var(--gui-surface)); color: var(--gui-text); box-shadow: 0 -12px 40px #0003; animation: gui-dialog-enter var(--gui-dialog-animation-duration, 420ms) var(--gui-dialog-animation-easing, cubic-bezier(.215, .61, .355, 1)); }
.gui-dialog--leaving { animation: gui-dialog-leave var(--gui-dialog-animation-duration, 200ms) var(--gui-dialog-animation-easing, cubic-bezier(.215, .61, .355, 1)) forwards; }
.gui-dialog__header { display: flex; justify-content: end; min-height: var(--gui-dialog-sheet-header-height, 64px); padding: var(--gui-dialog-sheet-header-padding, 10px 16px 6px); }
.gui-dialog__close { display: grid; place-items: center; width: var(--gui-dialog-sheet-close-size, 44px); height: var(--gui-dialog-sheet-close-size, 44px); padding: 0; border: 0; border-radius: 50%; background: var(--gui-dialog-sheet-close-background, var(--gui-surface-alt)); color: var(--gui-dialog-sheet-close-color, var(--gui-text)); cursor: pointer; }
.gui-dialog__close img { width: var(--gui-dialog-sheet-close-icon-size, 22px); height: var(--gui-dialog-sheet-close-icon-size, 22px); }
.gui-dialog__body { min-height: 0; overflow-y: auto; padding: var(--gui-dialog-sheet-content-padding, 8px 24px 0); }
.gui-dialog--onboarding { overflow: hidden; }
.gui-dialog h2 { margin: 0 0 8px; }
.gui-dialog p { margin: 0 0 8px; color: var(--gui-muted); }
.gui-dialog__hero { display: block; width: 100%; max-height: 200px; object-fit: cover; }
.gui-dialog__icon { display: block; width: 40px; height: 40px; margin-bottom: 14px; }
.gui-dialog__icon--default { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 20px; font-size: 26px; font-weight: 700; color: #fff; background: var(--gui-dialog-icon-background, var(--gui-primary)); }
.gui-dialog--destructive .gui-dialog__icon--default, .gui-dialog--error .gui-dialog__icon--default { background: var(--gui-danger); }
.gui-dialog--success .gui-dialog__icon--default { background: var(--gui-success, #159b62); }
.gui-dialog--notification .gui-dialog__icon--default { background: var(--gui-secondary); }
.gui-dialog__actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; margin: 22px calc(-1 * var(--gui-dialog-sheet-content-padding-x, 24px)) 0; padding: 12px var(--gui-dialog-sheet-content-padding-x, 24px) calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--gui-dialog-background, var(--gui-surface)); }
.gui-dialog__actions--stacked { flex-direction: column; }
.gui-dialog__actions--stacked .gui-dialog__action { width: 100%; }
.gui-dialog__actions--row .gui-dialog__action { flex: 1 1 0; min-width: 0; }
.gui-dialog__action, .gui-dialog__options button { border: 0; border-radius: 999px; padding: 12px 20px; font: 600 14.5px/1.2 var(--gui-font); cursor: pointer; }
.gui-dialog__action--primary { background: linear-gradient(135deg, var(--gui-primary), var(--gui-accent, #a15cfa)); color: #fff; }
.gui-dialog__action--secondary { background: var(--gui-surface-alt); color: var(--gui-text); }
.gui-dialog__action--destructive { background: var(--gui-danger); color: #fff; }
.gui-dialog__options { display: grid; gap: 8px; max-height: min(480px, calc(100vh - 320px)); overflow-y: auto; }
.gui-dialog__options button { display: flex; gap: 12px; align-items: center; min-height: 56px; border-radius: 16px; background: var(--gui-surface-alt); color: var(--gui-text); text-align: left; }
.gui-dialog__option-text { flex: 1; }
.gui-dialog__options small { display: block; color: var(--gui-muted); }
.gui-dialog__option-chevron { color: var(--gui-muted); font-size: 20px; }
.gui-dialog__empty { text-align: center; }
.gui-dialog__selection { display: grid; gap: 10px; }
.gui-dialog__field { box-sizing: border-box; width: 100%; margin-top: 10px; padding: 10px 14px; border: 1px solid var(--gui-border); border-radius: 14px; background: var(--gui-surface-alt); color: var(--gui-text); font: 16px/1.35 var(--gui-font); }
.gui-dialog__search { margin: 0 0 10px; }
.gui-dialog__input .gui-input { width: 100%; margin-top: 10px; }
.gui-dialog .gui-input, .gui-dialog .gui-phone { width: 100%; }
.gui-dialog__pages { display: flex; gap: 6px; margin-top: 12px; }
.gui-dialog__pages span { width: 5px; height: 5px; border-radius: 99px; background: var(--gui-border); transition: width var(--gui-animation-duration) ease; }
.gui-dialog__pages .active { width: 22px; background: var(--gui-primary); }

/* Progress: independent of the action-dialog queue. */
.gui-dialog-backdrop--progress { z-index: 1003; }
.gui-dialog--progress { width: min(100%, 320px); }
.gui-dialog__progress-row { display: flex; align-items: center; gap: 14px; }
.gui-dialog__progress-row h2, .gui-dialog__progress-row p { margin: 0; }
.gui-spinner { flex: none; width: 28px; height: 28px; border: 3px solid var(--gui-border); border-top-color: var(--gui-primary); border-radius: 50%; animation: gui-spin .8s linear infinite; }
.gui-progress { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 6px; margin-top: 18px; border: 0; border-radius: 9px; overflow: hidden; background: var(--gui-surface-alt); }
.gui-progress::-webkit-progress-bar { background: var(--gui-surface-alt); }
.gui-progress::-webkit-progress-value { border-radius: 9px; background: linear-gradient(90deg, var(--gui-primary), var(--gui-accent, #a15cfa)); transition: width 150ms ease-out; }
.gui-progress::-moz-progress-bar { border-radius: 9px; background: linear-gradient(90deg, var(--gui-primary), var(--gui-accent, #a15cfa)); }

/* ============================== Snackbars ============================== */
.gui-snackbars { position: fixed; z-index: 1001; right: 20px; bottom: 20px; display: grid; gap: 10px; width: min(calc(100% - 40px), 400px); }
.gui-snackbar { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 12px; color: white; background: var(--gui-secondary); box-shadow: 0 10px 25px #0003; animation: gui-snackbar-enter 200ms cubic-bezier(.215, .61, .355, 1); }
.gui-snackbar--leaving { animation: gui-snackbar-leave 200ms cubic-bezier(.215, .61, .355, 1) forwards; }
.gui-snackbar--success { background: var(--gui-success, #159b62); }
.gui-snackbar--error { background: var(--gui-danger); }
.gui-snackbar--warning { background: var(--gui-warning, #d97706); }
.gui-snackbar__message { flex: 1; }
.gui-snackbar button { border: 0; background: transparent; color: inherit; font-weight: 700; cursor: pointer; }
.gui-snackbar__action { margin-left: auto; }

/* ============================== Animations ============================== */
@keyframes gui-dialog-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes gui-dialog-backdrop-leave { from { opacity: 1; } to { opacity: 0; } }
@keyframes gui-dialog-enter { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes gui-dialog-leave { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(100%); } }
@keyframes gui-snackbar-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes gui-snackbar-leave { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(24px); } }
@keyframes gui-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gui-dialog-backdrop, .gui-dialog, .gui-snackbar { animation-duration: 1ms; }
}
@media (max-width: 767px) { .gui-dialog-backdrop { padding-left: 0; padding-right: 0; } .gui-dialog { width: 100%; } }