/*----------------------------------------*/
/*  About us page style
/*----------------------------------------*/
.spl-weather-blocks-settings-page-wrapper {
  .splw-about-box {
    display: flex;
    background: #fff;
    margin: 0 auto;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.06);
  }

  .splw-about-img {
    width: 50%;
    flex-basis: 50%;
    flex-shrink: 0;
    overflow: hidden;
    align-self: center;

    span {
      text-align: center;
      display: block;
      margin-top: 12px;
      font-weight: 400;
      font-size: 13px;
      font-style: italic;
      color: #3C434A;
    }

    img {
      width: 100%;
      display: block;
      border-radius: 8px;
    }
  }

  .splw-about-info {
    margin-right: 40px;

    h3 {
      font-size: 26px;
      line-height: 32px;
      margin-bottom: 25px;
      color: #1D2327;
      font-weight: 600;
    }

    .splw-highlight-text {
      position: relative;
      display: inline-block;
      z-index: 2;

      &::after {
        content: '';
        position: absolute;
        bottom: 4px;
        left: 0;
        right: 0;
        height: 5px;
        background-color: #ffe0b3;
        border-radius: 2px;
        z-index: -1;
      }
    }

    p {
      line-height: 28px;
      margin-bottom: 15px;
      font-size: 15px;
      font-weight: 400;
      color: #3C434A;
    }
  }

  .splw-about-page {
    .splwb-video-section-btn {
      margin-top: 40px;

      a {
        padding: 14px 24px;
      }
    }
  }
}

.splw-recommended-plugins-wrapper {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 50px;
    a {
      text-decoration: none;
    }
    .splw-section-title {
      margin: 50px 0 40px 8px;
      font-size: 28px;
      font-weight: 600;
      line-height: 28px;
      color: #1d2327;
    }
}

/* More Plugins Section - Matching Figma Design */
.splw-more-plugins-section {
	margin-top: 60px;
	border-radius: 8px;

	.splw-more-plugins-header {
		text-align: center;
		margin-bottom: 40px;

		.splw-more-plugins-title {
			font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
			font-size: 24px;
			font-weight: 500;
			line-height: 1.4;
			color: #1e1e1e;
			margin: 0 0 10px 0;
		}

		.splw-more-plugins-subtitle {
			font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
			font-size: 14px;
			font-weight: 400;
			line-height: 20px;
			color: #4e4f52;
			margin: 0;
		}
	}

	.splw-more-plugins-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
		margin: 0 auto;

		@media (max-width: 992px) {
			grid-template-columns: repeat(2, 1fr);
		}

		@media (max-width: 640px) {
			grid-template-columns: 1fr;
		}
	}
}

.splw-plugin-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: 8px;
	padding: 24px;
	text-decoration: none;
	transition: box-shadow 0.2s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	border: 1px solid #e0e0e0;
	position: relative;

	&:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		border-color: #00a1ff;
	}

	.splw-plugin-card-icon {
		margin-bottom: 16px;
    img {
      width: 48px;
    }
    img,
		svg {
			border-radius: 4px;
      overflow: hidden;
		}
	}

	.splw-plugin-card-content {
		.splw-plugin-card-title {
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
			font-size: 20px;
			font-weight: 600;
			color: #333333;
			margin: 0 0 8px 0;
			line-height: 1.3;
		}

		.splw-plugin-card-desc {
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
			font-size: 14px;
			line-height: 1.5;
			color: #666666;
			margin: 0;
		}
	}

	.splw-plugin-card-arrow {
		position: absolute;
		top: 24px;
		right: 24px;
		opacity: 0;
		transition: opacity 0.2s ease;
		color: #00a1ff;
		width: 32px;
		height: 32px;
		border: 1px solid #00a2ff45;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;

		svg {
			display: block;
		}
	}

	&:hover .splw-plugin-card-arrow {
		opacity: 1;
	}
}

@media screen and (min-width: 1600px) {
  .spl-weather-pro-block-admin-page .plugin-card {
      width:48%;
      width: calc(49% - 8px)
  }

  .spl-weather-pro-block-admin-page .plugin-card:nth-child(odd) {
      clear: none;
      margin-left: 8px
  }

  .spl-weather-pro-block-admin-page .plugin-card:nth-child(2n) {
      margin-right: 0
  }

  .spl-weather-pro-block-admin-page .plugin-card:nth-child(3n+1) {
      clear: both;
      margin-left: 8px
  }

  .spl-weather-pro-block-admin-page .plugin-card:nth-child(3n) {
      margin-right: 8px
  }
}