/* ============================================================
   Whiskey Details Page — The Whiskey Companion
   Portal-cohesive design (white cards, green accents)
   ============================================================ */

:root {
    --wc-primary:       #15a362;
    --wc-primary-light: #edfdf6;
    --wc-primary-dark:  #0e8a52;
    --wc-heading:       #252930;
    --wc-body:          #5d6778;
    --wc-meta:          #828d9f;
    --wc-border:        #e7e9ed;
    --wc-bg:            #f5f6fe;
    --wc-card-bg:       #fff;
    --wc-card-radius:   10px;
    --wc-transition:    0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --wc-amber:         #d4930a;
    --wc-amber-light:   #fef9ec;
}

/* ---------- Fade-in ---------- */
@keyframes wdFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.wd-animate { animation: wdFadeUp 0.45s ease-out both; }
.wd-animate-d1 { animation-delay: 0.06s; }
.wd-animate-d2 { animation-delay: 0.12s; }
.wd-animate-d3 { animation-delay: 0.18s; }
.wd-animate-d4 { animation-delay: 0.24s; }

/* ---------- Breadcrumb ---------- */
.wd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    font-size: 0.85rem;
    color: var(--wc-meta);
}
.wd-breadcrumb a {
    color: var(--wc-primary);
    text-decoration: none;
    font-weight: 500;
}
.wd-breadcrumb a:hover { text-decoration: underline; }
.wd-breadcrumb .separator { color: var(--wc-border); }

/* ---------- Product Hero Card ---------- */
.wd-product-card {
    background: var(--wc-card-bg);
    border-radius: var(--wc-card-radius);
    border: 1px solid var(--wc-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.wd-product-body {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 0;
    min-height: 420px;
}

@media (max-width: 991px) {
    .wd-product-body {
        grid-template-columns: 1fr;
    }
}

/* Image panel */
.wd-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(135deg, #fafbff 0%, #f0f2f8 100%);
    border-right: 1px solid var(--wc-border);
    position: relative;
}

@media (max-width: 991px) {
    .wd-product-image {
        border-right: none;
        border-bottom: 1px solid var(--wc-border);
        padding: 1.5rem;
        max-height: 380px;
    }
}

.wd-product-image img {
    max-width: 100%;
    max-height: 360px;
    object-fit: contain;
    border-radius: 6px;
}

/* Details panel */
.wd-product-details {
    padding: 1.75rem 2rem;
    display: flex;
    flex-direction: column;
}

@media (max-width: 991px) {
    .wd-product-details {
        padding: 1.5rem;
    }
}

.wd-product-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--wc-heading);
    margin-bottom: 0.35rem;
    line-height: 1.25;
}

/* ---------- Rating Display ---------- */
.wd-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
}

.wd-rating-stars {
    display: flex;
    gap: 2px;
    color: var(--wc-amber);
    font-size: 1rem;
}

.wd-rating-stars .star-empty { color: #dde0e6; }

.wd-rating-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--wc-heading);
}

.wd-rating-count {
    font-size: 0.82rem;
    color: var(--wc-meta);
}

/* ---------- Specs Grid ---------- */
.wd-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--wc-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.1rem;
}

.wd-spec-item {
    display: flex;
    flex-direction: column;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--wc-border);
    border-right: 1px solid var(--wc-border);
}

.wd-spec-item:nth-child(even) {
    border-right: none;
}

.wd-spec-item:nth-last-child(-n+2) {
    border-bottom: none;
}

.wd-spec-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wc-meta);
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.wd-spec-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--wc-heading);
}

/* ---------- Description ---------- */
.wd-description {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--wc-body);
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

.wd-description:empty { display: none; }

/* ---------- Distillery Badge ---------- */
.wd-distillery-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--wc-border);
    border-radius: 8px;
    background: var(--wc-bg);
    margin-bottom: 1.25rem;
    text-decoration: none !important;
    transition: border-color var(--wc-transition);
}

.wd-distillery-badge:hover {
    border-color: var(--wc-primary);
}

.wd-distillery-badge img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 4px;
}

.wd-distillery-badge .wd-dist-info {
    display: flex;
    flex-direction: column;
}

.wd-distillery-badge .wd-dist-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wc-meta);
    font-weight: 600;
}

.wd-distillery-badge .wd-dist-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--wc-heading);
}

/* ---------- Vault Indicator ---------- */
.wd-vault-indicator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 8px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    margin-bottom: 1.25rem;
}

.wd-vault-indicator i {
    color: #0284c7;
    font-size: 1.25rem;
}

