/* Contact page styles scoped to the contact section */

.contact-page {
    --contact-text: #162435;
    --contact-muted: #717171;
    --contact-gold: #ab874b;
    --contact-bg: #f3f4f6;
    --contact-card: #ffffff;
    --contact-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
    --contact-radius: 16px;
    background: url("../img/raw/pattern(1).png");
    background: image-set(
        url("../img/webp/pattern(1).webp") type("image/webp"),
        url("../img/raw/pattern(1).png") type("image/png")
    );
    background-size: 127px;
    background-repeat: repeat;
    color: var(--contact-text);
    padding: 80px 24px;
}

.contact-page .container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.contact-page h1,
.contact-page h2,
.contact-page h3,
.contact-page h4,
.contact-page h5,
.contact-page h6,
.contact-page p {
    margin: 0;
    padding-bottom: 0;
}

/* Helper classes */
.contact-page .bold {
    font-weight: 700;
}

.contact-page .primary-color {
    color: var(--contact-gold);
}

.contact-page .flex {
    display: flex;
}

.contact-page .align-items-center {
    align-items: center;
}

.contact-page .flex-grow-1 {
    flex-grow: 1;
}

.contact-page .mirror {
    transform: scaleX(-1);
}

/* Header section */
.contact-page .header-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.contact-page .title-bar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 40px;
}

.contact-page .divider {
    height: 2px;
    background-color: var(--contact-gold);
    width: 56px;
    flex-shrink: 0;
}

.contact-page .divider.fill {
    flex-grow: 1;
}

.contact-page .main-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: var(--contact-text);
    white-space: nowrap;
}

.contact-page .subtitle {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--contact-muted);
    text-align: start;
    width: fit-content;
    max-width: 678px;
    padding-inline-start: 100px;
}

/* Columns */
.contact-page .content-columns {
    width: 100%;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.contact-page .contact-column,
.contact-page .info-column {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    min-width: 350px;
}

.contact-page .column-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    text-align: start;
    width: fit-content;
}

/* Cards */
.contact-page .card {
    width: 100%;
    background-color: var(--contact-card);
    border-radius: var(--contact-radius);
    padding: 16px;
    box-shadow: var(--contact-shadow);
    backdrop-filter: blur(1.5px);
}

.contact-page .contact-card {
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.contact-page .profile-image-container {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: var(--contact-card);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 10px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    flex-shrink: 0;
}

.contact-page .profile-image-container img {
    width: 100%;
    height: 100%;
}

.contact-page .contact-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    flex-grow: 1;
}

.contact-page .contact-name {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--contact-text);
}

.contact-page .contact-number {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--contact-text);
    text-decoration: none;
}

.contact-page .whatsapp-icon {
    width: 72px;
    height: 72px;
    border-radius: 47px;
    background-color: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.contact-page .whatsapp-glyph {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='currentColor' d='M380.9 97.1C339.7 54.7 283.7 32 224 32c-61.9 0-112.5 32.7-149.3 87.7L25.8 171.7c-4.4 6.7-1.3 15.6 5.4 19.9l46.7 30.5c6.7 4.4 15.6 1.3 19.9-5.4l11.4-17.5c26.9-41.6 70.4-67.9 119.5-67.9 66.5 0 120.5 54 120.5 120.5 0 24.3-7.2 46.7-19.8 66.2L277.6 373.8c-4.1 6.3-1.4 14.8 4.9 18.9l69.8 45.4c6.3 4.1 14.8 1.4 18.9-4.9l12.4-19c35.4-54.3 54.3-117.8 54.3-183.3 0-66.5-25.7-129.4-71.8-175.5zM224 480c-61.9 0-112.5-32.7-149.3-87.7l-35.8-54.3c-4.4-6.7-1.3-15.6 5.4-19.9l46.7-30.5c6.7-4.4 15.6-1.3 19.9-5.4l11.4 17.5c26.9 41.6 70.4 67.9 119.5 67.9 66.5 0 120.5-54 120.5-120.5 0-24.3-7.2-46.7-19.8-66.2L277.6 138.2c-4.1-6.3-1.4-14.8 4.9-18.9l69.8-45.4c6.3-4.1 14.8-1.4 18.9-4.9l12.4-19c35.4 54.3 54.3 117.8 54.3 183.3 0 66.5-25.7 129.4-71.8 175.5z'/></svg>");
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='currentColor' d='M380.9 97.1C339.7 54.7 283.7 32 224 32c-61.9 0-112.5 32.7-149.3 87.7L25.8 171.7c-4.4 6.7-1.3 15.6 5.4 19.9l46.7 30.5c6.7 4.4 15.6 1.3 19.9-5.4l11.4-17.5c26.9-41.6 70.4-67.9 119.5-67.9 66.5 0 120.5 54 120.5 120.5 0 24.3-7.2 46.7-19.8 66.2L277.6 373.8c-4.1 6.3-1.4 14.8 4.9 18.9l69.8 45.4c6.3 4.1 14.8 1.4 18.9-4.9l12.4-19c35.4-54.3 54.3-117.8 54.3-183.3 0-66.5-25.7-129.4-71.8-175.5zM224 480c-61.9 0-112.5-32.7-149.3-87.7l-35.8-54.3c-4.4-6.7-1.3-15.6 5.4-19.9l46.7-30.5c6.7-4.4 15.6-1.3 19.9-5.4l11.4 17.5c26.9 41.6 70.4 67.9 119.5 67.9 66.5 0 120.5-54 120.5-120.5 0-24.3-7.2-46.7-19.8-66.2L277.6 138.2c-4.1-6.3-1.4 14.8 4.9 18.9l69.8-45.4c6.3-4.1 14.8-1.4 18.9-4.9l12.4-19c35.4 54.3 54.3 117.8 54.3 183.3 0 66.5-25.7 129.4-71.8 175.5z'/></svg>");
}

.contact-page .office-info-card {
    height: 256px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: space-around;
}

.contact-page .detail-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
}

