/* Universal poll styles derived from gb-polls for consistency */

:root{
	--color-labour:#E4003B;
	--color-conservative:#0087DC;
	--color-libdem:#FDBB30;
	--color-greens:#008066;
	--color-snp:#FCD34D;
	--color-pc:#3F8428;
	--color-reform:#12B6CF;
	--color-alba:#00AEEF;
	--color-others:#808080;
	--color-primary:#1E3A8A;
	--muted:#6b7280;
	--bg-card:#ffffff;
	--border:#e5e7eb;
}

/* Buttons */
.btn{
	display:inline-flex; align-items:center; justify-content:center;
	padding:8px 12px; border:1px solid var(--border); border-radius:8px;
	background:#ffffff; color:#1f2937; font-weight:600; cursor:pointer;
}
.btn-primary{ background: var(--color-primary); color:#fff; border-color: var(--color-primary); }
.btn-secondary{ background:#f3f4f6; color:#1f2937; }
.btn.is-active{ box-shadow:0 0 0 2px rgba(30,58,138,0.15); }

/* Containers */
.data-container{ margin: 20px 0; }
.data-header h3{ margin: 0 0 8px 0; }
.chart-container{ position:relative; }

/* Snapshot (controls) bar */
.snapshot-bar{ background:#fff; border:1px solid var(--border); border-radius:8px; padding:8px 12px; box-shadow:0 2px 4px rgba(0,0,0,0.05); }
.snapshot-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.snapshot-title{ font-weight:600; margin-right:8px; }
.snapshot-meta{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* Map/chart footnotes */
.map-source{ font-size:0.85rem; color:#6b7280; }

.poll-control-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
    flex-wrap:wrap;
}
.control-group{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.control-group--right{ margin-left:auto; gap:12px; }
.btn-group{ display:flex; align-items:center; gap:8px; }
.pill-btn{
    height:34px;
    padding:0 14px;
    border:1px solid #d7dde5;
    border-radius:14px;
    background:#fff;
    color:#1f2937;
    font-weight:600;
    font-size:0.9rem;
    cursor:pointer;
    transition:all .15s ease;
}
.pill-btn.is-active{
    background:#1e3a8a;
    color:#fff;
    border-color:#1e3a8a;
    box-shadow:0 0 0 2px rgba(30,58,138,0.12);
}
.pill-btn--ghost{background:transparent;color:#1f2937;}
.pill-btn--ghost.is-active{background:#1e3a8a;color:#fff;border-color:#1e3a8a;}
.pill-btn:hover{
    border-color:#1e3a8a;
    color:#1e3a8a;
}
.toggle{
    display:inline-flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    user-select:none;
}
.toggle input{ display:none; }
.toggle-slider{
    width:36px;
    height:20px;
    border-radius:12px;
    background:#e5e7eb;
    position:relative;
    transition:all .15s ease;
}
.toggle-slider::after{
    content:'';
    position:absolute;
    top:2px; left:2px;
    width:16px; height:16px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,0.2);
    transition:all .15s ease;
}
.toggle input:checked + .toggle-slider{
    background:#1e3a8a;
}
.toggle input:checked + .toggle-slider::after{
    transform:translateX(16px);
}
.toggle-label{
    font-weight:600;
    color:#1f2937;
    font-size:0.9rem;
}
.icon-btn{
    height:34px;
    width:40px;
    border:1px solid #d7dde5;
    border-radius:12px;
    background:#fff;
    color:#1f2937;
    font-weight:700;
    font-size:1rem;
    cursor:pointer;
    transition:all .15s ease;
}
.icon-btn:hover{
    border-color:#1e3a8a;
    color:#1e3a8a;
}

.has-tip{
    position:relative;
}
.has-tip::after{
    content: attr(data-tip);
    position:absolute;
    left:50%;
    bottom:calc(100% + 10px);
    transform:translate(-50%, 0);
    background:rgba(15,23,42,0.92);
    color:#fff;
    padding:8px 10px;
    border-radius:8px;
    font-size:0.8rem;
    line-height:1.3;
    white-space:normal;
    max-width:240px;
    text-align:center;
    box-shadow:0 6px 16px rgba(0,0,0,0.18);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.12s ease, transform 0.12s ease;
    z-index:20;
}
.has-tip:hover::after,
.has-tip:focus-visible::after{
    opacity:1;
    transform:translate(-50%, -2px);
}
.has-tip::before{
    content:'';
    position:absolute;
    left:50%;
    bottom:calc(100% + 2px);
    transform:translate(-50%, 0);
    border:6px solid transparent;
    border-top-color:rgba(15,23,42,0.92);
    opacity:0;
    transition:opacity 0.12s ease;
    z-index:19;
}
.has-tip:hover::before,
.has-tip:focus-visible::before{
    opacity:1;
}

.poll-mobile-controls{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;}
.poll-mobile-bar{display:flex;align-items:center;gap:8px;}
.poll-drawer{background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:10px;box-shadow:0 8px 20px rgba(15,23,42,0.06);}
.drawer-section{display:flex;flex-direction:column;gap:8px;}
.drawer-label{font-weight:600;font-size:0.9rem;color:#1f2937;}
.drawer-subrow{margin-top:4px;}
.date-input{width:100%;height:34px;border:1px solid #d7dde5;border-radius:8px;padding:6px 10px;font-size:0.9rem;}
.chip-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;}
.chip{flex:0 0 auto;border:1px solid #d7dde5;border-radius:14px;padding:6px 12px;font-size:0.9rem;background:#fff;cursor:pointer;}
.chip.is-active{background:#1e3a8a;color:#fff;border-color:#1e3a8a;}
.chart-wrap-mobile{margin-top:8px;margin-bottom:8px;}
#gbChart{height:620px !important;}
.chart-shell canvas{min-height:400px;}
.mobile-only{display:none !important;}
.desktop-only{display:flex;}
.poll-drawer[hidden]{display:none !important;}
@media (max-width:768px){
    .mobile-only{display:flex !important;}
    .desktop-only{display:none !important;}
    .poll-control-bar{margin-bottom:6px;}
    .snapshot-bar.mobile-hide{display:none;}
    .poll-mobile-controls{padding-top:10px;}
    .poll-mobile-bar{padding-top:4px;}
    #gbChart{height:440px !important;}
    .chart-shell canvas{min-height:340px;}
}

/* FT/538-inspired layout */
.ft-block{margin-bottom:18px;}
.ft-heading{margin:0 0 10px 0;font-size:1.35rem;font-weight:700;color:#0f172a;letter-spacing:-0.01em;}
.ft-legend{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;margin:6px 0 10px 0;font-size:0.92rem;font-weight:400;color:#1f2937;line-height:1.3;}
.ft-legend-item{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:0;}
.ft-dot{width:9px;height:9px;border-radius:999px;display:inline-block;}
.ft-legend-label{font-weight:400;}
.ft-legend-value{font-weight:600;margin-left:2px;}
.chart-shell{position:relative;border:1px solid #e5e7eb;border-radius:12px;padding:0 0 10px 0;background:#fff;}
.chart-stage{position:relative;padding-top:54px;}
.primary-bar{position:absolute;top:10px;left:12px;right:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.primary-bar .pill-btn{height:34px;padding:0 12px;}
.primary-bar .toggle{gap:8px;}
.primary-bar .icon-btn{height:34px;width:38px;border-radius:12px;}
.compare-bar{padding:10px 12px 8px 12px; display:flex; flex-direction:column; gap:6px;}
.compare-bar-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.secondary-controls{margin-top:14px;display:flex;flex-direction:column;gap:10px;}
.ft-subtext{font-size:0.9rem;color:#475569;font-weight:400;}
.secondary-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.secondary-row .btn-group .pill-btn{height:32px;padding:0 12px;}
.compare-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.compare-inline .pill-btn{height:32px;padding:0 10px;}
.compare-inline .date-input{width:auto;min-width:180px;height:32px;border-radius:10px;}
.compare-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.compare-pills .pill{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;font-size:0.9rem;color:#0f172a;box-shadow:0 1px 2px rgba(0,0,0,0.04);}
.compare-pills .pill .dot{width:10px;height:10px;border-radius:999px;display:inline-block;}
.compare-pills .pill .delta.up{color:#065f46;}
.compare-pills .pill .delta.down{color:#b91c1c;}
.desktop-pins{padding-bottom:2px;}
.chart-shell canvas{display:block;width:100%;}
.compare-overlay{position:absolute;top:56px;right:12px;z-index:5;background:rgba(255,255,255,0.96);border:1px solid #e5e7eb;box-shadow:0 6px 18px rgba(0,0,0,0.08);border-radius:10px;padding:10px 12px;max-width:92%;}
.compare-overlay-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.compare-overlay-head strong{font-size:0.95rem;color:#1E3A8A;}
.compare-overlay-body{margin-top:6px;font-size:0.9rem;color:#374151;line-height:1.4;}
.chartjs-legend{display:none !important; height:0 !important; overflow:hidden !important; padding:0 !important; margin:0 !important; border:0 !important;}
.mobile-controls-wrap{display:none;flex-direction:column;gap:8px;margin:10px 0 8px 0;}
.poll-mobile-bar .pill-btn{height:34px;padding:0 12px;}
.poll-mobile-bar .icon-btn{height:34px;width:38px;border-radius:12px;}
.poll-drawer{transition:transform .18s ease, opacity .18s ease;transform-origin:top;transform:translateY(-6px);opacity:0;}
.poll-drawer.is-open{transform:translateY(0);opacity:1;}

@media (max-width:768px){
    .chart-shell{padding:0;border-radius:10px;}
    .chart-stage{padding-top:0;}
    .mobile-controls-wrap{display:flex;}
}


/* Poll grids and cards */
.poll-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin:12px 0; }
.poll-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:12px; box-shadow:0 2px 4px rgba(0,0,0,0.05); }
.poll-card h4{ margin:0 0 6px 0; font-size:0.95rem; }
.poll-card .poll-value{ font-weight:700; font-size:1.6rem; }
.poll-card .poll-change{ color:var(--muted); font-size:0.85rem; margin-top:4px; }
.latest-polls-cards-mobile{ display:none; }
@media (max-width:768px){
	.poll-grid{ display:none; }
	.latest-polls-cards-mobile{ display:grid; grid-template-columns: repeat(2,1fr); gap:8px; }
	.latest-poll-card-mobile{ background:#fff; border:1px solid var(--border); border-radius:8px; padding:10px; display:flex; flex-direction:column; gap:4px; min-height:80px; }
	.latest-poll-card-mobile h4{ margin:0 0 4px 0; font-size:0.9rem; font-weight:600; }
	.latest-poll-card-mobile .poll-value{ font-weight:700; font-size:1.4rem; }
	.latest-poll-card-mobile .poll-change{ font-size:0.8rem; color:var(--muted); }
}

/* Recent polls preview cards */
.recent-polls-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.recent-poll-card{ background:#fff; border:1px solid var(--border); border-radius:8px; padding:12px; box-shadow:0 2px 4px rgba(0,0,0,0.05); }
@media (max-width:768px){
	.recent-polls-grid{ grid-template-columns: repeat(2,1fr); gap:8px; }
	.recent-poll-card{ padding:10px; }
}
.recent-poll-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.recent-poll-title{ font-weight:600; }
.recent-poll-date{ font-size:0.85rem; color:var(--muted); }
.recent-poll-pills{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.recent-poll-pill{ display:inline-flex; align-items:center; gap:6px; font-size:0.85rem; padding:4px 8px; border-radius:999px; border:2px solid var(--border); color:#374151; }
.recent-poll-pill.labour{ border-color: var(--color-labour); color: var(--color-labour); }
.recent-poll-pill.conservative{ border-color: var(--color-conservative); color: var(--color-conservative); }
.recent-poll-pill.libdem{ border-color: var(--color-libdem); color: var(--color-libdem); }
.recent-poll-pill.greens{ border-color: var(--color-greens); color: var(--color-greens); }
.recent-poll-pill.snp{ border-color: var(--color-snp); color: #7c6a00; }
.recent-poll-pill.pc{ border-color: var(--color-pc); color: var(--color-pc); }
.recent-poll-pill.reform{ border-color: var(--color-reform); color: var(--color-reform); }
.recent-poll-pill.alba{ border-color: var(--color-alba); color: var(--color-alba); }
.recent-poll-pill.others{ border-color: var(--color-others); color: var(--color-others); }

/* Pin bar */
#gbPinBar, #hrPinBar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* Data tables */
.data-table-container{ overflow:auto; -webkit-overflow-scrolling: touch; }
.data-table{ width:100%; border-collapse: collapse; min-width: 600px; }
.data-table th, .data-table td{ border:1px solid var(--border); padding:8px; text-align:left; white-space: nowrap; }
.data-table thead th{ background:#f3f4f6; font-weight:600; }
/* No-grid variant for cleaner look */
.data-table.no-grid th, .data-table.no-grid td{ border: 0; border-bottom: 1px solid var(--border); }
.data-table.no-grid thead th{ background: transparent; border-bottom: 2px solid var(--border); }
.data-table.no-grid tbody tr:last-child td{ border-bottom: 0; }
/* Collapsible section */
.collapsible-section{ margin-top:12px; }
.collapsible-toggle{ 
	display:flex; 
	align-items:center; 
	justify-content:space-between; 
	width:100%; 
	padding:12px 16px; 
	background:#f8fafc; 
	border:1px solid var(--border); 
	border-radius:8px; 
	cursor:pointer; 
	font-weight:600; 
	font-size:0.95rem; 
	color:#1f2937;
	transition:all 0.2s ease;
}
.collapsible-toggle:hover{ background:#f1f5f9; border-color:#cbd5e1; }
.collapsible-toggle .toggle-icon{ 
	transition:transform 0.2s ease; 
	font-size:0.9rem; 
	color:#64748b;
}
.collapsible-toggle[aria-expanded="true"] .toggle-icon{ transform:rotate(180deg); }
.collapsible-content{ 
	display:none; 
	margin-top:12px; 
}
.collapsible-content.is-expanded{ 
	display:block !important; 
}
.recent-polls-cards{ display:none; }
@media (max-width: 768px) {
	.data-table-container{ 
		overflow-x: auto; 
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
		display: block;
		width: 100%;
	}
	.data-table{ 
		display: table;
		width: 100%;
		min-width: 600px;
	}
	.data-table-container.desktop-only{ display:none !important; }
	.collapsible-section .mobile-only{ display:block; }
	.collapsible-section .desktop-only{ display:none !important; }
	.collapsible-content.mobile-only{ 
		display:none !important; 
	}
	.collapsible-content.mobile-only.is-expanded{ 
		display:block !important; 
	}
	/* Only show cards when parent is expanded */
	.collapsible-content.mobile-only .recent-polls-cards{ 
		display:none; 
	}
	.collapsible-content.mobile-only.is-expanded .recent-polls-cards{ 
		display:grid !important; 
		grid-template-columns: repeat(2,1fr); 
		gap:8px; 
		margin-top:12px;
	}
	.collapsible-content.mobile-only.is-expanded .recent-polls-cards .recent-poll-card{ 
		padding:10px; 
		font-size:0.85rem;
	}
}
@media (min-width: 769px) {
	.collapsible-section .mobile-only{ display:none !important; }
	.collapsible-section .desktop-only{ display:block !important; }
}

/* Chart default height for polls */
#gbChart, #hrChart, #walesChart, #scotChart, #seneddChart{ height:180px; }

/* Tabs styling to match Custom Seat Calculator */
.tab-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 2px solid #e5e7eb;
}
.tab-btn {
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.2s;
    margin-bottom: -2px;
}
.tab-btn.active {
    color: #2563EB;
    border-bottom-color: #2563EB;
    font-weight: 600;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Social media tooltip */
.social-tooltip {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.875rem;
    color: #0369a1;
}

.social-tooltip p {
    margin: 0 0 10px 0;
    font-weight: 500;
}

.social-tooltip-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 100%;
}

.social-tooltip-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    overflow: hidden;
}

.social-tooltip-btn i {
    font-size: 1.1rem;
    width: 18px;
    text-align: center;
}

.social-icon-img {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    min-width: 18px;
    min-height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    vertical-align: middle;
}

.social-tooltip-btn span {
    font-size: 0.875rem;
}

/* X (Twitter) button styling */
.social-btn-x {
    background: #000000;
    color: #ffffff;
    border: 1px solid #000000;
}

.social-btn-x:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: #ffffff;
}

.social-btn-x i {
    color: #ffffff;
}

/* Instagram button styling */
.social-btn-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #ffffff;
    border: 1px solid transparent;
}

.social-btn-instagram:hover {
    background: linear-gradient(45deg, #e0852e 0%, #d55d31 25%, #cc1f38 50%, #b81f5b 75%, #a71573 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(188, 24, 136, 0.3);
    color: #ffffff;
}

.social-btn-instagram i {
    color: #ffffff;
}

@media (max-width: 768px) {
    .social-tooltip {
        font-size: 0.8rem;
        padding: 10px 12px;
    }
    
    /* Mobile: Hide methodology content by default, show toggle button */
    #gb-methodology-toggle-mobile {
        display: inline-block !important;
    }
    
    #gb-methodology-content {
        display: none !important;
    }
    
    #gb-methodology-content.mobile-open {
        display: block !important;
    }
}

/* Desktop: Show methodology content, hide toggle button */
@media (min-width: 769px) {
    #gb-methodology-toggle-mobile {
        display: none !important;
    }
    
    #gb-methodology-content {
        display: block !important;
    }
}
    
    .social-tooltip-links {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .social-tooltip-btn {
        width: 100%;
        justify-content: center;
        padding: 10px 14px;
    }
    
    /* Polling averages mobile grid */
    #polling-averages-grid{ 
        grid-template-columns: repeat(2,1fr); 
        gap:8px; 
    }
    #polling-averages-mobile{ 
        display:grid; 
        grid-template-columns: repeat(2,1fr); 
        gap:8px; 
    }
    .poll-card{ 
        padding:10px; 
    }
    .poll-card h4{ 
        font-size:0.9rem; 
    }
    .poll-card .poll-value{ 
        font-size:1.4rem; 
    }
    
    /* Mobile spacing improvements */
    .data-container{ 
        margin:16px 0; 
    }
    .data-header h3{ 
        font-size:1.2rem; 
        margin-bottom:10px; 
    }
    .data-content{ 
        margin-top:8px; 
    }
    
    /* Touch-friendly targets */
    .collapsible-toggle{ 
        min-height:44px; 
        touch-action:manipulation; 
    }
    .recent-poll-card{ 
        min-height:44px; 
        touch-action:manipulation; 
    }
    .latest-poll-card-mobile{ 
        min-height:80px; 
        touch-action:manipulation; 
    }
    
    /* Recent polls cards in last 15 section */
    .recent-polls-cards .recent-poll-card{ 
        display:flex; 
        flex-direction:column; 
        gap:8px; 
    }
    .recent-polls-cards .recent-poll-header{ 
        flex-direction:column; 
        align-items:flex-start; 
        gap:4px; 
    }
    .recent-polls-cards .recent-poll-date{ 
        font-size:0.8rem; 
        font-weight:600; 
    }
    .recent-polls-cards .recent-poll-meta{ 
        display:flex; 
        flex-direction:column; 
        gap:2px; 
        font-size:0.75rem; 
    }
    .recent-polls-cards .recent-poll-parties{ 
        display:flex; 
        flex-direction:column; 
        gap:4px; 
        margin-top:4px; 
    }
    .recent-polls-cards .recent-poll-party-item{ 
        display:flex; 
        justify-content:space-between; 
        align-items:center; 
        padding:4px 0; 
        font-size:0.8rem; 
    }
    .recent-polls-cards .recent-poll-party-name{ 
        font-weight:500; 
    }
    .recent-polls-cards .recent-poll-party-value{ 
        font-weight:600; 
    }
}