/* ==========================================================================
   APAKONICS — Quote Wizard & Consultation Stylesheet (Phase 8)
   Depends on app.css tokens. Loaded on /get-quote and /book-consultation.
   ========================================================================== */

/* ==========================================================================
   WIZARD PROGRESS STEPS
   ========================================================================== */

.apk-wizard-steps {
    display: flex;
    align-items: stretch;
    gap: var(--apk-space-2);
    margin-bottom: var(--apk-space-6);
    overflow-x: auto;
    padding-bottom: 4px;
}
.apk-wizard-steps__item {
    flex: 1;
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: var(--apk-space-3);
    padding: var(--apk-space-3) var(--apk-space-4);
    background: var(--apk-white);
    border: 1.5px solid var(--apk-gray-200);
    border-radius: var(--apk-radius-md);
    text-decoration: none;
    color: inherit;
    transition: all var(--apk-duration-fast);
    position: relative;
}
.apk-wizard-steps__item[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}
.apk-wizard-steps__item.is-complete {
    border-color: #10b981;
    background: #f0fdf4;
}
.apk-wizard-steps__item.is-current {
    border-color: var(--apk-primary);
    background: var(--apk-white);
    box-shadow: 0 4px 16px rgba(254,0,0,.12);
}
a.apk-wizard-steps__item:hover:not(.is-current) {
    border-color: var(--apk-primary);
    transform: translateY(-1px);
}
.apk-wizard-steps__dot {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--apk-gray-100);
    color: var(--apk-gray-500);
    font-size: 14px;
}
.apk-wizard-steps__item.is-complete .apk-wizard-steps__dot {
    background: #10b981;
    color: var(--apk-white);
}
.apk-wizard-steps__item.is-current .apk-wizard-steps__dot {
    background: var(--apk-primary);
    color: var(--apk-white);
}
.apk-wizard-steps__label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.apk-wizard-steps__label small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--apk-gray-500);
}
.apk-wizard-steps__label strong {
    font-size: var(--apk-text-sm);
    color: var(--apk-gray-900);
    font-weight: 600;
}
.apk-wizard-steps__item.is-current .apk-wizard-steps__label strong {
    color: var(--apk-primary);
}

/* ==========================================================================
   WIZARD LAYOUT: form + live estimate sidebar
   ========================================================================== */

.apk-wizard-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--apk-space-8);
    align-items: start;
}
@media (max-width: 1023px) {
    .apk-wizard-layout { grid-template-columns: 1fr; }
}
.apk-wizard-form {
    background: var(--apk-white);
    border-radius: var(--apk-radius-lg);
    padding: var(--apk-space-8);
    box-shadow: var(--apk-shadow-sm);
}
@media (max-width: 639px) {
    .apk-wizard-form { padding: var(--apk-space-5); }
}
.apk-wizard-title {
    font-family: var(--apk-font-body);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--apk-gray-900);
    letter-spacing: 0;
    margin-bottom: 6px;
}
.apk-wizard-subtitle {
    color: var(--apk-gray-600);
    margin: 0;
}

/* ==========================================================================
   TYPE PICKER (radio cards) — single-select variant
   ========================================================================== */

.apk-type-picker {
    display: grid;
    gap: var(--apk-space-3);
}
.apk-type-picker--3col { grid-template-columns: repeat(3, 1fr); }
.apk-type-picker--4col { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 767px) {
    .apk-type-picker--4col { grid-template-columns: repeat(2, 1fr); }
    .apk-type-picker--3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
    .apk-type-picker--4col, .apk-type-picker--3col { grid-template-columns: 1fr; }
}

.apk-type-picker__opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: var(--apk-space-4);
    background: var(--apk-white);
    border: 2px solid var(--apk-gray-200);
    border-radius: var(--apk-radius-md);
    cursor: pointer;
    text-align: left;
    transition: all var(--apk-duration-fast);
}
.apk-type-picker__opt:hover {
    border-color: var(--apk-primary);
    background: var(--apk-primary-50);
}
.apk-type-picker__opt.is-selected {
    border-color: var(--apk-primary);
    background: var(--apk-primary-50);
    box-shadow: 0 4px 14px rgba(254,0,0,.15);
}
.apk-type-picker__opt.is-selected::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px; height: 22px;
    background: var(--apk-primary);
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'><path d='M7.629 14.566L3.565 10.5l1.059-1.06 3.005 3.006 7.005-7.004 1.059 1.06z'/></svg>");
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: center;
}
.apk-type-picker__opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.apk-type-picker__opt i {
    font-size: var(--apk-text-xl);
    color: var(--apk-primary);
    margin-bottom: 4px;
}
.apk-type-picker__opt strong {
    font-size: var(--apk-text-sm);
    color: var(--apk-gray-900);
    font-weight: 700;
}
.apk-type-picker__opt small {
    font-size: var(--apk-text-xs);
    color: var(--apk-gray-500);
    line-height: 1.4;
}

