/* Rashifal Generator - Tool Specific CSS */

.rf-date-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 20px;
    border: 2px solid #e5e7eb;
    flex-wrap: wrap;
}
.rf-date-label { font-size:14px; font-weight:700; color:#374151; white-space:nowrap; }
.rf-date-btns { display:flex; gap:8px; flex-wrap:wrap; }
.rf-day-btn {
    background:#f9fafb; border:1.5px solid #e5e7eb; border-radius:22px;
    padding:8px 18px; font-size:13px; cursor:pointer; color:#4b5563; font-weight:500;
    transition:all 0.2s;
}
.rf-day-btn:hover { background:#f5f0ff; border-color:#c084fc; color:#7c3aed; }
.rf-day-btn.active {
    background:linear-gradient(135deg,#a18cd1,#764ba2); color:#fff;
    font-weight:600; border-color:transparent;
    box-shadow:0 3px 10px rgba(118,75,162,0.3);
}

.rf-rashi-label { font-size:16px; font-weight:700; color:#1f2937; margin-bottom:14px; }

/* Rashi Grid */
.rf-rashi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}
.rf-rashi-card {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.rf-rashi-card:hover {
    border-color: #a18cd1;
    box-shadow: 0 4px 12px rgba(161,140,209,0.25);
    transform: translateY(-2px);
}
.rf-rashi-card.selected {
    background: linear-gradient(135deg,#f5f0ff,#fce4f6);
    border-color: #a18cd1;
    box-shadow: 0 4px 16px rgba(161,140,209,0.35);
}
.rf-rashi-emoji { font-size:28px; margin-bottom:6px; }
.rf-rashi-name  { font-size:14px; font-weight:700; color:#1f2937; }
.rf-rashi-eng   { font-size:11px; color:#6b7280; }
.rf-rashi-dates { font-size:10px; color:#9ca3af; margin-top:2px; }

/* Result */
.rf-result {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 2px solid #e5e7eb;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin-bottom: 24px;
}
.rf-res-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 28px;
    color: #1f2937;
}
.rf-res-emoji  { font-size:56px; flex-shrink:0; }
.rf-res-title  { font-size:18px; font-weight:800; margin-bottom:4px; }
.rf-res-date   { font-size:13px; opacity:0.8; margin-bottom:4px; }
.rf-res-lord   { font-size:12px; opacity:0.75; }

/* Score bars */
.rf-score-section { padding:20px 28px; border-bottom:2px solid #f3f4f6; }
.rf-score-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.rf-score-row:last-child { margin-bottom:0; }
.rf-score-label { font-size:13px; font-weight:600; color:#374151; width:90px; flex-shrink:0; }
.rf-score-track {
    flex: 1;
    height: 10px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
}
.rf-score-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.8s ease;
}
.rf-score-val { font-size:12px; color:#6b7280; width:55px; flex-shrink:0; text-align:right; }

/* Lucky row */
.rf-lucky-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 28px;
    background: linear-gradient(135deg, #fdf4ff, #fce4f6);
    border-bottom: 2px solid #f3f4f6;
}
.rf-lucky-item { font-size:13px; color:#374151; }

/* Prediction grid */
.rf-pred-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 20px 28px;
}
.rf-pred-card {
    border-radius: 14px;
    padding: 16px;
    border: 1.5px solid rgba(0,0,0,0.06);
}
.rf-pred-icon  { font-size:24px; margin-bottom:6px; }
.rf-pred-title { font-size:14px; font-weight:700; color:#1f2937; margin-bottom:8px; }
.rf-pred-text  { font-size:13px; color:#374151; line-height:1.7; }

/* Advice */
.rf-advice {
    background: linear-gradient(135deg,#fffbf0,#fef3c7);
    padding: 16px 28px;
    font-size:13px;
    color:#78350f;
    border-top: 2px solid #fde68a;
    line-height: 1.7;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.info-item {
    padding: 20px;
    background: white;
    border-radius: 10px;
    color: #666;
}

.info-item strong {
    display: block;
    color: #667eea;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 768px) {
	.info-grid {
        grid-template-columns: 1fr;
    }
    .rf-rashi-grid { grid-template-columns: repeat(4, 1fr); }
    .rf-pred-grid  { grid-template-columns: 1fr; }
    .rf-res-header { flex-direction:column; text-align:center; }
}
@media (max-width: 480px) {
    .rf-rashi-grid { grid-template-columns: repeat(3, 1fr); }
    .rf-res-emoji  { font-size:40px; }
}