/* Make It Plant Based — Recipe Form Styles
 * Loaded ONLY on pages using [mipb_recipe_calculator]
 * Sources: snippet #16 (form structure) + snippet #11 (form components)
 */

/* === PART 1: Form structure, CSS variables, base components === */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Serif+Display&display=swap');
:root{
    --g-dark:#2d5a27;--g-mid:#4a8c3f;--g-light:#7aba6d;--g-pale:#e8f5e3;--g-xpale:#f4faf2;
    --ink:#1c2b1a;--ink-light:#6b8264;--border:#cde0c5;--white:#ffffff;
    --amber:#e8a020;--amber-pale:#fdf3e0;
    --terra:#c4622d;--terra-pale:#faeee8;
    --overlay:rgba(28,43,26,.45);--shadow-lg:0 8px 40px rgba(45,90,39,.2);
    --r:12px;--r-sm:8px;--r-pill:99px;
    --shadow:0 2px 16px rgba(45,90,39,0.10);
}
#mipb-rc{color:var(--ink);max-width:900px;margin:0 auto;position:relative;padding-bottom:100px;padding-left:16px;padding-right:16px;}
#mipb-rc *{box-sizing:border-box;font-family:'DM Sans',sans-serif;}
#mipb-rc h1,#mipb-rc h2,#mipb-rc h3,#mipb-rc h4,#mipb-rc h5,#mipb-rc h6{margin:0!important;padding:0!important;line-height:1.2!important;}
/* Center page title above the recipe form */
.page .entry-title,.page-template .entry-title,.page .wp-block-post-title{text-align:center;}
.bde-heading-23-102{width:100%!important;text-align:center!important;}
.bde-fancy-container-23-103{margin-left:auto!important;margin-right:auto!important;}

.mipb-step{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);padding:2rem;margin-bottom:1.5rem;box-shadow:var(--shadow);}
.mipb-step-header{display:flex;align-items:center;gap:1rem;margin-top:0!important;margin-bottom:1.5rem!important;padding:0!important;}
.mipb-step-num{width:36px;height:36px;border-radius:50%;background:var(--g-dark);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;flex-shrink:0;}
.mipb-step-title{font-family:'DM Serif Display',serif;font-size:1.4rem;color:var(--g-dark);}

.mipb-field{margin-bottom:1.25rem;}
.mipb-label{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-light);margin-bottom:6px;}
.mipb-req{color:var(--terra);margin-left:2px;}
.mipb-input,.mipb-select,.mipb-textarea{width:100%;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:10px 14px;font-size:15px;color:var(--ink);background:var(--g-xpale);outline:none;transition:border-color .2s;}
.mipb-input:focus,.mipb-select:focus,.mipb-textarea:focus{border-color:var(--g-mid);background:var(--white);}
.mipb-input.mipb-err,.mipb-select.mipb-err{border-color:var(--terra)!important;background:var(--terra-pale);}
.mipb-textarea{min-height:80px;resize:vertical;}
.mipb-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a8c3f' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}
.mipb-select:disabled{opacity:.5;cursor:not-allowed;}

.mipb-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media(max-width:600px){.mipb-grid-2{grid-template-columns:1fr;}}

.mipb-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--r-sm);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;border:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.mipb-btn-primary{background:var(--g-dark);color:var(--white);}
.mipb-btn-primary:hover{background:var(--g-mid);}
.mipb-btn-ghost{background:transparent;color:var(--g-dark);border:1.5px solid var(--g-dark);}
.mipb-btn-ghost:hover{background:var(--g-pale);}
.mipb-btn-sm{padding:6px 14px;font-size:13px;}
.mipb-pill{display:inline-block;padding:2px 10px;border-radius:var(--r-pill);background:var(--amber-pale);color:var(--amber);font-size:11px;font-weight:600;border:1px solid var(--amber);}

.mipb-conditional{display:none;}
.mipb-conditional.visible{display:block;}
.mipb-toggle-check{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-size:14px;color:var(--g-dark);font-weight:500;}
.mipb-toggle-check input[type=checkbox]{width:18px;height:18px;accent-color:var(--g-dark);}
.mipb-categories{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.mipb-cat-pill{display:flex;align-items:center;gap:6px;padding:5px 14px;border-radius:var(--r-pill);background:var(--g-pale);border:1.5px solid var(--border);font-size:13px;font-weight:500;color:var(--g-dark);cursor:pointer;transition:all .2s;}
.mipb-cat-pill input{display:none;}
.mipb-cat-pill.selected{background:var(--g-dark);color:var(--white);border-color:var(--g-dark);}

/* Draft bar & panel */
#mipb-draft-bar{display:flex;align-items:center;gap:8px;background:var(--g-pale);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:8px 14px;margin-bottom:1rem;font-size:13px;color:var(--g-dark);}
#mipb-draft-current-name{font-weight:600;color:var(--g-dark);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#mipb-draft-status-text{color:var(--ink-light);font-size:12px;white-space:nowrap;}
.mipb-saving-spinner{width:12px;height:12px;border:2px solid var(--border);border-top-color:var(--g-mid);border-radius:50%;animation:mipb-spin .6s linear infinite;display:none;margin-right:4px;}
.mipb-saving-spinner.active{display:inline-block;}
@keyframes mipb-spin{to{transform:rotate(360deg);}}
#mipb-drafts-panel{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99990;align-items:flex-start;justify-content:center;padding:4rem 1rem 1rem;}
#mipb-drafts-panel.open{display:flex;}
#mipb-drafts-panel-inner{background:var(--white);border-radius:16px;padding:0;max-width:680px;width:100%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,.25);}
.mipb-dp-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;border-bottom:1px solid var(--border);}
.mipb-dp-head h3{margin:0;font-size:17px;color:var(--g-dark);}
.mipb-dp-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink-light);line-height:1;padding:0 4px;}
.mipb-dp-actions{display:flex;gap:8px;padding:12px 22px;border-bottom:1px solid var(--border);}
.mipb-dp-list{overflow-y:auto;flex:1;padding:8px 22px 16px;}
.mipb-dp-empty{text-align:center;color:var(--ink-light);padding:2rem;font-size:13px;}
.mipb-dp-draft-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--g-xpale);}
.mipb-dp-draft-row:last-child{border-bottom:none;}
.mipb-dp-draft-thumb{flex-shrink:0;width:44px;height:44px;border-radius:8px;border:1.5px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--g-xpale);color:var(--ink-light);}
.mipb-dp-draft-thumb img{width:100%;height:100%;object-fit:cover;}
.mipb-dp-draft-thumb svg{opacity:0.4;}
.mipb-dp-draft-info{flex:1;min-width:0;}
.mipb-dp-draft-name{font-size:14px;font-weight:600;color:var(--g-dark);word-break:break-word;line-height:1.35;}
.mipb-dp-draft-meta{font-size:11px;color:var(--ink-light);margin-top:2px;}
.mipb-dp-badge{display:inline-block;background:var(--g-dark);color:var(--white);font-size:10px;padding:1px 6px;border-radius:20px;margin-left:6px;vertical-align:middle;}
.mipb-btn-dark{background:var(--g-dark)!important;color:var(--white)!important;border-color:var(--g-dark)!important;}
.mipb-dp-footer{padding:10px 22px 14px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;}
/* Serving size combo */
.mipb-serving-combo{display:flex;gap:6px;align-items:flex-start;}
.mipb-serving-combo .mipb-serving-qty{width:72px;flex-shrink:0;}
.mipb-serving-combo .mipb-serving-unit-sel{flex:1;}
.mipb-serving-combo .mipb-serving-custom{flex:1;}

