/* Daisy's cake atelier: photographic layers and a separate, masked CSS tint. */
#order-dialog{width:1240px;max-width:calc(100vw - 40px);height:min(850px,calc(100svh - 40px));max-height:calc(100svh - 40px);border-radius:12px;overflow:hidden;background:#fcf9f0}
#order-dialog::backdrop{background:#382f2f85;backdrop-filter:blur(12px)}
#order-dialog .configurator{grid-template-columns:1fr 1fr;min-height:0;height:100%}
#order-dialog .config-preview{padding:28px 35px 24px;background:radial-gradient(ellipse at 55% 43%,#fffcf1 0,#eee6d5 70%);overflow:hidden;justify-content:flex-start;gap:0}
.preview-masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:2}
#order-dialog .config-preview .wordmark{width:146px;margin:0;align-self:auto}
.preview-masthead>span{font-size:var(--text-meta);letter-spacing:.2em;max-width:110px;line-height:1.9;text-align:right;color:#9e8176}
#order-dialog .config-cake-wrap{position:relative;inset:auto;width:calc(100% + 50px);margin:6px -25px -12px;aspect-ratio:1;flex:1;min-height:240px;max-height:565px;display:block}
#config-cake{display:block;width:100%;height:100%;position:relative;--icing-color:#eab2c0;--preview-rx:0deg;--preview-ry:0deg;--coating-mask:url('/assets/images/configurator/fondant-mask.svg')}
.cake-photo-space{position:absolute;inset:0;perspective:1100px;cursor:grab;touch-action:pan-y;outline-offset:-5px;border-radius:12px;-webkit-user-select:none;user-select:none}
.cake-photo-space:focus-visible{outline:1px solid var(--blue)}
#config-cake[data-dragging] .cake-photo-space{cursor:grabbing}
.cake-photo-model{position:absolute;inset:0;transform:rotateX(var(--preview-rx)) rotateY(var(--preview-ry));transform-origin:50% 59%;transition:transform .38s cubic-bezier(.2,.7,.2,1);will-change:transform;filter:drop-shadow(0 20px 17px #5d3c2520)}
#config-cake[data-dragging] .cake-photo-model{transition:transform .08s linear}
.cake-photo-composite{position:absolute;inset:0;isolation:isolate;mask-image:var(--cake-silhouette,url('/assets/images/configurator/cake-silhouette.svg'));mask-size:contain;mask-position:center;mask-repeat:no-repeat;-webkit-mask-image:var(--cake-silhouette,url('/assets/images/configurator/cake-silhouette.svg'));-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}
#order-dialog .config-cake-wrap .config-cake-photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;filter:none;transform:none;transition:none;pointer-events:none;z-index:0}
.cake-coating-tint{position:absolute;inset:0;background:var(--icing-color);mix-blend-mode:multiply;mask-image:var(--coating-size-mask,var(--coating-mask));mask-size:contain;mask-position:center;mask-repeat:no-repeat;-webkit-mask-image:var(--coating-size-mask,var(--coating-mask));-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;transition:background .35s ease;pointer-events:none;z-index:1}
#order-dialog .config-cake-wrap .cake-photo-topper{position:absolute;width:42%;height:35%;left:20%;top:5%;object-fit:contain;z-index:2;filter:drop-shadow(1px 4px 2px #39251220);transform:none;transition:opacity .2s;pointer-events:none}
#config-cake[data-decoration=berries] .cake-photo-topper{width:44%;height:30%;left:20%;top:7%}
#config-cake[data-decoration=party] .cake-photo-topper{width:47%;height:32%;left:19%;top:6%}
#order-dialog #cake-inscription{position:absolute;left:20%;right:auto;top:30%;bottom:auto;width:22%;padding:0;border-radius:0;background:none;box-shadow:none;font-size:var(--text-small);font-family:var(--serif);line-height:1.1;text-align:center;transform:perspective(400px) rotateX(33deg) rotateZ(7deg);color:#5b2926;text-shadow:0 1px #ffffff60;z-index:3;pointer-events:none}
.preview-loading{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:var(--text-small);white-space:nowrap;background:#fcf9f0e8;padding:6px 13px;border-radius:30px;color:#957566;z-index:4}
.photo-arrived .cake-photo-composite{animation:photo-arrive .3s ease-out}
@keyframes photo-arrive{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:none}}
.preview-interaction{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:2;border-bottom:1px solid #b6a08a4a;padding:8px 0 18px;color:#927c6d;font-size:var(--text-small)}
.preview-interaction>span{display:flex;align-items:center;gap:7px}.preview-interaction svg{width:22px;height:22px;flex:none}.preview-interaction button{font:inherit;color:var(--burgundy);display:flex;gap:5px;align-items:center;padding:5px 0;background:none}.preview-interaction button:first-letter{font-size:var(--text-small)}
#order-dialog .preview-description{position:relative;inset:auto;text-align:center;padding:18px 0 0;flex:none}
#order-dialog .preview-description>.eyebrow{display:block;font-size:var(--text-meta);letter-spacing:.22em;color:#a38a76}
#order-dialog .preview-description h3{font-size:38px;margin:7px 0 8px;line-height:1.05}
#order-dialog .preview-description>p{font-size:var(--text-small);max-width:none;line-height:1.8;color:#846655}
.preview-decoration{display:inline-block;font-size:var(--text-ui);letter-spacing:.03em;border:1px solid #b8a18a60;border-radius:20px;padding:4px 11px;margin-top:8px;color:#8d6c5b}
.preview-disclaimer{font-size:var(--text-small);color:#a38a76;line-height:1.8;text-align:center;margin:14px 0 0}
#order-dialog .config-form-panel{padding:34px 38px 0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d5c5b2 transparent}
#config-main{min-height:100%;display:flex;flex-direction:column}
#order-dialog .config-form-panel h2{font-size:49px;line-height:.96;margin:12px 0 20px}
#order-dialog .config-form-panel h2 em{color:var(--blue)}
#order-dialog .config-form-panel>div>.eyebrow{font-size:var(--text-meta);letter-spacing:.2em}
#order-dialog .config-steps{margin:0 0 23px;padding-bottom:17px;border-color:#e6d9c8}
#order-dialog .config-steps li{font-size:var(--text-ui);gap:7px}
#order-form{display:flex;flex-direction:column;flex:1}
#order-dialog fieldset{margin-bottom:24px}
#order-dialog legend{font-size:var(--text-ui);letter-spacing:0;margin-bottom:12px;display:flex;gap:8px;align-items:center}
#order-dialog .size-options{gap:8px}
#order-dialog .choice>span{border-radius:6px;padding:13px 5px;font-size:34px;background:#fffdf7;border-color:#e0d3c2;transition:background .2s,border-color .2s}
#order-dialog .choice input:checked+span{background:#e9edfb;border-color:#9aaddf;color:var(--blue)}
#order-dialog .choice small{font-size:var(--text-small);color:#a38a76;margin-top:5px}
#order-dialog .flavor-options{grid-template-columns:1fr 1fr;gap:10px}
#order-dialog .flavor-choice>span{height:100%;border:1px solid #e0d3c2;border-radius:6px;padding:12px;background:#fffdf7;transition:border-color .2s,background .2s;position:relative}
#order-dialog .flavor-choice input:checked+span{border-color:#96a8df;background:#f0f2fc;color:var(--burgundy)}
#order-dialog .photo-choice>span{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:0 13px 13px;overflow:hidden;gap:0}
.photo-choice img{display:block;width:calc(100% + 26px);height:104px;margin:0 -13px 10px;object-fit:cover;object-position:50% 54%;background:#f0eadf;border-radius:5px 5px 0 0;pointer-events:none}
.photo-choice>span>span{display:block}
#order-dialog .photo-choice strong{font-size:var(--text-ui);font-weight:400;display:block;line-height:1.4}
.photo-choice small{font-size:var(--text-small);line-height:1.6;display:block;color:#a38a76;margin-top:4px}
#order-dialog .flavor-choice b{position:absolute;right:8px;top:8px;width:17px;height:17px;font-size:var(--text-ui);border-radius:50%;display:grid;place-items:center;background:var(--blue);color:white;opacity:0}
#order-dialog .flavor-choice input:checked+span b{opacity:1}
.config-gentle-note{font-family:var(--serif);font-size:21px;color:#a28770;text-align:center;margin:0 0 22px}
#order-dialog .coating-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#order-dialog .coating-choice>span{display:flex;flex-direction:column;align-items:flex-start;padding:0 10px 9px;overflow:hidden}
.coating-sample{width:calc(100% + 20px);height:47px;margin:0 -10px 8px;background-color:#eee8da;background-repeat:no-repeat;background-size:240%;background-position:20% 54%;border-bottom:1px solid #b8a18a20}
.coating-fondant{background-image:url('/assets/images/configurator/fondant-raspberry.webp')}
.coating-buttercream{background-image:url('/assets/images/configurator/buttercream-raspberry.webp')}
.coating-ganache{background-image:url('/assets/images/configurator/ganache-raspberry.webp')}
#order-dialog .coating-choice strong{font-size:var(--text-ui);font-weight:400;line-height:1.4}
.coating-choice small{font-size:var(--text-small);color:#a38a76;margin-top:3px}
#order-dialog .color-options{justify-content:space-between;padding:1px 5px 0;gap:8px}
#order-dialog .color-choice{display:flex;flex-direction:column;align-items:center;flex:1;text-align:center}
#order-dialog .swatch{width:32px;height:32px;border:4px solid #fcf9f0;box-shadow:0 0 0 1px #d8c8b4;margin-bottom:7px}
#order-dialog .swatch-pink{background:#eab2c0}#order-dialog .swatch-blue{background:#a4b8ee}#order-dialog .swatch-cream{background:#f4e3bd}#order-dialog .swatch-green{background:#c4d5a8}
#order-dialog .color-choice input:checked+.swatch{box-shadow:0 0 0 1.5px var(--blue)}
#order-dialog .color-choice small{font-size:var(--text-small);line-height:1.4;max-width:90px}
#order-dialog .decoration-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
#order-dialog .decoration-choice>span{padding:5px 5px 9px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.decoration-choice img{width:65px;height:43px;object-fit:contain;display:block;pointer-events:none}
#order-dialog .decoration-choice strong{font-size:var(--text-ui);font-weight:400;line-height:1.5;max-width:90px}
.minimal-decoration{height:43px;display:grid;place-items:center;font-family:var(--serif);font-size:43px;color:#c7af85;font-style:normal;line-height:1}
#order-dialog .inscription-field{font-size:var(--text-ui);margin:0 0 22px}
#order-dialog .inscription-field input{font-size:var(--text-control);background:#fffdf7;border-color:#e0d3c2;border-radius:5px;padding:11px 12px;margin-top:8px}
#order-dialog .config-navigation{margin-top:auto;position:sticky;bottom:0;padding:18px 0 22px;z-index:5;background:linear-gradient(#fcf9f000,#fcf9f0 12px);border-color:#e6d9c8;min-height:88px;flex-wrap:wrap;gap:12px}
#order-dialog .config-navigation .button{font-size:var(--text-control);min-height:44px;border-radius:4px;padding:12px 17px;gap:20px}
#order-dialog .config-navigation .text-link{font-size:var(--text-meta)}
#order-dialog .review-title{font-size:34px}
#order-dialog .field input,#order-dialog .field textarea{border-radius:5px;background:#fffdf7}
@media(max-height:810px) and (min-width:741px){
  #order-dialog .config-preview{padding-top:22px;padding-bottom:16px}#order-dialog .preview-description h3{font-size:32px}.preview-disclaimer{margin-top:8px}#order-dialog .config-form-panel{padding-top:26px}#order-dialog .config-form-panel h2{font-size:43px;margin-bottom:17px}
}
@media(max-width:1000px) and (min-width:741px){
  #order-dialog .configurator{grid-template-columns:.9fr 1fr}#order-dialog .config-preview{padding:25px 24px 20px}#order-dialog .config-form-panel{padding:30px 25px 0}.preview-masthead>span{display:none}#order-dialog .preview-description h3{font-size:30px}.preview-interaction{font-size:var(--text-small)}.preview-interaction svg{width:18px}#order-dialog .coating-choice strong{font-size:var(--text-ui)}
}
@media(max-width:740px){
  #order-dialog{width:100%;height:100svh;max-width:100%;max-height:100svh;margin:0;border-radius:0;overflow:auto}
  #order-dialog .configurator{display:block;height:auto;min-height:100%}
  #order-dialog>.dialog-close{position:fixed;top:10px;right:10px;z-index:20;background:#fcf9f0e8}
  #order-dialog .config-preview{position:sticky;top:0;z-index:8;height:252px;min-height:252px;max-height:252px;display:block;padding:20px 20px 12px;box-shadow:0 5px 20px #654d3210;text-align:left;border-bottom:1px solid #ddcfba}
  #order-dialog .config-preview .wordmark{width:116px;position:relative;margin:0}
  .preview-masthead>span{display:none}
  #order-dialog .config-cake-wrap{position:absolute;left:auto;right:-7px;top:-13px;bottom:auto;width:280px;height:280px;min-height:0;max-height:none;margin:0;aspect-ratio:1}
  #order-dialog .preview-description{position:absolute;left:20px;right:auto;top:98px;bottom:auto;text-align:left;padding:0;width:133px;z-index:3;pointer-events:none}
  #order-dialog .preview-description>.eyebrow{display:none}
  #order-dialog .preview-description h3{font-size:27px;line-height:1;margin:0 0 8px}
  #order-dialog .preview-description>p{font-size:var(--text-small);line-height:1.7;max-width:125px}
  .preview-decoration{font-size:var(--text-ui);padding:3px 6px;margin-top:6px}
  .preview-disclaimer{display:none}
  .preview-interaction{position:absolute;bottom:12px;left:20px;right:20px;border:0;padding:0;font-size:var(--text-small);pointer-events:none}
  .preview-interaction>span{gap:4px}.preview-interaction svg{width:16px;height:16px}.pointer-hint{font-size:0}.pointer-hint:after{content:'Húzd el a forgatáshoz';font-size:var(--text-ui)}
  .preview-interaction button{pointer-events:auto;background:#fcf9f090;border-radius:15px;padding:5px 7px}
  #order-dialog .config-form-panel{padding:25px 22px 0;overflow:visible}
  #order-dialog .config-form-panel h2{font-size:43px;line-height:.95;margin:12px 0 20px}
  #order-dialog .config-steps{margin-bottom:23px;padding-bottom:16px}
  #order-dialog .config-steps li{font-size:var(--text-ui);gap:5px}
  #order-dialog fieldset{margin-bottom:22px}
  #order-dialog legend{font-size:var(--text-ui)}
  #order-dialog .config-navigation{bottom:0;position:sticky;min-height:83px;padding:17px 0 22px;gap:8px}
  #order-dialog .config-navigation .button{font-size:var(--text-control);gap:12px;padding:11px 14px;min-height:44px}
  #order-dialog .flavor-options{gap:8px}
  .photo-choice img{height:88px}
  #order-dialog .photo-choice>span{padding:0 10px 10px}
  .photo-choice img{width:calc(100% + 20px);margin:0 -10px 8px}
  #order-dialog .photo-choice strong{font-size:var(--text-ui)}
  .photo-choice small{font-size:var(--text-small)}
  .config-gentle-note{font-size:var(--text-ui);margin-bottom:16px}
  #order-dialog .coating-choice strong{font-size:var(--text-ui)}
  .coating-choice small{font-size:var(--text-small)}
  #order-dialog .coating-choice>span{padding:0 7px 8px}
  .coating-sample{width:calc(100% + 14px);margin-left:-7px;margin-right:-7px;height:42px}
  #order-dialog .decoration-options{gap:6px}
  .decoration-choice img{width:52px;height:40px}
  #order-dialog .decoration-choice strong{font-size:var(--text-ui)}
  #order-dialog .inscription-field input{font-size:var(--text-control)}
  #order-dialog #cake-inscription{font-size:var(--text-small)}
}
@media(max-width:360px){
  #order-dialog .config-preview{height:230px;min-height:230px;max-height:230px;padding-left:16px}
  #order-dialog .config-cake-wrap{width:244px;height:244px;right:-14px;top:-6px}
  #order-dialog .preview-description{left:16px;width:112px;top:91px}
  #order-dialog .preview-description h3{font-size:24px}
  #order-dialog .preview-description>p{font-size:var(--text-small);max-width:108px}
  #order-dialog .config-preview .wordmark{width:103px}
  .preview-interaction{left:16px;right:16px}
  #order-dialog .config-form-panel{padding-left:16px;padding-right:16px}
  #order-dialog .coating-choice strong{font-size:var(--text-ui)}.coating-choice small{font-size:var(--text-small)}
}
@media(prefers-reduced-motion:reduce){
  .cake-photo-model,.cake-coating-tint{transition:none}.photo-arrived .cake-photo-composite{animation:none}
}

/* Readable option labels at ordinary laptop and phone sizes. */
#order-dialog .config-form-panel>div>.eyebrow{font-size:var(--text-meta)}
#order-dialog legend{font-size:var(--text-ui)}
#order-dialog .coating-choice strong{font-size:var(--text-ui)}
.coating-choice small{font-size:var(--text-small)}
#order-dialog .color-choice small{font-size:var(--text-small)}
#order-dialog .decoration-choice strong{font-size:var(--text-ui)}
.photo-choice small{font-size:var(--text-small)}
#order-dialog .preview-description>p{font-size:var(--text-small)}
.preview-interaction{font-size:var(--text-small)}
#order-dialog .config-navigation #config-next,#order-dialog .config-navigation #config-submit{margin-left:auto}
@media(max-width:740px){
 #order-dialog .config-form-panel h2{font-size:36px;margin-bottom:16px}
 #order-dialog .config-form-panel>div>.eyebrow{font-size:var(--text-meta)}
 #order-dialog .coating-choice strong{font-size:var(--text-ui)}
 .coating-choice small{font-size:var(--text-small)}
 #order-dialog .decoration-choice strong{font-size:var(--text-ui)}
 #order-dialog .color-choice small{font-size:var(--text-small)}
 #order-dialog .preview-description>p{font-size:var(--text-small)}
 .photo-choice small{font-size:var(--text-small)}
}
@media(max-width:360px){#order-dialog .coating-choice strong{font-size:var(--text-ui)}.coating-choice small{font-size:var(--text-small)}#order-dialog .preview-description>p{font-size:var(--text-small)}}
@media(min-width:741px) and (max-width:1000px){#order-dialog .coating-choice strong{font-size:var(--text-ui);overflow-wrap:anywhere}.coating-choice small{font-size:var(--text-small)}}

/* The board and camera stay fixed; only the food mesh changes diameter. */
.cake-size-plate,.cake-size-body{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;visibility:hidden}
.cake-size-plate{z-index:0}.cake-size-body{z-index:1}
#config-cake[data-geometry=diameter] .cake-size-plate,#config-cake[data-geometry=diameter] .cake-size-body{visibility:visible}
#order-dialog #config-cake[data-geometry=diameter] .config-cake-photo{visibility:hidden}
#config-cake[data-geometry=diameter] .cake-coating-tint{z-index:2}
#config-cake[data-geometry=diameter] .cake-photo-composite{mask-image:none;-webkit-mask-image:none}
#config-cake[data-geometry=diameter].photo-arrived .cake-photo-composite{animation:none}

.cake-size-plate{mask-image:url('/assets/images/configurator/plate-silhouette.svg');mask-size:contain;mask-position:center;mask-repeat:no-repeat;-webkit-mask-image:url('/assets/images/configurator/plate-silhouette.svg');-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}

/* A real orbit camera views the cake's complete three-dimensional geometry. */
.cake-webgl-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;outline:none}
#config-cake[data-renderer=webgl-3d] .cake-photo-model{display:none}
#config-cake[data-renderer=static-photo] .cake-photo-model{transform:none;transition:none}
#config-cake[data-renderer=static-photo] .cake-photo-space{cursor:default}
#config-cake[data-renderer=static-photo] .preview-loading{white-space:normal;width:90%;text-align:center;bottom:6px;border-radius:4px}
.preview-interaction button:disabled{opacity:.65;cursor:default}
@media(max-width:740px){
 .preview-interaction .pointer-hint{font-size:var(--text-small)}
 .preview-interaction .pointer-hint:after{content:none}
}