/* Styles for Safari App */
#app-safari {
    background-color: #f2f2f7;
    flex-direction: column;
    justify-content: space-between;
}

.safari-content {
    padding: 60px 20px 20px 20px;
    flex-grow: 1;
}

.safari-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
}

.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 20px;
}

.favorite-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.favorite-icon-bg {
    width: 60px;
    height: 60px;
    background-color: #ddd;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.favorite-icon-letter {
    font-size: 24px;
    font-weight: 500;
    color: white;
}

.favorite-name {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.safari-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px 30px 15px;
    background-color: #f8f8f8;
    border-top: 1px solid #ddd;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
}

.address-bar {
    flex-grow: 1;
    height: 36px;
    margin: 0 10px;
    background-color: #e9e9eb;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 14px;
    color: #333;
}

.lock-icon {
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23555' d='M144 144v-48c0-26.5 21.5-48 48-48h64c26.5 0 48 21.5 48 48v48H144zM448 192V144C448 64.5 383.5 0 304 0H144C64.5 0 0 64.5 0 144v48h448zM0 480c0 17.7 14.3 32 32 32H416c17.7 0 32-14.3 32-32V224H0v256z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
    margin-right: 6px;
}

.address-text {
    flex-grow: 1;
    text-align: center;
}

.reload-icon {
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23555' d='M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1C-1.8 184.2-1.9 295.5 95.5 381.7s228.7 86.2 315.8-1l41.5-41.5c9.2-9.2 9.2-24.2 0-33.3s-24.2-9.2-33.3 0L376.5 348c-63.5 63.5-166.7 63.5-230.2 0s-63.5-166.7 0-230.2c62.3-62.3 162.1-63.5 225.8-4.2l-31.5 31.5c-4.7 4.7-7 11.1-7 17.7V224z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 6px;
    cursor: pointer;
}

.safari-nav-icons-left, .safari-nav-icons-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.safari-nav-icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: 0.8;
}
.safari-nav-icon.disabled {
    opacity: 0.3;
    cursor: default;
}

.back-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='black' d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E"); }
.forward-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='black' d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E"); }
.share-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M307 34.8c-11.5 5.1-19 16.6-19 29.2v64H176C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c12.4 6.7 27.3-1.6 33.1-13.8s-1.6-27.3-13.8-33.1C111.5 426.6 48 386.7 48 304c0-61.9 50.1-112 112-112h128v64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/svg%3E"); }
.tabs-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='black' d='M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32V352h0V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM32 96V416c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V96H32z'/%3E%3C/svg%3E"); }