/* Step 1 two-column layout */
.mipb-step1-layout{display:grid;grid-template-columns:1fr 220px;gap:1.5rem;align-items:start;}
@media(max-width:650px){.mipb-step1-layout{grid-template-columns:1fr;}}
.mipb-step1-fields{min-width:0;}
.mipb-step1-photo{display:flex;flex-direction:column;}

/* Upload toggle */
.mipb-upload-toggle{display:flex;gap:8px;margin-bottom:10px;}
.mipb-upload-toggle-btn{flex:1;padding:8px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--g-xpale);color:var(--ink-light);font-size:13px;font-weight:600;cursor:pointer;text-align:center;transition:all .2s;}
.mipb-upload-toggle-btn.active{background:var(--g-dark);color:var(--white);border-color:var(--g-dark);}
.mipb-upload-panel{display:none;}
.mipb-upload-panel.active{display:block;}
.mipb-upload-zone{border:2px dashed var(--border);border-radius:var(--r-sm);padding:1.25rem;text-align:center;cursor:pointer;background:var(--g-xpale);transition:border-color .2s;}
.mipb-upload-zone:hover,.mipb-upload-zone.dragover{border-color:var(--g-mid);background:var(--g-pale);}
/* Visually hide file inputs without display:none — iOS Safari won't fire the
   change event on display:none file inputs, causing silent failures on iPhone. */
.mipb-upload-zone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none;}
.mipb-upload-zone p{margin:0;font-size:13px;color:var(--ink-light);pointer-events:none;}
.mipb-upload-zone svg,.mipb-upload-zone span,.mipb-upload-zone img{pointer-events:none;}
.mipb-upload-done{display:none;position:relative;text-align:center;}
.mipb-upload-done img{max-width:100%;max-height:200px;width:auto;height:auto;object-fit:contain;border-radius:var(--r-sm);border:1.5px solid var(--border);display:block;margin:0 auto;}
.mipb-upload-remove{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:var(--terra);color:var(--white);border:none;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;}
.mipb-rotate-btn{position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,0.52);color:#fff;border:none;cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .15s;padding:0;}
.mipb-rotate-btn:hover{background:rgba(0,0,0,0.76);}
.mipb-rotate-btn:disabled{opacity:.5;cursor:wait;}
.mipb-rotate-btn.mipb-rotating{animation:mipb-spin .7s linear infinite;}
.mipb-info-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:var(--ink-light);color:var(--white);font-size:9px;font-weight:700;cursor:pointer;margin-left:5px;vertical-align:middle;flex-shrink:0;border:none;font-style:normal;line-height:1;padding:0;text-transform:none;letter-spacing:0;position:relative;top:-1px;}
.mipb-info-icon:hover{background:var(--g-dark);}
#mipb-form-tooltip{position:fixed;z-index:99999;background:#1c2b1a;color:#fff;font-size:13px;line-height:1.55;padding:10px 14px;border-radius:8px;max-width:280px;box-shadow:0 4px 24px rgba(0,0,0,.32);pointer-events:none;display:none;font-weight:400;text-transform:none;letter-spacing:0;}
#mipb-form-tooltip.mipb-tip-visible{display:block;}
.mipb-qr-box{background:var(--g-xpale);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px;text-align:center;font-size:12px;color:var(--ink-light);}
.mipb-qr-img-wrap{margin:6px auto;display:flex;align-items:center;justify-content:center;}
.mipb-qr-url{color:var(--g-mid);font-weight:500;word-break:break-all;margin-top:4px;cursor:pointer;font-size:11px;}
.mipb-mobile-status{display:none;font-size:12px;color:var(--g-mid);margin-top:4px;font-weight:500;}
.mipb-mobile-status.active{display:block;}

/* Ingredient cards */
#mipb-ingredient-list{display:grid;gap:1rem;margin-bottom:1rem;}
.mipb-ing-card{background:var(--g-xpale);border:1.5px solid var(--border);border-radius:var(--r);padding:.875rem;position:relative;}
.mipb-ing-search-wrap{position:relative;}
.mipb-ing-search{width:100%;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:10px 14px;font-size:15px;color:var(--ink);background:var(--white);outline:none;transition:border-color .2s;}
.mipb-ing-search:focus{border-color:var(--g-mid);}
.mipb-search-results{position:absolute;top:100%;left:0;right:0;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-sm);z-index:200;max-height:280px;overflow-y:auto;box-shadow:var(--shadow);display:none;}
.mipb-search-results.open{display:block;}
.mipb-search-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .15s;}
.mipb-search-item:hover{background:var(--g-pale);}
.mipb-search-item img{width:36px;height:36px;border-radius:6px;object-fit:cover;border:1px solid var(--border);}
.mipb-search-item-name{font-size:14px;font-weight:500;color:var(--ink);}
.mipb-search-item-cat{font-size:11px;color:var(--ink-light);}
.mipb-search-loading{display:flex;justify-content:center;padding:14px 0;}
.mipb-search-spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--g-mid);border-radius:50%;animation:mipb-spin .7s linear infinite;}

