/* V2.80 CLEAN PRODUCTION BUNDLE — generated from locked V2.79 live cascade. */

/* ===== planner-premium-292.css ===== */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#eee7db;color:#211b17;font-family:"DM Sans",sans-serif;-webkit-text-size-adjust:100%}
button,input,select{font:inherit}
button{border:0;cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}

:root{
  --cream:#f8f2e8;
  --paper:rgba(255,252,246,.94);
  --paper2:rgba(255,250,243,.88);
  --ink:#211710;
  --muted:#76776f;
  --line:rgba(255,255,255,.86);
  --orange:#d8643b;
  --orange2:#ee8056;
  --sage:#67865d;
  --sage-soft:#e9f2e4;
  --shadow:0 14px 34px rgba(81,61,39,.10);
}

body.planner-page{overflow-x:hidden}
.planner-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#eee7db;pointer-events:none}
.planner-bg img{width:100%;height:100%;object-fit:cover;filter:blur(22px) saturate(.85);transform:scale(1.13);opacity:.35}
.planner-bg i{position:absolute;inset:0;background:linear-gradient(180deg,rgba(248,243,233,.68),rgba(247,241,231,.80) 45%,rgba(245,238,226,.90))}

.planner-app{position:relative;z-index:1;width:min(100%,430px);min-height:100dvh;margin:0 auto;background:rgba(246,240,229,.38);overflow:hidden}
.planner-topbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;background:rgba(247,241,230,.78);border-bottom:1px solid rgba(255,255,255,.88);backdrop-filter:blur(20px) saturate(1.05)}
.back-home{width:50px;height:50px;border-radius:19px;display:grid;place-items:center;background:rgba(255,255,255,.82);color:#171511;border:1px solid rgba(255,255,255,.95);box-shadow:0 8px 18px rgba(74,57,39,.07)}
.topbar-copy{min-width:0;display:grid;gap:2px}
.topbar-copy strong{font:700 20px/1.1 "Manrope",sans-serif;letter-spacing:-.55px;white-space:nowrap}
.topbar-copy span{font-size:11px;line-height:1.25;color:#74786f;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-mark{height:38px;padding:0 14px;display:grid;place-items:center;border-radius:999px;background:rgba(255,252,247,.82);border:1px solid rgba(255,255,255,.96);font-size:10px;font-weight:900;letter-spacing:.6px;color:#6d635a;white-space:nowrap;box-shadow:0 7px 16px rgba(84,64,43,.05)}

.planner-scroll{padding:12px 12px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;overflow-x:hidden}

/* intro */
.planner-intro{position:relative;min-height:270px;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.92);box-shadow:var(--shadow);background:#f5eee3}
.planner-intro>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 50%}
.planner-intro::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(250,246,238,.97) 0%,rgba(250,246,238,.91) 43%,rgba(250,246,238,.38) 68%,rgba(250,246,238,.08) 100%)}
.intro-copy{position:relative;z-index:2;width:64%;min-height:270px;padding:20px 18px 18px;display:flex;flex-direction:column;align-items:flex-start}
.intro-kicker{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:rgba(80,104,69,.92);color:#fff;font-size:8.5px;line-height:1.1;font-weight:900;letter-spacing:1px;text-transform:uppercase}
.intro-copy h1{margin:16px 0 9px;font:700 39px/.88 "Playfair Display",serif;letter-spacing:-1.8px;color:#25170f}
.intro-copy p{margin:0;max-width:24ch;color:#66675f;font-size:11.5px;line-height:1.42;font-weight:600}
.intro-copy em{margin-top:auto;font:600 18px/1.02 "Caveat",cursive;color:#8b5c48;transform:rotate(-2deg)}

/* generic cards */
.premium-section{border-radius:28px;background:rgba(255,252,247,.90);border:1px solid rgba(255,255,255,.92);box-shadow:var(--shadow);padding:18px 14px;overflow:hidden}
.section-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;margin-bottom:13px}
.section-heading>div{min-width:0}
.section-heading span,.budget-feature-copy>span{display:block;color:#d66a43;font-size:9px;font-weight:900;letter-spacing:1.5px;margin-bottom:7px}
.section-heading h2,.budget-feature-copy h2{margin:0;font:700 34px/.96 "Playfair Display",serif;letter-spacing:-1.45px;color:#25170f}
.section-heading p,.budget-feature-copy p{margin:7px 0 0;color:#74766e;font-size:11px;line-height:1.45;font-weight:500;max-width:35ch}
.section-heading em,.budget-feature-head em,.budget-panel-head em,.days-title-line em{font:600 17px/1.05 "Caveat",cursive;color:#95634f;text-align:right;white-space:nowrap;transform:rotate(-3deg)}
.glass-panel{border-radius:24px;background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.96);box-shadow:0 8px 22px rgba(78,60,40,.06);padding:13px;overflow:hidden}
.glass-panel+ .glass-panel{margin-top:10px}
.panel-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:11px}
.panel-title strong{font:800 15px/1.15 "Manrope",sans-serif;color:#211d19}
.panel-title small{font-size:9px;color:#9a9c94;font-weight:700;white-space:nowrap}

/* family */
.family-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.family-card{min-width:0;border-radius:21px;padding:8px 8px 10px;border:1px solid #f2dece;background:linear-gradient(180deg,#fff9f3,#fffdf9);text-align:center;overflow:hidden}
.kids-card{border-color:#dce9d7;background:linear-gradient(180deg,#f4faf0,#fbfdf9)}
.family-visual{height:92px;border-radius:17px;overflow:hidden;background:#f8eee5;margin-bottom:7px}
.kids-card .family-visual{background:#edf6e9}
.family-visual img{width:100%;height:100%;object-fit:cover;object-position:center}
.family-name{display:grid;gap:1px;margin-bottom:8px}
.family-name strong{font:700 23px/.98 "Playfair Display",serif;color:#241711}
.family-name small{font-size:9px;color:#8e9088;font-weight:700}
.counter-control{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:5px;margin:0 auto 8px;max-width:138px}
.counter-control button{width:38px;height:38px;border-radius:13px;background:#fff;color:#d76d47;font-size:22px;line-height:1;box-shadow:0 6px 13px rgba(78,60,40,.06)}
.counter-control.green button{color:#66865d}
.counter-control b{font:700 24px/1 "Manrope",sans-serif;color:#221d19}
.family-card>p{margin:0;color:#97998f;font-size:8.5px;line-height:1.35;font-weight:500}
.child-ages{margin:7px 0 8px;padding:7px;border-radius:13px;background:rgba(255,255,255,.75);text-align:left}
.child-ages>strong{display:block;font-size:8.5px;margin-bottom:5px;color:#6b6e67}
.child-ages>div{display:grid;grid-template-columns:1fr;gap:4px}
.age-field{display:flex;align-items:center;gap:5px;font-size:7.5px;color:#7c7e78}
.age-field select{min-width:0;flex:1;height:27px;border:1px solid #ebe7df;border-radius:8px;background:#fff;color:#3b3a36;padding:0 4px;font-size:8px;font-weight:700}

.days-panel{margin-top:10px;background:linear-gradient(180deg,rgba(255,251,246,.91),rgba(255,255,255,.76))}
.days-title-line{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:8px;margin-bottom:11px}
.days-icon,.round-mini-icon{width:36px;height:36px;border-radius:13px;display:grid;place-items:center;color:#d76a42;background:#fff0e8}
.days-title-line>div:nth-child(2){min-width:0;display:grid;gap:1px}
.days-title-line strong{font:800 14px/1.15 "Manrope",sans-serif}
.days-title-line small{font-size:8.8px;line-height:1.25;color:#9a9b94;font-weight:600}
.days-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.days-row button{min-width:0;height:56px;border-radius:17px;background:#f1f0eb;color:#666a64;display:grid;align-content:center;justify-items:center;border:1px solid transparent}
.days-row b{font:800 17px/1 "Manrope",sans-serif}.days-row small{font-size:7px;font-weight:700;margin-top:3px;color:#979a93}
.days-row button.is-selected{color:#fff;background:linear-gradient(180deg,#ee8058,#df633c);border-color:#d55d37;box-shadow:0 9px 18px rgba(216,95,53,.18)}
.days-row button.is-selected small{color:#fff}
.days-hint{text-align:center;margin-top:8px;color:#777a73;font-size:8.5px;font-weight:800}

/* budget */
.budget-section{background:transparent;border:0;box-shadow:none;padding:0;overflow:visible}
.budget-feature-head{position:relative;min-height:255px;border-radius:28px;background:rgba(255,251,245,.93);border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow);overflow:hidden;padding:19px 16px}
.budget-feature-head::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,251,245,.98) 0%,rgba(255,251,245,.93) 51%,rgba(255,251,245,.35) 72%,rgba(255,251,245,.02) 100%);pointer-events:none}
.budget-feature-copy{position:relative;z-index:3;width:67%;min-width:0}
.budget-feature-copy h2{font-size:33px;line-height:.95;max-width:12ch}
.budget-feature-copy p{font-size:11px;max-width:24ch}
.budget-feature-head>img{position:absolute;z-index:1;right:-5px;bottom:-1px;width:48%;height:72%;object-fit:cover;object-position:center;border-radius:24px 0 24px 0}
.budget-feature-head>em{position:absolute;z-index:4;right:18px;top:20px;font-size:18px}
.budget-panel{position:relative;margin-top:10px;min-height:290px;padding:14px 13px 12px;background:rgba(255,252,248,.92)}
.budget-panel-head{position:relative;z-index:3;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:9px;align-items:start;margin-bottom:13px}
.round-mini-icon{width:40px;height:40px;border-radius:14px}.round-mini-icon.orange{color:#d7673e;background:#fff0e7}.round-mini-icon.green{color:#53744c;background:#e9f2e4}
.budget-panel-head>div:nth-child(2){display:grid;gap:2px;min-width:0}
.budget-panel-head strong{font:800 15px/1.12 "Manrope",sans-serif}.budget-panel-head small{font-size:8.8px;line-height:1.3;color:#92958d;font-weight:600}
.budget-panel-head em{font-size:16px}
.budget-options,.time-options{position:relative;z-index:4;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.budget-options button,.time-options button{height:49px;min-width:0;border-radius:16px;background:#f1f0eb;color:#62665f;font-size:10.5px;font-weight:800;border:1px solid transparent}
.budget-options button.is-selected,.time-options button.is-selected{background:#fff0e8;border-color:#e07b54;color:#c54f2a;box-shadow:0 7px 15px rgba(216,95,53,.09)}
.money-field{position:relative;z-index:4;display:block;margin-top:12px;width:68%}
.money-field>span{display:block;margin:0 0 5px 2px;color:#979a93;font-size:9px;font-weight:700}
.money-field>div{height:47px;border-radius:15px;border:1px solid #e7e3dc;background:rgba(250,249,246,.96);display:flex;align-items:center;padding:0 11px}
.money-field input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#34332f;font-size:12px;font-weight:700}.money-field b{font-size:9px;color:#979990;border-left:1px solid #ddd8d0;padding-left:10px}
.budget-bottom{min-height:80px;position:relative;margin-top:5px;display:flex;align-items:flex-end;overflow:visible}
.budget-bottom>span{position:relative;z-index:4;display:inline-flex;min-height:29px;align-items:center;padding:0 10px;border-radius:999px;background:rgba(249,248,244,.94);color:#7f827b;font-size:8px;font-weight:800;border:1px solid rgba(255,255,255,.94)}
.budget-bottom img{position:absolute;right:-13px;bottom:-12px;width:145px;height:125px;object-fit:cover;object-position:center;border-radius:23px 0 22px 0;z-index:2}
.time-panel{margin-top:10px;background:rgba(255,252,248,.92)}
.time-head{grid-template-columns:40px minmax(0,1fr) auto;margin-bottom:12px}.time-options{margin-top:2px}

/* taste */
.taste-section{padding:18px 14px;background:rgba(255,252,247,.92)}
.taste-heading h2{font-size:35px;max-width:13ch}.taste-heading p{max-width:30ch}
.taste-panel,.cuisine-panel,.allergy-panel,.avoid-panel{background:rgba(255,255,255,.77)}
.diet-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.diet-grid button{position:relative;grid-column:span 2;min-width:0;min-height:121px;border-radius:19px;background:#f6f4ef;border:1px solid rgba(255,255,255,.94);padding:7px 6px 8px;display:grid;grid-template-rows:68px auto auto;align-items:center;text-align:center;color:#24211d;overflow:hidden}
.diet-grid button:nth-child(4),.diet-grid button:nth-child(5){grid-column:span 3;grid-template-columns:48% 52%;grid-template-rows:auto auto;min-height:101px;text-align:left;padding:8px}
.diet-grid img{width:100%;height:68px;object-fit:cover;border-radius:14px;margin:0 auto}.diet-grid button:nth-child(4) img,.diet-grid button:nth-child(5) img{grid-row:1 / span 2;height:82px}
.diet-grid b{font:800 11px/1.05 "Manrope",sans-serif;min-width:0;overflow-wrap:anywhere}.diet-grid small{font-size:7.8px;line-height:1.18;color:#92958d;font-weight:700;min-width:0}
.diet-grid button.is-selected{background:#eaf4e6;border-color:#8caf81;box-shadow:0 8px 17px rgba(93,130,76,.10)}
.diet-grid button.is-selected::after{content:"✓";position:absolute;right:7px;top:7px;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#5f8558;color:white;font-size:12px;font-weight:900;box-shadow:0 4px 9px rgba(70,102,62,.16)}

.cuisine-panel{margin-top:10px}.cuisine-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.cuisine-grid label{position:relative;min-width:0;min-height:99px;border-radius:17px;background:#f7f5f0;border:1px solid rgba(255,255,255,.96);overflow:hidden;display:grid;grid-template-rows:70px auto;cursor:pointer}
.cuisine-grid input{position:absolute;opacity:0;pointer-events:none}
.cuisine-grid img{width:100%;height:70px;object-fit:cover}.cuisine-grid span{display:grid;place-items:center;padding:5px 3px 6px;text-align:center;font-size:8.4px;line-height:1.08;color:#282521;font-weight:700;overflow-wrap:anywhere}
.cuisine-grid label:has(input:checked){background:#eaf4e6;border-color:#88aa7d;box-shadow:0 8px 16px rgba(93,130,76,.09)}
.cuisine-grid label:has(input:checked)::after{content:"✓";position:absolute;right:5px;top:5px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#5f8558;color:white;font-size:10px;font-weight:900}

.allergy-panel{margin-top:10px}.allergen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.allergen-grid button{min-width:0;height:42px;border-radius:15px;background:#f5f3ef;color:#5f625c;padding:0 7px;display:flex;align-items:center;justify-content:flex-start;gap:6px;font-size:8.5px;font-weight:750;border:1px solid transparent;overflow:hidden}
.allergen-grid button span{flex:0 0 26px;width:26px;height:26px;border-radius:9px;background:#fff;display:grid;place-items:center;font-size:13px;line-height:1}.allergen-grid button.is-selected{background:#eaf4e6;border-color:#8cad80;color:#52734c}.allergen-grid button.is-selected span{background:#fff;color:#5c8256}
.allergen-grid button[data-allergen="Orašasti plodovi"],.allergen-grid button[data-allergen="Morski plodovi"]{grid-column:span 2}
.text-field{display:grid;gap:6px;margin-top:10px}.text-field>span{font-size:9px;color:#8b8f87;font-weight:800}.text-field>span small{font-weight:600}.text-field input{width:100%;height:47px;border-radius:15px;border:1px solid #e3dfd7;background:#faf9f6;padding:0 12px;outline:0;color:#34332f;font-size:11px;font-weight:600}.text-field input:focus{border-color:#e1a185;box-shadow:0 0 0 3px rgba(223,111,66,.07)}
.avoid-panel{margin-top:10px}

/* review */
.review-section{padding:18px 14px}.review-section .section-heading h2{font-size:36px}.review-card{background:rgba(255,255,255,.82)}
.review-head{display:grid;grid-template-columns:66px minmax(0,1fr);gap:10px;align-items:center;padding-bottom:12px;border-bottom:1px solid #eee9e1}.review-head img{width:66px;height:66px;object-fit:contain;border-radius:18px;background:#fff2ea}.review-head>div{display:grid;gap:2px}.review-head span,.review-lines span{font-size:8px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:#b86a4c}.review-head strong{font:800 15px/1.15 "Manrope",sans-serif}.review-head small{font-size:9px;color:#92958e;font-weight:600}
.review-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:12px 0}.review-stats div{background:#f5f3ee;border-radius:13px;padding:9px 5px;display:grid;gap:2px;text-align:center}.review-stats div:nth-child(-n+3){grid-column:span 2}.review-stats div:nth-child(n+4){grid-column:span 3}.review-stats small{font-size:7.5px;color:#9a9d95;font-weight:700}.review-stats b{font-size:10.5px}
.review-lines{border-top:1px solid #eee9e1;padding-top:9px;display:grid;gap:8px}.review-lines>div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:7px}.review-lines p{margin:0;text-align:right;color:#5f625c;font-size:9.5px;line-height:1.3;font-weight:700}.review-extra{margin-top:9px;padding:9px 10px;border-radius:12px;background:#f4f3ef;color:#6d7069;font-size:9px;line-height:1.4;font-weight:650}
.generate-plan{margin-top:12px;width:100%;height:58px;border-radius:21px;background:linear-gradient(90deg,#ed744b,#dd603a);color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font:800 14px/1 "Manrope",sans-serif;box-shadow:0 12px 25px rgba(209,83,42,.22)}.generate-plan:active{transform:scale(.985)}.generate-plan:disabled{opacity:.78}

@media(max-width:370px){
  .planner-scroll{padding-left:10px;padding-right:10px}.premium-section{padding:16px 11px}.planner-topbar{grid-template-columns:48px minmax(0,1fr) auto;padding-left:12px;padding-right:12px;gap:9px}.back-home{width:46px;height:46px}.topbar-copy strong{font-size:18px}.topbar-copy span{font-size:9.5px}.topbar-mark{height:35px;padding:0 11px;font-size:9px}
  .intro-copy h1{font-size:35px}.section-heading h2,.budget-feature-copy h2{font-size:31px}.section-heading em{font-size:15px}.budget-feature-copy{width:69%}.budget-feature-head>em{font-size:16px;right:12px}.budget-feature-head>img{width:47%}
  .panel-title strong{font-size:14px}.panel-title small{font-size:8px}.family-name strong{font-size:21px}.family-visual{height:84px}.counter-control{grid-template-columns:35px 1fr 35px}.counter-control button{width:35px;height:35px}
  .days-row{gap:3px}.days-row button{height:52px;border-radius:15px}.days-row b{font-size:15px}.days-row small{font-size:6.4px}
  .budget-options,.time-options{gap:4px}.budget-options button,.time-options button{height:46px;font-size:9.5px}.money-field{width:70%}.budget-bottom img{width:132px;height:116px}
  .diet-grid{gap:5px}.diet-grid button{min-height:115px;grid-template-rows:63px auto auto;padding:6px 4px}.diet-grid img{height:63px}.diet-grid b{font-size:10px}.diet-grid small{font-size:7px}.diet-grid button:nth-child(4),.diet-grid button:nth-child(5){min-height:95px}.diet-grid button:nth-child(4) img,.diet-grid button:nth-child(5) img{height:76px}
  .cuisine-grid{gap:5px}.cuisine-grid label{min-height:94px;grid-template-rows:66px auto}.cuisine-grid img{height:66px}.cuisine-grid span{font-size:7.6px}.allergen-grid{gap:5px}.allergen-grid button{font-size:7.8px;padding:0 5px;gap:4px}.allergen-grid button span{flex-basis:24px;width:24px;height:24px;font-size:12px}
}

@media(max-width:330px){
  .topbar-mark{display:none}.planner-topbar{grid-template-columns:46px minmax(0,1fr)}.intro-copy{width:70%}.intro-copy h1{font-size:32px}.section-heading{grid-template-columns:1fr}.section-heading em{display:none}.budget-feature-copy{width:72%}.budget-feature-copy h2{font-size:28px}.budget-feature-head>em,.budget-panel-head em,.days-title-line em{display:none}.budget-panel-head,.time-head{grid-template-columns:38px minmax(0,1fr)}.family-grid{gap:6px}.family-visual{height:76px}.family-name strong{font-size:19px}.allergen-grid{grid-template-columns:1fr 1fr}.allergen-grid button[data-allergen="Orašasti plodovi"],.allergen-grid button[data-allergen="Morski plodovi"]{grid-column:auto}
}

@media(min-width:481px){body{background:#e9e5dd}.planner-app{box-shadow:0 0 0 1px rgba(30,30,30,.03),0 20px 60px rgba(30,30,30,.08)}}

/* V2.9.1 — glass header + stronger blurred food backdrop, visual-only update */
.planner-bg{
  background:#ece4d8;
}
.planner-bg img{
  filter:blur(18px) saturate(.95) contrast(.98);
  transform:scale(1.10);
  opacity:.54;
}
.planner-bg i{
  background:
    linear-gradient(180deg,rgba(248,243,233,.42),rgba(247,241,231,.55) 42%,rgba(245,238,226,.70)),
    radial-gradient(circle at 88% 12%,rgba(215,231,203,.14),transparent 30%),
    radial-gradient(circle at 10% 74%,rgba(232,190,164,.13),transparent 34%);
}
.planner-app{
  background:rgba(246,240,229,.16);
}
.planner-topbar{
  background:linear-gradient(180deg,rgba(255,252,246,.45),rgba(248,241,231,.24));
  border-bottom:1px solid rgba(255,255,255,.66);
  backdrop-filter:blur(18px) saturate(1.18);
  -webkit-backdrop-filter:blur(18px) saturate(1.18);
  box-shadow:0 8px 24px rgba(80,60,39,.035),inset 0 1px 0 rgba(255,255,255,.45);
}
.back-home{
  background:rgba(255,255,255,.60);
  border-color:rgba(255,255,255,.82);
  box-shadow:0 8px 18px rgba(74,57,39,.055),inset 0 1px 0 rgba(255,255,255,.56);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.topbar-copy strong{
  font-weight:800;
  letter-spacing:-.65px;
  text-shadow:0 1px 0 rgba(255,255,255,.30);
}
.topbar-copy span{
  color:#6f746c;
  font-weight:700;
}
.topbar-mark{
  background:rgba(255,252,247,.54);
  border-color:rgba(255,255,255,.80);
  box-shadow:0 7px 16px rgba(84,64,43,.035),inset 0 1px 0 rgba(255,255,255,.46);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* V2.11 — planner rebuilt in the locked Home V2.10G visual system */
:root{
  --home-bg:#F6F0E5;
  --home-paper:#FFFDF9;
  --home-ink:#241A14;
  --home-muted:#6F716C;
  --home-orange:#D8613B;
  --home-orange-dark:#C85131;
  --home-sage:#66815F;
  --home-sage-dark:#51724D;
  --home-shadow:0 18px 44px rgba(73,55,38,.10);
  --home-shadow-soft:0 10px 28px rgba(73,55,38,.07);
  --planner-gap:12px;
}
html,body{
  width:100%;
  margin:0;
  background:var(--home-bg);
  color:var(--home-ink);
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;
}
body.planner-page{
  min-height:100dvh;
  overflow-x:hidden;
  background:#F6F0E5;
}
a{color:inherit;text-decoration:none}
button,a,label,input,select{ -webkit-tap-highlight-color:transparent; }
button,.back-home,.days-row button,.budget-options button,.time-options button,.diet-grid button,.cuisine-grid label,.allergen-grid button,.generate-plan{
  touch-action:manipulation;
}

/* Same recognizable, lightly blurred food backdrop as the locked home. */
.planner-bg{
  background:#EFE6D9;
}
.planner-bg img{
  object-position:64% 47%;
  filter:blur(5px) saturate(1.10) contrast(1.035) brightness(1.01);
  transform:scale(1.055);
  opacity:1;
}
.planner-bg i{
  background:
    linear-gradient(180deg,rgba(249,245,237,.10),rgba(248,242,232,.18) 47%,rgba(247,240,229,.29)),
    radial-gradient(circle at 84% 17%,rgba(225,239,214,.08),transparent 29%),
    radial-gradient(circle at 11% 77%,rgba(244,192,158,.08),transparent 32%);
}
.planner-app{
  width:min(100%,480px);
  min-height:100dvh;
  margin:0 auto;
  background:rgba(246,240,229,.08);
  overflow:visible;
}

/* Glass topbar uses the same home card treatment. */
.planner-topbar{
  grid-template-columns:48px minmax(0,1fr) auto;
  gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:rgba(255,252,247,.77);
  border-bottom:1px solid rgba(255,255,255,.82);
  box-shadow:0 10px 28px rgba(73,55,38,.07),inset 0 1px 0 rgba(255,255,255,.62);
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
}
.back-home{
  width:46px;
  height:46px;
  border-radius:17px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.91);
  color:#2C2A25;
  border:1px solid rgba(255,255,255,.98);
  box-shadow:0 9px 18px rgba(73,55,38,.08),0 3px 0 rgba(73,55,38,.045);
}
.topbar-copy{gap:1px}
.topbar-copy strong{
  font:800 19px/1.1 "Manrope",sans-serif;
  letter-spacing:-.55px;
  color:#2B211B;
}
.topbar-copy span{
  color:#74776F;
  font-size:10.5px;
  font-weight:700;
}
.topbar-mark{
  height:36px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(204,206,171,.54);
  color:#4D5140;
  border:1px solid rgba(255,255,255,.76);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 7px 14px rgba(73,55,38,.05);
  font-size:8.7px;
  letter-spacing:.72px;
}

.planner-scroll{
  padding:var(--planner-gap) 12px calc(22px + env(safe-area-inset-bottom));
  gap:var(--planner-gap);
}

/* Intro = same hero language as the locked home. */
.planner-intro{
  min-height:252px;
  border-radius:31px;
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 20px 44px rgba(73,52,35,.13),inset 0 1px 0 rgba(255,255,255,.34);
  background:#E8D8C8;
}
.planner-intro>img{
  object-position:66% 52%;
  transform:scale(1.02);
}
.planner-intro::after{
  background:
    linear-gradient(90deg,
      rgba(250,245,237,.91) 0%,
      rgba(250,245,237,.84) 19%,
      rgba(250,245,237,.66) 39%,
      rgba(250,245,237,.36) 55%,
      rgba(250,245,237,.12) 69%,
      rgba(250,245,237,0) 81%),
    radial-gradient(circle at 22% 72%,rgba(250,245,237,.72),rgba(250,245,237,.30) 36%,rgba(250,245,237,0) 64%);
}
.intro-copy{
  width:66%;
  min-height:252px;
  padding:16px 18px 17px;
}
.intro-kicker{
  min-height:30px;
  padding:0 12px;
  background:rgba(204,206,171,.68);
  color:#414331;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 17px rgba(91,85,63,.06);
  font-size:8px;
  letter-spacing:.75px;
}
.intro-copy h1{
  margin:13px 0 8px;
  font:700 39px/.92 "Playfair Display",serif;
  letter-spacing:-1.9px;
  color:#2C1C14;
}
.intro-copy p{
  color:#3F423D;
  font-size:11.2px;
  line-height:1.43;
  font-weight:650;
  max-width:22ch;
  text-shadow:0 1px 0 rgba(255,255,255,.65);
}
.intro-copy em{
  margin-top:auto;
  font:600 22px/.94 "Caveat",cursive;
  color:#A64F2F;
  transform:rotate(-6deg);
  text-align:left;
}

/* Every step is now a home-style premium card. */
.premium-section{
  border-radius:31px;
  background:rgba(255,252,247,.94);
  border:1px solid rgba(255,255,255,.93);
  box-shadow:0 16px 38px rgba(70,51,36,.10),inset 0 1px 0 rgba(255,255,255,.66);
  padding:17px 13px;
}
.section-heading{
  gap:12px;
  margin-bottom:12px;
  align-items:start;
}
.section-heading span,.budget-feature-copy>span{
  color:var(--home-orange);
  font-size:8px;
  letter-spacing:1.15px;
  margin-bottom:6px;
}
.section-heading h2,.budget-feature-copy h2{
  font:700 32px/.96 "Playfair Display",serif;
  letter-spacing:-1.35px;
  color:#2A1D16;
}
.section-heading p,.budget-feature-copy p{
  margin-top:7px;
  color:#71746E;
  font-size:10.7px;
  line-height:1.42;
  font-weight:550;
}
.section-heading em,.budget-feature-head em,.budget-panel-head em,.days-title-line em{
  font:600 18px/.96 "Caveat",cursive;
  color:#96624D;
  text-align:left;
  transform:rotate(-5.5deg);
  white-space:nowrap;
}

.glass-panel{
  border-radius:25px;
  background:rgba(255,255,255,.80);
  border:1px solid rgba(255,255,255,.96);
  box-shadow:0 10px 25px rgba(78,60,40,.065),inset 0 1px 0 rgba(255,255,255,.62);
  padding:13px;
}
.glass-panel + .glass-panel{margin-top:var(--planner-gap)}
.panel-title{margin-bottom:11px}
.panel-title strong{
  font:800 15px/1.15 "Manrope",sans-serif;
  color:#2A2420;
}
.panel-title small{font-size:8.7px;color:#92958D}

/* Family cards: premium photo tiles + tactile counters. */
.family-grid{gap:9px}
.family-card{
  border-radius:22px;
  padding:8px 8px 10px;
  border:1px solid rgba(235,214,197,.72);
  background:linear-gradient(180deg,#FFF8F2,#FFFDF9);
  box-shadow:0 8px 18px rgba(80,57,39,.045),inset 0 1px 0 rgba(255,255,255,.72);
}
.kids-card{
  border-color:rgba(206,226,198,.82);
  background:linear-gradient(180deg,#F1F8ED,#FBFDF9);
}
.family-visual{
  height:102px;
  border-radius:18px;
  margin-bottom:8px;
  box-shadow:0 9px 17px rgba(74,52,35,.08);
}
.family-visual img{object-position:center 46%}
.family-name strong{font-size:24px}
.counter-control{
  grid-template-columns:40px 1fr 40px;
  max-width:143px;
  margin-bottom:8px;
}
.counter-control button{
  width:40px;
  height:40px;
  border-radius:14px;
  color:var(--home-orange);
  background:#FFF;
  box-shadow:0 8px 14px rgba(78,60,40,.08),0 3px 0 rgba(78,60,40,.045);
}
.counter-control.green button{color:var(--home-sage)}
.counter-control b{font-size:24px}
.family-card>p{font-size:8.3px;color:#8E9189}

/* Days = home-style orange selected pills. */
.days-panel{
  background:linear-gradient(180deg,rgba(255,251,246,.94),rgba(255,255,255,.82));
}
.days-title-line{grid-template-columns:38px minmax(0,1fr) 92px;gap:8px}
.days-title-line em{width:92px}
.days-icon,.round-mini-icon{
  width:38px;height:38px;border-radius:14px;
  color:var(--home-orange);
  background:#FBE9DE;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58);
}
.days-row{gap:5px}
.days-row button{
  height:58px;
  border-radius:17px;
  background:#F2F0EB;
  border:1px solid rgba(255,255,255,.74);
  box-shadow:0 6px 12px rgba(76,59,42,.035),0 2px 0 rgba(76,59,42,.025);
}
.days-row button.is-selected{
  background:linear-gradient(145deg,#F1794D,#DA5E39);
  border-color:#D9613D;
  box-shadow:0 10px 18px rgba(208,83,42,.18),0 4px 0 rgba(174,64,29,.12);
}
.days-hint{font-size:8.6px}

/* Budget hero and panels inherit the same home card ratios. */
.budget-section{background:transparent;border:0;box-shadow:none;padding:0}
.budget-feature-head{
  min-height:236px;
  border-radius:31px;
  background:rgba(255,252,247,.94);
  border:1px solid rgba(255,255,255,.93);
  box-shadow:0 16px 38px rgba(70,51,36,.10),inset 0 1px 0 rgba(255,255,255,.66);
  padding:17px 15px;
}
.budget-feature-head::after{
  background:linear-gradient(90deg,rgba(255,251,245,.96),rgba(255,251,245,.89) 48%,rgba(255,251,245,.34) 70%,rgba(255,251,245,0));
}
.budget-feature-copy{width:66%}
.budget-feature-copy h2{font-size:31px;max-width:12ch}
.budget-feature-head>img{
  width:49%;
  height:76%;
  right:-2px;
  bottom:-2px;
  border-radius:25px 0 25px 0;
  filter:drop-shadow(0 14px 16px rgba(70,48,31,.10));
}
.budget-feature-head>em{right:16px;top:17px;font-size:18px}
.budget-panel{margin-top:var(--planner-gap);min-height:0;background:rgba(255,252,248,.94)}
.budget-panel-head{grid-template-columns:40px minmax(0,1fr) 105px;gap:9px}
.budget-panel-head em{width:105px}
.budget-options,.time-options{gap:7px}
.budget-options button,.time-options button{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.80);
  background:#F2F0EB;
  box-shadow:0 6px 12px rgba(76,59,42,.035),0 2px 0 rgba(76,59,42,.025);
}
.budget-options button.is-selected,.time-options button.is-selected{
  background:linear-gradient(145deg,#F1794D,#DA5E39);
  color:#FFF;
  border-color:#D9613D;
  box-shadow:0 10px 18px rgba(208,83,42,.17),0 4px 0 rgba(174,64,29,.11);
}
.time-options button.is-selected{
  background:linear-gradient(145deg,#73966A,#557850);
  border-color:#5D7D57;
  box-shadow:0 10px 18px rgba(75,112,69,.16),0 4px 0 rgba(55,88,51,.10);
}
.money-field input{
  background:#FAF8F3;
  border-color:#E5DFD5;
  box-shadow:inset 0 1px 2px rgba(65,50,36,.03);
}
.budget-bottom img{filter:drop-shadow(0 13px 15px rgba(70,48,31,.10))}

/* Taste tiles = same premium imagery, more breathing room and depth. */
.taste-section{background:rgba(255,252,247,.94)}
.diet-grid{gap:8px}
.diet-grid button{
  border-radius:20px;
  background:#F6F3ED;
  border:1px solid rgba(255,255,255,.94);
  box-shadow:0 8px 17px rgba(73,55,38,.045),0 2px 0 rgba(73,55,38,.025);
  transition:transform .13s cubic-bezier(.2,.8,.2,1),box-shadow .13s ease,filter .13s ease;
}
.diet-grid img{border-radius:15px;box-shadow:0 7px 14px rgba(65,50,36,.07)}
.diet-grid button.is-selected{
  background:#E9F2E4;
  border-color:#8CAF81;
  box-shadow:0 10px 19px rgba(93,130,76,.11),0 3px 0 rgba(82,119,73,.07);
}
.cuisine-grid{gap:8px}
.cuisine-grid label{
  border-radius:18px;
  background:#F7F4EE;
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 8px 17px rgba(73,55,38,.045),0 2px 0 rgba(73,55,38,.025);
  transition:transform .13s cubic-bezier(.2,.8,.2,1),box-shadow .13s ease,filter .13s ease;
}
.cuisine-grid img{box-shadow:0 6px 14px rgba(65,50,36,.05)}
.cuisine-grid label:has(input:checked){
  background:#E9F2E4;
  border-color:#88AA7D;
  box-shadow:0 10px 18px rgba(93,130,76,.10),0 3px 0 rgba(82,119,73,.06);
}
.allergen-grid{gap:7px}
.allergen-grid button{
  height:44px;
  border-radius:15px;
  background:#F4F2ED;
  border:1px solid rgba(255,255,255,.76);
  box-shadow:0 6px 12px rgba(76,59,42,.035),0 2px 0 rgba(76,59,42,.025);
}
.allergen-grid button.is-selected{
  background:#E9F2E4;
  border-color:#8CAD80;
  box-shadow:0 8px 15px rgba(93,130,76,.10),0 3px 0 rgba(82,119,73,.06);
}
.text-field input{
  border-radius:16px;
  background:#FAF8F3;
  border-color:#E5DFD5;
}

/* Review + primary CTA mirrors the home orange button language. */
.review-card{background:rgba(255,255,255,.83)}
.review-head img{
  border-radius:18px;
  background:#F9E7DB;
  box-shadow:0 9px 17px rgba(73,55,38,.07);
}
.review-stats div{background:#F3F1EC;border:1px solid rgba(255,255,255,.64)}
.generate-plan{
  height:60px;
  border-radius:21px;
  background:linear-gradient(145deg,#F1784C,#DB5E39);
  box-shadow:0 13px 0 rgba(170,68,34,.10),0 17px 28px rgba(209,83,42,.18),inset 0 1px 0 rgba(255,255,255,.17);
}

/* Same tactile 3D UX as the locked home. */
.back-home,.counter-control button,.days-row button,.budget-options button,.time-options button,.diet-grid button,.cuisine-grid label,.allergen-grid button,.generate-plan{
  -webkit-user-select:none;
  user-select:none;
  transition:transform .13s cubic-bezier(.2,.8,.2,1),box-shadow .13s ease,filter .13s ease,background-color .13s ease;
  transform:translateZ(0);
}
.back-home:active{transform:translateY(3px) scale(.955);box-shadow:0 4px 8px rgba(55,43,31,.12)}
.counter-control button:active,.days-row button:active,.budget-options button:active,.time-options button:active,.allergen-grid button:active{
  transform:translateY(3px) scale(.95);
  box-shadow:0 3px 6px rgba(55,43,31,.08),inset 0 2px 3px rgba(62,48,34,.04);
}
.diet-grid button:active,.cuisine-grid label:active{transform:translateY(4px) scale(.975);box-shadow:0 4px 8px rgba(55,43,31,.08)}
.generate-plan:active{transform:translateY(4px) scale(.985);box-shadow:0 4px 0 rgba(170,68,34,.08),0 7px 12px rgba(209,83,42,.12)}
.back-home:focus-visible,.counter-control button:focus-visible,.days-row button:focus-visible,.budget-options button:focus-visible,.time-options button:focus-visible,.diet-grid button:focus-visible,.allergen-grid button:focus-visible,.generate-plan:focus-visible{
  outline:3px solid rgba(220,99,59,.22);
  outline-offset:2px;
}

/* Mobile fit / no accidental horizontal overflow. */
@media(max-width:390px){
  .planner-scroll{padding-left:10px;padding-right:10px}
  .planner-topbar{padding-left:12px;padding-right:12px}
  .planner-intro{min-height:238px}
  .intro-copy{min-height:238px;width:67%;padding-left:16px}
  .intro-copy h1{font-size:36px}
  .intro-copy em{font-size:20px}
  .premium-section{padding:16px 11px}
  .section-heading h2,.budget-feature-copy h2{font-size:30px}
  .section-heading em,.budget-feature-head em,.budget-panel-head em,.days-title-line em{font-size:15.5px}
  .family-visual{height:91px}
  .days-title-line{grid-template-columns:36px minmax(0,1fr) 78px}
  .days-title-line em{width:78px}
  .budget-panel-head{grid-template-columns:38px minmax(0,1fr) 86px}
  .budget-panel-head em{width:86px;font-size:14.5px}
}
@media(max-width:350px){
  .topbar-mark{display:none}
  .planner-topbar{grid-template-columns:46px minmax(0,1fr)}
  .planner-intro{min-height:224px}
  .intro-copy{min-height:224px;width:72%;padding:14px}
  .intro-copy h1{font-size:32px}
  .intro-copy p{font-size:9.8px}
  .intro-copy em{font-size:18px}
  .section-heading{grid-template-columns:1fr}
  .section-heading em{display:none}
  .days-title-line{grid-template-columns:36px minmax(0,1fr)}
  .days-title-line em{display:none}
  .budget-panel-head,.time-head{grid-template-columns:38px minmax(0,1fr)}
  .budget-panel-head em,.budget-feature-head>em{display:none}
  .family-visual{height:82px}
  .family-name strong{font-size:21px}
}
@media(min-width:481px){
  body{background:#E9E5DD}
  .planner-app{box-shadow:0 0 0 1px rgba(30,30,30,.03),0 20px 60px rgba(30,30,30,.08)}
}
@media(prefers-reduced-motion:reduce){
  .back-home,.counter-control button,.days-row button,.budget-options button,.time-options button,.diet-grid button,.cuisine-grid label,.allergen-grid button,.generate-plan{transition:none}
}


/* V2.9.2 — planner step 1 visual swap + fixed home footer */
:root{
  --dock-h:72px;
  --system-bottom:0px;
}
body.planner-page{
  overflow-x:hidden;
}
.planner-scroll{
  padding-bottom:calc(var(--dock-h) + 24px + var(--system-bottom) + env(safe-area-inset-bottom));
}
.family-visual{
  height:108px;
  background:transparent;
  box-shadow:none;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:2px 2px 0;
  overflow:visible;
}
.family-visual img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 12px 18px rgba(73,55,38,.12));
}
.family-card{
  overflow:visible;
}
.bottom-nav{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  width:min(calc(100% - 20px),460px);
  bottom:calc(8px + var(--system-bottom) + env(safe-area-inset-bottom));
  z-index:40;
  height:var(--dock-h);
  padding:6px 7px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:center;
  background:rgba(255,255,255,.93);
  border:1px solid rgba(255,255,255,.99);
  border-radius:27px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 16px 36px rgba(57,46,34,.13);
}
.nav-item{
  appearance:none;
  background:transparent;
  height:55px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  border-radius:18px;
  color:#737873;
  font-size:9.4px;
  font-weight:700;
}
.nav-icon{
  width:31px;
  height:29px;
  border-radius:12px;
  display:grid;
  place-items:center;
}
.nav-item.active{
  color:var(--home-orange);
  background:rgba(218,98,61,.07);
}
.nav-item.active .nav-icon{
  background:rgba(218,98,61,.08);
}
.camera-nav{
  height:62px;
  background:transparent;
  color:#80857F;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:1px;
  padding:0;
  margin:-11px 0 0;
}
.camera-bubble{
  width:52px;
  height:52px;
  border-radius:19px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(145deg,#F4774D,#E35F37);
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 12px 24px rgba(211,78,35,.23);
}
.camera-label{
  font-size:9.2px;
  font-weight:800;
  line-height:1;
}
.nav-item:focus-visible,.camera-nav:focus-visible{
  outline:3px solid rgba(220,99,59,.20);
  outline-offset:2px;
}
@media(max-width:390px){
  .family-visual{height:98px}
}
@media(max-width:355px){
  .bottom-nav{width:min(calc(100% - 16px),460px)}
}
@media(max-height:650px){
  :root{--dock-h:61px}
  .bottom-nav{height:61px}
  .nav-item{height:47px}
  .camera-bubble{width:45px;height:45px}
  .camera-nav{height:54px}
  .planner-scroll{padding-bottom:calc(var(--dock-h) + 20px + var(--system-bottom) + env(safe-area-inset-bottom))}
}

/* ===== app-chrome-216.css ===== */
/* Shared app chrome — V2.16 */
:root{
  --chrome-bg:rgba(48,52,45,.94);
  --chrome-text:#F7F1E8;
  --chrome-muted:#BFC5BA;
  --chrome-accent:#E2724B;
  --chrome-header-h:58px;
  --chrome-footer-h:60px;
}

/* HEADER */
.global-app-header{
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:0!important;
  width:100%!important;
  max-width:none!important;
  height:calc(var(--chrome-header-h) + env(safe-area-inset-top))!important;
  margin:0!important;
  padding:calc(env(safe-area-inset-top) + 7px) 14px 7px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  box-sizing:border-box!important;
  z-index:1000!important;
  background:var(--chrome-bg)!important;
  color:var(--chrome-text)!important;
  border:0!important;
  border-radius:0!important;
  transform:none!important;
  box-shadow:0 5px 16px rgba(22,24,20,.12)!important;
  backdrop-filter:blur(20px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.08)!important;
}
.global-header-copy{display:grid;gap:1px;min-width:0}
.global-header-copy strong{
  margin:0!important;
  font:800 18px/1 "Manrope",sans-serif!important;
  letter-spacing:-.45px!important;
  color:var(--chrome-text)!important;
  white-space:nowrap;
}
.global-header-copy span{
  font:700 9.2px/1.2 "DM Sans",sans-serif!important;
  color:var(--chrome-muted)!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.global-app-header .global-profile-button{
  position:relative!important;
  inset:auto!important;
  width:36px!important;
  height:36px!important;
  margin:0!important;
  padding:0!important;
  border-radius:12px!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.15)!important;
  box-shadow:none!important;
  color:var(--chrome-text)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transform:none!important;
}
.global-app-header .profile-dot{box-shadow:0 0 0 2px #30342D!important}

/* FOOTER — exact same geometry on every screen */
.bottom-nav,
.planner-bottom-nav,
.result-bottom-nav{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  max-width:none!important;
  height:calc(var(--chrome-footer-h) + env(safe-area-inset-bottom))!important;
  margin:0!important;
  padding:4px 8px calc(4px + env(safe-area-inset-bottom))!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:center!important;
  box-sizing:border-box!important;
  z-index:1000!important;
  background:var(--chrome-bg)!important;
  border:0!important;
  border-radius:0!important;
  transform:none!important;
  box-shadow:0 -5px 16px rgba(22,24,20,.12)!important;
  backdrop-filter:blur(20px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.08)!important;
}
.bottom-nav .nav-item,
.planner-bottom-nav .nav-item,
.result-bottom-nav .nav-item{
  appearance:none!important;
  min-width:0!important;
  height:50px!important;
  margin:0!important;
  padding:0 2px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  border-radius:14px!important;
  background:transparent!important;
  color:var(--chrome-muted)!important;
  font:700 8.8px/1 "DM Sans",sans-serif!important;
  text-decoration:none!important;
}
.bottom-nav .nav-icon,
.planner-bottom-nav .nav-icon,
.result-bottom-nav .nav-icon{
  width:28px!important;
  height:28px!important;
  border-radius:10px!important;
  display:grid!important;
  place-items:center!important;
}
.bottom-nav .nav-item.active,
.planner-bottom-nav .nav-item.active,
.result-bottom-nav .nav-item.active{
  color:var(--chrome-accent)!important;
  background:transparent!important;
}
.bottom-nav .nav-item.active .nav-icon,
.planner-bottom-nav .nav-item.active .nav-icon,
.result-bottom-nav .nav-item.active .nav-icon{
  color:var(--chrome-accent)!important;
  background:rgba(226,114,75,.14)!important;
}
.bottom-nav .camera-nav,
.planner-bottom-nav .camera-nav,
.result-bottom-nav .camera-nav{
  height:54px!important;
  margin:-8px 0 0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:1px!important;
  background:transparent!important;
  color:var(--chrome-text)!important;
  transform:none!important;
}
.bottom-nav .camera-bubble,
.planner-bottom-nav .camera-bubble,
.result-bottom-nav .camera-bubble{
  width:46px!important;
  height:46px!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  color:#fff!important;
  background:linear-gradient(145deg,#F07C55,#D96843)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 8px 18px rgba(217,104,67,.18)!important;
}
.bottom-nav .camera-label,
.planner-bottom-nav .camera-label,
.result-bottom-nav .camera-label{
  font:800 8.6px/1 "DM Sans",sans-serif!important;
  color:var(--chrome-text)!important;
}

/* Reserve only the space occupied by the fixed bars. No card/layout styling here. */
body:not(.planner-page) .app-shell .content{
  top:calc(var(--chrome-header-h) + env(safe-area-inset-top))!important;
  bottom:calc(var(--chrome-footer-h) + env(safe-area-inset-bottom))!important;
}
body.planner-page .planner-scroll{
  padding-top:calc(var(--chrome-header-h) + env(safe-area-inset-top) + 12px)!important;
  padding-bottom:calc(var(--chrome-footer-h) + env(safe-area-inset-bottom) + 20px)!important;
}
.result-scroll{
  padding-top:calc(var(--chrome-header-h) + env(safe-area-inset-top) + 14px)!important;
  padding-bottom:calc(var(--chrome-footer-h) + env(safe-area-inset-bottom) + 18px)!important;
}

@media(max-width:355px){
  .global-app-header{padding-left:12px!important;padding-right:12px!important}
  .global-header-copy strong{font-size:16.5px!important}
  .global-header-copy span{font-size:8.6px!important}
}

/* V2.19 — profile status dot must be identical on every screen */
.global-app-header .global-profile-button .profile-dot{
  position:absolute!important;
  right:4px!important;
  top:4px!important;
  width:8px!important;
  height:8px!important;
  display:block!important;
  border-radius:50%!important;
  background:#67A764!important;
  border:0!important;
  box-shadow:0 0 0 2px #30342D!important;
  pointer-events:none!important;
}

/* ===== ui-polish-237.css ===== */
/* V2.36 — visual polish only, based on stable V2.32.
   1) Global header title uses the existing handwritten Caveat language.
   2) Home micro-benefit strip is removed and the two remaining rows fill the space.
   No JS, PWA, wizard or interaction logic is changed. */

/* Handwritten premium header title — shared by Home / Plan / Result. */
.global-header-copy{
  gap:0!important;
  align-content:center!important;
}
.global-header-copy strong{
  display:inline-block!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0 0 1px 0!important;
  font-family:"Caveat",cursive!important;
  font-size:28px!important;
  font-weight:600!important;
  line-height:.78!important;
  letter-spacing:.05px!important;
  color:#FFF8EE!important;
  text-shadow:0 1px 0 rgba(0,0,0,.10),0 4px 12px rgba(0,0,0,.08)!important;
  transform:rotate(-.7deg)!important;
  transform-origin:left center!important;
}
.global-header-copy span{
  margin-left:2px!important;
  font-size:8.9px!important;
  line-height:1.18!important;
  letter-spacing:.08px!important;
  color:#C5C9C0!important;
}

@media(max-width:355px){
  .global-header-copy strong{font-size:25.5px!important}
  .global-header-copy span{font-size:8.3px!important}
}

/* Home: the old "Plan prema budžetu / Pamti šta volite" strip is gone.
   Keep the established hero/action proportion and simply let the two useful
   blocks use the freed space. */
body:not(.planner-page) .app-shell .content{
  grid-template-rows:minmax(0,1.18fr) minmax(0,1.16fr)!important;
}
@media(max-width:390px){
  body:not(.planner-page) .app-shell .content{
    grid-template-rows:minmax(0,1.17fr) minmax(0,1.16fr)!important;
  }
}
@media(max-width:355px){
  body:not(.planner-page) .app-shell .content{
    grid-template-rows:minmax(0,1.14fr) minmax(0,1.18fr)!important;
  }
}
@media(max-height:820px){
  body:not(.planner-page) .app-shell .content{
    grid-template-rows:minmax(0,1.16fr) minmax(0,1.17fr)!important;
  }
}
@media(max-height:740px){
  body:not(.planner-page) .app-shell .content{
    grid-template-rows:minmax(0,1.13fr) minmax(0,1.19fr)!important;
  }
}
@media(max-height:720px){
  body:not(.planner-page) .app-shell .content{
    grid-template-rows:minmax(0,1.21fr) minmax(0,1.13fr)!important;
  }
}


/* V2.37 — micro polish only.
   - Header subtitles hidden everywhere.
   - Home's three visual blocks get balanced breathing room between header/footer.
   No interaction, wizard, PWA or viewport logic changed. */

/* Header: keep the approved handwritten title, remove the secondary line. */
.global-header-copy span{
  display:none!important;
}
.global-header-copy{
  display:flex!important;
  align-items:center!important;
  min-height:100%!important;
}
.global-header-copy strong{
  margin:0!important;
  line-height:.88!important;
}

/* Home only: slightly more breathing room at the bottom and visually center
   hero + two action cards between the fixed header and footer. */
body:not(.planner-page) .app-shell .content{
  padding-top:8px!important;
  padding-bottom:10px!important;
}

/* Keep the internal rhythm unchanged; only make the outer spacing balanced. */
body:not(.planner-page) .app-shell .content,
body:not(.planner-page) .app-shell .main-actions{
  gap:var(--home-gap)!important;
}

@media(max-height:740px){
  body:not(.planner-page) .app-shell .content{
    padding-top:7px!important;
    padding-bottom:9px!important;
  }
}

/* ===== planner-spacing-218.css ===== */
/* V2.18 — only planner outer spacing + first-card geometry.
   Goal: the planner's first card mirrors the home hero width, top gap and height. */
:root{
  --planner-edge:14px;
  --planner-gap:10px;
  --planner-first-gap:8px;
  --primary-card-h:252px;
}

body.planner-page .planner-scroll{
  padding-left:var(--planner-edge)!important;
  padding-right:var(--planner-edge)!important;
  padding-top:calc(var(--chrome-header-h) + env(safe-area-inset-top) + var(--planner-first-gap))!important;
  gap:var(--planner-gap)!important;
}

/* Every top-level planner card keeps the same width/alignment as the locked home. */
body.planner-page .planner-scroll > .planner-intro,
body.planner-page .planner-scroll > .premium-section{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* First card: exact height copied from the home hero for the current viewport. */
body.planner-page .planner-scroll > .planner-intro{
  height:var(--primary-card-h)!important;
  min-height:var(--primary-card-h)!important;
  max-height:var(--primary-card-h)!important;
}
body.planner-page .planner-intro .intro-copy{
  height:100%!important;
  min-height:0!important;
}

/* Step 2 has a transparent wrapper; its visible card stays aligned too. */
body.planner-page .budget-section > .budget-feature-head{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

@media(max-width:355px){
  :root{--planner-edge:11px;--planner-gap:8px}
}
@media(max-height:740px){
  :root{--planner-first-gap:7px}
}

/* ===== planner-match-home-219.css ===== */
/* V2.19 — only first planner card geometry, matched to the home hero. */
:root{
  --planner-home-first-gap:3px;
  --planner-home-hero-h:249px;
}

/* Same visible distance from the fixed header as the Home hero. */
body.planner-page .planner-scroll{
  padding-top:calc(var(--chrome-header-h) + env(safe-area-inset-top) + var(--planner-home-first-gap))!important;
}

/* Width already matched in V2.17. Height is calculated in JS from the exact
   Home grid formula for the current viewport, so the two first cards stay equal. */
body.planner-page .planner-scroll > .planner-intro{
  height:var(--planner-home-hero-h)!important;
  min-height:var(--planner-home-hero-h)!important;
  max-height:var(--planner-home-hero-h)!important;
}
body.planner-page .planner-intro .intro-copy{
  height:100%!important;
  min-height:0!important;
}

/* ===== planner-wizard-220.css ===== */
/* V2.20 — premium modal wizard for Plan obroka.
   Only planner flow is changed; shared header/footer stay untouched. */

body.wizard-planner{
  overflow:hidden!important;
}
body.wizard-planner .planner-app{
  height:100dvh!important;
  min-height:100dvh!important;
  overflow:hidden!important;
}
body.wizard-planner .planner-bg img{
  filter:blur(7px) saturate(1.08) contrast(1.02)!important;
  transform:scale(1.065)!important;
}
body.wizard-planner .planner-bg i{
  background:
    linear-gradient(180deg,rgba(248,243,234,.26),rgba(246,239,228,.44)),
    rgba(43,38,31,.10)!important;
}

/* Full usable area between the already-fixed app header and footer. */
body.wizard-planner .planner-scroll.wizard-page{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:
    calc(var(--chrome-header-h) + env(safe-area-inset-top) + 8px)
    14px
    calc(var(--chrome-footer-h) + env(safe-area-inset-bottom) + 8px)!important;
  display:block!important;
  overflow:hidden!important;
}

.planner-wizard{
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:68px minmax(0,1fr);
  position:relative;
  overflow:hidden;
  border-radius:30px;
  background:rgba(255,252,247,.955);
  border:1px solid rgba(255,255,255,.96);
  box-shadow:
    0 22px 54px rgba(57,43,29,.16),
    inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(1.04);
  -webkit-backdrop-filter:blur(18px) saturate(1.04);
  isolation:isolate;
}

.wizard-progress-head{
  position:relative;
  z-index:6;
  min-width:0;
  padding:12px 15px 10px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto 4px;
  gap:7px 10px;
  align-items:center;
  background:linear-gradient(180deg,rgba(255,253,249,.98),rgba(255,250,244,.91));
  border-bottom:1px solid rgba(92,70,48,.07);
}
.wizard-progress-copy{min-width:0;display:grid;gap:2px}
.wizard-progress-copy span{
  font:900 7.7px/1 "DM Sans",sans-serif;
  letter-spacing:1.15px;
  color:#D66A43;
}
.wizard-progress-copy strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:800 15px/1.1 "Manrope",sans-serif;
  letter-spacing:-.35px;
  color:#2B211A;
}
.wizard-progress-number{
  min-width:39px;
  height:29px;
  padding:0 8px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#F3EEE7;
  color:#74766F;
  font:800 9px/1 "DM Sans",sans-serif;
}
.wizard-progress-track{
  grid-column:1 / -1;
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:#ECE7DF;
}
.wizard-progress-track i{
  display:block;
  width:25%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#E97850,#D85E3A);
  box-shadow:0 0 10px rgba(218,94,58,.14);
  transition:width .26s cubic-bezier(.2,.75,.25,1);
}

.wizard-stage{
  position:relative;
  min-height:0;
  overflow:hidden;
}

/* Existing planner sections become views inside one large modal. */
body.wizard-planner .wizard-step{
  position:absolute!important;
  inset:0!important;
  z-index:1;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:15px 14px 20px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(18px,0,0);
  transition:opacity .20s ease,transform .22s cubic-bezier(.22,.72,.3,1),visibility 0s linear .22s;
  scrollbar-width:none;
}
body.wizard-planner .wizard-step::-webkit-scrollbar{display:none}
body.wizard-planner .wizard-step.is-wizard-active{
  z-index:3;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate3d(0,0,0);
  transition:opacity .22s ease,transform .24s cubic-bezier(.22,.72,.3,1),visibility 0s;
}
body.wizard-planner .wizard-step.is-wizard-fade-out{
  opacity:0;
  transform:translate3d(-14px,0,0);
  pointer-events:none;
}
body.wizard-planner .wizard-step.is-wizard-enter-back{
  transform:translate3d(-18px,0,0);
}
body.wizard-planner .wizard-step.is-wizard-fade-out-back{
  opacity:0;
  transform:translate3d(14px,0,0);
  pointer-events:none;
}

/* Remove old first-card height matching only inside wizard. */
body.wizard-planner .planner-scroll > .planner-intro{display:none!important}
body.wizard-planner .wizard-step .section-heading{margin-bottom:13px!important}
body.wizard-planner .wizard-step .section-heading h2{
  font-size:clamp(31px,8.8vw,39px)!important;
}
body.wizard-planner .wizard-step .glass-panel{
  max-width:none!important;
}
body.wizard-planner .budget-section>.budget-feature-head{
  width:100%!important;
  margin:0!important;
}
body.wizard-planner .review-section .generate-plan{
  margin:0!important;
}

.wizard-actions{
  position:sticky;
  z-index:8;
  bottom:-20px;
  margin:13px -14px -20px;
  padding:13px 14px 14px;
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:9px;
  background:linear-gradient(180deg,rgba(255,252,247,0),rgba(255,252,247,.94) 25%,rgba(255,252,247,.99) 54%);
}
.wizard-actions-single{grid-template-columns:1fr}
.wizard-primary,.wizard-secondary{
  min-width:0;
  height:52px;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  font:800 12px/1 "Manrope",sans-serif;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
  touch-action:manipulation;
}
.wizard-primary{
  color:#fff;
  background:linear-gradient(145deg,#F07850,#D85C39);
  border-color:rgba(211,83,45,.26);
  box-shadow:0 10px 20px rgba(207,80,40,.18),0 3px 0 rgba(168,61,30,.18);
}
.wizard-secondary{
  color:#5E685A;
  background:linear-gradient(180deg,#F0F5ED,#E8F0E4);
  border-color:rgba(109,139,99,.16);
  box-shadow:0 8px 16px rgba(70,86,64,.07),0 3px 0 rgba(79,102,72,.07);
}
.wizard-primary:active,.wizard-secondary:active{
  transform:translateY(3px) scale(.985);
  box-shadow:0 3px 8px rgba(70,52,38,.10);
}
.wizard-primary:focus-visible,.wizard-secondary:focus-visible{
  outline:3px solid rgba(220,99,59,.20);
  outline-offset:2px;
}

/* Result lives in the same modal instead of navigating away. */
.wizard-result-step{padding-top:18px!important}
.wizard-result-loading{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:26px 18px 42px;
  text-align:center;
}
.wizard-result-loading>span,.wizard-result-heading>div>span{
  color:#D66A43;
  font:900 8px/1 "DM Sans",sans-serif;
  letter-spacing:1.35px;
}
.wizard-result-loading h2{
  margin:16px 0 6px;
  font:700 31px/.98 "Playfair Display",serif;
  letter-spacing:-1px;
  color:#281C15;
}
.wizard-result-loading p{
  max-width:29ch;
  margin:0;
  color:#75776F;
  font-size:10.5px;
  line-height:1.45;
  font-weight:600;
}
.wizard-loader-orbit{
  width:104px;height:104px;border-radius:34px;
  display:grid;place-items:center;position:relative;
  background:#FFF0E6;
  box-shadow:0 14px 28px rgba(86,61,40,.08);
}
.wizard-loader-orbit img{width:78px;height:78px;object-fit:contain}
.wizard-loader-orbit i{
  position:absolute;width:12px;height:12px;border-radius:50%;background:#66815F;
  animation:wizardOrbit 1.6s linear infinite;
}
@keyframes wizardOrbit{from{transform:rotate(0) translateX(54px) rotate(0)}to{transform:rotate(360deg) translateX(54px) rotate(-360deg)}}
.wizard-loader-bar{
  width:min(230px,76%);height:5px;margin-top:18px;border-radius:999px;overflow:hidden;background:#EAE5DD;
}
.wizard-loader-bar i{
  display:block;width:42%;height:100%;border-radius:999px;background:linear-gradient(90deg,#E97A51,#D95E3B);animation:wizardLoad 1.1s ease-in-out infinite alternate;
}
@keyframes wizardLoad{from{transform:translateX(-16%)}to{transform:translateX(150%)}}

.wizard-result-content{padding-bottom:2px}
.wizard-result-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:start;
  margin-bottom:13px;
}
.wizard-result-heading h2{
  margin:5px 0 5px;
  font:700 34px/.96 "Playfair Display",serif;
  letter-spacing:-1.25px;
  color:#2A1D16;
}
.wizard-result-heading p{margin:0;color:#76786F;font-size:10px;line-height:1.4;font-weight:600}
.wizard-result-heading em{
  font:600 17px/1.02 "Caveat",cursive;
  color:#95634F;
  transform:rotate(-4deg);
  white-space:nowrap;
}
.wizard-day-list{display:grid;gap:9px}
.wizard-day-card{
  min-height:82px;
  padding:8px;
  display:grid;
  grid-template-columns:75px minmax(0,1fr) 32px;
  gap:10px;
  align-items:center;
  border-radius:21px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.96);
  box-shadow:0 9px 21px rgba(58,45,32,.055);
}
.wizard-day-card img{width:75px;height:66px;border-radius:16px;object-fit:cover}
.wizard-day-card>div{min-width:0;display:grid;gap:3px}
.wizard-day-card small{font-size:7.8px;color:#B26043;font-weight:900;letter-spacing:.65px;text-transform:uppercase}
.wizard-day-card strong{font:800 11.4px/1.16 "Manrope",sans-serif;color:#2A231E}
.wizard-day-card p{margin:0;color:#888B84;font-size:8.3px;line-height:1.25;font-weight:650}
.wizard-day-card button{
  width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:#ECF3E9;color:#60795A;font-size:20px;
}
.wizard-shopping{
  width:100%;min-height:62px;margin-top:11px;padding:10px 12px;border-radius:19px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;text-align:left;
  background:linear-gradient(145deg,#EDF4E9,#E1ECDDEB);color:#51694C;
  border:1px solid rgba(255,255,255,.86);box-shadow:0 8px 16px rgba(70,89,64,.055);
}
.wizard-shopping>span{display:grid;gap:2px}.wizard-shopping strong{font:800 11.5px/1.1 "Manrope",sans-serif}.wizard-shopping small{font-size:8.2px;line-height:1.25;color:#7B8B77;font-weight:600}
.wizard-result-actions{margin-top:10px}

.wizard-inline-warning{
  display:none;
  margin:8px 0 0;
  padding:9px 10px;
  border-radius:13px;
  background:#FFF0E8;
  color:#B85B39;
  font-size:9px;
  line-height:1.35;
  font-weight:750;
}
.wizard-inline-warning.is-visible{display:block}

@media(max-width:390px){
  body.wizard-planner .planner-scroll.wizard-page{padding-left:12px!important;padding-right:12px!important}
  .planner-wizard{border-radius:27px;grid-template-rows:65px minmax(0,1fr)}
  body.wizard-planner .wizard-step{padding-left:12px!important;padding-right:12px!important}
  .wizard-actions{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}
  .wizard-result-heading em{font-size:15px}
}
@media(max-width:345px){
  .wizard-result-heading{grid-template-columns:1fr}
  .wizard-result-heading em{display:none}
  .wizard-day-card{grid-template-columns:64px minmax(0,1fr) 30px;gap:8px}
  .wizard-day-card img{width:64px;height:60px}
}
@media(max-height:690px){
  body.wizard-planner .planner-scroll.wizard-page{
    padding-top:calc(var(--chrome-header-h) + env(safe-area-inset-top) + 6px)!important;
    padding-bottom:calc(var(--chrome-footer-h) + env(safe-area-inset-bottom) + 6px)!important;
  }
  .planner-wizard{grid-template-rows:61px minmax(0,1fr);border-radius:25px}
  .wizard-progress-head{padding-top:9px;padding-bottom:8px}
  body.wizard-planner .wizard-step{padding-top:12px!important}
}
@media(prefers-reduced-motion:reduce){
  body.wizard-planner .wizard-step,.wizard-progress-track i,.wizard-primary,.wizard-secondary{transition:none!important}
  .wizard-loader-orbit i,.wizard-loader-bar i{animation:none!important}
}

/* ===== planner-single-screen-221.css ===== */
/* V2.21 — single-screen wizard: pogledaj → izaberi → Dalje.
   Only planner wizard presentation changes. Shared app chrome and planner state logic stay intact. */

body.wizard-planner .planner-scroll.wizard-page{
  padding-top:calc(var(--chrome-header-h) + env(safe-area-inset-top) + 8px)!important;
  padding-bottom:calc(var(--chrome-footer-h) + env(safe-area-inset-bottom) + 8px)!important;
}

.planner-wizard{
  grid-template-rows:56px minmax(0,1fr)!important;
}
.wizard-progress-head{
  padding:8px 14px 7px!important;
  grid-template-rows:auto 3px!important;
  gap:5px 9px!important;
}
.wizard-progress-copy{gap:1px!important}
.wizard-progress-copy span{font-size:7px!important;letter-spacing:1px!important}
.wizard-progress-copy strong{font-size:14px!important}
.wizard-progress-number{height:25px!important;min-width:36px!important;border-radius:9px!important;font-size:8.5px!important}
.wizard-progress-track{height:3px!important}

/* Steps 1–4 never scroll. Result may scroll naturally. */
body.wizard-planner .wizard-step:not(.wizard-result-step){
  overflow:hidden!important;
  padding:11px 12px 70px!important;
}
body.wizard-planner .wizard-result-step{
  overflow-y:auto!important;
  padding:14px 12px 74px!important;
}

/* One compact heading per step. Remove repeated explanatory/decorative copy. */
body.wizard-planner .wizard-step:not(.wizard-result-step) .section-heading{
  display:block!important;
  margin:0 0 8px!important;
}
body.wizard-planner .wizard-step:not(.wizard-result-step) .section-heading span{
  margin-bottom:3px!important;
  font-size:7px!important;
  letter-spacing:1px!important;
}
body.wizard-planner .wizard-step:not(.wizard-result-step) .section-heading h2{
  margin:0!important;
  font-size:clamp(25px,7vw,31px)!important;
  line-height:.98!important;
  letter-spacing:-1.1px!important;
}
body.wizard-planner .wizard-step:not(.wizard-result-step) .section-heading p,
body.wizard-planner .wizard-step:not(.wizard-result-step) .section-heading em{
  display:none!important;
}

body.wizard-planner .wizard-step .glass-panel{
  padding:9px!important;
  border-radius:19px!important;
  box-shadow:0 6px 16px rgba(78,60,40,.05)!important;
}
body.wizard-planner .wizard-step .glass-panel + .glass-panel{margin-top:7px!important}
body.wizard-planner .wizard-step .panel-title{margin-bottom:7px!important}
body.wizard-planner .wizard-step .panel-title strong{font-size:12.5px!important}
body.wizard-planner .wizard-step .panel-title small{display:none!important}

/* Actions are always visible; no sticky scroll cue required. */
.wizard-actions{
  position:absolute!important;
  left:12px!important;
  right:12px!important;
  bottom:10px!important;
  z-index:12!important;
  margin:0!important;
  padding:0!important;
  background:none!important;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)!important;
  gap:8px!important;
}
.wizard-actions-single{grid-template-columns:1fr!important}
.wizard-primary,.wizard-secondary{
  height:46px!important;
  border-radius:15px!important;
  font-size:11px!important;
}

/* STEP 1 — family + days, all visible at once. */
body.wizard-planner #family-section .family-panel{padding:8px!important}
body.wizard-planner #family-section .family-grid{gap:7px!important}
body.wizard-planner #family-section .family-card{
  padding:6px 6px 7px!important;
  border-radius:17px!important;
}
body.wizard-planner #family-section .family-visual{
  height:72px!important;
  margin:0 0 3px!important;
  box-shadow:none!important;
}
body.wizard-planner #family-section .family-visual img{
  object-fit:contain!important;
  filter:drop-shadow(0 7px 8px rgba(73,55,38,.09))!important;
}
body.wizard-planner #family-section .family-name{margin-bottom:4px!important;gap:0!important}
body.wizard-planner #family-section .family-name strong{font-size:18px!important}
body.wizard-planner #family-section .family-name small{font-size:7px!important}
body.wizard-planner #family-section .counter-control{
  grid-template-columns:31px 1fr 31px!important;
  max-width:110px!important;
  gap:3px!important;
  margin-bottom:2px!important;
}
body.wizard-planner #family-section .counter-control button{
  width:31px!important;height:31px!important;border-radius:10px!important;font-size:18px!important;
}
body.wizard-planner #family-section .counter-control b{font-size:19px!important}
body.wizard-planner #family-section .family-card>p{display:none!important}
body.wizard-planner #family-section .child-ages{
  margin:4px 0 0!important;
  padding:4px!important;
  border-radius:10px!important;
}
body.wizard-planner #family-section .child-ages>strong{font-size:7px!important;margin-bottom:3px!important}
body.wizard-planner #family-section .child-ages>div{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:3px!important;
}
body.wizard-planner #family-section .age-field{
  display:grid!important;
  gap:1px!important;
  font-size:6px!important;
}
body.wizard-planner #family-section .age-field span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.wizard-planner #family-section .age-field select{
  width:100%!important;min-width:0!important;height:25px!important;border-radius:7px!important;font-size:7px!important;padding:0 2px!important;
}
body.wizard-planner #family-section .days-panel{padding:8px!important}
body.wizard-planner #family-section .days-title-line{
  display:block!important;margin-bottom:6px!important;
}
body.wizard-planner #family-section .days-title-line .days-icon,
body.wizard-planner #family-section .days-title-line small,
body.wizard-planner #family-section .days-title-line em{display:none!important}
body.wizard-planner #family-section .days-title-line strong{font:800 12px/1.1 "Manrope",sans-serif!important}
body.wizard-planner #family-section .days-row{gap:4px!important}
body.wizard-planner #family-section .days-row button{
  height:42px!important;border-radius:13px!important;
}
body.wizard-planner #family-section .days-row b{font-size:14px!important}
body.wizard-planner #family-section .days-row small{font-size:6px!important}
body.wizard-planner #family-section .days-hint{margin-top:4px!important;font-size:7px!important}
body.wizard-planner #family-section .wizard-inline-warning{
  margin-top:3px!important;padding:4px 5px!important;font-size:7px!important;line-height:1.2!important;
}

/* STEP 2 — remove decorative hero and keep only the useful choices. */
body.wizard-planner #budget-section>.budget-feature-head{
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  margin:0 0 8px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
body.wizard-planner #budget-section>.budget-feature-head::after,
body.wizard-planner #budget-section>.budget-feature-head>img,
body.wizard-planner #budget-section>.budget-feature-head>em{display:none!important}
body.wizard-planner #budget-section .budget-feature-copy{width:100%!important}
body.wizard-planner #budget-section .budget-feature-copy>span{margin-bottom:3px!important;font-size:7px!important}
body.wizard-planner #budget-section .budget-feature-copy h2{
  margin:0!important;max-width:none!important;font-size:clamp(25px,7vw,31px)!important;line-height:.98!important;
}
body.wizard-planner #budget-section .budget-feature-copy p{display:none!important}
body.wizard-planner #budget-section .budget-panel{margin-top:0!important;padding:9px!important}
body.wizard-planner #budget-section .budget-panel-head,
body.wizard-planner #budget-section .time-head{
  display:block!important;margin-bottom:7px!important;
}
body.wizard-planner #budget-section .budget-panel-head .round-mini-icon,
body.wizard-planner #budget-section .budget-panel-head small,
body.wizard-planner #budget-section .budget-panel-head em{display:none!important}
body.wizard-planner #budget-section .budget-panel-head strong{font:800 12.5px/1.1 "Manrope",sans-serif!important}
body.wizard-planner #budget-section .budget-options,
body.wizard-planner #budget-section .time-options{gap:5px!important}
body.wizard-planner #budget-section .budget-options button,
body.wizard-planner #budget-section .time-options button{
  height:43px!important;border-radius:13px!important;font-size:9px!important;
}
body.wizard-planner #budget-section .money-field{
  width:100%!important;margin-top:7px!important;
}
body.wizard-planner #budget-section .money-field>span{font-size:7px!important;margin-bottom:3px!important}
body.wizard-planner #budget-section .money-field>div{height:39px!important;border-radius:12px!important}
body.wizard-planner #budget-section .budget-bottom{
  min-height:24px!important;height:24px!important;margin-top:5px!important;overflow:visible!important;
}
body.wizard-planner #budget-section .budget-bottom>span{min-height:24px!important;font-size:7px!important}
body.wizard-planner #budget-section .budget-bottom img{display:none!important}
body.wizard-planner #budget-section .time-panel{margin-top:7px!important;padding:9px!important}

/* STEP 3 — compact chips instead of large photo tiles. */
body.wizard-planner #taste-section .taste-heading{margin-bottom:7px!important}
body.wizard-planner #taste-section .taste-panel,
body.wizard-planner #taste-section .cuisine-panel,
body.wizard-planner #taste-section .allergy-panel,
body.wizard-planner #taste-section .avoid-panel{padding:8px!important;margin-top:6px!important}
body.wizard-planner #taste-section .taste-panel{margin-top:0!important}
body.wizard-planner #taste-section .diet-grid{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important;
}
body.wizard-planner #taste-section .diet-grid button,
body.wizard-planner #taste-section .diet-grid button:nth-child(4),
body.wizard-planner #taste-section .diet-grid button:nth-child(5){
  grid-column:auto!important;min-height:38px!important;height:38px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:0 3px!important;border-radius:12px!important;text-align:center!important;
}
body.wizard-planner #taste-section .diet-grid img,
body.wizard-planner #taste-section .diet-grid small{display:none!important}
body.wizard-planner #taste-section .diet-grid b{font-size:7.5px!important;line-height:1.05!important}
body.wizard-planner #taste-section .diet-grid button.is-selected::after{
  right:3px!important;top:3px!important;width:13px!important;height:13px!important;font-size:7px!important;
}
body.wizard-planner #taste-section .cuisine-grid{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important;
}
body.wizard-planner #taste-section .cuisine-grid label{
  min-height:34px!important;height:34px!important;display:grid!important;grid-template-rows:1fr!important;border-radius:11px!important;
}
body.wizard-planner #taste-section .cuisine-grid img{display:none!important}
body.wizard-planner #taste-section .cuisine-grid span{padding:2px!important;font-size:7px!important;line-height:1.05!important}
body.wizard-planner #taste-section .cuisine-grid label:has(input:checked)::after{
  right:3px!important;top:3px!important;width:13px!important;height:13px!important;font-size:7px!important;
}
body.wizard-planner #taste-section .allergen-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important;
}
body.wizard-planner #taste-section .allergen-grid button,
body.wizard-planner #taste-section .allergen-grid button[data-allergen="Orašasti plodovi"],
body.wizard-planner #taste-section .allergen-grid button[data-allergen="Morski plodovi"]{
  grid-column:auto!important;height:32px!important;padding:0 4px!important;gap:3px!important;border-radius:11px!important;font-size:6.7px!important;justify-content:flex-start!important;
}
body.wizard-planner #taste-section .allergen-grid button span{
  flex:0 0 19px!important;width:19px!important;height:19px!important;border-radius:6px!important;font-size:9px!important;
}
body.wizard-planner #taste-section .text-field{margin-top:5px!important;gap:3px!important}
body.wizard-planner #taste-section .text-field>span{font-size:7px!important}
body.wizard-planner #taste-section .text-field input{height:35px!important;border-radius:11px!important;font-size:9px!important}
body.wizard-planner #taste-section .avoid-panel .text-field{margin-top:0!important}

/* STEP 4 — compact confirmation, no duplicated artwork. */
body.wizard-planner #review-section .review-card{padding:9px!important}
body.wizard-planner #review-section .review-head{
  grid-template-columns:45px minmax(0,1fr)!important;gap:8px!important;padding-bottom:7px!important;
}
body.wizard-planner #review-section .review-head img{width:45px!important;height:45px!important;border-radius:13px!important}
body.wizard-planner #review-section .review-head span{font-size:7px!important}
body.wizard-planner #review-section .review-head strong{font-size:11.5px!important}
body.wizard-planner #review-section .review-head small{font-size:7.5px!important}
body.wizard-planner #review-section .review-stats{gap:4px!important;padding:7px 0!important}
body.wizard-planner #review-section .review-stats div{padding:6px 3px!important;border-radius:10px!important}
body.wizard-planner #review-section .review-stats small{font-size:6.5px!important}
body.wizard-planner #review-section .review-stats b{font-size:9px!important}
body.wizard-planner #review-section .review-lines{padding-top:6px!important;gap:5px!important}
body.wizard-planner #review-section .review-lines>div{grid-template-columns:78px minmax(0,1fr)!important;gap:5px!important}
body.wizard-planner #review-section .review-lines span{font-size:6.7px!important}
body.wizard-planner #review-section .review-lines p{font-size:8px!important;line-height:1.2!important}
body.wizard-planner #review-section .review-extra{margin-top:6px!important;padding:6px 7px!important;font-size:7.5px!important}
body.wizard-planner #review-section .generate-plan{height:46px!important}

/* Shorter phones: preserve no-scroll rule by tightening only spacing, not content. */
@media(max-height:760px){
  .planner-wizard{grid-template-rows:52px minmax(0,1fr)!important}
  .wizard-progress-head{padding-top:6px!important;padding-bottom:6px!important}
  body.wizard-planner .wizard-step:not(.wizard-result-step){padding-top:8px!important;padding-bottom:62px!important}
  body.wizard-planner .wizard-step:not(.wizard-result-step) .section-heading{margin-bottom:6px!important}
  body.wizard-planner .wizard-step:not(.wizard-result-step) .section-heading h2,
  body.wizard-planner #budget-section .budget-feature-copy h2{font-size:24px!important}
  .wizard-actions{bottom:8px!important}
  .wizard-primary,.wizard-secondary{height:42px!important}
  body.wizard-planner #family-section .family-visual{height:58px!important}
  body.wizard-planner #family-section .days-row button{height:37px!important}
  body.wizard-planner #budget-section .budget-options button,
  body.wizard-planner #budget-section .time-options button{height:38px!important}
  body.wizard-planner #taste-section .diet-grid button,
  body.wizard-planner #taste-section .diet-grid button:nth-child(4),
  body.wizard-planner #taste-section .diet-grid button:nth-child(5){height:34px!important;min-height:34px!important}
  body.wizard-planner #taste-section .cuisine-grid label{height:30px!important;min-height:30px!important}
  body.wizard-planner #taste-section .allergen-grid button,
  body.wizard-planner #taste-section .allergen-grid button[data-allergen="Orašasti plodovi"],
  body.wizard-planner #taste-section .allergen-grid button[data-allergen="Morski plodovi"]{height:29px!important}
  body.wizard-planner #taste-section .text-field input{height:31px!important}
}

@media(max-width:350px){
  body.wizard-planner #taste-section .cuisine-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.wizard-planner #taste-section .allergen-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.wizard-planner #family-section .child-ages>div{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* ===== planner-step1-222.css ===== */
/* V2.22 — STEP 1 only.
   Keeps the V2.21 wizard card, chrome, position and logic untouched. */

/* The progress header already says "Za koga kuvamo?", so Step 1 starts
   directly with the two useful questions. */
body.wizard-planner #family-section{
  padding-top:14px!important;
}

body.wizard-planner #family-section .step1-panel-intro{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:0 3px 7px;
  min-width:0;
}
body.wizard-planner #family-section .step1-panel-intro strong{
  min-width:0;
  color:#2A211B;
  font:800 15px/1.12 "Manrope",sans-serif;
  letter-spacing:-.32px;
}
body.wizard-planner #family-section .step1-panel-intro small{
  flex:0 0 auto;
  color:#9A9B94;
  font:700 7.5px/1.1 "DM Sans",sans-serif;
  white-space:nowrap;
}
body.wizard-planner #family-section .days-intro{
  margin-top:11px;
}

/* Slightly larger content INSIDE the two existing white panels only. */
body.wizard-planner #family-section .family-panel,
body.wizard-planner #family-section .days-panel{
  padding:10px!important;
}
body.wizard-planner #family-section .family-grid{
  gap:9px!important;
}
body.wizard-planner #family-section .family-card{
  padding:8px 7px 8px!important;
  border-radius:18px!important;
}
body.wizard-planner #family-section .family-visual{
  height:80px!important;
  margin:0 0 4px!important;
}
body.wizard-planner #family-section .family-name{
  margin-bottom:5px!important;
}
body.wizard-planner #family-section .family-name strong{
  font-size:20px!important;
}
body.wizard-planner #family-section .family-name small{
  font-size:8px!important;
}
body.wizard-planner #family-section .counter-control{
  grid-template-columns:35px 1fr 35px!important;
  max-width:122px!important;
  gap:4px!important;
  margin-bottom:2px!important;
}
body.wizard-planner #family-section .counter-control button{
  width:35px!important;
  height:35px!important;
  border-radius:11px!important;
  font-size:20px!important;
}
body.wizard-planner #family-section .counter-control b{
  font-size:21px!important;
}

/* Child ages: larger, cleaner native picker. Keeping the real select means
   the existing V2.21 state/validation logic stays exactly the same. */
body.wizard-planner #family-section .child-ages{
  margin:6px 0 0!important;
  padding:7px!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(116,143,106,.10)!important;
  box-shadow:0 5px 12px rgba(67,79,60,.05)!important;
}
body.wizard-planner #family-section .child-ages>strong{
  margin:0 0 5px!important;
  font:800 8.5px/1.1 "Manrope",sans-serif!important;
  color:#65705F!important;
}
body.wizard-planner #family-section .child-ages>div{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:5px!important;
}
body.wizard-planner #family-section .age-field{
  display:grid!important;
  gap:3px!important;
  min-width:0!important;
  font-size:8px!important;
}
body.wizard-planner #family-section .age-field span{
  overflow:visible!important;
  color:#858981!important;
  font-size:7.5px!important;
  font-weight:800!important;
  text-align:center!important;
  white-space:nowrap!important;
}
body.wizard-planner #family-section .age-field select{
  width:100%!important;
  min-width:0!important;
  height:36px!important;
  padding:0 5px!important;
  border:1px solid #DFE6DA!important;
  border-radius:10px!important;
  background:#F7FAF5!important;
  color:#41483E!important;
  font-family:"DM Sans",sans-serif!important;
  font-size:16px!important; /* readable native Android/iOS picker + prevents zoom */
  font-weight:800!important;
  text-align:center!important;
  outline:0!important;
  box-shadow:0 3px 8px rgba(64,78,58,.05)!important;
}
body.wizard-planner #family-section .age-field select:focus{
  border-color:#83A07A!important;
  box-shadow:0 0 0 3px rgba(105,137,95,.12)!important;
}

body.wizard-planner #family-section .days-row{
  gap:5px!important;
}
body.wizard-planner #family-section .days-row button{
  height:46px!important;
  border-radius:14px!important;
}
body.wizard-planner #family-section .days-row b{
  font-size:15px!important;
}
body.wizard-planner #family-section .days-row small{
  font-size:6.5px!important;
}
body.wizard-planner #family-section .days-hint{
  margin-top:5px!important;
  font-size:7.5px!important;
}

/* Preserve V2.21 no-scroll behavior on shorter devices. Only Step 1 internals
   tighten; the outer wizard card is never resized or moved. */
@media(max-height:760px){
  body.wizard-planner #family-section{padding-top:10px!important}
  body.wizard-planner #family-section .step1-panel-intro{margin-bottom:5px!important}
  body.wizard-planner #family-section .days-intro{margin-top:7px!important}
  body.wizard-planner #family-section .family-panel,
  body.wizard-planner #family-section .days-panel{padding:8px!important}
  body.wizard-planner #family-section .family-visual{height:64px!important}
  body.wizard-planner #family-section .family-name strong{font-size:18px!important}
  body.wizard-planner #family-section .counter-control{
    grid-template-columns:32px 1fr 32px!important;
    max-width:112px!important;
  }
  body.wizard-planner #family-section .counter-control button{width:32px!important;height:32px!important}
  body.wizard-planner #family-section .days-row button{height:39px!important}
  body.wizard-planner #family-section .age-field select{height:33px!important}
}

@media(max-width:350px){
  body.wizard-planner #family-section .step1-panel-intro small{display:none!important}
  body.wizard-planner #family-section .child-ages>div{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}


/* V2.53 — Wizard 1 headings now use the exact Wizard 3 typography system */
body.wizard-planner #family-section .wizard-block-heading{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:8px!important;
  row-gap:4px!important;
  margin:1px 2px 6px!important;
  padding:0 6px!important;
}
body.wizard-planner #family-section .wizard-block-heading + .glass-panel{margin-top:0!important}
body.wizard-planner #family-section .wizard-block-heading h3{
  margin:0!important;
  color:#1f1813!important;
  font:800 clamp(20px,4.8vw,28px)/.96 "Manrope",sans-serif!important;
  letter-spacing:-.03em!important;
}
body.wizard-planner #family-section .wizard-block-heading p{
  margin:3px 0 0!important;
  color:#7c766f!important;
  font:700 clamp(9px,2.5vw,11px)/1.24 "Manrope",sans-serif!important;
}
body.wizard-planner #family-section .wizard-block-heading em{
  align-self:center!important;
  justify-self:end!important;
  margin:5px 1px 0 0!important;
  color:#A26F59!important;
  font:500 clamp(15px,4vw,19px)/1 "Caveat","Segoe Print",cursive!important;
  white-space:nowrap!important;
  text-align:right!important;
  transform:rotate(-3deg)!important;
  opacity:.92!important;
}
body.wizard-planner #family-section .days-heading{margin-top:16px!important}
/* neutralize old intro styling if any */
body.wizard-planner #family-section .step1-panel-intro small{display:none!important}
@media(max-width:390px){
  body.wizard-planner #family-section .wizard-block-heading{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:6px!important;
    margin:1px 2px 6px!important;
    padding:0 4px!important;
  }
  body.wizard-planner #family-section .wizard-block-heading em{
    justify-self:end!important;
    text-align:right!important;
    font-size:14.5px!important;
    transform:rotate(-3deg)!important;
  }
}


/* V2.54 — W1/W2 heading line discipline only.
   Main heading and subtitle stay on one line; handwritten helper is a deliberate two-line accent. */
body.wizard-planner #family-section .wizard-block-heading h3,
body.wizard-planner #budget-section .wizard-block-heading h3{
  white-space:nowrap!important;
  font-size:clamp(17px,4.15vw,23px)!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
}
body.wizard-planner #family-section .wizard-block-heading p,
body.wizard-planner #budget-section .wizard-block-heading p{
  white-space:nowrap!important;
  font-size:clamp(8px,2.12vw,10.2px)!important;
  line-height:1.12!important;
  letter-spacing:-.015em!important;
}
body.wizard-planner #family-section .wizard-block-heading em,
body.wizard-planner #budget-section .wizard-block-heading em{
  white-space:normal!important;
  min-width:70px!important;
  max-width:88px!important;
  font-size:clamp(14px,3.7vw,18px)!important;
  line-height:.78!important;
  text-align:right!important;
}
body.wizard-planner #family-section .wizard-block-heading em br,
body.wizard-planner #budget-section .wizard-block-heading em br{display:block!important}
@media(max-width:390px){
  body.wizard-planner #family-section .wizard-block-heading,
  body.wizard-planner #budget-section .wizard-block-heading{
    grid-template-columns:minmax(0,1fr) 72px!important;
    column-gap:5px!important;
  }
  body.wizard-planner #family-section .wizard-block-heading h3,
  body.wizard-planner #budget-section .wizard-block-heading h3{font-size:16px!important}
  body.wizard-planner #family-section .wizard-block-heading p,
  body.wizard-planner #budget-section .wizard-block-heading p{font-size:7.7px!important}
  body.wizard-planner #family-section .wizard-block-heading em,
  body.wizard-planner #budget-section .wizard-block-heading em{
    min-width:72px!important;max-width:72px!important;font-size:13.8px!important;line-height:.8!important
  }
}
@media(max-width:350px){
  body.wizard-planner #family-section .wizard-block-heading,
  body.wizard-planner #budget-section .wizard-block-heading{grid-template-columns:minmax(0,1fr) 66px!important}
  body.wizard-planner #family-section .wizard-block-heading h3,
  body.wizard-planner #budget-section .wizard-block-heading h3{font-size:14.8px!important}
  body.wizard-planner #family-section .wizard-block-heading p,
  body.wizard-planner #budget-section .wizard-block-heading p{font-size:7.2px!important}
  body.wizard-planner #family-section .wizard-block-heading em,
  body.wizard-planner #budget-section .wizard-block-heading em{min-width:66px!important;max-width:66px!important;font-size:13px!important}
}

/* ===== planner-age-dropdown-229.css ===== */
/* V2.29 — Android-stable premium child-age picker.
   Picker is anchored to the fixed app footer itself, not to dynamic viewport top.
   No wizard/card/header/footer geometry is changed. */

body.wizard-planner #family-section .age-field.age-dropdown-enhanced{
  position:relative!important;
}

/* Existing select remains the state/validation source of truth only. */
body.wizard-planner #family-section .age-field.age-dropdown-enhanced select[data-child-age]{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-width:1px!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  pointer-events:none!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}

/* Visible age number: same language as day chips, slightly subtler. */
body.wizard-planner #family-section .age-number-trigger{
  width:100%!important;
  min-width:0!important;
  height:36px!important;
  padding:0 6px!important;
  border:1px solid #E1E5DD!important;
  border-radius:11px!important;
  background:#F3F2ED!important;
  color:#62675F!important;
  font:750 15px/1 "Manrope",sans-serif!important;
  text-align:center!important;
  box-shadow:0 3px 8px rgba(64,78,58,.055),inset 0 1px 0 rgba(255,255,255,.92)!important;
  outline:0!important;
  cursor:pointer!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  touch-action:manipulation!important;
}
body.wizard-planner #family-section .age-number-trigger.is-empty{color:#A5AAA2!important}
body.wizard-planner #family-section .age-number-trigger:focus-visible{
  border-color:#92A98A!important;
  box-shadow:0 0 0 3px rgba(105,137,95,.12),0 3px 8px rgba(64,78,58,.055)!important;
}
body.wizard-planner #family-section .age-number-trigger:active{transform:translateY(1px)!important}

