/* Styles for centered form pages like Login/Register */
.form-page-body { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 2rem 0; }
.form-container { width: 90%; max-width: 500px; padding: 2rem 2.5rem; background-color: var(--bg-card); border-radius: 20px; box-shadow: 0 10px 25px -5px var(--shadow-color); border: 1px solid var(--border-color); position: relative; }
.form-logo { text-align: center; margin-bottom: 1.5rem; }
.form-logo img { max-width: 130px; }
.form-container h2 { text-align: center; font-size: 1.8rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 10px; }
.form-container h2 i { color: var(--primary-color); }

/* Phone input group */
.phone-input-group { display: flex; gap: 0; align-items: stretch; }
.phone-input-group select.country-code {
    width: 135px;
    flex-shrink: 0;
    border-left: none; /* for RTL */
    border-radius: 0 8px 8px 0;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23aaa" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
    background-repeat: no-repeat;
    background-position: left 0.75rem center;
    background-size: 8px 10px;
    cursor: pointer;
}
.phone-input-group input.mobile-number {
    border-radius: 8px 0 0 8px;
    text-align: left;
    direction: ltr;
}
.phone-input-group select.country-code:focus,
.phone-input-group input.mobile-number:focus {
    z-index: 2; /* Bring focused element to the front */
}
.bottom-link { text-align: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.bottom-link a { font-weight: 600; }