:root {
    --primary-color: #0d8ca1; /* The Teal color */
    --text-dark: #222222;
    --text-grey: #555555;
    --border-color: #eeeeee;
    --bg-white: #ffffff;
    --star-black: #000000;
}


body {
    font-family: Montserrat;
    color: var(--text-dark);
    margin: 0;
}

/* --- Container --- */
.table-wrapper {
    background-color: var(--bg-white);
    /*padding: 20px 40px;*/
    max-width: 1200px;
    margin: 0 auto;
    /* Optional shadow/radius for standalone look */
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.05); */
    /* border-radius: 8px; */
}

/* --- Header Section --- */
.page-header {
    display: flex;
    align-items: baseline;
    gap: 15px;
    /*margin-bottom: 20px;*/
}


.page-header .subtitle {
    color: #b0b0b0;
    font-size: 0.9rem;
    font-weight: 400;
}

/* --- Table Styling --- */
.results-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

/* Table Head */
.results-table thead th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #000;
    padding: 15px 10px;
    
    white-space: nowrap;
}

.results-table thead tr {
    border-bottom: 1px solid var(--border-color);
}

/* Active sorting column style */
.results-table thead th.active-sort {
    color: var(--primary-color);
    cursor: pointer;
}

.sort-icon {
    margin-left: 4px;
    vertical-align: middle;
}

/* Table Body Rows */
.results-table tbody tr {
    transition: background-color 0.2s ease;
}

.results-table tbody tr:hover {
    background-color: #fcfcfc;
}

.results-table tbody td {
    padding: 25px 10px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    font-size: 0.95rem;
    color: var(--text-grey);
}

/* Specific Column Styling */
.primary-text {
    color: var(--text-dark);
    font-weight: 500;
}

.primary-text a {
    text-decoration: underline;
}
/* --- Action Buttons (Icons) --- */
.col-actions {
    width: 100px; /* Fixed width for icons column */
}

.action-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    transition: all 0.2s;
    width: 32px;
    height: 32px;
}
.grid-cell .btn-icon {
    margin-left: 5px;
}

.btn-icon:hover {
    opacity: 0.8;
}

/* The solid circle style for active 'Eye' buttons */
.btn-icon.active-circle {
    background-color: var(--primary-color);
    color: white;

    border-radius: 50%;
}

.btn-icon.active-circle svg {
    width: 18px;
    height: 18px;
}

