/* =============================================
   General & Base Styles
   ============================================= */
/* General Body Styles */
:root {
	--primary-red: #7D0000;
	--link-blue: #000080;
	--border-grey: #ccc;
	--bg-grey: #e9e9e9;
}
body {
	font-family: Calibri, sans-serif;
	background-color: var(--bg-grey);
	color: #333;
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
	padding: 0;
}
.page-container {
	max-width: 960px;
	margin: 0 auto;
	border-left: 1px solid var(--border-grey);
	border-right: 1px solid var(--border-grey);
	background-color: #fff;
}
a { color: var(--link-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
/* --- DEFAULT (DESKTOP) STYLES --- */

.mobile-header, .mobile-nav-panel, .mobile-league-forms, .mobile-text {
	display: none;
}

.site-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
}
.site-header img { max-height: 60px; }
.strapline {
	background-color: black;
	padding: 8px 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
}
.strapline a {
	color: white;
	font-weight: bold;
}
.strapline a:hover {
	color: #CC0000;
	text-decoration: none;
}
.top-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}
.top-links li {
	padding: 0 10px;
}
.top-links li + li {
	border-left: 2px solid #aaa;
}

.main-layout { display: flex; }
.left-sidebar { width: 175px; padding: 10px; border-right: 1px solid var(--border-grey); box-sizing: border-box;}
.main-content { flex: 1; padding: 10px; min-width: 0; box-sizing: border-box;}
.right-sidebar { width: 175px; padding: 10px; border-left: 1px solid var(--border-grey); box-sizing: border-box;}

.main-content h1 { font-size: 1.2rem; margin-top: 0; }

/* --- Form Element Consistency --- */
select, input[type="text"], input[type="password"], input[type="submit"], button {
	font-family: Calibri, sans-serif;
	font-size: 13px;
}
.menu-box { margin-bottom: 10px; }
.menu-box-header {
	background-color: var(--primary-red);
	color: #fff;
	font-weight: bold;
	padding: 6px 8px;
	font-size: 13px;
}
.menu-box-content {
	border: 1px solid var(--border-grey);
	border-top: none;
	padding: 10px;
	font-size: 12px;
	background-color: var(--bg-grey);
}
.menu-box-content select, 
.menu-box-content label,
.menu-box-content input[type="text"],
.menu-box-content input[type="password"] { 
	width: 100%; 
	padding: 5px; 
	margin: 5px 0 0 0; 
	border: 1px solid #999; 
	box-sizing: border-box;
}
.menu-box-content label { 
	border: none; 
	padding: 0; 
	margin-bottom: 2px; 
	display: block; 
	background-color: transparent; 
}
.menu-box-content ul { list-style: none; margin: 0; padding: 0; }
/* --- Sidebar Box Specific Styles --- */
.login-box .menu-box-content {
	padding: 8px;
}
.login-box input[type="text"], 
.login-box input[type="password"] {
	margin-bottom: 8px;
}
.info-box ul {
	 list-style: none;
}
.info-box li {
	padding-left: 18px;
	background: url('img/but-arrow.gif') no-repeat left center;
	margin-bottom: 8px;
}
footer {
	text-align: center;
	padding: 15px;
	border-top: 1px solid var(--border-grey);
	font-size: 12px;
}
/* --- Specific Link Color Overrides --- */
.featured-item-details h3 a,
.right-sidebar .menu-box-content a,
.desktop-text .delivery-link,
footer a {
	color: black;
}
.featured-item-details h3 a:hover,
.right-sidebar .menu-box-content a:hover,
.desktop-text .delivery-link:hover,
footer a:hover {
	color: var(--primary-red);
}

