/* ATENA UI komponente: dugmad, forme, čip, badge, breadcrumb, toast, alert, prazno stanje, akordeon, paginacija. */

/* 5.1 Dugmad */
.at-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--at-s-2);height:var(--at-btn-h);padding:0 var(--at-s-5);border-radius:var(--at-radius-md);font-family:var(--at-font-body);font-weight:600;font-size:.9375rem;line-height:1;white-space:nowrap;border:1px solid transparent;position:relative;transition:background-color var(--at-d-base) var(--at-ease-out),color var(--at-d-base) var(--at-ease-out),border-color var(--at-d-base) var(--at-ease-out),transform var(--at-d-base) var(--at-ease-out),box-shadow var(--at-d-base) var(--at-ease-out)}
.at-btn svg{width:20px;height:20px;flex:none}
.at-btn--primary{background:var(--at-accent);color:var(--at-accent-ink)}
.at-btn--primary:hover{background:var(--at-accent-hover);transform:translateY(-1px);box-shadow:var(--at-shadow-sm)}
.at-btn--primary:active{transform:none;box-shadow:none}
.at-btn--secondary{border-color:var(--at-ink);color:var(--at-ink);background:transparent}
.at-btn--secondary:hover{background:var(--at-ink);color:var(--at-bg)}
.at-btn--ghost{padding:0;height:auto;border:0;color:var(--at-ink);gap:var(--at-s-2)}
.at-btn--ghost svg{transition:transform var(--at-d-base) var(--at-ease-out)}
.at-btn--ghost:hover svg{transform:translateX(4px)}
.at-btn--ghost::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--at-d-base) var(--at-ease-out)}
.at-btn--ghost:hover::after{transform:scaleX(1)}
.at-btn--panel{background:var(--at-panel-ink);color:var(--at-panel)}
.at-btn--panel:hover{background:#fff;transform:translateY(-1px)}
.at-btn--danger{background:var(--at-danger);color:#fff}
.at-btn--sm{height:var(--at-btn-h-sm);padding:0 var(--at-s-4);font-size:.875rem}
.at-btn--lg{height:var(--at-btn-h-lg);padding:0 var(--at-s-6);font-size:1rem}
.at-btn[disabled],.at-btn.is-disabled{opacity:.5;pointer-events:none}

/* Srce liste želja (partial shop/partials/wish) - kartica 36px preko slike, PDP 52px uz dugme */
.at-wish{display:inline-grid;place-content:center;width:44px;height:44px;border-radius:50%;color:var(--at-ink);transition:color var(--at-d-base) var(--at-ease-out),background-color var(--at-d-base) var(--at-ease-out),border-color var(--at-d-base) var(--at-ease-out),transform var(--at-d-fast) var(--at-ease-spring)}
.at-wish svg{width:20px;height:20px;fill-opacity:0;transition:fill-opacity var(--at-d-base) var(--at-ease-out),transform var(--at-d-slow) var(--at-ease-spring)}
.at-wish:hover{color:var(--at-sale)}
.at-wish[aria-pressed="true"]{color:var(--at-sale)}
.at-wish[aria-pressed="true"] svg{fill-opacity:1}
.at-wish.is-pop svg{transform:scale(1.25)}
.at-wish.is-busy{opacity:.6;pointer-events:none}
.at-btn.is-loading{color:transparent;pointer-events:none}
.at-btn.is-loading::before{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;color:var(--at-accent-ink);animation:at-spin .8s linear infinite}
.at-btn--secondary.is-loading::before{color:var(--at-ink)}
@keyframes at-spin{to{transform:rotate(360deg)}}
.at-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--at-radius-md);color:var(--at-ink);position:relative;transition:background-color var(--at-d-base) var(--at-ease-out),color var(--at-d-base) var(--at-ease-out)}
.at-icon-btn:hover{background:var(--at-surface-2)}
.at-icon-btn svg{width:22px;height:22px}

