/* ===============
CSS Custom Properties
================== */

:root {
  --base-blue: #189bbc;
  --primary-color: #189bbc;
  --primary-dark: #147a96;
  --text-color: #189bbc;
  --text-muted: #6c757d;
  --background-color: #ffffff;
  --border-color: #e9ecef;
  --hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ===============
Fonts

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 900

.noto-serif-jp-<uniquifier> {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

================== */

html,
body {
  font-family: "Noto Serif JP", serif;
  color: #000000;
  background-color: #ffffff;
  font-size: 1em;
  line-height: 1.75;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main.wrapper {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

/* Global Link Styles */
a {
  color: #000000;
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover,
a:focus {
  color: #333333;
  text-decoration: underline;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0.125em;
  line-height: 150%;
  color: var(--primary-color);
}

/* ===============
Main Banner Styling
================== */

.main-banner {
  width: 100%;
  aspect-ratio: 20/9;
  background-image: url('../img/main-banner.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Homepage specific banner styling */
.homepage-banner {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  margin-top: 0;
}

/* Ensure the homepage wrapper allows banner to start from top */
.page-template-template_home .wrapper {
  padding-top: 0;
  position: relative;
}

.main-banner-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-banner-text {
  position: absolute;
  width: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-banner-text-image {
  width: 100%;
  height: auto;
  max-width: 100%;
}

.main-banner-bottle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 75vh;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.main-banner-bottle-image {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.main-banner-mail {
  position: absolute;
  bottom: 30px;
  right: 30px;
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
  animation: float 3s ease-in-out infinite;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.main-banner-mail:hover {
  transform: translateY(-10px) scale(1.05);
  opacity: 0.9;
}

.main-banner-mail-image {
  width: 200px;
  height: auto;
  object-fit: contain;
}

/* Floating animation keyframes */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Responsive Main Banner */

@media (max-width: 2000px) {
.main-banner {
    aspect-ratio: 16/9;
  }
}

@media (max-width: 1700px) {
.main-banner {
    aspect-ratio: 8/5;
  }
}

@media (max-width: 1400px) {
.main-banner {
    aspect-ratio: 5/4;
  }
}

@media (max-width: 768px) {
  .main-banner {
    aspect-ratio: 6/7;
    overflow: visible;
  }
  
  .main-banner-bottle {
    height: 50vh;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10;
  }
  
  .main-banner-bottle-image {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
  
  .main-banner-mail {
    bottom: 15px;
    right: 15px;
  }
  
  .main-banner-mail-image {
    width: 150px;
  }
}

/* ===============
Products Styling
================== */

/* Product Cards */
.product-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid #e9ecef;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-card .card-img-top {
  height: 250px;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

.product-card:hover .card-img-top {
  opacity: 0.9;
}

/* Category Cards */
.category-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid #e9ecef;
  text-align: center;
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Product Categories Badges */
.product-categories .badge {
  font-size: 0.75rem;
  padding: 0.4em 0.6em;
}

/* Product Price Display */
.product-price {
  color: #28a745;
  font-weight: 600;
}

/* Product Variations Table */
.product-variations .table {
  margin-bottom: 0;
}

.product-variations .table th {
  background-color: #f8f9fa;
  font-weight: 600;
  border-top: none;
}

/* Product Details */
.product-details .detail-item {
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}

.product-details .detail-item h5 {
  margin-bottom: 0.5rem;
  color: #495057;
}

/* Category Navigation */
.category-navigation .category-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Breadcrumb Styling */
.breadcrumb {
  background-color: transparent;
  padding: 0;
  margin-bottom: 1rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: #6c757d;
}

/* Archive Headers */
.archive-header,
.category-header {
  text-align: center;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

.archive-title,
.category-title {
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.category-english-title {
  font-style: italic;
  font-size: 1.1rem;
}

/* Subcategory Cards */
.subcategory-card {
  border: 1px solid #e9ecef;
  transition: transform 0.2s ease;
}

.subcategory-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Product Actions */
.product-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Related Products */
.related-products {
  border-top: 1px solid #e9ecef;
  padding-top: 2rem;
}

/* Product Carousel */
.product-images-carousel {
    position: relative;
}

.product-carousel-image {
    transition: opacity 0.2s ease;
    border-radius: 0.375rem;
    height: 400px;
    object-fit: cover;
}

/* Carousel Controls */
.product-images-carousel .carousel-control-prev,
.product-images-carousel .carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    border: none;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
}

.product-images-carousel:hover .carousel-control-prev,
.product-images-carousel:hover .carousel-control-next {
    opacity: 1;
}

.product-images-carousel .carousel-control-prev:hover,
.product-images-carousel .carousel-control-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.product-images-carousel .carousel-control-prev {
    left: 10px;
}

.product-images-carousel .carousel-control-next {
    right: 10px;
}

.product-images-carousel .carousel-control-prev-icon,
.product-images-carousel .carousel-control-next-icon {
    width: 20px;
    height: 20px;
}

/* Carousel Indicators */
.product-images-carousel .carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

.product-images-carousel .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 3px;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.product-images-carousel .carousel-indicators button.active {
    background-color: white;
    opacity: 1;
    transform: scale(1.2);
}

/* Thumbnail Navigation */
.thumbnail-navigation .thumbnail-nav {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    opacity: 0.7;
}

.thumbnail-navigation .thumbnail-nav:hover {
    opacity: 1;
    border-color: #007bff;
    transform: scale(1.05);
}

.thumbnail-navigation .thumbnail-nav.active {
    opacity: 1;
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

/* Legacy Gallery Styles - Keep for backward compatibility */
.product-gallery .gallery-thumb {
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    border: 2px solid transparent;
}

.product-gallery .gallery-thumb:hover {
    opacity: 0.8;
    transform: scale(1.05);
    border-color: #007bff;
}

.product-gallery .main-gallery-image {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.product-gallery .main-gallery-image:hover {
    opacity: 0.9;
}

.product-gallery h5 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: #495057;
}/* Product Description */
.product-description .description-content {
  line-height: 1.6;
  color: #495057;
}

/* No Products Message */
.no-products {
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  padding: 3rem 2rem;
}

/* Pagination */
.pagination-wrapper .pagination {
  margin: 0;
}

.pagination-wrapper .page-link {
  color: #495057;
  border-color: #dee2e6;
}

.pagination-wrapper .page-link:hover {
  color: #000;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.pagination-wrapper .page-item.active .page-link {
  background-color: #495057;
  border-color: #495057;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .archive-title,
  .category-title {
    font-size: 2rem;
  }
  
  .product-actions {
    justify-content: center;
  }
  
  .category-navigation .category-links {
    justify-content: center;
  }
}

/* ===============
Page Title Section
================== */

.page-title-section {
  padding: 0 0 1rem 0;
}

.page-title-section .main-title {
  color: var(--primary-color);
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
  letter-spacing: 0.1em;
}

.page-title-section .english-title {
  color: #000000;
  font-size: 1.2rem;
  font-weight: 400;
  display: block;
  font-style: italic;
}

.page-title-section .category-description {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* ===============
Product Categories Layout
================== */

.product-categories-layout {
  margin: 0 auto;
}

.category-block {
  border: 1px solid var(--primary-color);
  border-radius: 20px;
  padding: 1.5rem;
  transition: border-color 0.3s ease;
  background-color: var(--background-color);
}

.category-block:hover {
  border-color: var(--primary-dark);
}

/* Category Image Container */
.category-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
}

.category-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.category-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: #f8f9fa;
  border-radius: 10px;
  color: var(--text-muted);
}

/* Category Content */
.category-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 120px;
  padding-left: 1rem;
}

.category-title {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.category-title a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.category-title a:hover {
  color: var(--primary-dark);
  text-decoration: none;
}

.category-english-title {
  color: var(--primary-color);
  font-size: 1.1rem;
  font-weight: 400;
  margin: 0;
  font-style: italic;
}

/* ===============
Homepage Product Categories Layout
================== */

.product-categories-homepage {
  margin: 0 auto;
  /* Removed all "+" border pseudo-elements */
}

.category-block-homepage {
  /* Individual bordered blocks with border radius */
  border: 1px solid var(--base-blue);
  border-radius: 15px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  background-color: transparent;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.category-block-homepage:hover {
  /* Subtle hover effect */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(24, 155, 188, 0.15);
}

/* Remove all individual item borders since we're using container approach */
.category-block-homepage:nth-child(1)::after,
.category-block-homepage:nth-child(1)::before,
.category-block-homepage:nth-child(2)::after,
.category-block-homepage:nth-child(2)::before,
.category-block-homepage:nth-child(3)::after,
.category-block-homepage:nth-child(3)::before,
.category-block-homepage:nth-child(4)::after,
.category-block-homepage:nth-child(4)::before {
  display: none;
}

.category-block-homepage .category-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.category-block-homepage .category-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.category-block-homepage .category-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  /* Removed padding-left - rely on Bootstrap column spacing */
}

.category-block-homepage .category-title {
  /* Removed margin-bottom - rely on natural spacing */
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-color); /* Blue color for main title */
}

.category-block-homepage .category-english-title {
  color: #000000; /* Black color for English title */
  font-size: 0.9rem;
  font-weight: 400;
  /* Removed margin-bottom - rely on natural spacing */
  font-style: italic;
}

.category-block-homepage .category-description {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.4;
  /* Removed margin-bottom - rely on natural spacing */
}

.category-block-homepage .category-button .btn {
  /* Footer button style but tighter */
  background-color: var(--primary-color);
  color: #ffffff;
  text-decoration: none;
  padding: 0.5rem 1.5rem; /* Tighter than footer button */
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 500;
  border: none;
  transition: all 0.3s ease;
  display: inline-block;
}

.category-block-homepage .category-button .btn:hover {
  background-color: var(--primary-dark);
  color: #ffffff;
  text-decoration: none;
  box-shadow: var(--hover-shadow);
}

/* ===============
News and Events Section (Homepage)
================== */

.news-events-block {
  padding: 1.5rem;
  height: 100%;
}

.news-events-title {
  text-align: center;
  border-bottom: 2px solid var(--base-blue);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.news-events-title .main-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
  margin: 0;
  line-height: 1.2;
}

.news-events-title .english-subtitle {
  font-size: 0.9rem;
  color: #000000;
  font-style: italic;
  display: block;
  margin-top: 0.25rem;
}

/* News Styles (No thumbnails) */
.news-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.news-item:last-child {
  border-bottom: none;
}

.news-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.news-title a {
  font-size: 0.9rem;
  color: #000000;
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.news-title a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

/* Events Styles (With thumbnails) */
.event-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.event-item:last-child {
  border-bottom: none;
}

.event-content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.event-thumbnail {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 8px;
}

.event-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-info {
  flex: 1;
}

.event-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.event-title a {
  font-size: 0.9rem;
  color: #000000;
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.event-title a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

/* News and Events Button */
.news-events-button {
  text-align: center;
}

.news-events-button .btn {
  font-size: 0.8rem;
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  border-color: var(--primary-color);
  color: var(--primary-color);
  transition: all 0.3s ease;
}

.news-events-button .btn:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

/* ===============
Homepage Events List Layout
================== */

.events-list-homepage {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.event-item-homepage {
  background: white;
  border: 1px solid var(--primary-color);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.event-item-homepage:hover {
  border-color: var(--primary-dark);
  box-shadow: 0 4px 16px rgba(24, 155, 188, 0.15);
  transform: translateY(-2px);
}

.event-image-container-homepage {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  height: 150px;
}

.event-image-homepage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.event-item-homepage:hover .event-image-homepage {
  transform: scale(1.05);
}

.event-image-placeholder-homepage {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  border-radius: 8px;
}

.event-image-placeholder-homepage .placeholder-icon {
  opacity: 0.6;
}

.event-content-homepage {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.event-title-homepage {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.event-title-homepage a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.event-title-homepage a:hover {
  color: var(--primary-color);
  text-decoration: none;
}

.event-details-table-homepage {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

.event-detail-row-homepage {
  display: flex;
  align-items: flex-start;
  min-height: 2rem;
}

.event-detail-row-homepage .detail-title {
  flex: 0 0 80px;
  background: var(--primary-color);
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  margin-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-detail-row-homepage .detail-description {
  flex: 1;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.4;
  display: flex;
  align-items: center;
}

.no-events-homepage {
  text-align: center;
  padding: 2rem;
  color: #666;
  font-style: italic;
}

/* ===============
Product Block Layout (Category Pages)
================== */

.product-block {
  border: 1px solid var(--primary-color);
  border-radius: 20px;
  padding: 1.5rem;
  transition: border-color 0.3s ease;
  background-color: var(--background-color);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-block:hover {
  border-color: var(--primary-dark);
}

/* Product Image Container */
.product-image-container {
  width: 100%;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 10px;
}

.product-block-image {
  width: 100%;
  height: 200px;
  object-fit: contain;
  border-radius: 10px;
}

/* Product Content */
.product-block-content {
  width: 100%;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Equal Height Rows */
.row-equal-height {
  display: flex;
  flex-wrap: wrap;
}

.row-equal-height > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.product-block-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  padding: 0;
  line-height: 1.3;
  text-align: center;
}

.product-block-title a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.product-block-title a:hover {
  color: var(--primary-dark);
  text-decoration: none;
}

.product-block-excerpt {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

/* ===============
Category Single Page Styling
================== */

/* Category Title Block with Image */
.category-title-block {
  background-color: var(--background-color);
  border-radius: 20px;
}

.category-title-content {
  max-width: 100%;
}

.category-block-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
  margin: 0;
  line-height: 1.3;
}

.category-block-subtitle {
  display: block;
  font-size: 1rem;
  color: var(--primary-color);
  font-weight: 400;
  margin-top: 0.5rem;
  opacity: 0.8;
}

.category-block-description {
  color: var(--text-color);
  font-size: 0.9rem;
  line-height: 1.5;
}

.category-title-image {
  max-width: 150px;
}

.category-single-image {
  width: auto;
  height: 120px;
  max-width: 150px;
  border-radius: 10px;
  /* box-shadow: 0 2px 10px rgba(24, 155, 188, 0.15); */
  object-fit: contain;
}

.category-image-placeholder {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--light-gray);
  border-radius: 10px;
  color: var(--text-muted);
}

/* Category Navigation Buttons */
.other-categories-navigation {
  margin-bottom: 1.5rem;
}

.category-nav-button {
  display: block;
  width: 100%;
  padding: 0.5rem 1.5rem;
  background-color: transparent;
  border: 1px solid var(--primary-color);
  border-radius: 8px;
  color: var(--primary-color);
  text-decoration: none;
  text-align: center;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s ease;
  min-height: 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.category-nav-button:hover {
  background-color: var(--primary-color);
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(24, 155, 188, 0.3);
}

.category-nav-english {
  display: block;
  font-size: 0.85rem;
  opacity: 0.8;
  margin-top: 0.25rem;
}

/* Subcategory Sections */
.subcategory-section {
  margin-top: 3rem;
  margin-bottom: 2rem;
}

.subcategory-title-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
}

.subcategory-title {
  color: var(--base-blue);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.subcategory-english {
  color: #000;
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
}

/* Responsive adjustments for category single page */
@media (max-width: 768px) {
  
  .category-title-block .row {
    flex-direction: column;
    text-align: center;
  }
  
  .category-title-block .col-md-6 {
    margin-bottom: 1rem;
    justify-content: center !important;
  }
  
  .category-block-title {
    font-size: 1.25rem;
  }
  
  .category-block-subtitle {
    font-size: 0.9rem;
  }
  
  .category-title-image {
    max-width: 100px;
  }
  
  .category-single-image {
    height: 80px;
    max-width: 100px;
  }
  
  .category-image-placeholder {
    width: 80px;
    height: 80px;
  }
  
  .category-nav-button {
    padding: 0.4rem 1rem;
    min-height: 40px;
    font-size: 0.9rem;
  }
  
  /* Homepage Events Mobile Styles */
  .events-list-homepage {
    gap: 1rem;
  }
  
  .event-item-homepage {
    padding: 1rem;
  }
  
  .event-image-container-homepage {
    height: 120px;
    margin-bottom: 1rem;
  }
  
  .event-title-homepage {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
  }
  
  .event-detail-row-homepage .detail-title {
    flex: 0 0 70px;
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
  }
  
  .event-detail-row-homepage .detail-description {
    font-size: 0.85rem;
    padding: 0.3rem 0;
  }
}

/* Responsive Design for Category Layout */
@media (max-width: 768px) {
  .page-title-section .main-title {
    font-size: 1.7rem;
  }
  
  .page-title-section .english-title {
    font-size: 1rem;
  }
  
  .category-block {
    padding: 1rem;
  }
  
  .category-content {
    padding-left: 0.5rem;
    height: auto;
    margin-top: 1rem;
  }
  
  .category-image-container {
    height: 100px;
  }
  
  .category-title {
    font-size: 1.25rem;
  }
  
  .category-english-title {
    font-size: 1rem;
  }
  
  /* Product Block Responsive */
  .product-block {
    padding: 1rem;
  }
  
  .product-block-image {
    height: 180px;
  }
  
  .product-block-title {
    font-size: 1.1rem;
  }
  
  /* Subcategory Responsive */
  .subcategory-title-header {
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
  }
  
  .subcategory-title {
    font-size: 1.3rem;
  }
  
  .subcategory-english {
    font-size: 0.9rem;
  }
}

@media (max-width: 576px) {
  .category-block .row {
    flex-direction: column;
    text-align: center;
  }
  
  .category-content {
    padding-left: 0;
    margin-top: 1rem;
  }
  
  /* Product Block Mobile */
  .product-block {
    padding: 1rem;
  }
  
  .product-block-image {
    height: 160px;
  }
  
  .product-block-title {
    font-size: 1rem;
  }
}

/* ===============
Header Styling
================== */

/* Floating header for homepage banner */
.page-template-template_home .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: transparent;
  box-shadow: none;
}

/* Ensure content flows under fixed header */
.page-template-template_home .wrapper {
  padding-top: 0;
}

/* Header Logo */
.header-logo {
  width: 300px;
  height: auto;
}

/* Header Button Wrapper */
.header-button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  height: 65px; /* Fixed height to ensure alignment */
}

/* Cart Button */
.cart-button {
  background-color: #cce2f0;
  color: var(--text-color);
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-button:hover {
  background-color: #a0c4d1;
  color: var(--text-color);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Menu Toggle Button */
.menu-toggle {
  background-color: var(--primary-dark);
  color: white;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-toggle:hover {
  background-color: #8bb4c2;
  color: white;
  transform: translateY(-1px);
}

/* Button Label */
.button-label {
  font-size: 0.8rem;
  color: var(--base-blue);
  font-weight: 500;
  text-align: center;
  height: 16px; /* Fixed height for consistent spacing */
  line-height: 16px;
}

/* ===============
Navigation Enhancement - Cross-page Compatibility
================== */

/* Ensure header elements are properly positioned */
.site-header {
  position: relative;
  z-index: 1000;
}

.header-button-wrapper {
  position: relative;
  z-index: 1001;
}

/* Menu toggle button styling */
.menu-toggle {
  background: none;
  border: none;
  color: var(--primary-color);
  padding: 0.5rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.menu-toggle:hover {
  color: var(--text-color);
}

/* Ensure mobile navigation container is properly positioned */
#mobileNav {
  position: relative;
  z-index: 1002;
  width: 100%;
}

/* Force visibility when Bootstrap show class is applied */
#mobileNav.show .mobile-nav,
#mobileNav.collapsing .mobile-nav {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===============
Mobile Navigation Dropdown - Enhanced Readability
================== */
.mobile-nav {
  /* Positioning */
  position: absolute !important;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99999 !important;
  
  /* Light Semi-Transparent Background */
  background: rgba(20, 122, 150, 0.3) !important;
  backdrop-filter: blur(25px) saturate(100%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(100%) !important;
  
  /* No border */
  border: none !important;
  border-radius: 12px !important;
  
  /* Remove box shadow */
  box-shadow: none !important;
  
  /* Spacing */
  padding: 1.5rem !important;
  margin-top: 0.5rem !important;
  
  /* Remove default background */
  background-image: none !important;
  
  /* Ensure visibility */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  
  /* Smooth transition */
  transform: translateY(0) !important;
  transition: all 0.25s ease !important;
}

/* Light arrow indicators */
.mobile-nav::before {
  border-bottom-color: rgba(20, 122, 150, 0.3) !important;
  z-index: 99998 !important;
  filter: none !important;
}

.mobile-nav::after {
  border-bottom-color: rgba(20, 122, 150, 0.3) !important;
  z-index: 99999 !important;
  filter: none !important;
}

.mobile-nav .nav-link {
  color: var(--primary-color) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  position: relative !important;
  z-index: 100000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: all 0.2s ease !important;
  padding: 0.75rem 1rem !important;
  margin: 0.4rem 0 !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  
  /* Soft shadow for depth */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.mobile-nav .nav-link:hover {
  background: var(--primary-color) !important;
  color: white !important;
  border: none !important;
  outline: none !important;
  transform: none !important;
  
  /* Remove box shadow */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Override Bootstrap collapse animations */
#mobileNav.collapse {
  transition: none !important;
}

#mobileNav.collapsing {
  transition: none !important;
  height: auto !important;
}

#mobileNav.show {
  transition: none !important;
}

/* Remove any transform or opacity animations */
#mobileNav * {
  transition: none !important;
}

/* Ensure the navbar container can accommodate floating dropdown */
.navbar {
  position: relative !important;
  z-index: 100000 !important;
  overflow: visible !important;
}

/* Ensure navbar collapse container doesn't hide dropdown */
.navbar-collapse {
  position: relative !important;
  overflow: visible !important;
  z-index: 100001 !important;
}

/* Remove animation for better readability */
@keyframes glassGlow {
  0% {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
}

/* Mobile navigation - Light Theme */
@media (max-width: 768px) {
  .mobile-nav {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(25px) saturate(100%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(100%) !important;
    border: none !important;
    
    /* Remove box shadow */
    box-shadow: none !important;
  }
  
  .mobile-nav .nav-link {
    color: var(--primary-color) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  }
  
  .mobile-nav .nav-link:hover {
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  }
}

/* ===============
Footer Styling
================== */

.site-footer {
  background-color: var(--background-color);
  border-top: 1px solid var(--primary-color);
  padding: 3rem 0 2rem;
}

/* Footer Logo */
.footer-logo {
  width: 200px;
  height: auto;
  margin-bottom: 1rem;
}

/* Footer Address */
.footer-address {
  font-size: 0.9rem;
  color: var(--base-blue);
  line-height: 1.5;
}

.footer-address p {
  margin-bottom: 0.25rem;
}

.footer-address a,
.footer-address a[href^="tel"] {
  font-size: 0.9rem;
  color: var(--base-blue);
  line-height: 1.5;
}

/* Footer CTA Button */
.footer-cta-button {
  background-color: var(--primary-color);
  color: #ffffff;
  text-decoration: none;
  padding: 0.75rem 2rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-block;
}

.footer-cta-button:hover {
  background-color: var(--primary-dark);
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--hover-shadow);
}

/* Footer Navigation */
.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav-list li {
  margin-bottom: 0.75rem;
}

.footer-nav-list a {
  color: var(--base-blue);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.footer-nav-list a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* Social Media Section */
.footer-social .follow-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--base-blue);
  margin-bottom: 1rem;
}

.social-icons {
  display: flex;
  gap: 1rem;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--base-blue);
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-icon:hover {
  color: var(--primary-dark);
  text-decoration: none;
  transform: scale(1.1);
}

.social-icon svg {
  width: 20px;
  height: 20px;
}

/* Footer Bottom Section */
.footer-bottom {
  border-top: 1px solid var(--border-color);
  padding-top: 2rem;
  margin-top: 2rem;
  text-align: center;
}

.disclaimer-text {
  font-size: 0.8rem;
  color: var(--base-blue);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

/* Policy Buttons */
.policy-buttons {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 100%;
}

.policy-button {
  background-color: transparent;
  color: var(--base-blue);
  text-decoration: none;
  padding: 0.75rem 1rem;
  border: 1px solid var(--base-blue);
  border-radius: 25px;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  flex: 1;
  text-align: center;
}

.policy-button:hover {
  background-color: var(--primary-color);
  color: #ffffff;
  text-decoration: none;
  border-color: var(--primary-color);
  transform: translateY(-1px);
}

/* Footer Responsive */
@media (max-width: 768px) {
  .site-footer {
    padding: 2rem 0 1.5rem;
  }
  
  .footer-logo {
    width: 150px;
  }
  
  .footer-cta-button {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .policy-buttons {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .policy-button {
    flex: none;
    display: block;
    text-align: center;
  }
  
  .social-icons {
    justify-content: center;
  }
  
  .disclaimer-text {
    font-size: 0.75rem;
  }
}

/* ===============
Product Single Page Styling
================== */

/* Product Image Container */
.product-single-image-container {
  border: 1px solid var(--primary-color);
  border-radius: 30px;
  padding: 1.5rem;
  background-color: var(--background-color);
}

/* Product Gallery Wrapper */
.product-gallery-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

/* Product Gallery Container */
.product-gallery-container {
  position: relative;
  width: 100%;
  height: auto;
  background-color: var(--light-gray);
  border-radius: 15px;
}

/* Product Gallery Slides */
.product-gallery-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 1;
  will-change: opacity; /* Optimize for animations */
}

.product-gallery-slide.active {
  opacity: 1;
  position: relative;
  z-index: 2;
}

.product-single-image {
  width: 100%;
  height: auto;
  border-radius: 15px;
  object-fit: contain;
  display: block;
  max-width: 100%;
  height: auto;
}

/* Gallery Navigation Arrows */
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  opacity: 0.7;
}

.gallery-nav:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.2);
}

.gallery-nav-prev {
  left: -20px !important;
}

.gallery-nav-next {
  right: -20px !important;
}

.gallery-nav svg {
  width: 80px;
  height: 80px;
  color: var(--base-blue);
  transition: color 0.3s ease;
}

.gallery-nav:hover svg {
  color: var(--primary-color);
}

/* Hide navigation on single image */
.product-gallery-wrapper:not([data-multiple-images]) .gallery-nav {
  display: none;
}

.product-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  background-color: var(--light-gray);
  border-radius: 15px;
  color: var(--text-muted);
}

/* Product Title and Variations Table */
.product-title-variations-table {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 1rem;
}

.title-section {
  flex: 1;
}

.product-single-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 0;
  line-height: 1.3;
}

.variations-section {
  flex: 0 0 auto;
  width: auto;
  min-width: fit-content;
  text-align: right;
}

.product-variations-table {
  padding: 0;
  display: inline-block;
  width: auto;
}

.product-variation-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  padding: 0;
  margin-bottom: 0.5rem;
  white-space: nowrap;
}

.product-variation-row:last-child {
  margin-bottom: 0;
}

.variation-size {
  font-size: 0.9rem;
  color: #333;
  font-weight: 400;
  text-align: right;
}

.variation-price {
  font-size: 1.2rem;
  color: #000;
  font-weight: bold;
  text-align: right;
}

/* Product Description */
.product-single-description {
  color: #000;
  font-size: 1rem;
  line-height: 1.6;
}

.product-single-description p {
  color: #000;
  margin-bottom: 1rem;
}

/* Product Details Table */
.product-details-table {
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 0.6rem;
  align-items: start;
}

.product-detail-row {
  display: contents;
}

.product-detail-row:last-child {
  margin-bottom: 0;
}

.detail-title {
  background-color: var(--primary-color);
  color: white;
  padding: 0.15rem 0.7rem;
  font-weight: 500;
  border-radius: 6px;
  font-size: 0.9rem;
  white-space: nowrap;
  align-self: start;
  width: 100%;
  text-align: center;
}

.detail-description {
  color: #333;
  padding: 0.4rem 0;
  font-size: 0.95rem;
  line-height: 1.4;
  align-self: start;
}

/* Shop Buttons */
.product-shop-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.product-shop-button {
  display: block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background-color: transparent;
  border: 1px solid var(--primary-color);
  border-radius: 8px;
  color: var(--primary-color);
  text-decoration: none;
  text-align: center;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.product-shop-button:hover {
  background-color: var(--primary-color);
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(24, 155, 188, 0.3);
}

/* Back to Products Button */
.product-back-button {
  background-color: var(--primary-color);
  color: #ffffff;
  text-decoration: none;
  padding: 0.75rem 5rem;
  border-radius: 15px;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-block;
  border: none;
}

.product-back-button:hover {
  background-color: var(--primary-dark);
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(24, 155, 188, 0.3);
}

/* Responsive Design for Product Single Page */
@media (max-width: 768px) {
  .product-single-image-container {
    padding: 1rem;
    border-radius: 20px;
  }
  
  /* Gallery Navigation for Mobile */
  .gallery-nav {
    width: 60px;
    height: 60px;
    opacity: 0.9;
  }
  
  .gallery-nav svg {
    width: 60px;
    height: 60px;
  }
  
  .gallery-nav-prev {
    left: 3px;
  }
  
  .gallery-nav-next {
    right: 3px;
  }
  
  .product-title-variations-table {
    flex-direction: column;
    gap: 1rem;
  }
  
  .product-single-title {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
  }
  
  .variations-section {
    width: auto;
    text-align: right;
  }
  
  .product-variations-table {
    padding: 0;
    display: inline-block;
  }
  
  .detail-title {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
  }
  
  .detail-description {
    padding: 0.4rem 0;
    font-size: 0.9rem;
  }
  
  .product-detail-row {
    margin-bottom: 0.4rem;
  }
}

/* ===============
Sitemap Styling
================== */

.sitemap-layout {
  margin-top: 2rem;
}

.sitemap-item {
  background-color: var(--background-color);
  border: 1px solid var(--primary-color);
  border-radius: 15px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  height: 100%;
}

.sitemap-item:hover {
  border-color: var(--primary-dark);
  box-shadow: 0 4px 15px rgba(24, 155, 188, 0.2);
  transform: translateY(-2px);
}

.sitemap-content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.sitemap-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(24, 155, 188, 0.1);
  border-radius: 10px;
  margin-top: 0.25rem;
}

.sitemap-text {
  flex: 1;
}

.sitemap-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
}

.sitemap-title a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.sitemap-title a:hover {
  color: var(--primary-dark);
  text-decoration: none;
}

.sitemap-english {
  margin: 0;
  font-size: 0.9rem;
  color: var(--primary-color);
  font-style: italic;
  opacity: 0.8;
}

/* Sitemap Section Headers */
.sitemap-section {
  margin-top: 3rem;
}

.sitemap-section-title {
  color: var(--primary-color);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary-color);
}

.sitemap-section-english {
  font-size: 1rem;
  font-weight: 400;
  color: var(--primary-color);
  opacity: 0.8;
  font-style: italic;
}

/* Responsive Sitemap */
@media (max-width: 768px) {
  .sitemap-item {
    padding: 1rem;
    border-radius: 10px;
  }
  
  .sitemap-content {
    gap: 0.75rem;
  }
  
  .sitemap-icon {
    width: 35px;
    height: 35px;
  }
  
  .sitemap-title {
    font-size: 1rem;
  }
  
  .sitemap-english {
    font-size: 0.85rem;
  }
  
  .sitemap-section-title {
    font-size: 1.3rem;
  }
}

/* ===============
Gravity Forms Styling
================== */

/* Submit Button Styling */
.gform_button,
.gform_button.button,
input[type="submit"].gform_button {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
  text-decoration: none;
  padding: 0.75rem 2rem !important;
  border-radius: 50px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  display: inline-block;
  border: none !important;
  cursor: pointer;
  font-family: "Noto Serif JP", serif !important;
  letter-spacing: 0.05em;
  box-shadow: none !important;
  text-shadow: none !important;
}

.gform_button:hover,
.gform_button.button:hover,
input[type="submit"].gform_button:hover {
  background-color: var(--primary-dark) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--hover-shadow) !important;
}

.gform_button:focus,
.gform_button.button:focus,
input[type="submit"].gform_button:focus {
  background-color: var(--primary-dark) !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(24, 155, 188, 0.3) !important;
}

/* Form Footer Styling */
.gform_footer.gform-footer {
  text-align: center !important;
  padding: 1rem 0 1rem 0 !important;
  border-top: none !important;
  margin-top: 1.5rem !important;
}

/* Additional Form Field Styling */
.gform_wrapper .gfield_label {
  color: var(--primary-color) !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper textarea {
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 0.75rem !important;
  font-family: "Noto Serif JP", serif !important;
  transition: border-color 0.3s ease !important;
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper textarea:focus {
  border-color: var(--primary-color) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(24, 155, 188, 0.1) !important;
}

/* Required Field Asterisk */
.gform_wrapper .gfield_required {
  color: #dc3545 !important;
}

/* Error Styling */
.gform_wrapper .gfield_error .gfield_label {
  color: #dc3545 !important;
}

.gform_wrapper .validation_error {
  background-color: #f8d7da !important;
  border: 1px solid #f5c6cb !important;
  color: #721c24 !important;
  border-radius: 8px !important;
  padding: 1rem !important;
  margin-bottom: 1rem !important;
}

/* Success Message */
.gform_confirmation_message {
  background-color: #d4edda !important;
  border: 1px solid #c3e6cb !important;
  color: #155724 !important;
  border-radius: 8px !important;
  padding: 1rem !important;
  margin: 1rem 0 !important;
  text-align: center !important;
}

/* ===============
Homepage Specific Sections
================== */

/* Operating Hours Section */
.operating-hours-icon {
  width: 24px;
  height: 24px;
  margin-right: 0.5rem;
}

.operating-hours-header {
  display: flex;
  flex-direction: column;
}

.operating-hours-content {
  text-align: left;
}

.operating-hours-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  line-height: 1.2;
}

.operating-hours-time {
  font-size: 1.3rem;
  font-weight: bold;
  color: #000;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.operating-hours-notice {
  font-size: 0.75rem;
  color: #dc3545;
  margin-bottom: 0;
  line-height: 1.3;
}

/* Since 1756 Section */
.since-1756-image {
  width: 300px;
  height: auto;
  max-width: 100%;
}

/* Follow Us Homepage Section */
.follow-us-section {
  padding: 2rem 0;
}

.follow-us-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--base-blue);
  margin-bottom: 1.5rem;
  letter-spacing: 0.1em;
}

.social-icons-homepage {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.social-icon-homepage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  color: var(--base-blue);
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 50%;
  background-color: rgba(24, 155, 188, 0.1);
}

.social-icon-homepage:hover {
  color: var(--primary-dark);
  text-decoration: none;
  transform: scale(1.1);
  background-color: rgba(24, 155, 188, 0.2);
}

.social-icon-homepage svg {
  width: 32px;
  height: 32px;
}

/* Responsive adjustments for homepage sections */
@media (max-width: 768px) {
  .operating-hours-icon {
    width: 20px;
    height: 20px;
  }
  
  .operating-hours-time {
    font-size: 1.1rem;
  }
  
  .operating-hours-notice {
    font-size: 0.7rem;
  }
  
  .since-1756-image {
    width: 250px;
  }
  
  .follow-us-title {
    font-size: 1.3rem;
  }
  
  .social-icons-homepage {
    gap: 1.5rem;
  }
  
  .social-icon-homepage {
    width: 50px;
    height: 50px;
  }
  
  .social-icon-homepage svg {
    width: 28px;
    height: 28px;
  }
}

/* ==================== Events Archive Styles ==================== */

.events-archive .events-grid-rows {
    gap: 1.5rem;
}

.event-item-archive {
    background: white;
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    height: 100%;
    width: 100%;
}

.event-item-archive:hover {
    border-color: var(--primary-dark);
    box-shadow: 0 4px 16px rgba(24, 155, 188, 0.15);
    transform: translateY(-2px);
}

.event-image-container-archive {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    height: 120px;
}

.event-image-archive {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.event-item-archive:hover .event-image-archive {
    transform: scale(1.05);
}

.event-image-placeholder-archive {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 0.8rem;
    border-radius: 8px;
}

.event-image-placeholder-archive .placeholder-icon {
    margin-bottom: 0.25rem;
    opacity: 0.6;
}

.event-content-archive {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.event-title-archive {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #333;
    line-height: 1.3;
}

.event-title-archive a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.event-title-archive a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

.event-details-table-archive {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.event-detail-row-archive {
    display: flex;
    align-items: flex-start;
    min-height: 1.6rem;
}

.event-detail-row-archive .detail-title {
    flex: 0 0 50px;
    background: var(--primary-color);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-detail-row-archive .detail-description {
    flex: 1;
    padding: 0.25rem 0;
    font-size: 0.8rem;
    color: #555;
    line-height: 1.3;
    display: flex;
    align-items: center;
}

.event-excerpt-archive {
    color: #666;
    line-height: 1.5;
    font-size: 0.85rem;
    margin-top: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.events-pagination {
    text-align: center;
}

.events-pagination .page-numbers {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    margin: 0 0.25rem;
    border: 1px solid #dee2e6;
    color: var(--primary-color);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.events-pagination .page-numbers:hover,
.events-pagination .page-numbers.current {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.events-pagination .page-numbers.prev,
.events-pagination .page-numbers.next {
    font-weight: 500;
}

.no-events {
    padding: 3rem 0;
    color: #666;
    font-size: 1.1rem;
}

/* ==================== Events Single Page Styles ==================== */

.event-header-section {
    margin-bottom: 3rem;
}

.event-featured-image-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.event-image-single {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.event-image-single:hover {
    transform: scale(1.02);
}

.event-image-placeholder-single {
    width: 100%;
    height: 350px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 1rem;
    border-radius: 8px;
}

.event-image-placeholder-single .placeholder-icon {
    margin-bottom: 0.5rem;
    opacity: 0.6;
}

.event-title-single {
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.event-meta-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.event-meta-card {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.event-meta-card:hover {
    border-color: var(--base-blue);
    box-shadow: 0 4px 16px rgba(24, 155, 188, 0.1);
}

.event-meta-card .meta-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--base-blue-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    color: var(--base-blue);
}

.event-meta-card .meta-content {
    flex: 1;
}

.event-meta-card .meta-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--base-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.event-meta-card .meta-value {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}

.event-excerpt-single {
    color: #666;
    line-height: 1.7;
    font-size: 1.1rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid var(--base-blue);
    margin-top: 1rem;
}

.event-content-section {
    margin: 3rem 0;
}

.event-content-single {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    max-width: 800px;
    margin: 0 auto;
}

.event-content-single p {
    margin-bottom: 1.5rem;
}

.event-content-single h2,
.event-content-single h3,
.event-content-single h4 {
    color: #333;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.event-content-single h2 {
    font-size: 1.75rem;
    border-bottom: 2px solid var(--base-blue);
    padding-bottom: 0.5rem;
}

.event-content-single h3 {
    font-size: 1.5rem;
    color: var(--base-blue);
}

.event-navigation-section {
    margin-top: 4rem;
}

.event-nav-container {
    max-width: 800px;
    margin: 0 auto;
}

.event-nav-card {
    display: block;
    padding: 1.5rem;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.event-nav-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(24, 155, 188, 0.15);
    border-color: var(--base-blue);
    color: inherit;
    text-decoration: none;
}

.event-nav-card .nav-direction {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--base-blue);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-nav-card.prev-event .nav-direction {
    justify-content: flex-start;
}

.event-nav-card.next-event .nav-direction {
    justify-content: flex-end;
}

.event-nav-card .nav-arrow {
    margin: 0 0.5rem;
    transition: transform 0.3s ease;
}

.event-nav-card:hover .nav-arrow {
    transform: translateX(4px);
}

.event-nav-card.prev-event:hover .nav-arrow {
    transform: translateX(-4px);
}

.event-nav-card .nav-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    display: block;
}

.back-to-events-section {
    margin-top: 3rem;
}

.back-to-events-btn {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--base-blue);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(24, 155, 188, 0.3);
}

.back-to-events-btn:hover {
    background: var(--base-blue-dark);
    color: white;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(24, 155, 188, 0.4);
}

.back-to-events-btn .back-arrow-icon {
    margin-right: 0.75rem;
}

/* ==================== News Archive Styles ==================== */

.news-archive .news-list-archive {
    max-width: 800px;
    margin: 0 auto;
}

.news-item-archive {
    border-bottom: 1px solid #e9ecef;
    padding: 1.5rem 0;
    transition: background-color 0.3s ease;
}

.news-item-archive:last-child {
    border-bottom: none;
}

.news-item-archive:hover {
    background-color: #f8f9fa;
    margin: 0 -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 8px;
}

.news-date-archive {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--base-blue);
    margin-bottom: 0.5rem;
}

.news-title-archive {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.news-title-archive a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.news-title-archive a:hover {
    color: var(--base-blue);
}

.news-excerpt-archive {
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
}

.news-pagination {
    text-align: center;
}

.news-pagination .page-numbers {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    margin: 0 0.25rem;
    border: 1px solid #dee2e6;
    color: var(--base-blue);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.news-pagination .page-numbers:hover,
.news-pagination .page-numbers.current {
    background-color: var(--base-blue);
    color: white;
    border-color: var(--base-blue);
}

.news-pagination .page-numbers.prev,
.news-pagination .page-numbers.next {
    font-weight: 500;
}

.no-news {
    padding: 3rem 0;
    color: #666;
    font-size: 1.1rem;
}

/* ==================== Events & News Responsive Styles ==================== */

@media (max-width: 768px) {
    .events-archive .events-grid {
        gap: 1rem;
    }
    
    .events-archive .events-grid-rows {
        gap: 1rem;
    }
    
    .event-item-archive {
        padding: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .event-image-container-archive {
        height: 100px;
        margin-bottom: 1rem;
    }
    
    .event-title-archive {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .event-detail-row-archive .detail-title {
        flex: 0 0 45px;
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
        margin-right: 0.5rem;
    }
    
    .event-detail-row-archive .detail-description {
        font-size: 0.75rem;
        padding: 0.2rem 0;
    }
    
    .event-excerpt-archive {
        font-size: 0.8rem;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
    
    .event-header-section {
        margin-bottom: 2rem;
    }
    
    .event-featured-image-container {
        margin-bottom: 2rem;
    }
    
    .event-image-single,
    .event-image-placeholder-single {
        height: 250px;
    }
    
    .event-title-single {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }
    
    .event-meta-cards {
        gap: 0.75rem;
    }
    
    .event-meta-card {
        padding: 0.75rem;
    }
    
    .event-meta-card .meta-icon {
        width: 35px;
        height: 35px;
        margin-right: 0.75rem;
    }
    
    .event-content-single {
        font-size: 1rem;
        line-height: 1.7;
    }
    
    .event-navigation-section {
        margin-top: 2rem;
    }
    
    .event-nav-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .event-nav-card .nav-direction {
        font-size: 0.85rem;
    }
    
    .event-nav-card .nav-title {
        font-size: 1rem;
    }
    
    .back-to-events-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .news-date-archive {
        margin-bottom: 1rem;
    }
    
    .news-title-archive {
        font-size: 1.1rem;
    }
}

/* ===============
Company Template Styles
================== */

/* Company Information Table */
.company-table-wrapper {
  width: 100%;
}

.company-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--primary-color);
}

.company-table tbody tr {
  border-bottom: 1px solid var(--primary-color);
}

.company-table .company-label {
  width: 150px;
  padding: 22px 0;
  font-weight: bold;
  color: #000;
  vertical-align: top;
}

.company-table .company-value {
  padding: 22px 0;
  color: #000;
  font-weight: normal;
  vertical-align: top;
}

/* Access Section */
.access-section {
  margin-top: 4rem;
}

/* Location Information (using event detail styles) */
.location-info-wrapper {
  margin-bottom: 2rem;
}

.location-detail-row {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.location-detail-row .detail-title {
  flex: 0 0 120px;
  background: var(--primary-color);
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  margin-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.location-detail-row .detail-description {
  flex: 1;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.4;
  display: flex;
  align-items: center;
  background: white;
  padding-left: 1rem;
}

/* Google Map */
.google-map-wrapper {
  width: 100%;
  aspect-ratio: 5 / 3;
  height: auto;
  border: 1px solid var(--primary-color);
  overflow: hidden;
  max-height: 800px; /* optional cap to avoid extremely tall maps on very large screens */
}

.google-map {
  width: 100%;
  height: 100%;
  border: none;
}

/* Responsive adjustments for company template */
@media (max-width: 768px) {
  .company-table .company-label {
    width: 120px;
    padding: 20px 0;
    font-size: 0.9rem;
  }
  
  .company-table .company-value {
    padding: 20px 0;
    font-size: 0.9rem;
  }
  
  .location-detail-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .location-detail-row .detail-title {
    flex: none;
    margin-right: 0;
    margin-bottom: 0.5rem;
    width: 100%;
  }
  
  .location-detail-row .detail-description {
    padding-left: 0;
    width: 100%;
  }
  
  .google-map-wrapper {
    height: 300px;
  }
}

/* ===============
Where to Buy Template Styles
================== */

/* Store Navigation Buttons */
.store-navigation {
  margin-bottom: 2rem;
}

.store-nav-btn {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: white;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  font-weight: 500;
  transition: all 0.3s ease;
}

.store-nav-btn:hover {
  background: var(--primary-color);
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Store Section Headers */
.store-section {
  margin-bottom: 3rem;
  scroll-margin-top: 100px; /* For smooth anchor scrolling */
}

.store-section-header {
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.store-section-title {
  color: var(--primary-color);
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0;
  line-height: 1.2;
}

.store-section-english {
  color: #666;
  font-size: 1rem;
  font-weight: normal;
  text-align: right;
  display: block;
}

/* Store Tables */
.store-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.store-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

/* Table Headers */
.store-table thead th {
  background: var(--primary-color);
  color: white;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  border: none;
}

.store-header-name {
  width: 25%;
}

.store-header-address {
  width: 50%;
}

.store-header-phone {
  width: 25%;
}

/* Table Data Rows */
.store-table tbody td {
  padding: 10px 15px;
  color: #000;
  text-align: left;
  border-bottom: 1px dashed var(--primary-color);
  border-left: none;
  border-right: none;
  border-top: none;
}

.store-table tbody tr:last-child td {
  border-bottom: none;
}

/* No stores message */
.no-stores-message,
.no-stores-found {
  text-align: center;
  padding: 2rem;
  color: #666;
  font-style: italic;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 2rem 0;
}

/* Responsive adjustments for where-to-buy template */
@media (max-width: 768px) {
  .store-section-title {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
  }
  
  .store-section-english {
    text-align: left;
    font-size: 0.9rem;
  }
  
  .store-nav-btn {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }
  
  .store-table thead th {
    padding: 8px 10px;
    font-size: 0.9rem;
  }
  
  .store-table tbody td {
    padding: 8px 10px;
    font-size: 0.9rem;
  }
  
  .store-header-name,
  .store-header-phone {
    width: 30%;
  }
  
  .store-header-address {
    width: 40%;
  }
}

@media (max-width: 576px) {
  .store-table {
    font-size: 0.8rem;
  }
  
  .store-table thead th,
  .store-table tbody td {
    padding: 6px 8px;
  }
  
  .store-section-title {
    font-size: 1.2rem;
  }
}

/* ===============
Contact Page Styles
================== */

/* Contact Information List */
.contact-info-section {
  margin-bottom: 2rem;
}

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

.contact-info-list li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  color: #333;
}

.contact-info-list li::before {
  content: "⚫︎";
  color: var(--primary-color);
  margin-right: 0.5rem;
}

/* Contact Banner */
.contact-banner {
  width: 100%;
  text-align: center;
  margin: 2rem 0;
}

.contact-banner-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
}

/* Form Instructions */
.form-instructions {
  text-align: center;
  margin: 2rem 0;
}

.form-instructions p {
  font-size: 1.1rem;
  color: #333;
  margin: 0;
  line-height: 1.6;
}

/* Contact Form Wrapper */
.contact-form-wrapper {
  margin-top: 2rem;
}

/* ===============
Gravity Forms Styling
================== */

/* Hide form title */
.gform_wrapper .gform_title {
  display: none !important;
}

/* Form fields styling */
.gform_wrapper .gfield_label {
  color: #000 !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
  border: 1px solid #000 !important;
  border-radius: 20px !important;
  padding: 12px 20px !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  width: 100% !important;
  background: #fff !important;
  color: #333 !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="password"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(24, 155, 188, 0.1) !important;
  outline: none !important;
}

/* Textarea specific styling */
.gform_wrapper textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

/* Submit button styling */
.gform_wrapper .gform_footer {
  text-align: center !important;
  margin-top: 20px !important;
  width: 100% !important;
  display: block !important;
}

.gform_wrapper .gform_footer input[type="submit"] {
  background: var(--primary-color) !important;
  border: none !important;
  border-radius: 30px !important;
  color: white !important;
  padding: 15px 120px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
  margin: 0 auto !important;
}

.gform_wrapper .gform_footer input[type="submit"]:hover {
  background: var(--primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(24, 155, 188, 0.3) !important;
}

/* Form validation styling */
.gform_wrapper .gfield_error .gfield_label {
  color: #dc3545 !important;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  border-color: #dc3545 !important;
}

.gform_wrapper .validation_error {
  color: #dc3545 !important;
  background: #f8d7da !important;
  border: 1px solid #f5c6cb !important;
  border-radius: 8px !important;
  padding: 1rem !important;
  margin-bottom: 0rem !important;
}

.gform_wrapper .gfield_error_message {
  color: #dc3545 !important;
  font-size: 0.9rem !important;
  margin-top: 0rem !important;
}

/* Required field asterisk */
.gform_wrapper .gfield_required .gfield_required_asterisk {
  color: #dc3545 !important;
}

/* Form field spacing */
.gform_wrapper .gfield {
  margin-bottom: 0rem !important;
}

/* Responsive adjustments for contact form */
@media (max-width: 768px) {
  .contact-info-list li {
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }
  
  .form-instructions p {
    font-size: 1rem;
  }
  
  .gform_wrapper input[type="text"],
  .gform_wrapper input[type="email"],
  .gform_wrapper input[type="tel"],
  .gform_wrapper input[type="url"],
  .gform_wrapper input[type="password"],
  .gform_wrapper input[type="number"],
  .gform_wrapper textarea,
  .gform_wrapper select {
    padding: 10px 15px !important;
    font-size: 0.95rem !important;
  }
  
  .gform_wrapper .gform_footer input[type="submit"] {
    padding: 12px 30px !important;
    font-size: 1rem !important;
  }
}