/**
 * Saved-shortlist — global header dropdown.
 *
 * The trigger lives in .dmc-header-right (header.php) and the entire
 * .dmc-saved shell ships with [hidden] in the markup. The companion
 * script flips [hidden] off only when localStorage has at least one
 * saved company, so every page where nothing's been saved looks
 * exactly as it did before this feature shipped.
 *
 * Scoping: nothing here cascades outside the .dmc-saved subtree, and
 * we don't depend on any of the page-level CSS variables, so this
 * sheet works on every theme page (front-page, single property,
 * country catalog, etc.) regardless of body class.
 */

/* ── Trigger button ────────────────────────────────────────────── */

.dmc-saved {
    position: relative;
    display: inline-block;
    /* Sits in the far-right slot after .dmc-cta-consultation; gap
       from the CTA on its left. No right margin — we want this
       flush with the header's right edge. */
    margin-left: 12px;
}
.dmc-saved[hidden] { display: none; }

/* Trigger — icon-only with a corner badge counter. The header
   background is navy across the site, so the icon goes white to
   share the hamburger's colour treatment. Compact on every breakpoint
   (no pill chrome, no separate count segment) — the gold dot in the
   top-right reads as a notification badge, same convention everyone
   recognises from inbox / cart icons. */
.dmc-saved-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 6px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    font: inherit;
    cursor: pointer;
    box-shadow: none;
    transition: background .15s ease, transform .15s ease;
}
.dmc-saved-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
}
.dmc-saved-trigger:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
.dmc-saved-trigger svg {
    width: 22px;
    height: 22px;
}
.dmc-saved-trigger .dmc-saved-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    background: #c9a227;
    color: #ffffff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    /* Thin ivory ring lifts the badge off the navy header so it
       stays legible regardless of header colour shifts. */
    box-shadow: 0 0 0 1.5px #ffffff;
}

/* Pulse on update — JS adds .is-pulsing for ~600ms after each store
   change so the user gets visual confirmation their save landed. */
@keyframes dmc-saved-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}
.dmc-saved-trigger.is-pulsing {
    animation: dmc-saved-pulse 0.45s ease;
}

/* ── Dropdown panel ────────────────────────────────────────────── */

.dmc-saved-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 400px;
    max-width: calc(100vw - 32px);
    background: #ffffff;
    border: 1px solid rgba(26, 37, 64, 0.12);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(26, 37, 64, 0.18),
                0 4px 12px rgba(26, 37, 64, 0.08);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: min(560px, calc(100vh - 120px));
    /* Hidden by default via [hidden]; JS toggles. Animation on open
       handled below via @starting-style fallback. */
}
.dmc-saved-dropdown[hidden] { display: none; }

/* Subtle slide-in. starting-style keeps the rule from running on
   every render, just on the [hidden] → visible transition. */
@keyframes dmc-saved-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dmc-saved-dropdown:not([hidden]) {
    animation: dmc-saved-dropdown-in 0.18s ease both;
}

.dmc-saved-dropdown-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(26, 37, 64, 0.08);
    flex-shrink: 0;
}
.dmc-saved-dropdown-title {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 700;
    color: #1a2540;
}
.dmc-saved-dropdown-sub {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}
.dmc-saved-clear {
    background: none;
    border: 0;
    padding: 4px 8px;
    color: #6b7280;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: color .15s ease, background .15s ease;
}
.dmc-saved-clear:hover {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.06);
}

.dmc-saved-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Custom thin scrollbar so it doesn't dominate the panel. */
    scrollbar-width: thin;
    scrollbar-color: rgba(26, 37, 64, 0.2) transparent;
}
.dmc-saved-list::-webkit-scrollbar { width: 6px; }
.dmc-saved-list::-webkit-scrollbar-thumb {
    background: rgba(26, 37, 64, 0.2);
    border-radius: 3px;
}

.dmc-saved-dropdown-foot {
    padding: 14px 18px;
    border-top: 1px solid rgba(26, 37, 64, 0.08);
    background: rgba(26, 37, 64, 0.025);
    color: #6b7280;
    font-size: 12px;
    flex-shrink: 0;
}

/* Hint state — fewer than 3 saved. Centred small text, no chrome. */
.dmc-saved-foot-hint {
    margin: 0;
    text-align: center;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.5;
}

