/* ============================================================
   Jashn Restaurant – Contact Form
   jashn-contact-form.css
   ============================================================ */

/* ── Wrapper ── */
.jashn-cf-wrap {
    width: 100%;
}

/* ── Form ── */
.jashn-cf-form {
    display: flex;
    flex-direction: column;
    background: transparent;
    width: 100%;
}

/* ============================================================
   FIELD GROUPS
   ============================================================ */

.jashn-field-group {
    position: relative;
    margin-bottom: 8px;
    width: 100%;
}

/* ── Text / Email inputs ──
   Transparent background, solid white bottom border only.
   Top padding (20px) creates the gap for the floated label above the typed text.
   All !important rules are needed to override Divi's aggressive input resets.
   ── */
.jashn-field-group input[type="text"],
.jashn-field-group input[type="email"] {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid #ffffff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    padding: 20px 0 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    transition: border-color 0.2s ease !important;
}

/* On focus, turn the bottom border gold */
.jashn-field-group input[type="text"]:focus,
.jashn-field-group input[type="email"]:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #C7961C !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff !important;
}

/* Autofill: keep transparent */
.jashn-field-group input:-webkit-autofill,
.jashn-field-group input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

/* ── Textarea ──
   Full solid white border on all sides. Same transparent background.
   ── */
.jashn-field-group.jashn-field-textarea {
    margin-bottom: 8px;
    margin-top: 6px;
}

.jashn-field-group textarea {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    padding: 24px 10px 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    resize: none !important;
    min-height: 130px !important;
    -webkit-appearance: none !important;
    transition: border-color 0.2s ease !important;
}

.jashn-field-group textarea:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #C7961C !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff !important;
}

/* ============================================================
   FLOATING LABELS
   How it works:
   - Every <input> and <textarea> has placeholder=" " (a single space).
   - The browser considers the placeholder "shown" until the user types,
     so :not(:placeholder-shown) fires as soon as there is any real value.
   - The <label> sits absolutely over the empty field and animates
     upward + turns gold on focus or when the field has a value.
   ============================================================ */

.jashn-field-group label {
    position: absolute;
    left: 0;
    top: 14px;
    font-size: 15px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease;
}

/* Textarea label sits inside the border */
.jashn-field-group.jashn-field-textarea label {
    left: 10px;
    top: 8px;
}

/* Float label UP and turn gold on focus or when field has a value */
.jashn-field-group input[type="text"]:focus ~ label,
.jashn-field-group input[type="text"]:not(:placeholder-shown) ~ label,
.jashn-field-group input[type="email"]:focus ~ label,
.jashn-field-group input[type="email"]:not(:placeholder-shown) ~ label {
    top: 2px;
    font-size: 11px;
    color: #C7961C;
}

.jashn-field-group textarea:focus ~ label,
.jashn-field-group textarea:not(:placeholder-shown) ~ label {
    top: 6px;
    left: 10px;
    font-size: 11px;
    color: #C7961C;
}

/* ============================================================
   VALIDATION
   ============================================================ */

.jashn-error {
    display: none;
    font-size: 11px;
    color: #e05555;
    margin-top: 3px;
}

.jashn-field-group.jashn-has-error .jashn-error {
    display: block;
}

.jashn-field-group.jashn-has-error input[type="email"] {
    border-bottom-color: #e05555 !important;
}

.jashn-field-group.jashn-has-error textarea {
    border-color: #e05555 !important;
}

/* ============================================================
   ATTACHMENT ROW
   ============================================================ */

.jashn-attach-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 14px 0 18px;
}

/* Visually hide the native file input */
.jashn-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Gold paperclip label */
.jashn-attach-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #C7961C;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.jashn-attach-label:hover { color: #e0c06a; }
.jashn-attach-label svg   { flex-shrink: 0; color: inherit; }

.jashn-attach-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    margin-left: auto;
}

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

.jashn-btn-send {
    display: block !important;
    width: 100% !important;
    padding: 16px !important;
    background: #C7961C !important;
    color: #111111 !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 0.2s ease, opacity 0.2s ease !important;
    margin-bottom: 10px !important;
    box-shadow: none !important;
}

.jashn-btn-send:hover                         { background: #e0c06a !important; }
.jashn-btn-send:active                        { opacity: 0.85 !important; }
.jashn-btn-send:disabled,
.jashn-btn-send.jashn-loading                 { opacity: 0.6 !important; cursor: not-allowed !important; }

.jashn-btn-send.jashn-loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-top-color: #111;
    border-radius: 50%;
    animation: jashn-spin 0.6s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

@keyframes jashn-spin { to { transform: rotate(360deg); } }

/* ============================================================
   RECAPTCHA NOTE
   ============================================================ */

.jashn-recaptcha-note {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
    line-height: 1.5;
}

.jashn-recaptcha-note a         { color: rgba(255, 255, 255, 0.5); text-decoration: underline; }
.jashn-recaptcha-note a:hover   { color: rgba(255, 255, 255, 0.75); }

/* ============================================================
   SUCCESS MESSAGE
   ============================================================ */

.jashn-success-msg {
    padding: 20px 0 4px;
    color: #C7961C;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    line-height: 1.5;
}

.jashn-success-msg[hidden] { display: none; }