.elementor-852 .elementor-element.elementor-element-b4109aa > .elementor-container{min-height:396px;}.elementor-852 .elementor-element.elementor-element-b4109aa{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-852 .elementor-element.elementor-element-b4109aa > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}/* Start custom CSS for html, class: .elementor-element-c5dd4e5 */* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* ===== THE PHONE SHOP BRAND COLORS =====
       Primary brand color: deep tech blue (#046BD2 from the site's CSS)
       Secondary: neutral dark (#111827)
       Background: subtle radial gradient with light blue-white
    ========================================== */
    :root {
      --brand-blue: #046BD2;
      --brand-blue-dark: #0356a8;
      --brand-dark: #111827;
      --brand-gray: #475569;
      --brand-light: #f8fafc;
      --success-green: #10b981;
      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
      --radius-card: 20px;
      --radius-button: 9999px;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
      background: radial-gradient(circle at 10% 30%, rgba(4, 107, 210, 0.08) 0%, rgba(255, 255, 255, 0.98) 80%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      position: relative;
    }

    /* Subtle tech‑inspired network pattern overlay */
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: 
        linear-gradient(rgba(4, 107, 210, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(4, 107, 210, 0.03) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
      z-index: -2;
    }

    /* Decorative floating elements – abstract phones / connectors */
    body::after {
      content: '📱';
      position: fixed;
      bottom: 20px;
      right: 20px;
      font-size: 80px;
      opacity: 0.08;
      pointer-events: none;
      transform: rotate(-10deg);
      z-index: -1;
    }

    .floating-icon {
      position: fixed;
      font-size: 60px;
      opacity: 0.06;
      pointer-events: none;
      z-index: -1;
    }

    .floating-icon-1 {
      top: 15%;
      left: 5%;
      transform: rotate(15deg);
    }

    .floating-icon-2 {
      bottom: 12%;
      right: 6%;
      transform: rotate(-5deg);
    }

    /* Main card container */
    .thankyou-card {
      max-width: 560px;
      width: 100%;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(0px);
      border-radius: var(--radius-card);
      box-shadow: var(--shadow-lg), 0 0 0 1px rgba(4, 107, 210, 0.1);
      padding: 40px 32px 48px;
      text-align: center;
      transition: transform 0.2s ease;
      animation: fadeSlideUp 0.5s ease-out;
    }

    .thankyou-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 20px 25px -12px rgba(4, 107, 210, 0.15), 0 0 0 1px rgba(4, 107, 210, 0.15);
    }

    @keyframes fadeSlideUp {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Icon animation */
    .check-icon {
      background: linear-gradient(135deg, var(--success-green), #059669);
      width: 72px;
      height: 72px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
      box-shadow: 0 8px 20px rgba(16, 185, 129, 0.25);
    }

    .check-icon svg {
      width: 40px;
      height: 40px;
      stroke: white;
      stroke-width: 2;
      fill: none;
    }

    h1 {
      font-size: 2rem;
      font-weight: 700;
      background: linear-gradient(135deg, var(--brand-dark), var(--brand-blue));
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      margin-bottom: 12px;
      letter-spacing: -0.02em;
    }

    .order-status {
      display: inline-block;
      background: rgba(4, 107, 210, 0.1);
      padding: 6px 14px;
      border-radius: 40px;
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--brand-blue);
      margin-bottom: 24px;
    }

    .message {
      font-size: 1rem;
      line-height: 1.5;
      color: var(--brand-gray);
      margin-bottom: 28px;
    }

    .highlight {
      background: rgba(4, 107, 210, 0.08);
      padding: 12px 16px;
      border-radius: 16px;
      font-size: 0.9rem;
      color: var(--brand-dark);
      margin: 20px 0;
      font-weight: 500;
      border-left: 3px solid var(--brand-blue);
      text-align: left;
    }

    .highlight span {
      color: var(--brand-blue);
      font-weight: 700;
    }

    .action-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      justify-content: center;
      margin: 36px 0 28px;
    }
    
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 28px;
      border-radius: var(--radius-button);
      font-weight: 600;
      font-size: 0.95rem;
      transition: all 0.2s ease;
      text-decoration: none;
      cursor: pointer;
    }

    .btn-primary {
      background: var(--brand-blue);
      color: white;
      box-shadow: var(--shadow-sm);
    }

    .btn-primary:hover {
      background: var(--brand-blue-dark);
      transform: scale(1.02);
      box-shadow: var(--shadow-md);
    }

    .btn-outline {
      background: transparent;
      color: var(--brand-blue);
      border: 1.5px solid rgba(4, 107, 210, 0.3);
    }

    .btn-outline:hover {
      border-color: var(--brand-blue);
      background: rgba(4, 107, 210, 0.05);
      transform: scale(1.02);
    }

    .support-link {
      margin-top: 20px;
      font-size: 0.85rem;
      color: var(--brand-gray);
    }

    .support-link a {
      color: var(--brand-blue);
      text-decoration: none;
      font-weight: 500;
    }
 

    .support-link a:hover {
      text-decoration: underline;
    }

    hr {
      margin: 24px 0 16px;
      border: none;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(4, 107, 210, 0.2), transparent);
    }
.btn2:hover{
    color: #f7f7f7;
}
    /* Mobile fine-tuning */
    @media (max-width: 500px) {
      .thankyou-card {
        padding: 32px 20px 40px;
      }
      h1 {
        font-size: 1.75rem;
      }
      .action-buttons {
        flex-direction: column;
        align-items: stretch;
      }
      .btn {
        padding: 12px 20px;
      }
    }/* End custom CSS */