/* v1771366866 */

@font-face {
    font-family: 'DM';
    src: url('../fonts/DMSerifDisplay-Regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Afacad';
    src: url('../fonts/AfacadFlux-Regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Gabarito';
    src: url('../fonts/Gabarito-Medium.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}

.disabled { pointer-events: none; opacity: 0.6; }


html {
    scroll-behavior: smooth;
    font-family: 'Afacad', "Times New Roman", serif;
}
/* Root variables for easy theme management */
:root {
    --main-color: #3ba88d;  /* Dark grey for headers and important text */
    --text-color: rgb(27, 27, 17);   /* Main text color */
    --error-color: #dc3545;  /* Updated error color for better visibility */
    --compatibility-low: rgb(255, 0, 0); /* Red for low compatibility */
    --compatibility-high: rgb(0, 255, 0); /* Green for high compatibility */
    --compatibility-default: rgb(0, 0, 0); /* Fallback black color */
    --pomarancz: #ec9e44;
    --biel:#f0ece6;
}
picture{
    height: 417px;
    width: 500px;
}

header, body, main, footer, .form-control, .profile-photo img, #rights, .form-group checkbox, .login-form, .signup-form,
.login-form input, .signup-form input, .flash-popup, .login-form button, .sign-main button, .ai-school-button-container, .baner-container,
.page-content, .content, .modal, #category-dropdown, .custom-dropdown, .posts, .post, .pagination-container, .post-header,
#kontakt, #education_section button, #p-table .btn,
.gsi-material-button, .gsi-material-button .gsi-material-button-content-wrapper{
    width: 100%;
}

.modal-content, #profile-table, .profilegrid1, .form-group, .tutorform button, #request{
    width: 90%;
}

.info-main2, .info-main, .tutor-main, .login-main, .sign-main, .role-main, .index-main, .cart-main, .editpost-main, #p-table{
    width: 60%;
}
.messages-main{
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
/* Base styling for document */
body {
    min-height: 100vh;  /* Ensures the full height of the viewport is used */
    margin: auto;
    background-color: var(--biel);
    line-height: 1.6;
    color: var(--text-color);
    scroll-behavior: smooth; /* Added for smooth scrolling */
    display: flex;
    flex-direction: column; /* Stacks content vertically */
    width: 100%;
    max-width: 100%;
}

/* Main Content Styling */
main {
    z-index: 5;
    position: relative;
    padding: 0;
    height: auto;
}
.page-btn{
    padding: 5px;
}
h1, h2{
    text-align: center;
    font-family: DM;
}

h1 {
    font-weight: normal;
    color: white;
    font-size: 2rem;
}

h2 {
    margin-bottom: 15px;
    color: var(--darkgray);
    font-size: 1.5rem;
}

h3 {
    font-weight: bold;
    color: var(--main-color);
    font-size: 1.5rem;
}

p {
    word-break: none;
}

/* Buttons */
/*kolory*/
.niebieski{
    background-color: var(--pomarancz);
    color: var(--text-color);
}

.jasnozielony{
    background-color: var(--main-color);
}

.szary{
    background-color:var(--text-color) ;
}

/*ogólne style buttonów + style ai buttonów buy pakiet*/
.btn {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 1px;
    color: white;
    font-family: Afacad;
    opacity: 90%;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.btn:hover {
    opacity: 100%;
}
#pc1{
    display: block;
}
#mobi1{
    display: none;
}

/* button na banerze głównym */
#customButton, #customButton1{
    font-size: 1.5rem;
    border-radius: 8px;
    transition: 0.3s;
    padding: 20px 30px;
    background: var(--roz);
    font-weight: normal;
    opacity: 90%;
 }

#customButton:hover, #customButton1:hover{
     opacity: 100%;
 }

/*zastosuj filtry*/
#zastosuj{
    margin-top: 20px;
}

/*resetuj filtry*/
#reset-button{
    margin: 10px 0;
}
.reset-password-request p{
    text-align: center;
}

/*dodaj ogłoszenie, profil tutor*/
.duze_tut{
    margin: 50px 0 30px;
}

.guziki{
    gap: 10px;
    min-width: 100px;
    text-align: center;
}