/* Hard interaction lock while picker is open. This is intentionally scoped
   only to the open picker state and prevents Android viewport panning/bounce. */
html.age-picker-locked,
body.age-picker-locked{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body.age-picker-locked .planner-app,
body.age-picker-locked .planner-scroll.wizard-page,
body.age-picker-locked .planner-wizard,
body.age-picker-locked .wizard-stage{
  overscroll-behavior:none!important;
}

.age-dropdown-guard{
  position:fixed!important;
  inset:0!important;
  z-index:10040!important;
  background:rgba(35,34,29,.18)!important;
  backdrop-filter:blur(2px)!important;
  -webkit-backdrop-filter:blur(2px)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .14s ease,visibility .14s ease!important;
  touch-action:none!important;
  overscroll-behavior:none!important;
}
.age-dropdown-guard.is-open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

/* Critical Android fix:
   - fixed to viewport
   - ALWAYS anchored by bottom distance equal to actual fixed footer height
   - never positioned from footer.top / viewport scroll offsets
   This keeps it in exactly the same place after leaving and reopening Plan. */
.age-dropdown-popover{
  position:fixed!important;
  z-index:10050!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:calc(var(--chrome-footer-h) + env(safe-area-inset-bottom) + 10px)!important;
  width:252px!important;
  max-width:calc(100% - 24px)!important;
  max-height:calc(100dvh - var(--chrome-header-h) - var(--chrome-footer-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 30px)!important;
  margin:0!important;
  padding:12px!important;
  box-sizing:border-box!important;
  border:1px solid rgba(255,255,255,.94)!important;
  border-radius:20px!important;
  background:rgba(251,248,241,.992)!important;
  box-shadow:0 20px 48px rgba(45,40,33,.23),0 5px 16px rgba(45,40,33,.10)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate3d(-50%,0,0)!important;
  transition:opacity .14s ease,visibility .14s ease!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:manipulation!important;
  contain:layout paint!important;
}
.age-dropdown-popover.is-open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate3d(-50%,0,0)!important;
}

.age-dropdown-head{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin:0 2px 10px!important;
}
.age-dropdown-head div{min-width:0!important}
.age-dropdown-head small{
  display:block!important;
  margin-bottom:3px!important;
  color:#C76748!important;
  font:800 9px/1.1 "Manrope",sans-serif!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
.age-dropdown-head strong{
  display:block!important;
  color:#2E2923!important;
  font:800 14px/1.15 "Manrope",sans-serif!important;
}
.age-dropdown-head span{
  flex:0 0 auto!important;
  color:#92948C!important;
  font:700 10px/1 "DM Sans",sans-serif!important;
}
.age-dropdown-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:6px!important;
}
.age-dropdown-option{
  min-width:0!important;
  height:35px!important;
  padding:0!important;
  border:1px solid #E4E2DB!important;
  border-radius:11px!important;
  background:#F5F3EE!important;
  color:#5F625D!important;
  font:750 14px/1 "Manrope",sans-serif!important;
  text-align:center!important;
  box-shadow:0 3px 7px rgba(66,60,53,.05),inset 0 1px 0 rgba(255,255,255,.9)!important;
  cursor:pointer!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  touch-action:manipulation!important;
}
.age-dropdown-option:active{
  transform:translateY(1px)!important;
  box-shadow:0 1px 4px rgba(66,60,53,.05)!important;
}
.age-dropdown-option.is-selected{
  border-color:#D86B49!important;
  background:#ED704B!important;
  color:#fff!important;
  box-shadow:0 5px 12px rgba(210,102,70,.20)!important;
}

@media(max-width:359px){
  .age-dropdown-popover{width:238px!important;padding:10px!important}
  .age-dropdown-grid{gap:5px!important}
  .age-dropdown-option{height:33px!important;font-size:13px!important;border-radius:10px!important}
}
@media(max-height:760px){
  body.wizard-planner #family-section .age-number-trigger{height:33px!important;font-size:14px!important}
  .age-dropdown-popover{width:244px!important;padding:10px!important}
  .age-dropdown-head{margin-bottom:8px!important}
  .age-dropdown-option{height:32px!important}
}

/* ===== planner-android-viewport-230.css ===== */
/* V2.30 — Android viewport stability only.
   Mirrors the already-stable Home viewport strategy without changing planner visuals. */
html.is-android,
html.is-android body.wizard-planner{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

html.is-android body.wizard-planner{
  position:fixed!important;
  inset:0!important;
  margin:0!important;
}

/* Do not let Android's delayed 100dvh recalculation resize the wizard after navigation.
   --app-height is the current visible visualViewport height, synchronized in JS. */
html.is-android body.wizard-planner .planner-app{
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:auto!important;
  width:min(100%,430px)!important;
  height:var(--app-height,100svh)!important;
  min-height:0!important;
  max-height:var(--app-height,100svh)!important;
  margin:0 auto!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

html.is-android body.wizard-planner .planner-scroll.wizard-page{
  height:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

html.is-android body.wizard-planner .planner-wizard,
html.is-android body.wizard-planner .wizard-stage{
  max-height:100%!important;
  overscroll-behavior:none!important;
}

/* On Android the picker lives INSIDE the locked planner-app, so it cannot ever
   be laid out below the visible app/footer even if Chrome changes its layout viewport. */
html.is-android .age-dropdown-guard.age-picker-local{
  position:absolute!important;
  inset:0!important;
}
html.is-android .age-dropdown-popover.age-picker-local{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:calc(var(--chrome-footer-h) + env(safe-area-inset-bottom) + 10px)!important;
  max-height:calc(var(--app-height,100svh) - var(--chrome-header-h) - var(--chrome-footer-h) - 30px)!important;
  transform:translate3d(-50%,0,0)!important;
}
html.is-android .age-dropdown-popover.age-picker-local.is-open{
  transform:translate3d(-50%,0,0)!important;
}

/* ===== planner-wizard-bg-232.css ===== */
/* V2.32 — visual-only wizard background refinement.
   ONLY the interior background of the existing wizard window is changed.
   Layout, controls, Android viewport fix and all functionality stay untouched. */
body.wizard-planner .planner-wizard{
  background-color:#FBF6ED!important;
  background-image:url('/assets/ui/premium/wizard-family-table-bg-v232.webp')!important;
  background-repeat:no-repeat!important;
  background-position:center bottom!important;
  background-size:100% 100%!important;
}

/* ===== planner-wizard-header-238.css ===== */

/* V2.38 — Wizard header polish only.
   No wizard logic, cards, viewport handling, navigation or functionality changed. */

body.wizard-planner .wizard-progress-head{
  position:relative!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:auto 4px!important;
  min-height:68px!important;
  padding:11px 15px 10px!important;
  gap:8px 10px!important;
}

/* Hide "KORAK X OD 4" but keep the existing DOM/JS untouched. */
body.wizard-planner .wizard-progress-copy [data-wizard-progress-label]{
  display:none!important;
}

/* Center the current wizard title better and never truncate it. */
body.wizard-planner .wizard-progress-copy{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding-left:42px!important; /* visually balances the badge on the right */
}

body.wizard-planner .wizard-progress-copy strong{
  display:block!important;
  width:100%!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  text-align:center!important;
  color:#2B211A!important;
  font:800 16px/1.08 "Manrope",sans-serif!important;
  letter-spacing:-.38px!important;
}

/* 1/4, 2/4, 3/4, 4/4 badge — orange accent. */
body.wizard-planner .wizard-progress-number{
  min-width:42px!important;
  height:32px!important;
  padding:0 9px!important;
  border-radius:12px!important;
  color:#fff!important;
  background:linear-gradient(180deg,#F1845B,#E26741)!important;
  border:1px solid rgba(202,82,45,.18)!important;
  box-shadow:0 7px 14px rgba(211,93,56,.16),inset 0 1px 0 rgba(255,255,255,.22)!important;
  font:800 10px/1 "DM Sans",sans-serif!important;
}

/* Keep the progress track exactly under the polished title row. */
body.wizard-planner .wizard-progress-track{
  grid-column:1 / -1!important;
}

/* Extra safety on narrow phones: full title remains readable. */
@media(max-width:350px){
  body.wizard-planner .wizard-progress-copy{
    padding-left:38px!important;
  }
  body.wizard-planner .wizard-progress-copy strong{
    font-size:15px!important;
  }
  body.wizard-planner .wizard-progress-number{
    min-width:39px!important;
    height:30px!important;
  }
}

/* ===== planner-wizard-align-239.css ===== */

/* V2.39 — Wizard content top alignment only.
   Keeps V2.38 header styling and all wizard functionality unchanged. */

:root{
  --wizard-step-top:18px;
}

/* Steps 1–4 always start at exactly the same vertical position
   below the wizard progress header. */
body.wizard-planner .wizard-stage > [data-wizard-step="1"],
body.wizard-planner .wizard-stage > [data-wizard-step="2"],
body.wizard-planner .wizard-stage > [data-wizard-step="3"],
body.wizard-planner .wizard-stage > [data-wizard-step="4"]{
  padding-top:var(--wizard-step-top)!important;
  scroll-padding-top:var(--wizard-step-top)!important;
}

/* V2.22 had a separate Step 1 top-padding rule; neutralize it so
   "Ko jede ove nedelje?" sits on the same starting line as other steps. */
body.wizard-planner #family-section{
  padding-top:var(--wizard-step-top)!important;
}

/* First visible block in every step starts cleanly from that shared line. */
body.wizard-planner #family-section > .step1-panel-intro:first-child,
body.wizard-planner #budget-section > .budget-feature-head:first-child,
body.wizard-planner #taste-section > .section-heading:first-child,
body.wizard-planner #review-section > .section-heading:first-child{
  margin-top:0!important;
}

/* Preserve compact short-screen behavior while keeping all steps aligned. */
@media(max-height:760px){
  :root{
    --wizard-step-top:14px;
  }
  body.wizard-planner #family-section{
    padding-top:var(--wizard-step-top)!important;
  }
}

/* ===== planner-wizard-bg-240.css ===== */
/* V2.40 — continuous background through the full wizard.
   Visual-only update: extend the background image/gradient across the entire
   wizard shell on every step, including behind the top progress area, so there
   is no hard seam at the step header divider. */

body.wizard-planner .planner-wizard{
  background:transparent!important;
  overflow:hidden!important;
}

body.wizard-planner .planner-wizard::before,
body.wizard-planner .planner-wizard::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* Main photo layer across the whole wizard */
body.wizard-planner .planner-wizard::before{
  z-index:0;
  background:
    url('/assets/ui/premium/wizard-family-table-bg-v232.webp') center 74% / cover no-repeat,
    #FBF6ED;
  transform:scale(1.01);
}

/* Soft cream veil so the image melts into the existing UI instead of cutting */
body.wizard-planner .planner-wizard::after{
  z-index:0;
  background:
    linear-gradient(180deg,
      rgba(251,246,237,.92) 0%,
      rgba(251,246,237,.84) 12%,
      rgba(251,246,237,.72) 24%,
      rgba(251,246,237,.56) 38%,
      rgba(251,246,237,.39) 54%,
      rgba(251,246,237,.25) 70%,
      rgba(251,246,237,.18) 84%,
      rgba(251,246,237,.14) 100%);
}

/* Keep live UI above the background layers */
body.wizard-planner .wizard-progress-head,
body.wizard-planner .wizard-stage,
body.wizard-planner .wizard-step,
body.wizard-planner .wizard-actions{
  position:relative;
  z-index:1;
}

/* Header stays readable but no longer creates a hard visual break */
body.wizard-planner .wizard-progress-head{
  background:linear-gradient(180deg,rgba(255,251,245,.68),rgba(255,249,241,.34))!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.05)!important;
  backdrop-filter:blur(12px) saturate(1.05)!important;
  border-bottom:1px solid rgba(92,70,48,.035)!important;
}

body.wizard-planner .wizard-progress-track{
  background:rgba(236,231,223,.52)!important;
}

/* Steps stay transparent so the continuous wizard background is visible everywhere */
body.wizard-planner .wizard-stage,
body.wizard-planner .wizard-step,
body.wizard-planner #family-section,
body.wizard-planner #budget-section,
body.wizard-planner #taste-section,
body.wizard-planner #review-section{
  background:transparent!important;
}

