/*
Theme Name: Cocon Robotics
Theme URI: https://cocon-robotics.com
Author: COCON Robotics
Author URI: https://cocon-robotics.com
Description: Custom WordPress theme for COCON Robotics — Kinetic Monolith design system. Built with Tailwind CSS via CDN.
Version: 1.0.0
License: Proprietary
Text Domain: cocon-robotics
*/

/* Base reset — Tailwind handles everything via CDN */
*, *::before, *::after {
    box-sizing: border-box;
    border-radius: 0 !important;
}

body {
    margin: 0;
    font-family: 'Noto Sans JP', 'Manrope', sans-serif;
    background: #ffffff;
    color: #191c1d;
}

/* Admin bar offset */
.admin-bar nav.site-nav { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar nav.site-nav { top: 46px; }
}

/* Gradient utility */
.cocon-gradient {
    background: linear-gradient(135deg, #00658d 0%, #00aeef 100%);
}

/* Prose / WYSIWYG content */
.prose h1, .prose h2, .prose h3, .prose h4 {
    font-family: 'Space Grotesk', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 0.75em;
    line-height: 1.25;
}
.prose h1 { font-size: 2rem; }
.prose h2 { font-size: 1.5rem; border-bottom: 2px solid #e1e3e4; padding-bottom: 0.5rem; }
.prose h3 { font-size: 1.25rem; }
.prose p  { margin-bottom: 1.25em; line-height: 1.85; }
.prose ul { list-style: disc; padding-left: 1.5em; margin-bottom: 1.25em; }
.prose ol { list-style: decimal; padding-left: 1.5em; margin-bottom: 1.25em; }
.prose li { margin-bottom: 0.5em; line-height: 1.75; }
.prose a  { color: #00658d; text-decoration: underline; }
.prose a:hover { color: #00aeef; }
.prose blockquote {
    border-left: 4px solid #00aeef;
    padding-left: 1.25rem;
    margin: 2rem 0;
    color: #3e4850;
    font-style: italic;
}
.prose img { max-width: 100%; height: auto; margin: 2rem auto; display: block; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; }
.prose th, .prose td { border: 1px solid #e1e3e4; padding: 0.75rem 1rem; font-size: 0.875rem; }
.prose th { background: #f2f4f5; font-weight: 700; }
.prose code {
    font-family: 'Courier New', monospace;
    font-size: 0.875em;
    background: #f2f4f5;
    padding: 0.2em 0.4em;
}
.prose pre {
    background: #2e3132;
    color: #e1e3e4;
    padding: 1.5rem;
    overflow-x: auto;
    font-size: 0.875rem;
    margin-bottom: 1.5em;
}
.prose pre code { background: transparent; padding: 0; color: inherit; }

/* WP pagination */
.nav-links { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
    border: 1px solid #e1e3e4;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    color: #3e4850;
    transition: all 0.2s;
    text-decoration: none;
}
.page-numbers:hover    { border-color: #00aeef; color: #00658d; }
.page-numbers.current  { background: #00658d; border-color: #00658d; color: #fff; }
.page-numbers.dots     { border: none; }

/* Line clamp */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Active nav item highlight */
.site-nav a.current-menu-item,
.site-nav a[aria-current="page"] {
    color: #00aeef !important;
}

/* FAQ icon rotation transition */
.faq-icon { transition: transform 0.25s ease; }
.faq-icon.rotate-45 { transform: rotate(45deg); }

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* =====================================================================
   MOBILE RESPONSIVENESS HELPERS
   ===================================================================== */

/* Prevent horizontal overflow on all screens */
body { overflow-x: hidden; }

/* Responsive table wrapper — prevents content from causing hscroll */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Hero sections: ensure readable padding on very small screens */
@media screen and (max-width: 480px) {
    .section-title-jp { font-size: 1.4rem; }
    .section-title-en { font-size: 0.65rem; }
}

/* Ensure touch targets are at least 44px tall on mobile (WCAG 2.5.5) */
@media screen and (max-width: 768px) {
    button { min-height: 44px; display: inline-flex; align-items: center; }
    nav a, footer a { min-height: 44px; display: flex; align-items: center; }
    nav a.block, footer a.block { display: flex; }
}

/* Reduce excessive vertical padding on mobile for py-24 / py-32 sections */
@media screen and (max-width: 640px) {
    .py-24 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
    .py-32 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    .pt-32 { padding-top: 4rem !important; }
    .pb-20 { padding-bottom: 2.5rem !important; }
    .mb-16 { margin-bottom: 2.5rem !important; }
}

/* Solutions grid cards: reduce inner padding on mobile */
@media screen and (max-width: 640px) {
    .p-10 { padding: 1.5rem !important; }
    .p-8  { padding: 1.25rem !important; }
}

/* Recruitment banner headline: prevent overflow on small screens */
@media screen and (max-width: 640px) {
    .text-7xl { font-size: 2.5rem !important; line-height: 1.1 !important; }
}

/* Company table: stack th/td on tiny screens */
@media screen and (max-width: 480px) {
    .company-table tr { display: flex; flex-direction: column; }
    .company-table th,
    .company-table td { width: 100% !important; white-space: normal !important; }
}

/* Nav: ensure hamburger button doesn't clip on small screens */
@media screen and (max-width: 360px) {
    nav.site-nav { padding-left: 1rem; padding-right: 1rem; }
}

/* CTA section: ensure full-width buttons stack properly on mobile */
@media screen and (max-width: 640px) {
    .w-full.md\:w-1\/2 { min-height: 200px; }
}

/* ── Hero Canvas ── */
#hero-canvas {
    display: none;
}

/* ── Scroll Reveal ── */
[data-reveal] {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(44px); }
[data-reveal="left"]  { transform: translateX(-56px); }
[data-reveal="right"] { transform: translateX(56px); }
[data-reveal="scale"] { transform: scale(0.93) translateY(22px); }
[data-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* ── Hero Text Kinetics ── */
.hero-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(16px) skewY(3deg);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.hero-char.is-visible {
    opacity: 1;
    transform: none;
}

/* ── Typewriter cursor ── */
.tw-cursor {
    display: inline-block;
    width: 2px;
    height: 0.8em;
    background: #00aeef;
    margin-left: 2px;
    vertical-align: middle;
    animation: cursor-blink 0.7s step-end infinite;
}
@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Hero CTA reveal ── */
#hero-cta {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
#hero-cta.is-visible {
    opacity: 1;
    transform: none;
}

/* =====================================================================
   ENHANCED ANIMATIONS & INTERACTIONS
   ===================================================================== */

/* ── Scroll Reveal — add blur depth ── */
[data-reveal] {
    filter: blur(3px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter;
}
[data-reveal].is-visible {
    filter: blur(0) !important;
}

/* ── Stagger grid children ── */
[data-stagger] > * {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(2px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-stagger].stagger-fired > * { opacity: 1; transform: none; filter: blur(0); }

/* ── Mobile Nav Drawer ── */
#nav-drawer {
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.4s;
}
#nav-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s linear 0s;
}
#nav-overlay {
    opacity: 0;
    transition: opacity 0.35s ease;
}
#nav-drawer.is-open #nav-overlay {
    opacity: 1;
}
.nav-drawer-panel {
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
#nav-drawer.is-open .nav-drawer-panel {
    transform: translateX(0);
}

/* ── Nav Dropdown — smooth fade+slide ── */
.nav-dropdown-wrap > div:last-child {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.2s ease,
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-dropdown-wrap:hover > div:last-child,
.nav-dropdown-wrap:focus-within > div:last-child {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ── Nav Link Underline Slide ── */
.site-nav-links a {
    position: relative;
    padding-bottom: 2px;
}
.site-nav-links a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: #00aeef;
    transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav-links a:hover::after { width: 100%; }

/* ── FAQ Smooth Accordion ── */
.faq-answer {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.35s ease;
}
.faq-answer.is-open {
    max-height: 800px;
    opacity: 1;
}

/* ── Button Primary Hover Lift ── */
.btn-primary {
    transition: background-color 0.2s ease,
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s ease;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 174, 239, 0.28);
}

/* ── Magnetic Button Zone ── */
.magnetic-btn {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Image Gradient Fallback ── */
.img-fallback-wrap {
    background: linear-gradient(135deg, #00658d 0%, #003f5a 100%);
    position: relative;
}
.img-fallback-wrap img {
    position: relative;
    z-index: 1;
}

/* ── Partner Logo Placeholder ── */
.partner-logo-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 64px;
    padding: 0 28px;
    border-right: 1px solid #e5e7eb;
    background: #fff;
    flex-shrink: 0;
    filter: grayscale(100%);
    opacity: 0.55;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.partner-logo-slot:hover {
    filter: grayscale(0%);
    opacity: 1;
}
.partner-logo-slot img {
    max-height: 36px;
    max-width: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.partner-logo-slot .partner-text-fallback {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.partner-logo-slot .partner-text-fallback span:first-child {
    font-size: 0.75rem;
    font-weight: 700;
    color: #334155;
    font-family: 'Space Grotesk', sans-serif;
    white-space: nowrap;
}
.partner-logo-slot .partner-text-fallback span:last-child {
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #94a3b8;
    font-weight: 500;
}

/* ── Counter Number Animation ── */
.count-up {
    font-variant-numeric: tabular-nums;
}

/* ── Smooth Hover Border Expand ── */
.hover-border-expand {
    position: relative;
    overflow: hidden;
}
.hover-border-expand::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #00aeef;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-border-expand:hover::before { width: 100%; }

/* ── Grain texture on dark hero sections ── */
.hero-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 128px 128px;
}

/* ── Scroll progress line (top of page) ── */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, #00658d, #00aeef);
    z-index: 9999;
    transition: width 0.1s linear;
}

/* ── Section label animated line ── */
.section-label-line {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.section-label-line::before {
    content: '';
    display: block;
    height: 1px;
    width: 32px;
    background: #00aeef;
    flex-shrink: 0;
}

/* ── Inner-page hero staged fade-in ── */
.inner-hero .page-hero-head > * {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(4px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter;
}
.inner-hero .page-hero-head > *.inner-hero-visible {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/* ── Reduced motion safety ── */
@media (prefers-reduced-motion: reduce) {
    [data-reveal], [data-stagger] > *, .inner-hero .page-hero-head > *,
    .hero-char, #hero-cta, .card-lift, .btn-primary, .magnetic-btn {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ── Timeline dot pulse (company page) ── */
@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,174,239,0.5); }
    50%       { box-shadow: 0 0 0 8px rgba(0,174,239,0); }
}
.timeline-dot-pulse {
    animation: dot-pulse 2.5s ease infinite;
}

/* ── 3D Background Canvas ── */
#bg-canvas-3d {
    display: none;
}

/* ── Page Transition Overlay ── */
#page-transition {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
#page-transition.is-entering {
    opacity: 1;
    pointer-events: auto;
}

/* ── Cookie Consent Banner ── */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9997;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    background: #fff;
    border-top: 2px solid #00aeef;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.08);
}
#cookie-banner.is-visible {
    transform: translateY(0);
}
.cookie-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.cookie-icon {
    color: #00aeef;
    font-size: 20px;
    flex-shrink: 0;
}
.cookie-text {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.cookie-text p {
    font-size: 0.75rem;
    color: #3e4850;
    line-height: 1.6;
    margin: 0;
}
.cookie-text a {
    color: #00658d;
    text-decoration: underline;
    white-space: nowrap;
}
.cookie-text a:hover { color: #00aeef; }
.cookie-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.cookie-btn-accept {
    background: #00aeef;
    color: #fff;
    border: none;
    padding: 8px 20px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.cookie-btn-accept:hover { background: #00658d; }
.cookie-btn-decline {
    background: transparent;
    color: #94a3b8;
    border: 1px solid #e1e3e4;
    padding: 8px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.cookie-btn-decline:hover { color: #3e4850; border-color: #94a3b8; }

@media screen and (max-width: 640px) {
    .cookie-inner { flex-direction: column; gap: 12px; }
    .cookie-actions { width: 100%; }
    .cookie-btn-accept, .cookie-btn-decline { flex: 1; text-align: center; }
}

/* ── Hamburger → X transition ── */
#nav-toggle span {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.2s ease;
    transform-origin: center;
}

/* ── CTA Panel click ripple ── */
@keyframes cta-ripple {
    from { transform: scale(0); opacity: 1; }
    to   { transform: scale(1); opacity: 0; }
}

/* ── CTA Panel — ensure fill transition works with Tailwind ── */
#cta-contact,
#cta-download {
    isolation: isolate;
}

/* ── Card lift on hover ── */
.card-lift {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease;
}
.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

/* =====================================================================
   SEO & MOBILE — Responsive, fluid typography, CLS prevention
   ===================================================================== */

/* Prevent horizontal scroll on html root (body alone is insufficient in some browsers) */
html { overflow-x: hidden; }

/* ── Fluid typography with clamp() ─────────────────────────────── */
/* Section titles: smooth scaling between 1.35rem (mobile) and 1.75rem (desktop) */
.section-title-jp { font-size: clamp(1.35rem, 4vw, 1.75rem); }

/* Prose headings */
.prose h1 { font-size: clamp(1.5rem, 5vw, 2rem); }
.prose h2 { font-size: clamp(1.25rem, 3.5vw, 1.5rem); }
.prose h3 { font-size: clamp(1.1rem, 2.5vw, 1.25rem); }

/* ── Tablet breakpoint gap fill (768px–1023px) ──────────────────── */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    #hero-section { min-height: 560px; }
    .text-7xl { font-size: 3.5rem !important; line-height: 1.1 !important; }
    .py-32 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
    .py-24 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}

/* ── 2xl breakpoint — very wide screens (≥1536px) ───────────────── */
@media screen and (min-width: 1536px) {
    #hero-section h1 { font-size: clamp(3.75rem, 5vw, 5rem); }
    .section-title-jp { font-size: 2rem; }
}

/* ── Mobile container padding — tighten large px values on small screens ── */
@media screen and (max-width: 639px) {
    .px-12 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .px-24 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
    .px-24 { padding-left: 2rem !important; padding-right: 2rem !important; }
    .px-12 { padding-left: 2rem !important; padding-right: 2rem !important; }
}

/* ── Responsive image safeguard ─────────────────────────────────── */
/* Excludes: loading.gif (data-no-fallback) and absolute-positioned hero images */
.container img:not([data-no-fallback]):not(.absolute) {
    max-width: 100%;
    height: auto;
}

/* =====================================================================
   CONTACT FORM 7 — Kinetic Monolith Theme Integration
   ===================================================================== */

/* ── Wrap container ── */
.wpcf7-theme-wrap {
    position: relative;
}

/* ── Section label above the form ── */
.wpcf7-theme-wrap::before {
    content: 'INQUIRY FORM / お問い合わせ';
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: #00aeef;
    margin-bottom: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e1e3e4;
}

/* ── Form layout ── */
.wpcf7-theme-wrap .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Row wrapper ── */
.wpcf7-theme-wrap .cf7-row {
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid #e1e3e4;
}
.wpcf7-theme-wrap .cf7-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Fallback: CF7 default <p> tags as rows */
.wpcf7-theme-wrap .wpcf7-form > p { margin: 0 0 1.75rem; }

/* CF7 control wrap spans full width */
.wpcf7-theme-wrap .wpcf7-form-control-wrap { display: block; width: 100%; }

/* ── Labels ── */
.wpcf7-theme-wrap label,
.wpcf7-theme-wrap .wpcf7-form label {
    display: block;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.25em !important;
    color: #6e7881 !important;
    margin-bottom: 0.75rem !important;
    font-family: 'Space Grotesk', 'Noto Sans JP', sans-serif !important;
    line-height: 1.5 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Required star */
.wpcf7-theme-wrap .cf7-req {
    color: #00aeef;
    margin-left: 3px;
    font-size: 0.75rem;
}

/* ── Inputs, email, tel, url, number, select, textarea ── */
.wpcf7-theme-wrap input[type="text"],
.wpcf7-theme-wrap input[type="email"],
.wpcf7-theme-wrap input[type="tel"],
.wpcf7-theme-wrap input[type="url"],
.wpcf7-theme-wrap input[type="number"],
.wpcf7-theme-wrap select,
.wpcf7-theme-wrap textarea {
    display: block !important;
    width: 100% !important;
    border: none !important;
    border-bottom: 1.5px solid #bdc8d1 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    padding: 0.625rem 0 !important;
    font-size: 0.9375rem !important;
    font-family: 'Noto Sans JP', 'Manrope', sans-serif !important;
    color: #191c1d !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color 0.25s ease !important;
}

/* Focus state */
.wpcf7-theme-wrap input[type="text"]:focus,
.wpcf7-theme-wrap input[type="email"]:focus,
.wpcf7-theme-wrap input[type="tel"]:focus,
.wpcf7-theme-wrap input[type="url"]:focus,
.wpcf7-theme-wrap input[type="number"]:focus,
.wpcf7-theme-wrap select:focus,
.wpcf7-theme-wrap textarea:focus {
    border-color: #00aeef !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Textarea */
.wpcf7-theme-wrap textarea {
    resize: none !important;
    min-height: 160px !important;
    line-height: 1.8 !important;
    padding-top: 0.5rem !important;
}

/* Placeholders */
.wpcf7-theme-wrap input::placeholder,
.wpcf7-theme-wrap textarea::placeholder {
    color: #bdc8d1 !important;
    font-size: 0.875rem !important;
}

/* ── Select custom caret ── */
.wpcf7-theme-wrap select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e7881' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 11px !important;
    padding-right: 28px !important;
    cursor: pointer !important;
    color: #191c1d !important;
}
/* Muted appearance when default/empty option selected */
.wpcf7-theme-wrap select option:first-child { color: #bdc8d1; }
.wpcf7-theme-wrap select option           { color: #191c1d; }

/* ── Character counter ── */
.wpcf7-theme-wrap .cf7-char-counter {
    display: block;
    text-align: right;
    font-size: 0.6rem;
    color: #bdc8d1;
    margin-top: 6px;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.1em;
}
.wpcf7-theme-wrap .cf7-char-count {
    font-weight: 700;
    color: #6e7881;
}

/* ── Submit row ── */
.wpcf7-theme-wrap .cf7-submit-row {
    padding-bottom: 0 !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ── Submit button ── */
.wpcf7-theme-wrap input[type="submit"],
.wpcf7-theme-wrap .wpcf7-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.625rem !important;
    background: linear-gradient(90deg, #00658d 0%, #00aeef 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    padding: 1.125rem 3rem !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease !important;
    font-family: 'Space Grotesk', 'Noto Sans JP', sans-serif !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    box-shadow: none !important;
    min-height: 54px !important;
}
.wpcf7-theme-wrap input[type="submit"]:hover,
.wpcf7-theme-wrap .wpcf7-submit:hover {
    opacity: 0.88 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(0,174,239,0.22) !important;
}
.wpcf7-theme-wrap input[type="submit"]:active,
.wpcf7-theme-wrap .wpcf7-submit:active {
    transform: scale(0.985) !important;
    box-shadow: none !important;
}
.wpcf7-theme-wrap .wpcf7-submit:disabled,
.wpcf7-theme-wrap input[type="submit"]:disabled {
    opacity: 0.55 !important;
    cursor: default !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ── CF7 spinner — inline next to button ── */
.wpcf7-theme-wrap .wpcf7-spinner {
    display: none;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    vertical-align: middle;
    flex-shrink: 0;
}
.wpcf7-theme-wrap .wpcf7-form.submitting .wpcf7-spinner { display: inline-block; }

/* ── Validation error tips ── */
.wpcf7-theme-wrap .wpcf7-not-valid-tip {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #ba1a1a;
    margin-top: 8px;
    font-family: 'Space Grotesk', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.02em;
}
.wpcf7-theme-wrap input.wpcf7-not-valid,
.wpcf7-theme-wrap select.wpcf7-not-valid,
.wpcf7-theme-wrap textarea.wpcf7-not-valid {
    border-color: #ba1a1a !important;
}
/* Error row highlight */
.wpcf7-theme-wrap .cf7-row:has(.wpcf7-not-valid) > label {
    color: #ba1a1a !important;
}

/* ── Response output banner ── */
.wpcf7-theme-wrap .wpcf7-response-output {
    padding: 1rem 1.25rem;
    font-size: 0.8125rem;
    border-left: 3px solid transparent;
    margin: 1.75rem 0 0;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.65;
    letter-spacing: 0.01em;
}
/* Success */
.wpcf7-theme-wrap .wpcf7-mail-sent-ok {
    background: #f0fdf4;
    border-color: #22c55e;
    color: #166534;
}
/* Errors */
.wpcf7-theme-wrap .wpcf7-mail-sent-ng,
.wpcf7-theme-wrap .wpcf7-spam-blocked,
.wpcf7-theme-wrap .wpcf7-validation-errors,
.wpcf7-theme-wrap .wpcf7-acceptance-missing {
    background: #fef2f2;
    border-color: #ef4444;
    color: #991b1b;
}

/* ── Mobile adjustments ── */
@media screen and (max-width: 639px) {
    .wpcf7-theme-wrap .cf7-row {
        padding-bottom: 1.375rem;
        margin-bottom: 1.375rem;
    }
    .wpcf7-theme-wrap input[type="submit"],
    .wpcf7-theme-wrap .wpcf7-submit {
        padding: 1rem 1.5rem !important;
        font-size: 0.7rem !important;
    }
}