:root {
    --kb-green: #0AD36F;
	--kb-pink: #FF2624;
	--kb-warning: #c00;
	--kb-blue: #2b54b7;
    --kb-border: #000;
    --kb-text: #222;
	--kb-grey: #cccccc;

}
h3{
	margin-bottom: 32px;
}

h4{
	font-weight: bold;
}
no-margin{
	margin: 0px !Important
}
.no-margin{
	margin: 0px !important;
}

.kb-message{
	width: 100% important;
	background: #ffffff;
	border: 2px solid var(--kb-blue);
}

.warning{
	border: solid 3px var(--kb-warning) !important;
	color: var(--kb-warning);
	
}
.warning a{
	color: var(--kb-warning);
}

.hidden{
	display: none;
}
.hidden:target {	
	display: block !important;
}
.grey{
	color: var(--kb-grey);
}

.onboard{
	border: 2px dashed var(--kb-blue);
}
a.onboard {
  color: var(--kb-blue);
}

a.primary {
  color: var(--kb-blue) !important;
}


/* Modal */
#modal-3 {
  padding: 32px;
}

.modal-bg {
  display: flex;
  z-index: 100;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
  padding: 2em 0;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .7);
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
.modal-bg:target {
  opacity: 1;
  pointer-events: auto;
}
.modal-content {
  position: relative;
  padding: var(--padding-med);
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  width: 100%;
  max-width: clamp(720px, 80vw, 1200px); /* wider on desktops */
  border-radius: 16px;
}
.close {
  position: absolute;
  top: 0;
  right: 0px;
  border: none !important;
}

/* Modal base styles */
dialog.kb-modal {
  border: none;
  padding: 0;
  width: min(92vw, 1200px);   /* allow more width if viewport is wide */
  max-height: 90dvh;
  border-radius: 16px;
  overflow: auto;

  /* centering */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}


/* end Modal */

.kb-booking-table td {
    padding: 16px;              /* Adds padding inside each cell */
    border-bottom: 1px solid #ccc;  /* Adds a light gray bottom border */
}

.kb-booking-table tr:last-child td {
    border-bottom: none;        /* Remove bottom border for the last row */
}

.kb-booking-table tbody tr:hover {
    background-color: white !important;
    cursor: pointer;
}

.kb-booking-container {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap !Important;
    flex-grow: 1;  
}



.kb-title{
	display: inline-flex;
	width: 100%;
	flex-grow: 1;
}
.kb-heading{
	margin-bottom: 32px;
}
.kb-header {
    display: flex;
    flex-wrap: nowrap; /* prevents wrapping */
    width: 100%;       /* fills available space */
    gap: 8px;          /* spacing between child elements */
	align-items: center;/* Vertically aligns all children */

}
.kb-page-title {
    flex-grow: 1;        /* occupies remaining horizontal space */
    white-space: nowrap; /* prevents line breaks if text is long */
}

/* Table container */
.kb-sites-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    border: 1px solid var(--kb-border);
}

/* Table header */
.kb-sites-table thead {
    background-color: var(--kb-header-bg);
    color: var(--kb-text);
	text-align: center;
}

.kb-sites-table th {
    padding: 12px;
    text-align: center;
    border: 1px solid var(--kb-border);
    min-width: 75px;
}

th {
    text-align: left !Important;
	color: var(--kb-grey);
}

.sticky{
	position: sticky !important;
	background-color: #ffffff;
}

/* Table body rows */
.kb-sites-table tbody tr {
    border-bottom: 2px solid var(--kb-border);
	height: 72px;
}

/* Table cells */
.kb-sites-table td {
    border: 1px solid var(--kb-border);
    text-align: center;
    min-width: 75px;
    font-size: 14px;
	white-space: nowrap !important;

}

/* Site name column */
.kb-site-name {
    text-align: left;
    width: 130px;
    padding-left: 12px;
}

