body.profile{background:#f3f2ed;color:#1e332c;font-family:Arial,sans-serif}body.profile>header{display:none}body.profile main{padding:0;max-width:680px;margin:28px auto 50px}body.profile h1{font-size:clamp(30px,6vw,43px);letter-spacing:-1.4px;line-height:1.15;margin:17px 0 12px}body.profile p{font-size:15px;line-height:1.7;color:#65716b}.profile-shell{background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 16px 70px #183b2710}.cover{height:245px;background:radial-gradient(ellipse at 80% 25%,#b5bd90 0,transparent 55%),linear-gradient(130deg,#173c32,#647e5b);position:relative}.cover>img{width:100%;height:100%;object-fit:cover}.cover:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 50%,#071b2630);pointer-events:none}.cover-brand{position:absolute;left:24px;top:24px;z-index:1;background:#ffffffdf;color:#23483b;border-radius:40px;padding:8px 13px;font-size:12px;font-weight:bold;backdrop-filter:blur(8px)}.profile-content{padding:0 32px 32px}.avatar{position:relative;margin-top:-52px;width:104px;height:104px;border-radius:26px;border:6px solid white;background:#e9eee4;display:grid;place-items:center;font-size:30px;font-weight:bold;color:#375b47;overflow:hidden;z-index:2;box-shadow:0 5px 20px #14301c12}.avatar img{width:100%;height:100%;object-fit:contain;background:white}.eyebrow{display:block;letter-spacing:2px;font-size:10px;font-weight:bold;color:#84947c;margin:22px 0 8px}.description{white-space:pre-wrap;margin:0 0 26px}.profile-links{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 30px}.profile-link{display:flex;align-items:center;gap:12px;background:#f5f6f1;color:#273f32;text-decoration:none;border:1px solid #e9ece3;border-radius:16px;padding:16px;min-height:74px;transition:transform .15s,background .15s}.profile-link:hover{transform:translateY(-2px);background:#edf0e7}.profile-link.featured{grid-column:1/-1;background:#234c3c;color:white;border-color:#234c3c}.link-icon{width:36px;height:36px;flex-shrink:0;display:grid;place-items:center;border-radius:11px;background:#ffffffb0;color:#45614c}.featured .link-icon{background:#ffffff1a;color:white}.link-icon svg{width:21px;height:21px}.link-label{font-size:14px;font-weight:bold}.link-arrow{margin-left:auto;font-size:20px;opacity:.6}.section-heading{font-size:19px;letter-spacing:-.5px;margin:30px 0 16px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.gallery button{border:0;padding:0;background:#e8eee7;border-radius:15px;overflow:hidden;aspect-ratio:1;cursor:pointer}.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .2s}.gallery button:hover img{transform:scale(1.05)}.bank-card{margin-top:30px;background:#f5f3eb;border:1px solid #e9e5d7;padding:24px;border-radius:20px}.bank-card h2{font-size:19px;margin:0 0 21px}.bank-row{margin:14px 0}.bank-label{font-size:10px;letter-spacing:1.5px;color:#798171;display:block;text-transform:uppercase;margin-bottom:6px}.bank-value{font-size:15px;font-weight:600;overflow-wrap:anywhere;white-space:pre-wrap}.iban-value{font-family:monospace;font-size:17px;letter-spacing:.7px}.copy-iban{width:100%;background:#234c3c;color:white;border:0;border-radius:12px;padding:15px;margin-top:18px;font-size:14px;font-weight:bold;cursor:pointer}.copy-feedback:empty{display:none}.copy-feedback{font-size:13px!important;margin-bottom:0}.profile-footer{text-align:center;font-size:11px;color:#829081;margin-top:26px}.profile-footer a{color:inherit;text-decoration:none}.photo-dialog{border:0;background:#14221ef5;padding:54px 20px 20px;border-radius:18px;max-width:95vw;max-height:95vh}.photo-dialog::backdrop{background:#12251cbb}.photo-dialog img{display:block;max-width:85vw;max-height:75vh;object-fit:contain}.photo-dialog button{position:absolute;top:12px;right:14px;background:#fff;color:#173c32;border:0;border-radius:9px;padding:8px 12px;cursor:pointer}.profile-error{padding:40px}.profile-link:focus-visible,.gallery button:focus-visible,.copy-iban:focus-visible{outline:3px solid #b3924c;outline-offset:4px}@media(max-width:600px){body.profile main{margin:0 auto 20px}.profile-shell{border-radius:0;box-shadow:none}.cover{height:210px}.profile-content{padding:0 22px 28px}.profile-links{gap:9px}.profile-link{padding:13px;gap:9px}.link-label{font-size:12px}.link-icon{width:30px;height:30px}.gallery{gap:7px}.bank-card{padding:20px}}

/* Platform colours stay within the icon tiles. */
.profile-link .brand-instagram{background:radial-gradient(circle at 28% 105%,#ffdb80 0%,#fca743 25%,#ed3d67 48%,#b32ca0 70%,#6248d6 100%);color:white}
.profile-link .brand-whatsapp{background:#25b95b;color:white}
.profile-link .brand-facebook{background:#1877f2;color:white}
.profile-link .brand-telegram{background:#229ed9;color:white}
.profile-link .brand-tiktok{background:#111;color:white;filter:drop-shadow(1px 0 #25f4ee) drop-shadow(-1px 0 #fe2c55)}
.profile-link .brand-google_review{background:#fff;color:#e6a817}
.profile-link .brand-google_maps{background:#e8f3eb;color:#278746}
.profile-link .brand-website{background:#e5edfa;color:#326bcc}

/* Shared bank-card artwork for every customer profile. */
.bank-card{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 100% 0%,#3b6750 0%,transparent 65%),linear-gradient(135deg,#183b30,#10291f);border:1px solid #3e5d49;box-shadow:0 12px 26px #142e201a;color:#fff}
.bank-card:before{content:'';position:absolute;z-index:-1;right:-18px;top:-5px;width:290px;height:290px;background:url('banka-temasi.svg') center/contain no-repeat;opacity:.18;pointer-events:none}
.bank-card:after{content:'';position:absolute;z-index:-1;left:-70px;bottom:-180px;width:340px;height:340px;border:1px solid #c4ae6e24;border-radius:50%;box-shadow:0 0 0 30px #c4ae6e08,0 0 0 60px #c4ae6e05;pointer-events:none}
.bank-card h2{color:#f7f2df;padding-bottom:16px;border-bottom:1px solid #d1dfc724}
.bank-card .bank-label{color:#becdb9}
.bank-card .bank-value{color:#fff}
.bank-card .iban-value{display:block;background:#071e184d;border:1px solid #c4d3bb26;border-radius:10px;padding:12px;margin-top:9px}
.bank-card .copy-iban{background:#e7d7a5;color:#183b30;border:1px solid #f5e8c1;box-shadow:0 4px 12px #00000014}
.bank-card .copy-iban:hover{background:#f3e5bd}
body.profile .bank-card .copy-feedback{color:#e6eddf}
.bank-card input{color:#17243a;background:white}
@media(max-width:420px){.bank-card:before{width:235px;height:235px;right:-30px;opacity:.14}.bank-card .iban-value{font-size:15px;letter-spacing:.3px}}
/* Compact bank details with readable IBAN and touch target. */
.bank-card{padding:18px;border-radius:17px;margin-top:22px}
.bank-card h2{font-size:17px;margin:0 0 12px;padding-bottom:10px}
.bank-card .bank-row{margin:10px 0}
.bank-card .bank-label{font-size:9px;letter-spacing:1px;margin-bottom:4px}
.bank-card .bank-value{font-size:14px;line-height:1.4}
.bank-card .iban-value{font-size:15px;letter-spacing:.3px;padding:9px 10px;margin-top:5px}
.bank-card .copy-iban{min-height:44px;padding:10px 14px;margin-top:10px;font-size:13px;border-radius:10px}
.bank-card:before{width:230px;height:230px}
@media(max-width:600px){.bank-card{padding:16px}.bank-card .iban-value{font-size:14px}}
.account-holder-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center}
.account-holder-row .bank-label,.account-holder-row .copy-feedback{grid-column:1/-1}
.copy-holder{min-height:44px;padding:8px 12px;border:1px solid #f5e8c155;border-radius:9px;background:#e7d7a5;color:#183b30;font-size:12px;font-weight:bold;cursor:pointer}
.copy-holder:hover{background:#f3e5bd}.copy-holder:focus-visible{outline:3px solid #e7d7a5;outline-offset:3px}
.account-holder-row{display:block}
.account-holder-row .bank-value{display:block}
.account-holder-row .copy-holder{display:block;width:100%;margin-top:10px;font-size:13px;padding:10px 14px;border-color:#f5e8c1}

.bank-card h2{text-transform:uppercase;letter-spacing:.6px}

.profile-link .brand-app_url{background:#e8e5fa;color:#6552b5}
/* Warm champagne and sage backdrop. */
body.profile{background-color:#f5f2e9;background-image:radial-gradient(ellipse at 4% 8%,#d6dfce99 0,transparent 46%),radial-gradient(ellipse at 96% 30%,#ead6a477 0,transparent 48%),radial-gradient(ellipse at 15% 95%,#dce4d088 0,transparent 46%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%236a735e' opacity='.035' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-size:auto,auto,auto,180px 180px}
body.profile .profile-shell{background:linear-gradient(145deg,#fffefa 0%,#fcfbf5 55%,#f7f5eb 100%);border:1px solid #d8cba755;box-shadow:0 18px 65px #34453412}
@media(max-width:600px){body.profile .profile-shell{border:0;background:linear-gradient(145deg,#fffefa,#fcfbf5 55%,#f6f3e8)}body.profile main{padding:0}}
/* Deep emerald and antique gold profile theme. */
body.profile{background-color:#0b1915;background-image:radial-gradient(ellipse at 10% 0%,#35534188,transparent 52%),radial-gradient(ellipse at 100% 70%,#8d713025,transparent 50%);color:#f5efde}
body.profile .profile-shell{background:linear-gradient(145deg,#1b3027,#12241e 60%,#192b22);border:1px solid #b99a565c;box-shadow:0 24px 80px #0005}
body.profile .profile-content{background:radial-gradient(ellipse at 100% 0%,#b99a5610,transparent 50%)}
body.profile h1{color:#faf5e8}
body.profile .description{color:#d0d4c8}
body.profile .eyebrow{color:#d6bb7c;letter-spacing:2.5px}
body.profile .avatar{border-color:#1b3027;background:#e8e3d2;box-shadow:0 0 0 1px #c5aa6a66,0 8px 25px #0003}
body.profile .profile-link{background:#f4f0e4;border-color:#d5c79e66;color:#233a2e;box-shadow:0 3px 12px #00000010}
body.profile .profile-link:hover{background:#fff9e9}
body.profile .profile-link.featured{background:linear-gradient(120deg,#e5d3a0,#c4a35e);border-color:#f0dbaa;color:#172b21}
body.profile .profile-link.featured:hover{background:linear-gradient(120deg,#f0dfb1,#d0b474)}
body.profile .section-heading{color:#ead8a9}
body.profile .bank-card{background:radial-gradient(ellipse at 100% 0%,#3c5944,transparent 68%),linear-gradient(135deg,#213a2d,#14281f);border-color:#b69b595e;box-shadow:0 10px 28px #0002}
body.profile .profile-footer{color:#bca87a}
@media(max-width:600px){body.profile .profile-shell{background:linear-gradient(145deg,#1b3027,#12241e 60%,#192b22);border:0;border-bottom:1px solid #b99a565c}}
body.profile[data-theme=black]{background:#101010;color:#f5efde}
body.profile[data-theme=black] .profile-shell{background:linear-gradient(145deg,#252422,#111110)}
body.profile[data-theme=black] .avatar{border-color:#252422}
body.profile[data-theme=navy]{background:#0b1425}
body.profile[data-theme=navy] .profile-shell{background:linear-gradient(145deg,#24354d,#111e31);border-color:#b8c7dd66}
body.profile[data-theme=navy] .avatar{border-color:#24354d}
body.profile[data-theme=navy] .eyebrow,body.profile[data-theme=navy] .section-heading{color:#c4d4eb}
body.profile[data-theme=navy] .profile-link.featured{background:linear-gradient(120deg,#e1e8f2,#aabdd5);border-color:#c3d4e9;color:#16263b}
body.profile[data-theme=ivory]{background:#eeeae0;color:#233a2e}
body.profile[data-theme=ivory] .profile-shell{background:linear-gradient(145deg,#fffefa,#f6f3e8)}
body.profile[data-theme=ivory] h1{color:#233a2e}
body.profile[data-theme=ivory] .description{color:#616b60}
body.profile[data-theme=ivory] .eyebrow,body.profile[data-theme=ivory] .section-heading{color:#827047}
body.profile[data-theme=ivory] .avatar{border-color:#fffefa}
body.profile[data-theme=ivory] .profile-footer{color:#756747}
body.profile.custom-background{position:relative;isolation:isolate;background:#101c16}
.custom-backdrop{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;pointer-events:none}
body.profile.custom-background:before{content:'';position:fixed;inset:0;background:#06130e66;z-index:-1;pointer-events:none}
body.profile.custom-background .profile-shell{background:#14271feF}
body.profile.custom-background[data-theme=black] .profile-shell{background:#151514ef}
body.profile.custom-background[data-theme=navy] .profile-shell{background:#142238ef}
body.profile.custom-background[data-theme=ivory] .profile-shell{background:#fffaf0ed}
@media(max-width:600px){body.profile.custom-background main{padding:14px 10px}body.profile.custom-background .profile-shell{border-radius:22px;border:1px solid #c5ac6b55}}
/* Let uploaded backgrounds show through the profile. */
body.profile.custom-background:before{background:#06130e26}
body.profile.custom-background .profile-shell{background:rgba(14,32,24,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
body.profile.custom-background[data-theme=black] .profile-shell{background:rgba(12,12,12,.45)}
body.profile.custom-background[data-theme=navy] .profile-shell{background:rgba(12,26,46,.45)}
body.profile.custom-background[data-theme=ivory] .profile-shell{background:rgba(255,250,240,.68)}
body.profile.custom-background .profile-content{background:transparent}
body.profile.custom-background .no-cover .cover{display:none}
body.profile.custom-background .no-cover .profile-content{padding-top:28px}
body.profile.custom-background .no-cover .avatar{margin-top:0}
body.profile.custom-background h1,body.profile.custom-background .description{ text-shadow:0 2px 8px #0008}
body.profile.custom-background[data-theme=ivory] h1,body.profile.custom-background[data-theme=ivory] .description{text-shadow:none}

.profile-link .brand-phone{background:#e4efe9;color:#285a43;font-size:23px}
/* Explicit transparent theme, selectable for each customer. */
body.profile[data-theme=transparent]{background-color:#172a23;background-image:radial-gradient(ellipse at 15% 0%,#60745c99,transparent 65%),linear-gradient(135deg,#172a23,#3c4937)}
body.profile[data-theme=transparent] .profile-shell{background:rgba(16,30,24,.18);border:1px solid #ffffff38;box-shadow:0 18px 60px #0002;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
body.profile[data-theme=transparent] .profile-content{background:transparent}
body.profile[data-theme=transparent] .profile-link:not(.featured){background:rgba(250,248,239,.88)}
body.profile[data-theme=transparent] h1,body.profile[data-theme=transparent] .description{text-shadow:0 2px 8px #000a}
body.profile.custom-background[data-theme=transparent]{background:#172a23}
body.profile.custom-background[data-theme=transparent] .profile-shell{background:rgba(8,20,14,.18)}
body.profile.custom-background[data-theme=transparent]:before{background:#06130e33}
/* Keep the uploaded photograph above the page paint and below content. */
body.profile.custom-background .custom-backdrop{z-index:0}
body.profile.custom-background:before{z-index:1}
body.profile.custom-background main{position:relative;z-index:2}
body.profile[data-theme=transparent] .profile-shell,body.profile.custom-background[data-theme=transparent] .profile-shell{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-color:#ffffff30}
body.profile[data-theme=transparent] .profile-content{background:transparent}
body.profile[data-theme=transparent] .cover:not(:has(img)){display:none}
body.profile[data-theme=transparent] .profile-shell:not(:has(.cover img)) .profile-content{padding-top:28px}
body.profile[data-theme=transparent] .profile-shell:not(:has(.cover img)) .avatar{margin-top:0}
body.profile.custom-background[data-theme=transparent]:before{background:rgba(0,0,0,.32)}
body.profile[data-theme=transparent] h1,body.profile[data-theme=transparent] .description,body.profile[data-theme=transparent] .eyebrow{color:#fff;text-shadow:0 2px 6px #000,0 0 18px #0008}
/* Lighter bank cards across all profile themes. */
body.profile .bank-card{background:linear-gradient(135deg,rgba(255,252,240,.96),rgba(237,227,200,.94));color:#233c30;border:1px solid #dbc994;box-shadow:0 8px 24px #00000012}
body.profile .bank-card:before{opacity:.11;filter:brightness(.65)}
body.profile .bank-card h2{color:#294535;border-bottom-color:#a58d4933;text-shadow:none}
body.profile .bank-card .bank-label{color:#6d735d}
body.profile .bank-card .bank-value{color:#243b2e;text-shadow:none}
body.profile .bank-card .iban-value{background:#ffffff8c;border-color:#b9b29366;color:#243b2e}
body.profile .bank-card .copy-iban,body.profile .bank-card .copy-holder{background:#365a45;color:#fff;border-color:#365a45;box-shadow:none}
body.profile .bank-card .copy-iban:hover,body.profile .bank-card .copy-holder:hover{background:#284634}
body.profile .bank-card .copy-feedback{color:#2b4937;text-shadow:none}
/* Minimal bank layout, preserving readable values and touch targets. */
body.profile .bank-card{padding:14px 16px;margin-top:16px;border-radius:14px;box-shadow:0 4px 14px #0000000a}
body.profile .bank-card h2{font-size:14px;letter-spacing:.5px;padding-bottom:8px;margin:0 0 10px}
body.profile .bank-card .bank-row{margin:8px 0}
body.profile .bank-card .bank-label{font-size:9px;letter-spacing:.7px;margin-bottom:3px}
body.profile .bank-card .bank-value{font-size:13px;line-height:1.35}
body.profile .bank-card .iban-value{font-size:14px;padding:7px 9px;margin-top:4px;border-radius:7px;letter-spacing:.1px}
body.profile .bank-card .copy-holder,body.profile .bank-card .copy-iban{min-height:44px;padding:8px 12px;font-size:12px;border-radius:8px;margin-top:6px}
body.profile .bank-card:before{width:180px;height:180px;opacity:.07}
body.profile .bank-card:after{display:none}
@media(max-width:420px){body.profile .bank-card{padding:12px 14px}body.profile .bank-card .iban-value{font-size:13px}}
.demo-feedback:not([hidden]){position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;width:min(90vw,500px);padding:16px 20px;border-radius:12px;background:#f5f8fc;color:#173750!important;box-shadow:0 6px 30px #0005;font-size:14px!important}
