/* Kubi Smoobu Calendar Styles */

.kubi-smoobu-trigger button {
    background-color: #4B2F19;
    color: #FCF8F0;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-family: var(--wp--preset--font-family--montserrat) !important;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.kubi-smoobu-trigger button:hover {
    background-color: #956F4B;
}

.kubi-smoobu-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}

.kubi-smoobu-modal.active {
    display: block;
}

.kubi-smoobu-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

.kubi-smoobu-modal-content {
    position: relative;
    background-color: #ffffff;
    margin: 30px auto;
    padding: 30px;
    max-width: 95%;
    width: 1200px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    font-family: var(--wp--preset--font-family--montserrat) !important;
}

.kubi-smoobu-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 32px;
    line-height: 1;
    color: #4B2F19;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
}

.kubi-smoobu-modal-close:hover {
    color: #956F4B;
}

.kubi-smoobu-calendar-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #F6E5CC;
}

.kubi-smoobu-month-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.kubi-smoobu-month-selector button {
    background-color: #4B2F19;
    color: #FCF8F0;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.kubi-smoobu-month-selector button:hover {
    background-color: #956F4B;
}

.kubi-smoobu-current-month {
    font-size: 18px;
    font-weight: 600;
    color: #4B2F19;
    min-width: 150px;
    text-align: center;
    text-transform: capitalize;
}

.kubi-smoobu-calendar-container {
    position: relative;
    min-height: 300px;
}
.kubi-smoobu-inline-content .kubi-smoobu-calendar-container{
	min-height: 225px;
}

.kubi-smoobu-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #6F7466;
}

.kubi-smoobu-calendar-wrapper {
    /*display: none;*/
}

.kubi-smoobu-calendar-wrapper.loaded {
    display: block;
}

.kubi-smoobu-calendar-scroll {
    overflow-x: auto;
    overflow-y: visible;
}

.kubi-smoobu-calendar-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

