/* Reset para página da categoria */
body.riviu-links-page {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    background-color: var(--riviu-theme-color, #25D366);
    background-image: var(--riviu-theme-gradient, none);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Public Container */
.riviu-links-container {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Ensure no background breaks the continuity */
    background: transparent;
}

/* Header */
.riviu-header {
    text-align: center;
    width: 100%;
    padding: 40px 20px 20px;
    color: var(--riviu-title-color, #ffffff) !important; /* Default to white */
    position: relative;
    /* Remove background config from here so it uses body's */
    background: transparent;
    box-shadow: none;
    margin: 0;
    border: none;
    flex-shrink: 0;
}

.riviu-title {
    /* Match Print 2 font style - looks like a Serif or Slab Serif */
    font-family: "Rockwell", "Courier New", Courier, "Georgia", serif !important;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--riviu-title-color, #ffffff) !important;
    font-size: var(--riviu-title-font-size, 24px) !important;
    line-height: 1.2;
}

.riviu-description {
    color: var(--riviu-desc-color, #ffffff) !important; /* Default to white */
    font-size: var(--riviu-desc-font-size, 16px) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin-bottom: 16px;
    opacity: 0.95;
}

/* Remove overlay specific styles that might create visual separation */
.riviu-header-overlay {
    display: none; 
}

/* Conteúdo do header */
.riviu-header-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    margin: 0 auto;
    width: 100%;
}

/* Social Icons */
.riviu-socials {
    display: flex;
    justify-content: center;
    gap: 20px; /* Spaced out nicely */
    margin-top: 15px;
    flex-wrap: wrap;
}

.riviu-social {
    color: #ffffff !important; /* Force white */
    opacity: 0.9;
    transition: opacity 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

.riviu-social:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.riviu-social svg {
    width: 26px !important; /* Override inline width for visibility */
    height: 26px !important;
}

/* Profile Image */
.riviu-profile-image {
    width: 96px;
    height: 96px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background: #fff;
}

/* Content Area */
.riviu-content-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 10px 20px 40px;
    box-sizing: border-box;
    flex: 1;
}

/* Search Bar */
.riviu-search-container {
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    z-index: 5;
}

#riviu-search-input,
.riviu-search-input {
    width: 100%;
    padding: 16px 20px 16px 45px;
    border-radius: 12px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    line-height: normal;
    color: #333;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    box-sizing: border-box;
    outline: none;
}

#riviu-search-input:focus,
.riviu-search-input:focus {
    background: #ffffff;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.riviu-search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    z-index: 10;
    margin: 0;
    padding: 0;
}

.riviu-no-search-results {
    font-family: inherit;
    font-size: 15px;
    padding: 20px;
    background: rgba(0,0,0,0.1);
    border-radius: 8px;
}

/* Link Cards */
.riviu-link-card {
    display: flex; /* Changed to flex to allow vertical centering if height is fixed */
    align-items: center;
    box-sizing: border-box;
    /* Solid background for buttons - ensure it is flat */
    background-color: var(--riviu-button-bg-color, var(--riviu-card-bg, #ffffff)) !important;
    background-image: none !important; /* Remove any default gradients causing split lines */
    border: none !important; 
    border-radius: 12px !important; /* Rounded rectangle like Print 2 */
    margin: 0 0 12px !important; /* Tighter spacing */
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.2s;
    text-decoration: none !important;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important; /* Softer shadow */
    width: 100% !important;
    color: inherit !important;
    z-index: 1;
    /* Use Fixed height if set, otherwise min-height based on content */
    min-height: var(--riviu-button-height, calc(var(--riviu-image-size, 48px) + 16px)); 
    height: var(--riviu-button-height, auto);
}

.riviu-search-hidden {
    display: none !important;
}

/* Kill any pseudo-elements creating gloss/lines */
.riviu-link-card::after,
.riviu-link-card::before {
    display: none !important;
    content: none !important;
    background: none !important;
}

.riviu-link-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.12) !important;
}

.riviu-link-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* Distribute items: Image+Text .... Arrow */
    padding: var(--riviu-button-padding, 8px) !important; /* User controlled padding */
    width: 100% !important;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    height: 100%;
}

.riviu-link-image {
    width: var(--riviu-image-size, 48px) !important; /* Use variable for size control */
    height: var(--riviu-image-size, 48px) !important;
    flex-shrink: 0;
    border-radius: 8px !important; /* Slightly rounded square */
    overflow: hidden;
    background: transparent;
    margin-right: 12px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.riviu-link-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.riviu-link-details {
    flex: 1;
    min-width: 0; /* CRITICAL for flexbox text wrapping */
    text-align: var(--riviu-button-text-align, left) !important; /* Dynamic alignment */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: var(--riviu-button-align-items, flex-start) !important; /* Dynamic item alignment */
    padding: 0 4px; /* Small padding */
}

.riviu-link-title {
    font-size: var(--riviu-button-font-size, 15px) !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: var(--riviu-button-text-color, #333333) !important;
    /* Force text wrapping */
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
    display: block !important;
    width: 100%;
}

.riviu-link-desc {
    font-size: 12px !important;
    color: var(--riviu-button-text-color, #333333) !important;
    opacity: 0.85;
    margin: 2px 0 0 !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
    display: block !important;
    width: 100%;
}

/* If image exists, align text left */
.riviu-link-image + .riviu-link-details {
    text-align: left !important;
}

/* Arrow removed - allowing text to use full width */
.riviu-link-arrow {
    display: none !important;
}

/* 
   Spacer to balance the image on the left.
   We use a smaller width (20px) to allow text to extend further to the right,
   while keeping some balance.
*/
.riviu-list .riviu-link-content::after {
    content: "";
    display: block;
    width: 20px !important; 
    flex-shrink: 9999 !important; /* Collapse aggressively for long text */
    min-width: 0 !important;
    margin-left: 0 !important; 
    visibility: hidden;
    height: 1px;
}


/* Grid Layout overrides */
.riviu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.riviu-grid .riviu-link-card {
    border-radius: 16px; /* Rounded rect for grid */
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.riviu-grid .riviu-link-content {
    flex-direction: column;
    padding: 24px 16px;
    text-align: center !important;
    flex: 1;
    align-items: center !important;
}

.riviu-grid .riviu-link-image {
    margin: 0 0 16px 0 !important;
    width: 64px !important;
    height: 64px !important;
}

.riviu-grid .riviu-link-details {
    text-align: center !important;
    align-items: center !important;
}

.riviu-grid .riviu-link-arrow {
    display: none;
}

/* Footer */
.riviu-footer {
    text-align: center;
    padding: 30px 0;
    font-size: 12px;
    opacity: 0.5;
    color: rgba(255,255,255,0.8);
    margin-top: auto;
}

/* Mobile */
@media (max-width: 480px) {
    .riviu-links-container {
        padding: 0;
    }

    .riviu-content-area {
        padding: 20px 20px 40px !important; /* Safe horizontal padding */
    }

    .riviu-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
}