.wd-vault-indicator-text {
    font-size: 0.85rem;
    color: #0369a1;
    line-height: 1.4;
}

.wd-vault-indicator-text strong {
    color: #0c4a6e;
}

/* ---------- Rating Indicator ---------- */
.wd-rating-indicator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 8px;
    background: var(--wc-amber-light);
    border: 1px solid rgba(212, 147, 10, 0.2);
    margin-bottom: 1.25rem;
}

.wd-rating-indicator i {
    color: var(--wc-amber);
    font-size: 1.25rem;
}

.wd-rating-indicator-text {
    font-size: 0.85rem;
    color: #926607;
    line-height: 1.4;
}

.wd-rating-indicator-text strong {
    color: #614405;
}

.wd-rating-indicator-text a {
    color: #b47a06;
    font-weight: 600;
    text-decoration: none;
    margin-left: 0.25rem;
}

.wd-rating-indicator-text a:hover {
    text-decoration: underline;
}

/* ---------- Action Buttons ---------- */
.wd-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    margin-top: auto;
}

.wd-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--wc-transition);
    border: 1px solid transparent;
    text-decoration: none !important;
}

.wd-btn-primary {
    background: var(--wc-primary);
    color: #fff;
    border-color: var(--wc-primary);
}
.wd-btn-primary:hover {
    background: var(--wc-primary-dark);
    border-color: var(--wc-primary-dark);
    color: #fff;
}

.wd-btn-outline {
    background: var(--wc-card-bg);
    color: var(--wc-body);
    border-color: var(--wc-border);
}
.wd-btn-outline:hover {
    border-color: var(--wc-primary);
    color: var(--wc-primary);
    background: var(--wc-primary-light);
}

.wd-btn-wishlist .fa-heart {
    color: #e74c3c;
    transition: transform var(--wc-transition);
}
.wd-btn-wishlist:hover .fa-heart {
    transform: scale(1.15);
}

/* ---------- Section Cards ---------- */
.wd-section-card {
    background: var(--wc-card-bg);
    border-radius: var(--wc-card-radius);
    border: 1px solid var(--wc-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.wd-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--wc-border);
}

.wd-section-header h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wc-heading);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wd-section-header h4 i {
    color: var(--wc-primary);
    font-size: 0.9rem;
}

.wd-section-body {
    padding: 1.25rem;
}

/* ---------- Reviews ---------- */
.wd-review-card {
    background: var(--wc-bg);
    border-radius: 8px;
    padding: 1.15rem;
    border: 1px solid var(--wc-border);
    height: 100%;
}

.wd-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.wd-review-user {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--wc-heading);
}

.wd-review-rating {
    color: var(--wc-amber);
    font-size: 0.85rem;
    font-weight: 600;
}

.wd-review-section-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wc-meta);
    font-weight: 600;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

.wd-review-text {
    font-size: 0.88rem;
    color: var(--wc-body);
    line-height: 1.55;
}

.wd-reviews-empty {
    text-align: center;
    padding: 2rem 1rem;
}

.wd-reviews-empty i {
    font-size: 2.5rem;
    color: var(--wc-border);
    margin-bottom: 0.75rem;
}

.wd-reviews-empty h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wc-heading);
    margin-bottom: 0.35rem;
}

.wd-reviews-empty p {
    font-size: 0.88rem;
    color: var(--wc-meta);
    margin-bottom: 1rem;
}