.kubi-smoobu-calendar-table thead th {
    background-color: #F6F0E4;
    padding: 12px 8px;
    text-align: center;
    font-weight: 600;
    color: #4B2F19;
    font-size: 13px;
    border: 1px solid #F6E5CC;
    min-width: 60px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.kubi-smoobu-calendar-table thead th.room-header {
    text-align: left;
    min-width: 200px;
    max-width: 200px;
    width: 200px;
    background-color: #FCF8F0;
    position: sticky;
    left: 0;
    z-index: 11;
}

.kubi-smoobu-calendar-table thead th.day-header {
    vertical-align: top;
}

.kubi-smoobu-calendar-table thead th.day-header .day-name {
    display: block;
    font-size: 11px;
    color: #6F7466;
    margin-bottom: 4px;
}

.kubi-smoobu-calendar-table thead th.day-header .day-number {
    display: block;
    font-size: 16px;
    color: #4B2F19;
}

.kubi-smoobu-calendar-table thead th.day-header.today .day-number {
    background-color: #4B2F19;
    color: #FCF8F0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.kubi-smoobu-calendar-table tbody tr {
    border-bottom: 1px solid #F6E5CC;
}

.kubi-smoobu-calendar-table tbody td {
    padding: 5px 8px;
    text-align: center;
    /*border: 1px solid #F6E5CC;*/
    min-width: 60px;
	height: 40px;
}

.kubi-smoobu-calendar-table tbody td.room-name {
    text-align: left;
    font-weight: 500;
    color: #4B2F19;
    font-size: 14px;
    min-width: 200px;
    max-width: 200px;
    width: 200px;
    background-color: #FCF8F0;
    position: sticky;
    left: 0;
    z-index: 5;
}

.kubi-smoobu-calendar-table tbody td.day-cell {
    background-color: #ffffff;
    /*cursor: pointer;*/
    transition: background-color 0.2s ease;
}

.kubi-smoobu-calendar-table tbody td.day-cell:not(.booked):hover {
    background-color: #F6F0E4;
}

.kubi-smoobu-calendar-table tbody td.day-cell.booked {
    background-color: #ffc0c0;
    cursor: not-allowed;
    position: relative;
}
.kubi-smoobu-calendar-table tbody td.day-cell.booked.begin{
    background: linear-gradient(to top left, #ffc0c0 0%, #ffc0c0 50%, #ffffff 50%, #ffffff 100%);
    background-position: 0px -1px;
    background-size: 100% 101%;
}
.kubi-smoobu-calendar-table tbody td.day-cell.booked.end{
    background: linear-gradient(to bottom right, #ffc0c0 0%, #ffc0c0 50%, #ffffff 50%, #ffffff 100%);
    background-position: 0px -1px;
    background-size: 100% 101%;
}

/*.kubi-smoobu-calendar-table tbody td.day-cell.booked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgb(255 3 3 / 10%) 5px, rgba(75, 47, 25, 0.1) 10px);;
    pointer-events: none;
}*/

/*.kubi-smoobu-calendar-table tbody td.day-cell.booked:hover {
    background-color: #E0E0E0;
}*/

.kubi-smoobu-calendar-table tbody td.day-cell.weekend {
    background-color: #6f746617;
}

/*.kubi-smoobu-calendar-table tbody td.day-cell.weekend:hover {
    background-color: rgba(111, 116, 70, 0.6);
}*/

/* Inline View Styles */
.kubi-smoobu-inline {
    width: 100%;
    font-family: var(--wp--preset--font-family--montserrat) !important;
}

.kubi-smoobu-inline-content {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    /*border: 1px solid #F6E5CC;*/
    font-family: var(--wp--preset--font-family--montserrat) !important;
}

@media (max-width: 768px) {
    .kubi-smoobu-modal-content {
        margin: 10px;
        padding: 15px;
        max-width: calc(100% - 20px);
    }

    .kubi-smoobu-calendar-table thead th {
        min-width: 50px;
        padding: 8px 4px;
        font-size: 11px;
    }

    .kubi-smoobu-calendar-table thead th.room-header,
    .kubi-smoobu-calendar-table tbody td.room-name {
        min-width: 150px;
        max-width: 150px;
        width: 150px;
        font-size: 12px;
    }

    .kubi-smoobu-calendar-table tbody td {
        min-width: 50px;
        padding: 10px 4px;
    }

    .kubi-smoobu-current-month {
        font-size: 16px;
        min-width: 120px;
    }

    .kubi-smoobu-month-selector button {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
}

/* Preloader Fun & Animation */
.kubi-preloader {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.kubi-spinner {
    width: 45px;
    height: 45px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #0073aa;
    border-radius: 50%;
    animation: kubi-spin 1s linear infinite;
}

@keyframes kubi-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.kubi-loader-text {
    margin-top: 15px;
    font-weight: bold;
    color: #333;
}

/* Grille Étape 3 (Formulaire CF7 + Extras) */
.kubi-booking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 15px;
}

/* Modal layout */
.kubi-step-content {
    padding: 10px;
}

.kubi-btn-back {
    background: none;
    border: none;
    color: #0073aa;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    margin-bottom: 10px;
}

/* Success Message Étape 4 */
.kubi-success-message {
    text-align: center;
    padding: 40px 20px;
}

.kubi-success-icon {
    font-size: 50px;
    color: #46b450;
    margin-bottom: 15px;
}

/* ==========================================================================
   KUBI CALENDAR - CHARTE ET STYLES RESPONSIVE (LA GRANGE DES OLIVIERS)
   ========================================================================== */

:root {
    --kubi-primary: #4a5d4e;       /* Vert Sauge / Forestier */
    --kubi-primary-hover: #3b4a3e;
    --kubi-gold: #c5a059;          /* Ocre / Doré */
    --kubi-gold-hover: #b38e48;
    --kubi-bg-light: #f9f8f6;      /* Fond écru naturel */
    --kubi-text: #333333;
    --kubi-border: #e8e6e1;
    --kubi-border-focus: #4a5d4e;
    --kubi-success: #27ae60;
}

/* --------------------------------------------------------------------------
   1. BARRE DE RECHERCHE (.kubi-search-bar)
   -------------------------------------------------------------------------- */
#kubi-booking-modal{
	h2{
		padding: 0;
		margin: 0 0 25px;
		font-size: 2rem;
	}
	.kubi-search-bar {
		display: flex;
		align-items: flex-end;
		gap: 15px;
		background-color: var(--kubi-bg-light);
		padding: 20px;
		border-radius: 8px;
		border: 1px solid var(--kubi-border);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
		margin-top: 25px;
	}
	
	.kubi-search-field {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	
	.kubi-search-field label {
		font-size: 12px;
		font-weight: 600;
		color: var(--kubi-primary);
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin-bottom: 6px;
	}
	
	.kubi-search-field input[type="date"],
	.kubi-search-field select {
		width: 100%;
		padding: 10px 12px;
		font-size: 14px;
		color: var(--kubi-text);
		background-color: #ffffff;
		border: 1px solid var(--kubi-border);
		border-radius: 4px;
		outline: none;
		transition: border-color 0.2s, box-shadow 0.2s;
		box-sizing: border-box;
	}
	
	.kubi-search-field input[type="date"]:focus,
	.kubi-search-field select:focus {
		border-color: var(--kubi-border-focus);
		box-shadow: 0 0 0 3px rgba(74, 93, 78, 0.15);
	}
	
	#kubi-btn-search {
		background-color: var(--kubi-primary);
		color: #ffffff;
		border: none;
		padding: 11px 24px;
		font-size: 13px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		border-radius: 4px;
		cursor: pointer;
		transition: background-color 0.2s ease-in-out;
		white-space: nowrap;
		height: 42px;
	}
	
	#kubi-btn-search:hover {
		background-color: var(--kubi-gold);
	}
	
	/* --------------------------------------------------------------------------
	   2. LISTE DES RÉSULTATS (.kubi-results-list)
	   -------------------------------------------------------------------------- */
	#kubi-results-list {
		display: flex;
		flex-direction: column;
		gap: 15px;
		margin-top: 20px;
	}
	
	.kubi-room-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		border: 1px solid var(--kubi-border);
		border-radius: 8px;
		padding: 20px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
		transition: border-color 0.2s, box-shadow 0.2s;
	}
	
	.kubi-room-card:hover {
		border-color: var(--kubi-gold);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	}
	
	.kubi-room-info h3 {
		margin: 0 0 8px 0;
		font-family: 'Georgia', serif;
		font-size: 18px;
		color: var(--kubi-primary);
	}
	
	.kubi-room-info p {
		margin: 0;
		font-size: 14px;
		color: #555555;
	}
	
	.kubi-btn-select-room {
		background-color: var(--kubi-primary);
		color: #ffffff;
		border: none;
		padding: 10px 22px;
		font-size: 13px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		border-radius: 4px;
		cursor: pointer;
		transition: background-color 0.2s;
	}
	
	.kubi-btn-select-room:hover {
		background-color: var(--kubi-gold);
	}
	
	/* --------------------------------------------------------------------------
	   3. GRILLE DE RÉSERVATION ET EXTRAS
	   -------------------------------------------------------------------------- */
	.kubi-booking-grid {
		display: grid;
		grid-template-columns: 1fr 1.2fr;
		gap: 25px;
		margin-top: 20px;
	}
	
	.kubi-extras-selection-box {
		background-color: var(--kubi-bg-light);
		border: 1px solid var(--kubi-border);
		border-radius: 8px;
		padding: 20px;
		height: fit-content;
	}
	
	.kubi-extras-selection-box h3 {
		margin-top: 0;
		margin-bottom: 15px;
		font-family: 'Georgia', serif;
		font-size: 16px;
		color: var(--kubi-primary);
		border-bottom: 1px solid var(--kubi-border);
		padding-bottom: 10px;
	}
	
	.kubi-extra-item {
		background-color: #ffffff;
		border: 1px solid var(--kubi-border);
		border-radius: 6px;
		padding: 12px;
		margin-bottom: 12px !important;
		transition: border-color 0.2s;
	}
	
	.kubi-extra-item:hover {
		border-color: var(--kubi-primary);
	}
	
	.kubi-extra-label {
		display: flex;
		align-items: center;
		gap: 10px;
		cursor: pointer;
		font-size: 14px;
		color: var(--kubi-text);
		margin: 0;
	}
	
	.kubi-extra-label input[type="checkbox"] {
		accent-color: var(--kubi-primary);
		width: 18px;
		height: 18px;
		cursor: pointer;
	}
	
	.kubi-extra-qty-box {
		margin-top: 8px;
		padding-left: 28px;
		font-size: 13px;
		color: #666666;
	}
	
	.kubi-extra-qty-box input[type="number"] {
		width: 70px;
		padding: 4px 8px;
		border: 1px solid var(--kubi-border);
		border-radius: 4px;
		font-size: 13px;
		outline: none;
	}
	
	.kubi-extra-qty-box input[type="number"]:focus {
		border-color: var(--kubi-primary);
	}
	
	/* --------------------------------------------------------------------------
	   4. FORMULAIRE CONTACT FORM 7 (.kubi-booking-grid .kubi-cf7-form-box)
	   -------------------------------------------------------------------------- */
	.kubi-cf7-form-box {
		background-color: #ffffff;
		border: 1px solid var(--kubi-border);
		border-radius: 8px;
		padding: 25px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
	}
	
	/* Gestion automatique 1 ou 2 colonnes dans .form-row */
	.kubi-cf7-form-box .form-row {
		display: flex;
		gap: 15px;
		margin-bottom: 15px;
		width: 100%;
	}
	
	.kubi-cf7-form-box .form-row > p {
		flex: 1; /* Si 2 <p>, chacun prend 50%. Si 1 <p>, il prend 100% */
		margin: 0;
		width: 100%;
	}
	
	/* Typographie & Champs */
	.kubi-cf7-form-box label {
		display: block;
		font-size: 12px;
		font-weight: 600;
		color: var(--kubi-primary);
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin-bottom: 6px;
	}
	
	.kubi-cf7-form-box input[type="text"],
	.kubi-cf7-form-box input[type="email"],
	.kubi-cf7-form-box input[type="tel"],
	.kubi-cf7-form-box textarea {
		width: 100%;
		padding: 12px 14px;
		font-size: 14px;
		color: var(--kubi-text);
		background-color: #fafafa;
		border: 1px solid var(--kubi-border);
		border-radius: 4px;
		outline: none;
		box-sizing: border-box;
		transition: all 0.2s ease-in-out;
		font-family: inherit;
	}
	
	.kubi-cf7-form-box input[type="text"]:focus,
	.kubi-cf7-form-box input[type="email"]:focus,
	.kubi-cf7-form-box input[type="tel"]:focus,
	.kubi-cf7-form-box textarea:focus {
		background-color: #ffffff;
		border-color: var(--kubi-primary);
		box-shadow: 0 0 0 3px rgba(74, 93, 78, 0.12);
	}
	
	.kubi-cf7-form-box textarea {
		resize: vertical;
		min-height: 100px;
	}
	
	/* Case d'acceptation des conditions */
	.kubi-cf7-form-box .wpcf7-list-item {
		margin: 0;
	}
	
	.kubi-cf7-form-box .wpcf7-acceptance label {
		text-transform: none;
		font-weight: normal;
		font-size: 13px;
		color: #666666;
		display: flex;
		align-items: flex-start;
		gap: 8px;
		cursor: pointer;
	}
	
	.kubi-cf7-form-box .wpcf7-acceptance input[type="checkbox"] {
		margin-top: 3px;
		accent-color: var(--kubi-primary);
	}
	
	/* Bouton de validation */
	.kubi-cf7-form-box input[type="submit"],
	.kubi-cf7-form-box .button-primary {
		width: 100%;
		background-color: var(--kubi-primary);
		color: #ffffff;
		border: none;
		padding: 14px 20px;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		border-radius: 4px;
		cursor: pointer;
		transition: background-color 0.2s ease-in-out;
		margin-top: 10px;
	}
	
	.kubi-cf7-form-box input[type="submit"]:hover,
	.kubi-cf7-form-box .button-primary:hover {
		background-color: var(--kubi-gold);
	}
	
	/* Alerts CF7 */
	.kubi-cf7-form-box .wpcf7-not-valid-tip {
		font-size: 12px;
		color: #e74c3c;
		margin-top: 4px;
		display: block;
	}
	
	.kubi-cf7-form-box .wpcf7-response-output {
		margin: 15px 0 0 0;
		padding: 10px 14px;
		font-size: 13px;
		border-radius: 4px;
	}
	
	/* --------------------------------------------------------------------------
	   5. RESPONSIVE DESIGN
	   -------------------------------------------------------------------------- */
	
	/* Tablette (< 992px) */
	@media screen and (max-width: 992px) {
		.kubi-booking-grid {
			grid-template-columns: 1fr;
			gap: 20px;
		}
	
		.kubi-extras-selection-box {
			order: 2;
		}
	
		.kubi-cf7-form-box {
			order: 1;
		}
	}
	
	/* Mobile (< 768px) */
	@media screen and (max-width: 768px) {
		.kubi-search-bar {
			flex-direction: column;
			align-items: stretch;
			gap: 12px;
			padding: 15px;
		}
	
		#kubi-btn-search {
			width: 100%;
			margin-top: 5px;
		}
	
		.kubi-room-card {
			flex-direction: column;
			align-items: flex-start;
			gap: 15px;
		}
	
		.kubi-btn-select-room {
			width: 100%;
			text-align: center;
		}
	
		/* Passage automatique de .form-row en 1 seule colonne sur mobile */
		.kubi-cf7-form-box .form-row {
			flex-direction: column;
			gap: 12px;
			margin-bottom: 12px;
		}
	
		.kubi-cf7-form-box .form-row > p {
			width: 100%;
		}
	
		.kubi-cf7-form-box {
			padding: 15px;
		}
	}
}