/* Web Design Quote Calculator — frontend styles */
.translatepress-zh_HK #swal2-title,.translatepress-zh_HK #swal2-html-container{
    display:block !important;
}
.swal2-container .swal2-confirm.swal2-styled{
    background: #F5A623 !important;
    background-color: #F5A623 !important;
    border: 1px solid #F5A623 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.swal2-container .swal2-confirm.swal2-styled:hover,
.swal2-container .swal2-confirm.swal2-styled:focus{
    background: #DB8F12 !important;
    background-color: #DB8F12 !important;
    border-color: #DB8F12 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.swal2-container h2,.swal2-container .swal2-html-container{
    color: #222220;
    font-family: "Rubik", Sans-serif;
}
.wdqc-app {
	--wdqc-amber: #F5A623;
	--wdqc-amber-dark: #DB8F12;
	--wdqc-ink: #1C1C20;
	--wdqc-ink-soft: #55565C;
	--wdqc-line: #E7E5E1;
	--wdqc-bg-card: #FFFFFF;
	--wdqc-bg-page: #FAF9F6;
	--wdqc-title-red: #D93025;
	--wdqc-sub-blue: #1C1C20;
	--wdqc-designs-visible: 3;
	--wdqc-features-columns: 2;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--wdqc-ink);
	background: var(--wdqc-bg-page);
	padding: 0px;
	border-radius: 18px;
	max-width: 1240px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	container-type: inline-size;
	container-name: wdqc-app;
}
.wdqc-app * { box-sizing: border-box; }

@media (max-width: 600px) {
	.wdqc-app { padding: 16px; border-radius: 12px; }
	.wdqc-app{
	    container-type: unset !important;
        container-name: auto !important;
	}
}

/* Step indicator */
.wdqc-steps {
	position: relative;
	display: flex;
	justify-content: space-between;
	margin-bottom: 32px;
	gap: 4px;
	flex-wrap: wrap;
}
.wdqc-steps-track,
.wdqc-steps-progress {
	position: absolute;
	top: 15px;
	height: 0;
	left: calc( 50% / var( --wdqc-step-count, 3 ) );
	right: calc( 50% / var( --wdqc-step-count, 3 ) );
	border-top: 2px dotted var(--wdqc-line);
	z-index: 0;
}
.wdqc-steps-progress {
	right: auto;
	border-top-color: var(--wdqc-amber);
	width: calc( ( 100% - ( 100% / var( --wdqc-step-count, 3 ) ) ) * var( --wdqc-progress-frac, 0 ) );
	transition: width .3s ease;
}
.wdqc-step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1;
	min-width: 70px;
	opacity: 1;
}
.wdqc-step.is-active,
.wdqc-step.is-done { opacity: 1; }
.wdqc-step-num {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 2px solid var(--wdqc-line);
	font-weight: 700;
	font-size: 13px;
	color: var(--wdqc-ink-soft);
}
.wdqc-step.is-active .wdqc-step-num {
	background: var(--wdqc-amber);
	border-color: var(--wdqc-amber);
	color: #fff;
}
.wdqc-step.is-done .wdqc-step-num {
	background: var(--wdqc-ink);
	border-color: var(--wdqc-ink);
	color: #fff;
}
.wdqc-step-label { font-size: 12px; color: var(--wdqc-ink-soft); font-weight: 600; }

/* Grid layout — flex-wrap (not CSS grid + viewport media query) so the
   sidebar reflows based on the ACTUAL rendered width of .wdqc-app itself.
   This fixes the sidebar getting cut off / overflowing when the widget
   sits in a narrow column, Elementor editor panel, or embedded layout —
   situations where the browser viewport is wide but the widget's own
   space is not, which a viewport-based @media query can't detect. */
.wdqc-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
}
.wdqc-panel {
	flex: 999 1 480px;
	min-width: 0;
	max-width: 100%;
}
.wdqc-sidebar {
	flex: 1 1 300px;
	min-width: 0;
	max-width: 380px;
}
/* When the sidebar wraps to its own row (narrow container), let it use
   the full row width instead of staying capped at 380px. */
@container (max-width: 700px) {
	.wdqc-sidebar { max-width: 100%; }
}
/* Fallback for browsers without container query support: a generous
   viewport breakpoint still helps on real small-screen phones. */
