.hidden {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
}

.visible {
  opacity: 1;
  max-height: 200px;
  transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
}

.btn-equal {
  width: 45px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Privacy Toast */
/* Desktop/tablet default width */
#privacyToast { width: 360px; }

/* Phones: center, wider, safe-area aware, bigger tap targets */
@media (max-width: 576px) {
  .privacy-toast-wrap {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    margin-right: 0 !important;
    /* sit above bottom bars/notches */
    margin-bottom: calc(16px + env(safe-area-inset-bottom, 0));
    width: 92vw;           /* wrapper width */
  }
  #privacyToast {
    width: 100%;           /* toast fills wrapper */
  }
  .privacy-toast-wrap .toast-body {
    font-size: 0.95rem;    /* a hair larger for readability */
  }
  .privacy-toast-wrap .btn {
    padding-top: .55rem;
    padding-bottom: .55rem;
  }
}


/* Form Page CSS */

#forms-page {
  font-family: 'Roboto', sans-serif;
}

#forms-page .nav-tabs .nav-link {
  font-size: 1.1rem;
  font-weight: bold;
}

#forms-page .nav-tabs .nav-link.active {
  color: rgb(79, 105, 190);
}

#forms-page .card {
  border-radius: 15px;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

#forms-page .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

#forms-page #searchBar {
  border-radius: 25px;
  border: 2px solid #007bff;
  padding: 15px;
}

#forms-page .btn-outline-primary {
  border-radius: 25px;
}

#formsList {
  padding: 20px;
  border-radius: 10px;
}

#formTabs .nav-item {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#formTabs .nav-link {
  text-align: center;
  width: 100%;
  padding: 15px;
}

/* Logo Styling */
.ethermi-logo {
  font-size: 4rem;
  /* Large text size */
  font-weight: 800;
  /* Bold font weight */
  background: linear-gradient(to right, #0066cc, #ff3333);
  /* Blue to red gradient */
  -webkit-background-clip: text;
  /* Clip background to text for WebKit browsers */
  background-clip: text;
  /* Standard background clip */
  color: transparent;
  /* Make text color transparent to show the gradient */
  text-align: left;
  /* Align text to the left */
  margin-bottom: 30px;
  /* Spacing below the logo */
}

/* Container Styling */
.container {
  max-width: 1200px;
  /* Set max width */
  background: #ffffff;
  /* White background */
}

/* Additional Styling for Overall Appearance */
.row {
  border: none;
  /* Remove default border */
  box-shadow: none;
  /* Remove shadow */
  background-color: transparent;
  /* Ensure transparency */
}

.rounded-lg {
  border-radius: 20px;
  /* Rounded image edges */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ethermi-logo {
    font-size: 2.8rem;
    /* Adjust size for smaller screens */
  }
}

/* Custom Styles for Navigation Links */
.custom-nav-link {
  font-size: 15px;
  font-weight: 500;
  padding: 4px 8px; /* tighter spacing */
  color: #003366; /* dark blue */
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}

.custom-nav-link:hover,
.custom-nav-link:focus {
  background-color: transparent; /* remove background */
  color: #66b2ff; /* light blue on hover */
  text-decoration: underline;
  outline: none;
}

#backToTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

/* Profile search bar */
.input-group .form-control {
  font-size: 1.2rem;
  /* Increase font size of the input text */
  padding: 10px 15px;
  /* Adjust padding for larger input */
  border-radius: 5px 0 0 5px;
  /* Rounded corners only on the left side of the input */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  /* Add light shadow */
  border: 1px solid #ccc;
  /* Base border */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  /* Smooth transition for focus */
}

.input-group .form-control:focus {
  border-color: #007bff;
  /* Change border color on focus */
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 4px rgba(0, 123, 255, 0.3);
  /* Inline shadow effect */
  outline: none;
  /* Remove default outline */
}

/* Profile search button (search and clear buttons) */
.input-group .btn {
  font-size: 1.2rem;
  /* Increase font size of the button */
  padding: 10px 15px;
  /* Adjust padding for larger button */
  border-radius: 0 5px 5px 0;
  /* Rounded corners only on the right side of the buttons */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  /* Add light shadow to the buttons */
}

/* Search and close icons */
.input-group .fa-search,
.input-group .fa-times {
  font-size: 1.5rem;
  /* Make the search and close icons bigger */
  cursor: pointer;
  /* Make sure the icons are clickable */
}

/* Aitisi - Odeio */
.dynamic-field {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
  display: none;
  /* Initially hidden */
}

.dynamic-field.visible {
  display: block;
  /* Allow the element to take up space */
  opacity: 1;
  max-height: 100px;
  transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
}

/* DATA REQUIRED FIELD SYMBOL */
.required-label::after {
  content: " *";
  color: red;
  font-weight: bold;
}

/* CSS FOR FIELDS WITH READONLY */
.form-control[readonly] {
  background-color: #e9ecef !important;
  opacity: 1;
  cursor: not-allowed;
}

.flag-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;  /* Makes it round */
  object-fit: cover;   /* Keeps proportions and fills circle */
  border: 1px solid #ccc; /* Optional: subtle border */
}