/* --- Featured Programmes Styles --- */
.featured-programmes-container { margin-top: 20px; }
.featured-programmes-header { font-weight: bold; font-size: 1.1em; margin-bottom: 10px; }
.featured-programmes-grid { display: flex; flex-wrap: wrap; gap: 15px; }
.featured-item { flex: 1 1 45%; background-color: #EFEEF4; border: 1px solid var(--border-grey); padding: 10px; display: flex; gap: 5px; min-width: 250px; box-sizing: border-box; }
.featured-item-image img { width: 65px; height: 94px; display: block; border: 1px solid var(--border-grey); }
.featured-item-details { display: flex; flex-direction: column; font-size: 13px; }
.featured-item-details h3 { margin: 0 0 5px 0; font-size: 1em; }
.featured-item-details p { margin: 0; font-size: 1em; }
.featured-item-actions { margin-top: auto; }
.featured-item-price { font-weight: bold; margin: 8px 0 5px 0; }
.featured-item-button { display: inline-block; background-color: var(--primary-red); color: #fff !important; padding: 4px 8px; border-radius: 3px; font-size: 12px; font-weight: bold; text-align: center; border: none; cursor: pointer; }
.featured-item-button:hover { background-color: #A60100; text-decoration: none; color: #fff; }
/* --- Search Results Styles --- */
.results-count {
	margin: 10px 0;
	font-style: italic;
	color: #555;
}
.search-results-container {
	margin-top: 15px;
}
.result-item {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 10px;
	background-color: #EFEFF4;
	border: 1px solid #ddd;
	margin-bottom: 10px;
	border-radius: 3px;
}
.result-item-image {
	flex-shrink: 0;
}
.result-item-image img {
	width: 52px;
	height: 75px;
	border: 1px solid var(--border-grey);
	display: block;
}
.result-item-details {
	flex-grow: 1;
	font-size: 14px;
}
.result-item-details p {
	margin: 0 0 4px 0;
}
.result-item-details p:last-child {
	margin-bottom: 0;
}
.result-item-price {
	font-size: 1.1em;
	color: var(--primary-red);
	margin-top: 8px !important;
}
.result-item-actions {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.result-item-button {
	display: block;
	background-color: var(--primary-red);
	color: #fff !important;
	padding: 5px 12px;
	border-radius: 3px;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	border: none;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 5px;
}
.result-item-button:hover {
	background-color: #A60100;
	text-decoration: none;
	color: #fff;
}
/* Main container for the content */
.content-container, /* Alias for consistency */
.container {
    width: 90%;
    max-width: 960px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h2 {
    color: #333;
    border-bottom: 2px solid #eaeaea;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
h3 {
    margin-top: 0;
}
p {
    margin-bottom: 15px;
}
hr {
    border: 0;
    height: 1px;
    background: #ddd;
    margin: 30px 0;
}
/* Generic message styles */
.errorMsg, .successMsg, .info-message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid transparent;
}
.errorMsg {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.successMsg {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.info-message {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
/* =============================================
   Form Styles
   ============================================= */
.form-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="tel"],
.responsive-form input[type="text"],
.responsive-form input[type="password"],
.responsive-form input[type="email"],
.responsive-form input[type="tel"],
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Important for padding to not affect width */
    font-size: 16px;
}
.form-group .required-star {
    color: #990000;
}
fieldset {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 25px;
    margin-top: 20px;
}
legend {
    font-size: 1.2em;
    font-weight: bold;
    padding: 0 10px;
    color: #333;
}
.btn {
    display: inline-block;
    background-color: #005a9c; /* Changed to site theme color */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    width: auto;
}
.btn:hover {
    background-color: #003660; /* Darker shade for hover */
}
.btn.btn-secondary {
    background-color: #6c757d;
}
.btn.btn-secondary:hover {
    background-color: #5a6268;
}
.form-info {
    font-size: 0.9em;
    color: #666;
    margin-top: 15px;
}
/* Grid for login/register sections */
.grid-container {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 40px;
}
/* =============================================
   My Account Page Styles
   ============================================= */
/* Main navigation on the account page */
.account-nav {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #ddd;
}
.account-nav h3 {
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}
.account-nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}
.account-nav li a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #005a9c;
    border-radius: 5px;
    transition: background-color 0.2s ease-in-out;
}
.account-nav li a:hover {
    background-color: #e9eff3;
    color: #003660;
}
/* Card for displaying customer details */
.details-card {
    padding: 25px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    line-height: 1.7;
}
.details-card strong {
    color: #333;
    font-weight: 600;
}
/* Accordion for Order History */
.order-accordion {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #fff;
}
.order-accordion summary {
    padding: 15px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}
.order-accordion summary:hover {
    background-color: #f5f5f5;
}
.order-accordion[open] > summary {
    border-bottom: 1px solid #ccc;
    background-color: #f0f0f0;
}
.order-accordion summary::after {
    content: '+';
    font-size: 1.5em;
    color: #005a9c;
    transition: transform 0.2s ease-in-out;
}
.order-accordion[open] summary::after {
    transform: rotate(45deg);
}
.order-accordion-content {
    padding: 15px;
    line-height: 1.6;
}
.order-accordion-content ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}
/* Responsive Table for Order Search */
.order-list-header, .order-list-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1fr;
    gap: 15px;
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
    align-items: center;
}
.order-list-header {
    font-weight: bold;
    background-color: #f9f9f9;
}
/* =============================================
   Shopping Basket Page Styles (Updated)
   ============================================= */
.basket-container {
    width: 100%;
    margin: 0 auto;
}
.basket-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 25px 0; /* Increased vertical padding */
    border-bottom: 1px solid #eee;
}
.basket-item-details {
    flex-grow: 1;
}
.basket-item-details h3 {
    margin: 0 0 10px 0; /* Added bottom margin */
    font-size: 1.2em;  /* Increased font size */
    font-weight: 600;
    line-height: 1.4; /* Improved line height */
}
.basket-item-price {
    font-size: 1.3em; /* Increased font size */
    font-weight: bold;
    color: #333;
    min-width: 100px;
    text-align: right;
    margin-left: 20px;
}
.basket-item-actions {
    display: flex;
    align-items: center;
    margin-top: 10px;
    width: 100%;
}
.quantity-controls {
    display: flex;
    align-items: center;
    margin-right: 25px; /* Increased spacing */
}
/* This hides the plus/minus buttons but keeps the quantity visible */
.quantity-controls a {
    display: none;
}
/* Updated style for the quantity number */
.quantity-controls span {
    display: inline-block;
    padding: 8px 18px; /* Increased padding */
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    min-width: 30px;
    text-align: center;
    border-radius: 4px;
    font-size: 1.1em; /* Increased font size */
}
.remove-item-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #d9534f;
    font-size: 1em; /* Increased font size */
    padding: 5px;
}
.remove-item-btn:hover {
    text-decoration: underline;
}
.basket-totals {
    margin-top: 30px;
    padding: 25px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #ddd;
    /* max-width and margin-left properties removed to allow full width */
}
.totals-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0; /* Increased vertical padding */
    font-size: 1.2em; /* Increased font size */
}
.totals-row.grand-total {
    font-weight: bold;
    font-size: 1.4em; /* Increased font size */
    border-top: 2px solid #ddd;
    margin-top: 10px;
    padding-top: 15px;
}
.basket-actions {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 15px;
}
.checkout-info {
    margin-top: 30px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

        /* --- MOBILE STYLES START HERE --- */
@media (max-width: 800px) {
	.site-header, .strapline, .left-sidebar, .right-sidebar, .desktop-text { display: none; }
	.mobile-header, .mobile-text { display: block; }
	.mobile-header { display: flex; justify-content: space-between; align-items: center; background-color: var(--primary-red); color: #fff; padding: 10px 15px; }
	.mobile-header-title { font-weight: bold; font-size: 18px; }
	.hamburger-menu { font-size: 24px; cursor: pointer; user-select: none; }
	.mobile-nav-panel { background-color: #f4f4f4; border-bottom: 1px solid var(--border-grey); }
	.mobile-nav-panel h3 { margin: 0; padding: 15px 15px 10px 15px; color: #333; background-color: #e9e9e9; font-size: 16px; }
	.mobile-nav-panel ul { list-style: none; padding: 0; margin: 0; }
	.mobile-nav-panel li a { display: block; padding: 12px 15px; border-bottom: 1px solid #ddd; font-weight: bold; color: #000080; }
	.mobile-nav-panel li:last-child a { border-bottom: none; }
	.mobile-league-forms { display: block; padding: 15px 10px; }
	.mobile-grid-container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
	.mobile-grid-container .menu-box { flex: 1 1 48%; margin-bottom: 0; }
	.mobile-league-forms .menu-box-header { font-size: 1em; text-align: center; padding: 8px 5px; }
	.mobile-league-forms .menu-box-content { padding: 8px; }
	.mobile-league-forms .menu-box-content select { font-size: 1em; padding: 8px; margin: 0; }
	.mobile-league-forms .advanced-search-box { flex-basis: 100%; }
	.mobile-league-forms .advanced-search-box select { margin-bottom: 8px; }
	
	/* Class to show the mobile menu */
	.mobile-nav-panel.is-open {
		 display: block;
	}
	
	/* Hide buttons on mobile search results */
	.result-item-actions {
		 display: none;
	}
}

/* =============================================
   Responsive Styles
   ============================================= */
/* For tablets and desktops */
@media (min-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr 1fr;
    }
    
    .registration-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px 30px; /* 20px vertical gap, 30px horizontal */
    }
}
/* For smaller tablets */
@media (min-width: 600px) {
    .basket-item-actions {
        width: auto; /* Allow actions to sit next to details */
        margin-top: 0;
    }
}
/* For mobile phones */
@media (max-width: 767px) {
    .btn,
    .form-section {
        width: 100%;
        box-sizing: border-box;
    }
    .grid-container {
        gap: 20px;
    }
    .form-section {
        padding: 15px;
    }
    h2 {
        font-size: 1.5em;
    }
    /* Order Search Table on Mobile */
    .order-list-header {
        display: none;
    }
    .order-list-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    .order-list-row > div::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
        color: #555;
    }
}