body { 
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;;
  background-image: url('/assets/img/bg-pattern7.png'); /* helyettesítsd a saját elérési úttal */
  background-repeat: repeat;
  background-size: 256px 256px;
  background-position: top center;
  background-attachment: fixed;

}

p,h1,h2,h3,h4,h5 {
	  color: #3a3a3a;
}

.card {
  --bs-card-title-color: #3a3a3a;
}

nav.navbar {
	background-color:#720044 !important;
}

.bg-custom-merlot {
  background-color: #720044;
  color: #fff;
}

.bg-custom-pink {
  background-color: #d122b2;
  color: #fff;
}

.btn-outline-merlot {
  color: #800000;
  border-color: #800000;
}

.btn-outline-merlot:hover,
.btn-outline-merlot:focus,
.btn-outline-merlot:active {
  color: #fff !important;
  background-color: #800000 !important;
  border-color: #800000 !important;
  text-decoration: none;
}


.btn-merlot {
  --bs-btn-color: #fff;
  --bs-btn-bg: #800000;
  --bs-btn-border-color: #800000;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #a00000;
  --bs-btn-hover-border-color: #a00000;
  --bs-btn-focus-shadow-rgb: 128, 0, 0;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6a0000;
  --bs-btn-active-border-color: #6a0000;
  --bs-btn-disabled-bg: #800000;
  --bs-btn-disabled-border-color: #800000;
  --bs-btn-disabled-color: #fff;
}


.btn-merlot {
  background-color: #800000 !important;
  border-color: #800000 !important;
  color: #fff !important;
}

.btn-merlot:hover {
  background-color: #a00000 !important;
  border-color: #a00000 !important;
  color: #fff !important;
}

/*SÖTÉT SZÍLVA*/
.bg-custom-plum {
	background-color: #65375d;
	 color: #fff;
}
	
/* élénk piros */
.bg-custom-hotred {
	background-color: #ff3a3a;
	color: #fff;
}

.bg-custom-steelblue {
	background-color: #1e6ca7;
	color: #fff;
}

.bg-custom-lightblue {
	background-color: #009fa8;
	color: #fff;
}



/* élénk piros */
.bg-custom-gray {
	background-color: #ccd1d1 ;
	color: #2e4053;
}

.bg-custom-pinklight {
  background-color: #e8daef !important;
  color: #4a235a !important;
  border: 1px solid #b795c2 !important;  /* finom sötétebb lila keret */
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(74, 35, 90, 0.15) !important; /* halvány árnyék */
}


.bg-custom-redlight {
  background-color: #ffc9c9 !important;
  color: #fd1313 !important; /* sötétebb vörösbarna */
  border: 1px solid #cd6155 !important; /* erőteljesebb kontrasztos pirosas */
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(192, 57, 43, 0.2) !important;
}



.bg-custom-magentalight {
  background-color: #ffd6ed   !important;
  color: #4a235a !important; /* mély padlizsán */
  border: 1px solid #a569bd !important; /* kicsit sötétebb magenta */
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(155, 89, 182, 0.2) !important;
}


.bg-custom-blue {
  background-color: #e6f0ff !important;         /* világoskék háttér */
  color: #003366 !important;                   /* sötétkék szöveg */
  border: 1px solid #99c2ff !important;        /* halvány, de jól kontrasztos kék */
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(0, 51, 102, 0.15) !important;  /* mélykék árnyék */
}

.bg-custom-powder {
  background-color: #fde6f2 !important;         /* púderrózsaszín háttér */
  color: #800040 !important;                    /* bordós szöveg */
  border: 1px solid #d18ab8 !important;         /* púderhez illő rózsás-bordós keret */
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(128, 0, 64, 0.15) !important;  /* finom pinkes árnyék */
}


.bg-custom-powder .ad-text,
.bg-custom-blue .ad-text,
.bg-custom-redlight .ad-text,
.bg-custom-magentalight .ad-text {
  color: #fff !important;
}


.bg-custom-powder .ad-text {
  color: #800040  !important;
}

.bg-custom-blue .ad-text {
  color: #003366  !important;
}

.bg-custom-redlight .ad-text {
  color: #9a1d35  !important;
}

.bg-custom-magentalight .ad-text {
  color: #852259  !important;
}

.bg-custom-blue fieldset.bg-light .ad-text,
.bg-custom-blue fieldset.bg-light p,
.bg-custom-blue fieldset.bg-light li,
.bg-custom-blue fieldset.bg-light h5 {
  color: #003366 !important;
}