/* Bottom action zone also fades into the same background instead of looking cut off */
body.wizard-planner .wizard-actions{
  background:linear-gradient(180deg,
    rgba(251,246,237,0) 0%,
    rgba(251,246,237,.08) 20%,
    rgba(251,246,237,.18) 42%,
    rgba(251,246,237,.30) 68%,
    rgba(251,246,237,.38) 100%)!important;
}

/* Mobile-safe tuning */
@media (max-width:430px){
  body.wizard-planner .planner-wizard::before{
    background-position:center 76%;
  }
}
@media (max-height:760px){
  body.wizard-planner .planner-wizard::before{
    background-position:center 72%;
  }
  body.wizard-planner .wizard-progress-head{
    background:linear-gradient(180deg,rgba(255,251,245,.72),rgba(255,249,241,.40))!important;
  }
}

/* ===== planner-age-center-241.css ===== */
/* V2.41 — child age picker centered + auto-open support.
   Position-only refinement; existing premium picker visuals and Android viewport lock remain. */

.age-dropdown-popover{
  left:50%!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  transform:translate3d(-50%,-50%,0)!important;
}
.age-dropdown-popover.is-open{
  transform:translate3d(-50%,-50%,0)!important;
}

/* Android picker is inside the already-locked .planner-app, so 50/50 is the exact
   visible app center and cannot drift under the footer. */
