/* ==========================================================================
   TLAČÍTKA
   ========================================================================== */

/* společné odlehčené linkové tlačítko */
.btn-secondary-link {
    font-size: 13px;
    text-decoration: none;
    color: var(--color-primary);
}

.btn-secondary-link:hover {
    text-decoration: underline;
}

/* Override – zajistí, že všechny varianty tlačítek mají stejný základ */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-danger,
.btn-ghost,
.btn-sm,
.btn-lg,
.btn-search,
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-base);
    font-size: 14px;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    background: var(--color-bg-surface);
    color: var(--color-text-main);
    line-height: 1.4;
    transition:
        background var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.btn:focus,
.btn-primary:focus,
.btn-secondary:focus,
.btn-outline:focus,
.btn-danger:focus,
.btn-ghost:focus,
.btn-icon:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

/* Primární akce */
.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-invert);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: var(--shadow-soft);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}


/* Sekundární – světlejší */
.btn-secondary {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    border-color: var(--color-primary-soft);
}

.btn-secondary:hover {
    background: var(--color-primary-softer);
    border-color: var(--gray-300);
}


.btn-outline {
    background: transparent;
    border-color: var(--gray-300);
    color: var(--color-text-main);
}

.btn-outline:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}


/* Nebezpečná akce (mazání) – SOFT (default) */
.btn-danger {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

.btn-danger:hover {
    background: #fecaca;
    border-color: #f87171;
    box-shadow: var(--shadow-soft);
}

/* Nebezpečná akce (mazání) – SOLID (pro opravdu destruktivní akce) */
.btn-danger-solid{
    background: var(--color-danger);
    color: var(--color-text-invert);
    border-color: var(--color-danger);
}
.btn-danger-solid:hover{
    background: #b91c1c;
    border-color: #b91c1c;
    box-shadow: var(--shadow-soft);
}
/* Nenápadné tlačítko (ikonka, drobná akce) */
.btn-ghost {
    background: transparent;
    color: var(--color-text-main);
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--gray-100);
}

/* Tlačítko-ikona (např. lupa) */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
}

/* Tlačítko pro vyhledávání (vpravo u inputu) */
.btn-search {
    padding: 7px 12px;
    font-size: 13px;
}
/* ========================================================================== 
   VELIKOSTI TLAČÍTEK – JEDNOTNÝ SYSTÉM
   ========================================================================== */

/* Standard (default) – už existuje v .btn */

/* Malé */
.btn-sm {
    font-size: 12px;
    line-height: 1.2;
    padding: 6px 10px;
}

/* Velké */
.btn-lg {
    font-size: 15px;
    padding: 10px 18px;
}

/* Nechť varianty ctí velikost */
.btn-sm.btn-primary,
.btn-sm.btn-secondary,
.btn-sm.btn-outline,
.btn-sm.btn-danger,
.btn-sm.btn-ghost {
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.2;
}

.btn-lg.btn-primary,
.btn-lg.btn-secondary,
.btn-lg.btn-outline,
.btn-lg.btn-danger,
.btn-lg.btn-ghost {
    padding: 10px 18px;
    font-size: 15px;
}






/* ==========================================================================
   BUTTON UNIFICATION – compatibility layer (2025-12-28)
   Goal: keep templates unchanged, unify visuals
   ========================================================================== */

/* 1) Icon buttons: unify sizing + border + hover */
.btn-icon,
.btn-gmaps-icon,
.btn-icon-share {
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #ffffff;
  color: var(--color-text-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* icon color (uses currentColor in svg) */
.btn-icon, .btn-gmaps-icon, .btn-icon-share { color: var(--color-primary); }
.btn-icon svg, .btn-gmaps-icon svg, .btn-icon-share svg { width: 18px; height: 18px; }

/* consistent hover */
.btn-icon:hover,
.btn-gmaps-icon:hover,
.btn-icon-share:hover {
  background: var(--gray-100);
  transform: translateY(-1px);
}

/* remove special transforms that make it feel different */

/* 2) Phone “pill” button: align to system */
.btn-icon-phone {
  border: 1px solid var(--color-border);
  background: #ffffff;
  color: var(--color-text-main);
  border-radius: 999px;
}

/* hover for phone pill */
.btn-icon-phone:hover {
  background: var(--gray-100);
}

/* 3) Search button: keep class, make it look like compact system button */
.btn-search {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-300);
  background: var(--gray-50);
}

.btn-search:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
}

/* 4) Secondary link: keep link behavior, align typography */
.btn-secondary-link {
  font-size: 14px;
  font-weight: 500;
}

/* 5) Consistent focus ring for non-standard button classes */
.btn-search:focus,
.btn-icon-phone:focus,
.btn-gmaps-icon:focus,
.btn-icon-share:focus,
.btn-secondary-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
}

/* phone pill: never wrap number */
.btn-icon-phone { white-space: nowrap; }

/* phone pill: keep number aligned */
.btn-icon-phone .phone-text { font-variant-numeric: tabular-nums; }

/* === Back button (canonical) === */
.btn-back{
  white-space: nowrap;
  background: #eef3ff;
  border: 1px solid #cfe0ff;
  color: #1f3a8a;
}
.btn-back:hover{
  background: #e3ecff;
  border-color: #b8d2ff;
}