/* ============================================================
   TAAL+ Account Button
   Brand green: #8dc63f (adjust to match your exact shade)
   ============================================================ */

/* ── Variables ───────────────────────────────────────────── */
:root {
    --taal-green:       #ACC323;
    --taal-green-dark:  #ACC323;
    --taal-text:        #ffffff;
    --taal-radius:      4px;
    --taal-shadow:      0 6px 20px rgba(0,0,0,0.13);
}

/* ── Wrapper ─────────────────────────────────────────────── */
.taalplus-acct-wrap {
    position:    relative;
    display:     inline-block;
    font-family: inherit;
    z-index:     9990;
}

/* ── Trigger Button ──────────────────────────────────────── */
.taalplus-acct-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            7px;
    padding:        0px!important;
    background:     var(--taal-green);
    color:          var(--taal-text);
    border:         none;
    border-radius:  var(--taal-radius);
    font-size:      0.8125rem;   /* ~13px */
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor:         pointer;
    white-space:    nowrap;
    transition:     background 0.2s ease;
    line-height:    1;
}



/* person icon */
.taalplus-acct-icon {
    width:        17px;
    height:       17px;
    stroke:       currentColor;
    fill:         none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink:  0;
}


/* ── Dropdown Panel ──────────────────────────────────────── */
.taalplus-acct-dropdown {
    position:      absolute;
    top:           calc(100% + 10px);
    right:         0;
    width:         340px;
    background:    #ffffff;
    border-radius: 8px;
    border:        1px solid rgba(0,0,0,0.08);
    box-shadow:    var(--taal-shadow);
    z-index:       9999;

    /* Hidden state */
    opacity:       0;
    visibility:    hidden;
    transform:     translateY(-8px);
    transition:    opacity 0.2s ease, transform 0.2s ease,
                   visibility 0s linear 0.2s;

    /* Allow WC form to scroll on small screens */
    max-height:    85vh;
    overflow-y:    auto;
}

/* Visible state */
/* ── Hover trigger (replaces click/is-open logic) ────────── */

/* Open on button hover */
.taalplus-acct-wrap:hover .taalplus-acct-dropdown {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Keep open while hovering the dropdown itself */
.taalplus-acct-dropdown:hover {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
}

/* Rotate caret on hover */
.taalplus-acct-wrap:hover .taalplus-acct-caret {
    transform: rotate(180deg);
}

/* ── Bridge gap between button and dropdown ──────────────── */
/* Prevents dropdown from closing when mouse crosses the 10px gap */
.taalplus-acct-dropdown::after {
    content:  '';
    position: absolute;
    top:      -12px;   /* must cover the gap set in top: calc(100% + 10px) */
    left:     0;
    right:    0;
    height:   12px;
}

/* Arrow notch */
.taalplus-acct-dropdown::before {
    content:     '';
    position:    absolute;
    top:         -7px;
    right:       22px;
    width:       13px;
    height:      13px;
    background:  #fff;
    border-left: 1px solid rgba(0,0,0,0.08);
    border-top:  1px solid rgba(0,0,0,0.08);
    transform:   rotate(45deg);
}

/* ── Logged-in: Greeting ─────────────────────────────────── */
.taalplus-acct-greeting {
    padding:     14px 18px 10px;
    font-size:   0.875rem;
    color:       #555;
    border-bottom: 1px solid #f0f0f0;
}

/* ── Logged-in: Nav Links ────────────────────────────────── */
.taalplus-acct-nav {
    padding: 6px 0;
}

.taalplus-acct-nav a {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     11px 18px;
    color:       #333;
    font-size:   0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition:  background 0.15s ease, color 0.15s ease;
}

.taalplus-acct-nav a:hover {
    background: #f6f9f1;
    color:      var(--taal-green-dark);
}

.taalplus-acct-nav a svg {
    width:  16px;
    height: 16px;
    stroke: currentColor;
    fill:   none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.taalplus-acct-nav .taalplus-logout:hover {
    background: #fff5f5;
    color:      #c0392b;
}

/* ── Logged-out: WooCommerce Form Container ──────────────── */
.taalplus-wc-form {
    padding: 4px 0;
}

/*
 * Scope all overrides inside the dropdown so the rest of your
 * site's WC account page is unaffected.
 */

/* Remove the outer page wrapper padding WC adds */
.taalplus-wc-form .woocommerce {
    padding: 0 !important;
    margin:  0 !important;
}

/* The form-login.php template wraps content in .u-column1 / .u-column2 */
.taalplus-wc-form .woocommerce-page .u-column1,
.taalplus-wc-form .woocommerce-page .u-column2,
.taalplus-wc-form .u-column1,
.taalplus-wc-form .u-column2 {
    float:   none !important;
    width:   100% !important;
    padding: 0 !important;
}

/* Tab-style nav: "Sign in" | "Create an Account" */
.taalplus-wc-form .woocommerce-tabs,
.taalplus-wc-form nav.woocommerce-MyAccount-navigation {
    display: none; /* hide full account nav — we only want the form */
}

/* Main login form */
.taalplus-wc-form .woocommerce-form-login {
    padding:   18px 20px 16px;
    border:    none !important;
    box-shadow: none !important;
}

/* Inline "Sign in" / "Create an Account" toggle links */
.taalplus-wc-form .woocommerce-form-login__submit,
.taalplus-wc-form .woocommerce-form-register__submit {
    background:    var(--taal-green) !important;
    border:        none !important;
    border-radius: 30px !important;
    color:         #fff !important;
    font-weight:   700 !important;
    letter-spacing: 0.05em;
    padding:       12px 28px !important;
    width:         100%;
    cursor:        pointer;
    transition:    background 0.2s ease !important;
}

.taalplus-wc-form .woocommerce-form-login__submit:hover,
.taalplus-wc-form .woocommerce-form-register__submit:hover {
    background: var(--taal-green-dark) !important;
}

/* Labels */
.taalplus-wc-form label {
    font-size:   0.8125rem;
    font-weight: 600;
    color:       #333;
}

/* Inputs */
.taalplus-wc-form input[type="text"],
.taalplus-wc-form input[type="email"],
.taalplus-wc-form input[type="password"] {
    border:        1px solid #ddd !important;
    border-radius: 4px !important;
    padding:       9px 12px !important;
    font-size:     0.875rem !important;
    width:         100% !important;
    box-sizing:    border-box !important;
    transition:    border-color 0.15s ease !important;
}

.taalplus-wc-form input[type="text"]:focus,
.taalplus-wc-form input[type="email"]:focus,
.taalplus-wc-form input[type="password"]:focus {
    border-color: var(--taal-green) !important;
    outline:      none !important;
    box-shadow:   0 0 0 3px rgba(141,198,63,0.15) !important;
}

/* "Lost your password?" link */
.taalplus-wc-form .lost_password a,
.taalplus-wc-form .woocommerce-LostPassword a {
    color:       var(--taal-green-dark);
    font-size:   0.8rem;
    font-weight: 500;
}

/* "Create an Account" link below the form */
.taalplus-wc-form .woocommerce-form-login .register-link,
.taalplus-wc-form .woocommerce-form-login ~ .woocommerce-form-register {
    border-top: 1px solid #f0f0f0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media ( max-width: 480px ) {
    .taalplus-acct-dropdown {
        width:  92vw;
        right:  -10px;
    }
    .taalplus-acct-label {
        display: none;
    }
    .taalplus-acct-btn {
        padding: 0px;
    }
}

/* ── Logged-in dropdown: narrower width ──────────────────── */
.taalplus-acct-wrap.is-logged-in .taalplus-acct-dropdown {
    width: 250px;
}