/* ═══════════════════════════════════════════
 * WordPress & Plugin Overrides
 * ═══════════════════════════════════════════ */

/* ── CF7 Global Resets ── */
.wpcf7-form br {
    display: none;
}
.wpcf7 .wpcf7-response-output {
    margin: 15px 0 0;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 14px;
}
.wpcf7-spinner {
    display: none;
}

/* ── CF7 in About Section (Booking Form) ── */
.xb-about-form .wpcf7 .xb-input-field {
    margin-bottom: 15px;
}
.xb-about-form .wpcf7 .xb-input-field label {
    display: block;
    margin-bottom: 6px;
}
.xb-about-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}
.xb-about-form .wpcf7-form-control-wrap input,
.xb-about-form .wpcf7-form-control-wrap select {
    width: 100%;
    height: 50px;
    border: 1px solid rgba(10, 43, 80, 0.15);
    border-radius: 5px;
    padding: 0 15px;
    font-size: 14px;
    font-family: inherit;
    color: #0a2b50;
    background: #fff;
}
.xb-about-form .wpcf7-form-control-wrap select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    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='%230a2b50' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    cursor: pointer;
}
.xb-about-form .wpcf7-form-control-wrap input:focus,
.xb-about-form .wpcf7-form-control-wrap select:focus {
    outline: none;
    border-color: #0a2b50;
}
.xb-about-form .wpcf7-form-control-wrap input[type="number"] {
    -moz-appearance: textfield;
}
.xb-about-form input.wpcf7-submit {
    display: block;
    width: 100%;
    height: 55px;
    background: #0a2b50;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 15px;
}
.xb-about-form input.wpcf7-submit:hover {
    background: #0d3a6b;
}
.xb-about-form .wpcf7-not-valid-tip {
    font-size: 12px;
    color: #dc3545;
    margin-top: 4px;
}

/* ── CF7 in Contact Section ── */
/* CF7 wraps inputs in <span class="wpcf7-form-control-wrap">,
   so we need :focus-within and :has() for label animations. */
.xb-contact-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    position: relative;
}
/* Validation tips — absolute so they don't push labels down */
.xb-contact-form .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
    position: absolute;
    left: 0;
    bottom: -18px;
    font-size: 12px;
    color: #dc3545;
    white-space: nowrap;
}
.xb-contact-form .xb-input-field {
    margin-bottom: 6px;
}
.xb-contact-form .xb-input-field .wpcf7-form-control-wrap input,
.xb-contact-form .xb-input-field .wpcf7-form-control-wrap textarea {
    width: 100%;
    height: 50px;
    outline: none;
    font-size: 15px;
    padding: 10px 40px 10px 20px;
    transition: all 0.3s ease;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #dcdcdf;
    color: #0a2b50;
    font-family: inherit;
}
.xb-contact-form .xb-input-field .wpcf7-form-control-wrap input::placeholder,
.xb-contact-form .xb-input-field .wpcf7-form-control-wrap textarea::placeholder {
    color: transparent;
}
.xb-contact-form .xb-input-field .wpcf7-form-control-wrap input:focus,
.xb-contact-form .xb-input-field .wpcf7-form-control-wrap textarea:focus {
    border-color: #0a2b50;
}
/* Label hide on focus or filled — works with CF7 span wrapper */
.xb-contact-form .xb-input-field:has(.wpcf7-form-control-wrap :focus) label,
.xb-contact-form .xb-input-field:has(.wpcf7-form-control-wrap :not(:placeholder-shown)) label {
    transform: translate(15px, -50%);
    opacity: 0;
}
/* Textarea */
.xb-contact-form .xb-massage-field .wpcf7-form-control-wrap textarea {
    height: 180px;
    padding: 18px 20px;
    resize: vertical;
}
.xb-contact-form .xb-massage-field:has(.wpcf7-form-control-wrap :focus) label,
.xb-contact-form .xb-massage-field:has(.wpcf7-form-control-wrap :not(:placeholder-shown)) label {
    opacity: 0;
}
/* Select (Nice Select) */
.xb-contact-form .xb-select-field .wpcf7-form-control-wrap select {
    width: 100%;
    height: 50px;
    font-size: 15px;
    padding: 10px 40px 10px 20px;
    border-radius: 10px;
    border: 1px solid #dcdcdf;
    background: #fff;
    color: rgba(10, 43, 80, 0.7);
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.xb-contact-form .xb-select-field .wpcf7-form-control-wrap select:focus {
    border-color: #0a2b50;
    outline: none;
}
/* Submit button */
.xb-contact-form .form-submit-btn input.wpcf7-submit,
.xb-contact-form input.wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0a2b50;
    color: #fff;
    border: none;
    padding: 16px 40px;
    font-size: 18px;
    font-weight: 500;
    font-family: inherit;
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.3s;
    text-transform: capitalize;
}
.xb-contact-form .form-submit-btn input.wpcf7-submit:hover,
.xb-contact-form input.wpcf7-submit:hover {
    background: #0d3a6b;
}
/* Validation — response output */
.xb-contact-form .wpcf7 .wpcf7-response-output {
    margin: 15px 0 0;
    border-radius: 6px;
}

