/*
 * Tua Case — tema Cubo customizado (overlay completo)
 * Espelha o headless Next.js: src/app/design-system.css + site-header + site-footer
 *
 * Aplicar após: npm run theme:pull && npm run theme:apply
 * Sync: npm run theme:watch
 */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

:root {
  --tuacase-ink: #0d0704;
  --tuacase-orange: #ff7d05;
  --tuacase-orange-hover: #ea580c;
  --tuacase-dark: #111111;
  --tuacase-surface: #f3f3f3;
  --tuacase-border: #e1e1e1;
  --tuacase-gray: #8f8f8f;
  --tuacase-placeholder: #d3d3d3;
  --tuacase-footer-text: #949494;
  --tuacase-white: #ffffff;
  --tuacase-radius-input: 43px;
  --tuacase-radius-button: 50px;
  --tuacase-radius-card: 20px;
  --tuacase-font: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --tuacase-max-width: 1560px;
}

/* ===== BASE ===== */

body,
button,
.btn,
input,
textarea,
select,
.form-control,
.form-select,
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--tuacase-font) !important;
}

body {
  color: var(--tuacase-ink) !important;
  background-color: var(--tuacase-white) !important;
}

.container,
.container-fluid {
  max-width: var(--tuacase-max-width);
}

a:hover,
a:focus {
  color: var(--tuacase-orange);
}

.link-accent,
.text-accent,
.svg-icon-accent {
  color: var(--tuacase-orange) !important;
  fill: var(--tuacase-orange) !important;
}

.background-primary,
.divider-double.background-primary {
  background-color: var(--tuacase-orange) !important;
  border-color: var(--tuacase-orange) !important;
}

/* ===== HIPER-TOPO (barra promocional) ===== */

.section-advertising,
.announcement-bar,
.adbar {
  background-color: var(--tuacase-dark) !important;
  color: var(--tuacase-white) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-align: center;
  padding: 7px 16px !important;
}

/* ===== HEADER ===== */

.head-light,
.head-dark,
.head-brand {
  background-color: var(--tuacase-surface) !important;
  color: var(--tuacase-ink) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.head-light a,
.head-light .cart-widget-amount,
.head-light .svg-icon-secondary,
.head-dark a,
.head-dark .cart-widget-amount,
.head-brand a,
.head-brand .cart-widget-amount {
  color: var(--tuacase-ink) !important;
  fill: var(--tuacase-ink) !important;
}

.head-light .nav-desktop,
.head-dark .nav-desktop,
.head-brand .nav-desktop {
  background-color: var(--tuacase-surface) !important;
}

.head-light .nav-desktop .nav-list-link,
.head-dark .nav-desktop .nav-list-link,
.head-brand .nav-desktop .nav-list-link,
.nav-list-link {
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--tuacase-ink) !important;
  border-bottom-color: transparent !important;
}

.head-light .nav-desktop .nav-list-link:hover,
.head-dark .nav-desktop .nav-list-link:hover,
.head-brand .nav-desktop .nav-list-link:hover,
.nav-list-link:hover {
  color: var(--tuacase-orange) !important;
  border-bottom-color: var(--tuacase-orange) !important;
}

.nav-secondary,
.nav-account {
  background-color: transparent !important;
}

.nav-accounts-link {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

.form-control-invert,
.js-search-input,
input[type="search"].form-control {
  border-radius: var(--tuacase-radius-button) !important;
  background: var(--tuacase-white) !important;
  border: 1px solid var(--tuacase-border) !important;
}

/* ===== BOTÕES ===== */

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.js-recaptcha-button,
.js-addtocart.btn-primary {
  background-color: var(--tuacase-orange) !important;
  border: 2px solid var(--tuacase-orange) !important;
  color: var(--tuacase-white) !important;
  fill: var(--tuacase-white) !important;
  border-radius: var(--tuacase-radius-button) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  min-height: 49px;
  padding: 12px 36px !important;
  opacity: 1 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.js-addtocart.btn-primary:hover {
  background-color: var(--tuacase-orange-hover) !important;
  border-color: var(--tuacase-orange-hover) !important;
}

.btn-secondary,
.btn-foreground {
  background-color: var(--tuacase-dark) !important;
  border: 2px solid var(--tuacase-dark) !important;
  color: var(--tuacase-white) !important;
  border-radius: var(--tuacase-radius-button) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.btn-link,
.btn-link:hover {
  color: var(--tuacase-orange) !important;
}

/* ===== FORMULÁRIOS ===== */

.form-label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--tuacase-ink) !important;
  margin-bottom: 8px !important;
}

.form-control,
.form-select,
.js-account-input,
.js-password-input,
.js-shipping-input {
  height: 54px !important;
  padding: 0 20px !important;
  font-size: 12px !important;
  color: var(--tuacase-ink) !important;
  background-color: var(--tuacase-white) !important;
  border: 1px solid var(--tuacase-border) !important;
  border-radius: var(--tuacase-radius-input) !important;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.08) !important;
}