.kb-day-abbr{
	text-align: center;
	font-size: 14px ; 
	line-height: 1;
	color: #4A4A51;
}
.kb-cell{
	padding: 0px;
    padding: 0;
	overflow: visible !important;
    position: relative;
}

.kb-booking-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
	color: var(--kb-grey);
	text-decoration: none !Important;
    width: 100%;
    height: 100%;
}

.kb-status{
	padding: 8px 16px 8px 16px;
	border-radius: 8px;
}
.kb-booking, kb-status {
    display: inline-flex;
	width: 100%;
    height: 100% !important;
    box-sizing: border-box; /* Ensures padding/border do not affect full size */
	align-items: center; /* Centers any content vertically */
    justify-content: center; /* Centers content horizontally (if needed) */
	padding: 8px;
}
.booking-header{
	padding: 16px;
	border-radius: 8px;
	margin-bottom: 16px
}

.kb-booking::before {
     content: "\00a0"; /* Inserts a non-breaking space */
}
.kb-status-confirmed {
    background-color: #0AD36F !important;
    color: white !important;
}
.kb-status-processing {
    background-color: #77f4b6 !important;
    color: white !important;
}
.kb-status-confirmed a {
    color: white !important;
}
.kb-status-blocked {
    background-color: #fbbf34 !important;
    color: #ffffff !important;
}
.kb-status-pending {
    background-color: #ffdb8e !important;
    color: white !important;
}
.kb-status-cancelled {
    background-color: #F8D8DB !important;
    color: red !important;
}
.kb-status-cancelled a {
    color: red !important;
}
.kb-checkout {
	width: 50%;
	border-radius: 0 100px 100px 0 !Important;
}

.kb-checkout::before {
    content: "\00a0"; /* Inserts a non-breaking space */
}
.kb-checkin{
	width: 50%;
	box-sizing: border-box;
	border-radius: 100px 0 0 100px !Important;
	left: 0;
	white-space: nowrap;  /* Prevents text from wrapping */
    overflow: visible;    /* Allows text to extend outside */
    text-overflow: clip;  /* Ensures text doesn't get truncated */
    position: relative;   /* Ensures proper positioning for overflow */
}

