@charset "UTF-8";

/* ------------------------------------------------------------------
   single-formacao-financiada.css
   Estilos harmonizados com as áreas de formação (imagens 1 e 2)
   Usando as variáveis globais do tema
------------------------------------------------------------------ */

/* ========== VARIÁVEIS GLOBAIS (herdadas do tema) ========== */
/* As variáveis já estão definidas no :root global:
   --primary: #00467f
   --primary-dark: #002f57
   --accent: #faa635
   --accent-dark: #e8941e
   --text: #2d3748
   --text-muted: #6b7f93
   --border: #e4ebf2
   --white: #ffffff
   --bg-light: #f7f9fc
   --radius-sm: 8px
   --radius: 14px
   --radius-pill: 100px
   --shadow-sm: 0 2px 12px rgba(0,70,127,.07)
   --shadow-md: 0 8px 32px rgba(0,70,127,.13)
   --shadow-lg: 0 20px 60px rgba(0,70,127,.18)
   --transition: .28s cubic-bezier(.4,0,.2,1)
*/

/* ========== RESET / BASE ========== */
.ff-single {
    background: var(--bg-light);
    color: var(--text);
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
}

/* ========== HERO (inspirado nas áreas) ========== */
.ff-hero {
    position: relative;
    padding: 5rem 1.5rem 4rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

.ff-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.2;
}

.ff-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ff-hero__overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 20%, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
    z-index: -1;
}

.ff-hero__content {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.ff-hero__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.ff-tag {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--white);
    text-decoration: none;
    transition: var(--transition);
}

.ff-tag:hover {
    background: var(--accent);
    color: var(--white);
}

.ff-hero__title {
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.ff-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--accent);
    color: var(--white);
    padding: 0.25rem 0.9rem;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
}

.ff-badge--ufcd {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.3);
}

.ff-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.ff-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    background: transparent;
}

.ff-btn--primary {
    background: var(--accent);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(250,166,53,0.3);
}

.ff-btn--primary:hover {
    background: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(250,166,53,0.4);
}

.ff-btn--ghost {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(4px);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.3);
}

.ff-btn-brochura {
    background: var(--primary);
    backdrop-filter: blur(4px);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.3);
}

.ff-btn--ghost:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-2px);
}

.ff-btn--sm {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
}

/* ========== INFO-BAR ========== */
.ff-infobar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 10;
}

.ff-infobar__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
}

.ff-infobar__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-light);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    transition: var(--transition);
}

.ff-infobar__icon {
    color: var(--accent);
    display: inline-flex;
    align-items: center;
}

.ff-infobar__label {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 500;
}

.ff-infobar__value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
}

/* ========== LAYOUT PRINCIPAL ========== */
.ff-layout {
    max-width: 1440px;
    margin: 3rem auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2.5rem;
}

@media (max-width: 900px) {
    .ff-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ========== MAIN CONTENT ========== */
.ff-section {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.8rem 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.ff-section:hover {
    box-shadow: var(--shadow-md);
}

.ff-section__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--accent);
    display: inline-block;
}

/* WYSIWYG conteúdo */
.ff-wysiwyg {
    color: var(--text);
    line-height: 1.6;
}

.ff-wysiwyg img {
    max-width: 100%;
    display: flex;
}

.ff-wysiwyg p {
    margin-bottom: 1rem;
}

.ff-wysiwyg ul, .ff-wysiwyg ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.ff-wysiwyg li {
    margin-bottom: 0.5rem;
}

.ff-wysiwyg strong {
    color: var(--primary);
}

/* ========== EDIÇÕES CARDS (estilo grades das áreas) ========== */
.ff-edicoes {
    background: transparent;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ff-edicoes .ff-section__title {
    margin-bottom: 1.5rem;
}

.ff-edicoes {
    display: flex;
    gap: 1.5rem;
}

.ff-edicao-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.5rem;
    border: 1px solid var(--border);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

.ff-edicao-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--border);
}

