.ba-namegen,
.ba-checklist,
.ba-fvsa {
--ba-primary: #1a365d;
--ba-primary-light: #2c5282;
--ba-accent: #d69e2e;
--ba-success: #2f855a;
--ba-success-bg: #f0fdf4;
--ba-success-border: #86efac;
--ba-warning: #c05621;
--ba-warning-bg: #fff7ed;
--ba-warning-border: #fdba74;
--ba-bg: #ffffff;
--ba-bg-alt: #f8fafc;
--ba-border: #e2e8f0;
--ba-text: #1a202c;
--ba-text-muted: #64748b;
--ba-radius: 10px;
--ba-radius-sm: 6px;
--ba-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
max-width: 820px;
margin: 2rem auto;
color: var(--ba-text);
line-height: 1.6;
} .ba-namegen__form {
background: var(--ba-bg);
border: 1px solid var(--ba-border);
border-radius: var(--ba-radius);
padding: 1.5rem;
box-shadow: var(--ba-shadow);
}
.ba-namegen__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.ba-namegen__field {
margin-bottom: 1rem;
}
.ba-namegen__field label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--ba-text);
margin-bottom: 0.35rem;
}
.ba-namegen__field input,
.ba-namegen__field textarea,
.ba-namegen__field select {
width: 100%;
padding: 0.6rem 0.85rem;
border: 1px solid var(--ba-border);
border-radius: var(--ba-radius-sm);
font-size: 0.95rem;
font-family: inherit;
background: #fff;
color: var(--ba-text);
box-sizing: border-box;
transition: border-color 0.15s;
}
.ba-namegen__field input:focus,
.ba-namegen__field textarea:focus,
.ba-namegen__field select:focus {
outline: 2px solid var(--ba-primary-light);
outline-offset: -1px;
border-color: var(--ba-primary-light);
}
.ba-namegen__field textarea {
resize: vertical;
min-height: 80px;
}
.ba-namegen__submit {
background: var(--ba-primary);
color: #fff;
border: 0;
padding: 0.75rem 1.5rem;
border-radius: var(--ba-radius-sm);
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.ba-namegen__submit:hover:not(:disabled) {
background: var(--ba-primary-light);
transform: translateY(-1px);
}
.ba-namegen__submit:disabled {
background: var(--ba-text-muted);
cursor: not-allowed;
opacity: 0.7;
}
.ba-namegen__status {
margin: 1.25rem 0;
padding: 0 0.5rem;
font-size: 0.9rem;
color: var(--ba-text-muted);
min-height: 1.5em;
}
.ba-namegen__status.is-error {
color: var(--ba-warning);
}
.ba-namegen__results {
margin-top: 1rem;
}
.ba-name-card {
background: var(--ba-bg);
border: 1px solid var(--ba-border);
border-radius: var(--ba-radius);
padding: 1rem 1.25rem;
margin-bottom: 0.75rem;
box-shadow: var(--ba-shadow);
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
align-items: center;
transition: all 0.2s;
}
.ba-name-card:hover {
border-color: var(--ba-primary-light);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.ba-name-card__name {
font-size: 1.35rem;
font-weight: 700;
color: var(--ba-primary);
margin: 0 0 0.25rem;
line-height: 1.2;
}
.ba-name-card__explanation {
font-size: 0.87rem;
color: var(--ba-text-muted);
margin: 0 0 0.75rem;
line-height: 1.5;
}
.ba-name-card__checks {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.ba-name-card__check {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 500;
text-decoration: none;
transition: all 0.15s;
}
.ba-name-card__check--domain-available {
background: var(--ba-success-bg);
color: var(--ba-success);
border: 1px solid var(--ba-success-border);
}
.ba-name-card__check--domain-taken {
background: var(--ba-warning-bg);
color: var(--ba-warning);
border: 1px solid var(--ba-warning-border);
}
.ba-name-card__check--domain-loading {
background: var(--ba-bg-alt);
color: var(--ba-text-muted);
border: 1px solid var(--ba-border);
}
.ba-name-card__check--bolagsverket {
background: #eff6ff;
color: #1e40af;
border: 1px solid #bfdbfe;
}
.ba-name-card__check--bolagsverket:hover {
background: #dbeafe;
}
.ba-name-card__check-icon {
display: inline-flex;
width: 14px;
height: 14px;
align-items: center;
justify-content: center;
}
.ba-name-card__actions {
display: flex;
flex-direction: column;
gap: 0.4rem;
align-items: stretch;
}
.ba-name-card__copy {
background: transparent;
color: var(--ba-primary);
border: 1px solid var(--ba-border);
padding: 0.4rem 0.85rem;
border-radius: var(--ba-radius-sm);
font-size: 0.82rem;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
white-space: nowrap;
}
.ba-name-card__copy:hover {
border-color: var(--ba-primary);
background: var(--ba-bg-alt);
}
.ba-name-card__copy.is-copied {
background: var(--ba-success-bg);
color: var(--ba-success);
border-color: var(--ba-success-border);
} .ba-namegen__loading {
background: var(--ba-bg);
border: 1px solid var(--ba-border);
border-radius: var(--ba-radius);
padding: 2rem 1.5rem;
text-align: center;
}
.ba-namegen__loading-spinner {
width: 40px;
height: 40px;
margin: 0 auto 1rem;
border: 3px solid var(--ba-bg-alt);
border-top-color: var(--ba-primary);
border-radius: 50%;
animation: ba-spin 0.8s linear infinite;
}
.ba-namegen__loading p {
margin: 0.25rem 0;
color: var(--ba-text);
}
.ba-namegen__loading-hint {
color: var(--ba-text-muted);
font-size: 0.9rem;
max-width: 420px;
margin: 0.5rem auto 0 !important;
}
@keyframes ba-spin {
to { transform: rotate(360deg); }
} .ba-name-card__check--register {
background: var(--ba-primary);
color: #fff !important;
border-color: var(--ba-primary);
font-weight: 600;
}
.ba-name-card__check--register:hover {
background: var(--ba-primary-light);
border-color: var(--ba-primary-light);
} .ba-namegen__notice {
margin-top: 1rem;
padding: 1rem 1.25rem;
background: #fffbeb;
border: 1px solid #fde68a;
border-left: 4px solid #f59e0b;
border-radius: var(--ba-radius);
color: #78350f;
font-size: 0.92rem;
line-height: 1.55;
} .ba-checklist__header {
background: linear-gradient(135deg, var(--ba-primary) 0%, var(--ba-primary-light) 100%);
color: #fff;
padding: 1.75rem 1.75rem 1.5rem;
border-radius: var(--ba-radius);
margin-bottom: 1.5rem;
}
.ba-checklist__header h2 {
margin: 0 0 0.5rem;
font-size: 1.5rem;
font-weight: 700;
color: #fff;
line-height: 1.25;
}
.ba-checklist__header p {
margin: 0 0 1.25rem;
font-size: 0.95rem;
opacity: 0.95;
color: #fff;
}
.ba-checklist__progress-bar {
height: 8px;
background: rgba(255, 255, 255, 0.2);
border-radius: 999px;
overflow: hidden;
margin-bottom: 0.6rem;
}
.ba-checklist__progress-fill {
height: 100%;
width: 0%;
background: var(--ba-accent);
border-radius: 999px;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ba-checklist__progress-text {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.87rem;
color: #fff;
opacity: 0.95;
}
.ba-checklist__done {
font-weight: 700;
}
.ba-checklist__reset {
background: rgba(255, 255, 255, 0.1);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.25);
padding: 0.35rem 0.85rem;
border-radius: var(--ba-radius-sm);
font-size: 0.8rem;
cursor: pointer;
font-family: inherit;
transition: background 0.2s;
}
.ba-checklist__reset:hover {
background: rgba(255, 255, 255, 0.2);
}
.ba-checklist__section {
margin-bottom: 1.5rem;
}
.ba-checklist__section-title {
font-size: 0.95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ba-primary);
margin: 0 0 0.75rem;
padding-bottom: 0.4rem;
border-bottom: 2px solid var(--ba-accent);
display: inline-block;
}
.ba-checklist__steps {
list-style: none;
margin: 0;
padding: 0;
background: var(--ba-bg);
border: 1px solid var(--ba-border);
border-radius: var(--ba-radius);
overflow: hidden;
box-shadow: var(--ba-shadow);
}
.ba-checklist__step {
display: flex;
align-items: flex-start;
border-bottom: 1px solid var(--ba-border);
transition: background 0.15s;
}
.ba-checklist__step:last-child {
border-bottom: 0;
}
.ba-checklist__step.is-done {
background: var(--ba-success-bg);
}
.ba-checklist__checkbox-wrap {
display: flex;
align-items: center;
padding: 1rem 0 1rem 1.25rem;
cursor: pointer;
flex-shrink: 0;
}
.ba-checklist__checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
}
.ba-checklist__checkbox-visual {
width: 22px;
height: 22px;
border: 2px solid var(--ba-border);
border-radius: 5px;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.15s;
}
.ba-checklist__checkbox-wrap:hover .ba-checklist__checkbox-visual {
border-color: var(--ba-primary);
}
.ba-checklist__checkbox:checked + .ba-checklist__checkbox-visual {
background: var(--ba-success);
border-color: var(--ba-success);
}
.ba-checklist__checkbox:checked + .ba-checklist__checkbox-visual::after {
content: "";
position: absolute;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg) translate(-1px, -1px);
}
.ba-checklist__content {
flex: 1;
min-width: 0;
}
.ba-checklist__step-toggle {
width: 100%;
background: transparent;
border: 0;
padding: 1rem 1.25rem 1rem 0.875rem;
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.ba-checklist__step-toggle:hover {
background: var(--ba-bg-alt);
}
.ba-checklist__step-title {
font-weight: 600;
font-size: 0.97rem;
color: var(--ba-text);
line-height: 1.4;
}
.ba-checklist__step.is-done .ba-checklist__step-title {
color: var(--ba-text-muted);
text-decoration: line-through;
text-decoration-color: rgba(100, 116, 139, 0.4);
}
.ba-checklist__step-chevron {
width: 9px;
height: 9px;
border-right: 2px solid var(--ba-text-muted);
border-bottom: 2px solid var(--ba-text-muted);
transform: rotate(45deg);
transition: transform 0.25s;
margin-bottom: 3px;
flex-shrink: 0;
}
.ba-checklist__step-toggle[aria-expanded="true"] .ba-checklist__step-chevron {
transform: rotate(-135deg);
margin-bottom: -3px;
}
.ba-checklist__step-body {
padding: 0 1.25rem 1.25rem;
animation: ba-fade 0.25s ease;
}
.ba-checklist__step-body[hidden] {
display: none;
}
.ba-checklist__step-body p {
margin: 0;
color: #334155;
font-size: 0.93rem;
line-height: 1.6;
}
@keyframes ba-fade {
from { opacity: 0; transform: translateY(-4px); }
to   { opacity: 1; transform: translateY(0); }
}
.ba-checklist__done-box {
margin-top: 1.5rem;
padding: 1.5rem;
background: var(--ba-success-bg);
border: 1px solid var(--ba-success-border);
border-radius: var(--ba-radius);
text-align: center;
}
.ba-checklist__done-box h3 {
margin: 0 0 0.5rem;
color: var(--ba-success);
font-size: 1.15rem;
}
.ba-checklist__done-box p {
margin: 0;
color: var(--ba-text);
} @media (max-width: 600px) {
.ba-namegen__row {
grid-template-columns: 1fr;
gap: 0;
}
.ba-name-card {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.ba-name-card__actions {
flex-direction: row;
}
.ba-checklist__header {
padding: 1.25rem;
}
.ba-checklist__header h2 {
font-size: 1.25rem;
}
.ba-checklist__checkbox-wrap {
padding: 0.9rem 0 0.9rem 0.875rem;
}
.ba-checklist__step-toggle {
padding: 0.9rem 0.875rem 0.9rem 0.6rem;
}
.ba-checklist__step-body {
padding: 0 0.875rem 1rem;
}
} .ba-fvsa__header {
background: linear-gradient(135deg, var(--ba-primary) 0%, var(--ba-primary-light) 100%);
color: #fff;
padding: 1.75rem 1.75rem 1.5rem;
border-radius: var(--ba-radius);
margin-bottom: 1.5rem;
}
.ba-fvsa__header h2 {
margin: 0 0 0.5rem;
font-size: 1.4rem;
font-weight: 700;
color: #fff;
line-height: 1.25;
}
.ba-fvsa__header p {
margin: 0;
font-size: 0.95rem;
opacity: 0.95;
color: #fff;
} .ba-fvsa__controls {
background: var(--ba-bg);
border: 1px solid var(--ba-border);
border-radius: var(--ba-radius);
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: var(--ba-shadow);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.ba-fvsa__field {
display: flex;
flex-direction: column;
}
.ba-fvsa__field label {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.88rem;
font-weight: 600;
color: var(--ba-text);
margin-bottom: 0.6rem;
}
.ba-fvsa__value-display {
font-size: 1.1rem;
font-weight: 700;
color: var(--ba-primary);
}
.ba-fvsa__field input[type="range"] {
width: 100%;
-webkit-appearance: none;
appearance: none;
height: 8px;
background: var(--ba-border);
border-radius: 999px;
outline: none;
cursor: pointer;
}
.ba-fvsa__field input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--ba-primary);
border: 3px solid #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: transform 0.1s;
}
.ba-fvsa__field input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.1);
}
.ba-fvsa__field input[type="range"]::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--ba-primary);
border: 3px solid #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.ba-fvsa__range-labels {
display: flex;
justify-content: space-between;
margin-top: 0.4rem;
font-size: 0.75rem;
color: var(--ba-text-muted);
}
.ba-fvsa__hint {
margin: 0.6rem 0 0;
font-size: 0.8rem;
color: var(--ba-text-muted);
line-height: 1.5;
} .ba-fvsa__results {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1.5rem;
}
.ba-fvsa__card {
background: var(--ba-bg);
border: 2px solid var(--ba-border);
border-radius: var(--ba-radius);
padding: 1.25rem;
box-shadow: var(--ba-shadow);
transition: border-color 0.3s;
}
.ba-fvsa__card.is-winner {
border-color: var(--ba-success);
background: linear-gradient(180deg, var(--ba-success-bg) 0%, #fff 40%);
}
.ba-fvsa__card-header {
text-align: center;
padding-bottom: 1rem;
border-bottom: 1px solid var(--ba-border);
margin-bottom: 1rem;
}
.ba-fvsa__card-header h3 {
margin: 0 0 0.5rem;
font-size: 1rem;
font-weight: 600;
color: var(--ba-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ba-fvsa__net {
font-size: 1.9rem;
font-weight: 700;
color: var(--ba-primary);
line-height: 1.1;
}
.ba-fvsa__card.is-winner .ba-fvsa__net {
color: var(--ba-success);
}
.ba-fvsa__net-label {
font-size: 0.78rem;
color: var(--ba-text-muted);
margin-top: 0.25rem;
}
.ba-fvsa__breakdown {
list-style: none;
margin: 0;
padding: 0;
}
.ba-fvsa__breakdown li {
display: flex;
justify-content: space-between;
padding: 0.4rem 0;
font-size: 0.87rem;
color: #334155;
border-bottom: 1px dashed var(--ba-border);
}
.ba-fvsa__breakdown li:last-child {
border-bottom: 0;
}
.ba-fvsa__breakdown li span:last-child {
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.ba-fvsa__breakdown-total {
border-top: 2px solid var(--ba-border) !important;
margin-top: 0.4rem;
padding-top: 0.75rem !important;
font-weight: 700 !important;
font-size: 0.95rem !important;
color: var(--ba-text) !important;
}
.ba-fvsa__breakdown-conditional {
display: none;
}
.ba-fvsa__breakdown-conditional.is-visible {
display: flex;
}
.ba-fvsa__effective {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--ba-border);
font-size: 0.82rem;
color: var(--ba-text-muted);
text-align: center;
}
.ba-fvsa__effective strong {
color: var(--ba-text);
font-size: 0.95rem;
}
.ba-fvsa__detail {
display: flex;
gap: 1rem;
margin: 0.75rem 0 0;
padding-top: 0.75rem;
border-top: 1px solid var(--ba-border);
font-size: 0.78rem;
color: var(--ba-text-muted);
justify-content: space-around;
flex-wrap: wrap;
}
.ba-fvsa__detail strong {
color: var(--ba-text);
display: block;
font-size: 0.9rem;
} .ba-fvsa__verdict {
background: var(--ba-bg-alt);
border-left: 4px solid var(--ba-accent);
padding: 1.25rem 1.5rem;
border-radius: var(--ba-radius-sm);
margin-bottom: 1.25rem;
display: flex;
gap: 1rem;
align-items: center;
}
.ba-fvsa__verdict-icon {
font-size: 2rem;
flex-shrink: 0;
}
.ba-fvsa__verdict-text {
font-size: 0.95rem;
color: var(--ba-text);
line-height: 1.55;
}
.ba-fvsa__verdict-text strong {
color: var(--ba-primary);
} .ba-fvsa__details {
background: var(--ba-bg-alt);
border: 1px solid var(--ba-border);
border-radius: var(--ba-radius-sm);
padding: 0.75rem 1.25rem;
}
.ba-fvsa__details summary {
cursor: pointer;
font-weight: 600;
color: var(--ba-primary);
font-size: 0.88rem;
padding: 0.25rem 0;
}
.ba-fvsa__details summary:hover {
color: var(--ba-primary-light);
}
.ba-fvsa__details ul {
margin: 0.75rem 0 0.25rem;
padding-left: 1.25rem;
font-size: 0.85rem;
color: #334155;
}
.ba-fvsa__details li {
padding: 0.25rem 0;
line-height: 1.55;
} @media (max-width: 640px) {
.ba-fvsa__controls,
.ba-fvsa__results {
grid-template-columns: 1fr;
gap: 1rem;
}
.ba-fvsa__header {
padding: 1.25rem;
}
.ba-fvsa__header h2 {
font-size: 1.2rem;
}
.ba-fvsa__net {
font-size: 1.6rem;
}
.ba-fvsa__detail {
flex-direction: column;
gap: 0.5rem;
}
}