@media (max-width: 700px) {
	.wdqc-sidebar { max-width: 100%; }
}

.wdqc-panel {
	background: var(--wdqc-bg-card);
	border: 1px solid var(--wdqc-line);
	border-radius: 14px;
	padding: 28px;
	box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
@media (max-width: 600px) { .wdqc-panel { padding: 18px; } }
.wdqc-h { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.wdqc-group-box {
	background: var(--wdqc-bg-page);
	border-top: 1px solid var(--wdqc-line);
	border-radius: 0;
	padding: 20px;
	margin-top: 0;
}

/* Step 1 accordion — General Requirements / Functions & Features / Hosting & Maintenance */
.wdqc-accordion-item {
	background: var(--wdqc-bg-card);
	border: 1px solid var(--wdqc-line);
	border-radius: 10px;
	margin-bottom: 12px;
	overflow: hidden;
}
.wdqc-accordion-item:last-child { margin-bottom: 0; }
.wdqc-accordion-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	transition: background .15s ease;
}
.wdqc-accordion-head:hover { background: var(--wdqc-bg-page); }
.wdqc-accordion-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--wdqc-amber-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}
.wdqc-accordion-head-text { flex: 1 1 auto; min-width: 0; }
.wdqc-accordion-head-title { font-weight: 700; font-size: 15px; color: var(--wdqc-ink); }
.wdqc-accordion-head-desc { font-size: 12.5px; color: var(--wdqc-ink-soft); margin-top: 2px; }
.wdqc-accordion-caret {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: #9a9fa8;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease, color .2s ease;
}
.wdqc-accordion-item.is-open .wdqc-accordion-caret { transform: rotate(90deg); color: var(--wdqc-amber-dark); }
.wdqc-accordion-body {
	box-sizing: border-box;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .35s ease, opacity .25s ease;
}
.wdqc-accordion-item.is-open .wdqc-accordion-body {
	max-height: 4000px;
	opacity: 1;
}
.wdqc-group-box > .wdqc-h-sub:first-child { margin-top: 0 !important; }
.wdqc-group-box .wdqc-toggle-card:last-child,
.wdqc-group-box .wdqc-toggle-card-last { margin-bottom: 0; }
/* Continuous numbering (1, 2, 3…) across every field sub-heading and
   toggle-card label inside Step 1, matching the reference screenshot. */
.wdqc-pane[data-pane="1"] { counter-reset: wdqc-field-num; }
.wdqc-h-sub,
.wdqc-toggle-card-label {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.wdqc-h-sub::before,
.wdqc-toggle-card-label::before {
	counter-increment: wdqc-field-num;
	content: counter( wdqc-field-num ) ".";
	color: currentColor;
	font-weight: 400;
	flex: 0 0 auto;
}
.wdqc-h-sub {
	font-size: 14px;
	font-weight: 400;
	margin: 0 0 4px;
	color: var(--wdqc-sub-blue);
	text-transform: none;
	letter-spacing: normal;
}
.wdqc-sub { color: var(--wdqc-ink-soft); font-size: 13px; margin: 0 0 16px; }
.wdqc-cat-label { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--wdqc-ink-soft); margin: 18px 0 8px; }

