/* Network Pages Styling - Scotland Network Page */

/* Base Styles */
.scotland-network-page {
    color: var(--main-bg-accent);
    line-height: 1.6;
}

.scotland-network-page * {
    box-sizing: border-box;
}

/* Utility Classes */
.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


/* Hero Section - Moved to main.css for better organization */

/* Trust indicators - Moved to main.css for better organization */


/* Buttons - Moved to main.css for better organization */

/* SVG Map - Moved to main.css with hero section */

.region-svg {
    width: 450px;
    height: auto;
    max-width: none;
}

.region-svg.uk-svg {
    width: 400px;
}

.scotland-svg {
}

.london-svg {
}

.region-svg.south-west-england-svg {
    width: 600px;
}

.region-svg.wales-svg {
    width: 500px;
}

.region-svg.central-east-england-svg {
    width: 550px;
}

.scotland-path {
    animation: subtle-pulse 4s ease-in-out infinite;
    transform-origin: center;
}

/* Static city dots */
.city-dot {
    fill: #f5a5a5;  /* Solid pinkish color that looks like dim white on red */
    opacity: 1;
    pointer-events: all;
    transition: fill 0.3s ease;
}

.city-dot:hover {
    fill: #fdd;  /* Lighter pink, closer to white */
    opacity: 1;
}

/* ========================================
   REGIONAL MAP ANIMATIONS
   ======================================== */

/* ========================================
   SCOTLAND MAP STYLES
   ======================================== */

/* Scotland City Dot Animations */
.scotland-svg .city-dot[cx="173"][cy="391"] {
    animation: glasgowGlow 9s linear infinite;
}

.scotland-svg .city-dot[cx="175"][cy="270"] {
    animation: invernessGlow 9s linear infinite;
}

.scotland-svg .city-dot[cx="230"][cy="388"] {
    animation: edinburghGlow 9s linear infinite;
}

.scotland-svg .city-dot[cx="242"][cy="328"] {
    animation: dundeeGlow 9s linear infinite;
}

.scotland-svg .city-dot[cx="292"][cy="267"] {
    animation: aberdeenGlow 9s linear infinite;
}

/* ========================================
   UK OVERVIEW MAP STYLES
   ======================================== */

/* UK City Dot Animations */
.uk-svg .city-dot[cx="433"][cy="865"] {
    animation: londonGlow 19s linear infinite;
}

.uk-svg .city-dot[cx="365"][cy="780"] {
    animation: birminghamGlow 19s linear infinite;
}

.uk-svg .city-dot[cx="320"][cy="705"] {
    animation: manchesterGlow 19s linear infinite;
}

.uk-svg .city-dot[cx="375"][cy="660"] {
    animation: leedsGlow 19s linear infinite;
}

.uk-svg .city-dot[cx="290"][cy="712"] {
    animation: liverpoolGlow 19s linear infinite;
}

.uk-svg .city-dot[cx="365"][cy="585"] {
    animation: newcastleGlow 19s linear infinite;
}

.uk-svg .city-dot[cx="287"][cy="499"] {
    animation: edinburghUKGlow 19s linear infinite;
}

.uk-svg .city-dot[cx="232"][cy="504"] {
    animation: glasgowUKGlow 19s linear infinite;
}

.uk-svg .city-dot[cx="315"][cy="869"] {
    animation: bristolGlow 19s linear infinite;
}

.uk-svg .city-dot[cx="278"][cy="869"] {
    animation: cardiffGlow 19s linear infinite;
}

.uk-svg .city-dot[cx="375"][cy="911"] {
    animation: southamptonGlow 19s linear infinite;
}

.uk-svg .city-dot[cx="505"][cy="769"] {
    animation: norwichGlow 19s linear infinite;
}

.uk-svg .city-dot[cx="332"][cy="389"] {
    animation: aberdeenUKGlow 19s linear infinite;
}

