/*** Konfigurator Styles
 * @package Konfigurator
 */

/* TODO: Add custom styles for konfigurator */
input + .error.text-danger,
.fluentform .ff-el-is-error .text-danger {
  width: 100%;
  background: var(--color-neutral-200);
  text-align: center !important;
  font-size: 1rem !important;
  color: var(--color-primary-500);
  font-weight: bold;
  padding: var(--spacing-4xs);
  position: absolute;
  top: var(--spacing-xs);
}
#sruoviny-error {
  width: 100%;
  background: var(--color-neutral-200);
  text-align: center !important;
  font-size: 1rem !important;
  color: var(--color-primary-500);
  font-weight: bold;
  padding: var(--spacing-4xs);
}

/* Prázdný error element se nikdy nezobrazí */
#sruoviny-error:empty {
  display: none !important;
}

input:has(+ .error.text-danger),
.ff-el-is-error .ff-el-input--content {
  margin-top: 80px;
}
/*
.stari_psa input:has(+ .error.text-danger),
.ff-el-is-error .ff-el-input--content {
  margin-top: 0px;
}

.stari_psa .ff-el-group.ff-el-form-top .ff-el-input--content {
  overflow: hidden;
}
.stari_psa input + .error.text-danger,
.fluentform .ff-el-is-error .text-danger {
  top: 0px;
  left: 0px;
}*/
.stari_psa .ff-el-is-error .text-danger {
  top: -70px;
}
.stari_psa .ff-el-is-error .ff-el-input--content {
  margin-top: 0px;
}
.stari_psa .ff-el-group.w-full.sm\:w-1\/2.relative.ff-el-is-error {
  margin-top: 60px;
}
/* FluentForms error hláška uvnitř input content */
.hmotnost_kondice .ff-el-input--content .error.text-danger {
  top: -90px;
}
.ff-el-group.ff-el-form-top.konf-radio-blocks .error.text-danger {
  top: 48px;
}
.error.text-danger.haffit-weight-error {
  top: -6px;
}
@media (min-width: 768px) {
  .stari_psa .ff-el-is-error .text-danger {
    width: calc(100% + 160px);
    left: -80px;
  }
}
@media (max-width: 768px) {
  input + .error.text-danger,
  .fluentform .ff-el-is-error .text-danger {
  }
}
@media (max-width: 640px) {
  .ff-el-group.ff-el-form-hide_label.konf_button.relative.w-full.max-w-\[600px\].ff_list_buttons.ff-el-is-error {
    margin-top: 60px;
  }
  .ff-el-is-error .text-danger,
  .alergeny .ff-el-is-error .text-danger,
  .vyber_plemeno .ff-el-is-error .text-danger {
    top: -80px;
  }
  .plemeno_list.ff-el-is-error .text-danger {
    top: 0;
  }
  .hmotnost_kondice
    .ff-el-group.ff-el-form-top.konf-radio-blocks
    .error.text-danger {
    top: 26px;
  }
  .aktivita .ff-el-is-error .text-danger {
    top: 0px;
  }
}
.konfigurator {
  margin-top: var(--spacing-base);
}

.konfigurator .ff-step-header {
  background: var(--color-gray-100);
  padding: var(--spacing-2xs);
  margin-left: 3px;
  margin-right: 3px;
}

.konfigurator .fluentform .ff-step-titles {
  margin: 0;
  height: 44px;
  display: flex;
  text-align: center;
  width: 100%;
  justify-content: center;
  gap: var(--spacing-xs);
}

.konfigurator .ff-step-header span {
  display: none;
}

.conf_layout .frm-fluent-form .ff-t-cell:first-of-type {
  padding-left: unset !important;
}

.conf_layout .frm-fluent-form .ff-t-container {
  gap: var(--spacing-base);
}

.conf_layout .ff-t-column-1,
.conf_layout .ff-t-column-2 {
  padding: var(--spacing-base);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.conf_layout .ff-t-column-1 {
  background-image: url(https://www.haffit.cz/wp-content/uploads/2025/08/pattern.jpg);
  background-size: 20%;
  min-height: 40vh;
}

.conf_layout .ff-t-column-2 {
  display: none;
}

.ff-t-container.ff-column-container.ff_columns_total_2.conf_layout {
  display: block;
}
body.bricks-is-frontend :focus-visible {
  outline: none;
}

#haffit-saving-indicator {
  position: fixed;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  background: rgba(6, 57, 97, 0.95);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}

#haffit-saving-indicator.haffit-saving-indicator--visible {
  transform: translateX(-50%) translateY(100%);
  opacity: 0; /* Trvale skrytý - deaktivováno na žádost */
  pointer-events: none;
}

#haffit-saving-indicator__dot {
  width: 8px;
  height: 8px;
  background: #35efcb;
  border-radius: 50%;
  animation: haffit-saving-pulse 1s ease-in-out infinite;
}

#haffit-saving-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 10000;
}

#haffit-saving-modal.haffit-saving-modal--visible {
  opacity: 1;
  pointer-events: all;
}

.haffit-saving-modal__content {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.haffit-saving-modal__spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: haffit-saving-spin 1s linear infinite;
}

@keyframes haffit-saving-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes haffit-saving-pulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/*******************

**  top bar navigace

*******************/

.konfigurator .fluentform .ff-step-titles li,
.konfigurator .fluentform .ff-step-titles li.ff_active:after,
.konfigurator .fluentform .ff-step-titles li.ff_completed:after,
.konfigurator .fluentform .ff-step-titles li:after {
  background: transparent;
}

.konfigurator .fluentform .ff-step-titles li,
.konfigurator .fluentform .ff-step-titles li.ff_active,
.konfigurator .fluentform .ff-step-titles li.ff_completed {
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: center;
  cursor: pointer;
  width: 44px;
}

