@import url('https://fonts.googleapis.com/css2?family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');

/* Cursor pointer for navigation menu item that opens popup */
#nav-menu-item-13179,
#nav-menu-item-13179 a {
    cursor: pointer !important;
}

@font-face {
    font-family: 'PP Neue Montreal Book';
    font-style: normal;
    font-weight: normal;
    src: local('PP Neue Montreal Book'), url('../fonts/pp-neue-montreal/ppneuemontreal-book.woff') format('woff');
}

/*  just for durint the work css */
/* #groomSelect {
	display: block !important;
} */


@font-face {
    font-family: 'PP Neue Montreal Italic';
    font-style: normal;
    font-weight: normal;
    src: local('PP Neue Montreal Italic'), url('../fonts/pp-neue-montreal/ppneuemontreal-italic.woff') format('woff');
}


@font-face {
    font-family: 'PP Neue Montreal Thin';
    font-style: normal;
    font-weight: normal;
    src: local('PP Neue Montreal Thin'), url('../fonts/pp-neue-montreal/ppneuemontreal-thin.woff') format('woff');
}


@font-face {
    font-family: 'PP Neue Montreal Medium';
    font-style: normal;
    font-weight: normal;
    src: local('PP Neue Montreal Medium'), url('../fonts/pp-neue-montreal/ppneuemontreal-medium.woff') format('woff');
}


@font-face {
    font-family: 'PP Neue Montreal SemiBold italic';
    font-style: normal;
    font-weight: normal;
    src: local('PP Neue Montreal SemiBold italic'), url('../fonts/pp-neue-montreal/ppneuemontreal-semibolditalic.woff') format('woff');
}


@font-face {
    font-family: 'PP Neue Montreal Bold';
    font-style: normal;
    font-weight: normal;
    src: local('PP Neue Montreal Bold'), url('../fonts/pp-neue-montreal/ppneuemontreal-bold.woff') format('woff');
}

