/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 16 2025 | 07:06:40 */
/* =========================================
   172 Powers – Booking Cancellation Page
   Page: /booking-cancellation/
   Palette:
   - Deep Wine:    #481D24
   - Primary Red:  #C5283D
   - Neutral Gray: #7A7A7A
   - Accent Gold:  #FFC857
   ========================================= */

/* ---------- Global layout ---------- */

body.page-id-45 {
    background: #f9f5f3;
    color: #481D24;
}

.page-id-45 #content.site-main {
    max-width: 900px;
    margin: 3rem auto 4rem;
    padding: 0 1.5rem 3rem;
}

/* Page header */
.page-id-45 .page-header {
    text-align: center;
    margin-bottom: 2.3rem;
}

.page-id-45 .page-header .entry-title {
    font-family: "Roboto Slab", serif;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 1.4rem;
    color: #481D24;
    margin: 0;
    padding-bottom: 0.75rem;
    position: relative;
}

.page-id-45 .page-header .entry-title::after {
    content: "";
    display: block;
    width: 90px;
    height: 3px;
    margin: 0.45rem auto 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #C5283D, #FFC857);
}

/* ---------- Outer confirmation wrapper ---------- */

.page-id-45 .page-content {
    margin-top: 0;
}

.page-id-45 .mphb_sc_booking_confirmation {
    background: #ffffff;
    border-radius: 20px;
    padding: 1.8rem 1.7rem 2rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

/* Two-column layout on larger screens */
@media (min-width: 860px) {
    .page-id-45 .mphb_sc_booking_confirmation {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr);
        column-gap: 1.8rem;
        row-gap: 1.5rem;
        align-items: flex-start;
    }
}

/* Stack nicely on small screens */
@media (max-width: 859px) {
    .page-id-45 .mphb_sc_booking_confirmation {
        padding: 1.7rem 1.25rem 2.1rem;
    }

    .page-id-45 .mphb-booking-details-section {
        margin-top: 1.3rem;
    }
}

/* ---------- Booking Details card ---------- */

.page-id-45 .mphb-booking-details-section.booking {
    border-radius: 18px;
    background: #fdfbfa;
    border: 1px solid rgba(72, 29, 36, 0.08);
    padding: 1.4rem 1.35rem 1.45rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
}

/* Section title */
.page-id-45 .mphb-booking-details-title {
    margin: 0 0 0.9rem;
    font-family: "Roboto Slab", serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #481D24;
}

.page-id-45 .mphb-booking-details-title::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    margin-top: 0.4rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #C5283D, #FFC857);
}

/* Key/value list styling */
.page-id-45 .mphb-booking-details-section .mphb-booking-details {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-id-45 .mphb-booking-details-section .mphb-booking-details li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.6rem;
    font-size: 0.92rem;
    padding: 0.3rem 0;
}

/* Label */
.page-id-45 .mphb-booking-details-section .mphb-booking-details .label {
    flex: 0 0 auto;
    min-width: 90px;
    max-width: 45%;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7A7A7A;
}

/* Value */
.page-id-45 .mphb-booking-details-section .mphb-booking-details .value {
    flex: 1 1 auto;
    text-align: right;
    color: #481D24;
}

/* Price emphasis */
.page-id-45 .booking-price .value .mphb-price {
    font-weight: 700;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    background: rgba(197, 40, 61, 0.08);
}

/* Booking status pill (“Confirmed”) */
.page-id-45 .booking-status .value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    padding: 0.18rem 0.7rem;
    border-radius: 999px;
    background: rgba(0, 150, 102, 0.08);
    color: #0b5d3b;
    font-weight: 600;
    font-size: 0.82rem;
}

.page-id-45 .booking-status .value::before {
    content: "";
    flex: 0 0 8px;
    height: 8px;
    border-radius: 50%;
    background: #18a05b;
}

/* ---------- Accommodation / Details line ---------- */

.page-id-45 .accommodations {
    margin-top: 0.9rem;
    padding-top: 0.7rem;
    border-top: 1px dashed rgba(72, 29, 36, 0.18);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.6rem;
    font-size: 0.9rem;
}

.page-id-45 .accommodations-title {
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7A7A7A;
}

.page-id-45 .accommodations-list {
    flex: 1 1 auto;
}

.page-id-45 .accommodations-list a {
    color: #C5283D;
    font-weight: 600;
    text-decoration: none;
}

.page-id-45 .accommodations-list a:hover {
    text-decoration: underline;
}

/* ---------- Cancel Booking card ---------- */