.btn-icon.heart svg {
    /* DEFAULT STATE: Outline */
    /* We explicitly force these styles to override SVG attributes if necessary */
    fill: transparent; 
    stroke: currentColor;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.btn-icon.heart.filled svg {
    /* FILLED STATE: Solid Color */
    fill: currentColor;
    
    /* Optional: Hide stroke for a flat 'solid' look, 
       or keep it for a bold look. keeping it is usually smoother. */
    stroke: currentColor; 
}

/* --- Star Ratings --- */
.rating-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stars {
    display: flex;
    font-size: 1.1rem; /* Size of stars */
    line-height: 1;
}

.star.filled {
    color: var(--star-black);
    -webkit-text-stroke: 1px var(--star-black); /* Outline for empty star */
}

.star.empty {
    color: transparent;
    -webkit-text-stroke: 1px var(--star-black); /* Outline for empty star */
}

.star.half {
    /* Simple CSS trick for half star if SVG isn't used */
    position: relative; 
    color: transparent;
    -webkit-text-stroke: 1px var(--star-black);
}
.star.half::after {
    content: '★';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    overflow: hidden;
    color: var(--star-black);
    -webkit-text-stroke: 0;
}

.score {
    font-weight: 400;
    color: var(--text-dark);
}




/* Scoped Variables & Main Container */
.cost-card {
    /* Local variables - won't affect other parts of the site */
    --cc-teal-dark: #007d91; 
    --cc-teal-light-bg: #eef4f5;
    --cc-bg-gray: #f2f2f2;
    --cc-text-dark: #111111;
    --cc-text-gray: #555555;
    --cc-white: #ffffff;

    width: 100%;
    max-width: 400px;
    text-align: center;
    margin: 0 auto; /* Center the card itself if in a block context */
    box-sizing: border-box;
}

/* Ensure box-sizing applies to all children within this component */
.cost-card *, .cost-card *::before, .cost-card *::after {
    box-sizing: inherit;
}

/* --- Sections --- */
.cost-card .section-monthly {
    background-color: var(--cc-bg-gray);
    padding: 30px 20px 30px 20px;
    border-radius: 4px 4px 0 0; /* Optional rounded corners top */
}

.cost-card .section-other {
    background-color: var(--cc-white);
    padding: 30px 20px 0px 30px;
    border-radius: 0 0 4px 4px; /* Optional rounded corners bottom */
}

.cost-card .section-other .subtitle {
    margin-bottom: 40px;
}
/* --- Typography Scoping --- */
.cost-card h3 {
    margin: 0;
    display: block;
    font-weight: 700;
    color: var(--cc-text-dark);
    line-height: 1.2;
}

.cost-card .total-price {
    font-size: 28px;
    font-weight: bold;
    font-family: var(--font-serif);
    color: var(--cc-teal-dark);
    margin: 5px 0 30px 0;
    line-height: 1.2;
}

.cost-card .subtitle {
    margin: 5px 0 30px 0;
    font-size: 14px;
    color: var(--cc-text-gray);
    font-weight: 400;
    line-height: 1.4;
}

/* --- Grid/Flex Layouts --- */
.cost-card .cost-row {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.cost-card .cost-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
}

/* --- Icons --- */
.cost-card .icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.cost-card .icon-circle svg {
    width: 32px;
    height: 32px;
    display: block; /* Removes any default inline spacing */
}

/* Specific Icon Styles */
.cost-card .style-filled {
    background-color: var(--cc-teal-dark);
    color: var(--cc-white);
}

.cost-card .style-filled svg {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0;
}

.cost-card .style-outlined {
    background-color: var(--cc-teal-light-bg);
    color: var(--cc-teal-dark);
}

.cost-card .style-outlined svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Labels & Values --- */
.cost-card .label {
    
    color: var(--cc-text-gray);
    margin-bottom: 4px;
    line-height: 1.2;
    height: 28px;
}

.cost-card .value {
    font-size: 14px;
    font-weight: 800;
    color: var(--cc-text-dark);
    line-height: 1.2;
    height: 28px;
}

.cost-card-horizontal .cost-card {
    display: flex;           /* Activate Flexbox */
    flex-direction: row;     /* Side by side */
    align-items: stretch;    /* Make both boxes equal height */
    max-width: 800px;        /* Double the width (400px * 2) */
}

/* Make sections share the space equally */
.cost-card-horizontal .cost-card .section-monthly,
.cost-card-horizontal .cost-card .section-other {
    flex: 1;
    width: 50%;
}

/* Adjust Border Radius: Left box gets left corners rounded */
.cost-card-horizontal .cost-card .section-monthly {
    border-radius: 4px 0 0 4px; 
}

/* Adjust Border Radius: Right box gets right corners rounded */
.cost-card-horizontal .cost-card .section-other {
    border-radius: 0 4px 4px 0;
    /* Optional: Add a border between them if you want distinct separation */
    /* border-left: 1px solid #e0e0e0; */
}

/* Mobile Safety: 
    If screen is too small, force it back to vertical 
    even if the class is present. */
@media (max-width: 700px) {
    .cost-card-horizontal .cost-card {
        flex-direction: column;
        max-width: 400px;
    }
    .cost-card-horizontal .cost-card .section-monthly {
        border-radius: 4px 4px 0 0;
        width: 100%;
    }
    .cost-card-horizontal .cost-card .section-other {
        border-radius: 0 0 4px 4px;
        width: 100%;
    }
}


/* Variables for easy customization */
:root {
    --rn-color-primary: #0089a6; /* Teal color from image */
    --rn-arrow-size: 50px;
    --rn-icon-size: 28px;
    --rn-transition-speed: 0.3s;
}

/* Base Container Styles */
.rn-nav-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: var(--rn-color-primary);
    z-index: 1000; /* Ensure it stays on top */
    
    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;
}

