/*
Theme Name: Oráculo
Theme URI: https://oraculo.dev
Author: Oráculo Dev
Author URI: https://oraculo.dev
Description: Tema WordPress customizado com WooCommerce — design escuro luxuoso, minimalista e elegante para plataforma de atendimento de tarot. Estética refinada com dourado champagne sobre fundos escuros quentes.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oraculo
*/

/* ========================================================================
   DESIGN SYSTEM — Oráculo
   Plataforma de atendimento de tarot
   Estética: Luxo minimalista · Escuro quente · Dourado champagne
   Inspiração: Wellness de alto padrão + espiritualidade contemporânea
   ======================================================================== */

/* ========================================================================
   Fontes externas
   Cormorant Garamond — serifada elegante e literária para títulos
   Outfit — geométrica limpa e moderna para corpo e UI
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ========================================================================
   Variáveis globais — tokens de design consumidos por todos os componentes
   ======================================================================== */

:root {

  /* ------------------------------------------------------------------ */
  /* FUNDOS                                                              */
  /* Pretos quentes com subtom marrom/sépia — evita frieza tecnológica  */
  /* Cria atmosfera acolhedora como ambiente de consulta sofisticado    */
  /* ------------------------------------------------------------------ */

  --color-bg-primary:       #0B0A09;   /* Fundo raiz — quase-preto quente       */
  --color-bg-secondary:     #100F0D;   /* Fundo alternativo / seções pares      */
  --color-surface:          #171513;   /* Superfície de cards e inputs          */
  --color-surface-elevated: #1D1B18;   /* Card em hover / estado ativo          */
  --color-overlay:          rgba(11, 10, 9, 0.90); /* Modais e overlays         */

  /* ------------------------------------------------------------------ */
  /* BORDAS                                                              */
  /* Tons quentes sutis — criam separação sem dureza visual             */
  /* ------------------------------------------------------------------ */

  --color-border:           #2A2622;   /* Borda padrão — marrom-escuro sutil    */
  --color-border-focus:     #C9A96E;   /* Borda em foco — dourado champagne     */
  --color-border-strong:    #3D3830;   /* Borda mais visível (separadores)      */

  /* ------------------------------------------------------------------ */
  /* TEXTO                                                               */
  /* Branco creme para títulos, cinza quente para secundário            */
  /* Evita branco puro (#FFF) — usa tons com calor para leitura suave  */
  /* ------------------------------------------------------------------ */

  --color-text-primary:     #F2EDE7;   /* Títulos e textos principais           */
  --color-text-secondary:   #A09889;   /* Legendas, subtítulos, placeholders    */
  --color-text-muted:       #5C5549;   /* Desativado, terceiro nível            */
  --color-text-inverse:     #0B0A09;   /* Texto sobre botões dourados           */

  /* ------------------------------------------------------------------ */
  /* CTA / INTERATIVO                                                    */
  /* Dourado champagne — transmite sofisticação e confiança             */
  /* Representa o ouro alquímico, transformação e valor elevado         */
  /* ------------------------------------------------------------------ */

  --color-cta:              #C9A96E;   /* Ação principal — dourado champagne    */
  --color-cta-hover:        #B8944F;   /* Hover — dourado mais profundo         */
  --color-cta-active:       #A67F3A;   /* Pressed / active — dourado intenso    */

  /* ------------------------------------------------------------------ */
  /* ACCENT / DESTAQUES LUMINOSOS                                        */
  /* Dourado claro para highlights, focus rings e efeitos sutis         */
  /* Brilho contido — sem neon, sem agressividade visual                */
  /* ------------------------------------------------------------------ */

  --color-accent:           #D4BA82;   /* Dourado claro — destaques e glows     */
  --color-accent-glow:      rgba(201, 169, 110, 0.15); /* Sombra difusa suave   */
  --color-accent-glow-strong: rgba(201, 169, 110, 0.30); /* Hover mais quente   */

  /* ------------------------------------------------------------------ */
  /* SEMÂNTICAS                                                          */
  /* Tons dessaturados e orgânicos — mantêm a elegância do conjunto     */
  /* Inspirados em elementos naturais: sálvia, âmbar, terra, água      */
  /* ------------------------------------------------------------------ */

  --color-success:          #7BAE7F;   /* Verde sálvia — confirmação serena     */
  --color-warning:          #D4A24C;   /* Âmbar quente — atenção gentil         */
  --color-danger:           #C45B5B;   /* Terracota avermelhado — erro contido  */
  --color-info:             #8AADBD;   /* Azul acinzentado — informação calma   */

  /* ------------------------------------------------------------------ */
  /* SOMBRAS                                                             */
  /* Sombras mais quentes e suaves — reforçam a atmosfera acolhedora   */
  /* ------------------------------------------------------------------ */

  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:      0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg:      0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-glow:    0 0 20px var(--color-accent-glow);
  --shadow-glow-cta: 0 4px 24px rgba(201, 169, 110, 0.25);

  /* ------------------------------------------------------------------ */
  /* TIPOGRAFIA                                                          */
  /* Cormorant Garamond — serifada literária para títulos               */
  /* Outfit — geométrica limpa para corpo, botões e interface           */
  /* O contraste serif × sans transmite tradição + modernidade          */
  /* ------------------------------------------------------------------ */

  --font-primary:   'Outfit', sans-serif;                  /* Corpo e UI  */
  --font-display:   'Cormorant Garamond', 'Georgia', serif; /* Títulos    */

  /* ------------------------------------------------------------------ */
  /* ESPAÇAMENTOS BASE                                                   */
  /* Escala generosa — luxo usa mais respiro visual entre elementos     */
  /* ------------------------------------------------------------------ */

  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   48px;
  --space-2xl:  80px;

  /* ------------------------------------------------------------------ */
  /* BORDER RADIUS                                                       */
  /* Cantos sutilmente arredondados — suavidade sem perder elegância    */
  /* Menos angular que tech, mais contido que infantil                  */
  /* ------------------------------------------------------------------ */

  --radius-xs:     2px;    /* Detalhes mínimos, badges                  */
  --radius-sm:     4px;    /* Botões, inputs, chips                     */
  --radius-base:   8px;    /* Cards, dropdowns                          */
  --radius-lg:    12px;    /* Modais, containers grandes                */
  --radius-full:  9999px;  /* Pills, avatares circulares                */

  /* ------------------------------------------------------------------ */
  /* TRANSIÇÕES                                                          */
  /* Movimentos mais lentos e suaves — reforçam sensação de calma       */
  /* ------------------------------------------------------------------ */

  --transition-fast:    0.15s ease;
  --transition-base:    0.25s ease;
  --transition-slow:    0.4s ease;
  --transition-elegant: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Suave e refinada */

  /* ------------------------------------------------------------------ */
  /* Z-INDEX — escala previsível                                         */
  /* ------------------------------------------------------------------ */

  --z-below:     -1;
  --z-base:       0;
  --z-raised:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ========================================================================
   Reset e base global
   ======================================================================== */

html,
body {
  background: var(--color-bg-primary);
  margin: 0;
  padding: 0;
}

body {
  margin: auto;
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================================================
   Utilitários de ocultação
   ======================================================================== */

.fc-dme-coins-badge .fc-dme-coin-icon { display: none !important; }
.fc-dme-coin-icon { display: none !important; }
h1.entry-title { display: none !important; }

/* ========================================================================
   Ajustes WooCommerce — Métodos de pagamento (mobile)
   ======================================================================== */

@media (max-width: 768px) {
  #add_payment_method #payment div.payment_box,
  .woocommerce-cart #payment div.payment_box,
  .woocommerce-checkout #payment div.payment_box {
    padding: 16px !important;
    border-radius: var(--radius-lg) !important;
  }

  #add_payment_method #payment ul.payment_methods li,
  .woocommerce-cart #payment ul.payment_methods li,
  .woocommerce-checkout #payment ul.payment_methods li {
    padding: 16px !important;
    border-radius: var(--radius-lg) !important;
  }
}

