/**
 * TrustWeb Builder — Form Widget CSS
 * @since 1.4.0
 */

/* ─── Layout ──────────────────────────────────────────────── */

.twb-form-wrap {
    position: relative;
}

.twb-form-inner {
    width: 100%;
}

.twb-form-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.twb-form-field {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Column widths */
.twb-form-field--w100 { width: 100%; }
.twb-form-field--w75  { width: calc(75% - 8px); }
.twb-form-field--w66  { width: calc(66.666% - 8px); }
.twb-form-field--w50  { width: calc(50% - 8px); }
.twb-form-field--w33  { width: calc(33.333% - 8px); }
.twb-form-field--w25  { width: calc(25% - 8px); }

@media (max-width: 767px) {
    .twb-form-field--w75,
    .twb-form-field--w66,
    .twb-form-field--w50,
    .twb-form-field--w33,
    .twb-form-field--w25 {
        width: 100%;
    }
}

/* ─── Label ───────────────────────────────────────────────── */

.twb-form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    line-height: 1.4;
}

.twb-form-required-mark {
    color: #ef4444;
    margin-left: 1px;
}

/* ─── Base Inputs ─────────────────────────────────────────── */

.twb-form-input,
.twb-form-textarea,
.twb-form-select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 15px;
    color: #1f2937;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 12px 16px;
    line-height: 1.5;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.twb-form-input::placeholder,
.twb-form-textarea::placeholder {
    color: #9ca3af;
}

.twb-form-textarea {
    resize: vertical;
    min-height: 100px;
}

@media (max-width: 1024px) {
    .twb-form-input,
    .twb-form-textarea,
    .twb-form-select {
        font-size: 16px;
    }
}

/* Select custom arrow */
.twb-form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3E%3Cpath d='M4.22 6.22a.75.75 0 011.06 0L8 8.94l2.72-2.72a.75.75 0 111.06 1.06l-3.25 3.25a.75.75 0 01-1.06 0L4.22 7.28a.75.75 0 010-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
}

/* ─── Focus Effects ───────────────────────────────────────── */

/* Default / border effect */
[data-focus-effect="border"] .twb-form-input:focus,
[data-focus-effect="border"] .twb-form-textarea:focus,
[data-focus-effect="border"] .twb-form-select:focus {
    border-color: #2563eb;
    box-shadow: none;
}

/* Shadow effect */
[data-focus-effect="shadow"] .twb-form-input:focus,
[data-focus-effect="shadow"] .twb-form-textarea:focus,
[data-focus-effect="shadow"] .twb-form-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

/* Lift effect */
[data-focus-effect="lift"] .twb-form-input:focus,
[data-focus-effect="lift"] .twb-form-textarea:focus,
[data-focus-effect="lift"] .twb-form-select:focus {
    border-color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.15);
}

/* Fill effect */
[data-focus-effect="fill"] .twb-form-input:focus,
[data-focus-effect="fill"] .twb-form-textarea:focus,
[data-focus-effect="fill"] .twb-form-select:focus {
    border-color: #2563eb;
    background-color: #eff6ff;
}

/* Error state */
.twb-form-input.twb-has-error,
.twb-form-textarea.twb-has-error,
.twb-form-select.twb-has-error {
    border-color: #ef4444;
    background-color: #fff5f5;
}

/* ─── Field Error ──────────────────────────────────────────── */

.twb-form-field-error {
    display: block;
    font-size: 13px;
    color: #dc2626;
    margin-top: 5px;
    min-height: 0;
    line-height: 1.4;
}

.twb-form-field-error:empty {
    display: none;
}

/* ─── Radio / Checkbox ────────────────────────────────────── */

.twb-form-radio-group,
.twb-form-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.twb-form-radio-label,
.twb-form-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 15px;
    color: #1f2937;
    user-select: none;
}

.twb-form-radio,
.twb-form-checkbox {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #2563eb;
    cursor: pointer;
    border-radius: 4px;
}

/* ─── Submit Row ──────────────────────────────────────────── */

.twb-form-row--submit {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* Optional: place submit button beside short forms (1–2 fields). */
.twb-form-inner.twb-form--submit-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: var(--twb-form-column-gap, 16px);
    padding-bottom: var(--twb-form-inline-error-space, 0px);
}

.twb-form-inner.twb-form--submit-inline .twb-form-fields {
    flex: 1 1 0;
    min-width: 0;
    column-gap: var(--twb-form-column-gap, 16px);
}

.twb-form-inner.twb-form--submit-inline .twb-form-row--submit {
    flex: 0 0 auto;
    margin-top: 0;
}

@media (min-width: 768px) {
    .twb-form-inner.twb-form--submit-inline .twb-form-field {
        position: relative;
    }

    .twb-form-inner.twb-form--submit-inline .twb-form-field-error:not(:empty) {
        position: absolute;
        top: calc(100% + 5px);
        right: 0;
        left: 0;
        margin-top: 0;
    }
}

