/* ===========================================================================
   ALRE.cz - 'Hodí se k sobě' - styly
   Jeden sdílený CSS soubor pro detail produktu i homepage (prefixy se neliší,
   takže se nebijí). Nahraj do Shoptetu: Soubory ke stažení (nebo Doplňky >
   Soubory), zjisti si výslednou URL (/user/documents/upload/NAZEV.css) a tu
   vlož do patičky jako <link rel="stylesheet" href="...">.
   =========================================================================== */

/* --- Vlastní animace přidání do košíku (sdílené) ---
   Vlastní, jedna klidná animace místo Shoptetovy (ta se během přidávání
   bundlu dočasně vypíná v JS). Spinner během přidávání, zelené zatržítko
   + krátký "glow" boxu po úspěchu. */
  @keyframes alre-spin{to{transform:rotate(360deg)}}
  @keyframes alre-pop{0%{transform:scale(.4);opacity:0}65%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
  .alre-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:alre-spin .6s linear infinite;vertical-align:-2px;margin-right:2px}
  .alre-check{display:inline-block;animation:alre-pop .35s ease;vertical-align:-1px;margin-right:2px}

/* --- Velké potvrzovací okno po dokončení (náhrada Shoptetova nativního) --- */
  @keyframes alre-backdrop-in{from{opacity:0}to{opacity:1}}
  @keyframes alre-modal-in{0%{opacity:0;transform:scale(.9) translateY(10px)}100%{opacity:1;transform:scale(1) translateY(0)}}
  @keyframes alre-check-pop{0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
  .alre-added-backdrop{position:fixed;inset:0;background:rgba(17,10,28,.55);z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;animation:alre-backdrop-in .25s ease}
  .alre-added-modal{background:#fff;border-radius:20px;max-width:380px;width:100%;padding:32px 28px 28px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:alre-modal-in .35s cubic-bezier(.34,1.56,.64,1);position:relative}
  .alre-added-modal__close{position:absolute;top:14px;right:14px;width:28px;height:28px;border:0;background:#f3eefc;border-radius:50%;color:#6d28d9;font-size:16px;cursor:pointer;line-height:1}
  .alre-added-modal__close:hover{background:#ece3fb}
  .alre-added-modal__icon{width:64px;height:64px;border-radius:50%;background:#eafaf0;color:#1a7f37;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;animation:alre-check-pop .4s cubic-bezier(.34,1.56,.64,1) .1s both}
  .alre-added-modal__title{font-size:19px;font-weight:800;color:#1f1b24;margin:0 0 4px}
  .alre-added-modal__subtitle{font-size:13.5px;color:#6b6475;margin:0 0 18px}
  .alre-added-modal__items{display:flex;justify-content:center;gap:8px;margin-bottom:22px;flex-wrap:wrap}
  .alre-added-modal__items img{width:48px;height:48px;object-fit:contain;border:1px solid #ece7f2;border-radius:10px;background:#fbfaff;padding:4px}

/* --- Stav k dopravě zdarma (uvnitř potvrzovacího okna) --- */
  .alre-shipping-progress{background:#f8f3ff;border:1px solid #ece3fb;border-radius:12px;padding:12px 14px;margin:0 0 20px;text-align:left}
  .alre-shipping-progress.is-done{background:#eafaf0;border-color:#d7f3e1}
  .alre-shipping-progress__row{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#4b1f8f;margin-bottom:8px}
  .alre-shipping-progress.is-done .alre-shipping-progress__row{color:#1a7f37}
  .alre-shipping-progress__row b{font-weight:800}
  .alre-shipping-progress__row svg{flex:none;color:#1a7f37}
  .alre-shipping-progress__bar{height:7px;border-radius:4px;background:#e4d9f7;overflow:hidden}
  .alre-shipping-progress.is-done .alre-shipping-progress__bar{background:#cdf0da}
  .alre-shipping-progress__fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#8b5cf6,#6d28d9);transition:width .5s cubic-bezier(.34,1.56,.64,1)}
  .alre-shipping-progress.is-done .alre-shipping-progress__fill{background:linear-gradient(90deg,#34ba6b,#1a7f37)}

  .alre-added-modal__actions{display:flex;flex-direction:column;gap:10px}
  .alre-added-modal__btn{display:block;width:100%;padding:13px;border-radius:10px;font-size:14.5px;font-weight:700;text-decoration:none;cursor:pointer;border:0;box-sizing:border-box}
  .alre-added-modal__btn--primary{background:#6d28d9;color:#fff}
  .alre-added-modal__btn--primary:hover{background:#5b21b6}
  .alre-added-modal__btn--ghost{background:#f6f3fb;color:#1f1b24}
  .alre-added-modal__btn--ghost:hover{background:#ece3fb}

/* --- Detail produktu --- */
  .alre-bundle{margin:32px 0;padding:26px 28px;border:1px solid #ece7f2;border-radius:18px;background:#fff;box-shadow:0 2px 18px rgba(109,40,217,.07);transition:box-shadow .4s ease}
  .alre-bundle.is-success-flash{box-shadow:0 0 0 5px rgba(26,127,55,.18),0 2px 18px rgba(109,40,217,.07)}
  .alre-bundle__btn.is-success{background:#1a7f37!important;box-shadow:0 4px 14px rgba(26,127,55,.35)!important}
  .alre-bundle__head{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px}
  .alre-bundle__icon{flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#a855f7,#6d28d9);display:flex;align-items:center;justify-content:center;color:#fff}
  .alre-bundle__title{font-size:19px;font-weight:800;color:#1f1b24;margin:0 0 3px;letter-spacing:-.2px}
  .alre-bundle__subtitle{font-size:13px;color:#8a7ba3;margin:0}
  .alre-bundle__row{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin-bottom:20px}
  .alre-bundle__card{position:relative;flex:1 1 150px;min-width:132px;max-width:190px;display:flex;flex-direction:column;background:#fbfaff;border:1.5px solid #ece7f2;border-radius:14px;padding:14px 12px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
  .alre-bundle__card:hover{border-color:#cdbdea}
  .alre-bundle__card.is-checked{border-color:#c9b6f0;box-shadow:0 0 0 3px #f1edfb}
  .alre-bundle__card.is-main{background:#f6f1fd;border-color:#e1d4f7;cursor:default}
  .alre-bundle__checkbox{position:absolute;top:10px;right:10px;width:19px;height:19px;accent-color:#6d28d9;cursor:pointer;z-index:2}
  .alre-bundle__checkbox:disabled{cursor:default;opacity:.9}
  .alre-bundle__thumb-wrap{display:flex;align-items:center;justify-content:center;height:84px;margin-bottom:10px}
  .alre-bundle__thumb{max-width:100%;max-height:84px;object-fit:contain}
  .alre-bundle__name{display:block;font-size:12.5px;color:#1f1b24;line-height:1.35;text-decoration:none;min-height:34px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .alre-bundle__name:hover{color:#6d28d9}
  .alre-bundle__name--main{font-weight:700}
  .alre-bundle__tag{display:inline-block;font-size:10px;font-weight:800;color:#6d28d9;background:#ece3fb;border-radius:6px;padding:2px 7px;margin-bottom:6px;align-self:flex-start}
  .alre-bundle__price{margin-top:8px;font-size:14px;font-weight:800;color:#1f1b24}
  .alre-bundle__plus{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:22px;font-size:20px;font-weight:300;color:#cdbdea;align-self:center}
  .alre-bundle__footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #ece7f2;padding-top:18px}
  .alre-bundle__total{font-size:13px;color:#6b6475}
  .alre-bundle__total b{color:#1f1b24;font-size:17px}
  .alre-bundle__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#6d28d9;color:#fff;border:0;border-radius:10px;padding:13px 24px;font-size:14.5px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 4px 14px rgba(109,40,217,.28);transition:background .15s,transform .15s}
  .alre-bundle__btn:hover{background:#5b21b6;transform:translateY(-1px)}
  .alre-bundle__btn:disabled{opacity:.6;cursor:default;transform:none}
  .alre-bundle__success{font-size:13.5px;font-weight:700;color:#1a7f37;margin-bottom:12px}
  .alre-bundle__success a{color:#6d28d9}
  .alre-bundle__error{font-size:13px;color:#b42318;margin-bottom:12px}

  @media (max-width: 680px){
    .alre-bundle{padding:18px 16px}
    .alre-bundle__row{gap:8px}
    .alre-bundle__card{flex:1 1 42%;max-width:none}
    .alre-bundle__plus{display:none}
    .alre-bundle__footer{flex-direction:column;align-items:stretch}
    .alre-bundle__btn{width:100%}
  }

/* --- Homepage --- */
  /* Na homepage je kolem spousta bannerů a barevných sekcí, takže box musí
     jít víc do očí – sytější okraj, barevný přechod na pozadí, silnější
     stín a pruh nahoře, aby se "neztratil" mezi okolním obsahem. */
  .alre-home-bundle{position:relative;margin:48px auto;max-width:1320px;padding:28px 28px 26px;border:1.5px solid #e2d4f9;border-radius:20px;background:linear-gradient(180deg,#f8f3ff 0%,#ffffff 65%);box-shadow:0 10px 32px rgba(109,40,217,.14);overflow:hidden;transition:box-shadow .4s ease}
  .alre-home-bundle.is-success-flash{box-shadow:0 0 0 5px rgba(26,127,55,.18),0 10px 32px rgba(109,40,217,.14)}
  .alre-home-bundle__btn.is-success{background:#1a7f37!important;box-shadow:0 4px 14px rgba(26,127,55,.35)!important}
  .alre-home-bundle::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#a855f7,#6d28d9)}
  .alre-home-bundle__head{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px}
  .alre-home-bundle__icon{flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#a855f7,#6d28d9);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 10px rgba(109,40,217,.35)}
  .alre-home-bundle__title{font-size:20px;font-weight:800;color:#1f1b24;margin:0 0 3px;letter-spacing:-.2px}
  .alre-home-bundle__subtitle{font-size:13px;color:#7a6b94;margin:0}
  .alre-home-bundle__row{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin-bottom:20px}
  .alre-home-bundle__card{position:relative;flex:1 1 150px;min-width:132px;max-width:190px;display:flex;flex-direction:column;background:#fff;border:1.5px solid #ece0fa;border-radius:14px;padding:14px 12px;cursor:pointer;transition:border-color .15s,box-shadow .15s;box-shadow:0 1px 4px rgba(109,40,217,.06)}
  .alre-home-bundle__card:hover{border-color:#cdbdea}
  .alre-home-bundle__card.is-checked{border-color:#c9b6f0;box-shadow:0 0 0 3px #f1edfb}
  .alre-home-bundle__checkbox{position:absolute;top:10px;right:10px;width:19px;height:19px;accent-color:#6d28d9;cursor:pointer;z-index:2}
  .alre-home-bundle__thumb-wrap{display:flex;align-items:center;justify-content:center;height:84px;margin-bottom:10px}
  .alre-home-bundle__thumb{max-width:100%;max-height:84px;object-fit:contain}
  .alre-home-bundle__name{display:block;font-size:12.5px;color:#1f1b24;line-height:1.35;text-decoration:none;min-height:34px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .alre-home-bundle__name:hover{color:#6d28d9}
  .alre-home-bundle__price{margin-top:8px;font-size:14px;font-weight:800;color:#1f1b24}
  .alre-home-bundle__plus{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:22px;font-size:20px;font-weight:300;color:#cdbdea;align-self:center}
  .alre-home-bundle__footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #ece7f2;padding-top:18px}
  .alre-home-bundle__total{font-size:13px;color:#6b6475}
  .alre-home-bundle__total b{color:#1f1b24;font-size:17px}
  .alre-home-bundle__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#6d28d9;color:#fff;border:0;border-radius:10px;padding:13px 24px;font-size:14.5px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 4px 14px rgba(109,40,217,.28);transition:background .15s,transform .15s}
  .alre-home-bundle__btn:hover{background:#5b21b6;transform:translateY(-1px)}
  .alre-home-bundle__btn:disabled{opacity:.6;cursor:default;transform:none}
  .alre-home-bundle__success{font-size:13.5px;font-weight:700;color:#1a7f37;margin-bottom:12px}
  .alre-home-bundle__success a{color:#6d28d9}
  .alre-home-bundle__error{font-size:13px;color:#b42318;margin-bottom:12px}

  @media (max-width: 680px){
    .alre-home-bundle{margin:24px 16px;padding:18px 16px}
    .alre-home-bundle__row{gap:8px}
    .alre-home-bundle__card{flex:1 1 42%;max-width:none}
    .alre-home-bundle__plus{display:none}
    .alre-home-bundle__footer{flex-direction:column;align-items:stretch}
    .alre-home-bundle__btn{width:100%}
  }