/* ================================================================
   Multionic Child — components.css
   Botões, Cards, Formulários, Badges e componentes reutilizáveis
   ================================================================ */

/* ----------------------------------------------------------------
   BOTÕES
   ---------------------------------------------------------------- */

/* Base */
.mto-btn-primary,
.mto-btn-outline,
.mto-btn-gray {
    border-radius: 0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    font-family:     var(--mto-font);
    font-weight:     var(--mto-fw-bold);
    text-transform:  uppercase;
    letter-spacing:  0.02em;
    white-space:     nowrap;
    cursor:          pointer;
    border:          none;
    transition:      background var(--mto-transition),
                     color var(--mto-transition),
                     transform 0.15s ease,
                     box-shadow var(--mto-transition);
    text-decoration: none;
}

/* Primário — fundo azul claro */
.mto-btn-primary {
    background-color: var(--mto-secondary);
    color:            var(--mto-white);
    padding:          12px 24px;
    font-size:        var(--mto-fs-sm);
}
.mto-btn-primary:hover {
    background-color: var(--mto-hover);
    color:            var(--mto-white);
}
.mto-btn-primary:active { transform: scale(0.97); }

/* Outline — borda azul primária */
.mto-btn-outline {
    background-color: transparent;
    color:            var(--mto-primary);
    border:           2px solid var(--mto-primary);
    padding:          10px 22px;
    font-size:        var(--mto-fs-sm);
}
.mto-btn-outline:hover {
    background-color: var(--mto-primary);
    color:            var(--mto-white);
}

/* Outline sobre fundo escuro */
.mto-btn-outline-white {
    background-color: transparent;
    color:            var(--mto-white);
    border:           2px solid rgba(255,255,255,0.40);
    padding:          10px 22px;
    font-size:        var(--mto-fs-sm);
    font-weight:      var(--mto-fw-bold);
    text-transform:   uppercase;
    letter-spacing:   0.02em;
    display:          inline-flex;
    align-items:      center;
    gap:              8px;
    transition:       background var(--mto-transition), border-color var(--mto-transition);
    text-decoration:  none;
}
.mto-btn-outline-white:hover {
    background-color: rgba(255,255,255,0.10);
    border-color:     rgba(255,255,255,0.80);
    color:            var(--mto-white);
}

/* Gray */
.mto-btn-gray {
    background-color: var(--mto-bg-light);
    color:            var(--mto-primary);
    padding:          12px 24px;
    font-size:        var(--mto-fs-sm);
}
.mto-btn-gray:hover { background-color: #d1d5db; }

/* Tamanhos */
.mto-btn-sm  { padding: 8px 16px; font-size: var(--mto-fs-xs); }
.mto-btn-md  { padding: 12px 24px; font-size: var(--mto-fs-sm); }
.mto-btn-lg  { padding: 16px 40px; font-size: var(--mto-fs-sm); }
.mto-btn-full { width: 100%; }

/* ----------------------------------------------------------------
   CARDS
   ---------------------------------------------------------------- */

/* Card moderno com borda sutil */
.mto-card {
    background:    var(--mto-white);
    border:        1px solid var(--mto-border);
    border-radius: 0;
    box-shadow:  var(--mto-shadow-sm);
    transition:  box-shadow var(--mto-transition), transform var(--mto-transition);
    position:    relative;
    overflow:    hidden;
}
.mto-card:hover {
    box-shadow: var(--mto-shadow-lg);
    transform:  translateY(-2px);
}

/* Card com linha de destaque no hover (padrão do projeto) */
.mto-card--lined::after {
    content:    '';
    position:   absolute;
    left:       0;
    bottom:     0;
    width:      0;
    height:     2px;
    background: var(--mto-secondary);
    transition: width 0.5s ease;
}
.mto-card--lined:hover::after { width: 100%; }

/* Ícone do card */
.mto-card-icon {
    width:            48px;
    height:           48px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    background-color: rgba(109,176,223,0.10);
    color:            var(--mto-secondary);
    transition:       background var(--mto-transition), color var(--mto-transition);
    flex-shrink:      0;
}
.mto-card:hover .mto-card-icon,
.mto-card-icon:hover {
    background-color: var(--mto-secondary);
    color:            var(--mto-white);
}

/* Shine effect (hover — cards de números) */
.mto-card--shine {
    overflow: hidden;
}
.mto-card--shine::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       -100%;
    width:      75%;
    height:     100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.35), transparent);
    transform:  skewX(-25deg);
    transition: left 1s ease;
    pointer-events: none;
}
.mto-card--shine:hover::before { left: 150%; }

/* ----------------------------------------------------------------
   FORMULÁRIOS
   ---------------------------------------------------------------- */