#expire{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#btn-highlight{
    margin-top: 20px;
}

#edit_og{
    margin: 5px 0;
}

#delete_og{
    background-color: var(--error-color);
    margin: 5px 0;
}

#kontakt{
    bottom: 0;
    margin-top: auto;  /* This pushes the button to the bottom */
}

.login-btn, #register {
    opacity: 90%;
    margin-top: 30px;
}
/*nagłówek Popularne przedmioty na str głównej*/
#pop{
    padding-top: 15px;
}
.categories{
    text-align: center;
}
.ad-space{
    width: 18%;
    height: auto;
    aspect-ratio: 3 / 9;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}
.ad1, .ad2{
    width: 90%;
    height: auto;
    aspect-ratio: 3 / 9;
    border-radius: 6px;
    background-color: transparent;
}
.ad_ad{
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

.a_ad{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#posts-section {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr)); /* Auto-fitting columns */
    gap: 20px; /* Space between the cards */
    box-sizing: border-box; /* Includes padding and border in the element's width */
    padding: 0 5px; /* Optional: ensure some padding */
    margin: 0 auto; /* Center the content */
}

.post {
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    border-radius: 10px;
    height: auto;
    transition: 0.6s ease-in-out;
    background-color: white;
}
/*skontaktuj się na poście*/
.contact-section p{
    text-align: center;
    margin-top: 0;
}
.contact-section{
    margin-top: auto;
    padding-left: 12px;
    padding-right: 12px;
}

/*zdjęcie+imię+lokalizacja i zdjęcie view post*/
.post-header, .vp-tutor-img {
    position: relative;
    aspect-ratio: 1 / 1; /* Keeps the header square */
    background: center / cover no-repeat;
    border-radius: 10px;
}
/*gwiazdki na wyróżnionym i w view post*/
.highlighted .post-header::after{
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 90px;
    height: 30px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}
/*imię tutora*/
.card-subtitle{
    font-size: 1.7rem;
    font-weight: bold;
    margin-bottom: 0;
}

.card-subtitle, .location {
    margin-left: 15px;
    color: white;
    margin-top: 0;
    text-shadow:
        -1px -1px 2px var(--accent-color),
         1px -1px 2px var(--accent-color),
        -1px  1px 2px var(--accent-color),
         1px  1px 2px var(--accent-color); /* Czarna obwódka */
}
.vp-online-badge {
    background: var(--accent-color);
    color: white;
    padding: 3px 5px;
    border-radius: 50px;
    font-size: 0.85rem;
    margin-left: 5px;
}
/*tytuł posta*/
.card-title{
   display: -webkit-box;
    -webkit-line-clamp: 2; /* ⬅️ Tylko 2 linijki */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* ⬅️ Dla "..." na końcu */
    line-height: 1.5em; /* Wysokość jednej linii */
    max-height: 3em;    /* 2 linie × 1.5em */
    margin: 7px 0;
    font-weight: bold;
    font-size: 1rem;
    color: var(--text-color);
    height: 48px;
}

.location{
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: bold;
}

/* Post Details */
.post-details {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align items to the bottom */
    text-align: left;
    height: 100%; /* Ensure it takes full height of the container */
}
/*cena*/
.price {
    color: var(--accent-color);
    margin-bottom: 0;
    padding-top: 10px;
    font-size: 1.2rem;
}
/*div cena i tytuł*/
.card-body {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-top: auto;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 12px;
    padding-bottom: 5px;
}
#rating{
    width: 60px;
    background-color: white;
    border-radius: 50px;
    margin-left: 15px;
}
#rating p{
    text-align: left;
    margin: 0;
    font-size: 0.9rem;
    width: auto;
    padding-left: 5px;
}

.card-header{
    font-family: DM;
    font-size: 1.5rem;
    margin-top: 10px;
}

.post:hover {
    cursor: pointer;
    transform: translateY(-2px);
}

/*jeden z głównych kontenerów po main, content*/
.container {
    display: flex; /* Enables flexbox */
    justify-content: space-between; /* Centers content horizontally */
    align-items: flex-start; /* Centers content vertically (if the parent has a height) */
    flex-direction: row; /* Stacks child elements vertically */
    width: 100%; /* Limit the width to a reasonable size */
}
.container h1{
    margin-top: 10px;
}

