/*
Theme Name: Flavor
Theme URI: https://flavor.dev
Author: Flavor Dev
Author URI: https://flavor.dev
Description: Tema WordPress customizado com WooCommerce — design escuro, modular, otimizado para SEO e performance.
Version: 1.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: flavor
*/

/* ========================================================================
   Variáveis globais — consumidas por todos os CSS de componentes e seções
   ======================================================================== */

:root {

  /* ------------------------------------------------------------------ */
  /* FUNDOS                                                              */
  /* Deep-space navy escuro — PS5 usa quase-preto com viés azul frio    */
  /* ------------------------------------------------------------------ */

  --color-bg-primary:      #050C15;   /* Fundo raiz — preto PS5          */
  --color-bg-secondary:    #080F1C;   /* Fundo alternativo / seções pares */
  --color-surface:         #0D1A2A;   /* Superfície de cards e inputs     */
  --color-surface-elevated:#122135;   /* Card em hover / estado ativo     */
  --color-overlay:         rgba(5, 12, 21, 0.88); /* Modais e overlays   */

  /* ------------------------------------------------------------------ */
  /* BORDAS                                                              */
  /* ------------------------------------------------------------------ */

  --color-border:          #192D44;   /* Borda padrão — azul-marinho sutil */
  --color-border-focus:    #0070D1;   /* Borda em foco — PS blue oficial   */
  --color-border-strong:   #1E3D58;   /* Borda mais visível (separadores)  */

  /* ------------------------------------------------------------------ */
  /* TEXTO                                                               */
  /* PS5 usa branco puro para títulos, cinza-azulado para secundário    */
  /* ------------------------------------------------------------------ */

  --color-text-primary:    #FFFFFF;   /* Títulos e textos principais       */
  --color-text-secondary:  #8599B2;   /* Legendas, subtítulos, placeholders*/
  --color-text-muted:      #3D5470;   /* Desativado, terceiro nível        */
  --color-text-inverse:    #050C15;   /* Texto sobre botões claros         */

  /* ------------------------------------------------------------------ */
  /* CTA / INTERATIVO                                                    */
  /* #0070D1 é o azul oficial do PlayStation Store                      */
  /* ------------------------------------------------------------------ */

  --color-cta:             #0070D1;   /* Ação principal — PS Store blue    */
  --color-cta-hover:       #0058A8;   /* Hover mais escuro                 */
  --color-cta-active:      #004486;   /* Pressed / active                  */

  /* ------------------------------------------------------------------ */
  /* ACCENT / NEON GLOW                                                  */
  /* Azul elétrico brilhante — usado em glows, focus rings, highlights  */
  /* ------------------------------------------------------------------ */

  --color-accent:          #00A8E8;   /* Neon PS — destaques e glows       */
  --color-accent-glow:     rgba(0, 168, 232, 0.22); /* Sombra neon difusa */
  --color-accent-glow-strong: rgba(0, 168, 232, 0.45); /* Hover intenso   */

  /* ------------------------------------------------------------------ */
  /* SEMÂNTICAS                                                          */
  /* Inspiradas nos 4 símbolos do controle PlayStation                  */
  /* ------------------------------------------------------------------ */

  --color-success:         #00C49A;   /* Triângulo — verde-azulado PS      */
  --color-warning:         #F5A623;   /* Círculo — âmbar                   */
  --color-danger:          #E8002A;   /* Cruz — vermelho PS                */
  --color-info:            #0070D1;   /* Quadrado — azul PS                */

  /* ------------------------------------------------------------------ */
  /* SOMBRAS                                                             */
  /* ------------------------------------------------------------------ */

  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md:     0 4px 20px rgba(0, 0, 0, 0.6);
  --shadow-lg:     0 8px 40px rgba(0, 0, 0, 0.7);
  --shadow-glow:   0 0 16px var(--color-accent-glow);
  --shadow-glow-cta: 0 4px 24px rgba(0, 112, 209, 0.4);

  /* ------------------------------------------------------------------ */
  /* TIPOGRAFIA                                                          */
  /* Barlow — geométrico, técnico, levemente condensado                 */
  /* Barlow Condensed — para títulos de alto impacto                    */
  /* ------------------------------------------------------------------ */

  --font-primary:  'Barlow', sans-serif;           /* Corpo e UI          */
  --font-display:  'Barlow Condensed', sans-serif; /* Títulos e headings  */

  /* ------------------------------------------------------------------ */
  /* ESPAÇAMENTOS BASE                                                   */
  /* ------------------------------------------------------------------ */

  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* ------------------------------------------------------------------ */
  /* BORDER RADIUS                                                       */
  /* PS5 / Sony usam cantos mais retos e geométricos                    */
  /* ------------------------------------------------------------------ */

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

  /* ------------------------------------------------------------------ */
  /* TRANSIÇÕES                                                          */
  /* ------------------------------------------------------------------ */

  --transition-fast:   0.12s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.35s ease;
  --transition-spring: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Pop    */

  /* ------------------------------------------------------------------ */
  /* 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;
}

body {
    margin: auto;
}
.fc-dme-coins-badge .fc-dme-coin-icon{display:none !important;}
.fc-dme-coin-icon{display:none !important;}
h1.entry-title {
    display: none !important;
}
@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:10px!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:10px!important;} }
span#mp-security-code-info {
    display: none !important;
}
html,
body {
  background: #050C15;
}

/* ============================================================
   JonasCoins — Thank You Page | PlayStation 5 UI Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@400;600;700;800&display=swap');

/* ─── Root Variables ──────────────────────────────────────── */
:root {
  --ps-bg:           #050d1a !important;
  --ps-surface:      rgba(255, 255, 255, 0.04) !important;
  --ps-surface-hover:rgba(255, 255, 255, 0.07) !important;
  --ps-border:       rgba(0, 149, 255, 0.18) !important;
  --ps-blue:         #0095ff !important;
  --ps-blue-bright:  #33aaff !important;
  --ps-blue-glow:    rgba(0, 149, 255, 0.35) !important;
  --ps-white:        #ffffff !important;
  --ps-muted:        rgba(255, 255, 255, 0.45) !important;
  --ps-success:      #00d4a0 !important;
  --ps-radius:       12px !important;
  --ps-font:         'Barlow', sans-serif !important;
  --ps-font-cond:    'Barlow Condensed', sans-serif !important;
}

/* ─── Global Reset & Container ────────────────────────────── */
.woocommerce-order * {
  font-family: var(--ps-font) !important;
  box-sizing: border-box !important;
}

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

/* ─── Success Notice ──────────────────────────────────────── */
.woocommerce-notice--success.woocommerce-thankyou-order-received {
  background: linear-gradient(135deg, rgba(0, 212, 160, 0.12), rgba(0, 149, 255, 0.08)) !important;
  border: 1px solid rgba(0, 212, 160, 0.35) !important;
  border-left: 4px solid var(--ps-success) !important;
  border-radius: var(--ps-radius) !important;
  padding: 18px 24px !important;
  font-family: var(--ps-font-cond) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--ps-success) !important;
  text-transform: uppercase !important;
  margin-bottom: 28px !important;
  box-shadow: 0 0 24px rgba(0, 212, 160, 0.12) !important;
}