span#mp-security-code-info {
  display: none !important;
}

/* ========================================================================
   THANK YOU PAGE — Estilo Oráculo
   Pós-compra elegante e reconfortante
   ======================================================================== */

/* ─── Variáveis específicas da página de confirmação ──────────────── */
:root {
  --oc-bg:            #0B0A09 !important;
  --oc-surface:       rgba(242, 237, 231, 0.03) !important;
  --oc-surface-hover: rgba(242, 237, 231, 0.06) !important;
  --oc-border:        rgba(201, 169, 110, 0.15) !important;
  --oc-gold:          #C9A96E !important;
  --oc-gold-light:    #D4BA82 !important;
  --oc-gold-glow:     rgba(201, 169, 110, 0.20) !important;
  --oc-white:         #F2EDE7 !important;
  --oc-muted:         rgba(242, 237, 231, 0.45) !important;
  --oc-success:       #7BAE7F !important;
  --oc-radius:        12px !important;
  --oc-font:          'Outfit', sans-serif !important;
  --oc-font-display:  'Cormorant Garamond', 'Georgia', serif !important;
}

/* ─── Reset global e container da página de confirmação ───────────── */
.woocommerce-order * {
  font-family: var(--oc-font) !important;
  box-sizing: border-box !important;
}

.woocommerce-order {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 40px 24px 80px !important;
  color: var(--oc-white) !important;
}

