.renew-alert {
    background: #763053;
    color: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 10px 0 14px;
    display: flex;
    gap: 12px;
    align-items: center;
}


.renew-alert__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    display: grid;
    place-items: center
}

.renew-alert__text {
    margin-bottom: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 10px 15px;
    color: white !important;
    font-family: TTHazelnuts-black !important;
    text-align: center !important;
    margin-top: 17px;
    font-size: 1.8rem;
}

.renew-alert__sub {
    margin: 0;
    padding: 0 15px;
    color: white !important;
    font-family: TTHazelnuts-black !important;
    text-align: center !important;
}

.renew-grid {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin: 10px 0 18px
}

.renew-card {
    border: 1px solid rgba(10, 71, 207, .25);
    border-radius: 12px;
    padding: 14px;
    background: #0b1a3a0d
}

.renew-card__title {
    margin: 0 0 6px 0;
    font-weight: 800 !important;
    font-size: 19px !important;
    text-decoration: underline;
}

.renew-meta {

    margin: 25px 15px;
}

.renew-chip {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(10, 71, 207, .25);
    background: #0a47cf0d
}

.renew-price {
    font-size: 24px;
    font-weight: 900;
    margin: 8px 0
}

.renew-price small {
    font-size: 12px;
    font-weight: 600;
    opacity: .7
}

.renew-cta {

}

.btn-renew {
    appearance: none;
    border: none;
    background: #0a47cf;
    color: #fff;
    font-weight: 800;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.btn-renew:hover {
    filter: brightness(.95)
}

.btn-ghost {
    background: transparent;
    border: 1px solid rgba(10, 71, 207, .35);
    color: #0a47cf
}

.renew-note {
    font-size: 12px;
    color: #334155;
    margin-top: 8px
}

/* Accent (optional) */
.accent {
    color: #20c997
}

@media (max-width: 720px) {
    .renew-alert {
        flex-direction: column;
        align-items: flex-start
    }
}


:root {
    --buy-bg: #ffd54a;           /* základní žlutá */
    --buy-bg-hi: #ffcc00;        /* zvýrazněná žlutá */
    --buy-bg-lo: #ffb300;        /* tmavší žlutá pro gradient */
    --buy-text: #1b1b1b;         /* text/ikona */
    --buy-ring: 66 153 225;      /* focus ring (rgb bez #) */
}

.btn-buy {
    --shadow: 0 8px 18px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.08);
    --shadow-active: 0 4px 12px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.1);
    appearance: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem 2.6rem;
    margin: 14px 13px;
    border-radius: 999px; /* pilulka */
    font: 600 1.05rem/1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--buy-text);
    background:
            linear-gradient(180deg, var(--buy-bg-hi), var(--buy-bg)) padding-box,
            linear-gradient(180deg, #fff8, #0000) border-box;
    box-shadow: var(--shadow);
    transform: translateZ(0);
    transition: transform .12s ease, box-shadow .12s ease, filter .2s ease, background .2s ease;
    border: 1px solid rgba(0,0,0,.06);
}

.btn-buy.type2 .btn-buy__label{
    font-size: 112% !important;
    min-width: 500px !important;
    text-align: center !important;
}

.btn-buy:hover {
    filter: saturate(1.05);
    background: linear-gradient(180deg, var(--buy-bg-hi), var(--buy-bg-lo));
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}
.btn-buy:active {
    transform: translateY(0);
    box-shadow: var(--shadow-active);
    background: linear-gradient(180deg, var(--buy-bg), var(--buy-bg-lo));
}
.btn-buy:focus-visible {
    outline: none;
    box-shadow:
            0 0 0 3px rgba(var(--buy-ring)/.4),
            var(--shadow);
}
.btn-buy:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-buy__icon {
    display: inline-grid;
    place-items: center;
    width: 2.25rem; height: 2.25rem;
    border-radius: 999px;
    background: rgba(0,0,0,.08);
}
.btn-buy__label {
    white-space: nowrap;
    letter-spacing: .2px;
}

