/* Merged Styles */
:root {
    --main-color: #2A2829;  
    --main-color-dark: #1a1919;  
    --secondary-color: #E0E0DB;
    --disabled: #666565;
  }

/* General Styling */
body {
    background-color: var(--secondary-color);
    color: var(--main-color); 
    font-family: 'PT Serif';
}

/* Navbar */
.navbar {
    background-color: rgb(54, 52, 53);
}

.navbar-brand, .nav-link {
    color: hsl(0,0%,100%) !important;
}

.nav-link:hover {
    color: hsl(0,0%,100%) !important;
}
.nav-link-page {
    color: var(--main-color-dark) !important;
}
/* Containers */
.container {
    margin-top: 50px;
}

h1, h2 {
    color: var(--main-color);
    font-family: 'Marcellus';
}

/* Footer */
footer {
    background-color: #4b2c3e;
    color: #f5e4f5;
    padding: 10px 0;
    text-align: center;
    border-top: 2px solid var(--main-color);
    width: 100%;
    position: relative;
    bottom: 0;
}

/* Error Styling */
.err {
    color: black;
}

/* Popup Styling */
.popup {
    position: absolute;
    background-color: white;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: none;
}

.popup-next-btn {
    margin-top: 10px;
}

/* Bootstrap Overrides */
.btn-primary {
    background-color: #253551;
    border-color: #253551;
    color: white;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: white;
    border-color: #253551;
    color: #253551;
}