.page-content {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

.content {
    min-height: 60vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Stacks inner content vertically */
    border-bottom-radius: 0 0 10px 10px;
}

/* Header strony*/
header {
    background: var(--pomarancz);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: fixed; /* Makes the header fixed at the top */
    box-sizing: border-box; /* Ensure padding is included in the width */
    font-size: 1.2rem;
    top: 0;
    left: 0;
    z-index: 1000;
    height: 50px;
}
/* Menu styling */
header nav {
    display: flex;
    justify-content: space-between;
    width: 60%;
    padding: 0 0;
    text-align: center;
    margin-bottom: 0;
}

header nav .active {
  text-align: center;
}

.left-menu, .right-menu {
    display: flex;
    gap: 0; /* Increased gap */
    align-items: center;
}
/* Right menu pushed to the right */
.right-menu {
    margin: 0 0 0 auto;
}
/* Links in menu */
/* Menu styling */
header nav ul, .sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}
header nav ul{
    height: 100%;
    align-content: center;
}

header nav ul li {
    display: inline-block;
    position: relative; /* Needed for absolute arrow positioning */
    background-color: transparent;
    border-radius: 0;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    transition: border 0.2s ease-in-out;
    height: 100%;
    align-content: center;
}
header nav ul li:hover {
    border-right: 1px solid var(--text-color);
    border-left: 1px solid var(--text-color);
}

header nav ul li a, #about_ai {
    color: var(--text-color);
    margin: 0 20px;
    padding: 10px 0;
    border-radius: 5px;
    transition: 0.3s;
    letter-spacing: 0.05rem;
    opacity: 90%;
    position: relative; /* Ensures arrow is positioned relative to the link */
    font-weight: bolder;
    cursor: pointer;
}

/* Hover Effect */
header nav ul li:hover a {
    text-decoration: none;
    opacity: 100%;
}

/* Arrow Styling */
#fttxt a::before{
    content: "➤"; /* Unicode arrow character */
    font-size: 0.9rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s ease-in-out, left 0.2s ease-in-out;
    color: var(--text-color);
    left: -10px;
}

/* Show Arrow on Hover */
#fttxt a:hover::before{
    opacity: 1;
}

.hamburger-menu {
    display: none;
}

#mess-li{
    padding-left: 15px;
    padding-right: 15px;
}
/*koperta na headerze*/
.message-icon {
    position: relative;
    height: 22px;
    background-repeat: no-repeat;
    background-size: cover; /* Zapewnia, że tło będzie wypełniać całą dostępną przestrzeń */
    background-position: center; /* Centruje tło w oknie przeglądarki */
    display: block;
    width: 28px;
    margin: 0;
    padding: 0;
}

/*kontener na logo*/
.logo-menu {
    position: absolute; /* Positioning it absolutely within the header */
    left: 10px; /* Left alignment */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Ensure it's centered on Y-axis */
    z-index: 1001; /* Above other elements */
    height: 90%;
    align-items: center;
}
/*logo*/
.logo-menu img{
    height: 100%;
    width: auto;
}

/* AI School Button Container */
.ai-school-button-container {
    position: fixed; /* Stays on top when scrolling */
    top: 50px; /* Below the header */
    right: 20px; /* Stick to the right */
    z-index: 10; /* Above other elements */
    display: flex;
    align-items: center;
}

.ai-school-button-container a{
    text-decoration: none;
}
.ai-school-button-container a:hover{
    color: white;
    opacity: 100%;
    text-decoration: none;
}

/* AI School Button */
.ai-school-button {
    background-color: #382629;
    opacity: 0.9;
    color: white;
    font-size: 1rem;
    font-weight: bolder;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 15px;
    padding-right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
    border:none;
    transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out;
}
.ai-school-button:hover {
    opacity: 1; /* Fully visible */
    width: 25%; /* Expand width slightly */
}

/*div z tekstem*/
.opis{
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    width:auto;
    font-size: 1.2rem;
    text-align: justify;
    padding: 20px 0 50px;
    margin: 10px auto 0;
}