html.is-android .age-dropdown-popover.age-picker-local,
html.is-android .age-dropdown-popover.age-picker-local.is-open{
  left:50%!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  transform:translate3d(-50%,-50%,0)!important;
}

/* ===== planner-step2-244.css ===== */
/* V2.44 — Wizard 2 polish + premium custom budget dialog.
   - exact Wizard 2 progress title stays: "Koliko trošimo i koliko kuvamo?"
   - stronger milk-white fade for readability down to "Maksimalno vreme kuvanja"
   - photo nudged a bit lower
   - custom budget field opens centered premium modal instead of native input */

/* All wizard progress titles stay aligned to the left edge. */
body.wizard-planner .wizard-progress-copy{
  justify-content:flex-start!important;
  align-items:flex-start!important;
  padding-left:0!important;
  padding-right:8px!important;
}
body.wizard-planner .wizard-progress-copy strong{
  text-align:left!important;
  font-size:15px!important;
  line-height:1.08!important;
}
body.wizard-planner .wizard-progress-head{
  min-height:72px!important;
}

/* Wizard 2 title */
body.wizard-planner .planner-wizard:has(#budget-section.is-wizard-active) [data-wizard-progress-title]{
  content:"Koliko trošimo i koliko kuvamo?"!important;
}

/* Full wizard photo when Step 2 is active. */
body.wizard-planner .planner-wizard:has(#budget-section.is-wizard-active)::before{
  background:
    url('/assets/ui/premium/wizard-budget-time-bg-244.webp') center 55% / cover no-repeat,
    #FBF6ED!important;
  transform:scale(1.012)!important;
}
body.wizard-planner .planner-wizard:has(#budget-section.is-wizard-active)::after{
  background:
    linear-gradient(180deg,
      rgba(251,246,237,.95) 0%,
      rgba(251,246,237,.90) 10%,
      rgba(251,246,237,.79) 24%,
      rgba(251,246,237,.67) 38%,
      rgba(251,246,237,.56) 52%,
      rgba(251,246,237,.47) 66%,
      rgba(251,246,237,.35) 78%,
      rgba(251,246,237,.22) 90%,
      rgba(251,246,237,.16) 100%)!important;
}