.mto-form-label {
    display:        block;
    font-size:      var(--mto-fs-xxs);
    font-weight:    var(--mto-fw-bold);
    color:          var(--mto-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom:  4px;
    padding-left:   4px;
}

.mto-form-input,
.mto-form-select,
.mto-form-textarea {
    width:              100%;
    background-color:   #ffffff;
    border:             1px solid #e5e7eb; /* border-gray-200 */
    padding:            12px 16px !important; /* px-4 py-3 — !important para sobrescrever Bricks */
    color:              #000000;
    font-family:        var(--mto-font);
    font-size:          14px;              /* text-sm */
    line-height:        1.4;
    outline:            none;
    transition:         border-color var(--mto-transition);
    appearance:         none;
    -webkit-appearance: none;
    border-radius:      0;
    box-shadow:         none !important;
}

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

.mto-form-input:focus,
.mto-form-select:focus,
.mto-form-textarea:focus {
    border-color: var(--mto-secondary);
}

.mto-form-textarea {
    resize:      vertical;
    min-height:  128px; /* h-32 */
    line-height: 1.6;
}

.mto-form-group {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.mto-form-row {
    display: flex;
    gap:     16px;
}
.mto-form-row--2col > * { flex: 1 1 0; }

@media (max-width: 640px) {
    .mto-form-row--2col { flex-direction: column; }
}

.mto-form-lgpd {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    padding-block: 4px;
}

.mto-form-check {
    width:      16px;
    height:     16px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor:     pointer;
}

.mto-form-check-label {
    font-size:   var(--mto-fs-xs);
    color:       var(--mto-text-light);
    line-height: 1.5;
    cursor:      pointer;
}

.mto-form-feedback {
    font-size:   var(--mto-fs-sm);
    font-weight: var(--mto-fw-medium);
    padding:     8px 0;
    min-height:  24px;
}
.mto-form-feedback--success { color: #16a34a; }
.mto-form-feedback--error   { color: #dc2626; }

/* ----------------------------------------------------------------
   BADGES
   ---------------------------------------------------------------- */
.mto-badge {
    display:        inline-block;
    padding:        4px 12px;
    font-size:      var(--mto-fs-xxs);
    font-weight:    var(--mto-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background:     rgba(109,176,223,0.20);
    color:          var(--mto-primary-dark);
}

.mto-badge--white {
    background: rgba(255,255,255,0.15);
    color:      var(--mto-white);
}

/* ----------------------------------------------------------------
   ÍCONES — circular (rounded-full) e quadrado (rounded-none)
   ---------------------------------------------------------------- */

/* Círculo — Differentials: w-24 h-24 rounded-full bg-[#018E6D] */
.mto-icon-circle {
    width:            96px;
    height:           96px;
    border-radius:    50%;
    background-color: var(--mto-green);
    color:            var(--mto-white);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    box-shadow:       0 4px 12px rgba(0,0,0,0.15);
}
.mto-icon-circle svg { width: 40px; height: 40px; }

/* Quadrado pequeno — Challenges: w-12 h-12 bg-[#6DB0DF]/10 */
.mto-icon-square {
    width:            48px;
    height:           48px;
    border-radius:    0;
    background-color: rgba(109,176,223,0.10);
    color:            var(--mto-secondary);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    transition:       background-color var(--mto-transition), color var(--mto-transition);
}
.mto-icon-square svg { width: 24px; height: 24px; }
.mto-challenge-card:hover .mto-icon-square {
    background-color: var(--mto-secondary);
    color:            var(--mto-white);
}

/* Quadrado grande — Differentials: w-24 h-24 bg-[#018E6D] */
.mto-icon-square--lg {
    width:            96px;
    height:           96px;
    border-radius:    0;
    background-color: #018E6D;
    color:            var(--mto-white);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    box-shadow:       0 4px 12px rgba(0,0,0,0.15);
}
.mto-icon-square--lg svg { width: 40px; height: 40px; }

/* ----------------------------------------------------------------
   ACCORDION / FAQ
   ---------------------------------------------------------------- */
.mto-accordion-item {
    overflow: hidden;
}

.mto-accordion-trigger {
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 24px;
    text-align:      left;
    background:      none;
    border:          none;
    cursor:          pointer;
    font-family:     var(--mto-font);
    transition:      opacity var(--mto-transition);
}
.mto-accordion-trigger:hover { opacity: 0.92; }

.mto-accordion-trigger-icon {
    flex-shrink: 0;
    transition:  transform 0.25s ease;
}
.mto-accordion-trigger[aria-expanded="true"] .mto-accordion-trigger-icon {
    transform: rotate(180deg);
}

.mto-accordion-content {
    padding:     0 24px 20px;
    line-height: 1.65;
}
.mto-accordion-content[hidden] { display: none; }

/* ----------------------------------------------------------------
   DIVIDER DECORATIVO
   ---------------------------------------------------------------- */
.mto-divider {
    width:      80px;
    height:     4px;
    background: var(--mto-secondary);
}
.mto-divider--white { background: var(--mto-white); }
.mto-divider--center { margin-inline: auto; }