/* ==========================================================================
   Tropical Realty Costa Rica — saved properties + My Account

   The hearts and the email popup appear on both candidate designs, so, like
   chat.css, this carries its own tokens rather than borrowing site.css's
   --tr-* or site-alt.css's --dp-*. The account PAGE itself extends design A
   and picks up .tr-shell / .tr-section / .tr-form from site.css; only the
   handful of classes unique to it are defined here.
   ========================================================================== */

.tr-fav,
.tr-favpop,
.tr-account-grid {
    --fav-blue: #0090d2;
    --fav-teal: #16b5a8;
    --fav-red: #e8384f;
    --fav-ink: #0d2e3d;
    --fav-muted: #64808e;
    --fav-line: #e2edf2;
    --fav-grad: linear-gradient(120deg, var(--fav-teal), var(--fav-blue));
}

/* ------------------------------------------------------------ the heart --- */

/* On a card: bottom-right of the photo. The two top corners are already
   taken — the type tag sits top-left and the For sale / To lease badge
   top-right — so a heart up there lands on top of the badge. */
.tr-fav {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--fav-ink);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(13, 46, 61, .18);
    transition: transform .15s ease, background .15s ease, color .15s ease;
}

.tr-fav:hover { transform: scale(1.08); background: #fff; color: var(--fav-red); }
.tr-fav:disabled { opacity: .6; cursor: default; }

/* Belt and braces: a .tr-card-media descendant rule used to dim this to 30%
   and squash it, so the icon states its own size and opacity here. */
.tr-fav .tr-fav-icon {
    width: 18px;
    height: 18px;
    opacity: 1;
    fill: none;
    transition: fill .15s ease;
}

/* Saved: a solid red heart on a red-tinted disc, so it reads as "liked" at a
   glance across a grid rather than needing to be looked for. */
.tr-fav.is-saved {
    background: var(--fav-red);
    color: #fff;
    box-shadow: 0 2px 12px rgba(232, 56, 79, .45);
}

.tr-fav.is-saved:hover { background: var(--fav-red); color: #fff; }
.tr-fav.is-saved .tr-fav-icon { fill: currentColor; animation: trFavPop .3s ease; }

@keyframes trFavPop {
    0% { transform: scale(1); }
    45% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .tr-fav.is-saved .tr-fav-icon { animation: none; }
    .tr-fav:hover { transform: none; }
}

/* On a detail page: a full-width outline button under "Enquire". */
.tr-fav--block {
    position: static;
    bottom: auto;
    right: auto;
    width: 100%;
    height: auto;
    gap: .5rem;
    margin-top: .6rem;
    padding: .7rem 1.1rem;
    border: 1.5px solid var(--fav-line);
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: .93rem;
    font-weight: 600;
    box-shadow: none;
}

.tr-fav--block:hover { transform: none; border-color: var(--fav-red); }

/* The detail-page button keeps its white ground — it carries a text label, so
   the red heart and border are enough to show the state without shouting. */
.tr-fav--block.is-saved {
    border-color: var(--fav-red);
    background: rgba(232, 56, 79, .06);
    color: var(--fav-red);
    box-shadow: none;
}

.tr-fav--block.is-saved:hover { background: rgba(232, 56, 79, .1); color: var(--fav-red); }

/* ---------------------------------------------------------------- toast --- */

/* Shown when a save could not go through. A heart that does nothing, with no
   message at all, reads as a broken page. */
.tr-fav-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1070;
    max-width: calc(100vw - 32px);
    padding: .7rem 1.2rem;
    border-radius: 999px;
    background: #0d2e3d;
    color: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: .88rem;
    font-weight: 600;
    box-shadow: 0 16px 40px rgba(13, 46, 61, .34);
    transform: translateX(-50%);
    animation: trFavToast .25s ease both;
}

.tr-fav-toast[hidden] { display: none; }

@keyframes trFavToast {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translateX(-50%); }
}

/* ----------------------------------------------------------- the popup --- */