/* Step 2 stays transparent so the bg runs seamlessly through the whole wizard. */
body.wizard-planner #budget-section{background:transparent!important}
body.wizard-planner #budget-section > .budget-feature-head{display:none!important}

/* Section labels above panels, matching Wizard 1. */
body.wizard-planner #budget-section .step2-panel-intro{
  display:flex!important;
  align-items:baseline!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin:0 3px 8px!important;
  min-width:0!important;
}
body.wizard-planner #budget-section .step2-panel-intro strong{
  min-width:0!important;
  color:#2A211B!important;
  font:800 15px/1.12 "Manrope",sans-serif!important;
  letter-spacing:-.32px!important;
  text-shadow:0 1px 0 rgba(255,255,255,.55)!important;
}
body.wizard-planner #budget-section .step2-panel-intro small{
  flex:0 0 auto!important;
  color:#84877f!important;
  font:700 7.5px/1.1 "DM Sans",sans-serif!important;
  white-space:nowrap!important;
}
body.wizard-planner #budget-section .time-intro{margin-top:12px!important}

/* Gentle micro haze behind the lower section title for readability. */
body.wizard-planner #budget-section .time-intro{
  position:relative!important;
}
body.wizard-planner #budget-section .time-intro::before{
  content:"";
  position:absolute;
  inset:-8px -10px -8px -10px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(251,246,237,.36), rgba(251,246,237,.24));
  filter:blur(6px);
  z-index:-1;
}

/* Glass panels. */
body.wizard-planner #budget-section .budget-panel,
body.wizard-planner #budget-section .time-panel{
  margin-top:0!important;
  padding:10px!important;
  background:rgba(255,250,245,.82)!important;
  border-color:rgba(255,255,255,.86)!important;
  -webkit-backdrop-filter:blur(9px) saturate(1.04)!important;
  backdrop-filter:blur(9px) saturate(1.04)!important;
  box-shadow:0 12px 28px rgba(73,51,35,.11), inset 0 1px 0 rgba(255,255,255,.72)!important;
}
body.wizard-planner #budget-section .budget-panel-head,
body.wizard-planner #budget-section .time-head{display:none!important}

body.wizard-planner #budget-section .budget-options,
body.wizard-planner #budget-section .time-options{gap:5px!important}
body.wizard-planner #budget-section .budget-options button,
body.wizard-planner #budget-section .time-options button{
  height:43px!important;
  border-radius:13px!important;
  font-size:9px!important;
}

body.wizard-planner #budget-section .money-field{
  width:100%!important;
  margin-top:7px!important;
}
body.wizard-planner #budget-section .money-field>span{
  font-size:7px!important;
  margin-bottom:3px!important;
}
body.wizard-planner #budget-section .money-field>div{
  height:39px!important;
  border-radius:12px!important;
}
body.wizard-planner #budget-section .money-field-shell{
  cursor:pointer!important;
  touch-action:manipulation!important;
}
body.wizard-planner #budget-section .money-field-shell:focus-visible{
  outline:none!important;
  border-color:#D97854!important;
  box-shadow:0 0 0 3px rgba(217,120,84,.12)!important;
}
body.wizard-planner #budget-section [data-budget-custom]{
  cursor:pointer!important;
  caret-color:transparent!important;
  user-select:none!important;
}

body.wizard-planner #budget-section .budget-bottom{
  min-height:24px!important;
  height:auto!important;
  margin-top:5px!important;
  overflow:visible!important;
}
body.wizard-planner #budget-section .budget-bottom>span{min-height:24px!important;font-size:7px!important}
body.wizard-planner #budget-section .budget-bottom img{display:none!important}

body.wizard-planner #budget-section .wizard-actions{
  background:linear-gradient(180deg,
    rgba(251,246,237,0) 0%,
    rgba(251,246,237,.11) 18%,
    rgba(251,246,237,.24) 46%,
    rgba(251,246,237,.38) 100%)!important;
}

/* Premium centered custom amount dialog. */
.budget-dialog-guard{
  position:fixed!important;
  inset:0!important;
  z-index:10060!important;
  background:rgba(35,34,29,.18)!important;
  backdrop-filter:blur(2px)!important;
  -webkit-backdrop-filter:blur(2px)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .14s ease,visibility .14s ease!important;
  touch-action:none!important;
  overscroll-behavior:none!important;
}
.budget-dialog-guard.is-open{opacity:1!important;visibility:visible!important;pointer-events:auto!important}

.budget-dialog-popover{
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate3d(-50%,-50%,0)!important;
  z-index:10070!important;
  width:280px!important;
  max-width:calc(100% - 24px)!important;
  margin:0!important;
  padding:12px!important;
  box-sizing:border-box!important;
  border:1px solid rgba(255,255,255,.94)!important;
  border-radius:22px!important;
  background:rgba(251,248,241,.992)!important;
  box-shadow:0 20px 48px rgba(45,40,33,.23),0 5px 16px rgba(45,40,33,.10)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .14s ease,visibility .14s ease!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:manipulation!important;
  contain:layout paint!important;
}
.budget-dialog-popover.is-open{opacity:1!important;visibility:visible!important;pointer-events:auto!important}

.budget-dialog-head{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin:0 2px 10px!important;
}
.budget-dialog-head div{min-width:0!important}
.budget-dialog-head small{
  display:block!important;
  margin-bottom:3px!important;
  color:#C76748!important;
  font:800 9px/1.1 "Manrope",sans-serif!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
.budget-dialog-head strong{
  display:block!important;
  color:#2E2923!important;
  font:800 14px/1.15 "Manrope",sans-serif!important;
}
.budget-dialog-head span{flex:0 0 auto!important;color:#92948C!important;font:700 10px/1 "DM Sans",sans-serif!important}

.budget-dialog-display{
  height:44px!important;
  border-radius:14px!important;
  border:1px solid #E4E2DB!important;
  background:#F5F3EE!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:0 12px!important;
  margin-bottom:10px!important;
  box-shadow:0 3px 7px rgba(66,60,53,.05), inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.budget-dialog-value{
  min-width:0!important;
  color:#2E2923!important;
  font:800 18px/1 "Manrope",sans-serif!important;
  letter-spacing:-.03em!important;
}
.budget-dialog-value.is-empty{color:#A4A69F!important;font-weight:700!important}
.budget-dialog-currency{color:#8C8F87!important;font:800 10px/1 "Manrope",sans-serif!important}

.budget-dialog-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
}
.budget-dialog-key,
.budget-dialog-action{
  min-width:0!important;
  height:41px!important;
  padding:0!important;
  border:1px solid #E4E2DB!important;
  border-radius:12px!important;
  background:#F5F3EE!important;
  color:#5F625D!important;
  font:800 15px/1 "Manrope",sans-serif!important;
  text-align:center!important;
  box-shadow:0 3px 7px rgba(66,60,53,.05), inset 0 1px 0 rgba(255,255,255,.9)!important;
  cursor:pointer!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  touch-action:manipulation!important;
}
.budget-dialog-action.is-accent{
  border-color:#D86B49!important;
  background:#ED704B!important;
  color:#fff!important;
  box-shadow:0 5px 12px rgba(210,102,70,.20)!important;
}
.budget-dialog-key:active,
.budget-dialog-action:active{transform:translateY(1px)!important;box-shadow:0 1px 4px rgba(66,60,53,.05)!important}
.budget-dialog-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  margin-top:10px!important;
}

@media(max-width:390px){
  body.wizard-planner .wizard-progress-copy strong{font-size:14px!important}
  body.wizard-planner #budget-section .step2-panel-intro small{font-size:7px!important}
}
@media(max-height:760px){
  body.wizard-planner .planner-wizard:has(#budget-section.is-wizard-active)::before{
    background-position:center 58%!important;
  }
  .budget-dialog-popover{width:268px!important;padding:10px!important}
  .budget-dialog-key,.budget-dialog-action{height:39px!important}
}


/* V2.53 — Wizard 2 headings now use the exact Wizard 3 typography system */
body.wizard-planner #budget-section .wizard-block-heading{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:8px!important;
  row-gap:4px!important;
  margin:1px 2px 6px!important;
  padding:0 6px!important;
}
body.wizard-planner #budget-section .wizard-block-heading + .glass-panel{margin-top:0!important}
body.wizard-planner #budget-section .wizard-block-heading h3{
  margin:0!important;
  color:#1f1813!important;
  font:800 clamp(20px,4.8vw,28px)/.96 "Manrope",sans-serif!important;
  letter-spacing:-.03em!important;
}
body.wizard-planner #budget-section .wizard-block-heading p{
  margin:3px 0 0!important;
  color:#7c766f!important;
  font:700 clamp(9px,2.5vw,11px)/1.24 "Manrope",sans-serif!important;
}
body.wizard-planner #budget-section .wizard-block-heading em{
  align-self:center!important;
  justify-self:end!important;
  margin:5px 1px 0 0!important;
  color:#A26F59!important;
  font:500 clamp(15px,4vw,19px)/1 "Caveat","Segoe Print",cursive!important;
  white-space:nowrap!important;
  text-align:right!important;
  transform:rotate(-3deg)!important;
  opacity:.92!important;
}
body.wizard-planner #budget-section .time-heading{margin-top:10px!important}
/* neutralize old step2 helper styling */
body.wizard-planner #budget-section .step2-panel-intro small{display:none!important}
@media(max-width:390px){
  body.wizard-planner #budget-section .wizard-block-heading{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:6px!important;
    margin:1px 2px 6px!important;
    padding:0 4px!important;
  }
  body.wizard-planner #budget-section .wizard-block-heading em{
    justify-self:end!important;
    text-align:right!important;
    font-size:14.5px!important;
    transform:rotate(-3deg)!important;
  }
}


/* V2.54 — W1/W2 heading line discipline only.
   Main heading and subtitle stay on one line; handwritten helper is a deliberate two-line accent. */
body.wizard-planner #family-section .wizard-block-heading h3,
body.wizard-planner #budget-section .wizard-block-heading h3{
  white-space:nowrap!important;
  font-size:clamp(17px,4.15vw,23px)!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
}
body.wizard-planner #family-section .wizard-block-heading p,
body.wizard-planner #budget-section .wizard-block-heading p{
  white-space:nowrap!important;
  font-size:clamp(8px,2.12vw,10.2px)!important;
  line-height:1.12!important;
  letter-spacing:-.015em!important;
}
body.wizard-planner #family-section .wizard-block-heading em,
body.wizard-planner #budget-section .wizard-block-heading em{
  white-space:normal!important;
  min-width:70px!important;
  max-width:88px!important;
  font-size:clamp(14px,3.7vw,18px)!important;
  line-height:.78!important;
  text-align:right!important;
}
body.wizard-planner #family-section .wizard-block-heading em br,
body.wizard-planner #budget-section .wizard-block-heading em br{display:block!important}
@media(max-width:390px){
  body.wizard-planner #family-section .wizard-block-heading,
  body.wizard-planner #budget-section .wizard-block-heading{
    grid-template-columns:minmax(0,1fr) 72px!important;
    column-gap:5px!important;
  }
  body.wizard-planner #family-section .wizard-block-heading h3,
  body.wizard-planner #budget-section .wizard-block-heading h3{font-size:16px!important}
  body.wizard-planner #family-section .wizard-block-heading p,
  body.wizard-planner #budget-section .wizard-block-heading p{font-size:7.7px!important}
  body.wizard-planner #family-section .wizard-block-heading em,
  body.wizard-planner #budget-section .wizard-block-heading em{
    min-width:72px!important;max-width:72px!important;font-size:13.8px!important;line-height:.8!important
  }
}
@media(max-width:350px){
  body.wizard-planner #family-section .wizard-block-heading,
  body.wizard-planner #budget-section .wizard-block-heading{grid-template-columns:minmax(0,1fr) 66px!important}
  body.wizard-planner #family-section .wizard-block-heading h3,
  body.wizard-planner #budget-section .wizard-block-heading h3{font-size:14.8px!important}
  body.wizard-planner #family-section .wizard-block-heading p,
  body.wizard-planner #budget-section .wizard-block-heading p{font-size:7.2px!important}
  body.wizard-planner #family-section .wizard-block-heading em,
  body.wizard-planner #budget-section .wizard-block-heading em{min-width:66px!important;max-width:66px!important;font-size:13px!important}
}


/* V2.55 — micro polish only
   - Step 1: a little more breathing room before "Koliko dana planiramo?"
   - Step 2: handwritten helper tightened into a cleaner 2-line premium stack */
body.wizard-planner #budget-section .wizard-block-heading em{
  min-width:78px!important;
  max-width:78px!important;
  line-height:.82!important;
  letter-spacing:-.01em!important;
}
@media(max-width:390px){
  body.wizard-planner #budget-section .wizard-block-heading em{
    min-width:72px!important;
    max-width:72px!important;
    line-height:.8!important;
  }
}
@media(max-width:350px){
  body.wizard-planner #budget-section .wizard-block-heading em{
    min-width:66px!important;
    max-width:66px!important;
    line-height:.8!important;
  }
}

/* ===== planner-step3-249.css ===== */
/* V2.46 — Wizard 3 refined:
   - removes the inner "Šta volite da jedete" subtitle block
   - moves "Način ishrane" and "Vrsta kuhinje" outside white panels
   - makes every clickable item a premium visual card with clearer images */

/* keep wizard titles left aligned across later steps */
body.wizard-planner #taste-section .section-heading,
body.wizard-planner #allergy-section .section-heading,
body.wizard-planner #review-section .section-heading{margin-top:1px!important}
body.wizard-planner #taste-section .section-heading div,
body.wizard-planner #allergy-section .section-heading div,
body.wizard-planner #review-section .section-heading div{padding-right:0!important}
body.wizard-planner #taste-section .section-heading span,
body.wizard-planner #allergy-section .section-heading span{display:none!important}
body.wizard-planner #taste-section .section-heading h2,
body.wizard-planner #allergy-section .section-heading h2,
body.wizard-planner #review-section .section-heading h2{text-align:left!important}

/* wizard 3 section heading is removed visually */
body.wizard-planner #taste-section .taste-heading{display:none!important}

/* labels above the panels, matching W1/W2 rhythm */
body.wizard-planner #taste-section .wizard-block-heading{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:end!important;
  gap:10px!important;
  margin:2px 2px 8px!important;
  padding:0 6px!important;
}
body.wizard-planner #taste-section .wizard-block-heading + .glass-panel{margin-top:0!important}
body.wizard-planner #taste-section .wizard-block-heading h3{
  margin:0!important;
  color:#1f1813!important;
  font:800 clamp(23px,5.5vw,32px)/.96 "Manrope",sans-serif!important;
  letter-spacing:-.03em!important;
}
body.wizard-planner #taste-section .wizard-block-heading p{
  margin:5px 0 0!important;
  color:#7c766f!important;
  font:700 clamp(10px,2.9vw,12px)/1.24 "Manrope",sans-serif!important;
}
body.wizard-planner #taste-section .wizard-block-heading em{
  align-self:start!important;
  color:#9b6d56!important;
  font:400 clamp(16px,4.2vw,20px)/.98 "Segoe Print","Comic Sans MS",cursive!important;
  white-space:nowrap!important;
  transform:rotate(-5deg)!important;
  text-align:right!important;
  opacity:.95!important;
}
body.wizard-planner #taste-section .cuisine-block-heading{margin-top:12px!important}

/* premium panel shells */
body.wizard-planner #taste-section .taste-panel,
body.wizard-planner #taste-section .cuisine-panel,
body.wizard-planner #allergy-section .allergy-panel,
body.wizard-planner #allergy-section .avoid-panel{
  background:rgba(255,255,255,.80)!important;
  border:1px solid rgba(255,255,255,.95)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.03)!important;
  backdrop-filter:blur(10px) saturate(1.03)!important;
  box-shadow:0 12px 28px rgba(72,56,40,.09), inset 0 1px 0 rgba(255,255,255,.72)!important;
}
body.wizard-planner #taste-section .taste-panel{padding-top:12px!important}
body.wizard-planner #taste-section .cuisine-panel{padding-top:12px!important;margin-top:0!important}
body.wizard-planner #allergy-section .avoid-panel{margin-top:10px!important}

/* remove in-panel title rows from old revision if any linger */
body.wizard-planner #taste-section .panel-title-rich{display:none!important}