/* 5.21 Forme */
.at-form{display:grid;gap:var(--at-s-5)}
.at-form__row{display:grid;gap:var(--at-s-5)}
@media (min-width:40em){.at-form__row--2{grid-template-columns:1fr 1fr}}
.at-field{display:grid;gap:var(--at-s-2)}
.at-field__label,.at-form label{font-size:var(--at-fs-small);font-weight:600;color:var(--at-ink)}
.at-field__label small,.at-form label small{font-weight:400;color:var(--at-muted)}
.at-form .wpcf7-form-control-wrap{display:block}
.at-form fieldset{border:0;padding:0;margin:0;min-width:0}
.at-form .hidden-fields-container{display:none}
.at-input,.at-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),.at-form textarea,.at-form select{width:100%;height:var(--at-input-h);padding:0 14px;background:var(--at-surface);border:1px solid var(--at-line-strong);border-radius:var(--at-radius-sm);color:var(--at-ink);font-size:1rem;transition:border-color var(--at-d-fast) var(--at-ease-out),box-shadow var(--at-d-fast) var(--at-ease-out);appearance:none}
.at-form textarea,textarea.at-input{height:auto;min-height:140px;padding:12px 14px;line-height:1.5;resize:vertical}
.at-input::placeholder,.at-form input::placeholder,.at-form textarea::placeholder{color:var(--at-muted)}
.at-input:hover,.at-form input:hover,.at-form textarea:hover{border-color:var(--at-ink)}
.at-input:focus,.at-form input:focus,.at-form textarea:focus,.at-form select:focus{outline:none;border-color:var(--at-accent);box-shadow:var(--at-ring)}
.at-form .wpcf7-not-valid,.at-input.is-invalid{border-color:var(--at-danger)}
.at-form .wpcf7-not-valid-tip,.at-field__error{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:var(--at-fs-small);color:var(--at-danger)}
.at-form .wpcf7-not-valid-tip::before,.at-field__error::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M8 4.5v4M8 11v.5' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.at-form .wpcf7-spinner{display:none}
.at-form .wpcf7-response-output{margin:0;padding:var(--at-s-3) var(--at-s-4);border:1px solid var(--at-line);border-left:3px solid var(--at-danger);border-radius:var(--at-radius-sm);background:var(--at-surface);font-size:var(--at-fs-small);color:var(--at-ink)}
.at-form .wpcf7-form.sent .wpcf7-response-output{display:none}
.at-form .wpcf7-form.invalid .wpcf7-response-output,.at-form .wpcf7-form.failed .wpcf7-response-output{border-left-color:var(--at-danger)}
.at-form .wpcf7-form.init .wpcf7-response-output{display:none}
.at-form__consent{display:flex;gap:var(--at-s-3);align-items:flex-start;font-size:var(--at-fs-small);color:var(--at-muted);font-weight:400}
.at-form__consent a{color:var(--at-accent)}
.at-form .wpcf7-acceptance .wpcf7-list-item{margin:0}
.at-form .wpcf7-acceptance label{display:flex;gap:var(--at-s-3);align-items:flex-start;font-weight:400;font-size:var(--at-fs-small);color:var(--at-muted);cursor:pointer}
.at-form input[type=checkbox]{appearance:none;flex:none;width:20px;height:20px;margin-top:1px;border:1px solid var(--at-line-strong);border-radius:4px;background:var(--at-surface);display:grid;place-content:center;transition:background-color var(--at-d-fast),border-color var(--at-d-fast)}
.at-form input[type=checkbox]::before{content:"";width:10px;height:10px;transform:scale(0);background:var(--at-accent-ink);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 5 9l5-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--at-d-fast) var(--at-ease-spring)}
.at-form input[type=checkbox]:checked{background:var(--at-accent);border-color:var(--at-accent)}
.at-form input[type=checkbox]:checked::before{transform:scale(1)}
.at-form input[type=checkbox]:focus-visible{outline:2px solid var(--at-focus);outline-offset:2px}
.at-form .wpcf7-submit,.at-form input[type=submit]{display:inline-flex;align-items:center;justify-content:center;height:var(--at-input-h);padding:0 var(--at-s-6);border:0;border-radius:var(--at-radius-md);background:var(--at-accent);color:var(--at-accent-ink);font-weight:600;font-size:1rem;cursor:pointer;width:auto;justify-self:start;transition:background-color var(--at-d-base) var(--at-ease-out),transform var(--at-d-base) var(--at-ease-out),box-shadow var(--at-d-base) var(--at-ease-out)}
.at-form .wpcf7-submit:hover{background:var(--at-accent-hover);transform:translateY(-1px);box-shadow:var(--at-shadow-sm)}
.at-form .wpcf7-form.submitting .wpcf7-submit{color:transparent;pointer-events:none;position:relative}
.at-form .wpcf7-form.submitting .wpcf7-submit::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid var(--at-accent-ink);border-right-color:transparent;animation:at-spin .8s linear infinite}
.at-form__actions{display:flex;align-items:center;gap:var(--at-s-4);flex-wrap:wrap}
.at-form__actions p{font-size:var(--at-fs-small);color:var(--at-muted)}
.at-form__success{display:grid;gap:var(--at-s-3);padding:var(--at-s-6);border:1px solid var(--at-line);border-radius:var(--at-radius-lg);background:var(--at-surface)}
.at-form__success svg{width:40px;height:40px;color:var(--at-success);animation:at-pop 320ms var(--at-ease-spring) both}
@keyframes at-pop{from{transform:scale(.6);opacity:0}}
.at-form__success h3{font-size:var(--at-fs-h3);line-height:var(--at-lh-h3)}
.at-form.is-sent .wpcf7{display:none}
.at-honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 5.12 čip, 5.25 badge */
.at-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 var(--at-s-4);border-radius:var(--at-radius-pill);border:1px solid var(--at-line-strong);background:transparent;color:var(--at-ink-2);font-size:var(--at-fs-small);font-weight:500;white-space:nowrap;transition:background-color var(--at-d-base) var(--at-ease-out),border-color var(--at-d-base) var(--at-ease-out),color var(--at-d-base) var(--at-ease-out),transform var(--at-d-fast) var(--at-ease-spring)}
.at-chip:hover{border-color:var(--at-ink);color:var(--at-ink)}
.at-chip:active{transform:scale(.96)}
.at-chip.is-active,.at-chip[aria-current]{background:var(--at-ink);border-color:var(--at-ink);color:var(--at-bg)}
.at-chip__count{font-variant-numeric:tabular-nums;color:var(--at-muted);font-size:var(--at-fs-micro)}
.at-chip.is-active .at-chip__count{color:var(--at-panel-muted)}
.at-chips{display:flex;gap:var(--at-s-2);flex-wrap:wrap}
@media (max-width:47.99em){.at-chips--scroll{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--at-s-2);margin-inline:calc(-1 * var(--at-gutter));padding-inline:var(--at-gutter);scrollbar-width:none}.at-chips--scroll > *{scroll-snap-align:start}}
.at-badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--at-radius-sm);font-size:var(--at-fs-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--at-surface-2);color:var(--at-muted)}
.at-badge--sale{background:var(--at-sale-soft);color:var(--at-sale)}
.at-badge--new{background:var(--at-ink);color:var(--at-bg)}
.at-badge--info{background:var(--at-accent-soft);color:var(--at-accent)}
.at-badge--success{background:var(--at-success-soft);color:var(--at-success)}