/* ==========================================================================
   FEATURE PICKER (checkbox chips) — multi-select variant
   ========================================================================== */

.apk-feature-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--apk-space-2);
}
@media (max-width: 767px) {
    .apk-feature-picker { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
    .apk-feature-picker { grid-template-columns: 1fr; }
}

.apk-feature-picker__opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--apk-space-3);
    padding: var(--apk-space-3) var(--apk-space-4);
    background: var(--apk-white);
    border: 2px solid var(--apk-gray-200);
    border-radius: var(--apk-radius-md);
    cursor: pointer;
    transition: all var(--apk-duration-fast);
}
.apk-feature-picker__opt:hover {
    border-color: var(--apk-primary);
}
.apk-feature-picker__opt.is-selected {
    border-color: var(--apk-primary);
    background: var(--apk-primary-50);
}
.apk-feature-picker__opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.apk-feature-picker__opt i {
    color: var(--apk-gray-400);
    font-size: var(--apk-text-base);
    width: 20px;
    text-align: center;
    transition: color var(--apk-duration-fast);
}
.apk-feature-picker__opt.is-selected i {
    color: var(--apk-primary);
}
.apk-feature-picker__opt span {
    font-size: var(--apk-text-sm);
    color: var(--apk-gray-800);
    font-weight: 500;
}

/* ==========================================================================
   FORM INPUT-GROUP SUFFIX (for "m²" on area input)
   ========================================================================== */

.apk-input-group__suffix {
    display: grid;
    place-items: center;
    padding: 0 var(--apk-space-3);
    background: var(--apk-gray-100);
    border: 1.5px solid var(--apk-gray-200);
    border-left: 0;
    border-radius: 0 var(--apk-radius-sm) var(--apk-radius-sm) 0;
    color: var(--apk-gray-700);
    font-weight: 600;
    font-size: var(--apk-text-sm);
}

/* ==========================================================================
   WIZARD ACTIONS (next/back buttons)
   ========================================================================== */

.apk-wizard-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--apk-space-4);
    margin-top: var(--apk-space-6);
    padding-top: var(--apk-space-5);
    border-top: 1px solid var(--apk-gray-200);
}

/* ==========================================================================
   REVIEW STEP
   ========================================================================== */

.apk-review {
    display: flex;
    flex-direction: column;
    gap: var(--apk-space-4);
    margin-bottom: var(--apk-space-6);
}
.apk-review__section {
    background: var(--apk-gray-50);
    border-radius: var(--apk-radius-md);
    padding: var(--apk-space-5);
}
.apk-review__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--apk-space-3);
    margin-bottom: var(--apk-space-3);
}
.apk-review__head h3 {
    font-family: var(--apk-font-body);
    font-size: var(--apk-text-base);
    font-weight: 700;
    color: var(--apk-gray-900);
    letter-spacing: 0;
    margin: 0;
}
.apk-review__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--apk-space-3);
    margin: 0;
}
.apk-review__list > div {
    background: var(--apk-white);
    padding: var(--apk-space-3);
    border-radius: var(--apk-radius-sm);
}
.apk-review__list dt {
    font-size: var(--apk-text-xs);
    color: var(--apk-gray-500);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
}
.apk-review__list dd {
    font-size: var(--apk-text-sm);
    color: var(--apk-gray-900);
    font-weight: 600;
    margin: 0;
}
.apk-review__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--apk-space-2);
    margin-top: var(--apk-space-2);
}

/* ==========================================================================
   LIVE ESTIMATE SIDEBAR
   ========================================================================== */

.apk-wizard-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--apk-space-4);
    position: sticky;
    top: calc(var(--apk-space-5) + 80px);
}
@media (max-width: 1023px) {
    .apk-wizard-sidebar { position: static; }
}