/* Unified ingredient row */
.mipb-ing-selected{display:none;}
.mipb-ing-row{display:grid;grid-template-columns:44px minmax(0,1fr) 90px minmax(120px,140px) 28px;gap:8px;align-items:center;}
@media(max-width:580px){
    .mipb-ing-row{grid-template-columns:66px minmax(0,1fr) 28px;column-gap:12px;}
    .mipb-ing-qty-cell,.mipb-ing-unit-cell{display:none;}
    .mipb-ing-mobile-controls{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;}
    .mipb-ing-thumb{width:66px;height:66px;}
    .mipb-ing-thumb-placeholder{width:66px;height:66px;font-size:26px;}
}
.mipb-ing-mobile-controls{display:none;}
.mipb-ing-thumb{width:44px;height:44px;border-radius:var(--r-sm);object-fit:cover;border:1.5px solid var(--border);background:var(--g-pale);}
.mipb-ing-thumb-placeholder{width:44px;height:44px;border-radius:var(--r-sm);border:1.5px dashed var(--border);background:var(--g-pale);display:flex;align-items:center;justify-content:center;font-size:18px;}
.mipb-ing-name-cell .mipb-ing-name{font-weight:600;font-size:14px;color:var(--g-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mipb-ing-name-cell .mipb-ing-cat{font-size:11px;color:var(--ink-light);}
.mipb-ing-input-sm{width:100%;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:6px 8px;font-size:13px;color:var(--ink);background:var(--white);outline:none;}
.mipb-ing-input-sm:focus{border-color:var(--g-mid);}
.mipb-ing-select-sm{width:100%;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:6px 8px;font-size:12px;color:var(--ink);background:var(--white);outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234a8c3f' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;padding-right:20px;min-width:0;}
.mipb-ing-delete-btn{background:none;border:none;cursor:pointer;color:var(--terra);font-size:18px;line-height:1;padding:0;flex-shrink:0;}
.mipb-ing-dismiss-btn{position:absolute;top:.5rem;right:.5rem;background:none;border:none;cursor:pointer;color:var(--terra);font-size:20px;line-height:1;padding:2px 4px;z-index:2;opacity:.7;}
.mipb-ing-dismiss-btn:hover{opacity:1;}

/* Compact macro row — horizontal, label on top, value+unit middle, kcal bottom */
.mipb-ing-macros{display:flex;flex-wrap:wrap;gap:0;margin-top:8px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;}
.mipb-ing-macro-item{flex:1;min-width:0;padding:5px 6px;text-align:center;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:2px;align-items:center;}
.mipb-ing-macro-item:last-child{border-right:none;}
.mipb-ing-macro-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-light);order:1;}
.mipb-ing-macro-val-wrap{display:flex;align-items:baseline;gap:2px;order:2;}
.mipb-ing-macro-val{font-size:13px;font-weight:700;color:var(--g-dark);white-space:nowrap;}
.mipb-ing-macro-unit{font-size:10px;color:var(--ink-light);white-space:nowrap;}
.mipb-ing-macro-kcal{font-size:10px;color:var(--ink-light);white-space:nowrap;order:3;}
/* Mobile: 2 rows of 3 so long numbers don't get cramped */
@media(max-width:600px){
  .mipb-ing-macro-item{flex:0 0 33.333%;border-bottom:1px solid var(--border);}
  .mipb-ing-macro-item:nth-child(3n){border-right:none;}
  .mipb-ing-macro-item:nth-child(n+4){border-bottom:none;}
}
.mipb-view-nutrients-btn{font-size:12px;color:var(--g-mid);background:none;border:none;cursor:pointer;text-decoration:underline;padding:4px 0 0;display:block;}

/* Nutrient modal */
.mipb-modal-overlay{display:none;position:fixed;inset:0;background:var(--overlay);z-index:9999;align-items:center;justify-content:center;}
.mipb-modal-overlay.open{display:flex;}
.mipb-modal{background:var(--white);border-radius:var(--r);width:min(680px,95vw);max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);}
.mipb-modal-head{padding:1.25rem 1.5rem;border-bottom:1.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.mipb-modal-title{font-family:'DM Serif Display',serif;font-size:1.2rem;color:var(--g-dark);}
.mipb-modal-close{background:none;border:none;cursor:pointer;font-size:22px;color:var(--ink-light);line-height:1;}
.mipb-modal-search{padding:12px 1.5rem;border-bottom:1.5px solid var(--border);}
.mipb-modal-search input{width:100%;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:8px 14px;font-size:14px;background:var(--g-xpale);outline:none;}
.mipb-modal-search input:focus{border-color:var(--g-mid);}
.mipb-modal-body{overflow-y:auto;padding:1rem 1.5rem;flex:1;}
.mipb-nutrient-group{margin-bottom:1.25rem;}
.mipb-nutrient-group-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g-mid);margin:0 0 8px!important;cursor:pointer;display:flex;align-items:center;justify-content:space-between;}
.mipb-nutrient-table{width:100%;border-collapse:collapse;}
.mipb-nutrient-table tr:nth-child(odd) td{background:var(--g-xpale);}
.mipb-nutrient-table tr:nth-child(even) td{background:var(--white);}
.mipb-nutrient-table tr.hidden{display:none;}
.mipb-nutrient-table td{padding:5px 8px;font-size:13px;}
.mipb-nutrient-table td:first-child{color:var(--ink-light);}
.mipb-nutrient-table td:last-child{text-align:right;font-weight:600;color:var(--ink);white-space:nowrap;}

/* Totals */
#mipb-totals-section{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);padding:1.5rem;margin-bottom:1.5rem;box-shadow:var(--shadow);}
.mipb-totals-header{font-family:'DM Serif Display',serif;font-size:1.2rem;color:var(--g-dark);margin-bottom:1rem!important;margin-top:0!important;padding-top:0!important;}
.mipb-totals-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:0;}
@media(max-width:640px){.mipb-totals-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:360px){.mipb-totals-grid{grid-template-columns:1fr 1fr;}}
.mipb-total-card{background:var(--g-xpale);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;}
.mipb-total-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-light);margin-bottom:4px;}
.mipb-total-val{font-size:1.2rem;font-weight:700;color:var(--g-dark);}
.mipb-total-unit{font-size:13px;color:var(--ink-light);margin-left:2px;}
.mipb-total-kcal{font-size:12px;color:var(--ink-light);margin-top:2px;}
/* Vitamins & Minerals */
#mipb-vit-min-section{margin-top:1.2rem;border-top:1px solid var(--border);padding-top:1rem;}
.mipb-vit-min-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
@media(max-width:500px){.mipb-vit-min-grid{grid-template-columns:1fr;gap:.8rem;}}
.mipb-vit-min-hdr{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--g-dark);margin-bottom:6px;}
.mipb-vit-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid var(--g-xpale);font-size:12px;}
.mipb-vit-row:last-child{border-bottom:none;}
.mipb-vit-name{color:var(--ink-light);}
.mipb-vit-val{font-weight:600;color:var(--g-dark);white-space:nowrap;}
.mipb-vit-unit{font-weight:400;color:var(--ink-light);font-size:11px;}
.mipb-servings-note{font-size:13px;color:var(--ink-light);text-align:center;margin-top:8px;}