/*-- roobert pro font --*/
@font-face {
    font-family: 'Roobert PRO';
    src: url('../fonts/roobert/RoobertPRO-Regular.eot');
    src: local('Roobert PRO Regular'), local('RoobertPRO-Regular'),
    url('../fonts/roobert/RoobertPRO-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roobert/RoobertPRO-Regular.woff2') format('woff2'),
    url('../fonts/roobert/RoobertPRO-Regular.woff') format('woff'),
    url('../fonts/roobert/RoobertPRO-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roobert PRO';
    src: url('../fonts/roobert/RoobertPRO-Bold.eot');
    src: local('Roobert PRO Bold'), local('RoobertPRO-Bold'),
    url('../fonts/roobert/RoobertPRO-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roobert/RoobertPRO-Bold.woff2') format('woff2'),
    url('../fonts/roobert/RoobertPRO-Bold.woff') format('woff'),
    url('../fonts/roobert/RoobertPRO-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roobert PRO';
    src: url('../fonts/roobert/RoobertPRO-Light.eot');
    src: local('Roobert PRO Light'), local('RoobertPRO-Light'),
    url('../fonts/roobert/RoobertPRO-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roobert/RoobertPRO-Light.woff2') format('woff2'),
    url('../fonts/roobert/RoobertPRO-Light.woff') format('woff'),
    url('../fonts/roobert/RoobertPRO-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roobert PRO';
    src: url('../fonts/roobert/RoobertPRO-Medium.eot');
    src: local('Roobert PRO Medium'), local('RoobertPRO-Medium'),
    url('../fonts/roobert/RoobertPRO-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/roobert/RoobertPRO-Medium.woff2') format('woff2'),
    url('../fonts/roobert/RoobertPRO-Medium.woff') format('woff'),
    url('../fonts/roobert/RoobertPRO-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/*-- roobert pro font end--*/

.main-title{
    font-family: 'Playfair', serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 32px;
    vertical-align: middle;
    text-transform: initial;
    text-align: center;
    margin-bottom: 8px;

}


.loginArea div{
    border-top: 1px solid #000;
    font-family: Roobert PRO;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    vertical-align: middle;
    color: #aaaaaa;
    padding-top: 8px;
}

.goToLogin{
    cursor: pointer;
    font-weight: bold;
    color: #100A03;
}

.cbm-login-prompt {
    font-family: Roobert PRO;
    font-size: 15px;
    color: #100A03;
    line-height: 1.4;
}

.cbm-login-prompt span {
    margin-right: 4px;
}

.cbm-login-prompt .goToLogin {
    font-size: 15px;
    text-decoration: underline;
}

.color-100A03{
    color: #100A03;
}


.option-box {
    text-align: center;
}

.option-box-2 {
    cursor: default;
    margin-bottom: 1.5rem !important;
}

.boxes {
    margin-bottom: 1.5rem;
}
.option-box-3 div{
    /*--gap: 10px;
    border-radius: 8px;
    padding-top: 17px;
    padding-right: 10px;
    padding-bottom: 17px;
    padding-left: 10px;
    font-family: PP Neue Montreal Medium;
    font-weight: 500;
    font-size: 17px;
    line-height: 100%;
    letter-spacing: 4%;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    background: #E3E0DE;
    color: #000;--*/
	
	
/* 	remove style from here */
    flex-direction: column;

    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 16px !important;
    padding-right: 24px;
    padding-bottom: 16px !important;
    padding-left: 24px;
    border: 1px solid #100A03;
    font-family: Roobert PRO;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    width: auto;
    cursor: pointer;

}
.stylenone{
	margin: 0px !important;
    padding: 0px!important;
}

.dropdown-toggle-1,
.dropdown-toggle-2 {
    cursor: pointer;
}

.borderbzero{
	border-bottom: 0px !Important;
}

.bordertzero{
	border-top: 0px !Important;
}

.borderbzero {
    background-color: #00000000 !important;
    color: black !important;
	margin-bottom: 0px !important;
	padding-bottom: 0px !important;
}

.option-box-3 .borderbzero {
    padding-bottom: 0px !important;
    margin-top: 0 !important;
}

.mtc{
	margin-top: 15px !important;
}

.flex-middle {
	display: flex;
	justify-content: center;
}
.bg-white-colorblackarrow {
    border-left: solid 1px;
    border-right: solid 1px;
    display: flex;
    border-top: 0px !important;
/*     border-bottom: 1px solid; */
    justify-content: end;
    padding: 0px 24px !important;
}
.bg-white-colorblackarrow2 {
    display: flex;
    padding: 0px 24px !important;
    justify-content: end;
    border-left: solid 1px;
    border-right: solid 1px;
}
.borderbuttoncontrol{
	 border-bottom: 1px solid;
}
.arrow-align {
	    align-items: center;
    width: 57px;
    display: flex;
    justify-content: space-between;
}

.arrowbottom, .arrowbottom2 {
    transform: rotate(180deg);
}

/* Make arrow containers clickable */
.bg-white-colorblackarrow, .bg-white-colorblackarrow2 {
    cursor: pointer;
}

.bg-white-colorblack{
	background: #ffffff00 !important;
	border: 0px !important;
}

.price {
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 5px !important;
}

.fee {
    font-size: 12px !important;
    color: red;
    display: block;
    margin-top: 6px;
}

/* Toggle: hide fee text when disabled in admin */
.cbm-hide-fee .fee {
    display: none !important;
}

/* Toggle: hide rush warnings when disabled in admin */
.cbm-hide-rush .cbm-rush-warning {
    display: none !important;
}

.serviceTextContainer.mt-3 {
    margin-top: 0 !important;
}

.groom-select-box {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.option-box div{
    /*--gap: 10px;
    border-radius: 8px;
    padding-top: 17px;
    padding-right: 10px;
    padding-bottom: 17px;
    padding-left: 10px;
    font-family: PP Neue Montreal Medium;
    font-weight: 500;
    font-size: 17px;
    line-height: 100%;
    letter-spacing: 4%;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    background: #E3E0DE;
    color: #000;--*/
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 8px;
    padding-right: 16px;
    padding-bottom: 8px;
    padding-left: 16px;
    border: 1px solid #100A03;
    font-family: Roobert PRO;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    width: auto;
    transition: all 0.3s ease;
    cursor: pointer;
}

.option-box div b,
.option-box div strong,
.role-box div b,
.role-box div strong {
    display: inline;
}

a.nextButton.nextButton1 {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}
a.nextButton.nextButton1.enabled {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: revert !important;
}


a.nextButton.nextButton2 {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}
a.nextButton.nextButton2.enabled {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: revert !important;
}


a.nextButton.nextButton3 {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}
a.nextButton.nextButton3.enabled {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: revert !important;
}
a.nextButton {
    width: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    display: flex;
    justify-content: flex-end;
}

.mb-3 {
    margin-top: .5rem !important;
}

.mb-2:has(label.label-text) {
    margin-bottom: 0 !important;
}

.forget-password-button {
    cursor: pointer;
    font-size: 12px !important;
}
a.nextButton.nextButton4 {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}
a.nextButton.nextButton4.enabled {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: revert !important;
}

.selector {
    display: flex;
    align-items: center;
}

.option-box-2{
    gap: 8px;
    padding-top: 0px;
    padding-right: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
    border: 1px solid #100A03;
    font-family: Roobert PRO;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.3;
    width: auto;

}

.option-box-3 span {
    display: block;
    line-height: 1.3;
}

.mainCardContainer{
    background-color: #F3EEEC;
	width: 400px;
    min-height: 45rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
}

.mainCardContainer::-webkit-scrollbar {
    display: none;
}

.custom-container-style.p-4 {
    border: none;
    padding: 85px 3rem 35px 3rem !important;
    box-shadow: none !important;
    /* Transition for manual opacity control */
    transition: opacity 0.4s ease;
    background-color: #F3EEEC !important;
    /* Animation on visibility */
    animation: fadeIn 0.8s ease;
    /*max-width: 17rem !important;*/
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 45rem;
}

.custom-container-style.p-4:has(>img) {
    padding: 50px 3rem 35px 3rem !important;

}

.row.mt-4 {
    display: flex;
    align-items: flex-end;
    padding-top: 24px;
    margin-top: auto !important;
}

#specialEvent .sub-title-2 {
    margin-top: 0;
}

.booking-box-specialEvent {
    padding: 0 !important;
}

.booking-box-specialEvent .borer-none {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.row.g-3 .text-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
}

.text-center .sub-title-2 {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Keyframes for fade-in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.sub-title{
    font-family: Roobert PRO;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    vertical-align: middle;
    text-transform: initial;
    text-transform: none !important;
    letter-spacing: 0;
    

}
.sub-title-2{
    font-family: Roobert PRO;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    vertical-align: middle;
    color: #100A03;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}
.top-title img{
    padding-right: 10px;
    height: 8px;
}

.min-width-500{
    min-width: 500px !important;
}
.top-title{
    font-family: Roobert PRO;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 1px;
    vertical-align: middle;
    text-transform: uppercase;
    color: #100A03;
    display: flex;
    align-items: center;
    justify-content: start;
}

.tagline{
    font-family: Roobert PRO;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
    color: #323232;
    display: block;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 16px;
}
.backToPrevious,
.backFromAmelia {
    font-family: Roobert PRO;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 1px;
    vertical-align: middle;
    text-transform: uppercase;
    color: #100A03;
    text-decoration: none;
}

.backToPrevious img,
.backFromAmelia img {
    padding-right: 2px;
    transform: rotate(180deg);
}


/*--.backToPrevious{
    font-family: PP Neue Montreal Medium;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 10%;
    vertical-align: middle;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 25%;
    text-decoration-thickness: 5.5%;
    text-decoration-skip-ink: auto;
    color: #100A03;
}--*/
.backToPrevious:hover,
.backFromAmelia:hover {
    color: #100A03;
}

/* #groomSelect{
	display: block !important;
} */

.nextButton{
    font-family: Roobert PRO;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 1px;
    vertical-align: middle;
    text-transform: uppercase;
    color: #100A03;
    text-decoration: none;
    display: flex;
    justify-content: flex-end;
}

.skip-date-link {
    font-family: 'Roobert PRO';
    font-size: 13px;
    font-weight: 500;
    color: #100A03;
    text-decoration: underline;
    cursor: pointer;
    display: inline-block;
}
.skip-date-link:hover {
    color: #100A03;
    opacity: 0.7;
}

.bottomButtons .col-12{
    padding: 0 5px 0 5px;
}
.bottomButtons {
    width: 320px;
    align-self: center;
    border-bottom: solid black 1px;
    position: sticky;
    bottom: 0;
    background-color: #F3EEEC;
    z-index: 10;
    padding-bottom: 25px;
}

.nextButton:hover{
    color: #100A03;
}
    /* Calendar Container */
 .ui-datepicker {
     font-family: 'Roobert PRO';
     border: none !important;
     background-color: #f3eeec;
     padding: 0 !important;
 }

.ui-datepicker table {
    border: none !important;
}

/* Header */
.ui-datepicker-title {
    font-size: 16px;
    font-weight: 500;
    color: #323232;
    line-height: 100% !important;
}

.ui-datepicker-month {
    font-size: 12px;
}

.ui-datepicker-header {
    background: none;
    border: none;
    color: #222;
    padding: 0 !important;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Month and Year Selector Container */
.ui-datepicker .ui-datepicker-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1;
    gap: 0;
}

/* Remove spacing from month and year elements */
.ui-datepicker .ui-datepicker-month,
.ui-datepicker .ui-datepicker-year {
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* Remove the non-breaking space between month and year */
.ui-datepicker .ui-datepicker-title {
    white-space: nowrap;
}

.ui-datepicker .ui-datepicker-title * {
    white-space: normal;
}

.ui-datepicker-prev, .ui-datepicker-next {
    top: 5px !important;
}

.ui-datepicker-prev span, .ui-datepicker-next span {
    background-color: #eee;
    border-radius: 50%;
    padding: 5px;
    font-size: 14px;
}
.ui-datepicker th {
    font-weight: 500;
    padding: 0 !important;
}

.hasDatepicker {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Day Cell */
 .ui-datepicker td {
    font-size: 11px;
    font-weight: 400;
      line-height: 1.6rem;
}

.ui-datepicker td a {
    display: block;
    text-align: center;
    padding: 4px 8px;
    background-color: #f3eeec !important;
    color: #100A03 !important;
    text-decoration: none;
    border: none !important;
    transition: background-color 0.3s ease;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Ensure datepicker cells are clickable */
.ui-datepicker td {
    cursor: pointer !important;
    pointer-events: auto !important;
}

.ui-datepicker td a:hover {
    background-color: #e0e0e0 !important;
	border-radius: 100px;
    cursor: pointer !important;
}

/* Ensure the datepicker container is clickable */
.ui-datepicker {
    pointer-events: auto !important;
    z-index: 999999 !important;
}

/* Debug styles - make sure elements are visible and clickable */
.ui-datepicker td a {
    position: relative !important;
    z-index: 100 !important;
}

/* Ensure no overlapping elements block the datepicker */
.ui-datepicker * {
    pointer-events: auto !important;
}

span.ui-icon.ui-icon-circle-triangle-w {
 background-image: url(../images/arrow.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(180deg)
}

.blackbutton{
    background: black;
    color: white;
}

span.ui-icon.ui-icon-circle-triangle-e {
background-image: url(../images/arrow.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

a.ui-state-default{
    border-radius: 100px;
}
.ui-datepicker td a:hover {
    background-color: #e0e0e0 !important;
	border-radius: 100px;
}


.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #100A03 !important;
    background: #f3eeec !important;
    color: #100A03 !important;
    font-weight: bold;
    border-radius: 50%;
}
/* Current Day */
.ui-datepicker-today a {
    background-color: #100A03 !important;
    color: white !important;
    font-weight: bold;
}

/* Disabled Dates */
.ui-datepicker-unselectable span {
    color: #ccc;
    background: none;
}


/*-- calender end --*/

/* Utility classes */
.no-padding {
    padding: 0 !important;
}

.form-field-custom {
    /*--font-family: Roobert PRO;
    font-size: 13px;
    color: #000;
    font-weight: 500;
    background-color: #E3E0DE54;
    gap: 10px;
    border-radius: 0px !important;
    border: 1px solid #000;
    padding-top: 17px;
    padding-right: 10px;
    padding-bottom: 17px;
    padding-left: 10px;--*/

    font-family: Roobert PRO;
    font-size: 14px !important;
    color: #323232 !important;
    font-weight: 500;
    background-color: #E3E0DE54;
    border-radius: 0px !important;
    gap: 8.78px;
    padding-top: 11.41px !important;
    padding-right: 14.04px !important;
    padding-bottom: 11.41px !important;
    padding-left: 14.04px !important;
    border: 1px solid #100A03 !important;
}

.form-field-custom:focus,
.form-field-custom:active {
    border: 1px solid #E3E0DE54;
    outline: none;
    background-color: #E3E0DE54;
}
.form-field-custom option {
    color: #000;
    font-weight: 500;
}

/* Reduce height (you can fine-tune this) */
select.form-field-custom {
    height: 48px; /* You can adjust this */
    padding-top: 12px;
    padding-bottom: 12px;
}
.button-custom{
    /*--gap: 10px;
    border-radius: 8px;
    padding-top: 17px;
    padding-right: 10px;
    padding-bottom: 17px;
    padding-left: 10px;
    background-color: #1D1D1D;
    font-family: PP Neue Montreal Medium;
    font-weight: 500;
    font-size: 17px;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    color: #FFFFFF;--*/
    gap: 8px;
    padding: 12px 32px;
    background-color: #3C2415 !important;
    font-family: 'Roobert PRO';
    font-weight: 500;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0.15em;
    vertical-align: middle;
    text-transform: uppercase;
    color: #FAF8F5 !important;
    min-height: 44px;
    border-radius: 0px !important;
    border: 1px solid #3C2415;
}

.button-custom:hover{
    background-color: #2A1A0E !important;
    border-color: #2A1A0E !important;
}


.button-custom-two{
    gap: 10px;
    border-radius: 0px;
    background-color: #1D1D1D;
    font-family: PP Neue Montreal Medium;
    font-size: 17px;
    text-align: center;
    vertical-align: middle;
    color: #FFFFFF;

}

.button-custom-two:hover{
    background-color: #1D1D1D;
}


.text-style{
    font-size: 14px;
    line-height: 1.3;
    text-transform: none;
    font-family: Roobert PRO;
    text-align: left;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* Red styling for "too many people" warning text */
.text-style.too-many-people {
    font-size: 12px;
    color: #dc3545 !important;
    font-weight: bold;
}

.text-style.too-many-people b {
font-size: 12px;
    color: #dc3545 !important;
}

/* Rush warning text inside accordion - matches regular content style but red */
.cbm-rush-text {
    color: #dc3545 !important;
    font-size: 14px;
    font-weight: 600;
    padding: 0;
    margin: 6px 0 5px 0;
}

/* Rush price toggle - hidden by default, shown by JS */
.cbm-price-rush.d-none {
    display: none !important;
}

/* Inline Booking Button inside Wedding accordions */
.cbm-inline-booking-wrap {
    display: flex;
    justify-content: center;
    padding: 15px 0 5px 0;
}

.cbm-inline-booking-btn {
    gap: 8px;
    padding: 8px 16px;
    background-color: #100A03 !important;
    font-family: Roobert PRO;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.2em;
    vertical-align: middle;
    text-transform: uppercase;
    color: #FFFFFF !important;
    min-height: 34px;
    border-radius: 0px !important;
    border: 1px solid #100A03;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.cbm-inline-booking-btn img {
    filter: brightness(0) invert(1);
    width: 14px;
    height: auto;
}

.cbm-inline-booking-btn:hover {
    background-color: transparent !important;
    color: #100A03 !important;
    border: 1px solid #100A03;
}

.cbm-inline-booking-btn:hover img {
    filter: none;
}

.cbm-inline-booking-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* Reduce top spacing in accordion when open */
.option-box-2 .serviceTextContainer.mt-3 {
    margin-top: 0px !important;
}

/* Disabled next button styling */
.nextStep.disabled,
.nextButton.disabled,
.bookingbuttonNext.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Add padding for select dropdown options to prevent text cutoff */
.select-form-field-custom option {
    padding: 5px 15px;
}

/* Auto-opened single consultation styling */
.booking-box.auto-opened {
    cursor: default;
}

.booking-box.unclickable {
    pointer-events: none;
    cursor: default;
}

.booking-box.unclickable ~ .dropdown-toggle-1 {
    cursor: default;
    pointer-events: none;
}

.booking-box,.booking-box2 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}
.select-form-field-custom{
    border: 1px solid #000 !important;
    height: 30px !important;
    width: 60px;
    line-height: 1.3;
    padding: 2px !important;
    font-size: 12px;
    float: right;
}

.label-text{
    font-family: Roobert PRO;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #323232;
}
.float-right{
    float: right;
}
.text-center{
    text-align: center;
}
.black-border{
    margin: 5px 0px 0px 0px;
    border-bottom: 1px solid #000;
}
.borer-none{
    border: none !important;
}

/* Cacher le top-title */
.top-title {
    display: none !important;
}

.event-box.option-box.Wedding.checked.blackbutton,
.event-box.option-box.mtc.PromGraduation.checked.blackbutton,
.event-box.option-box.mtc.SpecialEvent.checked {
    color: gray;
}


/* ========================================
   HOVER EFFECTS - VERSION PROPRE ET FLUIDE
   Remplace toute la section "FIXED HOVER EFFECTS FOR POPUP BUTTONS"
   ======================================== */

/* Couleur de sélection - #7C4423 */
.blackbutton {
    background: #7C4423 !important;
    color: white !important;
    transition: all 0.3s ease;
}

/* ========================================
   BOUTONS NAVIGATION (Next/Back)
   ======================================== */

/* Next Button - Mouvement vers la droite */
a.nextButton {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

a.nextButton:hover {
    transform: translateX(8px);
}

a.nextButton img {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

a.nextButton:hover img {
    filter: brightness(0.6);
}

/* Back Button - Mouvement vers la gauche */
.backToPrevious,
.backFromAmelia {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.backToPrevious:hover,
.backFromAmelia:hover {
    transform: translateX(-8px);
}

.backToPrevious img,
.backFromAmelia img {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.backToPrevious:hover img,
.backFromAmelia:hover img {
    filter: brightness(0.6);
}

/* Reset button */
.resetPopup {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.resetPopup:hover {
    transform: translateX(5px);
    color: #7C4423 !important;
}

/* ========================================
   BOUTONS OPTIONS (Event/Role/Groom boxes)
   Animation: Léger lift + border change
   ======================================== */

/* Event boxes */
.event-box {
    cursor: pointer;
}

.event-box div {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.event-box:hover div {
    transform: translateY(-3px);
    border-color: #7C4423 !important;
    box-shadow: 0 4px 12px rgba(124, 68, 35, 0.15);
}

/* Role boxes */
.role-box {
    cursor: pointer;
}

.role-box div {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.role-box:hover div {
    transform: translateY(-3px);
    border-color: #7C4423 !important;
    box-shadow: 0 4px 12px rgba(124, 68, 35, 0.15);
}

/* Groom select boxes */
.groom-select-box,
.groom-select-box2 {
    cursor: pointer;
}

.groom-select-box div,
.groom-select-box2 div {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.groom-select-box:hover div,
.groom-select-box2:hover div {
    transform: translateY(-3px);
    border-color: #7C4423 !important;
    box-shadow: 0 4px 12px rgba(124, 68, 35, 0.15);
}

/* Option boxes génériques */
.option-box {
    cursor: pointer;
}

.option-box div {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.option-box:hover div {
    transform: translateY(-3px);
    border-color: #7C4423 !important;
    box-shadow: 0 4px 12px rgba(124, 68, 35, 0.15);
}

/* ========================================
   BOOKING BOXES (Consultation boxes)
   Animation: Ligne descend + texte change de couleur
   ======================================== */

.col-12.booking-box.option-box-3,
.col-12.booking-box2.option-box-3,
.booking-box.option-box-3,
.booking-box2.option-box-3 {
    cursor: pointer;
}

/* Animation du padding pour faire descendre la ligne */
.col-12.booking-box.option-box-3 .borderbzero,
.col-12.booking-box2.option-box-3 .borderbzero,
.booking-box.option-box-3 .borderbzero,
.booking-box2.option-box-3 .borderbzero {
    transition: padding-bottom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding-bottom: 0px;
}

.col-12.booking-box.option-box-3:hover .borderbzero,
.col-12.booking-box2.option-box-3:hover .borderbzero,
.booking-box.option-box-3:hover .borderbzero,
.booking-box2.option-box-3:hover .borderbzero {
    padding-bottom: 10px !important;
}

/* Texte change de couleur au hover */
.col-12.booking-box.option-box-3 .borderbzero span,
.col-12.booking-box2.option-box-3 .borderbzero span,
.booking-box.option-box-3 .borderbzero span,
.booking-box2.option-box-3 .borderbzero span {
    transition: color 0.3s ease;
}

.col-12.booking-box.option-box-3:hover .borderbzero span,
.col-12.booking-box2.option-box-3:hover .borderbzero span,
.booking-box.option-box-3:hover .borderbzero span,
.booking-box2.option-box-3:hover .borderbzero span {
    color: #7C4423 !important;
}

/* La ligne reste stable */
.col-12.booking-box.option-box-3 .black-border,
.col-12.booking-box2.option-box-3 .black-border,
.booking-box.option-box-3 .black-border,
.booking-box2.option-box-3 .black-border {
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin: 5px 0px 0px 0px;
}

/* ========================================
   FORM BUTTONS (Submit/Register/Login)
   ======================================== */

.button-custom {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
}

.button-custom:hover {
    background-color: #2A1A0E !important;
    border-color: #2A1A0E !important;
    color: #FAF8F5 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(60, 36, 21, 0.3);
}

/* ========================================
   LINKS (Login/Register/Forgot Password)
   ======================================== */

.goToLogin,
.forget-password-button {
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.goToLogin:hover,
.forget-password-button:hover {
    color: #7C4423 !important;
    text-decoration: underline;
}

/* ========================================
   DROPDOWN TOGGLES (Arrow buttons)
   ======================================== */

.dropdown-toggle-1,
.dropdown-toggle-2 {
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.dropdown-toggle-1:hover,
.dropdown-toggle-2:hover {
    opacity: 0.7;
}

/* ========================================
   DISABLED & UNCLICKABLE STATES
   ======================================== */

.nextButton.disabled,
.nextButton:disabled,
.nextStep.disabled,
.bookingbuttonNext.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.nextButton.disabled:hover,
.nextButton:disabled:hover {
    transform: none !important;
}

.unclickable {
    cursor: default !important;
    pointer-events: auto !important; 
}

.unclickable:hover {
    transform: none !important;
}

/* ========================================
   CLOSE BUTTON
   ======================================== */

.dialog-close-button {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.dialog-close-button:hover {
    transform: rotate(90deg);
    opacity: 0.7;
}

/* ========================================
   DROPDOWN ANIMATION (Smooth slide down)
   ======================================== */

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.boxdrop1:not(.d-none),
.boxdrop2:not(.d-none) {
    animation: slideDownFade 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Titre change quand la box est sélectionnée (dropdown ouvert) */
.booking-box.option-box-3.selected .borderbzero span:first-child,
.booking-box2.option-box-3.selected .borderbzero span:first-child {
    color: #7C4423 !important;
    font-weight: 700 !important;
}

/* === OPTION WRAPPER: Base styles === */
.cbm-option-wrapper {
    background: transparent !important;
}

/* === SELECTED STATE: Grey background via wrapper === */

/* When either wrapper is selected, grey bg + single border on wrapper */
.cbm-option-wrapper.selected {
    background-color: #E3E0DE !important;
    border: 1px solid #100A03;
}

/* Remove ALL borders from children when wrapper is selected */
.cbm-option-wrapper.selected .booking-box .borderbzero,
.cbm-option-wrapper.selected .booking-box2 .borderbzero {
    border: 0 !important;
}

.cbm-option-wrapper.selected .bg-white-colorblackarrow,
.cbm-option-wrapper.selected .bg-white-colorblackarrow2 {
    background-color: transparent !important;
    border: 0 !important;
}

.cbm-option-wrapper.selected .borderbuttoncontrol {
    border-bottom: 0 !important;
}

.cbm-option-wrapper.selected .option-box-2 {
    border: 0 !important;
}

/* Override transparent on borderbzero inside selected wrapper */
.cbm-option-wrapper.selected .borderbzero {
    background-color: transparent !important;
}

/* Content zones inside selected wrapper - transparent bg */
.cbm-option-wrapper.selected .boxdrop1,
.cbm-option-wrapper.selected .boxdrop2 {
    background-color: transparent !important;
}

/* === GAP ELIMINATION: No gaps between children when selected === */
.cbm-option-wrapper.selected .booking-box,
.cbm-option-wrapper.selected .booking-box2 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.cbm-option-wrapper.selected .bg-white-colorblackarrow,
.cbm-option-wrapper.selected .bg-white-colorblackarrow2 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.cbm-option-wrapper.selected .boxdrop1,
.cbm-option-wrapper.selected .boxdrop2 {
    margin-top: 0 !important;
}

/* Rush warning when hidden should not create gaps */
.cbm-option-wrapper .cbm-rush-warning.d-none {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Message d'erreur */
.booking-selection-error {
    color: #dc3545;
    font-size: 14px!important;
    font-weight: 700!important;
    margin: 0px 0px 00px 0px!important;
    display: none;
    font-size: 12px!important;
    line-height: 1.3!important;
    text-align: center;
    padding: 0px 50px 0px 50px!important;
}

/* Centrer le texte dans le dropdown select */
.select-form-field-custom {
    border: 1px solid #000 !important;
    height: 30px !important;
    width: 60px;
    line-height: 1.3;
    padding: 2px !important;
    font-size: 12px;
    float: right;
    text-align: center !important; /* ← AJOUTE ÇA */
    text-align-last: center !important; /* ← ET ÇA pour le texte sélectionné */
}

/* Centrer les options dans le dropdown aussi */
.select-form-field-custom option {
    text-align: center !important;
    padding: 5px 15px;
}
/* Fix input fields on mobile */
.customContainer input,
.customContainer select,
.customContainer textarea {
    position: relative;
    z-index: 999;
    pointer-events: auto;
}

/* Make sure popup content is interactive */
.elementor-popup-modal .elementor-popup-modal-body {
    pointer-events: auto;
}

/* Prevent overlay from blocking inputs */
.elementor-popup-modal input,
.elementor-popup-modal select {
    -webkit-user-select: text;
    user-select: text;
    touch-action: auto;
}

/* ========================================
   RESPONSIVE MOBILE FIX
   ======================================== */

/* Compacter le popup pour mobile - BOUTONS PLUS GROS ET ESPACES */
@media (max-width: 767px) {
    /* Reduce padding on mobile to use more space */
    .custom-container-style.p-4 {
        padding: 40px 4rem 35px 4rem !important;
    }

    .custom-container-style.p-4:has(>img) {
        padding: 30px 4rem 35px 4rem !important;
    }

    /* Titres plus petits */
    .main-title {
        font-size: 28px !important;
        line-height: 32px !important;
        margin-bottom: 12px !important;
    }

    /* Tighter event boxes on mobile */
    .flex-middle {
        margin-bottom: 0px !important;
    }

    /* Space between pills and event boxes - same as .boxes margin-bottom */
    .intent-section + .row.g-3.boxes {
        margin-top: 0 !important;
    }
    /*
    .sub-title, .sub-title-2 {
        font-size: 14px !important;
        line-height: 1.3;
        margin-bottom: 8px !important;
    }
    
    .tagline {
        font-size: 14px !important;
        margin-top: 6px !important;
        line-height: 1.3;
    }*/
    
    
    /* Boutons options - PLUS GROS et ESPACÉS */
    .option-box div {
        font-size: 13px !important;
        padding: 10px 16px !important;
        gap: 5px !important;
        min-height: 40px !important;
    }
    
    .event-box div,
    .role-box div {
        font-size: 13px !important;
        padding: 8px 16px !important;
        min-height: 36px !important;
    }
    
    /* PLUS D'ESPACE ENTRE LES BOUTONS
    .mtc {
        margin-top: 10px !important;
    }*/
    
    /* Booking boxes - gardées lisibles */
    .option-box-3 div {
        font-size: 13px !important;
        padding: 14px 20px !important;
        gap: 6px !important;
    }
    
    /* Match spacing: pills→events = events→promo */
    .boxes {
        margin-bottom: 0 !important;
    }
    .intent-section {
        margin-bottom: 0 !important;
    }
    
    
    
    /* Calendar - full width on mobile instead of scale */
    .ui-datepicker {
        transform: none;
        width: 280px !important;
        max-width: 100%;
        margin: 0 auto;
    }

    .ui-datepicker td a,
    .ui-datepicker td span {
        font-size: 13px !important;
        padding: 6px 2px !important;
    }

    .ui-datepicker th {
        font-size: 11px !important;
        padding: 5px 0 !important;
    }

    .ui-datepicker-title {
        font-size: 15px !important;
    }

    .ui-datepicker-month {
        font-size: 11px !important;
    }

    /* Fixed height on mobile - no more jumping between steps */
    .mainCardContainer {
        min-height: 45rem;
    }
}

/* Animation spinner pour loading Amelia */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Amelia booking container — match .custom-container-style layout */
#ameliaBooking {
    border: none;
    padding: 50px 3rem 35px 3rem !important;
    box-shadow: none !important;
    background-color: #F3EEEC !important;
    animation: fadeIn 0.8s ease;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

#ameliaBookingFrame {
    width: 100% !important;
    border: none !important;
    background-color: #F3EEEC !important;
}

.amelia-loading-message {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    flex-grow: 1;
}

.loading-card {
    background-color: #E3E0DE;
    border: 1px solid #100A03;
    padding: 32px 28px;
    text-align: center;
    max-width: 320px;
    width: 100%;
}

.loading-spinner {
    margin: 0 auto 18px auto;
    width: 36px;
    height: 36px;
    border: 3px solid rgba(16, 10, 3, 0.15);
    border-top: 3px solid #100A03;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-title {
    font-family: 'Playfair', serif;
    font-weight: 500;
    font-size: 24px;
    color: #100A03;
    margin: 0 0 8px 0;
}

.loading-text {
    font-family: 'Roobert PRO';
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: #100A03;
    margin: 0;
}

/* ==================================================
   PROMO BOX - PREMIÈRE PAGE SEULEMENT
================================================== */

.promo-box {
    background-color: #E3E0DE;
    border: 1px solid #100A03;
    padding: 16px 20px;
    margin-top: 24px;
    margin-bottom: 0px;
    text-align: center;
}

/* Surtitre en haut */
.promo-surtitre {
    font-family: 'Roobert PRO';
    font-weight: 500;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #100A03;
    margin-bottom: 8px;
}

/* Titre principal */
.promo-titre {
    font-family: 'Playfair', serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
    color: #100A03;
    margin-bottom: 12px;
    text-transform: initial;
}

/* Contenu de la promo */
.promo-content {
    text-align: left;
    margin: 0 auto 12px auto;
    max-width: 280px;
}

.promo-content p {
    font-family: 'Roobert PRO';
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: #100A03;
    margin-bottom: 6px;
}

/* Conditions en bas */
.promo-conditions {
    font-family: 'Roobert PRO';
    font-weight: 400;
    font-size: 10px;
    line-height: 1.3;
    color: #323232;
    text-align: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(16, 10, 3, 0.2);
}

/* Lien dans les conditions */
.promo-conditions a {
    color: #100A03;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.promo-conditions a:hover {
    color: #7C4423;
}

p.text-style.cbm-rush-text.cbm-rush-warning.cbm-rush-warning-group {
    padding-top: 0;
}

/* Mobile - plus compact */
@media (max-width: 767px) {
    .promo-box {
        padding: 12px 16px;
        margin-top: 20px;
    }
    
    .promo-titre {
        font-size: 20px;
        line-height: 24px;
    }
    
    .promo-content p {
        font-size: 12px;
    }
    
    .promo-conditions {
        font-size: 9px;
    }
}

/* ===== INTENT PILLS (Rent / Buy / I'm not sure) ===== */
#eventSelect .main-title.mb-4 {
    margin-bottom: 1rem !important;
}

.intent-section {
    margin-bottom: 0;
    padding-bottom: 18px;
    text-align: center;
}

/* Uniform vertical rhythm: 16px everywhere */
#eventSelect .row.g-3.boxes {
    --bs-gutter-y: 12px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#eventSelect .promo-box {
    margin-top: 33px !important;
}

.intent-label {
    font-family: 'Roobert PRO';
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #aaaaaa;
    margin-bottom: 10px;
}

.intent-pills-wrapper {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.intent-pill {
    padding: 6px 16px !important;
    font-family: 'Roobert PRO' !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border: 1px solid #100A03 !important;
    border-radius: 50px !important;
    background: transparent !important;
    color: #100A03 !important;
    cursor: pointer !important;
    transition: all 0.2s ease;
}

.intent-pill.active {
    background: #100A03 !important;
    color: #FAF8F5 !important;
}

.intent-pill:hover:not(.active) {
    background: rgba(16, 10, 3, 0.08);
}

@media (max-width: 480px) {
    .intent-pills-wrapper {
        gap: 6px;
    }
    .intent-pill {
        padding: 6px 14px;
        font-size: 10px;
    }
}