/* Positioning */
.rn-nav-arrow.rn-left {
    left: 20px;
    flex-direction: row; /* Arrow left, text right */
}

.rn-nav-arrow.rn-right {
    right: 20px;
    flex-direction: row; /* Text left, arrow right */
    justify-content: flex-end;
}

.rn-nav-arrow .rn-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; 
    height: 28px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3); /* 30% white background */
    transition: transform var(--rn-transition-speed) ease;
}

.rn-nav-arrow svg {
    width: 25px; 
    height: 25px;
    stroke: var(--rn-color-primary); /* Uses your teal color */
    
    /* This creates the white outline around the teal lines */
    filter: drop-shadow(0px 0px 1px white) 
            drop-shadow(0px 0px 1px white); 
}

/* Text Label Container */
.rn-nav-arrow .rn-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    /* Animation Properties */
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: all var(--rn-transition-speed) ease-in-out;
}

/* Text Typography */
.rn-nav-arrow .rn-label span {
    display: block;
    line-height: 1.2;
}

.rn-nav-arrow .rn-label .rn-small {
    font-size: 0.8rem;
    font-weight: 400;
}

.rn-nav-arrow .rn-label .rn-large {
    font-size: 1rem;
    font-weight: 700;
}

/* HOVER EFFECTS */

/* 1. Reveal Text */
.rn-nav-arrow:hover .rn-label {
    opacity: 1;
    max-width: 150px; /* Expands to show text */
    margin: 0 10px;   /* Add spacing when visible */
}

/* 2. Scale Arrow slightly */
.rn-nav-arrow:hover .rn-icon-wrapper {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.5); /* Slightly more opaque on hover */
}

/* DISABLED STATE */
.rn-nav-arrow.rn-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none; /* Disables all hover effects and clicks */
    filter: grayscale(100%);
}




:root {
    --rf-primary: #0089a6;
    --rf-bg: #ffffff;
    --rf-border: #000000;
    --rf-text-placeholder: #999999;
    --rf-text-active: #0089a6;
}

/* --- 1. Header Layout (H2 + Link Side-by-Side) --- */
.rf-main-wrapper {
    /*margin-bottom: 30px;*/
}

.rf-header-section {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Align vertically center */
    /*margin-bottom: 20px;*/
    padding-bottom: 5px;
}

.rf-title {
    margin: 0;
    padding: 0;
    font-size: 1.5rem; 
    font-weight: bold;
    color: #333;
}

.rf-controls {
    font-size: 0.9rem;
    display: flex;
    gap: 20px;
    align-items: center;
}

