.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}.ec-root {
box-sizing: border-box;
font-family: inherit;
color: inherit;
line-height: 1.5;
--ec-color-bg:               #ffffff;
--ec-color-fg:               #111827;
--ec-color-muted:            #6b7280;
--ec-color-border:           #e5e7eb;
--ec-color-divider:          #f3f4f6;
--ec-color-card-bg:          #ffffff;
--ec-color-card-bg-hover:    #f9fafb;
--ec-color-accent:           #2563eb;
--ec-color-accent-hover:     #1e40af;
--ec-color-accent-text:      #ffffff;
--ec-color-cta:              #16a34a;
--ec-color-cta-hover:        #15803d;
--ec-color-recommended-bg:   #fef3c7;
--ec-color-recommended-text: #78350f;
--ec-color-warning-bg:       #fff8e1;
--ec-color-warning-border:   #f0c419;
--ec-color-warning-text:     #6b4d00;
--ec-radius-md: 8px;
--ec-radius-lg: 12px;
--ec-space-xs: 4px;
--ec-space-sm: 8px;
--ec-space-md: 16px;
--ec-space-lg: 24px;
--ec-space-xl: 32px;
--ec-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
--ec-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
--ec-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.ec-root *,
.ec-root *::before,
.ec-root *::after {
box-sizing: inherit;
}
.ec-root [hidden] { display: none !important; } .ec-root {
color: var(--ec-color-fg);
background-color: transparent; } .ec-placeholder {
padding: var(--ec-space-lg);
border: 1px dashed var(--ec-color-border);
border-radius: var(--ec-radius-md);
background: var(--ec-color-divider);
color: var(--ec-color-fg);
}
.ec-placeholder__title { margin: 0 0 var(--ec-space-sm); font-size: 1.1em; font-weight: 600; }
.ec-placeholder__warning {
margin: var(--ec-space-md) 0 0;
padding: var(--ec-space-sm) var(--ec-space-md);
background: var(--ec-color-warning-bg);
border: 1px solid var(--ec-color-warning-border);
border-radius: var(--ec-radius-md);
color: var(--ec-color-warning-text);
font-size: 0.9em;
} .ec-layout {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
gap: var(--ec-space-lg);
align-items: start;
}
.ec-main {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--ec-space-lg);
}
.ec-aside {
position: sticky; top: 20px;
align-self: start;
max-height: calc(100vh - 40px);
overflow-y: auto;
z-index: 1;
}
.ec-aside::-webkit-scrollbar { width: 6px; }
.ec-aside::-webkit-scrollbar-thumb { background: var(--ec-color-border); border-radius: 3px; }
.ec-aside::-webkit-scrollbar-track { background: transparent; } .ec-layout { align-items: start; }
@media (max-width: 900px) {
.ec-layout { grid-template-columns: 1fr; }
.ec-aside { display: none; } } .ec-param {
background: var(--ec-color-bg);
border: 1px solid var(--ec-color-border);
border-radius: var(--ec-radius-lg);
padding: var(--ec-space-md) var(--ec-space-lg);
}
.ec-param__title {
margin: 0 0 var(--ec-space-sm);
font-size: 1.05em;
font-weight: 600;
}
.ec-param__optional {
color: var(--ec-color-muted);
font-weight: 400;
font-size: 0.85em;
}
.ec-param__hint {
margin: var(--ec-space-sm) 0 0;
font-size: 0.85em;
color: var(--ec-color-muted);
}
.ec-input {
display: block;
width: 100%;
padding: var(--ec-space-sm) var(--ec-space-md);
border: 1px solid var(--ec-color-border);
border-radius: var(--ec-radius-md);
background: var(--ec-color-bg);
color: var(--ec-color-fg);
font-family: inherit;
font-size: 1em;
line-height: 1.4;
transition: border-color 0.15s ease;
}
.ec-input:focus {
outline: none;
border-color: var(--ec-color-accent);
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.ec-input--select {
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--ec-color-fg) 50%), linear-gradient(135deg, var(--ec-color-fg) 50%, transparent 50%);
background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
background-size: 5px 5px;
background-repeat: no-repeat;
padding-right: var(--ec-space-xl);
} .ec-age-range {
display: flex;
flex-direction: column;
gap: var(--ec-space-md);
}
.ec-age-range__inputs {
display: flex;
align-items: center;
gap: var(--ec-space-sm);
flex-wrap: wrap;
}
.ec-age-range__field {
display: flex;
align-items: center;
gap: var(--ec-space-xs);
}
.ec-age-range__label {
color: var(--ec-color-muted);
font-size: 0.9em;
}
.ec-age-range__input {
width: 80px;
text-align: center;
}
.ec-age-range__dash {
color: var(--ec-color-muted);
user-select: none;
}
.ec-age-range__suffix {
color: var(--ec-color-muted);
font-size: 0.9em;
} .ec-age-slider {
position: relative;
height: 32px;
padding: 0 10px;
--ec-slider-thumb-size: 20px;
--ec-slider-track-h: 6px;
}
.ec-age-slider__rail {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10px;
right: 10px;
height: var(--ec-slider-track-h);
pointer-events: none;
}
.ec-age-slider__track {
position: absolute;
inset: 0;
height: var(--ec-slider-track-h);
background: var(--ec-color-divider);
border-radius: 999px;
}
.ec-age-slider__fill {
position: absolute;
top: 0;
bottom: 0;
height: var(--ec-slider-track-h);
background: var(--ec-color-accent);
border-radius: 999px;
} .ec-age-slider__thumb {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 32px;
margin: 0;
background: transparent;
pointer-events: none; outline: none;
z-index: 2;
}
.ec-age-slider__thumb--max { z-index: 3; }
.ec-age-slider__thumb::-webkit-slider-runnable-track {
height: var(--ec-slider-track-h);
background: transparent;
border: 0;
}
.ec-age-slider__thumb::-moz-range-track {
height: var(--ec-slider-track-h);
background: transparent;
border: 0;
}
.ec-age-slider__thumb::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
pointer-events: auto;
width: var(--ec-slider-thumb-size);
height: var(--ec-slider-thumb-size);
border-radius: 50%;
background: #fff;
border: 2px solid var(--ec-color-accent);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
cursor: grab;
margin-top: calc((var(--ec-slider-track-h) - var(--ec-slider-thumb-size)) / 2);
transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.ec-age-slider__thumb::-webkit-slider-thumb:hover {
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}
.ec-age-slider__thumb:active::-webkit-slider-thumb {
transform: scale(1.1);
cursor: grabbing;
}
.ec-age-slider__thumb::-moz-range-thumb {
pointer-events: auto;
width: var(--ec-slider-thumb-size);
height: var(--ec-slider-thumb-size);
border-radius: 50%;
background: #fff;
border: 2px solid var(--ec-color-accent);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
cursor: grab;
}
.ec-age-slider__thumb:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
}
.ec-age-slider__thumb:focus::-moz-range-thumb {
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
} .ec-age-scale {
position: relative;
height: 30px;
margin-top: 2px;
padding: 0 10px; }
.ec-age-scale__tick {
position: absolute;
top: 0;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
pointer-events: none;
line-height: 1;
}
.ec-age-scale__mark {
width: 1px;
height: 5px;
background: var(--ec-color-border);
}
.ec-age-scale__tick--active .ec-age-scale__mark {
background: var(--ec-color-accent);
}
.ec-age-scale__tick--major .ec-age-scale__mark {
height: 8px;
width: 1.5px;
background: var(--ec-color-muted);
}
.ec-age-scale__tick--major.ec-age-scale__tick--active .ec-age-scale__mark {
background: var(--ec-color-accent);
}
.ec-age-scale__num {
font-size: 0.7em;
color: var(--ec-color-muted);
font-weight: 600;
user-select: none;
}
.ec-age-scale__tick--active .ec-age-scale__num {
color: var(--ec-color-accent);
} .ec-datetime {
display: grid;
gap: var(--ec-space-md);
grid-template-columns: 200px 1fr;
}
@media (max-width: 600px) {
.ec-datetime { grid-template-columns: 1fr; }
}
.ec-datetime__field { display: flex; flex-direction: column; gap: var(--ec-space-xs); }
.ec-datetime__label {
font-size: 0.85em;
color: var(--ec-color-muted);
}
.ec-time-slots {
display: flex;
flex-wrap: wrap;
gap: var(--ec-space-xs);
}
.ec-time-slot {
padding: 6px 12px;
background: var(--ec-color-bg);
border: 1px solid var(--ec-color-border);
border-radius: var(--ec-radius-md);
color: var(--ec-color-fg);
cursor: pointer;
font-family: inherit;
font-size: 0.9em;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ec-time-slot:hover { background: var(--ec-color-card-bg-hover); border-color: var(--ec-color-accent); }
.ec-time-slot--active {
background: var(--ec-color-accent);
border-color: var(--ec-color-accent);
color: var(--ec-color-accent-text);
} .ec-toggle {
display: inline-flex;
background: var(--ec-color-divider);
border-radius: var(--ec-radius-md);
padding: 4px;
}
.ec-toggle__btn {
border: 0;
background: transparent;
padding: 8px 18px;
border-radius: calc(var(--ec-radius-md) - 4px);
color: var(--ec-color-fg);
cursor: pointer;
font-family: inherit;
font-size: 0.95em;
transition: background-color 0.15s ease, color 0.15s ease;
}
.ec-toggle__btn--active {
background: var(--ec-color-accent);
color: var(--ec-color-accent-text);
box-shadow: var(--ec-shadow-sm);
} .ec-theme-carousel {
margin-top: var(--ec-space-md);
display: flex;
flex-wrap: nowrap;
gap: var(--ec-space-md);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding: 4px 28px 12px 4px; margin-right: -4px;
margin-left: -4px;
scrollbar-width: thin;
scrollbar-color: var(--ec-color-border) transparent;
position: relative;
}
.ec-theme-carousel::-webkit-scrollbar { height: 6px; }
.ec-theme-carousel::-webkit-scrollbar-track { background: transparent; }
.ec-theme-carousel::-webkit-scrollbar-thumb {
background: var(--ec-color-border);
border-radius: 3px;
}
.ec-theme-carousel--hidden { display: none; }
.ec-theme-card {
flex: 0 0 150px; scroll-snap-align: start;
display: flex;
flex-direction: column;
gap: var(--ec-space-sm);
padding: 0;
background: var(--ec-color-card-bg);
border: 2px solid var(--ec-color-border);
border-radius: var(--ec-radius-lg);
cursor: pointer;
font-family: inherit;
color: inherit;
text-align: center;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
overflow: hidden;
}
.ec-theme-card:hover {
border-color: var(--ec-color-accent);
transform: translateY(-2px);
box-shadow: var(--ec-shadow-md);
}
.ec-theme-card--active {
border-color: var(--ec-color-accent);
box-shadow: var(--ec-shadow-md);
}
.ec-theme-card__image {
aspect-ratio: 9 / 16; background: var(--ec-color-divider);
border-radius: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.ec-theme-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-theme-card__image--placeholder::after {
content: "🎉";
font-size: 2.2em;
}
.ec-theme-card__title {
font-weight: 600;
font-size: 0.9em;
line-height: 1.25;
padding: 0 var(--ec-space-sm) var(--ec-space-sm);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 900px) {
.ec-theme-card { flex-basis: 124px; }
} .ec-category {
display: flex;
flex-direction: column;
gap: var(--ec-space-md);
}
.ec-category__header {
display: flex;
flex-direction: column;
gap: var(--ec-space-xs);
background: var(--ec-color-card-bg);
border: 1.5px solid var(--ec-color-border);
border-radius: var(--ec-radius-md);
padding: var(--ec-space-sm) var(--ec-space-md);
}
.ec-category__title { margin: 0; font-size: 1.2em; font-weight: 700; color: var(--ec-color-fg); }
.ec-category__description { margin: 0; color: var(--ec-color-muted); font-size: 0.95em; }
.ec-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
align-items: stretch; grid-auto-rows: 1fr; }
.ec-card {
display: flex;
flex-direction: column;
background: var(--ec-color-card-bg);
border: 1.5px solid var(--ec-color-border);
border-radius: var(--ec-radius-md);
overflow: hidden;
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
font-size: 0.85em;
position: relative;
height: 100%; }
.ec-card:hover {
border-color: var(--ec-color-accent);
box-shadow: var(--ec-shadow-md);
transform: translateY(-2px);
}
.ec-card--selected {
border-color: var(--ec-color-cta);
box-shadow: var(--ec-shadow-md);
}
.ec-card--selected:hover { border-color: var(--ec-color-cta); }
.ec-card--recommended { border-color: var(--ec-color-recommended-border, #f59e0b); } .ec-card[data-ec-selected="1"]::after {
content: "✓";
position: absolute;
top: 8px;
right: 8px;
width: 22px;
height: 22px;
background: var(--ec-color-cta);
color: #fff;
border-radius: 50%;
font-size: 0.85em;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
animation: ec-pop 0.3s ease;
}
@keyframes ec-pop {
0%   { transform: scale(0); opacity: 0; }
60%  { transform: scale(1.15); opacity: 1; }
100% { transform: scale(1);    opacity: 1; }
}
.ec-card__image-wrap {
position: relative;
aspect-ratio: 16 / 9; background: var(--ec-color-divider);
overflow: hidden;
}
.ec-card__image {
width: 100%;
height: 100%;
object-fit: cover; object-position: center; display: block;
}
.ec-card__image--placeholder::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.04) 0, transparent 60%),
var(--ec-color-divider);
}
.ec-card__badge {
position: absolute;
left: 6px;
top: 6px;
padding: 3px 8px;
border-radius: 999px;
font-size: 0.7em;
font-weight: 600;
background: var(--ec-color-recommended-bg);
color: var(--ec-color-recommended-text);
line-height: 1.2;
max-width: calc(100% - 12px);
}
.ec-card__body {
padding: 10px 12px 12px;
display: flex;
flex-direction: column;
gap: 6px;
flex-grow: 1;
}
.ec-card__title { margin: 0; font-size: 0.95em; font-weight: 600; line-height: 1.25; }
.ec-card__desc {
margin: 0;
color: var(--ec-color-muted);
font-size: 0.8em;
line-height: 1.35;
flex-grow: 1; display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ec-card__price {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
margin-top: 2px;
}
.ec-card__price-value { font-weight: 700; font-size: 0.95em; line-height: 1.2; }
.ec-card__price-extra {
display: block; font-weight: 600;
font-size: 0.8075em; line-height: 1.2;
color: var(--ec-color-muted);
margin-top: 1px;
white-space: nowrap;
}
.ec-card__price-note { color: var(--ec-color-muted); font-size: 0.7em; }
.ec-card__warn {
margin: 4px 0 0;
padding: 6px 8px;
background: var(--ec-color-warning-bg);
border-radius: 6px;
color: var(--ec-color-warning-text);
font-size: 0.75em;
line-height: 1.3;
}
.ec-card__warn--hidden { display: none; } .ec-card__actions {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: auto; }
.ec-card__actions .ec-btn {
padding: 8px 10px;
font-size: 0.8em;
font-weight: 600;
width: 100%;
}
.ec-card__add { width: 100%; }
.ec-card__detail { width: 100%; } @media (max-width: 900px) {
.ec-cards {
display: flex;
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-left: 8px;
scroll-behavior: smooth;
align-items: stretch;  padding: 4px 28px 12px 4px;
margin: 0 -4px; -webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--ec-color-border, #e5e7eb) transparent;
position: relative; }
.ec-cards::-webkit-scrollbar { height: 4px; }
.ec-cards::-webkit-scrollbar-track { background: transparent; }
.ec-cards::-webkit-scrollbar-thumb { background: var(--ec-color-border, #e5e7eb); border-radius: 2px; }
.ec-card {
flex: 0 0 138px; scroll-snap-align: start;
font-size: 0.78em; height: auto; } .ec-card__body { padding: 8px 10px 10px; gap: 4px; }
.ec-card__title { font-size: 0.9em; line-height: 1.2; }
.ec-card__desc {
font-size: 0.75em;
-webkit-line-clamp: 2;
}
.ec-card__price { gap: 1px; margin-top: 2px; }
.ec-card__price-value { font-size: 0.85em; }
.ec-card__price-note { font-size: 0.65em; }
.ec-card__actions { gap: 4px; margin-top: 2px; }
.ec-card__actions .ec-btn { padding: 5px 8px; font-size: 0.75em; }
.ec-card__warn { font-size: 0.65em; padding: 4px 6px; } .ec-category { margin: 0 -4px; position: relative; }
.ec-category__header { padding: 10px 12px; } .ec-category::after {
content: "";
position: absolute;
right: 0;
bottom: 12px; top: 36px; width: 24px;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.85));
pointer-events: none;
z-index: 2;
} .ec-card__badge {
font-size: 0.6em;
padding: 2px 6px;
left: 4px;
top: 4px;
} .ec-card[data-ec-selected="1"]::after {
width: 18px;
height: 18px;
font-size: 0.7em;
top: 6px;
right: 6px;
}
} .ec-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
border: 0;
border-radius: var(--ec-radius-md);
font-family: inherit;
font-size: 0.95em;
font-weight: 600;
cursor: pointer;
text-decoration: none !important;
line-height: 1.2;
transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.ec-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ec-btn--primary {
background: var(--ec-color-accent);
color: var(--ec-color-accent-text) !important;
}
.ec-btn--primary:hover { background: var(--ec-color-accent-hover); }
.ec-btn--ghost {
background: transparent;
color: var(--ec-color-fg) !important;
border: 1px solid var(--ec-color-border);
}
.ec-btn--ghost:hover { background: var(--ec-color-card-bg-hover); }
.ec-btn--cta {
background: var(--ec-color-cta);
color: #fff !important;
padding: 14px 24px;
font-size: 1em;
}
.ec-btn--cta:hover { background: var(--ec-color-cta-hover); } .ec-card__add-selected { display: none; }
.ec-card[data-ec-selected="1"] .ec-card__add { background: var(--ec-color-cta); }
.ec-card[data-ec-selected="1"] .ec-card__add:hover { background: var(--ec-color-cta-hover); }
.ec-card[data-ec-selected="1"] .ec-card__add-default { display: none; }
.ec-card[data-ec-selected="1"] .ec-card__add-selected { display: inline; }
.ec-card[data-ec-selected="1"] { border-color: var(--ec-color-cta); } .ec-cart {
background: var(--ec-color-bg);
border: 1px solid var(--ec-color-border);
border-radius: var(--ec-radius-lg);
padding: var(--ec-space-lg);
box-shadow: var(--ec-shadow-md);
display: flex;
flex-direction: column;
gap: var(--ec-space-md);
}
.ec-cart__title { margin: 0; font-size: 1.1em; font-weight: 700; }
.ec-cart-summary {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--ec-space-xs);
}
.ec-cart-summary__row {
display: flex;
justify-content: space-between;
gap: var(--ec-space-sm);
font-size: 0.9em;
}
.ec-cart-summary__row--hidden { display: none; }
.ec-cart-summary__label { color: var(--ec-color-muted); }
.ec-cart-summary__value { font-weight: 600; text-align: right; }
.ec-cart__divider {
height: 1px;
background: var(--ec-color-divider);
margin: 0;
}
.ec-cart__lines { display: flex; flex-direction: column; gap: var(--ec-space-sm); }
.ec-cart__empty { margin: 0; color: var(--ec-color-muted); font-size: 0.9em; }
.ec-cart-lines__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ec-space-sm); }
.ec-cart-line {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--ec-space-xs);
font-size: 0.9em;
padding-bottom: var(--ec-space-sm);
border-bottom: 1px solid var(--ec-color-divider);
}
.ec-cart-line:last-child { border-bottom: 0; padding-bottom: 0; }
.ec-cart-line__title { font-weight: 600; }
.ec-cart-line__meta { color: var(--ec-color-muted); font-size: 0.85em; }
.ec-cart-line__total { font-weight: 700; }
.ec-cart-line__remove {
background: transparent;
border: 0;
color: var(--ec-color-muted);
cursor: pointer;
padding: 0 0 0 var(--ec-space-xs);
font-size: 0.9em;
}
.ec-cart-line__remove:hover { color: #dc2626; }
.ec-cart-line__qty {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: var(--ec-space-sm);
}
.ec-cart-line__qty button {
background: var(--ec-color-divider);
border: 0;
width: 22px;
height: 22px;
border-radius: 6px;
cursor: pointer;
font-size: 0.95em;
line-height: 1;
color: var(--ec-color-fg);
}
.ec-cart-line__qty button:hover { background: var(--ec-color-border); }
.ec-cart-line__qty-value { min-width: 24px; text-align: center; font-weight: 600; }
.ec-cart__totals { display: flex; flex-direction: column; gap: var(--ec-space-xs); }
.ec-cart__totals-row {
display: flex;
justify-content: space-between;
font-size: 0.95em;
}
.ec-cart__totals-row--discount { color: var(--ec-color-cta); }
.ec-cart__totals-row--total { font-size: 1.1em; padding-top: var(--ec-space-xs); }
.ec-cart__hint {
margin: 0;
padding: var(--ec-space-xs) var(--ec-space-sm);
background: var(--ec-color-warning-bg);
border-radius: var(--ec-radius-md);
color: var(--ec-color-warning-text);
font-size: 0.85em;
}
.ec-cart__disclaimer {
margin: 0;
color: var(--ec-color-muted);
font-size: 0.8em;
line-height: 1.4;
}
.ec-cart__cta { width: 100%; } .ec-cart__bonuses {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
border-radius: var(--ec-radius-md);
border: 1px solid #6ee7b7;
}
.ec-bonus-rule {
display: flex;
flex-direction: column;
gap: 4px;
}
.ec-bonus-rule__title {
font-weight: 700;
font-size: 0.9em;
color: #047857;
display: flex;
align-items: center;
gap: 6px;
}
.ec-bonus-rule__title::before {
content: "🎁";
font-size: 1.1em;
}
.ec-bonus-rule__desc {
font-size: 0.8em;
color: #065f46;
margin: 0;
line-height: 1.3;
}
.ec-bonus-rule__auto-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0 2px;
font-size: 0.85em;
color: var(--ec-color-fg);
}
.ec-bonus-rule__auto-item::before {
content: "✓";
color: #16a34a;
font-weight: 700;
}
.ec-bonus-rule__choices {
display: flex;
flex-direction: column;
gap: 4px;
margin: 4px 0 0;
}
.ec-bonus-choice {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px;
cursor: pointer;
font-size: 0.85em;
border-radius: 6px;
transition: background-color 0.15s ease;
}
.ec-bonus-choice:hover { background: rgba(255,255,255,0.6); }
.ec-bonus-choice input[type="radio"] { margin: 0; cursor: pointer; }
.ec-bonus-choice--selected { background: rgba(255,255,255,0.8); font-weight: 600; } .ec-mobile-bar { display: none; }
.ec-mobile-sheet { display: none; } .ec-portal-hidden { display: none !important; } .ec-mobile-bar,
.ec-mobile-sheet {
--ec-color-bg: #ffffff;
--ec-color-fg: #111827;
--ec-color-muted: #6b7280;
--ec-color-border: #e5e7eb;
--ec-color-divider: #f3f4f6;
--ec-color-card-bg: #ffffff;
--ec-color-card-bg-hover: #f9fafb;
--ec-color-accent: #2563eb;
--ec-color-cta: #16a34a;
--ec-color-cta-hover: #15803d;
--ec-color-recommended-bg: #fef3c7;
--ec-color-recommended-text: #78350f;
--ec-radius-md: 8px;
--ec-radius-lg: 12px;
--ec-space-xs: 4px;
--ec-space-sm: 8px;
--ec-space-md: 16px;
--ec-space-lg: 24px;
color: #111827;
line-height: 1.5;
}
.ec-mobile-bar, .ec-mobile-bar *,
.ec-mobile-sheet, .ec-mobile-sheet * { box-sizing: border-box; } .ec-mobile-bar[data-ec-portaled="1"]   { z-index: 2147483000; }
.ec-mobile-sheet[data-ec-portaled="1"] { z-index: 2147483001; }
@media (max-width: 900px) {
.ec-mobile-bar {
display: flex;
flex-direction: column;
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: var(--ec-space-sm) var(--ec-space-md);
padding-bottom: calc(var(--ec-space-sm) + env(safe-area-inset-bottom, 0px));
background: var(--ec-color-bg);
border-top: 1px solid var(--ec-color-border);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
z-index: 999;
gap: var(--ec-space-xs); transform: translateZ(0);
backface-visibility: hidden;
}
.ec-mobile-bar__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ec-space-sm);
padding: 0 2px;
}
.ec-mobile-bar__count {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.ec-mobile-bar__count > span:first-child { font-size: 1.05em; font-weight: 700; }
.ec-mobile-bar__count-label { color: var(--ec-color-muted); font-size: 0.8em; }
.ec-mobile-bar__total { font-size: 1em; font-weight: 700; text-align: right; }
.ec-mobile-bar__cta { width: 100%; justify-content: center; }
.ec-mobile-bar__view {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
background: transparent;
border: 1.5px solid var(--ec-color-border);
border-radius: var(--ec-radius-md);
padding: 9px 12px;
font-family: inherit;
font-size: 0.95em;
font-weight: 600;
color: var(--ec-color-fg);
cursor: pointer;
}
.ec-mobile-bar__view:hover { background: var(--ec-color-card-bg-hover); }
.ec-mobile-sheet {
display: block;
position: fixed;
inset: 0;
z-index: 1000;
pointer-events: none;
}
.ec-mobile-sheet[aria-hidden="false"] { pointer-events: auto; }
.ec-mobile-sheet__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity 0.2s ease;
}
.ec-mobile-sheet[aria-hidden="false"] .ec-mobile-sheet__backdrop { opacity: 1; }
.ec-mobile-sheet__panel {
position: absolute;
left: 0;
right: 0;
bottom: 0;
max-height: 85vh;
overflow-y: auto;
background: var(--ec-color-bg);
border-radius: var(--ec-radius-lg) var(--ec-radius-lg) 0 0;
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
padding: var(--ec-space-md) var(--ec-space-lg);
transform: translateY(100%);
transition: transform 0.25s ease;
}
.ec-mobile-sheet[aria-hidden="false"] .ec-mobile-sheet__panel { transform: translateY(0); }
.ec-mobile-sheet__handle {
width: 40px;
height: 4px;
background: var(--ec-color-border);
border-radius: 2px;
margin: 0 auto var(--ec-space-md);
}
.ec-mobile-sheet__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--ec-space-md); background: transparent;
padding: 0;
border: 0;
box-shadow: none;
}
.ec-mobile-sheet__header h3 { margin: 0; font-size: 1.1em; font-weight: 700; color: var(--ec-color-fg); background: transparent; }
.ec-mobile-sheet__close {
background: transparent;
border: 0;
font-size: 1.6em;
line-height: 1;
color: var(--ec-color-muted);
cursor: pointer;
padding: 4px 8px;
}
.ec-mobile-sheet__body { display: flex; flex-direction: column; gap: var(--ec-space-md); } .ec-root--inline { padding-bottom: 160px; }
} .ec-popup-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: var(--ec-color-cta, #16a34a);
color: #fff !important;
text-decoration: none !important;
border-radius: var(--ec-radius-md);
font-weight: 700;
line-height: 1.2;
cursor: pointer;
box-shadow: 0 4px 14px rgba(22, 163, 74, 0.25);
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.ec-popup-trigger::before {
content: "🎉";
font-size: 1.15em;
}
.ec-popup-trigger:hover,
.ec-popup-trigger:focus {
background: var(--ec-color-cta-hover, #15803d);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35);
}
.ec-popup-modal {
padding: var(--ec-space-lg);
background: var(--ec-color-bg);
border-radius: var(--ec-radius-lg);
} .fancybox-slide:has(.ec-popup-modal) {
padding-top: 20px;
padding-bottom: 20px;
}
.fancybox-slide:has(.ec-popup-modal)::before { display: none; } .fancybox-slide:has(.ec-popup-modal) .fancybox-content { vertical-align: top; } .ec-lead-modal,
.ec-success-modal {
background: var(--ec-color-bg, #fff);
border-radius: var(--ec-radius-lg, 12px);
padding: 0;
color: var(--ec-color-fg, #111827);
font-family: inherit;
--ec-color-bg: #ffffff;
--ec-color-fg: #111827;
--ec-color-muted: #6b7280;
--ec-color-border: #e5e7eb;
--ec-color-divider: #f3f4f6;
--ec-color-accent: #2563eb;
--ec-color-cta: #16a34a;
--ec-color-cta-hover: #15803d;
--ec-color-error: #dc2626;
--ec-color-error-bg: #fef2f2;
--ec-radius-md: 8px;
--ec-radius-lg: 12px;
--ec-space-xs: 4px;
--ec-space-sm: 8px;
--ec-space-md: 16px;
--ec-space-lg: 24px;
}
.ec-form {
padding: 28px 32px;
display: flex;
flex-direction: column;
gap: 16px;
}
.ec-form__title {
margin: 0;
font-size: 1.4em;
font-weight: 700;
line-height: 1.2;
}
.ec-form__intro {
margin: 0;
color: var(--ec-color-muted);
font-size: 0.95em;
}
.ec-form__body { display: flex; flex-direction: column; gap: 14px; }
.ec-form__field { display: flex; flex-direction: column; gap: 5px; } .ec-form__field[hidden] { display: none !important; }
.ec-form__label {
font-weight: 600;
font-size: 0.9em;
color: var(--ec-color-fg);
}
.ec-form__required { color: var(--ec-color-error); }
.ec-form input.ec-input {
padding: 11px 14px;
border: 1px solid var(--ec-color-border);
border-radius: var(--ec-radius-md);
font-size: 1em;
font-family: inherit;
background: #fff;
color: var(--ec-color-fg);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ec-form input.ec-input:focus {
outline: none;
border-color: var(--ec-color-accent);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.ec-form input.ec-input[aria-invalid="true"],
.ec-form__field--error input.ec-input {
border-color: var(--ec-color-error);
background: var(--ec-color-error-bg);
}
.ec-form__radios {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 2px;
}
.ec-form__radio {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--ec-color-divider);
border: 1.5px solid transparent;
border-radius: 999px;
cursor: pointer;
font-size: 0.9em;
transition: background-color 0.15s ease, border-color 0.15s ease;
user-select: none;
}
.ec-form__radio:hover { background: #e5e7eb; }
.ec-form__radio input { margin: 0; cursor: pointer; }
.ec-form__radio:has(input:checked) {
border-color: var(--ec-color-accent);
background: rgba(37, 99, 235, 0.08);
}
.ec-form__checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 0.85em;
line-height: 1.4;
color: var(--ec-color-muted);
}
.ec-form__checkbox input { margin: 2px 0 0; cursor: pointer; flex-shrink: 0; }
.ec-form__checkbox a { color: var(--ec-color-accent); }
.ec-form__error {
margin: 0;
color: var(--ec-color-error);
font-size: 0.8em;
line-height: 1.3;
}
.ec-form__error--global {
padding: 10px 14px;
background: var(--ec-color-error-bg);
border-radius: var(--ec-radius-md);
border: 1px solid #fecaca;
}
.ec-form__submit { padding: 14px 24px; font-size: 1em; }
.ec-form__submit[disabled] { opacity: 0.6; cursor: wait; }
.ec-form__disclaimer {
margin: 4px 0 0;
color: var(--ec-color-muted);
font-size: 0.78em;
line-height: 1.4;
} .ec-form__honeypot {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
} .ec-success {
padding: 36px 32px 32px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.ec-success__icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: #ecfdf5;
color: #16a34a;
display: flex;
align-items: center;
justify-content: center;
animation: ec-pop 0.4s ease;
}
.ec-success__icon svg { width: 56px; height: 56px; }
.ec-success__title {
margin: 0;
font-size: 1.5em;
font-weight: 700;
color: var(--ec-color-fg);
}
.ec-success__body { color: var(--ec-color-fg); font-size: 0.95em; line-height: 1.5; }
.ec-success__body p { margin: 0 0 10px; }
.ec-success__body p:last-child { margin-bottom: 0; }
.ec-success__disclaimer { color: var(--ec-color-muted); font-size: 0.85em; margin-top: 8px; }
.ec-success__contact-note {
margin-top: 12px !important;
padding: 10px 14px;
background: #fff8e1;
border-radius: var(--ec-radius-md);
color: #6b4d00;
font-size: 0.9em;
} .ec-detail-modal {
background: #ffffff;
border-radius: var(--ec-radius-lg, 12px);
padding: 0;
color: #111827;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
overflow: hidden; --ec-color-bg: #ffffff;
--ec-color-fg: #111827;
--ec-color-muted: #6b7280;
--ec-color-border: #e5e7eb;
--ec-color-divider: #f3f4f6;
--ec-color-accent: #2563eb;
--ec-color-cta: #16a34a;
--ec-color-cta-hover: #15803d;
--ec-radius-md: 8px;
--ec-radius-lg: 12px;
--ec-space-xs: 4px;
--ec-space-sm: 8px;
--ec-space-md: 16px;
--ec-space-lg: 24px;
}
.ec-detail {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(280px, 1fr);
gap: var(--ec-space-xl, 32px); padding: var(--ec-space-xl, 32px);
color: #111827;
}
@media (max-width: 720px) {
.ec-detail {
grid-template-columns: 1fr;
padding: var(--ec-space-md);
gap: var(--ec-space-lg); }
}
.ec-detail__gallery { display: flex; flex-direction: column; gap: var(--ec-space-md); }
.ec-detail__gallery-main {
aspect-ratio: 16 / 9;
background: var(--ec-color-divider);
border-radius: var(--ec-radius-md);
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.ec-detail__gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ec-detail__gallery-thumbs {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.ec-detail__thumb {
width: 72px;
height: 54px;
padding: 0;
background: var(--ec-color-divider);
border: 2px solid transparent;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
flex-shrink: 0;
transition: border-color 0.15s ease;
}
.ec-detail__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-detail__thumb:hover { border-color: var(--ec-color-accent); }
.ec-detail__thumb--active { border-color: var(--ec-color-accent); }
.ec-detail__body {
display: flex;
flex-direction: column;
gap: var(--ec-space-md);
min-width: 0;
color: #111827;
}
.ec-detail__title {
margin: 0;
font-size: 1.5em;
font-weight: 700;
line-height: 1.2;
color: #111827;
}
.ec-detail__subtitle {
margin: var(--ec-space-sm) 0 0;
font-size: 0.9em;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ec-detail__desc {
color: #1f2937;
font-size: 0.98em;
line-height: 1.6;
}
.ec-detail__price-simple { margin: 0; font-size: 1.15em; color: #111827; }
.ec-detail__price-extra {
display: block;
margin-top: 4px;
font-size: 0.85em; color: #4b5563;
font-weight: 600;
}
.ec-detail__note {
margin: 0;
padding: var(--ec-space-sm) var(--ec-space-md);
background: #f3f4f6;
border-radius: var(--ec-radius-md);
font-size: 0.9em;
color: #4b5563;
}
.ec-detail__prices { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.ec-detail__prices tr { border-bottom: 1px solid var(--ec-color-divider); }
.ec-detail__prices tr:last-child { border-bottom: 0; }
.ec-detail__prices-label { padding: 10px 0; color: #1f2937; }
.ec-detail__prices-price { padding: 10px 0; text-align: right; white-space: nowrap; color: #111827; }
.ec-detail__prices-price strong { font-size: 1.05em; }
.ec-detail__prices-unit { color: #6b7280; font-size: 0.85em; margin-left: 4px; } .ec-detail__actions { margin-top: auto; padding-top: var(--ec-space-md); }
.ec-detail__toggle {
width: 100%;
padding: 14px 22px;
font-size: 1em;
font-weight: 700;
background: var(--ec-color-cta);
color: #fff !important;
border: 0;
border-radius: var(--ec-radius-md);
cursor: pointer;
box-shadow: 0 4px 14px rgba(22, 163, 74, 0.25);
transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ec-detail__toggle:hover {
background: var(--ec-color-cta-hover);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35);
}
.ec-detail__toggle-selected { display: none; }
.ec-detail-modal[data-ec-selected="1"] .ec-detail__toggle {
background: #6b7280; box-shadow: none;
}
.ec-detail-modal[data-ec-selected="1"] .ec-detail__toggle:hover {
background: #4b5563;
box-shadow: none;
}
.ec-detail-modal[data-ec-selected="1"] .ec-detail__toggle-default { display: none; }
.ec-detail-modal[data-ec-selected="1"] .ec-detail__toggle-selected { display: inline; }