:root {
      --blue: #6bb7de;
      --yellow: #f4d417;
      --pink: #e89ac0;
      --green: #85c455;
      --orange: #ff9b5a;
      --text: #2f3653;
      --muted: #68718f;
      --line: #dce5f2;
      --bg: #f9fcff;
      --white: #ffffff;
      --shadow: 0 10px 24px rgba(65, 88, 135, 0.10);
    }

    * {
      box-sizing: border-box;
    }

    body.page-template-page-tonami {
    zoom: 90%;
    }

    body {
      margin: 0;
      font-family: 'Nunito', sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 10% 8%, rgba(244, 212, 23, 0.18), transparent 18%),
        radial-gradient(circle at 90% 12%, rgba(107, 183, 222, 0.16), transparent 20%),
        radial-gradient(circle at 80% 78%, rgba(232, 154, 192, 0.14), transparent 18%),
        linear-gradient(180deg, #f9fcff 0%, #fffdf7 100%);
      overflow-x: hidden;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    .brand-font {
      font-family: 'Baloo 2', cursive;
    }

    .handwritten {
      font-family: 'Patrick Hand', cursive;
      letter-spacing: 1px;
    }

    .navbar {
      background: rgba(255, 255, 255, 0.95) !important;
      backdrop-filter: blur(10px);
      border-bottom: 3px solid rgba(107, 183, 222, 0.18);
      box-shadow: 0 6px 18px rgba(57, 72, 103, 0.05);
    }

    .navbar-brand {
      color: var(--blue) !important;
      font-size: 2rem;
      font-weight: 800;
      transform: rotate(-2deg);
    }

    .nav-link {
      color: var(--text) !important;
      font-weight: 800;
      padding-left: .9rem !important;
      padding-right: .9rem !important;
    }

    .nav-link:hover {
      color: var(--pink) !important;
    }

    .btn-main,
    .btn-yellow,
    .btn-soft {
      font-weight: 800;
      padding: 14px 24px;
      border: 0;
      transition: .2s ease;
    }

    .btn-main {
      background: var(--blue);
      color: #fff;
      border-radius: 24px 18px 26px 16px;
      transform: rotate(-1deg);
      box-shadow: 0 10px 20px rgba(107, 183, 222, 0.25);
    }

    .btn-yellow {
      background: linear-gradient(135deg, var(--yellow), var(--orange));
      color: #5a3c00;
      border-radius: 18px 25px 18px 26px;
      transform: rotate(1deg);
      box-shadow: 0 10px 20px rgba(244, 212, 23, 0.22);
    }

    .btn-soft {
      background: #fff;
      color: var(--blue);
      border: 2px dashed #cfddef;
      border-radius: 20px 16px 24px 18px;
    }

    .btn-main:hover,
    .btn-yellow:hover,
    .btn-soft:hover {
      transform: translateY(-1px);
    }

    .hero {
      position: relative;
      padding: 132px 0 100px;
      overflow: hidden;
    }

    .hero-shape {
      position: absolute;
      border-radius: 50%;
      z-index: 1;
      opacity: .9;
    }

    .shape-1 {
      width: 220px;
      height: 220px;
      background: rgba(244, 212, 23, .26);
      top: -40px;
      left: -40px;
    }

    .shape-2 {
      width: 280px;
      height: 280px;
      background: rgba(107, 183, 222, .16);
      top: 20px;
      right: -70px;
    }

    .shape-3 {
      width: 180px;
      height: 180px;
      background: rgba(232, 154, 192, .18);
      bottom: 30px;
      left: 14%;
    }

    .shape-4 {
      width: 150px;
      height: 150px;
      background: rgba(133, 196, 85, .18);
      bottom: 0;
      right: 14%;
    }

    .hero .container {
      position: relative;
      z-index: 2;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      background: #fff7d7;
      color: #8f6600;
      border: 2px dashed #ffd862;
      border-radius: 999px;
      font-weight: 800;
      margin-bottom: 1.2rem;
      transform: rotate(-2deg);
    }

    .hero h1 {
      font-size: clamp(3rem, 6vw, 5.4rem);
      line-height: 1;
      margin-bottom: 1rem;
    }

    .hero .lead {
      max-width: 720px;
      color: var(--muted);
      font-size: 1.1rem;
      line-height: 1.9;
    }

    .text-blue {
      color: var(--blue);
    }

    .text-pink {
      color: var(--pink);
    }

    .text-green {
      color: var(--green);
    }

    .chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 1.4rem;
    }

    .chip {
      background: #fff;
      border: 2px dashed var(--line);
      border-radius: 999px;
      padding: 10px 14px;
      font-weight: 800;
      box-shadow: 0 6px 14px rgba(70, 92, 141, .05);
    }

    .hero-card,
    .panel,
    .box,
    .testimonial,
    .gallery-card,
    .contact-card,
    .stat-card {
      background: #fff;
      box-shadow: var(--shadow);
    }

    .hero-card {
      border: 3px solid #e3edf8;
      border-radius: 34px 26px 36px 24px;
      padding: 30px;
      transform: rotate(-1deg);
      position: relative;
      overflow: hidden;
    }

    .hero-card::after {
      content: "";
      position: absolute;
      width: 140px;
      height: 140px;
      background: rgba(133, 196, 85, .14);
      border-radius: 50%;
      bottom: -40px;
      right: -30px;
    }

    .mini-note {
      background: #fff;
      border: 2px dashed #dde7f4;
      border-radius: 20px 14px 22px 16px;
      padding: 14px 16px;
      margin-top: 12px;
      position: relative;
      z-index: 2;
    }

    .stat-card {
      border: 2px dashed #dbe5f2;
      border-radius: 24px 18px 22px 20px;
      padding: 18px;
      height: 100%;
      text-align: center;
    }

    .section {
      position: relative;
      padding: 95px 0;
    }

    .section-alt {
      background: linear-gradient(180deg, #eef8ff 0%, #fff7ec 100%);
    }

    .section-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #eef4ff;
      color: var(--blue);
      border: 2px dashed #d7e4fa;
      padding: 8px 14px;
      border-radius: 999px;
      font-weight: 800;
      margin-bottom: 12px;
      transform: rotate(-2deg);
    }

    .section-title {
      font-size: clamp(2.1rem, 4vw, 3.4rem);
      margin-bottom: 1rem;
    }

    .section-subtitle {
      max-width: 760px;
      color: var(--muted);
      line-height: 1.9;
    }

    .panel {
      border: 3px solid #e4ebf7;
      border-radius: 34px 24px 36px 24px;
      padding: 34px;
      background: linear-gradient(135deg, #eef8ff 0%, #fff5ea 100%);
    }

    .box {
      height: 100%;
      border: 3px solid #e0e8f4;
      border-radius: 30px 22px 30px 24px;
      padding: 26px;
      transition: .25s ease;
      position: relative;
      overflow: hidden;
    }

    .box:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 30px rgba(70, 92, 141, .10);
    }

    .scribble-top::before {
      content: "";
      position: absolute;
      top: 16px;
      left: 18px;
      width: 56px;
      height: 8px;
      border-radius: 999px;
    }

    .scribble-blue::before {
      background: #8fd2f0;
    }

    .scribble-yellow::before {
      background: #ffe06d;
    }

    .scribble-pink::before {
      background: #f5b2d1;
    }

    .scribble-green::before {
      background: #97cf62;
    }

    .icon-blob {
      width: 70px;
      height: 70px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      border-radius: 24px 18px 22px 26px;
      margin-bottom: 18px;
      transform: rotate(-5deg);
    }

    .bg-blue {
      background: #dff1fb;
    }

    .bg-yellow {
      background: #fff1bb;
    }

    .bg-pink {
      background: #ffdce9;
    }

    .bg-green {
      background: #dff4cf;
    }

    .bg-orange {
      background: #ffe3d2;
    }

    .feature-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .feature-list li {
      padding: 11px 0;
      border-bottom: 2px dashed #dde7f3;
      color: var(--muted);
      font-weight: 700;
    }

    .feature-list li:last-child {
      border-bottom: none;
    }

    .pill-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 1rem;
    }

    .pill-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #fff;
      border: 2px dashed #dce6f2;
      border-radius: 999px;
      padding: 10px 14px;
      font-weight: 800;
    }

    .gallery-card {
      height: 190px;
      border: 3px dashed #cfdaee;
      border-radius: 28px 20px 30px 24px;
      background: linear-gradient(135deg, #dfeeff 0%, #fff0db 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: var(--muted);
      font-weight: 800;
      padding: 20px;
    }

    .testimonial {
      border: 3px solid #e0e8f4;
      border-radius: 28px 22px 30px 24px;
      padding: 26px;
      height: 100%;
      position: relative;
    }

    .testimonial::before {
      content: "“";
      position: absolute;
      top: 10px;
      right: 16px;
      font-size: 4rem;
      color: rgba(107, 183, 222, .14);
      line-height: 1;
      font-family: Georgia, serif;
    }

    .testimonial p {
      color: var(--muted);
      line-height: 1.9;
      margin-bottom: 1rem;
      position: relative;
      z-index: 2;
    }

    .contact-card {
      border: 3px solid #e1e8f5;
      border-radius: 36px 26px 38px 24px;
      padding: 40px;
      background: linear-gradient(135deg, #eef9ff 0%, #fff7ef 55%, #eefff7 100%);
      position: relative;
      overflow: hidden;
    }

    .contact-card::after {
      content: "";
      position: absolute;
      right: -40px;
      bottom: -40px;
      width: 170px;
      height: 170px;
      border-radius: 50%;
      background: rgba(232, 154, 192, .14);
    }

    .wave {
      position: absolute;
      left: 0;
      width: 100%;
      line-height: 0;
    }

    .wave.top {
      top: -1px;
    }

    .wave.bottom {
      bottom: -1px;
    }

    footer {
      padding: 36px 0;
      border-top: 3px solid #edf2fa;
      color: var(--muted);
      background: rgba(255, 255, 255, .7);
    }

    .real-gallery-card {
      padding: 0;
      overflow: hidden;
      background: #fff;
      border: 3px dashed #cfdaee;
      border-radius: 28px 20px 30px 24px;
    }

    .gallery-img {
      width: 100%;
      height: 240px;
      object-fit: cover;
      display: block;
    }

    .gallery-caption {
      padding: 16px;
      text-align: center;
      font-weight: 800;
      color: #5b6b93;
    }

    .small-muted {
      color: var(--muted);
    }

    @media (max-width: 991px) {
      .hero {
        padding: 120px 0 80px;
      }

      .hero h1 {
        font-size: 3rem;
      }

      .hero-card,
      .panel,
      .contact-card {
        padding: 28px;
      }
    }
    .map-wrap {
  border: 3px solid #e1e8f5;
  border-radius: 28px 22px 30px 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
}

.map-wrap iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}

.social-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.social-link {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #fff;
  border: 2px dashed #d7e4fa;
  color: var(--blue);
  font-size: 1.4rem;
  text-decoration: none;
  transition: .2s ease;
  box-shadow: 0 8px 18px rgba(70, 92, 141, .06);
}

.social-link:hover {
  transform: translateY(-2px);
  color: var(--pink);
  border-color: #c7d8f3;
}

.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0 0;
}

