/* css/custom.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@500;600;700;800&display=swap');

body {
    background-color: #040f16;
    color: #f1f5f9;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

/* Custom Scrollbar for Webkit */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background-color: #040f16;
}
::-webkit-scrollbar-thumb {
    background-color: #11293e;
    border-radius: 9999px;
    border: 2px solid #040f16;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #183a54;
}

/* Utilities */
.focus-visible-ring:focus {
    outline: none;
}
.focus-visible-ring:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #040f16, 0 0 0 4px #06b6d4;
}

/* Selection */
::selection {
    background-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
}

/* Contact Form 7 Styling */
.cf7-contact-form .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cf7-contact-form label {
    display: block;
    color: #94a3b8 !important; /* slate-400 */
    font-size: 0.8125rem !important; /* slightly smaller, more elegant */
    font-weight: 600 !important;
    margin-bottom: 0.75rem !important;
    text-transform: none !important;
}

/* Universal field styling */
.cf7-contact-form input[type="text"],
.cf7-contact-form input[type="email"],
.cf7-contact-form input[type="tel"],
.cf7-contact-form input[type="number"],
.cf7-contact-form input[type="date"],
.cf7-contact-form textarea,
.cf7-contact-form select {
    width: 100% !important;
    background-color: #020617 !important; /* h2o-950 - deeper dark */
    border: 1px solid #334155 !important; /* slate-700 - subtler border */
    border-radius: 0.5rem !important;
    padding: 0.875rem 1.125rem !important;
    color: white !important;
    outline: none !important;
    transition: all 0.2s !important;
    font-family: inherit !important;
    font-size: 0.9375rem !important;
}

.cf7-contact-form input:focus,
.cf7-contact-form textarea:focus,
.cf7-contact-form select:focus {
    border-color: #06b6d4 !important; /* h2o-cyan */
    box-shadow: 0 0 0 1px #06b6d4 !important;
}

.cf7-contact-form textarea {
    min-height: 140px !important;
    resize: none !important;
}

/* Specific styling for the submit button */
.cf7-contact-form .wpcf7-submit {
    width: 100% !important;
    background-color: #06b6d4 !important; /* h2o-cyan */
    color: #040f16 !important; /* h2o-950 */
    font-weight: 700 !important;
    padding: 1.125rem 2rem !important;
    border-radius: 0.5rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-transform: none !important; /* as per image */
    font-size: 1.125rem !important;
}

.cf7-contact-form .wpcf7-submit:hover {
    background-color: #22d3ee !important; /* h2o-cyan-light */
    transform: translateY(-1px);
}

.cf7-contact-form .wpcf7-spinner {
    margin: 0;
    position: absolute;
}

.cf7-contact-form .wpcf7-not-valid-tip {
    color: #ef4444 !important;
    font-size: 0.75rem !important;
    margin-top: 0.25rem !important;
}

.cf7-contact-form .wpcf7-response-output {
    margin: 1.5rem 0 0 0 !important;
    padding: 1rem 1.25rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    border-width: 2px !important;
    text-align: center !important;
}

/* Success Message */
.cf7-contact-form .wpcf7-mail-sent-ok {
    border-color: #10b981 !important; /* emerald-500 */
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #34d399 !important; /* emerald-400 */
}

/* Error/Validation Message */
.cf7-contact-form .wpcf7-validation-errors,
.cf7-contact-form .wpcf7-acceptance-missing,
.cf7-contact-form .wpcf7-mail-sent-ng {
    border-color: #ef4444 !important; /* red-500 */
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #f87171 !important; /* red-400 */
}

/* Interactive Floor Plan */
.table-group.dragging {
    opacity: 0.6;
    cursor: grabbing !important;
}

.table-group {
    transition: opacity 0.2s;
}

#floor-plan-svg.cursor-crosshair {
    cursor: crosshair;
}