.kb-date .kb-checkin,
.kb-date .kb-checkout {
  flex: 0 0 50%;
  max-width: 50%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

.kb-booking-link {
    display: block;        /* Make the link behave like a block element */
    width: 100%;           /* Fill the available width */
    height: 100%;          /* Fill the available height */
    text-decoration: none; /* Remove underline */
    color: inherit;        /* Inherit text color */
}

/* Hover effect for better UX */
.kb-sites-table tbody td:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
.kb-site-active {
    border-bottom: 1px solid #000;
}
.kb-site-closed {
    background-color: #cccccc; 
    opacity: 0.3; /* Slightly faded */
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .kb-sites-table th, 
    .kb-sites-table td {
        font-size: 12px;
        padding: 0px;
        min-width: 80px;
    }
    .kb-site-name {
        width: 100px;
    }
}




/* Highlight closed sites */
.status-closed {
    border: 3px solid red;
}

/* Form Styling */
label{
	padding-top: 1rem; 
}
.kb-row label{
	display: inline-block; /* Prevents label from taking full width */
}
.kb-form .kb-row{
	margin-bottom: 0.5rem;
}

.form-footer {
  display: flex;
  justify-content: flex-end;
	padding-top: 16px;
}
.form-btn, .button, .button-primary{
	background-color: var(--kb-blue);
	color: #ffffff;
	border: none;
	border-radius: 8px;
	padding: 16px;
	cursor: pointer;
}

/* Park Setup / onboarding pages */
.kb-next-page{
    display:flex;
    justify-content:flex-end;
    width:100%;
    gap:10px;                
}
a.form-btn{
	color: #ffffff;

}
.form-btn:hover{
	background-color: #ff6264;
	cursor: pointer;
}
.hollow-btn{
	color: var(--kb-blue);
	text-decoration: none; 
	padding: 16px;
	border-radius: 8px;
	border: 2px solid var(--kb-blue) !important; 
	background-color: transparent;
}
.hollow-btn svg {
  fill: var(--kb-blue);              /* keep default blue */
  transition: fill 0.2s ease;        /* smooth color change */
}

.hollow-btn:hover svg {
  fill: #000;                        /* match the border/text hover color */
}
.hollow-btn-grey{
	color: var(--kb-grey) !important;
	text-decoration: none; 
	padding: 16px;
	border-radius: 8px;
	border: 2px solid var(--kb-grey); !important; 
	background-color: transparent;
	cursor: pointer;

}
.round{
	border-radius: 50%;
	width: 40px!important;
	height: 40px!important;
	padding: 0!Important;
	display: inline-flex;       /* center the icon */
	align-items: center;
	justify-content: center;
}
.hollow-btn-black{
	color: black;
	text-decoration: none; 
	padding: 16px;
	border-radius: 8px;
	border: 2px solid black !important; 
	background-color: transparent;
}
.hollow-btn:hover{
	border: 2px solid #000 !important; 
	color: #000;
}
.delete-btn{
	background-color: transparent;
	border: none;
    cursor: pointer;
}

/* Responsive Table */
.kb-booking-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.kb-log{
	margin-bottom: 8px;

	background-color: transparent !important;
	border-bottom: 1px solid #000;
	display: grid;
    gap: 16px;
	display: flex;
    flex-wrap: wrap; /* Allows stacking on smaller screens */
	justify-content: space-between;  
	align-items: center;
}

.kb-row {
    background: #ffffff;
    padding: 16px;
    border-radius: 8px;
    display: grid;
	border: transparent 2px solid; 
    gap: 16px;
	display: flex;
    flex-wrap: wrap; /* Allows stacking on smaller screens */
	justify-content: space-between;   
	align-items: center;
}

.kb-row:hover{
	border: rgba(0, 0, 0, 0.15) 2px solid; 
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);

}

.kb-row-highlight {
    border: 3px solid var(--kb-blue); 
}
.kb-row-highlight:hover {
    border: 3px solid var(--kb-blue); 
}

.kb-col {
}

.transparent{
	background-color: transparent !important;
}

.kb-row.transparent:hover,
.kb-row.transparent:hover * {
    box-shadow: none !important;   /* no shadows or lifts */
}

.kb-cell strong {
    display: block;
	white-space: nowrap;
	flex: 1 !important; /* Ensures cells share space evenly */
	text-align: left; /* Aligns all text to the left */
}

/* Stack cells on mobile screens */
@media (max-width: 768px) {
    .kb-row {
        flex-direction: column; /* Stack all cells */
        align-items: flex-start;
		gap: 8px;
    }
    .kb-cell {
        width: 100%; /* Each cell takes full width */
        text-align: left; /* Align text properly */
    }
    .kb-cell.date {
        text-align: left; /* Ensure date aligns properly on mobile */
    }
}


/* Tentative Booking Highlight */
/* Tentative Booking Style */

.selected{
	background-color: var(--kb-blue) !important;
	height: 32px !Important;
}

.kb-block {
    background-color: var(--kb-blue);
    border: 2px dashed var(--kb-blue);
}

.kb-block-btn {
    position: absolute;
    bottom: -40px; /* Adjust spacing below cell */
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: black;
    border: 2px solid black;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    z-index: 10000;
}

.kb-block-btn:hover {
    background: black;
    color: white;
}

.kb-date {
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: flex-start;
}

.kb-available {
    display: flex;
    flex-wrap: nowrap !Important;
    flex-grow: 1;  
	cursor: pointer;
	
	position: relative; /* Needed to position absolute button inside */
}
.kb-available:empty::after {
    content: "\200B"; /* Adds a zero-width space */
	flex-grow: 1; 
}
.kb-available:hover {
    background-color: rgba(76, 83, 235, 0.2); 
}

