/* ===========================================================================
   ROCKET STROLLERS - DESIGN SYSTEM (loja)
   ===========================================================================
   Camada de modernizacao visual por cima do Bootstrap 3 / jQuery ja existente.
   NAO troca a engine (Bootstrap continua 3.4.1) - so' reestiliza os componentes
   padrao (botao, input, card/painel, tabela, alerta, badge, paginacao,
   dropdown, tabs, modal) pra um visual mais atual (estilo Stripe/Linear/
   Vercel), mantendo 100% da funcionalidade/JS que ja funciona.

   Ordem de carregamento esperada: depois de bootstrap.css e stylesheet.css,
   antes do fechamento de </head> - assim essas regras vencem por ordem de
   cascata sem precisar de !important em quase nada.
   =========================================================================== */

:root {
	/* Cores */
	--color-primary: #4F46E5;
	--color-primary-hover: #4338CA;
	--color-success: #22C55E;
	--color-danger: #EF4444;
	--color-warning: #F97316;
	--color-purple: #7C3AED;
	--color-bg: #F8FAFC;
	--color-card: #FFFFFF;
	--color-border: #E5E7EB;
	--color-text: #111827;
	--color-text-secondary: #6B7280;

	/* Tipografia */
	--font-family: 'Inter', sans-serif;
	--fs-title: 36px;
	--fw-title: 700;
	--fs-subtitle: 16px;
	--fw-subtitle: 500;
	--fs-text: 14px;
	--fw-text: 400;
	--fs-button: 14px;
	--fw-button: 600;

	/* Bordas */
	--radius: 12px;
	--radius-card: 16px;
	--radius-button: 12px;
	--radius-input: 12px;

	/* Sombra (bem leve, conforme identidade visual pedida) */
	--shadow-soft: 0 2px 10px rgba(0, 0, 0, .04);

	/* Transicao padrao */
	--transition: 0.2s ease;

	/* Espacamento em multiplos de 8px */
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 40px;
}

/* ===========================================================================
   BASE / TIPOGRAFIA
   =========================================================================== */
body,
input,
select,
textarea,
button {
	font-family: var(--font-family);
	color: var(--color-text);
}
body {
	background: var(--color-bg);
	font-size: var(--fs-text);
	font-weight: var(--fw-text);
}
h1, .h1 { font-size: var(--fs-title); font-weight: var(--fw-title); letter-spacing: -0.02em; }
h2, .h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
h3, .h3 { font-size: 22px; font-weight: 700; }
h4, .h4 { font-size: var(--fs-subtitle); font-weight: var(--fw-subtitle); }
p { color: var(--color-text); }
.text-muted, small, .small {
	color: var(--color-text-secondary) !important;
}
a {
	color: var(--color-primary);
	transition: color var(--transition);
}
a:hover, a:focus {
	color: var(--color-primary-hover);
}

/* ===========================================================================
   BOTOES
   =========================================================================== */
.btn {
	font-family: var(--font-family);
	font-size: var(--fs-button);
	font-weight: var(--fw-button);
	border-radius: var(--radius-button);
	padding: 10px 20px;
	border: 1.5px solid transparent;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
	box-shadow: none;
}
.btn:active {
	transform: translateY(1px);
}

/* Primary */
.btn-primary {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: #fff;
}

/* Secondary (equivalente ao btn-default do Bootstrap 3) */
.btn-default {
	background-color: #fff;
	border-color: var(--color-border);
	color: var(--color-text);
}
.btn-default:hover,
.btn-default:focus {
	background-color: #f3f4f6;
	border-color: #d1d5db;
	color: var(--color-text);
}

/* Outline (variante nova, disponivel via .btn-outline) */
.btn-outline {
	background-color: transparent;
	border-color: var(--color-primary);
	color: var(--color-primary);
}
.btn-outline:hover,
.btn-outline:focus {
	background-color: var(--color-primary);
	color: #fff;
}

/* Ghost (sem borda, so' texto + fundo leve no hover) */
.btn-ghost {
	background-color: transparent;
	border-color: transparent;
	color: var(--color-text);
}
.btn-ghost:hover,
.btn-ghost:focus {
	background-color: #f3f4f6;
	color: var(--color-text);
}

/* Danger */
.btn-danger {
	background-color: var(--color-danger);
	border-color: var(--color-danger);
	color: #fff;
}
.btn-danger:hover,
.btn-danger:focus {
	background-color: #dc2626;
	border-color: #dc2626;
	color: #fff;
}

/* Success (usado em confirmacoes/checkout) */
.btn-success {
	background-color: var(--color-success);
	border-color: var(--color-success);
	color: #fff;
}
.btn-success:hover,
.btn-success:focus {
	background-color: #16a34a;
	border-color: #16a34a;
	color: #fff;
}

.btn-lg { padding: 13px 26px; font-size: 15px; }
.btn-sm { padding: 6px 14px; font-size: 13px; border-radius: 9px; }
.btn-xs { padding: 3px 10px; font-size: 12px; border-radius: 8px; }

/* ===========================================================================
   INPUTS / FORMULARIOS
   =========================================================================== */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
select,
textarea {
	font-family: var(--font-family);
	font-size: var(--fs-text);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-input);
	padding: 10px 14px;
	color: var(--color-text);
	background-color: #fff;
	box-shadow: none;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
	color: #9ca3af;
}
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
	outline: none;
}
label {
	font-weight: 600;
	font-size: 13px;
	color: var(--color-text);
	margin-bottom: 6px;
}
.checkbox label, .radio label {
	font-weight: 400;
}

/* ===========================================================================
   CARDS (painel padrao do Bootstrap 3 vira "card" moderno)
   =========================================================================== */