.ff-edicao-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.ff-edicao-card__meta > div {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.ff-edicao-card__meta svg {
    color: var(--accent);
    flex-shrink: 0;
}

.ff-edicao-card__footer {
    margin-top: auto;
    display: flex;
    justify-content: flex-start;
}

.ff-edicoes__empty {
    background: var(--bg-light);
    padding: 2rem;
    text-align: center;
    border-radius: var(--radius);
    color: var(--text-muted);
}

.ff-edicoes__empty a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

/* ========== SIDEBAR (estilo card secundário) ========== */
.ff-sidebar {
    position: sticky;
    top: 2rem;
    align-self: start;
}

.ff-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.5rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}

.ff-card--inscricao {
    background: linear-gradient(145deg, var(--white) 0%, var(--bg-light) 100%);
    border-left: 4px solid var(--accent);
}

.ff-card__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ff-card__meta {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ff-card__meta li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.ff-card__meta svg {
    color: var(--accent);
}

.ff_card_wrapper {
    margin: 1rem 0;
}

.ff-card__form-note {
    font-size: 0.85rem;
    background: var(--bg-light);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    text-align: center;
    margin-top: 1rem;
}

.ff-card__form-note a {
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
}

/* ========== FORMULÁRIO (se existir) ========== */
.ff-card form {
    margin-top: 1rem;
}

.ff-card input, 
.ff-card textarea, 
.ff-card select {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-family: inherit;
    transition: var(--transition);
}

.ff-card input:focus, 
.ff-card textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(250,166,53,0.2);
}