.konfigurator .fluentform .ff-step-titles li {
  background-image: url(https://www.haffit.cz/wp-content/uploads/2025/10/tlapka-seda.png);
}

.konfigurator .fluentform .ff-step-titles li.ff_completed {
  background-image: url(https://www.haffit.cz/wp-content/uploads/2025/10/tlapka-zelena.png);
}

.konfigurator .fluentform .ff-step-titles li.ff_active {
  background-image: url(https://www.haffit.cz/wp-content/uploads/2025/10/tlapka-oranzova.png);
}

.konfigurator .fluentform .ff-step-titles li:before {
  display: none;
}

ul.ff-step-titles::before {
  content: "Krok " attr(data-current-step) " z 10";
  font-size: medium;
  font-family: quicksand;
  display: flex;
  align-items: center;
  font-weight: 700;
  height: 100%;
  width: 110px;
}

/* Fallback pro případ, kdy data-current-step není nastaveno */

ul.ff-step-titles:not([data-current-step])::before {
  content: "Krok 1 z 10";
}

@media (max-width: 768px) {
  .konfigurator .ff-step-header {
    display: none;
  }
}

/*******************

**  navigace

*******************/

.konfigurator .step-nav.ff_step_nav_last {
  display: flex;
  width: 100%;
}

.step-nav.ff_step_nav_last button[data-action="prev"] {
  color: var(--color-secondary-500);
  font-weight: bold;
  text-decoration: underline;
  background-color: transparent;
}

.step-nav.ff_step_nav_last button[data-action="prev"]:hover {
  text-decoration: none;
  background-color: transparent;
  border: 0;
  color: var(--color-secondary-500);
}

.step-nav.ff_step_nav_last button[data-action="next"] {
  margin-left: auto;
  font-weight: bold;
  color: var(--color-charcoal);
  border: 2px solid var(--color-charcoal) !important;
  background-color: transparent;
  padding: var(--spacing-xs) var(--spacing-base);
  transition:
    padding 2s ease 0s,
    background-color 0.4s ease 0s;
}

.step-nav.ff_step_nav_last button[data-action="next"]:hover {
  color: var(--color-white);
  background-color: var(--color-charcoal);
}

.fluentform .ff-float-right {
  float: unset;
}

/*******************

**  END   navigace

*******************/

/*******************

**  obsah

*******************/

.conf-infobox {
  border: 1px solid var(--color-gray-300);
  background-color: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-sm) var(--spacing-base);
  margin-left: 45px;
  position: relative;
  border-left: 5px solid var(--color-secondary-500);
  text-align: left;
}

.conf-infobox::before {
  content: "";
  background-image: url(https://www.haffit.cz/wp-content/uploads/2025/08/info.svg);
  background-size: 32px;
  width: 32px;
  height: 32px;
  position: absolute;
  left: -45px;
  top: 0;
}

button.konfigurator-info-toggle {
  position: relative;
  padding: var(--spacing-sm) var(--spacing-base);
  padding-left: calc(var(--spacing-base) + 24px); /* prostor pro ikonku */
  background: none;
}

button.konfigurator-info-toggle::before {
  content: "";
  background-image: url(https://www.haffit.cz/wp-content/uploads/2025/08/add.png);
  background-size: 18px 18px;
  background-repeat: no-repeat;
  width: 18px;
  height: 18px;
  position: absolute;
  left: var(--spacing-2xs);
  top: 50%;
  transform: translateY(-50%);
}

#konfigurator-info {
  padding: var(--spacing-xl) var(--spacing-sm);
}

.konfigurator .fluentform input[type="text"],
.konfigurator .fluentform input[type="email"],
.konfigurator .fluentform input[type="tel"],
.konfigurator .fluentform input[type="number"],
.konfigurator .fluentform input[type="textarea"],
.konfigurator .fluentform input[type="password"],
.konfigurator .fluentform input[type="search"],
.konfigurator .fluentform textarea,
.konfigurator .fluentform select,
.frm-fluent-form .choices__list--single {
  border-radius: var(--radius-4xl) !important;
  font-size: var(--text-lg) !important;
  font-weight: 400 !important;
  padding: var(--spacing-2xs) var(--spacing-base) !important;
  background-color: var(--color-white);
}
.ff-field_container input::placeholder {
  color: var(--color-gray-300) !important;
}

.konfigurator .fluentform select {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 0),
    linear-gradient(135deg, gray 50%, transparent 0);
}

.konfigurator .frm-fluent-form .choices__inner {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.konfigurator .frm-fluent-form .choices__list--dropdown {
  max-height: 800px !important;
  overflow-y: hidden;
  border-color: transparent !important;
  box-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.konfigurator .choices__list .choices__list--dropdown input[type="text"] {
  border-radius: unset !important;
  font-size: 1rem !important;
  font-weight: unset !important;
  padding: unset !important;
}
@media (max-width: 480px) {
  #konfigurator-info-wrapper {
    display: flex;
  }
  button.konfigurator-info-toggle {
    width: clamp(70%, calc(80% - 6.67vw + 22px), 80%);
    margin: 0 auto;
    text-align: center;
  }
  #konfigurator-info {
    margin: var(--spacing-3xs);
  }
  /*
  .konf-radio-blocks .haffit-radio-card {
    flex-direction: row !important;
    gap: var(--spacing-sm) !important;
  }
  .konf-radio-blocks .haffit-radio-media img {
    max-height: 100px !important;
  }*/
}
/*************************************

*

**  Konfigurátor tlačítka

*

*************************************/
@media (max-width: 640px) {
  .konf_button .ff-el-input--content {
    flex-direction: column;
    max-width: 360px;
    align-items: center;
    margin: 0 auto;
  }
  .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check {
    margin: 0;
  }
}
.konf_button .ff-el-input--content {
  display: flex;
  gap: var(--spacing-base);
  justify-content: center;
}

.nezname_plemeno .ff-el-input--content {
  display: grid;
  gap: var(--spacing-sm);
}

.fluentform
  .ff-el-group.ff_list_buttons
  .ff-el-form-check.ff_item_selected
  label
  > span {
  border-radius: 0;
  background-color: var(--color-secondary-500);
  box-shadow: unset;
  color: var(--color-white);
}

.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span {
  border: 0;
}

.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span {
  font-size: 1rem;
  font-weight: bold;
  padding: var(--spacing-base) var(--spacing-2xl);
  width: 100%;
}

.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span:hover {
  color: var(--color-secondary-500);
  background-color: var(--color-gray-100);
}

.fluentform
  .ff-el-group.ff_list_buttons
  .ff-el-form-check.ff_item_selected
  label
  > span {
  border: 0;
  border-radius: 0;
}

.fluentform
  .ff-el-group.ff_list_buttons
  .ff-el-form-check.ff_item_selected
  label
  > span:hover {
  background-color: var(--color-secondary-500);
  color: var(--color-white);
}

.konfigurator .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label {
  border: 2px solid var(--color-secondary-500);
}

/*

.konfigurator .fluentform input[type="tel"] {
 padding-left: 56px !important;

}



.konfigurator .fluentform label {
 font-weight: 500 !important;
 color: var(--color-charcoal) !important;
 margin-bottom: 0.25rem !important;
 display: block !important;

}



.konfigurator .fluentform .ff-custom_html {
 margin-bottom: 1.5rem !important;

}



.konfigurator .ff-default .ff-el-form-control:focus {
 border-color: var(--secondary-300) !important;
 box-shadow: var(--shadow-m);

}



.konfigurator .shipping_adrress_box,

.konfigurator .company_box {
 display: none !important;

}

*/

/* Checkboxy */

.konfigurator .ff-el-form-check-input[type="checkbox"] {
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  accent-color: var(--primary);
  border-radius: 0.3em;
  cursor: pointer;
  transition:
    border 0.2s,
    box-shadow 0.2s;
}

.konfigurator .ff-el-form-check-input[type="checkbox"]:checked {
  background: var(--color-secondary-500);
  color: var(--color-white);
}

.konfigurator .ff-el-form-check-label {
  font-size: 1.1em;
  gap: 0.5em;
}

.konfigurator .ff_tc_checkbox input[type="checkbox"] {
  margin-right: 8px !important;
}

/*******************

**  END     obsah

*******************/

/*******************

**  Sumarizace

*******************/
.fluentform-step,
.fluentform .ff-step-container {
  overflow-x: visible;
}
.fluentform .ff-step-container {
  overflow: visible;
}

.konfigurator-summary-sidebar {
  width: 100%;
  padding: var(--spacing-sm);
  background-color: var(--color-gray-100);
  position: sticky;
  top: calc(var(--wp-admin--bar-height, 32px) + 70px + var(--spacing-base));
}

.pet-avatar {
  text-align: center;
  margin-bottom: var(--spacing-base);
}

.pet-image {
  object-fit: cover;
}

.change-image-btn {
  margin-top: var(--spacing-xs);
  padding: var(--spacing-2xs) var(--spacing-sm);
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--color-charcoal);
}

.change-image-btn:hover {
  background: var(--color-gray-200);
  border-color: var(--color-gray-400);
  transform: translateY(-1px);
}

.change-image-btn:active {
  transform: translateY(0);
}

.summary-header h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-charcoal);
  margin: 0 0 var(--spacing-base) 0;
  text-align: center;
}

.summary-steps {
  display: flex;
  flex-direction: column;
}

.summary-step {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.summary-step:not(:last-child) {
  border-bottom: 1px solid var(--color-gray-200);
}

.summary-step:hover {
  background: var(--color-gray-100);
}

.step-icon {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.step-icon.completed {
  background: var(--color-secondary-500);
}

.step-number {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-gray-600);
}

.step-icon.completed .step-number {
  display: none;
}

.step-icon.empty .step-number {
  display: none;
}

.step-check {
  display: none;
  font-size: var(--text-sm);
  color: var(--color-white);
  font-weight: bold;
}

.step-icon.completed .step-check {
  display: block;
}

.step-empty-icon {
  display: none;
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  font-weight: bold;
}

.step-icon.empty .step-empty-icon {
  display: block;
}

.step-icon.empty {
  background: var(--color-gray-200);
  border: 2px dashed var(--color-gray-400);
}

.step-content {
  flex: 1;
  min-width: 0;
}

.step-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-charcoal);
  margin-bottom: 2px;
}

.step-value {
  font-size: var(--text-xs);
  color: var(--color-gray-600);
  word-wrap: break-word;
}

.step-value.empty-value {
  color: var(--color-gray-400);
  font-style: italic;
}

.summary-step.completed .step-value {
  color: var(--color-charcoal);
  font-weight: 500;
}

/*******************

**  END Sumarizace

*******************/

/*******************

**  Croppie Styles

*******************/

#croppie-container {
  margin: var(--spacing-base) 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-sm);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#upload-image {
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-sm);
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  width: 100%;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

#upload-image:hover {
  border-color: var(--color-secondary-500);
}

