/* Souq Wakra registration form */
@import url(fonts.css);

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Lusail", sans-serif;
    font-size: 16px;
    color: #222;
    /* same photo and haze as the landing page (landing.css) */
    background-color: #e9cfa6;
    background-image:
        linear-gradient(rgba(255, 248, 238, 0.45), rgba(255, 248, 238, 0.15) 60%, rgba(255, 248, 238, 0.3)),
        url(images/landing-bg.jpg);
    background-size: cover;
    background-position: 60% center;
    background-attachment: fixed;
}
@media (max-width: 700px) {
    body {
        background-image:
            linear-gradient(rgba(255, 248, 238, 0.55), rgba(255, 248, 238, 0.3)),
            url(images/landing-bg-sm.jpg);
        background-position: 70% center;
        background-attachment: scroll;
    }
}

.wrap { max-width: 640px; margin: 0 auto; padding: 24px 16px 48px; }

.head { text-align: center; }
.head h1 { margin: 12px 0 4px; font-size: 28px; }
.redtext { color: #c00; font-size: 24px; margin: 12px 0 20px; }

.en { display: block; font-size: 14px; font-weight: normal; color: #555; direction: ltr; }
label .en, h2 .en { display: inline; margin-inline-start: 6px; }

.card {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 25px;
    padding: 2rem;
    margin-bottom: 1rem;
}

.field { margin-bottom: 26px; }
/* Arabic label on the right, English on the left (page is RTL, so first child sits right). */
.field label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: bold; margin-bottom: 10px; padding: 0 8px; }
.field label .en { margin: 0; text-align: left; }
.field small { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 0 8px; color: #555; font-size: 12px; }
.field small .en { font-size: 12px; text-align: left; }

/* File upload: the native input is hidden (but still validates) and an Arabic button stands in for it. */
.file {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 5px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}
.file input[type=file] { position: absolute; bottom: 0; right: 50%; width: 1px; height: 1px; opacity: 0; }
.field .file label.btn-file { display: inline-block; margin: 0; font-weight: normal; background: #6c757d; padding: 6px 14px; }
.file input:focus-visible + label { outline: 2px solid #337ab7; }
.file-name { color: #555; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

input[type=text], input[type=email], input[type=tel], select {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    font: inherit;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}
/* Own dropdown arrow so it gets the same inner spacing as the text. */
select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background: #fff 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' fill='none' stroke='%23555' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
}
input:focus, select:focus { outline: none; border-color: #66afe9; box-shadow: 0 0 6px rgba(102, 175, 233, .6); }

.btn {
    display: inline-block;
    padding: 8px 16px;
    font: inherit;
    color: #fff;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}
.btn-info { background: #5bc0de; }
.btn-success { background: #5cb85c; font-size: 18px; padding: 10px 28px; }
.btn:disabled { opacity: .6; cursor: wait; }

/* Companion section: the checkbox is hidden and its label acts as the toggle button. */
.companion { margin: 4px 0 26px; }
.companion > input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.companion > input:focus-visible + label { outline: 2px solid #337ab7; }
.companion-fields { display: none; margin-top: 18px; padding: 20px 20px 0; border: 1px dashed #aaa; border-radius: 12px; }
.companion > input:checked + label { background: #d9534f; }
.companion > input:checked ~ .companion-fields { display: block; }

.terms { margin: 8px 0 0; padding: 0 8px; display: flex; align-items: center; gap: 8px; }
.terms input { width: 18px; height: 18px; margin: 0; flex: none; }
.terms label { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.terms label .en { margin: 0; text-align: left; }
.terms a { font-weight: bold; text-decoration: none; color: #1a5fa8; }
.actions { text-align: center; margin-top: 28px; }

.errors { background: rgba(255, 235, 235, .9); color: #a00; }
.errors ul { margin: 0; padding-inline-start: 20px; }
.success { text-align: center; }

/* Terms page */
.tnc h1 { margin: 0 0 14px; font-size: 16px; font-weight: bold; }
.tnc ul { margin: 0; padding-inline-start: 22px; }
.tnc li { margin-bottom: 12px; line-height: 1.7; }
.tnc li:last-child { margin-bottom: 0; }
/* Match the form: Arabic like the field titles (16px bold), English like the English subtitles (13px). */
.tnc[lang=ar] li { font-size: 16px; }
.tnc[lang=en] li { font-size: 16px; }

.head-solo { margin-bottom: 20px; }

/* Logo at the top of the form / terms / payment pages — links back to the landing page */
.home-logo { display: inline-block; margin-bottom: 8px; }
.home-logo img { display: block; width: clamp(140px, 30vw, 200px); height: auto; }
.home-logo:hover { opacity: .85; }