/*********** GENERAL ***********/
h2 {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

body {
    background-color: #f2f2f2;
    padding: 20px;
}

p {
    text-align: right;
    margin-right: 15px;
    margin-top: 0;
    font-size: 14px;
}

/*********** ALL INPUT ELEMENTS ***********/
label { 
    display: block; 
}

input, select, textarea {
    padding: 6px;
    border: 1px solid #bbb;
    border-radius: 4px;
}

/*********** MAIN CONTAINER ***********/
.container {  
    width: 90%;
    height: 50rem;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 40%;
    gap: 20px;
    grid-auto-flow: row;
    grid-template-areas:
        "sender recipient"
        "payment payment";
}

.sender,
.recipient,
.payment {
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    padding: 20px;
    background-color: #fafafa;
}

/*********** SENDER DETAILS ***********/
.sender { 
    grid-area: sender; 
}

#chooseImg {
    width: 95%;

    border: 2px dashed #ccc;
    border-radius: 6px;
    background-color: white;
}

.s_name {
    display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/*********** RECIPIENT DETAILS ***********/
.recipient {  
    grid-area: recipient; 
    
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 35% auto auto;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "header header"
        "item-0 item-1"
        "item-2 item-2"
        "item-3 item-3"
        "item-4 item-5";
}

.header { 
    grid-area: header; 
}

.item-0 { 
    grid-area: item-0; 
}

.item-1 { 
    grid-area: item-1; 
}

.item-2 { 
    grid-area: item-2; 

    textarea {
        overflow-y: scroll;
        resize: none; 
    }
}

.item-3 { 
    grid-area: item-3; 

    label:not(:first-child) { 
        display: inline; 
    }
}

.item-4 { 
    grid-area: item-4; 
}

.item-5 { 
    grid-area: item-5; 
}

/*********** Payment Section ***********/
.payment { 
    grid-area: payment; 

    display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.row {
    display: flex;
	flex-direction: row;

    div {
        margin: 30px;
    }
}

/*********** VALIDATION CUES ***********/
input {
    border-style: solid;
}

input:required:valid {
    border-color: green;
}

input:required:user-invalid {
    border-color: red;
}

/*********** INIDIVIDUAL INPUT CSS ***********/
label:has(+ input:required)::after {
  content: " *";
  color: rgb(166, 0, 0);
  font-weight: bold;
}

#file, #submit {
    border: none;
}

input[type="submit"] {
    border: none;
    background-color: #4a7cff;
    color: white;
    padding: 10px 18px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
}

input[type="submit"]:hover {
    background-color: #3866d6;
}

#message {
    width: 95%;
    height: 60px;
}

.terms {
    margin: 10px 0;
}