/* ==========================================================
   Imàtica Suite — Multi-step Form  (frontend)
   Inspired by Irontech configurator aesthetic.
   ========================================================== */

/* ----------------------------------------------------------
   ROOT VARS — Elementor editor preview fallback
   (when .imf-wrapper ancestor is absent, e.g. inside editor canvas)
   ---------------------------------------------------------- */
:root {
    --imf-bg:        #ffffff;
    --imf-surface:   #f5f5f5;
    --imf-border:    #e0e0e0;
    --imf-accent:    #e94560;
    --imf-text:      #1a1a1a;
    --imf-muted:     #888888;
    --imf-radius:    10px;
    --imf-gap:       16px;
    --imf-btn-h:     46px;
    --imf-btn-bg:    #e94560;
    --imf-btn-color: #ffffff;
    --imf-btn-hover: #c73050;
}

/* ----------------------------------------------------------
   WRAPPER
   ---------------------------------------------------------- */
.imf-wrapper {
    --imf-bg:        #ffffff;
    --imf-surface:   #f5f5f5;
    --imf-border:    #e0e0e0;
    --imf-accent:    #e94560;
    --imf-text:      #1a1a1a;
    --imf-muted:     #888888;
    --imf-radius:    10px;
    --imf-gap:       16px;
    --imf-btn-h:     46px;
    --imf-btn-bg:    #e94560;
    --imf-btn-color: #ffffff;
    --imf-btn-hover: #c73050;

    background:    var( --imf-bg );
    color:         var( --imf-text );
    border-radius: var( --imf-radius );
    padding:       32px 28px;
    max-width:     100%;
    width:         100%;
    margin:        0;
    font-family:   inherit;
    box-sizing:    border-box;
}

/* Allow Elementor users to override with CSS variables */
.imf-error {
    color: #c00;
    font-style: italic;
}

/* ----------------------------------------------------------
   PROGRESS BAR
   ---------------------------------------------------------- */
.imf-progress {
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   32px;
}

.imf-prog-step {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             6px;
    opacity:         0.45;
    transition:      opacity .3s ease;
    min-width:       60px;
}

.imf-prog-step.active,
.imf-prog-step.completed {
    opacity: 1;
}

.imf-prog-num {
    width:           32px;
    height:          32px;
    border-radius:   50%;
    border:          2px solid var( --imf-muted );
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       14px;
    font-weight:     700;
    background:      transparent;
    transition:      background .3s ease, border-color .3s ease, color .3s ease;
}

.imf-prog-step.active .imf-prog-num {
    background:    var( --imf-accent );
    border-color:  var( --imf-accent );
    color:         #fff;
}

.imf-prog-step.completed .imf-prog-num {
    background:    var( --imf-muted );
    border-color:  var( --imf-muted );
    color:         #fff;
}

.imf-prog-label {
    font-size:  11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:      var( --imf-muted );
    text-align: center;
    transition: color .3s ease;
}

.imf-prog-step.active   .imf-prog-label,
.imf-prog-step.completed .imf-prog-label {
    color: var( --imf-text );
}

.imf-prog-line {
    flex:         1;
    height:       2px;
    background:   var( --imf-border );
    min-width:    20px;
    margin:       0 4px;
    margin-bottom: 18px;   /* align with circle center */
    transition:   background .3s ease;
}

.imf-prog-line.completed {
    background: var( --imf-accent );
}

/* ----------------------------------------------------------
   STEPS
   ---------------------------------------------------------- */
.imf-step {
    display:    none;
    animation:  imf-fade-in .26s ease;
}

.imf-step.active {
    display: block;
}

.imf-step.imf-exiting {
    animation: imf-fade-out .26s ease forwards;
}

/* ── Fade (default) ── */
@keyframes imf-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes imf-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-10px); }
}

/* ── Slide ── */
@keyframes imf-slide-in {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes imf-slide-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-40px); }
}
.imf-wrapper[data-transition="slide"] .imf-step.active {
    animation: imf-slide-in .28s ease;
}
.imf-wrapper[data-transition="slide"] .imf-step.imf-exiting {
    animation: imf-slide-out .28s ease forwards;
}

