/* Auth layout logo */

.auth-logo {
    position: absolute;
    top: 28px;
    left: 120px;
    color: var(--color-green-900);
    color: var(--color-green-700);
    font-size: 32px;
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 40px;
    z-index: 100;
}

/* Default Checkbox Styles */
input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    transition: all 0.2s ease;
}

input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--color-green-700);
}

input[type="checkbox"]:focus {
  outline: none;
}

input[type="checkbox"]:checked {
  background-color: var(--color-green-700);
  border-color: var(--color-green-700);
  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.4732 4.8067C12.4112 4.74421 12.3375 4.69461 12.2563 4.66077C12.175 4.62692 12.0879 4.6095 11.9999 4.6095C11.9119 4.6095 11.8247 4.62692 11.7435 4.66077C11.6623 4.69461 11.5885 4.74421 11.5266 4.8067L6.55989 9.78003L4.47322 7.6867C4.40887 7.62454 4.33291 7.57566 4.24967 7.54286C4.16644 7.51006 4.07755 7.49397 3.9881 7.49552C3.89865 7.49706 3.81037 7.51622 3.72832 7.55188C3.64627 7.58754 3.57204 7.63902 3.50989 7.70336C3.44773 7.76771 3.39885 7.84367 3.36605 7.92691C3.33324 8.01014 3.31716 8.09903 3.31871 8.18848C3.32025 8.27793 3.3394 8.36621 3.37507 8.44826C3.41073 8.53031 3.4622 8.60454 3.52655 8.6667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3388 6.3035 11.3726C6.38474 11.4065 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4065 6.81627 11.3726C6.89751 11.3388 6.97124 11.2892 7.03322 11.2267L12.4732 5.7867C12.5409 5.72427 12.5949 5.6485 12.6318 5.56417C12.6688 5.47983 12.6878 5.38876 12.6878 5.2967C12.6878 5.20463 12.6688 5.11356 12.6318 5.02923C12.5949 4.94489 12.5409 4.86912 12.4732 4.8067Z" fill="white"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}  

input[type="checkbox"]:disabled {
  cursor: not-allowed;
  background-color: var(--color-bg-disabled);
  border-color: var(--color-border-disabled);
}

input[type="checkbox"]:checked:disabled {
  background-color: var(--color-disabled-checked);
  border-color: var(--color-disabled-checked);
}

/* Optional: Label alignment for checkboxes */
label[for] {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* Checkbox Label Class */
.checkbox-label {
  color: var(--color-text-dark);
  font-size: 14px;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 22px;
  word-wrap: break-word;
  cursor: pointer;
  margin: 0;
}

/* Default Input Styles - Figma Design System */

/* Input Label */
.input-label {
  display: block;
  color: var(--color-text-muted);
  font-size: 11px;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 18px;
  margin-bottom: 4px;
}

/* Base Input Wrapper */
.input-wrapper {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

/* Base Input Styles */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
  height: 48px;
  padding: 16px;
  font-size: 16px;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background-color: var(--color-white);
  color: var(--color-text-dark);
  transition: all 0.2s ease;
  box-sizing: border-box;
  align-self: stretch;
}

/* GLOBALNY STYL SELECTA */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 10L12 15L17 10H7Z" fill="%234D654F"/></svg>');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 24px 24px;
    padding: 0px 48px 0px 16px;
    cursor: pointer;
    color: var(--color-text-dark); /* domyslny kolor */
}

    /* gdy nic nie wybrane (placeholder) */
    select:invalid {
        color: var(--color-text-muted);
    }

    /* OPCJE ZAWSZE CZARNE */
    select option {
        color: var(--color-text-dark);
    }

        /* ukrycie placeholdera w menu */
        select option[disabled] {
            display: none;
        }



input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder,
input[type="url"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);  
}

/* Hover State */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
textarea:hover,
select:hover {
  border-color: var(--color-green-500);
}

/* Focus State */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  outline: none;  
}

/* Disabled State */
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled,
input[type="search"]:disabled,
input[type="url"]:disabled,
input[type="tel"]:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--color-bg-disabled);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

textarea {
  height: auto;
  resize: vertical;
  min-height: 120px;
}

/* Input Field Container (for prefix/suffix support) */
.input-field-group {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background-color: var(--color-white);
  transition: all 0.2s ease;
  gap: 10px;
}

.input-field-group:hover {
  border-color: var(--color-green-500);
}

.input-field-group:focus-within {
  border-color: var(--color-green-700);
}

/* Prefix/Suffix Text */
.input-prefix,
.input-suffix {
  color: var(--color-text-muted);
  font-size: 16px;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 24px;
  flex-shrink: 0;
}

/* Input inside field group */
.input-field-group input {
  flex: 1;
  border: none;
  padding: 0;
  height: 100%;
  background: transparent;
  font-size: 16px;
  font-family: var(--font-sans);
  color: var(--color-text-dark);
}

.input-field-group input:focus {
  outline: none;
}

.input-field-group input::placeholder {
  color: var(--color-text-muted);
}

/* Dropdown Icon */
.input-dropdown-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-green-700);
}