.opis p{
    padding: 0 50px;
    text-justify: inter-word;
}
#regulamin1 p, #regulamin2 p, #regulamin3 p, #kontakt1 p{
    text-align: left;
}

.info-main2{
    padding: 0 20px;
    border-radius: 8px;
    margin: 0px auto 20px;
}

.info-main, .tutor-main, .login-main, .sign-main, .role-main, .index-main, .cart-main, .editpost-main{
    border-radius: 8px;
    margin: 20px auto 20px;
}
.editpost-main .form-group{
    width: 100%;
}
.tutor-main{
    background-color: transparent;
}

.info-main h2{
    padding: 0 10px;
}
.info-main p{
    text-align: center;
}
.opis h3{
    padding-left: 50px;
    padding-right: 50px;
}

.login-main h1, .role-main h1{
    margin-bottom: 20px;
}

form {
    background-color: white;
    border-radius: 10px;
    margin: 30px auto 0;
}

#filters h2 {
    margin-top: 0;
}
.filters-container input{
    height: 50px;
}

/*nagłówek Wyszukaj na str głównej*/
#szukaj {
    margin-bottom: 30px;
    font-size: 2.3rem;
}

.form-control {
    box-sizing: border-box; /* Include padding and border in width calculation */
}

.profilegrid1{
    margin: 0 auto;
}
#price{
    margin-bottom: 20px;
}
#dodajogl{
    margin-top: 20px;
}
.tutorform{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: None;
    overflow: visible;
}

.tutorform label{
    margin-top: 0;
    margin-bottom: 8px;
}

.tutorform .form-group:first-child label {
    margin-top: 0;
}

.tutorform .form-group:not(:first-child) {
    margin-top: 20px;
}

.tutorform .form-group {
    width: 90%;
    max-width: 100%;
}

.checkbox-container {
    display: flex;
    justify-content: center; /* Centers the checkbox horizontally */
    margin-top: 5px; /* Optional: Add spacing between label and checkbox */
}

/* Form Group Layout */
.form-group {
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
}

/*kategorie*/
.custom-dropdown {
    position: absolute;
    top: 100%; /* Ensure it appears below the input */
    max-height: 200px;
    overflow-y: auto;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: none; /* Hidden by default */
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

/*itemy przedmioty*/
.dropdown-item {
    padding: 10px;
    cursor: pointer;
    list-style: none;
    border-bottom: 1px solid #f1f1f1;
}
.dropdown-item:hover {
    background-color: #f1f1f1;
}
#dropdown-list{
    padding-left: 0;
}

/*lista przedmiotów*/
.custom-dropdown.show {
    display: block;
    opacity: 1;
}


.form-check{
    flex-direction: row;
}
/* Checkbox Styling */
.form-check-input {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

/*popup show*/
.modal.show {
  display: flex; /* Use flex to center content */
}

#category-dropdown{
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #373737;
    background-color: #white;
    color: #373737;
    appearance: none;
    background-position: right 10px center;
    background-size: 10px;
    transition: all 0.3s ease;
    font-family: Afacad;
}

.card-body p{
    text-align: center;
    font-size: 1.2rem;
}
.card-body h3{
    font-size: 1.2rem;
    margin: 0;
}

/* Pagination container */
.pagination-container {
    text-align: center;
    margin-top: 20px;
    padding: 20px 0;
    background-color: #f4f4f4; /* Light gray background */
    border-radius: 0 0 10px 10px;
    align-items: center;
}

/* Pagination links */
.pagination a {
    margin: 0 5px;
    padding: 4px 12px;
    font-size: 1.2rem;
    color: var(--main-color); /* Bootstrap's default link color */
    text-decoration: none;
    font-family: Afacad;
}

.pagination a:hover {
    background-color: #ddd; /* Light grey background on hover */
}

/* Active page */
.pagination a.active {
    font-weight: bold;
    color: white;
    background-color: var(--accent-color); /* Darker blue background for active page */
    border-radius: 5px;
}

