:is(.input, .form-input, input, textarea) {
    --input-accent: var(--color-primary);
    --input-focus-ring: var(--color-background-primary-light);
    --input-border-color-focus: var(--input-accent);
}

.input--primary,
textarea.input--primary {
    --input-accent: var(--color-primary);
    --input-focus-ring: var(--color-background-primary-light);
    --input-border-color-focus: var(--input-accent);
}

.input--secondary,
textarea.input--secondary {
    --input-accent: var(--color-secondary);
    --input-focus-ring: rgba(255, 105, 46, 0.12);
    --input-border-color-focus: var(--input-accent);
}

:is(.input, .form-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], textarea) {
    display: flex;
    padding: var(--input-padding-y) var(--input-padding-x);
    align-items: center;
    gap: var(--spacing-md);
    flex: 1 0 0;
    align-self: stretch;
    border-radius: var(--radius-md);
    border: var(--input-border-width) solid var(--input-border-color);
    background: var(--input-bg-color);
    box-shadow: 0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    color: var(--input-text-color);
    font-family: var(--font-family-base);
    transition: var(--input-transition);
    width: 100%;
    outline: none;
}

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

:is(.input, .form-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], textarea):focus {
    border-color: var(--input-border-color-focus);
    box-shadow: 0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs), 0 0 0 3px var(--input-focus-ring);
}

:is(.input, .form-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], textarea):disabled {
    background-color: var(--input-bg-color-disabled);
    color: var(--input-text-color-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

.input.error,
.form-input.error {
    border-color: var(--input-border-color-error);
}

.input.error:focus,
.form-input.error:focus {
    border-color: var(--input-border-color-error);
    box-shadow: 0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs), 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.input.success,
.form-input.success {
    border-color: var(--input-border-color-success);
}

.input.success:focus,
.form-input.success:focus {
    border-color: var(--input-border-color-success);
    box-shadow: 0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs), 0 0 0 3px rgba(22, 163, 74, 0.1);
}

/* is-invalid class (same as .error) */
.input.is-invalid,
.form-input.is-invalid,
input.is-invalid,
textarea.is-invalid {
    border-color: var(--input-border-color-error);
    background-color: #FEF2F2;
}

.input.is-invalid:focus,
.form-input.is-invalid:focus,
input.is-invalid:focus,
textarea.is-invalid:focus {
    border-color: var(--input-border-color-error);
    box-shadow: 0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs), 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* CTA Form error display */
.cta-form-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-md);
    color: #991B1B;
    font-size: var(--font-size-sm);
    margin-bottom: 12px;
    text-align: left;
    line-height: 1.4;
}

.cta-form-error svg {
    flex-shrink: 0;
    color: #DC2626;
    margin-top: 1px;
}

/* CTA Form success display */
.cta-form-success {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background-color: #F0FDF4;
    border: 1px solid #86EFAC;
    border-radius: var(--radius-md);
    color: #166534;
    font-size: var(--font-size-sm);
    margin-bottom: 12px;
    text-align: left;
    line-height: 1.4;
}

.cta-form-success svg {
    flex-shrink: 0;
    color: #22C55E;
    margin-top: 1px;
}

.input--sm {
    --input-padding-y: 6px;
    --input-padding-x: 10px;
    --input-font-size: var(--font-size-sm);
}

.input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    --input-accent: var(--color-primary);
}

.input-group :is(.input, .form-input, input, textarea) {
    padding-left: 40px;
}

.input-group .input--lg {
    padding-left: 40px !important;
}

.input-group--icon-right :is(.input, .form-input, input) {
    padding-left: var(--input-padding-x);
    padding-right: 40px;
}

.input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-light);
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}

.input-icon--right {
    left: auto;
    right: 12px;
}

.input-group:focus-within .input-icon {
    color: var(--input-accent);
}

.input-group:hover .input-icon {
    color: var(--input-accent);
}

.input-group--secondary {
    --input-accent: var(--color-secondary);
    --input-focus-ring: rgba(255, 105, 46, 0.12);
}

:is(.select, select) {
    --input-accent: var(--color-primary);
    --input-focus-ring: var(--color-background-primary-light);
    --input-border-color-focus: var(--input-accent);
}