.bg-custom-powder fieldset.bg-light .ad-text,
.bg-custom-powder fieldset.bg-light p,
.bg-custom-powder fieldset.bg-light li,
.bg-custom-powder fieldset.bg-light h5 {
  color: #800040 !important;
}
	
	
.bg-custom-redlight fieldset.bg-light .ad-text,
.bg-custom-redlight fieldset.bg-light p,
.bg-custom-redlight fieldset.bg-light li,
.bg-custom-redlight fieldset.bg-light h5 {
  color: #9a1d35 !important;
}

.bg-custom-magentalight fieldset.bg-light .ad-text,
.bg-custom-magentalight fieldset.bg-light p,
.bg-custom-magentalight fieldset.bg-light li,
.bg-custom-magentalight fieldset.bg-light h5 {
  color: #852259  !important;
}






/* A kijelölt tartomány színe (belső sáv) */
#age-slider .noUi-connect {
  background-color: #d122b2 !important;
}

/* A sáv alapszíne (háttérsáv) */
#age-slider .noUi-target {
  background: #f8f0f8; /* világos, enyhén lilás háttér */
  border: 1px solid #d122b2;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}



/* Hover és fókusz állapot a handle-ön */
#age-slider .noUi-handle:hover,
#age-slider .noUi-handle:focus {
  box-shadow: 0 0 8px #d122b2;
  cursor: grab;
}

#age-slider .noUi-connect {
  background: linear-gradient(90deg, #ff3a3a, #d122b2);
}


/* A kijelölt (checked) állapot háttérszíne és szegélye */
.form-check-input:checked {
  background-color: #720044 !important;
  border-color: #720044 !important;
}

/* A pipa ikon színe (SVG) */
.form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M12.97 4.97a.75.75 0 0 1 0 1.06l-6 6a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 0 1 1.06-1.06L6 10.44l5.47-5.47a.75.75 0 0 1 1.06 0z'/%3e%3c/svg%3e") !important;
}

.thumb-container {
  width: 100%;
  aspect-ratio: 1 / 1;         /* Négyzetes keret */
  overflow: hidden;
  border-radius: 6px;
  background-color: #f8f9fa;   /* világos háttér a vizuális egység miatt */
  margin: 0 auto; /* középre igazítás blokkszinten */
}

.thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* Vágja, de arányosan középre helyezve */
  display: block;
}


.thumb-grid-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start;
}

.thumb-wrapper-details {
  flex: 1 0 calc(25% - 0.5rem);  /* 4 oszlopos layout */
  max-width: 200px;
}

@media (max-width: 768px) {
  .thumb-wrapper-details {
    flex: 1 0 calc(50% - 0.5rem);  /* Mobilon 2 oszlop */
  }
}

.thumb-container-details {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  background-color: #f8f9fa;
  border: 1px solid #e1e1e1;
  transition: transform 0.2s ease;
}

.thumb-container-details:hover {
  transform: scale(1.08);
}

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

legend {
  font-weight: 600;
  color: #6c2b6c;  /* lehet a projekted színe */
}



.hirdetesek h1, 
.hirdetesek h2, 
.hirdetesek h3,
.hirdetesek h4,
.hirdetesek h5 {
	font-weight: normal;
	font-size: 1.0em;
}