/* ─── Aviso de sucesso — confirmação de pedido ────────────────────── */
.woocommerce-notice--success.woocommerce-thankyou-order-received {
  background: linear-gradient(135deg, rgba(123, 174, 127, 0.10), rgba(201, 169, 110, 0.06)) !important;
  border: 1px solid rgba(123, 174, 127, 0.30) !important;
  border-left: 4px solid var(--oc-success) !important;
  border-radius: var(--oc-radius) !important;
  padding: 20px 24px !important;
  font-family: var(--oc-font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  font-style: italic !important;
  letter-spacing: 0.02em !important;
  color: var(--oc-success) !important;
  margin-bottom: 28px !important;
  box-shadow: 0 0 24px rgba(123, 174, 127, 0.08) !important;
}

/* ─── Resumo do pedido — cards informativos ───────────────────────── */
.woocommerce-order-overview {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 36px !important;
}

.woocommerce-order-overview li {
  flex: 1 1 160px !important;
  background: var(--oc-surface) !important;
  border: 1px solid var(--oc-border) !important;
  border-radius: var(--oc-radius) !important;
  padding: 16px 20px !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--oc-muted) !important;
  line-height: 1 !important;
  backdrop-filter: blur(8px) !important;
  transition: border-color var(--transition-base), background var(--transition-base) !important;
}

.woocommerce-order-overview li:hover {
  background: var(--oc-surface-hover) !important;
  border-color: rgba(201, 169, 110, 0.35) !important;
}

