/* Zagran Distro - Contact Form Extension 
   Designed to work alongside zagran.css
*/

/* 1. Layout & Spacing */
.field-row {
    display: flex;
    gap: 40px;
    margin-bottom: 30px;
}

.field-row .form-group { 
    flex: 1; 
}

/* 2. Container Hover Effect */
.zagran-container {
    border: 1px solid #222;
    transition: border-color 0.4s ease;
}

.zagran-container:hover {
    border-color: var(--brand) !important;
}

/* 3. Individual Field Effects */
.input-field {
    width: 100%;
    padding: 18px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--paper);
	font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    border-radius: 0 !important;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* Field Hover/Fill Effects */
.input-field:hover {
    border-color: #555 !important;
}

.input-field:focus {
    border-color: var(--brand) !important;
    background: rgba(255, 255, 255, 0.02);
    outline: none;
}


/* 5. Mobile Responsiveness */
@media (max-width: 800px) {
    .field-row { 
        flex-direction: column; 
        gap: 30px; 
    }
    .submit-button { 
        width: 100%; 
    }
	
	.landing-wrap {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
	

}

/* Removes arrows from Chrome, Safari, Edge, and Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Removes arrows from Firefox */
input[type=number] {
  -moz-appearance: textfield;
}