@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
    :root {
      --purple:   hsl(263, 64%, 48%);
      --purple-alt: hsl(263, 64%, 40%);
      --teal:     hsl(174, 60%, 38%);
      --teal-alt: hsl(174, 60%, 30%);
      --border:   hsl(0, 0%, 28%);
      --title:    hsl(0, 0%, 95%);
      --muted:    hsl(0, 0%, 52%);
      --bg:       #F3E4C9;
      --surface:  hsl(0, 0%, 9%);
      --font:     "Syne", sans-serif;
      --font-alt: "Montserrat", sans-serif;
      --r:        2.4rem;
      --dur:      0.7s;
      --ease:     cubic-bezier(0.77, 0, 0.18, 1);
    }
 
    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--muted);
      min-height: 100vh;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
 
    /* ── CARD ── */
    .auth-card {
      position: relative;
      width: min(920px, 96vw);
      height: 560px;
      border-radius: var(--r);
      overflow: hidden;
      box-shadow: 0 12px 64px hsla(263,60%,3%,0.8);
    }
 
    /* ── SLIDING TRACK (customer ↔ owner) ── */
    .track {
      display: flex;
      width: 200%; height: 100%;
      transition: transform var(--dur) var(--ease);
    }
    .auth-card.shop-mode .track { transform: translateX(-50%); }
 
    /* ── SCREEN ── */
    .screen {
      flex: 0 0 50%; height: 100%;
      display: grid; grid-template-columns: 1fr 1fr;
    }
 
    /* ── IMAGE PANE ── */
    .img-pane {
      position: relative; overflow: hidden;
      background: hsl(0,0%,5%);
    }
    .img-pane img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; opacity: 0.48;
    }
    .img-pane::after {
      content: ''; position: absolute; inset: 0; z-index: 1;
    }
    .screen-customer .img-pane::after {
      background: linear-gradient(160deg, hsla(263,60%,12%,0.4) 0%, hsla(263,60%,4%,0.9) 100%);
    }
    .screen-owner .img-pane::after {
      background: linear-gradient(160deg, hsla(174,55%,10%,0.4) 0%, hsla(174,55%,4%,0.9) 100%);
    }
    .img-body {
      position: relative; z-index: 2; height: 100%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: flex-end;
      padding: 2.5rem 2rem; gap: .9rem; text-align: center;
    }
    .img-badge {
      display: inline-flex; align-items: center; gap: .4rem;
      padding: .32rem .95rem; border-radius: 3rem;
      font-size: .69rem; font-weight: 700;
      letter-spacing: .07em; text-transform: uppercase;
      border: 1.5px solid rgba(255,255,255,0.2);
      color: rgba(255,255,255,0.7);
    }
    .img-tag {
      font-size: 1.08rem; font-weight: 800;
      color: var(--title); line-height: 1.4;
    }
    .img-sub {
      font-family: var(--font-alt);
      font-size: .71rem; color: hsl(0,0%,66%); line-height: 1.55;
    }
    .img-toggle-btn {
      padding: .6rem 2rem; border-radius: 3rem;
      border: 2px solid rgba(255,255,255,0.3);
      background: transparent; color: var(--title);
      font-family: var(--font); font-size: .8rem; font-weight: 700;
      letter-spacing: .05em; cursor: pointer; margin-top: .3rem;
      transition: background .28s, border-color .28s, transform .18s;
    }
    .img-toggle-btn:hover {
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.65);
      transform: scale(1.04);
    }
 
    /* ── FORM PANE (the white-ish panel) ── */
    .form-pane {
      background: var(--surface);
      position: relative; overflow: hidden;
      /* no padding here — inner views handle it */
    }
    .form-pane::before {
      content: '';
      position: absolute; top: -70px; right: -70px;
      width: 200px; height: 200px; border-radius: 50%;
      pointer-events: none; z-index: 0;
    }
    .screen-customer .form-pane::before {
      background: radial-gradient(circle, hsla(263,64%,48%,0.11) 0%, transparent 70%);
    }
    .screen-owner .form-pane::before {
      background: radial-gradient(circle, hsla(174,60%,38%,0.12) 0%, transparent 70%);
    }
 
    /* ── INNER VIEWS (login / register stacked) ── */
    /* Each .view fills the pane absolutely; only one visible at a time */
    .view {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; justify-content: center;
      padding: 2.75rem 3rem 2.25rem;
      z-index: 1;
      /* default: hidden below */
      opacity: 0;
      transform: translateY(24px);
      pointer-events: none;
      transition: opacity .38s ease, transform .38s ease;
    }
    .view.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: all;
    }
    /* register view slides up from below when opening */
    .view.reg-view.active {
      transform: translateY(0);
    }
 
    /* ── ROLE CHIP ── */
    .role-chip {
      display: inline-flex; align-items: center; gap: .4rem;
      padding: .28rem .9rem; border-radius: 3rem;
      font-size: .67rem; font-weight: 700;
      letter-spacing: .07em; text-transform: uppercase;
      margin-bottom: .9rem; width: fit-content;
    }
    .role-chip.customer {
      background: hsla(263,64%,48%,0.13); color: hsl(263,64%,72%);
      border: 1px solid hsla(263,64%,48%,0.28);
    }
    .role-chip.owner {
      background: hsla(174,60%,38%,0.13); color: hsl(174,60%,60%);
      border: 1px solid hsla(174,60%,38%,0.28);
    }
 
    .form-title {
      font-size: clamp(1.2rem, 2.3vw, 1.65rem);
      color: var(--title); font-weight: 800;
      margin-bottom: 1.5rem; line-height: 1.2;
    }
 
    /* ── FIELDS ── */
    .field-group { display: grid; row-gap: .75rem; margin-bottom: .55rem; }
 
    .field {
      position: relative; height: 52px;
      border: 1.5px solid var(--border); border-radius: 4rem;
      display: flex; align-items: center;
      background: var(--surface);
      transition: border-color .25s;
      isolation: isolate;
    }
    .screen-customer .field:focus-within { border-color: var(--purple); }
    .screen-owner    .field:focus-within { border-color: var(--teal); }
 
    .field i {
      position: absolute; left: 1.1rem;
      font-size: 1.15rem; color: var(--muted);
      font-weight: initial; pointer-events: none;
    }
    .field label {
      position: absolute; left: 2.9rem;
      font-size: .83rem; color: var(--muted);
      transition: opacity .25s; pointer-events: none;
    }
    .field input {
      width: 100%; height: 100%;
      padding-left: 2.9rem; padding-right: 1rem;
      background: transparent; color: var(--title);
      font-family: var(--font); font-size: .85rem; font-weight: 600;
      border: none; outline: none;
      position: relative; z-index: 1;  /* ADD THIS */
    }
    .field input:focus + label,
    .field input:not(:placeholder-shown) + label { opacity: 0; }
    .field input:-webkit-autofill { -webkit-transition: background-color 6000s, color 6000s; }
    .field input.has-eye {padding-right: 3rem;}

    
    .eye-btn {
      position: absolute;
      top: 50%;
      right: 1.2rem;
      transform: translateY(-50%);
      background: none; border: none; cursor: pointer;
      color: var(--muted); font-size: 1.1rem;
      display: flex; align-items: center;
      transition: color .2s; padding: 0;
      z-index: 2;  /* HIGHER than input's z-index: 1 */
    }
    .eye-btn:hover { color: var(--title); }
 
    .forgot {
      display: block; width: max-content;
      margin: .15rem 0 1.2rem auto;
      font-size: .72rem; color: var(--muted);
      text-decoration: none; transition: color .2s;
    }
    .forgot:hover { color: var(--title); }
 
    /* social icons removed */
 
    /* ── SUBMIT ── */
    .submit-btn {
      width: 100%; height: 50px; border: none; border-radius: 4rem;
      font-family: var(--font); font-size: .88rem; font-weight: 700;
      color: var(--title);
      display: flex; align-items: center; justify-content: center; gap: .5rem;
      cursor: pointer; margin-bottom: .8rem;
      transition: filter .25s, transform .18s;
    }
    .submit-btn i { font-size: 1.15rem; font-weight: initial; }
    .submit-btn:hover { filter: brightness(1.13); transform: scale(1.02); }
    .submit-btn.c-btn { background: var(--purple); }
    .submit-btn.o-btn { background: var(--teal); }
 
    .form-foot {
      text-align: center; font-size: .73rem; color: var(--muted);
    }
    .form-foot a {
      color: var(--title); text-decoration: underline;
      text-underline-offset: 3px; cursor: pointer;
    }
 
    .owner-note {
      margin-top: .5rem; padding: .55rem .9rem; border-radius: .65rem;
      background: hsla(174,60%,38%,0.07);
      border: 1px solid hsla(174,60%,38%,0.18);
      font-family: var(--font-alt);
      font-size: .64rem; color: hsl(174,60%,55%);
      line-height: 1.5; text-align: center;
    }
    .mobile-role-bar {
    display: none;
  }
    /* Add this to your existing CSS (outside any media query) */
    @keyframes mobileSlideIn {
        from { opacity: 0; transform: translateX(30px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    @keyframes mobileSlideInLeft {
        from { opacity: 0; transform: translateX(-30px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    @keyframes mobilePaneBg {
        from { transform: scale(1);    opacity: 0.05; }
        to   { transform: scale(1.06); opacity: 0.10; }
    }
    .mobile-slide-in {
        animation: mobileSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .mobile-slide-in-left {
        animation: mobileSlideInLeft 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    
   @media (max-width: 640px) {

     body {
        overflow-y: auto;
        align-items: center;
        justify-content: center;        /* CHANGE: was flex-start */
        flex-direction: column;
        padding: 24px 0 40px;
        min-height: 100vh;
    }

    /* Give the card a natural top margin so it feels centered */
    .auth-card {
        width: 92vw;
        height: auto;
        border-radius: 1.4rem;
        overflow: hidden;
        margin: auto 0;                 /* ADD: push card to true center */
    }

    .track {
        width: 200%;
        height: auto;
    }

    .auth-card.shop-mode .track {
        transform: translateX(-50%);
    }

    .screen {
        flex: 0 0 50%;
        height: auto;
        display: block;
    }

    .img-pane { display: none; }

    /* Mobile: show image as subtle background on the form pane */
    .form-pane {
        position: relative;
        background: var(--surface);
        isolation: isolate;
    }

    /* Inject the background image via pseudo-element so it doesn't affect layout */
    .screen-customer .form-pane::after {
        content: '';
        position: absolute;
        inset: 0;
        background: url('../img/login-bg.jpg') center/cover no-repeat;
        opacity: 0.07;  /* very subtle so text stays readable */
        z-index: -1;
        animation: mobilePaneBg 8s ease-in-out infinite alternate;
        pointer-events: none;
    }

    .screen-owner .form-pane::after {
        content: '';
        position: absolute;
        inset: 0;
        background: url('../img/logincafe-bg.jpg') center/cover no-repeat;
        opacity: 0.07;
        z-index: -1;
        animation: mobilePaneBg 8s ease-in-out infinite alternate;
        pointer-events: none;
    }

    .view {
        position: relative;
        inset: auto;
        display: none;
        opacity: 1;
        transform: none;
        pointer-events: none;
        padding: 2rem 1.6rem 2.4rem;
        transition: none;
        overflow: hidden;
        min-height: 0;
    }

    .view.active {
        display: flex;
        pointer-events: all;
    }

    .form-pane {
    position: relative;
    background: var(--surface);
    isolation: isolate;
    height: auto;        /* ADD */
    min-height: 0;       /* ADD */
}

    /* ADD THIS — screen should not stretch beyond its content */
    .screen {
        flex: 0 0 50%;
        height: auto;
        display: block;
        overflow: hidden;    /* ADD */
    }
    .field { height: 48px; }
    .submit-btn { height: 46px; }
    .form-title { font-size: 1.4rem; margin-bottom: 1.1rem; }
    .field-group { row-gap: 0.65rem; }

    /* ── Mobile role switcher bar — sits ABOVE the card ── */
    .mobile-role-bar {
        display: flex !important;
        width: 92vw;
        margin-bottom: 14px;
        flex-shrink: 0;  
        background: hsl(0,0%,13%);
        border-radius: 3rem;
        padding: 5px;
        gap: 6px;
    }

    .mobile-role-bar button {
        flex: 1;
        padding: 11px;
        border: none;
        border-radius: 3rem;
        font-family: var(--font);
        font-size: .82rem;
        font-weight: 700;
        letter-spacing: .04em;
        cursor: pointer;
        background: transparent;
        color: var(--muted);
        transition: background .3s, color .3s;
    }

    .mobile-role-bar button.c-role.active-role {
        background: var(--purple);
        color: #fff;
    }

    .mobile-role-bar button.o-role.active-role {
        background: var(--teal);
        color: #fff;
    }
}

/* ── Landscape mobile ── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {

    body {
        overflow-y: auto;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        padding: 12px 0 24px;
    }

    .auth-card {
        width: 94vw;
        height: auto;
        border-radius: 1.2rem;
    }

    .track { width: 200%; height: auto; }
    .auth-card.shop-mode .track { transform: translateX(-50%); }

    .screen { flex: 0 0 50%; height: auto; display: block; overflow: hidden; }
    .img-pane { display: none; }

    /* Mobile: show image as subtle background on the form pane */
    .form-pane {
        position: relative;
        background: var(--surface);
        isolation: isolate;
        height: auto;        /* ADD */
        min-height: 0;  
    }

    /* Inject the background image via pseudo-element so it doesn't affect layout */
    .screen-customer .form-pane::after {
        content: '';
        position: absolute;
        inset: 0;
        background: url('../img/login-bg.jpg') center/cover no-repeat;
        opacity: 0.07;  /* very subtle so text stays readable */
        z-index: -1;
        animation: mobilePaneBg 8s ease-in-out infinite alternate;
        pointer-events: none;
    }

    .screen-owner .form-pane::after {
        content: '';
        position: absolute;
        inset: 0;
        background: url('../img/logincafe-bg.jpg') center/cover no-repeat;
        opacity: 0.07;
        z-index: -1;
        animation: mobilePaneBg 8s ease-in-out infinite alternate;
        pointer-events: none;
    }

    .view {
        position: relative;
        inset: auto;
        display: none;
        opacity: 1;
        transform: none;
        pointer-events: none;
        padding: 1.2rem 1.6rem 1.6rem;
        transition: none;
        overflow: hidden;
        min-height: 0;
    }

    .view.active { display: flex; pointer-events: all; }

    .field { height: 42px; }
    .submit-btn { height: 40px; }
    .form-title { font-size: 1.2rem; margin-bottom: 0.8rem; }
    .field-group { row-gap: 0.5rem; margin-bottom: 0.3rem; }
    .forgot { margin-bottom: 0.7rem; }
    .role-chip { margin-bottom: 0.5rem; }

    .mobile-role-bar {
        display: flex !important;
        width: 94vw;
        margin-bottom: 10px;
        background: hsl(0,0%,13%);
        border-radius: 3rem;
        padding: 4px;
        gap: 5px;
    }

    .mobile-role-bar button {
        flex: 1;
        padding: 8px;
        border: none;
        border-radius: 3rem;
        font-family: var(--font);
        font-size: .75rem;
        font-weight: 700;
        cursor: pointer;
        background: transparent;
        color: var(--muted);
        transition: background .3s, color .3s;
    }

    .mobile-role-bar button.c-role.active-role { background: var(--purple); color: #fff; }
    .mobile-role-bar button.o-role.active-role { background: var(--teal); color: #fff; }
}