html,
body{
min-height:100%;
min-height:100vh;
min-height:100dvh;
margin:0;
padding:0;
background:#050708;
overflow-x:hidden;
overflow-x:clip;
}
html{
/* The root canvas can be exposed while Samsung Internet resizes its UI. */
background-color:#050708;
}
body{
box-sizing:border-box;
padding-bottom:env(safe-area-inset-bottom, 0px);
}
/*
* Keep the WordPress/Elementor canvas dark if this app is rendered through a
* page template instead of the standalone production route. These containers
* must not reintroduce theme spacing below the generator.
*/
body > .site,
body > #page,
.site-main,
.page,
.entry-content,
.elementor,
.elementor-section-wrap,
.elementor-location-single,
.elementor-widget-wrap,
.elementor-widget-container{
background-color:#050708;
}
body > .site,
body > #page,
.site-main,
.page,
.entry-content,
.elementor,
.elementor-section-wrap,
.elementor-location-single{
min-height:100vh;
min-height:100dvh;
margin-bottom:0;
padding-bottom:0;
}
.fob-zone.fob-pro-option::after{content:"🔒 PRO";position:absolute;z-index:3;top:2px;right:2px;width:auto;height:auto;padding:2px 3px;border:1px solid #c79645;border-radius:3px;box-shadow:none;background:rgba(5,6,7,.92);color:#e2b765;font:700 clamp(6px,.75vw,8px)/1 sans-serif;letter-spacing:.03em;white-space:nowrap;pointer-events:none}.fob-pro-backdrop{position:fixed;z-index:9999;inset:0;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.78)}.fob-pro-modal{position:relative;width:min(100%,430px);padding:32px;border:1px solid #c79645;border-radius:18px;background:#111518;color:#fff;box-shadow:0 22px 70px #000;font-family:Arial,sans-serif}.fob-pro-modal p{color:#c79645;font-weight:800;letter-spacing:.16em}.fob-pro-modal h2{font-size:30px}.fob-pro-modal li{margin:10px 0}.fob-pro-modal a{display:block;margin-top:24px;padding:14px;border-radius:8px;background:#c79645;color:#090909;text-align:center;text-decoration:none;font-weight:900}.fob-pro-close{position:absolute;right:12px;top:8px;border:0;background:transparent;color:#fff;font-size:30px;cursor:pointer}
#fit-generator{
position:relative;
width:100%;
max-width:941px;
margin:0 auto;
line-height:0;
overflow:hidden;
user-select:none;
-webkit-user-select:none;
background:#050708;
}
#fit-generator .fit-generator-image{
display:block;
width:100%;
height:auto;
}
/* CLICK ZONES */
#fit-generator .fob-zone,
#fit-generator #fit-generate-button{
position:absolute;
display:block;
margin:0;
padding:0;
border:0;
background:transparent;
appearance:none;
-webkit-appearance:none;
cursor:pointer;
outline:none;
box-sizing:border-box;
z-index:2;
-webkit-tap-highlight-color:transparent;
}
/* HOVER */
@media(hover:hover){
#fit-generator .fob-zone:hover{
border-radius:6px;
box-shadow:
inset 0 0 0 2px rgba(255,190,65,.75),
0 0 10px rgba(255,145,20,.55);
}
}
/* SELECTED */
#fit-generator .fob-zone.selected{
border-radius:6px;
box-shadow:
inset 0 0 0 2px #ffbd3c,
inset 0 0 12px rgba(255,160,25,.25),
0 0 8px rgba(255,176,35,.90),
0 0 18px rgba(255,132,0,.60);
}
/* CHECKMARK */
#fit-generator .fob-zone.selected::after{
content:"✓";
position:absolute;
top:4px;
right:4px;
width:clamp(16px,2.5vw,28px);
height:clamp(16px,2.5vw,28px);
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#f6aa22;
color:#111;
font-family:Arial,sans-serif;
font-size:clamp(11px,1.65vw,18px);
font-weight:900;
line-height:1;
box-shadow:
0 2px 7px rgba(0,0,0,.85);
}
/* DISABLED */
#fit-generator .fob-disabled{
pointer-events:none;
background:rgba(0,0,0,.32);
border-radius:6px;
}
/* GENERATE */
#fit-generator #fit-generate-button{
z-index:20;
border-radius:50px;
transition:
transform 80ms ease-out,
filter 80ms ease-out,
box-shadow 80ms ease-out;
}
@media(hover:hover){
#fit-generator #fit-generate-button:hover{
border-radius:50px;
box-shadow:
0 0 20px rgba(255,156,25,.75);
}
}
#fit-generator #fit-generate-button:active{
transform:scale(.97);
filter:brightness(1.08);
box-shadow:
0 0 12px rgba(255,205,105,.95),
0 0 25px rgba(255,156,25,.88);
}
#fit-generator #fit-generate-button::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:transparent;
pointer-events:none;
}
#fit-generator #fit-generate-button:active::before{
background:rgba(255,210,115,.08);
}
#fit-generator #fit-generate-button.is-generating{
cursor:wait;
}
#fit-generator #fit-generate-button.is-generating::before{
background:rgba(0,0,0,.58);
}
#fit-generator .fit-generate-status{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
gap:clamp(6px,1.4vw,12px);
color:#fff4d2;
font-family:Arial,sans-serif;
font-size:clamp(12px,2.2vw,22px);
font-weight:900;
line-height:1;
letter-spacing:.08em;
opacity:0;
pointer-events:none;
}
#fit-generator #fit-generate-button.is-generating .fit-generate-status{
opacity:1;
}
#fit-generator .fit-generate-spinner{
width:clamp(13px,2.2vw,22px);
height:clamp(13px,2.2vw,22px);
flex:0 0 auto;
border:2px solid rgba(255,255,255,.45);
border-top-color:#ffc34d;
border-radius:50%;
animation:fit-generate-spin .7s linear infinite;
}
@keyframes fit-generate-spin{
to{
transform:rotate(360deg);
}
}
@media(prefers-reduced-motion:reduce){
#fit-generator #fit-generate-button{
transition:none;
}
#fit-generator #fit-generate-button:active{
transform:none;
}
#fit-generator .fit-generate-spinner{
animation:none;
}
}
/* MOBILE */
@media(max-width:767px){
#fit-generator{
width:100%;
max-width:none;
}
#fit-generator .fob-zone.selected{
box-shadow:
inset 0 0 0 1.5px #ffc046,
inset 0 0 8px rgba(255,160,25,.22),
0 0 6px rgba(255,176,35,.85);
}
#fit-generator .fob-zone.selected::after{
top:2px;
right:2px;
}
}