/*!
 * National Design System — Showcase
 * Version: 1.0.4
 * License: MIT
 * Repository: https://github.com/mazin-musleh/NDS-vanilla
 * Author: Mazin Musleh
 * Profile: https://www.linkedin.com/in/mazin-musleh/
 */
input:is([type=text],[type=email],[type=password],[type=search],[type=tel],[type=url]):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:autofill,:autofill:hover,:autofill:focus),textarea:is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:autofill,:autofill:hover,:autofill:focus){-webkit-box-shadow:0 0 0 1000px var(--_form-control-bg, var(--form-field-background-default)) inset !important;box-shadow:0 0 0 1000px var(--_form-control-bg, var(--form-field-background-default)) inset !important;-webkit-text-fill-color:var(--form-field-text-focused) !important;caret-color:var(--form-field-text-focused);background-clip:padding-box;transition:background-color 9999s ease-out,color 9999s ease-out}input:is([type=text],[type=email],[type=password],[type=search],[type=tel],[type=url]):-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px var(--_form-control-bg, var(--form-field-background-default)) inset !important;color:var(--form-field-text-focused) !important;background-clip:padding-box}.nds-demo-card{background:var(--background-card);border:1px solid var(--border-neutral-secondary);border-radius:var(--radius-md);box-shadow:var(--shadow-md);flex:1 1 var(--nds-demo-card-width, 100%);min-width:200px}.demo-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-lg);padding:var(--spacing-lg);background:var(--background-stripe);border-bottom:1px solid var(--border-neutral-secondary);border-radius:var(--radius-md) var(--radius-md) 0 0;font-weight:600;font-size:var(--typo-text-md-FS);color:var(--text-default)}.demo-action{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.demo-action .nds-btn{--btn-size: 32px}@media(max-width: 600px){.demo-action .nds-btn{--btn-size: 24px}}.demo-action .demo-action-separator{width:1px;align-self:stretch;background-color:var(--border-neutral-secondary);margin-inline:var(--spacing-xs)}.demo-action .demo-toggle-menu .nds-dropmenu-menu{--dropmenu-min-width: 120px}.demo-action .demo-toggle-menu .nds-dropmenu-item[data-state~=selected]{background-color:var(--background-neutral-light);font-weight:600}.demo-bg-btn{font-size:var(--typo-text-xs-FS);line-height:var(--typo-text-xs-LH);padding:2px 8px;min-height:20px}.demo-container,.demo-code{padding:var(--spacing-2xl)}:is(.state-demo,.button-row){display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-xl);align-items:center}.nds-showcase{display:flex;flex-wrap:wrap;gap:var(--spacing-4xl);margin-bottom:var(--spacing-4xl)}.nds-showcase:last-child{margin-bottom:0}.demo-container:is(.green-bg,.dark-bg){background-color:var(--background-sa-flag)}.demo-container.black-bg{background-color:var(--background-neutral-800) !important}.demo-container.nds-noBg{background-color:var(--background-body)}.oncolor-buttons .demo-container{background-color:var(--background-sa-flag)}.support-options{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.support-item{padding:var(--spacing-sm);background-color:var(--background-neutral-light);border-radius:var(--radius-sm)}.account-features{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:var(--spacing-md);margin-top:var(--spacing-md)}.feature-item i{color:var(--button-background-primary-default)}.nds-definition-list.nds-doc-features{--max-col: 2;--mid-col: 1;--min-col: 1;--dl-icon-size: 24px;--row-gap: 24px;--col-gap: 32px}@media(max-width: 600px){.demo-container{padding:var(--spacing-2xl)}.demo-header{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--typo-text-sm-FS)}:is(.state-demo,.button-row){gap:var(--spacing-sm)}.nds-showcase{gap:var(--spacing-lg)}.nds-showcase:is(.green-bg,.black-bg,.dark-bg){padding:var(--spacing-lg)}.account-features{grid-template-columns:1fr}}html[dir=rtl] :is(.demo-header,.demo-action){direction:rtl}@media(prefers-contrast: high){.nds-demo-card{border:2px solid var(--border-neutral-400)}.demo-header{border-bottom:2px solid var(--border-neutral-400)}}