/*
Theme Name: The Heating Experts
Theme URI: https://crismamon.com/
Author: Cris Mamon
Description: Custom WordPress theme with dynamic ACF Q&A multi-step quote wizard and Foundation CSS.
Version: 1.0.0
Text Domain: the-heating-experts
*/

/* Core Block & Container Mechanics */
.q-and-a-wizard-block {
  background-color: #033F97;
  padding: 2.5rem 1rem !important;
  width: 100%;
}

/* Force edge-to-edge full width breakout */
.q-and-a-wizard-block.grid-container.full {
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}

/* Core Step Mechanics */
.wizard-step,
.form-step {
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

.wizard-step.is-active,
.form-step.is-active {
  display: block;
  opacity: 1;
}

.wizard-step .question-title {
    color: #033F97;
    text-align: center;
    padding: 0 15px;
    margin: 10px auto 0;
}

/* Option & Answer Card Styling */
.options-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.answer-card,
.option-card {
  display: block;
  cursor: pointer;
  background-color: #ffffff;
  border: 2px solid transparent;
  transition: all 0.2s ease-in-out;
  margin-bottom: 0;
  height: 100%;
	padding: 3px;
}

.answer-card:hover,
.option-card:hover {
  background-color: #f4f6f9;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Active / Checked Card State */

.answer-label {
    display: block;
    font-size: 19px;
    word-break: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    width: 100%;
    max-width: 165px;
    line-height: 23px;
    text-align: left;
    margin: 5px;
}

/* Container Circle for the Answer Icon */
.answer-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
	margin: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

/* Icon Sizing inside Circle */
.answer-icon-wrapper img,
.answer-icon-wrapper svg {
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
  display: block;
}

/* Type 1: Red Circle Background (#CB1518) */
.cell.type-1 .answer-card .answer-icon-wrapper {
  background-color: #CB1518;
}

/* Type 2: Blue Circle Background (#033F97) */
.cell.type-2 .answer-card .answer-icon-wrapper {
  background-color: #033F97;
}

/* Input Overrides */
.option-card input[type="radio"],
.option-card input[type="checkbox"] {
  margin-bottom: 0;
}

.input-error {
  border-color: #cc4b37 !important;
  background-color: #fef4f3 !important;
}
.answer-card {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    align-items: center;
}

.answers-grid {
    width: 100%;
    margin: 0;
    padding: 0 15px;
}

.option-wrapper {
	border-radius: 8px;	
}

.option-wrapper.type-1 .answer-card {
    border: 2px solid #CB1518;  
	border-radius: 8px;	
	background-color: #CB1518;
}

.option-wrapper.type-2  .answer-card {
    border: 2px solid #033F97;  
	border-radius: 10px;
}

.option-wrapper.type-2 .answer-label {
    color: #033F97;    
}

.option-wrapper.type-1 .answer-label {
    color: white;    
}

.wizard-steps-wrapper {
    width: 100%;
    max-width: 710px;
    margin: auto;
    background-color: white;
    padding: 0;
    border-radius: 15px;
}

.option-wrapper.type-4, .option-wrapper.type-3 {
    width: calc(100% - 1.875rem);
}

.option-wrapper.type-4 .answer-card, .option-wrapper.type-3 .answer-card {
    max-width: 100%;
    background-color: #CB1518;
    margin: auto;
    color: white;
    border-radius: 10px;
}

.option-wrapper.type-4 .answer-icon-wrapper img, .option-wrapper.type-4 .answer-icon-wrapper svg,
.option-wrapper.type-3 .answer-icon-wrapper img, .option-wrapper.type-3 .answer-icon-wrapper svg {
	max-width: 70px;
    max-height: 70px;
}

.card {
	border: 0;
}

.option-wrapper.type-4 .answer-card, .option-wrapper.type-3 .answer-card {
	justify-content: center;
}

.question-tagline {
    background-color: #CB1518;
    color: white;
    font-size: 21px;
    padding: 15px;
    border-radius: 15px 15px 0 0;
}

.option-wrapper.type-4 .answer-label {
	max-width: 200px;
}

.option-wrapper.type-3 .answer-label {
	max-width: 238px;
}

.wizard-footer {
    background-color: #F8F8F8;
    border-radius: 0 0 15px 15px;
    padding: 10px 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.w-divider {
    border-right: 1px solid #B9B8B8;
	padding-right: 12px;
}

.wizard-time-estimate {
    color: #033F97;
    margin-bottom: 10px;
}

.wizard-time-estimate .dashicons {
	width: 30px;
	height: 30px;
	vertical-align: middle;
	font-size: 30px;
	margin-top: -5px;
}

.wizard-prev-btn {
    margin: 0 0 0 20px;
    display: flex;
    align-items: center;
    font-size: 16px !important;
    color: #033F97 !important;
}

.dashicons-arrow-left-alt2 {
	width: 30px;
    height: 30px;
    font-size: 30px;
}

/* Base styling & smooth transition setup */
.wizard-nav-actions .wizard-prev-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.4, 1), 
                box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.4, 1), 
                color 0.2s ease, 
                background-color 0.2s ease;
    will-change: transform;
    cursor: pointer;
}

/* Hover effect: Move slightly upward (-3px) */
.wizard-nav-actions .wizard-prev-btn:hover,
.wizard-nav-actions .wizard-prev-btn:focus {
    transform: translateY(-3px);
    text-decoration: none;
}

/* Active click effect: Slightly compress down */
.wizard-nav-actions .wizard-prev-btn:active {
    transform: translateY(-1px);
}

/* Ensure Dashicon alignment inside button */
.wizard-nav-actions .wizard-prev-btn .dashicons {
    transition: transform 0.2s ease;
}

/* Optional sub-animation: Nudge arrow left on hover */
.wizard-nav-actions .wizard-prev-btn:hover .dashicons {
    transform: translateX(-2px);
}