/* ============================================================
   Google Reviews Directory — Main Stylesheet
   All colors driven by CSS custom properties (--grd-*).
   Admin settings inject variable overrides via wp_head.
   Elementor per-widget selectors override on top.
   ============================================================ */

/* ── Default variable values ── */
.google-reviews-directory-container,
.google-reviews-multiple-item {
    --grd-container-bg:           #ffffff;
    --grd-container-border:       #dddddd;
    --grd-header-bg:              #000000;
    --grd-accent:                 #0066cc;
    --grd-company-text:           #ffffff;
    --grd-business-name:          #0066cc;
    --grd-icon-color:             #0066cc;
    --grd-rating-number:          #0066cc;
    --grd-review-count:           rgba(255,255,255,0.85);
    --grd-review-bg:              #ffffff;
    --grd-review-text:            #333333;
    --grd-reviewer-name:          #333333;
    --grd-meta-text:              #666666;
    --grd-border:                 #eeeeee;
    --grd-stars:                  #0066cc;
    --grd-stars-empty:            #dddddd;
    --grd-learn-more-color:       #0066cc;
    --grd-learn-more-bg:          transparent;
    --grd-learn-more-border:      #0066cc;
    --grd-learn-more-hover-color: #ffffff;
    --grd-learn-more-hover-bg:    #0066cc;
    --grd-featured-bg:            #0066cc;
    --grd-featured-text:          #ffffff;
    --grd-featured-icon:          #ffffff;
    --grd-featured-card-bg:       #f0f8ff;
    --grd-featured-border:        #0066cc;
    --grd-featured-shadow:        #0066cc;
    --grd-featured-border-width:  2px;
    --grd-featured-shadow-val:    0 8px 20px -4px;
    --grd-featured-scale:         1.03;
    --grd-logo-border:            #ffffff;
}

/* ── Container ── */
.google-reviews-directory-container {
    background:    var(--grd-container-bg);
    border:        1px solid var(--grd-container-border);
    border-radius: 12px;
    overflow:      hidden;
    box-shadow:    0 4px 6px rgba(0,0,0,0.1);
    font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height:   1.6;
    color:         var(--grd-review-text);
}
/* Inside multi-listing cards the outer item provides border/shadow */
.google-reviews-multiple-item .google-reviews-directory-container {
    border:        none;
    border-radius: 0;
    box-shadow:    none;
}

/* ── Cover & Logo ── */
.company-cover-container {
    position:   relative;
    width:      100%;
    height:     150px;
    overflow:   hidden;
    background: #f5f5f5;
}
.company-cover-image { width: 100%; height: 100%; object-fit: cover; }
/* Logo sits between cover and header in DOM order.
   margin-top:-40px pulls it up so it straddles the cover bottom edge.
   z-index:5 keeps it visually above both cover and header.
   The gradient makes the top half transparent (over the cover image)
   and the bottom half match the header bg (eliminating the gap). */
