@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --zapsign-blue: #00042D;
    --zapsign-hover-blue: #000624;
    --zapsign-light-blue: #E8F0FE;
    --zapsign-surface: #F8FAFC;
    --zapsign-text: #FFFFFF;
    --zapsign-button-bg: #D7E3F5;
}

body {
    background-color: var(--zapsign-blue);
    color: var(--zapsign-text);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.navbar {
    @apply bg-white/10 backdrop-blur-sm border-b border-white/10;
}

.navbar-brand {
    @apply text-white font-semibold;
}

.card {
    @apply bg-white/10 backdrop-blur-sm rounded-lg shadow-sm border border-white/10;
}

.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
}

.card-header h4 {
    color: var(--zapsign-text);
    font-weight: 600;
}

.upload-zone {
    @apply transition-all duration-200 ease-in-out;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    margin: 2px;
    padding: 2.5rem !important;
}

.upload-zone:hover, .upload-zone.dragover {
    @apply border-white/40 bg-white/10;
}

.btn-primary {
    @apply bg-white/20 text-white px-4 py-2 rounded-md shadow-sm hover:bg-white/30 transition-colors duration-150 ease-in-out;
}

.signature-valid {
    @apply bg-green-800 text-white p-4 rounded-md border border-green-700 mb-4;
}

.signature-invalid {
    @apply bg-red-800 text-white p-4 rounded-md border border-red-700 mb-4;
}

.signature-details {
    @apply bg-white/10 p-6 rounded-lg shadow-sm border border-white/20 mb-4 space-y-3;
}

.signature-details h5 {
    @apply text-lg font-semibold text-white mb-4;
}

.signature-details p {
    @apply text-sm text-white/80;
}

.signature-details strong {
    @apply font-medium text-white;
}

.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2;
}

.text-content {
    @apply text-white/80;
}

.heading-primary {
    @apply text-2xl font-semibold text-white;
}

.heading-secondary {
    @apply text-xl font-medium text-white/90;
}

.upload-icon {
    @apply text-white opacity-75 transition-opacity duration-150;
}

.upload-zone:hover .upload-icon {
    @apply opacity-100;
}

#language-selector {
    @apply appearance-none cursor-pointer;
    color: white !important;
}

#language-selector option {
    background-color: white !important;
    color: black !important;
    padding: 8px !important;
}

.verification-progress {
    @apply max-w-2xl mx-auto p-4 bg-white/10 backdrop-blur-sm rounded-lg shadow-sm border border-white/10;
}

.progress-steps {
    @apply flex items-center justify-between;
}

.step {
    @apply flex flex-col items-center;
    position: relative;
    flex: 1;
    min-width: 0;
}

.step-icon {
    @apply w-12 h-12 rounded-full bg-white/10 text-white/60 flex items-center justify-center mb-3 transition-all duration-300 ease-in-out;
    position: relative;
    z-index: 10;
}

.step.active .step-icon {
    @apply bg-white text-zapsign-blue;
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}

.step.completed .step-icon {
    @apply bg-green-500 text-white;
}

.step-label {
    @apply text-sm font-medium text-center transition-all duration-300 ease-in-out max-w-[120px] mx-auto;
    color: rgba(255, 255, 255, 0.7);
}

.step.active .step-label {
    @apply text-white font-semibold;
}

.step.completed .step-label {
    @apply text-green-400;
}

.step-connector {
    @apply absolute h-0.5 bg-white/20 top-6 -z-10 transition-all duration-500 ease-in-out;
    left: calc(50% + 24px);
    right: calc(-50% + 24px);
}

.step:last-child .step-connector {
    display: none;
}

.step.completed .step-connector {
    @apply bg-white;
}

.step.active .step-connector {
    @apply bg-zapsign-blue;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.step.active .step-icon {
    animation: pulse 2s infinite;
}

/* ICP-BRASIL Section Styles - baseado no arquivo SCSS original */
.container-doc-info {
    border: 1px solid #F0F0F0;
    overflow: auto;
    margin-top: 16px;
    background-color: white;
    border-radius: 8px;
}

.container-session-first .title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #EFF2F6;
    padding: 16px;
    max-height: 58px;
}

.container-session-first .title-container .title {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    color: #262626;
}

.container-ICP-BRASIL {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.container-law {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.container-law .title {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    color: #262626;
}

.container-law .subtitle {
    font-size: 14px;
    line-height: 1.4;
    color: #262626;
}

.container-more {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 8px;
    color: #1250B2;
    cursor: pointer;
}

.container-more .text {
    color: #1250B2;
    font-size: 14px;
}

.container-more svg {
    width: 20px;
    height: 20px;
    color: #1250B2;
}

.container-more:hover .text {
    text-decoration: underline;
}

.btn-download {
    background-color: var(--zapsign-button-bg) !important;
    color: #4d4d4d;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    display: inline-flex;
    align-items: center;
    transition: background 0.2s;
    cursor: pointer;
    text-decoration: none;
    min-width: 110px;
    text-align: left;
    vertical-align: middle;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-download svg {
    width: 1.1em;
    height: 1.1em;
    min-width: 1.1em;
    min-height: 1.1em;
    max-width: 1.1em;
    max-height: 1.1em;
}

.flex.flex-col.sm\:flex-row.gap-2 {
    gap: 2px;
}
.btn-download:disabled,
.btn-download[aria-disabled="true"] {
    color: #9CA3AF;
    background-color: #F3F4F6;
    cursor: not-allowed;
}
.btn-download:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: #c2d3f0;
}

.text-xs {
  font-size: 10px !important;
  line-height: 1.2;
}