/* Definice barev v :root */
:root {
    /* Primární barvy */
    --primary-blue: #4970ff;
    --primary-dark-blue: #283050;
  
    /* Sekundární barvy - oranžová */
    --secondary-orange: #ffb450;
    --secondary-orange-50: #ffc77c;
    --secondary-orange-20: #ffe4c0;
  
    /* Sekundární barvy - červená */
    --secondary-red: #ff7666;
    --secondary-red-50: #ffb5b2;
    --secondary-red-20: #ffe5e0;
  
    /* Sekundární barvy - tyrkysová */
    --secondary-turquoise: #00b5b0;
    --secondary-turquoise-50: #a8e0e5;
    --secondary-turquoise-20: #dcf3f5;
  
    /* Sekundární barvy - modrá */
    --secondary-light-blue: #64c1fa;
    --secondary-light-blue-50: #b1dffc;
    --secondary-light-blue-20: #e0f3fe;
  
    /* Sekundární barvy - fialová */
    --secondary-purple: #9485f2;
    --secondary-purple-50: #c9f1f8;
    --secondary-purple-20: #eae7fc;
  
    /* Neutrální barvy */
    --neutral-light-gray: #fafafa;
    --neutral-white: #ffffff;
  }
  
  
      body {
          margin: 0;
          font-family: 'Inter', sans-serif !important;
          letter-spacing: -0.025em;
      }
  
  
         .card {
              background: white;
              border-radius: 8px;
              padding: 20px;
              margin-bottom: 20px;
              border: none;
          }
  
          .base-section {
              background-color: #d3e5f1;
          }
          .base-section2 {
              background-color: #d3e5f1;
              padding: 0;
              margin: 0;
          }
          .base-section-red {
              background-color: var(--secondary-orange-20);
          }
          .form-section {
              margin-bottom: 20px;
          }
  
          .form-label {
              font-weight: 500;
              color: #374151;
          }
  
          .form-control {
              border: 1px solid #d1d5db;
              border-radius: 8px;
              padding: 10px;
          }
  
          .form-control:focus {
              outline: none;
              box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
              border-color: #3b82f6;
          }
  
          .ic-section {
              background-color: var(--secondary-turquoise-50);
              padding: 20px;
              border-radius: 8px;
              margin-bottom: 20px;
          }
          .ic-input-group {
              display: flex;
              align-items: center;
              gap: 10px; /* Mezera mezi inputem a tlačítkem */
          }
  
          .ic-input-group input {
              flex-grow: 1; /* Input se roztáhne na maximální dostupnou šířku */
          }
  
          .ares-btn {
              white-space: nowrap; /* Zabraňuje zalomení textu na tlačítku */
          }
          .personal-card {
              background-color: var(--secondary-turquoise-20);
              padding: 20px;
              border-radius: 8px;
              margin-bottom: 20px;
          }
          .detail-card {
              background-color: var(--secondary-turquoise-20);
              padding: 20px;
              border-radius: 8px;
              margin-bottom: 20px;
          }
  
          .btn-primary {
              background-color: var(--primary-blue);
              border-color: var(--primary-blue);
              border-radius: 8px;
          }
  
          .btn-primary:hover {
              background-color: var(--primary-dark-blue);
              border-color: var(--primary-dark-blue);
          }
          .ares-btn {
          background-color: #309b9b;
          }
          .ares-btn:hover {
          background-color: #167777;
          }
  
          .souhlas-card {
              background-color: var(--secondary-purple-20);
              padding: 20px;
              border-radius: 8px;
              margin-bottom: 20px;
          }
  
          .info-icon {
              position: relative;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              width: 24px;
              height: 24px;
              border-radius: 50%;
              background-color: #d1d5db;
              color: #000;
              font-size: 14px;
              font-weight: bold;
              margin-left: 8px;
              cursor: pointer;
          }
  
          .info-icon:hover .tooltip-text {
              visibility: visible;
              opacity: 1;
          }
  
          .tooltip-text {
              visibility: hidden;
              width: 200px;
              background-color: #f9fafc;
              color: #374151;
              text-align: center;
              border-radius: 5px;
              padding: 8px;
              position: absolute;
              z-index: 1;
              bottom: 125%;
              left: 50%;
              font-size: 12px;
              font-weight: normal;
              margin-left: -100px;
              opacity: 0;
              transition: opacity 0.3s;
              box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
          }
  
          .tooltip-text::after {
              content: '';
              position: absolute;
              top: 100%;
              left: 50%;
              margin-left: -5px;
              border-width: 5px;
              border-style: solid;
              border-color: #f9fafc transparent transparent transparent;
          }
  
          #countdown-bar {
              position: fixed;
              top: 0;
              width: 100%;
              z-index: 1050;
              opacity: 0.8;
          }
  
          /* Formuláře - Obecné nastavení */
          form {
              margin-top: 20px;
              max-width: 600px;
          }
  
          /* Popisky */
          form label {
              font-weight: 600;
              margin-bottom: 5px;
              display: block;
          }
  
          /* Pole formuláře */
          form input, form select, form textarea {
              width: 100%;
              padding: 10px;
              margin-bottom: 15px;
              border: 1px solid #ced4da;
              border-radius: 5px;
              font-size: 1em;
          }
  
          /* Tlačítko */
          form button {
              background-color: #007bff;
              color: #fff;
              padding: 10px 20px;
              border: none;
              border-radius: 5px;
              cursor: pointer;
              font-size: 1em;
          }
  
          form button:hover {
              background-color: #0056b3;
          }
  
          /* Validace */
          form input:invalid, form select:invalid {
              border-color: #dc3545;
          }
  
          /* Checkboxy */
          form label input[type="checkbox"] {
              display: inline-block;
              width: auto;
              margin-right: 10px;
          }
  
          .text-lg {
              font-size: 1.5rem; /* Zvýší velikost textu */
              font-weight: bold; /* Zvýrazní text tučně */
              color:rgb(0, 0, 0); /* Modrá barva (Bootstrap primary) */
          }
  
          .btn-warning {
              background-color: var(--secondary-red-20);
              border-color: var(--secondary-red-20);
          }
  
          .btn-warning:hover {
              background-color: var(--secondary-red-50);
              border-color: var(--secondary-red-50);
          }
  
      .info-icon {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background-color: #dde0e9;
          color: #000;
          font-size: 14px;
          font-weight: bold;
          margin-left: 8px;
          cursor: pointer;
      }
  
      .info-icon:hover .tooltip-text {
          visibility: visible;
          opacity: 1;
      }
  
      .tooltip-text {
          visibility: hidden;
          width: 250px;
          background-color: #fff7f0;
          color: #374151;
          text-align: center;
          border-radius: 5px;
          padding: 8px;
          position: absolute;
          z-index: 1;
          bottom: 125%;
          left: 50%;
          font-size: 12px;
          font-weight: normal;
          margin-left: -125px;
          opacity: 0;
          transition: opacity 0.3s;
          box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      }
  
      .tooltip-text::after {
          content: '';
          position: absolute;
          top: 100%;
          left: 50%;
          margin-left: -5px;
          border-width: 5px;
          border-style: solid;
          border-color: #fff7f0 transparent transparent transparent;
      }
  
      /* TAGY sortiment */
      #selected-tags .badge {
          background-color: var(--secondary-turquoise-20);
          color: var(--secondary-turquoise);
          padding: 0.5rem 0.75rem;
          font-size: 0.875rem;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          border-radius: 0.25rem;
      }
      #selected-tags .btn-close {
          font-size: 0.75rem;
          margin-left: 0.5rem;
      }
      .sortiment-btn {
          transition: background-color 0.2s, color 0.2s;
      }
      .sortiment-btn:hover {
          background-color: var(--secondary-light-blue);
          color: #ffffff;
      }
      .category .rounded {
          font-weight: bold;
          text-transform: uppercase;
          border-radius: 0.25rem;
      }
  
          @media (max-width: 768px) {
              .order-first-mobile {
                  order: -1;
              }
              .order-8 {
                  order: 8; /* Posune "Cena celkem" až na konec na mobilu */
              }
  
              .order-9 {
                  order: 9; /* Ujistí, že tlačítko zůstane poslední */
              }
          }   
  
          @media (min-width: 768px) {
              .order-md-2 {
                  order: 2; /* Na větších zařízeních vrátí původní pořadí */
              }
          }