.font-picker{margin:20px 0;padding:20px;border:2px solid #3498db;border-radius:8px;background:#f0f7fc;width:100%;box-sizing:border-box}.font-picker__title{margin:0 0 4px;font-size:1.1em;font-weight:600;color:#2980b9}.font-picker__subtitle{margin:0 0 16px;font-size:13px;color:#666}.font-picker__text-row{margin-bottom:16px}.font-picker__lines-input label{display:block;font-size:13px;color:#666;margin-bottom:10px;font-weight:500}.font-picker__line-wrapper{display:flex;align-items:center;gap:10px;margin-bottom:8px;position:relative;flex-wrap:wrap}.font-picker__line-label{font-size:12px;color:#666;min-width:50px;font-weight:500}.font-picker__line-input{flex:1;padding:10px 50px 10px 12px;border:2px solid #ccc;border-radius:6px;font-size:16px;box-sizing:border-box;background:#fff;transition:border-color .2s}.font-picker__line-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db33}.font-picker__line-wrapper .font-picker__char-count{position:absolute;right:12px;font-size:11px;color:#999}.font-picker__line-hint{margin:12px 0 0;padding:10px 12px;background:#fff3cd;border:1px solid #ffc107;border-radius:6px;font-size:12px;color:#856404}.font-picker__options-row{display:flex;gap:24px;margin-bottom:16px;flex-wrap:wrap}.font-picker__colour-input label,.font-picker__size-input label,.font-picker__align-input label,.font-picker__outline-input label{display:block;font-size:13px;color:#666;margin-bottom:6px;font-weight:500}.font-picker__colour-input{min-width:160px}.font-picker__colour-wrapper{display:flex;gap:8px;align-items:center}.font-picker__colour-picker{width:44px;height:44px;padding:2px;border:2px solid #ccc;border-radius:6px;cursor:pointer;background:#fff}.font-picker__colour-picker::-webkit-color-swatch-wrapper{padding:0}.font-picker__colour-picker::-webkit-color-swatch{border:none;border-radius:4px}.font-picker__colour-hex{width:80px;padding:10px;border:2px solid #ccc;border-radius:6px;font-size:14px;font-family:monospace;text-transform:uppercase}.font-picker__colour-hex:focus{outline:none;border-color:#3498db}.font-picker__colour-presets{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.font-picker__preset{width:24px;height:24px;border:2px solid #ccc;border-radius:4px;cursor:pointer;transition:transform .1s,border-color .1s;padding:0}.font-picker__preset:hover{transform:scale(1.1);border-color:#3498db}.font-picker__preset[data-colour="#FFFFFF"]{border-color:#ddd}.font-picker__colour-hint{margin:6px 0 0;font-size:11px;color:#888;font-style:italic}.font-picker__size-input,.font-picker__outline-input{min-width:120px}.font-picker__align-input{min-width:130px}.font-picker__size-buttons,.font-picker__align-buttons,.font-picker__outline-buttons{display:flex;gap:4px}.font-picker__size-btn,.font-picker__align-btn,.font-picker__outline-btn{width:40px;height:40px;border:2px solid #ccc;border-radius:6px;background:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.font-picker__size-btn:hover,.font-picker__align-btn:hover,.font-picker__outline-btn:hover{border-color:#3498db}.font-picker__size-btn.active,.font-picker__align-btn.active,.font-picker__outline-btn.active{background:#3498db;border-color:#3498db;color:#fff}.font-picker__outline-btn.active[data-outline=white]{background:#fff;border-color:#3498db;box-shadow:0 0 0 2px #3498db}.font-picker__outline-btn.active[data-outline=black]{background:#333;border-color:#3498db;box-shadow:0 0 0 2px #3498db}.font-picker__size-label,.font-picker__align-label,.font-picker__outline-label{display:block;margin-top:6px;font-size:12px;color:#666;text-align:center}.font-picker__categories{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.font-picker__cat-btn{padding:6px 14px;border:1px solid #bdc3c7;border-radius:20px;background:#fff;font-size:13px;cursor:pointer;transition:all .2s}.font-picker__cat-btn:hover{border-color:#3498db;color:#3498db}.font-picker__cat-btn.active{background:#3498db;border-color:#3498db;color:#fff}.font-picker__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;max-height:350px;overflow-y:auto;padding:4px}.font-picker__item{padding:14px;background:#fff;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s;text-align:center}.font-picker__item:hover{border-color:#3498db;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.font-picker__item.selected{border-color:#2980b9;box-shadow:0 0 0 3px #3498db4d;background:#e8f4fc}.font-picker__item-preview{font-size:20px;margin-bottom:6px;min-height:60px;display:flex;flex-direction:column;justify-content:center;word-break:break-word;line-height:1.3}.font-picker__item-preview-line{display:block}.font-picker__item-name{font-size:10px;color:#888;text-transform:uppercase;letter-spacing:.5px}.font-picker__selected{margin-top:16px;padding:16px;background:#d6eaf8;border:1px solid #aed6f1;border-radius:6px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.font-picker__selected h4{margin:0;font-size:14px;color:#2471a3;white-space:nowrap}.font-picker__selected-preview{flex:1;font-size:24px;min-width:150px;text-shadow:0 1px 2px rgba(0,0,0,.1);line-height:1.3}.font-picker__selected-preview-line{display:block}.font-picker__selected-preview.outline-white .font-picker__selected-preview-line{text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,-2px 0 0 #fff,2px 0 0 #fff,0 -2px 0 #fff,0 2px 0 #fff}.font-picker__selected-preview.outline-black .font-picker__selected-preview-line{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,-2px 0 0 #000,2px 0 0 #000,0 -2px 0 #000,0 2px 0 #000}.font-picker__selected-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.font-picker__selected-font-name,.font-picker__selected-size-badge,.font-picker__selected-align-badge,.font-picker__selected-outline-badge{font-size:12px;color:#666;background:#fff;padding:4px 10px;border-radius:12px}.font-picker__selected-colour-swatch{width:24px;height:24px;border:2px solid #fff;border-radius:4px;box-shadow:0 1px 3px #0003}.font-picker__btn{padding:10px 18px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;background:#3498db;color:#fff;transition:background .2s}.font-picker__btn--danger{background:#c0392b}.font-picker__btn--danger:hover{background:#e74c3c}.font-picker__canvas{position:absolute;left:-9999px;visibility:hidden}@media(max-width:600px){.font-picker__options-row{flex-direction:column;gap:16px}.font-picker__grid{grid-template-columns:1fr 1fr}.font-picker__item-preview{font-size:16px;min-height:50px}.font-picker__selected{flex-direction:column;text-align:center}.font-picker__selected-preview{text-align:center!important}.font-picker__line-wrapper{flex-wrap:wrap}.font-picker__line-label{width:100%;margin-bottom:4px}}.font-picker__line-validity{width:100%;font-size:12px;font-weight:500;line-height:1.3;padding:4px 0 0 60px;min-height:0;transition:color .2s}.fp-validity--good{color:#16a34a}.fp-validity--warn{color:#d97706}.fp-validity--error{color:#dc2626}.fp-size--disabled{opacity:.3;pointer-events:none;text-decoration:line-through;border-color:#ddd!important;background:#f5f5f5!important;color:#999!important}
/*# sourceMappingURL=/cdn/shop/t/79/assets/font-picker.css.map */