/* public.css split module — load order 07/8 — enqueued by src/Public/class-public-assets.php. DO NOT reorder: cascade depends on module load sequence. */
/* ========================================
   Step 10 - DNS Setup
======================================== */
.seresa-signup-dns {
    text-align: left;
}

.seresa-signup-dns__details {
    background: var(--seresa-light-bg);
    border: 1px solid var(--seresa-border);
    border-radius: 8px;
    padding: 20px;
    margin: 24px 0;
}

.seresa-signup-dns__detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--seresa-border);
}

.seresa-signup-dns__detail-row:last-child {
    border-bottom: none;
}

.seresa-signup-dns__detail-row--highlight {
    background: #fef3c7;
    margin: 8px -20px -20px -20px;
    padding: 16px 20px;
    border-radius: 0 0 8px 8px;
    border-bottom: none;
}

.seresa-signup-dns__label {
    font-weight: 600;
    color: var(--seresa-text-secondary);
    font-size: 14px;
}

.seresa-signup-dns__value {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    background: #ffffff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--seresa-text-primary);
}

.seresa-signup-dns__value--ip {
    font-weight: 700;
    font-size: 16px;
    background: #fbbf24;
    color: #1b1f3c;
}

.seresa-signup-dns__steps {
    margin: 32px 0;
}

.seresa-signup-dns__steps-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--seresa-text-primary);
}

.seresa-signup-dns__steps-list {
    padding-left: 24px;
    margin: 0;
}

.seresa-signup-dns__steps-list li {
    margin-bottom: 20px;
    line-height: 1.6;
}

.seresa-signup-dns__steps-list li strong {
    display: block;
    color: var(--seresa-text-primary);
    margin-bottom: 4px;
}

.seresa-signup-dns__steps-list li p {
    margin: 0;
    color: var(--seresa-text-secondary);
    font-size: 14px;
}

.seresa-signup-dns__record-example {
    margin-top: 12px;
    overflow-x: auto;
}

.seresa-signup-dns__record-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--seresa-light-bg);
    border-radius: 6px;
    overflow: hidden;
}

.seresa-signup-dns__record-table th,
.seresa-signup-dns__record-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--seresa-border);
}

.seresa-signup-dns__record-table th {
    background: var(--seresa-primary);
    color: #ffffff;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.seresa-signup-dns__record-table td code {
    background: #ffffff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 13px;
}

/* Compact Quick Setup Styles */
.seresa-signup-dns__quick-steps {
    margin: 24px 0;
}

.seresa-signup-dns__quick-title {
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin-bottom: 12px;
    padding-left: 20px;
    color: var(--seresa-text-primary);
}

.seresa-signup-dns__quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
    padding-left: 20px;
}

.seresa-signup-dns__quick-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--seresa-text-secondary);
    line-height: 1.4;
}

.seresa-signup-dns__quick-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    background: var(--seresa-primary);
    color: #ffffff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
}

/* DNS Record Card */
.seresa-signup-dns__record-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid var(--seresa-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 16px 0;
}

.seresa-signup-dns__record-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.seresa-signup-dns__record-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--seresa-primary);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.03em;
}

.seresa-signup-dns__record-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--seresa-text-secondary);
}

.seresa-signup-dns__record-fields {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.seresa-signup-dns__record-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.seresa-signup-dns__record-field--arrow {
    flex-direction: row;
    color: var(--seresa-text-muted, #9ca3af);
    padding: 0 4px;
}

.seresa-signup-dns__record-field--ttl {
    margin-left: auto;
}

.seresa-signup-dns__field-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--seresa-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.seresa-signup-dns__field-value {
    background: #ffffff;
    border: 1px solid var(--seresa-border);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
    color: var(--seresa-text-primary);
}

.seresa-signup-dns__field-value--ip {
    background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
    border-color: #fcd34d;
    font-weight: 600;
}

.seresa-signup-dns__propagation-note {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--seresa-text-muted, #9ca3af);
    text-align: left;
    padding-left: 20px;
}

/* Compact Note Modifier */
.seresa-signup-dns__note--compact {
    padding: 12px 16px;
    margin: 16px 0;
}

.seresa-signup-dns__note--compact p {
    font-size: 13px;
}

/* Responsive: Quick Grid to 2 columns on smaller screens */
@media (max-width: 640px) {
    .seresa-signup-dns__quick-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .seresa-signup-dns__record-fields {
        flex-direction: column;
        align-items: stretch;
    }

    .seresa-signup-dns__record-field--arrow {
        display: none;
    }

    .seresa-signup-dns__record-field--ttl {
        margin-left: 0;
    }

    .seresa-signup-dns__record-field {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .seresa-signup-dns__field-value {
        text-align: right;
    }
}

.seresa-signup-dns__note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 16px;
    margin: 24px 0;
}

.seresa-signup-dns__note svg {
    flex-shrink: 0;
    color: #3b82f6;
    margin-top: 2px;
}

.seresa-signup-dns__note p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #1e40af;
}

.seresa-signup-dns__note strong {
    color: #1e3a8a;
}

.seresa-signup-dns__actions {
    text-align: center;
    margin: 32px 0 24px;
}

.seresa-signup-dns__help {
    text-align: center;
    margin-top: 16px;
}

.seresa-signup-dns__guide-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--seresa-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.seresa-signup-dns__guide-link:hover {
    color: #4f46e5;
    text-decoration: underline;
}

.seresa-signup-dns__guide-link svg {
    flex-shrink: 0;
}

/* DNS Success Banner */
.seresa-signup-dns__success-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border: 2px solid var(--seresa-secondary);
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 24px;
    color: var(--seresa-text-primary);
    font-size: 16px;
    font-weight: 600;
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seresa-signup-dns__success-banner svg {
    color: var(--seresa-secondary);
    flex-shrink: 0;
}

/* DNS Error State */
.seresa-signup-dns__error {
    text-align: center;
    padding: 48px 24px;
}

.seresa-signup-dns__error svg {
    color: #dc2626;
    margin-bottom: 20px;
}

.seresa-signup-dns__error .seresa-signup-step__title {
    color: #b91c1c;
    margin-bottom: 12px;
}

.seresa-signup-dns__error .seresa-signup-step__description {
    color: #7f1d1d;
    margin-bottom: 24px;
}

/* DNS Account Card */
.seresa-signup-dns__account-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid var(--seresa-border);
    border-radius: 16px;
    padding: 24px;
    margin: 24px 0;
}

.seresa-signup-dns__card-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: var(--seresa-text-primary);
    font-family: "PosteramaTextW15", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seresa-signup-dns__value--highlight {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
}

/* DNS Next Steps */
.seresa-signup-dns__next-steps {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 20px 24px;
    margin: 24px 0;
    text-align: center;
}

.seresa-signup-dns__next-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #92400e;
    font-family: "PosteramaTextW15", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seresa-signup-dns__next-description {
    font-size: 14px;
    margin: 0;
    color: #78350f;
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
}

/* DNS Actions with Icon */
.seresa-signup-dns__actions .seresa-signup-button--primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.seresa-signup-dns__actions .seresa-signup-button--primary svg {
    flex-shrink: 0;
}

/* DNS Mobile Responsive */
@media (max-width: 600px) {
    .seresa-signup-dns__detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .seresa-signup-dns__record-table {
        font-size: 11px;
    }

    .seresa-signup-dns__record-table th,
    .seresa-signup-dns__record-table td {
        padding: 8px;
    }

    .seresa-signup-success-steps__item--with-button {
        flex-direction: column;
        align-items: flex-start;
    }

    .seresa-signup-button--small {
        margin-left: 0;
        margin-top: 8px;
    }
}