/* Disabled links */
.pagination a.disabled {
    color: var(--main-color); /* Greyed out text */
    cursor: not-allowed;
    pointer-events: none;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.8); /* Black with opacity */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Avoid scrolling when modal is open */
}

.modal-content {
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%; /* Adjust width as needed */
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    position: relative;
    text-align: center;
}

/*guziki na cookisach*/
.modal-content button, #review-form button {
    margin: 10px;
}
#privacyPolicyModal button{
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

#privacyPolicyModal h2 {
  font-size: 1.5em;
  line-height: 1.2;
  /* Use a system font as fallback that is similar to your custom font */
  font-family: 'Afacad', Arial, sans-serif;
}

#privacyPolicyModal p, #privacyPolicyModal button {
  font-size: 1em;
  line-height: 1.5;
  font-family: 'Afacad', Arial, sans-serif;
}

.cookie-options{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    margin-bottom: 20px;
}
.cookie-options label{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.modal-content button:last-child {
    background-color: var(--accent-color);
    color: white;
}

/*x na popupie*/
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
    float: right;
}

.close:hover, .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Links */
a {
    text-decoration: none;
}


/* Profile Image */
.profile-photo {
    width: 300px;
    height: 300px;
    border-radius: 2%;
    text-align: center;
    margin: 30px auto 50px;
    display: block; /* Ensures the container doesn't add extra space */
}

.profile-photo img {
    height: 100%; /* Ensures the image fills the container height */
    aspect-ratio: 1/1;
    object-fit: cover; /* Ensures the image covers the area without distortion */
    border-radius: 2%; /* Makes the image round */
}

/* Footer Styling */
footer {
    padding: 40px 0 0;
    background: var(--pomarancz);
    color: var(--text-color);
    margin-top: 50px; /* Pushes the footer to the bottom */
    bottom: 0;
}

#fttxt{
    width: 60%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    gap: auto;
}

#fttxt h4{
    margin: 0 0 10px;
}
#fttxt ul{
    list-style-type: none;
    flex: 1;
    padding: 0;
    margin: 0;
}
#fttxt a{
    text-decoration: none;
    color: var(--text-color);
    opacity: 90%;
    position: relative;
    padding-left: 0;
}
#fttxt a:hover{
    opacity: 100%;
}

#rights{
    text-align: center;
    margin-top: 50px;
}

/* General form styling */
label {
    font-weight: bold;
    font-size: 1rem;
    color: var(--main-color); /* Dark color for better readability */
}

.form-group input,
.form-group textarea,
.form-group select {
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-size: 0.8rem;
    resize: none;  /* Disables resizing */
}
.form-group select{
    cursor: pointer;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--darkgray);
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.25); /* Glow effect */
    outline: none;
}
.tutor-main textarea {
    min-height: 200px; /* Set minimum height for textareas */
}
input, select, textarea {
    font-family: Afacad;
    font-size: 1.1rem;
}

.form-group input::placeholder {
    font-size: 1.1rem;
    color: #373737;
    opacity: 90%;
}

.form-group .text-danger {
    font-size: 0.85rem;
    color: var(--error-color);
}

.form-group checkbox {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1rem;
}

/*checkboxy w profilu*/
.form-group input[type="checkbox"] {
    width: auto;
    margin-right: 20px;
    vertical-align: middle;
}

#cooperation-terms-check{
    align-items: center;
    font-size: 1rem;
    font-weight: normal;
}

/*nie wiem co to*/
select[multiple] {
    height: auto;
    min-height: 150px; /* Adjust to desired height */
    padding: 10px;
    font-size: 1rem;
}

/* Compatibility Score Styling */
.compatibility-score {
    --score: 100; /* Default score, can be overridden */
    --red: calc(255 - (var(--score) * 2.55)); /* Red decreases as score increases */
    --green: calc(var(--score) * 2.55); /* Green increases as score increases */
    background-color: rgb(var(--red), var(--green), 0);
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for color changes */
}
/*pasek z wynikiem kompatybilności*/
.ribbon {
    margin-left: -17px;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 75%; /* Wstęga zajmuje 3/4 szerokości posta */
    color: white;
    font-weight: bold;
    align-items: center;
    padding: 8px 30px 8px 15px;
    z-index: 10;
    clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
}