#crop-button {
  background: var(--color-secondary-500);
  color: var(--color-white);
  border: none;
  padding: var(--spacing-sm) var(--spacing-base);
  border-radius: var(--radius-lg);
  font-weight: 600;
  cursor: pointer;
  margin-top: var(--spacing-sm);
  transition: background-color 0.2s ease;
  display: none;
  width: 100%;
  text-align: center;
}

#crop-button:hover {
  background: var(--color-secondary-600);
}

#crop-button:active {
  transform: translateY(1px);
}

/* FluentForms file upload integrace */

.ff_file_upload_holder {
  margin-bottom: var(--spacing-sm);
}

.ff_upload_btn {
  background: var(--color-gray-100) !important;
  border: 2px dashed var(--color-gray-300) !important;
  color: var(--color-charcoal) !important;
  padding: var(--spacing-base) !important;
  border-radius: var(--radius-lg) !important;
  transition: all 0.2s ease !important;
}

.ff_upload_btn:hover {
  border-color: var(--color-secondary-500) !important;
  background: var(--color-gray-50) !important;
}

.ff-uploaded-list {
  margin-top: var(--spacing-sm) !important;
}

/* Croppie knihovna styly */

.croppie-container {
  width: 100%;
  height: 100%;
}

.croppie-container .cr-boundary {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-s);
}

.croppie-container .cr-viewport {
  border: 3px solid var(--color-secondary-500);
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
}

.croppie-container .cr-slider-wrap {
  margin-top: var(--spacing-sm);
}

.croppie-container .cr-slider {
  background: var(--color-gray-200);
  border-radius: var(--radius-lg);
  height: 6px;
}

.croppie-container .cr-slider::-webkit-slider-thumb {
  background: var(--color-secondary-500);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.croppie-container .cr-slider::-moz-range-thumb {
  background: var(--color-secondary-500);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* Responsive Croppie */

@media (max-width: 768px) {
  #croppie-container {
    min-height: 300px;
    margin: var(--spacing-sm) 0;
  }
  .croppie-container .cr-boundary {
    width: 280px !important;
    height: 280px !important;
  }
  .croppie-container .cr-viewport {
    width: 200px !important;
    height: 200px !important;
  }
}

/* Preview container styly */

.cropped-preview-container {
  margin: var(--spacing-base) 0;
  padding: var(--spacing-base);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  text-align: center;
}

.cropped-preview h4 {
  color: var(--color-charcoal);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-base);
}

.preview-image {
  width: 300px;
  height: 300px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  border: 3px solid var(--color-secondary-500);
  margin-bottom: var(--spacing-base);
  box-shadow: var(--shadow-s);
}

.preview-actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.btn-confirm {
  background: var(--color-secondary-500);
  color: var(--color-white);
  border: none;
  padding: var(--spacing-sm) var(--spacing-base);
  border-radius: var(--radius-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 150px;
}

.btn-confirm:hover {
  background: var(--color-secondary-600);
  transform: translateY(-1px);
}

.btn-confirm:disabled {
  background: var(--color-gray-400);
  cursor: not-allowed;
  transform: none;
}

.btn-upload-new {
  background: var(--color-gray-100);
  color: var(--color-charcoal);
  border: 2px solid var(--color-gray-300);
  padding: var(--spacing-sm) var(--spacing-base);
  border-radius: var(--radius-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 150px;
}

.btn-upload-new:hover {
  background: var(--color-gray-200);
  border-color: var(--color-gray-400);
  transform: translateY(-1px);
}

.success-message {
  padding: var(--spacing-base);
  background: var(--color-green-50);
  border: 1px solid var(--color-green-200);
  border-radius: var(--radius-lg);
  text-align: center;
}

.success-message h4 {
  color: var(--color-green-700);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.success-message p {
  color: var(--color-green-600);
  margin-bottom: var(--spacing-base);
}

/* Responsive preview */

@media (max-width: 768px) {
  .preview-image {
    width: 150px;
    height: 150px;
  }
  .preview-actions {
    flex-direction: column;
    align-items: center;
  }
  .btn-confirm,
  .btn-upload-new {
    width: 100%;
    max-width: 250px;
  }
}

/* Croppie ovládací prvky */

.croppie-controls {
  margin-top: var(--spacing-sm);
  text-align: center;
}

.croppie-rotation-controls {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.btn-rotate {
  background: var(--color-gray-100);
  color: var(--color-charcoal);
  border: 2px solid var(--color-gray-300);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  font-size: var(--text-sm);
}

.btn-rotate:hover {
  background: var(--color-gray-200);
  border-color: var(--color-gray-400);
  transform: translateY(-1px);
}

.btn-rotate span {
  font-size: var(--text-lg);
  font-weight: bold;
}

.btn-confirm-crop {
  background: var(--color-secondary-500);
  color: var(--color-white);
  border: none;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--text-base);
  min-width: 120px;
}

.btn-confirm-crop:hover {
  background: var(--color-secondary-600);
  transform: translateY(-1px);
}

.btn-confirm-crop:active {
  transform: translateY(0);
}

/* Responsive ovládací prvky */

@media (max-width: 768px) {
  .croppie-rotation-controls {
    flex-direction: column;
    align-items: center;
  }
  .btn-rotate {
    width: 100%;
    max-width: 150px;
    justify-content: center;
  }
  .btn-confirm-crop {
    width: 100%;
    max-width: 200px;
  }
}

/*******************

**  END Croppie Styles

*******************/

@media (min-width: 1024px) {
  .conf_layout .ff-t-column-2 {
    display: flex;
  }
  .ff-t-container.ff-column-container.ff_columns_total_2.conf_layout {
    display: flex;
  }
}

@media (min-width: 768px) {
  .frm-fluent-form .ff-t-cell:first-of-type {
    padding-left: var(--spacing-base);
  }
  .frm-fluent-form .ff-t-cell:last-of-type {
    padding: 0;
    position: relative;
  }
  .frm-fluent-form .ff-t-container {
    gap: var(--spacing-base);
  }
}

/*************************************************************

*

*

*  Konfigurátor - radiobuttony s obrázky

*

*

*************************************************************/

/* 1) WRAPPER .konf-radio-blocks */

.konf-radio-blocks input[type="radio"] {
  display: none;
}

/* 3) FLEX KONTEJNER (.ff-el-input--content) */

.konf-radio-blocks .ff-el-input--content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: var(--spacing-base);
  justify-content: center;
}

/* 4) GRID ITEM (.ff-el-form-check) */

.konf-radio-blocks .ff-el-form-check {
  height: 100%;
  width: 290px;
}

/* Výjimka pro vyber_plemeno - nepůsobit fixní šířku */
.vyber_plemeno .konf-radio-blocks .ff-el-form-check {
  height: auto;
}

/* 5) LABEL UVNITŘ ITEMU */

.konf-radio-blocks .ff-el-form-check > label.haffit-enhanced {
  display: block;
  height: 100%;
}

/* 6) KARTA (.haffit-radio-card) */

.konf-radio-blocks .haffit-radio-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-white);
  padding: var(--spacing-sm);
  border: 2px solid var(--color-secondary-500);
}

.konf-radio-blocks .haffit-radio-card:hover {
  background-color: var(--color-gray-200);
}

/* 7) MEDIA (.haffit-radio-media) */

.konf-radio-blocks .haffit-radio-media {
  display: flex;
  align-items: center;
  justify-content: center;
}
.konf-radio-blocks .haffit-radio-title {
  white-space: nowrap;
}
.haffit-radio-media img {
  height: 166px;
  fill: var(--color-secondary-500);
  margin-bottom: var(--spacing-base);
}

.konfigurator
  .ff-el-form-check.ff_item_selected
  .haffit-radio-card
  .haffit-radio-media
  img {
  filter: invert(1) brightness(1.15) contrast(1.1);
}
/* Schovat puppy u kondice i u aktivity */
.ff-el-form-check:has(
  input[name="dynamic_kondice"][aria-label="puppy"],
  input[name="dynamic_aktivita"][aria-label="puppy"]
) {
  display: none;
}

.konfigurator .ff-el-form-check .haffit-radio-card .haffit-radio-media img {
  filter: invert(42%) sepia(93%) saturate(630%) hue-rotate(121deg)
    brightness(92%) contrast(91%);
}

/* 8) TEXT BODY (.haffit-radio-body) */