/* every diet choice becomes a more visual premium tile */
body.wizard-planner #taste-section .diet-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
body.wizard-planner #taste-section .diet-grid button,
body.wizard-planner #taste-section .diet-grid button:nth-child(4),
body.wizard-planner #taste-section .diet-grid button:nth-child(5){
  grid-column:auto!important;
  min-height:150px!important;
  padding:8px!important;
  border-radius:22px!important;
  display:grid!important;
  grid-template-rows:90px auto auto!important;
  align-content:start!important;
  text-align:center!important;
  background:linear-gradient(180deg,rgba(252,250,246,.96),rgba(247,243,236,.92))!important;
  border:1px solid rgba(255,255,255,.95)!important;
  box-shadow:0 10px 20px rgba(63,49,35,.08), inset 0 1px 0 rgba(255,255,255,.68)!important;
}
body.wizard-planner #taste-section .diet-grid img,
body.wizard-planner #taste-section .diet-grid button:nth-child(4) img,
body.wizard-planner #taste-section .diet-grid button:nth-child(5) img{
  width:100%!important;
  height:90px!important;
  object-fit:cover!important;
  border-radius:16px!important;
  display:block!important;
  box-shadow:0 8px 18px rgba(65,50,36,.08)!important;
}
body.wizard-planner #taste-section .diet-grid b{
  display:block!important;
  margin-top:8px!important;
  color:#201914!important;
  font:800 clamp(12px,3.2vw,15px)/1.06 "Manrope",sans-serif!important;
}
body.wizard-planner #taste-section .diet-grid small{
  display:block!important;
  margin-top:4px!important;
  color:#8b877e!important;
  font:700 clamp(9px,2.6vw,10.5px)/1.18 "Manrope",sans-serif!important;
}
body.wizard-planner #taste-section .diet-grid button.is-selected{
  background:linear-gradient(180deg,#edf6e8,#e7f1e2)!important;
  border-color:#9cbc91!important;
  box-shadow:0 12px 22px rgba(93,130,76,.12), inset 0 1px 0 rgba(255,255,255,.75)!important;
}
body.wizard-planner #taste-section .diet-grid button.is-selected::after{
  right:9px!important;
  top:9px!important;
  width:24px!important;
  height:24px!important;
  font-size:13px!important;
}

/* cuisine choices also become richer visual cards */
body.wizard-planner #taste-section .cuisine-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
body.wizard-planner #taste-section .cuisine-grid label{
  min-height:136px!important;
  border-radius:20px!important;
  grid-template-rows:88px auto!important;
  background:linear-gradient(180deg,rgba(252,250,246,.97),rgba(247,244,237,.92))!important;
  border:1px solid rgba(255,255,255,.95)!important;
  box-shadow:0 10px 20px rgba(63,49,35,.07), inset 0 1px 0 rgba(255,255,255,.68)!important;
}
body.wizard-planner #taste-section .cuisine-grid img{
  width:100%!important;
  height:88px!important;
  object-fit:cover!important;
  display:block!important;
  box-shadow:0 8px 17px rgba(65,50,36,.07)!important;
}
body.wizard-planner #taste-section .cuisine-grid span{
  padding:8px 5px 10px!important;
  font:800 clamp(11px,3vw,13px)/1.08 "Manrope",sans-serif!important;
  color:#241d18!important;
}
body.wizard-planner #taste-section .cuisine-grid label:has(input:checked){
  background:linear-gradient(180deg,#edf6e8,#e7f1e2)!important;
  border-color:#96b789!important;
  box-shadow:0 12px 22px rgba(93,130,76,.11), inset 0 1px 0 rgba(255,255,255,.72)!important;
}
body.wizard-planner #taste-section .cuisine-grid label:has(input:checked)::after{
  width:22px!important;
  height:22px!important;
  top:7px!important;
  right:7px!important;
}

/* step 4 layout retained */
body.wizard-planner #allergy-section .section-heading p{max-width:30ch!important}
body.wizard-planner #allergy-section .allergy-panel .panel-title,
body.wizard-planner #allergy-section .avoid-panel .text-field > span{color:#2A211B!important}
body.wizard-planner #allergy-section .allergen-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
body.wizard-planner #allergy-section .avoid-panel .text-field{margin-top:0!important}

/* keep review step spacing intact */
body.wizard-planner #review-section .section-heading{padding-top:0!important}

@media(max-width:390px){
  body.wizard-planner #taste-section .wizard-block-heading{
    grid-template-columns:minmax(0,1fr)!important;
    gap:4px!important;
    margin:0 1px 8px!important;
    padding:0 4px!important;
  }
  body.wizard-planner #taste-section .wizard-block-heading em{
    justify-self:start!important;
    text-align:left!important;
    transform:rotate(-4deg)!important;
  }
  body.wizard-planner #taste-section .diet-grid,
  body.wizard-planner #taste-section .cuisine-grid{gap:8px!important}
  body.wizard-planner #taste-section .diet-grid button,
  body.wizard-planner #taste-section .diet-grid button:nth-child(4),
  body.wizard-planner #taste-section .diet-grid button:nth-child(5){min-height:138px!important;grid-template-rows:82px auto auto!important;padding:7px!important}
  body.wizard-planner #taste-section .diet-grid img,
  body.wizard-planner #taste-section .diet-grid button:nth-child(4) img,
  body.wizard-planner #taste-section .diet-grid button:nth-child(5) img{height:82px!important}
  body.wizard-planner #taste-section .cuisine-grid label{min-height:128px!important;grid-template-rows:82px auto!important}
  body.wizard-planner #taste-section .cuisine-grid img{height:82px!important}
}


/* V2.47 image fit polish */
body.wizard-planner #taste-section .diet-grid button{
  min-height:138px!important;
  grid-template-rows:78px auto auto!important;
  padding:8px 8px 10px!important;
}
body.wizard-planner #taste-section .diet-grid img{
  width:100%!important;
  height:78px!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:transparent!important;
  mix-blend-mode:multiply!important;
  filter:drop-shadow(0 6px 10px rgba(69,52,35,.10))!important;
  box-shadow:none!important;
}
body.wizard-planner #taste-section .cuisine-grid label{
  min-height:124px!important;
  grid-template-rows:72px auto!important;
  padding:8px!important;
}
body.wizard-planner #taste-section .cuisine-grid img{
  width:100%!important;
  height:72px!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:transparent!important;
  mix-blend-mode:multiply!important;
  filter:drop-shadow(0 5px 9px rgba(69,52,35,.10))!important;
  box-shadow:none!important;
}
body.wizard-planner #taste-section .cuisine-grid span{padding:8px 4px 6px!important}
@media(max-width:390px){
  body.wizard-planner #taste-section .diet-grid button{min-height:132px!important;grid-template-rows:72px auto auto!important}
  body.wizard-planner #taste-section .diet-grid img{height:72px!important}
  body.wizard-planner #taste-section .cuisine-grid label{min-height:118px!important;grid-template-rows:66px auto!important}
  body.wizard-planner #taste-section .cuisine-grid img{height:66px!important}
}


/* V2.48 compact icon-style layout so both blocks fit in wizard */
body.wizard-planner #taste-section .taste-panel,
body.wizard-planner #taste-section .cuisine-panel{
  padding:10px!important;
}
body.wizard-planner #taste-section .wizard-block-heading{
  margin:1px 2px 6px!important;
}
body.wizard-planner #taste-section .wizard-block-heading h3{
  font-size:clamp(20px,4.8vw,28px)!important;
}
body.wizard-planner #taste-section .wizard-block-heading p{
  font-size:clamp(9px,2.5vw,11px)!important;
  margin-top:3px!important;
}
body.wizard-planner #taste-section .diet-grid{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:6px!important;
}
body.wizard-planner #taste-section .diet-grid button,
body.wizard-planner #taste-section .diet-grid button:nth-child(4),
body.wizard-planner #taste-section .diet-grid button:nth-child(5){
  grid-column:auto!important;
  min-height:96px!important;
  border-radius:18px!important;
  padding:6px 4px 7px!important;
  grid-template-rows:44px auto!important;
  align-content:start!important;
  justify-items:center!important;
}
body.wizard-planner #taste-section .diet-grid img,
body.wizard-planner #taste-section .diet-grid button:nth-child(4) img,
body.wizard-planner #taste-section .diet-grid button:nth-child(5) img{
  width:100%!important;
  max-width:42px!important;
  height:44px!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:0!important;
  margin:0 auto!important;
}
body.wizard-planner #taste-section .diet-grid b{
  margin-top:5px!important;
  font:800 clamp(9px,2.35vw,11px)/1.08 "Manrope",sans-serif!important;
  text-align:center!important;
  overflow-wrap:anywhere!important;
}
body.wizard-planner #taste-section .diet-grid small{
  display:none!important;
}
body.wizard-planner #taste-section .diet-grid button.is-selected::after{
  width:18px!important;height:18px!important;top:5px!important;right:5px!important;font-size:10px!important;
}
body.wizard-planner #taste-section .cuisine-block-heading{margin-top:10px!important}
body.wizard-planner #taste-section .cuisine-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:6px!important;
}
body.wizard-planner #taste-section .cuisine-grid label{
  min-height:92px!important;
  border-radius:17px!important;
  grid-template-rows:42px auto!important;
  padding:6px 4px 7px!important;
  align-content:start!important;
}
body.wizard-planner #taste-section .cuisine-grid img{
  width:100%!important;
  max-width:40px!important;
  height:42px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0 auto!important;
  border-radius:0!important;
}
body.wizard-planner #taste-section .cuisine-grid span{
  padding:5px 1px 0!important;
  font:800 clamp(8.6px,2.15vw,10px)/1.08 "Manrope",sans-serif!important;
  text-align:center!important;
  overflow-wrap:anywhere!important;
  hyphens:auto!important;
}
body.wizard-planner #taste-section .cuisine-grid label:has(input:checked)::after{
  width:17px!important;height:17px!important;top:4px!important;right:4px!important;font-size:9px!important;
}
@media(max-width:390px){
  body.wizard-planner #taste-section .diet-grid{gap:5px!important}
  body.wizard-planner #taste-section .diet-grid button,
  body.wizard-planner #taste-section .diet-grid button:nth-child(4),
  body.wizard-planner #taste-section .diet-grid button:nth-child(5){min-height:92px!important;grid-template-rows:40px auto!important;padding:5px 3px 6px!important}
  body.wizard-planner #taste-section .diet-grid img,
  body.wizard-planner #taste-section .diet-grid button:nth-child(4) img,
  body.wizard-planner #taste-section .diet-grid button:nth-child(5) img{max-width:38px!important;height:40px!important}
  body.wizard-planner #taste-section .diet-grid b{font-size:8.5px!important}
  body.wizard-planner #taste-section .cuisine-grid{gap:5px!important}
  body.wizard-planner #taste-section .cuisine-grid label{min-height:86px!important;grid-template-rows:38px auto!important;padding:5px 3px 6px!important}
  body.wizard-planner #taste-section .cuisine-grid img{max-width:36px!important;height:38px!important}
  body.wizard-planner #taste-section .cuisine-grid span{font-size:8px!important}
}

/* =========================================================
   V2.49 — STEP 3 visual polish only
   Circular food artwork, equal option cards, compact handwritten notes.
   No wizard logic / positioning / other steps touched.
   ========================================================= */

/* Keep the handwritten helper in the same heading line on phones too. */
body.wizard-planner #taste-section .wizard-block-heading,
body.wizard-planner #taste-section .wizard-block-heading.taste-block-heading,
body.wizard-planner #taste-section .wizard-block-heading.cuisine-block-heading{
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:8px!important;
}
body.wizard-planner #taste-section .wizard-block-heading em{
  align-self:center!important;
  justify-self:end!important;
  margin:5px 1px 0 0!important;
  color:#A26F59!important;
  font:500 clamp(15px,4vw,19px)/1 "Caveat","Segoe Print",cursive!important;
  white-space:nowrap!important;
  text-align:right!important;
  transform:rotate(-3deg)!important;
  opacity:.92!important;
}

/* Diet cards — all exactly equal inside this group. */
body.wizard-planner #taste-section .diet-grid{
  align-items:stretch!important;
}
body.wizard-planner #taste-section .diet-grid button,
body.wizard-planner #taste-section .diet-grid button:nth-child(4),
body.wizard-planner #taste-section .diet-grid button:nth-child(5){
  height:94px!important;
  min-height:94px!important;
  max-height:94px!important;
  grid-template-rows:50px 1fr!important;
  align-items:start!important;
  justify-items:center!important;
  padding:6px 3px 7px!important;
  border-radius:18px!important;
  overflow:visible!important;
}

/* Circular visual treatment: the artwork is clipped into a true circle. */
body.wizard-planner #taste-section .diet-grid img,
body.wizard-planner #taste-section .diet-grid button:nth-child(4) img,
body.wizard-planner #taste-section .diet-grid button:nth-child(5) img{
  width:48px!important;
  max-width:48px!important;
  height:48px!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
  padding:2px!important;
  box-sizing:border-box!important;
  background:rgba(248,246,240,.92)!important;
  border:1px solid rgba(225,219,208,.92)!important;
  box-shadow:0 5px 12px rgba(62,48,34,.10), inset 0 1px 0 rgba(255,255,255,.92)!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}
body.wizard-planner #taste-section .diet-grid b{
  align-self:center!important;
  margin:4px 0 0!important;
  min-height:19px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#241D18!important;
  font:800 clamp(9.2px,2.45vw,11px)/1 "Manrope",sans-serif!important;
  white-space:nowrap!important;
  overflow-wrap:normal!important;
}
body.wizard-planner #taste-section .diet-grid small{display:none!important}
body.wizard-planner #taste-section .diet-grid button.is-selected::after{
  top:4px!important;
  right:4px!important;
  width:18px!important;
  height:18px!important;
  border:2px solid rgba(255,255,255,.95)!important;
  box-shadow:0 3px 8px rgba(73,103,61,.18)!important;
}

/* Cuisine cards — every field equal in this group, with matching circular art. */
body.wizard-planner #taste-section .cuisine-grid{
  align-items:stretch!important;
}
body.wizard-planner #taste-section .cuisine-grid label{
  height:91px!important;
  min-height:91px!important;
  max-height:91px!important;
  grid-template-rows:52px 1fr!important;
  align-content:start!important;
  justify-items:center!important;
  padding:6px 4px 7px!important;
  border-radius:18px!important;
  overflow:visible!important;
}
body.wizard-planner #taste-section .cuisine-grid img{
  width:50px!important;
  max-width:50px!important;
  height:50px!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
  padding:2px!important;
  box-sizing:border-box!important;
  background:rgba(248,246,240,.92)!important;
  border:1px solid rgba(225,219,208,.92)!important;
  box-shadow:0 5px 12px rgba(62,48,34,.09), inset 0 1px 0 rgba(255,255,255,.92)!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}
body.wizard-planner #taste-section .cuisine-grid span{
  align-self:center!important;
  min-height:20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:3px 1px 0!important;
  color:#241D18!important;
  font:800 clamp(8.2px,2.12vw,10px)/1.04 "Manrope",sans-serif!important;
  text-align:center!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
}

/* Slightly tighter only on narrow phones; structure stays identical. */
@media(max-width:390px){
  body.wizard-planner #taste-section .wizard-block-heading,
  body.wizard-planner #taste-section .wizard-block-heading.taste-block-heading,
  body.wizard-planner #taste-section .wizard-block-heading.cuisine-block-heading{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:6px!important;
  }
  body.wizard-planner #taste-section .wizard-block-heading em{
    justify-self:end!important;
    font-size:14.5px!important;
    transform:rotate(-3deg)!important;
  }
  body.wizard-planner #taste-section .diet-grid button,
  body.wizard-planner #taste-section .diet-grid button:nth-child(4),
  body.wizard-planner #taste-section .diet-grid button:nth-child(5){
    height:89px!important;
    min-height:89px!important;
    max-height:89px!important;
    grid-template-rows:46px 1fr!important;
  }
  body.wizard-planner #taste-section .diet-grid img,
  body.wizard-planner #taste-section .diet-grid button:nth-child(4) img,
  body.wizard-planner #taste-section .diet-grid button:nth-child(5) img{
    width:44px!important;
    max-width:44px!important;
    height:44px!important;
  }
  body.wizard-planner #taste-section .diet-grid b{font-size:8.5px!important}
  body.wizard-planner #taste-section .cuisine-grid label{
    height:86px!important;
    min-height:86px!important;
    max-height:86px!important;
    grid-template-rows:47px 1fr!important;
  }
  body.wizard-planner #taste-section .cuisine-grid img{
    width:45px!important;
    max-width:45px!important;
    height:45px!important;
  }
  body.wizard-planner #taste-section .cuisine-grid span{font-size:7.9px!important}
}

/* V2.50 — align Vege and Posno labels with the other diet choices.
   Only resets the old special two-column layout that still affected items 4 and 5. */
body.wizard-planner #taste-section .diet-grid button:nth-child(4),
body.wizard-planner #taste-section .diet-grid button:nth-child(5){
  grid-template-columns:1fr!important;
  grid-template-rows:50px 1fr!important;
  text-align:center!important;
  align-content:start!important;
  justify-items:center!important;
}
body.wizard-planner #taste-section .diet-grid button:nth-child(4) img,
body.wizard-planner #taste-section .diet-grid button:nth-child(5) img{
  grid-column:1!important;
  grid-row:1!important;
  align-self:start!important;
}
body.wizard-planner #taste-section .diet-grid button:nth-child(4) b,
body.wizard-planner #taste-section .diet-grid button:nth-child(5) b{
  grid-column:1!important;
  grid-row:2!important;
  align-self:center!important;
  justify-self:center!important;
  margin:4px 0 0!important;
}
@media(max-width:390px){
  body.wizard-planner #taste-section .diet-grid button:nth-child(4),
  body.wizard-planner #taste-section .diet-grid button:nth-child(5){
    grid-template-rows:46px 1fr!important;
  }
}

/* ===== planner-typography-lock-256.css ===== */
/* =========================================================
   V2.56 — WIZARD TYPOGRAPHY LOCK
   Single source of truth for Wizard 1–3 typography.

   STANDARD:
   - Manrope = functional UI: headings, option labels, numbers, buttons
   - DM Sans = secondary/helper/body copy
   - Caveat = handwritten accent only

   This file is loaded LAST so older version-specific declarations cannot
   create different typefaces/sizes between Wizard 1, 2 and 3.
   ========================================================= */

body.wizard-planner{
  --wz-font-ui:"Manrope",sans-serif;
  --wz-font-copy:"DM Sans",sans-serif;
  --wz-font-script:"Caveat","Segoe Print",cursive;

  --wz-block-title-size:clamp(20px,4.8vw,28px);
  --wz-block-copy-size:clamp(9px,2.5vw,11px);
  --wz-script-size:clamp(15px,4vw,19px);
  --wz-progress-title-size:15px;
}

/* ---------- Progress/header title: identical through all wizard steps ---------- */
body.wizard-planner .wizard-progress-copy strong{
  font-family:var(--wz-font-ui)!important;
  font-size:var(--wz-progress-title-size)!important;
  font-weight:800!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
}
body.wizard-planner .wizard-progress-copy > span{
  font-family:var(--wz-font-ui)!important;
  font-weight:800!important;
}
body.wizard-planner .wizard-progress-number{
  font-family:var(--wz-font-ui)!important;
  font-weight:800!important;
}

/* ---------- Shared block headings: W1, W2 and W3 use EXACT same typography ---------- */
body.wizard-planner #family-section .wizard-block-heading,
body.wizard-planner #budget-section .wizard-block-heading,
body.wizard-planner #taste-section .wizard-block-heading{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:8px!important;
  row-gap:4px!important;
  margin:1px 2px 6px!important;
  padding:0 6px!important;
}

body.wizard-planner #family-section .wizard-block-heading h3,
body.wizard-planner #budget-section .wizard-block-heading h3,
body.wizard-planner #taste-section .wizard-block-heading h3{
  margin:0!important;
  color:#1F1813!important;
  font-family:var(--wz-font-ui)!important;
  font-size:var(--wz-block-title-size)!important;
  font-weight:800!important;
  line-height:.96!important;
  letter-spacing:-.03em!important;
  white-space:nowrap!important;
}

body.wizard-planner #family-section .wizard-block-heading p,
body.wizard-planner #budget-section .wizard-block-heading p,
body.wizard-planner #taste-section .wizard-block-heading p{
  margin:3px 0 0!important;
  color:#7C766F!important;
  font-family:var(--wz-font-copy)!important;
  font-size:var(--wz-block-copy-size)!important;
  font-weight:600!important;
  line-height:1.18!important;
  letter-spacing:-.01em!important;
  white-space:nowrap!important;
}

body.wizard-planner #family-section .wizard-block-heading em,
body.wizard-planner #budget-section .wizard-block-heading em,
body.wizard-planner #taste-section .wizard-block-heading em{
  align-self:center!important;
  justify-self:end!important;
  margin:4px 1px 0 0!important;
  color:#A26F59!important;
  font-family:var(--wz-font-script)!important;
  font-size:var(--wz-script-size)!important;
  font-weight:500!important;
  font-style:normal!important;
  line-height:.84!important;
  letter-spacing:0!important;
  text-align:right!important;
  transform:rotate(-3deg)!important;
  opacity:.92!important;
}

/* W1/W2 intentionally use two-line handwritten accents; W3 may stay one line. */
body.wizard-planner #family-section .wizard-block-heading em,
body.wizard-planner #budget-section .wizard-block-heading em{
  white-space:normal!important;
  min-width:76px!important;
  max-width:82px!important;
}
body.wizard-planner #taste-section .wizard-block-heading em{
  white-space:nowrap!important;
}

/* Keep the previously approved extra breathing room between W1 blocks. */
body.wizard-planner #family-section .days-heading{margin-top:16px!important}
body.wizard-planner #budget-section .time-heading{margin-top:10px!important}
body.wizard-planner #taste-section .cuisine-block-heading{margin-top:10px!important}

/* ---------- Functional UI typography ---------- */
/* Wizard 1: remove the old Playfair/DM mix from controls and card labels. */
body.wizard-planner #family-section .family-name strong,
body.wizard-planner #family-section .counter-control b,
body.wizard-planner #family-section .days-row b,
body.wizard-planner #family-section .child-ages>strong,
body.wizard-planner #family-section .age-field span{
  font-family:var(--wz-font-ui)!important;
}
body.wizard-planner #family-section .family-name small,
body.wizard-planner #family-section .family-card>p,
body.wizard-planner #family-section .days-row small,
body.wizard-planner #family-section .days-hint{
  font-family:var(--wz-font-copy)!important;
}
body.wizard-planner #family-section .family-name strong{
  font-weight:800!important;
  letter-spacing:-.025em!important;
}
body.wizard-planner #family-section .counter-control b,
body.wizard-planner #family-section .days-row b{font-weight:800!important}

/* Wizard 2: all selectable values and field labels use Manrope; helper copy uses DM Sans. */
body.wizard-planner #budget-section .budget-options button,
body.wizard-planner #budget-section .time-options button,
body.wizard-planner #budget-section .money-field>span,
body.wizard-planner #budget-section .money-field input,
body.wizard-planner #budget-section .money-field b{
  font-family:var(--wz-font-ui)!important;
}
body.wizard-planner #budget-section .budget-options button,
body.wizard-planner #budget-section .time-options button{font-weight:800!important}
body.wizard-planner #budget-section .budget-bottom,
body.wizard-planner #budget-section .budget-bottom span{
  font-family:var(--wz-font-copy)!important;
}

/* Wizard 3: lock option labels to the same functional font system. */
body.wizard-planner #taste-section .diet-grid b,
body.wizard-planner #taste-section .cuisine-grid span{
  font-family:var(--wz-font-ui)!important;
  font-weight:800!important;
}
body.wizard-planner #taste-section .diet-grid small{
  font-family:var(--wz-font-copy)!important;
}

/* Shared wizard action buttons. */
body.wizard-planner .wizard-primary,
body.wizard-planner .wizard-secondary{
  font-family:var(--wz-font-ui)!important;
  font-weight:800!important;
}

/* ---------- Narrow phone rule: same scale for all three, never per-step ---------- */
@media(max-width:390px){
  body.wizard-planner{
    --wz-block-title-size:20px;
    --wz-block-copy-size:9px;
    --wz-script-size:14.5px;
  }
  body.wizard-planner #family-section .wizard-block-heading,
  body.wizard-planner #budget-section .wizard-block-heading,
  body.wizard-planner #taste-section .wizard-block-heading{
    grid-template-columns:minmax(0,1fr) auto!important;
    column-gap:6px!important;
    padding:0 4px!important;
  }
  body.wizard-planner #family-section .wizard-block-heading em,
  body.wizard-planner #budget-section .wizard-block-heading em{
    min-width:70px!important;
    max-width:74px!important;
  }
}

@media(max-width:350px){
  body.wizard-planner{
    --wz-block-title-size:18px;
    --wz-block-copy-size:8.2px;
    --wz-script-size:13.5px;
  }
  body.wizard-planner #family-section .wizard-block-heading em,
  body.wizard-planner #budget-section .wizard-block-heading em{
    min-width:66px!important;
    max-width:68px!important;
  }
}

/* ===== planner-alignment-lock-257.css ===== */
/* =========================================================
   V2.57 — WIZARD TEXT AXIS LOCK
   Shared horizontal alignment standard for wizard typography.

   STANDARD:
   - progress/current-step title starts 16px from wizard card edge
   - every block title starts on the same 16px axis
   - every block subtitle starts on the same 16px axis
   - handwritten notes remain intentionally free on the right

   Loaded after the typography lock so old responsive rules cannot shift
   individual wizard headings by a few pixels.
   ========================================================= */

