/* Custom Styles for Login Page */

:root {
    --brand-red: #c92c34;
    /* Approximate from image, can be adjusted */
    --brand-dark-red: #a02026;
}

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label {
    color: var(--brand-red);
}

.form-control:focus {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 0.25rem rgba(201, 44, 52, 0.25);
}

.btn-dark {
    background-color: #1a1a1a;
    transition: all 0.3s ease;
}

.btn-dark:hover {
    background-color: #000;
    transform: translateY(-1px);
}

.text-danger {
    color: var(--brand-red) !important;
}

/* Branding Section Styling */
.branding-section {
    background-image: url('assets/bg-branding.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Fallback gradient if image fails or for overlay effect */
.branding-overlay {
    background: linear-gradient(135deg, rgba(201, 44, 52, 0.95) 0%, rgba(160, 32, 38, 0.95) 100%);
    /* If the image is the exact design, we might lower opacity or remove this gradient overlay. 
       Assuming the image is just the texture/waves and we need to overlay text, 
       or if the image HAS the text, we should just show the image. 
       Let's assume the user uploaded the EXACT design image shown in the request.
       If so, we might not need the text overlay in HTML. 
       However, for accessibility and responsiveness, HTML text over a clean background is better.
       I will set the gradient to be semi-transparent over the image just in case it's a raw background.
       If the uploaded image IS the full composite (text included), we should hide the HTML text.
       I'll assume it's a background texture based on "like the photo". 
    */
    background: rgba(189, 41, 49, 0.9);
    /* Red tint over image */
    backdrop-filter: blur(0px);
    /* Optional */
}

/* If the uploaded image is the FULL poster, we can just use it directly without overlay text:
   .branding-section { background-image: url(...); }
   .branding-overlay { background: transparent; } 
   And hide the text in HTML. 
   
   DECISION: I will keep the HTML text for best practice, but try to match the style.
*/

.branding-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('assets/bg-branding.jpg') center/cover no-repeat;
    /* Ensure it's behind */
    z-index: 0;
}

.branding-overlay {
    z-index: 1;
    /* Gradient similar to the image to blend or replace */
    background: linear-gradient(135deg, #ce3d45 0%, #a6262c 100%);
    /* Use the image as a mask or blend mode if possible, but simple is safer.
       Actually, let's use the provided image as the MAIN background and just put text over it 
       if the image doesn't have text. Since I pasted the image at 'assets/bg-branding.jpg', 
       I will assume it is the reference image.
    */
}

/* Enhance text style */
.fw-extra-bold {
    font-weight: 800;
}

/* Arabic Text Handling */
[lang="ar"] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Better Arabic font fallback */
}