Red Rock International \u2014 Event Pricing<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@300;400;500&family=DM+Serif+Display&display=swap\" rel=\"stylesheet\" \/>\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n :root {\n --red: #B83025; --red-dark: #8C2219; --red-light: #F7EAE8; --red-mid: #D94030;\n --ink: #1A1A1A; --ink-2: #444; --ink-3: #777; --ink-4: #AAA;\n --border: #E2DDD9; --surface: #FAFAF8; --white: #FFFFFF;\n --green: #1A6B4A; --amber: #8A5A00; --amber-bg: #FDF3DC;\n --radius: 10px; --radius-sm: 6px;\n --shadow: 0 1px 3px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);\n }\n html { font-size: 15px; }\n body { font-family: 'DM Sans', sans-serif; background: var(--surface); color: var(--ink); min-height: 100vh; }\n\n header { background: var(--white); border-bottom: 1px solid var(--border); padding: 0 2.5rem; display: flex; align-items: center; gap: 1.5rem; height: 60px; position: sticky; top: 0; z-index: 10; }\n .header-logo { font-family: 'DM Serif Display', serif; font-size: 1.15rem; color: var(--red); }\n .header-divider { width: 1px; height: 22px; background: var(--border); }\n .header-sub { font-size: 0.8rem; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }\n\n .page { max-width: 640px; margin: 0 auto; padding: 2.5rem 2rem 4rem; }\n\n \/* Progress *\/\n .progress-wrap { margin-bottom: 2rem; }\n .progress-steps { display: flex; align-items: center; margin-bottom: 0.75rem; }\n .step-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); background: var(--white); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 500; color: var(--ink-4); flex-shrink: 0; transition: all 0.25s; position: relative; z-index: 1; }\n .step-dot.active { border-color: var(--red); background: var(--red); color: #fff; }\n .step-dot.done { border-color: var(--red); background: var(--red-light); color: var(--red); cursor: pointer; }\n .step-line { flex: 1; height: 2px; background: var(--border); transition: background 0.25s; }\n .step-line.done { background: var(--red-light); }\n .progress-labels { display: flex; justify-content: space-between; }\n .step-label { font-size: 0.7rem; color: var(--ink-4); text-align: center; flex: 1; transition: color 0.2s; white-space: nowrap; }\n .step-label:first-child { text-align: left; }\n .step-label:last-child { text-align: right; }\n .step-label.active { color: var(--red); font-weight: 500; }\n .step-label.done { color: var(--ink-3); }\n\n \/* Panels *\/\n .step-panel { display: none; }\n .step-panel.active { display: block; animation: fadeUp 0.3s ease both; }\n @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }\n\n \/* Card *\/\n .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); margin-bottom: 1.25rem; }\n .card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 1.25rem; }\n .card-icon { width: 30px; height: 30px; background: var(--red-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n .card-icon svg { width: 15px; height: 15px; stroke: var(--red); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }\n .card-title { font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-3); }\n\n \/* Divider inside card *\/\n .card-divider { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; }\n\n \/* Sub-section label *\/\n .sub-label { font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); margin-bottom: 0.75rem; }\n\n \/* Fields *\/\n .field-grid { display: grid; gap: 1rem; }\n .col-2 { grid-template-columns: 1fr 1fr; }\n .col-3 { grid-template-columns: 1fr 1fr 1fr; }\n .col-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }\n @media (max-width: 500px) { .col-2, .col-3, .col-4 { grid-template-columns: 1fr 1fr; } }\n .field { display: flex; flex-direction: column; gap: 6px; }\n label { font-size: 0.78rem; color: var(--ink-3); }\n input[type=\"text\"], input[type=\"number\"], input[type=\"date\"] {\n height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm);\n padding: 0 12px; font-family: 'DM Sans', sans-serif; font-size: 0.92rem;\n color: var(--ink); background: var(--white); outline: none; width: 100%;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(184,48,37,0.1); }\n input::placeholder { color: var(--ink-4); }\n\n \/* Toggles *\/\n .toggle-group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }\n .tog { height: 36px; padding: 0 16px; border: 1px solid var(--border); border-radius: 100px; background: var(--white); font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: var(--ink-3); cursor: pointer; transition: all 0.15s; }\n .tog:hover { border-color: var(--red); color: var(--red); }\n .tog.active { background: var(--red); border-color: var(--red); color: #fff; font-weight: 500; }\n\n \/* Vehicle selector *\/\n .vehicle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1rem; }\n .vehicle-tile { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; cursor: pointer; transition: all 0.15s; background: var(--white); }\n .vehicle-tile:hover { border-color: var(--red-mid); background: var(--red-light); }\n .vehicle-tile.selected { border-color: var(--red); background: var(--red-light); }\n .vehicle-name { font-size: 1rem; font-weight: 500; color: var(--ink); margin-bottom: 3px; }\n .vehicle-tile.selected .vehicle-name { color: var(--red-dark); }\n .vehicle-desc { font-size: 0.78rem; color: var(--ink-3); }\n .vehicle-tile.selected .vehicle-desc { color: var(--red); }\n\n \/* City *\/\n .city-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }\n .city-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 1rem; }\n @media (max-width: 440px) { .city-grid { grid-template-columns: 1fr; } }\n .city-tile { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; background: var(--white); }\n .city-tile:hover { border-color: var(--red-mid); background: var(--red-light); }\n .city-tile.selected { border-color: var(--red); background: var(--red-light); }\n .city-tile.edit-mode { cursor: default; }\n .city-tile.edit-mode:hover { border-color: var(--border); background: var(--white); }\n .city-name { font-size: 0.88rem; font-weight: 500; color: var(--ink); }\n .city-tile.selected .city-name { color: var(--red-dark); }\n .city-cost { font-size: 0.78rem; color: var(--ink-3); background: #F2EDE9; padding: 2px 8px; border-radius: 100px; white-space: nowrap; }\n .city-tile.selected .city-cost { background: #ECC9C4; color: var(--red-dark); }\n .city-tile-right { display: flex; align-items: center; gap: 4px; }\n .city-edit-input { width: 90px; height: 28px !important; font-size: 0.8rem !important; padding: 0 8px !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; text-align: right; }\n .city-edit-label { font-size: 0.72rem; color: var(--ink-4); }\n .edit-rates-btn { height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: 100px; background: var(--white); font-family: 'DM Sans', sans-serif; font-size: 0.78rem; color: var(--ink-3); cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all 0.15s; }\n .edit-rates-btn:hover { border-color: var(--red); color: var(--red); }\n .edit-rates-btn.active { background: var(--red-light); border-color: var(--red); color: var(--red-dark); }\n .edit-rates-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n .field-note { font-size: 0.75rem; color: var(--ink-4); margin-top: 4px; }\n #customNightRow { display: none; margin-top: 10px; }\n\n \/* Nav *\/\n .nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; }\n .btn { height: 42px; padding: 0 28px; border-radius: 100px; font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.15s; border: none; }\n .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--ink-3); }\n .btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); }\n .btn-primary { background: var(--red); color: #fff; }\n .btn-primary:hover { background: var(--red-dark); }\n\n \/* Summary *\/\n .breakdown-table { width: 100%; border-collapse: collapse; }\n .breakdown-table tr { border-bottom: 1px solid var(--border); }\n .breakdown-table tr:last-child { border-bottom: none; }\n .breakdown-table td { padding: 11px 4px; font-size: 0.88rem; vertical-align: middle; }\n .breakdown-table td.cat { font-weight: 500; width: 30%; }\n .breakdown-table td.detail { color: var(--ink-3); font-size: 0.8rem; }\n .breakdown-table td.amount { text-align: right; font-weight: 500; white-space: nowrap; }\n .breakdown-table tr.total-row td { padding-top: 14px; font-weight: 500; font-size: 1rem; border-top: 2px solid var(--ink); }\n .breakdown-table tr.total-row td.amount { font-size: 1.15rem; color: var(--red-dark); }\n .quote-meta { font-size: 0.82rem; color: var(--ink-3); margin-bottom: 1rem; }\n .sell-wrapper { display: flex; align-items: center; gap: 12px; margin-bottom: 1.25rem; }\n .sell-wrapper label { font-size: 0.88rem; color: var(--ink-2); white-space: nowrap; flex-shrink: 0; }\n .sell-input-wrap { position: relative; flex: 1; max-width: 220px; }\n .sell-input-wrap span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 0.9rem; color: var(--ink-3); pointer-events: none; }\n .sell-input-wrap input { padding-left: 52px; font-size: 1.1rem; font-weight: 500; height: 46px; }\n .margin-section { margin-top: 1rem; }\n .margin-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }\n .margin-label { font-size: 0.8rem; color: var(--ink-3); }\n .margin-pct { font-family: 'DM Serif Display', serif; font-size: 1.6rem; }\n .margin-pct.good { color: var(--green); }\n .margin-pct.warn { color: var(--amber); }\n .margin-pct.bad { color: var(--red); }\n .bar-track { height: 10px; background: #EDEBE8; border-radius: 10px; overflow: hidden; }\n .bar-fill { height: 100%; border-radius: 10px; transition: width 0.4s cubic-bezier(.4,0,.2,1), background 0.3s; background: var(--green); }\n .bar-fill.warn { background: #D4930A; }\n .bar-fill.bad { background: var(--red); }\n .margin-msg { font-size: 0.78rem; margin-top: 8px; padding: 7px 12px; border-radius: var(--radius-sm); display: none; }\n .margin-msg.warn-msg { background: var(--amber-bg); color: var(--amber); display: block; }\n .margin-msg.bad-msg { background: var(--red-light); color: var(--red-dark); display: block; }\n .metric-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 1.25rem; }\n .metric { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }\n .metric-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); margin-bottom: 6px; }\n .metric-val { font-size: 1.2rem; font-weight: 500; font-family: 'DM Serif Display', serif; }\n .metric-val.pos { color: var(--green); }\n .metric-val.neg { color: var(--red); }\n\n \/* Level table *\/\n .level-table { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 0.5rem; }\n .level-header, .level-row, .level-footer {\n display: grid; grid-template-columns: 44px 1fr 90px 80px 90px;\n align-items: center; gap: 0; padding: 0 12px;\n }\n .level-header { background: var(--surface); padding: 8px 12px; border-bottom: 1px solid var(--border); }\n .level-header span { font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-4); }\n .level-row { padding: 6px 12px; border-bottom: 1px solid var(--border); gap: 8px; }\n .level-row:last-of-type { border-bottom: none; }\n .level-badge { width: 26px; height: 26px; border-radius: 50%; background: var(--red-light); color: var(--red); font-weight: 600; font-size: 0.82rem; display: flex; align-items: center; justify-content: center; }\n .level-desc { font-size: 0.82rem; color: var(--ink-3); }\n .level-rate { font-size: 0.82rem; color: var(--ink-2); font-weight: 500; }\n .level-input { width: 68px; height: 34px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 8px; font-family: 'DM Sans', sans-serif; font-size: 0.88rem; color: var(--ink); text-align: center; outline: none; }\n .level-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(184,48,37,0.1); }\n .level-sub { font-size: 0.82rem; color: var(--ink-3); text-align: right; }\n .level-footer { background: var(--surface); padding: 8px 12px; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--ink-3); }\n\n \/* Cost ratio block *\/\n .cost-pct-block { margin-top: 1.25rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }\n .cost-pct-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; }\n .cost-pct-label { font-size: 0.78rem; color: var(--ink-3); font-weight: 500; }\n .cost-pct-val { font-size: 1.5rem; font-weight: 600; }\n .cost-pct-val.good { color: var(--green); }\n .cost-pct-val.warn { color: #c47a00; }\n .cost-pct-val.bad { color: var(--red); }\n .cost-pct-zones { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 0.75rem; }\n .cpz { padding: 8px 10px; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 500; text-align: center; }\n .cpz.green { background: #e8f5ee; color: var(--green); }\n .cpz.orange { background: #fdf3dc; color: #8a5a00; }\n .cpz.red { background: #fdecea; color: var(--red); }\n .cost-pct-msg { font-size: 0.8rem; margin-top: 0.25rem; }\n .cost-pct-msg.good-msg { color: var(--green); }\n .cost-pct-msg.warn-msg { color: #8a5a00; }\n .cost-pct-msg.bad-msg { color: var(--red); }\n<\/style>\n<\/head>\n<body>\n\n<header>\n <div class=\"header-logo\">Red Rock International<\/div>\n <div class=\"header-divider\"><\/div>\n <div class=\"header-sub\">Event Pricing<\/div>\n<\/header>\n\n<div class=\"page\">\n\n <div class=\"progress-wrap\">\n <div class=\"progress-steps\" id=\"progressSteps\"><\/div>\n <div class=\"progress-labels\" id=\"progressLabels\"><\/div>\n <\/div>\n\n \n <div class=\"step-panel\" id=\"step-0\">\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg><\/div>\n <div class=\"card-title\">Event details<\/div>\n <\/div>\n\n <div class=\"field-grid col-2\" style=\"margin-bottom:1rem\">\n <div class=\"field\"><label>Client \/ event name<\/label><input type=\"text\" id=\"clientName\" placeholder=\"e.g. Acme Corp offsite\" \/><\/div>\n <div class=\"field\"><label>Event date<\/label><input type=\"date\" id=\"eventDate\" \/><\/div>\n <\/div>\n <div class=\"field-grid col-2\" style=\"margin-bottom:1.5rem\">\n <div class=\"field\"><label>Number of days<\/label><input type=\"number\" id=\"numDays\" value=\"1\" min=\"1\" max=\"30\" \/><\/div>\n <\/div>\n\n <hr class=\"card-divider\" \/>\n <div class=\"sub-label\">Freelancer day type<\/div>\n <div class=\"toggle-group\" style=\"margin-bottom:1.25rem\">\n <button class=\"tog active\" id=\"btn-facil-full\" onclick=\"setFacilDayType('full')\">Full day<\/button>\n <button class=\"tog\" id=\"btn-facil-half\" onclick=\"setFacilDayType('half')\">Half day<\/button>\n <\/div>\n <div class=\"sub-label\" style=\"margin-bottom:0.6rem\">Freelancers by level <span style=\"font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-4);font-size:0.72rem\">(rocker bonus always included)<\/span><\/div>\n <div class=\"level-table\">\n <div class=\"level-header\">\n <span>Level<\/span><span>Description<\/span><span id=\"rateColLabel\">Rate<\/span><span># People<\/span><span>Subtotal<\/span>\n <\/div>\n <div class=\"level-row\"><span class=\"level-badge\">A<\/span><span class=\"level-desc\">35\u201350 days<\/span><span class=\"level-rate\" id=\"rate-A\">700 MAD<\/span><input type=\"number\" class=\"level-input\" id=\"count-A\" value=\"0\" min=\"0\" max=\"50\" oninput=\"updateLevels()\" \/><span class=\"level-sub\" id=\"sub-A\">\u2014<\/span><\/div>\n <div class=\"level-row\"><span class=\"level-badge\">B<\/span><span class=\"level-desc\">20\u201334 days<\/span><span class=\"level-rate\" id=\"rate-B\">650 MAD<\/span><input type=\"number\" class=\"level-input\" id=\"count-B\" value=\"0\" min=\"0\" max=\"50\" oninput=\"updateLevels()\" \/><span class=\"level-sub\" id=\"sub-B\">\u2014<\/span><\/div>\n <div class=\"level-row\"><span class=\"level-badge\">C<\/span><span class=\"level-desc\">10\u201319 days<\/span><span class=\"level-rate\" id=\"rate-C\">600 MAD<\/span><input type=\"number\" class=\"level-input\" id=\"count-C\" value=\"0\" min=\"0\" max=\"50\" oninput=\"updateLevels()\" \/><span class=\"level-sub\" id=\"sub-C\">\u2014<\/span><\/div>\n <div class=\"level-row\"><span class=\"level-badge\">D<\/span><span class=\"level-desc\">4\u20139 days<\/span><span class=\"level-rate\" id=\"rate-D\">500 MAD<\/span><input type=\"number\" class=\"level-input\" id=\"count-D\" value=\"0\" min=\"0\" max=\"50\" oninput=\"updateLevels()\" \/><span class=\"level-sub\" id=\"sub-D\">\u2014<\/span><\/div>\n <div class=\"level-row\"><span class=\"level-badge\">E<\/span><span class=\"level-desc\"><3 days<\/span><span class=\"level-rate\" id=\"rate-E\">400 MAD<\/span><input type=\"number\" class=\"level-input\" id=\"count-E\" value=\"0\" min=\"0\" max=\"50\" oninput=\"updateLevels()\" \/><span class=\"level-sub\" id=\"sub-E\">\u2014<\/span><\/div>\n <div class=\"level-footer\"><span>Total: <strong id=\"totalFreelancers\">0<\/strong> freelancers<\/span><span><\/span><span><\/span><span><\/span><span class=\"level-sub\" id=\"sub-total-freelancers\" style=\"color:var(--red);font-weight:600\">\u2014<\/span><\/div>\n <\/div>\n\n <hr class=\"card-divider\" \/>\n <div class=\"sub-label\">Lead trainer<\/div>\n <div class=\"field-grid col-2\" style=\"margin-bottom:0.75rem\">\n <div class=\"field\"><label>Number of lead trainers<\/label><input type=\"number\" id=\"numTrainers\" value=\"1\" min=\"0\" max=\"10\" \/><\/div>\n <\/div>\n <div class=\"field\">\n <label>Day type<\/label>\n <div class=\"toggle-group\">\n <button class=\"tog active\" id=\"btn-trainer-full\" onclick=\"setTrainerDayType('full')\">Full day \u2014 1200 MAD<\/button>\n <button class=\"tog\" id=\"btn-trainer-half\" onclick=\"setTrainerDayType('half')\">Half day \u2014 600 MAD<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"step-panel\" id=\"step-1\">\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z\"\/><circle cx=\"12\" cy=\"9\" r=\"2.5\"\/><\/svg><\/div>\n <div class=\"card-title\">Destination & transport<\/div>\n <\/div>\n\n <div class=\"sub-label\" style=\"margin-bottom:0.75rem\">Vehicle type<\/div>\n <div class=\"vehicle-grid\">\n <div class=\"vehicle-tile selected\" id=\"vehicle-7\" onclick=\"setVehicle(7)\">\n <div class=\"vehicle-name\">7-seater<\/div>\n <div class=\"vehicle-desc\">Standard rate<\/div>\n <\/div>\n <div class=\"vehicle-tile\" id=\"vehicle-17\" onclick=\"setVehicle(17)\">\n <div class=\"vehicle-name\">17-seater<\/div>\n <div class=\"vehicle-desc\">+30% on base rate<\/div>\n <\/div>\n <\/div>\n\n <hr class=\"card-divider\" \/>\n <div class=\"city-section-header\">\n <div class=\"sub-label\" style=\"margin:0\">City \u2014 total transport cost (MAD, return)<\/div>\n <button class=\"edit-rates-btn\" id=\"editRatesBtn\" onclick=\"toggleEditMode()\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"\/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"\/><\/svg>\n Edit rates\n <\/button>\n <\/div>\n <div class=\"city-grid\" id=\"cityGrid\"><\/div>\n <div class=\"field-grid col-2\" style=\"margin-top:0.5rem\">\n <div class=\"field\"><label>Custom city \u2014 base transport cost (MAD)<\/label><input type=\"number\" id=\"customTransport\" placeholder=\"Enter if city not listed\" \/><\/div>\n <div class=\"field\"><label>City name<\/label><input type=\"text\" id=\"cityLabel\" placeholder=\"City name\" \/><\/div>\n <\/div>\n <p class=\"field-note\" style=\"margin-top:8px\">Rates shown are for 7-seater. 17-seater adds 30% automatically.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"step-panel\" id=\"step-2\">\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg><\/div>\n <div class=\"card-title\">Accommodation<\/div>\n <\/div>\n <div class=\"toggle-group\" style=\"margin-bottom:1.25rem\">\n <button class=\"tog\" id=\"btn-nonight\" onclick=\"setOvernights(0)\">No overnight<\/button>\n <button class=\"tog active\" id=\"btn-1night\" onclick=\"setOvernights(1)\">1 night<\/button>\n <button class=\"tog\" id=\"btn-2night\" onclick=\"setOvernights(2)\">2 nights<\/button>\n <button class=\"tog\" id=\"btn-custom-night\" onclick=\"setOvernights(-1)\">Custom<\/button>\n <\/div>\n <div id=\"customNightRow\">\n <div class=\"field-grid col-2\" style=\"margin-bottom:1.25rem\">\n <div class=\"field\"><label>Number of nights<\/label><input type=\"number\" id=\"customNights\" value=\"1\" min=\"0\" \/><\/div>\n <\/div>\n <\/div>\n\n <div class=\"sub-label\">Double rooms<\/div>\n <div class=\"field-grid col-2\" style=\"margin-bottom:1.25rem\">\n <div class=\"field\"><label>Cost per double room \/ night (MAD)<\/label><input type=\"number\" id=\"doubleRate\" value=\"600\" \/><\/div>\n <div class=\"field\"><label>Number of double rooms<\/label><input type=\"number\" id=\"numDouble\" value=\"1\" min=\"0\" \/><\/div>\n <\/div>\n\n <hr class=\"card-divider\" \/>\n <div class=\"sub-label\">Single rooms<\/div>\n <div class=\"field-grid col-2\">\n <div class=\"field\"><label>Cost per single room \/ night (MAD)<\/label><input type=\"number\" id=\"singleRate\" value=\"400\" \/><\/div>\n <div class=\"field\"><label>Number of single rooms<\/label><input type=\"number\" id=\"numSingle\" value=\"1\" min=\"0\" \/><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"step-panel\" id=\"step-3\">\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M18 8h1a4 4 0 0 1 0 8h-1\"\/><path d=\"M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z\"\/><line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"4\"\/><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\"\/><line x1=\"14\" y1=\"1\" x2=\"14\" y2=\"4\"\/><\/svg><\/div>\n <div class=\"card-title\">Meals & per diem<\/div>\n <\/div>\n <div class=\"field-grid col-4\">\n <div class=\"field\"><label>Breakfast (MAD)<\/label><input type=\"number\" id=\"mealBreakfast\" value=\"35\" \/><\/div>\n <div class=\"field\"><label>Lunch (MAD)<\/label><input type=\"number\" id=\"mealLunch\" value=\"80\" \/><\/div>\n <div class=\"field\"><label>Dinner (MAD)<\/label><input type=\"number\" id=\"mealDinner\" value=\"80\" \/><\/div>\n <div class=\"field\"><label>Meal days<\/label><input type=\"number\" id=\"mealDays\" value=\"1\" min=\"0\" \/><\/div>\n <\/div>\n <p class=\"field-note\" style=\"margin-top:10px\">Per person, per day. Set meal days to 0 to exclude.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"step-panel\" id=\"step-4\">\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-icon\"><svg viewBox=\"0 0 24 24\"><line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"\/><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"\/><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"\/><line x1=\"3\" y1=\"6\" x2=\"3.01\" y2=\"6\"\/><line x1=\"3\" y1=\"12\" x2=\"3.01\" y2=\"12\"\/><line x1=\"3\" y1=\"18\" x2=\"3.01\" y2=\"18\"\/><\/svg><\/div>\n <div class=\"card-title\">Cost breakdown<\/div>\n <\/div>\n <div class=\"quote-meta\" id=\"quoteMeta\"><\/div>\n <table class=\"breakdown-table\" id=\"costTable\"><\/table>\n <\/div>\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-icon\"><svg viewBox=\"0 0 24 24\"><polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\"\/><polyline points=\"16 7 22 7 22 13\"\/><\/svg><\/div>\n <div class=\"card-title\">Sell price & margin<\/div>\n <\/div>\n <div class=\"sell-wrapper\">\n <label>Target sell price<\/label>\n <div class=\"sell-input-wrap\"><span>MAD<\/span><input type=\"number\" id=\"sellPrice\" placeholder=\"0\" \/><\/div>\n <\/div>\n <div class=\"margin-section\" id=\"marginSection\" style=\"display:none\">\n <div class=\"margin-header\"><span class=\"margin-label\">Gross margin<\/span><span class=\"margin-pct\" id=\"marginPct\">\u2014<\/span><\/div>\n <div class=\"bar-track\"><div class=\"bar-fill\" id=\"marginBar\" style=\"width:0%\"><\/div><\/div>\n <div class=\"margin-msg\" id=\"marginMsg\"><\/div>\n <\/div>\n <div class=\"metric-row\">\n <div class=\"metric\"><div class=\"metric-label\">Total cost<\/div><div class=\"metric-val\" id=\"sumCost\">0 MAD<\/div><\/div>\n <div class=\"metric\"><div class=\"metric-label\">Sell price<\/div><div class=\"metric-val\" id=\"sumSell\">\u2014<\/div><\/div>\n <div class=\"metric\"><div class=\"metric-label\">Profit<\/div><div class=\"metric-val\" id=\"sumProfit\">\u2014<\/div><\/div>\n <\/div>\n\n \n <div id=\"costPct\" class=\"cost-pct-block\" style=\"display:none\">\n <div class=\"cost-pct-header\">\n <span class=\"cost-pct-label\">Cost ratio <span style=\"font-size:0.72rem;color:var(--ink-4);font-weight:400\">(costs as % of sell price)<\/span><\/span>\n <span id=\"costPctVal\" class=\"cost-pct-val\">\u2014<\/span>\n <\/div>\n <div class=\"cost-pct-zones\">\n <div class=\"cpz green\">Under 24% \u2713<\/div>\n <div class=\"cpz orange\">24\u201330% \u26a0<\/div>\n <div class=\"cpz red\">Over 30% \u2717<\/div>\n <\/div>\n <div id=\"costPctMsg\" class=\"cost-pct-msg\"><\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <div class=\"nav-row\">\n <button class=\"btn btn-ghost\" id=\"btnBack\" onclick=\"navigate(-1)\">\u2190 Back<\/button>\n <button class=\"btn btn-primary\" id=\"btnNext\" onclick=\"navigate(1)\">Next \u2192<\/button>\n <\/div>\n\n<\/div>\n\n<script>\nconst STEPS = ['Event', 'Destination', 'Accommodation', 'Meals', 'Summary'];\nlet currentStep = 0;\n\nconst cities = [\n { name: \"Casablanca\", transport: 0 },\n { name: \"Rabat\", transport: 800 },\n { name: \"Marrakech\", transport: 2000 },\n { name: \"F\u00e8s\", transport: 2200 },\n { name: \"Tanger\", transport: 3000 },\n { name: \"Agadir\", transport: 3500 },\n { name: \"Oujda\", transport: 4000 },\n { name: \"Dakhla\", transport: 7500 },\n];\n\nlet selectedCity = null;\nlet facilDayType = 'full';\nlet trainerDayType = 'full';\nlet vehicleType = 7;\nlet overnightMode = 1;\nlet editMode = false;\n\nfunction buildProgress() {\n const stepsEl = document.getElementById('progressSteps');\n const labelsEl = document.getElementById('progressLabels');\n stepsEl.innerHTML = '';\n labelsEl.innerHTML = '';\n STEPS.forEach((name, i) => {\n if (i > 0) {\n const line = document.createElement('div');\n line.className = 'step-line' + (i <= currentStep ? ' done' : '');\n stepsEl.appendChild(line);\n }\n const dot = document.createElement('div');\n dot.className = 'step-dot' + (i === currentStep ? ' active' : i < currentStep ? ' done' : '');\n dot.textContent = i < currentStep ? '\u2713' : String(i + 1);\n if (i < currentStep) dot.onclick = () => { currentStep = i; render(); };\n stepsEl.appendChild(dot);\n const lbl = document.createElement('div');\n lbl.className = 'step-label' + (i === currentStep ? ' active' : i < currentStep ? ' done' : '');\n lbl.textContent = name;\n labelsEl.appendChild(lbl);\n });\n}\n\nfunction render() {\n document.querySelectorAll('.step-panel').forEach((el, i) => el.classList.toggle('active', i === currentStep));\n document.getElementById('btnBack').style.visibility = currentStep === 0 ? 'hidden' : 'visible';\n const isLast = currentStep === STEPS.length - 1;\n document.getElementById('btnNext').textContent = isLast ? '\u21ba Start over' : 'Next \u2192';\n buildProgress();\n if (isLast) recalc();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n\nfunction navigate(dir) {\n if (dir === 1 && currentStep === STEPS.length - 1) { currentStep = 0; render(); return; }\n currentStep = Math.max(0, Math.min(STEPS.length - 1, currentStep + dir));\n render();\n}\n\n\n \/\/ Freelancer level rates (base + rocker, always included)\n const LEVELS = ['A','B','C','D','E'];\n const RATES = {\n full: { A: 700, B: 650, C: 600, D: 500, E: 400 },\n half: { A: 400, B: 350, C: 300, D: 280, E: 250 }\n };\n\n function setFacilDayType(t) {\n facilDayType = t;\n document.getElementById('btn-facil-full').classList.toggle('active', t === 'full');\n document.getElementById('btn-facil-half').classList.toggle('active', t === 'half');\n updateLevels();\n }\n\n function updateLevels() {\n const rates = RATES[facilDayType];\n const days = parseInt(document.getElementById('numDays').value) || 1;\n let totalCount = 0, totalCost = 0;\n LEVELS.forEach(l => {\n const rate = rates[l];\n const count = parseInt(document.getElementById('count-'+l).value) || 0;\n const sub = count * rate * days;\n document.getElementById('rate-'+l).textContent = rate.toLocaleString() + ' MAD';\n document.getElementById('sub-'+l).textContent = sub > 0 ? sub.toLocaleString() + ' MAD' : '\u2014';\n totalCount += count;\n totalCost += sub;\n });\n document.getElementById('totalFreelancers').textContent = totalCount;\n document.getElementById('sub-total-freelancers').textContent = totalCost > 0 ? totalCost.toLocaleString() + ' MAD' : '\u2014';\n \/\/ Update rate col label\n document.getElementById('rateColLabel').textContent = facilDayType === 'full' ? 'Rate (full day)' : 'Rate (half day)';\n }\n\n function getFacilTotals() {\n const rates = RATES[facilDayType];\n const days = parseInt(document.getElementById('numDays').value) || 1;\n let totalCount = 0, totalCost = 0;\n LEVELS.forEach(l => {\n const count = parseInt(document.getElementById('count-'+l).value) || 0;\n totalCount += count;\n totalCost += count * rates[l] * days;\n });\n return { count: totalCount, cost: totalCost };\n }\n\n\nfunction setTrainerDayType(t) {\n trainerDayType = t;\n document.getElementById('btn-trainer-full').classList.toggle('active', t === 'full');\n document.getElementById('btn-trainer-half').classList.toggle('active', t === 'half');\n}\n\nfunction setVehicle(type) {\n vehicleType = type;\n document.getElementById('vehicle-7').classList.toggle('selected', type === 7);\n document.getElementById('vehicle-17').classList.toggle('selected', type === 17);\n buildCityGrid();\n}\n\nfunction setOvernights(n) {\n overnightMode = n;\n ['nonight','1night','2night','custom-night'].forEach(id => document.getElementById('btn-'+id).classList.remove('active'));\n const map = { 0:'nonight', 1:'1night', 2:'2night', '-1':'custom-night' };\n document.getElementById('btn-'+map[n]).classList.add('active');\n document.getElementById('customNightRow').style.display = n === -1 ? 'block' : 'none';\n}\n\nfunction toggleEditMode() {\n editMode = !editMode;\n const btn = document.getElementById('editRatesBtn');\n btn.classList.toggle('active', editMode);\n btn.innerHTML = editMode\n ? `<svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg> Done`\n : `<svg viewBox=\"0 0 24 24\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"\/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"\/><\/svg> Edit rates`;\n buildCityGrid();\n}\n\nfunction getDisplayCost(baseTransport) {\n if (baseTransport === 0) return null;\n return vehicleType === 17 ? Math.round(baseTransport * 1.3) : baseTransport;\n}\n\nfunction buildCityGrid() {\n const grid = document.getElementById('cityGrid');\n grid.innerHTML = '';\n cities.forEach((c, i) => {\n const el = document.createElement('div');\n el.className = 'city-tile' + (selectedCity === i ? ' selected' : '') + (editMode ? ' edit-mode' : '');\n const displayCost = getDisplayCost(c.transport);\n const costLabel = c.transport === 0 ? 'Base city' : (displayCost.toLocaleString() + ' MAD' + (vehicleType === 17 ? ' (+30%)' : ''));\n\n if (editMode) {\n const isCasa = c.transport === 0 && c.name === 'Casablanca';\n el.innerHTML = `<span class=\"city-name\">${c.name}<\/span><div class=\"city-tile-right\">${isCasa\n ? `<span class=\"city-cost\">Base city<\/span>`\n : `<input class=\"city-edit-input\" type=\"number\" value=\"${c.transport}\" min=\"0\" \/><span class=\"city-edit-label\">MAD<\/span>`}<\/div>`;\n if (!isCasa) {\n const inp = el.querySelector('input');\n inp.addEventListener('click', e => e.stopPropagation());\n inp.addEventListener('input', e => { const val = parseFloat(e.target.value); if (!isNaN(val) && val >= 0) cities[i].transport = val; });\n }\n } else {\n el.innerHTML = `<span class=\"city-name\">${c.name}<\/span><div class=\"city-tile-right\"><span class=\"city-cost\">${costLabel}<\/span><\/div>`;\n el.onclick = () => {\n selectedCity = selectedCity === i ? null : i;\n document.getElementById('customTransport').value = '';\n document.getElementById('cityLabel').value = selectedCity !== null ? cities[selectedCity].name : '';\n buildCityGrid();\n };\n }\n grid.appendChild(el);\n });\n}\n\nfunction v(id) { return document.getElementById(id).value; }\n\nfunction getNights() {\n if (overnightMode === 0) return 0;\n if (overnightMode === 1) return 1;\n if (overnightMode === 2) return 2;\n return parseInt(v('customNights')) || 0;\n}\n\nfunction getTransportTotal() {\n let base = 0;\n const custom = parseFloat(v('customTransport'));\n if (!isNaN(custom) && custom > 0) base = custom;\n else if (selectedCity !== null) base = cities[selectedCity].transport;\n if (base === 0) return 0;\n return vehicleType === 17 ? Math.round(base * 1.3) : base;\n}\n\nfunction fmt(n) { return Math.round(n).toLocaleString('fr-MA') + ' MAD'; }\n\nfunction recalc() {\n const days = parseInt(v('numDays')) || 1;\n\n const { count: facils, cost: facilCost } = getFacilTotals();\n const facilRate = facilDayType === 'full' ? 'full day' : 'half day';\n\n const trainers = parseInt(v('numTrainers')) || 0;\n const trainerRate = trainerDayType === 'full' ? 1200 : 600;\n const trainerCost = trainers * days * trainerRate;\n\n const transportTotal = getTransportTotal();\n\n const nights = getNights();\n const dRate = parseFloat(v('doubleRate')) || 0;\n const nDouble = parseInt(v('numDouble')) || 0;\n const sRate = parseFloat(v('singleRate')) || 0;\n const nSingle = parseInt(v('numSingle')) || 0;\n const accomCost = nights * (nDouble * dRate + nSingle * sRate);\n\n const mDays = parseInt(v('mealDays')) || 0;\n const b = parseFloat(v('mealBreakfast')) || 0;\n const l = parseFloat(v('mealLunch')) || 0;\n const d = parseFloat(v('mealDinner')) || 0;\n const totalPeople = facils + trainers;\n const mealCost = totalPeople * mDays * (b + l + d);\n\n const total = facilCost + trainerCost + transportTotal + accomCost + mealCost;\n\n const clientName = v('clientName') || '\u2014';\n const cityName = selectedCity !== null ? cities[selectedCity].name : (v('cityLabel') || '\u2014');\n const vehicleLabel = vehicleType === 17 ? '17-seater' : '7-seater';\n document.getElementById('quoteMeta').textContent =\n `${clientName} \u00b7 ${cityName} \u00b7 ${vehicleLabel} \u00b7 ${facils} facilitator${facils !== 1 ? 's' : ''} + ${trainers} trainer${trainers !== 1 ? 's' : ''} \u00b7 ${days} day${days > 1 ? 's' : ''}`;\n\n const rows = [\n { cat: 'Facilitator fees', detail: facils > 0 ? `${facils} freelancer${facils>1?'s':''} \u00d7 ${days} day${days>1?'s':''} (${facilRate}, levels A\u2013E)` : 'None', val: facilCost },\n { cat: 'Lead trainer fees', detail: trainers > 0 ? `${trainers} \u00d7 ${days} day${days>1?'s':''} \u00d7 ${trainerRate} MAD (${trainerDayType === 'full' ? 'full' : 'half'} day)` : 'None', val: trainerCost },\n { cat: 'Transport', detail: transportTotal > 0 ? `${vehicleLabel} \u2014 return trip${vehicleType === 17 ? ' (+30%)' : ''}` : 'Base city \u2014 no transport cost', val: transportTotal },\n { cat: 'Accommodation', detail: nights > 0\n ? `${nights} night${nights>1?'s':''} \u2014 ${nDouble} double (${dRate.toLocaleString()} MAD) + ${nSingle} single (${sRate.toLocaleString()} MAD)`\n : 'No overnight stay', val: accomCost },\n { cat: 'Meals & per diem', detail: mDays > 0 ? `${totalPeople} people \u00d7 ${mDays} day${mDays>1?'s':''} (B${b}+L${l}+D${d})` : 'Not included', val: mealCost },\n ];\n\n let html = '';\n rows.forEach(r => { html += `<tr><td class=\"cat\">${r.cat}<\/td><td class=\"detail\">${r.detail}<\/td><td class=\"amount\">${r.val > 0 ? fmt(r.val) : '\u2014'}<\/td><\/tr>`; });\n html += `<tr class=\"total-row\"><td class=\"cat\" colspan=\"2\">Total estimated cost<\/td><td class=\"amount\">${fmt(total)}<\/td><\/tr>`;\n document.getElementById('costTable').innerHTML = html;\n document.getElementById('sumCost').textContent = fmt(total);\n\n const sell = parseFloat(v('sellPrice'));\n if (!isNaN(sell) && sell > 0) {\n const profit = sell - total, margin = (profit \/ sell) * 100;\n document.getElementById('sumSell').textContent = fmt(sell);\n document.getElementById('sumProfit').textContent = (profit >= 0 ? '+' : '') + fmt(profit);\n document.getElementById('sumProfit').className = 'metric-val ' + (profit >= 0 ? 'pos' : 'neg');\n document.getElementById('marginSection').style.display = 'block';\n const pctEl = document.getElementById('marginPct');\n pctEl.textContent = (Math.round(margin * 10) \/ 10) + '%';\n pctEl.className = 'margin-pct ' + (margin >= 30 ? 'good' : margin >= 15 ? 'warn' : 'bad');\n const bar = document.getElementById('marginBar');\n bar.style.width = Math.min(100, Math.max(0, margin)) + '%';\n bar.className = 'bar-fill' + (margin < 15 ? ' bad' : margin < 30 ? ' warn' : '');\n const msg = document.getElementById('marginMsg');\n msg.className = 'margin-msg';\n if (margin < 0) { msg.classList.add('bad-msg'); msg.textContent = 'Sell price is below cost \u2014 operating at a loss.'; }\n else if (margin < 15) { msg.classList.add('warn-msg'); msg.textContent = 'Margin is tight \u2014 consider raising the sell price.'; }\n\n \/\/ Cost % indicator\n const costPct = (total \/ sell) * 100;\n const costPctEl = document.getElementById('costPct');\n const costPctVal = document.getElementById('costPctVal');\n const costPctMsg = document.getElementById('costPctMsg');\n costPctEl.style.display = 'flex';\n costPctVal.textContent = (Math.round(costPct * 10) \/ 10) + '%';\n if (costPct < 24) {\n costPctVal.className = 'cost-pct-val good';\n costPctMsg.textContent = 'Costs are well controlled.';\n costPctMsg.className = 'cost-pct-msg good-msg';\n } else if (costPct <= 30) {\n costPctVal.className = 'cost-pct-val warn';\n costPctMsg.textContent = 'Costs are eating into margin \u2014 watch closely.';\n costPctMsg.className = 'cost-pct-msg warn-msg';\n } else {\n costPctVal.className = 'cost-pct-val bad';\n costPctMsg.textContent = 'Cost ratio is high \u2014 consider reducing costs or raising price.';\n costPctMsg.className = 'cost-pct-msg bad-msg';\n }\n } else {\n document.getElementById('sumSell').textContent = '\u2014';\n document.getElementById('sumProfit').textContent = '\u2014';\n document.getElementById('sumProfit').className = 'metric-val';\n document.getElementById('marginSection').style.display = 'none';\n document.getElementById('costPct').style.display = 'none';\n }\n}\n\nbuildCityGrid();\nrender();\nupdateLevels();\ndocument.getElementById('sellPrice').addEventListener('input', recalc);\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Red Rock International \u2014 Event Pricing Red Rock International Event Pricing Event details Client \/ event name Event date Number of days Freelancer day type Full day Half day Freelancers by level (rocker bonus always included) LevelDescriptionRate# PeopleSubtotal A35\u201350 days700 MAD\u2014 B20\u201334 days650 MAD\u2014 C10\u201319 days600 MAD\u2014 D4\u20139 days500 MAD\u2014 E<3 days400 MAD\u2014 Total: 0 […]<\/p>\n","protected":false},"author":27,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","om_disable_all_campaigns":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-57013","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/redrockinternational.com\/eg\/wp-json\/wp\/v2\/pages\/57013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/redrockinternational.com\/eg\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/redrockinternational.com\/eg\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/redrockinternational.com\/eg\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/redrockinternational.com\/eg\/wp-json\/wp\/v2\/comments?post=57013"}],"version-history":[{"count":0,"href":"https:\/\/redrockinternational.com\/eg\/wp-json\/wp\/v2\/pages\/57013\/revisions"}],"wp:attachment":[{"href":"https:\/\/redrockinternational.com\/eg\/wp-json\/wp\/v2\/media?parent=57013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nRed Rock International \u2014 Event Pricing<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@300;400;500&family=DM+Serif+Display&display=swap\" rel=\"stylesheet\" \/>\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n :root {\n --red: #B83025; --red-dark: #8C2219; --red-light: #F7EAE8; --red-mid: #D94030;\n --ink: #1A1A1A; --ink-2: #444; --ink-3: #777; --ink-4: #AAA;\n --border: #E2DDD9; --surface: #FAFAF8; --white: #FFFFFF;\n --green: #1A6B4A; --amber: #8A5A00; --amber-bg: #FDF3DC;\n --radius: 10px; --radius-sm: 6px;\n --shadow: 0 1px 3px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);\n }\n html { font-size: 15px; }\n body { font-family: 'DM Sans', sans-serif; background: var(--surface); color: var(--ink); min-height: 100vh; }\n\n header { background: var(--white); border-bottom: 1px solid var(--border); padding: 0 2.5rem; display: flex; align-items: center; gap: 1.5rem; height: 60px; position: sticky; top: 0; z-index: 10; }\n .header-logo { font-family: 'DM Serif Display', serif; font-size: 1.15rem; color: var(--red); }\n .header-divider { width: 1px; height: 22px; background: var(--border); }\n .header-sub { font-size: 0.8rem; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }\n\n .page { max-width: 640px; margin: 0 auto; padding: 2.5rem 2rem 4rem; }\n\n \/* Progress *\/\n .progress-wrap { margin-bottom: 2rem; }\n .progress-steps { display: flex; align-items: center; margin-bottom: 0.75rem; }\n .step-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); background: var(--white); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 500; color: var(--ink-4); flex-shrink: 0; transition: all 0.25s; position: relative; z-index: 1; }\n .step-dot.active { border-color: var(--red); background: var(--red); color: #fff; }\n .step-dot.done { border-color: var(--red); background: var(--red-light); color: var(--red); cursor: pointer; }\n .step-line { flex: 1; height: 2px; background: var(--border); transition: background 0.25s; }\n .step-line.done { background: var(--red-light); }\n .progress-labels { display: flex; justify-content: space-between; }\n .step-label { font-size: 0.7rem; color: var(--ink-4); text-align: center; flex: 1; transition: color 0.2s; white-space: nowrap; }\n .step-label:first-child { text-align: left; }\n .step-label:last-child { text-align: right; }\n .step-label.active { color: var(--red); font-weight: 500; }\n .step-label.done { color: var(--ink-3); }\n\n \/* Panels *\/\n .step-panel { display: none; }\n .step-panel.active { display: block; animation: fadeUp 0.3s ease both; }\n @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }\n\n \/* Card *\/\n .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); margin-bottom: 1.25rem; }\n .card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 1.25rem; }\n .card-icon { width: 30px; height: 30px; background: var(--red-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n .card-icon svg { width: 15px; height: 15px; stroke: var(--red); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }\n .card-title { font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-3); }\n\n \/* Divider inside card *\/\n .card-divider { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; }\n\n \/* Sub-section label *\/\n .sub-label { font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); margin-bottom: 0.75rem; }\n\n \/* Fields *\/\n .field-grid { display: grid; gap: 1rem; }\n .col-2 { grid-template-columns: 1fr 1fr; }\n .col-3 { grid-template-columns: 1fr 1fr 1fr; }\n .col-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }\n @media (max-width: 500px) { .col-2, .col-3, .col-4 { grid-template-columns: 1fr 1fr; } }\n .field { display: flex; flex-direction: column; gap: 6px; }\n label { font-size: 0.78rem; color: var(--ink-3); }\n input[type=\"text\"], input[type=\"number\"], input[type=\"date\"] {\n height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm);\n padding: 0 12px; font-family: 'DM Sans', sans-serif; font-size: 0.92rem;\n color: var(--ink); background: var(--white); outline: none; width: 100%;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(184,48,37,0.1); }\n input::placeholder { color: var(--ink-4); }\n\n \/* Toggles *\/\n .toggle-group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }\n .tog { height: 36px; padding: 0 16px; border: 1px solid var(--border); border-radius: 100px; background: var(--white); font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: var(--ink-3); cursor: pointer; transition: all 0.15s; }\n .tog:hover { border-color: var(--red); color: var(--red); }\n .tog.active { background: var(--red); border-color: var(--red); color: #fff; font-weight: 500; }\n\n \/* Vehicle selector *\/\n .vehicle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1rem; }\n .vehicle-tile { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; cursor: pointer; transition: all 0.15s; background: var(--white); }\n .vehicle-tile:hover { border-color: var(--red-mid); background: var(--red-light); }\n .vehicle-tile.selected { border-color: var(--red); background: var(--red-light); }\n .vehicle-name { font-size: 1rem; font-weight: 500; color: var(--ink); margin-bottom: 3px; }\n .vehicle-tile.selected .vehicle-name { color: var(--red-dark); }\n .vehicle-desc { font-size: 0.78rem; color: var(--ink-3); }\n .vehicle-tile.selected .vehicle-desc { color: var(--red); }\n\n \/* City *\/\n .city-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }\n .city-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 1rem; }\n @media (max-width: 440px) { .city-grid { grid-template-columns: 1fr; } }\n .city-tile { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; background: var(--white); }\n .city-tile:hover { border-color: var(--red-mid); background: var(--red-light); }\n .city-tile.selected { border-color: var(--red); background: var(--red-light); }\n .city-tile.edit-mode { cursor: default; }\n .city-tile.edit-mode:hover { border-color: var(--border); background: var(--white); }\n .city-name { font-size: 0.88rem; font-weight: 500; color: var(--ink); }\n .city-tile.selected .city-name { color: var(--red-dark); }\n .city-cost { font-size: 0.78rem; color: var(--ink-3); background: #F2EDE9; padding: 2px 8px; border-radius: 100px; white-space: nowrap; }\n .city-tile.selected .city-cost { background: #ECC9C4; color: var(--red-dark); }\n .city-tile-right { display: flex; align-items: center; gap: 4px; }\n .city-edit-input { width: 90px; height: 28px !important; font-size: 0.8rem !important; padding: 0 8px !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; text-align: right; }\n .city-edit-label { font-size: 0.72rem; color: var(--ink-4); }\n .edit-rates-btn { height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: 100px; background: var(--white); font-family: 'DM Sans', sans-serif; font-size: 0.78rem; color: var(--ink-3); cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all 0.15s; }\n .edit-rates-btn:hover { border-color: var(--red); color: var(--red); }\n .edit-rates-btn.active { background: var(--red-light); border-color: var(--red); color: var(--red-dark); }\n .edit-rates-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n .field-note { font-size: 0.75rem; color: var(--ink-4); margin-top: 4px; }\n #customNightRow { display: none; margin-top: 10px; }\n\n \/* Nav *\/\n .nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; }\n .btn { height: 42px; padding: 0 28px; border-radius: 100px; font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.15s; border: none; }\n .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--ink-3); }\n .btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); }\n .btn-primary { background: var(--red); color: #fff; }\n .btn-primary:hover { background: var(--red-dark); }\n\n \/* Summary *\/\n .breakdown-table { width: 100%; border-collapse: collapse; }\n .breakdown-table tr { border-bottom: 1px solid var(--border); }\n .breakdown-table tr:last-child { border-bottom: none; }\n .breakdown-table td { padding: 11px 4px; font-size: 0.88rem; vertical-align: middle; }\n .breakdown-table td.cat { font-weight: 500; width: 30%; }\n .breakdown-table td.detail { color: var(--ink-3); font-size: 0.8rem; }\n .breakdown-table td.amount { text-align: right; font-weight: 500; white-space: nowrap; }\n .breakdown-table tr.total-row td { padding-top: 14px; font-weight: 500; font-size: 1rem; border-top: 2px solid var(--ink); }\n .breakdown-table tr.total-row td.amount { font-size: 1.15rem; color: var(--red-dark); }\n .quote-meta { font-size: 0.82rem; color: var(--ink-3); margin-bottom: 1rem; }\n .sell-wrapper { display: flex; align-items: center; gap: 12px; margin-bottom: 1.25rem; }\n .sell-wrapper label { font-size: 0.88rem; color: var(--ink-2); white-space: nowrap; flex-shrink: 0; }\n .sell-input-wrap { position: relative; flex: 1; max-width: 220px; }\n .sell-input-wrap span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 0.9rem; color: var(--ink-3); pointer-events: none; }\n .sell-input-wrap input { padding-left: 52px; font-size: 1.1rem; font-weight: 500; height: 46px; }\n .margin-section { margin-top: 1rem; }\n .margin-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }\n .margin-label { font-size: 0.8rem; color: var(--ink-3); }\n .margin-pct { font-family: 'DM Serif Display', serif; font-size: 1.6rem; }\n .margin-pct.good { color: var(--green); }\n .margin-pct.warn { color: var(--amber); }\n .margin-pct.bad { color: var(--red); }\n .bar-track { height: 10px; background: #EDEBE8; border-radius: 10px; overflow: hidden; }\n .bar-fill { height: 100%; border-radius: 10px; transition: width 0.4s cubic-bezier(.4,0,.2,1), background 0.3s; background: var(--green); }\n .bar-fill.warn { background: #D4930A; }\n .bar-fill.bad { background: var(--red); }\n .margin-msg { font-size: 0.78rem; margin-top: 8px; padding: 7px 12px; border-radius: var(--radius-sm); display: none; }\n .margin-msg.warn-msg { background: var(--amber-bg); color: var(--amber); display: block; }\n .margin-msg.bad-msg { background: var(--red-light); color: var(--red-dark); display: block; }\n .metric-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 1.25rem; }\n .metric { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }\n .metric-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); margin-bottom: 6px; }\n .metric-val { font-size: 1.2rem; font-weight: 500; font-family: 'DM Serif Display', serif; }\n .metric-val.pos { color: var(--green); }\n .metric-val.neg { color: var(--red); }\n\n \/* Level table *\/\n .level-table { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 0.5rem; }\n .level-header, .level-row, .level-footer {\n display: grid; grid-template-columns: 44px 1fr 90px 80px 90px;\n align-items: center; gap: 0; padding: 0 12px;\n }\n .level-header { background: var(--surface); padding: 8px 12px; border-bottom: 1px solid var(--border); }\n .level-header span { font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-4); }\n .level-row { padding: 6px 12px; border-bottom: 1px solid var(--border); gap: 8px; }\n .level-row:last-of-type { border-bottom: none; }\n .level-badge { width: 26px; height: 26px; border-radius: 50%; background: var(--red-light); color: var(--red); font-weight: 600; font-size: 0.82rem; display: flex; align-items: center; justify-content: center; }\n .level-desc { font-size: 0.82rem; color: var(--ink-3); }\n .level-rate { font-size: 0.82rem; color: var(--ink-2); font-weight: 500; }\n .level-input { width: 68px; height: 34px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 8px; font-family: 'DM Sans', sans-serif; font-size: 0.88rem; color: var(--ink); text-align: center; outline: none; }\n .level-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(184,48,37,0.1); }\n .level-sub { font-size: 0.82rem; color: var(--ink-3); text-align: right; }\n .level-footer { background: var(--surface); padding: 8px 12px; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--ink-3); }\n\n \/* Cost ratio block *\/\n .cost-pct-block { margin-top: 1.25rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }\n .cost-pct-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; }\n .cost-pct-label { font-size: 0.78rem; color: var(--ink-3); font-weight: 500; }\n .cost-pct-val { font-size: 1.5rem; font-weight: 600; }\n .cost-pct-val.good { color: var(--green); }\n .cost-pct-val.warn { color: #c47a00; }\n .cost-pct-val.bad { color: var(--red); }\n .cost-pct-zones { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 0.75rem; }\n .cpz { padding: 8px 10px; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 500; text-align: center; }\n .cpz.green { background: #e8f5ee; color: var(--green); }\n .cpz.orange { background: #fdf3dc; color: #8a5a00; }\n .cpz.red { background: #fdecea; color: var(--red); }\n .cost-pct-msg { font-size: 0.8rem; margin-top: 0.25rem; }\n .cost-pct-msg.good-msg { color: var(--green); }\n .cost-pct-msg.warn-msg { color: #8a5a00; }\n .cost-pct-msg.bad-msg { color: var(--red); }\n<\/style>\n<\/head>\n<body>\n\n<header>\n <div class=\"header-logo\">Red Rock International<\/div>\n <div class=\"header-divider\"><\/div>\n <div class=\"header-sub\">Event Pricing<\/div>\n<\/header>\n\n<div class=\"page\">\n\n <div class=\"progress-wrap\">\n <div class=\"progress-steps\" id=\"progressSteps\"><\/div>\n <div class=\"progress-labels\" id=\"progressLabels\"><\/div>\n <\/div>\n\n \n <div class=\"step-panel\" id=\"step-0\">\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-icon\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg><\/div>\n <div class=\"card-title\">Event details<\/div>\n <\/div>\n\n <div class=\"field-grid col-2\" style=\"margin-bottom:1rem\">\n <div class=\"field\"><label>Client \/ event name<\/label><input type=\"text\" id=\"clientName\" placeholder=\"e.g. Acme Corp offsite\" \/><\/div>\n <div class=\"field\"><label>Event date<\/label><input type=\"date\" id=\"eventDate\" \/><\/div>\n <\/div>\n <div class=\"field-grid col-2\" style=\"margin-bottom:1.5rem\">\n <div class=\"field\"><label>Number of days<\/label><input type=\"number\" id=\"numDays\" value=\"1\" min=\"1\" max=\"30\" \/><\/div>\n <\/div>\n\n <hr class=\"card-divider\" \/>\n <div class=\"sub-label\">Freelancer day type<\/div>\n <div class=\"toggle-group\" style=\"margin-bottom:1.25rem\">\n <button class=\"tog active\" id=\"btn-facil-full\" onclick=\"setFacilDayType('full')\">Full day<\/button>\n <button class=\"tog\" id=\"btn-facil-half\" onclick=\"setFacilDayType('half')\">Half day<\/button>\n <\/div>\n <div class=\"sub-label\" style=\"margin-bottom:0.6rem\">Freelancers by level <span style=\"font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-4);font-size:0.72rem\">(rocker bonus always included)<\/span><\/div>\n <div class=\"level-table\">\n <div class=\"level-header\">\n <span>Level<\/span><span>Description<\/span><span id=\"rateColLabel\">Rate<\/span><span># People<\/span><span>Subtotal<\/span>\n <\/div>\n <div class=\"level-row\"><span class=\"level-badge\">A<\/span><span class=\"level-desc\">35\u201350 days<\/span><span class=\"level-rate\" id=\"rate-A\">700 MAD<\/span><input type=\"number\" class=\"level-input\" id=\"count-A\" value=\"0\" min=\"0\" max=\"50\" oninput=\"updateLevels()\" \/><span class=\"level-sub\" id=\"sub-A\">\u2014<\/span><\/div>\n <div class=\"level-row\"><span class=\"level-badge\">B<\/span><span class=\"level-desc\">20\u201334 days<\/span><span class=\"level-rate\" id=\"rate-B\">650 MAD<\/span><input type=\"number\" class=\"level-input\" id=\"count-B\" value=\"0\" min=\"0\" max=\"50\" oninput=\"updateLevels()\" \/><span class=\"level-sub\" id=\"sub-B\">\u2014<\/span><\/div>\n <div class=\"level-row\"><span class=\"level-badge\">C<\/span><span class=\"level-desc\">10\u201319 days<\/span><span class=\"level-rate\" id=\"rate-C\">600 MAD<\/span><input type=\"number\" class=\"level-input\" id=\"count-C\" value=\"0\" min=\"0\" max=\"50\" oninput=\"updateLevels()\" \/><span class=\"level-sub\" id=\"sub-C\">\u2014<\/span><\/div>\n <div class=\"level-row\"><span class=\"level-badge\">D<\/span><span class=\"level-desc\">4\u20139 days<\/span><span class=\"level-rate\" id=\"rate-D\">500 MAD<\/span><input type=\"number\" class=\"level-input\" id=\"count-D\" value=\"0\" min=\"0\" max=\"50\" oninput=\"updateLevels()\" \/><span class=\"level-sub\" id=\"sub-D\">\u2014<\/span><\/div>\n <div class=\"level-row\"><span class=\"level-badge\">E<\/span><span class=\"level-desc\"><3 days<\/span><span class=\"level-rate\" id=\"rate-E\">400 MAD<\/span><input type=\"number\" class=\"level-input\" id=\"count-E\" value=\"0\" min=\"0\" max=\"50\" oninput=\"updateLevels()\" \/><span class=\"level-sub\" id=\"sub-E\">\u2014<\/span><\/div>\n <div class=\"level-footer\"><span>Total: <strong id=\"totalFreelancers\">0<\/strong> freelancers<\/span><span><\/span><span><\/span><span><\/span><span class=\"level-sub\" id=\"sub-total-freelancers\" style=\"color:var(--red);font-weight:600\">\u2014<\/span><\/div>\n <\/div>\n\n <hr class=\"card-divider\" \/>\n <div class=\"sub-label\">Lead trainer<\/div>\n <div class=\"field-grid col-2\" style=\"margin-bottom:0.75rem\">\n <div class=\"field\"><label>Number of lead trainers<\/label><input type=\"number\" id=\"numTrainers\" value=\"1\" min=\"0\" max=\"10\" \/><\/div>\n <\/div>\n <div class=\"field\">\n <label>Day type<\/label>\n <div class=\"toggle-group\">\n <button class=\"tog active\" id=\"btn-trainer-full\" onclick=\"setTrainerDayType('full')\">Full day \u2014 1200 MAD<\/button>\n <button class=\"tog\" id=\"btn-trainer-half\" onclick=\"setTrainerDayType('half')\">Half day \u2014 600 MAD<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"step-panel\" id=\"step-1\">\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z\"\/><circle cx=\"12\" cy=\"9\" r=\"2.5\"\/><\/svg><\/div>\n <div class=\"card-title\">Destination & transport<\/div>\n <\/div>\n\n <div class=\"sub-label\" style=\"margin-bottom:0.75rem\">Vehicle type<\/div>\n <div class=\"vehicle-grid\">\n <div class=\"vehicle-tile selected\" id=\"vehicle-7\" onclick=\"setVehicle(7)\">\n <div class=\"vehicle-name\">7-seater<\/div>\n <div class=\"vehicle-desc\">Standard rate<\/div>\n <\/div>\n <div class=\"vehicle-tile\" id=\"vehicle-17\" onclick=\"setVehicle(17)\">\n <div class=\"vehicle-name\">17-seater<\/div>\n <div class=\"vehicle-desc\">+30% on base rate<\/div>\n <\/div>\n <\/div>\n\n <hr class=\"card-divider\" \/>\n <div class=\"city-section-header\">\n <div class=\"sub-label\" style=\"margin:0\">City \u2014 total transport cost (MAD, return)<\/div>\n <button class=\"edit-rates-btn\" id=\"editRatesBtn\" onclick=\"toggleEditMode()\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"\/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"\/><\/svg>\n Edit rates\n <\/button>\n <\/div>\n <div class=\"city-grid\" id=\"cityGrid\"><\/div>\n <div class=\"field-grid col-2\" style=\"margin-top:0.5rem\">\n <div class=\"field\"><label>Custom city \u2014 base transport cost (MAD)<\/label><input type=\"number\" id=\"customTransport\" placeholder=\"Enter if city not listed\" \/><\/div>\n <div class=\"field\"><label>City name<\/label><input type=\"text\" id=\"cityLabel\" placeholder=\"City name\" \/><\/div>\n <\/div>\n <p class=\"field-note\" style=\"margin-top:8px\">Rates shown are for 7-seater. 17-seater adds 30% automatically.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"step-panel\" id=\"step-2\">\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg><\/div>\n <div class=\"card-title\">Accommodation<\/div>\n <\/div>\n <div class=\"toggle-group\" style=\"margin-bottom:1.25rem\">\n <button class=\"tog\" id=\"btn-nonight\" onclick=\"setOvernights(0)\">No overnight<\/button>\n <button class=\"tog active\" id=\"btn-1night\" onclick=\"setOvernights(1)\">1 night<\/button>\n <button class=\"tog\" id=\"btn-2night\" onclick=\"setOvernights(2)\">2 nights<\/button>\n <button class=\"tog\" id=\"btn-custom-night\" onclick=\"setOvernights(-1)\">Custom<\/button>\n <\/div>\n <div id=\"customNightRow\">\n <div class=\"field-grid col-2\" style=\"margin-bottom:1.25rem\">\n <div class=\"field\"><label>Number of nights<\/label><input type=\"number\" id=\"customNights\" value=\"1\" min=\"0\" \/><\/div>\n <\/div>\n <\/div>\n\n <div class=\"sub-label\">Double rooms<\/div>\n <div class=\"field-grid col-2\" style=\"margin-bottom:1.25rem\">\n <div class=\"field\"><label>Cost per double room \/ night (MAD)<\/label><input type=\"number\" id=\"doubleRate\" value=\"600\" \/><\/div>\n <div class=\"field\"><label>Number of double rooms<\/label><input type=\"number\" id=\"numDouble\" value=\"1\" min=\"0\" \/><\/div>\n <\/div>\n\n <hr class=\"card-divider\" \/>\n <div class=\"sub-label\">Single rooms<\/div>\n <div class=\"field-grid col-2\">\n <div class=\"field\"><label>Cost per single room \/ night (MAD)<\/label><input type=\"number\" id=\"singleRate\" value=\"400\" \/><\/div>\n <div class=\"field\"><label>Number of single rooms<\/label><input type=\"number\" id=\"numSingle\" value=\"1\" min=\"0\" \/><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"step-panel\" id=\"step-3\">\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M18 8h1a4 4 0 0 1 0 8h-1\"\/><path d=\"M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z\"\/><line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"4\"\/><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\"\/><line x1=\"14\" y1=\"1\" x2=\"14\" y2=\"4\"\/><\/svg><\/div>\n <div class=\"card-title\">Meals & per diem<\/div>\n <\/div>\n <div class=\"field-grid col-4\">\n <div class=\"field\"><label>Breakfast (MAD)<\/label><input type=\"number\" id=\"mealBreakfast\" value=\"35\" \/><\/div>\n <div class=\"field\"><label>Lunch (MAD)<\/label><input type=\"number\" id=\"mealLunch\" value=\"80\" \/><\/div>\n <div class=\"field\"><label>Dinner (MAD)<\/label><input type=\"number\" id=\"mealDinner\" value=\"80\" \/><\/div>\n <div class=\"field\"><label>Meal days<\/label><input type=\"number\" id=\"mealDays\" value=\"1\" min=\"0\" \/><\/div>\n <\/div>\n <p class=\"field-note\" style=\"margin-top:10px\">Per person, per day. Set meal days to 0 to exclude.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"step-panel\" id=\"step-4\">\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-icon\"><svg viewBox=\"0 0 24 24\"><line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"\/><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"\/><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"\/><line x1=\"3\" y1=\"6\" x2=\"3.01\" y2=\"6\"\/><line x1=\"3\" y1=\"12\" x2=\"3.01\" y2=\"12\"\/><line x1=\"3\" y1=\"18\" x2=\"3.01\" y2=\"18\"\/><\/svg><\/div>\n <div class=\"card-title\">Cost breakdown<\/div>\n <\/div>\n <div class=\"quote-meta\" id=\"quoteMeta\"><\/div>\n <table class=\"breakdown-table\" id=\"costTable\"><\/table>\n <\/div>\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"card-icon\"><svg viewBox=\"0 0 24 24\"><polyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\"\/><polyline points=\"16 7 22 7 22 13\"\/><\/svg><\/div>\n <div class=\"card-title\">Sell price & margin<\/div>\n <\/div>\n <div class=\"sell-wrapper\">\n <label>Target sell price<\/label>\n <div class=\"sell-input-wrap\"><span>MAD<\/span><input type=\"number\" id=\"sellPrice\" placeholder=\"0\" \/><\/div>\n <\/div>\n <div class=\"margin-section\" id=\"marginSection\" style=\"display:none\">\n <div class=\"margin-header\"><span class=\"margin-label\">Gross margin<\/span><span class=\"margin-pct\" id=\"marginPct\">\u2014<\/span><\/div>\n <div class=\"bar-track\"><div class=\"bar-fill\" id=\"marginBar\" style=\"width:0%\"><\/div><\/div>\n <div class=\"margin-msg\" id=\"marginMsg\"><\/div>\n <\/div>\n <div class=\"metric-row\">\n <div class=\"metric\"><div class=\"metric-label\">Total cost<\/div><div class=\"metric-val\" id=\"sumCost\">0 MAD<\/div><\/div>\n <div class=\"metric\"><div class=\"metric-label\">Sell price<\/div><div class=\"metric-val\" id=\"sumSell\">\u2014<\/div><\/div>\n <div class=\"metric\"><div class=\"metric-label\">Profit<\/div><div class=\"metric-val\" id=\"sumProfit\">\u2014<\/div><\/div>\n <\/div>\n\n \n <div id=\"costPct\" class=\"cost-pct-block\" style=\"display:none\">\n <div class=\"cost-pct-header\">\n <span class=\"cost-pct-label\">Cost ratio <span style=\"font-size:0.72rem;color:var(--ink-4);font-weight:400\">(costs as % of sell price)<\/span><\/span>\n <span id=\"costPctVal\" class=\"cost-pct-val\">\u2014<\/span>\n <\/div>\n <div class=\"cost-pct-zones\">\n <div class=\"cpz green\">Under 24% \u2713<\/div>\n <div class=\"cpz orange\">24\u201330% \u26a0<\/div>\n <div class=\"cpz red\">Over 30% \u2717<\/div>\n <\/div>\n <div id=\"costPctMsg\" class=\"cost-pct-msg\"><\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <div class=\"nav-row\">\n <button class=\"btn btn-ghost\" id=\"btnBack\" onclick=\"navigate(-1)\">\u2190 Back<\/button>\n <button class=\"btn btn-primary\" id=\"btnNext\" onclick=\"navigate(1)\">Next \u2192<\/button>\n <\/div>\n\n<\/div>\n\n<script>\nconst STEPS = ['Event', 'Destination', 'Accommodation', 'Meals', 'Summary'];\nlet currentStep = 0;\n\nconst cities = [\n { name: \"Casablanca\", transport: 0 },\n { name: \"Rabat\", transport: 800 },\n { name: \"Marrakech\", transport: 2000 },\n { name: \"F\u00e8s\", transport: 2200 },\n { name: \"Tanger\", transport: 3000 },\n { name: \"Agadir\", transport: 3500 },\n { name: \"Oujda\", transport: 4000 },\n { name: \"Dakhla\", transport: 7500 },\n];\n\nlet selectedCity = null;\nlet facilDayType = 'full';\nlet trainerDayType = 'full';\nlet vehicleType = 7;\nlet overnightMode = 1;\nlet editMode = false;\n\nfunction buildProgress() {\n const stepsEl = document.getElementById('progressSteps');\n const labelsEl = document.getElementById('progressLabels');\n stepsEl.innerHTML = '';\n labelsEl.innerHTML = '';\n STEPS.forEach((name, i) => {\n if (i > 0) {\n const line = document.createElement('div');\n line.className = 'step-line' + (i <= currentStep ? ' done' : '');\n stepsEl.appendChild(line);\n }\n const dot = document.createElement('div');\n dot.className = 'step-dot' + (i === currentStep ? ' active' : i < currentStep ? ' done' : '');\n dot.textContent = i < currentStep ? '\u2713' : String(i + 1);\n if (i < currentStep) dot.onclick = () => { currentStep = i; render(); };\n stepsEl.appendChild(dot);\n const lbl = document.createElement('div');\n lbl.className = 'step-label' + (i === currentStep ? ' active' : i < currentStep ? ' done' : '');\n lbl.textContent = name;\n labelsEl.appendChild(lbl);\n });\n}\n\nfunction render() {\n document.querySelectorAll('.step-panel').forEach((el, i) => el.classList.toggle('active', i === currentStep));\n document.getElementById('btnBack').style.visibility = currentStep === 0 ? 'hidden' : 'visible';\n const isLast = currentStep === STEPS.length - 1;\n document.getElementById('btnNext').textContent = isLast ? '\u21ba Start over' : 'Next \u2192';\n buildProgress();\n if (isLast) recalc();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n\nfunction navigate(dir) {\n if (dir === 1 && currentStep === STEPS.length - 1) { currentStep = 0; render(); return; }\n currentStep = Math.max(0, Math.min(STEPS.length - 1, currentStep + dir));\n render();\n}\n\n\n \/\/ Freelancer level rates (base + rocker, always included)\n const LEVELS = ['A','B','C','D','E'];\n const RATES = {\n full: { A: 700, B: 650, C: 600, D: 500, E: 400 },\n half: { A: 400, B: 350, C: 300, D: 280, E: 250 }\n };\n\n function setFacilDayType(t) {\n facilDayType = t;\n document.getElementById('btn-facil-full').classList.toggle('active', t === 'full');\n document.getElementById('btn-facil-half').classList.toggle('active', t === 'half');\n updateLevels();\n }\n\n function updateLevels() {\n const rates = RATES[facilDayType];\n const days = parseInt(document.getElementById('numDays').value) || 1;\n let totalCount = 0, totalCost = 0;\n LEVELS.forEach(l => {\n const rate = rates[l];\n const count = parseInt(document.getElementById('count-'+l).value) || 0;\n const sub = count * rate * days;\n document.getElementById('rate-'+l).textContent = rate.toLocaleString() + ' MAD';\n document.getElementById('sub-'+l).textContent = sub > 0 ? sub.toLocaleString() + ' MAD' : '\u2014';\n totalCount += count;\n totalCost += sub;\n });\n document.getElementById('totalFreelancers').textContent = totalCount;\n document.getElementById('sub-total-freelancers').textContent = totalCost > 0 ? totalCost.toLocaleString() + ' MAD' : '\u2014';\n \/\/ Update rate col label\n document.getElementById('rateColLabel').textContent = facilDayType === 'full' ? 'Rate (full day)' : 'Rate (half day)';\n }\n\n function getFacilTotals() {\n const rates = RATES[facilDayType];\n const days = parseInt(document.getElementById('numDays').value) || 1;\n let totalCount = 0, totalCost = 0;\n LEVELS.forEach(l => {\n const count = parseInt(document.getElementById('count-'+l).value) || 0;\n totalCount += count;\n totalCost += count * rates[l] * days;\n });\n return { count: totalCount, cost: totalCost };\n }\n\n\nfunction setTrainerDayType(t) {\n trainerDayType = t;\n document.getElementById('btn-trainer-full').classList.toggle('active', t === 'full');\n document.getElementById('btn-trainer-half').classList.toggle('active', t === 'half');\n}\n\nfunction setVehicle(type) {\n vehicleType = type;\n document.getElementById('vehicle-7').classList.toggle('selected', type === 7);\n document.getElementById('vehicle-17').classList.toggle('selected', type === 17);\n buildCityGrid();\n}\n\nfunction setOvernights(n) {\n overnightMode = n;\n ['nonight','1night','2night','custom-night'].forEach(id => document.getElementById('btn-'+id).classList.remove('active'));\n const map = { 0:'nonight', 1:'1night', 2:'2night', '-1':'custom-night' };\n document.getElementById('btn-'+map[n]).classList.add('active');\n document.getElementById('customNightRow').style.display = n === -1 ? 'block' : 'none';\n}\n\nfunction toggleEditMode() {\n editMode = !editMode;\n const btn = document.getElementById('editRatesBtn');\n btn.classList.toggle('active', editMode);\n btn.innerHTML = editMode\n ? `<svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg> Done`\n : `<svg viewBox=\"0 0 24 24\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"\/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"\/><\/svg> Edit rates`;\n buildCityGrid();\n}\n\nfunction getDisplayCost(baseTransport) {\n if (baseTransport === 0) return null;\n return vehicleType === 17 ? Math.round(baseTransport * 1.3) : baseTransport;\n}\n\nfunction buildCityGrid() {\n const grid = document.getElementById('cityGrid');\n grid.innerHTML = '';\n cities.forEach((c, i) => {\n const el = document.createElement('div');\n el.className = 'city-tile' + (selectedCity === i ? ' selected' : '') + (editMode ? ' edit-mode' : '');\n const displayCost = getDisplayCost(c.transport);\n const costLabel = c.transport === 0 ? 'Base city' : (displayCost.toLocaleString() + ' MAD' + (vehicleType === 17 ? ' (+30%)' : ''));\n\n if (editMode) {\n const isCasa = c.transport === 0 && c.name === 'Casablanca';\n el.innerHTML = `<span class=\"city-name\">${c.name}<\/span><div class=\"city-tile-right\">${isCasa\n ? `<span class=\"city-cost\">Base city<\/span>`\n : `<input class=\"city-edit-input\" type=\"number\" value=\"${c.transport}\" min=\"0\" \/><span class=\"city-edit-label\">MAD<\/span>`}<\/div>`;\n if (!isCasa) {\n const inp = el.querySelector('input');\n inp.addEventListener('click', e => e.stopPropagation());\n inp.addEventListener('input', e => { const val = parseFloat(e.target.value); if (!isNaN(val) && val >= 0) cities[i].transport = val; });\n }\n } else {\n el.innerHTML = `<span class=\"city-name\">${c.name}<\/span><div class=\"city-tile-right\"><span class=\"city-cost\">${costLabel}<\/span><\/div>`;\n el.onclick = () => {\n selectedCity = selectedCity === i ? null : i;\n document.getElementById('customTransport').value = '';\n document.getElementById('cityLabel').value = selectedCity !== null ? cities[selectedCity].name : '';\n buildCityGrid();\n };\n }\n grid.appendChild(el);\n });\n}\n\nfunction v(id) { return document.getElementById(id).value; }\n\nfunction getNights() {\n if (overnightMode === 0) return 0;\n if (overnightMode === 1) return 1;\n if (overnightMode === 2) return 2;\n return parseInt(v('customNights')) || 0;\n}\n\nfunction getTransportTotal() {\n let base = 0;\n const custom = parseFloat(v('customTransport'));\n if (!isNaN(custom) && custom > 0) base = custom;\n else if (selectedCity !== null) base = cities[selectedCity].transport;\n if (base === 0) return 0;\n return vehicleType === 17 ? Math.round(base * 1.3) : base;\n}\n\nfunction fmt(n) { return Math.round(n).toLocaleString('fr-MA') + ' MAD'; }\n\nfunction recalc() {\n const days = parseInt(v('numDays')) || 1;\n\n const { count: facils, cost: facilCost } = getFacilTotals();\n const facilRate = facilDayType === 'full' ? 'full day' : 'half day';\n\n const trainers = parseInt(v('numTrainers')) || 0;\n const trainerRate = trainerDayType === 'full' ? 1200 : 600;\n const trainerCost = trainers * days * trainerRate;\n\n const transportTotal = getTransportTotal();\n\n const nights = getNights();\n const dRate = parseFloat(v('doubleRate')) || 0;\n const nDouble = parseInt(v('numDouble')) || 0;\n const sRate = parseFloat(v('singleRate')) || 0;\n const nSingle = parseInt(v('numSingle')) || 0;\n const accomCost = nights * (nDouble * dRate + nSingle * sRate);\n\n const mDays = parseInt(v('mealDays')) || 0;\n const b = parseFloat(v('mealBreakfast')) || 0;\n const l = parseFloat(v('mealLunch')) || 0;\n const d = parseFloat(v('mealDinner')) || 0;\n const totalPeople = facils + trainers;\n const mealCost = totalPeople * mDays * (b + l + d);\n\n const total = facilCost + trainerCost + transportTotal + accomCost + mealCost;\n\n const clientName = v('clientName') || '\u2014';\n const cityName = selectedCity !== null ? cities[selectedCity].name : (v('cityLabel') || '\u2014');\n const vehicleLabel = vehicleType === 17 ? '17-seater' : '7-seater';\n document.getElementById('quoteMeta').textContent =\n `${clientName} \u00b7 ${cityName} \u00b7 ${vehicleLabel} \u00b7 ${facils} facilitator${facils !== 1 ? 's' : ''} + ${trainers} trainer${trainers !== 1 ? 's' : ''} \u00b7 ${days} day${days > 1 ? 's' : ''}`;\n\n const rows = [\n { cat: 'Facilitator fees', detail: facils > 0 ? `${facils} freelancer${facils>1?'s':''} \u00d7 ${days} day${days>1?'s':''} (${facilRate}, levels A\u2013E)` : 'None', val: facilCost },\n { cat: 'Lead trainer fees', detail: trainers > 0 ? `${trainers} \u00d7 ${days} day${days>1?'s':''} \u00d7 ${trainerRate} MAD (${trainerDayType === 'full' ? 'full' : 'half'} day)` : 'None', val: trainerCost },\n { cat: 'Transport', detail: transportTotal > 0 ? `${vehicleLabel} \u2014 return trip${vehicleType === 17 ? ' (+30%)' : ''}` : 'Base city \u2014 no transport cost', val: transportTotal },\n { cat: 'Accommodation', detail: nights > 0\n ? `${nights} night${nights>1?'s':''} \u2014 ${nDouble} double (${dRate.toLocaleString()} MAD) + ${nSingle} single (${sRate.toLocaleString()} MAD)`\n : 'No overnight stay', val: accomCost },\n { cat: 'Meals & per diem', detail: mDays > 0 ? `${totalPeople} people \u00d7 ${mDays} day${mDays>1?'s':''} (B${b}+L${l}+D${d})` : 'Not included', val: mealCost },\n ];\n\n let html = '';\n rows.forEach(r => { html += `<tr><td class=\"cat\">${r.cat}<\/td><td class=\"detail\">${r.detail}<\/td><td class=\"amount\">${r.val > 0 ? fmt(r.val) : '\u2014'}<\/td><\/tr>`; });\n html += `<tr class=\"total-row\"><td class=\"cat\" colspan=\"2\">Total estimated cost<\/td><td class=\"amount\">${fmt(total)}<\/td><\/tr>`;\n document.getElementById('costTable').innerHTML = html;\n document.getElementById('sumCost').textContent = fmt(total);\n\n const sell = parseFloat(v('sellPrice'));\n if (!isNaN(sell) && sell > 0) {\n const profit = sell - total, margin = (profit \/ sell) * 100;\n document.getElementById('sumSell').textContent = fmt(sell);\n document.getElementById('sumProfit').textContent = (profit >= 0 ? '+' : '') + fmt(profit);\n document.getElementById('sumProfit').className = 'metric-val ' + (profit >= 0 ? 'pos' : 'neg');\n document.getElementById('marginSection').style.display = 'block';\n const pctEl = document.getElementById('marginPct');\n pctEl.textContent = (Math.round(margin * 10) \/ 10) + '%';\n pctEl.className = 'margin-pct ' + (margin >= 30 ? 'good' : margin >= 15 ? 'warn' : 'bad');\n const bar = document.getElementById('marginBar');\n bar.style.width = Math.min(100, Math.max(0, margin)) + '%';\n bar.className = 'bar-fill' + (margin < 15 ? ' bad' : margin < 30 ? ' warn' : '');\n const msg = document.getElementById('marginMsg');\n msg.className = 'margin-msg';\n if (margin < 0) { msg.classList.add('bad-msg'); msg.textContent = 'Sell price is below cost \u2014 operating at a loss.'; }\n else if (margin < 15) { msg.classList.add('warn-msg'); msg.textContent = 'Margin is tight \u2014 consider raising the sell price.'; }\n\n \/\/ Cost % indicator\n const costPct = (total \/ sell) * 100;\n const costPctEl = document.getElementById('costPct');\n const costPctVal = document.getElementById('costPctVal');\n const costPctMsg = document.getElementById('costPctMsg');\n costPctEl.style.display = 'flex';\n costPctVal.textContent = (Math.round(costPct * 10) \/ 10) + '%';\n if (costPct < 24) {\n costPctVal.className = 'cost-pct-val good';\n costPctMsg.textContent = 'Costs are well controlled.';\n costPctMsg.className = 'cost-pct-msg good-msg';\n } else if (costPct <= 30) {\n costPctVal.className = 'cost-pct-val warn';\n costPctMsg.textContent = 'Costs are eating into margin \u2014 watch closely.';\n costPctMsg.className = 'cost-pct-msg warn-msg';\n } else {\n costPctVal.className = 'cost-pct-val bad';\n costPctMsg.textContent = 'Cost ratio is high \u2014 consider reducing costs or raising price.';\n costPctMsg.className = 'cost-pct-msg bad-msg';\n }\n } else {\n document.getElementById('sumSell').textContent = '\u2014';\n document.getElementById('sumProfit').textContent = '\u2014';\n document.getElementById('sumProfit').className = 'metric-val';\n document.getElementById('marginSection').style.display = 'none';\n document.getElementById('costPct').style.display = 'none';\n }\n}\n\nbuildCityGrid();\nrender();\nupdateLevels();\ndocument.getElementById('sellPrice').addEventListener('input', recalc);\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Red Rock International \u2014 Event Pricing Red Rock International Event Pricing Event details Client \/ event name Event date Number of days Freelancer day type Full day Half day Freelancers by level (rocker bonus always included) LevelDescriptionRate# PeopleSubtotal A35\u201350 days700 MAD\u2014 B20\u201334 days650 MAD\u2014 C10\u201319 days600 MAD\u2014 D4\u20139 days500 MAD\u2014 E<3 days400 MAD\u2014 Total: 0 […]<\/p>\n","protected":false},"author":27,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","om_disable_all_campaigns":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-57013","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/redrockinternational.com\/eg\/wp-json\/wp\/v2\/pages\/57013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/redrockinternational.com\/eg\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/redrockinternational.com\/eg\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/redrockinternational.com\/eg\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/redrockinternational.com\/eg\/wp-json\/wp\/v2\/comments?post=57013"}],"version-history":[{"count":0,"href":"https:\/\/redrockinternational.com\/eg\/wp-json\/wp\/v2\/pages\/57013\/revisions"}],"wp:attachment":[{"href":"https:\/\/redrockinternational.com\/eg\/wp-json\/wp\/v2\/media?parent=57013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}