/**
 * Custom Card Ubud — Tour Cards CSS
 *
 * Exact pixel-perfect implementation of the ATV & Rafting tour card design.
 * Scoped under .ccu-tour-card to prevent conflicts with theme styles.
 *
 * @package CustomCardUbud
 * @version 1.0.0
 */

/* =========================================================
   1. RESET & SCOPE
   ========================================================= */
.ccu-tour-card *,
.ccu-tour-card *::before,
.ccu-tour-card *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* =========================================================
   2. DESIGN TOKENS (CSS Custom Properties)
   ========================================================= */
.ccu-tour-card {
	/* Brand Colors */
	--ccu-primary:       #ff7a00;
	--ccu-primary-dark:  #1668b8;
	--ccu-primary-light: #e8f3fc;

	/* Text Colors */
	--ccu-text-dark:     #111827;
	--ccu-text-mid:      #4b5563;
	--ccu-text-muted:    #9ca3af;

	/* UI Colors */
	--ccu-star:          #f99f1b;
	--ccu-border:        #f3f4f6;
	--ccu-bg:            #ffffff;
	--ccu-avail-ok:      #16a34a;
	--ccu-avail-out:     #dc2626;
	--ccu-avail-lim:     #d97706;

	/* Shadows */
	--ccu-shadow-sm:     0 10px 25px -5px rgba(0, 0, 0, 0.05);
	--ccu-shadow-hover:  0 15px 35px -5px rgba(0, 0, 0, 0.10);

	/* Typography */
	--ccu-font:          'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Layout */
	--ccu-radius:        12px;
	--ccu-radius-badge:  4px;
	--ccu-img-height:    220px;
}

/* =========================================================
   3. CARD CONTAINER
   ========================================================= */
.ccu-tour-card {
	font-family:      var(--ccu-font);
	background-color: var(--ccu-bg);
	max-width:        380px;
	width:            100%;
	margin:           20px auto;
	border-radius:    var(--ccu-radius);
	border:           1px solid var(--ccu-border);
	box-shadow:       var(--ccu-shadow-sm);
	overflow:         hidden;
	position:         relative;
	transition:       transform 0.3s ease, box-shadow 0.3s ease;
}

.ccu-tour-card:hover {
	transform:  translateY(-4px);
	box-shadow: var(--ccu-shadow-hover);
}

/* Card Link Wrapper (when entire card is a link) */
.ccu-card-link {
	display:         block;
	text-decoration: none;
	color:           inherit;
}

/* =========================================================
   4. IMAGE AREA
   ========================================================= */
.ccu-tour-image-wrapper {
	position:         relative;
	width:            100%;
	height:           var(--ccu-img-height);
	background-color: #e5e7eb;
	overflow:         hidden;
}

.ccu-tour-image {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.4s ease;
}

.ccu-tour-card:hover .ccu-tour-image {
	transform: scale(1.04);
}

/* Image Placeholder (when no image set) */
.ccu-tour-image-placeholder {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          100%;
	background:      linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
	color:           var(--ccu-primary);
	font-size:       48px;
}

/* =========================================================
   5. BADGE
   ========================================================= */
.ccu-tour-badge {
	position:         absolute;
	bottom:           -16px;
	left:             50%;
	transform:        translateX(-50%);
	background-color: var(--ccu-primary);
	color:            #ffffff;
	font-size:        14px;
	font-weight:      600;
	padding:          6px 18px;
	border-radius:    var(--ccu-radius-badge);
	box-shadow:       0 4px 6px rgba(0, 0, 0, 0.1);
	white-space:      nowrap;
	z-index:          2;
	letter-spacing:   0.3px;
}

/* =========================================================
   6. CONTENT AREA
   ========================================================= */
.ccu-tour-content {
	padding: 32px 24px 24px 24px;
}

/* =========================================================
   7. TITLE
   ========================================================= */
.ccu-tour-title {
	font-size:     18px;
	font-weight:   600;
	color:         var(--ccu-text-dark);
	line-height:   1.4;
	margin-bottom: 20px;
	font-family:   var(--ccu-font);
}

/* =========================================================
   8. META LIST (Location & Availability)
   ========================================================= */
.ccu-tour-meta {
	list-style:    none;
	display:       flex;
	flex-direction: column;
	gap:           12px;
	margin-bottom: 20px;
}

.ccu-meta-item {
	display:     flex;
	align-items: center;
	gap:         10px;
}

.ccu-meta-icon {
	font-size:  16px;
	color:      var(--ccu-primary);
	width:      20px;
	text-align: center;
	flex-shrink: 0;
}

.ccu-meta-text {
	font-size:   15px;
	color:       var(--ccu-text-mid);
	font-weight: 500;
	line-height: 1.3;
}

/* Availability Status Colors */
.ccu-avail--available {
	color: var(--ccu-avail-ok);
}

.ccu-avail--soldout {
	color: var(--ccu-avail-out);
}

.ccu-avail--limited {
	color: var(--ccu-avail-lim);
}

/* =========================================================
   9. FOOTER (Rating + Price)
   ========================================================= */
.ccu-tour-footer {
	display:         flex;
	justify-content: space-between;
	align-items:     flex-end;
	margin-top:      24px;
	gap:             12px;
}

/* =========================================================
   10. STAR RATING
   ========================================================= */
.ccu-tour-rating {
	display:        flex;
	flex-direction: column;
	gap:            8px;
}

.ccu-stars {
	display: flex;
	gap:     3px;
	color:   var(--ccu-star);
	font-size: 15px;
}

.ccu-rating-text {
	font-size: 12px;
	color:     var(--ccu-text-muted);
}

/* =========================================================
   11. PRICING
   ========================================================= */
.ccu-tour-price {
	display:        flex;
	flex-direction: column;
	align-items:    flex-end;
	gap:            2px;
}

.ccu-price-old {
	font-size:           14px;
	font-weight:         600;
	color:               var(--ccu-text-muted);
	text-decoration:     line-through;
	text-decoration-thickness: 1.5px;
	letter-spacing:      0.5px;
}

.ccu-price-new {
	font-size:   22px;
	font-weight: 700;
	color:       var(--ccu-primary);
	line-height: 1.1;
}

/* =========================================================
   12. TYPE VARIANTS
   ========================================================= */

/* ATV card: slightly warmer accent on badge */
.ccu-tour-card--atv .ccu-tour-badge {
	background-color: var(--ccu-primary);
}

/* Rafting card: teal-blue accent */
.ccu-tour-card--rafting .ccu-tour-badge {
	background-color: #0f7acc;
}

.ccu-tour-card--rafting .ccu-meta-icon,
.ccu-tour-card--rafting .ccu-price-new {
	color: #0f7acc;
}

/* =========================================================
   13. RESPONSIVE
   ========================================================= */
@media screen and (max-width: 400px) {
	.ccu-tour-card {
		margin: 12px 0;
	}

	.ccu-tour-title {
		font-size: 16px;
	}

	.ccu-tour-footer {
		flex-direction: column;
		align-items:    flex-start;
		gap:            16px;
	}

	.ccu-tour-price {
		align-items: flex-start;
	}
}

/* =========================================================
   14. EDITOR PREVIEW (Gutenberg)
   ========================================================= */
.editor-styles-wrapper .ccu-tour-card {
	margin: 10px auto;
}