/*
 Theme Name:     Custom Theme
 Theme URI:      https://www.web321.co
 Description:    A custom theme designed for our clients.
 Author:         Web321
 Author URI:     https://www.web321.co/
 Template:       Divi
 Version:        1.0.0
*/

@font-face {
    font-family: 'tanpearl';
    src: url('fonts/TAN-PEARL-Regular.woff2') format('woff2'),
         url('fonts/TAN-PEARL-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.tanpearl {
    font-family: 'tanpearl' !important;
}

/* Remove sidebar */
#sidebar {
	display:none;
}

/* Remove thin line */
#main-content .container:before {
	background: none;
}

/* Make content 100% width */
@media (min-width: 981px){
#left-area {
	width: 100%;
	padding-right: 0px !important;
}}

.welome * {
    font-family: 'Playfair Display',Georgia,"Times New Roman",serif;
}

.downplay_start h2,
.downplay_start h3 {
    font-weight: 400;
}

.downplay_start h2 span,
.downplay_start h3 span {
    font-weight: 600;
}

.su-boxes .box-inner {
    padding: 1rem;
    margin: 1rem 1rem 1rem 0;
    float: left;
    width: calc(25% - 1rem);
    color: #424E3E;
    border: 2px solid grey;
}

.su-boxes .box-inner a {
    color: #424E3E;
}

.rounded div.box-inner {
    border-width: 2px;
    border-radius: 1rem;
}

.teale_border div.box-inner {
    border-color: #424E3E;
}

.taupe_border div.box-inner {
    border-color: #BA9B8B;    
}

.event_time { 
    padding-left: 36px;
    clear: both;
    display: block;    
    background: url('/wp-content/themes/CustomTheme/images/clock.svg') no-repeat;
    background-size: auto 100%;
    background-position: left;
}

.event_date { 
    padding-left: 36px;
    clear: both;
    display: block;
}

#search-term {
    background-image: url('images/search.svg');
    background-repeat: no-repeat;
    background-size: auto 50%;
    background-position: 12px center;
    padding-left: 48px; /* Adjust padding to ensure the text does not overlap the icon */
    box-sizing: border-box; /* Ensures padding is included in the height */
}

#search-location {
    background-image: url('images/location.svg');
    background-repeat: no-repeat;
    background-size: auto 50%;
    background-position: 12px center;
    padding-left: 48px; /* Adjust padding to ensure the text does not overlap the icon */
    box-sizing: border-box; /* Ensures padding is included in the height */
}

#search-submit {
    background-image: url('images/engage.svg');
    background-repeat: no-repeat;
    background-size: auto 50%;
    background-position: 12px center;
    background-color: transparent;
    width: 50px; 
    height: 50px;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
}

.begin,
.anon {
  text-transform: uppercase;  
  font-weight: bold;
  font-size: 1rem;
  letter-spacing: 0.1rem;
}

.anon #menu-anon-menu {
    display: flex;
    align-items: center;
}

#mobile_menu3 .login_btn:first-child {
    margin-bottom: 1rem;
}

#mobile_menu3 .login_btn a,
#mobile_menu1 .login_btn a,
.anon .login_btn,
#menu-customer-menu .login_btn,
#menu-practitioner-menu .logout_btn,
#menu-just-login .login_btn,
#menu-just-logout .login_btn,
/*#menu-begin-menu li.begin_btn,*/
a.begin_btn,
.register_btn,
.woocommerce-button.button,
button.woocommerce-Button,
input.wcv-button {
  color: #424E3E !important;  
  background-color: #F6EDE0 !important;
  padding: 0.25rem 2rem 0.25rem 2rem;
  border-radius: 1.25rem !important;  
  border: 0 !important;
  transition: 0.2s all;
}

#menu-begin-menu li.begin_btn {
	font-weight: 600;
 	font-size: 1rem;
}

.anon .login_btn li:nth-child(1) {
    color: #FFE9CD;
}

.anon .login_btn li:nth-child(2) {
    color: #424E3E;
}

#menu-customer-menu,
#menu-practitioner-menu{
    align-items: center;
}

#menu-anon-menu {
    gap: 1rem;
}

#menu-customer-menu li:first-child,
#menu-practitioner-menu li:first-child {
    padding: 0.25rem 2rem 0.25rem 2rem;
}

#menu-customer-menu li:first-child a,
#menu-practitioner-menu li:first-child a {
    padding: 0.5rem 1rem 0.5rem 1rem;
}

.begin .begin_btn a,
#menu-customer-menu .login_btn a,
#menu-practitioner-menu .logout_btn a,
#menu-just-login .login_btn a,
#menu-just-logout .login_btn a,
.anon .login_btn a,
a.woocommerce-button.button,
button.woocommerce-Button,
input.wcv-button {
	padding: 0.5rem 1rem 0.5rem 1rem;	
	border: 0;
}

