/* Legacy receipt styles. The receipt layer (design-system/design-system.css,
   css/receipt/tokens.css, css/receipt/receipt.css and the package files)
   replaced everything package A's blocks and the page shell used; what is
   left here is only what blocks still on the old markup read: the card,
   its heading and title, the social icons, the dark "show details" button
   (terms, save card, verify identity), the rating comment box and the save
   card's header. Delete each rule once the last block using it moves over. */

.card {
    background-color: #FFFFFF !important;
    border-radius: 24px;
    box-shadow: 0 8px 24px 0 rgba(170, 170, 170, 0.12);
    min-width: min(337px, 100%);
    padding: 20px;
    /* min-width 100% + 20px padding with content-box made every card 40px wider
       than the column it sits in: clipped on one edge on a phone (FIX-receipt-page
       follow-up; .container got the same fix in #345). */
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 20px;
}

.card h2 {
    font-size: 18px;
    margin: 0;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 2px dotted #EDEDED;
}

.social-media-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.social-media-icons img {
    width: 30px;
    height: 30px;
}

.show-details-btn {
    background-color: #0A4584;
    color: white;
    border: none;
    padding: 15px;
    font-size: 14px;
    text-transform: none;
    display: flex;
    gap: 8px;
    align-items: center;
    border-radius: 20px;
    margin: 20px auto 0px;
    font-weight: 500;
}

.show-details-btn:hover {
    background-color: white;
    color: #0A4584;
    border: 1px solid #0A4584;
}

.show-details-btn.hide-details-btn {
    background-color: white;
    color: #0A4584;
    border: 1px solid #0A4584;
}

.show-details-btn.hide-details-btn:hover {
    background-color: #0A4584;
    color: white;
    border: none;
}

#comment {
    border-radius: 10px;
}

.title-header {
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    border-bottom: 2px dashed #EDEDED;
    padding-bottom: 20px;
    padding-top: 10px;
    color: #121212;
}

.card-header {
    border-bottom: 2px dashed #EDEDED;
    padding-bottom: 10px;
}