/* UK City Glow Keyframes - coordinated with route animations */
@keyframes londonGlow {
    0%, 4% { fill: #f5a5a5; }
    5%, 7% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    8%, 36% { fill: #f5a5a5; filter: none; }
    37%, 39% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    40%, 49% { fill: #f5a5a5; filter: none; }
    50%, 52% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    53%, 68% { fill: #f5a5a5; filter: none; }
    69%, 71% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    72%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes birminghamGlow {
    0%, 6% { fill: #f5a5a5; }
    7%, 9% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    10%, 55% { fill: #f5a5a5; filter: none; }
    56%, 58% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    59%, 75% { fill: #f5a5a5; filter: none; }
    76%, 78% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    79%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes manchesterGlow {
    0%, 11% { fill: #f5a5a5; }
    12%, 14% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    15%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes leedsGlow {
    0%, 17% { fill: #f5a5a5; }
    18%, 20% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    21%, 81% { fill: #f5a5a5; filter: none; }
    82%, 84% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    85%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes liverpoolGlow {
    0%, 58% { fill: #f5a5a5; }
    59%, 61% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    62%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes newcastleGlow {
    0%, 22% { fill: #f5a5a5; }
    23%, 25% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    26%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes edinburghUKGlow {
    0%, 28% { fill: #f5a5a5; }
    29%, 31% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    32%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes glasgowUKGlow {
    0%, 33% { fill: #f5a5a5; }
    34%, 36% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    37%, 62% { fill: #f5a5a5; filter: none; }
    63%, 65% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    66%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes bristolGlow {
    0%, 39% { fill: #f5a5a5; }
    40%, 42% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    43%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes cardiffGlow {
    0%, 44% { fill: #f5a5a5; }
    45%, 47% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    48%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes southamptonGlow {
    0%, 52% { fill: #f5a5a5; }
    53%, 55% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    56%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes norwichGlow {
    0%, 71% { fill: #f5a5a5; }
    72%, 74% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    75%, 88% { fill: #f5a5a5; filter: none; }
    89%, 91% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    92%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes aberdeenUKGlow {
    0%, 65% { fill: #f5a5a5; }
    66%, 68% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    69%, 100% { fill: #f5a5a5; filter: none; }
}

/* ========================================
   LONDON MAP STYLES
   ======================================== */

/* London City Dot Animations */
.london-svg .city-dot[cx="750"][cy="500"] {
    animation: cityOfLondonGlow 9s linear infinite;
}

.london-svg .city-dot[cx="650"][cy="520"] {
    animation: westminsterGlow 9s linear infinite;
}

.london-svg .city-dot[cx="900"][cy="550"] {
    animation: canaryWharfGlow 9s linear infinite;
}

.london-svg .city-dot[cx="350"][cy="480"] {
    animation: heathrowGlow 9s linear infinite;
}

.london-svg .city-dot[cx="700"][cy="750"] {
    animation: croydonGlow 9s linear infinite;
}

/* ========================================
   NORTHERN ENGLAND MAP STYLES
   ======================================== */

/* Northern England City Dot Animations */
.northern-england-svg .city-dot[cx="469"][cy="762"] {
    animation: liverpoolGlow 14s linear infinite;
}

.northern-england-svg .city-dot[cx="510"][cy="745"] {
    animation: manchesterGlow 14s linear infinite;
}

.northern-england-svg .city-dot[cx="600"][cy="700"] {
    animation: leedsGlow 14s linear infinite;
}

.northern-england-svg .city-dot[cx="640"][cy="680"] {
    animation: yorkGlow 14s linear infinite;
}

.northern-england-svg .city-dot[cx="590"][cy="537"] {
    animation: newcastleGlow 14s linear infinite;
}

.northern-england-svg .city-dot[cx="468"][cy="702"] {
    animation: blackpoolGlow 14s linear infinite;
}

.northern-england-svg .city-dot[cx="699"][cy="707"] {
    animation: hullGlow 14s linear infinite;
}

.northern-england-svg .city-dot[cx="615"][cy="590"] {
    animation: middlesbroughGlow 14s linear infinite;
}

.northern-england-svg .city-dot[cx="480"][cy="796"] {
    animation: chesterGlow 14s linear infinite;
}

.northern-england-svg .city-dot[cx="590"][cy="560"] {
    animation: durhamGlow 14s linear infinite;
}

/* ========================================
   CENTRAL & EAST ENGLAND MAP STYLES
   ======================================== */

/* Central & East England City Dot Animations */
/* Animations removed for fresh start */

/* Central & East England Trade Route Animations */
/* Long-distance courier routes with staggered animations - only 2-3 visible at once */

/* Routes cycle through with 3s duration and 3s gaps between starts */
.central-east-england-svg .route-1 {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 0s;
}

.central-east-england-svg .route-2 {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 3s;
}

.central-east-england-svg .route-3 {
    stroke-dasharray: 250;
    stroke-dashoffset: 250;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 6s;
}

.central-east-england-svg .route-4 {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 9s;
}

.central-east-england-svg .route-5 {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 12s;
}

.central-east-england-svg .route-6 {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 15s;
}

.central-east-england-svg .route-7 {
    stroke-dasharray: 230;
    stroke-dashoffset: 230;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 18s;
}

.central-east-england-svg .route-8 {
    stroke-dasharray: 350;
    stroke-dashoffset: 350;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 21s;
}

.central-east-england-svg .route-9 {
    stroke-dasharray: 380;
    stroke-dashoffset: 380;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 24s;
}

.central-east-england-svg .route-10 {
    stroke-dasharray: 250;
    stroke-dashoffset: 250;
    opacity: 0;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 27s;
    animation-fill-mode: both;
}

.central-east-england-svg .route-11 {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 30s;
}

.central-east-england-svg .route-12 {
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 33s;
}

.central-east-england-svg .route-13 {
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation: draw-route-medium 60s linear infinite;
    animation-delay: 36s;
}

.central-east-england-svg .route-14 {
    stroke-dasharray: 290;
    stroke-dashoffset: 290;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 39s;
}

.central-east-england-svg .route-15 {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 42s;
}

.central-east-england-svg .route-16 {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    opacity: 0;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 45s;
    animation-fill-mode: both;
}

.central-east-england-svg .route-17 {
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
    animation: draw-route-medium 60s linear infinite;
    animation-delay: 48s;
}

.central-east-england-svg .route-18 {
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation: draw-route-medium 60s linear infinite;
    animation-delay: 51s;
}

.central-east-england-svg .route-19 {
    stroke-dasharray: 250;
    stroke-dashoffset: 250;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 54s;
}

.central-east-england-svg .route-20 {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 57s;
}

.central-east-england-svg .route-21 {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 0s; /* Loop back to start */
}

.central-east-england-svg .route-22 {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 3s; /* Loop back */
}

.central-east-england-svg .route-23 {
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
    animation: draw-route-long 60s linear infinite;
    animation-delay: 6s; /* Loop back */
}

/* Central East England City Dot Animations */
.central-east-england-svg .city-dot[cx="857"][cy="872"] {
    animation: norwichCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="770"][cy="945"] {
    animation: cambridgeCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="715"][cy="887"] {
    animation: peterboroughCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="852"][cy="962"] {
    animation: ipswichCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="818"][cy="993"] {
    animation: colchesterCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="702"][cy="988"] {
    animation: lutonCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="803"][cy="1035"] {
    animation: southendCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="682"][cy="785"] {
    animation: lincolnCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="756"][cy="802"] {
    animation: skegnessCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="630"][cy="823"] {
    animation: nottinghamCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="597"][cy="837"] {
    animation: derbyCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="634"][cy="880"] {
    animation: leicesterCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="650"][cy="945"] {
    animation: northamptonCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="595"][cy="918"] {
    animation: coventryCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="560"][cy="897"] {
    animation: birminghamCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="540"][cy="893"] {
    animation: dudleyCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="535"][cy="880"] {
    animation: wolverhamptonCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="525"][cy="950"] {
    animation: worcesterCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="535"][cy="827"] {
    animation: stokeCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="480"][cy="872"] {
    animation: shrewsburyCEGlow 60s linear infinite;
}

.central-east-england-svg .city-dot[cx="480"][cy="970"] {
    animation: herefordCEGlow 60s linear infinite;
}

/* ========================================
   SOUTH EAST ENGLAND MAP STYLES
   ======================================== */

/* South East England City Dot Animations */
.south-east-england-svg .city-dot[cx="582"][cy="1198"] {
    animation: southamptonGlow 14s linear infinite;
}

.south-east-england-svg .city-dot[cx="625"][cy="1215"] {
    animation: portsmouthGlow 14s linear infinite;
}

.south-east-england-svg .city-dot[cx="630"][cy="1113"] {
    animation: readingGlow 14s linear infinite;
}

.south-east-england-svg .city-dot[cx="660"][cy="1100"] {
    animation: sloughGlow 14s linear infinite;
}

.south-east-england-svg .city-dot[cx="590"][cy="1065"] {
    animation: oxfordGlow 14s linear infinite;
}

.south-east-england-svg .city-dot[cx="695"][cy="1208"] {
    animation: worthingGlow 14s linear infinite;
}

.south-east-england-svg .city-dot[cx="757"][cy="1219"] {
    animation: eastbourneGlow 14s linear infinite;
}

.south-east-england-svg .city-dot[cx="710"][cy="1166"] {
    animation: crawleyGlow 14s linear infinite;
}

.south-east-england-svg .city-dot[cx="840"][cy="1140"] {
    animation: canterburyGlow 14s linear infinite;
}

.south-east-england-svg .city-dot[cx="785"][cy="1140"] {
    animation: maidstoneGlow 14s linear infinite;
}

/* South East England Trade Route Animation */
.south-east-england-svg .route-path {
    stroke-dasharray: 250;
    stroke-dashoffset: 250;
    animation: draw-route-south-east 14s linear infinite;
}

/* Scotland City Glow Keyframes */
@keyframes glasgowGlow {
    0%, 9% { fill: #f5a5a5; }
    10%, 15% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    20%, 30% { fill: #f5a5a5; filter: none; }
    31%, 36% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    41%, 100% { fill: #f5a5a5; filter: none; }
}

/* Aberdeen glows when Dundee route arrives AND when starting route to Inverness */
@keyframes aberdeenGlow {
    0%, 19% { fill: #f5a5a5; }
    20%, 25% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* When Dundee route arrives around 1.8s */
    30%, 45% { fill: #f5a5a5; filter: none; }
    46%, 51% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* When starting route to Inverness at 4.2s (46% of 9s) */
    56%, 100% { fill: #f5a5a5; filter: none; }
}

/* Inverness glows when routes arrive AND when starting route to Dundee */
@keyframes invernessGlow {
    0%, 19% { fill: #f5a5a5; }
    20%, 25% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* When Glasgow route arrives */
    30%, 50% { fill: #f5a5a5; filter: none; }
    51%, 56% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* When Aberdeen route arrives around 4.6s */
    61%, 76% { fill: #f5a5a5; filter: none; }
    77%, 82% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* When starting route to Dundee at 7s (77% of 9s) */
    87%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes edinburghGlow {
    0%, 35% { fill: #f5a5a5; }
    36%, 41% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* When Glasgow route arrives */
    46%, 61% { fill: #f5a5a5; filter: none; }
    62%, 67% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* When starting route to Dundee at 5.6s */
    72%, 100% { fill: #f5a5a5; filter: none; }
}

/* Dundee glows when Edinburgh route arrives AND when starting route to Aberdeen */
@keyframes dundeeGlow {
    0%, 14% { fill: #f5a5a5; }
    15%, 20% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* When starting route to Aberdeen at 1.4s (15% of 9s) */
    25%, 66% { fill: #f5a5a5; filter: none; }
    67%, 72% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* When Edinburgh route arrives */
    77%, 100% { fill: #f5a5a5; filter: none; }
}

/* London City Glow Animations */
@keyframes cityOfLondonGlow {
    0%, 9% { fill: #f5a5a5; }
    10%, 15% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    20%, 45% { fill: #f5a5a5; filter: none; }
    46%, 51% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    56%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes westminsterGlow {
    0%, 30% { fill: #f5a5a5; }
    31%, 36% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    41%, 75% { fill: #f5a5a5; filter: none; }
    76%, 81% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    86%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes canaryWharfGlow {
    0%, 15% { fill: #f5a5a5; }
    16%, 21% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    26%, 60% { fill: #f5a5a5; filter: none; }
    61%, 66% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    71%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes heathrowGlow {
    0%, 30% { fill: #f5a5a5; }
    31%, 36% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    41%, 92% { fill: #f5a5a5; filter: none; }
    93%, 98% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    99%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes croydonGlow {
    0%, 45% { fill: #f5a5a5; }
    46%, 51% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    56%, 61% { fill: #f5a5a5; filter: none; }
    62%, 67% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    72%, 100% { fill: #f5a5a5; filter: none; }
}

/* Central & East England City Glow Keyframes */
@keyframes cambridgeCEGlow {
    0%, 1% { fill: #f5a5a5; }
    2%, 3% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    4%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes nottinghamCEGlow {
    0%, 1% { fill: #f5a5a5; }
    2%, 3% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    4%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes birminghamCEGlow {
    0%, 4% { fill: #f5a5a5; }
    5%, 6% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    7%, 25% { fill: #f5a5a5; filter: none; }
    26%, 27% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    28%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes peterboroughCEGlow {
    0%, 5% { fill: #f5a5a5; }
    6%, 7% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    8%, 33% { fill: #f5a5a5; filter: none; }
    34%, 35% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    36%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes norwichCEGlow {
    0%, 6% { fill: #f5a5a5; }
    7%, 8% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    9%, 13% { fill: #f5a5a5; filter: none; }
    14%, 15% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    16%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes leicesterCEGlow {
    0%, 6% { fill: #f5a5a5; }
    7%, 8% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    9%, 30% { fill: #f5a5a5; filter: none; }
    31%, 32% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    33%, 90% { fill: #f5a5a5; filter: none; }
    91%, 92% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    93%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes lutonCEGlow {
    0%, 15% { fill: #f5a5a5; }
    16%, 17% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    18%, 21% { fill: #f5a5a5; filter: none; }
    22%, 23% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    24%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes lincolnCEGlow {
    0%, 16% { fill: #f5a5a5; }
    17%, 18% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    19%, 80% { fill: #f5a5a5; filter: none; }
    81%, 82% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    83%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes ipswichCEGlow {
    0%, 20% { fill: #f5a5a5; }
    21%, 22% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    23%, 74% { fill: #f5a5a5; filter: none; }
    75%, 76% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    77%, 90% { fill: #f5a5a5; filter: none; }
    91%, 92% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    93%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes stokeCEGlow {
    0%, 25% { fill: #f5a5a5; }
    26%, 27% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    28%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes southendCEGlow {
    0%, 30% { fill: #f5a5a5; }
    31%, 32% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    33%, 65% { fill: #f5a5a5; filter: none; }
    66%, 67% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    68%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes worcesterCEGlow {
    0%, 13% { fill: #f5a5a5; }
    14%, 15% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    16%, 35% { fill: #f5a5a5; filter: none; }
    36%, 37% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    38%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes shrewsburyCEGlow {
    0%, 21% { fill: #f5a5a5; }
    22%, 23% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    24%, 74% { fill: #f5a5a5; filter: none; }
    75%, 76% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    77%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes colchesterCEGlow {
    0%, 45% { fill: #f5a5a5; }
    46%, 47% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    48%, 75% { fill: #f5a5a5; filter: none; }
    76%, 77% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    78%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes derbyCEGlow {
    0%, 45% { fill: #f5a5a5; }
    46%, 47% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    48%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes skegnessCEGlow {
    0%, 50% { fill: #f5a5a5; }
    51%, 52% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    53%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes northamptonCEGlow {
    0%, 50% { fill: #f5a5a5; }
    51%, 52% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    53%, 85% { fill: #f5a5a5; filter: none; }
    86%, 87% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    88%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes herefordCEGlow {
    0%, 55% { fill: #f5a5a5; }
    56%, 57% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    58%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes coventryCEGlow {
    0%, 60% { fill: #f5a5a5; }
    61%, 62% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    63%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes dudleyCEGlow {
    0%, 85% { fill: #f5a5a5; }
    86%, 87% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    88%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes wolverhamptonCEGlow {
    0%, 70% { fill: #f5a5a5; }
    71%, 72% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    73%, 100% { fill: #f5a5a5; filter: none; }
}

/* South East England City Glow Keyframes */
@keyframes southamptonGlow {
    0%, 4% { fill: #f5a5a5; }
    5%, 9% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    10%, 39% { fill: #f5a5a5; filter: none; }
    40%, 44% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    45%, 59% { fill: #f5a5a5; filter: none; }
    60%, 64% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    65%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes portsmouthGlow {
    0%, 9% { fill: #f5a5a5; }
    10%, 14% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    15%, 39% { fill: #f5a5a5; filter: none; }
    40%, 44% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    45%, 59% { fill: #f5a5a5; filter: none; }
    60%, 64% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    65%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes readingGlow {
    0%, 14% { fill: #f5a5a5; }
    15%, 19% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    20%, 29% { fill: #f5a5a5; filter: none; }
    30%, 34% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    35%, 59% { fill: #f5a5a5; filter: none; }
    60%, 64% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    65%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes sloughGlow {
    0%, 29% { fill: #f5a5a5; }
    30%, 34% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    35%, 79% { fill: #f5a5a5; filter: none; }
    80%, 84% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    85%, 89% { fill: #f5a5a5; filter: none; }
    90%, 94% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    95%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes oxfordGlow {
    0%, 4% { fill: #f5a5a5; }
    5%, 9% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    10%, 19% { fill: #f5a5a5; filter: none; }
    20%, 24% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    25%, 49% { fill: #f5a5a5; filter: none; }
    50%, 54% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    55%, 89% { fill: #f5a5a5; filter: none; }
    90%, 94% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    95%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes worthingGlow {
    0%, 39% { fill: #f5a5a5; }
    40%, 44% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    45%, 49% { fill: #f5a5a5; filter: none; }
    50%, 54% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    55%, 69% { fill: #f5a5a5; filter: none; }
    70%, 74% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    75%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes eastbourneGlow {
    0%, 29% { fill: #f5a5a5; }
    30%, 34% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    35%, 49% { fill: #f5a5a5; filter: none; }
    50%, 54% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    55%, 79% { fill: #f5a5a5; filter: none; }
    80%, 84% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    85%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes crawleyGlow {
    0%, 14% { fill: #f5a5a5; }
    15%, 19% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    20%, 59% { fill: #f5a5a5; filter: none; }
    60%, 64% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    65%, 69% { fill: #f5a5a5; filter: none; }
    70%, 74% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    75%, 89% { fill: #f5a5a5; filter: none; }
    90%, 94% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    95%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes canterburyGlow {
    0%, 4% { fill: #f5a5a5; }
    5%, 9% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    10%, 49% { fill: #f5a5a5; filter: none; }
    50%, 54% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    55%, 79% { fill: #f5a5a5; filter: none; }
    80%, 84% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    85%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes maidstoneGlow {
    0%, 69% { fill: #f5a5a5; }
    70%, 74% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    75%, 79% { fill: #f5a5a5; filter: none; }
    80%, 84% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    85%, 100% { fill: #f5a5a5; filter: none; }
}

/* Northern England City Glow Keyframes */
@keyframes liverpoolGlow {
    0%, 9% { fill: #f5a5a5; }
    10%, 14% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Starting routes */
    15%, 59% { fill: #f5a5a5; filter: none; }
    60%, 64% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Chester route starts */
    65%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes manchesterGlow {
    0%, 4% { fill: #f5a5a5; }
    5%, 9% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Liverpool route arrives */
    10%, 49% { fill: #f5a5a5; filter: none; }
    50%, 54% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Blackpool route starts */
    55%, 79% { fill: #f5a5a5; filter: none; }
    80%, 84% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Newcastle route arrives */
    85%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes leedsGlow {
    0%, 14% { fill: #f5a5a5; }
    15%, 19% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Manchester route arrives */
    20%, 69% { fill: #f5a5a5; filter: none; }
    70%, 74% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Newcastle route starts */
    75%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes yorkGlow {
    0%, 24% { fill: #f5a5a5; }
    25%, 29% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Leeds route arrives */
    30%, 39% { fill: #f5a5a5; filter: none; }
    40%, 44% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Middlesbrough route starts */
    45%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes newcastleGlow {
    0%, 74% { fill: #f5a5a5; }
    75%, 79% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Leeds route arrives */
    80%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes blackpoolGlow {
    0%, 54% { fill: #f5a5a5; }
    55%, 59% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Manchester route arrives */
    60%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes hullGlow {
    0%, 34% { fill: #f5a5a5; }
    35%, 39% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* York route arrives */
    40%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes middlesbroughGlow {
    0%, 44% { fill: #f5a5a5; }
    45%, 49% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* York route arrives */
    50%, 89% { fill: #f5a5a5; filter: none; }
    90%, 94% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Durham route arrives */
    95%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes chesterGlow {
    0%, 64% { fill: #f5a5a5; }
    65%, 69% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Liverpool route arrives */
    70%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes durhamGlow {
    0%, 84% { fill: #f5a5a5; }
    85%, 89% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Middlesbrough route starts */
    90%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes subtle-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Scotland Trade Route Animation */
.scotland-svg .route-path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: draw-route 9s linear infinite;
}

/* UK Overview Trade Route Animation */
.uk-svg .route-path {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: draw-route-uk 19s linear infinite;
}

/* London Trade Route Animation (scaled 4x) */
.london-svg .route-path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: draw-route-london 9s linear infinite;
}

/* Central & East England Trade Route Animation */
/* Animation removed for fresh start */

/* Northern England Trade Route Animation */
.northern-england-svg .route-path {
    stroke-dasharray: 250;
    stroke-dashoffset: 250;
    animation: draw-route-northern 14s linear infinite;
}

@keyframes draw-route {
    0% {
        stroke-dashoffset: 200;
        opacity: 0;
    }
    10% {
        opacity: 0.4;
    }
    40% {
        stroke-dashoffset: 0;
        opacity: 0.6;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

@keyframes draw-route-short {
    0% {
        stroke-dashoffset: 100;
        opacity: 0;
    }
    20% {
        opacity: 0.3;
    }
    50% {
        stroke-dashoffset: 0;
        opacity: 0.5;
    }
    70% {
        opacity: 0.3;
    }
    100% {
        stroke-dashoffset: -100;
        opacity: 0;
    }
}

@keyframes draw-route-medium {
    0% {
        stroke-dashoffset: 150;
        opacity: 0;
    }
    2% {
        opacity: 0.3;
    }
    8% {
        stroke-dashoffset: 0;
        opacity: 0.5;
    }
    10% {
        opacity: 0.3;
    }
    12% {
        stroke-dashoffset: -150;
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes draw-route-long {
    0% {
        stroke-dashoffset: 300;
        opacity: 0;
    }
    2% {
        opacity: 0.3;
    }
    8% {
        stroke-dashoffset: 0;
        opacity: 0.5;
    }
    10% {
        opacity: 0.3;
    }
    12% {
        stroke-dashoffset: -300;
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes draw-route-uk {
    0% {
        stroke-dashoffset: 400;
        opacity: 0;
    }
    5% {
        opacity: 0.4;
    }
    30% {
        stroke-dashoffset: 0;
        opacity: 0.6;
    }
    40% {
        opacity: 0.4;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

@keyframes draw-route-london {
    0% {
        stroke-dashoffset: 800;
        opacity: 0;
    }
    10% {
        opacity: 0.4;
    }
    40% {
        stroke-dashoffset: 0;
        opacity: 0.6;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}


@keyframes draw-route-south-east {
    0% {
        stroke-dashoffset: 250;
        opacity: 0;
    }
    7% {
        opacity: 0.4;
    }
    35% {
        stroke-dashoffset: 0;
        opacity: 0.6;
    }
    45% {
        opacity: 0.4;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

/* ========================================
   SOUTH WEST ENGLAND MAP STYLES
   ======================================== */

/* South West England City Dot Animations */
.south-west-england-svg .city-dot[cx="500"][cy="1058"] {
    animation: bristolGlow 14s linear infinite;
}

.south-west-england-svg .city-dot[cx="407"][cy="1178"] {
    animation: exeterGlow 14s linear infinite;
}

.south-west-england-svg .city-dot[cx="566"][cy="1161"] {
    animation: bournemouthSWGlow 14s linear infinite;
}

.south-west-england-svg .city-dot[cx="350"][cy="1212"] {
    animation: plymouthGlow 14s linear infinite;
}

.south-west-england-svg .city-dot[cx="264"][cy="1214"] {
    animation: newquayGlow 14s linear infinite;
}

.south-west-england-svg .city-dot[cx="470"][cy="1079"] {
    animation: westonSuperMareGlow 14s linear infinite;
}

/* South West England Trade Route Animation */
.south-west-england-svg .route-path {
    stroke-dasharray: 250;
    stroke-dashoffset: 250;
    opacity: 0;
    animation: draw-route-south-west 14s linear infinite;
}

/* South West England City Glow Keyframes */
@keyframes bristolGlow {
    0%, 4% { fill: #f5a5a5; }
    5%, 9% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Newquay route arrives */
    10%, 19% { fill: #f5a5a5; filter: none; }
    20%, 24% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Plymouth route starts */
    25%, 59% { fill: #f5a5a5; filter: none; }
    60%, 64% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Exeter route starts */
    65%, 79% { fill: #f5a5a5; filter: none; }
    80%, 84% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Plymouth route arrives */
    85%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes exeterGlow {
    0%, 29% { fill: #f5a5a5; }
    30%, 34% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Bournemouth route starts */
    35%, 59% { fill: #f5a5a5; filter: none; }
    60%, 64% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Bristol route arrives */
    65%, 89% { fill: #f5a5a5; filter: none; }
    90%, 94% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Newquay route starts */
    95%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes bournemouthSWGlow {
    0%, 9% { fill: #f5a5a5; filter: none; }
    10%, 13% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Weston-super-Mare route arrives */
    14%, 29% { fill: #f5a5a5; filter: none; }
    30%, 33% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Exeter route arrives */
    34%, 51% { fill: #f5a5a5; filter: none; }
    52%, 55% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Newquay route arrives */
    56%, 69% { fill: #f5a5a5; filter: none; }
    70%, 73% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Weston-super-Mare route starts */
    74%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes plymouthGlow {
    0%, 19% { fill: #f5a5a5; }
    20%, 24% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Bristol route arrives */
    25%, 39% { fill: #f5a5a5; filter: none; }
    40%, 44% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Weston-super-Mare route starts */
    45%, 79% { fill: #f5a5a5; filter: none; }
    80%, 84% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Bristol route starts */
    85%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes newquayGlow {
    0%, 4% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Bristol route starts */
    5%, 49% { fill: #f5a5a5; filter: none; }
    50%, 54% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Bournemouth route starts */
    55%, 89% { fill: #f5a5a5; filter: none; }
    90%, 94% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Exeter route arrives */
    95%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes westonSuperMareGlow {
    0%, 9% { fill: #f5a5a5; }
    10%, 14% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Bournemouth route starts */
    15%, 39% { fill: #f5a5a5; filter: none; }
    40%, 44% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Plymouth route arrives */
    45%, 69% { fill: #f5a5a5; filter: none; }
    70%, 74% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Bournemouth route arrives */
    75%, 100% { fill: #f5a5a5; filter: none; }
}

/* South West England Trade Route Draw Animation */
@keyframes draw-route-south-west {
    0% {
        stroke-dashoffset: 250;
        opacity: 0;
    }
    7% {
        opacity: 0.4;
    }
    35% {
        stroke-dashoffset: 0;
        opacity: 0.6;
    }
    45% {
        opacity: 0.4;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

/* ========================================
   WALES MAP STYLES
   ======================================== */

/* Wales City Dot Animations */
.wales-svg .city-dot[cx="440"][cy="1051"] {
    animation: cardiffGlow 14s linear infinite;
}

.wales-svg .city-dot[cx="458"][cy="1038"] {
    animation: newportGlow 14s linear infinite;
}

.wales-svg .city-dot[cx="460"][cy="820"] {
    animation: wrexhamGlow 14s linear infinite;
}

.wales-svg .city-dot[cx="349"][cy="792"] {
    animation: bangorGlow 14s linear infinite;
}

.wales-svg .city-dot[cx="365"][cy="1029"] {
    animation: swanseaGlow 14s linear infinite;
}

.wales-svg .city-dot[cx="368"][cy="910"] {
    animation: aberystwythGlow 14s linear infinite;
}

.wales-svg .city-dot[cx="303"][cy="963"] {
    animation: cardiganGlow 14s linear infinite;
}

/* Wales Trade Route Animation */
.wales-svg .route-path {
    stroke-dasharray: 250;
    stroke-dashoffset: 250;
    opacity: 0;
    animation: draw-route-wales 14s linear infinite;
}

/* Wales City Glow Keyframes */
@keyframes cardiffGlow {
    0%, 39% { fill: #f5a5a5; filter: none; }
    40%, 44% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Wrexham route arrives */
    45%, 89% { fill: #f5a5a5; filter: none; }
    90%, 94% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Aberystwyth route arrives */
    95%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes newportGlow {
    0%, 9% { fill: #f5a5a5; filter: none; }
    10%, 14% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Cardiff route arrives */
    15%, 19% { fill: #f5a5a5; filter: none; }
    20%, 24% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Wrexham route arrives */
    25%, 69% { fill: #f5a5a5; filter: none; }
    70%, 74% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Swansea route arrives */
    75%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes wrexhamGlow {
    0%, 19% { fill: #f5a5a5; filter: none; }
    20%, 24% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Newport route starts */
    25%, 39% { fill: #f5a5a5; filter: none; }
    40%, 44% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Cardiff route starts */
    45%, 79% { fill: #f5a5a5; filter: none; }
    80%, 84% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Bangor route arrives */
    85%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes bangorGlow {
    0%, 4% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Aberystwyth route starts */
    5%, 59% { fill: #f5a5a5; filter: none; }
    60%, 64% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Cardigan route arrives */
    65%, 79% { fill: #f5a5a5; filter: none; }
    80%, 84% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Wrexham route starts */
    85%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes swanseaGlow {
    0%, 29% { fill: #f5a5a5; filter: none; }
    30%, 34% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Cardigan route arrives */
    35%, 49% { fill: #f5a5a5; filter: none; }
    50%, 54% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Aberystwyth route arrives */
    55%, 69% { fill: #f5a5a5; filter: none; }
    70%, 74% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Newport route starts */
    75%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes aberystwythGlow {
    0%, 4% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Bangor route arrives */
    5%, 49% { fill: #f5a5a5; filter: none; }
    50%, 54% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Swansea route starts */
    55%, 89% { fill: #f5a5a5; filter: none; }
    90%, 94% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Cardiff route starts */
    95%, 100% { fill: #f5a5a5; filter: none; }
}

@keyframes cardiganGlow {
    0%, 29% { fill: #f5a5a5; filter: none; }
    30%, 34% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Swansea route starts */
    35%, 59% { fill: #f5a5a5; filter: none; }
    60%, 64% { fill: white; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }  /* Bangor route starts */
    65%, 100% { fill: #f5a5a5; filter: none; }
}

/* Wales Trade Route Draw Animation */
@keyframes draw-route-wales {
    0% {
        stroke-dashoffset: 250;
        opacity: 0;
    }
    7% {
        opacity: 0.4;
    }
    35% {
        stroke-dashoffset: 0;
        opacity: 0.6;
    }
    45% {
        opacity: 0.4;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

@keyframes draw-route-northern {
    0% {
        stroke-dashoffset: 250;
        opacity: 0;
    }
    7% {
        opacity: 0.4;
    }
    35% {
        stroke-dashoffset: 0;
        opacity: 0.6;
    }
    45% {
        opacity: 0.4;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

/* Coverage Strip - Moved to main.css for better organization */

/* Badge styles - Moved to main.css for better organization */

/* Professional Directory Section - Clean Style */
.locations-directory-section {
    padding: 30px 0 80px 0;
    min-height: 600px;
}

.directory-header {
    text-align: left;
    margin-bottom: 32px;
    padding-left: 24px;
}

.directory-header h2 {
    color: var(--main-bg-accent);
    font-size: 2.25rem;
    font-weight: bold;
    margin: 0 0 12px;
}

.directory-subtitle {
    color: var(--main-bg-accent);
    font-size: 1.125rem;
    margin: 0;
}

/* Directory Layout - Two Column with Sticky Sidebar */
.directory-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    align-items: start;
}

/* Sidebar with Search */
.directory-sidebar {
    position: sticky;
    top: 20px;
    background: var(--main-bg-white);
    border: 1px solid var(--main-bg-grey-medium);
    border-radius: 12px;
    overflow: hidden;
    min-height: 100%;
}

.sidebar-content {
    padding: 24px;
}

.sidebar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--main-bg-accent);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 16px;
}

.sidebar-title i {
    color: var(--main-bg-secondary);
    font-size: 1rem;
}

/* Search Section */
.search-section {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--main-bg-grey-medium);
}

.search-input-wrapper input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--main-bg-grey-medium);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all var(--animation-duration);
    box-sizing: border-box;
}

.search-input-wrapper input:focus {
    outline: none;
    border-color: var(--main-bg-secondary);
    box-shadow: 0 0 0 3px rgba(68, 100, 173, 0.1);
}

.search-input-wrapper input::placeholder {
    color: var(--main-bg-accent);
    opacity: 0.6;
}

/* Filter Section */
.filter-section {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--main-bg-grey-medium);
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.filter-checkbox input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--main-bg-grey-medium);
    border-radius: 4px;
    position: relative;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.filter-checkbox input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--main-bg-secondary);
    border-color: var(--main-bg-secondary);
}

.filter-checkbox input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '✓';
    color: var(--main-bg-white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    font-size: 0.875rem;
    font-weight: bold;
    animation: checkmark-pop 0.2s ease;
}

@keyframes checkmark-pop {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--main-bg-accent);
    font-size: 0.95rem;
}

.filter-label i {
    color: var(--main-bg-secondary);
    font-size: 0.875rem;
}

.filter-checkbox:hover .checkbox-custom {
    border-color: var(--main-bg-secondary);
}

.filter-checkbox:hover .filter-label {
    color: var(--main-bg-accent);
}

/* Results Info */
.results-info {
    margin: 0;
}

.results-count {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--main-bg-accent);
    font-size: 0.9rem;
    margin: 0;
}

.results-count i {
    color: var(--main-bg-secondary);
    font-size: 0.875rem;
}

/* Main Directory Container */
.directory-container {
    background: var(--main-bg-white);
    border: 1px solid var(--main-bg-grey-medium);
    border-radius: 12px;
    overflow: hidden;
}

/* Directory List */
.directory-list {
    padding: 0;
}

/* Directory Cards - Clean List Style */
.directory-card {
    background: var(--main-bg-white);
    border-bottom: 1px solid var(--main-bg-grey-medium);
    transition: all var(--animation-duration);
    position: relative;
}

.directory-card:last-child {
    border-bottom: none;
}

.directory-card:hover {
    background: rgba(68, 100, 173, 0.03);
}

/* Card Content */
.card-content {
    padding: 24px 32px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.location-title h3,
.location-title-heading {
    font-weight: bolder;
    margin: 0 0 12px;
    font-size: 1.5rem;
}

.title-link {
    color: var(--main-bg-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all var(--animation-duration);
}

.title-link:hover {
    color: var(--main-bg-secondary);
    text-decoration: underline;
}

.title-link i {
    color: var(--main-bg-color);
    font-size: 1.125rem;
}

/* Service Badges */
.service-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Badge variants - Moved to main.css for better organization */

/* Rating Section */
.rating-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.stars {
    color: var(--main-bg-gold);
    font-size: 0.9rem;
}

.rating-text {
    color: var(--main-bg-accent);
    font-size: 0.875rem;
}

/* Card Body */
.card-body {
    margin-bottom: 20px;
}

.location-description {
    color: var(--main-bg-accent);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 16px;
}

.location-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.meta-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--main-bg-accent);
    font-size: 0.925rem;
}

.meta-item i {
    color: var(--main-bg-secondary);
    font-size: 0.875rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.meta-item strong {
    color: var(--main-bg-accent);
    font-weight: 600;
}

.more-areas {
    color: var(--main-bg-secondary);
    font-weight: 500;
}

/* Card Footer - Action Links */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--main-bg-grey-medium);
    flex-wrap: wrap;
    gap: 20px;
}

.contact-section {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.btn-call,
.btn-quote,
.btn-details {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--main-bg-accent);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all var(--animation-duration);
}

.btn-call:hover,
.btn-quote:hover,
.btn-details:hover {
    color: var(--main-bg-secondary);
    text-decoration: underline;
}

.btn-call i,
.btn-quote i,
.btn-details i {
    font-size: 0.875rem;
    opacity: 0.7;
}

.btn-details i {
    transition: transform var(--animation-duration);
}

.btn-details:hover i {
    transform: translateX(2px);
}

/* Pagination Styles */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-top: 1px solid var(--main-bg-grey-medium);
    background: var(--main-bg-grey-medium);
    flex-wrap: wrap;
    gap: 16px;
}

.pagination-info {
    color: var(--main-bg-accent);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    overflow: hidden;
}

.page-numbers {
    display: flex;
    gap: 4px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 2px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--main-bg-grey-medium) transparent;
}

/* Custom scrollbar for page numbers */
.page-numbers::-webkit-scrollbar {
    height: 4px;
}

.page-numbers::-webkit-scrollbar-track {
    background: transparent;
}

.page-numbers::-webkit-scrollbar-thumb {
    background: var(--main-bg-grey-medium);
    border-radius: 2px;
}

.page-numbers::-webkit-scrollbar-thumb:hover {
    background: var(--main-bg-secondary);
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    background: var(--main-bg-white);
    border: 1px solid var(--main-bg-grey-medium);
    border-radius: 6px;
    color: var(--main-bg-accent);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    transform: scale(1);
    flex-shrink: 0;
}

.page-btn:hover:not(:disabled) {
    background: var(--main-bg-secondary);
    border-color: var(--main-bg-secondary);
    color: var(--main-bg-white);
    transform: scale(1.05);
}

.page-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-btn.active {
    background: var(--main-bg-secondary);
    border-color: var(--main-bg-secondary);
    color: var(--main-bg-white);
    animation: button-pop 0.2s ease;
}

@keyframes button-pop {
    0% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.page-prev,
.page-next {
    padding: 0 10px;
}

.page-prev i,
.page-next i {
    font-size: 0.75rem;
}

/* Generic Content Sections */
.content-section {
    padding: 60px 0;
}

.content-section.border-top {
    border-top: 1px solid var(--main-bg-grey-medium);
}

.content-section.bg-white {
    background: var(--main-bg-white);
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header h2 {
    font-size: 2.25rem;
    font-weight: bold;
    margin: 0 0 16px;
}

.section-subtitle {
    font-size: 1.125rem;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 700px;
}

.section-subtitle.no-maxwidth {
    max-width: unset;
}

/* Font Awesome Duotone Icon Styling */
.fa-duotone {
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.4;
}

/* Badge icon styles - Moved to main.css for better organization */

.sidebar-title .fa-duotone {
    --fa-primary-color: var(--main-bg-secondary);
    --fa-secondary-color: var(--main-bg-secondary);
    --fa-secondary-opacity: 0.3;
}

.filter-label .fa-duotone,
.results-count .fa-duotone {
    --fa-primary-color: var(--main-bg-secondary);
    --fa-secondary-color: var(--main-bg-secondary);
    --fa-secondary-opacity: 0.4;
}


/* Old Location Card styles (removed - using list view instead) */
.location-card {
    background: var(--main-bg-white);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: all var(--animation-duration);
    position: relative;
    display: flex;
    flex-direction: column;
}

.location-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--main-bg-secondary), var(--main-bg-color));
    border-radius: var(--radius) var(--radius) 0 0;
    transform: scaleX(0);
    transition: transform var(--animation-duration);
}

.location-card:hover,
.location-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.location-card:hover::before,
.location-card:focus-within::before {
    transform: scaleX(1);
}

.location-card h3 {
    color: var(--main-bg-accent);
    font-size: 1.25rem;
    margin: 0 0 12px;
}

.location-card p {
    color: var(--text-light);
    font-size: 0.95rem;
    margin: 0 0 16px;
    flex-grow: 1;
}

/* Surrounding areas badge */
.location-card .surrounding-areas {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    color: var(--main-bg-accent);
    font-size: 0.85rem;
}

.location-card .surrounding-areas i {
    font-size: 0.875rem;
}

/* Contact info */
.location-card .contact-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
}

.location-card .contact-info i {
    color: var(--main-bg-secondary);
    font-size: 0.875rem;
}

.location-card .contact-number {
    color: var(--main-bg-accent);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color var(--animation-duration);
}

.location-card .contact-number:hover {
    color: var(--main-bg-accent);
}

/* Learn more link */
.location-card .learn-more-link {
    color: var(--main-bg-accent);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap var(--animation-duration);
    margin-top: auto;
}

.location-card .learn-more-link:hover,
.location-card .learn-more-link:focus {
    gap: 12px;
    text-decoration: underline;
}

.location-card .learn-more-link i {
    flex-shrink: 0;
    transition: transform var(--animation-duration);
    font-size: 0.875rem;
}

.location-card .learn-more-link:hover i,
.location-card .learn-more-link:focus i {
    transform: translateX(4px);
}

/* Links Tray */
.links-tray {
    padding: 40px 0;
    background: var(--main-bg-accent);
    color: var(--main-bg-white);
}

.links-grid {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-wrap: wrap;
    gap: 32px;
}

.quick-links h3 {
    color: var(--main-bg-white);
    font-size: 1.125rem;
    font-weight: bold;
    margin: 0 0 16px;
}

.quick-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.quick-links a {
    color: var(--main-bg-white);
    text-decoration: none;
    font-weight: normal;
    opacity: 0.9;
    transition: opacity var(--animation-duration);
}

.quick-links a:hover,
.quick-links a:focus {
    opacity: 1;
    text-decoration: underline;
}

.back-link {
    color: var(--main-bg-white);
    text-decoration: none;
    font-weight: 600;
    padding: 12px 24px;
    border: 2px solid var(--main-bg-white);
    border-radius: var(--radius);
    display: inline-block;
    transition: all var(--animation-duration);
}

.back-link:hover,
.back-link:focus {
    background: var(--main-bg-white);
    color: var(--main-bg-accent);
}

/* Responsive Design - Medium screens */
@media (max-width: 1024px) {
    .pagination-container {
        padding: 20px 24px;
    }

    /* Hide some middle page numbers on medium screens if more than 10 pages */
    .page-numbers .page-btn:not(.active):not(:first-child):not(:last-child):nth-child(n+6):nth-last-child(n+6) {
        display: none;
    }

    /* Show ellipsis after 5th button if there are many hidden pages */
    .page-numbers .page-btn:not(.active):nth-child(5):nth-last-child(n+7)::after {
        content: "...";
        position: absolute;
        right: -16px;
        color: var(--main-bg-accent);
        pointer-events: none;
    }
}

/* Responsive Design - Small screens */
@media (max-width: 768px) {
    /* Hero styles moved to main.css */

    /* Trust styles moved to main.css */

    /* Hero styles moved to main.css */

    .region-svg.uk-svg {
        width: 250px;
        margin-bottom: 18px;
    }

    .region-svg.scotland-svg {
        width: 300px;
        margin-bottom: 18px;
    }
    
    .region-svg.london-svg {
        width: 400px;
        margin-bottom: 24px;
    }

    .region-svg.central-east-england-svg {
        width: 380px;
        margin-bottom: 12px;
    }

    .region-svg.northern-england-svg {
        width: 300px;
    }

    .region-svg.south-west-england-svg {
        width: 450px;
    }

    .region-svg.wales-svg {
        margin-bottom: 18px;
    }
    
    /* Coverage styles moved to main.css */
    
    /* Badge responsive styles moved to main.css */
    
    .directory-card {
        margin-bottom: 0;
    }
    
    .card-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .rating-info {
        align-items: flex-start;
    }
    
    .card-footer {
        flex-direction: column;
        align-items: stretch;
    }
    
    .contact-section {
        width: 100%;
    }
    
    .contact-section {
        gap: 16px;
    }
    
    .card-footer {
        gap: 16px;
    }
    
    .directory-layout {
        grid-template-columns: 1fr;
    }
    
    .directory-sidebar {
        position: relative;
        top: auto;
        min-height: unset;
    }
    
    .directory-container {
        border-radius: 8px;
    }
    
    .card-content {
        padding: 20px;
    }
    
    
    .links-grid {
        flex-direction: column;
    }
    /* Pagination responsive fixes */
    .pagination-container {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }
    
    .pagination-info {
        text-align: center;
        font-size: 0.85rem;
    }
    
    .pagination {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .page-numbers {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
    }
    
    .page-btn {
        min-width: 32px;
        height: 32px;
        font-size: 0.85rem;
        padding: 0 8px;
    }
    
    /* Hide some page numbers on very small screens to prevent overflow */
    .page-btn:not(.active):not(.page-prev):not(.page-next):nth-child(n+4):nth-last-child(n+4) {
        display: none;
    }
    
    /* Show ellipsis for hidden pages */
    .page-btn:not(.active):not(.page-prev):not(.page-next):nth-child(3):nth-last-child(n+4)::after {
        content: "...";
        position: absolute;
        right: -12px;
    }
}

@media (max-width: 480px) {
    .sidebar-content {
        padding: 16px;
    }
    
    .search-section,
    .filter-section {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    
    /* Hero styles moved to main.css */
    
    /* Button styles moved to main.css */
    
    /* Coverage styles moved to main.css */
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .scotland-path,
    .city-dot {
        animation: none;
    }
}

/* Focus Styles for Accessibility */
a:focus,
button:focus {
    outline: 2px solid var(--main-bg-secondary);
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    /* Hero and Coverage styles moved to main.css */
    .links-tray {
        display: none;
    }
    
    /* Button styles moved to main.css */
}