/* ── Page Content (for Privacy Policy, etc.) ── */
.page-content {
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
    color: #0a2b50;
    margin-bottom: 15px;
}
.page-content p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 15px;
}
.page-content ul,
.page-content ol {
    padding-left: 20px;
    margin-bottom: 15px;
}
.page-content li {
    color: #555;
    line-height: 1.8;
    margin-bottom: 8px;
}
.page-content a {
    color: #0a2b50;
    text-decoration: underline;
}

/* ── Contact info block — fix clickability (z-index:-1 in main.css) ── */
.xb-contact-form .xb-contact-info {
    z-index: -1;
}
.xb-contact-form .xb-contact-info a {
    color: #fff;
    text-decoration: none;
    transition: opacity 0.3s;
}
.xb-contact-form .xb-contact-info a:hover {
    opacity: 0.8;
}

/* ── Phone popup social icons (dark on white bg) ── */
.js-phone-popup .xb-social_media .social-link li a {
    background: #0a2b50;
    color: #fff;
}
.js-phone-popup .xb-social_media .social-link li a:hover {
    background: #0d3a6b;
}
/* Phone popup — center on mobile */
@media (max-width: 767px) {
    .js-phone-popup {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%);
        width: calc(100vw - 40px) !important;
        max-width: 340px !important;
    }
}

/* ── Feature section: taller, white bg, image pinned to bottom ── */
.feature.feature-background {
    background-color: #fff;
    background-position: center bottom !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    padding-bottom: 700px !important;
}
@media (max-width: 767px) {
    .feature.feature-background {
        padding-bottom: 300px !important;
    }
}

/* ── Feature section icon size ── */
.yr-feature-item .xb-item--icon img {
    width: 90px;
    height: 90px;
    object-fit: contain;
}

/* ── Service items hover — all text white ── */
.xb-service-item:hover .service-price,
.xb-service-item:hover .learn-btn {
    color: #fff !important;
}

/* ── Button without arrow (single span) ── */
.marine-btn.marine-btn--no-arrow span {
    opacity: 1 !important;
    margin-inline-end: 0 !important;
    margin-inline-start: 0 !important;
    transform: scale3d(1, 1, 1) !important;
}

/* ── Header right — reduce gap below 1300px ── */
@media (max-width: 1300px) {
    .header-style .header-right {
        gap: 0px;
    }
}
/* ── Header menu gap — tighter at 1200-1500px ── */
@media only screen and (min-width: 1200px) and (max-width: 1500px) {
    .header-style .main-menu > ul {
        gap: 20px;
    }
}

/* ── Mobile header below 1275px ── */
@media (min-width: 992px) and (max-width: 1274px) {
    .header-style .main-menu__wrap .navbar-collapse {
        display: none !important;
    }
    .header-bar-mobile.d-lg-none {
        display: block !important;
    }
    .header-btn.d-none.d-xl-block {
        display: none !important;
    }
}

/* ── Footer gallery: equal size + no hover ── */
.xb-footer-top .item {
    flex: 1 1 0;
    min-width: 0;
}
.xb-footer-top .item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.xb-footer-top .item .link-btn {
    display: none;
}
@media (max-width: 767px) {
    .xb-footer-top .item img {
        height: 160px;
    }
}

/* ── Sub-title: no capitalize, hide when empty ── */
.sec-title .sub-title {
    text-transform: none;
}
.sec-title .sub-title:empty {
    display: none;
}

/* ── Breadcrumb for inner pages ── */
.breadcrumb {
    padding: 120px 0 60px;
}
.breadcrumb__title {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
}