.begin .begin_btn:hover,
.anon .login_btn:hover,
.woocommerce-button.button:hover,
button.woocommerce-Button:hover  {
  margin-top: 2px;
}

/* Needs to be different than the above rules, 
otherwise it animates the wrong way */
#menu-customer-menu .login_btn:hover,
#menu-practitioner-menu .logout_btn:hover,
#menu-just-login .login_btn:hover
#menu-just-logout .login_btn:hover{
    margin-top: 10px; 
}

.control > input.wcv-button {
    width: fit-content !important;
    margin-top: 2rem;
}

.begin li.begin_btn a,
.anon li.login_btn a,
#menu-customer-menu li.login_btn a,
#menu-practitioner-menu .logout_btn a,
#menu-just-login .login_btn a,
#menu-just-logout .login_btn a{
  color: #424E3E !important;  
}

.begin a,
.anon #menu-item-4867 a {
  color: #FFE9CD !important;
}

.begin li:last-child,
.anon li:last-child {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

#menu-begin-menu,
#menu-anon-menu {
  padding: 0;
}

.far-right .et_pb_code_inner {
	position: absolute;
	right: 0;
}

.near-center .et_pb_code_inner {
	position: absolute;
	left: 40%;	
}

.sagebuttons .btn  {
    background-color: #424E3E;
    color: #FFE9CD;
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
	letter-spacing: 1px;
}


.sunsetbuttons .btn  {
    background-color: #BA9B8B;
    color: #FFE9CD;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: left;
}

.sunsetbuttons .btn .card-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #424E3E;
    text-align: left;
}

.sunsetbuttons .btn .card-content p {
    font-size: 1rem;
    color: #424E3E;
    text-align: left;    
}

.sunsetbuttons .btn .vendor-image {
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 256px;
    padding: 0 12px;
}

/* Style for the buttons */

.hira-buttons .btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-sizing: border-box;
    border-radius: 10px;
    text-decoration: none;
    margin: 4px;
}

.hira-buttons.explore {
	display: flex; /* Set the container to flexbox */
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Prevent vertical scrolling */
    max-width: 100%; /* Make sure the container doesn't exceed the width of its parent */
    scroll-snap-type: x mandatory; /* Smooth snapping behavior for the buttons */
}

.hira-buttons.explore a {
	flex: 0 0 25%; /* Each button takes 25% of the width to fit exactly 4 in the view */
    scroll-snap-align: start; /* Align the buttons for snapping */
    text-align: center; /* Optional: Center align text inside buttons */
    box-sizing: border-box; /* Ensure padding and borders are included in the width */
}

.hira-buttons.explore .btn {
    height: 160px;
 /*   width: 17.25vw; */
}

/* Hover state for buttons */
.hira-buttons.explore .btn:hover {
    background-color: #A8C0B0;
}

.vendor_board {
	min-height: 60vh;
}


.wcvendors-pro-dashboard-wrapper a.wcv-button,
.wcv-dashboard-navigation a.button,
.vendor_board button.wcv-button {
    /*
    flex: 0 0 auto;
    display: flex;
    */
    display: inline-block;
    min-width: 120px;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    box-sizing: border-box;
    text-decoration: none;
    margin: 4px;
    color: #FFE9CD !important;
    border-color: #424E3E;
    border-radius: 1rem !important;
    font-size: 0.75rem;
    text-transform: uppercase !important;
	text-align: center;
    background-color: #424E3E;    
}

.vendor_board .wcv-form .control-group .control.append-button > span {
    display: table-cell;
    width: 95% !important;
}

.vendor_board button.wcv-button {
    padding: 0.5rem;
	margin-left: 1rem !important;
	margin-right: 1rem !important;	
}

.wcvendors-pro-dashboard-wrapper .all-50 {
    width: 100%;
}


/* Hover state for buttons */
.wcvendors-pro-dashboard-wrapper a.wcv-button:hover,
.wcv-dashboard-navigation a.button:hover {
    background-color: #BA9B8B;
	transition: 0.2s all;
}




.hira-buttons.practitioners .btn:hover {
    background-color: #CAAB9B;
}