/* ── Dissolve (pixel blur) ── */
@keyframes imf-dissolve-in {
    0%   { opacity: 0; filter: blur(20px); transform: scale(1.015); }
    55%  { opacity: .9; filter: blur(3px); transform: scale(1.003); }
    100% { opacity: 1; filter: blur(0);   transform: scale(1); }
}
@keyframes imf-dissolve-out {
    0%   { opacity: 1; filter: blur(0);   transform: scale(1); }
    45%  { opacity: .9; filter: blur(3px); transform: scale(1.003); }
    100% { opacity: 0; filter: blur(20px); transform: scale(1.015); }
}
.imf-wrapper[data-transition="dissolve"] .imf-step.active {
    animation: imf-dissolve-in .35s ease;
}
.imf-wrapper[data-transition="dissolve"] .imf-step.imf-exiting {
    animation: imf-dissolve-out .35s ease forwards;
}

.imf-step-title {
    font-size:   1.15em;
    font-weight: 600;
    margin:      0 0 20px;
    color:       var( --imf-text );
}

/* ----------------------------------------------------------
   CARDS GRID
   ---------------------------------------------------------- */
.imf-cards-grid {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
    gap:                   var( --imfc-gap, var( --imf-gap ) );
}

.imf-cards-col-1 { grid-template-columns: 1fr; }
.imf-cards-col-2 { grid-template-columns: repeat( 2, 1fr ); }
.imf-cards-col-3 { grid-template-columns: repeat( 3, 1fr ); }
.imf-cards-col-4 { grid-template-columns: repeat( 4, 1fr ); }
.imf-cards-col-5 { grid-template-columns: repeat( 5, 1fr ); }
.imf-cards-col-6 { grid-template-columns: repeat( 6, 1fr ); }

@media ( max-width: 600px ) {
    .imf-cards-col-3,
    .imf-cards-col-4,
    .imf-cards-col-5,
    .imf-cards-col-6 { grid-template-columns: repeat( 2, 1fr ); }
}

.imf-card {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             var( --imfc-inner-gap, 10px );
    padding:         var( --imfc-padding, 20px 12px );
    background:      var( --imfc-bg, var( --imf-surface ) );
    border:          var( --imfc-border-width, 2px ) solid var( --imfc-border, var( --imf-border ) );
    border-radius:   var( --imfc-radius, var( --imf-radius ) );
    cursor:          pointer;
    text-align:      center;
    transition:      border-color .22s ease, background .22s ease, transform .18s ease;
    user-select:     none;
}

.imf-card:hover {
    border-color: var( --imfc-border-hover, var( --imf-accent ) );
    transform:    translateY(-2px);
}

.imf-card.selected {
    border-color: var( --imfc-border-selected, var( --imf-accent ) );
    background:   var( --imfc-bg-selected, rgba( 233, 69, 96, .12 ) );
}

/* .imf-card-image wraps the <img> from the Elementor widget */
.imf-card-image {
    width:         100%;
    max-height:    80px;
    overflow:      hidden;
    border-radius: 4px;
}

.imf-card-image img {
    width:      100%;
    height:     80px;
    object-fit: cover;
}

/* Legacy alias */
.imf-card-img {
    width:         100%;
    max-height:    80px;
    object-fit:    contain;
    border-radius: 4px;
}

.imf-card-icon {
    font-size:   var( --imfc-icon-size, 2.2em );
    line-height: 1;
}

.imf-card-label {
    font-size:   .9em;
    font-weight: 600;
    color:       var( --imfc-text, var( --imf-text ) );
}

.imf-card-desc {
    font-size: .78em;
    color:     var( --imfc-desc, var( --imf-muted ) );
}

/* ----------------------------------------------------------
   FIELDS
   ---------------------------------------------------------- */
