/**
 * UKPTG Business Calculators - Styles
 * Version: 3.0.0 - MATCHES PAVING CALCULATOR STYLING EXACTLY
 */

/* ========================================
   Page Container & Layout - MATCHES PAVING
   ======================================== */

.bc-page-container, .pcs-page-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 20px 0 0 0;
}

/* Blue Header Bar - Pale blue */
.internal-page-header-bar {
    background: #d5e7f4;
    padding: 25px 0;
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
    border-radius: 8px;
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
}

.internal-page-header-bar h3 {
    font-size: 28px;
    font-weight: 700;
    color: #0d3b59;
    margin: 0 0 8px 0;
}

.internal-page-header-bar .header-subtext {
    font-size: 15px;
    color: #3d5a6e;
    margin: 0;
}

/* Page Layout */
.internal-page-wrapper {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    max-width: 1170px;
    width: 100%;
    margin: 0 auto;
    padding: 0 0 40px 0;
    box-sizing: border-box;
}

.internal-page-content { min-width: 0; width: 100%; }

/* Content box */
.pcs-content-box, .bc-content-box {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 25px;
}

/* Hero image */
.pcs-hero-image {
    margin: 0 0 25px 0;
    border-radius: 8px;
    overflow: hidden;
}

.pcs-hero-image img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.pcs-intro-text {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 25px;
}

@media (max-width: 1100px) {
    .bc-page-container, .pcs-page-container { padding: 20px 15px 0 15px; }
    .internal-page-wrapper { display: block !important; padding: 0 0 40px 0; }
    .internal-page-content { display: block !important; width: 100% !important; margin-bottom: 30px; }
}

/* ========================================
   Hub Container & Header
   ======================================== */

.bc-hub-container { max-width: 100%; margin: 0; padding: 0; }

.bc-hub-header {
    background: #d5e7f4;
    padding: 25px 0;
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
    border-radius: 8px;
}

