/* CONTACT SECTION */

/* Contact section frame */
.contact {
    position: relative;
    width: 80%; /* Aligns with the central column */
    height: calc(100vw * (2473 / 3200)); /* Maintains 3200x2473 ratio */
    background: url('../assets/images/contact/contact-section-frame/en/contact-section-en.png') no-repeat center center;
    background-size: contain;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: visible; /* Ensures decorations (pillars) are visible */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inner container with margins and spacing */
.contact-inner {
    position: relative;
    width: calc(100% - (100vw * (450 / 3200) * 2)); /* Total width minus margins */
    height: calc((100vw * (2473 / 3200)) - (100vw * (560 / 3200)) - (100vw * (400 / 3200)));
    margin: calc(100vw * (560 / 3200)) calc(100vw * (450 / 3200));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Decorative fire pillars */
.contact::before,
.contact::after {
    content: '';
    position: absolute;
    bottom: calc(100vw * (400 / 3200)); /* Align with bottom margin */
    width: calc(100vw * (288 / 3200));
    aspect-ratio: 288 / 867; /* Maintain fire pillar ratio */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.contact::before {
    left: calc(100vw * (450 / 3200)); /* Align with left margin */
    background-image: url('../assets/images/contact/pillar-left.gif');
}

.contact::after {
    right: calc(100vw * (450 / 3200)); /* Align with right margin */
    background-image: url('../assets/images/contact/pillar-right.gif');
}

/* Contact form styling */
.contact-inner form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Space between fields */
    box-sizing: border-box;
}

/* Form labels */
label {
    font-size: 1.2rem;
    color: #7c6536;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: '1651AlchemyW00Italic', serif;
}

/* Asterisk for required fields */
label .asterisk {
    width: calc(100vw * (20 / 3200));
    height: calc(100vw * (20 / 3200));
    background: url('../assets/images/contact/asterisk.png') no-repeat center center;
    background-size: contain;
    display: inline-block;
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* Input fields with transparent frames */
input, textarea {
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    color: #7c6536;
    font-family: 'NewTegomin', serif;
    box-sizing: border-box;
    resize: none; /* Prevent resizing for textareas */
    position: relative;
    z-index: 2;
}

/* Frames for inputs and textarea */
#name, #email {
    background-image: url('../assets/images/contact/littleframe.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: calc(100vw * (168 / 3200)); /* Maintain 1679x168 ratio */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#message {
    background-image: url('../assets/images/contact/bigframe.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: calc(100vw * (677 / 3200)); /* Maintain 1679x677 ratio */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Focus states affecting the frame */
input:focus-visible, textarea:focus-visible {
    outline: none;
}

#name:focus-within, #email:focus-within, #message:focus-within {
    box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.5);
}

/* Submit button */
button[type="submit"] {
    width: calc(100vw * (200 / 3200));
    height: calc(100vw * (60 / 3200));
    background: url('../assets/images/contact/send-message-button/en/default-en.png') no-repeat center center;
    background-size: contain;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

button[type="submit"]:hover {
    background: url('../assets/images/contact/send-message-button/en/active-en.png') no-repeat center center;
}

.warning-message {
    font-size: 0.9rem;
    color: #008080;
    text-align: center;
    opacity: 0;
    position: absolute;
    top: calc(100% + 10px); /* Position below the button */
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s ease;
    pointer-events: none; /* Avoid interfering with hover */
}

button[type="submit"]:hover + .warning-message {
    opacity: 1; /* Show message on hover */
}

/* Language-specific fonts */
.contact.en label, .contact.en input, .contact.en textarea {
    font-family: '1651AlchemyW00Italic', serif;
}
.contact.fr label, .contact.fr input, .contact.fr textarea,
.contact.de label, .contact.de input, .contact.de textarea {
    font-family: '1651AlchemyW00Italic', serif;
}
.contact.kr label, .contact.kr input, .contact.kr textarea {
    font-family: 'DXShingung', sans-serif;
}
.contact.jp label, .contact.jp input, .contact.jp textarea {
    font-family: 'NewTegomin', serif;
}
.contact.zh label, .contact.zh input, .contact.zh textarea {
    font-family: 'PangMenZhenDao', sans-serif;
}