@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap";:root{font-family:IBM Plex Sans Arabic,Tahoma,Arial,sans-serif;color:#18354b;background:#f6f8fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}.app{max-width:1220px;margin:auto;padding:22px 28px}.top{display:flex;justify-content:space-between;align-items:center;padding:6px 0 26px;border-bottom:1px solid #e6edf1}.brand{display:flex;align-items:center;gap:12px}.logo{width:48px;height:48px;background:#0b7084;color:#fff;border-radius:15px;display:grid;place-items:center;box-shadow:0 7px 18px #0b708426}.brand strong{font-size:20px;display:block}.brand small{font-size:12px;color:#8494a0;margin-top:5px;display:block}.chip{background:#fff;border:1px solid #e1e9ee;border-radius:100px;padding:9px 14px;color:#66808c;font-size:12px}.heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:30px 0 25px}.heading h1{font-size:30px;letter-spacing:-.8px;margin:7px 0 10px}.heading p,.section-head p,.preview-header p{color:#7b8f9d;font-size:13px;margin:0;line-height:1.8}.eyebrow{font-size:12px;color:#0b7084;font-weight:700}.demo{font-size:11px;color:#9b7650;background:#fff7e8;border:1px solid #f7e6c6;padding:10px 13px;border-radius:100px}.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:start}.panel{background:#fff;border:1px solid #e6edf1;border-radius:19px;box-shadow:0 6px 22px #1e4a6210;padding:26px}.section-head{display:flex;gap:12px;align-items:center;margin-bottom:20px}.step{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:#e8f5f6;color:#0b7084;font-weight:700;font-size:13px}.section-head h2,.preview-header h2{font-size:18px;margin:0 0 5px}.channels{display:grid;gap:10px}.channel{border:1px solid #e5edf0;border-radius:13px;padding:14px 15px;transition:.2s}.channel.on{border-color:#c4e1e6;background:#fbfefe}.channel-top{display:flex;align-items:center;gap:10px}.channel-top strong{font-size:14px}.channel-icon{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:#eef5f7;color:#0b7084}.channel-icon.whatsapp{background:#e7f9ee;color:#1b9f59}.channel-icon.telegram{background:#e8f5fc;color:#2d9bc5}.channel-icon.snapchat{background:#fffbe0;color:#746c00}.switch{margin-right:auto;position:relative;width:40px;height:23px}.switch input{opacity:0;width:0;height:0}.switch span{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:100px;background:#d9e2e7;transition:.2s}.switch span:before{content:"";position:absolute;top:3px;right:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px #0002}.switch input:checked+span{background:#0b7084}.switch input:checked+span:before{transform:translate(-17px)}.text-input,select{width:100%;background:#fff;border:1px solid #dce7ec;border-radius:10px;padding:12px 13px;outline:none;color:#18354b}.channel .text-input{margin-top:12px}.text-input:focus,select:focus{border-color:#0b7084;box-shadow:0 0 0 3px #0b70841a}.separator{height:1px;background:#edf1f3;margin:25px 0}.field-label{display:block;font-size:13px;font-weight:700;margin:20px 0 10px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);background:#f3f6f8;padding:5px;border-radius:11px;gap:4px}.segmented button{border:0;border-radius:8px;background:transparent;padding:11px 4px;color:#718391;font-size:13px}.segmented button.active{background:#fff;color:#0b7084;box-shadow:0 2px 7px #123f5514;font-weight:700}.swatches{display:flex;gap:11px;align-items:center;flex-wrap:wrap}.swatch{width:34px;height:34px;border-radius:50%;border:3px solid white;box-shadow:0 0 0 1px #dce6e9;color:#fff;display:grid;place-items:center}.swatch.selected{box-shadow:0 0 0 2px #0b7084}.custom-color{width:35px;height:35px;border:1px dashed #afc1c8;border-radius:50%;display:grid;place-items:center;position:relative;color:#6f8792;overflow:hidden;cursor:pointer}.custom-color input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.two{display:grid;grid-template-columns:1fr 1fr;gap:13px}.save{width:100%;border:0;background:#0b7084;color:#fff;border-radius:11px;padding:15px;margin-top:26px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}.save:hover{background:#075c6c}.disclaimer,.preview-note{font-size:11px;line-height:1.8;color:#8a9ba6;text-align:center;margin:12px 0 0}.preview-panel{position:sticky;top:20px}.preview-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.device-toggle{display:flex;background:#f1f5f7;padding:4px;border-radius:10px;gap:3px}.device-toggle button{border:0;background:transparent;color:#8295a0;border-radius:7px;width:33px;height:31px;display:grid;place-items:center}.device-toggle button.active{background:#fff;color:#0b7084;box-shadow:0 1px 5px #0001}.preview-wrap{background:#f2f5f7;border-radius:16px;min-height:520px;display:flex;align-items:center;justify-content:center;padding:14px}.store{width:100%;height:490px;background:#fff;border:1px solid #e2e9ed;border-radius:11px;position:relative;overflow:hidden;box-shadow:0 8px 25px #17394b14;transition:width .25s}.store.mobile{width:265px;border-radius:23px}.store-nav{display:flex;justify-content:space-between;align-items:center;padding:18px;border-bottom:1px solid #eef2f4;font-size:13px}.store-nav span{font-size:10px;color:#92a2aa}.store.mobile .store-nav span{display:none}.store-hero{text-align:center;padding:28px 12px 25px;background:linear-gradient(180deg,#f0f6f7,#fff)}.decor{display:flex;align-items:end;justify-content:center;gap:8px;height:90px;margin-bottom:17px}.decor span{width:57px;height:70px;background:#d8e7e9;border-radius:12px}.decor span:nth-child(2){height:88px;background:#c0d9dd}.decor span:nth-child(3){height:62px;background:#e5eef0}.store-tag{color:#0b7084;font-size:10px;font-weight:700}.store-hero h3{font-size:19px;margin:9px 0}.store-hero p{font-size:11px;color:#8c9da6}.store-cta{display:inline-block;background:#183e53;color:#fff;padding:10px 23px;border-radius:8px;font-size:11px;margin-top:9px}.products{display:flex;gap:9px;margin:17px}.products div{flex:1;height:64px;background:#edf2f4;border-radius:9px}.floating{position:absolute;bottom:22px;display:flex;flex-direction:column;align-items:flex-start;gap:9px}.contact{color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;min-width:50px;min-height:50px;text-decoration:none;box-shadow:0 5px 16px #0003;padding:10px 12px}.contact.circle{border-radius:50%;width:50px;height:50px;padding:0}.contact.pill{border-radius:100px}.contact.tab{border-radius:9px;writing-mode:vertical-rl;padding:12px 8px}.contact span{font-size:12px;font-weight:700}.store.mobile .contact.pill span{font-size:10px}footer{text-align:center;color:#9cabb3;font-size:12px;padding:35px}footer span{color:#0b7084}@media (max-width:900px){.layout{grid-template-columns:1fr}.preview-panel{position:static}.heading{align-items:start;flex-direction:column}.app{padding:15px}.panel{padding:20px}}@media (max-width:390px){.two{grid-template-columns:1fr}.demo{font-size:10px}.heading h1{font-size:25px}}.spacing-slider{width:100%;accent-color:#0b7084;display:block;margin:10px 0 0}.spacing-note{font-size:11px;color:#8a9ba6;margin:7px 0 0}.floating.joined{gap:0!important;overflow:visible;border-radius:15px;box-shadow:0 5px 16px #0002}.floating.joined .contact{box-shadow:none;border-radius:0}.floating.joined.circle .contact:first-child{border-radius:50% 50% 0 0}.floating.joined.circle .contact:last-child{border-radius:0 0 50% 50%}.floating.joined.pill .contact:first-child{border-radius:14px 14px 0 0}.floating.joined.pill .contact:last-child{border-radius:0 0 14px 14px}.floating.joined.tab .contact:first-child{border-radius:10px 10px 0 0}.floating.joined.tab .contact:last-child{border-radius:0 0 10px 10px}.floating.joined .contact:only-child{border-radius:13px}.floating.joined.circle .contact:only-child{border-radius:50%}.floating.joined.pill .contact:only-child{border-radius:100px}.floating.joined .contact+.contact{border-top:1px solid #ffffff35}.floating.separated .contact{border-radius:12px}.floating.separated.circle .contact{border-radius:50%}.floating.separated.pill .contact{border-radius:100px}body{font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased}h1,h2,h3,.brand strong{font-family:IBM Plex Sans Arabic,Tahoma,sans-serif;font-weight:700;letter-spacing:0}button,input,select{font-family:inherit}.section-head h2,.preview-header h2,.channel-top strong,.field-label{font-weight:600}.heading h1{line-height:1.4;letter-spacing:0}