:is(.select, select) {
    display: flex;
    padding: var(--input-padding-y) var(--input-padding-x);
    align-items: center;
    gap: var(--spacing-md);
    flex: 1 0 0;
    align-self: stretch;
    border-radius: var(--radius-md);
    border: var(--input-border-width) solid var(--input-border-color);
    background: var(--input-bg-color);
    box-shadow: 0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    color: var(--input-text-color);
    font-family: var(--font-family-base);
    transition: var(--input-transition);
    width: 100%;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-right: 40px;
}

:is(.select, select):focus {
    border-color: var(--input-border-color-focus);
    box-shadow: 0 1px 2px 0 var(--Colors-Effects-Shadows-shadow-xs), 0 0 0 3px var(--input-focus-ring);
}

:is(.select, select):disabled {
    background-color: var(--input-bg-color-disabled);
    color: var(--input-text-color-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-dark);
    font-size: var(--font-size-sm);
}

textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .input-group--mobile-stack .input-icon {
        position: static;
        transform: none;
        margin-right: var(--spacing-xs);
    }

    .input-group--mobile-stack :is(.input, .form-input, input) {
        padding-left: var(--input-padding-x);
    }
}

.search-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z'/%3e%3c/svg%3e");
    background-position: left 12px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-left: 40px;
}

.btn--copy .fa-check,
.btn .fa-check {
    color: #4CAF50;
}

.btn--primary .fa-check,
.btn--secondary .fa-check {
    color: var(--color-white);
}

.tel-input,
.tel-input-container {
    --tel-accent: var(--color-primary);
    --tel-focus-ring: var(--color-background-primary-light);
    --tel-bg: var(--Colors-Background-bg-primary);
    --tel-border: var(--input-border-color);
    --tel-text: var(--color-text-dark);
    --tel-text-light: var(--color-text-light);
    --tel-light: #f8f9fa;
    position: relative;
    display: block;
    width: 100%;
}

.tel-input-group {
    display: flex;
    align-items: center;
    border: var(--input-border-width) solid var(--tel-border);
    border-radius: var(--radius-md);
    background-color: var(--tel-bg);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
}

.tel-input-group:focus-within {
    border-color: var(--tel-accent);
    box-shadow: 0 0 0 3px var(--tel-focus-ring);
}

.tel-input-trigger {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--input-padding-y) var(--input-padding-x);
    background-color: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    color: var(--tel-text);
    position: relative;
}

.tel-input-trigger::after {
    content: "";
    position: absolute;
    right: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--tel-border);
    opacity: 0.9;
}

.tel-input-group:focus-within .tel-input-trigger::after {
    background: var(--tel-accent);
}

.tel-input-flag {
    font-size: 1.25rem;
    line-height: 1;
}

.tel-input-arrow {
    width: 16px;
    height: 16px;
    color: var(--tel-text-light);
    transition: transform 0.2s ease;
    margin-left: var(--spacing-xs);
}

.tel-input-field {
    flex-grow: 1;
    padding: var(--input-padding-y) var(--input-padding-x);
    border: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: var(--input-font-size);
    font-family: var(--font-family-base);
    min-width: 0;
    background: transparent;
    color: var(--input-text-color);
}

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

.tel-input-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background-color: var(--tel-bg);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 8px 24px var(--Colors-Effects-Shadows-shadow-xs);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    border: var(--input-border-width) solid var(--tel-accent);
}

.tel-input-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tel-input-search-wrapper {
    padding: var(--spacing-sm);
    border-bottom: var(--input-border-width) solid var(--tel-border);
}