/* ---------- Ratings Ticker ---------- */
.wd-ticker-wrap {
    overflow: hidden;
    background-color: var(--wc-primary-light);
    border: 1px solid rgba(21,163,98,0.2);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.wd-ticker-label {
    font-weight: 700;
    color: var(--wc-primary-dark);
    margin-right: 1rem;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wd-ticker-content {
    flex: 1;
    overflow: hidden;
}

.wd-ticker-track {
    display: inline-flex;
    animation: wdTicker 30s linear infinite;
    gap: 2rem;
}

.wd-ticker-track:hover {
    animation-play-state: paused;
}

@keyframes wdTicker {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

.wd-ticker-item {
    font-size: 0.85rem;
    color: var(--wc-body);
}

.wd-ticker-item strong {
    color: var(--wc-heading);
}

.wd-ticker-item .fa-star {
    color: var(--wc-amber);
    font-size: 0.8rem;
    margin: 0 0.15rem;
}

/* Carousel controls overrides */
.wd-section-card .carousel-control-prev,
.wd-section-card .carousel-control-next {
    width: 36px;
    height: 36px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--wc-primary);
    opacity: 0.85;
}
.wd-section-card .carousel-control-prev { left: -10px; }
.wd-section-card .carousel-control-next { right: -10px; }
.wd-section-card .carousel-control-prev:hover,
.wd-section-card .carousel-control-next:hover { opacity: 1; }
.wd-section-card .carousel-control-prev-icon,
.wd-section-card .carousel-control-next-icon {
    width: 14px;
    height: 14px;
}

/* ---------- Sales Table ---------- */
.wd-section-card .table {
    margin-bottom: 0;
}

.wd-section-card .table thead th {
    background: var(--wc-bg);
    color: var(--wc-meta);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.65rem 1rem;
    border-bottom: 2px solid var(--wc-border);
    border-top: none;
    font-weight: 600;
}

.wd-section-card .table tbody td {
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    vertical-align: middle;
    border-color: var(--wc-border);
    color: var(--wc-body);
}

.wd-section-card .table tbody tr:hover {
    background-color: var(--wc-primary-light) !important;
}

/* Price badges */
.wd-price-sold {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--wc-primary-light);
    color: var(--wc-primary);
    border: 1px solid rgba(21,163,98,0.2);
}

.wd-price-unsold {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    background: #fef2f2;
    color: #dc3545;
    border: 1px solid rgba(220,53,69,0.2);
}

/* ---------- DataTables Overrides ---------- */
.wd-section-card .dataTables_wrapper .dataTables_length,
.wd-section-card .dataTables_wrapper .dataTables_filter {
    padding: 0.5rem 0;
    font-size: 0.85rem;
    color: var(--wc-meta);
}

.wd-section-card .dataTables_wrapper .dataTables_length select,
.wd-section-card .dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--wc-border);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
}

.wd-section-card .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--wc-primary);
    box-shadow: 0 0 0 3px rgba(21,163,98,0.10);
    outline: none;
}

.wd-section-card .dataTables_wrapper .dataTables_info {
    font-size: 0.82rem;
    color: var(--wc-meta);
    padding: 0.75rem 0;
}

.wd-section-card .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    font-size: 0.82rem;
    padding: 0.3rem 0.65rem !important;
    margin: 0 2px;
    border: 1px solid var(--wc-border) !important;
    color: var(--wc-body) !important;
    background: var(--wc-card-bg) !important;
}

.wd-section-card .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.wd-section-card .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--wc-primary) !important;
    color: #fff !important;
    border-color: var(--wc-primary) !important;
}

.wd-section-card .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--wc-primary-light) !important;
    color: var(--wc-primary) !important;
    border-color: var(--wc-primary) !important;
}

/* ---------- Chart ---------- */
.wd-chart-container {
    min-height: 300px;
}

/* ---------- Modal Overrides ---------- */
.wd-modal .modal-content {
    border-radius: var(--wc-card-radius);
    border: 1px solid var(--wc-border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.wd-modal .modal-header {
    border-bottom: 1px solid var(--wc-border);
    padding: 1rem 1.25rem;
}

.wd-modal .modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wc-heading);
}

.wd-modal .modal-body {
    padding: 1.25rem;
}

.wd-modal .modal-body label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--wc-body);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.wd-modal .modal-body .form-control {
    border: 1px solid var(--wc-border);
    border-radius: 6px;
    font-size: 0.9rem;
    padding: 0.55rem 0.8rem;
    transition: border-color var(--wc-transition);
}

.wd-modal .modal-body .form-control:focus {
    border-color: var(--wc-primary);
    box-shadow: 0 0 0 3px rgba(21,163,98,0.12);
}

.wd-modal .modal-footer {
    border-top: 1px solid var(--wc-border);
    padding: 0.75rem 1.25rem;
}

.wd-modal .btn-success,
.wd-modal .btn-primary {
    background: var(--wc-primary);
    border-color: var(--wc-primary);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

.wd-modal .btn-success:hover,
.wd-modal .btn-primary:hover {
    background: var(--wc-primary-dark);
    border-color: var(--wc-primary-dark);
}

/* ---------- Image Upload (default bottle) ---------- */
.wd-upload-area {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 2px dashed var(--wc-border);
    border-radius: 8px;
    margin-top: 0.75rem;
    background: var(--wc-bg);
    transition: border-color var(--wc-transition);
}

.wd-upload-area:hover {
    border-color: var(--wc-primary);
}

.wd-upload-area .form-control,
.wd-upload-area .custom-file-input {
    font-size: 0.85rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .wd-product-name { font-size: 1.3rem; }
    .wd-specs { grid-template-columns: 1fr; }
    .wd-spec-item { border-right: none !important; }
    .wd-actions { flex-direction: column; }
    .wd-btn { justify-content: center; }
}