/* ==========================================================================
   Modern form styling — Markkinointi Balanssi
   Dark, glassy forms that match the site theme. Scoped to .modern-form so it
   doesn't affect other .form-control usages (e.g. footer subscribe box).
   Used by: index.html (#quoteForm) and contact.html (#contactForm)
   ========================================================================== */

/* Glass panel around the whole form */
.modern-form {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 40px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.modern-form .form-group {
    margin-bottom: 20px;
}

/* Field + leading icon wrapper */
.modern-form .input-with-icon {
    position: relative;
}

/* Fixed top offset so the icon aligns to the first line of every field type
   (input, select and textarea) regardless of its height. */
.modern-form .input-with-icon > i {
    position: absolute;
    left: 18px;
    top: 18px;
    font-size: 20px;
    line-height: 1;
    color: var(--mainColor2);
    opacity: 0.7;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.25s ease, color 0.25s ease;
}

.modern-form .input-with-icon:focus-within > i {
    opacity: 1;
}

/* Inputs, select and textarea — override the light theme defaults.
   padding-left/height/font-size need !important to beat the theme's own
   non-important .form-control rules. */
.modern-form .form-control {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    color: var(--whiteColor) !important;
    height: 56px !important;
    padding-left: 52px !important;
    font-size: 16px !important;
    transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.modern-form .form-control:hover {
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.modern-form textarea.form-control {
    height: auto !important;
    min-height: 130px !important;
    padding-top: 16px !important;
    resize: vertical;
}

.modern-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.modern-form .form-control:focus {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--mainColor2) !important;
    box-shadow: 0 0 0 3px rgba(67, 165, 254, 0.18) !important;
}

/* Custom-styled select: hide native chevron, draw an accent one */
.modern-form select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 44px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2343A5FE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 14px;
}

/* Native dropdown list is rendered by the OS — keep it readable */
.modern-form select.form-control option {
    color: #0a0f24;
    background: #ffffff;
}

/* Full-width primary submit button */
.modern-form .default-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.modern-form #msgSubmit,
.modern-form #quoteMsgSubmit {
    margin-top: 18px;
}

/* Compact padding on small screens */
@media (max-width: 575px) {
    .modern-form {
        padding: 24px;
    }
}