/* ==========================================================================
   Abhi's Forms — frontend
   ========================================================================== */

.abhis-form {
    font-family: inherit;
    color: inherit;
    max-width: 100%;
}
.abhis-form * { box-sizing: border-box; }

.abhis-form .abhis-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px 20px;
}
.abhis-form .abhis-w-full   { grid-column: span 12; }
.abhis-form .abhis-w-half   { grid-column: span 6; }
.abhis-form .abhis-w-third  { grid-column: span 4; }
@media (max-width: 640px) {
    .abhis-form .abhis-w-half,
    .abhis-form .abhis-w-third { grid-column: span 12; }
}

.abhis-field { position: relative; min-width: 0; }
.abhis-field label {
    display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px;
    color: var(--ink-soft, #4a4a55);
}
.abhis-field .abhis-req { color: #c3284c; }
.abhis-field input[type="text"],
.abhis-field input[type="email"],
.abhis-field input[type="tel"],
.abhis-field input[type="url"],
.abhis-field input[type="number"],
.abhis-field input[type="date"],
.abhis-field input[type="time"],
.abhis-field input[type="datetime-local"],
.abhis-field select,
.abhis-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--line, #ececf0);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 15px;
    line-height: 1.45;
    color: inherit;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.abhis-field textarea { min-height: 120px; resize: vertical; }
.abhis-field input:focus,
.abhis-field select:focus,
.abhis-field textarea:focus {
    outline: 0;
    border-color: var(--derma-700, #c06c84);
    box-shadow: 0 0 0 4px rgba(192, 108, 132, .14);
}
.abhis-field.is-invalid input,
.abhis-field.is-invalid select,
.abhis-field.is-invalid textarea { border-color: #c3284c; }
.abhis-field .abhis-error {
    display: none; color: #c3284c; font-size: 13px; margin-top: 6px;
}
.abhis-field.is-invalid .abhis-error { display: block; }
.abhis-field .abhis-help { display: block; color: var(--muted, #787885); font-size: 13px; margin-top: 6px; }

.abhis-field[hidden] { display: none !important; }

/* Section heading */
.abhis-field--section h3 {
    font-size: 18px; font-weight: 600; margin: 16px 0 4px;
    padding-bottom: 10px; border-bottom: 1px solid var(--line, #ececf0);
    font-family: inherit;
}

/* Choices */
.abhis-choices { display: flex; flex-direction: column; gap: 10px; }
.abhis-choice {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--line, #ececf0);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
    font-size: 15px;
    margin: 0;
}
.abhis-choice:hover { border-color: var(--derma-300, #f2a8a8); background: var(--bg-alt, #f7f4f1); }
.abhis-choice input { margin: 3px 0 0 0; flex-shrink: 0; }
.abhis-choice--single { border: 0; padding: 0; background: transparent; }
.abhis-choice--single:hover { background: transparent; }

/* File */
.abhis-field--file input[type="file"] {
    padding: 10px;
    background: var(--bg-alt, #f7f4f1);
    border: 1.5px dashed var(--line, #ececf0);
    border-radius: 10px;
    width: 100%;
    font-size: 14px;
}

/* Signature */
.abhis-sig { position: relative; border: 1.5px solid var(--line, #ececf0); border-radius: 10px; background: #fff; }
.abhis-sig canvas { display: block; width: 100%; height: 160px; border-radius: 10px; touch-action: none; cursor: crosshair; }
.abhis-sig-clear { position: absolute; top: 8px; right: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12px; color: var(--ink-soft); cursor: pointer; }

/* Steps */
.abhis-steps {
    display: flex; list-style: none; padding: 0; margin: 0 0 28px; gap: 10px;
    counter-reset: step;
}
.abhis-step-item {
    flex: 1; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    background: var(--bg-alt, #f7f4f1); color: var(--muted, #787885);
    font-size: 13px; font-weight: 500;
    transition: background .3s ease, color .3s ease;
}
.abhis-step-item.is-active { background: var(--ink, #1a1a1f); color: #fff; }
.abhis-step-item.is-done   { background: var(--derma-700, #c06c84); color: #fff; }
.abhis-step-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 12px;
}
.abhis-step-item:not(.is-active):not(.is-done) .abhis-step-num { background: #fff; color: inherit; }

.abhis-step { border: 0; padding: 0; margin: 0; }
.abhis-step:not(.is-active) { display: none; }

/* Actions */
.abhis-form-actions {
    display: flex; gap: 12px; justify-content: flex-end; align-items: center;
    margin-top: 24px; flex-wrap: wrap;
}
.abhis-form-actions .abhis-prev { margin-right: auto; }

.abhis-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 24px; border-radius: 999px;
    font: inherit; font-weight: 500; font-size: 15px;
    border: 0; cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease;
}
.abhis-btn:hover { transform: translateY(-1px); }
.abhis-btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.abhis-btn-primary { background: var(--ink, #1a1a1f); color: #fff; }
.abhis-btn-primary:hover { background: var(--derma-700, #c06c84); }
.abhis-btn-ghost   { background: transparent; color: var(--ink-soft, #4a4a55); }
.abhis-btn-ghost:hover { color: var(--ink, #1a1a1f); background: var(--bg-alt, #f7f4f1); }

/* Message */
.abhis-form-message { margin-top: 20px; font-size: 15px; }
.abhis-form-message.is-success {
    padding: 16px 18px; border-radius: 10px;
    background: #e7f7ec; color: #1e5a2f; border: 1px solid #b6e2c2;
}
.abhis-form-message.is-error {
    padding: 16px 18px; border-radius: 10px;
    background: #fdecef; color: #7a1d35; border: 1px solid #f2b8c2;
}
.abhis-form.is-submitted .abhis-form-body,
.abhis-form.is-submitted .abhis-form-actions,
.abhis-form.is-submitted .abhis-steps { display: none; }

/* ==========================================================================
   Premium polish
   ========================================================================== */

/* Floating labels */
.abhis-field--text label,
.abhis-field--email label,
.abhis-field--tel label,
.abhis-field--url label,
.abhis-field--number label,
.abhis-field--textarea label,
.abhis-field--date label,
.abhis-field--time label,
.abhis-field--datetime label,
.abhis-field--select label {
    position: absolute;
    left: 16px; top: 36px;
    background: transparent;
    padding: 0 6px;
    color: var(--muted, #787885);
    font-weight: 400; font-size: 15px;
    pointer-events: none;
    transition: all .2s cubic-bezier(.22,.61,.36,1);
    z-index: 1;
    max-width: calc(100% - 32px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.abhis-field--text, .abhis-field--email, .abhis-field--tel, .abhis-field--url,
.abhis-field--number, .abhis-field--textarea, .abhis-field--date,
.abhis-field--time, .abhis-field--datetime, .abhis-field--select {
    padding-top: 24px;
}
.abhis-field--text label, .abhis-field--email label, .abhis-field--tel label,
.abhis-field--url label, .abhis-field--number label, .abhis-field--date label,
.abhis-field--time label, .abhis-field--datetime label, .abhis-field--select label {
    top: 40px;
}
.abhis-field--textarea label { top: 40px; }

/* lifted state — apply to all text-like + select fields by placeholder/focus */
.abhis-field--text.has-value label,        .abhis-field--text:focus-within label,
.abhis-field--email.has-value label,       .abhis-field--email:focus-within label,
.abhis-field--tel.has-value label,         .abhis-field--tel:focus-within label,
.abhis-field--url.has-value label,         .abhis-field--url:focus-within label,
.abhis-field--number.has-value label,      .abhis-field--number:focus-within label,
.abhis-field--textarea.has-value label,    .abhis-field--textarea:focus-within label,
.abhis-field--date.has-value label,        .abhis-field--date:focus-within label,
.abhis-field--time.has-value label,        .abhis-field--time:focus-within label,
.abhis-field--datetime.has-value label,    .abhis-field--datetime:focus-within label,
.abhis-field--select label { /* select always lifted because options */
    top: 0 !important;
    background: linear-gradient(180deg, transparent 40%, var(--white, #fff) 40%) !important;
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--derma-700, #c06c84);
    font-weight: 600;
}

/* Subtle input glow */
.abhis-field input:focus,
.abhis-field select:focus,
.abhis-field textarea:focus {
    box-shadow: 0 0 0 4px rgba(192, 108, 132, .12), 0 6px 20px rgba(192,108,132,.08);
}

/* Hide placeholder when the label acts as the placeholder (resting state).
   Show placeholder only when focused + still empty (helpful hint). */
.abhis-field--text input::placeholder,
.abhis-field--email input::placeholder,
.abhis-field--tel input::placeholder,
.abhis-field--url input::placeholder,
.abhis-field--number input::placeholder,
.abhis-field--textarea textarea::placeholder,
.abhis-field--date input::placeholder,
.abhis-field--time input::placeholder,
.abhis-field--datetime input::placeholder {
    color: transparent;
    opacity: 0;
    transition: color .2s ease, opacity .2s ease;
}
.abhis-field--text:focus-within input::placeholder,
.abhis-field--email:focus-within input::placeholder,
.abhis-field--tel:focus-within input::placeholder,
.abhis-field--url:focus-within input::placeholder,
.abhis-field--number:focus-within input::placeholder,
.abhis-field--textarea:focus-within textarea::placeholder,
.abhis-field--date:focus-within input::placeholder,
.abhis-field--time:focus-within input::placeholder,
.abhis-field--datetime:focus-within input::placeholder {
    color: var(--muted, #a0a0aa);
    opacity: 1;
}

/* Choice cards — richer interaction */
.abhis-choice {
    position: relative; overflow: hidden;
}
.abhis-choice::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(135deg, var(--derma-50, #fff5f1), transparent);
    opacity: 0; transition: opacity .3s ease;
}
.abhis-choice:has(input:checked) {
    border-color: var(--derma-700, #c06c84);
    background: var(--derma-50, #fff5f1);
    color: var(--derma-900, #6b2c43);
    font-weight: 500;
}
.abhis-choice:has(input:checked)::before { opacity: 1; }

/* Multi-step progress bar */
.abhis-steps {
    position: relative; padding-bottom: 20px;
}
.abhis-steps::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 10px;
    height: 4px; border-radius: 999px; background: var(--line, #ececf0);
}
.abhis-steps::after {
    content: ""; position: absolute; left: 0; bottom: 10px;
    width: calc((var(--abhis-step, 0) / var(--abhis-total, 1)) * 100%);
    height: 4px; border-radius: 999px;
    background: linear-gradient(90deg, var(--derma-700, #c06c84), var(--rheum-900, #1f3a5f));
    transition: width .5s cubic-bezier(.22,.61,.36,1);
}
.abhis-step-item {
    background: transparent !important;
    color: var(--muted, #787885) !important;
    font-weight: 500;
}
.abhis-step-item.is-active { color: var(--ink, #1a1a1f) !important; }
.abhis-step-item.is-done   { color: var(--derma-700, #c06c84) !important; }
.abhis-step-num {
    background: var(--white, #fff) !important;
    color: inherit !important;
    border: 2px solid var(--line, #ececf0);
    width: 30px !important; height: 30px !important;
    transition: all .3s ease;
}
.abhis-step-item.is-active .abhis-step-num { border-color: var(--ink, #1a1a1f); color: var(--ink) !important; }
.abhis-step-item.is-done .abhis-step-num {
    background: linear-gradient(135deg, var(--derma-700, #c06c84), var(--rheum-900, #1f3a5f)) !important;
    border-color: transparent; color: #fff !important;
}

/* Button shine */
.abhis-btn-primary {
    background: linear-gradient(135deg, var(--ink, #1a1a1f) 0%, #2d2a38 100%);
    box-shadow: 0 8px 24px rgba(26, 26, 31, .18);
}
.abhis-btn-primary:hover {
    background: linear-gradient(135deg, var(--derma-700, #c06c84) 0%, var(--rheum-900, #1f3a5f) 100%);
    box-shadow: 0 12px 28px rgba(192,108,132,.3);
}

/* File upload polish — card-style dropzone */
.abhis-field--file input[type="file"] {
    font-family: inherit;
    cursor: pointer;
    background: linear-gradient(180deg, var(--white, #fff), var(--bg-alt, #f7f4f1));
}
.abhis-field--file input[type="file"]:hover {
    border-color: var(--derma-700, #c06c84);
    background: var(--derma-50, #fff5f1);
}
.abhis-field--file input[type="file"]::file-selector-button {
    background: var(--ink, #1a1a1f); color: #fff; border: 0;
    padding: 8px 14px; border-radius: 999px; margin-right: 12px;
    font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background .25s ease;
}
.abhis-field--file input[type="file"]:hover::file-selector-button {
    background: var(--derma-700, #c06c84);
}

/* Signature polish */
.abhis-sig {
    background: repeating-linear-gradient(0deg, var(--bg-alt, #f7f4f1) 0, var(--bg-alt, #f7f4f1) 38px, var(--white, #fff) 38px, var(--white, #fff) 40px);
}

/* Success message polish */
.abhis-form-message.is-success {
    background: linear-gradient(135deg, #e7f7ec, #d4efde);
    border-color: #a7d8b6;
    border-radius: 14px;
    padding: 20px 24px;
    font-weight: 500;
    animation: abhisPop .4s cubic-bezier(.22,.61,.36,1);
}
@keyframes abhisPop {
    0%   { transform: translateY(10px); opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}