/*
 Theme Name:     Hello Elementor Child
 Theme URI:      https://elementor.com/hello-theme/
 Description:    Child theme for Hello Elementor
 Author:         IgniteDigital
 Template:       hello-elementor
 Version:        1.0.0
*/

/* Custom styles go below */


.task-block {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background-color: #f9f9f9;
}

.task-block h4 {
  margin-bottom: 15px;
  font-size: 18px;
}

.months-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
  gap: 10px;
}
.month-box {
  flex: 1 1 0%;
  min-width: 70px;
  text-align: center;
  background-color: #fff;
  border: 2px solid #ccc;
  padding: 10px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s ease;
  position: relative;
}


.month-box input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.month-box:hover {
  border-color: #0073aa;
}

.month-box.month-active {
  background-color: #e6f9e6;
  border-color: #2ecc71;
  color: #2c662d;
}
.month-box.month-selected {
  background-color: #e0f0ff;
  border-color: #3399ff;
  color: #1c4a80;
}
.header-btns {
    display: inline-block;
}

.btn-singin a {
    background: #64b9c5;
    color: #fff;
    border-radius:20px;
}

.btn-singin a:hover {
    background: #74d3e0 !important;
    
}

.btn-singup a {
    background: #fff;
    color: #000 !important;
    border-radius:20px;
}

.btn-singup a:hover {
    background: #64b9c5 !important;
    color:#fff !important;
    
}
/*  provider profile */ 
.um-custom-post-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.um-post-item {
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
    background-color: #fff;
    transition: box-shadow 0.3s ease;
}

.um-post-item:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.um-post-thumbnail img {
    width: 100px;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
}

.um-post-info {
    flex-grow: 1;
}

.um-post-title {
    margin: 0 0 8px;
    font-size: 18px;
}

.um-edit-post-button {
    display: inline-block;
    padding: 5px 12px;
    background-color: #0073aa;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
}

.um-edit-post-button:hover {
    background-color: #005e8a;
}

.no-thumbnail {
    width: 100px;
    height: 70px;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    border-radius: 6px;
}

/* services page */ 
.services-grid .service-item a,.contact-info a {
    color:#288B9B;
}
.service-category-title {
    font-family: "Lato", Sans-serif;
    font-weight: 600;
    color:#101828;
    margin-bottom:25px;
    font-size: 1.8em;
}
.services-basic-wrapper .service-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.services-detailed-wrapper .service-thumbnail {
    width:50%;
}
.services-basic-wrapper  .service-thumbnail {
    width:65%;
}
/* Styles for basic version */
.services-basic-wrapper .service-category {
    margin-bottom: 40px;
}
.services-basic-wrapper .services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.services-basic-wrapper .service-item {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 6px;
    text-align: center;
}
.services-basic-wrapper .service-thumbnail img {
    max-width: 100%;
    border-radius: 4px;
}
.services-basic-wrapper .service-title {
    margin-top: 10px;
    font-size: 1.1em;
}

/* Styles for detailed version */
.services-detailed-wrapper .service-category {
    margin-bottom: 50px;
}
.services-detailed-wrapper .services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}
.services-detailed-wrapper .service-item {
    background: #ffffff;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 8px;
}
.services-detailed-wrapper .service-thumbnail img {
    max-width: 100%;
    border-radius: 4px;
}

.services-detailed-wrapper .login-notice {
    color: #d9534f;
}


/* Basic layout */
.services-basic-wrapper .services-grid,
.services-detailed-wrapper .services-grid {
    display: grid;
    gap: 20px;
}

/* Dynamic columns */
.services-basic-wrapper.columns-2 .services-grid,
.services-detailed-wrapper.columns-2 .services-grid {
    grid-template-columns: repeat(2, 1fr);
}

.services-basic-wrapper.columns-3 .services-grid,
.services-detailed-wrapper.columns-3 .services-grid {
    grid-template-columns: repeat(3, 1fr);
}

.services-basic-wrapper.columns-4 .services-grid,
.services-detailed-wrapper.columns-4 .services-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* ====== single service ====== */
.single-service-hero {
    background-image: url('img/bg.webp');
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    text-align: center;
    padding: 20px;
}
.single-service-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color:#fff;
}
.single-service-hero .service-category {
    font-size: 1.1rem;
    color: #fff;
}
.service-logo {
    max-width: 120px;
    margin: 20px auto 0 0;
}
.service-logo img {
    max-width: 100%;
    height: auto;
    display: block;
}
.single-service-content {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}
.service-meta {
    display: flex;
    gap: 20px;
    font-size: 1rem;
    margin-bottom: 20px;
    color: #555;
    align-items: center;
}
.service-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}
.service-meta svg {
    width: 18px;
    height: 18px;
    fill: #278A9D;
}
.special-offers, .contact-info {
    background: #fafafa;
    padding: 20px;
    margin: 30px auto;
    max-width: 800px;
    border-radius: 8px;
}
.login-prompt {
    background: #fff;
    padding: 15px;
    border: 1px dashed #26899B;
    text-align: center;
    margin: 20px 0;
}
.login-prompt a {
    color: #fff;
    background: #26899B;
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none;
}
.login-prompt a:hover {
    color:#fff;
    background:#74D3E0;
}
@media(max-width: 600px) {
    .service-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}
