/* ===== JotX форма ===== */

.jot-form-wrap {
    background: var(--beige) !important;
    padding: 2rem 2.5rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.jot-form-wrap *,
.jot-form-wrap *::before,
.jot-form-wrap *::after {
    box-sizing: border-box !important;
}

.jot-form-wrap .jot-controls {
    margin-bottom: 1.25rem;
}

/* Сітка ім'я + email */
.jot-form-wrap .jot-controls:has(.jot-input-prepend) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
}

/* Всі інпути і textarea */
.jot-form-wrap .jot-controls input[type="text"],
.jot-form-wrap .jot-controls input[type="email"],
.jot-form-wrap .jot-controls textarea,
.jot-form-wrap input[type="text"],
.jot-form-wrap input[type="email"],
.jot-form-wrap textarea {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    border-bottom: 1px solid var(--dark-beige) !important;
    background: transparent !important;
    padding: 10px 0 !important;
    font-size: 16px !important;
    font-family: 'NT Somic', 'Raleway', sans-serif !important;
    color: var(--brown-dark) !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: border-color 0.2s;
    display: block;
}
			.jot-form-wrap {width:100%!important;}
.jot-form-wrap .jot-controls input:focus,
.jot-form-wrap .jot-controls textarea:focus,
.jot-form-wrap input:focus,
.jot-form-wrap textarea:focus {
    border-bottom-color: var(--brown-dark) !important;
    box-shadow: none !important;
    outline: none !important;
}

.jot-form-wrap .jot-controls textarea {
    resize: vertical !important;
    min-height: 130px !important;
}

/* Поле з іконкою */
.jot-form-wrap .jot-input-prepend {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    border: none !important;
    border-bottom: 1px solid var(--dark-beige) !important;
    background: transparent !important;
    padding: 0 0 8px 0 !important;
    margin-bottom: 1.25rem !important;
    width: 100% !important;
    transition: border-color 0.2s;
}
.jot-form-wrap .jot-input-prepend:focus-within {
    border-bottom-color: var(--brown-dark) !important;
}

/* Іконка — поруч з полем */
.jot-form-wrap .jot-add-on {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    color: var(--dark-beige) !important;
    font-size: 16px !important;
    margin-right: 8px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

/* Інпут всередині prepend */
.jot-form-wrap .jot-input-prepend input[type="text"] {
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-family: 'NT Somic', 'Raleway', sans-serif !important;
    color: var(--brown-dark) !important;
    height: auto !important;
    line-height: 1.4 !important;
}

/* Два поля в ряд */
.jot-form-wrap .jot-controls:has(.jot-input-prepend) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 2rem !important;
}

/* Заголовок — повна ширина */
.jot-form-wrap .jot-controls input[name="title"] {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    border-bottom: 1px solid var(--dark-beige) !important;
    background: transparent !important;
    padding: 8px 0 !important;
    font-size: 16px !important;
    font-family: 'NT Somic', 'Raleway', sans-serif !important;
    color: var(--brown-dark) !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: block !important;
}

/* Textarea — повна ширина */
.jot-form-wrap .jot-controls textarea {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    border-bottom: 1px solid var(--dark-beige) !important;
    background: transparent !important;
    padding: 8px 0 !important;
    font-size: 16px !important;
    font-family: 'NT Somic', 'Raleway', sans-serif !important;
    color: var(--brown-dark) !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    resize: vertical !important;
    min-height: 130px !important;
    display: block !important;
}

/* Плейсхолдери */
.jot-form-wrap input::placeholder,
.jot-form-wrap textarea::placeholder {
    color: var(--dark-beige) !important;
    font-size: 15px !important;
}

/* Кнопки */
.jot-form-wrap .jot-form-actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.jot-form-wrap .jot-btn.jot-btn-submit,
.jot-form-wrap .jot-btn-submit,
.jot-form-wrap button[type="submit"] {
    background: var(--brown-dark) !important;
    color: var(--white) !important;
    border: none !important;
    padding: 14px 40px !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    cursor: pointer;
    transition: opacity 0.2s;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.jot-form-wrap .jot-btn.jot-btn-submit:hover,
.jot-form-wrap .jot-btn-submit:hover,
.jot-form-wrap button[type="submit"]:hover {
    opacity: 0.85;
    background: var(--brown-dark) !important;
}

/* Чекбокс */
.jot-form-wrap .jot-checkbox {
    font-size: 14px !important;
    color: var(--light-grey) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}
.jot-form-wrap .jot-checkbox input[type="checkbox"] {
    accent-color: var(--brown-dark);
    width: 16px !important;
    height: 16px !important;
}

/* Антиспам — приховати */
.jot-form-ne2zry88,
.jot-form-e25tzee5 {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ===== Мобільна адаптивність ===== */
@media (max-width: 768px) {
    .jot-form-wrap {
        padding: 1.25rem !important;
    }
    .jot-form-wrap .jot-controls:has(.jot-input-prepend) {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .jot-form-wrap .jot-form-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .jot-form-wrap .jot-btn.jot-btn-submit,
    .jot-form-wrap .jot-btn-submit,
    .jot-form-wrap button[type="submit"] {
        width: 100% !important;
        text-align: center !important;
        padding: 14px 20px !important;
    }
    .jot-form-wrap .jot-reply-title {
        font-size: 18px !important;
        word-wrap: break-word !important;
    }
}

@media (max-width: 480px) {
    .jot-form-wrap {
    	width:100%;
        padding: 0.75rem !important;
    }
}

/* ===== Зірки у формі ===== */
.jot-star-rating { margin-bottom: 1.25rem; }

.jot-star-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--light-grey);
    display: block;
    margin-bottom: 10px;
}

.star-picker {
    display: flex;
    flex-direction: row-reverse;
    gap: 4px;
    width: fit-content;
}

.star-picker input[type="radio"] { display: none; }

.star-picker label {
    font-size: 32px;
    color: var(--dark-beige);
    cursor: pointer;
    transition: color 0.15s;
    line-height: 1;
}

/* hover — підсвічуємо поточну і всі перед нею */
.star-picker label:hover,
.star-picker label:hover ~ label,
.star-picker input:checked ~ label {
    color: #b07d2e;
}

/* ===== Зірки в коментарі ===== */
.jot-stars {
    font-size: 16px;
    color: #b07d2e;
    letter-spacing: 1px;
    margin-left: 4px;
}