.btn-outline-primary {
    color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
    color: #fff !important;
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

.btn-outline-primary.active,
.btn-outline-primary.active:focus,
.btn-outline-primary.active:hover {
    color: #fff !important;
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

.form-control {
    background-color: var(--secondary-color);
    color: var(--main-color);
    border-color: var(--main-color);
}

.form-control::placeholder {
    color: #474047;
    opacity: 0.6;
}

.form-control:focus {
    background-color: white;
    border-color: var(--main-color);
    color: var(--main-color);
}

/* Table */
.table {
    background-color: var(--main-color-dark);
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.table th {
    background-color: var(--secondary-color);
    color: var(--main-color);
}

.table-hover tbody tr:hover {
    background-color: #3e2b3b;
}

/* Cards */
.card {
    background-color: var(--secondary-color);
    border-color: var(--main-color);
    color: #253555;
}

.card-header {
    background-color: white;
    color: #253555;
}

/* Alerts */
.alert-primary {
    background-color: white;
    color: var(--main-color);
    border-color: var(--main-color);
}

/* Pagination */
.page-link {
    color: white;
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.page-link:hover {
    color: var(--main-color);
    background-color: white;
    border-color: white;
}

/* Event Cards */
.event-card {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.event-title {
    font-size: 1.8em;
    margin-bottom: 10px;
    font-weight: bold;
}

.event-description {
    font-size: 1.1em;
    margin-bottom: 15px;
    color: #666;
}

/* Activity List */
.activity-list {
    list-style: none;
    padding-left: 0;
}

.activity-list li {
    margin-bottom: 10px;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.activity-list li .btn {
    margin-top: 5px;
}

/* Wine Cards */
.wine-card {
    margin-bottom: 10px;
    padding: 5px;
    border-radius: 5px;
    color: var(--main-color);
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out;
    text-align: left;
}

.wine-card:hover {
    transform: translateY(-5px);
}

.wine-card h4 {
    font-family: 'Pacifico';
    font-size: 26px;
    background-color: var(--main-color);
    color: white;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}

.wine-card .header-container {
    padding: 10px;
    border-radius: 5px;
    background-color: white;
}

.wine-details {
    padding: 15px;
    font-family: 'Garamond', serif;
    text-align: left;
}

.wine-details p {
    margin: 5px 0;
}

.wine-details .label {
    background-color: #6A0000;
    color: white;
    margin: 2px 5px;
    padding: 5px;
    font-size: 14px;
    border-radius: 5px;
}

.average-score {
    font-size: 36px;
    font-weight: bold;
    color: #6A0000;
    text-align: center;
    margin-bottom: 10px;
}

.attendee-score {
    font-size: 20px;
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.wine-flavor {
    margin: 10px 0;
}

.attendee-flavors {
    font-size: 18px;
    margin-top: 10px;
    color: #6A0000;
}

/* Tags/Badges for Wine Attributes */
.wine-tags {
    margin: 20px 0;
}

.wine-tags span {
    display: inline-block;
    background-color: var(--secondary-color);
    padding: 5px 10px;
    margin: 5px;
    border-radius: 20px;
    cursor: pointer;
}
 

/* Comment box */
.comments-box {
    margin: 20px 0;
}

/* Slider */
.rating-slider {
    margin: 20px 0;
}

.slider-value {
    text-align: center;
    font-size: 1.5em;
    color: #5a5a5a;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    background: linear-gradient(90deg, #fff 0%, #ccd6e1 35%, #212529 100%);
    outline: none;
    border-radius: 10px;
    transition: background 0.15s ease-in-out;
}

.slider::-webkit-slider-thumb, .slider::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background-color: #fff;
    border-radius: 50%;
    border: 3px solid #007bff;
    cursor: pointer;
}

/* activity detail - scored*/
.wine-card.scored {
    background-color: white;
    color: #6A0000;
    border: 2px solid #6A0000;
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.wine-card.scored:hover {
    transform: translateY(-5px);
}

/* activity detail - Not Scored Card */
.wine-card.not-scored {
    background-color: #f5f5f5;
    color: #999;
    border: 2px dashed #ccc;
    box-shadow: none;
}

.wine-card.not-scored h4 {
    font-style: italic;
    color: #dfdb0f;
}
.score-bar {
    width: 100%;
    height: 10px;
    background-color: #e0e0e0; /* Light gray for the unfilled portion */
    border-radius: 5px; /* Optional for rounded edges */
    overflow: hidden; /* Prevent the fill from spilling out */
    margin-top: 8px; /* Space above */
}

.score-bar-fill {
    height: 100%;
    background-color: #6A0000; /* Blue for the filled portion */
    width: 0%; /* Dynamically updated */
    transition: width 0.5s ease; /* Smooth animation */
}

.full-width-btn {
    display: block; /* Make the anchor element behave like a block-level element */
    width: 100%;    /* Make it span the full width of the parent */
    text-align: center; /* Center the button text horizontally */
}


.header-title-logo {
    width: auto;
    font-size: 0;
}

.header-title-logo a {
    display: inline-block;
    max-width: 100%;
    max-height: 112px
}

.header-title-logo img {
    width: auto;
    max-width: 100%;
    max-height: 112px
}

.custom-navbar {
    position: relative;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    padding-top: 1vw;
    padding-bottom:1vw;
    padding-left: 4vw;
    padding-right: 4vw;
    pointer-events: auto;
    border-bottom: 1px solid white !important; /* Custom border style */
    /*    box-shadow: 3px 5px 10px 7px white !important;  Adds a subtle white glow */
}

.btn-success {
    color: #fff; 
    background-color: var(--main-color); 
    border-color: var(--main-color); 
  }
  
  .btn-success:hover {
    color: var(--main-color); 
    background-color: var(--secondary-color); 
    border-color: var(--secondary-color); 
  }

  .btn-success:hover {
    color: var(--main-color); /* White text on hover */
    background-color: var(--secondary-color); /* Darker  background */
    border-color: var(--secondary-color); /* Darker  border */
  }
  
  .btn-success:focus, .btn-success.focus {
    color: #fff; /* White text */
    background-color: var(--main-color-dark); /* Darker  background */
    border-color: var(--main-color-dark); /* Darker  border */
    box-shadow: 0 0 0 0.25rem rgba(22, 163, 88, 0.5); /*  focus outline */
  }
  
  .btn-success:disabled, .btn-success.disabled {
    color: #fff; /* White text */
    background-color: var(--disabled); /* Same  background */
    border-color: var(--disabled); /* Same  border */
    opacity: 0.65; /* Reduced opacity */
  }
  
  .btn-success:not(:disabled):not(.disabled):active, 
  .btn-success:not(:disabled):not(.disabled).active,
  .show > .btn-success.dropdown-toggle {
    color: #fff; /* White text */
    background-color: var(--main-color); /* Even darker  background */
    border-color: var(--main-color); /* Even darker  border */
  }

.host-setup {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

.attendee-input {
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #e9ecef;
    border-radius: 5px;
}

.environment-text {
    color: var(--secondary-color)
}

/* Circle Rating Styles */
.circle-rating {
    display: flex;
    align-items: center;
    /* Optional: add vertical alignment and spacing */
}

.circle-rating .circle-filled {
    color: var(--main-color-dark); /* Bootstrap primary */
    font-size: 1.2em;
    margin-right: 4px;
}

.circle-rating .circle-empty {
    color: var(--main-color); /* Light gray */
    font-size: 1.2em;
    margin-right: 4px;
}

.bg-primary {
    background-color: var(--main-color) !important;
    color: #fff !important;
}