/* Default Hyperlink Styles - Figma Design System */
a {
  color: var(--color-text-mid);
  font-size: 14px;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 22px;
  text-decoration: none;
  transition: color 0.2s ease;
  cursor: pointer;
}

a:focus {
  outline: none;
  color: var(--color-green-500);
  text-decoration: none;
}

/* Button Styles - Figma Design System */

/* Base Button Styles */
.btn,
button {
  height: 48px;
  padding: 4px 24px;
  font-size: 16px;
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 24px;
  border: none;
  border-radius: var(--radius-btn);
  background-color: transparent;
  color: var(--color-text-mid);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  width: 100%;
}

button:disabled,
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

a.btn-primary {
    height: 48px;
    font-size: 16px;
    font-family: var(--font-sans);
    font-weight: 500;
    line-height: 24px;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
    width: 100%;
    text-decoration: none;
}

/* Filled Button Variants */
.btn-primary {
  background-color: var(--color-green-500);
  color: var(--color-white) !important;
  border: 1px solid var(--color-green-500);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-green-500-hover);
  border-color: var(--color-green-500-hover);
}

    .btn-primary:active:not(:disabled) {
        background-color: var(--color-green-500-active);
        border-color: var(--color-green-500-active);
        
    }

    .btn-primary:disabled {
        background-color: var(--color-green-500-disabled);
        border-color: var(--color-green-500-disabled);
        
    }

.btn-dark {
  background-color: var(--color-green-700);
  color: var(--color-white);
  border: 1px solid var(--color-green-700);
}

.btn-dark:hover:not(:disabled) {
  background-color: var(--color-green-700-hover);
  border-color: var(--color-green-700-hover);
}

.btn-dark:active:not(:disabled) {
  background-color: var(--color-green-700-active);
  border-color: var(--color-green-700-active);
}

.btn-darker {
  background-color: var(--color-green-900);
  color: var(--color-white);
  border: 1px solid var(--color-green-900);
}

.btn-darker:hover:not(:disabled) {
  background-color: var(--color-green-900-hover);
  border-color: var(--color-green-900-hover);
}

.btn-darker:active:not(:disabled) {
  background-color: var(--color-green-900-active);
  border-color: var(--color-green-900-active);
}

.btn-secondary {
  background-color: var(--color-green-400);
  color: var(--color-white);
  border: 1px solid var(--color-green-400);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-green-400-hover);
  border-color: var(--color-green-400-hover);
}

.btn-secondary:active:not(:disabled) {
  background-color: var(--color-green-400-active);
  border-color: var(--color-green-400-active);
}

/* Outlined Button Variants */
.btn-outlined {
  background-color: transparent;
  color: var(--color-text-mid);
  border: 1px solid var(--color-green-500);
}

.btn-outlined:hover:not(:disabled) {
  background-color: var(--color-green-500-a05);
}

.btn-outlined:active:not(:disabled) {
  background-color: var(--color-green-500-a10);
}

.btn-outlined-filled {
  background-color: var(--color-green-200);
  color: var(--color-text-mid);
  border: 1px solid var(--color-green-500);
}

.btn-outlined-filled:hover:not(:disabled) {
  background-color: var(--color-green-200-hover);
}

.btn-outlined-filled:active:not(:disabled) {
  background-color: var(--color-green-200-active);
}

.btn-outlined-secondary {
  background-color: var(--color-green-400);
  color: var(--color-text-mid);
  border: 1px solid var(--color-green-500);
}

.btn-outlined-secondary:hover:not(:disabled) {
  background-color: var(--color-green-400-hover);
}

.btn-outlined-secondary:active:not(:disabled) {
  background-color: var(--color-green-400-active);
}

/* Icon Button Variants */
.btn-icon,
.btn-icon-sm {
  height: 40px;
  padding: 4px 20px;
  border-radius: var(--radius-btn-sm);
  background-color: transparent;
  color: var(--color-text-mid);
  border: 1px solid var(--color-text-mid);
}

.btn-icon img,
.btn-icon svg,
.btn-icon-sm img,
.btn-icon-sm svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-icon:hover:not(:disabled),
.btn-icon-sm:hover:not(:disabled) {
  background-color: var(--color-text-mid-a05);
}

.btn-icon:active:not(:disabled),
.btn-icon-sm:active:not(:disabled) {
  background-color: var(--color-text-mid-a10);
}

/* Disabled State */
.btn:disabled,
button:disabled,
.btn-icon:disabled,
.btn-icon-sm:disabled {
  background-color: var(--color-green-400);
  color: var(--color-white);
  border-color: var(--color-green-400);
  cursor: not-allowed;
  opacity: 1;
}

.btn-primary:disabled,
.btn-dark:disabled,
.btn-darker:disabled,
.btn-secondary:disabled {
  background-color: var(--color-green-400);
  color: var(--color-white);
  border-color: var(--color-green-400);
}

/* Button with Icon and Text */
.btn-with-icon,
.btn-icon-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-with-icon svg,
.btn-icon-text svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.flex-input-fixed
{
    flex: 0 0 416px !important;
}

    .flex-input-fixed .input-with-suffix {
        max-width: 416px;
    }

.flex-input-auto {
    flex: 1 1 !important;
}