/*
Theme Name: Storefront Child
Theme URI: https://woocommerce.com/storefront/
Description: Checkout-focused child theme for Storefront.
Author: MasteringBOX
Template: storefront
Version: 1.0.0
Text Domain: storefront-child
Domain Path: /languages
*/

:root {
  --storefront-child-accent: #0f834d;
  --storefront-child-accent-hover: #6aba94;
  --storefront-child-content-max-width: 1280px;
  --storefront-child-input-border: #d0d9d4;
  --storefront-child-input-bg: #fafafa;
}

/* -------------------------------------------------------------------------
   Text inputs (override Storefront #f2f2f2)
   ------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
.input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce .input-text,
.woocommerce-input-wrapper input:not([type="checkbox"]):not([type="radio"]),
.woocommerce-input-wrapper textarea {
  box-sizing: border-box;
  padding: 0.55em 0.85em;
  font-size: 1rem;
  line-height: 1.4;
  color: #333;
  background-color: var(--storefront-child-input-bg) !important;
  border: 1px solid var(--storefront-child-input-border) !important;
  border-radius: 4px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="password"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
textarea:hover,
.input-text:hover,
.woocommerce-input-wrapper input:not([type="checkbox"]):not([type="radio"]):hover,
.woocommerce-input-wrapper textarea:hover {
  border-color: #a8b5ae !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
.input-text:focus,
.woocommerce-input-wrapper input:not([type="checkbox"]):not([type="radio"]):focus,
.woocommerce-input-wrapper textarea:focus {
  outline: none;
  border-color: var(--storefront-child-accent) !important;
  box-shadow: 0 0 0 1px var(--storefront-child-accent);
}

/* -------------------------------------------------------------------------
   Content width: wider desktop, minimal side padding on mobile (all pages)
   ------------------------------------------------------------------------- */

/* Storefront sets .col-full { box-sizing: content-box } — padding must stay inside width */
.site-content .col-full {
  box-sizing: border-box;
}

/* Override Storefront .col-full margins (default 2.617924em / 1.41575em) */
@media (max-width: 66.4989em) {
  .site-content .col-full {
    margin-left: 1.2em;
    margin-right: 1.2em;
  }
}

@media (max-width: 568px) {
  .site-content .col-full {
    margin-left: 1em;
    margin-right: 1em;
  }
}

@media (max-width: 768px) {
  .site-content .col-full {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  #content.site-content {
    padding-top: 0.35rem;
  }

  #page.hfeed.site {
    margin-left: 0;
    margin-right: 0;
  }

  /* Storefront / WooCommerce inner wrappers often add extra horizontal space */
  .site-content .col-full > .woocommerce,
  .site-content .col-full > article,
  .site-content .col-full > .type-page {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (min-width: 769px) {
  .site-content .col-full {
    max-width: min(100%, var(--storefront-child-content-max-width));
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .site-content .col-full > .woocommerce {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }
}

/* -------------------------------------------------------------------------
   Selects & dropdowns (native + Select2 / WooCommerce)
   ------------------------------------------------------------------------- */

select,
.woocommerce select,
.woocommerce-page select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-height: 2.75em;
  width: 100%;
  max-width: 100%;
  padding: 0.55em 2.5em 0.55em 0.85em;
  font-size: 1rem;
  line-height: 1.4;
  color: #333;
  background-color: var(--storefront-child-input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85em center;
  background-size: 0.65rem auto;
  border: 1px solid var(--storefront-child-input-border);
  border-radius: 4px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

select:hover,
.woocommerce select:hover {
  border-color: #a8b5ae;
}

select:focus,
.woocommerce select:focus {
  outline: none;
  border-color: var(--storefront-child-accent);
  box-shadow: 0 0 0 1px var(--storefront-child-accent);
}

/* Select2 (country, currency, etc.) */
.select2-container {
  width: 100% !important;
  max-width: 100%;
}

.select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  min-height: 2.75em;
  height: auto;
  padding: 0 0.55em 0 0.85em;
  border: 1px solid var(--storefront-child-input-border);
  border-radius: 4px;
  background-color: var(--storefront-child-input-bg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  flex: 1;
  min-width: 0;
  padding: 0;
  line-height: 1.4;
  color: #333;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: #777;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  position: relative;
  top: auto;
  right: auto;
  flex-shrink: 0;
  height: auto;
  width: 1.5em;
  margin-left: 0.35em;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  border-color: #555 transparent transparent transparent;
  border-width: 6px 5px 0 5px;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus
  .select2-selection--single {
  border-color: var(--storefront-child-accent);
  box-shadow: 0 0 0 1px var(--storefront-child-accent);
}

.select2-container--default.select2-container--open
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: transparent transparent #555 transparent;
  border-width: 0 5px 6px 5px;
}

.select2-dropdown {
  border: 1px solid var(--storefront-child-input-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.select2-container--default .select2-results__option {
  padding: 0.5em 0.85em;
}

.select2-container--default
  .select2-results__option--highlighted[aria-selected],
.select2-container--default
  .select2-results__option--highlighted[data-selected] {
  background-color: var(--storefront-child-accent);
  color: #fff;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--storefront-child-input-border);
  border-radius: 4px;
  padding: 0.45em 0.65em;
  background-color: var(--storefront-child-input-bg);
}

.select2-container--default
  .select2-search--dropdown
  .select2-search__field:focus {
  border-color: var(--storefront-child-accent);
  outline: none;
}

h3 {
  font-size: 1.1em;
}

.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
  background-color: #53b0e4 !important;
}