/* Reset and Override Browser Defaults */
.sg-contact-form-container input[type=color],
.sg-contact-form-container input[type=date],
.sg-contact-form-container input[type=datetime-local],
.sg-contact-form-container input[type=datetime],
.sg-contact-form-container input[type=email],
.sg-contact-form-container input[type=month],
.sg-contact-form-container input[type=number],
.sg-contact-form-container input[type=password],
.sg-contact-form-container input[type=range],
.sg-contact-form-container input[type=search],
.sg-contact-form-container input[type=tel],
.sg-contact-form-container input[type=text],
.sg-contact-form-container input[type=time],
.sg-contact-form-container input[type=url],
.sg-contact-form-container input[type=week],
.sg-contact-form-container textarea {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #000 !important;
    font-family: "Satoshi Variable", Sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    outline: none !important;
}

/* Override browser autofill styles */
.sg-contact-form-container input:-webkit-autofill,
.sg-contact-form-container input:-webkit-autofill:hover, 
.sg-contact-form-container input:-webkit-autofill:focus,
.sg-contact-form-container input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: #000 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Form Container */
.sg-contact-form-container {
    font-family: "Satoshi Variable", Sans-serif;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.sg-contact-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

/* Form Rows */
.sg-contact-form-row {
    display: flex;
    flex-direction: row;
    gap: 24px;
    width: 100%;
}

@media (max-width: 768px) {
    .sg-contact-form-row {
        flex-direction: column;
    }
}

/* Input Wraps */
.sg-contact-form-input-wrap,
.sg-contact-form-textarea-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
}

.sg-contact-form-textarea-wrap {
    height: 187px;
}

/* Input Field */
.sg-input-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
    width: 100%;
    position: relative;
}

.sg-input-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Input Labels */
.sg-input-label {
    font-family: "Satoshi Variable", Sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #000;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: transform 0.2s ease, font-size 0.2s ease, opacity 0.2s ease;
    transform-origin: left top;
    z-index: 1;
}

/* Inputs */
.sg-input {
    width: 100%;
    font-family: "Satoshi Variable", Sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #000;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
    z-index: 2;
    position: relative;
}

.sg-textarea {
    height: 120px;
    resize: none;
    margin-top: 24px !important; /* Override for textareas to make room for label */
}

/* Input States - Default */
/* This is the initial state, label is shown as a placeholder with opacity 0.5 */

/* Input States - Filled */
.sg-input-field.filled .sg-input-label {
    transform: translateY(-20px) scale(0.75);
    opacity: 0.7;
}

/* Input States - Focus/Active */
.sg-input-field.focused .sg-input-label {
    transform: translateY(-20px) scale(0.75);
    opacity: 1;
}

.sg-input-field.focused .sg-input-line {
    background-color: #000;
    height: 1px;
}

/* Input States - Error */
.sg-input-field.error .sg-input-line {
    background-color: #E11D48;
    height: 1px;
}

.sg-input-field.error .sg-input-label {
    color: #E11D48;
    opacity: 1;
}

.sg-input-field.error.filled .sg-input-label {
    transform: translateY(-20px) scale(0.75);
    opacity: 1;
}

/* Input States - Disabled */
.sg-input-field.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.sg-input-field.disabled .sg-input,
.sg-input-field.disabled .sg-input-label {
    pointer-events: none;
}

.sg-input-field.disabled .sg-input-line {
    background-color: #000;
    opacity: 0.5;
}

/* Input Line */
.sg-input-line {
    height: 1px;
    width: 100%;
    background-color: #E8E5DC;
    margin-top: 4px;
    transition: background-color 0.2s ease, height 0.2s ease;
}

/* Error Message */
.sg-input-error {
    color: #E11D48;
    font-family: "Satoshi Variable", Sans-serif;
    font-size: 14px;
    line-height: 1.35;
    margin-top: 4px;
    min-height: 19px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

/* Active error message should be fully visible */
.sg-input-field.error .sg-input-error {
    opacity: 0.5;
}

/* File Upload */
.sg-contact-form-file-upload-wrap, #sg-files-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}

/* File Upload - Base */
.sg-file-upload-base,
.sg-additional-file-upload {
    background: #EEEBE1;
    border: 1px solid #EEEBE1;
    border-radius: 4px;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    width: 100%;
}

/* File Upload - Hover state */
.sg-file-upload-base:hover,
.sg-file-upload-base.dragover,
.sg-additional-file-upload:hover,
.sg-additional-file-upload.dragover {
    background-color: #FAF8EF;
    border-color: #EEEBE1;
}

.sg-file-upload-base:hover .sg-file-upload-icon img,
.sg-file-upload-base.dragover .sg-file-upload-icon img,
.sg-additional-file-upload:hover .sg-file-upload-icon img,
.sg-additional-file-upload.dragover .sg-file-upload-icon img {
    opacity: 1;
}

.sg-file-upload-icon img {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.sg-file-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 90%;
}

.sg-file-upload-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.sg-file-upload-action {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 4px;
    width: 100%;
}

.sg-file-upload-button,
.sg-additional-file-upload-button {
    font-family: "Satoshi Variable", Sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.43;
    color: #000;
    cursor: pointer;
    display: inline-block;
}

.sg-file-upload-action span {
    font-family: "Satoshi Variable", Sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.43;
    color: #667085;
}

.sg-file-upload-helper {
    font-family: "Satoshi Variable", Sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5;
    color: #667085;
    text-align: center;
}

.sg-file-input, 
.sg-additional-file-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

/* File Preview */
.sg-file-preview-container {
    background-color: #FAF8EF;
    border: 1px solid #EEEBE1;
    border-radius: 4px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    width: 100%;
    position: relative;
    transition: background-color 0.3s ease;
}

.sg-file-preview-content {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
}

.sg-file-preview-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sg-file-preview-icon img {
    width: 16px;
    height: 16px;
}

.sg-file-preview-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.sg-file-preview-details > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sg-file-preview-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0; /* Allows text-overflow to work inside flex container */
}

