:root {
   --bg-light: #f6f6f6;
   --beige: #c3aba1;
   --beige-light: #c9bdb2;
   --gray: #cbc9c9;
   --blue: #5ea6d0;

   --theme-primary: #F3684B;
   --theme-secondary: #A7A991;
   --theme-primary-rgb: rgb(243, 104, 75);
   --theme-secondary-rgb: rgb(167, 169, 145);
   --theme-primary-text-emphasis: #F3684B;
}

body {
   font-family: 'Poppins', sans-serif;
   color: #333;
   background-color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   color: var(--theme-secondary);
}

.navbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 6em;
   z-index: 1030;
   background-color: transparent !important;
   transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar.scrolled {
   background-color: white !important;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.navbar-brand {
   font-weight: 600;
   color: var(--theme-secondary) !important;
}

.nav-link {
   color: var(--theme-primary) !important;
   font-weight: 500;
}

.navbar-toggler {
   border: none;
   background-color: transparent;
   padding: 0.5rem;
   transition: background-color 0.3s ease;
}

.navbar-collapse.show {
   background-color: #fff;
   padding: 1rem;
   border-radius: 0 0 8px 8px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.text-theme-primary {
   color: var(--theme-secondary) !important;
   text-transform: uppercase;
}

.text-theme-secondary {
   color: var(--theme-primary) !important;
   text-transform: uppercase;
}

.brand-text {
   font-size: 1.2rem;
}

@media (max-width: 575.98px) {
   .brand-text {
      font-size: 1rem;
   }

   .navbar-brand {
      font-size: 0.9rem;
   }
}

.hero-section {
   background-color: var(--bg-light);
   padding: 0;
   overflow: hidden;
}

.hero-content {
   padding: 4rem 2rem;
}

.hero-title {
   font-size: 2.5rem;
   color: var(--theme-primary);
   text-transform: uppercase;
   line-height: 1.2;
}

.hero-text {
   color: var(--theme-secondary);
   margin: 1.5rem 0;
}

.btn-primary {
   background-color: var(--theme-primary);
   border-color: var(--theme-primary);
   border-radius: 4px;
   padding: 0.5rem 1.5rem;
   font-weight: 500;
}

.btn-primary:hover {
   background-color: #c95f45;
   border-color: #c95f45;
}

.btn-secondary {
   background-color: var(--theme-secondary);
   border-color: var(--theme-secondary);
   border-radius: 4px;
   padding: 0.5rem 1.5rem;
   font-weight: 500;
}

.btn-secondary:hover {
   background-color: #c95f45;
   border-color: #c95f45;
}

.section-title {
   font-weight: 600;
   color: var(--theme-primary);
   margin-bottom: 2rem;
   text-transform: uppercase;
}

.about-section {
   padding: 5rem 0;
   background-color: white;
}

.about-image {
   border-radius: 5px;
   max-width: 100%;
   height: auto;
}

.subtitle {
   color: var(--theme-secondary);
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.services-section {
   background-color: var(--bg-light);
   padding: 5rem 0;
}

.service-card {
   background-color: white;
   border-radius: 8px;
   padding: 2rem;
   text-align: center;
   height: 100%;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   transition: transform 0.3s ease;
}

.service-card:hover {
   transform: translateY(-5px);
}

.service-icon {
   width: 60px;
   height: 60px;
   margin-bottom: 1.5rem;
}

.map-section {
   padding: 5rem 0;
}

#map {
   height: 400px;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.testimonial-section {
   background-color: var(--bg-light);
   padding: 5rem 0;
}

.testimonial-card {
   background-color: white;
   border-radius: 8px;
   padding: 2rem;
   height: 100%;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.testimonial-text {
   font-style: italic;
   margin-bottom: 1.5rem;
}

.stars {
   color: #FFD700;
   margin-bottom: 1rem;
}

.contact-section {
   padding: 5rem 0;
   background-color: var(--theme-primary);
}

.checkout-section {
   padding: 5rem 0;
   background-color: var(--theme-primary);
}

.form-control {
   padding: 0.75rem;
   margin-bottom: 1rem;
   border: 1px solid #dee2e6;
   border-radius: 4px;
}

/* Adicionando estilos para o formulário de agendamento de dois passos */
.multi-step-form .step {
   display: none;
}

.multi-step-form .step.active {
   display: block;
}

.calendar-container {
   background-color: white;
   border-radius: 8px;
   padding: 1.5rem;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   margin-bottom: 2rem;
}

.calendar {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 1.5rem;
}

.calendar th {
   padding: 0.75rem;
   text-align: center;
   font-weight: 500;
   color: var(--theme-secondary);
}

.calendar td {
   padding: 0.75rem;
   text-align: center;
   border: 1px solid #f0f0f0;
   cursor: pointer;
   transition: background-color 0.2s;
}

.calendar td:hover:not(.disabled) {
   background-color: #f8f8f8;
}

.calendar td.selected {
   background-color: var(--theme-primary);
   color: white;
}

.calendar td.disabled {
   color: #ccc;
   cursor: not-allowed;
}

.calendar td.today {
   font-weight: bold;
   border: 2px solid var(--theme-primary);
}

.time-slots {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-bottom: 1.5rem;
}

.time-slot {
   padding: 0.5rem 1rem;
   border: 1px solid #ddd;
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s;
}

.time-slot:hover:not(.disabled) {
   border-color: var(--theme-primary);
}

.time-slot.selected {
   background-color: var(--theme-primary);
   color: white;
   border-color: var(--theme-primary);
}

.time-slot.disabled {
   color: #ccc;
   cursor: not-allowed;
}

.professional-card {
   background-color: white;
   border-radius: 8px;
   padding: 1.5rem;
   margin-bottom: 1.5rem;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.professional-title {
   font-size: 1.1rem;
   font-weight: 600;
   color: var(--theme-primary);
   margin-bottom: 1rem;
}

.professional-info {
   margin-bottom: 0.5rem;
   color: var(--theme-secondary);
}

.professional-info strong {
   font-weight: 600;
}

.date-display {
   font-size: 1.1rem;
   color: var(--theme-primary);
   font-weight: 500;
   margin-bottom: 1rem;
}

.footer {
   background-color: var(--bg-light);
   padding: 3rem 0;
}

.footer-icon {
   font-size: 1.5rem;
   color: var(--theme-primary);
   margin-bottom: 1rem;
}

.footer-title {
   font-size: 1rem;
   font-weight: 600;
   color: var(--theme-primary);
   margin-bottom: 0.5rem;
}

.copyright {
   background-color: var(--bg-light);
   padding: 1rem 0;
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   font-size: 0.9rem;
   color: var(--theme-secondary);
}

/* Estilos para o passo 3 - Pagamento */
.summary-card {
   background-color: white;
   border-radius: 8px;
   padding: 1.5rem;
   margin-bottom: 1.5rem;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.summary-row {
   display: flex;
   justify-content: space-between;
   padding-bottom: 1rem;
   border-bottom: 1px solid #f0f0f0;
   margin-bottom: 1rem;
}

.summary-total {
   display: flex;
   justify-content: space-between;
   font-weight: 600;
   color: var(--theme-secondary);
   margin-top: 1rem;
   font-size: 1.2rem;
}

.payment-method-card {
   background-color: #f9f9f9;
   border: 1px solid #e5e5e5;
   border-radius: 8px;
   padding: 1rem;
   margin-bottom: 1rem;
   cursor: pointer;
   transition: all 0.3s ease;
}

.payment-method-card:hover {
   background-color: #f0f0f0;
}

.payment-method-card.selected {
   border-color: var(--theme-primary);
   box-shadow: 0 0 0 1px var(--theme-primary);
}

.payment-method-card-inner {
   display: flex;
   align-items: center;
}

.payment-method-card-inner input[type="radio"] {
   margin-right: 1rem;
   accent-color: var(--theme-primary);
}

.payment-method-icon {
   margin-left: auto;
   height: 30px;
}

.payment-details {
   margin-top: 1.5rem;
}

.security-icons {
   display: flex;
   justify-content: center;
   margin-top: 3.5rem;
   color: var(--bg-light);
}

.security-icon {
   display: flex;
   align-items: center;
   font-size: 0.9rem;
}

.security-icon i {
   margin: 0.5rem;
   font-size: 1.1rem;
}

.hero-section {
   position: relative;
   padding-top: 18rem;
   padding-bottom: 8rem;
   background-color: #fff;
   overflow: hidden;
}

.hero-bg-image {
   position: absolute;
   top: 0;
   right: 0;
   height: 100%;
   z-index: 1;
   object-fit: contain;
   pointer-events: none;
   transition: clip-path 0.3s ease, opacity 0.3s ease;
   clip-path: inset(0 0 0 0);
}

@media (max-width: 992px) {
   .hero-bg-image {
      clip-path: inset(0 0 0 20%);
   }
}

@media (max-width: 767.98px) {
   .hero-bg-image {
      clip-path: inset(0 0 0 40%);
   }
}

@media (max-width: 575.98px) {
   .hero-section {
      padding-top: 12rem;
   }

   .hero-bg-image {
      transform: translateX(7%);
   }
}

/* Estilos para modal PIX */
.modal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 1000;
   overflow: auto;
   backdrop-filter: blur(4px);
}

.modal.show {
   display: block;
}

.modal-content {
   background-color: white;
   margin: 10% auto;
   padding: 2rem;
   width: 90%;
   max-width: 500px;
   border-radius: 8px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.modal-header {
   text-align: center;
   margin-bottom: 1.5rem;
}

.modal-header h3 {
   font-size: 1.2rem;
   color: var(--theme-primary);
   font-weight: 600;
}

.qrcode-container {
   text-align: center;
   margin-bottom: 1.5rem;
}

.qrcode-img {
   max-width: 200px;
   margin: 0 auto;
}

.qrcode-text {
   width: 100%;
   padding: 0.75rem;
   border: 1px solid #e5e5e5;
   border-radius: 4px;
   margin-top: 1rem;
   text-align: center;
   font-size: 0.9rem;
   color: #666;
}

.qrcode-copied {
   color: #22c55e;
   margin-top: 0.5rem;
   display: none;
   text-align: center;
   font-size: 0.9rem;
}

.modal-footer {
   display: flex;
   justify-content: flex-end;
   gap: 1rem;
   margin-top: 1.5rem;
}

.btn-outline {
   background-color: white;
   color: var(--theme-secondary);
   border: 1px solid #e5e5e5;
   padding: 0.5rem 1rem;
   border-radius: 4px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s ease;
}

.btn-outline:hover {
   background-color: #f9f9f9;
}

.loading-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.7);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 9999;
}

.time-slot-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: flex-start;
   margin-top: 15px;
}

.time-slot {
   background-color: #fff;
   border: 1px solid var(--theme-primary);
   border-radius: 5px;
   padding: 10px 20px;
   cursor: pointer;
   font-weight: 500;
   transition: background-color 0.2s ease;
}

.time-slot:hover {
   background-color: var(--theme-primary);
   color: white;
}

.time-slot.selected {
   background-color: var(--theme-primary);
   color: white;
   border-color: var(--theme-primary);
}