/* ============================= */
/* REQUEST PAGE - FULL CSS */
/* ============================= */

.request-page {
padding-top: 40px;
padding-bottom: 80px;
}

/* ============================= */
/* MAIN CONTAINER */
/* ============================= */

.request-container {
display: flex;
background-color: var(--card-bg);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
margin-top: 40px;
}

/* ============================= */
/* INFO SIDE (RIGHT) */
/* ============================= */

.info-side-container {
width: 450px;
background-color: rgba(232, 77, 57, 0.1);
padding: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.info-content {
text-align: right;
}

.info-title {
font-size: 2.8rem;
color: var(--primary-color);
margin-bottom: 20px;
line-height: 1.2;
}

.info-title span {
color: var(--text-main);
}

.info-desc {
font-size: 1.1rem;
color: var(--text-muted);
margin-bottom: 30px;
line-height: 1.8;
}

.badge-free {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: rgba(232, 77, 57, 0.05);
color: var(--primary-color);
padding: 8px 16px;
border-radius: 30px;
font-weight: 700;
}

/* ============================= */
/* IMAGE CARD */
/* ============================= */

.info-image-card {
margin-top: 40px;
border-radius: 20px;
overflow: hidden;
position: relative;
/*height: 250px;*/
}

.info-image-card img {
width: 100%;
height: 100%;
object-fit: cover;
}

.info-image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
color: white;
}

/* ============================= */
/* FORM SIDE */
/* ============================= */

.request-form-container {
flex: 1;
padding: 60px 40px;
}

.request-form .form-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}

.request-form .form-group {
flex: 1;
}

/* ============================= */
/* UPLOAD */
/* ============================= */

.upload-area {
border: 2px dashed var(--border-color);
border-radius: 12px;
padding: 40px 20px;
text-align: center;
background-color: #fcfcfc;
cursor: pointer;
transition: all 0.3s;
margin-bottom: 30px;
}

.upload-area:hover {
border-color: var(--primary-color);
background-color: rgba(197, 34, 34, 0.05);
}

.upload-icon {
font-size: 40px;
color: var(--primary-color);
margin-bottom: 15px;
}

.upload-text {
font-weight: 700;
margin-bottom: 5px;
}

.upload-hint {
font-size: 0.85rem;
color: var(--text-muted);
}

/* ============================= */
/* BUTTON */
/* ============================= */

.submit-btn {
width: 100%;
padding: 16px;
font-size: 1.1rem;
border-radius: 12px;
}

.form-terms {
text-align: center;
font-size: 0.85rem;
color: var(--text-muted);
margin-top: 15px;
}

/* ============================= */
/* TABLET */
/* ============================= */

@media (max-width: 992px) {

.request-container {
flex-direction: column;
}

.info-side-container {
width: 100%;
padding: 30px 20px;
}

.request-form-container {
padding: 40px 20px;
}

.request-form .form-row {
flex-direction: column;
gap: 10px;
}

/* 🔥 IMPORTANT: info فوق الفورم */
.info-side-container {
order: -1;
}

.request-form-container {
order: 1;
}

}

/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width: 576px) {

.request-page {
padding-top: 20px;
}

.request-container {
border-radius: 15px;
}

.info-side-container {
padding: 25px 15px;
}

.info-title {
font-size: 1.6rem;
}

.info-desc {
font-size: 0.95rem;
}

/*.info-image-card {*/
/*height: 180px;*/
/*}*/

.request-form-container {
padding: 30px 15px;
}

.upload-area {
padding: 30px 15px;
}

.upload-icon {
font-size: 30px;
}

.submit-btn {
font-size: 1rem;
}

}