.konf-radio-blocks .haffit-radio-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
}

/* 9) POPIS (.haffit-radio-desc) */

.konf-radio-blocks .haffit-radio-desc {
  font-size: var(--text-sm);
  /*white-space: break-spaces;*/
}

.konf-radio-blocks .haffit-radio-desc p {
  margin: 0.15rem 0;
}

/* 10) STAV VYBRÁNO */

.konf-radio-blocks .ff_item_selected .haffit-radio-card {
  background-color: var(--color-secondary-500);
  color: var(--color-white) !important;
}

.konf-radio-blocks .ff_item_selected .haffit-radio-media svg {
  fill: var(--color-white);
}

/*************************************************************

*

*

*  Konfigurátor - select s obrázky

*

*

*************************************************************/

/*

.frm-fluent-form .choices__list--single {
 padding: 0 !important;
 border-color: var(--color-gray-300) !important;
 background-color: var(--color-white) !important;
 border-radius: var(--radius-3xl) !important;
 font-weight: 700 !important;

}*/

/* Choices s obrázky pro plemena */

.choices.haffit-choices .haffit-choice-row,
.choices.haffit-choices .choices__item.haffit-choice-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.choices.haffit-choices .haffit-choice-thumb {
  width: 60px;
  height: 60px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.choices.haffit-choices .haffit-choice-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.choices.haffit-choices .haffit-choice-thumb.is-placeholder .noimg {
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
}

.choices.haffit-choices .haffit-choice-text {
  line-height: 1.2;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: manual;
}

/* Chip s vybranou hodnotou (single select) */

.choices.haffit-choices .choices__list--single .choices__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-2xs) var(--spacing-sm);
  border-radius: var(--radius-2xl);
}

.choices.haffit-choices .choices__list--single .haffit-choice-thumb {
  width: 22px;
  height: 22px;
}

/************************************************************

*  Konfigurátor - select btn s obrázky pohlavi

*************************************************************/

.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff-el-image-holder {
  background-color: var(--color-white);
  border: 2px solid var(--color-secondary-500);
}

/* celé pole na hover */

.fluentform
  .ff-el-group.ff_list_buttons
  .ff-el-form-check.ff-el-image-holder:hover {
  background-color: var(--color-gray-100);
}

/* vnitřní span na hover parentu */

.fluentform
  .ff-el-group.ff_list_buttons.btn_pohlavi
  .ff-el-form-check.ff-el-image-holder:hover
  label
  > span {
  background-color: var(--color-gray-100);
}

.fluentform
  .ff-el-group.ff_list_buttons.btn_pohlavi
  .ff-el-form-check.ff-el-image-holder.ff_item_selected:hover
  label
  > span {
  background-color: transparent;
}

.btn_pohlavi
  .ff-el-group.ff_list_buttons
  .ff-el-form-check.ff-el-image-holder.ff_item_selected {
  background-color: var(--color-secondary-500);
  border: var(--color-secondary-500);
}

.konfigurator .ff-el-group.ff_list_buttons.btn_pohlavi .ff-el-form-check label {
  border: 0;
}

.konfigurator
  .ff-el-group.ff_list_buttons
  .ff-el-form-check.ff-el-image-holder.ff_item_selected {
  border-color: var(--color-secondary-500);
  background-color: var(--color-secondary-500);
}

.konfigurator
  .ff-el-group.ff_list_buttons.btn_pohlavi
  .ff-el-form-check.ff-el-image-holder
  .ff-el-image-input-src {
  filter: invert(54%) sepia(53%) saturate(560%) hue-rotate(112deg)
    brightness(94%) contrast(90%);
  background-size: contain;
  margin-top: var(--spacing-xs);
}

.konfigurator
  .ff-el-group.ff_list_buttons.btn_pohlavi
  .ff-el-form-check.ff-el-image-holder.ff_item_selected
  .ff-el-image-input-src {
  filter: invert(1) brightness(1.15) contrast(1.1);
}

.btn_pohlavi .ff-el-group.ff_list_buttons .ff-el-form-check {
  margin: 0;
}

.btn_pohlavi .ff-el-image-holder {
  margin: 0;
}

.fluentform
  .ff-el-group.ff_list_buttons
  .ff-el-form-check.ff-el-image-holder
  span {
  margin-left: 0 !important;
  color: var(--color-secondary-500);
}

.btn_pohlavi .ff-el-image-holder .ff-el-form-check-label {
  padding-left: 0 !important;
}

.fluentform .btn_pohlavi .ff_el_checkable_photo_holders {
  display: flex;
  gap: var(--spacing-base);
  flex-wrap: wrap;
  justify-content: center;
}

.fluentform
  .ff-el-group.ff_list_buttons
  .ff-el-form-check:last-child
  label
  > span {
  border-radius: 0;
}

.konf_button .ff-el-form-check.ff-el-form-check- {
  min-width: 220px;
}

.konf_button label {
  font-size: var(--text-lg) !important;
}

.konfigurator .fluentform .ff-el-group.ff-el-form-top .ff-el-input--label {
  text-align: center;
}

/* cíleně jen na toto pole (podle name/data-name) */

.konfigurator
  .fluentform
  .ff-el-input--content:has(input.ff-el-form-control[name="input_text"]) {
  position: relative;
}

.konfigurator .fluentform input.ff-el-form-control[name="input_text"] {
  padding-right: 2.5em !important; /* místo pro “kg” */
}

/* samotný suffix */

.konfigurator
  .fluentform
  .ff-el-input--content:has(
    input.ff-el-form-control[name="input_text"]
  )::after {
  content: "kg";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-gray-500);
  font-weight: 600;
}

/*******************************************************************

*

* Konfigurátor - Potřebuje vyloučit nějaké suroviny?

*

*******************************************************************/

.haffit-alergeny-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--spacing-base);
  justify-content: center; /* volitelné – centrování gridu */
}

/*

.suroviny-alergie .ff-el-form-check {
 width: 100%;
 max-width: 270px;
 border: 1px solid var(--color-secondary-500);
 background-color: var(--color-white);
 padding: var(--spacing-3xs);

}

*/

/* Alergeny checkboxy - velký klikatelný input */

.alergeny-wrapper .ff-el-form-check.haffit-alergen-item {
  border: 1px solid var(--color-secondary-500);
  background-color: var(--color-white);
  padding: var(--spacing-sm); /* větší padding pro lepší klikatelnost */
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  user-select: none; /* zabránit označování textu */
}

.alergeny-wrapper .ff-el-form-check.haffit-alergen-item:hover {
  background-color: var(--color-gray-200);
}

.alergeny-wrapper .ff-el-form-check.haffit-alergen-item.haffit-checked {
  background-color: var(--color-secondary-500);
}

.alergeny-wrapper .ff-el-form-check.haffit-alergen-item.haffit-checked:hover {
  transform: translateY(-1px);
}

.alergeny-wrapper .ff-el-form-check.haffit-alergen-item.haffit-checked label {
  color: var(--color-white) !important;
}

/* Skrytý checkbox - celý element je klikatelný */

.alergeny-wrapper .haffit-alergen-checkbox {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  margin: 0;
}

.alergeny-wrapper .haffit-alergen-checkbox:focus {
  outline: none; /* focus bude na celém elementu */
}
.ff-default .ff-btn-secondary:not(.ff_btn_no_style):focus,
.ff-default .ff-btn-secondary:not(.ff_btn_no_style):hover {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-secondary-500);
}

/* Vizuální checkbox indikátor - prázdný checkbox obrázek */