.page-id-45 .mphb-booking-details-section.cancel-booking {
    border-radius: 18px;
    background: rgba(197, 40, 61, 0.04);
    border: 1px solid rgba(197, 40, 61, 0.25);
    padding: 1.35rem 1.35rem 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.7rem;
}

/* Add a subtle label above the button */
.page-id-45 .mphb-booking-details-section.cancel-booking::before {
    content: "Cancellation";
    font-family: "Roboto Slab", serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #481D24;
    margin-bottom: 0.2rem;
}

/* Short explanatory line (decorative) */
.page-id-45 .mphb-booking-details-section.cancel-booking::after {
    content: "If you wish to cancel this reservation, confirm below.";
    font-size: 0.85rem;
    color: #7A7A7A;
    margin-top: 0.15rem;
}

/* Cancel button styling – override theme defaults */
.page-id-45 .mphb-booking-details-section.cancel-booking .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.5rem;
    border-radius: 999px;
    border: 1px solid #C5283D !important;
    background: #ffffff !important;
    color: #C5283D !important;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(197, 40, 61, 0.16);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

/* Hover + active states */
.page-id-45 .mphb-booking-details-section.cancel-booking .button:hover {
    background: #C5283D !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(197, 40, 61, 0.24);
    transform: translateY(-1px);
}

.page-id-45 .mphb-booking-details-section.cancel-booking .button:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(197, 40, 61, 0.2);
}

/* ---------- Links & small refinements ---------- */

.page-id-45 a {
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.page-id-45 a:hover {
    text-decoration-thickness: 2px;
}

/* Prevent extra bottom margin inside cards */
.page-id-45 .mphb-booking-details-section *:last-child {
    margin-bottom: 0;
}

/* ---------- Small-screen tweaks ---------- */

@media (max-width: 600px) {

    .page-id-45 #content.site-main {
        margin-top: 2.3rem;
        margin-bottom: 3rem;
        padding: 0 1.2rem 2.4rem;
    }

    .page-id-45 .mphb-booking-details-section.booking,
    .page-id-45 .mphb-booking-details-section.cancel-booking {
        padding: 1.3rem 1.1rem 1.35rem;
        border-radius: 16px;
    }

    .page-id-45 .mphb-booking-details-section .mphb-booking-details li {
        align-items: flex-start;
    }

    .page-id-45 .mphb-booking-details-section .mphb-booking-details .value {
        text-align: left;
    }

    .page-id-45 .booking-status .value {
        justify-content: flex-start;
    }

    .page-id-45 .mphb-booking-details-section.cancel-booking {
        align-items: stretch;
    }

    .page-id-45 .mphb-booking-details-section.cancel-booking .button {
        width: 100%;
    }
}

.page-id-45 .mphb-booking-details-section .mphb-booking-details li {
    border-right: none !important;
	margin-right: none !important;
}

/* Desktop tweaks for cancellation card alignment & spacing */
@media (min-width: 860px) {

	/* Remove extra top margin on the cancel card in two-column layout */
	.page-id-45 .mphb-booking-details-section.cancel-booking {
		margin-top: 0;
	}
}

/* Booking details layout: one item per line, label above value */
.page-id-45 .mphb-booking-details {
	display: flex;
	flex-direction: column;
	gap: 0.75rem; /* space between items */
	margin: 0;
	padding: 0;
	list-style: none;
}

.page-id-45 .mphb-booking-details li {
	display: block;              /* override any theme flex/grid */
	padding: 0.35rem 0;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}

.page-id-45 .mphb-booking-details li:last-child {
	border-bottom: none;
}

.page-id-45 .mphb-booking-details .label,
.page-id-45 .mphb-booking-details .value {
	display: block;              /* label on one line, value on next */
}

.page-id-45 .mphb-booking-details .label {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #6b7280;
	margin-bottom: 0.15rem;
}

.page-id-45 .mphb-booking-details .value {
	font-size: 0.95rem;
	font-weight: 500;
	color: #111827;
}

/* Remove chip-style background from Total + Status in booking details */

/* Reservation Received page */
.page-id-49 .mphb-booking-details .booking-price .value,
.page-id-49 .mphb-booking-details .booking-status .value,
/* Booking Cancellation page */
.page-id-45 .mphb-booking-details .booking-price .value,
.page-id-45 .mphb-booking-details .booking-status .value {
	background: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	display: inline;
}

/* Optional: keep them slightly emphasized with just font weight */
.page-id-49 .mphb-booking-details .booking-price .value,
.page-id-49 .mphb-booking-details .booking-status .value,
.page-id-45 .mphb-booking-details .booking-price .value,
.page-id-45 .mphb-booking-details .booking-status .value {
	font-weight: 600;
	color: #111827;
}