.sg-file-preview-name {
    font-family: "Satoshi Variable", Sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.43;
    color: #7D7C78;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.sg-file-preview-size {
    font-family: "Satoshi Variable", Sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.43;
    color: #667085;
}

.sg-file-preview-progress {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.sg-file-preview-progress-bar {
    position: relative;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    flex-grow: 1;
}

.sg-file-preview-progress-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #EAECF0;
    border-radius: 4px;
}

.sg-file-preview-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #000;
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
}

.sg-file-preview-percentage {
    font-family: "Satoshi Variable", Sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.43;
    color: #7D7C78;
    white-space: nowrap;
}

.sg-file-preview-cancel {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background-color: transparent !important;
    z-index: 5;
    flex-shrink: 0;
}

.sg-file-preview-cancel img {
    width: 20px;
    height: 20px;
}

/* Upload Complete State */
.sg-file-preview-container.complete {
    background-color: #FAF8EF !important;
    border-color: #EEEBE1;
}

.sg-file-preview-container.complete .sg-file-preview-progress-bg {
    background-color: #EAECF0;
}

/* Submit Button */
.sg-contact-form-submit-wrap {
    display: flex;
    align-self: flex-start;
}

.sg-contact-form-container .icon-container {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.sg-contact-form-submit-text {
    font-family: "Satoshi Variable", Sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #000;
}

/* Notifications */
.sg-contact-form-notification {
    position: fixed;
    top: 102px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2B3530;
    border-radius: 4px;
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    animation: fadeInDown 0.5s forwards;
}

.sg-notification-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sg-notification-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sg-notification-text {
    font-family: "Satoshi Variable", Sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #FFF;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
}

/* reCAPTCHA Styles */
.sg-contact-form-recaptcha-wrap {
    margin-bottom: 30px;
}

.sg-contact-form-recaptcha-wrap .g-recaptcha {
    transform-origin: left top;
    margin-top: 10px;
}

/* Responsive reCAPTCHA */
@media screen and (max-width: 400px) {
    .sg-contact-form-recaptcha-wrap .g-recaptcha {
        transform: scale(0.85);
    }
} 

/* Custom Select Styles */
.sg-select-arrow {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    transform-origin: center;
    transition: transform 0.3s ease;
}

.sg-select-field.focused .sg-select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.sg-select-options {
    position: absolute;
    top: calc(100% + 19px);
    left: 0;
    width: 100%;
    background-color: #FFFFF9;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0px 3px 7px 0px rgba(174, 164, 111, 0.1),
                0px 14px 14px 0px rgba(174, 164, 111, 0.09),
                0px 31px 18px 0px rgba(174, 164, 111, 0.05),
                0px 54px 22px 0px rgba(174, 164, 111, 0.01),
                0px 85px 24px 0px rgba(174, 164, 111, 0);
    padding: 12px;
}

.sg-select-field.focused .sg-select-options {
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
    overflow-y: auto;
}

.sg-select-option {
    padding: 8px 0;
    font-family: "Satoshi", Sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: color 0.2s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sg-select-option:last-child {
    border-bottom: none;
    padding-top: 8px;
    padding-bottom: 0;
}

.sg-select-option:hover {
    color: #000000;
}

.sg-select-display {
    cursor: pointer;
    background-color: transparent !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.sg-select-display::-ms-expand {
    display: none;
}

.sg-input-field.sg-select-field .sg-input-container {
    position: relative;
}

.sg-select-option.active,
.sg-select-option:hover {
    color: #000000;
    border-bottom-color: #000000;
}

@media screen and (max-width: 1024px) {
    .sg-contact-form {
        gap: 16px;
    }
    .sg-contact-form-row {
        gap: 16px;
    }
}