.alergeny-wrapper .haffit-alergen-item::before {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url("https://www.haffit.cz/wp-content/uploads/2025/08/checkbox-empty.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Checked stav pro vizuální checkbox - zaškrtnutý checkbox obrázek */

.alergeny-wrapper .ff-el-form-check.haffit-alergen-item.haffit-checked::before {
  background-image: url("https://www.haffit.cz/wp-content/uploads/2025/08/checkbox.png");
}

.alergeny-wrapper .ff-el-form-check {
  margin-bottom: 0 !important;
}

.alergeny-wrapper .haffit-alergen-label {
  flex: 1;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.2;
  pointer-events: none;
}

/* Checked stav pro label */

.alergeny
  .ff-el-form-check.haffit-alergen-item.haffit-checked
  .haffit-alergen-label {
  color: var(--color-white) !important;
}

@media only screen and (max-width: 768px) {
  .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span {
    border: 0 !important;
    border-radius: 0 !important;
  }
}

.haffit-reason.alergen {
  background-image: url("https://www.haffit.cz/wp-content/uploads/2025/10/srdce.png");
  background-size: 20px auto;
  background-repeat: no-repeat;
  background-position: left center;
  padding: 10px 0px 10px 28px;
  font-size: 15px;
}

/*******************

**  Cenový indikátor u vybraných karet

*******************/

.bg-secondary-500 .price-indicator {
  color: white !important;
}

/*******************

**  Speciální nabídky

*******************/

.haffit-special-offers {
  padding: var(--spacing-base);
  margin-right: calc(-1 * var(--spacing-base));
  margin-left: calc(-1 * var(--spacing-base));
}

.haffit-special-offer-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-s);
  transition: all 0.2s ease;
}

.haffit-special-offer-card:hover {
  box-shadow: var(--shadow-m);
  transform: translateY(-1px);
}

.haffit-special-offer-card.bg-secondary-500 {
  transform: translateY(-2px);
  box-shadow: var(--shadow-l);
}

.haffit-special-offer-card.bg-secondary-500 .price-indicator {
  color: white !important;
}

/* Responzivní úpravy pro speciální nabídky */

@media (max-width: 640px) {
  .haffit-special-offers .grid {
    grid-template-columns: 1fr;
  }
  .haffit-special-offer-card {
    min-height: 120px;
  }
  .haffit-special-offer-card .w-6\/12 {
    width: 50%;
  }
  .haffit-special-offer-card .w-4\/12 {
    width: 33.333333%;
  }
  .haffit-special-offer-card .w-2\/12 {
    width: 16.666667%;
  }
}

/*******************

**  Flatpickr alt-input fix

*******************/

/* skryj původní input, který flatpickr přepne na hidden */

input[type="hidden"].flatpickr-input {
  display: none !important;
}

/* zajisti viditelnost alt inputu */

input.flatpickr-input[readonly] {
  display: inline-block !important;
  background-color: var(--color-white) !important;
  cursor: pointer;
}

/* styling pro alt input aby vypadal jako ostatní inputy */

.konfigurator input.flatpickr-input[readonly] {
  border-radius: var(--radius-4xl) !important;
  font-size: var(--text-lg) !important;
  font-weight: 400 !important;
  padding: var(--spacing-2xs) var(--spacing-base) !important;
  border: 1px solid var(--color-gray-300) !important;
}

.konfigurator input.flatpickr-input[readonly]:focus {
  border-color: var(--secondary-300) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--color-secondary-500-rgb, 34, 197, 94), 0.1);
}

/* Flatpickr kalendář dropdown styling */

.flatpickr-calendar {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-l) !important;
  border: 1px solid var(--color-gray-200) !important;
}

.flatpickr-calendar .flatpickr-day.selected {
  background: var(--color-secondary-500) !important;
  border-color: var(--color-secondary-500) !important;
}

.flatpickr-calendar .flatpickr-day:hover:not(.selected) {
  background: var(--color-gray-100) !important;
}

.flatpickr-calendar .flatpickr-day.today {
  border-color: var(--color-secondary-500) !important;
}

.flatpickr-calendar .flatpickr-day.today:not(.selected) {
  background: var(--color-gray-50) !important;
}

/*******************************************************************

*

* Konfigurátor - FINAL SUMMARY

*

*******************************************************************/

#konfigurator-complete-summary h2 {
  text-transform: uppercase;
}

.summary-block {
  display: flex;
  flex-direction: column;
}
.summary-slot {
  min-height: 44px;
}

.summary-slot[data-block-key="uni-uvod-10-10"] .summary-content {
  font-weight: 600;
  font-size: var(--text-lg);
  margin-top: var(--spacing-base);
}

.summary-block:not([data-block-group="heading"]) {
  background-color: var(--color-white);
  padding: var(--spacing-base);
  box-shadow: var(--shadow-xs);
  display: flex;
  gap: var(--spacing-base);
  flex-direction: column;
}

.summary-block:not([data-block-group="co-prinasi-krmivo"]) {
  text-align: center;
}

.summary-block:is([data-block-group="co-prinasi-krmivo"]) {
  font-size: var(--text-sm);
  gap: var(--spacing-sm);
}
.summary-slot:is([data-block-key="uni-info-10-10"]) .summary-content {
  display: block !important;
}
/* Ikona pro všechny sloty ve skupině 'co-prinasi-krmivo' */

.summary-block:is([data-block-group="co-prinasi-krmivo"])
  .summary-slot:not([data-block-key="trustindex-reviews-widget-10-10"]) {
  position: relative;
  padding-left: calc(var(--spacing-2xl) + var(--spacing-base));
}
.summary-slot:is([data-block-key="trustindex-reviews-widget-10-10"]) {
  padding-left: var(--spacing-2xl);
}
.summary-block:is([data-block-group="co-prinasi-krmivo"])
  .summary-slot:not(
    [data-block-key="trustindex-reviews-widget-10-10"]
  )::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: var(--spacing-2xl);
  height: var(--spacing-2xl);
  background: url(https://www.haffit.cz/wp-content/uploads/2025/10/check.png)
    no-repeat center / contain;
  pointer-events: none;
  padding: var(--spacing-2xs);
  border-radius: 100%;
  background-color: var(--color-secondary-500);
  background-size: 65% 65%;
}

/*Analýza*/

.nutrient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--spacing-base);
  margin-top: var(--spacing-base);
}

.nutrient-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nutrient-item .label {
  font-weight: 500;
}

.nutrient-icon {
  border: 2px solid var(--color-secondary-500);
  border-radius: 100%;
  background-color: var(--color-slate-100);
  aspect-ratio: 1 / 1;
  padding: var(--spacing-sm);
}

.nutrient-item img {
  height: 50px;
  width: 50px;
}

.summary-block span.value {
  font-weight: 700;
  margin-bottom: -8px;
  margin-top: 8px;
}

.slozka-item-inner {
  border: 2px solid var(--color-secondary-500);
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.slozka-nadpis {
  font-size: var(--text-lg);
  font-weight: 700;
}

#certifikaty-placeholder img {
  object-fit: contain;
  height: 70px;
}

/*trustindex*/

.fluentform .ti-widget.ti-goog .ti-footer .ti-name,
.fluentform .ti-widget.ti-goog .ti-rating-text,
.fluentform .ti-widget.ti-goog .ti-rating-text strong:not(.ti-rating-large),
.fluentform .ti-widget.ti-goog .ti-rating-text strong a,
.fluentform .ti-widget.ti-goog .ti-rating-text strong span,
.fluentform .ti-widget.ti-goog .ti-rating-text span strong,
.fluentform .ti-widget.ti-goog .ti-rating-text span,
.fluentform .ti-widget.ti-goog .ti-footer,
.fluentform .ti-widget.ti-goog .ti-footer strong:not(.ti-rating-large),
.fluentform .ti-widget.ti-goog .ti-footer span,
.fluentform .ti-widget.ti-goog .ti-footer strong a,
.fluentform .ti-read-more,
.fluentform .ti-review-text-container.ti-review-content,
.fluentform .ti-widget.ti-goog .ti-widget-container .ti-name {
  color: var(--color-charcoal) !important;
}

#trustindex-placeholder .ti-widget.ti-goog .ti-review-item > .ti-inner,
#trustindex-placeholder
  .ti-widget.ti-goog
  .ti-load-more-reviews-container
  .ti-load-more-reviews-button {
  background: var(--color-white) !important;
  border: 1px solid var(--color-gray-200) !important;
  box-shadow: var(--shadow-s) !important;
}
#DD-info-placeholder img {
  max-width: 200px;
}

.konfigurator .fluentform form.ff-form-has-steps .ff-btn-submit {
  display: none;
}

/*certifikáty*/
#certifikaty-placeholder .brxe-container {
  padding: 0;
}
/*****************************************

* Konfigurátor - END FINAL SUMMARY

******************************************/

/*****************************************

* FINAL STEP TABS - CSS pro tab funkcionalitu

******************************************/

/* Tab Navigation Container */