.contact-info-list li {
  padding: 10px 0;
  border-bottom: 2px dashed #dde7f3;
  font-weight: 700;
  color: var(--muted);
}

.contact-info-list li:last-child {
  border-bottom: none;
}

.site-logo-tonami {
    max-height: 90px;
    width: auto;
}

.real-gallery-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    height: 100%;
}

.real-gallery-card a {
    display: block;
}

.real-gallery-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.real-gallery-card:hover img {
    transform: scale(1.04);
}
.auth-page {
    min-height: 100vh;
    padding-top: 10px;
    padding-bottom: 60px;
}

.auth-card {
    background: #fff;
    border-radius: 28px;
    padding: 32px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.08);
}

.auth-card .form-label {
    font-weight: 700;
    margin-bottom: 8px;
}

.auth-card .form-control,
.auth-card .form-select {
    border-radius: 14px;
    min-height: 50px;
    border: 1px solid #d9d9d9;
    padding: 12px 14px;
}

.auth-card .btn-primary {
    border-radius: 16px;
    min-height: 54px;
    font-weight: 700;
}

.info-box {
    background: #f8fbff;
    border-radius: 22px;
    padding: 24px;
    height: 100%;
}

.info-box h4 {
    margin-bottom: 16px;
    font-weight: 800;
}