.panel,
.card {
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-soft);
}
.panel-heading,
.card-header {
	background-color: transparent;
	border-bottom: 1px solid var(--color-border);
	border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
	font-weight: 700;
	padding: var(--space-2);
}
.panel-body,
.card-body {
	padding: var(--space-2);
}
.panel-footer,
.card-footer {
	background-color: transparent;
	border-top: 1px solid var(--color-border);
	padding: var(--space-2);
}

/* ===========================================================================
   TABELAS
   =========================================================================== */
.table {
	font-size: var(--fs-text);
	background-color: var(--color-card);
	border-radius: var(--radius);
	overflow: hidden;
}
.table > thead > tr > th {
	border-bottom: 1.5px solid var(--color-border);
	color: var(--color-text-secondary);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .02em;
	padding: 12px 16px;
}
.table > tbody > tr > td {
	border-top: 1px solid var(--color-border);
	padding: 14px 16px;
	vertical-align: middle;
}
.table > tbody > tr {
	transition: background-color var(--transition);
}
.table-hover > tbody > tr:hover,
.table > tbody > tr:hover {
	background-color: #f8fafc;
}
.table-responsive {
	border: none;
}

/* ===========================================================================
   ALERTAS
   =========================================================================== */
.alert {
	border: none;
	border-radius: var(--radius);
	padding: 14px 18px;
	font-size: var(--fs-text);
	border-left: 4px solid transparent;
}
.alert-success { background-color: #f0fdf4; color: #15803d; border-left-color: var(--color-success); }
.alert-danger { background-color: #fef2f2; color: #b91c1c; border-left-color: var(--color-danger); }
.alert-warning { background-color: #fff7ed; color: #c2410c; border-left-color: var(--color-warning); }
.alert-info { background-color: #eef2ff; color: #3730a3; border-left-color: var(--color-primary); }

/* ===========================================================================
   BADGES / LABELS
   =========================================================================== */
.label,
.badge {
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 11px;
	border-radius: 20px;
	padding: 4px 10px;
}
.label-success, .badge-success { background-color: #dcfce7; color: #15803d; }
.label-danger, .badge-danger { background-color: #fee2e2; color: #b91c1c; }
.label-warning, .badge-warning { background-color: #ffedd5; color: #c2410c; }
.label-primary, .badge-primary { background-color: #e0e7ff; color: #3730a3; }
.label-default, .badge-default { background-color: #f3f4f6; color: var(--color-text-secondary); }

/* ===========================================================================
   PAGINACAO
   =========================================================================== */
.pagination > li > a,
.pagination > li > span {
	border: 1.5px solid var(--color-border);
	color: var(--color-text);
	margin: 0 3px;
	border-radius: var(--radius) !important;
	font-weight: 600;
	transition: all var(--transition);
}
.pagination > li > a:hover {
	background-color: #f3f4f6;
	border-color: #d1d5db;
}
.pagination > .active > a,
.pagination > .active > span {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

/* ===========================================================================
   DROPDOWNS
   =========================================================================== */
.dropdown-menu {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
	padding: 6px;
}
.dropdown-menu > li > a {
	border-radius: 8px;
	padding: 9px 12px;
	font-size: var(--fs-text);
	transition: background-color var(--transition);
}
.dropdown-menu > li > a:hover {
	background-color: #f3f4f6;
	color: var(--color-text);
}

/* ===========================================================================
   TABS / ACCORDION (panel-group do Bootstrap 3)
   =========================================================================== */
.nav-tabs {
	border-bottom: 1.5px solid var(--color-border);
}
.nav-tabs > li > a {
	border: none;
	color: var(--color-text-secondary);
	font-weight: 600;
	border-radius: 0;
	margin-right: var(--space-2);
	padding: 10px 2px;
	transition: color var(--transition);
}
.nav-tabs > li > a:hover {
	background-color: transparent;
	border-color: transparent;
	color: var(--color-text);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	border: none;
	border-bottom: 2.5px solid var(--color-primary);
	color: var(--color-primary);
	background: transparent;
}
.panel-group .panel {
	border-radius: var(--radius);
	margin-bottom: var(--space-1);
}

/* ===========================================================================
   MODAIS
   =========================================================================== */
.modal-content {
	border: none;
	border-radius: var(--radius-card);
	box-shadow: 0 16px 48px rgba(0, 0, 0, .18);
}
.modal-header {
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-2);
}
.modal-body {
	padding: var(--space-2);
}
.modal-footer {
	border-top: 1px solid var(--color-border);
	padding: var(--space-2);
}

/* ===========================================================================
   BREADCRUMB
   =========================================================================== */
.breadcrumb {
	background: transparent;
	padding: var(--space-2) 0;
	font-size: 13px;
	color: var(--color-text-secondary);
}
.breadcrumb > li + li:before {
	color: #d1d5db;
}

/* ===========================================================================
   PRODUTO - CARD (reskin do .product-thumb/.thumbnail atual, sem mudar markup)
   Fase seguinte trocara' o HTML pra incluir favoritos/comparar/avaliacao junto.
   =========================================================================== */
.product-thumb,
.thumbnail {
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-soft);
	transition: transform var(--transition), box-shadow var(--transition);
	overflow: hidden;
}
.product-thumb:hover,
.thumbnail:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}
.product-thumb .price,
.thumbnail .price {
	font-weight: 700;
	color: var(--color-text);
}
.product-thumb .price-old,
.thumbnail .price-old {
	color: var(--color-text-secondary);
	text-decoration: line-through;
}
.product-thumb .price-new,
.thumbnail .price-new {
	color: var(--color-danger);
}