.rf-link-primary { color: var(--rf-primary); text-decoration: none; cursor: pointer; }
.rf-link-danger { color: #d9534f; text-decoration: none; cursor: pointer; }

/* Top Toggle Chevron Rotation */
.rf-chevron {
    display: inline-block;
    transition: transform 0.3s;
    font-size: 0.8rem;
    margin-left: 5px;
}
.rf-link-primary.collapsed .rf-chevron {
    transform: rotate(180deg);
}

/* --- 2. Grid System --- */
.rf-grid-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.rf-grid-col {
    padding: 0 10px;
    margin-bottom: 20px;
    width: 100%;
    flex: 0 0 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .rf-grid-col {
        width: 25%;
        flex: 0 0 25%;
    }
}

/* --- 3. Select2 Layout & Arrows (PURE CSS VERSION) --- */

.rf-select-container {
    position: relative;
}

.rf-select-container.is-open {
    border: 1px solid var(--rf-primary);
}
/* Main Input Box Styling */
.rf-select-container .select2-container .select2-selection--multiple {
    border: 1px solid var(--rf-border);
    border-radius: 0;
    min-height: 40px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 35px 0 10px; /* Space for the arrow */
    position: relative;
    box-shadow: none;
    outline: none;
}

/* THE DROPDOWN ARROW (Pure CSS Chevron) */
.rf-select-container .select2-container .select2-selection--multiple::after {
    content: '';
    position: absolute;
    right: 15px;      /* Position from right */
    top: 50%;         /* Center vertically */
    
    /* Create the arrow shape using borders */
    width: 8px;
    height: 8px;
    border: solid var(--rf-primary); /* Uses your Teal color variable */
    border-width: 0 2px 2px 0;       /* Thickness of the arrow lines */
    
    /* Rotate to point DOWN */
    transform: translateY(-65%) rotate(45deg); 
    
    pointer-events: none;
    z-index: 99;
    transition: transform 0.2s ease;
}

/* Rotate Arrow when Open (Point UP) */
.rf-select-container .select2-container.select2-container--open .select2-selection--multiple::after {
    /* Rotate 225deg points it up */
    transform: translateY(-35%) rotate(225deg); 
}

/* Hide default Select2 internal tags */
.select2-container .select2-selection--multiple .select2-selection__choice {
    display: none !important;
}

/* Search Field / Placeholder Styling */
.select2-container .select2-search--inline .select2-search__field {
    margin: 0 !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 1rem;
    font-family: inherit;
    width: 100% !important;
    color: var(--rf-text-placeholder);
}

/* Active State Styles */
.rf-select-container.has-value .select2-search__field {
    color: var(--rf-text-active) !important;
}
.rf-select-container.has-value .select2-search__field::placeholder {
    color: var(--rf-text-active) !important;
    font-weight: 700;
}


/* Hide default internal tags */
.select2-container .select2-selection--multiple .select2-selection__choice {
    display: none !important;
}

/* Search Field / Placeholder */
.select2-container .select2-search--inline .select2-search__field {
    margin: 0 !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 1rem;
    width: 100% !important;
    color: var(--rf-text-placeholder);
}

/* Active State Styles */
.rf-select-container.has-value .select2-search__field {
    color: var(--rf-text-active) !important;
}
.rf-select-container.has-value .select2-search__field::placeholder {
    color: var(--rf-text-active) !important;
    font-weight: 700;
}

/* --- 4. Bubbles (Tags) --- */
.rf-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.rf-tag {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--rf-primary);
    color: var(--rf-primary);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.9rem;
    font-weight: 600;
}

.rf-tag-remove {
    margin-left: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 0.8;
}

/* --- 5. Buttons --- */
.rf-submit-row { margin-top: 10px; }
.rf-btn { padding: 8px 20px; border: none; cursor: pointer; font-size: 1rem; margin-right: 10px; }
.rf-btn-primary { background-color: var(--rf-primary); color: white; }
.rf-btn-secondary { background-color: #eee; color: #333; }
.rf-sr-label { display: none; }

:root {
    --st-primary: #0089a6; /* Teal */
    --st-hover: #006f85;
    --st-text: #333;
}

/* Base Header Styling */
.results-table th.sort {
    cursor: pointer;
    position: relative;
    padding-right: 20px; /* Space for the arrow */
    user-select: none;
    transition: color 0.2s ease;
}

.results-table th.sort:hover {
    color: var(--st-primary);
}

/* --- ACTIVE STATE --- */
.results-table th.sort.st-active {
    color: var(--st-primary);
    font-weight: 700;
}

.results-table th.sort.st-active {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap;
}

.results-table th.sort.st-active::after {
  position: static !important;
  margin-left: 4px;
  flex-shrink: 0;
  /* Retaining the existing chevron shape */
  content: "";
  width: 6px;
  height: 6px;
  border-bottom: 2px solid var(--st-primary);
  border-right: 2px solid var(--st-primary);
}

/* ASCENDING (A-Z, 1-9) -> Pointing UP */
/* Rotate -135deg to point up */
.results-table th.sort.st-active.st-asc::after {
    transform: rotate(-135deg);
    margin-top: -2px; /* Slight adjustment for visual center */
}

/* DESCENDING (Z-A, 9-1) -> Pointing DOWN */
/* Rotate 45deg to point down */
.results-table th.sort.st-active.st-desc::after {
    transform: rotate(45deg);
    margin-top: -8px; /* Slight adjustment for visual center */
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color) !important;
}