.page-template-page-login .site-footer,
.page-template-page-register .site-footer,
.page-template-page-account .site-footer,
.page-template-page-login #colophon,
.page-template-page-register #colophon,
.page-template-page-account #colophon {
    display: none !important;
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.slot-option {
    position: relative;
    margin: 0;
}

.slot-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.slot-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: 16px;
    border: 2px solid #d8e6f8;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.slot-option input:checked + span {
    background: #2f80ed;
    color: #fff;
    border-color: #2f80ed;
}

.booking-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.booking-item {
    background: #f8fbff;
    border-radius: 20px;
    padding: 20px;
    border: 1px solid #e6eef9;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.status-pending {
    background: #fff3cd;
    color: #8a6d3b;
}

.status-confirmed {
    background: #d1fae5;
    color: #065f46;
}

.status-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.status-completed {
    background: #e0e7ff;
    color: #3730a3;
}

.booking-cta-box{
    margin-top: 24px;
    padding: 28px 32px;
    background: #cfeff7;
    border: 1px solid #b8e4ef;
    border-radius: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.booking-cta-text{
    font-size: 1.15rem;
    color: #0f3554;
    font-weight: 500;
    line-height: 1.5;
}

.booking-cta-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    min-height: 54px;
    border-radius: 16px;
    background: #1f6fff;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    box-shadow: 0 10px 24px rgba(31, 111, 255, 0.22);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.booking-cta-btn:hover{
    background: #1557d6;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(21, 87, 214, 0.28);
}

.booking-cta-btn:focus{
    outline: none;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 767.98px){
    .booking-cta-box{
        flex-direction: column;
        align-items: stretch;
        padding: 22px 20px;
    }

    .booking-cta-btn{
        width: 100%;
    }
}

.zoom-page {
  zoom: 0.9;
}