?php

   declare(strict_types=1);

   /*
   |--------------------------------------------------------------------------
   | AK FASHION BOUTIQUE
   | CUSTOMER LOGIN
   |--------------------------------------------------------------------------
   | File:
   | /public_html/customer/login.php
   |--------------------------------------------------------------------------
   */

   if (session_status() !== PHP_SESSION_ACTIVE) {
       session_start();
   }


   /*
   |--------------------------------------------------------------------------
   | IF ALREADY LOGGED IN
   |--------------------------------------------------------------------------
   */

   if (
       isset($_SESSION['customer_id']) &&
       (int) $_SESSION['customer_id'] > 0
   ) {
       header('Location: /customer/');
       exit;
   }


   /*
   |--------------------------------------------------------------------------
   | DATABASE CONNECTION
   |--------------------------------------------------------------------------
   */

   $dbCandidates = [
       __DIR__ . '/../includes/db.php',
       __DIR__ . '/../config/database.php',
       __DIR__ . '/../config/db.php',
   ];

   $dbLoaded = false;

   foreach ($dbCandidates as $dbFile) {

       if (is_file($dbFile)) {

           require_once $dbFile;

           $dbLoaded = true;

           break;
       }
   }

   if (
       !$dbLoaded ||
       !isset($pdo) ||
       !($pdo instanceof PDO)
   ) {
       http_response_code(500);
       exit('Database connection could not be established.');
   }


   /*
   |--------------------------------------------------------------------------
   | SETTINGS
   |--------------------------------------------------------------------------
   */

   $pageTitle = 'Customer Login - AK Fashion Boutique';
   $currentPage = 'customer-login';

   $siteName = 'AK Fashion Boutique';


   /*
   |--------------------------------------------------------------------------
   | REDIRECT URL
   |--------------------------------------------------------------------------
   */

   $redirect = trim(
       (string)($_GET['redirect'] ?? '/customer/')
   );


   /*
   |--------------------------------------------------------------------------
   | ALLOW ONLY LOCAL REDIRECTS
   |--------------------------------------------------------------------------
   */

   if (
       $redirect === '' ||
       !str_starts_with($redirect, '/') ||
       str_starts_with($redirect, '//')
   ) {
       $redirect = '/customer/';
   }


   /*
   |--------------------------------------------------------------------------
   | CSRF TOKEN
   |--------------------------------------------------------------------------
   */

   if (
       !isset($_SESSION['customer_login_csrf']) ||
       !is_string($_SESSION['customer_login_csrf'])
   ) {
       $_SESSION['customer_login_csrf'] =
           bin2hex(random_bytes(32));
   }

   $csrfToken =
       $_SESSION['customer_login_csrf'];


   /*
   |--------------------------------------------------------------------------
   | FORM VARIABLES
   |--------------------------------------------------------------------------
   */

   $mobile = '';
   $error = '';
   $success = '';


   /*
   |--------------------------------------------------------------------------
   | LOGIN
   |--------------------------------------------------------------------------
   */

   if ($_SERVER['REQUEST_METHOD'] === 'POST') {

       $postedToken =
           (string)($_POST['csrf_token'] ?? '');

       $mobile =
           trim(
               (string)($_POST['mobile'] ?? '')
           );

       $password =
           (string)($_POST['password'] ?? '');

       $postedRedirect =
           trim(
               (string)($_POST['redirect'] ?? '/customer/')
           );


       /*
       |--------------------------------------------------------------------------
       | VALIDATE REDIRECT
       |--------------------------------------------------------------------------
       */

       if (
           $postedRedirect !== '' &&
           str_starts_with($postedRedirect, '/') &&
           !str_starts_with($postedRedirect, '//')
       ) {
           $redirect = $postedRedirect;
       }


       /*
       |--------------------------------------------------------------------------
       | CSRF
       |--------------------------------------------------------------------------
       */

       if (
           !hash_equals(
               $csrfToken,
               $postedToken
           )
       ) {

           $error =
               'Your session has expired. Please refresh the page and try again.';
       }


       /*
       |--------------------------------------------------------------------------
       | VALIDATE MOBILE
       |--------------------------------------------------------------------------
       */

       if ($error === '' && $mobile === '') {

           $error =
               'Please enter your mobile number.';
       }


       /*
       |--------------------------------------------------------------------------
       | VALIDATE MOBILE FORMAT
       |--------------------------------------------------------------------------
       */

       if ($error === '' && !preg_match('/^[0-9+\-\s]{7,20}$/', $mobile)) {

           $error =
               'Please enter a valid mobile number.';
       }


       /*
       |--------------------------------------------------------------------------
       | VALIDATE PASSWORD
       |--------------------------------------------------------------------------
       */

       if ($error === '' && $password === '') {

           $error =
               'Please enter your password.';
       }


       /*
       |--------------------------------------------------------------------------
       | FIND CUSTOMER
       |--------------------------------------------------------------------------
       */

       if ($error === '') {

           try {

               $stmt = $pdo->prepare("
                   SELECT
                       id,
                       name,
                       mobile,
                       email,
                       password_hash,
                       status
                   FROM customers
                   WHERE mobile = ?
                   LIMIT 1
               ");

               $stmt->execute([
                   $mobile
               ]);

               $customer =
                   $stmt->fetch(PDO::FETCH_ASSOC);


               /*
               |--------------------------------------------------------------------------
               | CUSTOMER NOT FOUND
               |--------------------------------------------------------------------------
               */

               if (!$customer) {

                   $error =
                       'Invalid mobile number or password.';
               }


               /*
               |--------------------------------------------------------------------------
               | ACCOUNT STATUS
               |--------------------------------------------------------------------------
               */

               elseif (
                   (string)$customer['status'] !== 'active'
               ) {

                   $error =
                       'Your account is currently not active. Please contact AK Fashion Boutique.';
               }


               /*
               |--------------------------------------------------------------------------
               | PASSWORD VERIFY
               |--------------------------------------------------------------------------
               */

               elseif (
                   !password_verify(
                       $password,
                       (string)$customer['password_hash']
                   )
               ) {

                   $error =
                       'Invalid mobile number or password.';
               }


               /*
               |--------------------------------------------------------------------------
               | LOGIN SUCCESS
               |--------------------------------------------------------------------------
               */

               else {

                   session_regenerate_id(true);

                   $_SESSION['customer_id'] =
                       (int)$customer['id'];

                   $_SESSION['customer_name'] =
                       (string)$customer['name'];

                   $_SESSION['customer_mobile'] =
                       (string)$customer['mobile'];

                   $_SESSION['customer_email'] =
                       (string)($customer['email'] ?? '');

                   $_SESSION['customer_logged_in'] =
                       true;


                   /*
                   |--------------------------------------------------------------------------
                   | NEW CSRF TOKEN
                   |--------------------------------------------------------------------------
                   */

                   unset(
                       $_SESSION['customer_login_csrf']
                   );


                   /*
                   |--------------------------------------------------------------------------
                   | REDIRECT
                   |--------------------------------------------------------------------------
                   */

                   header(
                       'Location: ' . $redirect
                   );

                   exit;
               }

           } catch (Throwable $e) {

               error_log(
                   'AK Fashion Customer Login Error: ' .
                   $e->getMessage()
               );

               $error =
                   'Something went wrong while signing you in. Please try again.';
           }
       }
   }


   /*
   |--------------------------------------------------------------------------
   | HEADER
   |--------------------------------------------------------------------------
   */

   require_once __DIR__ . '/../includes/header.php';

   ?>

   <style>

   /* ============================================================
      LOGIN PAGE
   ============================================================ */

   .ak-login-page {
       min-height: calc(100vh - 130px);
       background:
           radial-gradient(
               circle at 10% 10%,
               rgba(31, 107, 79, 0.08),
               transparent 30%
           ),
           linear-gradient(
               180deg,
               #F8FAF9 0%,
               #F1F6F3 100%
           );

       display: flex;
       align-items: center;
       padding: 55px 20px 75px;
   }

   .ak-login-container {
       width: min(1050px, 100%);
       margin: 0 auto;

       display: grid;
       grid-template-columns:
           minmax(0, 0.9fr)
           minmax(400px, 1fr);

       background: #FFFFFF;

       border: 1px solid #DCE7E2;

       border-radius: 26px;

       overflow: hidden;

       box-shadow:
           0 25px 70px rgba(11, 31, 51, 0.10);
   }


   /* ============================================================
      LEFT PANEL
   ============================================================ */

   .ak-login-intro {
       position: relative;
       overflow: hidden;

       background:
           linear-gradient(
               145deg,
               #0B1F33 0%,
               #123B56 65%,
               #15523B 150%
           );

       padding: 50px 42px;

       color: #FFFFFF;

       display: flex;
       flex-direction: column;
       justify-content: center;
   }

   .ak-login-intro::before {
       content: "";

       position: absolute;

       width: 280px;
       height: 280px;

       border-radius: 50%;

       border: 1px solid rgba(255,255,255,0.08);

       right: -120px;
       top: -110px;
   }

   .ak-login-intro::after {
       content: "";

       position: absolute;

       width: 180px;
       height: 180px;

       border-radius: 50%;

       background: rgba(31,107,79,0.30);

       left: -90px;
       bottom: -80px;
   }

   .ak-login-intro-content {
       position: relative;
       z-index: 2;
   }

   .ak-brand-mark {
       width: 62px;
       height: 62px;

       border-radius: 18px;

       background: #EAF4EF;

       color: #1F6B4F;

       display: flex;
       align-items: center;
       justify-content: center;

       font-size: 25px;

       margin-bottom: 27px;

       box-shadow:
           0 12px 30px rgba(0,0,0,0.12);
   }

   .ak-login-intro h1 {
       font-family:
           "Playfair Display",
           Georgia,
           serif;

       font-size: clamp(30px, 4vw, 43px);

       line-height: 1.12;

       margin: 0 0 16px;

       font-weight: 700;
   }

   .ak-login-intro p {
       margin: 0;

       max-width: 400px;

       color: rgba(255,255,255,0.73);

       line-height: 1.75;

       font-size: 14px;
   }

   .ak-login-benefits {
       margin: 30px 0 0;

       padding: 0;

       list-style: none;

       display: grid;

       gap: 13px;
   }

   .ak-login-benefits li {
       display: flex;

       align-items: center;

       gap: 11px;

       color: rgba(255,255,255,0.86);

       font-size: 13px;
   }

   .ak-login-benefits i {
       width: 27px;
       height: 27px;

       border-radius: 50%;

       background: rgba(31,107,79,0.85);

       color: #FFFFFF;

       display: flex;
       align-items: center;
       justify-content: center;

       font-size: 11px;

       flex: 0 0 27px;
   }


   /* ============================================================
      RIGHT FORM
   ============================================================ */

   .ak-login-form-area {
       padding: 48px 46px;

       display: flex;
       flex-direction: column;
       justify-content: center;
   }

   .ak-login-heading {
       margin-bottom: 28px;
   }

   .ak-login-heading .eyebrow {
       display: inline-block;

       color: #1F6B4F;

       font-size: 11px;

       font-weight: 800;

       letter-spacing: 1.2px;

       text-transform: uppercase;

       margin-bottom: 8px;
   }

   .ak-login-heading h2 {
       margin: 0 0 7px;

       color: #17252D;

       font-size: 29px;

       font-weight: 800;

       letter-spacing: -0.5px;
   }

   .ak-login-heading p {
       margin: 0;

       color: #7A888F;

       font-size: 13px;

       line-height: 1.6;
   }


   /* ============================================================
      ERROR
   ============================================================ */

   .ak-login-error {
       display: flex;

       align-items: flex-start;

       gap: 10px;

       background: #FBEAEC;

       border: 1px solid #F0CDD1;

       color: #9A3945;

       border-radius: 11px;

       padding: 12px 13px;

       margin-bottom: 18px;

       font-size: 13px;

       line-height: 1.5;
   }

   .ak-login-error i {
       margin-top: 2px;
   }


   /* ============================================================
      FORM
   ============================================================ */

   .ak-form-group {
       margin-bottom: 18px;
   }

   .ak-form-label {
       display: block;

       color: #2E3E46;

       font-size: 13px;

       font-weight: 700;

       margin-bottom: 8px;
   }

   .ak-input-wrap {
       position: relative;
   }

   .ak-input-icon {
       position: absolute;

       left: 14px;
       top: 50%;

       transform: translateY(-50%);

       color: #829099;

       font-size: 14px;

       pointer-events: none;
   }

   .ak-form-input {
       width: 100%;

       height: 50px;

       border: 1px solid #D6E2DD;

       border-radius: 11px;

       background: #FBFDFC;

       color: #17252D;

       font-family: inherit;

       font-size: 14px;

       padding: 0 15px 0 43px;

       outline: none;

       transition:
           border-color 0.2s ease,
           box-shadow 0.2s ease,
           background 0.2s ease;

       box-sizing: border-box;
   }

   .ak-form-input:focus {
       border-color: #1F6B4F;

       background: #FFFFFF;

       box-shadow:
           0 0 0 4px rgba(31,107,79,0.09);
   }

   .ak-form-input::placeholder {
       color: #A0AAAF;
   }


   /* ============================================================
      PASSWORD
   ============================================================ */

   .ak-password-toggle {
       position: absolute;

       right: 13px;
       top: 50%;

       transform: translateY(-50%);

       width: 32px;
       height: 32px;

       border: 0;

       background: transparent;

       color: #829099;

       cursor: pointer;

       border-radius: 8px;

       display: flex;
       align-items: center;
       justify-content: center;
   }

   .ak-password-toggle:hover {
       background: #EAF4EF;

       color: #1F6B4F;
   }

   .ak-password-input {
       padding-right: 48px;
   }


   /* ============================================================
      FORM OPTIONS
   ============================================================ */

   .ak-form-options {
       display: flex;

       justify-content: flex-end;

       margin: -2px 0 20px;
   }

   .ak-forgot {
       color: #1F6B4F;

       font-size: 12px;

       font-weight: 700;

       text-decoration: none;
   }

   .ak-forgot:hover {
       text-decoration: underline;
   }


   /* ============================================================
      LOGIN BUTTON
   ============================================================ */

   .ak-login-button {
       width: 100%;

       min-height: 52px;

       border: 0;

       border-radius: 11px;

       background:
           linear-gradient(
               135deg,
               #1F6B4F,
               #15523B
           );

       color: #FFFFFF;

       font-family: inherit;

       font-size: 14px;

       font-weight: 800;

       cursor: pointer;

       display: flex;

       align-items: center;

       justify-content: center;

       gap: 9px;

       box-shadow:
           0 10px 22px rgba(31,107,79,0.20);

       transition:
           transform 0.2s ease,
           box-shadow 0.2s ease;
   }

   .ak-login-button:hover {
       transform: translateY(-1px);

       box-shadow:
           0 14px 28px rgba(31,107,79,0.25);
   }

   .ak-login-button:active {
       transform: translateY(0);
   }


   /* ============================================================
      REGISTER
   ============================================================ */

   .ak-register-box {
       text-align: center;

       margin-top: 22px;

       padding-top: 21px;

       border-top: 1px solid #E8EFEC;

       color: #7A888F;

       font-size: 13px;
   }

   .ak-register-box a {
       color: #1F6B4F;

       font-weight: 800;

       text-decoration: none;
   }

   .ak-register-box a:hover {
       text-decoration: underline;
   }


   /* ============================================================
      SECURITY NOTE
   ============================================================ */

   .ak-security-note {
       display: flex;

       justify-content: center;

       align-items: center;

       gap: 7px;

       margin-top: 19px;

       color: #8A969C;

       font-size: 11px;
   }

   .ak-security-note i {
       color: #1F6B4F;
   }


   /* ============================================================
      RESPONSIVE
   ============================================================ */

   @media (max-width: 850px) {

       .ak-login-container {
           grid-template-columns: 1fr;

           max-width: 570px;
       }

       .ak-login-intro {
           padding: 34px 30px;
       }

       .ak-login-intro h1 {
           font-size: 31px;
       }

       .ak-login-benefits {
           grid-template-columns: repeat(2, 1fr);

           margin-top: 23px;
       }

       .ak-login-form-area {
           padding: 38px 30px;
       }
   }

   @media (max-width: 560px) {

       .ak-login-page {
           padding: 25px 12px 50px;
       }

       .ak-login-container {
           border-radius: 19px;
       }

       .ak-login-intro {
           padding: 28px 22px;
       }

       .ak-brand-mark {
           width: 52px;
           height: 52px;

           border-radius: 15px;

           margin-bottom: 19px;
       }

       .ak-login-intro h1 {
           font-size: 27px;
       }

       .ak-login-intro p {
           font-size: 13px;
       }

       .ak-login-benefits {
           grid-template-columns: 1fr;

           gap: 10px;

           margin-top: 20px;
       }

       .ak-login-form-area {
           padding: 30px 21px 32px;
       }

       .ak-login-heading {
           margin-bottom: 23px;
       }

       .ak-login-heading h2 {
           font-size: 25px;
       }
   }

   </style>


   <div class="ak-login-page">

       <div class="ak-login-container">


           <!-- =====================================================
                LEFT INTRO
           ====================================================== -->

           <section class="ak-login-intro">

               <div class="ak-login-intro-content">

                   <div class="ak-brand-mark">
                       <i class="fa-solid fa-scissors"></i>
                   </div>

                   <h1>
                       Welcome Back
                   </h1>

                   <p>
                       Sign in to manage your stitching bookings,
                       track your referral rewards and access your
                       AK Fashion Boutique account.
                   </p>


                   <ul class="ak-login-benefits">

                       <li>
                           <i class="fa-solid fa-check"></i>
                           Manage your stitching bookings
                       </li>

                       <li>
                           <i class="fa-solid fa-check"></i>
                           Track your ₹50 referral rewards
                       </li>

                       <li>
                           <i class="fa-solid fa-check"></i>
                           View your wallet balance
                       </li>

                       <li>
                           <i class="fa-solid fa-check"></i>
                           Update your customer profile
                       </li>

                   </ul>

               </div>

           </section>


           <!-- =====================================================
                LOGIN FORM
           ====================================================== -->

           <section class="ak-login-form-area">

               <div class="ak-login-heading">

                   <span class="eyebrow">
                       Customer Account
                   </span>

                   <h2>
                       Sign in to your account
                   </h2>

                   <p>
                       Enter your registered mobile number and password
                       to continue.
                   </p>

               </div>


               
                   <div class="ak-login-error">

                       <i class="fa-solid fa-circle-exclamation"></i>

                       <div>
                                                  </div>

                   </div>

               

               <form
                   method="POST"
                   action=""
                   autocomplete="on"
                   novalidate
               >

                   <input
                       type="hidden"
                       name="csrf_token"
                       value=""
                   >

                   <input
                       type="hidden"
                       name="redirect"
                       value=""
                   >


                   <!-- Mobile -->

                   <div class="ak-form-group">

                       <label
                           class="ak-form-label"
                           for="mobile"
                       >
                           Mobile Number
                       </label>

                       <div class="ak-input-wrap">

                           <i class="fa-solid fa-mobile-screen-button ak-input-icon"></i>

                           <input
                               type="tel"
                               id="mobile"
                               name="mobile"
                               class="ak-form-input"
                               value=""
                               placeholder="Enter your mobile number"
                               autocomplete="tel"
                               inputmode="tel"
                               maxlength="20"
                               required
                           >

                       </div>

                   </div>


                   <!-- Password -->

                   <div class="ak-form-group">

                       <label
                           class="ak-form-label"
                           for="password"
                       >
                           Password
                       </label>

                       <div class="ak-input-wrap">

                           <i class="fa-solid fa-lock ak-input-icon"></i>

                           <input
                               type="password"
                               id="password"
                               name="password"
                               class="ak-form-input ak-password-input"
                               placeholder="Enter your password"
                               autocomplete="current-password"
                               required
                           >

                           <button
                               type="button"
                               class="ak-password-toggle"
                               id="togglePassword"
                               aria-label="Show password"
                           >
                               <i class="fa-solid fa-eye"></i>
                           </button>

                       </div>

                   </div>


                   <!-- Forgot -->

                   <div class="ak-form-options">

                       <a
                           href="/customer/forgot-password.php"
                           class="ak-forgot"
                       >
                           Forgot Password?
                       </a>

                   </div>


                   <!-- Login -->

                   <button
                       type="submit"
                       class="ak-login-button"
                   >

                       <i class="fa-solid fa-right-to-bracket"></i>

                       Sign In

                   </button>


               </form>


               <!-- Register -->

               <div class="ak-register-box">

                   Don't have an account?

                   <a
                       href="/customer/register.php?redirect="
                   >
                       Create Account
                   </a>

               </div>


               <div class="ak-security-note">

                   <i class="fa-solid fa-shield-halved"></i>

                   Secure customer login

               </div>

           </section>

       </div>

   </div>


   <script>

   document.addEventListener(
       'DOMContentLoaded',
       function () {

           const toggle =
               document.getElementById(
                   'togglePassword'
               );

           const password =
               document.getElementById(
                   'password'
               );


           if (!toggle || !password) {
               return;
           }


           toggle.addEventListener(
               'click',
               function () {

                   const isPassword =
                       password.type === 'password';


                   password.type =
                       isPassword
                           ? 'text'
                           : 'password';


                   this.innerHTML =
                       isPassword
                           ? '<i class="fa-solid fa-eye-slash"></i>'
                           : '<i class="fa-solid fa-eye"></i>';


                   this.setAttribute(
                       'aria-label',
                       isPassword
                           ? 'Hide password'
                           : 'Show password'
                   );

               }
           );

       }
   );

   </script>


   
</main>


<!-- =========================================================
     FOOTER
========================================================= -->

<footer class="ak-footer">

    <style>

        /* =========================================================
           FOOTER BASE
        ========================================================= */

        .ak-footer {
            background:
                linear-gradient(
                    180deg,
                    #0B1F33 0%,
                    #071522 100%
                );

            border-top: 3px solid #1F6B4F;

            padding: 65px 0 24px;

            color: #D8E4E8;
        }


        /* =========================================================
           FOOTER GRID
        ========================================================= */

        .ak-footer-grid {
            display: grid;

            grid-template-columns:
                1.5fr
                1fr
                1fr
                1fr;

            gap: 45px;

            padding-bottom: 42px;

            border-bottom: 1px solid rgba(255,255,255,.10);
        }


        /* =========================================================
           BRAND
        ========================================================= */

        .ak-footer-brand {
            max-width: 370px;
        }


        .ak-footer-logo {
            display: flex;

            align-items: center;

            gap: 12px;

            margin-bottom: 18px;
        }


        .ak-footer-logo-mark {
            width: 46px;
            height: 46px;

            flex-shrink: 0;

            border-radius: 50%;

            background: #EAF4EF;

            border: 1px solid #1F6B4F;

            display: flex;

            align-items: center;

            justify-content: center;

            color: #1F6B4F;

            font-family:
                "Playfair Display",
                Georgia,
                serif;

            font-size: 16px;

            font-weight: 700;

            box-shadow:
                0 5px 18px rgba(0,0,0,.20);
        }


        .ak-footer-logo-text strong {
            display: block;

            color: #FFFFFF;

            font-family:
                "Playfair Display",
                Georgia,
                serif;

            font-size: 21px;

            line-height: 1.1;
        }


        .ak-footer-logo-text span {
            display: block;

            margin-top: 4px;

            color: #7BC4A4;

            font-size: 8px;

            font-weight: 700;

            letter-spacing: 2.5px;

            text-transform: uppercase;
        }


        .ak-footer-description {
            margin: 0;

            color: #AABBC3;

            font-size: 13px;

            line-height: 1.85;
        }


        /* =========================================================
           FOOTER COLUMNS
        ========================================================= */

        .ak-footer-col h4 {
            margin: 3px 0 19px;

            color: #FFFFFF;

            font-size: 15px;

            font-weight: 700;

            letter-spacing: .2px;

            position: relative;

            padding-bottom: 10px;
        }


        .ak-footer-col h4::after {
            content: "";

            position: absolute;

            left: 0;

            bottom: 0;

            width: 28px;

            height: 2px;

            background: #1F6B4F;

            border-radius: 10px;
        }


        .ak-footer-col a {
            display: block;

            margin-bottom: 11px;

            color: #AABBC3;

            font-size: 13px;

            text-decoration: none;

            transition:
                color .2s ease,
                transform .2s ease;
        }


        .ak-footer-col a:hover {
            color: #7BC4A4;

            transform: translateX(3px);
        }


        /* =========================================================
           CONTACT
        ========================================================= */

        .ak-footer-contact {
            color: #AABBC3;

            font-size: 13px;

            line-height: 1.85;
        }


        .ak-footer-contact strong {
            color: #FFFFFF;

            font-weight: 600;
        }


        /* =========================================================
           FOOTER BOTTOM
        ========================================================= */

        .ak-footer-bottom {
            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 20px;

            padding-top: 21px;
        }


        .ak-copyright {
            color: #81949D;

            font-size: 11px;

            line-height: 1.6;
        }


        .ak-footer-note {
            color: #81949D;

            font-size: 11px;

            text-align: right;

            line-height: 1.6;
        }


        /* =========================================================
           SUBTLE TOP DECORATION
        ========================================================= */

        .ak-footer::before {
            content: "";

            display: block;

            width: 55px;

            height: 2px;

            margin:
                -65px
                auto
                63px;

            background: #1F6B4F;

            opacity: .75;

            border-radius: 20px;
        }


        /* =========================================================
           FOOTER RESPONSIVE - TABLET
        ========================================================= */

        @media (max-width: 900px) {

            .ak-footer {
                padding: 55px 0 22px;
            }


            .ak-footer::before {
                margin:
                    -55px
                    auto
                    53px;
            }


            .ak-footer-grid {
                grid-template-columns:
                    1.3fr
                    1fr
                    1fr;

                gap: 32px;
            }


            .ak-footer-brand {
                grid-column: 1 / -1;

                max-width: 650px;
            }
        }


        /* =========================================================
           FOOTER RESPONSIVE - MOBILE
        ========================================================= */

        @media (max-width: 600px) {

            .ak-footer {
                padding: 45px 0 20px;
            }


            .ak-footer::before {
                margin:
                    -45px
                    auto
                    43px;
            }


            .ak-footer-grid {
                grid-template-columns:
                    1fr 1fr;

                gap:
                    30px 20px;

                padding-bottom: 32px;
            }


            .ak-footer-brand {
                grid-column: 1 / -1;
            }


            .ak-footer-logo {
                margin-bottom: 16px;
            }


            .ak-footer-logo-mark {
                width: 43px;
                height: 43px;
            }


            .ak-footer-logo-text strong {
                font-size: 19px;
            }


            .ak-footer-description {
                font-size: 12.5px;

                line-height: 1.75;
            }


            .ak-footer-col h4 {
                font-size: 14px;

                margin-bottom: 16px;
            }


            .ak-footer-col a {
                font-size: 12.5px;

                margin-bottom: 9px;
            }


            .ak-footer-contact {
                font-size: 12.5px;
            }


            .ak-footer-bottom {
                flex-direction: column;

                align-items: flex-start;

                gap: 7px;
            }


            .ak-footer-note {
                text-align: left;
            }
        }


        /* =========================================================
           VERY SMALL DEVICES
        ========================================================= */

        @media (max-width: 380px) {

            .ak-footer-grid {
                grid-template-columns: 1fr;
            }


            .ak-footer-brand {
                grid-column: auto;
            }
        }

    </style>


    <div class="container">

        <div class="ak-footer-grid">


            <!-- =====================================================
                 BRAND
            ===================================================== -->

            <div class="ak-footer-brand">

                <div class="ak-footer-logo">

                    <div class="ak-footer-logo-mark">
                        AK
                    </div>

                    <div class="ak-footer-logo-text">

                        <strong>
                            AK Fashion
                        </strong>

                        <span>
                            Boutique
                        </span>

                    </div>

                </div>


                <p class="ak-footer-description">
                    Premium suit stitching with personalised fitting,
                    elegant finishing and a simple referral rewards
                    experience for our customers.
                </p>

            </div>


            <!-- =====================================================
                 QUICK LINKS
            ===================================================== -->

            <div class="ak-footer-col">

                <h4>
                    Quick Links
                </h4>

                <a href="/index.php">
                    Home
                </a>

                <a href="/services.php">
                    Services
                </a>

                <a href="/refer-and-earn.php">
                    Refer &amp; Earn
                </a>

                <a href="/about.php">
                    About Us
                </a>

            </div>


            <!-- =====================================================
                 CUSTOMER
            ===================================================== -->

            <div class="ak-footer-col">

                <h4>
                    Customer
                </h4>

                <a href="/customer/login.php">
                    Login
                </a>

                <a href="/customer/register.php">
                    Create Account
                </a>

                <a href="/customer/dashboard.php">
                    My Dashboard
                </a>

                <a href="/contact.php">
                    Contact Us
                </a>

            </div>


            <!-- =====================================================
                 CONTACT
            ===================================================== -->

            <div class="ak-footer-col">

                <h4>
                    Contact
                </h4>

                <div class="ak-footer-contact">

                    <strong>
                        AK Fashion Boutique
                    </strong>

                    <br>

                    Suit Stitching &amp; Boutique Services

                    <br><br>

                    <strong>
                        Business Hours
                    </strong>

                    <br>

                    Mon – Sun

                    <br>

                    10:00 AM – 8:00 PM

                </div>

            </div>

        </div>


        <!-- =====================================================
             FOOTER BOTTOM
        ===================================================== -->

        <div class="ak-footer-bottom">

            <div class="ak-copyright">

                © 2026                AK Fashion Boutique.
                All Rights Reserved.

            </div>


            <div class="ak-footer-note">

                Crafted with care for your perfect style.

            </div>

        </div>

    </div>

</footer>


<!-- =========================================================
     MOBILE MENU JAVASCRIPT
========================================================= -->

<script>

(function () {

    const menuButton =
        document.getElementById('akMenuBtn');

    const mobileNav =
        document.getElementById('akMobileNav');


    if (!menuButton || !mobileNav) {
        return;
    }


    menuButton.addEventListener('click', function () {

        const isOpen =
            mobileNav.style.display === 'block';


        if (isOpen) {

            mobileNav.style.display = 'none';

            menuButton.setAttribute(
                'aria-expanded',
                'false'
            );

            menuButton.innerHTML = '☰';

        } else {

            mobileNav.style.display = 'block';

            menuButton.setAttribute(
                'aria-expanded',
                'true'
            );

            menuButton.innerHTML = '✕';

        }

    });


    /*
    |--------------------------------------------------------------------------
    | Close mobile menu after clicking a link
    |--------------------------------------------------------------------------
    */

    mobileNav.querySelectorAll('a').forEach(function (link) {

        link.addEventListener('click', function () {

            mobileNav.style.display = 'none';

            menuButton.setAttribute(
                'aria-expanded',
                'false'
            );

            menuButton.innerHTML = '☰';

        });

    });

})();

</script>


</body>
</html>