.apk-estimate-card {
    background: var(--apk-white);
    border-radius: var(--apk-radius-lg);
    overflow: hidden;
    box-shadow: var(--apk-shadow-md);
    border-top: 4px solid var(--apk-primary);
}
.apk-estimate-card__head {
    display: flex;
    align-items: center;
    gap: var(--apk-space-3);
    padding: var(--apk-space-4) var(--apk-space-5);
    background: var(--apk-secondary);
    color: var(--apk-white);
}
.apk-estimate-card__head i {
    color: var(--apk-primary);
    font-size: var(--apk-text-lg);
}
.apk-estimate-card__head span {
    font-family: var(--apk-font-display);
    font-size: var(--apk-text-base);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.apk-estimate-card__body {
    padding: var(--apk-space-5);
    background: linear-gradient(135deg, #fff8f8 0%, #ffffff 100%);
    border-bottom: 1px solid var(--apk-gray-200);
}
.apk-estimate-card__body--pending {
    background: var(--apk-gray-50);
}
.apk-estimate-card__range small {
    display: block;
    font-size: var(--apk-text-xs);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--apk-gray-500);
    margin-bottom: var(--apk-space-2);
}
.apk-estimate-card__range strong {
    display: block;
    font-family: var(--apk-font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--apk-primary);
    letter-spacing: 0;
    line-height: 1.1;
    word-break: break-word;
}
.apk-estimate-card__dash {
    color: var(--apk-gray-400);
    margin: 0 4px;
}
.apk-estimate-card__hint {
    display: flex;
    gap: var(--apk-space-2);
    margin-top: var(--apk-space-3);
    padding-top: var(--apk-space-3);
    border-top: 1px dashed var(--apk-gray-300);
    font-size: var(--apk-text-xs);
    color: var(--apk-gray-600);
    line-height: 1.5;
}
.apk-estimate-card__hint i {
    color: var(--apk-primary);
    flex-shrink: 0;
    margin-top: 2px;
}
.apk-estimate-card__placeholder {
    text-align: center;
    padding: var(--apk-space-5);
    color: var(--apk-gray-500);
}
.apk-estimate-card__placeholder i {
    font-size: 32px;
    color: var(--apk-gray-300);
    margin-bottom: var(--apk-space-2);
    display: block;
}
.apk-estimate-card__placeholder p {
    font-size: var(--apk-text-sm);
    margin: 0;
}

.apk-estimate-card__footer {
    padding: var(--apk-space-4) var(--apk-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--apk-space-3);
}
.apk-estimate-card__trust {
    display: flex;
    align-items: flex-start;
    gap: var(--apk-space-3);
    font-size: var(--apk-text-sm);
}
.apk-estimate-card__trust > i {
    width: 32px; height: 32px;
    background: var(--apk-primary-50);
    color: var(--apk-primary);
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 12px;
}
.apk-estimate-card__trust strong {
    display: block;
    font-size: var(--apk-text-sm);
    color: var(--apk-gray-900);
}
.apk-estimate-card__trust small {
    display: block;
    font-size: var(--apk-text-xs);
    color: var(--apk-gray-600);
    line-height: 1.5;
}

/* ==========================================================================
   SUCCESS PAGES
   ========================================================================== */

.apk-success-card {
    background: var(--apk-white);
    border-radius: var(--apk-radius-lg);
    padding: var(--apk-space-10) var(--apk-space-6);
    box-shadow: var(--apk-shadow-md);
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.apk-success-card__icon {
    width: 80px; height: 80px;
    margin: 0 auto var(--apk-space-5);
    background: linear-gradient(135deg, #10b981, #059669);
    color: var(--apk-white);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 36px;
    box-shadow: 0 12px 32px rgba(16,185,129,.3);
}
.apk-success-card h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: var(--apk-space-3);
    line-height: 1.2;
}
.apk-success-card p {
    color: var(--apk-gray-600);
    font-size: var(--apk-text-base);
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto var(--apk-space-6);
}
.apk-success-card__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--apk-space-3);
    margin: var(--apk-space-6) 0;
    padding: var(--apk-space-5);
    background: var(--apk-gray-50);
    border-radius: var(--apk-radius-md);
}
.apk-success-card__meta > div {
    text-align: center;
}
.apk-success-card__meta small {
    display: block;
    font-size: var(--apk-text-xs);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--apk-gray-500);
    margin-bottom: 4px;
}
.apk-success-card__meta strong {
    display: block;
    font-family: var(--apk-font-display);
    font-size: var(--apk-text-lg);
    color: var(--apk-primary);
    letter-spacing: 1px;
    word-break: break-word;
}
.apk-success-card__actions {
    display: flex;
    gap: var(--apk-space-3);
    justify-content: center;
    flex-wrap: wrap;
}

