/* pyh-contact 0.1.0 — contact chooser + form. Checkout design system (48px fields, floating labels, navy pill), site tokens. */
.pyh-cf{--cf-navy:#292F44;--cf-line:rgba(29,29,29,.15);--cf-muted:#4a4f5c;--cf-panel:#F6FAFF;--cf-error:#b3261e;margin:0 0 24px;font-size:16px;line-height:1.5;color:var(--contrast,#222)}
.pyh-cf *,.pyh-cf *::before,.pyh-cf *::after{box-sizing:border-box}
.pyh-cf-intro{margin:0 0 16px;color:var(--cf-muted)}

/* chooser (only when the shop has a chat) */
.pyh-cf-choose{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 24px}
@media (max-width:520px){.pyh-cf-choose{grid-template-columns:1fr}}
.pyh-cf-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:44px;margin:0;padding:20px 18px;background:#fff;color:var(--contrast,#222);border:1px solid var(--border-color,#e3e3e3);border-radius:15px;font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:border-color .1s linear,box-shadow .3s ease-out}
.pyh-cf-card:hover,.pyh-cf-card[aria-pressed="true"]{border-color:var(--cf-navy);box-shadow:5px 5px 20px 0 var(--border-color,#e3e3e3);background:#fff;color:var(--contrast,#222)}
.pyh-cf-ico{display:inline-flex;color:var(--cf-navy)}
.pyh-cf-card-t{font-size:17px;font-weight:600;line-height:1.3;color:var(--cf-navy)}
.pyh-cf-card-s{font-size:14px;line-height:1.5;color:var(--cf-muted)}
.pyh-cf-card:focus-visible,.pyh-cf-link:focus-visible,.pyh-cf a:focus-visible{outline:2px solid var(--cf-navy);outline-offset:2px}
.pyh-cf-js.pyh-cf-has-chat .pyh-cf-panel{display:none}
.pyh-cf-js.pyh-cf-has-chat .pyh-cf-panel.is-on{display:block}
.pyh-cf-panel:focus{outline:0}
#pywa-contact-slot:empty{display:none}
.pyh-cf-alt{margin:12px 0 0;font-size:14px;color:var(--cf-muted)}
.pyh-cf-link{color:var(--contrast,#222);text-decoration:underline}
.pyh-cf-link:hover{color:var(--accent,#FD3C0B)}

/* form grid */
.pyh-cf-form{margin:0}
.pyh-cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px}
.pyh-cf-grid>*{grid-column:1/-1;margin:0}
.pyh-cf-grid>.pyh-cf-half{grid-column:auto}
@media (max-width:480px){.pyh-cf-grid>.pyh-cf-half{grid-column:1/-1}}
.pyh-cf-row{position:relative;margin:0}

/* fields: 48px, radius 4, floating labels (CSS only: :placeholder-shown), navy focus ring */
.pyh-cf input[type="text"],.pyh-cf input[type="email"],.pyh-cf select,.pyh-cf textarea{display:block;width:100%;height:48px;margin:0;padding:20px 12px 4px;border:1px solid var(--cf-line);border-radius:4px;background:#fff;color:var(--contrast,#222);font:inherit;font-size:16px;line-height:1.4;box-shadow:none;-webkit-appearance:none;appearance:none}
.pyh-cf textarea{height:auto;min-height:160px;padding-top:26px;resize:vertical}
.pyh-cf select{padding-right:36px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23292F44' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center}
.pyh-cf input[type="text"]:focus,.pyh-cf input[type="email"]:focus,.pyh-cf select:focus,.pyh-cf textarea:focus{border-color:var(--cf-navy);box-shadow:0 0 0 2px rgba(41,47,68,.25);outline:0}
.pyh-cf-row>label{position:absolute;left:13px;top:13px;max-width:calc(100% - 26px);margin:0;overflow:hidden;color:var(--cf-muted);font-size:16px;font-weight:400;line-height:1.3;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;transition:top .15s,font-size .15s}
.pyh-cf-row>input:focus+label,.pyh-cf-row>input:not(:placeholder-shown)+label,.pyh-cf-row>textarea:focus+label,.pyh-cf-row>textarea:not(:placeholder-shown)+label,.pyh-cf-select>label{top:5px;font-size:12px}
.pyh-cf-row>textarea+label{top:14px}
.pyh-cf-row>textarea:focus+label,.pyh-cf-row>textarea:not(:placeholder-shown)+label{top:6px}
.pyh-cf-hint{display:block;margin:6px 0 0;color:var(--cf-muted);font-size:13px;line-height:1.45}
.pyh-cf-err{display:block;margin:6px 0 0;color:var(--cf-error);font-size:14px;font-weight:500;line-height:1.4}
.pyh-cf-err:empty{display:none}
.pyh-cf-bad input[type="text"],.pyh-cf-bad input[type="email"],.pyh-cf-bad select,.pyh-cf-bad textarea{border-color:var(--cf-error)}
.pyh-cf-count{position:absolute;right:10px;top:132px;color:var(--cf-muted);font-size:12px}
.pyh-cf-count:empty{display:none}

/* topic: pill tiles, 44px */
.pyh-cf fieldset{min-width:0;margin:0;padding:0;border:0}
.pyh-cf legend{margin:0 0 10px;padding:0;color:var(--contrast,#222);font-size:15px;font-weight:600}
.pyh-cf-opts{display:flex;flex-wrap:wrap;gap:8px}
.pyh-cf-opt{position:relative;display:inline-flex;margin:0;cursor:pointer}
.pyh-cf .pyh-cf-opt input[type]{position:absolute!important;left:0;top:0;width:1px!important;height:1px!important;min-width:0;margin:0!important;padding:0;border:0;opacity:0;-webkit-appearance:none;appearance:none}
.pyh-cf-opt span{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid var(--cf-line);border-radius:30px;background:#fff;color:var(--contrast,#222);font-size:15px;line-height:1.3;transition:border-color .1s,background-color .1s}
.pyh-cf-opt:hover span{border-color:var(--cf-navy)}
.pyh-cf-opt input:checked+span{border-color:var(--cf-navy);background:var(--cf-navy);color:#fff}
.pyh-cf-opt input:focus-visible+span{outline:2px solid var(--cf-navy);outline-offset:2px}
.pyh-cf-bad .pyh-cf-opt span{border-color:var(--cf-error)}

/* photos */
.pyh-cf-files{position:relative}
.pyh-cf-files input[type="file"]{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0}
.pyh-cf-filebtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:10px 18px;border:1px dashed var(--cf-navy);border-radius:30px;background:#fff;color:var(--cf-navy);font-size:15px;font-weight:500;cursor:pointer}
.pyh-cf-filebtn:hover{background:var(--cf-panel)}
.pyh-cf-files:has(input:focus-visible) .pyh-cf-filebtn{outline:2px solid var(--cf-navy);outline-offset:2px}
.pyh-cf-bad .pyh-cf-filebtn{border-color:var(--cf-error)}
.pyh-cf-filelist{margin:8px 0 0;padding:0;list-style:none;font-size:14px;color:var(--cf-muted)}
.pyh-cf-filelist:empty{display:none}
.pyh-cf-filelist li{margin:0 0 4px;overflow-wrap:anywhere}

/* submit, status, notes */
.pyh-cf-ts{margin:16px 0 0}
.pyh-cf-send{display:block;width:100%;min-height:52px;margin:20px 0 0;padding:14px 24px;border:0;border-radius:50px;background:var(--cf-navy);color:#fff;font:inherit;font-size:18px;font-weight:600;line-height:1.3;cursor:pointer;transition:background-color .15s}
.pyh-cf-send:hover,.pyh-cf-send:focus{background:#1c2031;color:#fff}
.pyh-cf-send:focus-visible{outline:2px solid var(--cf-navy);outline-offset:3px}
.pyh-cf-send[aria-busy="true"]{opacity:.75;cursor:progress}
.pyh-cf-status{margin:10px 0 0;font-size:14px;text-align:center}
.pyh-cf-status:empty{display:none}
.pyh-cf-status.is-bad{color:var(--cf-error)}
.pyh-cf-note{margin:12px 0 0;color:var(--cf-muted);font-size:14px;text-align:center}
.pyh-cf-note a,.pyh-cf-summary a{color:var(--contrast,#222);text-decoration:underline}
.pyh-cf-summary{margin:0 0 16px;padding:12px 16px;border:1px solid var(--cf-error);border-radius:8px;background:#fdf3f2;color:var(--contrast,#222);font-size:15px}
.pyh-cf-summary[hidden]{display:none}
.pyh-cf-summary:focus{outline:2px solid var(--cf-error);outline-offset:2px}
.pyh-cf-summary-t{margin:0 0 4px;font-weight:600}
.pyh-cf-summary ul{margin:0 0 0 18px;padding:0}
.pyh-cf-thanks{padding:28px 20px;border-radius:15px;background:var(--cf-panel);color:var(--contrast,#222);text-align:center}
.pyh-cf-thanks:focus{outline:0}
.pyh-cf-thanks svg{color:var(--cf-navy)}
.pyh-cf-thanks p{margin:8px 0 0}
.pyh-cf-thanks-t{font-size:18px;font-weight:600}
.pyh-cf-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* phones: the form's column comes before the photo column (config mobile_first) */
@media (max-width:767px){.pyh-cf-mf div:has(>.pyh-cf){order:-1}}
@media (prefers-reduced-motion:reduce){.pyh-cf *{transition:none!important}}
/* the photo button is a normal (non-floating) label */
.pyh-cf-row>label.pyh-cf-filebtn{position:static;top:auto;left:auto;max-width:none;overflow:visible;color:var(--cf-navy);font-size:15px;font-weight:500;white-space:normal;pointer-events:auto}

/* ---------- v2 (XN-H) ---------- */
/* topic dropdown: the placeholder option reads muted until a topic is chosen */
.pyh-cf select:invalid{color:var(--cf-muted)}
.pyh-cf select option{color:var(--contrast,#222)}
/* photo list: thumbnail + name + "attached" */
.pyh-cf-filelist li{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.pyh-cf-thumb{flex:0 0 44px;width:44px;height:44px;border-radius:6px;background:var(--cf-panel);object-fit:cover;display:inline-flex;align-items:center;justify-content:center;color:var(--cf-navy);overflow:hidden}
.pyh-cf-fname{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;color:var(--contrast,#222)}
.pyh-cf-ok{flex:0 0 auto;color:#1e6b34;font-weight:600;white-space:nowrap}
/* sending card: the thank-you box is laid out (invisible) from the first moment, so nothing below moves when it appears */
.pyh-cf-done{position:relative}
.pyh-cf-done:focus{outline:0}
.pyh-cf-done .pyh-cf-thanks.is-wait{visibility:hidden}
.pyh-cf-prog{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;border-radius:15px;background:var(--cf-panel);text-align:center}
.pyh-cf-prog[hidden]{display:none}
.pyh-cf-prog-t{margin:0;color:var(--contrast,#222);font-size:16px;font-weight:600}
.pyh-cf-bar{width:100%;max-width:320px;height:8px;border-radius:8px;background:#dde3ee;overflow:hidden}
.pyh-cf-bar span{display:block;height:100%;width:0;border-radius:8px;background:var(--cf-navy);transition:width .2s linear}
.pyh-cf-bar.is-indet span{width:35%;animation:pyh-cf-indet 1.1s ease-in-out infinite}
@keyframes pyh-cf-indet{0%{transform:translateX(-100%)}100%{transform:translateX(290%)}}
@media (prefers-reduced-motion:reduce){.pyh-cf-bar.is-indet span{animation:none;width:100%;opacity:.5}}
/* failure inside the card: message + "Back to your message" (the form grows back only on that tap) */
.pyh-cf-prog-err{color:var(--cf-error);font-weight:600;line-height:1.45}
.pyh-cf-back{min-height:44px;padding:10px 22px;border:1px solid var(--cf-navy);border-radius:30px;background:#fff;color:var(--cf-navy);font:inherit;font-size:15px;font-weight:600;line-height:1.2;cursor:pointer}
.pyh-cf-back:hover,.pyh-cf-back:focus{background:#fff;color:var(--cf-navy);box-shadow:0 0 0 2px rgba(41,47,68,.2)}
.pyh-cf-back:focus-visible{outline:2px solid var(--cf-navy);outline-offset:2px}