/* 5.23 Breadcrumb */
.at-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:var(--at-fs-small);color:var(--at-muted)}
.at-breadcrumb a:hover{color:var(--at-ink)}
.at-breadcrumb [aria-current]{color:var(--at-ink)}
.at-breadcrumb svg{width:12px;height:12px;opacity:.7}

/* 5.22 Toast + alert */
.at-toasts{position:fixed;right:var(--at-s-5);bottom:var(--at-s-5);z-index:var(--at-z-toast);display:grid;gap:var(--at-s-3);width:min(360px,calc(100vw - 2*var(--at-s-4)));pointer-events:none}
@media (max-width:39.99em){.at-toasts{right:auto;left:50%;transform:translateX(-50%);bottom:var(--at-s-4)}}
.at-toast{pointer-events:auto;display:grid;grid-template-columns:20px 1fr auto;gap:var(--at-s-3);align-items:start;padding:var(--at-s-4);background:var(--at-surface);border:1px solid var(--at-line);border-left:3px solid var(--at-success);border-radius:var(--at-radius-md);box-shadow:var(--at-shadow-md);font-size:var(--at-fs-small);color:var(--at-ink);animation:at-toast-in 240ms var(--at-ease-out) both}
.at-toast--danger{border-left-color:var(--at-danger)}
.at-toast--info{border-left-color:var(--at-accent)}
.at-toast svg{width:20px;height:20px;color:var(--at-success)}
.at-toast--danger svg{color:var(--at-danger)}
.at-toast--info svg{color:var(--at-accent)}
.at-toast__close{width:24px;height:24px;display:grid;place-content:center;color:var(--at-muted);border-radius:4px}
.at-toast__close:hover{color:var(--at-ink);background:var(--at-surface-2)}
.at-toast.is-leaving{animation:at-toast-out 160ms var(--at-ease-in) forwards}
@keyframes at-toast-in{from{opacity:0;transform:translateY(16px)}}
@keyframes at-toast-out{to{opacity:0;transform:translateY(8px)}}
.at-alert{display:flex;gap:var(--at-s-3);padding:var(--at-s-4);border:1px solid var(--at-line);border-left:3px solid var(--at-accent);border-radius:var(--at-radius-sm);background:var(--at-surface);font-size:var(--at-fs-small)}
.at-alert--danger{border-left-color:var(--at-danger)}
.at-alert--success{border-left-color:var(--at-success)}