.final-step-tabs {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.final-step-tabs-content {
  display: flex;
  overflow: hidden;
}

/* Individual Tab Buttons */

.final-step-tab {
  flex: 1;
  padding: var(--spacing-3xs);
  background: var(--color-primary-400);
  font-weight: 700;
  border: none;
  font-size: var(--text-base);
  transition: all 0.2s ease;
  text-align: center;
  cursor: auto;
  color: var(--color-white);
}

.final-step-tab:not(.active):hover {
  cursor: pointer;
}

.final-step-tab.active {
  background: var(--color-gray-100);
  font-weight: 700;
  color: var(--color-charcoal);
}

.final-step-tab:first-child {
}

.final-step-tab:last-child {
}

/* Tab Content Containers */

/* Prioritní ovládání přes CSS třídy - OPRAVENO */

.tab-content.hidden {
  display: none !important;
}

/* KROKY 1-9: Když nejsou taby aktivní, zobrazit pouze summary tab */

.final-step-tabs.hidden ~ .tab-content[data-tab-content="order"] {
  display: none !important;
}

.final-step-tabs.hidden ~ .tab-content[data-tab-content="summary"] {
  display: block !important;
}

/* FINÁLNÍ KROK: Když jsou taby aktivní, ovládat přes active/hidden */

.final-step-tabs:not(.hidden) ~ .tab-content.active:not(.hidden) {
  display: block !important;
  margin-top: 40px;
}

.final-step-tabs:not(.hidden) ~ .tab-content:not(.active) {
  display: none !important;
}

.final-step-tabs:not(.hidden) ~ .tab-content.hidden {
  display: none !important;
}

/* Smooth transitions for tab content */

.tab-content {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.tab-content.active {
  opacity: 1;
  transform: translateY(0);
}

.tab-content.active[data-tab-content="order"]
  .checklist-jmeno.pet-name-display {
}

/* Responsive tab design */

@media (max-width: 768px) {
  .final-step-tabs-content {
  }
  .final-step-tab {
  }
}

/* Focus states for accessibility */

.final-step-tab:focus {
}

.final-step-tab:focus:not(:focus-visible) {
  outline: none;
}

/* Animation for tab switching */

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-content.active {
  animation: tabFadeIn 0.3s ease forwards;
}

/***************************

úprava sidebaru v kroku 10

****************************/

.conf_nextpage.fluentform-step.active[data-name="form_step-8_34"] .tab-content {
  margin-top: var(--spacing-xl);
}

.conf_nextpage.fluentform-step.active[data-name="form_step-8_34"]
  .summary-header.text-center {
  display: none;
}

.conf_nextpage.fluentform-step.active[data-name="form_step-8_34"] .pet-avatar {
  display: none;
}

.conf_nextpage.fluentform-step.active[data-name="form_step-8_34"]
  .ff-el-group.ff-text-left.ff_submit_btn_wrapper {
  display: none;
}
@media (max-width: 1024px) {
  .conf_nextpage.fluentform-step.active[data-name="form_step-8_34"]
    .tab-content {
    margin-top: var(--spacing-4xl);
  }
}
@media (max-width: 768px) {
  .conf_nextpage.fluentform-step.active[data-name="form_step-8_34"]
    .tab-content {
    margin-top: calc(1.5 * var(--spacing-4xl));
  }
}

/*****************************************

* END FINAL STEP TABS

******************************************/
.ff-el-group .ff-text-left .ff_submit_btn_wrapper {
  display: none;
}

/*****************************************

* MOBILNÍ EXPANDABLE NAVIGACE

******************************************/

/* Hlavní kontejner mobilní navigace */

.haffit-mobile-navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  pointer-events: none;
}

/* Overlay pro zavření menu */

.haffit-mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  pointer-events: all;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.haffit-mobile-overlay[style*="block"] {
  opacity: 1;
}

/* Menu Panel */

.haffit-mobile-menu-panel {
  position: fixed;
  bottom: 66px; /* Nad bottom bar */
  left: 0;
  right: 0;
  background: var(--color-white);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.15);
  z-index: 10001;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  pointer-events: all;
  max-height: 70vh;
  overflow-y: auto;
}

.haffit-mobile-menu-panel.haffit-mobile-menu-open {
  transform: translateY(0);
}

/* Menu Header */

.haffit-mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-base);
  border-bottom: 1px solid var(--color-gray-200);
}

.haffit-mobile-menu-header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.haffit-mobile-back-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-gray-100);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.haffit-mobile-back-btn:hover {
  background: var(--color-gray-200);
  transform: scale(1.05);
}

.haffit-mobile-back-btn span {
  font-size: var(--text-lg);
  font-weight: bold;
  color: var(--color-charcoal);
}

.haffit-mobile-menu-header h3 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-charcoal);
}

.haffit-mobile-close-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-gray-100);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.haffit-mobile-close-btn:hover {
  background: var(--color-gray-200);
  transform: scale(1.05);
}

.haffit-mobile-close-btn span {
  font-size: var(--text-lg);
  font-weight: bold;
  color: var(--color-charcoal);
}

/* Steps Grid */

.haffit-mobile-steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: min-content; /* Řádky mají výšku podle obsahu */
  gap: var(--spacing-4xs);
  padding: var(--spacing-base);
}

.haffit-mobile-step-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-gray-200);
  background: var(--color-white);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 80px;
  min-width: 0; /* Umožňuje zmenšení v gridu */
  position: relative;
}

.haffit-mobile-step-btn:hover {
  border-color: var(--color-secondary-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow-s);
}

.haffit-mobile-step-btn:active {
  transform: translateY(0);
}

/* Step Button States */

.haffit-mobile-step-btn.haffit-mobile-step-active {
  background: var(--color-secondary-500);
  border-color: var(--color-secondary-500);
  color: var(--color-white);
  transform: scale(1.05);
  box-shadow: var(--shadow-m);
}

.haffit-mobile-step-btn.haffit-mobile-step-completed {
  background: var(--color-green-50);
  border-color: var(--color-green-500);
  color: var(--color-green-700);
}

.haffit-mobile-step-btn.haffit-mobile-step-completed::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  background: var(--color-green-500);
  color: var(--color-white);
  border-radius: 50%;
  font-size: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Disabled Step Button - pro krok 10 když nejsou všechny kroky dokončené */

.haffit-mobile-step-btn.haffit-mobile-step-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  background-color: #e0e0e0 !important;
}

/* Step Button Content */

.haffit-mobile-step-icon {
  font-size: var(--text-2xl);
  margin-bottom: var(--spacing-2xs);
}

.haffit-mobile-step-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
  margin-bottom: var(--spacing-2xs);
}

.haffit-mobile-step-number {
  font-size: var(--text-xs);
  font-weight: bold;
  opacity: 0.7;
}

.haffit-mobile-step-btn.haffit-mobile-step-active .haffit-mobile-step-number {
  opacity: 1;
}

/* Bottom Bar */

.haffit-mobile-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-200);
  padding: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  z-index: 10002;
  pointer-events: all;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* Bottom Bar Buttons */

