@charset "utf-8";

/* ========================================
   BAGUS Framework 2.0
   Contact Form
======================================== */

/* Widescreen */
.full-width .widescreen{width:50vw;max-width:none;margin:75px 0 0 calc(50% - 25vw);padding:70px 40px;background:#f8f5f1;border-top:1px solid #ece6dd;border-bottom:1px solid #ece6dd}
.widescreen .contact-form{width:100%;max-width:1000px;margin:0 auto}

/* Form */
.form-group{margin-bottom:25px}
.form-group label,.form-label{font-size:.9rem;font-weight:500}
.form-group label{margin-bottom:15px;display:block;cursor:pointer}
.form-label{margin-bottom:10px;display:block}
.form-group input:not([type=radio]),.form-group select,.form-group textarea{width:100%;padding:10px;font-size:.9rem;background:#fff;border:1px solid #aaa}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#666;outline:none}
.form-group textarea{height:150px}
.form-group input[type=date]{width:auto}
.form-group .radio-label{margin-bottom:10px;padding-bottom:0;display:flex;cursor:pointer;align-items:center}
.form-group input[type=radio],.radio-label input{width:auto;margin-right:10px}
.form-group .red{font-weight:400}

/* Call to Action */
.full-width .widescreen .button{font-size:.95rem;font-weight:500;display:block;position:relative;padding:16px 0;color:#422119;background:#fff;border:1px solid #ddd;border-radius:10px;transition:border-color .35s,box-shadow .35s,transform .35s}
.full-width .widescreen .button:hover{border-color:#422119;transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08);opacity:1}
.full-width .widescreen .button button{width:100%;padding:0;color:inherit;font:inherit;cursor:pointer;background:0 0;border:0}

/* NEXT */
.full-width .widescreen .next:after{content:"";width:0;height:0;position:absolute;top:50%;right:20px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid;transition:transform .35s;transform:translateY(-50%)}
.full-width .widescreen .next:hover:after{transform:translate(5px,-50%)}

/* Payment Method (e-Collect) */
#CallTimeGroup{opacity:0;transition:grid-template-rows .6s var(--ease-main),opacity .5s ease;grid-template-rows:0fr;display:grid}
#CallTimeGroup .calltime-inner{min-height:0;overflow:hidden}
#CallTimeGroup.is-open{opacity:1;grid-template-rows:1fr}

/* ==================================================
   Confirmation Page
================================================== */

.confirm-wrap{max-width:700px;margin:80px auto;padding:30px 40px 40px;background:#f8f5f1;border:1px solid #ece6dd;border-radius:10px;width:calc(100% - 50px)}
.confirm-wrap .heading{width:100%;margin:0 0 5px 8px;font-size:1.5rem;font-weight:500;line-height:1.6;color:#422119}
.confirm-table{width:100%;font-size:.9rem;margin:35px auto 40px;border-collapse:collapse;background:#fff}
.confirm-table th,.confirm-table td{line-height:1.7;text-align:left;padding:15px;vertical-align:top;border:1px solid #ddd}
.confirm-table th{width:30%;font-weight:500;background:#f1ede8}

/* Confirmation Button */
.confirm-wrap form{margin-top:30px;display:flex;gap:20px}
.confirm-wrap .button{width:50%;margin:0;padding:0;font-size:.95rem;font-weight:500;position:relative;color:#422119;background:#fff;border:1px solid #ddd;border-radius:10px;transition:border-color .35s,box-shadow .35s,transform .35s}
.confirm-wrap .button:hover{border-color:#422119;transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.confirm-wrap .button button,.confirm-wrap .button a{width:100%;text-align:center;cursor:pointer;background:0 0;border:0;padding:16px 45px;text-decoration:none;display:block;color:inherit;font:inherit}
.confirm-wrap .thanks-button,.confirm-wrap .error-button{width:50%;margin:35px auto 0}

/* BACK */
.confirm-wrap .back:before{content:"";width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:10px solid;transition:transform .35s;position:absolute;top:50%;left:20px;transform:translateY(-50%)}
.confirm-wrap .back:hover:before{transform:translate(-5px,-50%)}

/* NEXT */
.confirm-wrap .next:after{content:"";width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid;transition:transform .35s;position:absolute;top:50%;right:20px;transform:translateY(-50%)}
.confirm-wrap .next:hover:after{transform:translate(5px,-50%)}

/* ==================================================
   Contact
================================================== */

#ContactInformation .narrow{margin-top:0}
.contact-form .inquiry-extra-control{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:12px;font:inherit;line-height:1.5;color:#454545;background:#fff;border:1px solid #d8d0c6;border-radius:4px}
.contact-form .inquiry-visit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.contact-form .inquiry-visit-grid .form-group{min-width:0}
.contact-form .inquiry-extra-control:focus-visible{outline:2px solid #8b6b00;outline-offset:2px}

#ContactForm .note-point,#ContactForm .note-support{margin:110px 0 0}
#ContactForm .note-point a,#ContactForm .note-support a{margin-left:.25em;margin-right:.25em;text-decoration:underline}
#ContactForm .note-point a:hover,#ContactForm .note-support a:hover{color:#d45b5b;text-decoration:none}

/* reCAPTCHA */
.grecaptcha-badge{opacity:0;animation:.6s forwards recaptcha-hide;bottom:75px!important}
body.return-show .grecaptcha-badge{animation:.8s .3s forwards recaptcha-show}
.grecaptcha-badge iframe{opacity:.6;transition:opacity .8s}
.grecaptcha-badge:hover iframe{opacity:1}
@keyframes recaptcha-show{0%{opacity:0}to{opacity:1}}
@keyframes recaptcha-hide{0%{opacity:1}to{opacity:0}}

/*     Tablet 1023px
----------------------------------------*/
@media screen and (max-width:1023px){

/* Widescreen */
.full-width .widescreen{width:calc(100% + 50px);margin:75px -25px 0;padding:70px 25px}

/* Confirmation Page */
.confirm-wrap{margin:25px auto;padding:30px 25px 28px}

}

/*     Smartphone 560px
----------------------------------------*/
@media screen and (max-width:560px){

/* Widescreen */
.full-width .widescreen{width:calc(100% + 40px);margin:75px -20px 0;padding:70px 20px}

/* Confirmation Page */
.confirm-wrap{width:calc(100% - 40px);margin:20px auto;padding:30px 20px 24px}
.confirm-wrap .heading{font-size:1.3rem}
.confirm-table th,.confirm-table td{padding:12px}
.confirm-wrap form{flex-direction:column;gap:15px}
.confirm-wrap .button{width:100%}

/* Contact */
.contact-form .inquiry-visit-grid{grid-template-columns:minmax(0,1fr);gap:0}
.confirm-table,.confirm-table tbody,.confirm-table tr,.confirm-table th,.confirm-table td{width:100%;display:block;box-sizing:border-box}
.confirm-table{border:1px solid #ddd}
.confirm-table th,.confirm-table td{padding:12px;border:0;word-break:normal;overflow-wrap:anywhere}
.confirm-table th{border-bottom:1px solid #ddd}
.confirm-table tr+tr{border-top:1px solid #ddd}

}

/*     Smartphone 360px
----------------------------------------*/
@media screen and (max-width:360px){

/* Confirmation Page */
.confirm-wrap{width:calc(100% - 40px);margin:20px auto;padding:30px 20px 24px}
.confirm-wrap .heading{font-size:1.1rem}

}