.bc-hub-header h2 { font-size: 28px; font-weight: 700; color: #0d3b59; margin: 0 0 8px 0; }
.bc-hub-header p { font-size: 15px; color: #3d5a6e; margin: 0; }

/* ========================================
   Hub Sections & Grid - 3 COLUMNS like landscaping
   ======================================== */

.bc-hub-section { margin-bottom: 30px; }
.bc-hub-section-title { font-size: 20px; font-weight: 700; color: #0d3b59; margin: 0 0 15px 0; padding-bottom: 10px; border-bottom: 2px solid #0d3b59; }

/* Hub Filters - matches paving calculator */
.bc-hub-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.bc-filter-btn {
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 25px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    color: #333;
}

.bc-filter-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.bc-filter-btn.active {
    background: #0d3b59;
    color: white;
    border-color: #0d3b59;
}

/* Grid - 3 columns by default */
.bc-hub-grid {
    display: grid;
    gap: 15px;
}

.bc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bc-grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) { .bc-hub-grid, .bc-grid-3, .bc-grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bc-hub-grid, .bc-grid-3, .bc-grid-2 { grid-template-columns: 1fr; } }

.bc-no-calculators {
    text-align: center;
    padding: 40px;
    color: #666;
    font-size: 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px dashed #e0e0e0;
    grid-column: 1 / -1;
}

/* ========================================
   Calculator Cards - MATCHES PAVING CARDS
   ======================================== */

.bc-hub-card {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.bc-hub-card:hover {
    box-shadow: 0 4px 12px rgba(13, 59, 89, 0.15);
    border-color: #0d3b59;
    transform: translateY(-3px);
}

.bc-hub-card-icon { font-size: 28px; color: #0d3b59; margin-bottom: 10px; line-height: 1; }
.bc-hub-card-content { flex: 1; display: flex; flex-direction: column; }
.bc-hub-card-title { font-size: 16px; margin: 0 0 8px 0; color: #1a1a1a; line-height: 1.3; font-weight: 600; }
.bc-hub-card-title a { color: inherit; text-decoration: none; }
.bc-hub-card-title a:hover { color: #0d3b59; }
.bc-hub-card-desc { font-size: 13px; color: #666; margin: 0 0 10px 0; flex: 1; line-height: 1.5; }
.bc-hub-card-formula { font-size: 12px; color: #888; font-style: italic; margin: 0 0 12px 0; }

/* Sponsor on Card */
.bc-card-sponsor { background: #fef3c7; padding: 8px 10px; border-radius: 4px; margin: 0 0 10px 0; border-left: 3px solid #f59e0b; }
.bc-card-sponsor-label { display: block; font-size: 10px; color: #b45309; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 2px; }
.bc-card-sponsor-name { display: block; font-size: 13px; font-weight: 700; color: #78350f; line-height: 1.3; }

/* Card Button - INSIDE CARD, full width - matches pcs-card-button */
.bc-card-button {
    display: block;
    padding: 12px 16px;
    background: #0d3b59;
    color: white !important;
    text-decoration: none;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s ease;
    margin-top: auto;
}

.bc-card-button:hover {
    background: #092a40;
    color: white !important;
}

/* Filter Animation */
.bc-hub-card.hidden {
    display: none;
}

/* ========================================
   See Also Section - SOLID border, bounce hover
   ======================================== */

.bc-see-also-section { margin-top: 25px; padding-top: 20px; border-top: 2px solid #0d3b59; }
.bc-see-also-section h3 { color: #0d3b59; margin: 0 0 15px 0; font-size: 18px; font-weight: 700; }
.bc-see-also-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; }
.bc-see-also-card { background: #f8fafc; padding: 18px; border-radius: 6px; border: 2px solid #e0e0e0; transition: all 0.2s ease; display: flex; align-items: center; gap: 15px; }
.bc-see-also-card:hover { border-color: #0d3b59; box-shadow: 0 4px 12px rgba(13, 59, 89, 0.15); transform: translateY(-3px); }
.bc-see-also-icon { font-size: 28px; color: #0d3b59; flex-shrink: 0; }
.bc-see-also-content h4 { margin: 0 0 5px 0; font-size: 16px; }
.bc-see-also-content h4 a { color: #0d3b59; text-decoration: none; font-weight: 600; }
.bc-see-also-content h4 a:hover { text-decoration: underline; }
.bc-see-also-content p { font-size: 13px; color: #6b7280; margin: 0; line-height: 1.4; }
.bc-hub-see-also { margin-top: 30px; }

/* ========================================
   Single Calculator Page Styles
   ======================================== */

.bc-calculator-wrapper, .pcs-calculator-wrapper { margin: 0; padding: 0; }

.pcs-calculator-tool { background: #f8fafc; border: 1px solid #e0e0e0; border-radius: 6px; padding: 25px; margin: 0; }
.pcs-calculator-tool h3 { margin: 0 0 20px 0; color: #0d3b59; font-size: 18px; font-weight: 700; }
.pcs-calculator-tool .calc-desc { margin: 0 0 20px 0; color: #666; font-size: 14px; }

/* Form Styles */
.pcs-calculator-form, .bc-calculator-form { display: grid; gap: 18px; }
.pcs-form-row, .bc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .pcs-form-row, .bc-form-row { grid-template-columns: 1fr; } }

.pcs-form-group, .bc-form-group { display: flex; flex-direction: column; }
.pcs-form-group label, .bc-form-group label { font-weight: 600; margin-bottom: 6px; color: #333; font-size: 14px; }
.pcs-form-group input, .pcs-form-group select, .bc-form-group input, .bc-form-group select { padding: 12px 14px; border: 1px solid #ddd; border-radius: 4px; font-size: 15px; transition: border-color 0.2s ease; background: #fff; }
.pcs-form-group input:focus, .pcs-form-group select:focus, .bc-form-group input:focus, .bc-form-group select:focus { outline: none; border-color: #0d3b59; box-shadow: 0 0 0 3px rgba(13, 59, 89, 0.1); }
.pcs-form-group small, .bc-form-group small { margin-top: 5px; color: #666; font-size: 13px; }
.pcs-form-actions, .bc-form-actions { display: flex; gap: 12px; margin-top: 8px; }

/* Buttons */
.pcs-calculate-btn, .bc-calculate-btn { padding: 12px 28px; font-size: 15px; font-weight: 600; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; background: #0d3b59; color: white; flex: 1; }
.pcs-calculate-btn:hover, .bc-calculate-btn:hover { background: #092a40; }
.pcs-reset-btn, .bc-reset-btn { padding: 12px 20px; font-size: 15px; font-weight: 600; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; background: #e5e7eb; color: #374151; }
.pcs-reset-btn:hover, .bc-reset-btn:hover { background: #d1d5db; }

/* Calculator Results */
.pcs-calculator-results, .bc-calculator-results { background: #fff; border: 2px solid #10b981; border-radius: 6px; padding: 20px; margin-top: 20px; }
.pcs-calculator-results h4, .bc-calculator-results h4 { margin: 0 0 15px 0; color: #065f46; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.pcs-calculator-results h4::before, .bc-calculator-results h4::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: #10b981; color: white; border-radius: 50%; font-size: 12px; font-weight: bold; }
.pcs-results-content, .bc-results-content { font-size: 15px; line-height: 1.6; }
.pcs-result-item, .bc-result-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #e5e7eb; }
.pcs-result-item:last-child, .bc-result-item:last-child { border-bottom: none; }
.pcs-result-label, .bc-result-label { font-weight: 500; color: #374151; }
.pcs-result-value, .bc-result-value { font-weight: 700; color: #0d3b59; font-size: 16px; }
.pcs-result-value.negative, .bc-result-value.negative { color: #dc2626; }
.pcs-result-summary, .bc-result-summary { background: #f0fdf4; padding: 15px; border-radius: 4px; margin-top: 15px; font-weight: 600; color: #065f46; border: 1px solid #bbf7d0; text-align: center; font-size: 16px; }

/* Pro Tips & Common Uses */
.pcs-calculator-info, .bc-calculator-info { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 25px; padding-top: 25px; border-top: 1px solid #e5e5e5; }
@media (max-width: 700px) { .pcs-calculator-info, .bc-calculator-info { grid-template-columns: 1fr; } }
.pcs-pro-tips, .pcs-common-uses, .bc-pro-tips, .bc-common-uses { background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 20px; }
.pcs-pro-tips, .bc-pro-tips { border-left: 4px solid #3b82f6; }
.pcs-common-uses, .bc-common-uses { border-left: 4px solid #f97316; }
.pcs-pro-tips h4, .pcs-common-uses h4, .bc-pro-tips h4, .bc-common-uses h4 { margin: 0 0 12px 0; color: #0d3b59; font-size: 15px; font-weight: 700; }
.pcs-pro-tips ul, .pcs-common-uses ul, .bc-pro-tips ul, .bc-common-uses ul { margin: 0; padding-left: 20px; line-height: 1.7; }
.pcs-pro-tips li, .pcs-common-uses li, .bc-pro-tips li, .bc-common-uses li { margin-bottom: 8px; color: #4b5563; font-size: 14px; }
.pcs-pro-tips li:last-child, .pcs-common-uses li:last-child, .bc-pro-tips li:last-child, .bc-common-uses li:last-child { margin-bottom: 0; }

/* Related Calculators */
.pcs-related-section, .bc-related-section { margin-top: 25px; padding-top: 25px; border-top: 1px solid #e5e5e5; }
.pcs-related-section h3, .pcs-related-section h4, .bc-related-section h3, .bc-related-section h4 { color: #0d3b59; margin: 0 0 18px 0; font-size: 18px; font-weight: 700; }
.pcs-related-grid, .bc-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; }
.pcs-related-card, .bc-related-card { background: #f8fafc; padding: 18px; border-radius: 6px; border: 2px solid #e0e0e0; transition: all 0.2s ease; }
.pcs-related-card:hover, .bc-related-card:hover { border-color: #0d3b59; box-shadow: 0 4px 12px rgba(13, 59, 89, 0.15); transform: translateY(-3px); }
.pcs-related-card h4, .pcs-related-card h5, .bc-related-card h4, .bc-related-card h5 { margin: 0 0 8px 0; font-size: 15px; }
.pcs-related-card h4 a, .pcs-related-card h5 a, .bc-related-card h4 a, .bc-related-card h5 a { color: #0d3b59; text-decoration: none; font-weight: 600; }
.pcs-related-card h4 a:hover, .pcs-related-card h5 a:hover, .bc-related-card h4 a:hover, .bc-related-card h5 a:hover { color: #092a40; text-decoration: underline; }
.pcs-related-card p, .bc-related-card p { font-size: 13px; color: #6b7280; margin: 0; line-height: 1.5; }

/* Back Button */
.pcs-back-button, .pcs-back-link, .bc-back-button, .bc-back-link { margin-top: 25px; padding-top: 25px; border-top: 2px solid #0d3b59; }
.pcs-back-button a, .pcs-back-link a, .pcs-back-btn, .bc-back-button a, .bc-back-link a, .bc-back-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: #0d3b59; color: white !important; text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 14px; transition: background 0.2s ease; }
.pcs-back-button a:hover, .pcs-back-link a:hover, .pcs-back-btn:hover, .bc-back-button a:hover, .bc-back-link a:hover, .bc-back-btn:hover { background: #092a40; color: white !important; }

/* ========================================
   Sponsor Banner Styles
   ======================================== */

.pcs-sponsor-banner, .bc-sponsor-banner { border-radius: 8px; padding: 15px 20px; margin-bottom: 20px; position: relative; transition: all 0.2s ease; }
.pcs-sponsor-clickable, .bc-sponsor-clickable { cursor: pointer; }
.pcs-sponsor-overlay, .bc-sponsor-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; border-radius: 8px; }

/* Colour variations */
.pcs-sponsor-gold, .bc-sponsor-gold { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 1px solid #f59e0b; }
.pcs-sponsor-gold .pcs-sponsor-label, .bc-sponsor-gold .bc-sponsor-label { color: #b45309; background: rgba(180, 83, 9, 0.12); }
.pcs-sponsor-gold .pcs-sponsor-name, .bc-sponsor-gold .bc-sponsor-name { color: #78350f; }
.pcs-sponsor-gold .pcs-sponsor-description, .bc-sponsor-gold .bc-sponsor-description { color: #92400e; }
.pcs-sponsor-banner.pcs-sponsor-gold.pcs-sponsor-clickable:hover { background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%); border-color: #d97706; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); transform: translateY(-2px); }

.pcs-sponsor-orange, .bc-sponsor-orange { background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%); border: 1px solid #f97316; }
.pcs-sponsor-purple, .bc-sponsor-purple { background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%); border: 1px solid #a855f7; }
.pcs-sponsor-teal, .bc-sponsor-teal { background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%); border: 1px solid #14b8a6; }
.pcs-sponsor-slate, .bc-sponsor-slate { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); border: 1px solid #94a3b8; }
.pcs-sponsor-green, .bc-sponsor-green { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); border: 1px solid #22c55e; }
.pcs-sponsor-blue, .bc-sponsor-blue { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); border: 1px solid #3b82f6; }
.pcs-sponsor-coral, .bc-sponsor-coral { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); border: 1px solid #f87171; }

/* Sponsor content */
.pcs-sponsor-content, .bc-sponsor-content { display: flex; align-items: center; gap: 15px; position: relative; z-index: 1; }
.pcs-sponsor-logo, .bc-sponsor-logo { flex-shrink: 0; }
.pcs-sponsor-logo img, .bc-sponsor-logo img { max-height: 60px; max-width: 100px; width: auto; display: block; border-radius: 4px; }
.pcs-sponsor-text, .bc-sponsor-text { flex: 1; }
.pcs-sponsor-label, .bc-sponsor-label { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 6px; padding: 3px 8px; border-radius: 3px; }
.pcs-sponsor-name, .bc-sponsor-name { display: block; font-size: 18px; font-weight: 700; margin-bottom: 4px; line-height: 1.2; }
.pcs-sponsor-description, .bc-sponsor-description { display: block; font-size: 13px; line-height: 1.4; font-weight: 400; }

@media (max-width: 500px) {
    .pcs-sponsor-content, .bc-sponsor-content { flex-direction: column; text-align: center; }
    .pcs-sponsor-logo img, .bc-sponsor-logo img { max-height: 40px; }
}

/* Responsive */
@media (max-width: 768px) {
    .bc-hub-header { padding: 20px 15px; }
    .bc-hub-header h2 { font-size: 22px; }
    .bc-hub-header p { font-size: 14px; }
    .pcs-calculator-tool { padding: 18px; }
    .pcs-form-actions, .bc-form-actions { flex-direction: column; }
    .pcs-calculate-btn, .pcs-reset-btn, .bc-calculate-btn, .bc-reset-btn { width: 100%; }
    .pcs-content-box, .bc-content-box { padding: 20px; }
    .internal-page-header-bar { padding: 20px 15px; }
    .internal-page-header-bar h3 { font-size: 22px; }
}

/* Print */
@media print {
    .bc-hub-card-link, .pcs-back-button, .pcs-back-link { display: none; }
    .pcs-calculator-results, .bc-calculator-results { border: 2px solid #000; }
}

/* Accessibility */
.pcs-calculate-btn:focus, .pcs-reset-btn:focus, .bc-calculate-btn:focus, .bc-reset-btn:focus { outline: 3px solid #0d3b59; outline-offset: 2px; }