/* Általános színes gombstílus */
.color-button {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  text-decoration: none;
  color: #fff; /* alap betűszín */
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.color-green {
  background-color: #28a745;
  border-color: #28a745;
}

.color-green:active,
.color-green:hover {
  background-color: #218838 !important;
  border-color: #1e7e34 !important;
}

.color-red {
  background-color: #dc3545;
  border-color: #dc3545;
}

.color-red:active,
.color-red:hover {
  background-color: #c82333 !important;
  border-color: #bd2130 !important;
}

.color-orange {
  background-color: #fd7e14;
  border-color: #fd7e14;
}

.color-orange:active,
.color-orange:hover {
  background-color: #e8590c !important;
  border-color: #d9480f !important;
}

.color-purple {
  background-color: #6f42c1;
  border-color: #6f42c1;
}

.color-purple:active,
.color-purple:hover {
  background-color: #5a32a3 !important;
  border-color: #4e2a8f !important;
}


.color-pink {
  background-color: #e83e8c;
  border-color: #e83e8c;
}
.color-pink:active,
.color-pink:hover {
  background-color: #d63384 !important;
  border-color: #c72577 !important;
}


.hc-purple {
  background-color: #6f42c1;
  color: #fff;
}

.hc-grey{
	background-color: #6c757d;
	 color: #fff;
}


.chatinfo {
  background-color: #f8f9fa;
  border: 1px solid #ccc;
  border-radius: .5rem;
  padding: 1rem;
   font-family: "VT323", monospace;
  font-weight: 100;
  font-style: normal;
  font-size: 1.2em;
}

.chatinfo .userCount {
	font-size: 1em;
	background-color: #28a745;
	border-color: #28a745;
}


.chatbox .you {
 display: inline-block;
  font-weight: 400;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: #32cd56; /* Alap zöld */
  border: 1px solid #32cd56;
  padding: 0 6px 0 2px;
  margin-bottom: 2px;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, 
              background-color 0.15s ease-in-out,
              border-color 0.15s ease-in-out, 
              box-shadow 0.15s ease-in-out;
  cursor: pointer;
}

.chatbox .partner {
 display: inline-block;
  font-weight: 400;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: #00bfff;
  border: 1px solid #00bfff;
  padding: 0 6px 0 2px;
  margin-bottom: 2px;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, 
              background-color 0.15s ease-in-out,
              border-color 0.15s ease-in-out, 
              box-shadow 0.15s ease-in-out;
  cursor: pointer;
}

.chatbox .admin {
 display: inline-block;
  font-weight: 400;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: red;
  border: 1px solid red;
  padding: 0 6px 0 2px;
  margin-bottom: 2px;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, 
              background-color 0.15s ease-in-out,
              border-color 0.15s ease-in-out, 
              box-shadow 0.15s ease-in-out;
  cursor: pointer;
}

.chatbox .system {
	font-family: "VT323", monospace;
	color: red;
}


@media (max-width: 576px) {
	
	.navbar-brand {
	  padding-left: 1rem;
	}	
	
	.navbar-nav {
	 padding-left: 1rem; 
	}	
	
  .container-fluid,
  .row,
  .col-md-12,
  .p-4,
  .mb-3 {
    padding: 0 !important;
  }
  
  .form-check {
    padding-left: 2rem !important; /* vagy 1rem ha jobban beljebb akarod tolni */
  }

  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .container,
  .card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .card-body {
    padding: 1rem !important;
  }


  
}

/* admin */

nav.xcontrol {
	background-color:#000 !important;
}


/* Mezők és fieldset-ek közötti térköz */
form fieldset {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 2rem 1.5rem;
  margin-bottom: 2.5rem;
  background-color: #fdfdfd;
}

/* A legend jobban kiemelve */
form fieldset legend {
  font-size: 1.25rem;
  font-weight: 500;
  padding: 0 0.5rem;
  color: #5c5c5c;
  border-bottom: 2px solid #dee2e6;
  margin-bottom: 1.5rem;
}
form fieldset {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  background-color: #f8f9fa;
}


#preview {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

.image-card {
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.thumbnail-wrapper {
  position: relative;
  width: 100px;
}

.thumbnail-wrapper img {
  width: 100%;
  border-radius: 0.5rem;
}

.remove-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 0 0.4rem;
  border-radius: 50%;
  font-weight: bold;
  line-height: 1;
}

.remove-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}



/* profile */
/* Tab gombok (nem aktív) */
.nav-tabs .nav-link {
  color: #800000;
  border: 1px solid transparent;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}

/* Tab gombok (hover/aktív) */
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active {
  color: #fff;
  background-color: #800000;
  border-color: #800000 #800000 #f8f9fa;
}

/* hirdetes lista */
.ad-text {
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #3a3a3a;
}

/* paginátor */
.pagination .page-link {
  color: #800000;
  border: 1px solid #800000;
  background-color: #fff;
  transition: all 0.2s ease-in-out;
}

.pagination .page-link:hover,
.pagination .page-link:focus,
.pagination .page-link:active {
  background-color: #800000;
  border-color: #800000;
  color: #fff;
  text-decoration: none;
}

.pagination .page-item.active .page-link {
  background-color: #800000;
  color: #fff;
  border-color: #800000;
}

.pagination .page-item.disabled .page-link {
  color: #aaa;
  background-color: #f8f9fa;
  border-color: #ddd;
}


.grecaptcha-badge {
    opacity: 0.4;
    transition: opacity 0.3s;
}
.grecaptcha-badge:hover {
    opacity: 1;
}


.carousel-item {
  height: 250px;
  overflow: hidden;
}
.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}