/* Builder Tools Page Styles */

.bt-hero {
    text-align: center;
    padding: 3rem 1rem;
    background: linear-gradient(135deg, #fffaf0 0%, #ffffff 100%);
}

.bt-hero h1 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.bt-hero p {
    font-size: 1.15rem;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
}

/* Tool category tabs */
.bt-categories {
    display: flex;
    justify-content: center;
    gap: 1rem;
    max-width: 1000px;
    margin: 2rem auto 0;
    padding: 0 1rem;
    flex-wrap: wrap;
}

.bt-cat-card {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    background: white;
}

.bt-cat-card:hover {
    border-color: #E8AF00;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(232, 175, 0, 0.1);
}

.bt-cat-card.active {
    border-color: #15635E;
    background: #f0faf9;
}

.bt-cat-card.coming-soon { opacity: 0.6; font-style: normal !important; }
.sphere-section.coming-soon,
.sphere-section.coming-soon * {
    font-style: normal !important;
    color: inherit;
    font-size: inherit;
}
.sphere-section.coming-soon { margin: 0 auto 3rem; padding: 0 1rem; }
.sphere-section.coming-soon .format-card h3 { color: #333; font-size: 1.1rem; }
.sphere-section.coming-soon .format-card .price { color: #E8AF00; font-size: 1.4rem; }
.sphere-section.coming-soon .format-card .note { color: #666; font-size: 0.85rem; }
.sphere-section.coming-soon .sphere-header h2 { color: #15635E; font-size: 1.75rem; }
.sphere-section.coming-soon .sphere-header p { color: #666; font-size: 0.95rem; }
.bt-cat-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.bt-cat-card h3 { font-size: 1rem; color: #333; margin: 0 0 0.25rem; }
.bt-cat-card p { font-size: 0.8rem; color: #666; margin: 0; }

.bt-cat-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.5rem;
}

.bt-cat-badge-active { background: #d4edda; color: #155724; }
.bt-cat-badge-soon { background: #fff3cd; color: #856404; }

/* Section dividers */
.bt-section-divider {
    max-width: 1000px;
    margin: 3rem auto 2rem;
    padding: 0 1rem;
}

.bt-section-divider h2 {
    color: #15635E;
    font-size: 1.75rem;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bt-section-divider p { color: #666; font-size: 1rem; margin: 0; }

/* Coming soon sections */
.bt-coming-section {
    max-width: 1000px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

.bt-coming-card {
    border: 2px dashed #e0e0e0;
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    background: #fafafa;
}

.bt-coming-card h3 { color: #333; font-size: 1.25rem; margin: 0.5rem 0; }
.bt-coming-card p { color: #666; font-size: 0.95rem; max-width: 500px; margin: 0.5rem auto 1rem; }

.bt-coming-features {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.bt-coming-features span { color: #555; font-size: 0.85rem; font-style: normal; }

/* Sphere template sections */
.sphere-section {
    max-width: 1000px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

.sphere-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e0e0e0;
}

.sphere-header-icon { font-size: 2.5rem; }
.sphere-header h2 { color: #15635E; font-size: 1.75rem; margin: 0; }
.sphere-header p { color: #666; margin: 0.25rem 0 0; font-size: 0.95rem; }

.format-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 700px) {
    .format-row { grid-template-columns: 1fr; }
}

.format-card {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.5rem;
    background: white;
    transition: all 0.3s ease;
    position: relative;
}

.format-card:hover {
    border-color: #E8AF00;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(232, 175, 0, 0.1);
}

.format-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.badge-mdf { background: #15635E; color: white; }
.badge-paper { background: #E8AF00; color: #000; }

.format-card h3 { font-size: 1.1rem; color: #333; margin: 0 0 0.25rem; }
.format-card .price { font-size: 1.4rem; font-weight: 800; color: #E8AF00; margin: 0.5rem 0; }
.format-card .note { color: #666; font-size: 0.85rem; margin-bottom: 0.5rem; }

ul.format-features {
    list-style: none !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin: 0.75rem 0 1rem;
    font-size: 0.85rem;
    text-align: left;
}

ul.format-features li {
    color: #555;
    margin-bottom: 0.25rem;
    list-style-type: none !important;
    list-style: none !important;
    font-style: normal !important;
    text-align: left;
}

.btn-order {
    background: #E8AF00;
    color: #000;
    border: 2px solid #000;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    display: block;
    width: 100%;
    text-align: center;
    transition: all 0.2s;
    text-transform: uppercase;
    cursor: pointer;
    box-sizing: border-box;
}

.btn-order:hover { background: #FFD700; transform: scale(1.02); }

.coming-soon .format-card { opacity: 0.6; }
.coming-soon .btn-order {
    background: #ccc;
    border-color: #999;
    color: #666;
    cursor: not-allowed;
    pointer-events: none;
}

.info-banner {
    background: #e8f4fd;
    border: 2px solid #15635E;
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1000px;
}

.format-comparison {
    max-width: 1000px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.comparison-table th {
    background: #15635E;
    color: white;
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
}

.comparison-table td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #e0e0e0;
    color: #444;
}

.comparison-table tr:hover { background: #f8fafa; }