.haffit-mobile-prev-btn,
.haffit-mobile-next-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-100);
  border: 2px solid var(--color-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.haffit-mobile-prev-btn:hover,
.haffit-mobile-next-btn:hover {
  background: var(--color-gray-200);
  border-color: var(--color-gray-400);
  transform: translateY(-1px);
}

.haffit-mobile-prev-btn:disabled,
.haffit-mobile-next-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.haffit-mobile-prev-btn span,
.haffit-mobile-next-btn span {
  font-size: var(--text-xl);
  font-weight: bold;
  color: var(--color-charcoal);
}

/* Menu Toggle Button */

.haffit-mobile-menu-toggle {
  flex: 1;
  height: 48px;
  background: var(--color-secondary-500);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.haffit-mobile-menu-toggle:hover {
  background: var(--color-secondary-600);
  transform: translateY(-1px);
}

.haffit-mobile-menu-toggle:active {
  transform: translateY(0);
}

.haffit-mobile-step-info {
  font-size: var(--text-base);
  font-weight: 600;
}

/* Krok 10 - Tab Buttons */

.haffit-mobile-tab-btn {
  flex: 1;
  height: 48px;
  border: 2px solid var(--color-secondary-500);
  background: var(--color-white);
  color: var(--color-secondary-500);
  border-radius: var(--radius-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.haffit-mobile-tab-btn:hover {
  background: var(--color-gray-50);
  transform: translateY(-1px);
}

.haffit-mobile-tab-btn.active {
  background: var(--color-secondary-500);
  color: var(--color-white);
}

.haffit-mobile-tab-btn.active:hover {
  background: var(--color-secondary-600);
}

/* Zelená barva pro objednávka tlačítko */

.haffit-mobile-order-primary {
  background: var(--color-secondary-500) !important;
  color: var(--color-white) !important;
  border-color: var(--color-secondary-500) !important;
}

.haffit-mobile-order-primary:hover {
  background: var(--color-secondary-600) !important;
}

/* Responsive úpravy pro velmi malé obrazovky */

@media (max-width: 480px) {
  .haffit-mobile-steps-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: min-content; /* Řádky mají výšku podle obsahu */
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
  }
  .haffit-mobile-step-btn {
    min-height: 70px;
    padding: var(--spacing-xs);
  }
  .haffit-mobile-step-icon {
    font-size: var(--text-lg);
  }
  .haffit-mobile-step-title {
    font-size: 10px;
  }
  .haffit-mobile-step-number {
    font-size: 10px;
  }
  .haffit-mobile-bottom-bar {
    gap: var(--spacing-4xs);
  }
  .haffit-mobile-step10-container {
    flex-direction: column;
  }
  .haffit-mobile-prev-btn,
  .haffit-mobile-next-btn {
    width: 40px;
    height: 40px;
  }
  .haffit-mobile-menu-toggle {
    height: 40px;
  }
  .haffit-mobile-tab-btn {
    height: 40px;
    font-size: var(--text-sm);
    width: 100%;
    flex: unset;
  }
  /* Krok 10 - tlačítka pod sebou na malých obrazovkách */
  .haffit-mobile-bottom-bar:has(.haffit-mobile-tab-btn) {
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
  }
}

/* Velmi malé obrazovky - 3 sloupce */
@media (max-width: 320px) {
  .haffit-mobile-steps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-2xs);
    padding: var(--spacing-xs);
  }
  .haffit-mobile-step-btn {
    min-height: 60px;
    padding: var(--spacing-xs);
  }
  .haffit-mobile-step-icon {
    font-size: var(--text-base);
  }
  .haffit-mobile-step-title {
    font-size: 9px;
  }
  .haffit-mobile-step-number {
    font-size: 9px;
  }
}

  /* NOVÉ: Krok 10 - Tailwind grid layout pro <480px */
  .haffit-mobile-bottom-bar .grid {
    /* Přepsat Tailwind grid pro malé obrazovky */
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  /* Zpět tlačítko - první řádek, první sloupec */
  .haffit-mobile-bottom-bar .haffit-mobile-step10-back {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 3rem !important;
    height: 3rem !important;
    justify-content: center !important;
  }
  /* Souhrn tlačítko - první řádek, druhý sloupec */
  .haffit-mobile-bottom-bar .haffit-mobile-summary-btn {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 2.5rem !important;
  }
  /* Objednávka tlačítko - druhý řádek, oba sloupce */
  .haffit-mobile-bottom-bar .haffit-mobile-order-btn {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    height: 3rem !important;
  }
  /* Zajistit správné zobrazení všech tlačítek */
  .haffit-mobile-bottom-bar .haffit-mobile-tab-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease !important;
  }
  /* Hover efekty pro malé obrazovky */
  .haffit-mobile-bottom-bar .haffit-mobile-summary-btn:hover,
  .haffit-mobile-bottom-bar .haffit-mobile-order-btn:hover {
    background-color: var(--secondary-100) !important;
    color: var(--color-secondary-500) !important;
    border-color: var(--color-secondary-500) !important;
  }
}

/* CSS třídy pro přepínání zobrazení sloupců */

.haffit-show-sidebar .conf_layout .ff-t-column-2 {
  display: block !important;
}

.haffit-show-sidebar .conf_layout .ff-t-column-1 {
  display: none !important;
}

.haffit-show-form .conf_layout .ff-t-column-1 {
  display: flex !important;
}
/*
.haffit-show-form .conf_layout .ff-t-column-2 { display: none !important;
}*/

/* Mobilní přepínání sloupců v posledním kroku - specifičtější selektory */
@media (max-width: 1023px) {
  body.haffit-show-sidebar .conf_nextpage.last_page .conf_layout .ff-t-column-2 {
    display: block !important;
  }

  body.haffit-show-sidebar .conf_nextpage.last_page .conf_layout .ff-t-column-1 {
    display: none !important;
  }
}

/* Skrytí mobilní navigace na desktop */

@media (min-width: 1024px) {
  .haffit-mobile-navigation {
    display: none !important;
  }
}

/*****************************************

* END MOBILNÍ EXPANDABLE NAVIGACE

******************************************/

.obj-summary-values {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
}

.conf_layout.last_step .objednavka-btn {
  display: block;
}

/*****************************************

* MY ACCOUNT DASHBOARD CUSTOMIZATION

*****************************************/

/*****************************************

* MY ACCOUNT PRODUCT STATUS STYLES

*****************************************/

/* Product status badges */

.haffit-product-status {
  display: inline-block;
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Draft status styling */

.haffit-product-status.draft {
  background-color: var(--color-yellow-100);
  color: var(--color-yellow-800);
  border: 1px solid var(--color-yellow-300);
}

/* Private status styling */

.haffit-product-status.private {
  background-color: var(--color-purple-100);
  color: var(--color-purple-800);
  border: 1px solid var(--color-purple-300);
}

/* Published status (if needed) */

.haffit-product-status.publish {
  background-color: var(--color-green-100);
  color: var(--color-green-800);
  border: 1px solid var(--color-green-300);
}

/* My Products grid and card styles */

.haffit-my-products {
  padding: var(--spacing-base);
}

.haffit-my-products-header {
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.haffit-create-new-btn {
  background: var(--color-secondary-500) !important;
  color: var(--color-white) !important;
  border: none !important;
  padding: var(--spacing-sm) var(--spacing-lg) !important;
  border-radius: var(--radius-lg) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.haffit-create-new-btn:hover {
  background: var(--color-secondary-600) !important;
  transform: translateY(-1px);
}

.haffit-product-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-xs);
}

.haffit-product-card:hover {
  box-shadow: var(--shadow-s);
  transform: translateY(-1px);
}

.haffit-product-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.haffit-product-content {
  padding: var(--spacing-base);
}

.haffit-product-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);
  gap: var(--spacing-sm);
}

.haffit-product-name {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-charcoal);
  margin: 0;
  flex: 1;
}

.haffit-product-details {
  margin-bottom: var(--spacing-base);
}

.haffit-product-recipe {
  margin-bottom: var(--spacing-xs);
  color: var(--color-secondary-500);
}

.haffit-product-specs {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.haffit-spec {
  background: var(--color-gray-100);
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
}

.haffit-product-date {
  font-size: var(--text-xs);
  color: var(--color-gray-600);
}

.haffit-product-actions {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.haffit-action-btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.haffit-edit-btn {
  color: var(--color-white);
}

.haffit-edit-btn:hover {
  background: var(--color-secondary-600);
  color: var(--color-white);
  text-decoration: none;
}

.haffit-duplicate-btn {
  background: var(--color-blue-500);
  color: var(--color-white);
}

.haffit-duplicate-btn:hover {
  background: var(--color-blue-600);
}

.haffit-delete-btn {
  background: var(--color-red-500);
  color: var(--color-white);
}

.haffit-delete-btn:hover {
  background: var(--color-red-600);
}

/* Empty state styling */

.haffit-empty-state {
  text-align: center;
  padding: var(--spacing-2xl);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
}

.haffit-empty-icon {
  font-size: 4rem;
  margin-bottom: var(--spacing-base);
}

.haffit-empty-state h3 {
  color: var(--color-charcoal);
  margin-bottom: var(--spacing-sm);
}

.haffit-empty-state p {
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-lg);
}

/* Responsive adjustments */

@media (max-width: 768px) {
  .haffit-product-card {
    grid-template-columns: 1fr;
  }
  .haffit-product-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .haffit-product-actions {
    justify-content: center;
  }
  .haffit-action-btn {
    flex: 1;
    text-align: center;
    min-width: 80px;
  }
}

/***************************************
* uprava objednany produkt v my account
****************************************/
.woocommerce-MyAccount-content
  .summary-slot:is([data-block-key="trustindex-reviews-widget-10-10"]) {
  display: none;
}
.woocommerce-MyAccount-content #slozeni-promo-placeholder h5 {
  display: none;
}

