/* ==========================================================================
   Packages Redesign Stylesheet
   AlanWebs - Website Packages Page
   Uses the same design tokens as web_development_new.css
   ========================================================================== */

/* --- Packages Section Base --- */
.pkg_section {
   padding: 100px 0;
   background-color: var(--color-bg-light);
   position: relative;
}

.pkg_section_alt {
   background-color: var(--color-text-white);
}

/* --- Packages Grid Layout --- */
.pkg_grid {
   display: grid;
   gap: 30px;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
}

.pkg_grid_3 {
   grid-template-columns: repeat(3, 1fr);
}

.pkg_grid_1 {
   grid-template-columns: 1fr;
   max-width: 1100px;
}

/* --- Package Card --- */
.pkg_card {
   position: relative;
   border-radius: 20px;
   overflow: hidden;
   transition: var(--transition-smooth);
}

.pkg_card_inner {
   background: var(--color-text-white);
   border: 1px solid #e2e8f0;
   border-radius: 20px;
   padding: 40px 32px;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   transition: var(--transition-smooth);
   position: relative;
   overflow: hidden;
}

/* Subtle gradient overlay at top */
.pkg_card_inner::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: linear-gradient(90deg, var(--color-primary), #38bdf8);
   opacity: 0;
   transition: var(--transition-smooth);
}

.pkg_card:hover .pkg_card_inner {
   border-color: rgba(var(--color-primary-rgb), 0.25);
   transform: translateY(-8px);
   box-shadow: 0 25px 50px rgba(var(--color-primary-rgb), 0.08);
}

.pkg_card:hover .pkg_card_inner::before {
   opacity: 1;
}

/* --- Featured Card (Popular) --- */
.pkg_card_featured .pkg_card_inner {
   background: var(--color-dark-bg);
   border-color: rgba(var(--color-primary-rgb), 0.3);
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.pkg_card_featured .pkg_card_inner::before {
   opacity: 1;
   height: 4px;
}

.pkg_card_featured:hover .pkg_card_inner {
   box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}

.pkg_card_featured .pkg_ribbon {
   color: rgba(255, 255, 255, 0.6);
}

.pkg_card_featured .pkg_currency {
   color: rgba(255, 255, 255, 0.5);
}

.pkg_card_featured .pkg_amount {
   color: var(--color-text-white);
}

.pkg_card_featured .pkg_tagline {
   color: rgba(255, 255, 255, 0.5);
}

.pkg_card_featured .pkg_features_list li {
   color: rgba(255, 255, 255, 0.7);
   border-bottom-color: rgba(255, 255, 255, 0.06);
}

.pkg_card_featured .pkg_features_list li i {
   color: var(--color-primary);
}

/* Popular Badge */
.pkg_popular_badge {
   position: absolute;
   top: 16px;
   right: 16px;
   background: linear-gradient(135deg, var(--color-primary), #38bdf8);
   color: var(--color-dark-bg);
   font-family: var(--font-display);
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   padding: 6px 14px;
   border-radius: 100px;
   display: flex;
   align-items: center;
   gap: 5px;
   z-index: 2;
}

.pkg_popular_badge i {
   font-size: 10px;
}

/* --- Ribbon / Plan Name --- */
.pkg_ribbon {
   font-family: var(--font-display);
   font-size: 14px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 2px;
   color: #64748b;
   margin-bottom: 20px;
}

/* --- Price Block --- */
.pkg_price_block {
   display: flex;
   align-items: baseline;
   gap: 4px;
   margin-bottom: 8px;
}

.pkg_currency {
   font-family: var(--font-display);
   font-size: 20px;
   font-weight: 500;
   color: #94a3b8;
   align-self: flex-start;
   margin-top: 8px;
}

.pkg_amount {
   font-family: var(--font-display);
   font-size: 56px;
   font-weight: 800;
   color: var(--color-secondary);
   line-height: 1;
   letter-spacing: -2px;
}

.pkg_tagline {
   font-size: 14px;
   color: #94a3b8;
   margin-bottom: 28px;
   font-style: italic;
}

/* --- Features List --- */
.pkg_features_list {
   list-style: none;
   padding: 0;
   margin: 0 0 32px 0;
   width: 100%;
   text-align: left;
}

.pkg_features_list li {
   display: flex;
   align-items: center;
   gap: 12px;
   font-family: var(--font-body);
   font-size: 14px;
   color: #475569;
   padding: 10px 0;
   border-bottom: 1px solid #f1f5f9;
   line-height: 1.4;
}

.pkg_features_list li:last-child {
   border-bottom: none;
}

.pkg_features_list li i.fa-check {
   color: var(--color-primary);
   font-size: 12px;
   width: 22px;
   height: 22px;
   min-width: 22px;
   background: rgba(var(--color-primary-rgb), 0.08);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* --- CTA Button --- */
.pkg_cta_btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   max-width: 280px;
   background: var(--color-primary);
   color: var(--color-dark-bg) !important;
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 14px;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   padding: 16px 28px;
   border-radius: 12px;
   border: 2px solid var(--color-primary);
   text-decoration: none;
   transition: var(--transition-smooth);
   box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.25);
   margin-top: auto;
}

.pkg_cta_btn:hover {
   background: transparent;
   color: var(--color-primary) !important;
   transform: translateY(-3px);
   box-shadow: 0 10px 30px rgba(var(--color-primary-rgb), 0.35);
   text-decoration: none;
}

.pkg_cta_btn i {
   font-size: 12px;
   transition: transform 0.3s ease;
}

.pkg_cta_btn:hover i {
   transform: translateX(4px);
}

/* Featured card button override */
.pkg_card_featured .pkg_cta_btn {
   box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.4);
}

