/**
 * Monthly Catascopes Plugin Styles
 * 
 * Styling for the catascope display with various position and alignment options
 */

.monthly-catascope { max-width: 100%; }

.catascope-header-con { background: linear-gradient(40deg,rgb(254, 243, 199) 0%, rgb(253, 230, 138) 100%); border-radius: 20px; padding: 30px; color: white; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden; border: 4px solid rgba(206, 154, 42, 0.27); }
.catascope-description { margin-bottom: 30px; line-height: 1.6; color: var(--priColor) !important; background: #A1A1EC42; display: flex; align-items: center; padding: 2rem 0 2rem 1.5rem; border-left: 5px solid var(--priColor); border-radius: .8rem; font-style: italic; }
.catascope-description p {text-align: center;}
.catascope-also-known { padding: 1rem 3rem; font-weight: 600;}

/* Position Variations */
.catascope-position-left-sidebar,
.catascope-position-right-sidebar {
    max-width: 350px;
    margin: 10px;
}

.sub-details { background: var(--bgColor); margin: 3rem 0 0; padding: 2rem; border-radius: .5rem; }
.catascope-subtitle { font-style: initial !important; }
.main-content p:last-of-type { margin: 0; padding: 0;}
 .calendar { font-family: var(--priFont); text-transform: uppercase; font-size: 1.3rem; position: relative;}
.calendar-con { display: flex; justify-content: center; gap: 0.5rem; }
.sign-image img { clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); }
.sign-image {width: 50%;}


.catascope-position-compact {
    max-width: 600px;
    padding: 15px;
}

.catascope-position-compact .catascope-title {
    font-size: 22px;
}

.catascope-position-compact .zodiac-sign-section {
    padding: 15px;
    margin-bottom: 15px;
}

.catascope-position-minimal {
    max-width: 500px;
    padding: 15px;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.catascope-position-minimal .catascope-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
}

.catascope-position-minimal .catascope-title {
    font-size: 20px;
}

.catascope-position-minimal .zodiac-sign-section {
    background: #f8f9fa;
    border-left: 2px solid #3498db;
    padding: 15px;
}

/* Alignment Variations */
.catascope-align-left {
    text-align: left;
}

.catascope-align-left .catascope-header {
    text-align: left;
}

.catascope-align-left .catascope-zodiac-signs h3 {
    text-align: left;
}

.catascope-align-center {
    text-align: center;
}

.catascope-align-center .catascope-description,
.catascope-align-center .horoscope-text {
    text-align: left;
}

.catascope-align-right {
    text-align: right;
}

.catascope-align-right .catascope-header {
    text-align: right;
}

.catascope-align-right .catascope-zodiac-signs h3 {
    text-align: right;
}

.catascope-align-right .catascope-description,
.catascope-align-right .horoscope-text {
    text-align: left;
}

/* Header Styles */
.catascope-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #ddd;
}

.catascope-title {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 10px;
    font-weight: bold;
}

.catascope-theme { font-weight: 600;}
.zodiac-sign-con { display: flex; flex-wrap: wrap; gap: 3rem; margin: 4rem 0 0; }


.catascope-theme h3 {
    color: #8e44ad;
    font-size: 20px;
    margin: 0;
    font-weight: 600;
}

/* Description Styles */


/* Zodiac Signs Styles */
.catascope-zodiac-signs h3 {
    color: #2c3e50;
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

.zodiac-sign-section { padding: 1.5rem; background: var(--btnColor); border: 4px solid rgba(206, 154, 42, 0.27); border-radius: 1rem; width: 31%; }
.horoscope-text p { font-style: italic;}


.sign-name {
    color: #2980b9;
    font-size: 20px;
    margin-bottom: 15px;
    font-weight: bold;
    text-align: left;
}

.horoscope-text {
    line-height: 1.6;
    margin: 2rem 0 0;
}

.sign-extras { margin: 3rem 0 0 auto; color: var(--priColor) !important; background: #A1A1EC42; padding: 2rem 0 2rem 1.5rem; border-left: 5px solid var(--priColor); border-radius: .8rem; font-style: italic; }

.lucky-nap-spot, 
.cat-tip {
    margin: 8px 0;
    color: #2c3e50;
    text-align: left;
}

/* Not Available Message */
.catascope-not-available {
    text-align: center;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 8px;
    color: #7f8c8d;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
    .monthly-catascope {
        margin: 10px;
        padding: 15px;
    }
    
    .catascope-position-left-sidebar,
    .catascope-position-right-sidebar {
        max-width: 100%;
        margin: 10px 0;
    }
    
    .catascope-title {
        font-size: 24px;
    }
    
    .zodiac-sign-section {
        padding: 15px;
    }
    
    .catascope-position-compact .catascope-title,
    .catascope-position-minimal .catascope-title {
        font-size: 20px;
    }
}

/* Monthly Catascopes Styles */

/* Extra notes under zodiac sign */
.monthly-catascope .zodiac-sign-section .extra-notes {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #ddd;
  color: #555;
  font-style: italic;
}
.zodiac-heading { display: flex; justify-content: space-between; align-items: center; position: relative; padding: 2rem 0 0;}
.zodiac-heading::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; background: #D5B54A; height: 4px; border-radius: 5rem;
}


.monthly-catascope .zodiac-sign-section .extra-notes p {
  margin: 0;
}


/* Sign image at the top of each zodiac sign */
.monthly-catascope .zodiac-sign-section .sign-image {
  margin-bottom: 10px;
}
.monthly-catascope .zodiac-sign-section .sign-image img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Bottom notes after all zodiac signs */
.monthly-catascope .catascope-bottom-notes {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px dashed #ddd;
  color: #555;
}

.monthly-catascope .catascope-bottom-notes p {
  margin: 0;
}

/* Moon Event block at the bottom */
.monthly-catascope .catascope-moon-event {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid #e5e5e5;
}
.monthly-catascope .catascope-moon-event p {
  margin: 0;
  font-weight: 500;
  color: #333;
}

/* Subtitle under the Full Moon Title */
.monthly-catascope .catascope-subtitle {
  font-style: italic;
  color: #555;
  margin-top: 4px;
}
.monthly-catascope .catascope-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}
.monthly-catascope .title-block {
  text-align: center;
}
.monthly-catascope .title-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
@media (max-width: 480px) {
  .monthly-catascope .title-icon {
    width: 36px;
    height: 36px;
  }
  .monthly-catascope .catascope-title-row {
    gap: 8px;
  }
}