/**
 * template-destinations.css - COMPLETE FIXED VERSION
 * White theme with teal borders and orange hover
 * ALL TEXT VISIBLE with proper colors
 */

/* ==================== DESTINATION CARDS ==================== */
.destination-card,
.card,
.col-md-3 .card,
.destinations-section .card,
.popular-destinations .card,
div[class*="col"] .card {
    border: 3px solid var(--primary-blue) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.1) !important;
    background-color: var(--bg-primary) !important;
}

.destination-card:hover,
.card:hover {
    border-color: var(--primary-gold) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 30px rgba(251, 191, 36, 0.2) !important;
}

/* ==================== CATEGORY LABELS - TEAL RECTANGLES ==================== */
.destination-card .badge,
.card .badge,
span[class*="badge"],
.badge-primary,
.badge-info,
.badge-success {
    background-color: var(--primary-blue) !important;
    color: #FFFFFF !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    z-index: 20 !important;
    border: none !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
}

/* CATEGORY LABELS HOVER - ORANGE */
.destination-card:hover .badge,
.card:hover .badge,
.destination-card:hover span[class*="badge"],
.card:hover span[class*="badge"] {
    background-color: var(--primary-gold) !important;
    color: #FFFFFF !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4) !important;
}

/* ==================== CARD IMAGES ==================== */
.destination-card img,
.card img,
.card-img-top {
    transition: transform 0.3s ease !important;
    border-radius: 8px 8px 0 0 !important;
    width: 100%;
    height: auto;
}

.destination-card:hover img,
.card:hover img {
    transform: scale(1.03) !important;
}

/* ==================== CARD TITLE - FORCE DARK VISIBLE COLOR ==================== */
.destination-card .card-title,
.card .card-title,
.destination-card h5,
.card h5,
h5.card-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    color: #1A1A2E !important;
    line-height: 1.3 !important;
}

.destination-card:hover .card-title,
.card:hover .card-title,
.destination-card:hover h5,
.card:hover h5 {
    color: var(--primary-gold) !important;
}

/* ==================== CARD TEXT - FORCE VISIBLE COLOR ==================== */
.destination-card .card-text,
.card .card-text,
.destination-card p,
.card-body p {
    font-size: 14px !important;
    color: #495057 !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
}

/* ==================== RATING STARS ==================== */
.destination-card .rating,
.card .rating,
.destination-card .stars,
.card .stars,
.destination-card .fa-star,
.card .fa-star,
.rating-stars,
.star-rating,
.stars i,
.rating i {
    color: var(--primary-blue) !important;
    transition: color 0.3s ease !important;
}

.destination-card:hover .rating,
.card:hover .rating,
.destination-card:hover .stars,
.card:hover .stars,
.destination-card:hover .fa-star,
.card:hover .fa-star {
    color: var(--primary-gold) !important;
}

/* ==================== CARD CONTENT ==================== */
.card-body {
    padding: 20px !important;
    background-color: var(--bg-primary) !important;
}

.card-header {
    padding: 16px 20px !important;
    background-color: #FAFAFA !important;
    border-bottom: 1px solid #E1E5E9 !important;
}

.card-footer {
    padding: 16px 20px !important;
    background-color: #FAFAFA !important;
    border-top: 1px solid #E1E5E9 !important;
}

.destination-card .card-body > *:last-child,
.card .card-body > *:last-child {
    margin-bottom: 0 !important;
}

/* ==================== BUTTONS ==================== */
.btn-primary,
.btn[href*="destinations"],
.view-all-btn,
.destinations-section .btn,
.popular-destinations .btn {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: var(--primary-blue) !important;
    color: #FFFFFF !important;
    padding: 12px 24px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    border: 2px solid var(--primary-blue) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-primary:hover,
.btn[href*="destinations"]:hover,
.view-all-btn:hover {
    background-color: var(--primary-gold) !important;
    border-color: var(--primary-gold) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(251, 191, 36, 0.3) !important;
}

/* ==================== CARD BUTTONS - OUTLINE STYLE ==================== */
.destination-card .btn,
.card .btn,
.btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--primary-blue) !important;
    color: var(--primary-blue) !important;
    border-radius: 20px !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.destination-card .btn:hover,
.card .btn:hover,
.btn-outline-primary:hover {
    background-color: var(--primary-gold) !important;
    border-color: var(--primary-gold) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

/* ==================== SECTION SPACING ==================== */
.destinations-section,
.popular-destinations,
#destinations {
    padding: 48px 0 !important;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .destination-card .badge,
    .card .badge {
        font-size: 11px !important;
        padding: 6px 10px !important;
        top: 10px !important;
        right: 10px !important;
        border-radius: 6px !important;
    }
    
    .btn-primary,
    .view-all-btn {
        width: 100% !important;
        margin-top: 16px !important;
    }
    
    .card-body {
        padding: 16px !important;
    }
    
    .card-title {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    .card-text {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }
}