/* Shared WooCommerce UI primitives (buttons, forms, panels, tables) */

.cleir-woo-wrap {
  width: 100%;
}

.cleir-woo-inner {
  max-width: var(--cleir-wrap);
  margin: 0 auto;
  padding: 0 40px 48px;
}

.cleir-serif {
  font-family: var(--cleir-serif);
  font-weight: 400;
}

.cleir-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cleir-gold);
}

.cleir-crumbs {
  font-size: 12.5px;
  color: var(--cleir-soft);
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.cleir-crumbs a {
  color: var(--cleir-soft);
  text-decoration: none;
}

.cleir-crumbs a:hover {
  color: var(--cleir-terra);
}

.cleir-page-head {
  padding: 56px 0 34px;
}

.cleir-page-head h1 {
  font-family: var(--cleir-serif);
  font-weight: 300;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 14px 0 0;
  color: var(--cleir-ink);
}

.cleir-panel {
  background: var(--cleir-panel);
  border: 1px solid var(--cleir-line);
  border-radius: var(--cleir-radius);
}

.cleir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--cleir-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  border: none;
  border-radius: var(--cleir-pill);
  padding: 16px 34px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, border-color 0.2s, color 0.2s;
}

.cleir-btn--primary {
  background: var(--cleir-terra);
  color: #fff;
}

.cleir-btn--primary:hover {
  background: var(--cleir-terra-dark);
  color: #fff;
  transform: scale(1.01);
}

/*
 * Elementor Site Settings: .elementor-kit-N a { color: var(--e-global-color-text) }
 * beats a bare .cleir-btn--primary. Force primary button text white.
 */
body.cleir-theme a.cleir-btn.cleir-btn--primary,
body.cleir-theme a.cleir-btn.cleir-btn--primary:link,
body.cleir-theme a.cleir-btn.cleir-btn--primary:visited,
body.cleir-theme a.cleir-btn.cleir-btn--primary:hover,
body.cleir-theme a.cleir-btn.cleir-btn--primary:focus,
body.cleir-theme a.cleir-btn.cleir-btn--primary:active,
[class*="elementor-kit-"] a.cleir-btn.cleir-btn--primary,
[class*="elementor-kit-"] a.cleir-btn.cleir-btn--primary:link,
[class*="elementor-kit-"] a.cleir-btn.cleir-btn--primary:visited,
[class*="elementor-kit-"] a.cleir-btn.cleir-btn--primary:hover,
[class*="elementor-kit-"] a.cleir-btn.cleir-btn--primary:focus,
[class*="elementor-kit-"] a.cleir-btn.cleir-btn--primary:active {
  color: #ffffff !important;
  text-decoration: none !important;
}

body.cleir-theme a.cleir-btn.cleir-btn--outline,
body.cleir-theme a.cleir-btn.cleir-btn--outline:link,
body.cleir-theme a.cleir-btn.cleir-btn--outline:visited,
[class*="elementor-kit-"] a.cleir-btn.cleir-btn--outline,
[class*="elementor-kit-"] a.cleir-btn.cleir-btn--outline:link,
[class*="elementor-kit-"] a.cleir-btn.cleir-btn--outline:visited {
  color: var(--cleir-ink) !important;
  text-decoration: none !important;
}

body.cleir-theme a.cleir-btn.cleir-btn--outline:hover,
body.cleir-theme a.cleir-btn.cleir-btn--outline:focus,
[class*="elementor-kit-"] a.cleir-btn.cleir-btn--outline:hover,
[class*="elementor-kit-"] a.cleir-btn.cleir-btn--outline:focus {
  color: var(--cleir-bg) !important;
}

.cleir-btn--outline {
  background: transparent;
  color: var(--cleir-ink);
  border: 1px solid var(--cleir-ink);
}

.cleir-btn--outline:hover {
  background: var(--cleir-ink);
  color: var(--cleir-bg);
}

.cleir-btn--ghost {
  background: transparent;
  color: var(--cleir-terra);
  border: 1px solid var(--cleir-line);
}

.cleir-btn--block {
  width: 100%;
}

/* Password visibility — CLEIR eye toggle
   Must beat Elementor / Woo `button { background: terra; border-radius: 100px }` */
.cleir-pw {
  position: relative;
  display: block;
  width: 100%;
}

.cleir-pw .cleir-input,
.cleir-pw input.input-text,
.cleir-pw input[type="password"],
.cleir-pw input[type="text"] {
  width: 100%;
  padding-right: 48px !important;
}