/* 5.20 Prazno stanje */
.at-empty{max-width:32rem;margin-inline:auto;text-align:center;display:grid;gap:var(--at-s-4);justify-items:center;padding-block:var(--at-section)}
.at-empty svg{width:96px;height:96px;color:var(--at-muted)}
.at-empty h1,.at-empty h3{font-size:var(--at-fs-h2);line-height:var(--at-lh-h2)}
.at-empty > p{max-width:36ch}
.at-empty .at-drawer__search{width:100%;max-width:26rem}
.at-empty__actions{display:flex;gap:var(--at-s-4);flex-wrap:wrap;justify-content:center;margin-top:var(--at-s-2)}

/* Akordeon (FAQ) */
.at-acc{border-top:1px solid var(--at-line)}
.at-acc__item{border-bottom:1px solid var(--at-line)}
.at-acc__btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--at-s-5);padding:var(--at-s-5) 0;text-align:left;font-family:var(--at-font-display);font-weight:var(--at-display-weight);font-size:var(--at-fs-h4);letter-spacing:-.01em;line-height:var(--at-lh-h4);color:var(--at-ink)}
.at-acc__btn:hover{color:var(--at-accent)}
.at-acc__icon{flex:none;width:24px;height:24px;color:var(--at-muted);transition:transform var(--at-d-slow) var(--at-ease-out)}
.at-acc__btn[aria-expanded="true"] .at-acc__icon{transform:rotate(45deg)}
.at-acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--at-d-slow) var(--at-ease-out)}
.at-acc__panel > div{overflow:hidden;min-height:0}
.at-acc__item.is-open .at-acc__panel{grid-template-rows:1fr}
.at-acc__body{padding:0 0 var(--at-s-5);max-width:var(--at-prose-max);color:var(--at-ink-2)}

/* 5.24 Paginacija */
.at-pagination{display:flex;align-items:center;gap:var(--at-s-2);flex-wrap:wrap;justify-content:center;margin-top:var(--at-s-8)}
.at-pagination a,.at-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 var(--at-s-3);border-radius:var(--at-radius-md);font-size:var(--at-fs-small);font-weight:600;font-variant-numeric:tabular-nums;color:var(--at-ink-2);transition:background-color var(--at-d-base) var(--at-ease-out),color var(--at-d-base) var(--at-ease-out)}
.at-pagination a:hover{background:var(--at-surface-2);color:var(--at-ink)}
.at-pagination [aria-current]{background:var(--at-ink);color:var(--at-bg)}
.at-pagination svg{width:16px;height:16px}
.at-pagination__dots{color:var(--at-muted)}

/* Avatar */
.at-avatar{display:inline-grid;place-content:center;width:44px;height:44px;border-radius:50%;background:var(--at-surface-2);color:var(--at-ink);font-family:var(--at-font-display);font-weight:600;font-size:var(--at-fs-small);letter-spacing:.02em}

/* Ikone */
.at-i{width:20px;height:20px;flex:none}
.at-social{display:flex;gap:var(--at-s-2)}
.at-social a{display:grid;place-content:center;width:40px;height:40px;border-radius:var(--at-radius-md);color:var(--at-muted);transition:color var(--at-d-base) var(--at-ease-out),background-color var(--at-d-base) var(--at-ease-out)}
.at-social a:hover{color:var(--at-ink);background:var(--at-surface-2)}
.at-social svg{width:20px;height:20px}
.at-panel .at-social a,.at-footer--columns .at-social a{color:var(--at-panel-muted)}
.at-panel .at-social a:hover,.at-footer--columns .at-social a:hover{color:var(--at-panel-ink);background:rgba(255,255,255,.08)}