/* --- Ecommerce Card Specific --- */
.pkg_card_ecommerce .pkg_card_inner {
   text-align: left;
   padding: 50px 48px;
   background: linear-gradient(135deg, var(--color-text-white) 0%, #f8fafc 100%);
   border-color: rgba(var(--color-primary-rgb), 0.15);
}

.pkg_card_ecommerce .pkg_card_inner::before {
   opacity: 1;
   height: 4px;
   background: linear-gradient(90deg, var(--color-primary), #38bdf8);
}

.pkg_card_ecommerce .pkg_price_block {
   justify-content: flex-start;
}

.pkg_ecom_badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--color-primary);
   color: var(--color-dark-bg);
   font-family: var(--font-display);
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   padding: 6px 14px;
   border-radius: 100px;
   margin-bottom: 16px;
}

.pkg_ecom_features_grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
   width: 100%;
   margin: 16px 0 32px 0;
}

.pkg_col_title {
   font-family: var(--font-display);
   font-size: 15px;
   font-weight: 700;
   color: var(--color-secondary);
   margin-bottom: 16px;
   padding-bottom: 12px;
   border-bottom: 2px solid rgba(var(--color-primary-rgb), 0.15);
   display: flex;
   align-items: center;
   gap: 8px;
}

.pkg_col_title i {
   color: var(--color-primary);
   font-size: 14px;
}

.pkg_ecom_features_grid .pkg_features_list {
   margin-bottom: 0;
}

.pkg_cta_btn_ecom {
   max-width: 320px;
   background: var(--color-primary);
   color: var(--color-dark-bg) !important;
   border-color: var(--color-primary);
   box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.3);
}

.pkg_cta_btn_ecom:hover {
   background: transparent;
   color: var(--color-primary) !important;
   box-shadow: 0 10px 30px rgba(var(--color-primary-rgb), 0.35);
}

/* --- Why Choose Us Section --- */
.pkg_why_section {
   padding: 80px 0;
   background: var(--color-bg-alternate);
}

.pkg_why_grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
}

.pkg_why_card {
   background: var(--color-text-white);
   border: 1px solid #e2e8f0;
   border-radius: 16px;
   padding: 32px 24px;
   text-align: center;
   transition: var(--transition-smooth);
}

.pkg_why_card:hover {
   transform: translateY(-6px);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
   border-color: rgba(var(--color-primary-rgb), 0.2);
}

.pkg_why_icon {
   width: 56px;
   height: 56px;
   background: rgba(var(--color-primary-rgb), 0.08);
   color: var(--color-primary);
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   margin: 0 auto 16px auto;
   transition: var(--transition-smooth);
}

.pkg_why_card:hover .pkg_why_icon {
   background: var(--color-primary);
   color: var(--color-dark-bg);
   box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.3);
}

.pkg_why_card h4,
.pkg_why_card h3 {
   font-family: var(--font-display);
   font-size: 17px;
   font-weight: 700;
   color: var(--color-secondary);
   margin-bottom: 8px;
}

.pkg_why_card p {
   font-size: 13px;
   color: #64748b;
   line-height: 1.5;
   margin: 0;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (max-width: 1200px) {
   .pkg_amount {
      font-size: 48px;
   }
}

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

   /* Featured card spans full width on tablet */
   .pkg_card_featured {
      grid-column: 1 / -1;
      max-width: 500px;
      margin: 0 auto;
      width: 100%;
   }

   .pkg_ecom_features_grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .pkg_why_grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .pkg_section {
      padding: 80px 0;
   }

   .pkg_card_ecommerce .pkg_card_inner {
      padding: 40px 32px;
   }
}

@media (max-width: 768px) {
   .pkg_grid_3 {
      grid-template-columns: 1fr;
      max-width: 420px;
      margin: 0 auto;
   }

   .pkg_card_featured {
      max-width: 420px;
   }

   .pkg_ecom_features_grid {
      grid-template-columns: 1fr;
      gap: 20px;
   }

   .pkg_why_grid {
      grid-template-columns: 1fr 1fr;
   }

   .pkg_amount {
      font-size: 44px;
   }

   .pkg_section {
      padding: 60px 0;
   }

   .pkg_why_section {
      padding: 60px 0;
   }

   .pkg_card_ecommerce .pkg_card_inner {
      padding: 30px 24px;
   }
}

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

   .pkg_amount {
      font-size: 40px;
   }

   .pkg_card_inner {
      padding: 32px 20px;
   }

   .pkg_cta_btn {
      max-width: 100%;
   }

   .pkg_cta_btn_ecom {
      max-width: 100%;
   }
}