.form-control::placeholder {
  color: var(--tuacase-placeholder) !important;
  opacity: 1 !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--tuacase-orange) !important;
  box-shadow: 0 0 0 2px rgba(255, 125, 5, 0.15) !important;
  outline: none !important;
}

.form-group {
  margin-bottom: 22px !important;
}

/* ===== PRODUTOS / HOME ===== */

.item-description,
.item-description-container {
  background: var(--tuacase-white) !important;
  border-bottom: none !important;
}

.item-link,
.item-name a {
  color: var(--tuacase-ink) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.item-price-container,
.item-price {
  color: var(--tuacase-ink) !important;
  font-weight: 700 !important;
}

.item-installments {
  color: var(--tuacase-gray) !important;
  font-size: 12px !important;
}

.item-actions {
  border-top: none !important;
}

.section-featured-home,
.section-slider,
.page-header {
  margin-bottom: 32px !important;
}

.page-header {
  background: var(--tuacase-white) !important;
  padding: 24px 0 !important;
}

.page-header h1,
.page-header .h1 {
  font-size: 25px !important;
  font-weight: 700 !important;
  color: var(--tuacase-ink) !important;
  text-transform: none !important;
}

.box-title,
.subtitle-underline {
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom-color: var(--tuacase-border) !important;
}

/* ===== CARRINHO ===== */

.cart-light,
.cart-summary-detail {
  background-color: var(--tuacase-surface) !important;
  border-radius: var(--tuacase-radius-card) !important;
}

.cart-item-name a {
  color: var(--tuacase-ink) !important;
}

/* ===== PÁGINAS DE CONTA ===== */

body.template-account-login,
body.template-account-register,
body.template-account-reset,
body.template-account-newpass,
body.template-account-info,
body.template-account-orders,
body.template-account-order,
body.template-account-addresses,
body.template-account-address {
  background: var(--tuacase-white) !important;
}

.account-page {
  padding: 40px 0 60px !important;
}

.account-page .container {
  max-width: 540px;
}

.account-page h1,
.account-page .page-header h1 {
  font-size: 25px !important;
  font-weight: 700 !important;
  color: var(--tuacase-ink) !important;
  text-transform: none !important;
}

.account-page p {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.account-page .divider-double {
  border-bottom: 1px solid var(--tuacase-border) !important;
  background: transparent !important;
}

.breadcrumbs,
.breadcrumbs a,
.breadcrumbs .crumb {
  font-size: 9px !important;
  color: var(--tuacase-gray) !important;
}

.breadcrumbs a:hover {
  color: var(--tuacase-orange) !important;
}

.g-recaptcha,
.h-captcha {
  margin: 16px auto !important;
  display: flex !important;
  justify-content: center !important;
}

/* ===== CHECKOUT ===== */

body.template-checkout .btn-primary,
body.template-checkout .btn-checkout {
  background-color: var(--tuacase-orange) !important;
  border-color: var(--tuacase-orange) !important;
  border-radius: var(--tuacase-radius-button) !important;
}

.bar-progress-active,
.bar-progress-check {
  background: var(--tuacase-orange) !important;
}

/* ===== FOOTER (aproximar site-footer.tsx) ===== */

footer {
  background: var(--tuacase-surface) !important;
  color: var(--tuacase-ink) !important;
}

footer a,
footer .contact-link,
.footer-menu-link {
  color: var(--tuacase-ink) !important;
  fill: var(--tuacase-ink) !important;
  font-size: 14px !important;
}

footer a:hover,
.footer-menu-link:hover {
  color: var(--tuacase-orange) !important;
}

.footer-legal,
.copyright {
  background: var(--tuacase-white) !important;
  color: var(--tuacase-footer-text) !important;
  font-size: 12px !important;
}

.newsletter-btn,
.btn-newsletter {
  background-color: var(--tuacase-orange) !important;
  border-radius: 24.5px !important;
  color: var(--tuacase-white) !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

.label-accent,
.label.label-accent {
  background: var(--tuacase-orange) !important;
}

/* ===== RESPONSIVO ===== */

@media (max-width: 767px) {
  .account-page {
    padding: 24px 0 40px !important;
  }

  .form-control,
  .form-select {
    height: 50px !important;
    font-size: 14px !important;
  }

  .btn-primary,
  .js-addtocart.btn-primary {
    width: 100% !important;
  }

  .head-light .nav-desktop .nav-list-link,
  .nav-list-link {
    font-size: 14px !important;
  }
}