.form-group {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #222;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  background: #fff;
  transition: all 0.25s ease;
  outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #999;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #f5a623;
  box-shadow: 0 0 0 2px rgba(245,166,35,0.15);
}

.form-group textarea {
  resize: vertical;
}

input:hover,
textarea:hover {
  border-color: #bbb;
}

input:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0.6;
}


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------- AUTOCOMPLETE INPUT -------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

.autocomplete-component {
	position: relative;
	/* anchor for absolute dropdown */
}

/* The input can have an icon; add left-padding if you render one */
.autocomplete-component .with-icon {
	padding-left: 2.25rem;
	/* tweak if needed */
}

/* Dropdown container */
.autocomplete-component .dropdown {
	position: absolute;
	top: calc(100% + 6px);
	/* below the input */
	left: 0;
	right: 0;
	/* match input width */
	z-index: 1055;
	/* above page content */
	display: none;
	/* hidden by default */
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
	max-height: 60vh;
	overflow: auto;
}

/* Open state (toggle this class from JS) */
.autocomplete-component .dropdown.is-open {
	display: block;
}

/* Flip upwards */
.autocomplete-component .dropdown.drop-up {
	top: auto;
	bottom: calc(100% + 6px);
}

/* Headings + groups */
.autocomplete-component .group.heading {
	font-size: 12px;
	line-height: 1;
	font-weight: 600;
	padding: 10px 12px 6px;
	color: #6b7280;
}

.autocomplete-component .group {
	padding: 6px 0;
}

/* Empty state */
.autocomplete-component .empty {
	padding: 10px 12px;
	color: #9ca3af;
}

/* Dynamic result items (buttons/links with .address-suggestion) */
.autocomplete-component .suggestion {
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	border: 0;
	background: transparent;
	display: flex;
	gap: 8px;
	align-items: center;
	cursor: pointer;
	text-decoration: none;
	/* for <a> */
	color: inherit;
}

/* Hover/active/focus styles */
.autocomplete-component .suggestion:hover,
.autocomplete-component .suggestion[aria-selected="true"],
.autocomplete-component .suggestion.is-active,
.autocomplete-component .suggestion:focus-visible {
	background: rgba(0, 0, 0, .04);
	outline: none;
}

/* Subtext style used in your renderer */
.autocomplete-component .subtext {
	color: #6b7280;
	font-size: 12px;
	line-height: 1.3;
}

/* Thin separator if you add it */
.autocomplete-component .separator {
	height: 1px;
	background: rgba(0, 0, 0, .06);
	margin: 6px 0;
}

/* Scrollbar polish (optional) */
.autocomplete-component .dropdown::-webkit-scrollbar {
	width: 10px;
}

.autocomplete-component .dropdown::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, .15);
	border-radius: 10px;
}

.autocomplete-component .dropdown::-webkit-scrollbar-track {
	background: transparent;
}

.autocomplete-component .dropdown {
    max-height: 35vh;
}

/* Responsive: on narrow screens, let it breathe */
@media (max-width: 480px) {
	.autocomplete-component .dropdown {
		max-height: 40vh;
		border-radius: 12px;
	}
}

/* Optional dark mode */
@media (prefers-color-scheme: dark) {
	.autocomplete-component .dropdown {
		background: #0b0b0c;
		border-color: rgba(255, 255, 255, .08);
		box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
		color: #e5e7eb;
	}

	.autocomplete-component .suggestion:hover,
	.autocomplete-component .suggestion[aria-selected="true"],
	.autocomplete-component .suggestion.is-active,
	.autocomplete-component .suggestion:focus-visible {
		background: rgba(255, 255, 255, .06);
	}

	.autocomplete-component .group.heading,
	.autocomplete-component .subtext {
		color: #9ca3af;
	}

	.autocomplete-component .separator {
		background: rgba(255, 255, 255, .08);
	}
}

/* Scope narrowly to the card that contains the address component */
.card:has(.autocomplete-component),
.card:has(.autocomplete-component) .card-body {
	overflow: visible;
	/* let the dropdown paint outside the card’s bounds */
}

#company-extra-fields {
    transition: all .25s ease;
}
/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------ */
.scaffold-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Pagrindinis vaizdas fone */
#scaffold-back {
    display: block;
    width: 100%;
    height: auto;
}

/* Viršutinis sluoksnis, kuris animuosis */
.fade-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Pradžioje nematomas */
    transition: opacity 0.8s ease-in-out;
}

.fade-layer.visible {
    opacity: 1;
}


.onboarding-header {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
}

.onboarding-header-inner {
    max-width: 100%;
    margin: auto;
    padding: 26px 24px 32px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.onboarding-left {
    justify-self: start;
}

.onboarding-center {
    justify-self: center;
}

.onboarding-right {
    justify-self: end;
}

.logo {
    height: 26px;
}

.back-button {
    background: none;
    font-size: 15px;
    cursor: pointer;
    font-weight: 500;
    padding: 8px 14px;
    color: #6b7280;
    border: 1px solid transparent;
}

.back-button:hover {
    border: 1px solid #6b7280;
    border-radius: 8px;
}

.onboarding-meta {
    display: flex;
    gap: 14px;
    font-size: 13px;
    color: #6b7280;
}

.secure {
    font-weight: 500;
}

.step {
    background: #f3f4f6;
    padding: 4px 8px;
    border-radius: 6px;
}

.progress-bar {
    height: 3px;
    background: #f3f4f6;
}

.progress {
    height: 100%;
    background: #15803D;
    transition: width .3s ease;
}

@media (max-width: 380px) {
    .onboarding-header-inner {
        padding: 26px 6px 12px;
    }

    .logo {
        height: 22px;
    }

    .onboarding-meta {
        font-size: 10px;
    }
}