/* ─── Order Overview List ─────────────────────────────────── */
.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(--ps-surface) !important;
  border: 1px solid var(--ps-border) !important;
  border-radius: var(--ps-radius) !important;
  padding: 16px 20px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ps-muted) !important;
  line-height: 1 !important;
  backdrop-filter: blur(8px) !important;
  transition: border-color 0.2s, background 0.2s !important;
}

.woocommerce-order-overview li:hover {
  background: var(--ps-surface-hover) !important;
  border-color: rgba(0, 149, 255, 0.4) !important;
}

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

/* Total highlight */
.woocommerce-order-overview__total strong {
  color: var(--ps-blue-bright) !important;
  text-shadow: 0 0 12px var(--ps-blue-glow) !important;
}

/* ─── MercadoPago Pix Block ───────────────────────────────── */
.mp-details-title {
  font-family: var(--ps-font-cond) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ps-white) !important;
  margin-bottom: 20px !important;
}

.mp-details-pix {
  background: var(--ps-surface) !important;
  border: 1px solid var(--ps-border) !important;
  border-radius: var(--ps-radius) !important;
  padding: 32px !important;
  margin-bottom: 36px !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

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

/* Left column: instructions */
.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.9 !important;
}

.mp-details-pix-title {
  font-family: var(--ps-font-cond) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ps-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(0, 149, 255, 0.15) !important;
  border: 1px solid rgba(0, 149, 255, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--ps-font-cond) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--ps-blue-bright) !important;
  margin: 0 !important;
  line-height: 28px !important;
  text-align: center !important;
}

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

