/* BrandBrahma Domain Generator v2 */
:root {
    --bbdg-primary: #0bb07b;
    --bbdg-primary-dark: #099463;
    --bbdg-bg: #f8fafc;
    --bbdg-card: #ffffff;
    --bbdg-border: #e2e8f0;
    --bbdg-text: #1e293b;
    --bbdg-muted: #64748b;
    --bbdg-radius: 12px;
    --bbdg-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
}

.bbdg-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 16px 40px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--bbdg-text);
}

/* Header */
.bbdg-header { text-align: center; padding: 40px 0 28px; }
.bbdg-title  { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; margin: 0 0 10px; }
.bbdg-subtitle { font-size: 1rem; color: var(--bbdg-muted); margin: 0; }

/* Search bar */
.bbdg-search-bar {
    display: flex;
    gap: 10px;
    background: var(--bbdg-card);
    border: 2px solid var(--bbdg-border);
    border-radius: var(--bbdg-radius);
    padding: 8px;
    box-shadow: var(--bbdg-shadow);
    transition: border-color .2s;
}
.bbdg-search-bar:focus-within { border-color: var(--bbdg-primary); }
.bbdg-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    padding: 8px 12px;
    background: transparent;
    color: var(--bbdg-text);
}
.bbdg-input::placeholder { color: var(--bbdg-muted); }

/* Buttons */
.bbdg-btn {
    background: var(--bbdg-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, transform .12s;
    white-space: nowrap;
}
.bbdg-btn:hover  { background: var(--bbdg-primary-dark); transform: translateY(-1px); }
.bbdg-btn:active { transform: translateY(0); }
.bbdg-btn-outline {
    background: transparent;
    color: var(--bbdg-primary);
    border: 2px solid var(--bbdg-primary);
}
.bbdg-btn-outline:hover { background: var(--bbdg-primary); color: #fff; }

/* Suggestion tags */
.bbdg-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 14px;
}
.bbdg-tag-label { font-size: .8rem; color: var(--bbdg-muted); font-weight: 600; }
.bbdg-tag {
    background: var(--bbdg-bg);
    border: 1px solid var(--bbdg-border);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: .82rem;
    color: var(--bbdg-text);
    cursor: pointer;
    transition: all .15s;
}
.bbdg-tag:hover { background: var(--bbdg-primary); border-color: var(--bbdg-primary); color: #fff; }

/* Loading */
.bbdg-loading { margin-top: 32px; text-align: center; }
.bbdg-spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--bbdg-border);
    border-top-color: var(--bbdg-primary);
    border-radius: 50%;
    animation: bbdg-spin .7s linear infinite;
    margin: 0 auto 14px;
}
@keyframes bbdg-spin { to { transform: rotate(360deg); } }
#bbdg-loading-text { color: var(--bbdg-muted); font-size: .95rem; margin: 0 0 20px; }

.bbdg-skeleton-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.bbdg-skeleton-row {
    height: 56px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    border-radius: 10px;
    animation: bbdg-shimmer 1.4s infinite;
}
@keyframes bbdg-shimmer { to { background-position: -200% 0; } }

/* Results header */
.bbdg-results { margin-top: 32px; }
.bbdg-results-header { margin-bottom: 16px; }
.bbdg-results-header h3 { margin: 0 0 4px; font-size: 1.1rem; }
.bbdg-results-header em { color: var(--bbdg-primary); font-style: normal; font-weight: 700; }
.bbdg-results-note { font-size: .82rem; color: var(--bbdg-muted); margin: 0; }

/* Domain cards — entire card is the affiliate link */
.bbdg-domain-list { display: flex; flex-direction: column; gap: 10px; }

a.bbdg-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bbdg-card);
    border: 1.5px solid var(--bbdg-border);
    border-radius: var(--bbdg-radius);
    padding: 14px 18px;
    text-decoration: none;
    color: var(--bbdg-text);
    box-shadow: var(--bbdg-shadow);
    transition: border-color .18s, box-shadow .18s, transform .18s;
    animation: bbdg-fadein .3s ease both;
}
a.bbdg-card:hover {
    border-color: var(--bbdg-primary);
    box-shadow: 0 4px 20px rgba(11,176,123,.15);
    transform: translateY(-2px);
}
@keyframes bbdg-fadein { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: none; } }

.bbdg-card-left  { display: flex; align-items: center; gap: 12px; }
.bbdg-card-right { flex-shrink: 0; }

.bbdg-dot {
    width: 10px; height: 10px;
    background: var(--bbdg-primary);
    border-radius: 50%;
    flex-shrink: 0;
}
.bbdg-domain-name {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
}
.bbdg-avail-badge {
    font-size: .72rem;
    background: #dcfce7;
    color: #166534;
    border-radius: 4px;
    padding: 2px 7px;
    font-weight: 600;
}
.bbdg-register-btn {
    background: var(--bbdg-primary);
    color: #fff;
    border-radius: 7px;
    padding: 7px 16px;
    font-size: .82rem;
    font-weight: 700;
    transition: background .15s;
}
a.bbdg-card:hover .bbdg-register-btn { background: var(--bbdg-primary-dark); }

/* Results footer */
.bbdg-results-footer { margin-top: 20px; text-align: center; }

/* Error */
.bbdg-error {
    margin-top: 24px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 14px 18px;
    color: #991b1b;
    font-size: .95rem;
}

/* Guest note */
.bbdg-guest-note {
    margin-top: 20px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 14px 18px;
    color: #1e40af;
    font-size: .95rem;
    text-align: center;
}
.bbdg-guest-note a { color: var(--bbdg-primary); font-weight: 600; }

@media (max-width: 560px) {
    .bbdg-search-bar { flex-direction: column; }
    .bbdg-btn { width: 100%; text-align: center; }
    a.bbdg-card { flex-direction: column; align-items: flex-start; gap: 10px; }
}