.tel-input-search {
    width: 100%;
    padding: 6px 10px;
    border: var(--input-border-width) solid var(--tel-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    box-sizing: border-box;
    color: var(--tel-text);
    background: var(--tel-bg);
}

.tel-input-options {
    list-style: none;
    padding: var(--spacing-xs);
    margin: 0;
    max-height: 250px;
    overflow-y: auto;
}

.tel-input-option {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.tel-input-option:hover {
    background-color: var(--tel-light);
}

.tel-input-option.is-selected {
    background-color: var(--tel-focus-ring);
    color: var(--tel-accent);
}

.tel-input-option-flag {
    font-size: 1rem;
    margin-right: var(--spacing-sm);
    color: var(--tel-text-light);
}

.tel-input-option-name {
    flex-grow: 1;
    color: var(--tel-text-light);
}

.tel-input-option-prefix {
    color: var(--tel-text-light);
}

.tel-input-option.is-hidden {
    display: none;
}

.tel-input--primary,
.tel-input-container.tel-input--primary {
    --tel-accent: var(--color-primary);
    --tel-focus-ring: var(--color-background-primary-light);
}

.tel-input--secondary,
.tel-input-container.tel-input--secondary {
    --tel-accent: var(--color-secondary);
    --tel-focus-ring: rgba(255, 105, 46, 0.12);
}

.tel-input-trigger.is-open .tel-input-arrow,
:is(.tel-input, .tel-input-container) .tel-input-arrow.is-open {
    transform: rotate(180deg);
}


/* --------------------------------------------------------------------------
   Custom Select (with icon)
   -------------------------------------------------------------------------- */
.custom-select {
    position: relative;
    --select-accent: rgb(189, 189, 189);
    --select-focus-ring: var(--color-background-primary-light);
}

.custom-select__trigger {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--input-padding-y) var(--input-padding-x);
    border: var(--input-border-width) solid var(--Colors-Border-border-primary);
    background-color: var(--Colors-Background-bg-primary);
    color: var(--input-text-color);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--input-transition);
}

.custom-select__trigger:hover,
.custom-select__trigger:focus {
    outline: none;
    border-color: var(--select-accent);
    box-shadow: 0 0 0 3px var(--select-focus-ring);
}

.custom-select__value {
    flex: 1 0 0;
    text-align: left;
    overflow: hidden;
    color: var(--input-text-color);
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.custom-select__value--muted {
    overflow: hidden;
    color: var(--Colors-Text-text-placeholder, #717680);
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    flex: 1 0 0;
}

.custom-select__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-text-light);
}

.custom-select__arrow {
    color: var(--color-text-light);
    transition: transform 0.2s ease;
    margin-left: var(--spacing-xs);
}

.custom-select__trigger.is-open .custom-select__arrow,
.custom-select .custom-select__arrow.is-open {
    transform: rotate(180deg);
}

.custom-select__dropdown {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: var(--Colors-Background-bg-primary);
    border: var(--input-border-width) solid var(--select-accent);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px var(--Colors-Effects-Shadows-shadow-xs);
    display: none;
    max-height: 240px;
    overflow-y: auto;
}

.custom-select__dropdown.is-open {
    display: block !important;
}

.custom-select__option {
    padding: 10px 12px;
    cursor: pointer;
    color: var(--color-text-dark);
    transition: background 0.15s ease, color 0.15s ease;
}

.custom-select__option:hover {
    background: var(--select-focus-ring);
}

.custom-select__option.is-selected {
    background: var(--select-focus-ring);
    color: var(--select-accent);
}

.custom-select--primary {
    --select-accent: var(--color-primary);
    --select-focus-ring: var(--color-background-primary-light);
}

.custom-select--secondary {
    --select-accent: var(--color-secondary);
    --select-focus-ring: rgba(255, 105, 46, 0.12);
}

/* --------------------------------------------------------------------------
   CTA Remember Checkbox
   -------------------------------------------------------------------------- */
.cta-remember-checkbox {
    user-select: none;
}

.cta-remember-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.cta-remember-checkbox__box {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    background: transparent;
    position: relative;
    transition: all 0.2s ease;
}

.cta-remember-checkbox__box::after {
    content: '';
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 2px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
}

.cta-remember-checkbox input[type="checkbox"]:checked + .cta-remember-checkbox__box {
    border-color: white;
    background: rgba(255, 255, 255, 0.2);
}

.cta-remember-checkbox input[type="checkbox"]:checked + .cta-remember-checkbox__box::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.cta-remember-checkbox:hover .cta-remember-checkbox__box {
    border-color: rgba(255, 255, 255, 0.9);
}

.cta-remember-checkbox input[type="checkbox"]:focus + .cta-remember-checkbox__box {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.cta-clear-info {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
}

.cta-clear-info:hover {
    color: white;
}