/* Ensure text is readable on blocked dates */
.kb-block .kb-cell-container {
    color: var(--kb-text);
}

/* Booking Form Styling */
.kb-booking-form .submit-column {
    text-align: right;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .kb-booking-grid {
        flex-direction: column;
        align-items: stretch;
    }

    .submit-column {
        text-align: left;
        margin-top: 10px;
    }
}



/* Keep kb-booking visible */
.kb-booking, kb-status{
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 100%;
}


/* Notification Bar */
@keyframes slideDown {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideUp {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-100%); opacity: 0; }
}

#n {
	border: none;
	position: fixed;
	width: 100%;
    top: 0;
    left: 0;
    animation: slideDown 0.5s ease-out, slideUp 0.5s ease-in 2s forwards;
}

/* Spinner animation */
/* Reserve space in any loading button */
.kb-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
  /* bump text over so spinner never overlaps */
  padding-left: 2.5em; /* adjust as needed – 2.5em ≈ 40px */
}

/* Position the spinner 16px in from the left edge */
.kb-loading .kb-spinner {
  position: absolute;
  left: 16px;
  right: auto;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  animation: kb-spin 1s linear infinite;
}

/* Force the spinner white */
.kb-loading .kb-spinner svg {
  fill: #fff;
}

/* --------------------------
   Utility .kb-pulse
   Gentle pulsing animation (infinite)
   Version 1.0
   -------------------------- */
@keyframes kb-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.05); opacity: 0.85; }
  100% { transform: scale(1);   opacity: 1; }
}

.kb-pulse {
  animation: kb-pulse 2.5s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform, opacity; /* performance hint */
}


/* [kb-search] */
.kb-search {
    position: relative;
    width: 100%;
}
.kb-search-input {
    width: 100%;
    padding: 16px !important;
    border: 1px solid #ccc;
	border-radius: 8px !important;
    outline: none;
}
.kb-search-input:focus {
    border: 2px solid var(--kb-blue);
    box-shadow: 0 0 4px rgba(83, 68, 244, 0.5); /* Optional: Adds a slight glow effect */
}
.kb-search-results {
    position: absolute;
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    display: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 999;
    border-radius: 4px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

.kb-search-item {
    padding: 10px;
	gap: 16px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    color: #333;
    display: flex;
    align-items: center;
	white-space: nowrap; /* Prevents stacking */
	color: var(--kb-blue);

}
.kb-search-item:hover,
.kb-search-item.active {
    background: #f0f0f0;
}
.kb-search-item:last-child {
    border-bottom: none;
}
.kb-search-add {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--kb-blue);
	background-color: #E3E3F0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
}
.kb-search-add:hover {
    background: var(--kb-blue);
	color: #ffffff;
}


@media screen and (max-width: 768px) {
    .kb-search {
        max-width: 100%; /* Full width on smaller screens */
    }
    .kb-search-input {
        font-size: 14px;
    }
    .kb-search-item {
        font-size: 13px;
    }
}

/* Booking Form Date Fields */
#kb-form-dates .kb-row {
  align-items: flex-end; /* Align inputs and button at the bottom */
}

#kb-form-dates .kb-cell input[type="date"],
#kb-form-dates .kb-cell .form-btn {
  width: 100% !important;
  box-sizing: border-box;
}

#kb-form-dates .submit-column label {
  display: none; /* Hide the spacer label */
}

/* Pagination Styles */
.kb-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.kb-pagination a {
    padding: 8px 12px;
    border: 1px solid var(--kb-border);
    background-color: #f8f8f8;
    text-decoration: none;
    color: var(--kb-text);
    border-radius: 4px;
}

.kb-pagination a:hover {
    background-color: var(--kb-blue);
    color: white;
}

.kb-pagination a.active {
    font-weight: bold;
    background-color: var(--kb-green);
    color: var(--kb-blue);
}

/* Calendar Controls */
.kb-calendar-controls {
    text-align: center;
    margin-bottom: 10px;
}

