body {
  font-family: 'Barlow Condensed', 'Inter', Arial, sans-serif;
  background: #191819;
  color: #f3ede5;
  margin: 0;
  line-height: 1.6;
  font-size: 1.07rem;
  letter-spacing: 0.1px;
}

a { color: #ffc369; text-decoration: none; transition: color 0.18s; }
a:hover { color: #ffe8b7; }

.bar-hero {
  background:
    url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M81.28 88H68.413l19.298 19.298L81.28 88zm2.107 0h13.226L90 107.838 83.387 88zm15.334 0h12.866l-19.298 19.298L98.72 88zm-32.927-2.207L73.586 78h32.827l.5.5 7.294 7.293L115.414 87l-24.707 24.707-.707.707L64.586 87l1.207-1.207zm2.62.207L74 80.414 79.586 86H68.414zm16 0L90 80.414 95.586 86H84.414zm16 0L106 80.414 111.586 86h-11.172zm-8-6h11.173L98 85.586 92.414 80zM82 85.586L87.586 80H76.414L82 85.586zM17.414 0L.707 16.707 0 17.414V0h17.414zM4.28 0L0 12.838V0h4.28zm10.306 0L2.288 12.298 6.388 0h8.198zM180 17.414L162.586 0H180v17.414zM165.414 0l12.298 12.298L173.612 0h-8.198zM180 12.838L175.72 0H180v12.838zM0 163h16.413l.5.5 7.294 7.293L25.414 172l-8 8H0v-17zm0 10h6.613l-2.334 7H0v-7zm14.586 7l7-7H8.72l-2.333 7h8.2zM0 165.414L5.586 171H0v-5.586zM10.414 171L16 165.414 21.586 171H10.414zm-8-6h11.172L8 170.586 2.414 165zM180 163h-16.413l-7.794 7.793-1.207 1.207 8 8H180v-17zm-14.586 17l-7-7h12.865l2.333 7h-8.2zM180 173h-6.613l2.334 7H180v-7zm-21.586-2l5.586-5.586 5.586 5.586h-11.172zM180 165.414L174.414 171H180v-5.586zm-8 5.172l5.586-5.586h-11.172l5.586 5.586zM152.933 25.653l1.414 1.414-33.94 33.942-1.416-1.416 33.943-33.94zm1.414 127.28l-1.414 1.414-33.942-33.94 1.416-1.416 33.94 33.943zm-127.28 1.414l-1.414-1.414 33.94-33.942 1.416 1.416-33.943 33.94zm-1.414-127.28l1.414-1.414 33.942 33.94-1.416 1.416-33.94-33.943zM0 85c2.21 0 4 1.79 4 4s-1.79 4-4 4v-8zm180 0c-2.21 0-4 1.79-4 4s1.79 4 4 4v-8zM94 0c0 2.21-1.79 4-4 4s-4-1.79-4-4h8zm0 180c0-2.21-1.79 4-4 4s-4-1.79-4-4h8z' fill='%23ffc369' fill-opacity='0.32' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-color: #232323;
  background-repeat: repeat;
  background-size: 180px 180px;
  background-blend-mode: overlay;
  padding: 68px 0 44px 0;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Overlay gradiente basso */
.bar-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 110px; /* Regola la lunghezza della sfumatura */
  background: linear-gradient(to bottom, rgba(35,35,35,0) 0%, #191819 100%);
  z-index: 2;
  pointer-events: none;
}

.bar-hero-inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 18px;
}
.bar-hero h1 {
  font-family: 'Barlow Condensed', Arial, sans-serif;
  text-transform: uppercase;
  font-size: 3.4rem;
  letter-spacing: 2.2px;
  color: #ffc369;
  margin: 0 0 16px 0;
}
.bar-hero-subtitle {
  font-size: 1.29rem;
  color: #fff3e2;
  margin-bottom: 32px;
  line-height: 1.45;
}
.bar-btn-main {
  display: inline-block;
  background: linear-gradient(90deg,#eac16b 50%, #ba9241 100%);
  color: #232323;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 14px 44px;
  font-size: 1.16rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 2px 16px #2b140120;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.15s, color 0.15s, transform 0.13s;
}
.bar-btn-main:hover {
  background: linear-gradient(90deg,#ffd573 60%, #ba9241 100%);
  color: #000;
  transform: scale(1.04);
}

.bar-offers {
  max-width: 1040px;
  margin: 0 auto 54px auto;
  padding: 0 18px;
}
.bar-offers h2 {
  color: #ffc369;
  text-align: center;
  margin-bottom: 36px;
  letter-spacing: 1.4px;
  font-size: 2rem;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  text-transform: uppercase;
}
.bar-offers-list {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
}
.bar-offer-card {
  background: linear-gradient(110deg,#26221c 70%,#222 100%);
  border-radius: 14px;
  box-shadow: 0 2px 16px #2a220a2a;
  padding: 24px 18px 20px 18px;
  width: 250px;
  text-align: center;
  transition: box-shadow 0.14s, transform 0.13s;
}
.bar-offer-card:hover {
  box-shadow: 0 4px 24px #ffc3691a;
  transform: translateY(-4px) scale(1.04);
}
.bar-offer-card img {
  width: 82px;
  height: 82px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 18px;
  border: 3px solid #ffc36933;
  background: #292929;
}
.bar-offer-card h3 {
  color: #ffe6b0;
  font-size: 1.21rem;
  margin: 0 0 7px 0;
  text-transform: uppercase;
  font-family: 'Barlow Condensed', Arial, sans-serif;
}
.bar-offer-card p {
  color: #ffc369db;
  font-size: 0.97rem;
  margin-bottom: 0;
}

.bar-menu {
  max-width: 1060px;
  margin: 0 auto 58px auto;
  padding: 0 18px;
}
.bar-menu h2 {
  color: #ffc369;
  text-align: center;
  margin-bottom: 30px;
  letter-spacing: 1.2px;
  font-size: 1.74rem;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  text-transform: uppercase;
}
.bar-menu-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
}
.bar-menu-card {
  background: linear-gradient(120deg, #232223 70%, #251f13 100%);
  border-radius: 15px;
  box-shadow: 0 2px 18px #ba92413d;
  width: 300px;
  padding: 22px 16px 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.13s, transform 0.14s;
  position: relative;
}
.bar-menu-card:hover {
  box-shadow: 0 4px 28px #ffc3692f;
  transform: translateY(-4px) scale(1.04);
}
.bar-menu-card img {
    width: 95px;
    height: 95px;
    object-fit: cover;
    border-radius: 13px;
    box-shadow: 0 2px 12px #ffc36920;
    margin-bottom: 16px;
    background: #292929;
    object-position: center 75%;
}
.bar-menu-info {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 6px;
}
.bar-menu-info h4 {
  color: #ffd78d;
  font-size: 1.19rem;
  margin: 0;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.bar-menu-price {
  color: #ffd573;
  font-size: 1.12rem;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
}
.bar-menu-desc {
  font-size: 0.99rem;
  color: #f7e3c2;
  margin: 8px 0 0 0;
  text-align: left;
  width: 100%;
  min-height: 40px;
}

.bar-events {
  max-width: 1040px;
  margin: 0 auto 48px auto;
  padding: 0 18px;
}
.bar-events h2 {
  color: #ffc369;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 1.2px;
  font-size: 1.48rem;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  text-transform: uppercase;
}
.bar-events-banner {
  background: linear-gradient(90deg, #33302b 60%, #ffc36911 100%);
  border-radius: 11px;
  padding: 24px 14px;
  color: #ffc369;
  font-size: 1.09rem;
  font-weight: 500;
  box-shadow: 0 2px 18px #ffc36916;
  text-align: center;
  letter-spacing: 1px;
}

.bar-contact {
  max-width: 900px;
  margin: 0 auto 54px auto;
  padding: 0 18px;
}
.bar-contact h2 {
  color: #ffc369;
  text-align: center;
  margin-bottom: 28px;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Barlow Condensed', Arial, sans-serif;
}
.bar-contact-flex {
  display: flex;
  gap: 38px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.bar-contact-info {
  flex: 0 0 230px;
  background: linear-gradient(110deg,#23201d 70%,#292929 100%);
  border-radius: 12px;
  padding: 28px 14px 28px 14px; /* più aria sopra e sotto */
  box-shadow: 0 2px 14px #ffc3690c;
  color: #ffc369;
  font-size: 1.09rem;
  margin-bottom: 18px;
  min-width: 0;
  max-width: 270px;
  display: flex;
  flex-direction: column;
  /* gap: 14px; */          /* più spazio tra le righe */
  align-items: center;   /* <--- centra tutto il blocco dentro la card */
  justify-content: center; /* centra verticalmente */
  height: 100%;
}
.bar-contact-info p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px;
  font-size: 1.07rem;
  width: 100%;
  justify-content: center; /* centra la singola riga dentro la card */
}
.bar-contact-info i {
  color: #ffc369;
  margin-right: 9px;
  font-size: 1.15em;
}
.bar-contact-form {
  flex: 1 1 250px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(110deg,#23201d 80%,#1e1910 100%);
  border-radius: 10px;
  box-shadow: 0 2px 8px #ffc36907;
  padding: 18px 12px 14px 12px;
  color: #f3ede5;
  font-size: 1rem;
  margin-bottom: 14px;
  align-items: stretch;
  justify-content: center;
}
.bar-contact-form input,
.bar-contact-form textarea {
  padding: 9px 8px;
  border-radius: 6px;
  border: 1.2px solid #ffc36966;
  background: #1b1917;
  color: #ffe7be;
  font-size: 1rem;
  font-family: inherit;
  box-shadow: 0 1px 4px #ffc36922;
  transition: border 0.18s, box-shadow 0.18s;
}
.bar-contact-form input:focus,
.bar-contact-form textarea:focus {
  border: 1.3px solid #ffc369cc;
  outline: none;
  box-shadow: 0 2px 12px #ffc36944;
}
.bar-contact-form textarea {
  min-height: 64px;
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
}
.bar-contact-form button {
  background: #ffc369;
  color: #191819;
  border: none;
  border-radius: 6px;
  padding: 10px 0;
  font-size: 1.08rem;
  font-weight: 700;
  margin-top: 8px;
  cursor: pointer;
  box-shadow: 0 1px 6px #ffc36914;
  text-transform: uppercase;
  transition: background 0.14s, color 0.13s;
}
.bar-contact-form button:hover {
  background: #ffde90;
  color: #232323;
}

.bar-footer {
  background: #191819;
  color: #ffc369b0;
  text-align: center;
  padding: 30px 0 18px 0;
  font-size: 1.03rem;
  letter-spacing: 1px;
  position: relative;
}
.bar-footer-social {
  margin-top: 12px;
}
.bar-footer-social a {
  color: #ffc369b8;
  font-size: 1.3rem;
  margin: 0 7px;
  display: inline-block;
  transition: color 0.16s, transform 0.13s;
}
.bar-footer-social a:hover {
  color: #fff;
  transform: scale(1.12) rotate(-4deg);
}

/*=== Modale ===*/
.modal-success-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: rgba(30, 16, 3, 0.22);
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.2s;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.modal-success-box {
  background: #fffbe7;
  border-radius: 16px;
  padding: 38px 28px 24px 28px;
  box-shadow: 0 8px 32px #d24a2b24;
  text-align: center;
  min-width: 240px;
  max-width: 92vw;
}
.modal-success-icon {
  font-size: 3rem;
  color: #28b94b;
  margin-bottom: 16px;
}
.modal-success-message {
  font-size: 1.11rem;
  color: #724d1e;
  margin-bottom: 18px;
  line-height: 1.5;
}
.modal-success-btn {
  background: #c53e1d;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 32px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 12px #d24a2b23;
  transition: background 0.15s;
}
.modal-success-btn:hover { background: #a22800; }

/* ==== Responsive ==== */
@media (max-width: 900px) {
  .bar-offers-list,
  .bar-menu-grid,
  .bar-contact-flex {
    flex-direction: column;
    gap: 22px;
    align-items: center;
  }
  .bar-menu-card,
  .bar-offer-card,
  .bar-contact-info,
  .bar-contact-form {
    width: 85vw;
    max-width: 390px;
  }
}
@media (max-width: 600px) {
  .bar-hero h1 { font-size: 2.1rem; }
  .bar-hero-subtitle { font-size: 1.05rem; }
  .bar-btn-main { padding: 10px 18px; font-size: 1rem; }
  .bar-offers h2, .bar-menu h2, .bar-events h2, .bar-contact h2 { font-size: 1.12rem; }
  .bar-offer-card img, .bar-menu-card img { width: 56px; height: 56px; }
  .bar-offer-card, .bar-menu-card, .bar-contact-info, .bar-contact-form {
    padding: 12px 6px;
    min-width: 0;
  }
  .bar-footer { font-size: 0.93rem; }
  .bar-footer-social a { font-size: 1.15rem; }
}