/* Specific styles for login and registration forms */
.login-form, .signup-form {
    max-width: 600px;
    text-align: center;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#terms-check{
    flex-direction: row;
    text-align: left;
    column-gap: 5px;
    margin-top: 0;
    display: flex;
    align-items: center;
}
#terms-check label{
    font-weight: normal;
    font-size: 1rem;
}
#terms {
    margin-top: 15px;
}

.login-form input, .signup-form input {
    padding: 8px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.signup-form p{
    width: 90%;
}

table th, table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

table th {
    background-color: var(--main-color);
    color: white;
}

table td {
    color: var(--text-color);
}

/* Buttons z google */
.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: WHITE;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
}

.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 12px;
  width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: center;
  position: relative;
}

.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 0;
  flex-grow: 0;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: white;
  border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents, .gsi-material-button:disabled .gsi-material-button-icon  {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #303030;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: white;
  opacity: 100%;
}

.flash-popup {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 50px;
    border-radius: 5px;
    font-size: 20px;
    color: white;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    max-width: 600px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: Afacad;
}

.flash-popup.show {
    opacity: 1;
    visibility: visible;
}

.flash-popup.success {
    background-color: #28a745;
}

.flash-popup.error {
    background-color: #dc3545;
}

.flash-popup.warning, .flash-popup.danger {
    background-color: #ffc107;
    color: black;
}

.flash-popup.info {
    background-color: var(--jasny);
    color: var(--darkgray);
}

/* Close Button Styling */
.flash-popup .close-btn {
    background: none;
    border: none;
    font-size: 24px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.3s ease;
    opacity: 90%;
}

.flash-popup .close-btn:hover {
    opacity: 100%;
}

/* Custom Checkbox Styling for Alignment and Aesthetic */
#email{
    font-size: 0.8rem;
}

.form-check-input {
    width: 24px;
    height: 24px;
    cursor: pointer;
    accent-color: var(--accent-color); /* Ensures a unified color theme */
}

.form-check-input:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.form-control:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.2);
}

/*chyba checkboxy w teście osobowości*/
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #ccc;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    position: relative;
    margin-right: 10px;
    transition: border-color 0.3s ease;
}

/*checkboxy?*/
input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: transparent;
    border: 2px solid #ccc;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 10px; /* Space between checkbox and label */
}

/* Checked state with animated checkmark */
input[type="checkbox"]:checked {
    background-color: #33cc33;
    border-color: #33cc33;
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

/* Hover effect for interaction */
input[type="checkbox"]:hover {
    border-color: white;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* Focus effect for accessibility */
input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
}

/* Disabled state styling */
input[type="checkbox"]:disabled {
    background-color: #e9ecef;
    border-color: #adb5bd;
    cursor: not-allowed;
}

input[type="checkbox"]:disabled::after {
    border-color: #adb5bd;
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    width: 30px !important;  /* Ensures the checkbox uses the correct width */
    height: 30px !important; /* Ensures the checkbox uses the correct height */
    background-color: transparent;
    border: 2px solid #ccc;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-right: 8px; /* Space between checkbox and label */
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* Adjust the checkmark for smaller size */
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


/* Checkmark style */
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 10px;
    height: 15px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: all 0.3s ease;
}

/* Focus state */
input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
}

/* Override any Bootstrap or default form-control styles */
input[type="checkbox"].form-control {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important; /* Ensure no padding is added */
    margin-right: auto !important; /* Space between checkbox and label */
    margin-top: 20px;
    box-shadow: none !important;
}

#role-selection-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
    background: none;
}

#role-selection-form button {
    margin: 20px;
    width: 70%; /* Fixed width to make buttons more prominent */
}
/*div wokół aktywne ogłoszenia*/
 #profile-table{
     margin: 30px auto 0px;
 }
/*aktywne ogłoszenia*/
#p-table{
    width:100%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    overflow-y: visible;
    min-height: 100%;
}