/* Sent state — "Sent to X · Send again?". Within cooldown window. */
.dmc-saved-sent {
    text-align: center;
}
.dmc-saved-sent-line {
    margin: 0 0 6px;
    color: #1a2540;
    font-size: 13px;
    line-height: 1.4;
}
.dmc-saved-sent-line strong {
    color: #1a2540;
    font-weight: 700;
    word-break: break-all;
}
.dmc-saved-sent-check {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    background: #1d6e2f;
    color: #ffffff;
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
}
.dmc-saved-sent-label {
    color: #6b7280;
}
.dmc-saved-sent-again {
    background: none;
    border: 0;
    padding: 4px 8px;
    font: inherit;
    font-size: 12px;
    color: #c9a227;
    cursor: pointer;
    border-radius: 6px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.dmc-saved-sent-again:hover {
    color: #b58e1c;
    background: rgba(201, 162, 39, 0.08);
    text-decoration: none;
}

/* Email form — appears when 3+ saved AND past cooldown. */
.dmc-saved-email-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dmc-saved-email-label {
    font-size: 12px;
    font-weight: 600;
    color: #1a2540;
    line-height: 1.4;
}
.dmc-saved-email-input {
    padding: 9px 12px;
    border: 1px solid rgba(26, 37, 64, 0.18);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    color: #1a2540;
    background: #ffffff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dmc-saved-email-input:focus {
    outline: 0;
    border-color: #1a2540;
    box-shadow: 0 0 0 3px rgba(26, 37, 64, 0.12);
}
/* Invalid + shake feedback — same UX as the newsletter form in
   footer.php. is-invalid stays until the user starts fixing the
   field; .shake auto-removes after 500ms (set in JS). */
.dmc-saved-email-input.is-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
/* Invalid consent — full row gets red tint + outline so the
   checkbox feedback can't be missed in the cramped dropdown
   footer. Negative margin keeps the row's footprint identical to
   the valid state (no layout shift on toggle). */
.dmc-saved-email-consent.is-invalid {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.06);
    padding: 6px 8px;
    margin: -6px -8px;
    border-radius: 6px;
    border: 1px solid rgba(220, 38, 38, 0.35);
}
.dmc-saved-email-consent.is-invalid input[type="checkbox"] {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
    border-radius: 2px;
    accent-color: #dc2626;
}
.dmc-saved-email-consent.is-invalid a {
    color: #dc2626;
}
@keyframes dmc-shortlist-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-5px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(3px); }
}
.dmc-saved-email-form .shake {
    animation: dmc-shortlist-shake 0.5s ease;
}
.dmc-saved-email-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    line-height: 1.4;
    color: #6b7280;
    cursor: pointer;
}
.dmc-saved-email-consent input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #1a2540;
}
.dmc-saved-email-consent a {
    color: #1a2540;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.dmc-saved-email-consent a:hover {
    color: #c9a227;
}
.dmc-saved-email-submit {
    padding: 10px 14px;
    background: #c9a227;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.dmc-saved-email-submit:hover:not(:disabled) {
    background: #b58e1c;
    transform: translateY(-1px);
}
.dmc-saved-email-submit:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}
.dmc-saved-email-status {
    margin: 0;
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
    min-height: 14px;
}
.dmc-saved-email-status.is-error {
    color: #dc2626;
}
.dmc-saved-email-status.is-success {
    color: #1d6e2f;
}

/* ── Saved-card item ───────────────────────────────────────────── */

.dmc-saved-card {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 28px;
    column-gap: 12px;
    align-items: center;
    padding: 8px;
    border-radius: 10px;
    transition: background .15s ease;
}
.dmc-saved-card:hover {
    background: rgba(26, 37, 64, 0.04);
}

.dmc-saved-card-link {
    display: contents;
    color: inherit;
    text-decoration: none;
}

.dmc-saved-card-avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: rgba(26, 37, 64, 0.06);
    border-radius: 8px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    color: #1a2540;
}
.dmc-saved-card-avatar.is-monogram {
    background: linear-gradient(135deg, #1a2540 0%, #2c3e7d 100%);
    color: #ffffff;
}
.dmc-saved-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #ffffff;
    padding: 3px;
}

.dmc-saved-card-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dmc-saved-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #1a2540;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dmc-saved-card-meta {
    font-size: 11px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dmc-saved-card-services {
    font-size: 11px;
    color: #2c3e7d;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dmc-saved-card-remove {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    border-radius: 50%;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
}
.dmc-saved-card-remove:hover {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

/* Empty state — used briefly between "user clicked Clear all" and the
   panel auto-closing. Not the default — the entire .dmc-saved shell
   is hidden when there are zero items. */
.dmc-saved-list-empty {
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    padding: 24px 16px;
}

/* ── Mobile-row cluster ───────────────────────────────────────── */

/* Wraps the bookmark trigger + hamburger so they sit together on
   the right of the mobile header. The theme's existing layout puts
   .dmc-header-mobile-row in flex with space-between (logo left,
   actions right), so this just keeps the two icons adjacent inside
   that right slot. */
.dmc-header-mobile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dmc-saved-mobile {
    margin-left: 0;  /* the wrapper's gap handles spacing */
}

/* ── Mobile ────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .dmc-saved {
        margin-left: 8px;
    }
    .dmc-saved-mobile {
        margin-left: 0;
    }
    .dmc-saved-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        max-height: 80vh;
        border-radius: 16px 16px 0 0;
        animation-name: dmc-saved-dropdown-in-mobile;
    }
    @keyframes dmc-saved-dropdown-in-mobile {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}