body.wizard-planner{
  --wz-text-axis:16px;
}

/* Current-step title in the wizard progress/header row. */
body.wizard-planner .wizard-progress-head{
  padding-left:var(--wz-text-axis)!important;
}
body.wizard-planner .wizard-progress-copy{
  padding-left:0!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
}
body.wizard-planner .wizard-progress-copy strong{
  text-align:left!important;
}

/*
   Default wizard-step side padding is 14px, so +2px places visible text
   exactly on the 16px axis. Only the left geometry is touched here.
*/
body.wizard-planner #family-section .wizard-block-heading,
body.wizard-planner #budget-section .wizard-block-heading,
body.wizard-planner #taste-section .wizard-block-heading{
  margin-left:0!important;
  padding-left:2px!important;
}

/* Titles and subtitles share the exact same start point. */
body.wizard-planner #family-section .wizard-block-heading > div,
body.wizard-planner #budget-section .wizard-block-heading > div,
body.wizard-planner #taste-section .wizard-block-heading > div{
  min-width:0!important;
  margin-left:0!important;
  padding-left:0!important;
}
body.wizard-planner #family-section .wizard-block-heading h3,
body.wizard-planner #family-section .wizard-block-heading p,
body.wizard-planner #budget-section .wizard-block-heading h3,
body.wizard-planner #budget-section .wizard-block-heading p,
body.wizard-planner #taste-section .wizard-block-heading h3,
body.wizard-planner #taste-section .wizard-block-heading p{
  margin-left:0!important;
  padding-left:0!important;
  text-align:left!important;
}

/* On <=390px the wizard-step side padding becomes 12px; +4px preserves 16px. */
@media(max-width:390px){
  body.wizard-planner #family-section .wizard-block-heading,
  body.wizard-planner #budget-section .wizard-block-heading,
  body.wizard-planner #taste-section .wizard-block-heading{
    margin-left:0!important;
    padding-left:4px!important;
  }
}

/* ===== planner-wizard-background-261.css ===== */
/* V2.61 — UNIFIED WIZARD BACKGROUND: STRONGER SHADE ABOVE CLEAN BOTTOM
   Source: V2.60. Background only. No layout, typography, spacing,
   controls, cards or JS changes.
   Bottom 1/5 of the photo stays clean with no cream shadow.
   Above that point, the veil becomes noticeably stronger for better contrast. */

body.wizard-planner .planner-wizard::before{
  background:
    url('/assets/ui/premium/wizard-unified-bg-v274.webp') center bottom / cover no-repeat,
    #FBF6ED!important;
  transform:none!important;
  filter:none!important;
}

body.wizard-planner .planner-wizard::after{
  background:linear-gradient(180deg,
    rgba(251,246,237,.98) 0%,
    rgba(251,246,237,.98) 14%,
    rgba(251,246,237,.95) 24%,
    rgba(251,246,237,.89) 34%,
    rgba(251,246,237,.79) 46%,
    rgba(251,246,237,.64) 58%,
    rgba(251,246,237,.43) 68%,
    rgba(251,246,237,.20) 76%,
    rgba(251,246,237,0) 80%,
    rgba(251,246,237,0) 100%)!important;
}

/* Wizard 2 previously had its own photo. Override only its photo/veil so
   it uses the exact same unified background and gradient as all steps. */
body.wizard-planner .planner-wizard:has(#budget-section.is-wizard-active)::before{
  background:
    url('/assets/ui/premium/wizard-unified-bg-v274.webp') center bottom / cover no-repeat,
    #FBF6ED!important;
  transform:none!important;
  filter:none!important;
}
body.wizard-planner .planner-wizard:has(#budget-section.is-wizard-active)::after{
  background:linear-gradient(180deg,
    rgba(251,246,237,.98) 0%,
    rgba(251,246,237,.98) 14%,
    rgba(251,246,237,.95) 24%,
    rgba(251,246,237,.89) 34%,
    rgba(251,246,237,.79) 46%,
    rgba(251,246,237,.64) 58%,
    rgba(251,246,237,.43) 68%,
    rgba(251,246,237,.20) 76%,
    rgba(251,246,237,0) 80%,
    rgba(251,246,237,0) 100%)!important;
}

/* ===== planner-step4-262.css ===== */
/* V2.62 — Wizard 4 aligned to the locked Wizard 3 visual standard.
   Scope: step 4 only. Same heading hierarchy, circular visual cards and panel treatment.
   Allergen selections use a red X; "Nema alergija" remains a calm safe-state. */

body.wizard-planner #allergy-section{
  background:transparent!important;
}

/* Remove legacy top heading: W4 now follows W3's two-block structure. */
body.wizard-planner #allergy-section > .section-heading{display:none!important}

/* Block headings — same axis, type and handwritten helper as Wizard 3. */
body.wizard-planner #allergy-section .wizard-block-heading{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:8px!important;
  margin:1px 2px 6px!important;
  padding:0 6px!important;
}
body.wizard-planner #allergy-section .wizard-block-heading + .glass-panel{margin-top:0!important}
body.wizard-planner #allergy-section .wizard-block-heading h3{
  margin:0!important;
  color:#1f1813!important;
  font:800 clamp(20px,4.8vw,28px)/.96 "Manrope",sans-serif!important;
  letter-spacing:-.03em!important;
}
body.wizard-planner #allergy-section .wizard-block-heading p{
  margin:3px 0 0!important;
  color:#7c766f!important;
  font:700 clamp(8.4px,2.25vw,10.5px)/1.18 "Manrope",sans-serif!important;
  white-space:nowrap!important;
  letter-spacing:-.01em!important;
}
body.wizard-planner #allergy-section .wizard-block-heading em{
  align-self:center!important;
  justify-self:end!important;
  margin:3px 1px 0 0!important;
  color:#A26F59!important;
  font:500 clamp(15px,4vw,19px)/.88 "Caveat","Segoe Print",cursive!important;
  white-space:normal!important;
  text-align:right!important;
  transform:rotate(-3deg)!important;
  opacity:.92!important;
}
body.wizard-planner #allergy-section .dislikes-block-heading{margin-top:11px!important}
body.wizard-planner #allergy-section .dislikes-block-heading h3{font-size:clamp(18px,4.35vw,25px)!important}

/* Same translucent white panel treatment as W3. */
body.wizard-planner #allergy-section .allergy-panel,
body.wizard-planner #allergy-section .avoid-panel{
  padding:10px!important;
  background:rgba(255,255,255,.80)!important;
  border:1px solid rgba(255,255,255,.95)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.03)!important;
  backdrop-filter:blur(10px) saturate(1.03)!important;
  box-shadow:0 12px 28px rgba(72,56,40,.09), inset 0 1px 0 rgba(255,255,255,.72)!important;
}
body.wizard-planner #allergy-section .avoid-panel{margin-top:0!important}

/* Allergy cards — circular artwork and equal fields, mirroring Wizard 3. */
body.wizard-planner #allergy-section .allergen-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:6px!important;
  align-items:stretch!important;
}
body.wizard-planner #allergy-section .allergen-grid button,
body.wizard-planner #allergy-section .allergen-grid button[data-allergen="Orašasti plodovi"],
body.wizard-planner #allergy-section .allergen-grid button[data-allergen="Morski plodovi"]{
  position:relative!important;
  grid-column:auto!important;
  min-width:0!important;
  width:100%!important;
  height:91px!important;
  min-height:91px!important;
  max-height:91px!important;
  padding:6px 3px 7px!important;
  border-radius:18px!important;
  display:grid!important;
  grid-template-rows:50px 1fr!important;
  align-content:start!important;
  align-items:start!important;
  justify-items:center!important;
  gap:0!important;
  overflow:visible!important;
  color:#241D18!important;
  background:linear-gradient(180deg,rgba(252,250,246,.97),rgba(247,244,237,.92))!important;
  border:1px solid rgba(255,255,255,.95)!important;
  box-shadow:0 10px 20px rgba(63,49,35,.07), inset 0 1px 0 rgba(255,255,255,.68)!important;
}
body.wizard-planner #allergy-section .allergen-grid img{
  width:48px!important;
  max-width:48px!important;
  height:48px!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
  padding:2px!important;
  box-sizing:border-box!important;
  background:rgba(248,246,240,.92)!important;
  border:1px solid rgba(225,219,208,.92)!important;
  box-shadow:0 5px 12px rgba(62,48,34,.09), inset 0 1px 0 rgba(255,255,255,.92)!important;
}
body.wizard-planner #allergy-section .allergen-grid b{
  align-self:center!important;
  min-width:0!important;
  min-height:20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:3px 1px 0!important;
  color:#241D18!important;
  font:800 clamp(7.7px,2vw,9.7px)/1.02 "Manrope",sans-serif!important;
  text-align:center!important;
  overflow-wrap:anywhere!important;
}

/* Selected allergen = red card + red X. */
body.wizard-planner #allergy-section .allergen-grid button.is-selected:not(.none-option){
  color:#8F342E!important;
  background:linear-gradient(180deg,#FFF0ED,#FBE5E1)!important;
  border-color:#D9857C!important;
  box-shadow:0 12px 22px rgba(176,70,59,.13), inset 0 1px 0 rgba(255,255,255,.75)!important;
}
body.wizard-planner #allergy-section .allergen-grid button.is-selected:not(.none-option)::after{
  content:"×"!important;
  position:absolute!important;
  top:4px!important;
  right:4px!important;
  width:18px!important;
  height:18px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:#C95349!important;
  color:#fff!important;
  border:2px solid rgba(255,255,255,.95)!important;
  box-shadow:0 3px 8px rgba(151,57,49,.20)!important;
  font:900 14px/1 "Manrope",sans-serif!important;
}

/* "Nema alergija" is not an allergen, so its selected state stays calm/safe. */
body.wizard-planner #allergy-section .allergen-grid button.none-option.is-selected{
  background:linear-gradient(180deg,#EDF6E8,#E7F1E2)!important;
  border-color:#9CBC91!important;
  color:#52734C!important;
}
body.wizard-planner #allergy-section .allergen-grid button.none-option.is-selected::after{
  content:"✓"!important;
  position:absolute!important;
  top:4px!important;
  right:4px!important;
  width:18px!important;
  height:18px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:#5F8558!important;
  color:#fff!important;
  border:2px solid rgba(255,255,255,.95)!important;
  box-shadow:0 3px 8px rgba(73,103,61,.18)!important;
  font:900 10px/1 "Manrope",sans-serif!important;
}

/* Optional allergy detail + dislikes input. */
body.wizard-planner #allergy-section .text-field{margin-top:8px!important;gap:5px!important}
body.wizard-planner #allergy-section .text-field > span{
  color:#7c766f!important;
  font:800 9px/1.2 "Manrope",sans-serif!important;
}
body.wizard-planner #allergy-section .text-field input{
  width:100%!important;
  height:45px!important;
  border-radius:15px!important;
  border:1px solid rgba(219,211,201,.95)!important;
  background:rgba(250,249,246,.96)!important;
  padding:0 12px!important;
  outline:0!important;
  color:#34332f!important;
  font:700 10.5px/1 "DM Sans",sans-serif!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85)!important;
}
body.wizard-planner #allergy-section .text-field input:focus{
  border-color:#D9857C!important;
  box-shadow:0 0 0 3px rgba(201,83,73,.08)!important;
}
body.wizard-planner #allergy-section .dislikes-field{margin-top:0!important}

@media(max-width:390px){
  body.wizard-planner #allergy-section .wizard-block-heading{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:6px!important;
    padding:0 4px!important;
  }
  body.wizard-planner #allergy-section .wizard-block-heading em{
    justify-self:end!important;
    font-size:14.5px!important;
  }
  body.wizard-planner #allergy-section .dislikes-block-heading h3{font-size:17px!important}
  body.wizard-planner #allergy-section .allergen-grid{gap:5px!important}
  body.wizard-planner #allergy-section .allergen-grid button,
  body.wizard-planner #allergy-section .allergen-grid button[data-allergen="Orašasti plodovi"],
  body.wizard-planner #allergy-section .allergen-grid button[data-allergen="Morski plodovi"]{
    height:86px!important;
    min-height:86px!important;
    max-height:86px!important;
    grid-template-rows:47px 1fr!important;
    padding:5px 2px 6px!important;
  }
  body.wizard-planner #allergy-section .allergen-grid img{
    width:45px!important;
    max-width:45px!important;
    height:45px!important;
  }
  body.wizard-planner #allergy-section .allergen-grid b{font-size:7.35px!important}
}

@media(max-width:355px){
  body.wizard-planner #allergy-section .wizard-block-heading em{font-size:13px!important}
  body.wizard-planner #allergy-section .wizard-block-heading p{font-size:8.5px!important}
  body.wizard-planner #allergy-section .allergen-grid button,
  body.wizard-planner #allergy-section .allergen-grid button[data-allergen="Orašasti plodovi"],
  body.wizard-planner #allergy-section .allergen-grid button[data-allergen="Morski plodovi"]{
    height:82px!important;
    min-height:82px!important;
    max-height:82px!important;
    grid-template-rows:44px 1fr!important;
  }
  body.wizard-planner #allergy-section .allergen-grid img{width:42px!important;max-width:42px!important;height:42px!important}
  body.wizard-planner #allergy-section .allergen-grid b{font-size:6.9px!important}
}

/* ===== planner-step5-265.css ===== */
/* V2.65 — Wizard 5 heading standard only.
   Matches the locked Wizard 1–4 title/subtitle axis and typography.
   Review card, controls and behaviour remain unchanged. */

body.wizard-planner #review-section .review-block-heading{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:8px!important;
  row-gap:4px!important;
  margin:1px 2px 8px!important;
  padding:0 6px!important;
}
body.wizard-planner #review-section .review-block-heading>div{
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
body.wizard-planner #review-section .review-block-heading h3{
  margin:0!important;
  padding:0!important;
  color:#1F1813!important;
  font-family:var(--wz-font-ui,"Manrope",sans-serif)!important;
  font-size:var(--wz-block-title-size,clamp(20px,4.8vw,28px))!important;
  font-weight:800!important;
  line-height:.96!important;
  letter-spacing:-.03em!important;
  white-space:nowrap!important;
  text-align:left!important;
}
body.wizard-planner #review-section .review-block-heading p{
  margin:3px 0 0!important;
  padding:0!important;
  color:#7C766F!important;
  font-family:var(--wz-font-copy,"DM Sans",sans-serif)!important;
  font-size:var(--wz-block-copy-size,clamp(9px,2.5vw,11px))!important;
  font-weight:600!important;
  line-height:1.18!important;
  letter-spacing:-.01em!important;
  white-space:nowrap!important;
  text-align:left!important;
}
body.wizard-planner #review-section .review-block-heading em{
  align-self:center!important;
  justify-self:end!important;
  margin:4px 1px 0 0!important;
  min-width:88px!important;
  max-width:96px!important;
  color:#A26F59!important;
  font-family:var(--wz-font-script,"Caveat","Segoe Print",cursive)!important;
  font-size:clamp(18px,4.7vw,22px)!important;
  font-weight:500!important;
  font-style:normal!important;
  line-height:.82!important;
  letter-spacing:0!important;
  white-space:normal!important;
  text-align:right!important;
  transform:rotate(-3deg)!important;
  opacity:.96!important;
}

/* Preserve the V2.57 16px visible text axis. */
body.wizard-planner #review-section .review-block-heading{
  margin-left:0!important;
  padding-left:2px!important;
}

body.wizard-planner #review-section .review-block-heading + .review-card{
  margin-top:0!important;
}

@media(max-width:390px){
  body.wizard-planner #review-section .review-block-heading{
    grid-template-columns:minmax(0,1fr) auto!important;
    column-gap:6px!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }
  body.wizard-planner #review-section .review-block-heading em{
    min-width:78px!important;
    max-width:82px!important;
    font-size:17px!important;
  }
}

@media(max-width:350px){
  body.wizard-planner #review-section .review-block-heading p{
    font-size:8px!important;
  }
  body.wizard-planner #review-section .review-block-heading em{
    min-width:72px!important;
    max-width:76px!important;
    font-size:15.5px!important;
  }
}

/* ===== planner-wizard-actions-267.css ===== */
/* V2.67 — remove the clipped/cut-looking background behind wizard buttons.
   Scope: all wizard steps. Keep button layout/position, remove the visible
   background slab/veil behind the action row. */