.woocommerce-order-overview li strong {
  display: block !important;
  margin-top: 8px !important;
  font-family: var(--oc-font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  color: var(--oc-white) !important;
  letter-spacing: 0.01em !important;
}

/* Destaque no valor total */
.woocommerce-order-overview__total strong {
  color: var(--oc-gold-light) !important;
  text-shadow: 0 0 12px var(--oc-gold-glow) !important;
}

/* ─── Bloco Pix do MercadoPago ────────────────────────────────────── */
.mp-details-title {
  font-family: var(--oc-font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  font-style: italic !important;
  letter-spacing: 0.02em !important;
  color: var(--oc-white) !important;
  margin-bottom: 20px !important;
}

.mp-details-pix {
  background: var(--oc-surface) !important;
  border: 1px solid var(--oc-border) !important;
  border-radius: var(--oc-radius) !important;
  padding: 32px !important;
  margin-bottom: 36px !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(242, 237, 231, 0.03) !important;
}

.mp-row-checkout-pix {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 32px !important;
  align-items: flex-start !important;
}

/* Coluna esquerda: instruções de pagamento */
.mp-col-md-4 {
  flex: 1 1 220px !important;
}

.mp-details-pix-img {
  width: 52px !important;
  margin-bottom: 16px !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.8 !important;
}

.mp-details-pix-title {
  font-family: var(--oc-font) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--oc-muted) !important;
  margin-bottom: 16px !important;
}

.mp-steps-congrats {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.mp-details-list {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.mp-details-pix-number-p {
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(201, 169, 110, 0.10) !important;
  border: 1px solid rgba(201, 169, 110, 0.30) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--oc-font-display) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--oc-gold-light) !important;
  margin: 0 !important;
  line-height: 28px !important;
  text-align: center !important;
}

.mp-details-list-description {
  font-size: 0.85rem !important;
  color: var(--oc-muted) !important;
  margin: 0 !important;
  padding-top: 4px !important;
  line-height: 1.5 !important;
}

/* Coluna direita: QR Code */
.mp-col-md-8 {
  flex: 2 1 320px !important;
  text-align: center !important;
}

.mp-details-pix-amount {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}

.mp-details-pix-qr {
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--oc-muted) !important;
}

.mp-details-pix-qr-value {
  font-family: var(--oc-font-display) !important;
  font-size: 2.2rem !important;
  font-weight: 600 !important;
  color: var(--oc-gold-light) !important;
  text-shadow: 0 0 20px var(--oc-gold-glow) !important;
  letter-spacing: 0.01em !important;
}

.mp-details-pix-qr-title {
  font-family: var(--oc-font) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--oc-muted) !important;
  margin-bottom: 14px !important;
}

.mp-details-pix-qr-img {
  width: 180px !important;
  height: 180px !important;
  border-radius: var(--radius-base) !important;
  border: 2px solid var(--oc-border) !important;
  padding: 8px !important;
  background: #fff !important;
  display: block !important;
  margin: 0 auto 12px !important;
  box-shadow: 0 0 32px var(--oc-gold-glow) !important;
}

.mp-details-pix-qr-subtitle {
  font-size: 0.72rem !important;
  color: var(--oc-muted) !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 24px !important;
}

/* Container do código Pix */
.mp-details-pix-container {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--oc-border) !important;
  border-radius: var(--radius-base) !important;
  padding: 16px !important;
}

.mp-details-pix-qr-description {
  font-size: 0.78rem !important;
  color: var(--oc-muted) !important;
  margin-bottom: 10px !important;
  line-height: 1.5 !important;
}

.mp-row-checkout-pix-container {
  display: flex !important;
  gap: 10px !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;
}

.mp-qr-input {
  flex: 1 1 0 !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(201, 169, 110, 0.18) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--oc-muted) !important;
  font-size: 0.65rem !important;
  padding: 10px 12px !important;
  outline: none !important;
  font-family: monospace !important;
  min-width: 0 !important;
}

.mp-details-pix-button {
  background: var(--oc-gold) !important;
  color: var(--color-text-inverse) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 20px !important;
  font-family: var(--oc-font) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background var(--transition-base), box-shadow var(--transition-base) !important;
  box-shadow: 0 0 16px var(--oc-gold-glow) !important;
  white-space: nowrap !important;
}

.mp-details-pix-button:hover {
  background: var(--color-cta-hover) !important;
  box-shadow: 0 0 28px var(--color-accent-glow-strong) !important;
}

/* ─── Tabela de detalhes do pedido ────────────────────────────────── */
.woocommerce-order-details {
  margin-bottom: 36px !important;
}

.woocommerce-order-details__title,
.woocommerce-column__title {
  font-family: var(--oc-font-display) !important;
  font-size: 1.35rem !important;
  font-weight: 500 !important;
  font-style: italic !important;
  letter-spacing: 0.02em !important;
  color: var(--oc-white) !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--oc-border) !important;
}

