/* ไฟล์: visitor_style.css */

/* --- 1. Wrapper สำหรับการจัดกึ่งกลางและการเว้นระยะห่าง --- */
.pdpa-visitor-center-wrapper {
    /* จัดกึ่งกลางทั้งบล็อก */
    text-align: center; 
    width: 100%;
    /* เว้นระยะห่าง */
    margin-top: 40px; 
    margin-bottom: 40px;
    padding: 0 15px; /* ป้องกันติดขอบหน้าจอเล็ก */
}


/* --- 2. Container หลักของตัวนับ (Design Focus) --- */
.pdpa-visitor-counter-box {
    /* Layout: Flexbox จัดเรียงรายการ */
    display: inline-flex;
    align-items: center;
    gap: 20px; /* ระยะห่างระหว่างข้อความและตัวเลข */
    
    /* Design: สี, มุม, และมิติ */
    background: #fff; /* พื้นหลังสีฟ้าอ่อนมาก */
    border: 1px solid #ff9a57; /* ขอบสีฟ้า */
    border-radius: 12px;
    padding: 13px 25px;
    
    /* Shadow: เพิ่มมิติให้ดูพรีเมียม */
    box-shadow: 0 10px 20px rgba(0, 77, 153, 0.1), 0 3px 6px rgba(0, 77, 153, 0.05); 
}

/* --- 3. ข้อความกำกับ (Label) --- */
.pdpa-visitor-label {
    font-size: 17px;
    color: #333; /* สีน้ำเงินเข้ม */
    font-weight: 600; /* กึ่งหนา */
    letter-spacing: 0.2px;
}

/* --- 4. ตัวเลขแสดงผล (The Count) --- */
.pdpa-visitor-number-display {
    font-size: 20px; /* ตัวใหญ่เป็นพิเศษ */
    font-weight: 900px; /* ตัวหนาที่สุด */
    
    /* Highlight Design */
    color: #ff7300; /* สีฟ้าสดใสหลัก */
    background-color: #ffffff; /* พื้นหลังสีขาวสำหรับตัวเลข */
    padding: 5px 15px;
    border-radius: 8px;
    border: 3px solid #ff7300; /* ขอบหนาขึ้นเล็กน้อย */
    
    /* Animation (Optional) */
    transition: all 0.3s ease;
}

/* Effect เมื่อชี้เมาส์ */
.pdpa-visitor-counter-box:hover .pdpa-visitor-number-display {
    transform: scale(1.05) rotateZ(1deg); /* ขยายและเอียงเล็กน้อย */
    border-color: #0088f7;
    color: #0088f7;
}