.summary-block:is([data-block-group="suroviny"]) {
  gap: 0;
}
/*****************************************
* END MY ACCOUNT DASHBOARD CUSTOMIZATION
******************************************/

/*****************************************

* KROK 10 - MOBILNÍ LAYOUT BEZ TAILWIND

*****************************************/

/* Kontejner pro krok 10 bez Tailwind */

.haffit-mobile-step10-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
}

/* Wrapper pro tab tlačítka */

.haffit-mobile-tabs-wrapper {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-xs);
  flex: 1;
}

/* Responsive layout pro <480px */

@media (max-width: 479px) {
  .haffit-mobile-step10-container {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xs);
    width: 100%;
  }
  /* Zpět tlačítko - první řádek, první sloupec */
  .haffit-mobile-step10-container .haffit-mobile-step10-back {
    width: 48px !important;
    height: 48px !important;
  }
  /* Tab wrapper - první řádek, druhý sloupec + druhý řádek, oba sloupce */
  .haffit-mobile-tabs-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }
  /* Souhrn tlačítko */
  .haffit-mobile-tabs-wrapper .haffit-mobile-summary-btn {
    height: 48px;
    margin-bottom: var(--spacing-4xs);
  }
  /* Objednávka tlačítko - druhý řádek, oba sloupce */
  .haffit-mobile-tabs-wrapper .haffit-mobile-order-btn {
    height: 48px;
    width: 100%;
  }
  /* Alternativní layout - objednávka tlačítko mimo wrapper */
}

/* Základní styly pro tlačítka zůstávají stejné */

.haffit-mobile-step10-container .haffit-mobile-prev-btn {
  /* Zdědí styly z .haffit-mobile-prev-btn */
}

.haffit-mobile-step10-container .haffit-mobile-tab-btn {
  height: 48px !important;
}

/* Zavírací tlačítko tabs - stejný vzhled jako btn zpět */
.haffit-mobile-tabs-close-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-gray-100);
  border: 2px solid var(--color-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  font-weight: bold;
  color: var(--color-charcoal);
}

.haffit-mobile-tabs-close-btn:hover {
  background: var(--color-gray-200);
  border-color: var(--color-gray-400);
  transform: translateY(-1px);
}

/*****************************************

* BREED SELECT STYLES

*****************************************/

/* Breed option container */

.breed-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-2xs) 0;
}

/* Breed option image */

.breed-option__img {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--color-gray-200);
}

/* Breed option title */

.breed-option__title {
  font-weight: 600;
  color: var(--color-charcoal);
  font-size: var(--text-base);
  line-height: 1.2;
}

/* Breed option slang */

.breed-option__slang {
  font-weight: 400;
  color: var(--color-gray-600);
  font-size: var(--text-sm);
  font-style: italic;
}

/* Choices.js custom styling for breed select */

.choices.haffit-breed-choices .choices__list--single .choices__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-2xs) var(--spacing-sm);
}

.choices.haffit-breed-choices .choices__list--single .breed-option__img {
  width: 40px;
  height: 40px;
}

.choices.haffit-breed-choices .choices__list--dropdown .choices__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-gray-100);
}

.choices.haffit-breed-choices
  .choices__list--dropdown
  .choices__item:last-child {
  border-bottom: none;
}

.choices.haffit-breed-choices .choices__list--dropdown .breed-option__img {
  width: 50px;
  height: 50px;
}

/* Hover effect for dropdown items */

.choices.haffit-breed-choices .choices__list--dropdown .choices__item:hover {
  background-color: var(--color-gray-50);
}

/* Selected item styling */

.choices.haffit-breed-choices
  .choices__list--dropdown
  .choices__item[data-choice-selected] {
  background-color: var(--secondary-50);
  color: var(--secondary-700);
}

/*****************************************

* END BREED SELECT STYLES

*****************************************/

/*****************************************

* END KROK 10 - MOBILNÍ LAYOUT BEZ TAILWIND

*****************************************/
div#upozorneni-placeholder p {
  margin: 0;
}
/* Konfigurator Image Upload Styles */
.konfigurator-image-upload-wrapper {
  margin: var(--spacing-base) 0;
}

.custom-dropzone {
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  padding: var(--spacing-xl);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-dropzone:hover,
.custom-dropzone.drag-over {
  border-color: var(--color-secondary-500);
  background: var(--color-gray-100);
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
}

.dropzone-content {
  max-width: 300px;
}

.dropzone-icon {
  color: var(--color-gray-400);
  margin-bottom: var(--spacing-base);
  position: relative;
}

.custom-dropzone:hover .dropzone-icon {
  color: var(--color-secondary-500);
}

.dropzone-content h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-charcoal);
  margin-bottom: var(--spacing-sm);
}

.dropzone-content p {
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-base);
}

.upload-btn {
  background: var(--color-secondary-500);
  color: var(--color-white);
  border: none;
  padding: var(--spacing-sm) var(--spacing-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: var(--spacing-sm);
}

.upload-btn:hover {
  background: var(--color-secondary-600);
  transform: translateY(-1px);
}

.file-info small {
  color: var(--color-gray-500);
  font-size: var(--text-xs);
}

.croppie-editor-wrapper {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-base);
  text-align: center;
  position: relative;
}

.croppie-header {
  margin-bottom: var(--spacing-base);
}

.croppie-header h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-charcoal);
  margin-bottom: var(--spacing-xs);
}

.croppie-header p {
  color: var(--color-gray-600);
  font-size: var(--text-sm);
}

.croppie-container {
  margin: var(--spacing-base) 0;
}

.croppie-controls {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  align-items: center;
}

.croppie-rotation-controls {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
}

.btn-rotate {
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.btn-rotate:hover {
  background: var(--color-gray-100);
  border-color: var(--color-secondary-500);
  transform: translateY(-1px);
}

.btn-rotate span {
  font-size: var(--text-lg);
  font-weight: bold;
}

.btn-close-editor {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: var(--color-white);
  border: 2px solid var(--charcoal);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 10;
}

.btn-close-editor:hover {
  background: var(--charcoal);
  transform: scale(1.05);
}

.btn-close-editor span {
  color: var(--charcoal);
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
}

.btn-close-editor:hover span {
  color: var(--color-white);
}

.btn-confirm-crop {
  background: var(--color-secondary-500);
  color: var(--color-white);
  border: none;
  padding: var(--spacing-sm) var(--spacing-base);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-confirm-crop:hover {
  background: var(--color-secondary-600);
  transform: translateY(-1px);
}

.btn-confirm-crop:disabled {
  background: var(--color-gray-400);
  cursor: not-allowed;
  transform: none;
}

/* Default image preview v dropzóně */
.default-image-preview {
  width: 200px;
  height: 200px;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-s);
  transition: all 0.3s ease;
}

.custom-dropzone:hover .default-image-preview {
  transform: scale(1.05);
  box-shadow: var(--shadow-m);
}

/* Náhled nahraného obrázku */
.uploaded-image-preview {
  width: 300px;
  height: 300px;
  border-radius: 12px;
  object-fit: contain;
  border: 3px solid var(--color-secondary-500);
  box-shadow: var(--shadow-m);
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-base);
}

/* Tlačítko pro smazání obrázku */
.btn-delete-image {
  background: var(--color-white);
  color: var(--color-gray-500);
  padding: 2px;
  border: 2px solid var(--color-gray-500);
  border-radius: 100%;
  width: 30px;
  height: 30px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  position: absolute;
  top: -34px;
  right: -34px;
  justify-content: center;
  font-weight: bold;
}

.btn-delete-image:hover {
  background: var(--color-gray-500);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-s);
}

.btn-delete-image span {
  font-size: var(--text-base);
}

/* Responzivní úpravy */
@media (max-width: 768px) {
  .custom-dropzone {
    padding: var(--spacing-base);
    min-height: 150px;
  }
  .dropzone-content {
    max-width: 250px;
  }
  .dropzone-content h3 {
    font-size: var(--text-base);
  }
  .upload-btn {
    width: 100%;
  }
  .croppie-rotation-controls {
    width: 100%;
    justify-content: center;
  }
  .default-image-preview {
    width: 150px;
    height: 150px;
  }
  .uploaded-image-preview {
    width: 250px;
    height: 250px;
  }
}