.title-limit {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4em;
  max-height: 4.2em; /* dokładnie 3 linie */
  height: 100%;
}
/*tabelka z ogłoszeniami na profilu*/
#p-table td:last-child {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    align-items: center; /* Center buttons horizontally */
}
#p-table tr{
    height: auto;
}
#edit_og, #delete_og {
    margin: 0 0 0 auto;
}
/*zaokrąglenie tabelki na dole*/
#prz{
    border-top-left-radius: 10px;
}
#act{
    border-top-right-radius: 10px;
}
.account-alternative {
    margin-top: 15px;
    text-align: center;
}

@media (max-width: 1450px){
    header nav {
        width: 80%;
    }
    .left-menu{
        margin: 0 20% 0 auto;
    }
}

@media (max-width: 1360px){
    header nav {
        width: 90%;
    }
}

@media (max-width: 1240px){
    .left-menu{
        margin: 0 10% 0 auto;
    }
    .ai-school-button{
        width: 25%;
    }
    .ai-school-button:hover{
        width: 28%;
    }
}

@media (max-width: 1175px){
     #posts-section {
        grid-template-columns: repeat(2, minmax(180px, 1fr)); /* Two columns for medium screens */
    }
}

@media (max-width: 1080px){
    .left-menu{
        margin: 0 0 0 auto;
    }
    #customButton, #customButton1{
        font-size: 1.5rem;
        margin-left: 100px;
    }
    #fttxt{
        width: 90%;
        gap: 50px;
    }
}
@media (max-width: 1000px){
    #p-table thead, th {
        display: none;
    }
    #p-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    #p-table tr {
        margin-bottom: 10px;
        display: block;
    }
    #p-table td:last-child {
        display: flex;
        flex-direction: row; /* Align buttons horizontally on wider screens */
        justify-content: space-between;
        width: 100%;
    }
    #p-table .btn{
        flex: 1; /* Make buttons flexible in size */
    }
}
@media (max-width: 950px){
    header nav ul li a {
        font-size: 1rem;
        margin: 0 10px;
    }
    .right-menu{
        margin: 0;
    }
}

@media (max-width: 905px){
    #customButton, #customButton1{
        font-size: 1.2rem;
    }

    .ai-school-button-container {
        position: fixed; /* Makes the container fixed position */
        left: 0; /* Align left */
        width: 100%; /* Full width */
        z-index: 999; /* Below the header but above other content */
    }
    .ai-school-button{
        width: 30%;
    }
    .ai-school-button:hover{
        width: 35%;
    }
}

@media (max-width: 780px) {
    /*popularne kategorie na stronie głównej*/
    #pop_cat {
        padding: 10px 20px;
        margin: 5px;
        white-space: nowrap;
        flex: 0 0 auto;
        width: auto;
    }
    .carousel {
        width: 100%;
        overflow: hidden;
        position: relative;
    }
    /* Stylizowanie suwaka dla karuzeli */
    .categories::-webkit-scrollbar {
        height: 10px; /* Wysokość suwaka */
        border-radius: 5px; /* Zaokrąglenie suwaka */
    }
    .categories::-webkit-scrollbar-thumb {
        background-color: var(--main-color); /* Kolor suwaka */
        border-radius: 5px; /* Zaokrąglenie suwaka */
    }
    .categories::-webkit-scrollbar-track {
        border-radius: 10px; /* Zaokrąglenie tła toru suwaka */
        background-color: rgba(52, 58, 64, 0.5);
    }
    .categories {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
    }
    .role-main h2 {
        margin: 10% 0;
    }
    .container {
        display: flex; /* Enables flexbox */
        justify-content: center; /* Centers content horizontally */
        align-items: center; /* Centers content vertically (if the parent has a height) */
        flex-direction: column; /* Stacks child elements vertically */
        margin: 0 auto;
        width: 100%; /* Full width for container */
        max-width: 1200px; /* Limit the width to a reasonable size */
        min-height: 100%;
        overflow-y: visible;
    }
    #customButton, #customButton1 {
        margin: 0;
    }
    .button-group {
        flex-direction: column;
        gap: 10px;
    }
    .button-group .btn, .btn, button {
        width: 100%;
    }
    .page-btn{
        width: auto;
    }
    #fttxt{
        gap: 30px;
    }
    .index-main{
        width: 95%;
    }
    .ad-space{
        display: none;
    }
}