/**

 * Cafepoint Login/Apply Page Styles

 * Responsive design for all devices

 */



/* ========================================

   Base Styles & Variables

   ======================================== */

:root {

    --cafepoint-orange: #E58227;

    --cafepoint-orange-hover: #E58227;

    --cafepoint-text-dark: #000;

    --cafepoint-text-light: #666666;

    --cafepoint-border: #E5E5E5;

    --cafepoint-bg: #FFFFFF;

    --cafepoint-primary-font: "Poppins", sans-serif;

}



/* ========================================

   Main Container

   ======================================== */



.cafepoint-auth-wrapper {

    min-height: 100vh;

    position: relative;

    font-family: var(--cafepoint-primary-font);

}



.cafepoint-auth-container {

    display: flex;

    max-width: 1440px;

    width: 100%;

    margin: 0 auto;

}



.cafepoint-auth-bg-wrapper {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -2;

    overflow: hidden;

}



.cafepoint-auth-container::before {

    content: "";

    position: absolute;

    top: 0;

    left: auto;

    right: 0;

    width: 100%;

    height: 100%;

    z-index: -1;

    background: url('https://cafepoint-shop.sproutwebsites.co.uk/wp-content/uploads/2025/11/bg-shepe.png');

    background-position: top right;

    background-repeat: no-repeat;

    background-size: 90% 111%;

}



.cafepoint-auth-bg-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* ========================================

   Left Side - Image Section

   ======================================== */

.cafepoint-auth-image {

    flex: 1;

    position: relative;

    min-height: 900px;

    display: flex;

    align-items: flex-end;

}



.cafepoint-logo-badge {

    font-family: var(--cafepoint-primary-font);

    background: #FFFFFF;

    padding: 12px 50px;

    border-radius: 6px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-weight: 600;

    font-size: 16px;

    height: 51px;

    color: var(--cafepoint-text-dark);

    transition: all 0.3s ease;

}



.cafepoint-logo-badge:hover {

    background: #000;

    color: #fff;

}



.cafepoint-logo-badge img,

.cafepoint-logo-badge>span:first-child {

    transition: all 0.3s ease;

}



.cafepoint-logo-badge:hover>span:first-child {

    transform: translateX(5px);

}



.cafepoint-logo-badge:hover img {

    filter: invert(1);

    transform: rotate(-45deg);

}



/* ========================================

   Right Side - Forms Section

   ======================================== */

.cafepoint-auth-forms {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

}



.cafepoint-auth-inner {

    width: 100%;

    max-width: 480px;

}



/* ========================================

   Logo Header

   ======================================== */

.cafepoint-header-logo {

    text-align: center;

    margin-bottom: 40px;

}



.cafepoint-logo {

    max-width: 220px;

    height: auto;

    margin: 0 auto;

}



/* ========================================

   Tab Navigation

   ======================================== */

.cafepoint-tabs {

    display: flex;

    gap: 0;

    margin: 0 auto;

    align-items: center;

    margin-bottom: 30px;

    justify-content: center;

    max-width: 360px;

    border-radius: 6px;

    overflow: hidden;

}



.cafepoint-tab {

    font-family: var(--cafepoint-primary-font);

    flex: 1;

    padding: 15px 20px;

    background: #EDEDED;

    border: none;

    font-size: 18px;

    font-weight: 500;

    color: #000;

    cursor: pointer;

    transition: all 0.3s ease;

    position: relative;

    border-radius: 0;

    border: none;

}



.cafepoint-tab.active {

    color: #ffffff;

    background: var(--cafepoint-orange);

}



/* ========================================

   Welcome Text

   ======================================== */

.cafepoint-welcome-text {

    text-align: center;

    margin-bottom: 30px;

}



.cafepoint-welcome-text p {

    margin: 0 0 8px 0;

    font-family: var(--cafepoint-primary-font);

    color: var(--cafepoint-orange);

    font-size: 24px;

    line-height: 30px;

}



