/*! * Booking Form Buttons * * Front-end button styles for booking forms. Keep this file focused on form * buttons only; admin buttons stay in the admin CSS sources. */ :root { --wpbc_form-button-light-size-height: 43px; } /*! -------------------------------------------------------------------------------------------------------------------- * Submit buttons * ------------------------------------------------------------------------------------------------------------------ */ div.wpbc_container.wpbc_form input[type=submit]:not(.wpbc_button_light), div.wpbc_container.wpbc_form button[type=submit]:not(.wpbc_button_light), .wp-core-ui div.wpbc_container.wpbc_form input[type=submit]:not(.wpbc_button_light), .wp-core-ui div.wpbc_container.wpbc_form button[type=submit]:not(.wpbc_button_light) { height: var(--wpbc_form-button-size-height); background-color: var(--wpbc_form-button-background-color-alt, var(--wpbc_form-button-background-color)); border-radius: var(--wpbc_form-button-border-radius); border-style: var(--wpbc_form-button-border-style); border-color: var(--wpbc_form-button-border-color); border-width: var(--wpbc_form-button-border-size); box-shadow: none; color: var(--wpbc_form-button-text-color); padding: 0 var(--wpbc_form-button-size-padding-h); font-family: inherit; font-weight: 500; font-size: var(--wpbc_form-button-size-font-size); line-height: 100%; cursor: pointer; transition: all 0.15s ease-in-out; position: relative; text-decoration: none; } div.wpbc_container.wpbc_form input[type=submit]:not(.wpbc_button_light):not(:hover):not(:active), div.wpbc_container.wpbc_form button[type=submit]:not(.wpbc_button_light):not(:hover):not(:active), .wp-core-ui div.wpbc_container.wpbc_form input[type=submit]:not(.wpbc_button_light):not(:hover):not(:active), .wp-core-ui div.wpbc_container.wpbc_form button[type=submit]:not(.wpbc_button_light):not(:hover):not(:active) { background-color: var(--wpbc_form-button-background-color-alt, var(--wpbc_form-button-background-color)); color: var(--wpbc_form-button-text-color); } div.wpbc_container.wpbc_form input[type=submit]:not(.wpbc_button_light):hover, div.wpbc_container.wpbc_form input[type=submit]:not(.wpbc_button_light):active, div.wpbc_container.wpbc_form input[type=submit]:not(.wpbc_button_light):focus, div.wpbc_container.wpbc_form button[type=submit]:not(.wpbc_button_light):hover, div.wpbc_container.wpbc_form button[type=submit]:not(.wpbc_button_light):active, div.wpbc_container.wpbc_form button[type=submit]:not(.wpbc_button_light):focus, .wp-core-ui div.wpbc_container.wpbc_form input[type=submit]:not(.wpbc_button_light):hover, .wp-core-ui div.wpbc_container.wpbc_form input[type=submit]:not(.wpbc_button_light):active, .wp-core-ui div.wpbc_container.wpbc_form input[type=submit]:not(.wpbc_button_light):focus, .wp-core-ui div.wpbc_container.wpbc_form button[type=submit]:not(.wpbc_button_light):hover, .wp-core-ui div.wpbc_container.wpbc_form button[type=submit]:not(.wpbc_button_light):active, .wp-core-ui div.wpbc_container.wpbc_form button[type=submit]:not(.wpbc_button_light):focus { background: var(--wpbc_form-button-hover-background-color, linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), var(--wpbc_form-button-background-color-alt, var(--wpbc_form-button-background-color))); border-color: var(--wpbc_form-button-hover-border-color, var(--wpbc_form-button-border-color)); color: var(--wpbc_form-button-hover-text-color, var(--wpbc_form-button-text-color)); } div.wpbc_container.wpbc_form input[type=submit]:not(.wpbc_button_light):focus, div.wpbc_container.wpbc_form button[type=submit]:not(.wpbc_button_light):focus, .wp-core-ui div.wpbc_container.wpbc_form input[type=submit]:not(.wpbc_button_light):focus, .wp-core-ui div.wpbc_container.wpbc_form button[type=submit]:not(.wpbc_button_light):focus { outline: none; } div.wpbc_container.wpbc_form input[type=submit]:not(.wpbc_button_light):focus:after, div.wpbc_container.wpbc_form button[type=submit]:not(.wpbc_button_light):focus:after, .wp-core-ui div.wpbc_container.wpbc_form input[type=submit]:not(.wpbc_button_light):focus:after, .wp-core-ui div.wpbc_container.wpbc_form button[type=submit]:not(.wpbc_button_light):focus:after { content: ""; position: absolute; border: 2px solid var(--wpbc_form-button-background-color); border-radius: calc(var(--wpbc_form-button-border-radius) + 2px); top: calc(-4px - var(--wpbc_form-button-border-size, 1px)); right: calc(-4px - var(--wpbc_form-button-border-size, 1px)); bottom: calc(-4px - var(--wpbc_form-button-border-size, 1px)); left: calc(-4px - var(--wpbc_form-button-border-size, 1px)); } div.wpbc_container.wpbc_form input[type=submit]:not(.wpbc_button_light):disabled, div.wpbc_container.wpbc_form input[type=submit]:not(.wpbc_button_light):disabled:hover, div.wpbc_container.wpbc_form button[type=submit]:not(.wpbc_button_light):disabled, div.wpbc_container.wpbc_form button[type=submit]:not(.wpbc_button_light):disabled:hover, .wp-core-ui div.wpbc_container.wpbc_form input[type=submit]:not(.wpbc_button_light):disabled, .wp-core-ui div.wpbc_container.wpbc_form input[type=submit]:not(.wpbc_button_light):disabled:hover, .wp-core-ui div.wpbc_container.wpbc_form button[type=submit]:not(.wpbc_button_light):disabled, .wp-core-ui div.wpbc_container.wpbc_form button[type=submit]:not(.wpbc_button_light):disabled:hover { background-color: var(--wpbc_form-button-background-color-alt, var(--wpbc_form-button-background-color)); cursor: default; } /*! -------------------------------------------------------------------------------------------------------------------- * Lightweight buttons * ------------------------------------------------------------------------------------------------------------------ */ .wpbc_container.wpbc_form input.wpbc_button_light, .wpbc_container.wpbc_form .wpbc_button_light, .wpbc_container.wpbc_container_booking_form .wpbc_button_light { font-size: clamp(1em, 1em + ((1vw - 0.2em) * 0.208), 1.125em); border: 2px solid var(--wpbc_form-button-light-border-color, #eeeeeeb5); box-shadow: var(--wpbc_form-button-light-box-shadow, 0 2px 10px 2px #ffffff54); background: var(--wpbc_form-button-light-background-color, #fdfdfd); color: var(--wpbc_form-button-light-text-color, #444444e0); border-radius: 0.375em; padding: 0 2.2em; line-height: calc(var(--wpbc_form-button-light-size-height) - 3px); text-decoration: none; cursor: pointer; outline: none; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; margin: 0; height: auto; box-sizing: border-box; text-shadow: none; text-overflow: ellipsis; overflow: hidden; overflow-wrap: normal; white-space: normal; hyphens: auto; } .wpbc_container.wpbc_form input.wpbc_button_light:focus, .wpbc_container.wpbc_form input.wpbc_button_light:hover, .wpbc_container.wpbc_form .wpbc_button_light:focus, .wpbc_container.wpbc_container_booking_form .wpbc_button_light:focus, .wpbc_container.wpbc_form .wpbc_button_light:hover, .wpbc_container.wpbc_container_booking_form .wpbc_button_light:hover { border: 2px solid var(--wpbc_form-button-light-hover-border-color, rgb(77, 145, 205)); box-shadow: var(--wpbc_form-button-light-hover-box-shadow, var(--wpbc_form-button-light-box-shadow, 0 2px 10px 2px #ffffff54)); background-color: var(--wpbc_form-button-light-hover-background-color, var(--wpbc_form-button-light-background-color, #fdfdfd)); color: var(--wpbc_form-button-light-hover-text-color, var(--wpbc_form-button-light-text-color, #444444e0)); } .wpbc_container.wpbc_container_booking_form .wpbc_button_light.button-primary { background: var(--wpbc_form-button-background-color, #066aab); color: var(--wpbc_form-button-text-color, #fff); } .wpbc_container.wpbc_container_booking_form .wpbc_button_light.button-primary:focus, .wpbc_container.wpbc_container_booking_form .wpbc_button_light.button-primary:hover, .wpbc_container.wpbc_container_booking_form .wpbc_button_light.button-primary:active { background: var(--wpbc_form-button-hover-background-color, var(--wpbc_form-button-background-color, #066aab)); color: var(--wpbc_form-button-hover-text-color, var(--wpbc_form-button-text-color, #fff)); border-color: var(--wpbc_form-button-hover-border-color, var(--wpbc_form-button-primary-hover-border-color, #fff)); box-shadow: 0 0 0px 2px var(--wpbc_form-button-background-color, #066aab); } .wpbc_container.wpbc_container_booking_form .wpbc_button_light:active:not(:disabled) { background-color: var(--wpbc_form-button-light-hover-background-color, var(--wpbc_form-button-light-background-color, #fdfdfd)); border: 2px solid var(--wpbc_form-button-light-hover-border-color, var(--wpbc_form-button-light-border-color, #eeeeeeb5)); color: var(--wpbc_form-button-light-hover-text-color, var(--wpbc_form-button-light-text-color, #444444e0)); cursor: pointer; } .wpbc_container.wpbc_container_booking_form .wpbc_button_light:disabled, .wpbc_container.wpbc_container_booking_form .wpbc_button_light:disabled:focus, .wpbc_container.wpbc_container_booking_form .wpbc_button_light:disabled:hover { color: #ccc; border: 2px solid #eeeeeeb5; cursor: not-allowed; } .wpbc_container.wpbc_container_booking_form .wpbc_button_light.wpbc_button_danger { background: #de605c; border-color: #de605c; color: #f7f7f7; text-shadow: 0 0px #ba5956; } .wpbc_container.wpbc_container_booking_form .wpbc_button_light.wpbc_button_danger:focus, .wpbc_container.wpbc_container_booking_form .wpbc_button_light.wpbc_button_danger:hover { background: #e65d59; color: #fff; border-color: #fff; box-shadow: 0 0 0px 2px #de605c; } /*! -------------------------------------------------------------------------------------------------------------------- * Payment gateway buttons * ------------------------------------------------------------------------------------------------------------------ */ .wpbc_container .wpbc_button_light.wpbc_button_gw { flex: 1 1 100%; display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: center; width: 100%; } .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:focus, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:hover { background-image: url("../../../inc/assets/stripe.svg"); background-position: 90% 50%; background-size: 80px auto; background-repeat: no-repeat; padding-right: 130px; } .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe.wpbc_button_gw_bccom, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe.wpbc_button_gw_bccom:focus, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe.wpbc_button_gw_bccom:hover { background-image: url("../../../../booking-calendar-com/inc/assets/stripe.svg"); background-color: #2c2e2f; color: #fff; border-color: #2c2e2f; } .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe.wpbc_button_gw_bccom:focus, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe.wpbc_button_gw_bccom:hover { filter: brightness(1.3); border: 2px solid var(--wpbc_form-button-light-hover-border-color,#4d91cd); box-shadow: var(--wpbc_form-button-light-hover-box-shadow,var(--wpbc_form-button-light-box-shadow,0 2px 10px 2px rgba(255,255,255,.3294117647))) } .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe *, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe { color: var(--wpbc_form-button-light-text-color, #fff); } .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:focus, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:hover, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:active, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:focus *, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:hover *, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:active * { color: var(--wpbc_form-button-light-hover-text-color, var(--wpbc_form-button-light-text-color, #fff)); } .wpbc_container.wpbc_bfb_form_appearance_custom .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe.wpbc_button_gw_bccom, .wpbc_container.wpbc_bfb_form_appearance_custom .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe.wpbc_button_gw_bccom:focus, .wpbc_container.wpbc_bfb_form_appearance_custom .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe.wpbc_button_gw_bccom:hover, .wpbc_container.wpbc_bfb_form_appearance_custom .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe.wpbc_button_gw_bccom:active { background-color: var(--wpbc_form-button-light-background-color); border-color: var(--wpbc_form-button-light-border-color); color: var(--wpbc_form-button-light-text-color); } .wpbc_container.wpbc_bfb_form_appearance_custom .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe.wpbc_button_gw_bccom:focus, .wpbc_container.wpbc_bfb_form_appearance_custom .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe.wpbc_button_gw_bccom:hover { background-color: var(--wpbc_form-button-light-hover-background-color); border-color: var(--wpbc_form-button-light-hover-border-color); color: var(--wpbc_form-button-light-hover-text-color); filter: none; } .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white { padding-right: 115px; background-color: #ffc439 !important; border: 2px solid #ffc439 !important; color: #2C2E2F; box-shadow: none; text-indent: -9999px; background-image: url("../../../inc/assets/paypal_commerce.svg") !important; background-position: 50% 50% !important; background-size: 80px auto !important; background-repeat: no-repeat !important; min-width: 175px; } .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow.wpbc_button_gw_bccom, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver.wpbc_button_gw_bccom, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white.wpbc_button_gw_bccom { background-image: url("../../../../booking-calendar-com/inc/assets/paypal_commerce.svg") !important; } .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow:focus, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow:hover, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver:focus, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver:hover, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white:focus, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white:hover { background-color: #f2ba36 !important; border-color: #f2ba36 !important; box-shadow: 0 5px 10px #f0f0f8; color: #5f5f5f; } .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_blue, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black { padding-right: 115px; background-color: #009cde !important; border: 2px solid #009cde !important; color: #fff; box-shadow: none; text-indent: -9999px; background-image: url("../../../inc/assets/paypal_white_full.svg") !important; background-position: 50% 50% !important; background-size: 80px auto !important; background-repeat: no-repeat !important; min-width: 175px; } .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_blue.wpbc_button_gw_bccom, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black.wpbc_button_gw_bccom { background-image: url("../../../../booking-calendar-com/inc/assets/paypal_white_full.svg") !important; } .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_blue:focus, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_blue:hover, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black:focus, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black:hover { background-color: #33b0e5 !important; border-color: #33b0e5 !important; box-shadow: 0 5px 10px #f0f0f8; color: #fff; } .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver { background-color: #eee !important; border: 2px solid #eee !important; } .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver:focus, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_silver:hover { background-color: #e2e2e2 !important; border-color: #e2e2e2 !important; } .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white { background-color: #fff !important; border: 1px solid #2C2E2F !important; } .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white:focus, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_white:hover { background-color: #fff !important; border-color: #2C2E2F !important; } .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black { background-color: #2C2E2F !important; border: 2px solid #2C2E2F !important; } .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black:focus, .wpbc_container .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_black:hover { background-color: #565859 !important; border-color: #565859 !important; } /*! -------------------------------------------------------------------------------------------------------------------- * Dark style button overrides * ------------------------------------------------------------------------------------------------------------------ */ .wpbc_theme_dark_1.wpbc_bfb__theme_scope .wpbc_button_light, .wpbc_theme_dark_1.wpbc_container.wpbc_form .wpbc_button_light { box-shadow: var(--wpbc_form-button-light-box-shadow, 0 0 0 #424242); border: 2px solid var(--wpbc_form-button-light-border-color, #2C2E2F); background-color: var(--wpbc_form-button-light-background-color, #2C2E2F); color: var(--wpbc_form-button-light-text-color, #fff); filter: none; } .wpbc_theme_dark_1.wpbc_bfb__theme_scope .wpbc_button_light:focus, .wpbc_theme_dark_1.wpbc_bfb__theme_scope .wpbc_button_light:hover, .wpbc_theme_dark_1.wpbc_container.wpbc_form .wpbc_button_light:focus, .wpbc_theme_dark_1.wpbc_container.wpbc_form .wpbc_button_light:hover { box-shadow: var(--wpbc_form-button-light-hover-box-shadow, 0 0 0 #424242); border: 2px solid var(--wpbc_form-button-light-hover-border-color, var(--wpbc_form-button-light-border-color, #2C2E2F)); background-color: var(--wpbc_form-button-light-hover-background-color, var(--wpbc_form-button-light-background-color, #2C2E2F)); color: var(--wpbc_form-button-light-hover-text-color, #fff); } .wpbc_theme_dark_1.wpbc_bfb__theme_scope .wpbc_button_light:hover, .wpbc_theme_dark_1.wpbc_container.wpbc_form .wpbc_button_light:hover { filter: brightness(1.2); } .wpbc_theme_dark_1.wpbc_bfb__theme_scope .wpbc_button_light[class*="wpbc_button_gw_paypal_"]:hover, .wpbc_theme_dark_1.wpbc_container.wpbc_form .wpbc_button_light[class*="wpbc_button_gw_paypal_"]:hover { filter: none; } .wpbc_theme_dark_1.wpbc_bfb__theme_scope .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow:focus, .wpbc_theme_dark_1.wpbc_bfb__theme_scope .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow:hover, .wpbc_theme_dark_1.wpbc_container.wpbc_form .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow:focus, .wpbc_theme_dark_1.wpbc_container.wpbc_form .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_paypal_yellow:hover { box-shadow: 0 5px 10px #424242; } .wpbc_theme_dark_1.wpbc_bfb__theme_scope .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:focus, .wpbc_theme_dark_1.wpbc_bfb__theme_scope .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:hover, .wpbc_theme_dark_1.wpbc_container.wpbc_form .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:focus, .wpbc_theme_dark_1.wpbc_container.wpbc_form .wpbc_button_light.wpbc_button_gw.wpbc_button_gw_stripe:hover { background-color: var(--wpbc_form-button-light-background-color, #2C2E2F); border-color: var(--wpbc_form-button-light-border-color, #2C2E2F); }