.hira-buttons.practitioners .diamond {
    background: url('images/diamond.svg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;    
}

.profile-image {
    position: relative;
}

.save-profile,
.remove-profile {
  position: absolute;
  right: 0;
  top: 0;
}


/* user profile */

.lockdashboard {
    position: absolute !important;
    max-width: 9vw;
    left: 0;
    top: 20vh;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    margin-right: 1vw;
}

.lockdashboard .et_pb_text {
    text-align: center;    
    margin-top: 8px;
    padding-top: 48px;
    padding-bottom: 4px;
    background-repeat: no-repeat;
    background-position: center 3px;
    background-size: auto 42px;
    transition: 0.2s all;
}

.lockdashboard .et_pb_text:hover {
    filter: brightness(1.1);
}

.lockdashboard .accountbtn  {
    background-image: url('images/user.svg');
}

.lockdashboard .dashboardbtn {
    background-image: url('images/dashboard.svg');    
}

.lockdashboard .calendarbtn  {
    background-image: url('images/calendar.svg');    
}

.lockdashboard .orderbtn {
    background-image: url('images/list.svg');    
}

.lockdashboard .locationbtn {
    background-image: url('images/location.svg');    
}

.lockdashboard .locationbtn {
    background-image: url('images/location.svg');    
}

.lockdashboard .communitybtn {
    background-image: url('images/chat.svg');    
}

.lockdashboard .referralbtn {
    background-image: url('images/referral.svg');    
}

/* Practitioner Dashboard */

.vendor_board nav.wcv-navigation ul {
	border-radius: 1rem !important;
	padding: 0.25rem;
	background-color: rgba(255,255,255,0) !important;	
	width: fit-content;
}


.vendor_board nav.wcv-navigation ul.black li {
	border-radius: 0.9rem !important;
	padding: 0.25rem;	
	margin: 0.3rem;
	color: #FFE9CD !important;
	border: 1px solid #424E3E;
	text-transform: uppercase !important;
	font-weight: 600;
	background-color: #424E3E;
	text-align: center;
	transition: 0.2s all;
}

.vendor_board nav.wcv-navigation ul.black li:hover,
.vendor_board nav.wcv-navigation ul.black li.active {
	border: 1px solid #424E3E;
	background-color: #FFE9CD;
	color: #424E3E;	
}

.vendor_board nav.wcv-navigation ul.black li:hover a,
.vendor_board nav.wcv-navigation ul.black li.active a {
	background-color: #FFE9CD;
	color: #424E3E !important;
}

.wcv-grid a[href*="google-calendar-integration"] {
	border-radius: 0.9rem !important;
	padding: 0.33rem;	
	margin: 0.3rem;
    color: #fbbc05;
	border: 1px solid #2265c4;
	text-transform: uppercase !important;
	text-decoration: none;
	font-weight: 600;
    background-color: #4285f4;
	text-align: center;
	transition: 0.2s all;    
}
.wcv-grid a[href*="google-calendar-integration"]:hover,
.wcv-grid .active a[href*="google-calendar-integration"] {
    background-color: #fbbc05;
    color: #4285f4;
}

.tabs-tab.day {
  display: none !important;
}

/*.wcv-tabs #payment .all-100 {*/
/*    display: none;*/
/*}*/


@media only screen and (max-width: 1024px) {
    .hira-buttons .btn {
        width: 240px;
    }
}


.hira-subtitle {
    font-size: 0.625rem;
}

/* Booking Calendar
*  Documentation: https://woocommerce.com/document/introduction-to-woocommerce-bookings/woocommerce-bookings-calendar-css-style-elements/
*/
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker-header {
	background-color: #352A24;
	background-image: none;
}

#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-next, 
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev {
	background-color: #352A24;
}

.ui-state-disabled, 
.ui-widget-content .ui-state-disabled, 
.ui-widget-header .ui-state-disabled {
	opacity: 0.35;
}

#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.bookable a {
	background-color: #424E3E !important;
}

#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-datepicker-current-day a {
	background-color: #909B99 !important; 
}

/* Time blocks */
#wc-bookings-booking-form .block-picker li a {
	background-color: #FFFFFF !important;
}

/* Time blocks hover */
#wc-bookings-booking-form .block-picker li a:hover {
	background-color: #000000 !important;
}

/* Selected time block */
#wc-bookings-booking-form .block-picker li a.selected {
    background: #000000 !important;
    color: #ffff00 !important;
}

.wc-block-checkout__terms > span > a {
	font-weight: bold;
	text-decoration: underline;
}


.et-db #et-boc .et-l .et_pb_menu_2_tb_header.et_pb_menu ul li.dark a,
.login_btn.dark a,
.logout_btn.dark a {
	color: #424E3E !important;
}

/* Disable hamburger menus in footer */
/*show desktop menu on phone*/

@media (max-width: 980px) {
	.pa-open-mobile-menu .et_pb_menu__menu {
		display: flex!important;
	}
	.pa-open-mobile-menu .et_mobile_nav_menu {
		display: none!important;
	}
	.pa-open-mobile-menu .et_pb_menu__wrap {
		justify-content: flex-start;
	}
}

/*** Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1405px) {

}
/*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {

}
/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {

}
/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {

}
/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {

}
/*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {

}