/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* Add your custom styles here */

/* CSS Reset (modern, lightweight) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html:focus-within {
  scroll-behavior: smooth;
}

html,
body,
*,
*::before,
*::after {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul,
ol {
  list-style-type: none;
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a,
button,
input,
textarea,
select,
summary,
[role="button"],
img {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
input:focus,
input:focus-visible,
summary:focus,
summary:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible {
  outline: none;
}

a:active,
button:active,
[role="button"]:active {
  background-color: transparent;
}

img {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Select2 (WooCommerce selects) */
:root {
  --vb-select-hover-bg: #7f6252;
  --vb-select-hover-text: #fff;
  --vb-select-border: rgba(127, 98, 82, 0.42);
}

select.select2-hidden-accessible {
  width: 1px !important;
  max-width: 1px !important;
}

.select2-container {
  max-width: 100%;
}

.select2-container--default.select2-container--open {
  max-width: 100vw !important;
}

.select2-container--default.select2-container--open .select2-dropdown {
  max-width: 100vw !important;
}

.select2-container--default .select2-results__option {
  padding: 10px 12px !important;
  font-size: 15px !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--vb-select-hover-bg) !important;
  color: var(--vb-select-hover-text) !important;
}

/* Extra specificity to beat plugin/theme overrides that set the default blue hover color. */
body .select2-container--default .select2-results__options .select2-results__option--highlighted {
  background-color: var(--vb-select-hover-bg) !important;
  color: var(--vb-select-hover-text) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--vb-select-hover-bg) !important;
  color: var(--vb-select-hover-text) !important;
}

/* When dropdown is open and user is hovering a *different* option, dim the currently selected option. */
@media (hover: hover) and (pointer: fine) {
  .select2-container--default.select2-container--open
    .select2-dropdown:has(.select2-results__option--highlighted:not([aria-selected="true"]))
    .select2-results__option[aria-selected="true"] {
    background-color: #ddd !important;
    color: var(--vb-text, #4b3f3b) !important;
  }
}

/* When open: remove bottom border from the "input" and fuse with dropdown. */
.select2-container--default.select2-container--open :where(.select2-selection--single, .select2-selection--multiple) {
  border-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-color: var(--vb-select-border) !important;
}

.select2-container--default.select2-container--open .select2-dropdown {
  border-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-color: var(--vb-select-border) !important;
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  overflow: hidden !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--vb-select-border) !important;
  outline: none !important;
}

/* WooCommerce Blocks selects (native <select>, e.g. checkout blocks). */
:where(.wc-blocks-components-select__select) {
  border-color: rgba(75, 63, 59, 0.14) !important;
}

:where(.wc-blocks-components-select__container):focus-within :where(.wc-blocks-components-select__select) {
  border-color: var(--vb-select-border) !important;
  box-shadow: none !important;
  outline: none !important;
}

:where(.wc-blocks-components-select__container:hover) :where(.wc-blocks-components-select__select) {
  border-color: var(--vb-select-border) !important;
}

/* Best-effort styling for the native option list (varies by browser/OS). */
:where(.wc-blocks-components-select__select) :where(option:checked, option:hover, option:focus) {
  background: var(--vb-select-hover-bg) !important;
  color: var(--vb-select-hover-text) !important;
}