/* ============================================================
   CMS OBJECT: Contact Block
   Views: _ContactBlock.cshtml, _Contacts.cshtml
   Dependencies: Bootstrap 5, icon font classes
   Dynamic content values remain inline in the Razor view.
   ============================================================ */

.cms-contact-block {
    max-width: 1200px;
}

.cms-contact-block__contact {
    color: #444;
}

.cms-contact-block__contact:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

.cms-contact-block__flag {
    width: 24px;
}

.cms-contact-block__link-icon {
    width: 30px;
}

.cms-contact-block__header-image {
    height: 35px;
}

/* Bootstrap handles the collapse; this keeps the CMS arrow animation. */
.cms-contact-block__toggle::after {
    display: none !important;
}

.cms-contact-block__arrow-wrapper {
    width: 24px;
    height: 32px;
}

.cms-contact-block__arrow {
    transition: transform .3s ease;
}

.cms-contact-block__toggle[aria-expanded="true"] .cms-contact-block__arrow {
    transform: rotate(180deg);
}

/* Editing actions are revealed on hover and remain visible on touch devices. */
.cms-contact-block__actions {
    visibility: hidden;
}

.cms-contact-block__item:hover .cms-contact-block__actions,
.cms-contact-block__contact:hover .cms-contact-block__actions {
    visibility: visible;
}

@media (hover: none) and (pointer: coarse) {
    .cms-contact-block__actions {
        visibility: visible !important;
    }
}

.cms-contact-block__selection {
    min-height: 80vh;
    padding: 20px 0 60px;
    background-color: #fafafa;
    border-bottom: 3px solid #dee2e6;
    margin-bottom: 40px;
    position: relative;
}

.cms-contact-block__selection::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f58025, transparent);
    box-shadow: 0 2px 8px rgba(245, 128, 37, .3);
}

.cms-contact-block__selection-card {
    transition: all .3s ease;
    border: 2px solid #e9ecef !important;
    border-radius: 8px;
    position: relative;
    margin-top: 20px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.cms-contact-block__selection-card:hover {
    box-shadow: 0 8px 25px rgba(245, 128, 37, .15);
    border-color: #f58025 !important;
    transform: translateY(-2px);
}

.cms-contact-block__selection-card::before {
    content: "Contact Preview";
    position: absolute;
    top: -12px;
    left: 20px;
    background: white;
    padding: 4px 12px;
    font-size: .85rem;
    color: #6c757d;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-weight: 500;
    z-index: 15;
}

.cms-contact-block__add-action {
    position: absolute;
    top: 15px;
    right: 15px;
    display: none;
    color: #f58025;
    background: white;
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    transition: all .2s ease;
    z-index: 20;
}

.cms-contact-block__add-action:hover {
    color: white;
    background: #f58025;
    transform: scale(1.1);
}

.cms-contact-block__selection-card:hover .cms-contact-block__add-action {
    display: block;
}

.cms-contact-block__selection .cms-contact-block__contact {
    padding: 10px 0;
}

.cms-contact-block__selection-flag img {
    max-height: 30px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}

.cms-contact-block__selection-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-top: 8px;
}

.cms-contact-block__selection-email a,
.cms-contact-block__selection-website a {
    color: #f58025;
    text-decoration: none;
}

.cms-contact-block__selection-email a:hover,
.cms-contact-block__selection-website a:hover {
    color: #d86f1a;
    text-decoration: underline;
}

.cms-contact-block__editor-image-preview {
    max-width: 60px;
    max-height: 60px;
    border: 2px solid #ddd;
    border-radius: 4px;
    margin-left: 10px;
}

@media (max-width: 767.98px) {
    .cms-contact-block__add-action {
        display: block;
    }
}