html {
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
img,
picture,
video,
canvas,
svg {
max-width: 100%;
}
input,
select,
textarea,
button {
max-width: 100%;
font: inherit;
}
body {
font-family: "Jost", "Segoe UI", Arial, sans-serif;
background: #f9f9f9;
margin: 0;
padding: 0;
overflow-x: hidden;
}
main {
display: block;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
background: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
box-sizing: border-box;
}
/* Override main styles for profile page */
main .profile-container {
max-width: 100%;
}
main:has(.profile-container),
body:has(.profile-container) main {
max-width: 100% !important;
background: white !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
h1 {
text-align: center;
}
form div {
margin-bottom: 15px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
}
input.code-digit {
background: #F0E2E2 !important;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
.messages {
list-style: none;
padding: 0;
}
.messages li {
background: #e0ffe0;
border: 1px solid #b2ffb2;
padding: 8px;
margin-bottom: 10px;
border-radius: 0;
}
.errorlist {
background: #ffe0e0;
border: 1px solid #ffb2b2;
padding: 10px;
border-radius: 0;
margin-bottom: 10px;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* ===== HEADER / NAVBAR ===== */
header {
background-color: #521B1E;
}
/* Glavni container za nav */
.main-navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
min-height: 80px;
}
.main-navbar .navbar-logo {
height: 72px;
display: block;
}
/* Meni (desktop) */
.main-navbar .navbar-collapse {
display: flex;
justify-content: flex-end;
}
.main-navbar .navbar-nav {
display: flex;
align-items: center;
gap: 24px;
list-style: none;
margin: 0;
padding: 0;
}
/* Linkovi u meniju */
.main-navbar .navbar-nav .nav-link,
.main-navbar .navbar-brand {
color: #FFF6F5;
font-weight: 500;
text-decoration: none;
transition: color 0.3s ease;
}
.main-navbar .navbar-nav .nav-link:hover,
.main-navbar .navbar-nav .nav-link:focus {
color: rgba(255, 246, 245, 0.7);
text-decoration: none;
transition: color 0.3s ease;
}
/* Aktivni link - potamljen i ne klikabilan */
.main-navbar .navbar-nav .nav-link-active {
color: rgba(255, 246, 245, 0.7);
text-decoration: none;
cursor: default;
pointer-events: none;
}
/* Logout dugme kao link */
.main-navbar .nav-item form {
display: inline;
}
.main-navbar .nav-item button.nav-link {
background: none;
border: none;
color: #FFF6F5;
cursor: pointer;
padding: 0.5rem 0.75rem;
font-size: 1rem;
text-decoration: none;
transition: color 0.3s ease;
}
.main-navbar .nav-item button.nav-link:hover {
color: rgba(255, 246, 245, 0.7);
text-decoration: none;
transition: color 0.3s ease;
}
/* Dugme Zakaži termin – uvek vidljivo, i bez otvaranja menija */
.main-navbar .navbar-collapse {
order: 1;
margin-left: auto;
}
.main-navbar .nav-cta {
order: 2;
display: inline-flex;
align-items: center;
min-height: 44px;
margin-left: 28px;
padding: 0 20px;
border-radius: 0;
border: 1px solid rgba(255, 246, 245, 0.55);
background: rgba(255, 246, 245, 0.1);
color: #FFF6F5;
font-size: 17px;
font-weight: 400;
white-space: nowrap;
text-decoration: none;
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.main-navbar .nav-cta:hover,
.main-navbar .nav-cta:focus-visible {
border-color: #FFF6F5;
background: #FFF6F5;
color: #521B1E;
text-decoration: none;
}
/* Hamburger dugme */
.main-navbar .navbar-toggler {
border: none;
padding: 0;
width: 44px;
height: 44px;
background: transparent;
cursor: pointer;
display: none; /* desktop: sakrij */
}
.main-navbar .navbar-toggler:focus {
outline: none;
box-shadow: none;
}
/* 3 horizontalne linije boje #FFF6F5 */
.main-navbar .toggler-line {
display: block;
width: 22px;
height: 2px;
margin: 4px 0;
background-color: #FFF6F5;
}
.main-navbar .mobile-menu-header {
display: none;
}
/* ===== Responsive ===== */
@media (max-width: 991.98px) {
.main-navbar {
flex-wrap: nowrap;
padding: 8px 16px;
min-height: 64px;
}
.main-navbar .navbar-logo {
height: 48px;
}
.main-navbar .navbar-toggler {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.main-navbar .nav-cta {
order: 0;
min-height: 40px;
margin-left: auto;
margin-right: 6px;
padding: 0 14px;
font-size: 15px;
}
/* Slide-in drawer meni */
.main-navbar .navbar-collapse {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 70vw;
max-width: 360px;
background-color: #521B1E;
padding: 24px 20px 24px;
display: block;
transform: translateX(-100%);
transition: transform 0.25s ease-out;
z-index: 1000;
}
.main-navbar .navbar-collapse.is-open {
transform: translateX(0);
}
/* Logo na vrhu drawer-a */
.main-navbar .mobile-menu-header {
display: block;
margin-bottom: 24px;
}
.main-navbar .mobile-menu-logo {
height: 64px;
display: block;
}
/* Linkovi – ceo red klikabilan, bez zaobljenja, bez “senke†*/
.main-navbar .navbar-nav {
flex-direction: column;
align-items: stretch;
gap: 0;
margin: 0;
padding: 0;
}
.main-navbar .nav-item {
margin: 0;
}
.main-navbar .navbar-nav .nav-link,
.main-navbar .nav-item button.nav-link {
display: block;
width: 100%;
padding: 14px 0; /* vertikalni padding, širinu drži parent */
font-size: 1.1rem;
border-radius: 0; /* više nije pill */
background: transparent; /* nema blage “senke†*/
text-align: left;
}
.main-navbar .navbar-nav .nav-link:hover,
.main-navbar .nav-item button.nav-link:hover {
background: rgba(255, 246, 245, 0.12); /* blagi hover, pravougaoni */
text-decoration: none;
}
/* Aktivni link na mobilnim */
.main-navbar .navbar-nav .nav-link-active {
background: rgba(255, 246, 245, 0.12);
color: rgba(255, 246, 245, 0.7);
cursor: default;
pointer-events: none;
}
/* Overlay iza menija ostaje isti */
.mobile-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 900;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease-out;
}
.mobile-backdrop.is-active {
opacity: 1;
pointer-events: auto;
}
}
/* ===== FOOTER ===== */
.site-footer {
background-color: #521B1E; /* ista boja kao header */
color: #FFF6F5;
padding: 28px 32px 18px; /* horizontalni padding 32px kao u headeru */
}
/* svi linkovi u footeru */
.site-footer a {
color: #FFF6F5;
text-decoration: none;
}
.site-footer a:hover {
text-decoration: underline;
}
/* unutrašnji layout – full širina */
.footer-inner {
width: 100%;
margin: 0;
display: flex;
gap: 32px;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
/* tri kolone – ravnomerno, sadržaj centriran */
.footer-column {
flex: 1 1 0;
min-width: 0;
text-align: center;
}
.footer-brand {
flex: 1 1 0;
text-align: center;
}
/* veći logo */
.footer-logo {
height: 96px;
display: block;
margin: 0 auto;
}
/* naslovi kolona */
.footer-column h4 {
margin: 0 0 8px;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
/* obiÄan tekst */
.footer-column p {
margin: 4px 0;
font-size: 14px;
}
/* Kontakt: SVG ikonice, tekst poravnat levo unutar centrirane kolone */
.footer-contact-list {
display: inline-grid;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
text-align: left;
}
.site-footer .footer-contact-row {
display: flex;
align-items: flex-start;
gap: 10px;
min-height: 36px;
padding: 8px 0;
font-size: 14px;
line-height: 1.35;
}
.footer-icon {
flex: 0 0 18px;
margin-top: 1px;
}
/* Donja linija sa pravima */
.footer-bottom {
width: 100%;
margin: 20px 0 0;
border-top: 1px solid rgba(255, 246, 245, 0.2);
padding-top: 10px;
font-size: 13px;
text-align: center;
}
@media (max-width: 767.98px) {
.footer-inner {
flex-direction: column;
gap: 20px;
}
.footer-column {
text-align: left;
}
.footer-bottom {
text-align: left;
font-size: 12px;
}
.footer-logo {
height: 80px;
}
}
/* HOME PAGE LAYOUT */
body.home-page main {
max-width: none;
margin: 0;
padding: 0;
background: none;
box-shadow: none;
border-radius: 0;
}
/* === HERO SEKCIJA (HOME) === */
.home-hero {
position: relative;
min-height: calc(100vh - 80px); /* ceo ekran ispod headera */
display: flex;
align-items: center;
padding: 0 10vw;
color: #FFF6F5;
overflow: hidden;
}
/* Pozadinska slika + zatamljeni gradient */
.home-hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
url("../img/home-hero.d21b50db1dcb.webp") center/cover no-repeat;
z-index: -1;
}
.home-hero-inner {
max-width: 680px; /* malo Å¡ire da ne lomi tekst */
display: flex;
flex-direction: column;
align-items: flex-start; /* i tekst i dugme u istoj ravni */
}
.home-hero-title {
font-family: "Italiana", serif;
font-weight: 400;
font-size: clamp(72px, 9vw, 110px);
line-height: 1.03;
margin: 0;
text-align: left; /* NOVO – pregazi globalni h1 center */
}
/* CTA dugme */
.home-hero-cta {
display: inline-block;
padding: 20px 60px;
border-radius: 0;
background-color: #521B1E;
color: #FFF6F5;
font-size: 23px;
font-family: "Gilda Display", serif;
text-decoration: none;
border: none;
cursor: pointer;
letter-spacing: 0.03em;
transition: background-color 0.3s ease;
}
.home-hero-cta:hover {
background-color: #3f0f0f;
text-decoration: none;
}
.home-hero-line {
display: block;
}
/* Hero responsive: niži na telefonu, naslov se smanjuje sa širinom ekrana umesto da se seče */
@media (max-width: 768px) {
.home-hero {
min-height: clamp(420px, 70vh, 620px);
padding: 48px 24px;
}
.home-hero-title {
font-size: clamp(40px, 14vw, 72px);
overflow-wrap: break-word;
}
.home-hero-cta {
font-size: 18px;
padding: 14px 40px;
}
}
/* === GALERIJA SEKCIJA (HOME) === */
.home-gallery {
position: relative;
padding: 64px 10vw;
display: flex;
align-items: stretch;
justify-content: center;
overflow: hidden;
box-sizing: border-box;
}
/* Pozadinska slika */
.home-gallery::before {
content: "";
position: absolute;
inset: 0;
background: url("../img/gallery-background.2eafd39c44a6.png") center/cover no-repeat;
z-index: -1;
}
.home-gallery-inner {
display: flex;
gap: 20px;
width: 100%;
max-width: 1400px;
align-self: stretch;
}
.gallery-subsection {
display: flex;
flex-direction: column;
gap: 20px;
}
.gallery-subsection-single {
flex: 2;
display: flex;
flex-direction: column;
}
.gallery-subsection-double {
flex: 1;
}
/* Slike u podsekcijama */
.gallery-photo {
width: 100%;
height: auto;
object-fit: cover;
display: block;
}
/* Prva i treća podsekcija - jedna slika koja treba da zauzme punu visinu */
.gallery-subsection-single .gallery-photo {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Centralna podsekcija - dve slike vertikalno */
.gallery-subsection-double .gallery-photo {
width: 100%;
height: auto;
object-fit: cover;
}
/* Responsive za galeriju */
@media (max-width: 1150px) {
.home-gallery {
padding: 48px 5vw;
}
.home-gallery-inner {
gap: 15px;
}
}
@media (max-width: 900px) {
.home-gallery {
padding: 40px 24px;
}
.home-gallery-inner {
gap: 12px;
}
}
/* === PRICING / CENOVNIK SEKCIJA (HOME) === */
.home-pricing {
background: #ffffff;
padding: 64px 10vw;
}
.home-pricing-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 80px;
width: 100%;
}
/* LEVA SEKCija - COPY (ostaje ista) */
.home-pricing-copy {
flex: 0 0 38%;
max-width: 420px;
}
.home-pricing-title {
font-family: "Gilda Display", serif;
font-weight: 400;
font-size: 46px;
line-height: 1.1;
margin: 0 0 28px;
color: #000;
}
.home-pricing-text {
font-size: 20px;
line-height: 1.6;
margin: 0 0 40px;
color: #111827;
font-family: "Gilda Display", serif;
}
.home-pricing-cta {
display: inline-block;
padding: 20px 60px;
border-radius: 0;
background-color: #521B1E;
color: #FFF6F5;
font-size: 23px;
font-family: "Gilda Display", serif;
text-decoration: none;
border: none;
cursor: pointer;
letter-spacing: 0.03em;
transition: background-color 0.3s ease;
}
.home-pricing-cta:hover {
background-color: #3f0f0f;
text-decoration: none;
}
/* DESNA SEKCIJA - SLIKA */
.home-pricing-visual {
flex: 1;
display: flex;
justify-content: flex-end;
}
.pricing-photo-img {
width: 80%;
max-width: 100%;
height: auto;
display: block;
}
/* RESPONSIVE - sekcije jedna ispod druge */
@media (max-width: 1150px) {
.home-pricing {
padding: 56px 24px;
}
.home-pricing-inner {
flex-direction: column;
gap: 40px;
text-align: center;
}
.home-pricing-copy {
flex: none;
max-width: 520px;
margin: 0 auto;
}
.home-pricing-visual {
width: 100%;
max-width: 500px;
margin: 0 auto;
justify-content: center; /* centriraj sliku kada su sekcije jedna ispod druge */
}
}
@media (max-width: 900px) {
.home-pricing {
padding: 40px 24px;
}
.home-pricing-title {
font-size: 32px;
}
.home-pricing-text {
font-size: 15px;
}
.home-pricing-cta {
font-size: 18px;
padding: 14px 40px;
}
}
@media (max-width: 600px) {
.home-pricing {
padding: 32px 16px;
}
}
/* === VEGANSKI PROIZVODI SEKCIJA (HOME) === */
.home-vegan {
background: #ffffff;
padding: 72px 10vw;
}
.home-vegan-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 80px;
width: 100%;
height: 100%;
}
/* LEVA SEKCIJA - COPY */
.home-vegan-copy {
flex: 0 0 48%;
max-width: 550px;
}
.home-vegan-title {
font-family: "Gilda Display", serif;
font-weight: 400;
font-size: 46px;
line-height: 1.1;
margin: 0 0 40px;
color: #000;
}
.home-vegan-cta {
display: inline-block;
padding: 20px 60px;
border-radius: 0;
background-color: #521B1E;
color: #FFF6F5;
font-size: 23px;
font-family: "Gilda Display", serif;
text-decoration: none;
border: none;
cursor: pointer;
letter-spacing: 0.03em;
transition: background-color 0.3s ease;
}
.home-vegan-cta:hover {
background-color: #3f0f0f;
text-decoration: none;
}
/* DESNA SEKCIJA - SLIKA */
.home-vegan-visual {
flex: 1;
display: flex;
justify-content: flex-end;
height: 100%;
overflow: hidden;
}
.vegan-products-img {
width: 90%;
max-width: 90%;
height: auto;
max-height: 420px;
object-fit: contain;
display: block;
}
/* RESPONSIVE - sekcije jedna ispod druge */
@media (max-width: 1150px) {
.home-vegan {
padding: 56px 24px;
}
.home-vegan-inner {
flex-direction: column;
gap: 40px;
text-align: center;
height: 100%;
}
.home-vegan-copy {
flex: none;
max-width: 600px;
margin: 0 auto;
}
.home-vegan-visual {
width: 100%;
max-width: 500px;
margin: 0 auto;
justify-content: center;
}
}
@media (max-width: 900px) {
.home-vegan {
padding: 40px 24px;
}
.vegan-products-img {
max-height: 300px;
}
.home-vegan-title {
font-size: 32px;
}
.home-vegan-cta {
font-size: 18px;
padding: 14px 40px;
}
}
@media (max-width: 600px) {
.home-vegan {
padding: 32px 16px;
}
}
/* === TIM SEKCIJA (HOME) === */
.home-team {
background: #FFF6F5;
padding: 64px 10vw;
height: 80vh;
overflow: hidden;
}
.home-team-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 80px;
width: 100%;
height: 100%;
}
/* LEVA SEKCIJA - SLIKA */
.home-team-visual {
flex: 1;
display: flex;
justify-content: flex-start;
align-items: center;
height: 100%;
overflow: hidden;
}
.team-img {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
/* DESNA SEKCIJA - COPY */
.home-team-copy {
flex: 0 0 48%;
max-width: 550px;
}
.home-team-title {
font-family: "Gilda Display", serif;
font-weight: 400;
font-size: 46px;
line-height: 1.1;
margin: 0 0 40px;
color: #000;
}
.home-team-cta {
display: inline-block;
padding: 20px 60px;
border-radius: 0;
background-color: #521B1E;
color: #FFF6F5;
font-size: 23px;
font-family: "Gilda Display", serif;
text-decoration: none;
border: none;
cursor: pointer;
letter-spacing: 0.03em;
transition: background-color 0.3s ease;
}
.home-team-cta:hover {
background-color: #3f0f0f;
text-decoration: none;
}
/* RESPONSIVE - sekcije jedna ispod druge */
@media (max-width: 1150px) {
.home-team {
padding: 56px 24px;
height: auto;
overflow: visible;
}
.home-team-inner {
flex-direction: column;
gap: 40px;
text-align: center;
height: auto;
margin-left: 0;
padding-left: 0;
}
.home-team-copy {
flex: none;
max-width: 600px;
margin: 0 auto;
order: 1;
}
.home-team-visual {
width: 100%;
max-width: 320px;
height: auto;
margin: 0 auto;
justify-content: center;
order: 2;
}
.team-img {
height: auto;
max-height: none;
}
}
@media (max-width: 900px) {
.home-team {
padding: 40px 24px;
}
.home-team-title {
font-size: 32px;
}
.home-team-cta {
font-size: 18px;
padding: 14px 40px;
}
}
@media (max-width: 600px) {
.home-team {
padding: 32px 16px;
}
}
/* === KONTAKT SEKCIJA (HOME) === */
.home-contact {
background: #ffffff;
padding: 64px 10vw;
}
.home-contact-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 80px;
width: 100%;
}
/* LEVA SEKCIJA - SLIKA */
.home-contact-visual {
flex: 1;
display: flex;
justify-content: flex-start;
}
.contact-photo-img {
width: 80%;
max-width: 100%;
height: auto;
display: block;
}
/* DESNA SEKCIJA - COPY */
.home-contact-copy {
flex: 0 0 38%;
max-width: 420px;
}
.home-contact-title {
font-family: "Gilda Display", serif;
font-weight: 400;
font-size: 46px;
line-height: 1.1;
margin: 0 0 28px;
color: #000;
}
.home-contact-text {
font-size: 20px;
line-height: 1.6;
margin: 0 0 40px;
color: #111827;
font-family: "Gilda Display", serif;
}
.home-contact-cta {
display: inline-block;
padding: 20px 60px;
border-radius: 0;
background-color: #521B1E;
color: #FFF6F5;
font-size: 23px;
font-family: "Gilda Display", serif;
text-decoration: none;
border: none;
cursor: pointer;
letter-spacing: 0.03em;
transition: background-color 0.3s ease;
}
.home-contact-cta:hover {
background-color: #3f0f0f;
text-decoration: none;
}
/* RESPONSIVE - sekcije jedna ispod druge */
@media (max-width: 1150px) {
.home-contact {
padding: 56px 24px;
}
.home-contact-inner {
flex-direction: column;
gap: 40px;
text-align: center;
}
.home-contact-copy {
flex: none;
max-width: 520px;
margin: 0 auto;
order: 1; /* Tekst i dugme gore */
}
.home-contact-visual {
width: 100%;
max-width: 500px;
margin: 0 auto;
justify-content: center; /* centriraj sliku kada su sekcije jedna ispod druge */
order: 2; /* Slika dole */
}
}
@media (max-width: 900px) {
.home-contact {
padding: 40px 24px;
}
.home-contact-title {
font-size: 32px;
}
.home-contact-text {
font-size: 15px;
}
.home-contact-cta {
font-size: 18px;
padding: 14px 40px;
}
}
@media (max-width: 600px) {
.home-contact {
padding: 32px 16px;
}
}
/* REVIEWS */
.star-rating {
direction: rtl;
display: inline-flex;
justify-content: center;
gap: 4px;
font-size: 3.5rem;
}
.star-rating input {
display: none;
}
.star-rating label {
color: #ccc;
cursor: pointer;
transition: color 0.2s ease;
}
/* Hover efekat */
.star-rating label:hover,
.star-rating label:hover ~ label {
color: #521B1E;
}
/* Kada je izabrano - zbog rtl direction, sve zvezdice do izabrane (ukljuÄujući izabranu) treba da budu obojene */
.star-rating input:checked ~ label {
color: #521B1E;
}
/* EMPLYEE RESERVATIONS */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
display: none;
align-items: center;
justify-content: center;
padding: 16px;
z-index: 50;
}
.modal-overlay.is-open {
display: flex;
}
.modal-content {
background: #ffffff;
border-radius: 0;
max-width: 420px;
width: 100%;
padding: 20px 24px;
box-shadow: 0 10px 30px rgba(15,23,42,0.2);
}
.modal-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
color: #0f172a;
}
.modal-text {
font-size: 14px;
color: #4b5563;
margin-bottom: 20px;
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.btn-secondary {
background: #e5e7eb;
border: none;
padding: 6px 14px;
border-radius: 0;
font-size: 14px;
cursor: pointer;
color: #111827;
}
.btn-secondary:hover {
background: #d1d5db;
}
.btn-danger-modal {
background: #dc2626;
border: none;
padding: 6px 14px;
border-radius: 0;
font-size: 14px;
cursor: pointer;
color: #ffffff;
}
.btn-danger-modal:hover {
background: #b91c1c;
}
/* MY RESERVATIONS */
.reservations-container {
max-width: 900px;
margin: 0 auto;
border-top: 1px solid #E1D4D4;
}
.status-filter-bar {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.status-filter-btn {
padding: 6px 14px;
border-radius: 999px;
border: 1px solid #cbd5e1;
background-color: #f8fafc;
font-size: 14px;
text-decoration: none;
color: #0f172a;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.status-filter-btn:hover {
background-color: #e2e8f0;
}
.status-filter-btn.is-active {
background-color: #1d4ed8;
border-color: #1d4ed8;
color: #ffffff;
}
table {
width: 100%;
border-collapse: collapse;
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
thead {
background-color: #1e3a8a;
color: white;
}
th, td {
padding: 12px 16px;
text-align: left;
}
tbody tr:nth-child(even) {
background-color: #f8fafc;
}
tbody tr:hover {
background-color: #e2e8f0;
}
.status-badge {
display: inline-block;
padding: 5px 10px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: white;
}
.status-initialized { background-color: #3b82f6; } /* plava */
.status-active { background-color: #16a34a; } /* zelena */
.status-finished { background-color: #9333ea; } /* ljubiÄasta */
.status-canceled { background-color: #9ca3af; } /* siva */
/* HOME PAGE */
/* REGISTER PAGE - FIGMA STYLE */
body.auth-page main {
max-width: none; /* makni ogranicenje 900px */
margin: 0; /* nema auto centriranja */
padding: 0;
background: none; /* nema bele pozadine iza */
box-shadow: none;
border-radius: 0;
}
.register-bg {
min-height: 100vh;
background:
linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
url("../img/register-bg.a2ec70efe942.jpg") center/cover no-repeat;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 0 10px;
}
.register-card {
background: #FFF9F9;
border-radius: 0;
padding: 35px 56px 45px;
width: 100%;
max-width: 640px;
box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.register-title {
text-align: center;
font-family: "Gilda Display", Georgia, serif;
font-weight: 400;
font-size: 42px;
margin-bottom: 48px;
color: black;
}
.form-row {
display: flex;
gap: 36px;
margin-bottom: 22px;
}
.form-row .form-group {
margin-bottom: 0;
}
.form-group {
flex: 1;
margin-bottom: 22px;
}
.form-group.full {
width: 100%;
}
.form-group label {
font-size: 16px;
color: black;
margin-bottom: 8px;
display: block;
font-weight: 500;
}
.register-card input {
width: 100%;
padding: 16px 20px;
border-radius: 0;
border: 1px solid #D9BFC1;
background: #fff;
font-size: 16px;
box-sizing: border-box;
}
.register-card input:focus {
border-color: #521B1E;
background: #fff;
outline: 2px solid #521B1E;
outline-offset: 1px;
}
.register-card input:-webkit-autofill,
.register-card input:-webkit-autofill:hover,
.register-card input:-webkit-autofill:focus,
.register-card input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
box-shadow: 0 0 0 1000px #fff inset !important;
-webkit-text-fill-color: #000 !important;
background-color: #fff !important;
}
.register-btn {
display: block;
margin: 32px auto 18px;
background: #521B1E;
color: white;
border: none;
padding: 16px 48px;
border-radius: 0;
font-size: 20px;
cursor: pointer;
}
.register-btn:hover {
background: #3f0f0f;
}
.register-login-link {
text-align: center;
font-size: 20px;
color: white;
margin-top: 24px;
}
.register-login-link a {
color: white;
font-weight: 500;
}
.field-error {
color: #b91c1c;
font-size: 12px;
margin-top: 3px;
}
.field-error:empty {
display: none;
}
/* REGISTER PAGE RESPONSIVE */
@media (max-width: 540px) {
.register-card {
padding: 30px 35px 35px;
max-width: calc(100% - 30px);
}
}
@media (max-width: 768px) {
.register-bg {
padding: 15px;
}
.register-card {
padding: 30px 40px 35px;
max-width: 420px;
border-radius: 0;
}
.register-title {
font-size: 34px;
margin-bottom: 36px;
}
.form-row {
flex-direction: column;
gap: 0;
margin-bottom: 18px;
}
.form-row .form-group {
margin-bottom: 18px;
}
.form-row .form-group:last-child {
margin-bottom: 0;
}
.form-group {
margin-bottom: 18px;
}
.form-group label {
font-size: 15px;
margin-bottom: 6px;
}
.register-card input {
padding: 14px 18px;
font-size: 15px;
}
.register-btn {
padding: 14px 40px;
font-size: 16px;
margin: 26px auto 14px;
}
.register-login-link {
font-size: 18px;
margin-top: 20px;
}
}
@media (max-width: 480px) {
.register-bg {
padding: 10px;
}
.register-card {
padding: 24px 20px 28px;
max-width: 100%;
width: calc(100% - 20px);
border-radius: 0;
box-sizing: border-box;
}
.register-title {
font-size: 28px;
margin-bottom: 28px;
}
.form-row {
margin-bottom: 14px;
}
.form-row .form-group {
margin-bottom: 14px;
}
.form-row .form-group:last-child {
margin-bottom: 0;
}
.form-group {
margin-bottom: 14px;
}
.form-group label {
font-size: 14px;
margin-bottom: 5px;
}
.register-card input {
padding: 12px 16px;
font-size: 14px;
}
.register-btn {
padding: 12px 32px;
font-size: 15px;
margin: 22px auto 12px;
}
.register-login-link {
font-size: 16px;
margin-top: 16px;
}
}
/* LOGIN PAGE */
.login-bg {
min-height: calc(100vh - 80px);
background:
linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
url("../img/register-bg.a2ec70efe942.jpg") center/cover no-repeat;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 16px;
}
.login-card {
width: 100%;
max-width: 440px;
padding: 36px 40px 40px;
border-radius: 0;
background: #FFF9F9;
box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.login-title {
margin: 0 0 8px;
font-family: "Gilda Display", serif;
font-size: 36px;
font-weight: 400;
text-align: center;
color: #1f1415;
}
.login-subtitle {
margin: 0 0 24px;
font-size: 15px;
line-height: 1.45;
text-align: center;
color: #5c4446;
}
.login-subtitle a {
color: #521B1E;
font-weight: 600;
text-decoration: underline;
white-space: nowrap;
}
.login-messages {
list-style: none;
padding: 0;
margin-bottom: 20px;
}
.login-messages li {
background: #e0ffe0;
border: 1px solid #b2ffb2;
padding: 10px;
border-radius: 0;
font-size: 14px;
text-align: center;
}
.login-error {
margin: 0 0 16px;
padding: 10px 14px;
border-radius: 0;
background: #FDECEC;
color: #7d1d22;
font-size: 15px;
}
.login-form-group {
margin-bottom: 18px;
}
.login-form-group label {
margin: 0 0 6px;
font-size: 15px;
font-weight: 600;
color: #1f1415;
}
.login-card input[type="text"],
.login-card input[type="password"],
.login-card input[type="tel"] {
width: 100%;
min-height: 50px;
padding: 12px 18px;
border: 1px solid #D9BFC1;
border-radius: 0;
background: #fff;
font-size: 16px;
color: #000;
}
.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus,
.login-card input[type="tel"]:focus {
border-color: #521B1E;
background: #fff;
outline: 2px solid #521B1E;
outline-offset: 1px;
}
.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus,
.login-card input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
box-shadow: 0 0 0 1000px #fff inset !important;
-webkit-text-fill-color: #000 !important;
background-color: #fff !important;
}
.login-field-error {
margin: 6px 0 0;
font-size: 14px;
color: #A4262C;
}
.login-field-hint {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.45;
color: #5c4446;
}
.login-field-hint a {
color: #521B1E;
font-weight: 600;
white-space: nowrap;
}
.login-btn {
display: block;
width: 100%;
min-height: 52px;
margin: 26px 0 0;
padding: 0 24px;
border: none;
border-radius: 0;
background: #521B1E;
color: white;
font-size: 17px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
.login-btn:hover {
background: #3f0f0f;
}
.login-register-link {
max-width: 440px;
margin: 20px 0 0;
font-size: 16px;
line-height: 1.45;
text-align: center;
color: white;
}
.login-register-link a {
color: white;
font-weight: 600;
text-decoration: underline;
}
/* LOGIN PAGE RESPONSIVE */
@media (max-width: 480px) {
.login-card {
padding: 28px 22px 30px;
border-radius: 0;
}
.login-title {
font-size: 30px;
}
}
/* ===== PROFILE PAGE ===== */
.profile-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
min-height: calc(100vh - 160px);
background: white;
}
.profile-container ~ * {
max-width: 100% !important;
}
.profile-card {
display: flex;
background: #FFF9F9 !important;
border: 1px solid #521B1E !important;
border-radius: 0 !important;
max-width: 900px;
width: 100%;
padding: 40px;
gap: 40px;
box-shadow: 0 4px 12px rgba(82, 27, 30, 0.1);
margin: 0 auto;
box-sizing: border-box;
}
.profile-left {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 350px;
min-width: 350px;
}
/* For superuser: avatar on top, form below */
.profile-left-with-form {
flex-direction: column;
align-items: center;
gap: 30px;
}
.profile-left .profile-form {
width: 100%;
max-width: 300px;
align-self: center;
}
.profile-avatar {
width: 200px;
height: 200px;
object-fit: contain;
border-radius: 0;
}
.profile-divider {
width: 1px;
background: #521B1E !important;
flex-shrink: 0;
height: auto;
}
.profile-right {
flex: 1;
display: flex;
flex-direction: column;
}
.profile-form {
display: flex;
flex-direction: column;
gap: 24px;
}
.profile-form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.profile-form-group label {
font-size: 16px;
font-weight: 500;
color: #333;
margin-bottom: 0;
}
.profile-card .profile-form-group input[type="text"],
.profile-card .profile-form-group input[type="email"] {
width: 100% !important;
padding: 14px 18px !important;
border: 1px solid #D9BFC1 !important;
border-radius: 0 !important;
background: #fff !important;
font-size: 16px !important;
color: #333 !important;
box-sizing: border-box !important;
outline: none !important;
}
.profile-card .profile-form-group input[type="text"]:focus,
.profile-card .profile-form-group input[type="email"]:focus {
background: #fff !important;
border: 1px solid #521B1E !important;
outline: 2px solid #521B1E !important;
outline-offset: 1px;
}
.profile-card .profile-form-group input[type="text"]:-webkit-autofill,
.profile-card .profile-form-group input[type="email"]:-webkit-autofill {
background: #fff !important;
-webkit-box-shadow: 0 0 0 30px #fff inset !important;
box-shadow: 0 0 0 30px #fff inset !important;
-webkit-text-fill-color: #333 !important;
}
.profile-checkbox-group {
flex-direction: row;
align-items: center;
gap: 12px;
}
.profile-checkbox-group input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
margin: 0;
}
.profile-checkbox-group .checkbox-label {
margin: 0;
cursor: pointer;
font-weight: 400;
}
.profile-save-btn {
background: #521B1E;
color: white;
border: none;
padding: 14px 32px;
border-radius: 0;
font-size: 16px;
font-weight: 500;
cursor: pointer;
align-self: center;
margin-top: 8px;
transition: background 0.2s;
}
.profile-save-btn:hover {
background: #3d1416;
}
.profile-shifts {
margin-top: 40px;
max-width: 900px;
width: 100%;
padding: 30px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.profile-shifts h2 {
color: #521B1E;
margin-bottom: 20px;
}
.profile-shifts h3 {
color: #333;
margin-top: 24px;
margin-bottom: 12px;
font-size: 18px;
}
.profile-shifts ul {
list-style: none;
padding: 0;
}
.profile-shifts li {
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.profile-shifts li:last-child {
border-bottom: none;
}
/* Inline shifts for superuser (inside profile card) */
.profile-shifts-inline {
display: flex;
flex-direction: column;
height: 100%;
}
.profile-shifts-inline h2 {
color: #521B1E;
margin-bottom: 20px;
font-family: "Gilda Display", Georgia, serif;
font-weight: 400;
font-size: 24px;
}
.profile-shifts-inline h3 {
color: #333;
margin-top: 20px;
margin-bottom: 12px;
font-size: 16px;
font-weight: 500;
}
.profile-shifts-inline ul {
list-style: none;
padding: 0;
margin: 0;
}
.profile-shifts-inline li {
padding: 8px 0;
color: #333;
font-size: 14px;
border-bottom: 1px solid rgba(82, 27, 30, 0.1);
}
.profile-shifts-inline li:last-child {
border-bottom: none;
}
.profile-shifts-inline p {
color: #666;
font-size: 14px;
margin: 8px 0;
}
.field-error {
color: #d32f2f;
font-size: 14px;
margin-top: 4px;
}
.field-error:empty {
display: none;
}
/* Responsive styles for profile page */
@media (max-width: 768px) {
.profile-container {
padding: 40px 16px;
}
.profile-card {
flex-direction: column;
padding: 30px 24px;
gap: 30px;
max-width: calc(100% - 32px);
width: 100%;
box-sizing: border-box;
}
.profile-divider {
width: 100%;
height: 1px;
background: #521B1E !important;
}
.profile-left {
flex: none;
min-width: auto;
width: 100%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.profile-avatar {
width: 150px;
height: 150px;
margin: 0 auto;
display: block;
}
.profile-left-with-form {
align-items: center;
width: 100%;
box-sizing: border-box;
}
.profile-left .profile-form {
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
.profile-left .profile-form input[type="text"],
.profile-left .profile-form input[type="email"] {
width: 100% !important;
box-sizing: border-box !important;
max-width: 100% !important;
}
.profile-left .profile-form .profile-save-btn {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.profile-card .profile-form-group input[type="text"],
.profile-card .profile-form-group input[type="email"] {
padding: 12px 16px !important;
font-size: 16px !important;
}
.profile-save-btn {
width: 100%;
padding: 14px;
}
.profile-shifts-inline h2 {
font-size: 20px;
margin-bottom: 16px;
}
.profile-shifts-inline h3 {
font-size: 15px;
margin-top: 16px;
margin-bottom: 10px;
}
.profile-shifts-inline li {
font-size: 13px;
padding: 6px 0;
}
}
@media (max-width: 540px) {
.profile-container {
padding: 30px 15px;
}
.profile-card {
padding: 25px 20px;
max-width: calc(100% - 30px);
gap: 25px;
}
.profile-left {
flex: none;
min-width: auto;
width: 100%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.profile-avatar {
width: 130px;
height: 130px;
margin: 0 auto;
display: block;
}
.profile-left-with-form {
align-items: center;
width: 100%;
box-sizing: border-box;
}
.profile-left .profile-form {
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
.profile-left .profile-form input[type="text"],
.profile-left .profile-form input[type="email"] {
width: 100% !important;
box-sizing: border-box !important;
max-width: 100% !important;
}
.profile-left .profile-form .profile-save-btn {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
}
@media (max-width: 480px) {
.profile-container {
padding: 30px 12px;
}
.profile-card {
padding: 24px 18px;
max-width: calc(100% - 24px);
gap: 24px;
}
.profile-left {
flex: none;
min-width: auto;
width: 100%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.profile-avatar {
width: 120px;
height: 120px;
margin: 0 auto;
display: block;
}
.profile-left-with-form {
align-items: center;
width: 100%;
box-sizing: border-box;
}
.profile-left .profile-form {
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
.profile-left .profile-form input[type="text"],
.profile-left .profile-form input[type="email"] {
width: 100% !important;
box-sizing: border-box !important;
max-width: 100% !important;
}
.profile-left .profile-form .profile-save-btn {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.profile-form {
gap: 20px;
}
.profile-form-group label {
font-size: 15px;
}
.profile-card .profile-form-group input[type="text"],
.profile-card .profile-form-group input[type="email"] {
padding: 12px 14px !important;
font-size: 16px !important;
}
.profile-save-btn {
padding: 12px 24px;
font-size: 15px;
}
.profile-shifts-inline h2 {
font-size: 18px;
margin-bottom: 14px;
}
.profile-shifts-inline h3 {
font-size: 14px;
margin-top: 14px;
margin-bottom: 8px;
}
.profile-shifts-inline li {
font-size: 12px;
padding: 5px 0;
}
}
/* Pricing Page Styles */
main:has(.pricing-page),
body:has(.pricing-page) main {
max-width: 100% !important;
background: white !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body:has(.pricing-page) {
background: white !important;
}
.pricing-page {
min-height: 100vh;
background: white;
display: flex;
justify-content: center;
align-items: center;
padding: 60px 20px;
box-sizing: border-box;
}
.pricing-card {
background: #521B1E;
border-radius: 0;
padding: 50px 60px;
max-width: 800px;
width: 100%;
color: white;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.pricing-title {
font-family: "Gilda Display", Georgia, serif;
font-size: 48px;
font-weight: 400;
text-align: center;
margin-bottom: 50px;
color: white;
letter-spacing: 1px;
}
.pricing-category {
margin-bottom: 40px;
}
.pricing-category:last-child {
margin-bottom: 0;
}
.pricing-category-title {
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 12px;
color: white;
letter-spacing: 0.5px;
}
.pricing-category-divider {
height: 1px;
background: rgba(255, 255, 255, 0.3);
width: 100%;
margin-bottom: 20px;
}
.pricing-card .pricing-title {
margin-bottom: 10px;
}
.pricing-intro {
margin: 0 0 36px;
text-align: center;
font-size: 15px;
color: rgba(255, 255, 255, 0.75);
}
.pricing-services {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.pricing-service-item {
display: flex;
align-items: center;
gap: 12px;
min-height: 52px;
margin: 0 -12px;
padding: 8px 12px;
border-radius: 0;
color: white;
text-decoration: none;
}
a.pricing-service-item:hover,
a.pricing-service-item:focus-visible {
background: rgba(255, 255, 255, 0.08);
color: white;
text-decoration: none;
}
.pricing-service-main {
display: grid;
gap: 2px;
min-width: 0;
}
.pricing-service-name {
font-size: 16px;
line-height: 1.35;
color: white;
}
.pricing-service-meta {
font-size: 13px;
color: rgba(255, 255, 255, 0.65);
}
.pricing-service-dots {
flex: 1;
min-width: 16px;
height: 1px;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.55) 1px, transparent 1px);
background-size: 6px 1px;
background-repeat: repeat-x;
}
.pricing-service-price {
flex-shrink: 0;
font-size: 16px;
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
color: white;
}
.pricing-service-book {
flex-shrink: 0;
padding: 4px 12px;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 0;
font-size: 14px;
white-space: nowrap;
}
a.pricing-service-item:hover .pricing-service-book {
background: #FFF6F5;
color: #521B1E;
}
/* Responsive styles for pricing page */
@media (max-width: 768px) {
.pricing-page {
padding: 32px 16px;
}
.pricing-card {
padding: 36px 24px;
border-radius: 0;
}
.pricing-card .pricing-title {
font-size: 36px;
}
.pricing-category-title {
font-size: 18px;
}
}
/* Na telefonu: bez tačkica, naziv levo, cena desno, strelica umesto "Zakaži" */
@media (max-width: 600px) {
.pricing-service-item {
justify-content: space-between;
}
.pricing-service-dots {
display: none;
}
.pricing-service-main {
flex: 1;
}
.pricing-service-name,
.pricing-service-price {
font-size: 15px;
}
.pricing-service-book {
padding: 0;
border: none;
font-size: 0;
}
.pricing-service-book span {
font-size: 22px;
line-height: 1;
color: rgba(255, 255, 255, 0.7);
}
}
/* CONTACT PAGE STYLES */
body.contact-page main {
max-width: none;
margin: 0;
padding: 0;
background: none;
box-shadow: none;
border-radius: 0;
}
.contact-bg {
min-height: 100vh;
background:
linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
url("../img/contact-background.1cc2201eda9c.jpg") center/cover no-repeat;
display: flex;
flex-direction: column;
padding: 60px 20px;
gap: 40px;
}
.contact-top-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0;
align-items: center;
}
.contact-info-card {
background: none;
border-radius: 0;
padding: 0;
color: white;
}
.contact-info-title {
font-family: "Gilda Display", Georgia, serif;
font-size: 24px;
font-weight: 400;
margin-bottom: 20px;
margin-top: 0;
color: white;
}
.contact-info-title:not(:first-child) {
margin-top: 30px;
}
.contact-info-text {
font-size: 16px;
line-height: 1.6;
margin: 8px 0;
color: white;
}
.contact-instagram {
display: flex;
align-items: center;
gap: 12px;
margin-top: 30px;
}
.contact-instagram-link {
color: white;
font-size: 16px;
text-decoration: none;
transition: opacity 0.2s;
}
.contact-info-text a {
color: inherit;
text-decoration: underline;
}
.contact-instagram-link:hover {
opacity: 0.8;
text-decoration: underline;
}
.contact-map-card {
background: rgba(173, 216, 230, 0.3);
border-radius: 0;
padding: 0;
height: 400px;
overflow: hidden;
}
.contact-map-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: white;
font-size: 18px;
}
.contact-form-card {
background: #FFF9F9;
border-radius: 0;
padding: 50px 60px;
max-width: 1200px;
width: 100%;
margin: 0 auto;
box-shadow: 0 12px 40px rgba(0,0,0,0.35);
box-sizing: border-box;
}
.contact-form-title {
font-family: "Gilda Display", Georgia, serif;
font-size: 42px;
text-align: center;
margin-bottom: 40px;
color: black;
font-weight: 400;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 24px;
}
.contact-form-row {
display: flex;
gap: 36px;
margin-bottom: 0;
padding-bottom: 0;
}
.contact-form-group {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 0;
}
.contact-form-group.full {
width: 100%;
margin-bottom: 0;
}
.contact-form-group label {
font-size: 16px;
color: black;
font-weight: 500;
}
.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card textarea {
width: 100%;
padding: 16px 20px;
border-radius: 0;
border: 1px solid #D9BFC1;
background: #fff;
font-size: 16px;
box-sizing: border-box;
font-family: inherit;
}
.contact-form-card textarea {
border-radius: 0;
min-height: 120px;
resize: vertical;
}
.contact-form-card input[type="text"]:focus,
.contact-form-card input[type="email"]:focus,
.contact-form-card textarea:focus {
border-color: #521B1E;
background: #fff;
outline: 2px solid #521B1E;
outline-offset: 1px;
}
.contact-form-card input[type="text"]:-webkit-autofill,
.contact-form-card input[type="email"]:-webkit-autofill,
.contact-form-card textarea:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
box-shadow: 0 0 0 1000px #fff inset !important;
-webkit-text-fill-color: #000 !important;
background-color: #fff !important;
}
.contact-form-btn {
display: block;
margin: 20px auto 0;
background: #521B1E;
color: white;
border: none;
padding: 16px 48px;
border-radius: 0;
font-size: 20px;
cursor: pointer;
font-weight: 500;
}
.contact-form-btn:hover {
background: #3f0f0f;
}
/* CONTACT PAGE RESPONSIVE */
@media (max-width: 768px) {
.contact-bg {
padding: 40px 16px;
gap: 30px;
}
.contact-top-section {
grid-template-columns: 1fr;
gap: 20px;
}
.contact-info-card {
padding: 30px 24px;
}
.contact-info-title {
font-size: 20px;
margin-bottom: 16px;
}
.contact-info-text {
font-size: 15px;
}
.contact-map-card {
height: 300px;
}
.contact-form-card {
padding: 40px 30px;
border-radius: 0;
}
.contact-form-title {
font-size: 32px;
margin-bottom: 30px;
}
.contact-form-row {
flex-direction: column;
gap: 24px;
}
.contact-form-group {
margin-bottom: 0;
}
.contact-form-group.full {
margin-bottom: 0;
}
.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card textarea {
padding: 14px 18px;
font-size: 15px;
}
.contact-form-btn {
padding: 14px 40px;
font-size: 18px;
}
}
@media (max-width: 480px) {
.contact-bg {
padding: 30px 12px;
gap: 24px;
}
.contact-info-card {
padding: 24px 20px;
}
.contact-info-title {
font-size: 18px;
}
.contact-info-text {
font-size: 14px;
}
.contact-map-card {
height: 250px;
}
.contact-form-card {
padding: 30px 20px;
border-radius: 0;
}
.contact-form-title {
font-size: 28px;
margin-bottom: 24px;
}
.contact-form {
gap: 24px;
}
.contact-form-row {
gap: 24px;
}
.contact-form-group {
margin-bottom: 0;
}
.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card textarea {
padding: 12px 16px;
font-size: 14px;
}
.contact-form-btn {
padding: 12px 32px;
font-size: 16px;
width: 100%;
}
}
/* Custom Date Picker Styles */
.custom-date-picker {
width: 100%;
position: relative;
box-sizing: border-box;
}
.custom-date-picker-toggle {
width: 100%;
padding: 12px 18px;
border: none;
border-radius: 999px;
background: #F0E2E2;
font-size: 15px;
color: black;
box-sizing: border-box;
outline: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.2s;
font-family: "Jost", "Segoe UI", Arial, sans-serif;
}
.custom-date-picker-toggle:hover {
background: #e8d5d5;
}
.custom-date-picker-toggle.active {
background: #e8d5d5;
}
.custom-date-picker-selected {
flex: 1;
text-align: left;
}
.custom-date-picker-arrow {
flex-shrink: 0;
margin-left: 12px;
transition: transform 0.2s;
}
.custom-date-picker-toggle.active .custom-date-picker-arrow {
transform: rotate(180deg);
}
.custom-date-picker-calendar {
position: absolute;
top: calc(100% + 8px);
bottom: auto;
left: 0;
right: 0;
width: 100%;
max-height: 400px;
background: #fff;
border: 1px solid #F0E2E2;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
z-index: 10000;
display: none;
box-sizing: border-box;
padding: 20px;
overflow-y: auto;
}
.custom-date-picker-calendar.open-up {
top: auto;
bottom: calc(100% + 8px);
}
/* Scrollbar styling za date picker kalendar */
.custom-date-picker-calendar::-webkit-scrollbar {
width: 8px;
}
.custom-date-picker-calendar::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.custom-date-picker-calendar::-webkit-scrollbar-thumb {
background: #F0E2E2;
border-radius: 10px;
}
.custom-date-picker-calendar::-webkit-scrollbar-thumb:hover {
background: #e8d5d5;
}
.custom-date-picker-calendar.open {
display: block;
}
.custom-date-picker-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.custom-date-picker-month-year {
font-size: 16px;
font-weight: 600;
color: #333;
}
.custom-date-picker-nav {
background: none;
border: none;
font-size: 24px;
color: #521B1E;
cursor: pointer;
padding: 0 10px;
transition: opacity 0.2s;
}
.custom-date-picker-nav:hover {
opacity: 0.7;
}
.custom-date-picker-weekdays {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.custom-date-picker-weekday {
text-align: center;
font-size: 12px;
font-weight: 600;
color: #666;
padding: 8px 0;
}
.custom-date-picker-days {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
}
.custom-date-picker-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #333;
cursor: pointer;
border-radius: 8px;
transition: all 0.2s;
background: transparent;
border: 1px solid transparent;
}
/* Kalendar za stranicu zaposlenog – kao deo layout-a, ne lebdeći modal */
.employee-reservations-page .employee-calendar-modal {
width: 100%;
display: flex;
justify-content: center;
}
.employee-reservations-page .employee-calendar-modal .custom-date-picker-calendar {
position: static !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
display: block !important;
width: 100%;
max-width: 80vh;
height: auto;
max-height: none;
aspect-ratio: auto;
z-index: auto !important;
box-shadow: none !important;
border: none !important;
padding: 10px 12px;
box-sizing: border-box;
overflow: visible;
}
.employee-reservations-page .employee-calendar-modal .custom-date-picker-weekdays,
.employee-reservations-page .employee-calendar-modal .custom-date-picker-days {
gap: 6px;
}
.employee-reservations-page .employee-calendar-modal .custom-date-picker-day {
font-size: 13px;
}
@media (max-width: 530px) {
.employee-reservations-page .employee-calendar-modal .custom-date-picker-calendar {
padding: 8px;
}
.employee-reservations-page .employee-calendar-modal .custom-date-picker-weekdays,
.employee-reservations-page .employee-calendar-modal .custom-date-picker-days {
gap: 4px;
}
.employee-reservations-page .employee-calendar-modal .custom-date-picker-day {
font-size: 12px;
}
}
.custom-date-picker-day:hover:not(.disabled):not(.other-month) {
background: #F0E2E2;
color: #521B1E;
}
.custom-date-picker-day.selected {
background: #521B1E;
color: #fff;
border-color: #521B1E;
}
.custom-date-picker-day.today {
border: 2px solid #521B1E;
font-weight: 600;
}
.custom-date-picker-day.today.selected {
background: #521B1E;
color: #fff;
}
.custom-date-picker-day.disabled {
color: #ccc;
cursor: not-allowed;
opacity: 0.5;
}
.custom-date-picker-day.other-month {
color: #ccc;
opacity: 0.5;
}
.custom-date-picker-day.empty {
visibility: hidden;
pointer-events: none;
}
/* EMPLOYEE RESERVATIONS PAGE STYLES */
body:has(.employee-reservations-page) main {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: white !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.employee-reservations-page {
background-color: white;
padding: 40px 0;
min-height: 100vh;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
margin: 0 !important;
}
.employee-reservations-title {
font-family: "Italiana", serif;
font-size: 50px;
font-weight: 400;
color: #000;
margin-bottom: 30px;
text-align: center;
}
.reservations-wrapper {
display: flex;
flex-direction: column;
gap: 0;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 20px;
box-sizing: border-box;
}
.day-filter-sheets {
display: flex;
gap: 0;
margin-bottom: 0;
padding: 0;
border-bottom: 0.5px solid #521B1E;
background-color: transparent;
}
.day-filter-sheet {
background-color: #FFF9F9;
border: 0.5px solid #521B1E;
border-bottom: none;
border-radius: 12px 12px 0 0;
font-size: 24px;
font-weight: 500;
color: #000;
cursor: pointer;
transition: background-color 0.3s ease;
font-family: "Gilda Display", serif;
margin: 0;
padding: 12px 0;
position: relative;
z-index: 1;
white-space: nowrap;
width: 20%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.day-filter-sheet:hover {
background-color: #F5E5E5;
}
.day-filter-sheet.active {
background-color: #F0E2E2;
z-index: 2;
border-bottom: 0.5px solid #F0E2E2;
margin-bottom: -1px;
}
.day-filter-sheet.disabled,
.day-filter-sheet:disabled {
cursor: not-allowed;
opacity: 0.6;
pointer-events: none;
background-color: #E8E8E8 !important;
color: #888 !important;
}
.day-filter-sheet.disabled:hover,
.day-filter-sheet:disabled:hover {
background-color: #E8E8E8 !important;
color: #888 !important;
}
.employee-reservations-page .reservations-container {
background-color: #F0E2E2;
border: 0.5px solid #521B1E;
border-radius: 0;
padding: 30px 0;
margin: 0 !important;
position: relative;
z-index: 0;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
.no-reservations {
margin: 0;
padding: 32px 20px;
border-radius: 0;
background: #FFF7F7;
text-align: center;
color: #5c4446;
font-size: 18px;
font-family: "Gilda Display", serif;
}
.no-reservations p {
margin: 0;
}
/* EMPLOYEE RESERVATION DETAIL PAGE STYLES */
body:has(.employee-reservation-detail-page) main {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: white !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.employee-reservation-detail-page {
background-color: white;
padding: 40px 20px;
min-height: 100vh;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
}
.employee-reservation-detail-title {
font-family: "Italiana", serif;
font-size: 50px;
font-weight: 400;
color: #000;
margin-bottom: 30px;
text-align: center;
}
.reservation-detail-container {
width: 70%;
max-width: 70%;
margin: 0 auto;
background-color: #FFF9F9;
border: 1px solid #521B1E;
border-radius: 12px;
padding: 30px;
font-family: "Gilda Display", serif;
box-sizing: border-box;
}
.reservation-detail-sections-wrapper {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
}
.reservation-detail-section {
padding: 10px 0;
display: flex;
flex-direction: column;
flex: 1;
min-height: 200px;
font-size: 18px;
}
.reservation-detail-separator {
width: 0.5px;
background-color: #521B1E;
margin: 0 10px;
align-self: stretch;
}
.reservation-info {
display: flex;
flex-direction: column;
gap: 8px;
}
.info-row {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 0;
}
.info-text {
color: #000;
font-size: 18px;
font-family: "Gilda Display", serif;
}
.info-label {
font-weight: 400;
color: #000;
font-size: 18px;
font-family: "Gilda Display", serif;
}
.info-value {
font-weight: 600;
color: #000;
font-size: 18px;
font-family: "Gilda Display", serif;
}
.previous-notes p {
margin: 8px 0;
font-size: 18px;
font-family: "Gilda Display", serif;
color: #000;
}
.no-notes {
color: #666;
font-style: italic;
}
.form-subtitle {
font-size: 26px;
font-weight: 600;
color: #000;
margin-bottom: 20px;
font-family: "Gilda Display", serif;
text-align: center;
}
.reservation-finish-form {
display: flex;
flex-direction: column;
height: 100%;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-size: 18px;
font-weight: 500;
color: #000;
margin-bottom: 8px;
font-family: "Gilda Display", serif;
}
.form-textarea {
width: 100%;
padding: 12px;
background-color: #F0E2E2;
border: 0.5px solid #521B1E;
border-radius: 8px;
font-size: 14px;
font-family: "Gilda Display", serif;
color: #000;
resize: vertical;
box-sizing: border-box;
}
.form-textarea:focus {
outline: none;
border-color: #521B1E;
background-color: #F5E5E5;
}
.form-input {
width: 100%;
padding: 12px;
background-color: #F0E2E2;
border: none;
border-radius: 8px;
font-size: 16px;
font-family: "Gilda Display", serif;
color: #000;
box-sizing: border-box;
resize: vertical;
}
.form-input:focus {
outline: none;
background-color: #F5E5E5;
}
.form-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.btn-save {
background-color: #521B1E;
color: white;
border: none;
border-radius: 8px;
padding: 12px 24px;
font-size: 16px;
font-weight: 500;
font-family: "Gilda Display", serif;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn-save:hover {
background-color: #3a1416;
}
.btn-cancel-reservation {
background-color: #dc3545;
color: white;
border: none;
border-radius: 8px;
padding: 12px 24px;
font-size: 16px;
font-weight: 500;
font-family: "Gilda Display", serif;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn-cancel-reservation:hover {
background-color: #c82333;
}
.inactive-message {
color: #666;
font-style: italic;
font-size: 18px;
text-align: center;
padding: 20px;
}
.back-link {
display: block;
text-align: center;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
width: 70%;
color: #521B1E;
text-decoration: none;
font-size: 16px;
font-family: "Gilda Display", serif;
transition: color 0.3s ease;
}
.back-link:hover {
color: #3a1416;
text-decoration: underline;
}
/* Responsive styles for employee reservation detail */
@media (max-width: 1200px) {
.reservation-detail-sections-wrapper {
flex-direction: column;
gap: 0;
width: 100%;
}
.reservation-detail-section {
width: 100%;
}
.reservation-detail-separator {
width: 100%;
height: 0.5px;
margin: 20px 0;
}
}
@media (max-width: 768px) {
.employee-reservation-detail-page {
padding: 20px 15px;
}
.employee-reservation-detail-title {
font-size: 38px;
margin-bottom: 20px;
}
.reservation-detail-container {
width: 95%;
max-width: 95%;
padding: 20px 15px;
}
.form-actions {
flex-direction: column;
gap: 15px;
}
.btn-save,
.btn-cancel-reservation {
width: 100%;
}
}
/* MY RESERVATIONS PAGE STYLES */
body:has(.my-reservations-page) main {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: white !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.my-reservations-page {
max-width: 820px;
min-height: 60vh;
margin: 0 auto;
padding: 32px 16px 56px;
background-color: white;
}
.my-reservations-title {
margin: 0 0 24px;
font-family: "Gilda Display", serif;
font-size: clamp(26px, 6vw, 34px);
font-weight: 400;
text-align: center;
color: #000;
}
.status-filter-sheets {
display: flex;
gap: 4px;
width: fit-content;
max-width: 100%;
margin: 0 auto 16px;
padding: 4px;
border-radius: 0;
background: #F6EDED;
}
.status-filter-sheet {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 16px;
border-radius: 0;
color: #5c4446;
font-size: 15px;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
}
.status-filter-sheet:hover {
background: #fff;
color: #521B1E;
text-decoration: none;
}
.status-filter-sheet.active {
background: #521B1E;
color: #fff;
}
.my-reservations-page .reservations-container {
max-width: none;
border: none;
}
.status-reservations {
display: grid;
gap: 12px;
}
.back-to-calendar-link {
font-size: 14px;
color: #521B1E !important;
text-decoration: none;
font-weight: 500;
}
.back-to-calendar-link:hover {
text-decoration: underline;
color: #3b1315;
}
.mr-card {
display: grid;
grid-template-columns: 84px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1px solid #E3CFD1;
border-radius: 0;
background: #FFF9F9;
}
.mr-when {
display: grid;
justify-items: center;
padding: 8px 0;
border: 1px solid #F0E2E2;
border-radius: 0;
background: #fff;
}
.mr-date {
font-size: 13px;
color: #7a5f61;
}
.mr-time {
font-size: 20px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #521B1E;
}
.mr-main {
display: grid;
gap: 4px;
min-width: 0;
}
.mr-service {
font-family: "Gilda Display", serif;
font-size: 18px;
line-height: 1.25;
color: #1f1415;
text-decoration: none;
}
.mr-service:hover {
color: #521B1E;
text-decoration: underline;
}
.mr-employee {
font-size: 14px;
color: #5c4446;
}
.mr-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.mr-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 16px;
border: 1px solid #521B1E;
border-radius: 0;
background: #fff;
color: #521B1E;
font-size: 15px;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
}
.mr-btn:hover {
background: #FFF7F7;
color: #521B1E;
text-decoration: none;
}
.mr-btn-primary {
background: #521B1E;
color: #fff;
}
.mr-btn-primary:hover {
background: #3f0f0f;
color: #fff;
}
.mr-btn-quiet {
border-color: #E3B5B8;
color: #A4262C;
}
button.mr-btn-quiet:hover {
background: #FDECEC;
color: #7d1d22;
}
.mr-rating {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 6px;
color: #521B1E;
font-weight: 700;
}
.mr-card.is-canceled {
background: #F6F3F3;
}
.mr-card.is-canceled .mr-service {
color: #7a6a6b;
text-decoration: line-through;
}
@media (max-width: 560px) {
.mr-card {
grid-template-columns: 72px minmax(0, 1fr);
gap: 12px;
}
.mr-actions {
grid-column: 1 / -1;
}
.mr-actions .mr-btn {
flex: 1;
}
}
@media (max-width: 360px) {
.status-filter-sheet {
padding: 0 12px;
font-size: 14px;
}
}
/* ADD REVIEW PAGE STYLES */
body:has(.add-review-page) main {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: white !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.add-review-page {
background-color: white;
padding: 40px 20px;
min-height: 100vh;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.add-review-title {
font-family: "Gilda Display", serif;
font-size: 50px;
font-weight: 400;
color: #000;
margin-bottom: 30px;
text-align: center;
}
.review-content-container {
background-color: #FFF9F9;
border: 0.5px solid #521B1E;
border-radius: 0;
padding: 30px;
width: 70%;
max-width: 800px;
box-sizing: border-box;
position: relative;
}
.review-reservation-card {
background-color: white;
border-radius: 0;
padding: 20px;
display: flex;
align-items: center;
position: relative;
min-height: 100px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border: 0.5px solid #521B1E;
margin-bottom: 30px;
}
.review-reservation-date {
position: absolute;
top: 15px;
left: 20px;
font-size: 16px;
font-weight: 500;
color: #521B1E;
font-family: "Gilda Display", serif;
}
.review-reservation-employee {
position: absolute;
top: 15px;
right: 20px;
display: flex;
align-items: center;
gap: 10px;
font-family: "Gilda Display", serif;
}
.review-employee-avatar {
width: 35px;
height: 35px;
object-fit: cover;
}
.review-employee-name {
font-size: 16px;
font-weight: 500;
color: #521B1E;
}
.review-reservation-content {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
margin: 0 20px;
padding-left: 15%;
padding-right: 15%;
}
.review-reservation-time-service {
font-size: 22px;
color: #000;
text-align: center;
font-family: "Gilda Display", serif;
}
.review-error-message {
background-color: #fee2e2;
color: #b91c1c;
padding: 10px 12px;
border-radius: 0;
margin-bottom: 20px;
font-family: "Gilda Display", serif;
}
.review-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.review-form-group {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.review-form-label {
font-family: "Gilda Display", serif;
font-size: 18px;
font-weight: 500;
color: #000;
text-align: center;
}
.review-comment-textarea {
width: 100%;
padding: 12px;
border: 0.5px solid #521B1E;
border-radius: 0;
background-color: #F0E2E2;
font-family: "Gilda Display", serif;
font-size: 16px;
color: #000;
resize: vertical;
box-sizing: border-box;
}
.review-comment-textarea:focus {
outline: none;
border-color: #3a1416;
}
.review-submit-btn {
background-color: #521B1E;
color: white;
border: none;
border-radius: 0;
padding: 12px 24px;
font-size: 18px;
font-weight: 500;
font-family: "Gilda Display", serif;
cursor: pointer;
transition: background-color 0.3s ease;
align-self: center;
margin-top: 10px;
}
.review-submit-btn:hover {
background-color: #3a1416;
}
.review-back-link {
position: absolute;
bottom: 20px;
left: 30px;
color: #521B1E;
text-decoration: underline;
font-family: "Gilda Display", serif;
font-size: 16px;
transition: color 0.3s ease;
}
.review-back-link:hover {
color: #3a1416;
}
/* Responsive styles for add review */
@media (max-width: 768px) {
.add-review-page {
padding: 20px 15px;
}
.add-review-title {
font-size: 38px;
margin-bottom: 20px;
}
.review-content-container {
width: 95%;
padding: 20px 15px;
}
.review-reservation-card {
flex-direction: column;
align-items: flex-start;
gap: 15px;
min-height: auto;
}
.review-reservation-date {
position: relative;
top: auto;
left: auto;
order: 1;
margin: 0;
}
.review-reservation-employee {
position: absolute;
top: 15px;
right: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.review-employee-avatar {
width: 30px;
height: 30px;
}
.review-employee-name {
font-size: 14px;
}
.review-reservation-content {
position: relative;
top: auto;
left: auto;
right: auto;
order: 3;
width: 100%;
margin: 0;
padding: 0;
}
.review-reservation-time-service {
width: 100%;
text-align: center;
}
}
/* ===== ERROR PAGE STYLES ===== */
body.error-page main {
max-width: none;
margin: 0;
padding: 0;
background: white;
box-shadow: none;
border-radius: 0;
min-height: calc(100vh - 160px);
}
.error-wrapper {
min-height: calc(100vh - 160px);
background: white;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 20px;
box-sizing: border-box;
}
.error-box {
background: #521B1E;
border-radius: 0;
padding: 80px 100px;
max-width: 700px;
width: 100%;
text-align: center;
color: white;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.error-title {
font-family: "Gilda Display", serif;
font-size: 48px;
font-weight: 400;
margin: 0 0 40px 0;
color: white;
letter-spacing: 1px;
text-align: center;
}
.error-link {
font-family: "Gilda Display", serif;
font-size: 32px;
font-weight: 400;
color: white;
text-decoration: underline;
transition: opacity 0.2s;
letter-spacing: 1px;
display: block;
text-align: center;
margin: 0 auto;
}
.error-link:hover {
opacity: 0.8;
}
@media (max-width: 768px) {
.error-box {
padding: 60px 40px;
max-width: 90%;
}
.error-title {
font-size: 36px;
}
.error-link {
font-size: 24px;
}
}
@media (max-width: 480px) {
.error-box {
padding: 40px 30px;
max-width: calc(100% - 30px);
}
.error-title {
font-size: 28px;
}
.error-link {
font-size: 20px;
}
}
/* ===== ZAKAZIVANJE (usluga -> frizer -> termin -> podaci) ===== */
body.booking-page {
background: #fff;
}
body.booking-page main {
background: #fff;
border-radius: 0;
box-shadow: none;
}
.bk {
max-width: 760px;
margin: 0 auto;
padding: 28px 16px 56px;
color: #1f1415;
}
.bk a:hover {
text-decoration: none;
}
.bk-head {
display: grid;
gap: 18px;
margin-bottom: 12px;
}
.bk-title {
margin: 0;
font-family: "Gilda Display", serif;
font-size: clamp(26px, 6vw, 34px);
font-weight: 400;
line-height: 1.2;
text-align: center;
color: #1f1415;
}
/* Napredak: na telefonu "Korak 2 od 4", na vecim ekranima krugovi */
.bk-progress-compact {
margin: 0;
font-size: 15px;
text-align: center;
color: #5c4446;
}
.bk-progress-compact strong {
color: #521B1E;
}
.bk-progress-bar {
height: 4px;
margin-top: 8px;
border-radius: 0;
background: #F0E2E2;
overflow: hidden;
}
.bk-progress-bar span {
display: block;
height: 100%;
border-radius: inherit;
background: #521B1E;
}
.bk-progress-steps {
display: none;
}
@media (min-width: 600px) {
.bk-progress-compact,
.bk-progress-bar {
display: none;
}
.bk-progress-steps {
display: flex;
justify-content: center;
align-items: flex-start;
margin: 0;
padding: 0;
list-style: none;
}
.bk-progress-step {
position: relative;
flex: 0 1 150px;
}
.bk-progress-step:not(:last-child)::after {
content: "";
position: absolute;
top: 17px;
left: calc(50% + 24px);
right: calc(-50% + 24px);
height: 2px;
background: #E6D3D4;
}
.bk-progress-step.is-done:not(:last-child)::after {
background: #521B1E;
}
.bk-progress-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: #7a5f61;
text-decoration: none;
}
.bk-progress-dot {
position: relative;
isolation: isolate;
width: 36px;
height: 36px;
display: grid;
place-items: center;
font-weight: 700;
font-size: 15px;
}
.bk-progress-label {
font-size: 14px;
white-space: nowrap;
}
.bk-progress-step.is-active .bk-progress-dot {
color: #fff;
}
.bk-progress-step.is-active .bk-progress-label {
color: #521B1E;
font-weight: 700;
}
.bk-progress-step.is-done .bk-progress-dot {
color: #521B1E;
}
a.bk-progress-item:hover .bk-progress-dot {
color: #fff;
}
.bk-progress-dot::before {
content: "";
position: absolute;
inset: 5px;
z-index: -1;
border: 2px solid #E6D3D4;
background: #fff;
transform: rotate(45deg);
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.bk-progress-step.is-active .bk-progress-dot::before,
a.bk-progress-item:hover .bk-progress-dot::before {
border-color: #521B1E;
background: #521B1E;
}
.bk-progress-step.is-done .bk-progress-dot::before {
border-color: #521B1E;
background: #F0E2E2;
}
}
.bk-back {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
margin-bottom: 4px;
color: #521B1E;
font-weight: 600;
text-decoration: none;
}
/* Rezime izbora */
.bk-summary {
display: grid;
gap: 6px;
margin: 0 0 20px;
padding: 12px 16px;
border: 1px solid #F0E2E2;
border-radius: 0;
background: #FFF7F7;
font-size: 15px;
}
.bk-summary > div {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: 10px;
align-items: baseline;
}
.bk-summary dt {
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #8a6b6d;
}
.bk-summary dd {
margin: 0;
font-weight: 600;
color: #1f1415;
}
.bk-summary-meta {
font-weight: 400;
color: #5c4446;
}
.bk-step-title {
margin: 0 0 14px;
font-family: "Gilda Display", serif;
font-size: 22px;
font-weight: 400;
text-align: left;
}
.bk-empty {
margin: 0;
color: #5c4446;
}
/* Korak 1: kategorije i usluge */
.bk-categories {
display: grid;
gap: 10px;
}
.bk-category {
border: 1px solid #EBDADB;
border-radius: 0;
background: #fff;
overflow: hidden;
}
.bk-category[open] {
border-color: #D9BFC1;
}
.bk-category summary {
display: flex;
align-items: center;
gap: 10px;
min-height: 56px;
padding: 0 16px;
list-style: none;
font-size: 17px;
font-weight: 600;
cursor: pointer;
}
.bk-category summary::-webkit-details-marker {
display: none;
}
.bk-category summary::after {
content: "";
width: 9px;
height: 9px;
margin-left: auto;
border-right: 2px solid #521B1E;
border-bottom: 2px solid #521B1E;
transform: rotate(45deg) translateY(-2px);
transition: transform 0.2s;
}
.bk-category[open] summary::after {
transform: rotate(-135deg) translateY(-2px);
}
.bk-category-count {
padding: 2px 8px;
border-radius: 0;
background: #F0E2E2;
color: #521B1E;
font-size: 13px;
}
.bk-services {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid #F0E2E2;
}
.bk-services li + li {
border-top: 1px solid #F5EBEB;
}
.bk-service {
display: flex;
align-items: center;
gap: 12px;
min-height: 60px;
padding: 12px 16px;
color: #1f1415;
text-decoration: none;
}
.bk-service:hover,
.bk-service:focus-visible {
background: #FFF7F7;
}
.bk-service-main {
display: grid;
flex: 1;
gap: 2px;
min-width: 0;
}
.bk-service-name {
font-size: 16px;
}
.bk-service-meta {
font-size: 14px;
color: #7a5f61;
}
.bk-service-price {
font-weight: 700;
white-space: nowrap;
color: #521B1E;
}
/* Korak 2: frizeri, 3 u redu i na telefonu */
.bk-staff {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 600px) {
.bk-staff {
gap: 14px;
}
}
.bk-staff-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
height: 100%;
min-height: 118px;
padding: 14px 6px 12px;
border: 1px solid #EBDADB;
border-radius: 0;
background: #fff;
color: #1f1415;
text-align: center;
text-decoration: none;
}
a.bk-staff-card:hover,
a.bk-staff-card:focus-visible {
border-color: #521B1E;
background: #FFF7F7;
}
.bk-staff-card.is-disabled {
opacity: 0.5;
cursor: not-allowed;
}
.bk-avatar {
width: 56px;
height: 56px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 50%;
background: #F0E2E2;
color: #521B1E;
font-family: "Gilda Display", serif;
font-size: 20px;
}
.bk-avatar-any {
background: #521B1E;
color: #fff;
}
.bk-staff-name {
font-size: 14px;
line-height: 1.25;
overflow-wrap: anywhere;
}
.bk-staff-note {
font-size: 12px;
color: #7a5f61;
}
/* Korak 3: dani i termini */
.bk-days {
display: flex;
gap: 8px;
margin: 0 -16px 8px;
padding: 4px 16px 10px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: thin;
}
.bk-day {
display: grid;
flex: 0 0 58px;
justify-items: center;
gap: 2px;
padding: 8px 0;
border: 1px solid #EBDADB;
border-radius: 0;
background: #fff;
color: #1f1415;
text-decoration: none;
scroll-snap-align: start;
}
.bk-day-name,
.bk-day-month {
font-size: 12px;
color: #7a5f61;
}
.bk-day-name {
letter-spacing: 0.05em;
text-transform: uppercase;
}
.bk-day-num {
font-size: 20px;
font-weight: 700;
line-height: 1.1;
}
a.bk-day:hover {
border-color: #521B1E;
}
.bk-day.is-selected {
border-color: #521B1E;
background: #521B1E;
color: #fff;
}
.bk-day.is-selected .bk-day-name,
.bk-day.is-selected .bk-day-month {
color: #F0E2E2;
}
.bk-day.is-off {
background: #FAF6F6;
opacity: 0.45;
}
.bk-day.is-off.is-selected {
border-color: #7a5f61;
background: #7a5f61;
}
.bk-slots {
min-height: 160px;
transition: opacity 0.15s;
}
.bk-slots[aria-busy="true"] {
opacity: 0.45;
}
.bk-slots-date {
margin: 8px 0 12px;
font-family: "Gilda Display", serif;
font-size: 20px;
font-weight: 400;
text-align: left;
}
.bk-slot-group + .bk-slot-group {
margin-top: 16px;
}
.bk-slot-label {
margin: 0 0 8px;
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #7a5f61;
}
.bk-slot-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.bk-slot {
display: flex;
align-items: center;
justify-content: center;
min-height: 46px;
border: 1px solid #D9BFC1;
border-radius: 0;
background: #fff;
color: #521B1E;
font-size: 16px;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-decoration: none;
}
.bk-slot:hover,
.bk-slot:focus-visible {
border-color: #521B1E;
background: #521B1E;
color: #fff;
}
.bk-no-slots {
display: grid;
justify-items: start;
gap: 12px;
padding: 16px;
border-radius: 0;
background: #FFF7F7;
}
.bk-no-slots p {
margin: 0;
}
/* Dugmad i linkovi */
.bk-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 22px;
border: 1px solid #521B1E;
border-radius: 0;
background: #fff;
color: #521B1E;
font-size: 16px;
font-weight: 600;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.bk-btn:hover {
background: #FFF7F7;
}
.bk-btn-primary {
background: #521B1E;
color: #fff;
}
.bk-btn-primary:hover {
background: #3f0f0f;
}
.bk-form .bk-btn-primary {
width: 100%;
}
.bk-link,
.bk-link-inline {
color: #521B1E;
font-weight: 600;
text-decoration: underline;
}
.bk-link {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.bk .bk-link:hover,
.bk .bk-link-inline:hover {
text-decoration: underline;
}
/* Korak 4: podaci */
.bk-form {
display: grid;
gap: 16px;
}
.bk-form div {
margin-bottom: 0;
}
.bk-fields {
display: grid;
gap: 14px;
}
@media (min-width: 600px) {
.bk-fields {
grid-template-columns: 1fr 1fr;
}
.bk-field-wide {
grid-column: 1 / -1;
}
}
.bk-field label {
margin-bottom: 6px;
font-size: 15px;
font-weight: 600;
color: #1f1415;
}
.bk-field input {
min-height: 50px;
padding: 12px 16px;
border: 1px solid #D9BFC1;
border-radius: 0;
background: #fff;
color: #1f1415;
font-size: 16px;
}
.bk-field input:focus {
border-color: #521B1E;
outline: 2px solid #521B1E;
outline-offset: 1px;
}
.bk-field.has-error input {
border-color: #A4262C;
}
.bk-field-error {
margin: 6px 0 0;
font-size: 14px;
color: #A4262C;
}
.bk-hp {
position: absolute !important;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.bk-hint {
margin: 0;
font-size: 14px;
line-height: 1.45;
color: #6d5a5c;
}
.bk-as-user {
margin: 0;
font-size: 16px;
}
.bk-alert {
display: grid;
justify-items: start;
gap: 10px;
margin-bottom: 16px;
padding: 14px 16px;
border: 1px solid #F3C4C4;
border-radius: 0;
background: #FDECEC;
color: #7d1d22;
}
.bk-alert p,
.bk-note p {
margin: 0;
}
.bk-note {
margin-bottom: 16px;
padding: 12px 16px;
border-radius: 0;
background: #F6F1F1;
}
/* Stranica termina */
.bk-manage {
display: grid;
gap: 16px;
}
.bk-manage .bk-summary,
.bk-manage .bk-alert,
.bk-manage .bk-note {
margin: 0;
}
.bk-manage > .bk-btn {
justify-self: start;
}
.bk-done {
display: grid;
justify-items: center;
gap: 10px;
text-align: center;
}
.bk-done-icon {
width: 64px;
height: 64px;
display: grid;
place-items: center;
border-radius: 50%;
background: #F0E2E2;
color: #521B1E;
}
.bk-done-text {
margin: 0;
font-size: 17px;
color: #5c4446;
}
.bk-summary-full > div {
grid-template-columns: 76px minmax(0, 1fr);
}
.bk-calendar {
display: grid;
gap: 10px;
}
.bk-calendar-title {
margin: 0;
font-size: 15px;
color: #5c4446;
}
.bk-calendar-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.bk-btn-quiet {
border-color: #D9BFC1;
color: #7d1d22;
}
button.bk-btn-quiet:hover {
border-color: #A4262C;
background: #FDECEC;
}
.bk-manage-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 8px;
border-top: 1px solid #F0E2E2;
}
.no-reservations .bk-btn {
margin-top: 12px;
}
.no-reservations-hint {
margin-top: 12px;
font-size: 14px;
}
.no-reservations-hint a {
color: #521B1E;
font-weight: 600;
text-decoration: underline;
}
/* Osoblje: oznake na rezervacijama i detalji termina */
.reservation-badge {
display: inline-block;
padding: 1px 7px;
border-radius: 999px;
background: #E8F1FB;
color: #1F4E7A;
font-family: "Jost", "Segoe UI", Arial, sans-serif;
font-size: 11px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.02em;
vertical-align: middle;
}
.reservation-badge.is-new {
background: #FFF1D6;
color: #7A4B00;
}
.reservation-badge.is-blocked {
background: #FDECEC;
color: #7d1d22;
}
.info-row .reservation-badge {
margin-left: 6px;
}
.info-phone {
color: #521B1E;
font-weight: 600;
text-decoration: underline;
}
.btn-cancel-reservation {
background-color: #fff;
color: #A4262C;
border: 1px solid #E3B5B8;
}
.btn-cancel-reservation:hover {
background-color: #FDECEC;
color: #7d1d22;
}
.block-phone-form {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 14px;
margin: 24px auto 0;
max-width: 640px;
padding: 0 16px;
text-align: center;
}
.block-phone-form p {
margin: 0;
color: #5c4446;
}
.btn-block-phone {
min-height: 44px;
padding: 0 16px;
border: 1px solid #D9BFC1;
border-radius: 999px;
background: #fff;
color: #7d1d22;
font-size: 14px;
font-weight: 600;
}
.btn-block-phone:hover {
background: #FDECEC;
}
@media (max-width: 340px) {
.main-navbar .nav-cta {
padding: 0 10px;
font-size: 14px;
}
}
/* Profil: broj telefona samo za čitanje */
.profile-phone {
display: grid;
gap: 4px;
}
.profile-phone-label {
font-weight: 600;
color: #1f1415;
}
.profile-phone-value {
font-size: 17px;
font-variant-numeric: tabular-nums;
color: #1f1415;
}
.profile-phone-hint {
font-size: 13px;
color: #6d5a5c;
}
/* Kalendar za osoblje: veće strelice i dani za prst (R4) */
.custom-date-picker-nav {
min-width: 44px;
min-height: 44px;
border-radius: 50%;
}
.custom-date-picker-nav:hover {
background: #F0E2E2;
opacity: 1;
}
.custom-date-picker-weekday {
font-size: 13px;
}
.custom-date-picker-day {
min-height: 40px;
}
/* Površine za dodir od najmanje 44px (R8) */
.review-back-link,
.back-to-calendar-link,
.register-login-link a,
.login-register-link a,
.contact-instagram-link {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.back-link {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
}
/* iPhone ne zumira stranicu kada je font polja bar 16px (R7) */
@media (max-width: 768px) {
html body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html body select:not([hidden]),
html body textarea:not([hidden]) {
font-size: 16px;
}
}
/* Zaboravljena lozinka */
.login-forgot-link {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-top: 2px;
color: #521B1E;
font-size: 15px;
font-weight: 600;
text-decoration: underline;
}
.login-success {
display: grid;
gap: 8px;
margin-bottom: 8px;
padding: 14px 16px;
border-radius: 0;
background: #EEF6F0;
color: #1f3d2a;
font-size: 15px;
line-height: 1.45;
}
.login-success p {
margin: 0;
}
a.login-btn {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
a.login-btn:hover {
color: white;
text-decoration: none;
}
/* ===== POČETNA: RECENZIJE ===== */
.home-reviews {
background-color: #FFF6F5;
padding: 72px 10vw;
}
.home-reviews-inner {
display: grid;
gap: 28px;
max-width: 1200px;
margin: 0 auto;
}
.home-reviews-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 8px 24px;
}
.home-reviews-title {
margin: 0;
font-family: "Gilda Display", serif;
font-size: clamp(30px, 4vw, 46px);
font-weight: 400;
line-height: 1.15;
text-align: left;
color: #000;
}
.home-reviews-summary {
margin: 0;
font-size: 17px;
color: #3d2a2c;
}
.home-reviews-summary strong {
font-size: 20px;
color: #521B1E;
}
.home-reviews-stars {
color: #521B1E;
}
.reviews-row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 48px) / 3);
gap: 24px;
padding: 4px 2px 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.reviews-row::-webkit-scrollbar {
display: none;
}
.reviews-row:focus-visible {
outline: 2px solid #521B1E;
outline-offset: 4px;
}
.review-card {
display: flex;
flex-direction: column;
gap: 14px;
min-height: 240px;
margin: 0;
padding: 26px 24px;
border-radius: 0;
background: #fff;
border: 1px solid #F0E2E2;
scroll-snap-align: start;
}
.review-stars {
font-size: 20px;
letter-spacing: 2px;
color: #E8D9DA;
}
.review-stars .is-on {
color: #521B1E;
}
.review-comment {
flex: 1;
margin: 0;
}
.review-comment p {
display: -webkit-box;
margin: 0;
overflow: hidden;
font-family: "Gilda Display", serif;
font-size: 19px;
line-height: 1.5;
color: #1f1415;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
.review-author {
display: grid;
gap: 2px;
}
.review-name {
font-weight: 600;
color: #1f1415;
}
.review-meta {
font-size: 14px;
color: #7a5f61;
}
.reviews-controls {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.reviews-btn {
width: 48px;
height: 48px;
padding: 0;
border: 1px solid #D9BFC1;
border-radius: 0;
background: #fff;
color: #521B1E;
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.reviews-btn:hover {
border-color: #521B1E;
background: #521B1E;
color: #fff;
}
.reviews-btn:disabled {
opacity: 0.35;
cursor: default;
background: #fff;
color: #521B1E;
}
@media (max-width: 900px) {
.home-reviews {
padding: 56px 24px;
}
.reviews-row {
grid-auto-columns: calc((100% - 24px) / 2);
}
}
@media (max-width: 600px) {
.home-reviews {
padding: 48px 16px;
}
/* Na telefonu se vidi jedna kartica i deo sledeće, da je jasno da ima još */
.reviews-row {
grid-auto-columns: 86%;
gap: 14px;
margin-right: -16px;
padding-right: 16px;
}
}
/* ===== POČETNA: HERO DUGMAD I OCENA ===== */
.home-hero-sub {
max-width: 640px;
margin: 30px 0 0;
color: #FFF6F5;
font-family: "Gilda Display", serif;
font-size: 21px;
line-height: 1.45;
text-wrap: balance;
}
.home-hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 18px;
margin-top: 32px;
}
.home-hero-secondary {
display: inline-block;
padding: 19px 44px;
border: 1px solid rgba(255, 246, 245, 0.8);
color: #FFF6F5;
font-family: "Gilda Display", serif;
font-size: 23px;
letter-spacing: 0.03em;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease;
}
.home-hero-secondary:hover {
background: #FFF6F5;
color: #521B1E;
text-decoration: none;
}
.home-hero-trust {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 22px;
color: #FFF6F5;
font-size: 16px;
text-decoration: none;
opacity: 0.92;
}
.home-hero-trust:hover {
color: #FFF6F5;
text-decoration: underline;
}
.home-hero-stars {
letter-spacing: 0.08em;
}
.home-hero-stars span {
opacity: 0.35;
}
.home-hero-stars .is-on {
opacity: 1;
}
@media (max-width: 768px) {
.home-hero-sub {
margin-top: 14px;
font-size: 17px;
}
.home-hero-actions {
margin-top: 24px;
}
.home-hero-secondary {
padding: 13px 28px;
font-size: 18px;
}
}
/* ===== POČETNA: TRAKA SA INFORMACIJAMA ===== */
.home-info {
background: #FFF6F5;
border-bottom: 1px solid #F0E2E2;
padding: 18px 10vw;
}
.home-info-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px 24px;
max-width: 1200px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.home-info-item {
display: flex;
align-items: flex-start;
gap: 12px;
min-height: 44px;
color: #1f1415;
text-decoration: none;
}
.home-info-item svg {
flex: 0 0 20px;
margin-top: 2px;
color: #521B1E;
}
.home-info-text {
display: grid;
gap: 1px;
min-width: 0;
}
.home-info-short {
display: none;
}
.home-info-item strong {
font-weight: 600;
font-size: 16px;
}
.home-info-item small {
font-size: 14px;
color: #6d5a5c;
}
a.home-info-item:hover strong {
color: #521B1E;
text-decoration: underline;
}
@media (max-width: 900px) {
.home-info {
padding: 16px 24px;
}
.home-info-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Telefon: jedan red od 4 brze radnje, ikonica iznad kratke oznake */
@media (max-width: 600px) {
.home-info {
padding: 0 8px;
}
.home-info-list {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
}
.home-info-list li + li {
border-left: 1px solid #F0E2E2;
}
.home-info-item {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 76px;
padding: 12px 2px;
text-align: center;
}
.home-info-item svg {
margin-top: 0;
}
.home-info-text {
display: none;
}
.home-info-short {
display: block;
font-size: 13px;
font-weight: 500;
line-height: 1.25;
}
}
/* ===== POČETNA: USLUGE SA CENAMA ===== */
.home-services {
display: grid;
gap: 2px;
margin: 0 0 32px;
padding: 0;
list-style: none;
text-align: left;
}
.home-service {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
min-height: 44px;
padding: 10px 0;
border-bottom: 1px solid #F0E2E2;
color: #1f1415;
text-decoration: none;
}
.home-service:hover {
color: #521B1E;
text-decoration: none;
}
.home-service-name {
font-family: "Gilda Display", serif;
font-size: 19px;
}
.home-service-price {
flex-shrink: 0;
font-size: 15px;
color: #6d5a5c;
white-space: nowrap;
}
.home-service:hover .home-service-name {
text-decoration: underline;
}
/* ===== POČETNA: TIM ===== */
.home-team-label {
margin: 0 0 10px;
font-size: 15px;
color: #6d5a5c;
}
.home-team-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
max-width: 460px;
margin: 0 0 28px;
padding: 0;
list-style: none;
}
.home-team-member {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
height: 100%;
min-height: 108px;
padding: 14px 6px 12px;
border: 1px solid #E3CFD1;
border-radius: 0;
background: #fff;
color: #1f1415;
text-align: center;
text-decoration: none;
transition: border-color 0.2s ease;
}
.home-team-member:hover {
border-color: #521B1E;
color: #521B1E;
text-decoration: none;
}
/* tri kartice u redu; poslednji red je centriran na telefonu */
.home-team-list li {
flex: 0 0 calc((100% - 20px) / 3);
}
.home-team-avatar {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 50%;
background: #F0E2E2;
color: #521B1E;
font-family: "Gilda Display", serif;
font-size: 19px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.home-team-member:hover .home-team-avatar {
background: #521B1E;
color: #FFF6F5;
}
.home-team-name {
font-size: 16px;
line-height: 1.25;
overflow-wrap: anywhere;
}
@media (max-width: 1150px) {
.home-team-list {
justify-content: center;
margin-inline: auto;
}
}
/* ===== POČETNA: INSTAGRAM ISPOD GALERIJE ===== */
.home-gallery-more {
padding: 20px 16px;
background: #521B1E;
text-align: center;
}
.home-gallery-more a {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
color: #FFF6F5;
font-size: 17px;
text-decoration: underline;
text-underline-offset: 3px;
}
/* ===== POČETNA: KONTAKT ===== */
.home-contact-details {
display: grid;
gap: 10px;
margin: 0 0 28px;
}
.home-contact-details > div {
display: grid;
gap: 2px;
}
.home-contact-details dt {
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #7a5f61;
}
.home-contact-details dd {
margin: 0;
font-size: 17px;
color: #1f1415;
}
.home-contact-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.home-contact-secondary {
display: inline-block;
padding: 19px 44px;
border: 1px solid #521B1E;
color: #521B1E;
font-family: "Gilda Display", serif;
font-size: 23px;
letter-spacing: 0.03em;
text-decoration: none;
}
.home-contact-secondary:hover {
background: #521B1E;
color: #FFF6F5;
text-decoration: none;
}
.home-contact-link {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-top: 10px;
color: #521B1E;
font-size: 15px;
text-decoration: underline;
}
@media (max-width: 1150px) {
.home-contact-details {
justify-items: center;
}
.home-contact-actions {
justify-content: center;
}
}
@media (max-width: 900px) {
.home-contact-secondary {
padding: 13px 28px;
font-size: 18px;
}
}
/* ===== HEADER OSTAJE NA VRHU (dugme Zakaži termin uvek vidljivo) ===== */
header {
position: sticky;
top: 0;
z-index: 900;
}
html {
scroll-padding-top: 88px;
}
@media (max-width: 991.98px) {
html {
scroll-padding-top: 72px;
}
}
/* Prozor za potvrdu otkazivanja ide preko headera */
.modal-overlay {
z-index: 1100;
}
.home-gallery-more a span {
text-align: left;
}
/* dva dugmeta u kontaktu staju u jedan red i na desktopu */
.home-contact-actions .home-contact-cta,
.home-contact-actions .home-contact-secondary {
padding: 19px 34px;
}
@media (max-width: 900px) {
.home-contact-actions .home-contact-cta,
.home-contact-actions .home-contact-secondary {
padding: 13px 28px;
}
}
.home-contact-details dd span {
white-space: nowrap;
}
/* ===== JAVNI DEO: ISTI STIL KAO POČETNA =====
Oštre ivice, dugmad u fontu Gilda Display: puno bordo za glavnu radnju,
bordo okvir za sporednu. Krug ostaje samo za inicijale frizera i ikonice. */
.main-navbar .nav-cta,
.login-btn,
.register-btn,
.contact-form-btn,
.profile-save-btn,
.bk-btn,
.mr-btn,
.review-submit-btn,
.btn-secondary,
.btn-danger-modal {
font-family: "Gilda Display", serif;
font-weight: 400;
letter-spacing: 0.03em;
}
.login-btn,
.register-btn {
font-size: 19px;
}
.bk-btn {
font-size: 17px;
}
/* Registracija: dugme preko cele širine, kao na prijavi */
.register-btn {
width: 100%;
min-height: 52px;
margin: 26px 0 14px;
padding: 0 24px;
}
/* Prozor za potvrdu otkazivanja */
.btn-secondary,
.btn-danger-modal {
min-height: 44px;
padding: 0 18px;
font-size: 16px;
}
.btn-secondary {
border: 1px solid #521B1E;
background: #fff;
color: #521B1E;
}
.btn-secondary:hover {
background: #FFF6F5;
}
.btn-danger-modal {
background: #521B1E;
color: #FFF6F5;
}
.btn-danger-modal:hover {
background: #3f0f0f;
}
/* Moje rezervacije: podvučeni tabovi umesto pilula */
.status-filter-sheets {
gap: 8px;
padding: 0;
background: none;
border-bottom: 1px solid #E6D3D4;
}
.status-filter-sheet {
margin-bottom: -1px;
border-bottom: 2px solid transparent;
color: #6d5a5c;
font-weight: 500;
}
.status-filter-sheet:hover {
background: none;
color: #521B1E;
}
.status-filter-sheet.active {
background: none;
border-bottom-color: #521B1E;
color: #521B1E;
font-weight: 600;
}