.apk-next-steps {
    max-width: 760px;
    margin: var(--apk-space-8) auto 0;
    padding: var(--apk-space-6);
    background: var(--apk-white);
    border-radius: var(--apk-radius-lg);
    box-shadow: var(--apk-shadow-sm);
}
.apk-next-steps h3 {
    font-family: var(--apk-font-body);
    font-size: var(--apk-text-xl);
    font-weight: 700;
    color: var(--apk-gray-900);
    letter-spacing: 0;
    margin-bottom: var(--apk-space-4);
    text-align: center;
}
.apk-next-steps__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--apk-space-3);
}
.apk-next-steps__list li {
    display: flex;
    gap: var(--apk-space-3);
    padding: var(--apk-space-3);
    background: var(--apk-gray-50);
    border-radius: var(--apk-radius-md);
}
.apk-next-steps__num {
    width: 36px; height: 36px;
    background: var(--apk-primary);
    color: var(--apk-white);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: var(--apk-text-sm);
    flex-shrink: 0;
}
.apk-next-steps__list strong {
    display: block;
    color: var(--apk-gray-900);
    margin-bottom: 2px;
}
.apk-next-steps__list small {
    display: block;
    color: var(--apk-gray-600);
    font-size: var(--apk-text-sm);
    line-height: 1.5;
}
.apk-next-steps__tips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--apk-space-2);
}
.apk-next-steps__tips li {
    padding: var(--apk-space-3);
    background: var(--apk-gray-50);
    border-radius: var(--apk-radius-sm);
    font-size: var(--apk-text-sm);
    color: var(--apk-gray-700);
    line-height: 1.5;
}
.apk-next-steps__tips i {
    color: var(--apk-primary);
    margin-right: var(--apk-space-2);
}

/* ==========================================================================
   CONSULTATION LAYOUT
   ========================================================================== */

.apk-consult-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--apk-space-6);
    align-items: start;
}
@media (max-width: 1023px) {
    .apk-consult-layout { grid-template-columns: 1fr; }
}
.apk-consult-form-wrap {
    background: var(--apk-white);
    border-radius: var(--apk-radius-lg);
    padding: var(--apk-space-8);
    box-shadow: var(--apk-shadow-sm);
}
@media (max-width: 639px) {
    .apk-consult-form-wrap { padding: var(--apk-space-5); }
}
.apk-consult-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--apk-space-4);
    position: sticky;
    top: calc(var(--apk-space-5) + 80px);
}
@media (max-width: 1023px) {
    .apk-consult-sidebar { position: static; }
}

.apk-consult-highlight {
    background: linear-gradient(135deg, var(--apk-secondary), #1a0000);
    color: var(--apk-white);
    padding: var(--apk-space-6);
    border-radius: var(--apk-radius-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.apk-consult-highlight::before {
    content: "";
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(254,0,0,.25), transparent 60%);
}
.apk-consult-highlight__icon {
    width: 60px; height: 60px;
    margin: 0 auto var(--apk-space-3);
    background: var(--apk-primary);
    color: var(--apk-white);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 24px;
    position: relative;
    z-index: 1;
}
.apk-consult-highlight strong {
    display: block;
    font-family: var(--apk-font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--apk-white);
    letter-spacing: 1px;
    margin-bottom: var(--apk-space-2);
    position: relative;
    z-index: 1;
}
.apk-consult-highlight p {
    color: rgba(255,255,255,.85);
    margin: 0;
    position: relative;
    z-index: 1;
}

.apk-consult-what {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--apk-space-2);
}
.apk-consult-what li {
    display: flex;
    align-items: flex-start;
    gap: var(--apk-space-2);
    font-size: var(--apk-text-sm);
    color: var(--apk-gray-700);
    line-height: 1.5;
}
.apk-consult-what i {
    color: var(--apk-primary);
    margin-top: 3px;
    flex-shrink: 0;
}