/* Steps */
#mipb-steps-list{margin-bottom:1rem;}
.mipb-step-card{background:var(--g-xpale);border:1.5px solid var(--border);border-radius:var(--r);padding:1rem;margin-bottom:10px;transition:opacity .2s,border-color .15s;}
.mipb-step-card.dragging{opacity:.4;}
.mipb-step-card.drag-over{border-top:3px solid var(--g-mid);}
.mipb-step-card-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.mipb-step-badge{width:26px;height:26px;border-radius:50%;background:var(--g-dark);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;}
.mipb-drag-handle{color:var(--ink-light);font-size:16px;cursor:grab;}
.mipb-step-order-btns{display:flex;gap:3px;}
.mipb-step-order-btn{width:22px;height:22px;border:1.5px solid var(--border);border-radius:4px;background:var(--white);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;color:var(--g-dark);}
.mipb-step-order-btn:hover{background:var(--g-pale);}
.mipb-step-time-wrap{margin-left:auto;display:flex;align-items:center;gap:6px;}
.mipb-step-time-input{width:70px;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:4px 8px;font-size:13px;background:var(--white);outline:none;text-align:center;color:var(--ink);}
.mipb-step-time-lbl{font-size:11px;color:var(--ink-light);}
.mipb-step-delete{background:none;border:none;cursor:pointer;color:var(--terra);font-size:16px;padding:0;}
.mipb-step-body{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media(max-width:580px){.mipb-step-body{grid-template-columns:1fr;}}

/* Submit */
#mipb-submit-area{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);padding:2rem;box-shadow:var(--shadow);}
.mipb-submit-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.5rem;}
.mipb-notice{padding:12px 16px;border-radius:var(--r-sm);font-size:14px;margin-bottom:1rem;}
.mipb-notice-success{background:var(--g-pale);border:1px solid var(--g-light);color:var(--g-dark);}
.mipb-notice-error{background:var(--terra-pale);border:1px solid var(--terra);color:var(--terra);}
/* Notice positioned below the submit button */
#mipb-submit-notice{margin-bottom:0;margin-top:14px;}
/* Spinner inside submit button while processing */
.mipb-submit-spinner{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:mipb-spin .7s linear infinite;vertical-align:middle;margin-right:7px;margin-bottom:1px;}
#mipb-guest-fields{background:var(--amber-pale);border:1.5px solid var(--amber);border-radius:var(--r-sm);padding:1rem;margin-bottom:1rem;}
.mipb-upload-done img{cursor:pointer;}
.mipb-ing-thumb{cursor:pointer;}
#mipb-lightbox{display:none;position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.88);align-items:center;justify-content:center;padding:1rem;cursor:zoom-out;}
#mipb-lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 8px 40px rgba(0,0,0,.5);cursor:default;object-fit:contain;}
#mipb-lb-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.15);backdrop-filter:blur(4px);border:1.5px solid rgba(255,255,255,.2);color:#fff;font-size:22px;cursor:pointer;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;line-height:1;}
#mipb-lb-close:hover{background:rgba(255,255,255,.3);}

/* === PART 2: Extended form components (upload, ingredients, modals) === */
/* ─────────────────────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────────────────────── */
:root {
    /* Palette — duplicated here so snippet #11 works on all pages
       (snippet #16 only loads on recipe-calculator pages) */
    --g-dark:#2d5a27;--g-mid:#4a8c3f;--g-light:#7aba6d;--g-pale:#e8f5e3;--g-xpale:#f4faf2;
    --ink:#1c2b1a;--ink-light:#6b8264;--border:#cde0c5;--white:#ffffff;
    --amber:#e8a020;--amber-pale:#fdf3e0;
    --terra:#c4622d;--terra-pale:#faeee8;
    --overlay:rgba(28,43,26,.45);--shadow-lg:0 8px 40px rgba(45,90,39,.2);
    --shadow:0 2px 12px rgba(45,90,39,.12);
    /* Aliases for this snippet */
    --mipb-green-dark:   var(--g-dark);
    --mipb-green-mid:    var(--g-mid);
    --mipb-green-light:  var(--g-light);
    --mipb-green-pale:   var(--g-pale);
    --mipb-green-xpale:  var(--g-xpale);
    --mipb-ink:          var(--ink);
    --mipb-ink-light:    var(--ink-light);
    --mipb-border:       var(--border);
    --mipb-white:        var(--white);
    --mipb-terra:        var(--terra);
    --mipb-terra-pale:   var(--terra-pale);
    --mipb-radius-panel: 12px;
    --mipb-radius-input: 8px;
    --mipb-radius-pill:  99px;
    --mipb-shadow:       var(--shadow);
    --mipb-font-body:    "DM Sans", sans-serif;
    --mipb-font-display: "DM Serif Display", serif;
}

/* ─────────────────────────────────────────────────────────
   FORM WIDTH — desktop starts at 1000px, fluid below
───────────────────────────────────────────────────────── */
.wpcf7,
.wpcf7-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 1000px;
    box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────
   SECTION WRAPPER — constrains sticky headers
───────────────────────────────────────────────────────── */
.mipb-section {
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
}