.ff-card button[type="submit"] {
    background: var(--primary);
    color: var(--white);
    border: none;
    padding: 0.7rem 1.2rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.ff-card button[type="submit"]:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

/* ========== BADGES e elementos de destaque (inspirado na imagem 1) ========== */
.ff-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.ff-badge-sm {
    background: var(--bg-light);
    color: var(--primary);
    padding: 0.2rem 0.8rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
}

/* ========== AJUSTES RESPONSIVOS ========== */
@media (max-width: 640px) {
    .ff-hero {
        padding: 3rem 1rem;
    }
    
    .ff-section {
        padding: 1.25rem;
    }
    
    .ff-infobar__inner {
        justify-content: center;
        gap: 0.5rem;
    }
    
    .ff-infobar__item {
        width: 100%;
        justify-content: space-between;
    }
    
    .ff-edicoes {
        grid-template-columns: 1fr;
    }
    
    .ff-btn {
        padding: 0.6rem 1.25rem;
        font-size: 0.85rem;
    }
}

/* ========== ANIMAÇÕES LEVES ========== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ff-section, .ff-edicao-card, .ff-card {
    animation: fadeInUp 0.4s ease-out forwards;
}

/* ========== UTILITÁRIOS ========== */
.ff-text-center { text-align: center; }
.ff-mb-1 { margin-bottom: 0.5rem; }
.ff-mb-2 { margin-bottom: 1rem; }
.ff-mb-3 { margin-bottom: 1.5rem; }

.infobar {
    display: flex;
    flex-direction: column;
    gap:1rem;
}

/* ==================== PROGRAMAS ==================== */
/* Cards de programas harmonizados com o estilo das formações */

.programa-card {
    background: var(--white, #ffffff);
    border-radius: var(--radius, 14px);
    margin-bottom: 2rem;
    border: 1px solid var(--border, #e4ebf2);
    overflow: hidden;
    transition: var(--transition, .28s cubic-bezier(.4,0,.2,1));
    box-shadow: var(--shadow-sm, 0 2px 12px rgba(0,70,127,.07));
}

/* Header do programa */
.programa-header {
    background: linear-gradient(135deg, var(--primary, #00467f) 0%, var(--primary-dark, #002f57) 100%);
    padding: 1.5rem 2rem;
    border-bottom: 3px solid var(--accent, #faa635);
}

.programa-logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.programa-logo {
    max-height: 60px;
    width: auto;
    object-fit: contain;
    background:#fff;
    padding:8px;
    border-radius:8px;
}

.programa-logo--principal {
    max-height: 50px;
}

.programa-logo--ue {
    max-height: 40px;
    opacity: 0.9;
}

.programa-cofinanciamento {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.programa-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill, 100px);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.programa-badge--eu {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    color: var(--white, #ffffff);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.programa-badge--funding {
    background: #003399;
    color: white;
}

.programa-badge--nextgen {
    background: #ffd166;
    color: #1a2a3a;
}

.programa-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--white, #ffffff);
    margin: 0;
    line-height: 1.4;
}

/* Grid de informações */
.programa-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1.5rem 0;
    background: #fff;
    border-bottom: 1px solid var(--border, #e4ebf2);
}

.programa-info-card {
    width: 100%;
    background: var(--white, #ffffff);
    padding: 1.25rem;
    transition: var(--transition, .28s cubic-bezier(.4,0,.2,1));
    border-bottom: 1px solid var(--border, #e4ebf2);
}

.programa-info-card:last-child {
    border-bottom: 0px solid;
}

.programa-info-icon {
    width: 48px;
    height: 48px;
    background: rgba(250, 166, 53, 0.1);
    border-radius: var(--radius-sm, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--accent, #faa635);
}

.programa-info-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary, #00467f);
    margin: 0 0 0.75rem 0;
}

.programa-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.programa-info-list li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    color: var(--text, #2d3748);
    line-height: 1.5;
}

.programa-info-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--accent, #faa635);
    font-weight: bold;
    font-size: 1rem;
}

.programa-info-content p {
    margin: 0;
    font-size: 1rem;
    color: var(--text, #2d3748);
    line-height: 1.5;
}

.programa-info-content strong {
    color: var(--primary, #00467f);
}

/* Documentos */
.programa-docs {
    padding: 1.5rem 1rem;
    border-bottom: 1px solid var(--border, #e4ebf2);
}

.programa-docs-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.programa-docs-icon {
    width: 40px;
    height: 40px;
    background: rgba(250, 166, 53, 0.1);
    border-radius: var(--radius-sm, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent, #faa635);
}

.programa-docs-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary, #00467f);
    margin: 0;
}

.programa-docs-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.programa-doc-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-light, #f7f9fc);
    border-radius: var(--radius-sm, 8px);
    transition: var(--transition, .28s cubic-bezier(.4,0,.2,1));
}

.programa-doc-number {
    width: 32px;
    height: 32px;
    background: var(--accent, #faa635);
    color: var(--white, #ffffff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.programa-doc-content {
    flex: 1;
}

.programa-doc-content strong {
    display: block;
    color: var(--primary, #00467f);
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
}

.programa-doc-content p {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    color: var(--text-muted, #6b7f93);
    line-height: 1.5;
}

.programa-doc-note {
    font-style: italic;
    font-size: 0.875rem !important;
    color: var(--accent, #faa635) !important;
    margin-bottom: 0.75rem !important;
}

.programa-doc-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.programa-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--accent, #faa635);
    text-decoration: none;
    transition: var(--transition, .28s cubic-bezier(.4,0,.2,1));
}

.programa-doc-subsection {
    margin-top: 1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--border, #e4ebf2);
}

.programa-doc-subtitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--primary, #00467f);
    margin-bottom: 0.5rem;
}

.programa-doc-subtitle svg {
    color: var(--accent, #faa635);
}

.programa-docs-footnote {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    background: rgba(250, 166, 53, 0.05);
    border-radius: var(--radius-sm, 8px);
    font-size: 0.75rem;
    color: var(--text-muted, #6b7f93);
}

.programa-docs-footnote svg {
    color: var(--accent, #faa635);
    flex-shrink: 0;
}

/* Footer do programa */
.programa-footer {
    padding: 1.25rem 2rem;
    background: var(--bg-light, #f7f9fc);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.programa-footer-logos {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.programa-footer-logo {
    max-height: 35px;
    width: auto;
    object-fit: contain;
}

.programa-footer-badges {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .programa-header {
        padding: 1.25rem;
    }
    
    .programa-logos {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .programa-info-grid {
        padding: 0.5rem;
        gap: 1rem;
    }
    
    .programa-docs {
        padding: 1.25rem;
    }
    
    .programa-doc-item {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .programa-doc-number {
        align-self: flex-start;
    }
    
    .programa-footer {
        padding: 1.25rem;
        flex-direction: column;
        text-align: center;
    }
    
    .programa-footer-logos {
        justify-content: center;
    }
    
    .programa-footer-badges {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .programa-title {
        font-size: 1rem;
    }
    
    .programa-info-card {
        padding: 1rem;
    }
    
    .programa-info-icon {
        width: 40px;
        height: 40px;
    }
    
    .programa-info-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .programa-doc-subsection {
        padding-left: 0.75rem;
    }
}

/* ── Modal Overlay ── */
.gti-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 30, 60, 0.55);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.gti-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* ── Modal Box ── */
.gti-modal-box {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 520px;
    padding: 40px 44px 36px;
    position: relative;
    box-shadow: 0 20px 60px rgba(10, 30, 60, 0.18);
    transform: translateY(18px) scale(0.98);
    transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.gti-modal-overlay.is-open .gti-modal-box {
    transform: translateY(0) scale(1);
}

/* ── Close Button ── */
.gti-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    background: none;
    border: none;
    cursor: pointer;
    color: #8a9bb0;
    padding: 4px;
    line-height: 1;
    transition: color 0.15s;
}
.gti-modal-close:hover { color: #1a3a5c; }

/* ── Header ── */
.gti-modal-header {
    margin-bottom: 28px;
    border-bottom: 2px solid #e8711a;
    padding-bottom: 18px;
}
.gti-modal-tag {
    display: inline-block;
    background: #fff3e8;
    color: #e8711a;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.gti-modal-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1a3a5c;
    margin: 0 0 6px;
    line-height: 1.3;
}
.gti-modal-header p {
    font-size: 14px;
    color: #6b7f95;
    margin: 0;
}

/* ── Fields ── */
.gti-field-group {
    margin-bottom: 20px;
}
.gti-field-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1a3a5c;
    margin-bottom: 6px;
}
.gti-field-group label .required {
    color: #e8711a;
    margin-right: 2px;
}
.gti-field-group input {
    width: 100%;
    border: none;
    border-bottom: 2px solid #cdd8e3;
    border-radius: 0;
    padding: 10px 4px;
    font-size: 15px;
    color: #1a3a5c;
    background: transparent;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.gti-field-group input::placeholder { color: #aab8c5; }
.gti-field-group input:focus { border-color: #1a6496; }
.gti-field-group input.is-invalid { border-color: #d9534f; }

.gti-field-error {
    display: block;
    font-size: 12px;
    color: #d9534f;
    margin-top: 4px;
    min-height: 16px;
}

/* ── Footer / Submit ── */
.gti-modal-footer { margin-top: 28px; }

.gti-btn-submit {
    width: 100%;
    background: #e8711a;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s, transform 0.15s;
}
.gti-btn-submit:hover { background: #cf5f10; }
.gti-btn-submit:active { transform: scale(0.98); }
.gti-btn-submit:disabled { background: #aab8c5; cursor: not-allowed; }

@keyframes gti-spin { to { transform: rotate(360deg); } }
.spin { animation: gti-spin 0.8s linear infinite; }

/* ── Success State ── */
.gti-form-success {
    text-align: center;
    padding: 24px 0 8px;
    color: #1a6496;
}
.gti-form-success svg { color: #2ecc71; margin-bottom: 12px; }
.gti-form-success strong { display: block; font-size: 17px; margin-bottom: 6px; color: #1a3a5c; }
.gti-form-success p { font-size: 14px; color: #6b7f95; margin: 0; }

@media (max-width: 560px) {
    .gti-modal-box { padding: 28px 22px 24px; }
}