.tr-favpop {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.tr-favpop[hidden] { display: none; }
body.tr-favpop-open { overflow: hidden; }

.tr-favpop-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 30, 40, .55);
    animation: trFavFade .2s ease both;
}

.tr-favpop-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 2rem 1.75rem 1.5rem;
    border-radius: 20px;
    background: #fff;
    color: var(--fav-ink);
    box-shadow: 0 30px 80px rgba(13, 46, 61, .34);
    text-align: center;
    animation: trFavIn .28s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes trFavFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes trFavIn {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to { opacity: 1; transform: none; }
}

.tr-favpop-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f2f8fb;
    color: var(--fav-muted);
    cursor: pointer;
}

.tr-favpop-x:hover { background: var(--fav-line); color: var(--fav-ink); }

.tr-favpop-heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: .75rem;
    border-radius: 50%;
    background: rgba(232, 56, 79, .1);
    color: var(--fav-red);
}

.tr-favpop-card h2 { margin: 0 0 .5rem; font-size: 1.3rem; line-height: 1.25; }
.tr-favpop-intro { margin: 0 0 1.25rem; color: var(--fav-muted); font-size: .92rem; line-height: 1.55; }

.tr-favpop-form { text-align: left; }
.tr-favpop-label { display: block; margin-bottom: .35rem; font-size: .85rem; font-weight: 600; }

.tr-favpop-form input[type="email"] {
    width: 100%;
    padding: .7rem .9rem;
    border: 1.5px solid var(--fav-line);
    border-radius: 12px;
    background: #f7fbfd;
    color: var(--fav-ink);
    font-family: inherit;
    font-size: .95rem;
}

.tr-favpop-form input[type="email"]:focus {
    outline: 0;
    border-color: var(--fav-blue);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 144, 210, .14);
}

.tr-favpop-error { margin: .5rem 0 0; color: #d92d20; font-size: .84rem; font-weight: 600; }
.tr-favpop-error[hidden] { display: none; }

.tr-favpop-check {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: .9rem 0 1.1rem;
    font-size: .86rem;
    line-height: 1.45;
    cursor: pointer;
}

.tr-favpop-check input { margin-top: 2px; accent-color: var(--fav-blue); }
.tr-favpop-privacy { margin: .9rem 0 0; color: var(--fav-muted); font-size: .78rem; line-height: 1.5; text-align: center; }

/* ---------------------------------------------------- the account page --- */

.tr-account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
}

.tr-account-side { position: sticky; top: 24px; }

.tr-account-forget {
    display: block;
    margin-top: 1rem;
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
}

/* The details panel is a narrow sidebar column, so its fields stack tighter
   than the full-width contact form they share a style with. */
.tr-form--stack .tr-field-b { margin-bottom: .8rem; }
.tr-form--stack .tr-form-row { gap: 12px; margin-bottom: .8rem; }
.tr-form--stack .tr-form-row .tr-field-b { margin-bottom: 0; }

/* The email is the key the saved properties hang off, so it is shown but not
   editable here — Account::save() ignores any change to it. */
.tr-form--stack input[readonly] {
    background: #f2f8fb;
    color: var(--fav-muted, #64808e);
    cursor: not-allowed;
}

.tr-check {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: .3rem 0 1rem;
    font-size: .86rem;
    line-height: 1.45;
    cursor: pointer;
}

.tr-check input { margin-top: 2px; accent-color: var(--fav-blue, #0090d2); }

.tr-note {
    margin: 0 0 .9rem;
    padding: .6rem .85rem;
    border-radius: 10px;
    font-size: .87rem;
    font-weight: 600;
}

.tr-note--ok { background: rgba(22, 181, 168, .12); color: #0b6f67; }
.tr-note--bad { background: rgba(232, 56, 79, .1); color: #a3182c; }

@media (max-width: 900px) {
    .tr-account-grid { grid-template-columns: 1fr; }
    .tr-account-side { position: static; }
}