/* Right column: QR */
.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.75rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--ps-muted) !important;
}

.mp-details-pix-qr-value {
  font-family: var(--ps-font-cond) !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--ps-blue-bright) !important;
  text-shadow: 0 0 20px var(--ps-blue-glow) !important;
  letter-spacing: 0.02em !important;
}

.mp-details-pix-qr-title {
  font-family: var(--ps-font-cond) !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--ps-muted) !important;
  margin-bottom: 14px !important;
}

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

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

/* Pix code container */
.mp-details-pix-container {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--ps-border) !important;
  border-radius: 8px !important;
  padding: 16px !important;
}

.mp-details-pix-qr-description {
  font-size: 0.78rem !important;
  color: var(--ps-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.4) !important;
  border: 1px solid rgba(0, 149, 255, 0.25) !important;
  border-radius: 6px !important;
  color: var(--ps-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(--ps-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-family: var(--ps-font-cond) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.2s, box-shadow 0.2s !important;
  box-shadow: 0 0 16px var(--ps-blue-glow) !important;
  white-space: nowrap !important;
}

.mp-details-pix-button:hover {
  background: var(--ps-blue-bright) !important;
  box-shadow: 0 0 28px var(--ps-blue-glow) !important;
}

/* ─── Order Details Table ─────────────────────────────────── */
.woocommerce-order-details {
  margin-bottom: 36px !important;
}

.woocommerce-order-details__title,
.woocommerce-column__title {
  font-family: var(--ps-font-cond) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--ps-white) !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--ps-border) !important;
}

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

.woocommerce-table--order-details thead tr {
  background: rgba(0, 149, 255, 0.08) !important;
}

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

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

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

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
  color: var(--ps-blue-bright) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}

.woocommerce-table--order-details tfoot th {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ps-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(--ps-white) !important;
}

/* Product name & meta */
.woocommerce-table__product-name a {
  color: var(--ps-white) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color 0.2s !important;
}

.woocommerce-table__product-name a:hover {
  color: var(--ps-blue-bright) !important;
}

.product-quantity {
  color: var(--ps-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(--ps-muted) !important;
  margin-bottom: 4px !important;
}

.wc-item-meta-label {
  color: rgba(255,255,255,0.6) !important;
  font-weight: 600 !important;
}

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

/* Price amounts */
.woocommerce-Price-amount {
  font-family: var(--ps-font-cond) !important;
  font-weight: 700 !important;
}

/* ─── Hidden duplicate Pix image block ────────────────────── */
.mp-pix-image-container {
  display: none !important;
}

/* ─── Customer Details ────────────────────────────────────── */
.woocommerce-customer-details {
  background: var(--ps-surface) !important;
  border: 1px solid var(--ps-border) !important;
  border-radius: var(--ps-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(--ps-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(--ps-muted) !important;
}

/* ─── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: var(--ps-blue) !important;
  border-radius: 3px !important;
}

/* ─── Responsive ──────────────────────────────────────────── */
@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;
  }
}


.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;
  }
}