/**
 * HHB Frontend Card Styles
 * Mobile-first default styling for shortcodes
 * 
 * Provides a clean, card-based layout for all shortcodes when enabled.
 * Can be disabled via Settings > General > Default Shortcode Styling
 * 
 * @package HolidayHomeBooking
 */

/* ========================================
   Base Card Styling
   ======================================== */

.hhb-card {
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	box-sizing: border-box;
}

/* Remove bottom margin on last card */
.hhb-card:last-child {
	margin-bottom: 0;
}

/* ========================================
   Internal Element Spacing
   ======================================== */

/* Add vertical spacing between elements inside cards */
.hhb-card > * + * {
	margin-top: 16px;
}

/* Headings inside cards */
.hhb-card h1,
.hhb-card h2,
.hhb-card h3,
.hhb-card h4,
.hhb-card h5,
.hhb-card h6 {
	margin-top: 0;
	margin-bottom: 12px;
	line-height: 1.3;
}

/* First heading has no top margin */
.hhb-card > h1:first-child,
.hhb-card > h2:first-child,
.hhb-card > h3:first-child,
.hhb-card > h4:first-child,
.hhb-card > h5:first-child,
.hhb-card > h6:first-child {
	margin-top: 0;
}

/* Paragraphs inside cards */
.hhb-card p {
	margin-top: 0;
	margin-bottom: 12px;
	line-height: 1.6;
}

.hhb-card p:last-child {
	margin-bottom: 0;
}

/* ========================================
   Form Elements (Mobile-First)
   ======================================== */

/* Make all form inputs/selects full-width and readable on mobile */
.hhb-card input[type="text"],
.hhb-card input[type="email"],
.hhb-card input[type="tel"],
.hhb-card input[type="number"],
.hhb-card input[type="date"],
.hhb-card input[type="password"],
.hhb-card input[type="url"],
.hhb-card select,
.hhb-card textarea {
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	font-size: 16px; /* Prevents zoom on iOS */
	border: 1px solid #ddd;
	border-radius: 6px;
	box-sizing: border-box;
	font-family: inherit;
	line-height: 1.5;
}

/* Focus states for better accessibility */
.hhb-card input[type="text"]:focus,
.hhb-card input[type="email"]:focus,
.hhb-card input[type="tel"]:focus,
.hhb-card input[type="number"]:focus,
.hhb-card input[type="date"]:focus,
.hhb-card input[type="password"]:focus,
.hhb-card input[type="url"]:focus,
.hhb-card select:focus,
.hhb-card textarea:focus {
	outline: none;
	border-color: #0073aa;
	box-shadow: 0 0 0 1px #0073aa;
}

/* Textareas */
.hhb-card textarea {
	min-height: 100px;
	resize: vertical;
}

/* Labels */
.hhb-card label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	font-size: 14px;
}

/* Buttons */
.hhb-card button,
.hhb-card input[type="submit"],
.hhb-card input[type="button"],
.hhb-card .button {
	padding: 12px 24px;
	font-size: 16px;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	font-family: inherit;
	line-height: 1.4;
	text-decoration: none;
	display: inline-block;
	transition: all 0.2s ease;
}

/* Primary buttons */
.hhb-card button[type="submit"],
.hhb-card input[type="submit"],
.hhb-card .button-primary {
	background: #0073aa;
	color: #ffffff;
}

.hhb-card button[type="submit"]:hover,
.hhb-card input[type="submit"]:hover,
.hhb-card .button-primary:hover {
	background: #005a87;
}

/* Secondary buttons */
.hhb-card .button-secondary {
	background: #f0f0f0;
	color: #333333;
}

.hhb-card .button-secondary:hover {
	background: #e0e0e0;
}

/* ========================================
   Specific Shortcode Cards
   ======================================== */

/* Booking Form Card */
.hhb-card--booking-form {
	/* Inherits base card styles */
}

/* Property Display Card */
.hhb-card--property-display {
	/* Inherits base card styles */
}

/* Availability Calendar Card */
.hhb-card--availability-calendar {
	/* Inherits base card styles */
}

/* Ensure calendar grid layout is preserved within card wrapper */
.hhb-card--availability-calendar .hhb-calendar-header,
.hhb-card--availability-calendar .hhb-calendar-days {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
}

.hhb-card--availability-calendar .hhb-calendar-header {
	gap: 0.25rem;
}

.hhb-card--availability-calendar .hhb-calendar-days {
	gap: 0.25rem;
}

.hhb-card--availability-calendar .hhb-day-header,
.hhb-card--availability-calendar .hhb-calendar-day {
	display: flex !important;
}

.hhb-card--availability-calendar .hhb-calendar-months {
	display: grid;
	gap: 1.5rem;
}

/* Availability Search Card */
.hhb-card--availability-search {
	/* Inherits base card styles */
}

/* Featured Image Card */
.hhb-card--property-featured-image {
	/* Inherits base card styles */
	padding: 0; /* Images should be edge-to-edge */
	overflow: hidden;
}

.hhb-card--property-featured-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}

/* Gallery Card */
.hhb-card--property-gallery {
	/* Inherits base card styles */
}

/* Rules Card */
.hhb-card--property-rules {
	/* Inherits base card styles */
}

/* Facts Card */
.hhb-card--property-facts {
	/* Inherits base card styles */
}

/* Customer Portal Cards */
.hhb-card--my-bookings,
.hhb-card--booking-detail,
.hhb-card--my-payments {
	/* Inherits base card styles */
}

/* Booking Steps Cards */
.hhb-card--booking-step1,
.hhb-card--booking-step2,
.hhb-card--booking-step3 {
	/* Inherits base card styles */
}

/* ========================================
   Tables Inside Cards (Responsive)
   ======================================== */

.hhb-card table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
}

.hhb-card table th,
.hhb-card table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid #e0e0e0;
}

.hhb-card table th {
	font-weight: 600;
	background: #f8f9fa;
}

/* Mobile table: Allow horizontal scroll if needed */
@media (max-width: 768px) {
	.hhb-card table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ========================================
   Images Inside Cards
   ======================================== */

.hhb-card img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ========================================
   Lists Inside Cards
   ======================================== */

.hhb-card ul,
.hhb-card ol {
	margin: 12px 0;
	padding-left: 24px;
}

.hhb-card li {
	margin-bottom: 6px;
	line-height: 1.6;
}

/* ========================================
   Error/Notice Messages
   ======================================== */

.hhb-card .hhb-error,
.hhb-card .hhb-notice {
	padding: 12px 16px;
	border-radius: 6px;
	margin: 12px 0;
}

.hhb-card .hhb-error {
	background: #fff5f5;
	border: 1px solid #ff6b6b;
	color: #d63031;
}

.hhb-card .hhb-notice {
	background: #f0f6fc;
	border: 1px solid #0073aa;
	color: #005a87;
}

/* ========================================
   Tablet & Desktop Enhancements
   ======================================== */

@media (min-width: 768px) {
	.hhb-card {
		padding: 24px;
		margin-bottom: 24px;
	}
	
	/* Side-by-side form layout on larger screens */
	.hhb-card .hhb-form-row {
		display: flex;
		gap: 16px;
		margin-bottom: 16px;
	}
	
	.hhb-card .hhb-form-row > * {
		flex: 1;
	}
}

@media (min-width: 1024px) {
	.hhb-card {
		padding: 28px;
	}
}