.cafepoint-welcome-text p:last-child {

    margin-bottom: 0;

}



/* ========================================

   Tab Content

   ======================================== */

.cafepoint-tab-content {

    display: none;

    animation: fadeIn 0.3s ease;

}



.cafepoint-tab-content.active {

    display: block;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(10px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* ========================================

   Form Elements

   ======================================== */

.cafepoint-form-group {

    position: relative;

    margin-bottom: 30px;

}



.cafepoint-input {

    font-family: var(--cafepoint-primary-font);

    width: 100%;

    height: 57px;

    padding: 12px 16px;

    font-size: 18px;

    border: 1px solid var(--cafepoint-text-dark);

    border-radius: 4px;

    transition: all 0.3s ease;

    color: var(--cafepoint-text-dark);

}



.cafepoint-input::placeholder {

    color: #0000006e;

}



.cafepoint-input:focus {

    outline: none;

    border-color: var(--cafepoint-orange);

}



/* Password Toggle */

.password-toggle {

    position: absolute;

    right: 12px;

    top: 50%;

    transform: translateY(-50%);

    background: none;

    border: none;

    cursor: pointer;

    padding: 5px;

    color: var(--cafepoint-text-light);

    transition: color 0.3s ease;

}



.password-toggle:hover {

    color: var(--cafepoint-orange);

}



.eye-icon {

    width: 20px;

    height: 20px;

}



/* ========================================

   Form Footer

   ======================================== */

.cafepoint-form-footer {

    text-align: right;

    margin-bottom: 25px;

}



.cafepoint-lost-password {

    font-family: var(--cafepoint-primary-font);

    font-size: 14px;

    color: #000000;

    transition: color 0.3s ease;

}



.cafepoint-lost-password:hover {

    color: var(--cafepoint-orange-hover);

    text-decoration: underline;

}



/* ========================================

   Submit Button

   ======================================== */









/* ========================================

   Signup Prompt

   ======================================== */



.cafepoint-signup-prompt p {

    font-family: var(--cafepoint-primary-font);

    margin: 0;

    font-size: 16px;

    color: var(--cafepoint-text-light);

    line-height: 30px;

}



.cafepoint-signup-prompt a,

.switch-to-apply {

    color: var(--cafepoint-orange);

    text-decoration: underline;

    font-weight: 600;

    transition: color 0.3s ease;

}



/* ========================================

   Contact Form 7 Styling

   ======================================== */

.cafepoint-apply-form .wpcf7-form {

    margin: 0;

}



.cafepoint-apply-form .wpcf7-form-control-wrap {

    display: block;

    margin-bottom: 20px;

}



.cafepoint-apply-form input[type="text"],

.cafepoint-apply-form input[type="email"],

.cafepoint-apply-form input[type="tel"],

.cafepoint-apply-form textarea,

.cafepoint-apply-form select {

    font-family: var(--cafepoint-primary-font);

    width: 100%;

    padding: 14px 16px;

    font-size: 18px;

    border: 1px solid var(--cafepoint-border);

    border-radius: 4px;

    transition: all 0.3s ease;

    background: var(--cafepoint-bg);

    color: var(--cafepoint-text-dark);

}



.cafepoint-apply-form input:focus,

.cafepoint-apply-form textarea:focus,

.cafepoint-apply-form select:focus {

    outline: none;

    border-color: var(--cafepoint-orange);

    box-shadow: 0 0 0 3px rgba(245, 160, 77, 0.1);

}



.cafepoint-apply-form textarea {

    min-height: 100px;

    resize: vertical;

}





.cafepoint-apply-form .wpcf7-not-valid-tip {

    color: #dc3545;

    font-size: 12px;

    margin-top: 5px;

    font-family: var(--cafepoint-primary-font);

}



.cafepoint-apply-form .wpcf7-response-output {

    margin: 20px 0 0 0;

    padding: 12px;

    border-radius: 4px;

}
.form-control,
.cafepoint-input {
    -webkit-appearance: none; 
    -moz-appearance: none;   
    appearance: none;      
}


.cafepoint-apply-form .wpcf7-mail-sent-ok {

    background: #d4edda;

    border: 1px solid #c3e6cb;

    color: #155724;

}



.cafepoint-apply-form .wpcf7-validation-errors {

    background: #f8d7da;

    border: 1px solid #f5c6cb;

    color: #721c24;

}



.cafepoint-signup-prompt {

    margin-top: 30px;

}



/* ========================================

   Responsive Design 

   ======================================== */



@media (max-width: 1660px) {

    .cafepoint-auth-container::before {

        background-size: 83% 115%;

    }



    .cafepoint-auth-wrapper {

        padding: 60px;

    }

}



@media (max-width: 1440px) {

    .cafepoint-auth-inner {

        max-width: 436px;

    }

}



@media (max-width: 1200px) {

    .cafepoint-auth-container::before {

        background-size: 83% 123%;

    }



    .cafepoint-auth-wrapper {

        padding: 60px;

    }



    .cafepoint-welcome-text p {

        font-size: 20px;

        line-height: 30px;

    }



    .cafepoint-auth-inner {

        max-width: 372px;

    }



    .cafepoint-auth-image {

        min-height: 800px;

    }



    .cafepoint-form-group {

        margin-bottom: 21px;

    }



    .cafepoint-signup-prompt {

        margin-top: 15px;

    }



    .cafepoint-welcome-text {

        margin-bottom: 25px;

    }

}



@media (max-width: 1024px) {

    .cafepoint-auth-image {

        min-height: auto;

    }



    .cafepoint-auth-container {

        flex-direction: column-reverse;

    }



    .cafepoint-auth-container::before {

        background: #000;

        opacity: 0.3;

    }



    .cafepoint-signup-prompt p,

    .cafepoint-lost-password {

        color: #fff;

    }



    .cafepoint-auth-image {

        margin: 0 auto;

        margin-top: 22px;

    }



    .cafepoint-logo {

        max-width: 186px;

    }

}



@media (max-width: 768px) {

    .cafepoint-auth-wrapper {

        padding: 40px 20px;

    }



    .cafepoint-logo {

        max-width: 147px;

    }

}



@media (max-width: 480px) {}



/* ========================================

   Print Styles

   ======================================== */

@media print {

    .cafepoint-auth-image {

        display: none;

    }



    .cafepoint-auth-container {

        box-shadow: none;

    }

}



/* ========================================

   Accessibility Improvements

   ======================================== */



/* Screen reader only text */

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border-width: 0;

}



/* ========================================

   Loading State

   ======================================== */

.cafepoint-submit-btn.loading,

.cafepoint-apply-form .wpcf7-submit.loading {

    position: relative;

    color: transparent;

    pointer-events: none;

}



.cafepoint-submit-btn.loading::after,

.cafepoint-apply-form .wpcf7-submit.loading::after {

    content: "";

    position: absolute;

    width: 20px;

    height: 20px;

    top: 50%;

    left: 50%;

    margin-left: -10px;

    margin-top: -10px;

    border: 2px solid #ffffff;

    border-radius: 50%;

    border-top-color: transparent;

    animation: spinner 0.6s linear infinite;

}



@keyframes spinner {

    to {

        transform: rotate(360deg);

    }

}





.card-icon-wrapper .yith-wcwl-wishlistaddedbrowse .feedback {

    font-size: 0;

}



.card-icon-wrapper .yith-wcwl-wishlistaddedbrowse a {

    font-size: 0;

}



.card-icon-wrapper .yith-wcwl-wishlistaddedbrowse .feedback+a {

    display: none;

}



.card-icon-wrapper {

    position: absolute;

    right: 20px;

    top: 20px;

}