.twb-form-inner.twb-form--submit-inline .twb-form-message {
    flex: 0 0 100%;
}

@media (max-width: 767px) {
    .twb-form-inner.twb-form--submit-inline {
        display: block;
        padding-bottom: 0;
    }

    .twb-form-inner.twb-form--submit-inline .twb-form-row--submit {
        margin-top: 10px;
    }
}

/* ─── Submit Button ───────────────────────────────────────── */

.twb-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background-color: #2563eb;
    border: none;
    border-radius: 8px;
    padding: 14px 32px;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.25s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    outline: none;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
}

.twb-form-submit:hover {
    background-color: #1d4ed8;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.twb-form-submit:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.twb-form-submit:disabled,
.twb-form-submit.twb-is-loading {
    opacity: 0.75;
    cursor: not-allowed;
    pointer-events: none;
}

.twb-form-submit-icon {
    font-size: 1em;
    line-height: 1;
}

/* Spinner khi loading */
.twb-form-submit.twb-is-loading .twb-form-submit-text::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: twb-spin 0.7s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

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

/* ── Submit Effects ─ */

/* Pulse */
.twb-form-submit--fx-pulse:hover {
    animation: twb-form-pulse 0.4s ease;
}

@keyframes twb-form-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* Bounce */
.twb-form-submit--fx-bounce:hover {
    animation: twb-bounce 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes twb-bounce {
    0%, 100% { transform: translateY(0); }
    30%       { transform: translateY(-6px); }
    60%       { transform: translateY(-3px); }
}

/* Slide fill — pseudo-element sweep */
.twb-form-submit--fx-slide {
    overflow: hidden;
}

.twb-form-submit--fx-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(-100%);
    transition: transform 0.35s ease;
    pointer-events: none;
}

.twb-form-submit--fx-slide:hover::before {
    transform: translateX(0);
}

/* Ripple */
.twb-form-ripple {
    display: block;
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    pointer-events: none;
}

.twb-form-ripple.twb-ripple--active {
    animation: twb-ripple 0.55s ease-out forwards;
}

@keyframes twb-ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ─── Messages ────────────────────────────────────────────── */

.twb-form-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid transparent;
    margin-top: 20px;
    animation: twb-msg-in 0.3s ease;
}

.twb-form-message[hidden] {
    display: none;
}

@keyframes twb-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.twb-form-message--success {
    color: #059669;
    background-color: #ecfdf5;
    border-color: #6ee7b7;
}

.twb-form-message--success::before {
    content: '✓';
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.twb-form-message--error {
    color: #dc2626;
    background-color: #fef2f2;
    border-color: #fca5a5;
}

.twb-form-message--error::before {
    content: '!';
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ─── Success: Replace mode ───────────────────────────────── */

[data-success-style="replace"] .twb-form-inner.twb-form--submitted {
    display: none;
}

.twb-form-success-replacement {
    text-align: center;
    padding: 40px 20px;
    animation: twb-msg-in 0.4s ease;
}

.twb-form-success-replacement__icon {
    color: #059669;
    margin-bottom: 16px;
}

.twb-form-success-replacement__text {
    font-size: 16px;
    color: #374151;
    line-height: 1.6;
}

/* ─── Success: Overlay mode ───────────────────────────────── */

.twb-form-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    backdrop-filter: blur(4px);
    animation: twb-overlay-in 0.3s ease;
}

.twb-form-overlay[hidden] {
    display: none;
}

@keyframes twb-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.twb-form-overlay-inner {
    background: #ffffff;
    border-radius: 16px;
    padding: 48px 40px;
    text-align: center;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2);
    animation: twb-overlay-card-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes twb-overlay-card-in {
    from { transform: scale(0.85) translateY(20px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

.twb-form-overlay-icon {
    color: #059669;
    margin-bottom: 20px;
}

.twb-form-overlay-message {
    font-size: 16px;
    color: #374151;
    line-height: 1.6;
    margin: 0 0 24px;
}

.twb-form-overlay-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.twb-form-overlay-close:hover {
    background: #e5e7eb;
}

/* ─── Form Animations ─────────────────────────────────────── */

.twb-form--anim-fade-in {
    animation: twb-fade-in 0.5s ease;
}

.twb-form--anim-slide-up {
    animation: twb-slide-up 0.5s ease;
}

.twb-form--anim-zoom-in {
    animation: twb-zoom-in 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes twb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes twb-slide-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes twb-zoom-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* ─── Honeypot (hidden) ───────────────────────────────────── */

.twb-form-hp {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
}

/* ─── Elementor editor placeholder ───────────────────────── */

.elementor-editor-active .twb-form-inner {
    min-height: 60px;
}