/* ==========================================================================
   Contact us (Figma "تواصل معنا") -- resources/views/front/contact.blade.php
   Plain CSS, namespaced `ct`; logical properties, so the one stylesheet serves
   the Arabic (rtl) and English (ltr) page.
   ========================================================================== */

.ct-page { background: #FFFFFF; padding-block: 40px 88px; font-family: 'Cairo', 'Tajawal', system-ui, sans-serif; color: #222222; }
.ct-page a { text-decoration: none; }

/* ---------- Breadcrumb (#919191) and title (32 / 600, #222222) ---------- */
.ct-crumbs ol {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 0 0 16px; padding: 0; list-style: none;
    font-size: 16px; font-weight: 400; line-height: 20px; color: #919191;
}
.ct-crumbs a { color: #919191; }
.ct-crumbs a:hover { color: #532740; }
.ct-crumbs [aria-current="page"] { color: #532740; }
.ct-crumbs__sep { display: flex; align-items: center; font-size: 10px; }
.ct-title { margin: 0 0 32px; font-size: 32px; font-weight: 600; line-height: 1.2; color: #222222; }

/* ---------- Two columns: card 490 on the reading-start side (right in Arabic) | form 678 ----------
   The form comes first in the markup (and on phones); the grid areas put the card first on wide screens. */
.ct { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "form" "card"; gap: 40px; align-items: start; }
.ct-form-wrap { grid-area: form; }
.ct-card { grid-area: card; }
@media (min-width: 992px) {
    .ct {
        grid-template-columns: minmax(0, 490px) minmax(0, 678px);
        grid-template-areas: "card form";
        justify-content: space-between; gap: 48px;
    }
}

/* ---------- Form ---------- */
.ct-form-wrap { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ct-intro { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.6; color: #010609; }
.ct-sent {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 8px;
    background: #E8F5EC; color: #0D6832; font-size: 15px; font-weight: 600; line-height: 1.5;
}

.ct-form { display: flex; flex-direction: column; gap: 20px; }
.ct-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 768px) { .ct-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ct-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ct-field__label { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5; color: #080907; }
.ct-field__optional { font-size: 14px; font-weight: 400; color: #919191; }
.ct-field__control,
.ct-phone {
    width: 100%; height: 56px; margin: 0;
    border: 1.5px solid #AEB2B0; border-radius: 8px; background: #FFFFFF;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ct-field__control {
    display: block; padding: 0 16px;
    font: inherit; font-size: 16px; font-weight: 500; color: #080907;
}
.ct-field__control[dir="ltr"] { text-align: start; }
[dir="rtl"] .ct-field__control[dir="ltr"] { text-align: right; }
.ct-field__control::placeholder,
.ct-phone__input::placeholder { color: #9E9B98; font-weight: 400; opacity: 1; }
.ct-field__control:focus,
.ct-phone:focus-within { outline: 0; border-color: #532740; box-shadow: 0 0 0 3px rgba(83, 39, 64, .12); }
.ct-field__control[aria-invalid="true"],
.ct-phone:has([aria-invalid="true"]) { border-color: #B3261E; }
/* Message: 130px, grows with the text */
.ct-field__control--area { height: 130px; min-height: 130px; padding-block: 14px; line-height: 1.6; resize: vertical; }
.ct-field__error { margin: 0; font-size: 14px; line-height: 1.4; color: #B3261E; }

/* Phone: the +966 code with the flag, then the number (always left to right) */
.ct-phone { display: flex; align-items: center; overflow: hidden; }
.ct-phone__code {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0; height: 100%;
    padding: 0 12px 0 16px; border-right: 1.5px solid #E0E0E0;
    font-size: 15px; font-weight: 600; color: #080907;
}
.ct-phone__code svg { border-radius: 2px; }
.ct-phone__input {
    flex: 1; min-width: 0; height: 100%; padding: 0 16px; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 16px; font-weight: 500; color: #080907; text-align: left;
}

/* Hidden from people, still in the form for bots */
.ct-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; inset-inline-start: -9999px; }

/* Send: brand burgundy, radius 8, Cairo bold */
.ct-submit {
    display: block; width: 100%; height: 56px; padding: 0 24px;
    border: 0; border-radius: 8px; background: #532740; color: #FFFFFF;
    font: inherit; font-size: 18px; font-weight: 700; line-height: 1;
    cursor: pointer; transition: background-color .15s ease;
}
.ct-submit:hover { background: #43203A; }
.ct-submit:focus-visible { outline: 2px solid #532740; outline-offset: 3px; }
.ct-submit:disabled { background: #B9A3AF; cursor: progress; }

/* ---------- Contact card (Figma): 490 × 496, radius 5; the model photo under #000 at 40% ----------
   Without a photo: the brand gradient. */
.ct-card {
    position: relative; min-height: 496px; overflow: hidden; border-radius: 5px;
    /* Places the details box as in Figma: 44 from the top, 120 from the left (so 35 from the right).
       Physical, not mirrored for English: the photo does not flip, and a mirrored box would sit on
       the model. Padding rather than absolute positioning, so a longer address grows the card
       instead of being cut off. */
    padding: 44px 35px 44px 120px;
    background: linear-gradient(160deg, #6B3553 0%, #532740 55%, #2E1524 100%);
    color: #FFFFFF; font-family: 'Almarai', 'Cairo', system-ui, sans-serif;
}
.ct-card--photo {
    background:
        linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)),   /* #000000 at 40% */
        var(--ct-photo) center top / cover no-repeat,
        #2E1524;
}

/* ---------- Details box (Figma): vertical, 335 wide, hug (~392), gap 32, #532740 at 82% ---------- */
/* The details float straight on the photo (no box). Same size and padding as the box had, so
   everything keeps its place; a feathered shade behind them and a soft text shadow keep the
   white text readable over the lighter parts of the photo. */
.ct-card__inner {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column; gap: 32px;
    width: 335px; max-width: 100%; padding: 24px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 12px rgba(0, 0, 0, .25);
}
.ct-card__inner::before {
    content: ""; position: absolute; inset: -32px; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(20, 8, 15, .38), rgba(20, 8, 15, .18) 60%, transparent);
}
.ct-card__icon,
.ct-card__social a { box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.ct-card__social a:hover { text-shadow: none; }

.ct-card__head { display: flex; flex-direction: column; gap: 8px; }
.ct-card__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1; color: #FFFFFF; }
.ct-card__subtitle { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.6; color: #FFFFFF; }

.ct-card__list { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ct-card__list li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ct-card__list a,
.ct-card__list li > span:last-child {
    min-width: 0; overflow-wrap: anywhere;
    font-size: 16px; font-weight: 500; line-height: 1.5; color: #FFFFFF;
}
.ct-card__list a:hover { text-decoration: underline !important; }
.ct-card__icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 50%; background: #FFFFFF; color: #532740; font-size: 14px;
}

.ct-card__social { display: flex; flex-direction: column; gap: 10px; }
.ct-card__follow { margin: 0; font-size: 16px; font-weight: 700; color: #FFFFFF; }
.ct-card__social ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ct-card__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%;
    color: #FFFFFF; font-size: 15px; transition: background-color .15s ease, color .15s ease;
}
.ct-card__social a:hover { background: #FFFFFF; color: #532740; }
.ct-card__social a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

@media (min-width: 992px) { .ct-card { position: sticky; top: calc(var(--mh-header-h, 80px) + 16px); } }

@media (max-width: 767.98px) {
    .ct-page { padding-block: 24px 56px; }
    .ct-title { font-size: 26px; margin-bottom: 24px; }
    .ct-intro { font-size: 16px; }
    /* The box keeps its 335 (narrower on small phones) with less photo around it */
    .ct-card { min-height: 0; padding: 32px 16px; }
    .ct-card__inner { width: 100%; max-width: 335px; padding: 28px 20px; gap: 28px; }
}