body.cleir-theme .cleir-pw__toggle,
body.cleir-theme button.cleir-pw__toggle,
body.cleir-theme .woocommerce button.cleir-pw__toggle,
body.cleir-theme .cleir-acc-form button.cleir-pw__toggle,
body.cleir-theme .cleir-auth-card button.cleir-pw__toggle,
body.cleir-theme .cleir-auth-modal button.cleir-pw__toggle,
[class*="elementor-kit-"] button.cleir-pw__toggle,
[class*="elementor-kit-"] .cleir-pw__toggle {
  all: unset;
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  transform: translateY(-50%) !important;
  box-sizing: border-box !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #9b8c7c !important;
  box-shadow: none !important;
  text-indent: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  z-index: 2;
}

body.cleir-theme .cleir-pw__toggle:hover,
body.cleir-theme .cleir-pw__toggle:focus,
body.cleir-theme .cleir-pw__toggle:active,
body.cleir-theme .woocommerce button.cleir-pw__toggle:hover,
[class*="elementor-kit-"] button.cleir-pw__toggle:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: #c4796a !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
  outline: none !important;
}

body.cleir-theme .cleir-pw__toggle:focus-visible {
  outline: 1px solid #c4796a !important;
  outline-offset: 1px !important;
}

body.cleir-theme .cleir-pw__toggle .cleir-pw__icon,
body.cleir-theme .cleir-pw__toggle svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  pointer-events: none;
  flex: none;
  stroke: currentColor !important;
  fill: none !important;
  color: inherit !important;
}

body.cleir-theme .cleir-pw__toggle .cleir-pw__icon[hidden],
body.cleir-theme .cleir-pw__toggle svg[hidden] {
  display: none !important;
}

/* Kill harsh Woo / plugin / browser-adjacent toggles */
body.cleir-theme .show-password-input,
body.cleir-theme .woocommerce-Input__toggle,
body.cleir-theme button.woocommerce-password-toggle,
body.cleir-theme .password-input > .display-password {
  display: none !important;
}

.cleir-link {
  color: var(--cleir-terra);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

.cleir-link:hover {
  border-bottom-color: var(--cleir-terra);
  color: var(--cleir-terra);
}

/* Woo form controls */
.cleir-theme .woocommerce form .form-row label,
.cleir-theme .woocommerce-form-row label,
.cleir-form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 7px;
  color: var(--cleir-ink);
}

.cleir-theme .woocommerce form .input-text,
.cleir-theme .woocommerce form select,
.cleir-theme .woocommerce-input-wrapper .input-text,
.cleir-theme .select2-container--default .select2-selection--single,
.cleir-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--cleir-line);
  border-radius: var(--cleir-radius-sm);
  background: var(--cleir-panel);
  font-family: var(--cleir-sans);
  font-size: 15px;
  color: var(--cleir-ink);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  box-shadow: none;
  height: auto;
  min-height: 48px;
}

.cleir-theme .woocommerce form .input-text:focus,
.cleir-theme .woocommerce form select:focus,
.cleir-input:focus {
  border-color: var(--cleir-terra);
  background: #fff;
}

.cleir-theme .woocommerce a.button,
.cleir-theme .woocommerce button.button,
.cleir-theme .woocommerce input.button,
.cleir-theme .woocommerce #respond input#submit {
  font-family: var(--cleir-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  border: none;
  border-radius: var(--cleir-pill);
  padding: 14px 28px;
  background: var(--cleir-terra);
  color: #fff;
  transition: background 0.2s;
}

.cleir-theme .woocommerce a.button:hover,
.cleir-theme .woocommerce button.button:hover,
.cleir-theme .woocommerce input.button:hover {
  background: var(--cleir-terra-dark);
  color: #fff;
}

.cleir-theme .woocommerce a.button.alt,
.cleir-theme .woocommerce button.button.alt,
.cleir-theme .woocommerce input.button.alt {
  background: var(--cleir-terra);
  color: #fff;
}

.cleir-theme .woocommerce table.shop_table {
  border: none;
  border-radius: 0;
}

.cleir-theme .woocommerce table.shop_table th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cleir-gold);
  border: none;
  padding: 0 0 16px;
  background: transparent;
}

.cleir-theme .woocommerce table.shop_table td {
  border-top: 1px solid var(--cleir-line);
  border-bottom: none;
  padding: 18px 0;
  background: transparent;
}

.cleir-thumb {
  width: 66px;
  height: 66px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--cleir-line);
  background: var(--cleir-bg);
  flex: none;
}

.cleir-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cleir-status {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border-radius: var(--cleir-pill);
}

.cleir-status--transit {
  background: var(--cleir-peach-soft);
  color: var(--cleir-terra);
  border: 1px solid var(--cleir-peach);
}

.cleir-status--done {
  background: #ebeae4;
  color: #6b6455;
}

.cleir-reassure {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cleir-reassure div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--cleir-muted);
}

.cleir-reassure svg {
  flex: none;
  stroke: var(--cleir-gold);
}

@media (max-width: 680px) {
  .cleir-woo-inner {
    padding-left: 22px;
    padding-right: 22px;
  }

  .cleir-page-head h1 {
    font-size: 38px;
  }
}