body { background: #f8fafc; }

.criar-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.top-bar {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 50;
}

.content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.form-col { width: 100%; }

.cwd-section {
    max-width: 700px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 1.5rem;
    width: 100%;
}

textarea.input-field {
    padding-left: 1rem;
    resize: none;
}

@keyframes stepEnterRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes stepEnterLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes stepExitLeft {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-40px); }
}

@keyframes stepExitRight {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(40px); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-brand {
    0%, 100% { box-shadow: 0 0 0 0 rgba(208, 20, 70, 0.4); }
    50%       { box-shadow: 0 0 0 8px rgba(208, 20, 70, 0); }
}

.step-section {
    display: none;
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: both;
}

.step-section.active { display: block; }
.step-section.anim-enter-right { animation-name: stepEnterRight; }
.step-section.anim-enter-left  { animation-name: stepEnterLeft; }
.step-section.anim-exit-left   { animation-name: stepExitLeft; pointer-events: none; }
.step-section.anim-exit-right  { animation-name: stepExitRight; pointer-events: none; }

.split-step {
    display: none;
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: both;
}

.split-step.active {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2rem;
    align-items: start;
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    width: 100%;
}

.split-step.anim-enter-right { animation-name: stepEnterRight; }
.split-step.anim-enter-left  { animation-name: stepEnterLeft; }
.split-step.anim-exit-left   { animation-name: stepExitLeft; pointer-events: none; }
.split-step.anim-exit-right  { animation-name: stepExitRight; pointer-events: none; }

.sub-content-wrap {
    animation: fadeInUp 280ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.type-card, .type-tag, .btn-primary, .btn-secondary {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.type-card:active { transform: scale(0.98); }
.type-tag:active  { transform: scale(0.95); }

.counter-box .value {
    transition: all 0.15s ease;
}

.plan-card.selected {
    animation: pulse-brand 1.2s ease-out;
}

.qr-estilo-opcao {
    border: 2px solid #e5e7eb;
    border-radius: 0.875rem;
    padding: 1rem 0.75rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    transition: border-color 0.18s, box-shadow 0.18s;
    background: #fafafa;
    text-align: center;
}
.qr-estilo-opcao:hover { border-color: #d01446; }
.qr-estilo-opcao.selected { border-color: #d01446; background: #fff; box-shadow: 0 0 0 3px rgba(208,20,70,0.1); }

.qr-frame-preview {
    width: 100px; height: 100px;
    background: #fff;
    border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    border: 1.5px solid #e5e7eb;
}
.qr-frame-img {
    width: 72px; height: 72px;
    object-fit: contain;
    position: relative;
    z-index: 1;
}
.qr-frame-deco {
    position: absolute; inset: 0;
    z-index: 2;
    pointer-events: none;
}
.qr-frame-coracao {
    border: 2.5px solid #f9a8d4;
    background: #fff0f8;
}
.qr-frame-estrelas {
    border: 2.5px solid #fcd34d;
    background: #fffbeb;
}
.qr-frame-premium {
    border: 2px solid #ddd6fe;
    background: #f5f3ff;
    position: relative;
}
.qr-opcao-nome { font-size: 0.8125rem; font-weight: 700; color: #111827; }
.qr-opcao-preco { font-size: 0.75rem; color: #6b7280; }
.qr-estilo-opcao.selected .qr-opcao-preco { color: #d01446; font-weight: 700; }

@media (min-width: 901px) {
    .preview-mobile-btn { display: none; }
}

@media (max-width: 900px) {
    .split-step.active {
        display: block;
        padding: 1.5rem;
    }
    .phone-preview-col { display: none; }
}