/* Definições de variáveis CSS que serão controladas pelo JavaScript */
:root {
    --theme-primary-color: #8DB595; /* Laranja padrão, será sobrescrito */
    --theme-hover-color: #8DB595;   /* Laranja escuro padrão, será sobrescrito */
    --theme-text-on-primary-color: #FFFFFF; /* Texto branco em cima da cor primária */
}

body { 
    font-family: 'Inter', sans-serif; 
    scroll-behavior: smooth; 
}
.product-card { 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.product-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
}
.modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.5); 
}
.modal-content { 
    background-color: #fefefe; 
    margin: 10% auto; 
    padding: 20px; 
    border: 1px solid #888; 
    width: 80%; 
    max-width: 600px; 
    border-radius: 8px; 
    position: relative; 
}
.close-button { 
    color: #aaa; 
    float: right; 
    font-size: 28px; 
    font-weight: bold; 
}
.close-button:hover, 
.close-button:focus { 
    color: black; 
    text-decoration: none; 
    cursor: pointer; 
}
.store-closed-banner { 
    display: none; 
}

/* Cabeçalho */
#storeHeader {
    background-color: var(--theme-primary-color);
    /* text-white é aplicado via Tailwind no HTML */
}
#storeNameHeader {
    color: var(--theme-text-on-primary-color);
}
#cartButton {
    color: var(--theme-text-on-primary-color);
}
/* Pode adicionar um hover para o botão do carrinho se desejar, ex:
#cartButton:hover {
    color: var(--theme-hover-color); // Ou uma cor mais clara
}
*/

/* Títulos que usam a cor do tema */
.category-title-js,
#checkoutSectionTitle,
#cartModal h2,
#extrasModal .modal-content h2 {
    color: var(--theme-primary-color);
}

/* Preço do produto no card */
.product-price-js {
    color: var(--theme-primary-color);
}

/* Total do carrinho no modal e checkout (se quiser que use a cor primária) */
#cartTotal,
#summaryTotal { /* #summaryTotal já tem text-orange-600 no HTML, pode ser removido de lá */
    color: var(--theme-primary-color);
}

/* Botões principais */
.button-theme,
.add-to-cart-button,
#confirmExtrasButton,
#applyCouponButton,
#checkoutButton,
#submitOrderButton {
    background-color: var(--theme-primary-color);
    color: var(--theme-text-on-primary-color);
    /* Assegure que classes Tailwind como text-white sejam aplicadas no HTML se esta cor não for suficiente */
}

.button-theme:hover,
.add-to-cart-button:hover,
#confirmExtrasButton:hover,
#applyCouponButton:hover,
#checkoutButton:hover,
#submitOrderButton:hover {
    background-color: var(--theme-hover-color);
}

/* Radio buttons e Checkboxes (para Tailwind Forms, se usado, ou customização) */
.radio-theme-accent:checked {
  border-color: var(--theme-primary-color);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  background-color: var(--theme-primary-color); /* Cor de fundo quando marcado */
}
.form-checkbox.radio-theme-accent:checked { /* Para checkboxes no modal de adicionais */
    border-color: var(--theme-primary-color);
    background-color: var(--theme-primary-color);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

.radio-theme-accent:focus,
.form-checkbox.radio-theme-accent:focus {
  /* Anula o ring padrão do Tailwind Forms e usa um outline customizado */
  box-shadow: none; 
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: var(--theme-primary-color);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}


/* Ícone da moto na barra de tempo de entrega */
.fa-motorcycle { /* Pode ser mais específico se necessário */
    color: var(--theme-primary-color); /* Faz o ícone seguir o tema */
}