.flag-icon.active-flag {
  border: 2px solid #007bff; /* Bootstrap primary */
  box-shadow: 0 0 4px #007bff;
}

/* === Καταγγελίες Page Styling === */
.kataggelies-page .custom-card {
  border-radius: 15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 1.5rem 1rem;
}

.kataggelies-page .custom-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.kataggelies-page .red-border {
  border-top: 5px solid #dc3545;
}

.kataggelies-page .blue-border {
  border-top: 5px solid #0d6efd;
}

.kataggelies-page .icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  line-height: 60px;
  background-color: rgba(0, 0, 0, 0.05);
  display: inline-block;
}

.kataggelies-page h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}


/* Index Costum CCS */
 /* Root tokens so themes are easy to tweak */
  :root {
    --radius-xl: 16px;
    --border-w: 4px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .06);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, .10);
  }

  /* Base folder button */
  .folder-btn {
    /* Theme variables (overridden by modifiers below) */
    --c: #0d6efd;
    /* main color */
    --c-50: rgba(13, 110, 253, .06);
    /* faint background tint */
    --c-70: rgba(13, 110, 253, .7);
    /* hover color */
    --txt: var(--c);

    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;

    width: 100%;
    min-height: 120px;
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;

    background: linear-gradient(180deg, #fff, #fff),
      /* ensures solid on light themes */
      radial-gradient(120% 140% at 0% 0%, var(--c-50), transparent 60%);
    border: var(--border-w) solid var(--c);
    border-radius: var(--radius-xl);
    color: var(--txt);
    text-decoration: none;

    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
    overflow: hidden;
  }

  /* Folder tab (real element = better control than ::before) */
  .folder-btn .folder-tab {
    position: absolute;
    top: -12px;
    left: 12px;
    width: 84px;
    height: 26px;
    background: #fff;
    border: var(--border-w) solid var(--c);
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
    z-index: 1;
  }

  /* Subtle sheen */
  .folder-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, .18) 30%, rgba(255, 255, 255, 0) 60%);
    transform: translateX(-120%);
    transition: transform .6s ease;
    pointer-events: none;
  }

  /* Icon bubble */
  .folder-btn .folder-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(0, 0, 0, .03);
  }

  .folder-btn i {
    font-size: 2rem;
    line-height: 1;
    color: var(--c);
    transition: transform .18s ease, color .18s ease;
  }

  /* Text stack */
  .folder-btn .folder-text {
    display: grid;
    gap: .25rem;
    text-align: left;
  }

  .folder-btn .folder-title {
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1.2;
  }

  .folder-btn .folder-subtitle {
    font-size: .95rem;
    opacity: .75;
  }

  /* Caret */
  .folder-btn .folder-caret i {
    font-size: 1.25rem;
    opacity: .6;
  }

  /* Hover / focus */
  .folder-btn:hover,
  .folder-btn:focus {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    outline: none;
  }

  .folder-btn:hover .folder-tab,
  .folder-btn:focus .folder-tab {
    background: #fff;
    border-color: var(--c-70);
    transform: translateY(1px);
  }

  .folder-btn:hover i,
  .folder-btn:focus i {
    color: var(--c-70);
    transform: translateX(1px);
  }

  .folder-btn:hover::after,
  .folder-btn:focus::after {
    transform: translateX(120%);
  }

  /* Strong visible focus for keyboard users */
  .folder-btn:focus-visible {
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--c) 25%, transparent), var(--shadow-lg);
  }

  /* Themed modifiers (per button) */
  .folder-btn--primary {
    /* Αιτήσεις */
    --c: #0d6efd;
    --c-50: rgba(13, 110, 253, .08);
    --c-70: rgba(13, 110, 253, .75);
  }

  .folder-btn--danger {
    /* Καταγγελίες */
    --c: #dc3545;
    --c-50: rgba(220, 53, 69, .08);
    --c-70: rgba(220, 53, 69, .75);
  }

  .folder-btn--success {
    --c: #198754;
    --c-50: rgba(25, 135, 84, .08);
    --c-70: rgba(25, 135, 84, .75);
  }

  .folder-btn--warning {
    --c: #fd7e14;
    --c-50: rgba(253, 126, 20, .10);
    --c-70: rgba(253, 126, 20, .80);
  }

  .folder-btn--info {
    --c: #0dcaf0;
    --c-50: rgba(13, 202, 240, .10);
    --c-70: rgba(13, 202, 240, .80);
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {

    .folder-btn,
    .folder-btn * {
      transition: none !important;
    }
  }


/* Kataggeliew HTML green border */
.green-border {
  border-top: 4px solid #28a745 !important; /* Bootstrap green */
}

/* Sienna accessibility button */
#sienna-widget {
    bottom: 100px !important;  /* default is ~20px */
    right: 20px !important;
    z-index: 99999 !important; /* make sure it's above other elements */
}