.contact-page .detail-label {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--contact-text);
}

.contact-page .detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: flex-start;
}

.contact-page .detail-row a {
    text-decoration: none;
}

.contact-page .detail-value {
    font-size: 18px;
    line-height: 1.2;
    color: var(--contact-text);
    text-align: start;
}

.contact-page .icon {
    font-size: 24px;
    flex-shrink: 0;
    display: block;
    color: var(--contact-gold);
}

/* Map section */
.contact-page .map-section {
    width: 100%;
    height: 717px;
    border-radius: 24px;
    padding: 48px;
    background: linear-gradient(274.29deg, #162435 46.51%, #ab874b 235.1%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.contact-page .saudi-arabia-map svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.contact-page .saudi-arabia-map svg path:hover {
    fill: #005430;
    fill-opacity: 1;
}

.contact-page .saudi-arabia-map svg g.farasan-island path:hover {
    fill: #ffffff;
    fill-opacity: 0.29;
}

/* Section header (map) */
.contact-page .section-header {
    width: 100%;
    margin-bottom: 40px;
}

.contact-page .section-header .header-title {
    gap: 40px;
    margin-bottom: 16px;
}

.contact-page .section-header .header-title .line {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #ab874b 0%, rgba(171, 135, 75, 0) 100%);
}

.contact-page .section-header .header-title h1 {
    font-weight: 700;
    font-size: 32px;
    line-height: 130%;
    white-space: nowrap;
}

.contact-page .section-header.dark-mode .header-title h1 {
    color: #ffffff;
}

/* CF7 + form helpers */
.contact-page .popup-subtitle {
    color: var(--contact-muted);
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 24px;
}

.contact-page .form-group {
    margin-bottom: 16px;
}

.contact-page .form-group label {
    display: block;
    color: #002f56;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 8px;
    text-align: start;
}

.contact-page .service-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.contact-page .service-options .wpcf7-list-item-label {
    padding: 8px 12px;
    border-radius: 8px;
    background-color: #edeef2;
    color: #002f56;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.2s;
    text-align: center;
    flex-grow: 1;
    min-width: fit-content;
    white-space: nowrap;
    margin: 0;
    display: inline-block;
}

.contact-page .service-options input[type="radio"] {
    display: none;
}

.contact-page .service-options input[type="radio"]:checked + .wpcf7-list-item-label {
    background-color: var(--contact-gold);
    color: #ffffff;
}

.contact-page .wpcf7-form .custom-text-input,
.contact-page .wpcf7-form .custom-select-input {
    direction: inherit;
    text-align: inherit;
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #c8c9cc;
    border-radius: 8px;
    background-color: #ffffff;
    box-sizing: border-box;
    font-size: 16px;
    color: var(--contact-text);
}

.contact-page .wpcf7-form .custom-select-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23162435'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.contact-page .wpcf7-response-output,
.contact-page .wpcf7-form-control-wrap span {
    font-family: "Noto Kufi Arabic", sans-serif;
    font-size: 14px;
    text-align: inherit;
    direction: inherit;
    margin-top: 4px;
}

body.rtl .contact-page .wpcf7-form .custom-text-input,
body.rtl .contact-page .wpcf7-form .custom-select-input,
body.rtl .contact-page .wpcf7-response-output,
body.rtl .contact-page .wpcf7-form-control-wrap span {
    direction: rtl;
    text-align: right;
}

body.rtl .contact-page .wpcf7-form .custom-select-input {
    background-position: left 12px center;
}

body:not(.rtl) .contact-page .wpcf7-form .custom-text-input,
body:not(.rtl) .contact-page .wpcf7-form .custom-select-input,
body:not(.rtl) .contact-page .wpcf7-response-output,
body:not(.rtl) .contact-page .wpcf7-form-control-wrap span {
    direction: ltr;
    text-align: left;
}

.contact-page .form-wrapper br,
.contact-page .popup-frame br {
    display: none;
}

/* Responsive */
@media (max-width: 1190px) {
    .contact-page .contact-column .column-title,
    .contact-page .info-column .column-title {
        font-size: 27px;
    }
}

@media (max-width: 1024px) {
    .contact-page {
        padding: 80px 16px;
    }

    .contact-page .content-columns {
        flex-direction: column;
        gap: 24px;
    }

    .contact-page .main-title {
        font-size: 36px;
    }

    .contact-page .subtitle {
        padding-inline-start: 0;
        max-width: 100%;
    }
}

@media (max-width: 900px) {
    .contact-page .title-bar {
        gap: 16px;
        flex-wrap: wrap;
    }

    .contact-page .main-title {
        white-space: normal;
        text-align: start;
    }
}

@media (max-width: 768px) {
    .contact-page .contact-column,
    .contact-page .info-column {
        min-width: 0;
    }

    .contact-page .contact-card {
        height: auto;
        align-items: flex-start;
    }

    .contact-page .contact-details {
        gap: 8px;
    }

    .contact-page .map-section {
        height: auto;
        padding: 24px;
    }
}

@media (max-width: 600px) {
    .contact-page .main-title {
        font-size: 30px;
    }

    .contact-page .column-title {
        font-size: 24px;
    }

    .contact-page .subtitle {
        font-size: 16px;
        line-height: 1.6;
    }
}