.imf-fields {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.imf-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.imf-label {
    font-size:   .875em;
    font-weight: 600;
    color:       var( --imf-text );
}

.imf-required {
    color:      var( --imf-accent );
    margin-left: 2px;
}

.imf-input,
.imf-textarea,
.imf-select {
    background:    var( --imf-surface );
    border:        1.5px solid var( --imf-border );
    border-radius: 6px;
    color:         var( --imf-text );
    font-family:   inherit;
    font-size:     .95em;
    padding:       10px 14px;
    width:         100%;
    box-sizing:    border-box;
    transition:    border-color .2s ease;
    outline:       none;
    -webkit-appearance: none;
}

.imf-input:focus,
.imf-textarea:focus,
.imf-select:focus {
    border-color: var( --imf-accent );
}

.imf-input::placeholder,
.imf-textarea::placeholder {
    color: var( --imf-muted );
}

.imf-select option {
    background: var( --imf-surface );
    color:      var( --imf-text );
}

.imf-textarea {
    resize: vertical;
    min-height: 90px;
}

/* Checkbox field (from Elementor Checkbox widget) */
.imf-field-checkbox {
    flex-direction: row;
    align-items:    flex-start;
}

.imf-checkbox-label {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    cursor:      pointer;
    font-size:   .875em;
    color:       var( --imf-muted );
    line-height: 1.4;
}

.imf-checkbox-label a {
    color: var( --imf-accent );
}

.imf-checkbox {
    margin-top:  3px;
    accent-color: var( --imf-accent );
    flex-shrink: 0;
    cursor:      pointer;
}

/* Legacy aliases */
.imf-field-check {
    flex-direction: row;
    align-items:    flex-start;
    gap:            10px;
}

.imf-field-check label {
    font-size: .875em;
    color:     var( --imf-muted );
    cursor:    pointer;
}

.imf-field-check a {
    color: var( --imf-accent );
}

/* ----------------------------------------------------------
   SUCCESS
   ---------------------------------------------------------- */
.imf-success {
    display:         none;
    flex-direction:  column;
    align-items:     center;
    gap:             16px;
    padding:         40px 24px;
    text-align:      center;
    animation:       imf-fade-in .4s ease;
}

.imf-success-icon {
    font-size:   3em;
    color:       #00c853;
    line-height: 1;
}

.imf-success-text {
    font-size:   1.05em;
    color:       var( --imf-text );
    line-height: 1.5;
}

/* ----------------------------------------------------------
   NAVIGATION BUTTONS
   ---------------------------------------------------------- */
.imf-nav {
    display:         flex;
    gap:             12px;
    margin-top:      28px;
    justify-content: flex-end;
}

.imf-btn {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    height:        var( --imf-btn-h );
    padding:       0 24px;
    border-radius: 6px;
    font-family:   inherit;
    font-size:     .9em;
    font-weight:   600;
    cursor:        pointer;
    border:        none;
    transition:    background .22s ease, opacity .22s ease, transform .15s ease;
}

.imf-btn:active {
    transform: translateY(1px);
}

.imf-btn-prev {
    background: transparent;
    border:     1.5px solid var( --imf-border );
    color:      var( --imf-muted );
}

.imf-btn-prev:hover {
    border-color: var( --imf-accent );
    color:        var( --imf-text );
}

.imf-btn-next,
.imf-btn-submit {
    background: var( --imf-btn-bg,    var( --imf-accent ) );
    color:      var( --imf-btn-color, #fff );
}

.imf-btn-next:hover,
.imf-btn-submit:hover {
    background: var( --imf-btn-hover, #c73050 );
}

.imf-btn:disabled {
    opacity: 0.4;
    cursor:  not-allowed;
    transform: none;
}

/* ----------------------------------------------------------
   EQUAL HEIGHT STEPS
   ---------------------------------------------------------- */
.imf-wrapper[data-equal-height] .imf-steps-wrap {
    overflow:   hidden;
    position:   relative;
}

.imf-wrapper[data-equal-height] .imf-step.active {
    height:     100%;
    overflow-y: auto;
}

/* ----------------------------------------------------------
   RESUME STEP
   ---------------------------------------------------------- */
.imf-resume-table {
    width:           100%;
    border-collapse: collapse;
    margin:          0;
}

.imf-resume-table th,
.imf-resume-table td {
    padding:     10px 14px;
    text-align:  left;
    border-bottom: 1px solid var( --imf-border );
    font-size:   .9em;
    vertical-align: top;
}

.imf-resume-table th {
    font-weight: 600;
    color:       var( --imf-muted );
    width:       40%;
    white-space: nowrap;
}

.imf-resume-table td {
    color: var( --imf-text );
}

.imf-resume-table tr:last-child th,
.imf-resume-table tr:last-child td {
    border-bottom: none;
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */
@media ( max-width: 520px ) {
    .imf-wrapper {
        padding: 22px 16px;
    }

    .imf-cards-grid {
        grid-template-columns: repeat( auto-fill, minmax( 110px, 1fr ) );
    }

    .imf-nav {
        flex-wrap: wrap;
    }

    .imf-btn {
        flex: 1;
        min-width: 120px;
    }
}