/* Contact page: FXL colours and Arabic details for the parts that only exist on this page.
   Shared rules (Arabic font, nav, footer, buttons) come from styles.css. */

#contact {
  --token-5b8c40b7-87bc-4a41-8dab-9b8cfde5ae6e: #F14624; /* orange square, accent */
  --token-0a37367b-9472-4f0e-b828-fa1e41718828: #1B1530; /* black -> FXL ink */
  --token-b3ae0829-bfc3-4962-95b6-c7ea4148bbca: #4A4458; /* grey -> FXL body */
}
#contact .framer-text,
#contact .framer-form-input,
#contact button { font-family: "29LT Bukra", sans-serif !important; letter-spacing: 0 !important; }

/* Ciketo's container-yard photo stays; its 70% black wash becomes FXL's deep purple, as on the homepage hero */
#contact [data-framer-name="Cover"] { background-color: rgba(42, 23, 72, .72) !important; }

/* Address and contact lines read left-to-right inside the Arabic column */
#contact bdi { unicode-bidi: isolate; }

/* Form, right-to-left */
#contact form { direction: rtl; text-align: right; }
#contact .framer-form-input { text-align: right; }
#contact .framer-form-input[dir="ltr"] { direction: ltr; text-align: right; }
#contact .framer-form-input::placeholder { font-family: "29LT Bukra", sans-serif; }
/* focus: one frame only (Framer's, recoloured in styles.css) */

/* Submit: FXL purple, orange on hover */
#contact button[type="submit"] { background-color: #452874 !important; transition: background-color 200ms ease; cursor: pointer; }
@media (hover: hover) { #contact button[type="submit"]:hover { background-color: #F14624 !important; } }
#contact .quote-status { font-family: "29LT Bukra", sans-serif; color: #452874; }

/* One WhatsApp button where the address/hours columns were (that information is in the footer) */
.fxl-contact-wa { display: flex; width: 100%; max-width: 360px; margin-top: 8px; }
.fxl-contact-wa .fxl-split { width: 100%; }
.fxl-contact-wa .fxl-split__label { flex: 1; min-width: 0; justify-content: center; white-space: normal; text-align: center; line-height: 1.3; padding: 0 16px; }
.fxl-split { display: flex; gap: 2px; text-decoration: none; color: #FFFFFF; transition: gap 200ms ease; }
.fxl-split__label { display: flex; align-items: center; height: 52px; padding: 0 30px; border-radius: 2px; background: #F14624; font-family: "29LT Bukra", sans-serif; font-size: 16px; white-space: nowrap; transition: background-color 200ms ease; }
.fxl-split__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 2px; background: #F14624; transition: background-color 200ms ease; }
@media (hover: hover) { .fxl-split:hover .fxl-split__label, .fxl-split:hover .fxl-split__icon { background: #C2361A; } }

/* Office map under the form */
.fxl-contact-map-sec { width: 100%; align-self: stretch; box-sizing: border-box; padding: 80px 40px 100px; background: #F4F0F0; }
.fxl-contact-map-sec__inner { max-width: 1600px; margin-inline: auto; }
.fxl-contact-map { display: flex; flex-direction: column; gap: 14px; width: 100%; box-sizing: border-box; padding: 40px 50px; border-radius: 2px; background: #FFFFFF; direction: rtl; font-family: "29LT Bukra", sans-serif; }
.fxl-contact-map__head { display: flex; flex-direction: column; gap: 6px; }
.fxl-contact-map .fxl-label { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: #1B1530; }
.fxl-contact-map .fxl-label > span { width: 8px; height: 8px; background: #F14624; }
.fxl-contact-map__addr { margin: 0; font-size: 14px; line-height: 1.7; color: #4A4458; text-align: right; }
.fxl-contact-map iframe { display: block; width: 100%; height: 440px; border: 0; border-radius: 2px; background: #F4F0F0; }
.fxl-contact-map__open { align-self: flex-start; font-size: 14px; color: #452874; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1199px) { .fxl-contact-map-sec { padding: 60px 20px 80px; } .fxl-contact-map { padding: 32px 20px; } }
@media (max-width: 809px) { .fxl-contact-map-sec { padding: 40px 15px 64px; } .fxl-contact-map { padding: 28px 15px; } .fxl-contact-map iframe { height: 260px; } .fxl-contact-wa, .fxl-split { width: 100%; } .fxl-split__label { flex: 1; justify-content: center; } }