.rf-main-wrapper .rf-buttons {
    display: none;
}

/* 1. Base Styles (Single Image State) */
.hero-image {
    width: 100%;
    height: 400px; /* Matches your ResizeToFill height */
    object-fit: cover;
    display: block; 
    /* Default is visible and static (normal flow) */
    opacity: 1;
    position: relative; 
}

.hero-image.small {
    height:188px;
}
/* 2. Slider Container (Added by JS) */
.hero-slider-wrapper {
    position: relative;
    width: 100%;
    height: 400px; /* Must match image height */
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #f4f4f4;
}

/* 3. Slider Mode: Image Styles 
   These rules ONLY apply when the image is inside the wrapper */
.hero-slider-wrapper .hero-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* Hidden by default in slider mode */
    z-index: 1;
    transition: opacity 0.5s ease-in-out;
}

/* 4. Active Slide */
.hero-slider-wrapper .hero-image.active {
    opacity: 1;
    z-index: 2;
}

/* 5. Navigation Buttons */
.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0);
    color: black;
    filter: drop-shadow(0px 0px 2px white) 
            drop-shadow(0px 0px 2px white);
    border: none;
    font-size: 18px;
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s;
    user-select: none;
}

.hero-nav:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.hero-prev {
    left: 0; 
    border-radius: 4px 0 0 4px;
}
.hero-next { 
    right: 0;
    border-radius: 0 4px 4px 0; 
}

/* Hide large source images from the main page flow */
.hero-img-large {
    display: none !important;
}

/* White Backdrop */
.hero-lb-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.70); /* White backdrop */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
}

/* Container to keep arrows next to image */
.hero-lb-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 95%;
    gap: 20px; /* Space between arrows and image */
}

/* Dark UI Elements for White Theme */
.hero-lb-close, .hero-lb-nav {
    color: #333;
    background: #f0f0f0;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border-radius: 50%;*/
}

.hero-lb-close:hover, .hero-lb-nav:hover {
    background: #e0e0e0;
}

.hero-lb-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    font-size: 30px;
}

.hero-lb-nav {
    width: 50px;
    height: 50px;
    font-size: 24px;
    flex-shrink: 0; /* Prevents arrows from squishing */
}

.hero-lb-next {
    border-radius: 0 4px 4px 0; 
    
}
.hero-lb-prev { 
    border-radius: 4px 0 0 4px;
}
.hero-lb-counter {
    position: absolute;
    top: 30px;
    left: 30px;
    color: #555;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: bold;
}

/* Main Image Styles */
.hero-lb-content {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Subtle shadow for depth on white */
}

/* Thumbnails */
.hero-lb-thumbnails {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    max-width: 80%;
    overflow-x: auto;
    padding: 10px;
}

.hero-lb-thumb {
    width: 90px;
    height: 70px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.4;
    border: 1px solid #ddd;
}

.hero-lb-thumb.active {
    opacity: 1;
    border: 2px solid #008489;
}

/* --- Responsive Layout --- */
@media (max-width: 768px) {
    .table-wrapper {
        padding: 10px;
        overflow-x: auto; /* Allow horizontal scroll on mobile */
    }
    
    .results-table {
        min-width: 800px; /* Ensure table keeps structure when scrolling */
    }
    .results-table tbody td {
        padding: 5px;
    }
    .col-actions {
        width: 50px;
    }
    .action-buttons {
        gap: 10px;
    }
    .rn-nav-arrow.rn-left {
        left: 2px;
    }
    .rn-nav-arrow.rn-right {
        right: 2px;
    }
    .rn-nav-arrow .rn-label {
        display: none;
    }
}