/* Volitelně: „mega“ velikost */
.btn-buy.btn-buy--xl {
    padding: 1.2rem 1.9rem;
    font-size: 1.15rem;
}
.btn-buy.btn-buy--xl .btn-buy__icon {
    width: 2.5rem; height: 2.5rem;
}

.flashzone {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: grid;
    gap: 8px;
    pointer-events: none;
}

.flashzone .flash {
    font-size: 14px;
    font-family: inherit;
    min-width: 220px;       /* ⬅ minimální šířka */
    max-width: 360px;
    padding: 10px 14px 10px 34px; /* místo vlevo na ikonu */
    border-radius: 6px;
    opacity: 1;
    background: #eee;
    color: #333;
    animation: fadeOut 7s forwards; /* ⬅ zobrazení delší (7s) */
    transition: opacity .4s ease-out;
    pointer-events: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    position: relative;
    text-align: right;      /* ⬅ obsah doprava */
}

/* ikona pomocí pseudo-elementu */
.flash::before {
    content: "ℹ";          /* default info ikonka */
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    opacity: 0.6;
}

/* Variace – pastelové i s ikonou */
.flash--success { background: #d4f7d0 !important; color: #245c2a !important; }
.flash--success::before { content: "✔"; }

.flash--error   { background: #ffd6d6 !important; color: #7a1f1f !important; }
.flash--error::before   { content: "⚠"; }

.flash--info    { background: #d8ecff !important; color: #1f3c7a !important; }
.flash--info::before    { content: "ℹ"; }

@keyframes fadeOut {
    0%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { opacity: 0; }
}




 :root{
     --primary-color-1: #0d6efd;
     --info: #0dcaf0;
     --danger: #dc3545;
     --border: #e5e7eb;
     --muted: #6b7280;
     --bg: #ffffff;
 }
*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* Container */
.container{
    width:100%;
    margin-right:auto;
    margin-left:auto;
    padding-left:12px;
    padding-right:12px;
    max-width:100%;
}
@media (min-width: 992px){ .container{ max-width: 960px; } }
@media (min-width:1200px){ .container{ max-width:1140px; } }

/* Grid */
.row{
    display:flex;
    flex-wrap:wrap;
    margin-left:-12px;
    margin-right:-12px;
}
[class^="col-"], [class*=" col-"]{
    padding-left:12px;
    padding-right:12px;
    flex:0 0 100%;
    max-width:100%;
}

/* Base cols (mobile-first) */
.col-6{ flex:0 0 50%; max-width:50%; }

/* LG cols */
@media (min-width: 992px){
    .col-lg-4{ flex:0 0 33.3333%; max-width:33.3333%; }
    .col-lg-6{ flex:0 0 50%;      max-width:50%; }
    .col-lg-8{ flex:0 0 66.6667%; max-width:66.6667%; }
}

/* XL cols */
@media (min-width:1200px){
    .col-xl-12{ flex:0 0 100%; max-width:100%; }
}

/* Offsets */
.offset-2{ margin-left:16.6667%; }
@media (min-width: 992px){
    .offset-lg-2{ margin-left:16.6667%; }
}

/* Utilities (jen co používáš) */
.mb-5{ margin-bottom:1.25rem !important; }
.mt-10{ margin-top:10px !important; }
.xl-mb-30{ margin-bottom:0 !important; }
@media (min-width:1200px){ .xl-mb-30{ margin-bottom:30px !important; } }

/* Card */
.card{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:8px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    padding:16px;
}
.card-header{
    padding:12px 16px;
    border-bottom:1px solid var(--border);
    background:#fafafa;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
}
.card-body{ padding:16px; }
.card > .card-header + .card-body{ padding-top:12px; }

/* Text helpers */
.subtitle-four{
    font-size:14px;
    font-weight:600;
    color:#111827;
}

/* Forms */
.form-label{
    display:block;
    font-weight:600;
    margin-bottom:6px;
}
.form-control{
    display:block;
    width:100%;
    padding:.5rem .75rem;
    border:1px solid var(--border);
    border-radius:6px;
    background:#fff;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus{
    border-color: var(--primary-color-1);
    box-shadow:0 0 0 .15rem rgba(13,110,253,.15);
}

/* Badge */
.badge{
    display:inline-block;
    font-size:.8rem;
    line-height:1;
    padding:.4rem .55rem;
    border-radius:.35rem;
}
.badge-danger{
    background:var(--danger);
    color:#fff;
}

/* Buttons */
.btn{
    display:inline-block;
    font-weight:600;
    text-decoration:none;
    border:1px solid transparent;
    padding:.375rem .75rem;
    border-radius:.375rem;
    cursor:pointer;
    transition:opacity .15s ease, filter .15s ease;
}
.btn:hover{ filter:brightness(0.96); }
.btn:active{ filter:brightness(0.92); }
.btn-sm{ padding:.25rem .5rem; font-size:.9rem; border-radius:.3rem; }
.btn-info{ background:var(--info); color:#052c36; border-color:var(--info); }

/* HR */
hr{
    border:0;
    border-top:1px solid var(--border);
    margin:16px 0;
}


textarea{
    display:block;
    width:100%;
    border:1px solid var(--border);
    border-radius:6px;
    padding:.5rem .75rem;
    min-height:100px;
}

/* Pomocné layouty pro „request__quote-page“ (volitelné) */
.request__quote-page-left h2{ margin:0 0 .25rem; }
.request__quote-page-left p{ margin:.25rem 0 1rem; color:var(--muted); }


.add-contract form label {
    color:  #763053 !important;
}

.add-contract form input {
    border: 1px solid #763053 !important;
    color:  #763053 !important;
}

.add-contract form select {
    border: 1px solid #763053 !important;
    color:  #763053 !important;
}

.renew-grid table{
    width: 100%;
    color: var(--muted);
}

/* === Kompaktní tabulka detailu produktu (bez rámu, jen horizontální čáry) === */
:root{
    --brand: #763053;
    --text: #3f3f46;         /* šedý text místo černé */
    --label: #55525a;        /* lehce tlumené popisky */
    --rule: #76305333;       /* horizontální čáry (alpha) */
}

.product-details{
    width:100%;
    border-collapse: collapse; /* bez mezer, čisté čáry */
    background: transparent;   /* žádné orámování */
    color: var(--text);
    font-size: 14px;
    line-height: 1.35;
}

/* volitelný caption, decentní */
.product-details caption{
    text-align:left;
    font-weight:600;
    color: var(--brand);
    margin: 0 0 6px;
    font-size: 13px;
}

/* buňky */
.product-details td{
    padding: 6px 8px;             /* kompaktnější mezery */
    vertical-align: top;
    border-bottom: 1px solid var(--rule); /* jen horizontální dělítka */
}

/* poslední řádek bez čáry */
.product-details tr:last-child td{
    border-bottom: 0;
}

/* popisek (první sloupec) – jemné odlišení */
.product-details td:first-child{
    width: 36%;                   /* fixní šířka labelů */
    color: var(--label);
    font-weight: 600;
    white-space: nowrap;          /* udrží label v jednom řádku, je-li to možné */
    padding-right: 8px;
}

/* hodnota (druhý sloupec) */
.product-details td:last-child{
    color: var(--text);
    word-break: break-word;       /* kdyby přišly dlouhé řetězce */
}

/* odkazy uvnitř hodnot */
.product-details a{
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ještě “těsnější” varianta – přidej třídu .compact (viz příklad) */
.product-details.compact td{
    padding: 4px 6px;
    font-size: 13.5px;
}

/* mobile drobnost: ať se label může zalomit, když je málo místa */
@media (max-width: 480px){
    .product-details td:first-child{
        white-space: normal;
        width: 42%;
    }
}