.company-logo-container {
    display:         flex;
    justify-content: center;
    position:        relative;
    margin-top:      -40px;
    margin-bottom:   -20px;
    z-index:         5;
    background:      linear-gradient(to bottom, transparent 50%, var(--grd-header-bg) 50%);
}
/* Logo-only (no cover photo): just show centred with top padding */
.company-logo-container.company-logo-only {
    margin-top:  0;
    padding-top: 20px;
    background:  var(--grd-header-bg);
}
.company-logo-image {
    width:         80px !important;
    height:        80px !important;
    border-radius: 50% !important;
    border:        3px solid var(--grd-logo-border, #ffffff) !important;
    background:    var(--grd-logo-border, #ffffff);
    box-shadow:    0 2px 8px rgba(0,0,0,0.2) !important;
    object-fit:    cover !important;
    display:       block;
    max-width:     none !important;
}

/* ── Company Header ── */
.company-header {
    background:    var(--grd-header-bg);
    color:         var(--grd-company-text);
    padding:       20px;
    border-bottom: 3px solid var(--grd-accent);
    position:      relative;
}
/* has-logo: logo overlaps top of header by ~20px; padding clears it */
.company-header.has-logo { padding-top: 30px; }

.company-name {
    font-size:   1.5em;
    font-weight: 700;
    margin:      0 0 10px 0;
    color:       var(--grd-business-name);
    line-height: 1.3;
}

.company-address,
.company-website,
.company-phone {
    margin:      8px 0;
    font-size:   0.9em;
    display:     flex;
    align-items: center;
    gap:         8px;
}
.company-address i,
.company-website i,
.company-phone i { color: var(--grd-icon-color); width: 16px; text-align: center; }

.company-address a,
.company-website a,
.company-phone a { color: var(--grd-company-text); text-decoration: none; transition: color 0.3s ease; }
.company-address a:hover,
.company-website a:hover,
.company-phone a:hover { color: var(--grd-accent); }

/* ── Rating ── */
.rating-summary { margin-top: 15px; display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.average-rating  { display: flex; align-items: center; gap: 8px; }
.rating-stars    { color: var(--grd-stars); font-size: 1.1em; }
.rating-number   { font-weight: 700; font-size: 1.2em; color: var(--grd-rating-number); }
.total-reviews   { font-size: 0.9em; color: var(--grd-review-count); opacity: 0.9; text-decoration: none; transition: opacity 0.3s ease; }
.total-reviews:hover { opacity: 1; text-decoration: underline; }

/* ── Stars ── */
.fa-star,
.fa-star-half-alt { color: var(--grd-stars) !important; }
.far.fa-star      { color: var(--grd-stars-empty) !important; }

/* ── Learn More ── */
.learn-more-container { margin-top: 15px; text-align: center; }
.learn-more-link {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    color:           var(--grd-learn-more-color);
    text-decoration: none;
    font-weight:     500;
    transition:      all 0.3s ease;
    padding:         8px 16px;
    border:          2px solid var(--grd-learn-more-border);
    border-radius:   6px;
    background:      var(--grd-learn-more-bg);
}
.learn-more-link:hover {
    background:   var(--grd-learn-more-hover-bg);
    color:        var(--grd-learn-more-hover-color);
    transform:    translateY(-1px);
    box-shadow:   0 2px 8px rgba(0,0,0,0.2);
    border-color: var(--grd-learn-more-hover-bg);
}
.learn-more-link i { transition: transform 0.3s ease; }
.learn-more-link:hover i { transform: translateX(3px); }

/* ── Reviews List ── */
.reviews-list { background: var(--grd-review-bg); max-height: 400px; overflow-y: auto; }
.review-item  { padding: 20px; border-bottom: 1px solid var(--grd-border); transition: background-color 0.3s ease; }
.review-item:hover { background-color: rgba(0,0,0,0.02); }
.review-item:last-child { border-bottom: none; }

.reviewer-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; }
.reviewer-info   { display: flex; align-items: center; gap: 10px; }
.reviewer-photo  { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.reviewer-name   { font-weight: 600; color: var(--grd-reviewer-name); }

.review-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-stars { color: var(--grd-stars); font-size: 0.9em; }
.review-time  { font-size: 0.85em; color: var(--grd-meta-text); white-space: nowrap; }

.review-text { color: var(--grd-review-text); line-height: 1.6; margin: 0; }
.review-text p { margin: 0; }
.review-text p + p { margin-top: 10px; }

/* ── States ── */
.no-reviews  { padding: 30px 20px; text-align: center; color: var(--grd-meta-text); font-style: italic; }
.reviews-error { background: #ffe6e6; border: 1px solid #d63638; color: #d63638; padding: 15px; border-radius: 4px; text-align: center; margin: 0; }

/* ── Multiple Listings ── */
.google-reviews-multiple-container { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; align-items: stretch; }
.google-reviews-multiple-item {
    background:     var(--grd-container-bg);
    border:         1px solid var(--grd-container-border);
    border-radius:  12px;
    box-shadow:     0 4px 6px rgba(0,0,0,0.1);
    margin:         0;
    padding:        0;
    box-sizing:     border-box;
    float:          none;
    display:        flex;
    flex-direction: column;
    position:       relative;
}
/* Inner wrapper: clips ribbon and all content, inherits border-radius */
.grd-card-inner {
    display:        flex;
    flex-direction: column;
    flex:           1;
    overflow:       hidden;
    border-radius:  inherit;
    position:       relative;
    min-height:     0;
}
.google-reviews-multiple-item.featured-business {
    background-color: var(--grd-featured-card-bg);
    border:           var(--grd-featured-border-width) solid var(--grd-featured-border);
    box-shadow:       var(--grd-featured-shadow-val) var(--grd-featured-shadow);
    transform:        scale(var(--grd-featured-scale));
    transform-origin: center center;
    z-index:          2;
    transition:       transform 0.3s ease, box-shadow 0.3s ease;
}
.google-reviews-multiple-item.featured-business:hover {
    box-shadow: var(--grd-featured-shadow-val) var(--grd-featured-shadow), 0 0 0 2px var(--grd-featured-border);
}

/* ── Featured Badge ── */
.featured-badge.ribbon {
    position: absolute; top: 15px; right: -35px;
    background: var(--grd-featured-bg); color: var(--grd-featured-text);
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
    transform: rotate(45deg); width: 150px; z-index: 10;
    padding: 6px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px;
}
.featured-badge.banner {
    position: relative; background-color: var(--grd-featured-bg); color: var(--grd-featured-text);
    padding: 12px 15px; font-size: 0.75em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    text-align: center; z-index: 10; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border-radius: 0; margin: 0; width: 100%; box-sizing: border-box; line-height: 1.4;
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.featured-badge.banner + .google-reviews-directory-container,
.featured-badge.banner + .google-reviews-directory-container .company-header { border-radius: 0; }

.featured-badge.minimal {
    position: absolute; top: 10px; right: 10px;
    width: 30px; height: 30px;
    background-color: var(--grd-featured-bg); color: var(--grd-featured-text);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 0.7em; font-weight: 700; z-index: 10; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.featured-badge .elementor-icon { display: inline-flex; align-items: center; justify-content: center; }
.featured-badge .elementor-icon i   { color: var(--grd-featured-icon) !important; }
.featured-badge .elementor-icon svg { fill:  var(--grd-featured-icon) !important; }
.featured-badge.ribbon .elementor-icon,
.featured-badge.banner .elementor-icon { margin-right: 5px; }
.featured-badge.minimal .elementor-icon { width: 100%; height: 100%; }

/* ── Loading ── */
.google-reviews-loading { display: flex; justify-content: center; align-items: center; padding: 40px 20px; color: var(--grd-meta-text); }
.google-reviews-loading::after {
    content: ''; width: 20px; height: 20px;
    border: 2px solid #f3f3f3; border-top: 2px solid var(--grd-accent);
    border-radius: 50%; animation: grd-spin 1s linear infinite; margin-left: 10px;
}
@keyframes grd-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ── WordPress Widget ── */
.widget .google-reviews-directory-widget .google-reviews-directory-container { margin: 0; }
.widget .google-reviews-directory-widget .company-name { font-size: 1.3em; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .google-reviews-multiple-item { flex: 1 1 calc(50% - 10px); min-width: calc(50% - 10px); }
}
@media (max-width: 768px) {
    .google-reviews-multiple-item { flex: 1 1 calc(50% - 10px); min-width: calc(50% - 10px); }
    .reviewer-header { flex-direction: column; align-items: flex-start; }
    .review-meta { margin-top: 5px; }
}
@media (max-width: 480px) {
    .google-reviews-multiple-item { flex: 1 1 100%; min-width: 100%; }
    .google-reviews-multiple-item.featured-business { transform: scale(1); }
    .company-cover-container { height: 120px; }
    .company-logo-image { width: 60px; height: 60px; }
    .company-logo-container { margin-top: -40px; margin-bottom: -20px; }
    .company-header.has-logo { padding-top: 40px; }
    .featured-badge.ribbon { font-size: 10px; right: -30px; width: 130px; top: 12px; padding: 5px 0; }
    .rating-summary { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media print {
    .google-reviews-directory-container { box-shadow: none; border: 1px solid #000; }
    .learn-more-link { display: none; }
}