/* ============================================
ORDER FORM RESTYLE — Invitación Inteligente
Agrega este link en el de order-form.php:
Y cambia las fonts en el :
============================================ */
/* ===== GLOBAL OVERRIDES ===== */
:root {
--primary-color: #c9a96e !important;
--secondary-color: #2d2926 !important;
--success-color: #7d8471 !important;
--light-bg: #faf6f0 !important;
}
body {
font-family: 'DM Sans', sans-serif !important;
background: #faf6f0 !important;
color: #2d2926 !important;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Cormorant Garamond', serif !important;
}
/* ===== NAVBAR ===== */
.navbar {
background: rgba(250, 246, 240, 0.95) !important;
backdrop-filter: blur(20px) !important;
border-bottom: 1px solid rgba(201, 169, 110, 0.15) !important;
box-shadow: none !important;
}
.navbar-brand {
font-family: 'Cormorant Garamond', serif !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
color: #2d2926 !important;
}
/* ===== PROGRESS BAR ===== */
.progress-container {
background: white !important;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04) !important;
border-bottom: 1px solid rgba(201, 169, 110, 0.1) !important;
}
.progress-step-circle {
border-color: rgba(201, 169, 110, 0.3) !important;
color: #6b6462 !important;
font-family: 'Cormorant Garamond', serif !important;
font-weight: 700 !important;
transition: all 0.3s !important;
}
.progress-step.active .progress-step-circle,
.progress-step.completed .progress-step-circle {
background: #c9a96e !important;
border-color: #c9a96e !important;
color: white !important;
box-shadow: 0 4px 15px rgba(201, 169, 110, 0.3) !important;
}
.progress-step-label {
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.03em !important;
color: #6b6462 !important;
}
.progress-step.active .progress-step-label {
color: #c9a96e !important;
}
.progress-line-fill {
background: linear-gradient(90deg, #c9a96e, #e8d5b0) !important;
}
/* ===== FORM CONTAINER ===== */
.form-container {
background: white !important;
border-radius: 24px !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04) !important;
border: 1px solid rgba(201, 169, 110, 0.08) !important;
padding: 40px !important;
}
/* ===== STEP HEADERS ===== */
.step-header h2 {
font-size: 1.6rem !important;
font-weight: 700 !important;
color: #2d2926 !important;
}
.step-header p {
color: #6b6462 !important;
font-size: 0.92rem !important;
}
/* ===== CATEGORY CARDS ===== */
.category-card {
background: #faf6f0 !important;
border: 1px solid rgba(201, 169, 110, 0.12) !important;
border-radius: 20px !important;
transition: all 0.3s !important;
}
.category-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06) !important;
border-color: rgba(201, 169, 110, 0.3) !important;
}
.category-card.selected {
border-color: #c9a96e !important;
background: rgba(201, 169, 110, 0.06) !important;
box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15) !important;
}
.category-icon {
background: linear-gradient(135deg, rgba(201, 169, 110, 0.15), rgba(232, 196, 196, 0.15)) !important;
color: #c9a96e !important;
}
.category-name {
font-family: 'Cormorant Garamond', serif !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
}
/* ===== TEMPLATE CARDS ===== */
.template-card {
border-radius: 20px !important;
border: 1px solid rgba(201, 169, 110, 0.1) !important;
overflow: hidden !important;
transition: all 0.3s !important;
}
.template-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
}
.template-card.selected {
border-color: #c9a96e !important;
box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15) !important;
}
.template-badge,
.template-price {
background: #c9a96e !important;
color: white !important;
border-radius: 50px !important;
font-weight: 700 !important;
}
/* ===== FORM CONTROLS ===== */
.form-control,
.form-select {
border: 1px solid rgba(201, 169, 110, 0.2) !important;
border-radius: 14px !important;
padding: 14px 18px !important;
font-size: 0.92rem !important;
background: white !important;
transition: all 0.3s !important;
}
.form-control:focus,
.form-select:focus {
border-color: #c9a96e !important;
box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.1) !important;
}
.form-label {
font-size: 0.85rem !important;
font-weight: 600 !important;
color: #2d2926 !important;
margin-bottom: 6px !important;
}
.form-check-input:checked {
background-color: #c9a96e !important;
border-color: #c9a96e !important;
}
/* ===== BUTTONS ===== */
.btn-primary-custom,
.btn-navigation {
background: #c9a96e !important;
border: none !important;
color: white !important;
border-radius: 50px !important;
padding: 14px 32px !important;
font-weight: 600 !important;
font-size: 0.9rem !important;
letter-spacing: 0.03em !important;
transition: all 0.3s !important;
}
.btn-primary-custom:hover,
.btn-navigation:hover {
background: #a68744 !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 25px rgba(201, 169, 110, 0.3) !important;
color: white !important;
}
.btn-secondary-custom {
background: transparent !important;
border: 1.5px solid #2d2926 !important;
color: #2d2926 !important;
border-radius: 50px !important;
padding: 14px 32px !important;
font-weight: 600 !important;
font-size: 0.9rem !important;
transition: all 0.3s !important;
}
.btn-secondary-custom:hover {
background: #2d2926 !important;
color: white !important;
}
/* ===== FILE UPLOAD ===== */
.file-upload-area {
border: 2px dashed rgba(201, 169, 110, 0.3) !important;
border-radius: 20px !important;
background: rgba(201, 169, 110, 0.04) !important;
transition: all 0.3s !important;
}
.file-upload-area:hover,
.file-upload-area.dragover {
border-color: #c9a96e !important;
background: rgba(201, 169, 110, 0.08) !important;
}
/* ===== COLOR PICKER ===== */
.color-picker-group {
background: #faf6f0 !important;
border-radius: 16px !important;
border: 1px solid rgba(201, 169, 110, 0.12) !important;
}
/* ===== ALERTS ===== */
.alert-custom {
border-left-color: #c9a96e !important;
background: rgba(201, 169, 110, 0.06) !important;
border-radius: 14px !important;
font-size: 0.88rem !important;
}
/* ===== SUMMARY (Step 7) ===== */
.summary-section {
background: #faf6f0 !important;
border-radius: 16px !important;
border: 1px solid rgba(201, 169, 110, 0.1) !important;
}
.summary-total {
background: linear-gradient(135deg, #c9a96e, #e8d5b0) !important;
color: white !important;
border-radius: 16px !important;
}
/* ===== CHECKBOX SWITCHES ===== */
.feature-toggle {
border-radius: 14px !important;
border: 1px solid rgba(201, 169, 110, 0.1) !important;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.form-container {
padding: 24px 20px !important;
border-radius: 18px !important;
}
.step-header h2 {
font-size: 1.3rem !important;
}
}