/* ─────────────────────────────────────────────────────────
   STEP HEADERS — sticky frosted-glass section dividers
───────────────────────────────────────────────────────── */
.mipb-step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 56px 0 20px;
    padding: 14px 20px;
    border-radius: var(--mipb-radius-panel);
    background: rgba(255,255,255,0.60);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid var(--mipb-border);
    box-shadow: var(--mipb-shadow);
}
.mipb-sticky-step {
    position: sticky;
    top: 90px;
    z-index: 20;
}
.mipb-step-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: var(--mipb-radius-pill);
    background: var(--mipb-green-dark);
    color: var(--mipb-white);
    font-family: var(--mipb-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.mipb-step-badge--alt {
    background: var(--mipb-green-mid);
}
.mipb-step-title {
    font-family: var(--mipb-font-display);
    font-size: 1.35rem;
    color: var(--mipb-green-dark);
    margin: 0;
    line-height: 1.2;
    flex: 1;
}

/* ─────────────────────────────────────────────────────────
   STEP COUNTER — number input inside the header bar
───────────────────────────────────────────────────────── */
.mipb-step-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}
.mipb-step-counter-label {
    font-family: var(--mipb-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mipb-ink-light);
    white-space: nowrap;
}
.mipb-step-counter input[type="number"] {
    width: 64px !important;
    min-width: 56px;
    font-family: var(--mipb-font-body);
    font-size: 14px;
    color: var(--mipb-ink);
    background: var(--mipb-white);
    border: 1.5px solid var(--mipb-border);
    border-radius: var(--mipb-radius-input);
    padding: 6px 10px;
    box-sizing: border-box;
    text-align: center;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.mipb-step-counter input[type="number"]:focus {
    border-color: var(--mipb-green-mid);
    box-shadow: 0 0 0 3px rgba(74,140,63,0.15);
}

/* ─────────────────────────────────────────────────────────
   CARD — white panel wrapper for each section
───────────────────────────────────────────────────────── */
.mipb-card {
    background: var(--mipb-white);
    border: 1.5px solid var(--mipb-border);
    border-radius: var(--mipb-radius-panel);
    box-shadow: var(--mipb-shadow);
    padding: 28px 24px;
    margin-bottom: 32px;
}

/* ─────────────────────────────────────────────────────────
   FIELD GROUPS — label + input stacks
───────────────────────────────────────────────────────── */
.mipb-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}
.mipb-field-group:last-child {
    margin-bottom: 0;
}
.mipb-label {
    font-family: var(--mipb-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mipb-ink-light);
    margin: 0 0 4px;
    display: block;
}
.mipb-hint {
    font-family: var(--mipb-font-body);
    font-size: 13px;
    color: var(--mipb-ink-light);
    margin: 0 0 6px;
    font-style: italic;
}
.mipb-required {
    color: var(--mipb-terra);
    font-style: normal;
}

/* ─────────────────────────────────────────────────────────
   TEXT / NUMBER / SELECT / TEXTAREA INPUTS
───────────────────────────────────────────────────────── */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
    font-family: var(--mipb-font-body);
    font-size: 14px;
    color: var(--mipb-ink);
    background: var(--mipb-green-xpale);
    border: 1.5px solid var(--mipb-border);
    border-radius: var(--mipb-radius-input);
    padding: 9px 12px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.wpcf7-form input[type="number"] {
    width: 100px !important;
    min-width: 80px;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    border-color: var(--mipb-green-mid);
    box-shadow: 0 0 0 3px rgba(74,140,63,0.15);
    background: var(--mipb-white);
}
.wpcf7-form textarea {
    min-height: 100px;
    resize: vertical;
}
.wpcf7-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'8\' viewBox=\'0 0 12 8\'%3E%3Cpath d=\'M1 1l5 5 5-5\' stroke=\'%234a8c3f\' stroke-width=\'1.8\' fill=\'none\' stroke-linecap=\'round\'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

/* ─────────────────────────────────────────────────────────
   SELECT2 OVERRIDES
───────────────────────────────────────────────────────── */
.select2-container {
    width: 100% !important;
    box-sizing: border-box;
}
.select2-container--default .select2-selection--single {
    font-family: var(--mipb-font-body);
    font-size: 14px;
    height: 40px;
    background: var(--mipb-green-xpale);
    border: 1.5px solid var(--mipb-border);
    border-radius: var(--mipb-radius-input);
    display: flex;
    align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--mipb-ink);
    padding-left: 12px;
    line-height: 38px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
    right: 8px;
}
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--mipb-green-mid);
    box-shadow: 0 0 0 3px rgba(74,140,63,0.15);
    outline: none;
}
.select2-dropdown {
    font-family: var(--mipb-font-body);
    font-size: 14px;
    border: 1.5px solid var(--mipb-border);
    border-radius: var(--mipb-radius-input);
    box-shadow: var(--mipb-shadow);
    z-index: 99999 !important;
}
.select2-results__option--highlighted {
    background-color: var(--mipb-green-pale) !important;
    color: var(--mipb-green-dark) !important;
}
.select2-results__option[aria-selected="true"] {
    background: var(--mipb-green-pale);
    color: var(--mipb-green-dark);
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────
   CHECKBOXES — pill-style toggle look
───────────────────────────────────────────────────────── */
.mipb-checkbox-toggle .wpcf7-list-item {
    margin: 0;
}
.mipb-checkbox-toggle .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--mipb-green-pale);
    border: 1.5px solid var(--mipb-border);
    border-radius: var(--mipb-radius-pill);
    font-family: var(--mipb-font-body);
    font-size: 14px;
    color: var(--mipb-green-dark);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}
.mipb-checkbox-toggle .wpcf7-list-item label:hover {
    background: var(--mipb-border);
    border-color: var(--mipb-green-mid);
}
.mipb-checkbox-toggle input[type="checkbox"]:checked + span,
.mipb-checkbox-toggle input[type="checkbox"]:checked ~ span {
    font-weight: 600;
}
.mipb-checkbox-grid .wpcf7-list-item {
    display: inline-flex;
    margin: 4px 4px 4px 0;
}
.mipb-checkbox-grid .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--mipb-green-pale);
    border: 1.5px solid var(--mipb-border);
    border-radius: var(--mipb-radius-pill);
    font-family: var(--mipb-font-body);
    font-size: 13px;
    color: var(--mipb-green-dark);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.mipb-checkbox-grid .wpcf7-list-item label:hover {
    background: var(--mipb-border);
    border-color: var(--mipb-green-mid);
}

/* ─────────────────────────────────────────────────────────
   NOTICE BOXES
───────────────────────────────────────────────────────── */
.mipb-notice {
    padding: 12px 16px;
    border-radius: var(--mipb-radius-input);
    font-family: var(--mipb-font-body);
    font-size: 14px;
    margin-bottom: 16px;
}
.mipb-notice--info {
    background: var(--mipb-green-pale);
    border: 1.5px solid var(--mipb-border);
    color: var(--mipb-green-dark);
}

/* ─────────────────────────────────────────────────────────
   CONDITIONAL FIELDS — visual indent
───────────────────────────────────────────────────────── */
.mipb-conditional-field {
    padding-left: 16px;
    border-left: 3px solid var(--mipb-green-light);
    margin-bottom: 20px;
}