body.wizard-planner .wizard-actions,
body.wizard-planner .wizard-result-actions{
  background:none!important;
  box-shadow:none!important;
  border:0!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

body.wizard-planner .wizard-actions::before,
body.wizard-planner .wizard-actions::after,
body.wizard-planner .wizard-result-actions::before,
body.wizard-planner .wizard-result-actions::after{
  content:none!important;
  display:none!important;
}

/* ===== planner-result-266.css ===== */
/* =========================================================
   V2.66 — WIZARD "TVOJ PLAN"
   - result heading follows the locked wizard typography/text axis
   - handwritten note is nudged slightly lower
   - only result content scrolls; Edit/Save actions remain fixed at bottom
   Scope: wizard result step only.
   ========================================================= */

/* The result step itself must not scroll. Its inner content owns scrolling. */
body.wizard-planner .wizard-result-step{
  overflow:hidden!important;
  padding:14px 12px 0!important;
}

body.wizard-planner .wizard-result-content{
  width:100%;
  height:100%;
  min-height:0;
  padding:0!important;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

body.wizard-planner .wizard-result-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:none;
  padding:0 0 12px;
}
body.wizard-planner .wizard-result-scroll::-webkit-scrollbar{display:none}

/* Locked wizard heading standard: Manrope heading, DM Sans helper,
   Caveat note; visible copy begins on the shared 16px text axis. */
body.wizard-planner .wizard-result-heading{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  column-gap:8px!important;
  margin:1px 0 10px!important;
  padding:0 4px!important;
}
body.wizard-planner .wizard-result-heading>div{
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
body.wizard-planner .wizard-result-heading>div>span{
  display:block!important;
  margin:0 0 4px!important;
  color:#D66A43!important;
  font:900 7.7px/1 "DM Sans",sans-serif!important;
  letter-spacing:1.15px!important;
  text-align:left!important;
}
body.wizard-planner .wizard-result-heading h2{
  margin:0!important;
  padding:0!important;
  color:#1F1813!important;
  font:800 clamp(23px,5.5vw,32px)/.96 "Manrope",sans-serif!important;
  letter-spacing:-.03em!important;
  text-align:left!important;
}
body.wizard-planner .wizard-result-heading p{
  margin:5px 0 0!important;
  padding:0!important;
  color:#7C766F!important;
  font:600 clamp(9.5px,2.7vw,11px)/1.28 "DM Sans",sans-serif!important;
  text-align:left!important;
}
body.wizard-planner .wizard-result-heading em{
  align-self:start!important;
  justify-self:end!important;
  margin:0!important;
  padding:0!important;
  color:#9B6D56!important;
  font:500 clamp(16px,4.2vw,20px)/.94 "Caveat","Segoe Print",cursive!important;
  white-space:nowrap!important;
  text-align:right!important;
  transform:translateY(10px) rotate(-4deg)!important;
  opacity:.95!important;
}

/* Actions are a separate fixed zone below the scroll content. */
body.wizard-planner .wizard-result-actions{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  flex:0 0 auto!important;
  width:auto!important;
  margin:0 -12px!important;
  padding:10px 12px 10px!important;
  display:grid!important;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)!important;
  gap:8px!important;
  background:linear-gradient(180deg,rgba(251,246,237,.74),rgba(251,246,237,.98) 30%,#FBF6ED 100%)!important;
  border-top:1px solid rgba(101,78,57,.055)!important;
  box-shadow:0 -9px 24px rgba(65,48,34,.055)!important;
  z-index:14!important;
}

@media(max-width:390px){
  body.wizard-planner .wizard-result-heading{
    padding-left:4px!important;
    padding-right:2px!important;
    column-gap:6px!important;
  }
  body.wizard-planner .wizard-result-heading em{
    font-size:15px!important;
    transform:translateY(9px) rotate(-4deg)!important;
  }
}

@media(max-width:345px){
  body.wizard-planner .wizard-result-heading{
    grid-template-columns:minmax(0,1fr) auto!important;
  }
  body.wizard-planner .wizard-result-heading em{
    display:block!important;
    font-size:13.5px!important;
    transform:translateY(8px) rotate(-4deg)!important;
  }
}

@media(max-height:690px){
  body.wizard-planner .wizard-result-step{
    padding-top:10px!important;
  }
  body.wizard-planner .wizard-result-heading{
    margin-bottom:8px!important;
  }
  body.wizard-planner .wizard-result-actions{
    padding-top:8px!important;
    padding-bottom:8px!important;
  }
}

/* ===== planner-wizard-actions-268.css ===== */
/* V2.68 — final action-bar cleanup for the two remaining screens.
   Explicit overrides for Wizard 2 and the final 'Tvoj plan' screen. */

/* Global safety */
body.wizard-planner .wizard-actions,
body.wizard-planner .wizard-result-actions,
body.wizard-planner #budget-section .wizard-actions,
body.wizard-planner .wizard-result-step .wizard-result-actions{
  background:none!important;
  background-image:none!important;
  border:0!important;
  border-top:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

body.wizard-planner .wizard-actions::before,
body.wizard-planner .wizard-actions::after,
body.wizard-planner .wizard-result-actions::before,
body.wizard-planner .wizard-result-actions::after,
body.wizard-planner #budget-section .wizard-actions::before,
body.wizard-planner #budget-section .wizard-actions::after,
body.wizard-planner .wizard-result-step .wizard-result-actions::before,
body.wizard-planner .wizard-result-step .wizard-result-actions::after{
  content:none!important;
  display:none!important;
}

/* ===== planner-horizontal-lock-275.css ===== */
/* V2.75 — hard lock horizontal drag/scroll in planner wizard.
   Keep vertical scrolling where required and preserve CSS page-turn animations. */

html,
body.wizard-planner{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  overscroll-behavior-x:none!important;
}

body.wizard-planner .planner-app,
body.wizard-planner .planner-scroll.wizard-page,
body.wizard-planner .planner-wizard,
body.wizard-planner .wizard-stage,
body.wizard-planner .wizard-step,
body.wizard-planner .wizard-result-scroll{
  max-width:100%!important;
  overflow-x:hidden!important;
  overscroll-behavior-x:none!important;
}

/* User gestures may move only vertically. Programmatic CSS transforms used by
   the book transition are unaffected. */
body.wizard-planner .planner-scroll.wizard-page,
body.wizard-planner .planner-wizard,
body.wizard-planner .wizard-stage,
body.wizard-planner .wizard-step,
body.wizard-planner .wizard-result-scroll{
  touch-action:pan-y!important;
}

/* Clip transformed pages inside the book frame while they animate. */
body.wizard-planner .planner-wizard,
body.wizard-planner .wizard-stage{
  overflow:hidden!important;
}

/* ===== planner-transitions-278.css ===== */
/* V2.78 — absolute motion reset. No horizontal/page-turn/fade movement. */
html, body,
body.wizard-planner,
body.wizard-planner .planner-app,
body.wizard-planner .planner-scroll,
body.wizard-planner .planner-wizard,
body.wizard-planner .wizard-stage,
body.wizard-planner .wizard-step,
body.wizard-planner .wizard-step.is-wizard-active,
body.wizard-planner .wizard-step.is-wizard-active.is-wizard-enter-forward,
body.wizard-planner .wizard-step.is-wizard-active.is-wizard-enter-back,
body.wizard-planner .wizard-step.is-wizard-fade-out,
body.wizard-planner .wizard-step.is-wizard-fade-out-back{
  transform:none!important;
  perspective:none!important;
  transform-style:flat!important;
  transition:none!important;
  animation:none!important;
}
body.wizard-planner .planner-wizard,
body.wizard-planner.wizard-boot .planner-wizard,
body.wizard-planner:not(.wizard-boot) .planner-wizard{
  opacity:1!important;
}
body.wizard-planner .wizard-step{
  left:0!important;
  right:0!important;
}
body.wizard-planner .wizard-step.is-wizard-active{
  opacity:1!important;
}

/* ===== planner-premium-motion-279.css ===== */
/* V2.79 — premium motion system.
   No horizontal movement. The wizard shell/background stay fixed.
   Motion is limited to opacity, subtle depth scale and a few vertical pixels. */

/* Keep the outer wizard card completely stationary. */
body.wizard-planner .planner-wizard,
body.wizard-planner.wizard-boot .planner-wizard,
body.wizard-planner:not(.wizard-boot) .planner-wizard{
  opacity:1!important;
  transform:none!important;
  perspective:none!important;
  transition:none!important;
  animation:none!important;
}

body.wizard-planner .wizard-stage{
  perspective:none!important;
  transform:none!important;
  transform-style:flat!important;
  overflow-x:hidden!important;
}

/* Smooth progress bar and a tiny metadata crossfade. */
body.wizard-planner .wizard-progress-track i{
  transition:width .34s cubic-bezier(.22,1,.36,1)!important;
}
body.wizard-planner .wizard-progress-copy,
body.wizard-planner .wizard-progress-number{
  transition:opacity .14s ease, transform .18s cubic-bezier(.22,1,.36,1)!important;
}
body.wizard-planner .wizard-progress-head.is-progress-swapping .wizard-progress-copy,
body.wizard-planner .wizard-progress-head.is-progress-swapping .wizard-progress-number{
  opacity:.28!important;
  transform:translateY(-2px)!important;
}

/* Base states: no X movement anywhere. */
body.wizard-planner .wizard-step,
body.wizard-planner .wizard-step.is-wizard-active,
body.wizard-planner .wizard-step.is-wizard-active.is-wizard-enter-forward,
body.wizard-planner .wizard-step.is-wizard-active.is-wizard-enter-back,
body.wizard-planner .wizard-step.is-wizard-fade-out,
body.wizard-planner .wizard-step.is-wizard-fade-out-back{
  transform-origin:center 48%!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  transform-style:flat!important;
}
body.wizard-planner .wizard-step{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(0) scale(.985)!important;
  transition:
    opacity .10s ease,
    transform .10s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .10s!important;
}
body.wizard-planner .wizard-step.is-wizard-active{
  z-index:3!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0) scale(1)!important;
  transition:
    opacity .22s cubic-bezier(.22,1,.36,1),
    transform .26s cubic-bezier(.22,1,.36,1),
    visibility 0s!important;
}

/* Current content recedes very slightly — like changing depth, not pages. */
body.wizard-planner .wizard-step.is-wizard-active.is-depth-out{
  opacity:0!important;
  transform:translateY(-2px) scale(.985)!important;
  pointer-events:none!important;
  transition:
    opacity .095s ease-out,
    transform .095s cubic-bezier(.4,0,1,1)!important;
  will-change:opacity,transform;
}

/* Next content starts softly lower/deeper and resolves into focus. */
body.wizard-planner .wizard-step.is-wizard-active.is-depth-prep{
  opacity:0!important;
  transform:translateY(7px) scale(.992)!important;
  pointer-events:none!important;
  transition:none!important;
}
body.wizard-planner .wizard-step.is-wizard-active.is-depth-entering{
  opacity:1!important;
  transform:translateY(0) scale(1)!important;
  transition:
    opacity .20s cubic-bezier(.22,1,.36,1),
    transform .25s cubic-bezier(.22,1,.36,1)!important;
  will-change:opacity,transform;
}

/* Subtle stagger inside the new step. Direct blocks only, so controls remain stable. */
body.wizard-planner .wizard-step > *{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .18s ease,
    transform .24s cubic-bezier(.22,1,.36,1)!important;
}
body.wizard-planner .wizard-step.is-depth-prep > *{
  opacity:0!important;
  transform:translateY(5px)!important;
  transition:none!important;
}
body.wizard-planner .wizard-step.is-depth-entering > :nth-child(1){transition-delay:.025s!important}
body.wizard-planner .wizard-step.is-depth-entering > :nth-child(2){transition-delay:.055s!important}
body.wizard-planner .wizard-step.is-depth-entering > :nth-child(3){transition-delay:.080s!important}
body.wizard-planner .wizard-step.is-depth-entering > :nth-child(4){transition-delay:.100s!important}
body.wizard-planner .wizard-step.is-depth-entering > :nth-child(n+5){transition-delay:.115s!important}

/* First opening: premium reveal while the iframe has already been preloaded. */
body.wizard-planner.wizard-boot .wizard-progress-head{
  opacity:0!important;
  transform:translateY(-4px)!important;
}
body.wizard-planner.wizard-opening .wizard-progress-head{
  transition:opacity .24s ease, transform .28s cubic-bezier(.22,1,.36,1)!important;
}
body.wizard-planner.wizard-boot .wizard-step.is-wizard-active{
  opacity:0!important;
  transform:translateY(9px) scale(.992)!important;
}
body.wizard-planner.wizard-opening .wizard-step.is-wizard-active{
  transition:
    opacity .24s cubic-bezier(.22,1,.36,1),
    transform .30s cubic-bezier(.22,1,.36,1)!important;
}
body.wizard-planner.wizard-boot .wizard-step.is-wizard-active > *{
  opacity:0!important;
  transform:translateY(6px)!important;
}
body.wizard-planner.wizard-opening .wizard-step.is-wizard-active > :nth-child(1){transition-delay:.045s!important}
body.wizard-planner.wizard-opening .wizard-step.is-wizard-active > :nth-child(2){transition-delay:.080s!important}
body.wizard-planner.wizard-opening .wizard-step.is-wizard-active > :nth-child(3){transition-delay:.110s!important}
body.wizard-planner.wizard-opening .wizard-step.is-wizard-active > :nth-child(4){transition-delay:.135s!important}
body.wizard-planner.wizard-opening .wizard-step.is-wizard-active > :nth-child(n+5){transition-delay:.150s!important}

/* Accessibility: respect reduced motion and switch instantly. */
@media (prefers-reduced-motion:reduce){
  body.wizard-planner .wizard-progress-track i,
  body.wizard-planner .wizard-progress-copy,
  body.wizard-planner .wizard-progress-number,
  body.wizard-planner .wizard-step,
  body.wizard-planner .wizard-step.is-wizard-active,
  body.wizard-planner .wizard-step > *,
  body.wizard-planner .wizard-progress-head{
    transition:none!important;
  }
  body.wizard-planner.wizard-boot .wizard-progress-head,
  body.wizard-planner.wizard-boot .wizard-step.is-wizard-active,
  body.wizard-planner.wizard-boot .wizard-step.is-wizard-active > *{
    opacity:1!important;
    transform:none!important;
  }
}

/* V2.81 Smart Generator — informational note only; locked wizard layout unchanged. */
.wizard-plan-note{
  margin:2px 4px 0;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.48);
  color:#7C766D;
  font:600 8.3px/1.35 "DM Sans",sans-serif;
  text-align:center;
}


/* V2.90 — clearer premium plan-loading hierarchy */
.wizard-result-loading{padding:24px 20px 38px!important}
.wizard-loader-orbit{width:112px!important;height:112px!important;border-radius:36px!important;box-shadow:0 18px 36px rgba(86,61,40,.09)!important}
.wizard-loader-orbit img{width:82px!important;height:82px!important}
.wizard-loader-copy{display:grid;justify-items:center;gap:0;margin-top:24px;width:100%}
.wizard-loader-copy>span{display:inline-flex;align-items:center;justify-content:center;min-height:25px;padding:0 10px;border-radius:999px;background:rgba(255,240,231,.9);border:1px solid rgba(219,103,65,.10);color:#D16845;font:900 7.8px/1 "Manrope",sans-serif;letter-spacing:1.12px;box-shadow:0 7px 18px rgba(80,54,38,.025)}
.wizard-loader-copy h2{margin:12px 0 7px!important;font-size:31px!important}
.wizard-loader-copy p{max-width:31ch!important;font-size:10.7px!important;line-height:1.48!important}
.wizard-loader-bar{margin-top:21px!important;width:min(224px,72%)!important}
.wizard-loader-hint{margin-top:10px;color:#9A978F;font:650 8.3px/1.2 "DM Sans",sans-serif;letter-spacing:.15px}

/* V2.92 — cooking-time guidance + meat/fish preference picker */
body.wizard-planner #budget-section .time-mode-card{
  margin:8px 0 0!important;
  min-height:52px!important;
  padding:9px 10px!important;
  border-radius:18px!important;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:9px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(248,243,235,.88))!important;
  border:1px solid rgba(255,255,255,.96)!important;
  box-shadow:0 9px 24px rgba(66,48,34,.055)!important;
  overflow:hidden!important;
}
body.wizard-planner #budget-section .time-mode-card.is-refreshing{animation:timeModePulse .24s ease both}
@keyframes timeModePulse{0%{opacity:.76;transform:scale(.992)}100%{opacity:1;transform:scale(1)}}
body.wizard-planner #budget-section .time-mode-icon{
  width:34px!important;height:34px!important;border-radius:12px!important;
  display:grid!important;place-items:center!important;
  background:#FFF0E7!important;color:#C55D3B!important;
  font:900 15px/1 "Manrope",sans-serif!important;
  box-shadow:0 5px 14px rgba(190,80,45,.08)!important;
}
body.wizard-planner #budget-section .time-mode-card>div{min-width:0!important;display:grid!important;gap:3px!important}
body.wizard-planner #budget-section .time-mode-card strong{
  font:800 10.6px/1.13 "Manrope",sans-serif!important;color:#342920!important;letter-spacing:-.12px!important
}
body.wizard-planner #budget-section .time-mode-card small{
  font:550 7.9px/1.34 "DM Sans",sans-serif!important;color:#858078!important
}
body.wizard-planner #budget-section .time-mode-card>b{
  padding:6px 7px!important;border-radius:10px!important;background:#EDF3E9!important;color:#667A5F!important;
  font:800 8.2px/1 "Manrope",sans-serif!important;white-space:nowrap!important
}

.food-pref-guard{
  position:fixed!important;inset:0!important;z-index:1200!important;
  display:grid!important;place-items:center!important;padding:14px!important;
  background:rgba(49,37,30,.20)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.08)!important;backdrop-filter:blur(12px) saturate(1.08)!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  transition:opacity .18s ease,visibility 0s linear .18s!important
}
.food-pref-guard.is-open{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transition:opacity .18s ease!important}
.food-pref-popover{
  width:min(356px,calc(100vw - 28px))!important;
  max-height:min(650px,calc(var(--app-height,100dvh) - 34px))!important;
  overflow:hidden!important;
  display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;
  border-radius:29px!important;
  background:linear-gradient(155deg,rgba(255,253,249,.985),rgba(247,241,233,.985))!important;
  border:1px solid rgba(255,255,255,.98)!important;
  box-shadow:0 28px 72px rgba(55,39,29,.20),0 8px 24px rgba(55,39,29,.08)!important;
  opacity:0!important;transform:translateY(7px) scale(.982)!important;
  transition:opacity .2s ease,transform .22s cubic-bezier(.2,.8,.2,1)!important
}
.food-pref-guard.is-open .food-pref-popover{opacity:1!important;transform:translateY(0) scale(1)!important}
.food-pref-head{padding:16px 16px 10px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 38px!important;gap:10px!important;align-items:start!important}
.food-pref-head>div{display:grid!important;gap:4px!important}
.food-pref-head span{font:850 7.4px/1 "Manrope",sans-serif!important;letter-spacing:1.05px!important;color:#B66345!important}
.food-pref-head h3{margin:0!important;font:800 18px/1.06 "Manrope",sans-serif!important;letter-spacing:-.4px!important;color:#2D241E!important}
.food-pref-head p{margin:0!important;max-width:31ch!important;font:550 9px/1.42 "DM Sans",sans-serif!important;color:#87827B!important}
.food-pref-head button{width:38px!important;height:38px!important;border-radius:13px!important;background:#fff!important;color:#675A50!important;box-shadow:0 7px 18px rgba(67,48,35,.07)!important;font:500 24px/1 "DM Sans",sans-serif!important}
.food-pref-grid{
  min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;
  padding:6px 13px 11px!important;
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;
  scrollbar-width:none!important
}
.food-pref-grid::-webkit-scrollbar{display:none!important}
.food-pref-option{
  position:relative!important;min-width:0!important;min-height:119px!important;padding:8px 5px 7px!important;
  border-radius:20px!important;background:rgba(255,255,255,.76)!important;border:1px solid rgba(237,230,220,.94)!important;
  box-shadow:0 7px 17px rgba(64,47,34,.035)!important;
  display:grid!important;justify-items:center!important;align-content:start!important;gap:4px!important;text-align:center!important;color:#2E2722!important;
  transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease!important
}
.food-pref-option:active{transform:scale(.975)!important}
.food-pref-option.is-selected{background:#EDF5E9!important;border-color:#89AD7D!important;box-shadow:0 8px 19px rgba(93,130,76,.09)!important}
.food-pref-option.is-selected::after{content:"✓"!important;position:absolute!important;right:7px!important;top:7px!important;width:21px!important;height:21px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:#628859!important;color:#fff!important;font:900 11px/1 "Manrope",sans-serif!important;box-shadow:0 4px 10px rgba(70,102,62,.16)!important}
.food-pref-photo{position:relative!important;width:68px!important;height:68px!important;border-radius:50%!important;overflow:visible!important;display:block!important;margin-bottom:1px!important}
.food-pref-photo img{width:68px!important;height:68px!important;object-fit:cover!important;border-radius:50%!important;border:3px solid rgba(255,255,255,.96)!important;box-shadow:0 8px 19px rgba(62,45,34,.10)!important}
.food-pref-photo i{position:absolute!important;right:-2px!important;bottom:-1px!important;min-width:25px!important;height:25px!important;padding:0 4px!important;border-radius:999px!important;background:#fff!important;display:grid!important;place-items:center!important;font:normal 14px/1 sans-serif!important;box-shadow:0 4px 12px rgba(58,43,33,.12)!important}
.food-pref-option b{font:800 9.6px/1.08 "Manrope",sans-serif!important;color:#342920!important;overflow-wrap:anywhere!important}
.food-pref-option small{font:650 7px/1.18 "DM Sans",sans-serif!important;color:#949087!important}
.food-pref-actions{padding:10px 13px calc(10px + env(safe-area-inset-bottom))!important;border-top:1px solid rgba(229,220,210,.72)!important;display:grid!important;grid-template-columns:1fr 1.18fr!important;gap:8px!important;background:rgba(252,248,242,.92)!important}
.food-pref-actions button{height:46px!important;border-radius:15px!important;font:800 9.5px/1 "Manrope",sans-serif!important}
.food-pref-remove{background:#F2EDE7!important;color:#796F66!important}
.food-pref-save{background:linear-gradient(145deg,#DF6C47,#CB5938)!important;color:#fff!important;box-shadow:0 10px 21px rgba(190,80,45,.16)!important}

@media(max-height:740px){
  body.wizard-planner #budget-section .time-mode-card{min-height:47px!important;padding:7px 9px!important;margin-top:6px!important}
  body.wizard-planner #budget-section .time-mode-icon{width:31px!important;height:31px!important}
  body.wizard-planner #budget-section .time-mode-card strong{font-size:9.8px!important}
  body.wizard-planner #budget-section .time-mode-card small{font-size:7.2px!important}
  .food-pref-option{min-height:108px!important;padding:7px 4px!important}
  .food-pref-photo,.food-pref-photo img{width:61px!important;height:61px!important}
  .food-pref-head{padding-top:13px!important}
}
@media(max-width:370px){
  .food-pref-popover{width:calc(100vw - 20px)!important}
  .food-pref-grid{gap:6px!important;padding-left:10px!important;padding-right:10px!important}
  .food-pref-option{min-height:105px!important}
  .food-pref-photo,.food-pref-photo img{width:58px!important;height:58px!important}
  .food-pref-option b{font-size:8.8px!important}
}
@media(prefers-reduced-motion:reduce){.food-pref-popover,.food-pref-guard,.food-pref-option,.time-mode-card{transition:none!important;animation:none!important}}

/* V2.98.14 — friendly daily AI usage limit state */
.wizard-daily-limit-card{
  width:min(100%,360px);
  margin:auto;
  padding:28px 22px 22px;
  border-radius:32px;
  text-align:center;
  background:rgba(255,253,249,.92);
  border:1px solid rgba(255,255,255,.98);
  box-shadow:0 28px 68px rgba(61,43,31,.16),0 8px 24px rgba(61,43,31,.07),inset 0 1px 0 rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(16px) saturate(1.05);
  backdrop-filter:blur(16px) saturate(1.05);
}
.wizard-daily-limit-card>span{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:25px;padding:0 11px;border-radius:999px;
  background:#FFF0E7;color:#CC6744;border:1px solid rgba(210,103,68,.10);
  font:900 7.8px/1 "Manrope",sans-serif;letter-spacing:1.1px;
}
.wizard-daily-limit-card h2{
  margin:14px auto 8px;max-width:13ch;
  font:700 29px/1.02 "Playfair Display",serif;letter-spacing:-.9px;color:#2C2019;
}
.wizard-daily-limit-card p{
  margin:0 auto;max-width:31ch;
  font:600 10.5px/1.5 "DM Sans",sans-serif;color:#797971;
}
.wizard-daily-limit-actions{display:grid;gap:8px;margin-top:20px}
.wizard-daily-limit-actions button{
  min-height:46px;border:0;border-radius:15px;padding:0 14px;
  font:800 9.5px/1 "Manrope",sans-serif;cursor:pointer;
}
.wizard-daily-limit-actions button:first-child{background:#F2EEE7;color:#695E55}
.wizard-daily-limit-actions button:last-child{background:linear-gradient(145deg,#DF6C47,#CB5938);color:#fff;box-shadow:0 10px 22px rgba(190,80,45,.14)}
@media(max-width:370px){.wizard-daily-limit-card{width:min(calc(100vw - 28px),340px);padding:25px 18px 20px}.wizard-daily-limit-card h2{font-size:26px}}


/* V2.98.17 — hard-center the plan-generation loader on every phone viewport */
body.wizard-planner .wizard-result-loading{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:visible!important;
}
body.wizard-planner .wizard-result-loading[hidden]{display:none!important}
body.wizard-planner .wizard-result-loading .premium-shared-loader--planner{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:min(calc(100% - 32px),360px)!important;
  max-width:360px!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:center center!important;
}
html.is-android body.wizard-planner .wizard-result-loading .premium-shared-loader--planner{
  left:50%!important;
  top:50%!important;
  transform:translate3d(-50%,-50%,0)!important;
}

/* V2.98.34 — favorite meal star in wizard result */
.wizard-day-card>.wizard-day-actions{
  min-width:32px!important;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px!important;
}
.wizard-day-card .wizard-day-actions button{width:30px;height:30px;border-radius:11px;padding:0}
.wizard-day-card .meal-favorite-star{background:#FFF7E7!important;color:#B79A5A!important;font-size:17px!important;line-height:1!important}
.wizard-day-card .meal-favorite-star.is-favorite{background:#FFF0C8!important;color:#C28A16!important;box-shadow:0 6px 14px rgba(194,138,22,.13)}
.wizard-day-card .meal-favorite-star span{display:block;transform:translateY(-.5px)}
@media(max-width:390px){
  .wizard-day-card{grid-template-columns:64px minmax(0,1fr) 32px!important}
  .wizard-day-card>.wizard-day-actions{gap:4px!important}
  .wizard-day-card .wizard-day-actions button{width:28px;height:28px}
}

/* V2.98.38.2 — selective wizard scrolling.
   A step scrolls only when its actual content cannot fit above the action row.
   Compact steps stay locked, so there is no empty/accidental vertical drag. */
body.wizard-planner .wizard-step:not(.wizard-result-step).is-content-static{
  overflow-y:hidden!important;
  overscroll-behavior-y:none!important;
}
body.wizard-planner .wizard-step:not(.wizard-result-step).is-content-scrollable{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
  scrollbar-width:none!important;
  padding-bottom:10px!important;
}
body.wizard-planner .wizard-step:not(.wizard-result-step).is-content-scrollable::-webkit-scrollbar{display:none!important}

/* When a step genuinely needs scroll, keep navigation reachable at the bottom
   of the wizard instead of letting it disappear with the scrolling content. */
body.wizard-planner .wizard-step:not(.wizard-result-step).is-content-scrollable > .wizard-actions{
  position:sticky!important;
  left:auto!important;
  right:auto!important;
  bottom:-1px!important;
  z-index:20!important;
  margin:12px 0 0!important;
  padding:8px 0 1px!important;
  background:linear-gradient(180deg,rgba(248,242,233,0),rgba(248,242,233,.90) 36%,rgba(248,242,233,.96) 100%)!important;
}

/* V2.98.38.3 — cooking style is now a premium interstitial after Wizard 3. */
body.wizard-planner .cooking-style-gate{
  position:absolute;
  z-index:80;
  left:0;right:0;top:56px;bottom:0;
  display:grid;
  place-items:center;
  padding:18px 16px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
body.wizard-planner .cooking-style-gate[hidden]{display:none!important}
body.wizard-planner .cooking-style-gate.is-open{opacity:1;pointer-events:auto}
body.wizard-planner .cooking-style-gate-backdrop{
  position:absolute;inset:0;
  border:0;padding:0;margin:0;
  background:rgba(58,45,34,.28);
  -webkit-backdrop-filter:blur(7px) saturate(1.02);
  backdrop-filter:blur(7px) saturate(1.02);
}
body.wizard-planner .cooking-style-gate-card{
  position:relative;
  z-index:2;
  width:min(100%,360px);
  padding:22px 18px 18px;
  border-radius:28px;
  background:rgba(255,252,248,.96);
  border:1px solid rgba(255,255,255,.98);
  box-shadow:0 26px 60px rgba(58,42,30,.20), inset 0 1px 0 rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(18px) saturate(1.04);
  backdrop-filter:blur(18px) saturate(1.04);
  transform:translateY(9px) scale(.985);
  opacity:.2;
  transition:transform .22s cubic-bezier(.2,.82,.2,1),opacity .18s ease;
}
body.wizard-planner .cooking-style-gate.is-open .cooking-style-gate-card{
  transform:translateY(0) scale(1);
  opacity:1;
}
body.wizard-planner .cooking-style-gate-close{
  position:absolute;right:12px;top:12px;
  width:34px;height:34px;border:0;border-radius:12px;
  display:grid;place-items:center;
  background:#F2EEE8;color:#776E66;
  font:700 18px/1 var(--wz-font-ui);
}
body.wizard-planner .cooking-style-gate-heading{text-align:center;padding:4px 28px 17px}
body.wizard-planner .cooking-style-gate-heading>span{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:24px;padding:0 10px;border-radius:999px;
  background:#FFF0E8;color:#D36543;
  font:900 7.4px/1 var(--wz-font-ui);letter-spacing:1.05px;
}
body.wizard-planner .cooking-style-gate-heading h3{
  margin:11px 0 0;
  color:#2B211A;
  font:800 21px/1.08 var(--wz-font-ui);
  letter-spacing:-.045em;
}
body.wizard-planner .cooking-style-gate-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
body.wizard-planner .cooking-style-gate-options button{
  min-width:0;
  height:112px;
  border-radius:22px;
  border:1px solid rgba(82,63,48,.08);
  display:grid;
  place-items:center;
  align-content:center;
  gap:10px;
  padding:12px 8px;
  background:linear-gradient(145deg,#F8F5EF,#F1EEE8);
  color:#4F4E49;
  box-shadow:0 9px 20px rgba(64,45,31,.055),inset 0 1px 0 rgba(255,255,255,.86);
  transition:transform .14s ease,background .14s ease,border-color .14s ease,box-shadow .14s ease,color .14s ease;
}
body.wizard-planner .cooking-style-gate-options button>i{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background:#E7E8E1;color:#67715F;
  font:900 17px/1 var(--wz-font-ui);
  font-style:normal;
}
body.wizard-planner .cooking-style-gate-options button>b{
  font:800 11.5px/1 var(--wz-font-ui);
  color:inherit;
}
body.wizard-planner .cooking-style-gate-options button.is-selected{
  background:linear-gradient(145deg,#FFF2EA,#FBE8DD);
  border-color:rgba(216,105,69,.28);
  color:#C85534;
  box-shadow:0 12px 24px rgba(189,85,52,.10),inset 0 1px 0 rgba(255,255,255,.88);
}
body.wizard-planner .cooking-style-gate-options button.is-selected>i{
  background:#D96A48;color:#fff;
  box-shadow:0 7px 15px rgba(194,87,54,.16);
}
body.wizard-planner .cooking-style-gate-options button[data-cooking-style="creative"]>i{
  background:#F4E8D4;color:#B37B2D;
}
body.wizard-planner .cooking-style-gate-options button[data-cooking-style="creative"].is-selected>i{
  background:#D08A35;color:#fff;
}
body.wizard-planner .cooking-style-gate-options button:active{transform:scale(.975)}
body.cooking-style-gate-open .wizard-stage{pointer-events:none}

@media(max-width:390px){
  body.wizard-planner .cooking-style-gate{padding:14px 12px}
  body.wizard-planner .cooking-style-gate-card{width:min(100%,330px);padding:19px 14px 14px;border-radius:25px}
  body.wizard-planner .cooking-style-gate-heading{padding-bottom:14px}
  body.wizard-planner .cooking-style-gate-heading h3{font-size:19px}
  body.wizard-planner .cooking-style-gate-options{gap:8px}
  body.wizard-planner .cooking-style-gate-options button{height:100px;border-radius:19px}
  body.wizard-planner .cooking-style-gate-options button>i{width:38px;height:38px;border-radius:13px}
}
@media(prefers-reduced-motion:reduce){
  body.wizard-planner .cooking-style-gate,
  body.wizard-planner .cooking-style-gate-card{transition:none!important}
}