/* General page structure and elements */
.kw-tariffs-main {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
    font-family: sans-serif; /* Basic font stack */
}

.kw-tariffs-page-header {
    margin-bottom: 25px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
}

.kw-tariffs-page-title {
    font-size: 2.2em;
    color: #23282d; /* WordPress dark gray */
    margin: 0;
}

/* Note below main page header */
.kw-tariffs-page-subheading-note {
    text-align: center;
    margin-top: -10px; /* Adjust to bring closer to header if needed, considering header's bottom margin/padding */
    margin-bottom: 25px; /* Space before the tariff list container */
    font-size: 0.95em;
    color: #555d66; /* WordPress medium gray */
    line-height: 1.5;
}

.kw-tariffs-page-subheading-note p {
    margin: 0; /* Remove default paragraph margin */
}

.kw-tariffs-page-subheading-note a {
    font-weight: bold; /* Make the link stand out a bit */
    text-decoration: underline;
    /* Standard link colors will be inherited or can be set explicitly if needed */
}

/* Tariff list container and messages */
#kw-tariffs-all-list-container {
    margin-top: 25px;
}

.kw-tariffs-loading,
.kw-tariffs-no-tariffs {
    font-style: italic;
    color: #555d66; /* WordPress medium gray */
    text-align: center;
    padding: 30px 15px;
    font-size: 1.1em;
    background-color: #f9f9f9;
    border: 1px dashed #ddd;
    border-radius: 4px;
    min-height: 300px; /* Added to reduce layout shift */
    display: flex; /* Added for centering text in taller box */
    align-items: center; /* Added for centering text in taller box */
    justify-content: center; /* Added for centering text in taller box */
}

/* General Section Styling */
.kw-tariffs-section { 
    margin-top: 40px;
    margin-bottom: 30px;
    padding-top: 20px;
    border-top: 1px solid #e9e9e9; /* Lighter border for separation */
}

/* Section headers for Current/Old Tariffs on main listing pages */
.kw-tariffs-section-header {
    margin-top: 35px;
    margin-bottom: 20px;
    font-size: 1.8em;
    color: #2c3e50; /* Darker, professional blue/grey */
    border-bottom: 2px solid #0073aa; /* Blue accent line */
    padding-bottom: 10px;
}

/* Supplier headers within sections */
.kw-tariffs-supplier-header {
    margin: 15px 0 8px;
    font-size: 1em;
    color: #333;
    font-weight: bold;
}

.kw-tariffs-supplier-header a {
    color: #0066cc; /* Dark blue for better link visibility */
    text-decoration: none;
    font-weight: bold; /* Make supplier names stand out more */
}

.kw-tariffs-supplier-header a:hover {
    text-decoration: underline;
    color: #004499; /* Slightly darker blue on hover */
}

/* Specific styling for tariff links in the list */
.kw-tariffs-list .kw-tariffs-list-item a {
    color: #002b5c; /* Darker blue for tariff links */
    text-decoration: none;
}

.kw-tariffs-list .kw-tariffs-list-item a:hover {
    color: #001a3a; /* Even darker blue on hover */
    text-decoration: underline;
}

.kw-tariff-link-symbol {
    font-size: 0.8em;
    margin-left: 2px;
    opacity: 0.7;
}

/* Tariff grid and card styling */
.kw-tariffs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.kw-tariff-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.kw-tariff-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.kw-tariff-card-old {
    opacity: 0.8;
    border-left: 4px solid #c00;
}

.kw-tariff-name {
    display: block;
    font-size: 1.2em;
    font-weight: 600;
    color: #0066cc;
    margin-bottom: 15px;
    text-decoration: none;
}

.kw-tariff-name:hover {
    text-decoration: underline;
}

.kw-tariff-details {
    display: grid;
    gap: 8px;
}

.kw-tariff-detail {
    font-size: 0.95em;
    color: #555;
    display: flex;
    align-items: baseline;
}

.kw-detail-label {
    font-weight: 500;
    color: #333;
    margin-right: 5px;
    min-width: 100px;
}

.kw-tariff-unavailable-banner {
    background-color: #f8d7da;
    color: #721c24;
    padding: 8px 12px;
    margin: -20px -20px 15px -20px;
    text-align: center;
    font-weight: bold;
    font-size: 0.9em;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #f5c6cb;
}

/* Styling for old/unavailable tariffs */
.kw-tariffs-old-tariff {
    border-left: 4px solid #c00; /* Prominent red left border as a sidebar */
    /* The .kw-tariffs-unavailable-banner is the primary textual indicator.
       Padding from .kw-tariffs-list-item (15px left) will apply inside this border. */
}

.kw-tariffs-unavailable-banner {
    background-color: #f8d7da; /* Light red (Bootstrap danger-light) */
    color: #721c24; /* Dark red text (Bootstrap danger-dark) */
    padding: 8px 12px;
    /* Adjusted margin: top, right, bottom, left.
       -18px (top) to align with parent's top padding edge.
       -15px (right & left) to align with parent's side padding edges.
       This ensures the banner starts immediately after the red border-left of .kw-tariffs-old-tariff,
       spanning the content area defined by the parent's padding.
       15px (bottom) for spacing before the tariff content.
    */
    margin: -18px -15px 15px -15px; 
    text-align: center;
    font-weight: bold;
    font-size: 1.0em;
    border-bottom: 1px solid #f5c6cb; /* Border to match background */
    /* border-radius: 4px 4px 0 0; /* Optional: round top corners if list item has rounded corners */
}


.kw-tariffs-old-tariff a {
    /* color: #555d66; */ /* Optionally different color for old tariff links */
}

.kw-tariffs-old-tariff-note {
    font-style: italic;
    font-size: 0.9em;
    color: #777777; /* Medium gray for the note */
    /* margin-left: 5px; /* Space from the tariff name - now handled by space in JS string */
    font-weight: normal; /* Normal weight for the note */
}