/* ─────────────────────────────────────────────────────────
   INGREDIENT CARDS
───────────────────────────────────────────────────────── */
.mipb-ingredient-card {
    border: 1.5px solid var(--mipb-border);
    border-radius: var(--mipb-radius-panel);
    background: var(--mipb-green-xpale);
    margin-bottom: 20px;
}
.mipb-ingredient-header {
    padding: 10px 16px;
    background: var(--mipb-green-pale);
    border-bottom: 1.5px solid var(--mipb-border);
    border-radius: var(--mipb-radius-panel) var(--mipb-radius-panel) 0 0;
}
.mipb-ingredient-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: var(--mipb-radius-pill);
    background: var(--mipb-green-dark);
    color: var(--mipb-white);
    font-family: var(--mipb-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.mipb-ingredient-badge--custom {
    background: var(--mipb-green-mid);
}
.mipb-ingredient-badge--step {
    background: var(--mipb-ink);
}

/* ─────────────────────────────────────────────────────────
   INGREDIENT ROW
───────────────────────────────────────────────────────── */
.mipb-ingredient-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 100%;
}
.mipb-ingredient-thumb-col {
    flex: 0 0 90px;
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mipb-ingredient-thumb-col img,
.mipb-ingredient-thumb {
    width: 100%;
    max-width: 90px;
    max-height: 90px;
    object-fit: scale-down;
    border-radius: var(--mipb-radius-input);
}
.mipb-ingredient-select-col {
    flex: 3 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mipb-ingredient-qty-col,
.mipb-ingredient-unit-col {
    flex: 1 1 100px;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ─────────────────────────────────────────────────────────
   CUSTOM INGREDIENT ROW
───────────────────────────────────────────────────────── */
.mipb-custom-upload-col {
    flex: 1 1 140px;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
}
.mipb-ingredient-col-middle {
    flex: 2 1 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 8px;
}

/* ─────────────────────────────────────────────────────────
   PREPARATION STEP ROWS
───────────────────────────────────────────────────────── */
.mipb-step-text-col {
    flex: 3 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mipb-step-photo-col {
    flex: 1 1 160px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
}

/* ─────────────────────────────────────────────────────────
   INLINE FIELD
───────────────────────────────────────────────────────── */
.mipb-inline-field {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.mipb-inline-label {
    font-family: var(--mipb-font-body);
    font-size: 13px;
    color: var(--mipb-ink-light);
    font-weight: 600;
}
.mipb-times-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ─────────────────────────────────────────────────────────
   SUBMIT BUTTON
───────────────────────────────────────────────────────── */
.mipb-submit-row {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1.5px solid var(--mipb-border);
}
.wpcf7-submit {
    font-family: var(--mipb-font-body) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 12px 32px !important;
    background: var(--mipb-green-dark) !important;
    color: var(--mipb-white) !important;
    border: none !important;
    border-radius: var(--mipb-radius-input) !important;
    cursor: pointer !important;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s !important;
    box-shadow: 0 2px 10px rgba(45,90,39,0.18) !important;
}
.wpcf7-submit:hover {
    background: var(--mipb-green-mid) !important;
    box-shadow: 0 4px 16px rgba(45,90,39,0.25) !important;
}
.wpcf7-submit:active {
    transform: translateY(1px) !important;
}

/* ─────────────────────────────────────────────────────────
   VALIDATION STATES
───────────────────────────────────────────────────────── */
.wpcf7-not-valid {
    border-color: var(--mipb-terra) !important;
    background: var(--mipb-terra-pale) !important;
}
.wpcf7-not-valid-tip {
    font-family: var(--mipb-font-body) !important;
    font-size: 12px !important;
    color: var(--mipb-terra) !important;
    margin-top: 4px !important;
}
.wpcf7-response-output {
    font-family: var(--mipb-font-body) !important;
    border-radius: var(--mipb-radius-input) !important;
    font-size: 14px !important;
    margin-top: 16px !important;
}

/* ─────────────────────────────────────────────────────────
   TABLET — 768px to 1024px
───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .wpcf7,
    .wpcf7-form {
        min-width: 0;
        width: 100% !important;
    }
    .mipb-step-header {
        margin: 32px 0 16px;
    }
    .mipb-sticky-step {
        top: 70px;
    }
    .mipb-card {
        padding: 20px 18px;
    }
    .mipb-ingredient-thumb-col {
        flex: 0 0 70px;
        width: 70px;
    }
    .mipb-ingredient-thumb-col img,
    .mipb-ingredient-thumb {
        max-width: 70px;
        max-height: 70px;
    }
    .mipb-ingredient-select-col {
        flex: 2 1 200px;
    }
    .mipb-ingredient-qty-col,
    .mipb-ingredient-unit-col {
        flex: 1 1 80px;
        min-width: 70px;
    }
    .mipb-custom-upload-col {
        flex: 1 1 120px;
        min-width: 100px;
    }
    .mipb-step-text-col {
        flex: 2 1 200px;
    }
    .mipb-step-photo-col {
        flex: 1 1 130px;
        min-width: 120px;
    }
    .mipb-times-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ─────────────────────────────────────────────────────────
   MOBILE — below 768px
───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .wpcf7,
    .wpcf7-form {
        min-width: 0;
        width: 100% !important;
    }
    .mipb-step-header {
        margin: 24px 0 12px;
        padding: 10px 14px;
        gap: 8px;
    }
    .mipb-sticky-step {
        top: 60px;
    }
    .mipb-step-title {
        font-size: 1.1rem;
    }
    .mipb-step-counter-label {
        display: none;
    }
    .mipb-step-counter input[type="number"] {
        width: 56px !important;
        min-width: 48px;
        padding: 5px 8px;
    }
    .mipb-card {
        padding: 14px 12px;
        margin-bottom: 20px;
    }
    .mipb-ingredient-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px;
    }
    .mipb-ingredient-thumb-col {
        flex: none;
        width: 100%;
        max-width: 80px;
        margin: 0 auto;
    }
    .mipb-ingredient-thumb-col img,
    .mipb-ingredient-thumb {
        max-width: 80px;
        max-height: 80px;
    }
    .mipb-ingredient-select-col,
    .mipb-ingredient-qty-col,
    .mipb-ingredient-unit-col,
    .mipb-custom-upload-col,
    .mipb-ingredient-col-middle,
    .mipb-step-text-col,
    .mipb-step-photo-col {
        flex: none;
        width: 100%;
        min-width: 0;
        padding: 0;
    }
    .mipb-times-grid {
        grid-template-columns: 1fr;
    }
    .mipb-submit-row {
        justify-content: stretch;
    }
    .wpcf7-submit {
        width: 100% !important;
    }
    .mfile-wrapper {
        display: block !important;
    }
    .upload-choice-wrapper {
        display: none !important;
    }
    .mipb-inline-field {
        gap: 8px;
    }
    .mipb-conditional-field {
        padding-left: 10px;
    }
    .mipb-step-header {
        border-radius: 8px;
    }
}

/* ─────────────────────────────────────────────────────────
   CUSTOM INGREDIENT MODAL
───────────────────────────────────────────────────────── */
.mipb-custom-modal-overlay{display:none;position:fixed;inset:0;background:var(--overlay);z-index:9999;align-items:flex-start;justify-content:center;padding-top:40px;overflow-y:auto;}
.mipb-custom-modal-overlay.open{display:flex;}
.mipb-custom-modal{background:var(--white);border-radius:12px;width:min(920px,95vw);box-shadow:var(--shadow-lg);margin-bottom:40px;max-height:calc(100vh - 60px);display:flex;flex-direction:column;}
.mipb-custom-modal-head{padding:1.25rem 1.5rem;border-bottom:1.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.mipb-custom-modal-title{font-family:'DM Serif Display',serif;font-size:1.2rem;color:var(--g-dark);margin:0 !important;}
.mipb-custom-modal-close{background:none;border:none;cursor:pointer;font-size:22px;color:var(--ink-light);line-height:1;}
.mipb-custom-modal-body{padding:1.5rem;overflow-y:auto;flex:1;}
.mipb-custom-modal-footer{padding:1rem 1.5rem;border-top:1.5px solid var(--border);display:flex;gap:10px;background:var(--white);border-radius:0 0 12px 12px;flex-shrink:0;position:relative;z-index:20;}
.mipb-upload-zone{border:2px dashed var(--border);border-radius:8px;padding:1.5rem;text-align:center;cursor:pointer;background:var(--g-xpale);transition:border-color .2s;margin-bottom:8px;}
.mipb-upload-zone:hover,.mipb-upload-zone.dragover{border-color:var(--g-mid);background:var(--g-pale);}
.mipb-upload-zone p{margin:0;font-size:13px;color:var(--ink-light);pointer-events:none;}
/* Same iOS Safari fix — visually hidden, not display:none */
.mipb-upload-zone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none;}
.mipb-upload-done{display:none;text-align:center;position:relative;margin-top:8px;}
.mipb-upload-done-thumb{max-width:80px;max-height:80px;width:auto;height:auto;border-radius:8px;border:1.5px solid var(--border);object-fit:contain;display:block;margin:0 auto;}
.mipb-upload-remove-sm{position:absolute;top:-6px;right:calc(50% - 46px);width:20px;height:20px;border-radius:50%;background:var(--terra);color:var(--white);border:none;cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;}
.mipb-qr-box{background:var(--g-xpale);border:1px solid var(--border);border-radius:8px;padding:12px;margin-top:8px;text-align:center;font-size:12px;color:var(--ink-light);}
.mipb-qr-img-wrap{margin:8px auto;display:flex;align-items:center;justify-content:center;}
.mipb-qr-url{color:var(--g-mid);font-weight:500;word-break:break-all;margin-top:4px;cursor:pointer;font-size:11px;}
.mipb-mobile-status{display:none;font-size:12px;color:var(--g-mid);margin-top:6px;font-weight:500;}
.mipb-mobile-status.active{display:block;}
/* ── Top row: Photo left, Name right ── */
.mipb-ci-top-row{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1rem;}
.mipb-ci-photo-col{flex:0 0 33%;min-width:0;}
.mipb-ci-name-col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;}
.mipb-ci-name-col .mipb-input{margin-top:4px;}
/* Photo preview in the top-row left column */
.mipb-ci-photo-col .mipb-upload-done{margin-top:0;}
.mipb-ci-photo-col .mipb-upload-done-thumb{max-width:100%;max-height:160px;width:auto;height:auto;object-fit:contain;border-radius:8px;border:1.5px solid var(--border);display:block;}
.mipb-ci-photo-col .mipb-upload-remove-sm{right:-8px;top:-8px;}
.mipb-ci-photo-col .mipb-upload-zone{min-height:100px;padding:12px 8px;font-size:12px;}
.mipb-ci-photo-col .mipb-upload-zone p{font-size:11px;margin:4px 0 0;}
/* Nutrition label — full-width section below the top row */
.mipb-ci-label-section{margin-top:1.25rem;}
/* Label upload row: upload zone 1/3 + info box 2/3 */
.mipb-ci-label-upload-row{display:flex;gap:1rem;align-items:flex-start;margin-top:4px;}
.mipb-ci-label-upload-col{flex:0 0 33%;min-width:0;}
.mipb-ci-label-info-col{flex:1;min-width:0;}
.mipb-ci-label-info-col .mipb-label-info-box{margin-top:0;}
/* Label uploaded: image left, action buttons stacked right */
.mipb-ci-label-done-row{display:flex;gap:12px;align-items:flex-start;margin-top:8px;}
.mipb-ci-label-done-row .mipb-upload-done{flex-shrink:0;position:relative;}
.mipb-ci-label-done-row .mipb-label-preview-img{max-height:140px;max-width:180px;width:auto;height:auto;object-fit:contain;border-radius:8px;border:1.5px solid var(--border);display:block;margin:0;}
.mipb-ci-label-actions{display:flex;flex-direction:column;gap:8px;justify-content:flex-start;}
.mipb-ci-label-actions .mipb-btn{white-space:nowrap;text-align:left;justify-content:flex-start;}
@media(max-width:600px){.mipb-ci-top-row{flex-direction:column;gap:0.75rem;}.mipb-ci-photo-col{flex:0 0 100%;}.mipb-ci-photo-col .mipb-upload-done-thumb{max-height:200px;width:auto;max-width:100%;}.mipb-ci-label-upload-row{flex-direction:column;}.mipb-ci-label-upload-col{flex:0 0 100%;}.mipb-ci-label-done-row{flex-direction:column;}.mipb-ci-label-done-row .mipb-label-preview-img{max-width:100%;}}
/* ── Info box (amber/yellow, below upload buttons) ── */
.mipb-label-info-box{background:#fdf3e0;border:1px solid #e8c84a;border-radius:8px;padding:12px 14px;margin-top:10px;margin-bottom:0;font-size:13px;color:#78350f;line-height:1.6;}
.mipb-guest-ocr-upsell{display:flex;gap:10px;align-items:flex-start;background:var(--amber-pale);border:1.5px solid var(--amber);border-radius:8px;padding:12px 14px;margin-bottom:12px;font-size:13px;color:var(--ink);line-height:1.5;}
.mipb-guest-ocr-icon{font-size:20px;flex-shrink:0;margin-top:1px;}
.mipb-guest-ocr-upsell a{color:var(--g-dark);font-weight:600;text-decoration:underline;}
.mipb-label-preview-img{max-width:100%;max-height:200px;width:auto;height:auto;border-radius:8px;border:1.5px solid var(--border);display:none;margin-top:8px;}
/* ── Extracted preview: side-by-side ── */
.mipb-extracted-preview{border:1px solid var(--border);border-radius:8px;padding:1rem;margin-top:1rem;display:none;}
#ci-label-sticky-wrap{display:none;flex-shrink:0;width:55%;padding-right:14px;border-right:1.5px solid var(--border);position:sticky;top:0;align-self:flex-start;}
#ci-extracted-right{flex:1;min-width:0;display:flex;flex-direction:column;padding-left:14px;}
.mipb-extracted-preview h4{font-size:12px;font-weight:700;color:var(--g-dark);margin:0 0 6px !important;text-transform:uppercase;letter-spacing:.06em;}
#ci-extracted-rows-wrap{padding-right:2px;}
.mipb-extracted-row{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center;padding:5px 8px;margin:0;border-radius:3px;}
.mipb-extracted-row:nth-child(odd){background:var(--white);}
.mipb-extracted-row:nth-child(even){background:var(--g-xpale);}
.mipb-extracted-row input{border:1.5px solid var(--border);border-radius:6px;padding:4px 8px;font-size:13px;background:transparent;width:76px;text-align:right;}
.mipb-extracted-row input:focus{background:var(--white);outline:none;border-color:var(--g-mid);}
.mipb-extracted-row>span:first-child{font-size:13px;color:var(--ink);}
.mipb-extracted-row>span:last-child{font-size:12px;color:var(--ink-light);min-width:28px;}
.mipb-unit-display{background:var(--g-pale);border:1.5px solid var(--border);border-radius:6px;padding:5px 10px;font-size:13px;color:var(--g-dark);font-weight:600;display:inline-block;}
.mipb-unit-note{font-size:11px;color:var(--ink-light);margin-top:2px;}
.mipb-upload-toggle{display:flex;gap:8px;margin-bottom:10px;}
.mipb-upload-toggle-btn{flex:1;padding:8px;border:1.5px solid var(--border);border-radius:8px;background:var(--g-xpale);color:var(--ink-light);font-size:13px;font-weight:600;cursor:pointer;text-align:center;transition:all .2s;}
.mipb-upload-toggle-btn.active{background:var(--g-dark);color:var(--white);border-color:var(--g-dark);}
.mipb-upload-panel{display:none;}
.mipb-upload-panel.active{display:block;}
.mipb-unit-conflict{background:var(--terra-pale);border:1px solid var(--terra);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--terra);margin-top:8px;}
.mipb-label-view-wrap{position:relative;height:min(62vh,520px);border-radius:8px;overflow:hidden;background:var(--g-xpale);border:1.5px solid var(--border);cursor:default;-webkit-user-select:none;user-select:none;}
.mipb-label-view-wrap img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;-webkit-user-drag:none;transform-origin:0 0;will-change:transform;touch-action:none;}
.mipb-label-hint{font-size:11px;color:var(--ink-light);margin:5px 0 0;text-align:center;}
@media(max-width:600px){.mipb-extracted-preview{flex-direction:column!important;}#ci-label-sticky-wrap{width:100%;padding-right:0;border-right:none;padding-bottom:10px;margin-bottom:0;position:sticky;top:0;align-self:auto;z-index:10;background:var(--white);box-shadow:0 3px 8px -2px rgba(0,0,0,0.08);border-radius:8px 8px 0 0;}#ci-extracted-right{padding-left:0;}.mipb-label-view-wrap{height:min(35vh,240px);}#ci-extracted-rows-wrap{height:auto;}#ci-label-hint-desktop{display:none!important;}}
@media(min-width:601px){#ci-label-hint-mobile{display:none!important;}}

/* AI extraction loading animation */
.mipb-ci-extracting .mipb-label-view-wrap::before{content:'';position:absolute;inset:0;background:rgba(45,90,39,0.12);z-index:4;pointer-events:none;border-radius:8px;}
.mipb-ci-extracting .mipb-label-view-wrap::after{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,transparent 0%,var(--g-dark) 50%,transparent 100%);box-shadow:0 0 18px 6px rgba(45,90,39,0.35),0 0 40px 12px rgba(45,90,39,0.15);animation:mipb-scan 1.6s ease-in-out infinite;z-index:5;pointer-events:none;}
@keyframes mipb-scan{0%{top:0;opacity:0.4;}50%{opacity:1;}100%{top:calc(100% - 6px);opacity:0.4;}}
.mipb-ci-extracting #ci-extracted-right{position:relative;pointer-events:none;}
.mipb-ci-extracting #ci-extracted-right::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.6);z-index:4;border-radius:8px;}
.mipb-ci-extract-loader{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 16px;text-align:center;}
.mipb-ci-extract-loader-bar{width:180px;height:6px;background:var(--g-xpale);border-radius:4px;overflow:hidden;position:relative;}
.mipb-ci-extract-loader-bar::after{content:'';position:absolute;top:0;left:0;height:100%;width:40%;background:var(--g-dark);border-radius:4px;animation:mipb-loader-slide 1.2s ease-in-out infinite;}
@keyframes mipb-loader-slide{0%{left:-40%;}100%{left:100%;}}
.mipb-ci-extract-loader p{margin:0;font-size:13px;color:var(--ink-light);}

/* ── Upload in-progress overlay ──────────────────────────────────────────────── */
/* Injected by mipbSetUploadBusy() — covers the upload zone while the server
   processes the image. Removed automatically on success or error. */
.mipb-ul-overlay{
    position:absolute;inset:0;z-index:20;
    background:rgba(244,250,242,.9);
    border-radius:inherit;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    pointer-events:none;
}
.mipb-ul-overlay::before{
    content:'';
    display:block;
    width:28px;height:28px;
    border:3px solid var(--border);
    border-top-color:var(--g-dark);
    border-radius:50%;
    animation:mipb-spin .7s linear infinite;
}
.mipb-ul-overlay::after{
    content:'Uploading…';
    font-size:12px;font-weight:600;
    color:var(--ink-light);
    letter-spacing:.02em;
}
@keyframes mipb-spin{to{transform:rotate(360deg);}}
/* Upload zones that host the overlay need position:relative */
.mipb-upload-zone,.mipb-step-upload-wrap{position:relative;}

/* ── Database-presence icon badges in ingredient search dropdown ── */
.mipb-db-badges {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 5px;
    vertical-align: middle;
    flex-shrink: 0;
}
.mipb-db-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    opacity: 0.75;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.mipb-db-badge:hover { opacity: 1; }
.mipb-db-badge svg { width: 14px; height: 14px; max-width: 14px; max-height: 14px; display: block; }