.woocommerce-table--order-details {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--oc-surface) !important;
  border: 1px solid var(--oc-border) !important;
  border-radius: var(--oc-radius) !important;
  overflow: hidden !important;
  backdrop-filter: blur(8px) !important;
}

.woocommerce-table--order-details thead tr {
  background: rgba(201, 169, 110, 0.05) !important;
}

.woocommerce-table--order-details th {
  font-family: var(--oc-font) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--oc-muted) !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--oc-border) !important;
  text-align: left !important;
}

.woocommerce-table--order-details td {
  padding: 16px 20px !important;
  font-size: 0.9rem !important;
  color: var(--oc-white) !important;
  border-bottom: 1px solid rgba(242, 237, 231, 0.04) !important;
  vertical-align: top !important;
}

.woocommerce-table--order-details tbody tr:last-child td {
  border-bottom: 1px solid var(--oc-border) !important;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
  color: var(--oc-gold-light) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
}

.woocommerce-table--order-details tfoot th {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: var(--oc-muted) !important;
  padding: 12px 20px !important;
  background: none !important;
  border-bottom: none !important;
  text-align: left !important;
}

.woocommerce-table--order-details tfoot td {
  padding: 12px 20px !important;
  border-bottom: none !important;
  color: var(--oc-white) !important;
}

/* Nome do produto e metadados */
.woocommerce-table__product-name a {
  color: var(--oc-white) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color var(--transition-base) !important;
}

.woocommerce-table__product-name a:hover {
  color: var(--oc-gold-light) !important;
}

.product-quantity {
  color: var(--oc-muted) !important;
  font-weight: 400 !important;
}

.wc-item-meta {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
}

.wc-item-meta li {
  font-size: 0.78rem !important;
  color: var(--oc-muted) !important;
  margin-bottom: 4px !important;
}

.wc-item-meta-label {
  color: rgba(242, 237, 231, 0.55) !important;
  font-weight: 600 !important;
}

.wc-item-meta p {
  display: inline !important;
  margin: 0 !important;
}

/* Valores monetários */
.woocommerce-Price-amount {
  font-family: var(--oc-font-display) !important;
  font-weight: 600 !important;
}

/* ─── Bloco duplicado de imagem Pix — oculto ─────────────────────── */
.mp-pix-image-container {
  display: none !important;
}

/* ─── Dados do cliente ────────────────────────────────────────────── */
.woocommerce-customer-details {
  background: var(--oc-surface) !important;
  border: 1px solid var(--oc-border) !important;
  border-radius: var(--oc-radius) !important;
  padding: 24px 28px !important;
  backdrop-filter: blur(8px) !important;
}

.woocommerce-customer-details address {
  font-style: normal !important;
  font-size: 0.9rem !important;
  color: var(--oc-muted) !important;
  line-height: 1.8 !important;
}

.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
  margin: 4px 0 0 !important;
  font-size: 0.85rem !important;
  color: var(--oc-muted) !important;
}

/* ─── Scrollbar personalizada ─────────────────────────────────────── */
::-webkit-scrollbar {
  width: 5px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: var(--color-cta) !important;
  border-radius: 3px !important;
}

/* ─── Responsivo — ajustes mobile ─────────────────────────────────── */
@media (max-width: 600px) {
  .woocommerce-order {
    padding: 24px 16px 60px !important;
  }

  .mp-details-pix {
    padding: 20px 16px !important;
  }

  .mp-row-checkout-pix {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .mp-details-pix-qr-img {
    width: 150px !important;
    height: 150px !important;
  }

  .mp-details-pix-qr-value {
    font-size: 1.6rem !important;
  }

  .woocommerce-order-overview li {
    flex: 1 1 130px !important;
  }
}

/* ========================================================================
   Container utilitário — espaçamento de seções com respiro lateral
   ======================================================================== */

.cs-edge-pad {
  box-sizing: border-box;
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 80px;
  padding-top: 80px;
}

@media (min-width: 1024px) {
  .cs-edge-pad {
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 80px;
    padding-top: 80px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}