.wdqc-pane { display: none; }
.wdqc-pane.is-active { display: block; animation: wdqc-fade .25s ease; }
@keyframes wdqc-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Packages */
.wdqc-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
@container wdqc-app (max-width: 700px) { .wdqc-packages { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .wdqc-packages { grid-template-columns: 1fr; } }
.wdqc-package {
	    position: relative;
    text-align: center;
    background: #fff;
    border: 2px solid var(--wdqc-line);
    border-radius: 12px;
    padding: 20px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color .15s, box-shadow .15s;
    text-wrap: auto;
}
.wdqc-package:hover { border-color: var(--wdqc-amber); background: #FFFBF1; box-shadow: 0 0 0 3px rgba(245,166,35,.12); }
.wdqc-package.is-selected { border-color: var(--wdqc-amber); background: #FFFBF1; box-shadow: 0 0 0 3px rgba(245,166,35,.12); }
.wdqc-pkg-label { font-size: 15px;color:#222220; }
.wdqc-pkg-sub { font-size: 13px; color: var(--wdqc-ink-soft); }
.wdqc-pkg-desc { font-size: 12.5px; color: var(--wdqc-ink-soft); margin: 6px 0 10px; line-height: 1.4; }
.wdqc-pkg-price { font-weight: 700; font-size: 16px; margin-top: auto;color:#222220; }
.wdqc-check {
	position: absolute; top: 10px; right: 10px;
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--wdqc-amber); color: #fff;
	display: none; align-items: center; justify-content: center;
	font-size: 11px;
}
.wdqc-package.is-selected .wdqc-check { display: flex; }
.wdqc-pkg-icon { display: block; width: 30px; height: 30px; margin:0px auto 6px; }
.wdqc-pkg-icon img { width: 100%; height: 100%; object-fit: contain; }
.wdqc-pkg-icon-elementor { display: flex; align-items: center; justify-content: flex-start; }
.wdqc-pkg-icon-elementor i, .wdqc-pkg-icon-elementor svg { font-size: 26px; width: 26px; height: 26px; color: var(--wdqc-amber-dark); }

.wdqc-design-explore { margin: 12px 0 0; font-size: 13px; }
.wdqc-design-explore a { color: var(--wdqc-amber-dark); font-weight: 600; text-decoration: underline; }
.wdqc-design-explore a:hover { color: var(--wdqc-amber); }

/* "What's New?" badge/link next to a Step 1 field sub-heading (e.g. "Type of Web Design") */
.wdqc-whats-new {
	color: var(--wdqc-title-red);
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
a.wdqc-whats-new:hover { text-decoration: underline; }
span.wdqc-whats-new { cursor: default; }

/* Design search box */
.wdqc-designs-search-wrap {
	position: relative; margin: 8px auto; width: 88%;
	display: flex; align-items: stretch;
	border: 1px solid var(--wdqc-line); border-radius: 10px;
	background: #fafafa; overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wdqc-designs-search-wrap input{
    border: 0px solid #666;
}
.wdqc-designs-search-wrap:focus-within {
	border-color: var(--wdqc-amber); background: #fff;
	box-shadow: 0 0 0 3px rgba(245, 166, 35, .12);
}
.wdqc-designs-search {
	flex: 1 1 auto; min-width: 0; box-sizing: border-box;
	padding: 11px 14px; border: none; background: transparent;
	font-size: 14px; font-family: inherit; color: var(--wdqc-ink);
}
.wdqc-designs-search::placeholder { color: #9a9fa8; }
.wdqc-designs-search:focus { outline: none; }
.wdqc-designs-search-btn {
	flex: 0 0 auto; width: 46px; border: none; cursor: pointer;
	border-left: 1px solid var(--wdqc-line); background: #f0f1f4;
	color: var(--wdqc-ink-soft); display: flex; align-items: center; justify-content: center;
	transition: background .15s ease, color .15s ease;
}
.wdqc-designs-search-btn:hover, .wdqc-designs-search-btn:focus {
	background: var(--wdqc-amber); color: #fff; outline: none;
}
.wdqc-designs-empty { font-size: 13px; color: var(--wdqc-ink-soft); margin: 8px 2px 0; }

/* Designs — horizontal carousel, 4 visible at a time */
.wdqc-designs-wrap { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.wdqc-design.is-search-hidden { display: none !important; }
.wdqc-designs-carousel { overflow: hidden; flex: 1; min-width: 0; }
.wdqc-designs-track {
	display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px;
}
.wdqc-designs-track::-webkit-scrollbar { display: none; }
.wdqc-design {
	position: relative;
	background: #fff; border: 2px solid var(--wdqc-line); border-radius: 10px; overflow: hidden;
	cursor: pointer; padding: 0; text-align: center;
	/* Exact width for N visible cards (N = --wdqc-designs-visible) at a 12px gap.
	   Elementor's responsive control sets --wdqc-designs-visible per device; for
	   plain-shortcode usage the container-query defaults below apply instead. */
	flex: 0 0 calc((100% - (12px * (var(--wdqc-designs-visible, 4) - 1))) / var(--wdqc-designs-visible, 4));
	scroll-snap-align: start;
}
.wdqc-design:hover{
    background: transparent;
}
/* Defaults when no Elementor responsive value is set (plain shortcode use).
   Based on the widget's own rendered width, not the page viewport, so it
   stays correct in sidebars, narrow columns, or embedded layouts too. */
@container wdqc-app (max-width: 900px) { .wdqc-app { --wdqc-designs-visible: 2; } }
@container wdqc-app (max-width: 520px) { .wdqc-app { --wdqc-designs-visible: 1; } }
@media (max-width: 900px) { .wdqc-app { --wdqc-designs-visible: 2; } }
@media (max-width: 520px) { .wdqc-app { --wdqc-designs-visible: 1; } }
.wdqc-design.is-selected { border-color: var(--wdqc-amber); }
.wdqc-design .wdqc-check { z-index: 2; }
.wdqc-design.is-selected .wdqc-check { display: flex; }
.wdqc-design-thumb {
	display: block; width: 100%; height: 250px;
	background: linear-gradient(135deg, #ece9e3, #d8d4cb) top/cover;
}
.wdqc-design-label { display: block; font-size: 12px; padding: 8px; color: var(--wdqc-ink-soft); }
.wdqc-designs-prev, .wdqc-designs-next {
	flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid var(--wdqc-line); background: #fff; color: var(--wdqc-ink);
	font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.wdqc-designs-prev:hover, .wdqc-designs-next:hover{
    background: var(--wdqc-amber) !important;color:#fff !important;
}
.wdqc-designs-prev:hover, .wdqc-designs-next:hover { border-color: var(--wdqc-amber); color: var(--wdqc-amber-dark); }

/* Sliders */
.wdqc-slider-wrap { margin-top: 18px; max-width: 560px; }
.wdqc-bubble {
	display: inline-block; background: var(--wdqc-ink); color: #fff;
	font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 8px; margin-bottom: 10px;
}
input[type="range"] {
	width: 100%; height: 6px; border-radius: 4px; background: var(--wdqc-line);
	-webkit-appearance: none; appearance: none; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
	background: var(--wdqc-amber); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--wdqc-amber); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
	width: 20px; height: 20px; border-radius: 50%; background: var(--wdqc-amber); border: 3px solid #fff; cursor: pointer;
}
.wdqc-slider-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--wdqc-ink-soft); margin-top: 6px; }
.wdqc-total-label { margin-top: 14px; font-size: 13px; color: var(--wdqc-ink-soft); }

/* Features */
.wdqc-features { display: grid; grid-template-columns: repeat(var(--wdqc-features-columns, 2), 1fr); gap: 10px; }
@container wdqc-app (max-width: 700px) { .wdqc-app { --wdqc-features-columns: 1; } }
@media (max-width: 700px) { .wdqc-app { --wdqc-features-columns: 1; } }
.wdqc-feature {
	display: flex; align-items: center; gap: 8px; font-size: 13.5px;
	border: 1px solid var(--wdqc-line); border-radius: 8px; padding: 10px 12px; cursor: pointer;
}
.wdqc-feature:has(input:checked) { border-color: var(--wdqc-amber); background: #FFFBF1; }
.wdqc-feature input { accent-color: var(--wdqc-amber); width: 16px; height: 16px; }

.wdqc-textarea {
	width: 100%; border: 1px solid var(--wdqc-line); border-radius: 8px; padding: 10px 12px;
	font-family: inherit; font-size: 13.5px; resize: vertical;
}

/* Hosting / Maintenance — Yes/No pill toggle */
.wdqc-toggle-card { margin-top: 16px; }
.wdqc-toggle-card-label { font-weight: 400; font-size: 13px; margin: 0 0 10px; color: var(--wdqc-sub-blue); }
.wdqc-yn-toggle {
	display: inline-flex; border: 2px solid var(--wdqc-ink); border-radius: 999px; overflow: hidden; padding: 2px;
}
.wdqc-yn-btn {
	border: none; background: transparent; color: var(--wdqc-ink); font-weight: 700; font-size: 13.5px;
	padding: 8px 22px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s;
}
.wdqc-yn-btn.is-active,.wdqc-yn-btn.is-active:focus { background: var(--wdqc-amber) !important; color: #fff; }
.wdqc-yn-btn:not(.is-active):hover { background: var(--wdqc-bg-page);color: var(--wdqc-ink) !important; }

/* Contact */
.wdqc-contact-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.wdqc-contact-form input {
	border: 1px solid var(--wdqc-line); border-radius: 8px; padding: 11px 14px; font-size: 14px; font-family: inherit;
}
.wdqc-msg { font-size: 13px; min-height: 18px; }
.wdqc-msg.is-success { color: #1a7d3a; }
.wdqc-msg.is-error { color: #c0392b; }

/* Nav buttons */
.wdqc-nav { display: flex; justify-content: space-between; margin-top: 28px; gap: 10px; }
.wdqc-btn {
	border: none; border-radius: 6px; padding: 3px 10px; font-weight: 500; font-size: 14px; cursor: pointer;
}
.wdqc-btn-primary,.wdqc-btn-primary:focus { background: var(--wdqc-amber) !important; color: #fff; margin-left: auto; }
.wdqc-btn-primary:hover { background: var(--wdqc-amber-dark); }
.wdqc-btn-ghost { background: transparent; color: var(--wdqc-ink-soft); border: 1px solid var(--wdqc-line); }
.wdqc-btn-ghost:hover{
    background: var(--wdqc-amber-dark);
    color:#fff;
}
.wdqc-pane.is-active .wdqc-form-title{
    color:#fff !important;
}
.wdqc-btn-secondary { background: var(--wdqc-bg-page); color: var(--wdqc-ink); border: 1px solid var(--wdqc-line); width: 100%; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.wdqc-reset-icon { flex-shrink: 0; }
.wdqc-btn-secondary:hover{
    background: var(--wdqc-amber);
    color: #fff !important;
}

/* Step 2: Account information form */
.wdqc-form-block { max-width: 100%; }
.wdqc-form-title {
	background: var(--wdqc-amber); color: #fff; font-weight: 700; font-size: 13px;
	padding: 10px 16px; border-radius: 20px; display: inline-block; margin: 0 0 16px;
}
.wdqc-flabel { display: block; font-size: 12.5px; font-weight: 700; color: var(--wdqc-ink); margin: 14px 0 6px; }
.wdqc-flabel .req { color: #c0392b; margin-left: 2px; }
.wdqc-finput {
	width: 100%; border: 1px solid var(--wdqc-line); border-radius: 8px; padding: 11px 14px;
	font-size: 14px; font-family: inherit; background: #fff; color: inherit;
}
select.wdqc-finput { appearance: auto; }
.wdqc-form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 6px; }
@media (max-width: 560px) { .wdqc-form-cols { grid-template-columns: 1fr; } }
.wdqc-form-subtitle { font-weight: 700; font-size: 12px; letter-spacing: .03em; color: var(--wdqc-ink); margin: 0 0 8px; }
.wdqc-check-line { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 8px; }
.wdqc-check-line input { accent-color: var(--wdqc-amber); width: 16px; height: 16px; }
.wdqc-submit-msg { font-size: 13px; min-height: 18px; margin-top: 14px; }
.wdqc-submit-msg.is-success { color: #1a7d3a; }
.wdqc-submit-msg.is-error { color: #c0392b; }

/* Step 2: Quotation Summary review table */
.wdqc-summary-wrap { margin-top: 14px; border: 0px solid var(--wdqc-line); border-radius: 10px; overflow: hidden; }
.wdqc-summary-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 0px; }
.wdqc-summary-table thead tr { background: var(--wdqc-amber); }
.wdqc-summary-table thead th { text-align: left; padding: 11px 14px; color: #fff; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; }
.wdqc-summary-table thead th:not(.wdqc-summary-col-item) { text-align: right; }
.wdqc-summary-table tbody tr.wdqc-summary-group td { background: #fff; font-weight: 700; padding: 10px 14px; color: var(--wdqc-amber-dark); font-size: 13px; text-transform: none; letter-spacing: normal; border-top: 1px solid var(--wdqc-line); border-bottom: 1px solid var(--wdqc-line); }
.wdqc-summary-table tbody tr.wdqc-summary-group:first-child td { border-radius: 0; }
.wdqc-summary-table tbody tr.wdqc-summary-section td { background: #FFFBF1; font-weight: 400; padding: 9px 14px; color: var(--wdqc-sub-blue); border-top: 1px solid var(--wdqc-line); font-size: 12.5px; text-transform: none; letter-spacing: normal; }
.wdqc-summary-table tbody tr.wdqc-summary-item td { padding: 9px 14px; border-bottom: 1px solid var(--wdqc-line); color: var(--wdqc-ink-soft); }
.wdqc-summary-table tbody tr.wdqc-summary-item td:first-child { color: var(--wdqc-ink); }
.wdqc-summary-table tbody tr.wdqc-summary-item td:not(:first-child) { text-align: right; white-space: nowrap; }
.wdqc-summary-table tbody tr.wdqc-summary-item td.wdqc-amt-negative { color: #c0392b; }
.wdqc-summary-table tfoot .wdqc-summary-total-row td { padding: 13px 14px; font-weight: 700; font-size: 15px; background: var(--wdqc-ink); color: #fff; }
.wdqc-summary-table tfoot .wdqc-summary-total-amount { text-align: right; color: var(--wdqc-amber); font-size: 18px; }
.wdqc-summary-table tbody tr.wdqc-summary-special-row td { padding: 10px 14px; font-weight: 700; border-top: 1px solid var(--wdqc-line); border-bottom: 1px solid var(--wdqc-line); color: var(--wdqc-ink); }
.wdqc-summary-table tbody tr.wdqc-summary-special-row td:last-child { text-align: right; white-space: nowrap; }
.wdqc-summary-note { text-align: right; margin-top: 10px; }
.wdqc-summary-note.wdqc-note { font-size: 13px; font-weight: 600; }

/* Horizontal scroll for the summary table is only needed on small screens —
   on desktop the columns fit fine and a forced min-width just adds an
   unwanted scrollbar. */
@media (max-width: 600px) {
	.wdqc-summary-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.wdqc-summary-table { min-width: 480px; }
}

/* Step 2: brand / WhatsApp footer under the quote */
.wdqc-summary-brand {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--wdqc-line);
	flex-wrap: wrap;
}
.wdqc-summary-brand-logo { height: 70px !important; width: auto; display: block; }
.wdqc-summary-brand-whatsapp {
	font-weight: 700;
	font-size: 14px;
	color: var(--wdqc-amber-dark);
	text-decoration: none;
}
.wdqc-summary-brand-whatsapp:hover { text-decoration: underline; }

/* Sidebar */
.wdqc-sidebar {
	background: var(--wdqc-bg-card); border: 1px solid var(--wdqc-line); border-radius: 14px; padding: 28px;
	position: sticky; top: 80px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
@media (max-width: 900px) { .wdqc-sidebar { position: static; } .wdqc-sidebar{max-width: 100% !important;} }
.wdqc-sidebar-group-h {
	font-size: 12px;
	font-weight: 600;
	margin: 18px 0 2px;
	color: var(--wdqc-amber-dark);
	text-transform: none;
	letter-spacing: normal;
}
.wdqc-sidebar-group-h:first-of-type { margin-top: 14px; }
.wdqc-sidebar-group {
	background: var(--wdqc-bg-page);
	border: 1px solid var(--wdqc-line);
	border-radius: 10px;
	padding: 4px 12px;
	margin: 6px 0 16px;
}
.wdqc-sidebar-group .wdqc-line:last-child { border-bottom: none; }
.wdqc-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 10px 0; border-bottom: 1px solid var(--wdqc-line); }
.wdqc-line span { color: var(--wdqc-ink-soft); flex: 1 1 auto; min-width: 0; }
.wdqc-line strong { text-align: right; max-width: 60%; flex-shrink: 0; white-space: nowrap; color: var(--wdqc-ink); }
.wdqc-line strong .wdqc-q-count,
.wdqc-line strong .wdqc-q-price { display: block; color: var(--wdqc-ink); }
.wdqc-total-row {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--wdqc-ink);
	font-size: 14px; font-weight: 700;
}
.wdqc-total-row strong { font-size: 22px; color: var(--wdqc-amber-dark); }
.wdqc-note { font-size: 11px; color: var(--wdqc-ink-soft); margin-top: 8px; }

/* Dynamic values (page/language counts, quotation number, valid-by date,
   etc.) are wrapped in their own <span class="wdqc-dyn-num"> so a
   translation plugin can translate the surrounding static wording without
   the ever-changing number breaking the match. Reset color/weight here so
   it always inherits from its actual container instead of accidentally
   picking up unrelated rules like ".wdqc-line span" (meant only for the
   sidebar's left-hand label). */
.wdqc-dyn-num { color: inherit !important; font-weight: inherit; white-space: nowrap; }