.kb-controls-form {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
 
.kb-button{
    padding: 8px;
    background-color: transparent;
    color: #000000;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    cursor: pointer;
}
.kb-button svg {
    width: 24px;
    height: 24px;
    fill: #000000; 
    transition: fill 0.3s ease-in-out; /* Smooth transition */
}

.kb-button:hover {
    color: var(--kb-blue);
	fill: var(--kb-blue) !Important;
}

/* Keep Cancel + Pay buttons inline even on mobile */
.kb-btn-group {
  display: flex;
  flex-direction: row !important; /* force row, even on mobile */
  flex-wrap: nowrap !important;   /* prevent wrapping */
  gap: 10px;                      /* space between buttons */
  width: 100%;
  justify-content: flex-end;      /* right-align (optional) */
}

.kb-btn-group .form-btn,
.kb-btn-group .hollow-btn {
  flex: 1;            /* let them share space evenly */
  min-width: 120px;   /* keep them tappable */
}
/* -------------------------- */
/* CSS for kb-calendar Hover Popup */
/* Displays guest name, nights, site category, and site name on hover */
/* Maintains .kb-available selection functionality */
/* Version 1.3 - Fixed selection issues */
/* -------------------------- */

/* Tooltip container on .kb-booking */
.kb-booking {
  position: relative;
  cursor: pointer;
}

/* Tooltip display */
.kb-booking::after {
  content: attr(data-guest-name) " · " attr(data-nights) " nights";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  z-index: 1000;
}


/* Show tooltip on hover, only for .kb-booking */
.kb-booking:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Prevent interference with .kb-available selection */
.kb-available {
  cursor: pointer;
}

/* Ensure .selected state for .kb-available remains visible */
.kb-available.selected {
  background-color: rgba(83, 68, 244, 0.2); /* Slight blue highlight */

}

/* Optional: Adjust for long content */
.kb-booking::after {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* --------------------------------------------- */
/* kb-available tooltip – sits *below* the bar   */
/* shows only when the cell is not .selected     */
/* --------------------------------------------- */

.kb-available[data-tip] {
  position: relative;                  /* anchor for ::after */
  cursor: pointer;
}

/* hidden by default */
.kb-available[data-tip]:not(.selected)::after {
  content: attr(data-tip);
  position: absolute;
  top: 100%;                           /* directly below bar */
  left: 50%;
  transform: translate(-50%, 8px);     /* 8-px gap */
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 1000;
}

/* reveal on hover (but not while selected) */
.kb-available[data-tip]:not(.selected):hover::after {
  opacity: 1;
  visibility: visible;
}



/* Responsive adjustments for small screens */
@media (max-width: 600px) {
  .kb-booking::after {
    font-size: 10px;
    max-width: 200px;
  }
}

/* --------------------------
   KissBook Wide Template (FSE)
   Version 1.0
   -------------------------- */
.kb-wide-template {
  width: 100vw !important;
  max-width: 100% !important;
  margin: 0 auto;
  overflow-x: auto;
  background: #fff; /* optional */
}

.kb-wide-template .wp-block-group__inner-container,
.kb-wide-template .wp-block-post-content {
  max-width: none !important;
  width: 100%;
}

.kb-wide-template table {
  width: 100%;
  min-width: 1200px; /* keeps calendar readable */
}

/* --------------------------
   Security Check Panel (admin-only)
   Version 1.0
   -------------------------- */
.kb-security-check {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  font-family: monospace;
  line-height: 1.6;
}
.kb-sec-title {
  font-weight: 700;
  margin-bottom: 4px;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 4px;
}
.kb-sec-section {
  font-weight: 700;
  margin-top: 8px;
  color: #495057;
}
.kb-sec-pass {
  color: #198754;
}
.kb-sec-fail {
  color: #dc3545;
}
.kb-sec-warn {
  color: #fd7e14;
}

/* Vertically center content within a 100vh group block (desktop only) */
@media (min-width: 992px) {
  .kb-vcenter {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}