/* Generale */
body, html {
    height: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f5f7f9;
}

.main-header {
    background: #fff;
    border-bottom: 1px solid #e1e4e8;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.brand-claus { color: #ff7f00; font-weight: bold; font-size: 20px; }

/* Layout Split */
.main-wrapper {
    display: flex;
    height: calc(100vh - 60px);
}

.editor-section {
    flex: 0 0 50%;
    background: #282c34;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #181a1f;
}

.results-section {
    flex: 0 0 50%;
    overflow-y: auto;
    padding: 2rem;
    background: #fff;
    box-sizing: border-box;
}

/* Editor Styling */
.section-header {
    background: #21252b;
    color: #abb2bf;
    padding: 10px 20px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#htaccess-input {
    flex-grow: 1;
    background: #282c34;
    color: #00d1b2;
    border: none;
    padding: 20px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    resize: none;
}

/* Containere cu Bordura (Orlando Style) */
.url-bar-container {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #e1e4e8; /* Bordura containerului gri */
}

.url-bar-container label, .debug-label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    display: block;
    color: #333;
    text-transform: uppercase;
}

.debug-label { margin-left: 5px; margin-top: 10px; }

.final-url-display {
    background: #eefaf9;
    color: #008f7a;
    padding: 15px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 16px;
    border: 1px solid #c3e6e2; /* Bordura verde specifica */
    word-break: break-all;
    min-height: 20px;
}

.steps-container {
    border: 1px solid #e1e4e8; /* Bordura exterioara pentru pasi */
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.step-item {
    border-bottom: 1px solid #e1e4e8; /* Linie intre pasi */
    padding: 12px 15px;
    font-size: 13px;
    background: #fff;
}

.step-item:last-child { border-bottom: none; }

/* Butoane si Input */
.input-row { display: flex; gap: 10px; }
#url-input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 15px; }
#btn-test { background: #1a8a59; color: white; border: none; padding: 10px 25px; border-radius: 4px; cursor: pointer; font-weight: bold; }
.btn-primary { background: #ff7f00; color: white; border: none; padding: 8px 15px; border-radius: 4px; text-decoration: none; font-size: 14px; }
.btn-secondary { background: #ff3100; border: 1px solid #ccc; padding: 8px 15px; border-radius: 4px; cursor: pointer; margin-right: 10px; }

/* Badge-uri */
.badge { padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: bold; text-transform: uppercase; color: #fff; display: inline-block; margin-right: 8px; }
.bg-success { background: #28a745; }
.bg-danger { background: #dc3545; }
.bg-light { background: #f8f9fa; border: 1px solid #ddd; color: #333; }
.bg-warning { background: #ffc107; color: #21252b; }

.italic { font-style: italic; }
.text-success { color: #28a745; }
.text-danger { color: #dc3545; }
.d-none { display: none; }
#loading { margin-top: 10px; color: #007bff; font-size: 13px; }